/* ==========================================================================
   Gelen kutusu — LEAD KÜNYESİ (üçüncü sütun)
   --------------------------------------------------------------------------
   05-inbox-panels.css'ten bölündü ve onun DEVAMI: kaskad sırası korunuyor
   (adı 05'ten sonra, 06'dan önce sıralandığı için — sıranın tek kaynağı
   pages/_partials/styles.php).

   Bölünme sebebi 04b ile aynı: barındırmanın FTP yazması 16384'ün katlarında
   kesiyor ve 05, künyedeki "Geldiği yer" simgesi eklenince 16425 bayta
   çıkmıştı. Dosya zaten eşiğin 300 bayt altında duruyordu, yani bir sonraki
   ekleme de aynı yere çarpacaktı.

   Sınır dosyanın kendi başlıklarından: yukarıda sohbet paneli ve fotoğraf
   büyüteci, burada künye ile boş durum ekranları.
   ========================================================================== */

/* --- lead künyesi (gelen kutusunun üçüncü sütunu) -------------------------- */
/* Görünürlüğü tek bir sınıf yönetiyor (.inbox--info-open). Panelin kendisinde
   varsayılan display:none duruyor ki dar ekranda ızgara kuralı unutulduğunda
   bile ekranın altına sarkmasın. */
.chat-info {
  display: none;
  flex-direction: column;
  min-width: 0;
  /* Izgara hücresinin otomatik en küçük boyu içerikten gelir; min-height:0
     olmadan uzun künye satırı büyütür ve taşma panelin içinde değil, .inbox'ın
     overflow:hidden'ında kaybolur — kaydırma çubuğu hiç belirmez. */
  min-height: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
}
.inbox--info-open .chat-info { display: flex; }

.chat-info__head {
  height: var(--header-h);
  display: flex; align-items: center; gap: .5rem;
  padding: 0 .75rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-info__heading { font-size: .875rem; font-weight: 600; margin: 0; flex: 1; min-width: 0; }
/* Geniş ekranda panel bir sütun: çıkışı "kapat". Dar ekranda sohbetin yerine
   geçiyor: çıkışı "geri". İki düğme değil, aynı düğmenin iki hâli. */
.chat-info__back { display: none; }

/* Kim yazıyor + lead'i kapatma: kaydırmanın dışında, panelin tepesinde sabit.
   Kaydırma sekmelerden aşağısı için. */
.chat-info__lead {
  flex-shrink: 0;
  padding: 1rem .875rem;
  border-bottom: 1px solid var(--border);
}

.chat-info__body { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem .875rem 1.5rem; }

.chat-info__identity { display: flex; gap: .75rem; align-items: center; }
/* Düğme kimliğin sağ ucuna itiliyor ve dikeyde tepeye hizalanıyor: ad iki
   satıra sardığında ortada kalıp "hangi satırı düzenliyorum" sorusunu
   sordurmasın. */
.chat-info__edit { margin-left: auto; align-self: flex-start; flex-shrink: 0; }
.chat-info__who { min-width: 0; }
.chat-info__name { font-weight: 600; font-size: .9375rem; overflow-wrap: anywhere; }
.chat-info__phone { font-size: .8125rem; color: var(--text-muted); margin-top: .0625rem; }
/* Dil, künyedeki tek "etiket: değer" satırı — bu yüzden etiketi de yanında
   duruyor. "Otomatik (Türkçe)" tek başına yazıldığında neyin otomatik olduğu
   okunmuyordu; rozete çevirmek de olmazdı, rozetler büyük harfe dönüyor ve
   dil adı orada bağırıyor. */
.chat-info__language {
  display: flex; align-items: baseline; gap: .375rem;
  margin-top: .1875rem;
  font-size: .75rem;
  min-width: 0;
}
.chat-info__language-key { color: var(--text-faint); flex-shrink: 0; }
.chat-info__language-value { color: var(--text-muted); font-weight: 600; overflow-wrap: anywhere; }
.chat-info__tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .4375rem; }

/* Tek sütun: 320px'lik bir panelde etiket/değer yan yana konduğunda değer
   sütunu iki kelimeye düşüyor ve "1 gün 3 saat 12 dk" üç satıra sarıyor. */
.info-list { margin: 0; }
.info-list > dt { font-size: .75rem; color: var(--text-muted); margin-top: .75rem; }
.info-list > dt:first-of-type { margin-top: 0; }
.info-list > dd { margin: .125rem 0 0; font-size: .8125rem; font-weight: 600; overflow-wrap: anywhere; }
/* Künyedeki "Geldiği yer" simgesi: adın soluna, satırın hizasında.
   Listedeki yuvarlakla aynı simge — ikisinin aynı şeyi söylediği ancak
   yan yana görülünce anlaşılıyor. */
.info-list__icon {
  width: 1em; height: 1em;
  vertical-align: -.125em;
  margin-right: .375rem;
  /* Çizim biçimi (dolu marka glifi mi, çizgi simgesi mi) <symbol> üzerinde
     duruyor ve oradaki sunum öznitelikleri buradan gelen mirası yeniyor.
     Burada yalnızca boy ve renk ayarlanıyor. */
  color: var(--text-muted);
}
.info-list > dd.info-list__empty,
.info-fact__value.info-list__empty,
.chat-info__language-value.info-list__empty { font-weight: 400; color: var(--text-faint); }

/* DEĞİŞTİRİLEBİLİR DEĞER SATIRI (kampanya, geldiği yer, bağlı hattımız).

   Düzeltme düğmesi değerin ALTINDA duran metin bir düğmeydi ve üç tanesi alt
   alta gelince künyenin yarısı "… değiştir" satırlarına gidiyordu: okunmak
   için açılan panel, eylem listesine dönüyordu. Düğme artık değerin yanında
   bir simge — satır tek satır kalıyor, ne yaptığını da üstüne gelince
   söylüyor (.info-fact__tip).

   Hizalama baseline değil center: simge değerin ortasına oturuyor, sarmalayan
   değer iki satıra taştığında ilk satırın ortasına. */
.info-fact { display: flex; align-items: center; gap: .25rem; }
.info-fact__value { min-width: 0; overflow-wrap: anywhere; }

/* Simge, yalnızca yeri korunacak kadar yer kaplıyor: değerin hemen yanında
   durmalı, sütunun sonunda değil — arada boşluk kalsaydı iki ayrı şey gibi
   okunurdu. */
.info-fact__edit { position: relative; display: inline-flex; flex-shrink: 0; }
.info-fact__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.375rem; height: 1.375rem; padding: 0;
  border: 0; border-radius: var(--radius-sm, 6px);
  background: none; color: var(--text-faint); cursor: pointer;
}
.info-fact__btn svg { width: .875rem; height: .875rem; }
.info-fact__btn:hover { background: var(--surface-2); color: var(--text); }
.info-fact__btn:focus-visible { outline: 2px solid var(--primary, currentColor); outline-offset: 1px; }

/* Açıklama balonu. Simgenin ne değiştirdiği başka hiçbir yerde yazmıyor —
   "kalem" üç satırda da aynı ve hangisinin hangi alana ait olduğunu yalnızca
   konumu söylüyor. `title` yerine kendi balonu: tarayıcının balonu bir
   saniyeden uzun sürede çıkıyor ve dokunmatikte hiç çıkmıyor.

   Sola açılıyor (right: 100%): panel ekranın sağ kenarında ve sağa açılan bir
   balon panelden taşardı. */
.info-fact__tip {
  position: absolute; right: calc(100% + .375rem); top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  padding: .25rem .5rem;
  border-radius: var(--radius-sm, 6px);
  background: var(--text, #111); color: var(--surface, #fff);
  font-size: .6875rem; font-weight: 400; line-height: 1.3;
  white-space: nowrap;
  opacity: 0; visibility: hidden;
  transition: opacity .12s ease;
  pointer-events: none;
}
.info-fact__btn:hover .info-fact__tip,
.info-fact__btn:focus-visible .info-fact__tip { opacity: 1; visibility: visible; }

/* Listenin altındaki uyarı, son değere yapışık duruyordu: kutunun kenarı
   "en uzun cevap" satırının bir parçası gibi okunuyor ve iki ayrı şey tek
   blok hâline geliyordu. Araya listedeki satır aralığından belirgin biçimde
   büyük bir boşluk giriyor. */
/* "Yanıt bekliyor" kartların üstünde, hangisi açık olursa olsun görünür. */
.chat-info__body > .alert { margin: 0 0 .875rem; }

/* Kampanya adı yazma alanı ile açılır kutunun arası: ikisi ayrı iki yol
   (seçmek ya da yeni ad yazmak) ve aralarındaki boşluk bunu söylüyor. */
.info-campaign-form .input { width: 100%; margin-bottom: .5rem; }
.info-campaign-form .label:not(:first-child) { margin-top: .25rem; }

/* Kutunun kendisi künyenin bir <dd>'si: üstteki değerin devamı, ayrı bir
   bölüm değil. Yazı ağırlığı geri alınıyor çünkü .info-list > dd tüm
   değerleri kalın yazıyor ve burada duran şey bir değer değil, bir form.

   Kampanya kutusu hat kutusuyla aynı biçimi paylaşıyor ve bu bilerek: künyede
   üç ayrı "değiştir" kutusu var, farklı görünmeleri farklı davrandıklarını
   ima ederdi. */
.info-list > dd.info-line-form,
.info-list > dd.info-campaign-form {
  font-weight: 400;
  margin-top: .5rem;
  padding: .625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-2);
}
.info-line-form .label,
.info-campaign-form .label { font-size: .75rem; }
.info-line-form .select,
.info-campaign-form .select { width: 100%; margin-bottom: .5rem; }
/* Uyarı metni kutunun içinde ve düğmelerin ÜSTÜNDE: hat değişimi müşterinin
   telefonunda yeni bir sohbet açıyor ve bunu "Taşı"ya bastıktan sonra
   öğrenmek geç. */
.info-line-form p { margin: 0 0 .625rem; }
.info-line-form .form__actions,
.info-campaign-form .form__actions { display: flex; gap: .375rem; margin: 0; }

/* Henüz açılmamış bir sekmenin içi. Kesikli kenarlık bilerek: dolu bir kutu
   gibi görünen bir "hazırlanıyor" mesajı, gerçek içerik sanılıyor. */
.info-soon {
  display: flex; gap: .625rem;
  align-items: flex-start;
  padding: .875rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}
.info-soon svg { width: 18px; height: 18px; margin-top: 1px; }
.info-soon strong { display: block; margin-bottom: .25rem; font-size: .8125rem; color: var(--text); }
.info-soon p { margin: 0; font-size: .75rem; }


/* --- empty states --------------------------------------------------------- */
.empty {
  display: grid;
  place-items: center;
  height: 100%;
  text-align: center;
  padding: 2rem;
}
.empty__inner { max-width: 380px; }
.empty__icon {
  width: 64px; height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-faint);
  display: grid; place-items: center;
}
.empty__icon svg { width: 30px; height: 30px; }
.empty h3 { margin-bottom: .375rem; }
.empty p { color: var(--text-muted); font-size: .875rem; }


/* --- işletmenin kendi alanları (041) --------------------------------------
   Künyenin sabit alanlarından bir çizgiyle ayrılıyor: yukarısı her kurulumda
   aynı (ad, kampanya, hat, süreler), aşağısı kiracıya göre değişiyor. Ayrım
   görünmezse operatör "Branş"ı sistemin bir alanı sanar ve neden başka bir
   kurulumda olmadığını sorar. */
.info-fields {
  margin-top: .875rem;
  padding-top: .875rem;
  border-top: 1px solid var(--border);
}

.info-fields__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .5rem;
}

.info-fields__title {
  margin: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

.info-fields__head .btn { padding: .25rem .5rem; font-size: .75rem; }

/* Kutu, hat ve kampanya kutularıyla aynı biçimde: künyede üç ayrı "düzenle"
   kutusu var ve farklı görünmeleri, farklı davrandıklarını ima ederdi. */
.info-fields__form {
  margin-top: .625rem;
  padding: .625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-2);
}
.info-fields__form .label { font-size: .75rem; }
.info-fields__form .input,
.info-fields__form .select { width: 100%; }
.info-fields__form .field { margin-bottom: .625rem; }
.info-fields__form .form__actions { display: flex; gap: .375rem; margin: 0; }

/* --- tekrar eden gruplar (042) --------------------------------------------
   Üçü de kendi başlığıyla ve aralarında çizgiyle: soru-cevap "form ne dedi",
   kimlikler "bu lead dışarıda hangi kayıt", defter "biz ne dedik". Ayrımı
   görünmez bırakmak, üçünü tek bir liste gibi okutur ve okuyan kişi hangi
   satırın müşteriden hangisinin bizden geldiğini ayırt edemezdi. */
.info-answers,
.info-sheets,
.info-refs,
.info-notes {
  margin-top: .875rem;
  padding-top: .875rem;
  border-top: 1px solid var(--border);
}

.info-notes__form { display: flex; gap: .375rem; align-items: flex-start; margin-bottom: .625rem; }
.info-notes__form textarea { flex: 1; resize: vertical; min-height: 2.5rem; }

.info-notes__list { display: flex; flex-direction: column; gap: .5rem; }

.info-note {
  padding: .5rem .625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-2);
}
/* Notun metni satır sonlarını KORUYOR: operatör alt alta madde yazıyor ve
   tek satıra indirilmiş bir not, yazıldığı hâlden başka bir şey. */
.info-note__body { font-size: .8125rem; white-space: pre-wrap; word-break: break-word; }
.info-note__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-top: .25rem;
}

/* --------------------------------------------------------------------------
   Sheets kaydı — lead'i doğuran ham satır(lar)
   --------------------------------------------------------------------------
   Kart çerçevesi nottan ödünç: ikisi de künyenin içinde TEKRAR EDEN bir
   kayıt ve aynı görünmeleri doğru -- biri iki not, öteki iki başvuru
   olduğunda "burada birden fazla şey var" mesajını aynı biçimle veriyorlar.

   Kartın İÇİ ise ötekilerden farklı: burada hücre sayısı dosyaya göre
   değişiyor ve altmışı bulabiliyor (Mapping::MAX_FIELDS). Uzun bir kart
   künyenin geri kalanını -- notları, kapanışı -- ekranın çok altına iterdi,
   bu yüzden kartın kendi kaydırması var. Kesmek yerine kaydırmak: kesilen
   bir hücre, orada olmadığını değil okunamadığını söylemeli.
   -------------------------------------------------------------------------- */
.info-sheets > div { display: flex; flex-direction: column; gap: .5rem; }

.info-sheet {
  padding: .5rem .625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-2);
}

.info-sheet__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem .5rem;
  margin-bottom: .375rem;
}

/* Dosya adı uzun olabiliyor ("Lead Yabancı - Meta - Eylül") ve tek satırda
   kalması gerekmiyor; kırılması, yanındaki tarihi kartın dışına itmekten
   iyi. */
.info-sheet__file { font-size: .8125rem; font-weight: 600; word-break: break-word; }

.info-sheet .info-list {
  max-height: 18rem;
  overflow-y: auto;
  margin: 0;
}

/* Hücre değeri satır sonlarını koruyor: Sheets'te bir hücreye alt alta
   yazılmış cevap, tek satıra indirildiğinde okunamaz hâle geliyor. */
.info-sheet .info-list dd { white-space: pre-wrap; word-break: break-word; }