/* Vegapunk Desk — ekran düzenleri. Bileşenleri yan yana koyan ızgaralar.
   Bantlar: ≥1280 üç bölge, 1024–1279 iki bölge (bağlam paneli gizli), <768 tek bölge. */

/* Seçili satırda iliştir düğmesi görünür (seçili öğe alanı olmayan görünümlerde) */
.is-selected > .pin, .is-selected .row-pin { opacity: 1; }

/* Tıklanabilir satır (role="button") */
[data-action="item.select"] { cursor: pointer; }
.sel-row { position: relative; display: flex; align-items: center; gap: var(--s-2); min-width: 0; border-radius: var(--r-chip); }
.sel-row:hover { background: var(--hover); }
.sel-row.is-selected { background: var(--active); }
.sel-row .line-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* ======================================================================
   Bilet masası: kuyruk | bilet | bağlam
   ====================================================================== */
.desk {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 280px;
}
.desk-queue { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); }
.desk-queue .page-head { padding-bottom: var(--s-3); }
.desk-queue .tabs { padding: 0 var(--s-4); }
.desk-queue .list { flex: 1; overflow-y: auto; }
.desk-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.desk-context { min-height: 0; overflow-y: auto; border-left: 1px solid var(--border); }
.desk[data-no-context] { grid-template-columns: 320px minmax(0, 1fr); }
.desk[data-no-context] .desk-context { display: none; }

/* Bilet detayı */
.ticket { display: flex; flex-direction: column; min-height: 0; min-width: 0; flex: 1; }
.ticket-head { padding: var(--s-4) var(--s-6) var(--s-3); border-bottom: 1px solid var(--border); }
.ticket-head-row { display: flex; align-items: flex-start; gap: var(--s-3); }
.ticket-subject { flex: 1; min-width: 0; font-size: var(--fs-18); line-height: var(--lh-18); }
.ticket-meta { display: flex; align-items: center; gap: var(--s-2) var(--s-4); flex-wrap: wrap; margin-top: var(--s-2); font-size: var(--fs-13); color: var(--muted); }
.ticket-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.ticket-body.is-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.ticket-body.is-split .ticket-tool { border-left: 1px solid var(--border); }
.ticket-scroll { min-height: 0; overflow-y: auto; padding: 0 var(--s-6); }
.ticket-tool { min-height: 0; min-width: 0; overflow-y: auto; display: flex; flex-direction: column; }
.ticket-body:not(.is-split) .ticket-tool:not(:empty) ~ .ticket-scroll { display: none; }

/* Bağlam paneli */
.context { display: flex; flex-direction: column; gap: var(--s-6); padding: var(--s-5) var(--s-4); }
.context-who { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-2); }
.context-who strong { display: block; font-weight: 600; }
.context-who span { font-size: var(--fs-12); color: var(--muted); }
.context-tools { display: flex; flex-direction: column; }
.context-tool {
  display: flex; align-items: center; gap: 10px; width: 100%;
  height: 34px; padding: 0 var(--s-2); margin: 0 calc(var(--s-2) * -1); width: calc(100% + var(--s-4));
  border-radius: var(--r-control); color: var(--text);
}
.context-tool:hover:not(:disabled) { background: var(--hover); }
.context-tool .go { margin-left: auto; color: var(--faint); }
.context-tool:disabled { color: var(--faint); }
.context-tool .lock-reason { margin-left: auto; font-size: var(--fs-12); color: var(--faint); }

/* ======================================================================
   Araç çerçevesi: bölüm menüsü | bölüm
   ====================================================================== */
.tool-frame { display: flex; flex-direction: column; min-height: 0; flex: 1; min-width: 0; }
.tool-frame-head { display: flex; align-items: flex-start; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-4) var(--s-6) var(--s-3); }
.tool-frame-title { font-size: var(--fs-18); line-height: var(--lh-18); }
.tool-frame-sub { font-size: var(--fs-13); color: var(--muted); overflow-wrap: anywhere; }
.tool-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-3) var(--s-5); padding: 0 var(--s-6) var(--s-4); }
.tool-frame-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); border-top: 1px solid var(--border); }
.tool-nav { padding: var(--s-3) var(--s-2); border-right: 1px solid var(--border); overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.tool-nav .nav-item { height: 32px; font-size: var(--fs-13); }
.tool-section { min-width: 0; min-height: 0; overflow-y: auto; padding: var(--s-4) var(--s-6) var(--s-6); }
.tool-section-title { font-size: var(--fs-16); line-height: var(--lh-16); }
.tool-section-note { margin-top: 2px; font-size: var(--fs-13); color: var(--muted); }
.tool-section > * + * { margin-top: var(--s-4); }
.tool-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-3); }
.record-card .panel-body { padding-top: var(--s-2); }
.record-line { position: relative; display: flex; align-items: center; gap: var(--s-2); min-height: 28px; padding: 3px 6px; margin: 0 -6px; border-radius: var(--r-chip); }
.record-line:hover { background: var(--hover); }
.record-line.is-selected { background: var(--active); }
.record-line .line-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.record-line.mono .line-text { font: var(--fs-13) / 20px var(--mono); }
.tool-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-3); }
.action-form .panel-body { display: flex; flex-direction: column; gap: var(--s-3); }
.action-form.is-danger { border-color: var(--critical-bg); }
.action-form .field + .field { margin-top: 0; }
.field-inline { display: flex; align-items: center; gap: var(--s-2); }
.field-inline .input { flex: 1; }
.field-suffix { color: var(--muted); font-size: var(--fs-13); }

/* Müşteri kaydı başlığı */
.customer-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: 0 var(--s-6) var(--s-4); }
.customer-head-text { flex: 1 1 220px; min-width: 0; }
.customer-caller { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: var(--fs-13); color: var(--muted); }

/* DNS */
.dns { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.dns-ns { display: flex; align-items: center; gap: var(--s-2) var(--s-3); flex-wrap: wrap; padding: 0 var(--s-6) var(--s-3); font-size: var(--fs-13); color: var(--muted); }
.dns-ns .mono { color: var(--text); }
.dns .table-wrap { flex: 1; min-height: 0; overflow: auto; }
.dns-value { font: var(--fs-13) / 20px var(--mono); overflow-wrap: anywhere; }
.dns-add { padding: var(--s-4) var(--s-6); border-top: 1px solid var(--border); background: var(--raised); }
.dns-add form { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 2fr) 96px auto; gap: var(--s-2); align-items: end; }
.dns-add .field + .field { margin-top: 0; }

/* Loglar ve terminal ekran yerleşimi */
.tool-dark { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: var(--s-4) var(--s-6) var(--s-6); gap: var(--s-3); }
.tool-dark .logview, .tool-dark .term { flex: 1; min-height: 320px; }
.log-filters { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; }
.log-filters .input-search { flex: 1 1 240px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--text); white-space: nowrap; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--text); }

/* ======================================================================
   Sohbet ekranları (ekip ve canlı)
   ====================================================================== */
.chat-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.chat-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); overflow-y: auto; }
.chat-side .nav-group { padding: var(--s-3) var(--s-2); }
.chat-person { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px var(--s-3); border-radius: var(--r-card); text-align: left; }
.chat-person:hover { background: var(--hover); }
.chat-person.is-active { background: var(--active); }
.chat-person-text { flex: 1; min-width: 0; }
.chat-person-name { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-person-role { display: block; font-size: var(--fs-12); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-6); border-bottom: 1px solid var(--border); }
.chat-head-text { flex: 1 1 200px; min-width: 0; }
.chat-head-title { font-weight: 600; }
.chat-head-sub { font-size: var(--fs-12); color: var(--muted); overflow-wrap: anywhere; }
.chat-stream { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-3) var(--s-6); }
.chat-reply { border-top: 1px solid var(--border); padding: var(--s-3) var(--s-6) var(--s-4); }
.chat-reply .choice-list { margin-bottom: var(--s-3); }

/* ======================================================================
   Bilgi bankası
   ====================================================================== */
.kb { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.kb-nav { padding: var(--s-4) var(--s-2); border-right: 1px solid var(--border); overflow-y: auto; }
.kb-main { min-width: 0; min-height: 0; overflow-y: auto; }
.kb-article { max-width: 70ch; padding: var(--s-5) var(--s-6) var(--s-8); }
.kb-article h1 { font-size: var(--fs-22); line-height: var(--lh-22); }
.kb-article .kb-meta { margin-top: 4px; font-size: var(--fs-12); color: var(--muted); }
.kb-article .kb-body { margin-top: var(--s-5); font-size: 15px; line-height: 24px; }
.kb-article .kb-body > * + * { margin-top: var(--s-3); }
.kb-article ol, .kb-article ul { padding-left: 22px; }
.kb-article li + li { margin-top: 6px; }
.kb-article code { font-size: 13px; background: var(--raised); padding: 1px 4px; border-radius: var(--r-chip); }
.kb-article pre { font: var(--fs-13) / 20px var(--mono); background: var(--raised); padding: var(--s-3); border-radius: var(--r-card); overflow-x: auto; }
.kb-sources { margin-top: var(--s-6); font-size: var(--fs-13); color: var(--muted); }
.kb-sources a { overflow-wrap: anywhere; }

/* ======================================================================
   Açılış, gün sonu, eğitim: tek sütun sayfalar
   ====================================================================== */
.page-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.page-inner { max-width: 960px; padding: var(--s-6) var(--s-6) var(--s-12); }
.page-inner > * + * { margin-top: var(--s-6); }
.two-col { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.bullet-list { display: flex; flex-direction: column; gap: 8px; padding-left: 18px; }
.bullet-list li::marker { color: var(--faint); }

.start {
  min-height: 100dvh; display: grid; place-items: center; padding: var(--s-6) var(--s-4);
  background: var(--ground);
}
.start-card { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sheet); padding: var(--s-8) var(--s-6) var(--s-6); }
.start-card .brand { padding: 0; margin-bottom: var(--s-6); }
.start-title { font-size: var(--fs-22); line-height: var(--lh-22); }
.start-sub { margin-top: 4px; color: var(--muted); }
.start-rules { margin-top: var(--s-5); }
.start-actions { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); }
.start-links { display: flex; justify-content: center; gap: var(--s-4); margin-top: var(--s-3); font-size: var(--fs-13); }

/* ======================================================================
   Bantlar
   ====================================================================== */
@media (max-width: 1279px) {
  .desk { grid-template-columns: 300px minmax(0, 1fr); }
  .desk-context { display: none; }
  .ticket-body.is-split { grid-template-columns: minmax(0, 1fr); }
  .ticket-body.is-split .ticket-scroll { display: none; }
  .ticket-body.is-split .ticket-tool { border-left: 0; }
}
@media (max-width: 1023px) {
  .ticket-head, .tool-frame-head, .tool-stats, .customer-head, .dns-ns, .chat-head, .chat-stream, .chat-reply, .tool-dark { padding-left: var(--s-4); padding-right: var(--s-4); }
  .ticket-scroll, .tool-section, .dns-add { padding-left: var(--s-4); padding-right: var(--s-4); }
  .tool-frame-body { grid-template-columns: minmax(0, 1fr); }
  .tool-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: var(--s-2) var(--s-4); scrollbar-width: none; }
  .tool-nav .nav-group-label { display: none; }
  .tool-nav .nav-item { width: auto; flex: none; }
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .kb { grid-template-columns: minmax(0, 1fr); }
  .kb-nav { display: flex; gap: 2px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: var(--s-2) var(--s-4); }
  .kb-nav .nav-group-label { display: none; }
  .kb-nav .nav-item { width: auto; flex: none; }
  .page-inner { padding: var(--s-4) var(--s-4) var(--s-12); }
}
@media (max-width: 767px) {
  /* tek bölge: kuyruk ya da bilet */
  .desk, .desk[data-no-context] { grid-template-columns: minmax(0, 1fr); }
  .desk[data-pane="list"] .desk-main { display: none; }
  .desk[data-pane="ticket"] .desk-queue { display: none; }
  .desk-queue { border-right: 0; }
  .chat-layout { grid-template-columns: minmax(0, 1fr); }
  .chat-layout[data-pane="list"] .chat-main { display: none; }
  .chat-layout[data-pane="chat"] .chat-side { display: none; }
  .dns-add form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dns-add form .wide { grid-column: 1 / -1; }
  .tool-cards, .tool-forms { grid-template-columns: minmax(0, 1fr); }
  .tool-dark .logview, .tool-dark .term { min-height: 260px; }
  .start-card { padding: var(--s-6) var(--s-4) var(--s-5); }
}

.back-btn { display: none; }
@media (max-width: 767px) { .back-btn { display: inline-flex; margin-right: var(--s-2); } }

/* İş akışı paneli konuşmayı ezmesin */
.ticket > .composer.workflow { flex: none; max-height: 48%; overflow: hidden; }
.ticket > .composer.workflow > .composer-body { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
.ticket-body { min-height: 180px; }
.ticket > .ticket-head, .ticket > .evidence-tray, .ticket > .tool-tabs { flex: none; }
.tool-frame > *:not(.tool-frame-body) { flex: none; }
.chat-main > .chat-head, .chat-main > .chat-reply { flex: none; }
.composer.workflow { display: flex; flex-direction: column; }
.composer.workflow > .composer-foot { order: -1; padding-top: var(--s-3); padding-bottom: var(--s-2); }
.composer.workflow > .composer-body { padding-top: var(--s-1); }
.ticket > .composer.workflow .reply-editor .composer-foot { position: sticky; bottom: 0; background: var(--surface); z-index: 1; border-top: 1px solid var(--rule); padding-top: var(--s-2); }
tr.is-selected .pin, .sel-row.is-selected .pin, .log-line.is-selected .pin { opacity: 1; }
.customer-name { font-size: var(--fs-18); line-height: var(--lh-18); font-weight: 600; }
.context-usage { margin-top: var(--s-3); }

.panel-section > * + * { margin-top: var(--s-4); }
/* İşlem paneli: gövde paneli doldurur ama taşmaz; düğme panelin altında kalır */
.action-form { display: flex; flex-direction: column; }
.action-form > .panel-body { flex: 1; display: flex; flex-direction: column; }
.action-form form { flex: 1; display: flex; flex-direction: column; gap: var(--s-3); }
.action-form .btn-row { margin-top: auto; }
.log-filters input[type="time"] { width: 104px; height: var(--control-h); padding: 0 6px; font-size: var(--fs-13); }
.log-selected .pin { background: var(--term-raised); color: var(--term-text); border-color: var(--term-border); }
.log-selected .pin:hover:not(:disabled) { background: var(--term-select); color: var(--term-text); }

@media (max-width: 767px) {
  /* kanıt tepsisi: yuvalar yatay kayar, dikeyde yer kaplamaz */
  .evidence-slots { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .evidence-slots::-webkit-scrollbar { display: none; }
  .evidence-item { flex: 0 0 78%; scroll-snap-align: start; }
  .evidence-item.is-empty { flex-basis: 44%; }
  /* yığılmış tablo: işlemler satırın altında */
  .table.stack td.actions { position: static; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-start; margin-top: 6px; }
  .table.stack td.lead { padding-right: 0 !important; }
  .table.stack td.lead[data-label]::before { content: none; }
  .dns { overflow-y: auto; }
  .dns .table-wrap { flex: none; overflow: visible; }
}
@media (max-width: 767px) {
  .log-line { white-space: pre-wrap; align-items: flex-start; }
  .log-msg { overflow-wrap: anywhere; text-overflow: clip; }
  .log-ts { font-size: var(--fs-12); }
  .table.stack tr.is-selected { background: var(--active); }
  .table.stack tr.is-selected td, .table.stack tbody tr:hover td { background: transparent; }
  .table.stack td[data-label]::before { font-family: var(--font); }
}

/* ======================================================================
   Biletin araçları (yalnızca 1280 px altında, bağlam paneli gizliyken)
   ====================================================================== */
.ticket-tools {
  display: none; flex: none;
  align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-6); border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.ticket-tools::-webkit-scrollbar { display: none; }
.ticket-tools-label { flex: none; font-size: var(--fs-12); color: var(--muted); }
.ticket-tool-btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: var(--fs-13); color: var(--text); white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.ticket-tool-btn:hover:not(:disabled):not(.is-locked) { background: var(--hover); border-color: var(--control); }
.ticket-tool-btn.is-active { background: var(--active); border-color: var(--control); font-weight: 500; }
.ticket-tool-btn.is-locked { color: var(--faint); cursor: not-allowed; }
.ticket-tool-btn:disabled { color: var(--faint); }
.ticket-tool-btn .i { color: var(--muted); }
@media (max-width: 1279px) { .ticket-tools { display: flex; } }
@media (max-width: 1023px) { .ticket-tools { padding-left: var(--s-4); padding-right: var(--s-4); } }
@media (max-width: 767px) { .ticket-tool-btn { height: 36px; } }

/* Telefon: Araçlar alt sayfası */
.sheet-backdrop { position: fixed; inset: 0; z-index: 85; background: var(--scrim); }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 86;
  max-height: 80dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: var(--s-2) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-float);
}
@media (min-width: 768px) { .sheet { left: auto; right: var(--s-4); bottom: calc(var(--tabnav-h) + var(--s-2)); width: 360px; border-radius: var(--r-card); } }
.sheet-head { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; }
.sheet-title { flex: 1; font-size: var(--fs-16); line-height: var(--lh-16); }
.sheet-tools { display: flex; flex-direction: column; }
.sheet-tools .context-tool { height: var(--touch); margin: 0; width: 100%; padding: 0 var(--s-2); }

/* ======================================================================
   İlk gün rehberi: kompakt, opak; dar ekranda alt sayfa, üst çubuğu örtmez
   ====================================================================== */
.coach-root { z-index: 80; }
.coach-ring { z-index: 1; }
.coach { z-index: 2; width: min(320px, calc(100vw - 24px)); max-width: 320px; padding: var(--s-3) var(--s-4); background: var(--surface); opacity: 1; }
.coach-text { font-size: var(--fs-13); line-height: var(--lh-13); }
.coach-foot { margin-top: var(--s-3); }
@media (max-width: 767px) {
  .coach:not(.static) {
    /* alt gezintinin hemen üstünde: Araçlar ve Biletler her adımda tıklanabilir kalır */
    position: fixed; top: auto !important; left: 0 !important; right: 0; bottom: calc(var(--tabnav-h) + env(safe-area-inset-bottom)) !important;
    width: auto; max-width: none; border-radius: var(--r-card) var(--r-card) 0 0;
    padding: var(--s-3) var(--s-4);
    animation: none;
  }
  .coach-root .coach-ring { box-shadow: 0 0 0 2px var(--accent); } /* alt sayfa varken ekranı karartma, hedef görünsün */
}

/* Telefon: kanıt özeti ve rehbere ayrılan alan; iş akışı kaydırılarak erişilir. */
.tray-toggle { display: none; }
@media (max-width: 767px) {
  .evidence-tray { padding-top: 0; padding-bottom: 0; }
  .evidence-tray-head { min-height: 44px; margin-bottom: 0; }
  .tray-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
  .evidence-tray:not(.is-expanded) > :not(.evidence-tray-head) { display: none; }
  .evidence-tray.is-expanded { padding-bottom: var(--s-3); }
  .ticket-tool-btn { min-height: 44px; }
  .app-sheet { margin-bottom: var(--coach-space, 0px); }
  .desk-main { overflow-y: auto; overscroll-behavior: contain; }
  .ticket { flex: none; min-height: 100%; }
  .ticket-body { flex: none; height: 420px; }
  .ticket > .composer.workflow { flex: none; max-height: none; overflow: visible; }
  .ticket > .composer.workflow .composer-body { overflow: visible; }
  .tool-frame-body { grid-template-rows: auto minmax(0, 1fr); }
  .tool-frame-body.no-nav { grid-template-rows: minmax(0, 1fr); }
}