/**
 * RestoAI destek masası — support.restoai.com
 *
 * Sınıf öneki `sd-`. `css/portal-shell.css`i PAYLAŞIR (`:root` üzerindeki `--ps-*` jetonları,
 * `.pbtn`, `.pinput`, `.pbadge`, `.skel`, `.num`) — kopyalamaz. Buradaki her renk o jetonlardan
 * gelir; sabit hex YAZMAYIN, tema bir sonraki ayarında bu dosya tekrar taranmak zorunda kalır.
 *
 * NEDEN `.ps-shell` SIDEBAR'I KULLANILMIYOR (portal ve admin panelinin aksine):
 * bu ekran bir LİSTE ekranı değil, bir ÇALIŞMA TEZGÂHIDIR. Temsilci gün boyu tek sayfada
 * kalır ve iki bölmeyi (kuyruk + görüşme) yan yana görmek zorundadır. 240px'lik kalıcı bir
 * gezinme sütunu, hiç tıklanmayacak iki bağlantı için sohbet sütununu daraltırdı. Gezinme
 * bu yüzden üst şeride indi; jetonlar, tipografi ve yüzey ilişkisi panelin geri kalanıyla AYNI.
 *
 * YÜKSEKLİK: sayfa scroll ETMEZ (`100dvh` + `overflow: hidden`), yalnızca bölmeler scroll eder.
 * `dvh` bilinçli: mobil tarayıcıda adres çubuğu gizlenince `vh` gerçek yüksekliği aşıyor ve
 * mesaj yazma alanı ekranın altında kalıyordu.
 */

.sd-app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ps-canvas);
  color: var(--ps-ink);
}

/* ── Üst şerit ───────────────────────────────────────────────────────────── */
.sd-topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: var(--ps-surface);
  border-bottom: 1px solid var(--ps-line);
  box-shadow: var(--ps-shadow);
  z-index: 5;
}

.sd-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ps-ink);
  text-decoration: none;
  flex: none;
}
.sd-brand-mark {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ps-r-ctl);
  background: var(--ps-brand-soft);
  color: var(--ps-brand);
  border: 1px solid var(--ps-brand-line);
}

/* Sayaç şeridi. `.pkpi-strip` yerine kendi bileşeni: oradaki kutular blok düzeyinde ve
   dikey; burada topbar'a sığan yatay bir şerit gerekiyor. */
.sd-stats { display: flex; gap: 8px; flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.sd-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-r-ctl);
  background: var(--ps-surface);
  font-size: 12.5px;
  color: var(--ps-ink-3);
  white-space: nowrap;
  flex: none;
}
.sd-stat b { font-size: 14px; color: var(--ps-ink); font-variant-numeric: tabular-nums; }
.sd-stat.is-alert { border-color: #F5C2C7; background: #FFF1F2; color: var(--ps-crit); }
.sd-stat.is-alert b { color: var(--ps-crit); }

.sd-me {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.sd-me-name { font-size: 13px; color: var(--ps-ink-2); font-weight: 600; }

/* Çevrimiçi göstergesi: halka, parlama DEĞİL (beyaz zeminde glow noktayı bulandırıyor). */
.sd-presence {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--ps-ink-3);
}
.sd-presence-dot {
  width: 9px; height: 9px; border-radius: 999px;
  background: #94A3B8;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, .18);
}
.sd-presence.is-online .sd-presence-dot {
  background: #059669;                              /* -400 tonları 1.6:1 ile görünmüyordu */
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .18);
}

/* ── Gövde: iki bölme ────────────────────────────────────────────────────── */
.sd-main {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  min-height: 0;   /* grid çocuklarının scroll edebilmesi için ŞART */
}

.sd-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--ps-surface);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-r-card);
  box-shadow: var(--ps-shadow);
  overflow: hidden;
}

/* ── Sol bölme: sohbet listesi ───────────────────────────────────────────── */
.sd-tabs {
  flex: none;
  display: flex;
  border-bottom: 1px solid var(--ps-line);
}
.sd-tab {
  flex: 1 1 0;
  padding: 11px 8px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ps-ink-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, background .18s ease;
}
.sd-tab:hover { background: var(--ps-surface-hover); color: var(--ps-ink-2); }
.sd-tab[aria-selected="true"] {
  color: var(--ps-brand);
  border-bottom-color: var(--ps-brand-solid);
  background: var(--ps-brand-soft);
}
.sd-tab:focus-visible { outline: 2px solid var(--ps-brand-solid); outline-offset: -2px; }
.sd-tab-count {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--ps-surface-sunk);
  border: 1px solid var(--ps-line);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.sd-tab[aria-selected="true"] .sd-tab-count {
  background: #FFFFFF; border-color: var(--ps-brand-line);
}

.sd-list { flex: 1 1 auto; overflow-y: auto; min-height: 0; }

/* Sohbet kartı. Tıklanabilir → cursor: pointer ZORUNLU. */
.sd-item {
  width: 100%;
  display: block;
  text-align: left;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--ps-line-soft);
  border-left: 3px solid transparent;
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition: background .16s ease;
}
.sd-item:hover { background: var(--ps-surface-hover); }
.sd-item:focus-visible { outline: 2px solid var(--ps-brand-solid); outline-offset: -2px; }
.sd-item.is-active {
  background: var(--ps-brand-soft);
  border-left-color: var(--ps-brand-solid);
}
.sd-item.is-unread { border-left-color: var(--ps-crit); }

.sd-item-top {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 3px;
}
.sd-item-name {
  flex: 1 1 auto; min-width: 0;
  font-weight: 600; font-size: 14px; color: var(--ps-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sd-item-time { flex: none; font-size: 11.5px; color: var(--ps-ink-3); font-variant-numeric: tabular-nums; }
.sd-item-preview {
  font-size: 12.5px; color: var(--ps-ink-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sd-item-tags { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }

/* Rozetler — `.pbadge` ile aynı forma sahip ama durum renkleri buraya özgü. */
.sd-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
}
.sd-tag-pending { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.sd-tag-active  { background: #D1FAE5; color: #065F46; border-color: #A7F3D0; }
.sd-tag-closed  { background: #E2E8F0; color: #334155; border-color: #CBD5E1; }
.sd-tag-mine    { background: var(--ps-brand-soft); color: var(--ps-brand); border-color: var(--ps-brand-line); }
.sd-tag-customer{ background: #DBEAFE; color: #1E40AF; border-color: #BFDBFE; }
.sd-tag-online  { background: #ECFDF5; color: #065F46; border-color: #A7F3D0; }

.sd-empty {
  padding: 40px 22px;
  text-align: center;
  color: var(--ps-ink-3);
  font-size: 13.5px;
}
.sd-empty svg { color: #94A3B8; margin-bottom: 10px; }

/* ── Sağ bölme: görüşme ──────────────────────────────────────────────────── */
.sd-convo-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ps-line);
}
.sd-convo-title { flex: 1 1 auto; min-width: 0; }
.sd-convo-name {
  margin: 0;
  font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sd-convo-meta {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--ps-ink-3);
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.sd-convo-meta a { color: var(--ps-brand); }
.sd-convo-actions { flex: none; display: flex; gap: 8px; }

/* Geri düğmesi yalnızca dar ekranda görünür (tek bölmeli mod). */
.sd-back { display: none; }

.sd-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  background: var(--ps-canvas);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sd-msg { max-width: 68%; display: flex; flex-direction: column; gap: 3px; }
/* Temsilcinin KENDİ mesajı sağda: sohbet arayüzlerinin evrensel dili. */
.sd-msg-admin { align-self: flex-end; align-items: flex-end; }
.sd-msg-customer { align-self: flex-start; align-items: flex-start; }

.sd-bubble {
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.sd-msg-admin .sd-bubble {
  background: var(--ps-brand-solid);
  color: #FFFFFF;
  border-bottom-right-radius: 5px;
}
.sd-msg-customer .sd-bubble {
  background: var(--ps-surface);
  color: var(--ps-ink);
  border: 1px solid var(--ps-line);
  border-bottom-left-radius: 5px;
}
.sd-msg-meta { font-size: 11.5px; color: var(--ps-ink-3); padding: 0 4px; }

.sd-system {
  align-self: center;
  max-width: 80%;
  text-align: center;
  font-size: 12.5px;
  color: var(--ps-ink-3);
  background: var(--ps-surface-sunk);
  border: 1px solid var(--ps-line-soft);
  border-radius: 999px;
  padding: 5px 12px;
}

.sd-typing { display: flex; gap: 4px; align-items: center; padding: 4px 2px; }
.sd-typing span {
  width: 6px; height: 6px; border-radius: 999px; background: #94A3B8;
  animation: sd-blink 1.2s infinite ease-in-out;
}
.sd-typing span:nth-child(2) { animation-delay: .18s; }
.sd-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes sd-blink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

/* ── Yazma alanı ─────────────────────────────────────────────────────────── */
.sd-composer {
  flex: none;
  border-top: 1px solid var(--ps-line);
  padding: 10px 14px 12px;
  background: var(--ps-surface);
}
.sd-composer-row { display: flex; align-items: flex-end; gap: 8px; }
.sd-composer textarea {
  flex: 1 1 auto;
  min-height: 42px;
  max-height: 160px;
  padding: 10px 12px;
  border: 1px solid var(--ps-line-strong);
  border-radius: var(--ps-r-ctl);
  font: inherit;
  font-size: 14.5px;
  color: var(--ps-ink);
  resize: none;
  overflow-y: auto;
}
.sd-composer textarea:focus {
  outline: none;
  border-color: var(--ps-brand);
  box-shadow: 0 0 0 3px rgba(109, 40, 217, .16);
}
.sd-composer-hint {
  margin: 6px 2px 0;
  font-size: 11.5px;
  color: var(--ps-ink-3);
}

/* Hazır cevaplar — temsilcinin en çok yazdığı üç cümle tek tıkla. */
.sd-canned { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.sd-canned button {
  padding: 4px 10px;
  border: 1px solid var(--ps-line);
  border-radius: 999px;
  background: var(--ps-surface-sunk);
  font: inherit;
  font-size: 12px;
  color: var(--ps-ink-2);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.sd-canned button:hover { background: var(--ps-brand-soft); border-color: var(--ps-brand-line); color: var(--ps-brand); }
.sd-canned button:focus-visible { outline: 2px solid var(--ps-brand-solid); outline-offset: 1px; }

/* Kapalı/üstlenilmemiş görüşmede yazma alanı yerine geçen çağrı şeridi. */
.sd-locked {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-top: 1px solid var(--ps-line);
  background: var(--ps-surface-sunk);
  font-size: 13.5px;
  color: var(--ps-ink-2);
}

/* ── Bağlantı şeridi ─────────────────────────────────────────────────────── */
.sd-conn {
  flex: none;
  padding: 7px 16px;
  font-size: 12.5px;
  text-align: center;
  background: #FEF3C7;
  color: #92400E;
  border-bottom: 1px solid #FDE68A;
}
.sd-conn.is-error { background: #FFE4E6; color: #9F1239; border-bottom-color: #FECDD3; }

/* ── Boş durum (hiç sohbet seçilmemiş) ───────────────────────────────────── */
.sd-blank {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px;
  text-align: center;
  color: var(--ps-ink-3);
}
.sd-blank h2 {
  font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 17px; font-weight: 700; color: var(--ps-ink-2); margin: 0;
}
.sd-blank p { margin: 0; font-size: 13.5px; max-width: 42ch; }

/* ── Duyarlılık ──────────────────────────────────────────────────────────── */
/* 900px altında iki bölme yan yana sığmıyor: liste 340px, sohbet 200px kalıyor ve
   hiçbiri okunmuyordu. Tek bölmeye düşülür; seçim yapılınca sohbet ekranı kaplar. */
@media (max-width: 900px) {
  .sd-main { grid-template-columns: minmax(0, 1fr); }
  .sd-pane-convo { display: none; }
  .sd-app.is-viewing .sd-pane-list { display: none; }
  .sd-app.is-viewing .sd-pane-convo { display: flex; }
  .sd-back { display: inline-flex; }
  .sd-msg { max-width: 86%; }
  .sd-topbar { flex-wrap: wrap; gap: 10px; }
  .sd-stats { order: 3; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sd-typing span { animation: none; opacity: .6; }
  .sd-item, .sd-tab, .sd-canned button { transition: none; }
}