/* Aida and MT pages: list of conversations, a conversation with bilingual bubbles, side panels. Built on admin.css tokens. */
body.desk-page { background: var(--bg); color: var(--ink); display: flex; flex-direction: column; font-family: var(--font-body, Inter, sans-serif); height: 100dvh; margin: 0; overflow: hidden; }

.desk-top { flex: none; position: static; }

.desk-brand { align-items: center; display: flex; gap: 14px; min-width: 0; }

.desk-home { color: var(--ink); font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }

.desk-brand h1 { font-size: 16px; margin: 0; white-space: nowrap; }

.desk-sep { background: var(--line-strong); flex: none; height: 18px; width: 1px; }

/* status strip under the header: part of the header band, not a warning colour */
.desk-notice { align-items: center; background: var(--surface-3); border-bottom: 1px solid var(--line); color: var(--ink-2); display: flex; flex: none; font-size: 13px; gap: 8px; padding: 7px 24px; }

.desk-notice[hidden] { display: none; }

.desk-notice::before { background: var(--warm); border-radius: 50%; content: ""; flex: none; height: 7px; width: 7px; }

:root[data-look="acibadem"] .desk-notice { background: #0b2d6e; border-bottom-color: rgba(255, 255, 255, 0.08); color: #c5d3ec; }

@media (prefers-color-scheme: dark) {
  :root[data-look="acibadem"]:not([data-theme="light"]) .desk-notice { background: #061a42; }
}

:root[data-look="acibadem"][data-theme="dark"] .desk-notice { background: #061a42; }

.desk-main { display: grid; flex: 1; gap: 14px; min-height: 0; padding: 14px 18px 18px; }

.desk-panel { background: var(--card-bg); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }

.desk-panel-head { align-items: center; border-bottom: 1px solid var(--line); display: flex; flex: none; gap: 10px; justify-content: space-between; padding: 12px 14px; }

.desk-panel-head h2 { font-family: var(--font-head, inherit); font-size: 15px; margin: 0; }

.desk-scroll { flex: 1; min-height: 0; overflow-y: auto; }

.desk-empty { color: var(--muted); display: flex; flex-direction: column; font-size: 13.5px; gap: 6px; padding: 28px 18px; text-align: center; }

.desk-empty strong { color: var(--ink); font-size: 14.5px; }

/* tabs above the list */
.desk-tabs { display: flex; gap: 4px; }

.desk-tab { background: transparent; border: 1px solid transparent; border-radius: 999px; color: var(--muted); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; padding: 4px 10px; }

.desk-tab[aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }

.desk-tab b { font-variant-numeric: tabular-nums; margin-left: 4px; }

/* conversation list */
.desk-section { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 12px 14px 4px; text-transform: uppercase; }

.desk-item { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; font: inherit; gap: 3px; padding: 10px 14px 10px 11px; text-align: left; width: 100%; }

.desk-item:hover { background: var(--hover); }

.desk-item[aria-selected="true"] { background: var(--accent-soft); border-left-color: var(--accent); }

.desk-item-top { align-items: center; display: flex; gap: 8px; justify-content: space-between; }

.desk-item-top strong { font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.desk-item-top small { color: var(--muted); flex: none; font-size: 11.5px; }

.desk-item-meta { align-items: center; color: var(--muted); display: flex; flex-wrap: wrap; font-size: 12px; gap: 6px; }

.desk-item-last { color: var(--ink-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.desk-item-flag { color: var(--hot-text); font-size: 12px; font-weight: 600; }

.desk-item.waiting { border-left-color: var(--hot); }

.ch-tag { color: var(--ink-2); font-size: 12px; font-weight: 600; }

.ch-tag.ch-whatsapp { color: #128c4b; }

.ch-tag.ch-messenger { color: #3b4fe0; }

.ch-tag.ch-instagram { color: #c1215a; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ch-tag.ch-whatsapp { color: #4ee08a; }
  :root:not([data-theme="light"]) .ch-tag.ch-messenger { color: #9aa8ff; }
  :root:not([data-theme="light"]) .ch-tag.ch-instagram { color: #ff7aa6; }
}

:root[data-theme="dark"] .ch-tag.ch-whatsapp { color: #4ee08a; }

:root[data-theme="dark"] .ch-tag.ch-messenger { color: #9aa8ff; }

:root[data-theme="dark"] .ch-tag.ch-instagram { color: #ff7aa6; }

/* conversation */
.convo-headline { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: space-between; }

.convo-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.convo-who h2 { font-family: var(--font-head, inherit); font-size: 17px; margin: 0; }

.convo-chips { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }

.convo-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }

.convo-state { color: var(--muted); font-size: 12.5px; }

.dm-list { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 10px; }

.dm { display: flex; flex-direction: column; gap: 3px; max-width: 76%; }

.dm.other { align-self: flex-start; }

.dm.self { align-self: flex-end; align-items: flex-end; }

.dm.third { align-self: flex-start; }

.dm.note { align-self: center; max-width: 86%; }

.dm.sys { align-self: center; color: var(--muted); font-size: 12px; max-width: 86%; text-align: center; }

.dm-who { color: var(--muted); font-size: 11.5px; font-weight: 600; padding: 0 4px; }

.dm-bubble { background: var(--card-bg); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(7, 37, 98, 0.06); display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; }

.dm.self .dm-bubble { background: var(--accent-soft); border-color: var(--accent-line); }

.dm.third .dm-bubble { background: var(--cold-soft); border-color: var(--cold-line); }

.dm.note .dm-bubble { background: var(--warm-soft); border-color: var(--warm-line); }

.dm.other .dm-bubble { border-top-left-radius: 4px; }

.dm.self .dm-bubble { border-top-right-radius: 4px; }

.dm-text { font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }

.dm-chips { display: flex; flex-wrap: wrap; gap: 4px; }

.dm-chips span { border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-2); font-size: 11.5px; padding: 1px 8px; }

.dm-ad { background: var(--surface); border-left: 3px solid var(--bar); border-radius: 6px; color: var(--ink-2); font-size: 12px; padding: 4px 8px; }

.dm-when { align-items: center; color: var(--muted); display: inline-flex; font-size: 11px; gap: 6px; padding: 0 4px; }

.dm-flip { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 999px; color: var(--muted); cursor: pointer; display: inline-flex; font: inherit; font-size: 11px; font-weight: 600; gap: 3px; padding: 1px 5px; }

.dm-flip:hover, .dm-flip:focus-visible { border-color: var(--line-strong); color: var(--accent-text); outline: none; }

.dm-flip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }

.dm-flip span:empty { display: none; }

.dm-pending { font-style: italic; }

.dm-v { display: flex; flex-direction: column; gap: 6px; }

.dm-v[hidden] { display: none; }

.dm.fresh .dm-bubble { animation: dm-in 0.5s ease; }

@keyframes dm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.dm-typing { align-self: flex-start; color: var(--muted); font-size: 12.5px; padding: 0 4px 6px; }

/* composer (MT) */
.desk-composer { border-top: 1px solid var(--line); display: flex; flex: none; flex-direction: column; gap: 6px; padding: 10px 12px 12px; }

.desk-composer-row { align-items: flex-end; display: flex; gap: 8px; }

.desk-composer textarea { flex: 1; max-height: 140px; min-height: 44px; resize: none; }

.desk-composer small { color: var(--muted); font-size: 12px; }

.desk-composer .lock { align-items: center; display: flex; gap: 10px; justify-content: space-between; }

/* Acıbadem look */
:root[data-look="acibadem"] .desk-home { color: #ffffff; font-family: var(--font-head); font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }

:root[data-look="acibadem"] .desk-sep { background: rgba(255, 255, 255, 0.25); }

:root[data-look="acibadem"] .desk-brand h1 { color: #ffffff; font-family: var(--font-head); font-size: 16px; font-weight: 700; }

:root[data-look="acibadem"] .desk-brand .desk-sub { color: var(--brand-band-muted); font-size: 13px; }

:root[data-look="acibadem"] .desk-panel { border-radius: 14px; }

:root[data-look="acibadem"] .dm.self .dm-bubble { background: #072562; border-color: #072562; box-shadow: 0 4px 14px rgba(7, 37, 98, 0.18); color: #ffffff; }

@media (prefers-color-scheme: dark) {
  :root[data-look="acibadem"]:not([data-theme="light"]) .dm.self .dm-bubble { background: #0a4fa3; border-color: #0a4fa3; box-shadow: none; }
}

:root[data-look="acibadem"][data-theme="dark"] .dm.self .dm-bubble { background: #0a4fa3; border-color: #0a4fa3; box-shadow: none; }

:root[data-look="acibadem"] .dm.self .dm-chips span { border-color: rgba(255, 255, 255, 0.45); color: #ffffff; }

.desk-sub { color: var(--muted); font-size: 13px; white-space: nowrap; }

@media (max-width: 760px) {
  .desk-sub { display: none; }
  .desk-main { padding: 0; }
  .desk-panel { border: 0; border-radius: 0; }
}

/* avatar with channel mark, five-step journey (Aida, MT, monitor) */
.ai-avatar { align-items: center; background: #072562; border-radius: 50%; color: #ffffff; display: inline-flex; flex: none; font-family: var(--font-head, inherit); font-size: 13px; font-weight: 700; height: 40px; justify-content: center; position: relative; width: 40px; }

.ai-avatar.lg { font-size: 15px; height: 48px; width: 48px; }

.ai-ch { align-items: center; border-radius: 50%; bottom: -3px; box-shadow: 0 0 0 2px var(--card-bg); color: #ffffff; display: inline-flex; height: 18px; justify-content: center; position: absolute; right: -3px; width: 18px; }

.ch-whatsapp .ai-ch { background: #25d366; }

.ch-messenger .ai-ch { background: linear-gradient(45deg, #0866ff, #a033ff 70%, #ff5c87); }

.ch-instagram .ai-ch { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }

.ch-web_widget .ai-ch { background: var(--bar); }

.cv-journey { border-bottom: 1px solid var(--line); display: grid; flex: none; gap: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: 0; padding: 8px 12px 14px; }

.cv-journey li { align-items: center; display: flex; flex-direction: column; gap: 6px; position: relative; text-align: center; }

.cv-journey li:not(:last-child)::after { background: var(--track); content: ""; height: 2px; left: calc(50% + 17px); position: absolute; right: calc(-50% + 17px); top: 12px; }

.cv-journey li.done::after { background: var(--accent); }

.cv-node { align-items: center; background: var(--surface-3); border: 1.5px solid var(--line-strong); border-radius: 50%; color: var(--muted); display: inline-flex; font-size: 12px; font-weight: 700; height: 26px; justify-content: center; position: relative; width: 26px; z-index: 1; }

.cv-journey li.done .cv-node { background: var(--accent); border-color: var(--accent); color: #ffffff; }

.cv-journey li.now .cv-node { background: var(--card-bg); border-color: var(--bar); box-shadow: 0 0 0 4px rgba(37, 170, 225, 0.18); color: var(--accent-text); }

.cv-step b { color: var(--muted); display: block; font-size: 12px; font-weight: 600; }

.cv-journey li.done .cv-step b { color: var(--ink-2); }

.cv-journey li.now .cv-step b { color: var(--ink); }

.cv-step small { color: var(--accent-text); display: block; font-size: 11px; margin-top: 1px; }


.dm.self.from-agent .dm-bubble, :root[data-look="acibadem"] .dm.self.from-agent .dm-bubble { background: var(--cold-soft); border-color: var(--cold-line); box-shadow: none; color: var(--ink); }

.dm.self.from-agent .dm-chips span, :root[data-look="acibadem"] .dm.self.from-agent .dm-chips span { border-color: var(--line-strong); color: var(--ink-2); }

.dm-typing.right { align-self: flex-end; }

/* message area with the faint grid (Aida, monitor, lead file) */
.cv-thread {
  background-color: var(--bg);
  background-image: linear-gradient(90deg, var(--grid, rgba(7, 37, 98, 0.035)) 1px, transparent 1px), linear-gradient(0deg, var(--grid, rgba(7, 37, 98, 0.035)) 1px, transparent 1px);
  background-size: 32px 32px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cv-thread { --grid: rgba(255, 255, 255, 0.025); }
}

:root[data-theme="dark"] .cv-thread { --grid: rgba(255, 255, 255, 0.025); }

/* conversation header (Aida, monitor) */
.cv-head { align-items: center; display: flex; flex: none; flex-wrap: wrap; gap: 12px 16px; justify-content: space-between; padding: 16px 20px 10px; }

.cv-who { align-items: center; display: flex; gap: 12px; min-width: 0; }

.cv-who h2 { font-family: var(--font-head, inherit); font-size: 18px; margin: 0; }

.cv-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }

.cv-meta { column-gap: 0; }

.cv-meta span { color: var(--ink-2); font-size: 12.5px; }

.cv-meta span + span { border-left: 1px solid var(--line-strong); margin-left: 10px; padding-left: 10px; }

.cv-meta .prio-hot { color: var(--hot-text); font-weight: 700; }

.cv-meta .prio-warm { color: var(--warm-text); font-weight: 700; }

.cv-meta .prio-cold { color: var(--cold-text); font-weight: 700; }

.cv-actions { display: flex; flex-wrap: wrap; gap: 8px; }