/* ===========================================================================
   Telegram Support Center - admin interface.

   Mobile first, and not as a slogan: every base rule below describes the
   phone, and the only media query that adds structure is `min-width: 980px`,
   where the desktop three-column layout appears. Roughly 70% of this system's
   use is on a phone, so the phone is the design and the desk is the variant.

   Right-to-left is the document direction, so logical properties are used
   throughout - `inline-start` rather than `left`. There is no `direction:ltr`
   anywhere except the two places where Latin data must not be mirrored:
   ticket numbers and order numbers.
   =========================================================================== */

:root {
  color-scheme: light dark;

  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --surface-3: #eef0f3;
  --border: #dfe3e8;
  --border-strong: #c8cdd4;

  --text: #16191d;
  --text-muted: #5d6673;
  --text-faint: #8a939f;

  --accent: #1f6feb;
  --accent-soft: #e7f0fe;
  --accent-text: #ffffff;

  --unread: #0b64d6;
  --danger: #c1373a;
  --danger-soft: #fdeceb;
  --success: #1a7f4b;
  --success-soft: #e6f5ec;
  --warning: #9a6200;
  --warning-soft: #fdf2dc;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;

  --shadow-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-2: 0 6px 24px rgba(16, 24, 40, .12);

  --topbar-h: 56px;
  --bottombar-h: 60px;

  --tap: 44px;               /* never smaller than this, anywhere */
  --safe-b: env(safe-area-inset-bottom, 0px);

  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue",
          "Noto Sans Hebrew", "Arial Hebrew", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --surface: #1b1e24;
    --surface-2: #20242b;
    --surface-3: #262b33;
    --border: #2e343d;
    --border-strong: #3d444f;

    --text: #e8ebef;
    --text-muted: #a3acb9;
    --text-faint: #7b8593;

    --accent: #4f8ff7;
    --accent-soft: #1d2b44;
    --accent-text: #0c1017;

    --unread: #6aa6ff;
    --danger: #f0736f;
    --danger-soft: #3a1f1f;
    --success: #58c98d;
    --success-soft: #16301f;
    --warning: #e0b055;
    --warning-soft: #332813;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 6px 24px rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  /* The safety net for "no horizontal scrolling", if one child misbehaves.
     `clip`, not `hidden`, and the difference is not cosmetic: `overflow-x:
     hidden` makes the element a scroll container, and a sticky descendant
     then resolves against *that* container instead of the viewport - which
     silently stops the reply composer sticking to the bottom of the screen.
     `clip` crops without creating a scroll container, so sticky keeps
     working. (Safari below 16 ignores it and falls back to no clipping;
     nothing overflows anyway - tests/ui_qa.py proves that at each viewport.) */
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;          /* 16px stops iOS zooming on focus */
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.3; }
p { margin: 0 0 .6em; }
a { color: var(--accent); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Latin identifiers inside Hebrew text: keep them unmirrored. */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ---------------------------------------------------------------- controls */
.btn {
  appearance: none;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  min-height: var(--tap);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--surface-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.btn-primary:hover { background: var(--accent); filter: brightness(1.07); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-3); }
.btn-danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.btn-danger:hover { background: var(--danger-soft); }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: 14px; }

.icon-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  width: var(--tap);
  height: var(--tap);
  min-width: var(--tap);
  border-radius: var(--radius-sm);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover { background: var(--surface-3); }

input, textarea, select {
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  width: 100%;
  min-height: var(--tap);
}
textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); outline: none; }
label { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin: 0 0 6px; }

/* ------------------------------------------------------------------- login */
.login-screen {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px calc(24px + var(--safe-b));
  background: var(--bg);
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  box-shadow: var(--shadow-2);
}
.login-mark { font-size: 38px; text-align: center; line-height: 1; }
.login-card h1 { font-size: 21px; text-align: center; margin: 10px 0 2px; }
.login-sub { text-align: center; color: var(--text-muted); font-size: 14px; margin-bottom: 22px; }
.login-card label { margin-top: 14px; }
.login-card .btn { margin-top: 22px; }
.login-error {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 14px;
  text-align: center;
}

/* ------------------------------------------------------------------- shell */
.app { min-height: 100dvh; display: flex; flex-direction: column; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar-title {
  flex: 1;
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline-start: 6px;
}
.topbar-actions { display: flex; align-items: center; gap: 2px; }

.layout { flex: 1; display: flex; min-height: 0; }

.sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: 272px;
  max-width: 84vw;
  z-index: 60;
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
  padding: 16px 12px calc(16px + var(--safe-b));
  overflow-y: auto;
  transform: translateX(100%);          /* RTL: off-canvas to the right */
  transition: transform .2s ease;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sidebar.open { transform: translateX(0); }
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(10, 14, 20, .45);
}

.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 8px; }
.brand-mark { font-size: 22px; }
.brand-text { font-weight: 700; font-size: 17px; }

.sidebar-section { display: flex; flex-direction: column; gap: 4px; }
.sidebar-heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-faint);
  padding: 0 10px 4px;
  text-transform: none;
}
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 15px;
}
.nav-item:hover { background: var(--surface-3); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-icon { width: 22px; text-align: center; }
.nav-count {
  margin-inline-start: auto;
  background: var(--surface-3);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 700;
  min-width: 26px;
  text-align: center;
}
.nav-item.active .nav-count { background: var(--accent); color: var(--accent-text); }
.nav-count.hot { background: var(--unread); color: #fff; }

.sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 0 8px; }
.sidebar-user { font-size: 13px; color: var(--text-faint); }

.main {
  flex: 1;
  min-width: 0;
  padding: 0 0 calc(var(--bottombar-h) + var(--safe-b));
}

.bottombar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 45;
  height: calc(var(--bottombar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.bottom-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 12px;
  color: var(--text-muted);
}
.bottom-item span:first-child { font-size: 19px; line-height: 1; }
.bottom-item.active { color: var(--accent); font-weight: 600; }

/* ------------------------------------------------------------------ badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-muted { background: var(--surface-3); color: var(--text-muted); }
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }

.status-new       { background: var(--accent-soft);  color: var(--accent); }
.status-awaiting_customer_details { background: var(--surface-3); color: var(--text-muted); }
.status-awaiting_treatment { background: var(--warning-soft); color: var(--warning); }
.status-in_progress { background: var(--accent-soft); color: var(--accent); }
.status-awaiting_customer { background: var(--surface-3); color: var(--text-muted); }
.status-resolved  { background: var(--success-soft); color: var(--success); }
.status-closed    { background: var(--surface-3); color: var(--text-faint); }

/* --------------------------------------------------------------- inbox list */
.toolbar {
  position: sticky;
  top: var(--topbar-h);
  z-index: 30;
  background: var(--bg);
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
}
.search-row { display: flex; gap: 8px; align-items: center; }
.search-row input { flex: 1; }

.chips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 10px 0 2px;
  margin: 0 -12px;
  padding-inline: 12px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 9px 15px;
  font-size: 14px;
  font-weight: 600;
  /* A filter chip is tapped as often as anything in the inbox; it gets the
     same 44px target as every other control. */
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.chip-count {
  background: rgba(0, 0, 0, .08);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12px;
}
.chip.active .chip-count { background: rgba(255, 255, 255, .25); }

.ticket-list { list-style: none; margin: 0; padding: 0; }
.ticket-row {
  display: block;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  min-height: 76px;
}
.ticket-row:hover { background: var(--surface-2); }
.ticket-row.unread { background: var(--surface); }
.ticket-row.unread .ticket-name { font-weight: 700; }
.ticket-row.unread::before {
  content: "";
  float: inline-start;
  width: 8px;
  height: 8px;
  margin-inline-end: 8px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--unread);
}
.ticket-head { display: flex; align-items: baseline; gap: 8px; }
.ticket-name {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.ticket-time { font-size: 12px; color: var(--text-faint); flex: 0 0 auto; }
.ticket-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 3px; }
.ticket-number { font-size: 12px; color: var(--text-faint); font-weight: 600; }
.ticket-preview {
  font-size: 13.5px;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.empty-state { padding: 56px 24px; text-align: center; color: var(--text-muted); }
.empty-state .emoji { font-size: 40px; display: block; margin-bottom: 10px; }
.loading { padding: 32px; text-align: center; color: var(--text-faint); }

/* --------------------------------------------------------------- ticket view */
.ticket-view { display: flex; flex-direction: column; min-height: 0; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin: 12px;
  box-shadow: var(--shadow-1);
}
.card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-faint);
  margin-bottom: 10px;
}

.ticket-header .who { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
}
.who-text { min-width: 0; }
.who-name { font-weight: 600; font-size: 16px; overflow-wrap: anywhere; }
.who-sub { font-size: 12.5px; color: var(--text-muted); overflow-wrap: anywhere; }
/* Inline links inside a sentence are only as tall as the line box. These two
   are genuine navigation on a phone, so they get a real target. */
.who-sub a {
  display: inline-block;
  min-height: var(--tap);
  line-height: var(--tap);
  padding-inline: 2px;
  font-weight: 600;
}

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 12px; }
.fact { min-width: 0; }
.fact dt { font-size: 12px; color: var(--text-faint); font-weight: 600; }
.fact dd { margin: 1px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.fact-wide { grid-column: 1 / -1; }

.highlight-box {
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 12px;
}
.highlight-box dt { color: color-mix(in srgb, var(--accent) 80%, var(--text)); }

.thread { padding: 4px 12px 8px; display: flex; flex-direction: column; gap: 10px; }
.bubble {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: var(--shadow-1);
}
.bubble-customer {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-start-start-radius: 4px;
}
.bubble-admin {
  align-self: flex-end;
  background: var(--accent);
  color: var(--accent-text);
  border-start-end-radius: 4px;
}
.bubble-system {
  align-self: center;
  max-width: 94%;
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 13.5px;
  border: 1px dashed var(--border-strong);
}
.bubble-failed { border: 1px solid var(--danger); }
.bubble-deleted { opacity: .55; text-decoration: line-through; }
.bubble-foot {
  margin-top: 5px;
  font-size: 12px;
  opacity: .75;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bubble-admin .bubble-foot { color: rgba(255, 255, 255, .85); }
.bubble-error { color: var(--danger); font-size: 12px; margin-top: 6px; font-weight: 600; }

.attachment { margin-top: 8px; }
.attachment img {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  max-height: 320px;
  width: auto;
  cursor: zoom-in;
}
.attachment-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.attachment-failed {
  background: var(--danger-soft);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font-size: 13px;
}

.day-sep { text-align: center; margin: 8px 0 2px; }
.day-sep span {
  background: var(--surface-3);
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 11px;
  border-radius: 999px;
}

/* Sticky composer: the one control that must always be reachable with a thumb. */
.composer {
  position: sticky;
  bottom: calc(var(--bottombar-h) + var(--safe-b));
  z-index: 35;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 10px 12px;
}
.composer textarea { min-height: 46px; max-height: 40vh; }
.composer-row { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; }
.composer-row .btn { flex: 0 0 auto; }
.composer-hint { font-size: 12px; color: var(--text-faint); margin-top: 6px; }

.action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }

.field-row { display: grid; gap: 10px; margin-bottom: 12px; }
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--tap);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.switch-row:last-child { border-bottom: 0; }
.switch-row label { margin: 0; font-size: 14.5px; color: var(--text); font-weight: 500; }
.switch { position: relative; width: 50px; height: 30px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span {
  position: absolute;
  inset: 0;
  background: var(--border-strong);
  border-radius: 999px;
  transition: background .15s ease;
  pointer-events: none;
}
.switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  transition: transform .15s ease;
}
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(-20px); }

.note-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.note-item .meta { font-size: 12px; color: var(--text-faint); margin-bottom: 4px; display: flex; justify-content: space-between; gap: 8px; }
.note-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }

.history-item {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  color: var(--text-muted);
  padding: 5px 0;
  border-bottom: 1px dashed var(--border);
}
.history-item:last-child { border-bottom: 0; }

/* -------------------------------------------------------------- analytics */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 14px;
  box-shadow: var(--shadow-1);
}
.stat-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.stat-value { font-size: 26px; font-weight: 700; line-height: 1.2; margin-top: 3px; }
.stat-sub { font-size: 12px; color: var(--text-faint); }

/* No `width: 100%`. The chart is drawn at a real pixel width - one column per
   day - and scrolls inside .chart-scroll. Scaling it to the container instead
   would squeeze a month into 350px on a phone, where the bars become hairlines
   and the date labels overlap into noise. In RTL the box opens scrolled to the
   most recent days, which is the end an operator wants to see. */
.chart { height: 190px; display: block; overflow: visible; }
.chart-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.bar { fill: var(--accent); }
.bar-complaint { fill: var(--danger); }
.axis-text { fill: var(--text-faint); font-size: 11px; }
.grid-line { stroke: var(--border); stroke-width: 1; }

.bar-list { display: flex; flex-direction: column; gap: 10px; }
.bar-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.bar-item .label { font-size: 14px; }
.bar-item .value { font-size: 14px; font-weight: 600; }
.bar-track { grid-column: 1 / -1; height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: 0 14px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: start; padding: 9px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { font-size: 12px; color: var(--text-faint); font-weight: 700; }
td.wrap { white-space: normal; overflow-wrap: anywhere; }
td a {
  display: inline-block;
  min-height: var(--tap);
  line-height: var(--tap);
  min-width: 44px;
}

/* --------------------------------------------------------------- settings */
.setting-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 10px;
  overflow: hidden;
}
.setting-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  min-height: var(--tap);
  background: var(--surface);
  width: 100%;
  border: 0;
  font: inherit;
  color: var(--text);
  text-align: start;
}
.setting-head:hover { background: var(--surface-2); }
.setting-body { padding: 0 14px 14px; border-top: 1px solid var(--border); }
.setting-lang { margin-top: 12px; }
.setting-default {
  font-size: 12.5px;
  color: var(--text-faint);
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  white-space: pre-wrap;
  margin-top: 6px;
  overflow-wrap: anywhere;
}

.info-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.info-row:last-child { border-bottom: 0; }
.info-row dt { color: var(--text-muted); }
.info-row dd { margin: 0; font-weight: 600; text-align: end; overflow-wrap: anywhere; }

.callout {
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-size: 13.5px;
  margin-bottom: 12px;
  border: 1px solid transparent;
}
.callout-info { background: var(--accent-soft); color: var(--accent); }
.callout-warn { background: var(--warning-soft); color: var(--warning); }
.callout-ok { background: var(--success-soft); color: var(--success); }

/* -------------------------------------------------------------- simulator */
.sim-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.transcript { display: flex; flex-direction: column; gap: 8px; }
.trans-step {
  border-inline-start: 3px solid var(--border-strong);
  padding: 7px 11px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
}
.trans-customer { border-inline-start-color: var(--accent); }
.trans-system { border-inline-start-color: var(--text-faint); }
.trans-admin { border-inline-start-color: var(--success); }
.trans-note { border-inline-start-color: var(--warning); }
.trans-step .lbl { font-weight: 700; font-size: 12px; color: var(--text-muted); }
.trans-step .txt { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 3px; }
.trans-step.pass { border-inline-start-color: var(--success); background: var(--success-soft); }
.trans-step.fail { border-inline-start-color: var(--danger); background: var(--danger-soft); }

/* ----------------------------------------------------------------- toasts */
.toast-host {
  position: fixed;
  inset-inline: 12px;
  bottom: calc(var(--bottombar-h) + var(--safe-b) + 12px);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--text);
  color: var(--bg);
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  box-shadow: var(--shadow-2);
  overflow-wrap: anywhere;
}
.toast-error { background: var(--danger); color: #fff; }
.toast-ok { background: var(--success); color: #fff; }

/* --------------------------------------------------------------- lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 10, 14, .95);
  display: flex;
  flex-direction: column;
}
.lightbox-bar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
.lightbox-body { flex: 1; display: grid; place-items: center; padding: 8px 8px calc(16px + var(--safe-b)); overflow: auto; }
.lightbox-body img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }

/* ============================ desktop ==================================== */
@media (min-width: 980px) {
  :root { --topbar-h: 60px; }

  .only-mobile { display: none !important; }
  .main { padding-bottom: 0; }
  .toast-host { inset-inline: auto; inset-inline-end: 20px; bottom: 20px; max-width: 380px; }

  .layout { align-items: stretch; }

  .sidebar {
    position: sticky;
    top: var(--topbar-h);
    height: calc(100dvh - var(--topbar-h));
    transform: none;
    width: 252px;
    flex: 0 0 252px;
    max-width: none;
  }
  .sidebar-backdrop { display: none !important; }
  .sidebar-brand { display: none; }

  .topbar { padding-inline: 16px; }

  /* Inbox and conversation side by side. The list keeps its own scroll so
     moving between tickets does not lose your place in it. */
  .split {
    display: grid;
    grid-template-columns: minmax(320px, 400px) 1fr;
    height: calc(100dvh - var(--topbar-h));
    min-height: 0;
  }
  .split-list { border-inline-end: 1px solid var(--border); overflow-y: auto; min-height: 0; background: var(--surface); }
  .split-detail { overflow-y: auto; min-height: 0; background: var(--bg); }
  .split-detail .composer { bottom: 0; }

  .toolbar { position: sticky; top: 0; }

  .ticket-row { min-height: 84px; }
  .ticket-row.selected { background: var(--accent-soft); }

  .card { margin: 16px; padding: 16px; }
  .facts { grid-template-columns: repeat(3, 1fr); }
  .thread { padding: 8px 16px; }
  .bubble { max-width: 72%; }
  .page { max-width: 1120px; margin: 0 auto; }
  .chart { height: 230px; }
}

@media (min-width: 1400px) {
  .split { grid-template-columns: minmax(340px, 420px) 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}