/* ==========================================================================
   DorukCRM — 05-inbox-panels.css
   Gelen kutusunun konuşma paneli, lead künyesi ve boş durumları.

   SIRA ÖNEMLİ. Bu dosyalar tek bir app.css'ten bölündü ve kaskad hâlâ o
   sıraya bağlı: addaki sayı yüklenme sırasıdır. Sırayı belirleyen tek yer
   pages/_partials/styles.php.

   Parçalar 16 KB'ın ALTINDA tutuluyor ve bu ölçü keyfî değil: barındırmanın
   FTP yazması büyük dosyalarda 16384'ün katlarında kesiliyor, 91 KB'lık tek
   parça hâlindeki app.css bu yüzden günlerce sunucuya tam gidemedi. Buraya
   bölüm eklerken dosyayı büyütmek yerine yeni bir parça açın.
   ========================================================================== */

/* --- conversation panel --------------------------------------------------- */
/* min-height:0 ŞART ve eksikliği görünür bir arızaydı: sohbet sütunu ızgaranın
   bir hücresi, ızgara hücresinin otomatik en küçük boyu ise İÇERİĞİNDEN gelir.
   Bu satır olmadan uzun bir mesaj akışı sütunu hücrenin boyundan uzun yapıyor,
   .inbox'ın overflow:hidden'ı da taşan ucu kesiyordu — kesilen uç tam da en
   altta duran yazma alanı ve "24 saatlik pencere kapalı" şeridiydi. Yani
   akış uzadıkça mesaj yazma alanı ekranın altında kayboluyordu.

   Aynı satır künye panelinde (.chat-info) zaten vardı; sohbet sütununda
   unutulmuştu ve fark, ancak akış bir ekranı aştığında ortaya çıkıyor. */
.chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }

.chat__head {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1rem;
  flex-shrink: 0;
}
.chat__title { font-weight: 600; font-size: .9375rem; }
.chat__sub   { font-size: .75rem; color: var(--text-muted); }
/* Başlıktaki hat satırı: cevabın hangi numaradan gideceği. Kişinin
   numarasının altında ve ondan soluk — üstteki ad/numara müşteriyi, bu satır
   bizi gösteriyor. */
.chat__actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; }

/* Başlıktaki kapatma düğmesi, gövdedeki düğmelerden bir tık küçük: başlık
   54 piksel yüksekliğinde ve tam boy bir düğme o şeridi tümüyle dolduruyor,
   yanındaki simgeleri de büyütmek gerekiyordu. */
.chat__lead-toggle { padding: .375rem .625rem; }

/* Kapanış rozeti. Rozet (.badge) değil kendi sınıfı: .badge metni büyük harfe
   çeviriyor ve burada yazan şey ayarlardan girilmiş bir sonuç adı — "SATIŞ
   OLDU" diye bağırması, onu bir durum etiketi gibi gösteriyordu. Uzun sonuç
   adları başlığı taşırmasın diye tek satır ve sığmadığı yerde kırpılıyor;
   tamamı title'da ve künyede yazılı. */
.chat__closure {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: .1875rem .5rem;
  border-radius: 999px;
  background: var(--warning-bg);
  color: var(--warning);
  font-size: .75rem;
  font-weight: 600;
}

.chat__messages {
  flex: 1;
  overflow-y: auto;
  /* Sağdaki fazladan boşluk, giden balonların yanına asılan hat avatarı için:
     balon konumlandırmadan çıkarıldığı (position:absolute) için akışta yer
     kaplamıyor ve payı burada ayrılmasa sohbetin kenarına taşardı. */
  padding: 1.25rem 2.75rem .5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.day-sep { text-align: center; margin: 1rem 0 .75rem; }
.day-sep span {
  background: var(--surface-3); color: var(--text-muted);
  font-size: .6875rem; font-weight: 600;
  padding: .25rem .75rem; border-radius: 999px;
}

/* --- akıştaki kayıt kartları: kapanış ve defter notu ---------------------
 *
 * ORTADA VE BALONSUZ. Balon "kim kime ne dedi" demek; bunlar müşteriye giden
 * bir şey değil, ekibin kendi kaydı. Sohbet istemcilerinin sistem satırıyla
 * aynı yer ve aynı biçim -- göz onu zaten "bu bir mesaj değil" diye okuyor.
 *
 * Genişlik balonlardan (%70) dar tutuldu: kart ortada duruyor ve iki yandan
 * eşit boşlukla, akışı yatay olarak da bölüyor. Kapanışın sol kenarındaki
 * renkli çizgi, uzun bir sohbette kaydırırken kapanışları göz ucuyla
 * saydırabilmek için.
 */
.lead-event {
  align-self: center;
  width: min(88%, 520px);
  margin: .75rem 0;
}

.lead-event__card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius);
  padding: .5rem .75rem .625rem;
}

.lead-event--closure .lead-event__card {
  border-left-color: var(--brand);
  background: var(--surface);
}

.lead-event__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem; flex-wrap: wrap;
}

.lead-event__title {
  font-size: .75rem; font-weight: 600; color: var(--text);
  letter-spacing: .01em;
}

.lead-event__meta { font-size: .6875rem; color: var(--text-faint); }

.lead-event__tags {
  display: flex; flex-wrap: wrap; gap: .25rem;
  margin-top: .375rem;
}

.lead-event__tag {
  font-size: .6875rem;
  padding: .0625rem .375rem;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Sonuç etiketi ötekilerden ayrılıyor: kapalı bir lead'e bakan kişinin ilk
   sorusu "ne olarak kapandı" ve cevabı kartın içinde aranmamalı. */
.lead-event__tag--strong {
  background: var(--brand-light);
  color: var(--brand-dark);
  font-weight: 600;
}

/* Geçmiş tarihli randevu: kaçırılmış bir arama listeden düşerek değil,
   yapılarak kapanır. */
.lead-event__tag--warn { background: var(--warning-bg); color: var(--warning); }

.lead-event__body {
  margin: .375rem 0 0;
  font-size: .8125rem;
  color: var(--text);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.bubble {
  max-width: min(70%, 560px);
  padding: .5rem .625rem .375rem;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  align-self: flex-start;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  position: relative;
}
.bubble--out { align-self: flex-end; background: var(--brand-light); }
.bubble__text { white-space: pre-wrap; font-size: .875rem; }
.bubble__meta {
  display: flex; align-items: center; justify-content: flex-end;
  gap: .3125rem; margin-top: .125rem;
  font-size: .625rem; color: var(--text-faint);
}
.bubble__media { border-radius: var(--radius-sm); overflow: hidden; margin-bottom: .375rem; }
.bubble__media img, .bubble__media video { display: block; max-width: 100%; height: auto; }

/* Fotoğraf balonda KÜÇÜK çiziliyor. Tam boy resim akışı ele geçiriyordu:
   arka arkaya birkaç fotoğraf gelen bir konuşmada aradaki metin mesajları
   ekran dışına itiliyor, operatör ne yazıldığını görmek için kaydırmak
   zorunda kalıyordu. Tam boyu görmek isteyen resme basıyor (büyüteç). */
.bubble__media--thumb { width: max-content; max-width: 100%; }
/* Seçici `.bubble__media img`'den DAHA seçici olmak zorunda: o kural
   max-width:100% diyor ve tek sınıflı bir seçici onu yenemiyordu — yükseklik
   180'e iniyor, genişlik resmin en-boy oranınca serbest kalıyordu (ölçüldü:
   180 yerine 240 piksel). */
.bubble__media img.bubble__thumb {
  width: auto;
  max-width: min(180px, 100%);
  max-height: 180px;
  object-fit: cover;
  cursor: zoom-in;
}
/* Küçük resim odaklanabilir: klavyeyle de büyütülebiliyor, o yüzden odak
   halkasının görünmesi şart. */
.bubble__thumb:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* --- fotoğraf büyüteci ----------------------------------------------------
   Kendi perdesi var, App.modal'ınki değil: o kutu 420px genişliğinde ve
   ortalanmış bir kart; resim için gereken şey kartın kendisi değil, ekranın
   tamamı. z-index modal ile aynı katmanda (80) duruyor. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 3rem 1.5rem;
  /* Düz rgba, color-mix() DEĞİL: color-mix desteklenmediğinde bildirim
     tümüyle düşer ve perde saydam kalır — arkadaki ekran olduğu gibi
     görünür, resim havada duruyormuş gibi. Kazanılacak bir şey yoktu,
     kaybedilecek şey perdenin kendisiydi. */
  background: rgba(0, 0, 0, .82);
  animation: modal-in .16s ease-out;
}
/* Resim ekranı DOLDURMUYOR. "Büyüt" demek "her şeyin önüne dev bir fotoğraf
   koy" demek değil: sınır yalnızca ekran olduğunda 4000 piksellik bir telefon
   fotoğrafı ekranın tamamını kaplıyordu. Üst sınır hem piksel hem ekran oranı
   cinsinden — küçük ekranda oran, büyük ekranda piksel bağlıyor. */
.lightbox__image {
  display: block;
  width: auto; height: auto;
  max-width: min(640px, 88vw);
  max-height: 78vh;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  cursor: zoom-out;
}
/* Koyu daire içinde beyaz: perdenin üstünde de, açık renkli bir fotoğrafın
   üstünde de görünür kalıyor. Yarı saydam beyaz zeminliyken açık bir
   fotoğrafın üstünde tümden kayboluyordu. */
.lightbox__close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  font-size: 1.75rem; line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(0, 0, 0, .8); }
.lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .lightbox { animation: none; }
}
.bubble__file {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem; background: rgba(0,0,0,.04);
  border-radius: var(--radius-sm); margin-bottom: .375rem;
}
.bubble__echo {
  font-size: .625rem; font-weight: 700; text-transform: uppercase;
  color: var(--text-faint); letter-spacing: .04em; margin-bottom: .125rem;
}
/* Gönderen hattın profil fotoğrafı. Akıştan çıkarılmış: balonun yüksekliğine
   karışsaydı, tek satırlık bir mesaj avatar kadar uzardı. Yalnızca ardışık
   giden mesajların sonuncusunda çiziliyor (bkz. inbox/index.js). */
.bubble__avatar {
  position: absolute;
  right: -2.125rem; bottom: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-3);
}

.bubble--failed { border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); }
.bubble__error { font-size: .6875rem; color: var(--danger); margin-top: .25rem; }

.tick { display: inline-flex; }
.tick svg { width: 15px; height: 15px; }
.tick--read { color: #53bdeb; }

.chat__composer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: .75rem 1rem;
  flex-shrink: 0;
}
.composer-row { display: flex; gap: .625rem; align-items: flex-end; }
.composer-row .textarea {
  min-height: 42px; max-height: 160px;
  border-radius: 20px; padding: .625rem 1rem;
  background: var(--surface-2);
}
/* Yazma alanıyla aynı hapı taşıyor. Kural bir zamanlar düğmenin `style`
   niteliğindeydi ve satır içi biçim hiçbir stil kuralıyla yenilemediği için
   telefonda yuvarlak simge düğmesine geçmenin önünde duruyordu. */
#composer-send { border-radius: 20px; padding: .625rem 1.125rem; }

.composer-locked {
  background: var(--warning-bg);
  border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent);
  color: var(--warning);
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: .8125rem;
}