/* ============================================================
   YOLDAŞ WEB TEST V29 — CHAT (ISOLATED)
   - Global style_v29.css'e dokunmaz
   - Tüm sınıflar ychat- prefiksli
   ============================================================ */

:root{
  --ychat-bg0:#07060a;
  --ychat-bg1:#0b0a10;
  --ychat-panel:#0e0c14;
  --ychat-panel2:#0b0a11;
  --ychat-border:rgba(255,255,255,.08);
  --ychat-border2:rgba(255,255,255,.12);
  --ychat-text:rgba(255,255,255,.92);
  --ychat-sub:rgba(255,255,255,.65);
  --ychat-dim:rgba(255,255,255,.45);

  --ychat-ac1:#ff38d1;
  --ychat-ac2:#8a5bff;
  --ychat-ac3:#ff7bdc;

  --ychat-good:#38f2b0;
  --ychat-warn:#ffcc66;
  --ychat-bad:#ff5a7a;

  --ychat-radius:18px;
  --ychat-radius2:22px;
  --ychat-shadow: 0 22px 70px rgba(0,0,0,.55);
}

/* BODY */
.ychat-body{
  margin:0;
  padding:0;
  background:
    radial-gradient(1200px 900px at 20% 15%, rgba(255,56,209,.12), transparent 55%),
    radial-gradient(1000px 800px at 80% 10%, rgba(138,91,255,.10), transparent 55%),
    radial-gradient(900px 700px at 50% 80%, rgba(255,123,220,.07), transparent 60%),
    linear-gradient(180deg, var(--ychat-bg0), var(--ychat-bg1));
  color: var(--ychat-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* SHELL */
.ychat-shell{
  min-height:100vh;
  display:flex;
}

/* SIDEBAR */
.ychat-side{
  width: 280px;
  padding: 18px 16px;
  border-right: 1px solid var(--ychat-border);
  background:
    radial-gradient(900px 700px at 30% 20%, rgba(255,56,209,.10), transparent 55%),
    linear-gradient(180deg, rgba(20,18,28,.92), rgba(10,8,16,.92));
  position: sticky;
  top: 0;
  height: 100vh;
  overflow:auto;
}

.ychat-brand{
  padding: 14px 14px 12px 14px;
  border:1px solid var(--ychat-border);
  border-radius: var(--ychat-radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

.ychat-brand-title{
  font-weight: 900;
  letter-spacing: .6px;
  font-size: 14px;
  text-transform: uppercase;
}

.ychat-brand-sub{
  margin-top: 6px;
  font-size: 12px;
  color: var(--ychat-sub);
}

/* NAV */
.ychat-nav{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ychat-nav-item{
  text-decoration:none;
  color: var(--ychat-text);
  padding: 12px 14px;
  border-radius: 16px;
  border:1px solid var(--ychat-border);
  background: rgba(255,255,255,.03);
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.ychat-nav-item:hover{
  transform: translateY(-1px);
  border-color: rgba(255,56,209,.35);
  background: rgba(255,56,209,.08);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

.ychat-nav-item.active{
  border-color: rgba(255,56,209,.55);
  background:
    linear-gradient(180deg, rgba(255,56,209,.22), rgba(138,91,255,.10));
  box-shadow: 0 18px 48px rgba(255,56,209,.10);
}

.ychat-nav-item.ghost{
  opacity:.85;
}

.ychat-nav-sep{
  height:1px;
  background: var(--ychat-border);
  margin: 6px 6px;
}

/* Sidebar footer */
.ychat-side-footer{
  margin-top: 16px;
  padding: 12px 12px;
  border:1px solid var(--ychat-border);
  border-radius: var(--ychat-radius2);
  background: rgba(0,0,0,.20);
}

.ychat-chip-row{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
}

.ychat-chip{
  font-size: 12px;
  color: var(--ychat-sub);
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid var(--ychat-border);
  background: rgba(255,255,255,.03);
}

.ychat-mini{
  margin-top: 10px;
  font-size: 12px;
  color: var(--ychat-dim);
  line-height: 1.35;
}

/* MAIN */
.ychat-main{
  flex:1;
  padding: 18px 18px 22px 18px;
}

.ychat-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  padding: 16px 16px;
  border:1px solid var(--ychat-border);
  border-radius: var(--ychat-radius2);
  background:
    radial-gradient(1000px 700px at 25% 40%, rgba(255,56,209,.09), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.18));
  box-shadow: var(--ychat-shadow);
}

.ychat-title{
  margin:0;
  font-size: 44px;
  letter-spacing: .2px;
}

.ychat-meta{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.ychat-pill{
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  border:1px solid var(--ychat-border);
  color: var(--ychat-sub);
  background: rgba(255,255,255,.03);
}

/* Buttons (daha canlı / daha prof) */
.ychat-btn, .ychat-send, .ychat-qbtn{
  border: 1px solid rgba(255,56,209,.35);
  color: rgba(255,255,255,.95);
  border-radius: 16px;
  padding: 10px 14px;
  cursor:pointer;
  background:
    radial-gradient(140px 120px at 30% 20%, rgba(255,56,209,.25), transparent 60%),
    linear-gradient(180deg, rgba(255,56,209,.18), rgba(138,91,255,.12));
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  transition: transform .12s ease, filter .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.ychat-btn:hover, .ychat-send:hover, .ychat-qbtn:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
  border-color: rgba(255,56,209,.60);
  box-shadow: 0 22px 60px rgba(255,56,209,.10);
}

.ychat-btn:active, .ychat-send:active, .ychat-qbtn:active{
  transform: translateY(0px) scale(.99);
}

.ychat-btn.alt{
  border-color: rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
}

.ychat-grid{
  display:grid;
  grid-template-columns: 1.55fr .85fr;
  gap: 14px;
  margin-top: 14px;
}

/* Cards */
.ychat-card{
  border:1px solid var(--ychat-border);
  border-radius: var(--ychat-radius2);
  background:
    radial-gradient(1200px 700px at 35% 35%, rgba(255,56,209,.07), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.20));
  box-shadow: var(--ychat-shadow);
  overflow: hidden;
}

.ychat-card-head{
  padding: 14px 14px 12px 14px;
  border-bottom: 1px solid var(--ychat-border);
  background: rgba(0,0,0,.18);
}

.ychat-card-title{
  font-weight: 800;
  letter-spacing: .2px;
}

.ychat-card-sub{
  margin-top: 6px;
  font-size: 12px;
  color: var(--ychat-sub);
}

/* Chat log */
.ychat-chatlog{
  padding: 14px;
  height: calc(100vh - 310px);
  overflow:auto;
  scroll-behavior:smooth;
}

.ychat-msg{
  display:flex;
  gap:10px;
  margin-bottom: 12px;
}

.ychat-avatar{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border:1px solid var(--ychat-border);
  background:
    radial-gradient(20px 20px at 30% 30%, rgba(255,56,209,.35), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.28));
  flex: 0 0 auto;
}

.ychat-bubble{
  flex:1;
  border-radius: 18px;
  border:1px solid var(--ychat-border);
  background: rgba(0,0,0,.18);
  padding: 10px 12px;
}

.ychat-bubble.me{
  border-color: rgba(255,56,209,.45);
  background:
    radial-gradient(240px 120px at 20% 20%, rgba(255,56,209,.20), transparent 60%),
    rgba(0,0,0,.18);
}

.ychat-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.ychat-who{
  font-weight: 800;
  font-size: 13px;
}

.ychat-ts{
  font-size: 11px;
  color: var(--ychat-dim);
}

.ychat-text{
  margin-top: 6px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.45;
  color: rgba(255,255,255,.92);
}

.ychat-sys{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}

.ychat-err{
  border-color: rgba(255,90,122,.55);
  background: rgba(255,90,122,.08);
}

.ychat-ok{
  border-color: rgba(56,242,176,.45);
  background: rgba(56,242,176,.08);
}

/* Composer */
.ychat-composer{
  padding: 12px 14px 14px 14px;
  border-top: 1px solid var(--ychat-border);
  background: rgba(0,0,0,.16);
}

.ychat-composer-row{
  display:flex;
  gap:10px;
  align-items: stretch;
}

.ychat-input{
  flex:1;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.92);
  padding: 12px 12px;
  outline:none;
  resize: none;
}

.ychat-input:focus{
  border-color: rgba(255,56,209,.55);
  box-shadow: 0 0 0 4px rgba(255,56,209,.10);
}

.ychat-send{
  min-width: 132px;
  font-weight: 900;
  letter-spacing: .2px;
}

.ychat-hints{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--ychat-dim);
}

.ychat-hints code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 10px;
  border:1px solid var(--ychat-border);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
}

.ychat-hint.right{
  opacity:.9;
}

/* Right panel */
.ychat-quick{
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ychat-qbtn{
  text-align:left;
  padding: 10px 12px;
  border-radius: 16px;
  border-color: rgba(255,56,209,.28);
  background:
    radial-gradient(180px 110px at 25% 25%, rgba(255,56,209,.16), transparent 60%),
    rgba(0,0,0,.18);
}

.ychat-sep{
  height:1px;
  background: var(--ychat-border);
  margin: 0 14px;
}

.ychat-kv{
  padding: 14px;
  display:grid;
  grid-template-columns: 110px 1fr;
  gap:10px 12px;
  font-size: 12px;
  color: var(--ychat-sub);
}

.ychat-k{
  color: var(--ychat-dim);
}

.ychat-v{
  color: rgba(255,255,255,.85);
}

.ychat-note{
  padding: 14px;
}

.ychat-note-title{
  font-weight: 900;
  margin-bottom: 6px;
}

.ychat-note-body{
  font-size: 12px;
  color: var(--ychat-sub);
  line-height: 1.45;
}

/* Footer */
.ychat-footer{
  margin-top: 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border:1px solid var(--ychat-border);
  border-radius: var(--ychat-radius2);
  background: rgba(0,0,0,.18);
}

.ychat-badge{
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,56,209,.35);
  background: rgba(255,56,209,.12);
}

.ychat-muted{
  font-size: 12px;
  color: var(--ychat-dim);
}

/* Responsive */
@media (max-width: 1100px){
  .ychat-grid{
    grid-template-columns: 1fr;
  }
  .ychat-chatlog{
    height: calc(100vh - 360px);
  }
}

@media (max-width: 860px){
  .ychat-shell{
    flex-direction:column;
  }
  .ychat-side{
    width: auto;
    height: auto;
    position: relative;
    border-right: none;
    border-bottom: 1px solid var(--ychat-border);
  }
  .ychat-title{
    font-size: 34px;
  }
}