/* ============================================================
 * features/chats.css — sohbet listesi
 * (JS karşılığı: js/features/chats/index.js)
 *
 * Toolbar (arama + yüzen + çemberi) 2026-07-15'te SİLİNDİ —
 * karakter oluşturma artık listenin İLK satırı (.conv-new):
 * conv-item düzeninin eşi ama AYRI sınıf (css çakışmasın diye),
 * pulse'lı + dairesi (hero ışıma zemini 2026-07-18 SİLİNDİ —
 * satır zeminsiz, vurgu yalnız + dairesinde).
 * ============================================================ */

/* KIRPMA TAMPONU (2026-07-20): + dairesinin pulse halkası (box-shadow,
   20px yayılım — components.css) scroller'ın padding kutusunda
   kesiliyordu. Çare z-index DEĞİL (overflow kırpması katman dinlemez):
   scroller'a 20px padding + EŞ negatif margin → net görünür pay 0'a
   çözülür; sayfa kenar payını ebeveyn #page-chats (--page-pad, .side-page
   tabanı) verir → chats öbür sekmelerle SİMETRİK (2026-07-24 netleştirme:
   bu blok "garip" değil, yalnız halkaya nefes açan tampon; görünen inset
   +20-20=0 olduğundan tek doğruluk kaynağı yine --page-pad). Kap kırparsa
   tampon boşa gider → #page-chats overflow:visible (shell.css).
   Scrollbar GİZLİ (galeri/cüzdan emsali; negatif marj çubuğu kenardan
   taşırırdı). Mobil blokta padding/margin kendi değerlerini alır. */
.conv-list {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
  padding: 20px; margin: -20px;
  scrollbar-width: none;
}
.conv-list::-webkit-scrollbar { width: 0; height: 0; }

/* Yeni karakter çağrısı — listenin ilk, kalıcı satırı */
.conv-new {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-lg); cursor: pointer;
  transition: filter var(--tr-fast);
}
.conv-new:hover { filter: brightness(1.12); }
/* + dairesi avatar boyunda (--circle-lg = .avatar) — pulse'ı SİSTEMİN
   TEK pulse'ı .pulse-attn verir (halka sistem geneli ACCENT,
   components.css 2026-07-20). Daire vurgu zemininde, ikon on-accent
   (kullanıcı 2026-07-19; aynı gün önce cam olmuştu — geri accent'e
   döndü, opak zeminde blur işlevsiz → söküldü). */
.cn-ic {
  width: var(--circle-lg); height: var(--circle-lg); border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  /* pulse halkası artık SİSTEM GENELİ accent (components.css 2026-07-20) */
}
.cn-body { flex: 1; min-width: 0; }
.cn-title { font-weight: 650; font-size: 14.5px; }
.cn-sub {
  font-size: 12.5px; color: var(--text-2); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.conv-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-lg); cursor: pointer;
  background: var(--surface-2);
  backdrop-filter: var(--shellbar-blur); -webkit-backdrop-filter: var(--shellbar-blur);
  transition: background var(--tr-fast);
}
.conv-item:hover { background: var(--surface); }
.conv-item.active { background: var(--accent-soft); }
.conv-body { flex: 1; min-width: 0; }
.conv-top { display: flex; align-items: baseline; gap: 8px; }
.conv-name {
  flex: 1; min-width: 0; font-weight: 650; font-size: 14.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conv-time { font-size: 11.5px; color: var(--text-3); flex: 0 0 auto; }
.conv-sub {
  font-size: 12.5px; color: var(--text-2); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Canlı durum — metin rozeti yerine NODE İKON DAİRELERİ (2026-07-15,
   i18n kararı: node duyuru metni tek dilli → UI yalnız emoji ikonunu
   gösterir). Aktifken conv-sub'ın yerini alır (JS toggle); sığmayan
   fazlalık +N dairesine katlanır. Beliriş/gidiş yavaş (chat içi
   göstergeyle aynı dil). */
.conv-live { display: flex; align-items: center; gap: 4px; margin-top: 3px; }
/* Giriş/çıkış TEK mekanizma = transition (chat.css .live-chip ile aynı
   ders: fill'li giriş animasyonu sönme transition'ını eziyordu) — JS
   ekleme sonrası çift rAF ile .in basar, sökünce yavaş söner. */
.cl-ic {
  width: var(--circle-xs); height: var(--circle-xs); border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--surface-2); box-shadow: var(--glass-edge);
  font-size: 11px; line-height: 1;
  opacity: 0; transform: scale(.6);
  transition: opacity .4s ease, transform .4s ease;   /* JS CL_OUT eşi */
}
.cl-ic.in { opacity: 1; transform: none; }
.cl-more { font-size: 10px; font-weight: 700; color: var(--accent); background: var(--accent-soft); }

/* Mobil kabuk sözleşmesi (shell.css dosya başı): sekmenin GERÇEK
   scroller'ı .conv-list'tir ve kabuğu TAM kaplar (#page-chats
   padding'i shell.css mobil bloğunda sıfırlanır) — çubuk payları
   İÇ padding, liste iki camın da (head + dock) altından akar. */
@media (max-width: 860px) {
  .conv-list {
    /* Dikey uçlarda +12px EK nefes (2026-07-20): çubuk payının nefesi
       10px'ti, + dairesinin 20px pulse halkası ilk/son satırda cam
       çubuğun (head/dock overlay, z:40) ALTINA girip kenarında kesik
       görünüyordu. z-index çare değil — halka bilerek camların altında
       kalır (içerik camın altından akar sözleşmesi); çare halkanın
       cam kenarına hiç ulaşmaması: 10+12=22px ≥ 20px halka. */
    padding: calc(var(--shellbar-pay) + var(--safe-top) + 12px) var(--page-pad)
             calc(var(--shellbar-pay) + var(--safe-bottom) + 12px);
    /* yan pay --page-pad (2026-07-24: eski çıplak 8px → sekmelerle
       simetrik); tampon marjı SIFIR — kırpma payını çubuk payları
       (dikey) + yan --page-pad + satırın 12px iç payı karşılar */
    margin: 0;
  }
}