/* ==========================================================================
   Gelen kutusu — KONUŞMA LİSTESİNİN SATIRLARI
   --------------------------------------------------------------------------
   04-inbox.css'ten bölündü ve onun DEVAMI: kaskad sırası korunuyor (adı
   04'ten sonra, 05'ten önce sıralandığı için — sıranın tek kaynağı
   pages/_partials/styles.php).

   Bölünme sebebi biçimsel değil: barındırmanın FTP yazması 16384'ün
   katlarında kesiyor ve 04-inbox.css, listedeki yuvarlağa kanal simgesi
   eklenince 16938 bayta çıkmıştı. O eşiğin üstünde dosya sunucuya sessizce
   yarım gidiyor (bkz. styles.php başlığı).

   Sınır rastgele değil: yukarıda listenin BAŞLIĞI var (arama, süzgeç, sekme
   şeridi), burada listenin KENDİSİ (kaydırma kabı, satır, yuvarlak, önizleme,
   kapanış rozetleri).
   ========================================================================== */

.thread-list__items { flex: 1; overflow-y: auto; }

/* Listenin sonundaki durum satırı — sonsuz kaydırmanın tek görünür parçası.
   Kaydırma sessizce çalışıyor; bu satır yalnızca üç sorunun cevabını veriyor:
   yükleniyor mu, daha var mı, bitti mi. Ortada ve sönük duruyor çünkü bir
   konuşma satırı değil; listeyle karışması, tıklanacak bir şey sanılmasına yol
   açardı. */
.thread-more {
  display: flex;
  justify-content: center;
  padding: .75rem;
  color: var(--text-faint);
  font-size: .75rem;
}

.thread {
  display: flex;
  gap: .75rem;
  padding: .75rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  min-width: 0;
}
.thread:hover { background: var(--surface-2); }
.thread--active { background: var(--surface-3); }
.thread--active:hover { background: var(--surface-3); }

.avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-muted);
  display: grid; place-items: center;
  font-weight: 700; font-size: .875rem;
  flex-shrink: 0;
  text-transform: uppercase;
  /* Fotoğraf baş harfin ÜSTÜNE biniyor, yerine geçmiyor.
     Dosya bir sebeple yüklenemezse alttaki harf ortaya çıkıyor.

     Bu, JavaScript GEREKTİRMEYEN bir yedek ve öyle olmak zorunda: burada bir
     zamanlar `onerror="this.remove()"` vardı ve CSP'nin script-src yönergesi
     satır içi olay işleyicilerini de kapsadığı için HİÇ ÇALIŞMIYORDU
     (denetim 2026-08-31, UI-505). Yüklenemeyen <img> alt="" taşıdığı için
     tarayıcıda görünür bir şey çizmiyor; altındaki harf zaten oradaydı. */
  position: relative;
  overflow: hidden;
}

/* Yedek harf: ızgaranın ortasında, resmin ALTINDA.
   Resim absolute olduğu için ızgaraya katılmıyor ve ikisi üst üste biniyor. */
.avatar__fallback {
  display: block;
  line-height: 1;
}
.avatar img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.avatar--sm { width: 34px; height: 34px; font-size: .75rem; }
.avatar--lg { width: 64px; height: 64px; font-size: 1.25rem; }

/* Lead'in geldiği kanal — baş harfin YERİNE, üstüne değil.
   Baş harf listede adın ikinci bir kopyasıydı; adı olmayan kayıtlarda ise
   numaranın ilk karakterine ("+1") düşüyordu. Yuvarlağın taşıdığı soru
   artık başka: bu lead nereden geldi.

   Renk gövdeden geliyor (currentColor): marka renkleri kullanılsaydı liste
   beş ayrı renkle noktalanır ve okunmamış rozeti gibi ANLAMLI renkler
   arasında kaybolurdu. Kanalı ayıran şey biçim, renk değil. */
.avatar--channel {
  color: var(--text-muted);
  /* Yuvarlak zemin YOK. .avatar'ın gri diski baş harf içindi: harfin
     okunması için arkasında bir kontrast alanı gerekiyordu. İkonun
     gerekmiyor — kendi biçimi zaten okunuyor ve disk, listenin solunda
     satır başına bir gri leke bırakıyordu. Genişlik/yükseklik duruyor:
     hizayı o veriyor, zemin değil. */
  background: none;
}

/* Oran, piksel değil: aynı sınıf telefonda 50, künyede 64 piksellik bir
   yuvarlağın içinde de kullanılıyor ve sabit bir boy birinde taşardı. */
.avatar__icon { width: 55%; height: 55%; display: block; }

.thread__body { min-width: 0; flex: 1; }
.thread__top { display: flex; align-items: baseline; gap: .5rem; }
.thread__name { font-weight: 600; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.thread__time { font-size: .6875rem; color: var(--text-faint); flex-shrink: 0; }
/* Konuşmanın düştüğü KENDİ hattımız — adın altındaki tek numara. Müşterinin
   numarası bu satırdan kaldırıldı (bkz. inbox/index.js): adı kayıtlıyken bir
   şey söylemiyor, adı yokken başlığın kendisi zaten o numaraydı. Okla
   başlaması, satırın kişinin değil bizim numaramız olduğunu söylüyor. */
.thread__line {
  font-size: .75rem; color: var(--text-faint);
  display: flex; align-items: center; gap: .25rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: .0625rem;
}
.thread__line b { font-weight: 600; color: var(--text-muted); }
.thread__bottom { display: flex; align-items: center; gap: .5rem; margin-top: .125rem; }
.thread__preview {
  font-size: .8125rem; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.thread__unread {
  background: var(--accent); color: #04231a;
  font-size: .6875rem; font-weight: 700;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px;
  display: grid; place-items: center;
  flex-shrink: 0;
}


/* --- gelen kutusunda hiç boşluk yok --------------------------------------
   Yalnız bu ekrana özgü ve kapsam .main:has(.inbox) ile veriliyor: kural
   .content--frame'in kendisine yazılsaydı aynı çerçeveyi kullanan başka bir
   ekran açıldığı gün sessizce onu da değiştirirdi.

   DÖRT kenarın da boşluğu kalktı. Üçü önce kalkmıştı; altta kalan tek
   --gutter şeridi hiçbir şeyi ayırmayan yetim bir bant olarak duruyordu.
   Kazancı da var: akış ve liste --gutter kadar uzadı.

   Yapışan kenarda kenarlık ve yuvarlama da kalkıyor: 1 piksellik kenarlık
   kenar çubuğununkiyle yan yana gelip çift çizgi yapıyor, yuvarlatılmış köşe
   ise dibine oturduğu şeritten bir kavis kadar boşluk bırakıyordu — yani
   kaldırılmak istenen boşluğu köşede geri getiriyordu. */
.main:has(.inbox) .content--frame { padding: 0; }
.main:has(.inbox) .inbox {
  border: 0;
  border-radius: 0;
  /* Gölge de kalkıyor: kart artık kabuğun içinde YÜZMÜYOR, kabuğun kendisi.
     Dört kenarı da kırpılan bir gölge yalnızca kenarlarda koyu bir bulanıklık
     bırakıyordu. */
  box-shadow: none;
}
.thread__flag { font-weight: 400; margin-left: .125rem; }

/* DURUM ROZETİ (madde 27): kaynak simgesinin sağ alt köşesinde en önemli
   durum. Avatar overflow:hidden taşıdığı için rozet sarmalayıcıda. */
.avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; align-self: flex-start; }
.status-badge {
  position: absolute; right: -3px; bottom: -3px;
  display: grid; place-items: center; width: 18px; height: 18px;
  border: 2px solid var(--surface); border-radius: 50%;
  color: #fff; font-size: 10px; font-weight: 800; line-height: 1; cursor: default;
}
.status-badge svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 3; }
.thread:hover .status-badge { border-color: var(--surface-2); }
.thread--active .status-badge { border-color: var(--surface-3); }
.status-badge--doctor-answer { background: #067647; }
.status-badge--doctor-open   { background: #d92d20; }
.status-badge--note          { background: #dc6803; }
.status-badge--callback      { background: #ef6820; }
.status-badge--new           { background: #1570ef; width: 14px; height: 14px; right: -1px; bottom: -1px; }

/* Sonuç etiketi sonucun rengiyle (085): zemin değil, yalnız etiket. */
.thread__chip.thread__chip--tinted {
  color: var(--chip-color);
  background: color-mix(in srgb, var(--chip-color) 12%, var(--surface));
  font-weight: 600;
}

/* Rozetin açıklama kutusu: belirgin olsun diye koyu zemin, büyük yazı. */
.status-tip {
  position: fixed; z-index: 1000; max-width: 280px;
  padding: .5rem .75rem; border-radius: var(--radius-sm);
  background: #101828; color: #fff; box-shadow: 0 8px 24px rgba(16, 24, 40, .25);
  font-size: .8125rem; font-weight: 500; line-height: 1.4; pointer-events: none;
}
.status-tip[hidden] { display: none; }
.status-tip__row { display: flex; align-items: center; gap: .5rem; }
.status-tip__row + .status-tip__row { margin-top: .25rem; }
.status-tip__dot { width: .625rem; height: .625rem; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }

/* Sekmede okunmamış mesaj noktası (086, madde 28): sayı değil, yalnız işaret. */
.thread-tab--icon { position: relative; }
.thread-tab--unread::after {
  content: ""; position: absolute; top: 4px; right: 4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent, #25d366); box-shadow: 0 0 0 2px var(--surface);
}
/* Arama yazılıyken şerit geri planda: sonuçlar bütün lead'lerden. */
.thread-tabs--searching .thread-tab { opacity: .45; }

/* Son giden mesaj teslim edilemedi (madde 46): önizlemenin önünde kırmızı. */
.thread__failed {
  flex: none;
  margin-right: .375rem;
  padding: 0 .375rem;
  border-radius: var(--radius-sm);
  background: var(--danger);
  color: var(--surface);
  font-size: .625rem;
  font-weight: 600;
  line-height: 1.6;
  text-transform: uppercase;
}

/* Cevap bekliyor (madde 47): yeşil ünlem ve bekleme süresi, saatin önünde. */
.thread__awaiting {
  display: inline-flex;
  flex: none;
  gap: .25rem;
  align-items: center;
  margin-right: .375rem;
  padding: 0 .375rem;
  border-radius: 999px;
  background: var(--success);
  /* Koyu temada --success açık yeşil: yazı zemin rengini alır, iki temada da okunur. */
  color: var(--surface);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.6;
}

.thread__awaiting span { font-weight: 500; }