/* ══════════════════════════════════════════════════════════════════
   SOHBET: BÜYÜTÜLEBİLİR PANEL + GENİŞ (DISCORD) DÜZEN — v4.28
   EN SON yüklenir (24-surface.css'ten sonra) ki yüzey katmanının
   !important kuralları geniş düzeni bozmasın.

   İKİ DURUM:
     • dar  (varsayılan)  → bugünkü hâli: üstte sekmeler, tek sütun
     • geniş (.chat-wide) → solda kanal çubuğu, sağda mesajlar
   Geçiş EŞİĞE göre: panel PF_CHAT_WIDE_MIN px'i geçince chat-dock.js
   .chat-wide sınıfını ekler. Yani hem sürükleyerek hem büyüt
   düğmesiyle aynı düzene varılır — tek kod yolu.
   ══════════════════════════════════════════════════════════════════ */

/* Sürükleme tutamağı (sol-üst köşe): panel sol-altta duruyor, bu yüzden
   büyütme yönü yukarı-sağ DEĞİL yukarı. Köşe görsel olarak da belli olsun. */
#chat-resize{
  position:absolute; top:0; right:0; width:18px; height:18px;
  cursor:nesw-resize; z-index:6; touch-action:none;
  background:
    linear-gradient(45deg, transparent 0 46%, rgba(var(--shine-rgb),.28) 46% 54%, transparent 54%),
    linear-gradient(45deg, transparent 0 66%, rgba(var(--shine-rgb),.18) 66% 74%, transparent 74%);
  opacity:.5; transition:opacity .15s ease;
}
#chat-resize:hover{ opacity:1; }

/* Başlıktaki büyüt/küçült düğmesi */
.ch-expand{
  background:none; border:none; color:var(--muted); cursor:pointer;
  width:26px; height:26px; flex-shrink:0; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, color .15s ease;
}
.ch-expand:hover{ background:rgba(var(--shine-rgb),.08); color:var(--txt); }

/* Yeniden boyutlandırma sırasında metin seçilmesin, canvas olay kapmasın */
body.chat-resizing{ user-select:none; cursor:nesw-resize; }
body.chat-resizing #chat-panel{ transition:none !important; }

/* ── GENİŞ DÜZEN ────────────────────────────────────────────────── */
/* .open ŞART: '#chat-panel.open{display:flex}' ile aynı özgüllükteyiz
   ve bu dosya SONRA yükleniyor — '.open' olmadan yazarsak panel
   kapatıldığında da display:grid kalıp EKRANDA DURUYORDU. */
#chat-panel.chat-wide.open{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto 1fr auto;
  grid-template-areas:
    "yan baslik"
    "yan mesajlar"
    "yan altlik";
}
#chat-panel.chat-wide #chat-header  { grid-area:baslik; }
#chat-panel.chat-wide #chat-messages{ grid-area:mesajlar; }
#chat-panel.chat-wide #chat-footer  { grid-area:altlik; }
#chat-panel.chat-wide #chat-side    { display:flex; grid-area:yan; }

/* Dar düzende kenar çubuğu YOK */
#chat-side{ display:none; }

#chat-side{
  width:186px; flex-shrink:0; flex-direction:column; gap:.15rem;
  padding:.55rem .45rem; overflow-y:auto;
  background:rgba(var(--surf2-rgb),.55);
  border-right:1px solid rgba(var(--shine-rgb),.07);
}
.chs-label{
  font-size:.54rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); padding:.5rem .5rem .25rem; display:flex;
  align-items:center; justify-content:space-between; gap:.3rem;
}
.chs-item{
  display:flex; align-items:center; gap:.42rem; width:100%;
  background:none; border:none; color:var(--muted); cursor:pointer;
  padding:.36rem .5rem; border-radius:7px; text-align:left;
  font-family:inherit; font-size:.74rem; font-weight:600;
  transition:background .12s ease, color .12s ease;
}
.chs-item:hover{ background:rgba(var(--shine-rgb),.07); color:var(--txt); }
.chs-item.active{ background:rgba(var(--accent-rgb),.16); color:var(--txt); }
.chs-item .chs-ic{ flex-shrink:0; opacity:.75; display:flex; }
.chs-item .chs-txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.chs-item .chs-dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0;
}
.chs-new{
  color:var(--accent); font-weight:700; border:1px dashed rgba(var(--accent-rgb),.35);
  justify-content:center; margin-top:.3rem;
}
.chs-new:hover{ background:rgba(var(--accent-rgb),.12); }
.chs-bos{ font-size:.64rem; color:var(--muted); opacity:.65; padding:.25rem .5rem; }

/* Geniş düzende sekmeler kenar çubuğuna taşındığı için üstte gizlenir */
#chat-panel.chat-wide #chat-tabs{ display:none; }
#chat-panel.chat-wide #chat-header{ padding:.6rem .85rem; }
#chat-panel.chat-wide #chat-title{ display:flex; }
#chat-title{ display:none; align-items:center; gap:.4rem; font-weight:800;
  font-size:.82rem; color:var(--txt); flex:1; min-width:0; }
#chat-title .cht-txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Geniş düzende mesajlar daha ferah */
#chat-panel.chat-wide #chat-messages{ padding:.7rem .9rem; }
#chat-panel.chat-wide .cm-bubble{ max-width:min(680px, 88%); }

/* ── YANIT (alıntı) ─────────────────────────────────────────────── */
.cm-reply{
  display:flex; align-items:center; gap:.32rem; margin-bottom:.22rem;
  padding:.2rem .45rem; border-radius:6px;
  border-left:2px solid rgba(var(--accent-rgb),.7);
  background:rgba(var(--shine-rgb),.05);
  font-size:.66rem; color:var(--muted); cursor:pointer;
  max-width:100%; overflow:hidden;
}
.cm-reply:hover{ background:rgba(var(--shine-rgb),.1); }
.cm-reply-name{ font-weight:800; color:var(--accent); flex-shrink:0; }
.cm-reply-txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.85; }

/* Balonun üstünde beliren yanıtla düğmesi.
   Satır kapsayıcısı chat.js'te '.cm user' / '.cm other' — '.cm-row' YOK. */
#chat-messages .cm{ position:relative; }
.cm-act{
  /* ESKİDEN top:-8px;right:4px idi — bir ÜSTTEKİ mesajın ve oradaki
     düğmelerin üzerine biniyor, tıklamayı yiyordu. Artık satırın BOŞ
     tarafında (karşı mesajlarda sağda, kendi mesajlarımda solda) ve
     dikey ortada duruyor; hiçbir balonu örtmüyor. */
  position:absolute; top:50%; transform:translateY(-50%);
  display:none; gap:2px;
  background:var(--surf2); border:1px solid var(--bdr);
  border-radius:7px; padding:1px; z-index:12;
  box-shadow:0 3px 10px rgba(0,0,0,.35);
}
/* Satır İÇERİK genişliğinde (flex, shrink-to-fit) — 'right:4px' demek
   balonun İÇİ demekti, düğme metnin üzerine biniyordu. 'left:100%' satırın
   BİTTİĞİ yer, yani balonun hemen dışındaki boşluk. */
#chat-messages .cm.other .cm-act{ left:100%;  right:auto; margin-left:5px; }
#chat-messages .cm.user  .cm-act{ right:100%; left:auto;  margin-right:5px; }
#chat-messages .cm:hover .cm-act{ display:flex; }
.cm-act button{
  background:none; border:none; color:var(--muted); cursor:pointer;
  width:24px; height:22px; border-radius:5px; display:flex;
  align-items:center; justify-content:center;
}
.cm-act button:hover{ background:rgba(var(--shine-rgb),.1); color:var(--txt); }

/* Yanıtlanıyor çubuğu (girdinin üstünde) */
#chat-replybar{
  display:none; align-items:center; gap:.4rem; flex-shrink:0;
  padding:.35rem .7rem; font-size:.68rem; color:var(--muted);
  background:rgba(var(--accent-rgb),.07);
  border-top:1px solid rgba(var(--shine-rgb),.06);
}
#chat-replybar.show{ display:flex; }
#chat-replybar .crb-name{ font-weight:800; color:var(--accent); }
#chat-replybar .crb-txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
#chat-replybar button{
  background:none; border:none; color:var(--muted); cursor:pointer;
  width:20px; height:20px; border-radius:5px; flex-shrink:0;
}
#chat-replybar button:hover{ color:var(--txt); background:rgba(var(--shine-rgb),.1); }

/* ── ETİKETLEME (@) ─────────────────────────────────────────────── */
.cm-mention{
  color:var(--accent); background:rgba(var(--accent-rgb),.14);
  border-radius:4px; padding:0 3px; font-weight:700; cursor:pointer;
}
.cm-mention:hover{ background:rgba(var(--accent-rgb),.24); }
/* Bana atılan etiket: balonun tamamı işaretlensin ki gözden kaçmasın */
#chat-messages .cm.cm-mentioned .cm-bubble{
  background:rgba(var(--accent-rgb),.1) !important;
  box-shadow:inset 2px 0 0 var(--accent);
}

/* @ önerileri */
#chat-mentions{
  display:none; position:absolute; left:8px; right:8px; bottom:100%;
  margin-bottom:4px; z-index:8; max-height:168px; overflow-y:auto;
  background:var(--surf2); border:1px solid var(--bdr);
  border-radius:10px; box-shadow:0 8px 26px rgba(0,0,0,.5); padding:.25rem;
}
#chat-mentions.show{ display:block; }
.chm-item{
  display:flex; align-items:center; gap:.45rem; width:100%;
  background:none; border:none; color:var(--txt); cursor:pointer;
  padding:.36rem .5rem; border-radius:7px; text-align:left;
  font-family:inherit; font-size:.76rem;
}
.chm-item:hover, .chm-item.sel{ background:rgba(var(--accent-rgb),.16); }
#chat-footer{ position:relative; }   /* öneri kutusu buna göre konumlanır */

/* ── MOBİL ──────────────────────────────────────────────────────
   Telefonda panel zaten tam genişlikte alt sayfa. Serbest
   boyutlandırma parmağa uygun değil; büyütme TAM EKRAN yapar ve
   kenar çubuğu üstte yatay şeride döner (yan yana sığmaz). */
@media (max-width: 768px){
  #chat-resize{ display:none !important; }

  #chat-panel.chat-wide{
    top:0 !important; bottom:0 !important; height:100% !important;
    max-height:100% !important; border-radius:0 !important;
    grid-template-columns:1fr;
    grid-template-rows:auto auto 1fr auto;
    grid-template-areas:
      "baslik"
      "yan"
      "mesajlar"
      "altlik";
  }
  #chat-panel.chat-wide #chat-side{
    width:auto; flex-direction:row; overflow-x:auto; overflow-y:hidden;
    gap:.3rem; padding:.4rem .5rem; border-right:none;
    border-bottom:1px solid rgba(var(--shine-rgb),.07);
  }
  #chat-panel.chat-wide .chs-label{ display:none; }
  #chat-panel.chat-wide .chs-item{ width:auto; flex-shrink:0; padding:.34rem .6rem; }
  #chat-panel.chat-wide .chs-item .chs-txt{ max-width:110px; }
  #chat-panel.chat-wide .cm-bubble{ max-width:92%; }
}