/* ==========================================================================
   MyAsistant — operations console stylesheet
   1. Tokens   2. Reset   3. Layout   4. Components   5. Pages   6. Responsive
   ========================================================================== */

/* 1. TOKENS ================================================================ */

:root {
  /* neutral ramp (slate) */
  --n-50:#f8fafc;  --n-100:#f1f5f9; --n-200:#e2e8f0; --n-300:#cbd5e1;
  --n-400:#94a3b8; --n-500:#64748b; --n-600:#475569; --n-700:#334155;
  --n-800:#1e293b; --n-900:#0f172a; --n-950:#020617;

  /* accent — emerald/teal */
  --a-50:#ecfdf5;  --a-100:#d1fae5; --a-200:#a7f3d0; --a-300:#6ee7b7;
  --a-400:#34d399; --a-500:#10b981; --a-600:#059669; --a-700:#047857;
  --a-800:#065f46; --a-900:#064e3b;

  /* secondary — violet (AI) */
  --v-50:#f5f3ff;  --v-100:#ede9fe; --v-200:#ddd6fe; --v-300:#c4b5fd;
  --v-400:#a78bfa; --v-500:#8b5cf6; --v-600:#7c3aed; --v-700:#6d28d9;

  /* semantic hues */
  --h-success:#059669; --h-warning:#d97706; --h-danger:#dc2626; --h-info:#0284c7;

  /* surfaces (light) */
  --bg:           #f4f6f9;
  --bg-grid:      rgba(15,23,42,.035);
  --surface:      #ffffff;
  --surface-2:    #f8fafc;
  --surface-3:    #f1f5f9;
  --surface-sunk: #eef2f7;
  --overlay:      rgba(15,23,42,.45);

  --border:        #e3e8ef;
  --border-strong: #cfd6e0;
  --border-soft:   #eef1f5;

  --text:   #0f172a;
  --text-2: #475569;
  --text-3: #7a8699;
  --text-inv:#ffffff;

  --accent:      var(--a-600);
  --accent-hover:var(--a-700);
  --accent-text: var(--a-700);
  --accent-fg:   #ffffff;
  --accent-soft: var(--a-50);
  --accent-ring: rgba(5,150,105,.32);

  --violet:      var(--v-600);
  --violet-text: var(--v-700);
  --violet-soft: var(--v-50);
  --violet-line: var(--v-200);

  --success:var(--h-success); --success-soft:#ecfdf5;
  --warning:var(--h-warning); --warning-soft:#fffbeb;
  --danger: var(--h-danger);  --danger-soft:#fef2f2;
  --info:   var(--h-info);    --info-soft:#f0f9ff;

  --shadow-1: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.06);
  --shadow-2: 0 10px 15px -3px rgba(15,23,42,.08), 0 4px 6px -4px rgba(15,23,42,.06);
  --shadow-3: 0 24px 48px -12px rgba(15,23,42,.22);

  /* bubbles */
  --bubble-in:#ffffff; --bubble-in-br:var(--border);
  --bubble-out:var(--a-50); --bubble-out-br:#bdebd8;
  --bubble-ai:var(--v-50); --bubble-ai-br:var(--v-200);

  /* chart */
  --chart-in:  var(--a-500);
  --chart-out: var(--v-500);
  --chart-grid: var(--border);
  --chart-axis: var(--text-3);

  /* geometry */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:14px; --r-2xl:18px; --r-pill:999px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --sidebar-w:248px;
  --topbar-h:60px;
  --fast:120ms; --base:150ms; --slow:240ms;
  --ease: cubic-bezier(.4,0,.2,1);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue",
          "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

:root[data-theme="dark"] {
  --bg:           #080b11;
  --bg-grid:      rgba(255,255,255,.028);
  --surface:      #11161f;
  --surface-2:    #161d28;
  --surface-3:    #1c2431;
  --surface-sunk: #0c1016;
  --overlay:      rgba(2,6,23,.72);

  --border:        #222b39;
  --border-strong: #313d4f;
  --border-soft:   #1a222e;

  --text:   #e8edf5;
  --text-2: #a5b0c0;
  --text-3: #73808f;
  --text-inv:#06110c;

  --accent:      var(--a-500);
  --accent-hover:var(--a-400);
  --accent-text: var(--a-300);
  --accent-fg:   #04140d;
  --accent-soft: rgba(16,185,129,.12);
  --accent-ring: rgba(52,211,153,.4);

  --violet:      var(--v-500);
  --violet-text: var(--v-300);
  --violet-soft: rgba(139,92,246,.14);
  --violet-line: rgba(139,92,246,.32);

  --success:#34d399; --success-soft:rgba(16,185,129,.13);
  --warning:#fbbf24; --warning-soft:rgba(245,158,11,.14);
  --danger: #f87171; --danger-soft:rgba(239,68,68,.14);
  --info:   #38bdf8; --info-soft:rgba(14,165,233,.14);

  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 12px 24px -10px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.4);
  --shadow-3: 0 28px 60px -16px rgba(0,0,0,.8);

  --bubble-in:#19212c; --bubble-in-br:#273242;
  --bubble-out:rgba(16,185,129,.14); --bubble-out-br:rgba(52,211,153,.32);
  --bubble-ai:rgba(139,92,246,.15); --bubble-ai-br:rgba(167,139,250,.35);

  --chart-in:  var(--a-400);
  --chart-out: var(--v-400);
  --chart-grid: #222b39;
  --chart-axis: var(--text-3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#080b11; --bg-grid:rgba(255,255,255,.028);
    --surface:#11161f; --surface-2:#161d28; --surface-3:#1c2431; --surface-sunk:#0c1016;
    --overlay:rgba(2,6,23,.72);
    --border:#222b39; --border-strong:#313d4f; --border-soft:#1a222e;
    --text:#e8edf5; --text-2:#a5b0c0; --text-3:#73808f; --text-inv:#06110c;
    --accent:var(--a-500); --accent-hover:var(--a-400); --accent-text:var(--a-300);
    --accent-fg:#04140d; --accent-soft:rgba(16,185,129,.12); --accent-ring:rgba(52,211,153,.4);
    --violet:var(--v-500); --violet-text:var(--v-300);
    --violet-soft:rgba(139,92,246,.14); --violet-line:rgba(139,92,246,.32);
    --success:#34d399; --success-soft:rgba(16,185,129,.13);
    --warning:#fbbf24; --warning-soft:rgba(245,158,11,.14);
    --danger:#f87171;  --danger-soft:rgba(239,68,68,.14);
    --info:#38bdf8;    --info-soft:rgba(14,165,233,.14);
    --shadow-1:0 1px 2px rgba(0,0,0,.5);
    --shadow-2:0 12px 24px -10px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.4);
    --shadow-3:0 28px 60px -16px rgba(0,0,0,.8);
    --bubble-in:#19212c; --bubble-in-br:#273242;
    --bubble-out:rgba(16,185,129,.14); --bubble-out-br:rgba(52,211,153,.32);
    --bubble-ai:rgba(139,92,246,.15); --bubble-ai-br:rgba(167,139,250,.35);
    --chart-in:var(--a-400); --chart-out:var(--v-400);
    --chart-grid:#222b39; --chart-axis:var(--text-3);
  }
}

/* 2. RESET ================================================================= */

/* The scripts hide and show panels with the `hidden` attribute. Any author rule
   that sets `display` on the same element would otherwise win over the browser
   default for [hidden] and leave the element stuck on screen, so make the
   attribute authoritative. */
[hidden] { display:none !important; }

*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font);
  font-size:13.5px;
  line-height:1.55;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100dvh;
}
h1,h2,h3,h4 { line-height:1.25; font-weight:650; letter-spacing:-.011em; }
h1 { font-size:1.125rem; }
h2 { font-size:1rem; }
h3 { font-size:.9375rem; }
h4 { font-size:.875rem; }
p { text-wrap:pretty; }
a { color:var(--accent-text); text-decoration:none; }
a:hover { text-decoration:underline; }
img,svg { display:block; max-width:100%; }
button,input,select,textarea { font:inherit; color:inherit; }
button { background:none; border:0; cursor:pointer; }
table { border-collapse:collapse; width:100%; }
ul,ol { list-style:none; padding:0; }
code,kbd,pre,.mono,.num { font-family:var(--mono); }
.num,table td,.stat-value { font-variant-numeric:tabular-nums; }
hr { border:0; border-top:1px solid var(--border); margin:var(--s-4) 0; }

:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-xs);
}
::selection { background:var(--accent-soft); color:var(--accent-text); }

::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:99px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:var(--text-3); background-clip:content-box; border:3px solid transparent; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link {
  position:fixed; left:var(--s-3); top:-60px; z-index:200;
  background:var(--surface); color:var(--text); padding:var(--s-2) var(--s-4);
  border:1px solid var(--border); border-radius:var(--r-sm); box-shadow:var(--shadow-2);
  transition:top var(--base) var(--ease);
}
.skip-link:focus { top:var(--s-3); }

.muted { color:var(--text-2); }
.dim { color:var(--text-3); }
.tiny { font-size:.6875rem; }
.small { font-size:.75rem; }
.strong { font-weight:650; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.clamp-2 { display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-3 { display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.row { display:flex; align-items:center; gap:var(--s-2); }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); }
.wrap { flex-wrap:wrap; }
.grow { flex:1; min-width:0; }
.stack { display:flex; flex-direction:column; gap:var(--s-3); }
.stack-sm { display:flex; flex-direction:column; gap:var(--s-2); }
.ico { width:18px; height:18px; flex:none; }
.ico-sm { width:15px; height:15px; }
.ico-lg { width:22px; height:22px; }

/* 3. LAYOUT ================================================================ */

.sidebar {
  position:fixed; inset:0 auto 0 0; width:var(--sidebar-w); z-index:60;
  display:flex; flex-direction:column;
  background:var(--surface); border-right:1px solid var(--border);
}
.sidebar-brand {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-2);
  height:var(--topbar-h); padding:0 var(--s-4);
  border-bottom:1px solid var(--border-soft); flex:none;
}
.brand { display:flex; align-items:center; gap:10px; color:var(--text); min-width:0; }
.brand:hover { text-decoration:none; }
.brand-mark { width:30px; height:30px; flex:none; border-radius:9px; }
.brand-text { display:flex; flex-direction:column; min-width:0; }
.brand-text strong { font-size:.9375rem; letter-spacing:-.02em; }
.brand-text small { font-size:.625rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.09em; }
.sidebar-toggle { flex:none; }

.nav { flex:1; overflow-y:auto; padding:var(--s-4) var(--s-3) var(--s-2); }
.nav-group + .nav-group { margin-top:var(--s-5); }
.nav-label {
  font-size:.625rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-3); padding:0 var(--s-3) var(--s-2);
}
.nav-list { display:flex; flex-direction:column; gap:2px; }
.nav-list[hidden] { display:none; }
/* collapsible groups: the label is a button; only "Utama" stays a plain label */
.nav-toggle {
  display:flex; align-items:center; justify-content:space-between; width:100%;
  border:0; background:transparent; cursor:pointer; text-align:left; border-radius:var(--r-sm);
}
.nav-toggle:hover { color:var(--text-2); }
.nav-toggle:focus-visible { outline:none; box-shadow:0 0 0 3px var(--accent-ring); }
.nav-toggle .ico { width:14px; height:14px; transition:transform var(--base) var(--ease); }
.nav-toggle[aria-expanded="true"] .ico { transform:rotate(180deg); }
.nav-item {
  position:relative; display:flex; align-items:center; gap:10px;
  padding:8px var(--s-3); border-radius:var(--r-md);
  color:var(--text-2); font-weight:500; font-size:.8125rem;
  transition:background var(--base) var(--ease), color var(--base) var(--ease);
}
.nav-item:hover { background:var(--surface-3); color:var(--text); text-decoration:none; }
.nav-item .ico { color:var(--text-3); transition:color var(--base) var(--ease); }
.nav-item:hover .ico { color:var(--text-2); }
.nav-item.is-active { background:var(--accent-soft); color:var(--accent-text); font-weight:600; }
.nav-item.is-active .ico { color:var(--accent); }
.nav-item.is-active::before {
  content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:0 3px 3px 0; background:var(--accent);
}
.nav-badge {
  margin-left:auto; font-style:normal; font-size:.6875rem; font-weight:700;
  background:var(--danger); color:#fff; border-radius:var(--r-pill);
  min-width:19px; height:19px; display:grid; place-items:center; padding:0 5px;
}

.sidebar-foot {
  flex:none; padding:var(--s-3) var(--s-4); border-top:1px solid var(--border-soft);
  display:flex; flex-direction:column; gap:6px;
}
.sidebar-foot .ws-state { display:none; }
.sidebar-foot .nav-item-foot { margin:0 calc(-1 * var(--s-2)) 2px; }

/* Documentation page: sticky table of contents beside long prose. */
.docs { display:grid; grid-template-columns:240px minmax(0,1fr); gap:var(--s-4); align-items:start; }
.docs-toc { position:sticky; top:calc(var(--topbar-h, 56px) + var(--s-4)); }
.docs-toc ol { list-style:none; display:flex; flex-direction:column; gap:2px; counter-reset:toc; }
.docs-toc li a { display:block; padding:6px 8px; border-radius:8px; font-size:.8125rem; color:var(--text-2); }
.docs-toc li a:hover { background:var(--surface-2); color:var(--text); }
.docs-body { display:flex; flex-direction:column; gap:var(--s-4); max-width:none; }
.docs-body section { scroll-margin-top:calc(var(--topbar-h, 56px) + var(--s-4)); }
.docs-body section h3 { font-size:1rem; margin-bottom:var(--s-3); }
.docs-body p, .docs-body ul { max-width:76ch; }
.docs-body kbd { font:inherit; font-size:.75rem; padding:1px 6px; border:1px solid var(--border); border-bottom-width:2px; border-radius:5px; background:var(--surface-2); }
@media (max-width: 900px) {
  .docs { grid-template-columns:1fr; }
  .docs-toc { position:static; }
}

.shell { margin-left:var(--sidebar-w); display:flex; flex-direction:column; min-height:100dvh; }

.topbar {
  position:sticky; top:0; z-index:50; flex:none;
  height:var(--topbar-h); display:flex; align-items:center; gap:var(--s-3);
  padding:0 var(--s-5);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--border);
}
.topbar-title { flex:none; font-size:.9375rem; font-weight:650; letter-spacing:-.01em; }
.topbar-search { position:relative; flex:1; max-width:440px; margin-left:var(--s-3); }
.topbar-search > .ico {
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  color:var(--text-3); pointer-events:none;
}
.topbar-search input {
  width:100%; height:34px; padding:0 34px 0 34px;
  background:var(--surface-3); border:1px solid transparent; border-radius:var(--r-md);
  color:var(--text); font-size:.8125rem;
  transition:background var(--base) var(--ease), border-color var(--base) var(--ease);
}
.topbar-search input::placeholder { color:var(--text-3); }
.topbar-search input:focus { background:var(--surface); border-color:var(--border-strong); outline:none; box-shadow:0 0 0 3px var(--accent-ring); }
.topbar-search kbd {
  position:absolute; right:9px; top:50%; transform:translateY(-50%);
  font-size:.625rem; color:var(--text-3); background:var(--surface);
  border:1px solid var(--border); border-radius:5px; padding:1px 5px; line-height:1.4;
}
.topbar-search input:focus ~ kbd { opacity:0; }
.topbar-actions { margin-left:auto; display:flex; align-items:center; gap:var(--s-2); }

.search-results {
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:70;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-3); max-height:60vh; overflow-y:auto; padding:6px;
}
.search-group-label {
  font-size:.625rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-3); padding:8px 10px 4px;
}
.search-hit { display:block; width:100%; text-align:left; padding:8px 10px; border-radius:var(--r-sm); color:var(--text); }
.search-hit:hover,.search-hit:focus-visible { background:var(--surface-3); text-decoration:none; }
.search-hit small { display:block; color:var(--text-3); font-size:.75rem; }

.main { flex:1; padding:var(--s-5); max-width:1560px; width:100%; }
/* The inbox owns the viewport: the thread scrolls inside itself and the
   composer stays pinned. `min-height:0` is what makes that work. A flex
   item defaults to min-height:auto, so .main would refuse to shrink below
   its content and grow the whole document instead, pushing the composer
   far below the fold. A fixed calc() height cannot fix that, because flex
   sizing wins over the height property on the main axis. */
body[data-page="inbox"] { overflow:hidden; }
body[data-page="inbox"] .shell { height:100dvh; min-height:0; }
body[data-page="inbox"] .main { flex:1 1 auto; min-height:0; height:auto;
  padding:0; max-width:none; overflow:hidden; }

.scrim {
  position:fixed; inset:0; z-index:55; background:var(--overlay);
  opacity:0; pointer-events:none; transition:opacity var(--base) var(--ease);
}
body.sidebar-open .scrim { opacity:1; pointer-events:auto; }

.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; margin-bottom:var(--s-5); }
.page-head h2 { font-size:1.0625rem; }
.page-head p { color:var(--text-2); font-size:.8125rem; margin-top:2px; }
.page-head-actions { display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; }

/* 4. COMPONENTS ============================================================ */

/* --- card --- */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-1);
}
.card-head {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding:var(--s-4) var(--s-4); border-bottom:1px solid var(--border-soft);
}
.card-head h3 { font-size:.875rem; }
.card-head p { font-size:.75rem; color:var(--text-3); }
.card-body { padding:var(--s-4); }
.card-body.flush { padding:0; }
.card-foot { padding:var(--s-3) var(--s-4); border-top:1px solid var(--border-soft); background:var(--surface-2); border-radius:0 0 var(--r-xl) var(--r-xl); }

.grid { display:grid; gap:var(--s-4); }
.grid-stats { grid-template-columns:repeat(auto-fit,minmax(176px,1fr)); }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.grid-3 { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.grid-dash { grid-template-columns:minmax(0,2fr) minmax(280px,1fr); align-items:start; }

/* --- stat tile --- */
.stat {
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:var(--s-4); box-shadow:var(--shadow-1);
  transition:border-color var(--base) var(--ease), transform var(--base) var(--ease);
}
.stat:hover { border-color:var(--border-strong); }
.stat-value-sm { font-size:1.125rem; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stat-top { display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); }
.stat-label { font-size:.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }
.stat-ico { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--surface-3); color:var(--text-2); }
.stat-ico .ico { width:16px; height:16px; }
.stat.is-accent .stat-ico { background:var(--accent-soft); color:var(--accent); }
.stat.is-violet .stat-ico { background:var(--violet-soft); color:var(--violet); }
.stat.is-info .stat-ico { background:var(--info-soft); color:var(--info); }
.stat.is-warning .stat-ico { background:var(--warning-soft); color:var(--warning); }
.stat.is-success .stat-ico { background:var(--success-soft); color:var(--success); }
.stat-value { font-size:1.75rem; font-weight:680; letter-spacing:-.03em; margin-top:10px; line-height:1.1; }
.stat-sub { font-size:.75rem; color:var(--text-3); margin-top:2px; }

/* --- buttons --- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:34px; padding:0 13px; border-radius:var(--r-md);
  font-size:.8125rem; font-weight:560; white-space:nowrap;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  box-shadow:var(--shadow-1);
  transition:background var(--base) var(--ease), border-color var(--base) var(--ease),
             color var(--base) var(--ease), transform var(--fast) var(--ease);
}
.btn:hover { background:var(--surface-3); text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn .ico { width:16px; height:16px; }
.btn[disabled],.btn.is-busy { opacity:.55; pointer-events:none; }
.btn-primary { background:var(--accent); border-color:transparent; color:var(--accent-fg); }
.btn-primary:hover { background:var(--accent-hover); }
.btn-violet { background:var(--violet); border-color:transparent; color:#fff; }
.btn-violet:hover { filter:brightness(1.08); }
.btn-ghost { background:transparent; border-color:transparent; box-shadow:none; color:var(--text-2); }
.btn-ghost:hover { background:var(--surface-3); color:var(--text); }
.btn-outline { background:transparent; }
.btn-danger { background:var(--danger); border-color:transparent; color:#fff; }
:root[data-theme="dark"] .btn-danger { color:#1b0707; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-danger { color:#1b0707; } }
:root[data-theme="light"] .btn-danger { color:#fff; }
.btn-danger:hover { filter:brightness(1.07); }
.btn-danger-ghost { background:transparent; border-color:transparent; box-shadow:none; color:var(--danger); }
.btn-danger-ghost:hover { background:var(--danger-soft); }
.btn-sm { height:28px; padding:0 10px; font-size:.75rem; border-radius:var(--r-sm); }
.btn-sm .ico { width:14px; height:14px; }
.btn-lg { height:40px; padding:0 18px; font-size:.875rem; }
.btn-block { width:100%; }
.btn-icon {
  display:inline-grid; place-items:center; width:34px; height:34px; flex:none;
  border-radius:var(--r-md); color:var(--text-2); background:transparent;
  transition:background var(--base) var(--ease), color var(--base) var(--ease);
}
.btn-icon:hover { background:var(--surface-3); color:var(--text); }
.btn-icon.is-on { background:var(--accent-soft); color:var(--accent); }
.btn-icon-sm { width:28px; height:28px; border-radius:var(--r-sm); }
.btn-icon-sm .ico { width:15px; height:15px; }
.btn-icon.is-danger:hover { background:var(--danger-soft); color:var(--danger); }
.btn-group { display:inline-flex; gap:6px; flex-wrap:wrap; }

.spinner {
  width:14px; height:14px; flex:none; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent;
  animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* --- forms --- */
.field { display:flex; flex-direction:column; gap:5px; min-width:0; }
.field > label,.label {
  font-size:.75rem; font-weight:600; color:var(--text-2);
}
.field-hint { font-size:.6875rem; color:var(--text-3); }
/* A URL has no spaces to break at, so a resolved Cacti graph address either
   overflows its card or forces the whole modal wider. Breaking anywhere is the
   only option that keeps the layout put at phone width. */
.wrap-any { overflow-wrap:anywhere; min-width:0; }
.field-error { font-size:.6875rem; color:var(--danger); font-weight:500; }
.input,.select,.textarea {
  width:100%; min-height:34px; padding:7px 10px;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border-strong); border-radius:var(--r-md);
  font-size:.8125rem;
  transition:border-color var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.input::placeholder,.textarea::placeholder { color:var(--text-3); }
.input:hover,.select:hover,.textarea:hover { border-color:var(--text-3); }
.input:focus,.select:focus,.textarea:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring);
}
.input[aria-invalid="true"],.textarea[aria-invalid="true"] { border-color:var(--danger); }
.input[disabled],.select[disabled],.textarea[disabled] { background:var(--surface-3); color:var(--text-3); cursor:not-allowed; }
.textarea { resize:vertical; min-height:84px; line-height:1.55; }
.select {
  appearance:none; padding-right:30px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 9px center;
}
.input-group { position:relative; display:flex; align-items:center; }
.input-group .input { padding-right:38px; }
.input-group .btn-icon { position:absolute; right:2px; width:30px; height:30px; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--s-4); }
.form-grid .span-2 { grid-column:1/-1; }

.switch { display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.switch-track {
  width:36px; height:20px; border-radius:var(--r-pill); flex:none;
  background:var(--border-strong); position:relative;
  transition:background var(--base) var(--ease);
}
.switch-track::after {
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3);
  transition:transform var(--base) var(--ease);
}
.switch input:checked + .switch-track { background:var(--accent); }
.switch input:checked + .switch-track::after { transform:translateX(16px); }
.switch input:focus-visible + .switch-track { box-shadow:0 0 0 3px var(--accent-ring); }
.switch input:disabled + .switch-track { opacity:.5; }
.switch-label { font-size:.8125rem; color:var(--text-2); }

.check { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:.8125rem; }
.check input { appearance:none; width:16px; height:16px; flex:none; border:1.5px solid var(--border-strong); border-radius:5px; background:var(--surface); transition:all var(--base) var(--ease); }
.check input:checked { background:var(--accent); border-color:var(--accent); background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='m20 6-11 11-5-5'/></svg>"); background-size:11px; background-position:center; background-repeat:no-repeat; }
.check input:focus-visible { box-shadow:0 0 0 3px var(--accent-ring); }

.range { width:100%; appearance:none; height:4px; border-radius:99px; background:var(--border-strong); }
.range::-webkit-slider-thumb { appearance:none; width:16px; height:16px; border-radius:50%; background:var(--accent); border:2px solid var(--surface); box-shadow:var(--shadow-1); cursor:pointer; }
.range::-moz-range-thumb { width:14px; height:14px; border:2px solid var(--surface); border-radius:50%; background:var(--accent); cursor:pointer; }

/* --- badges --- */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 8px; border-radius:var(--r-pill);
  font-size:.6875rem; font-weight:600; line-height:1.6; white-space:nowrap;
  background:var(--surface-3); color:var(--text-2); border:1px solid transparent;
}
.badge .ico { width:12px; height:12px; }
.badge-accent { background:var(--accent-soft); color:var(--accent-text); }
.badge-violet { background:var(--violet-soft); color:var(--violet-text); }
.badge-success { background:var(--success-soft); color:var(--success); }
.badge-warning { background:var(--warning-soft); color:var(--warning); }
.badge-danger  { background:var(--danger-soft);  color:var(--danger); }
.badge-info    { background:var(--info-soft);    color:var(--info); }
.badge-outline { background:transparent; border-color:var(--border-strong); color:var(--text-2); }

.dot { width:8px; height:8px; border-radius:50%; flex:none; background:var(--text-3); }
.dot-success { background:var(--success); box-shadow:0 0 0 3px var(--success-soft); }
.dot-danger  { background:var(--danger);  box-shadow:0 0 0 3px var(--danger-soft); }
.dot-warning { background:var(--warning); box-shadow:0 0 0 3px var(--warning-soft); }
.dot-idle    { background:var(--text-3);  box-shadow:0 0 0 3px var(--surface-3); }
.dot-live { position:relative; }
.dot-live::after {
  content:""; position:absolute; inset:-3px; border-radius:50%;
  border:1px solid currentColor; opacity:.6; animation:pulse 2s var(--ease) infinite;
}
@keyframes pulse { 0%{transform:scale(.7);opacity:.7} 70%{transform:scale(1.5);opacity:0} 100%{opacity:0} }

.conn {
  display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 10px;
  border-radius:var(--r-pill); background:var(--surface-3);
  font-size:.6875rem; font-weight:600; color:var(--text-2);
}
.conn[data-state="online"] { background:var(--success-soft); color:var(--success); }
.conn[data-state="offline"] { background:var(--danger-soft); color:var(--danger); }
.conn[data-state="connecting"] { background:var(--warning-soft); color:var(--warning); }

.avatar {
  width:34px; height:34px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  font-size:.75rem; font-weight:650; letter-spacing:.01em;
  background:var(--accent-soft); color:var(--accent-text);
  text-transform:uppercase;
}
.avatar-sm { width:28px; height:28px; font-size:.6875rem; }
.avatar-lg { width:42px; height:42px; font-size:.875rem; }
.avatar-group { background:var(--violet-soft); color:var(--violet-text); border-radius:12px; }

/* --- user menu / dropdown --- */
.user-btn {
  display:flex; align-items:center; gap:8px; height:38px; padding:0 8px 0 4px;
  border-radius:var(--r-md); transition:background var(--base) var(--ease);
}
.user-btn:hover { background:var(--surface-3); }
.user-btn .ico { width:14px; height:14px; color:var(--text-3); }
.user-btn .avatar { width:28px; height:28px; font-size:.6875rem; }
.user-meta { display:flex; flex-direction:column; align-items:flex-start; line-height:1.2; }
.user-meta strong { font-size:.75rem; font-weight:600; }
.user-meta small { font-size:.625rem; color:var(--text-3); text-transform:capitalize; }

.menu { position:relative; }
.dropdown {
  position:absolute; right:0; top:calc(100% + 6px); z-index:80; min-width:208px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-3); padding:5px; animation:pop var(--base) var(--ease);
}
.dropdown.to-left { right:auto; left:0; }
@keyframes pop { from { opacity:0; transform:translateY(-4px) scale(.98); } }
.dropdown-head { padding:8px 10px 6px; display:flex; flex-direction:column; line-height:1.3; }
.dropdown-head strong { font-size:.8125rem; }
.dropdown-sep { height:1px; background:var(--border-soft); margin:4px 0; }
.dropdown-item {
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:7px 10px; border-radius:var(--r-sm); font-size:.8125rem; color:var(--text);
  transition:background var(--base) var(--ease);
}
.dropdown-item:hover { background:var(--surface-3); text-decoration:none; }
.dropdown-item .ico { width:16px; height:16px; color:var(--text-3); }
.dropdown-item.is-danger { color:var(--danger); }
.dropdown-item.is-danger .ico { color:var(--danger); }
.dropdown-item.is-danger:hover { background:var(--danger-soft); }

/* --- searchable select (combobox over a native <select>) --- */
/* The native control stays in the DOM and keeps owning the value; it is only
   taken out of sight. It is moved out of flow with position:fixed rather than
   display:none, for two reasons: the page scripts toggle some of these selects
   with the hidden attribute and [hidden] must stay the one thing that decides
   visibility, and a fixed element reports offsetParent === null, which is what
   keeps the modal focus trap from landing on an invisible control. */
.cbx-native {
  position:fixed; top:0; left:0; width:1px; height:1px; min-height:0;
  margin:0; padding:0; border:0; opacity:0; pointer-events:none; z-index:-1;
  clip-path:inset(50%); overflow:hidden; background:none;
}
/* The trigger wears .select as well, so height, radius, border, background,
   focus ring and chevron are the native ones — forms keep their shape. */
.cbx-trigger { display:flex; align-items:center; gap:8px; text-align:left; }
.cbx-trigger .cbx-value { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cbx-trigger.is-empty .cbx-value { color:var(--text-3); }

.cbx-pop {
  position:fixed; left:0; top:0; z-index:160;
  display:flex; flex-direction:column; min-width:180px;
  max-width:calc(100vw - 16px); max-height:340px; overflow:hidden;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-3); padding:5px; animation:pop var(--base) var(--ease);
}
.cbx-search { position:relative; flex:none; padding:2px 2px 6px; }
.cbx-search > .ico {
  position:absolute; left:11px; top:calc(50% - 3px); transform:translateY(-50%);
  width:15px; height:15px; color:var(--text-3); pointer-events:none;
}
.cbx-input {
  width:100%; height:32px; padding:0 10px 0 32px;
  background:var(--surface-3); border:1px solid transparent; border-radius:var(--r-sm);
  color:var(--text); font-size:.8125rem;
}
.cbx-input::placeholder { color:var(--text-3); }
.cbx-input:focus { outline:none; background:var(--surface); border-color:var(--border-strong); box-shadow:0 0 0 3px var(--accent-ring); }
.cbx-list { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.cbx-group {
  padding:8px 10px 4px; font-size:.625rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-3);
}
.cbx-opt {
  display:flex; align-items:center; gap:8px; padding:7px 10px;
  border-radius:var(--r-sm); font-size:.8125rem; color:var(--text); cursor:pointer;
}
.cbx-opt .cbx-txt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cbx-opt .ico { width:15px; height:15px; flex:none; color:var(--accent); }
.cbx-opt mark { background:var(--accent-soft); color:var(--accent-text); border-radius:3px; padding:0 1px; font-weight:650; }
.cbx-opt.is-active { background:var(--surface-3); }
.cbx-opt[aria-selected="true"] { color:var(--accent-text); font-weight:600; }
.cbx-opt[aria-disabled="true"] { color:var(--text-3); cursor:not-allowed; }
.cbx-opt[aria-disabled="true"].is-active { background:transparent; }
.cbx-note { padding:12px 10px; font-size:.75rem; color:var(--text-3); text-align:center; }

/* --- table --- */
.table-wrap { overflow-x:auto; border-radius:0 0 var(--r-xl) var(--r-xl); }
table.table { font-size:.8125rem; min-width:620px; }
table.table thead th {
  position:sticky; top:0; z-index:2;
  background:var(--surface-2); color:var(--text-3);
  font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  text-align:left; padding:9px var(--s-4); white-space:nowrap;
  border-bottom:1px solid var(--border);
}
table.table tbody td { padding:11px var(--s-4); border-bottom:1px solid var(--border-soft); vertical-align:middle; }
table.table tbody tr { transition:background var(--fast) var(--ease); }
table.table tbody tr:hover { background:var(--surface-2); }
table.table tbody tr:last-child td { border-bottom:0; }
table.table td.right,table.table th.right { text-align:right; }
table.table td.actions { white-space:nowrap; text-align:right; }
.cell-main { font-weight:600; }
.cell-sub { font-size:.6875rem; color:var(--text-3); }

/* A cell's content decides its width under table-layout:auto, so one schedule
   carrying a 120-character Cacti URL or a long caption used to stretch its
   column and knock every other column out of line. `truncate` alone cannot
   prevent that inside a table: the cell still asks for the full intrinsic
   width of its nowrap text, so the ceiling has to be stated. These are upper
   bounds, not fixed widths — short values are unaffected, and the columns stay
   aligned however long the content gets. */
table.table .cell-main { max-width:30ch; }
/* Tindak Lanjut: long prose cells clamp to two lines; the row click opens the full text */
table.table .wrap2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; max-width:34ch; line-height:1.4; }
/* Tindak Lanjut: fixed column widths and one line per cell. Long text is cut
   with an ellipsis (full text on hover and in the row's detail dialog), so
   every row has the same height and the columns never drift. */
table.table .trunc { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
body[data-page="followups"] table.table,
body[data-page="prospects"] table.table,
body[data-page="chat_report"] table.table { table-layout:fixed; width:100%; min-width:1100px; }
body[data-page="prospects"] table.table tbody tr, body[data-page="chat_report"] table.table tbody tr { cursor:pointer; }
body[data-page="prospects"] table.table td, body[data-page="chat_report"] table.table td { overflow:hidden; vertical-align:middle; }
body[data-page="followups"] table.table tbody tr { cursor:pointer; }
body[data-page="followups"] table.table td { overflow:hidden; vertical-align:middle; }
body[data-page="followups"] table.table th:nth-child(1), body[data-page="followups"] table.table td:nth-child(1) { width:9%; }
body[data-page="followups"] table.table th:nth-child(2), body[data-page="followups"] table.table td:nth-child(2) { width:13%; }
body[data-page="followups"] table.table th:nth-child(3), body[data-page="followups"] table.table td:nth-child(3) { width:13%; }
body[data-page="followups"] table.table th:nth-child(4), body[data-page="followups"] table.table td:nth-child(4) { width:12%; }
body[data-page="followups"] table.table th:nth-child(5), body[data-page="followups"] table.table td:nth-child(5) { width:15%; }
body[data-page="followups"] table.table th:nth-child(6), body[data-page="followups"] table.table td:nth-child(6) { width:12%; }
body[data-page="followups"] table.table th:nth-child(7), body[data-page="followups"] table.table td:nth-child(7) { width:12%; }
body[data-page="followups"] table.table th:nth-child(8), body[data-page="followups"] table.table td:nth-child(8) { width:10%; }
body[data-page="followups"] table.table th:nth-child(9), body[data-page="followups"] table.table td:nth-child(9) { width:4%; min-width:44px; }
/* Consecutive blocks on a page keep one rhythm: stat grid, note, panel
   grid, table card. Grids space their own children; this spaces the grids. */
.main > section + section, .main > section + p, .main > p + section,
.main > .filterbar + section, .main > section + .filterbar { margin-top:var(--s-4); }

/* --- compact filter bar ---
   One row that wraps: a search box that takes the slack, short selects and
   date fields, a reset icon. No stacked labels: the controls carry their own
   placeholder and aria-label, which is what keeps the bar one line tall. */
.filterbar {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px var(--s-4); border-bottom:1px solid var(--border-soft);
}
.filterbar.is-standalone { border:1px solid var(--border); border-radius:var(--r-xl); background:var(--surface); box-shadow:var(--shadow-1); }
.filterbar .input, .filterbar .select { width:auto; min-height:32px; padding-top:5px; padding-bottom:5px; font-size:.8125rem; }
.filterbar .fb-q { flex:1 1 220px; min-width:160px; }
.filterbar .select { min-width:9.5rem; }
.filterbar .fb-date { display:inline-flex; align-items:center; gap:6px; }
.filterbar .fb-date > span { font-size:.6875rem; color:var(--text-3); white-space:nowrap; }
.filterbar .fb-date .input { width:9.75rem; }
.filterbar .fb-sep { width:1px; height:22px; background:var(--border-soft); margin:0 2px; }
.filterbar .btn-icon { flex:none; }
.filterbar .fb-right { margin-left:auto; display:inline-flex; gap:8px; align-items:center; }
@media (max-width:640px) { .filterbar .fb-right { margin-left:0; } .filterbar .fb-date .input { width:8.5rem; } }
.fu-pager { flex-wrap:wrap; }
.fu-pager .btn { min-width:32px; padding-left:8px; padding-right:8px; font-variant-numeric:tabular-nums; }
.fu-ellipsis { padding:0 4px; color:var(--text-3); }
@media (max-width:640px) { .fu-filters .fu-q { grid-column:1/-1; } }
.mt-areas { display:flex; flex-wrap:wrap; gap:4px; max-width:30ch; }
.mt-areas .badge small { opacity:.7; font-weight:600; text-transform:uppercase; font-size:.5625rem; }
.mt-selected { max-width:none; min-height:28px; padding:6px 8px; border:1px dashed var(--border-strong); border-radius:var(--r-md); }
.chip-x { border:0; background:transparent; color:inherit; cursor:pointer; margin-left:4px; padding:0 2px; font-size:.875rem; line-height:1; }
.mt-picker { position:relative; }
.mt-picklist { margin-top:4px; max-height:220px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--r-md); padding:4px 8px; background:var(--surface); box-shadow:var(--shadow-2); }
.mt-picklist[hidden] { display:none; }
.mt-pick-head { font-size:.625rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-3); margin:8px 0 2px; }
.mt-pick { display:flex; align-items:center; gap:8px; padding:4px 2px; font-size:.8125rem; cursor:pointer; }
.mt-pick:hover { background:var(--surface-3); border-radius:var(--r-sm); }
.mt-pick-name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body[data-page="maintenance"] table.table { min-width:900px; }
.mb-shot { display:block; max-width:100%; max-height:360px; width:auto; border-radius:var(--r-md); border:1px solid var(--border); margin-top:8px; }
.mb-text { max-height:280px; overflow:auto; white-space:pre-wrap; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:var(--r-sm); padding:8px; margin-top:6px; }
.mt { margin-top:var(--s-3); }
.info-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:6px 18px; margin:0; }
table.table .cell-sub { max-width:38ch; }
@media (max-width:1279px) {
  table.table .cell-main { max-width:22ch; }
  table.table .cell-sub { max-width:26ch; }
}

/* Auto layout hands width to whichever cell demands it, and a nowrap URL
   demands far more than a name that can wrap — so the schedule name was being
   squeezed to a third of the width of the address beside it. These give the
   name a floor and the kind a ceiling, putting the columns back in order of
   importance instead of in order of how unbreakable their text is. */
/* min and max are deliberately the same value: a column whose width follows
   its content moves every time a schedule with a longer URL or a different
   target is added, and the whole table re-flows around it. Pinning the three
   free-text columns keeps the layout identical whatever the rows contain. */
table.table td.col-name   { min-width:13rem; max-width:13rem; }
table.table td.col-kind   { min-width:14rem; max-width:14rem; }
table.table td.col-target { min-width:13rem; max-width:13rem; }
@media (max-width:1279px) {
  table.table td.col-name   { min-width:10rem; max-width:10rem; }
  table.table td.col-kind   { min-width:11rem; max-width:11rem; }
  table.table td.col-target { min-width:10rem; max-width:10rem; }
}

/* --- paged table (WA.tableView) --- */
/* The filter box and the pager are siblings of the scrolling table box, never
   inside it: table.table has a 620px floor, so at phone width the box scrolls
   sideways and anything inside it would scroll out of reach with the rows.
   Pinned column widths are untouched — the component renders the same
   table.table with the same cells, only ten of them at a time. */
.tv { display:flex; flex-direction:column; min-width:0; }
.tv-bar {
  display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap;
  padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--border-soft);
}
.tv-bar .tv-q { flex:1 1 200px; max-width:340px; min-width:0; }
/* the rounded bottom corners belong to the footer now */
.tv > .table-wrap { border-radius:0; }
.tv-foot {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3) var(--s-4); flex-wrap:wrap;
  padding:var(--s-3) var(--s-4); border-top:1px solid var(--border-soft);
  background:var(--surface-2); border-radius:0 0 var(--r-xl) var(--r-xl);
}
.tv-size { display:flex; align-items:center; gap:var(--s-2); min-width:0; }
.tv-size-label { font-size:.75rem; color:var(--text-3); white-space:nowrap; }
/* .select is width:100% for form fields; here it sizes to its two digits.
   The combobox trigger WA.select puts beside it inherits the same classes. */
.tv-size .select {
  width:auto; min-width:4.5rem; min-height:28px;
  padding-top:3px; padding-bottom:3px; font-size:.75rem;
}
.tv-count { font-size:.75rem; color:var(--text-3); font-variant-numeric:tabular-nums; }
.tv-nav { display:flex; align-items:center; gap:6px; }

/* --- tabs --- */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:var(--s-5); overflow-x:auto; }
.tab {
  position:relative; padding:9px 14px; font-size:.8125rem; font-weight:560;
  color:var(--text-2); white-space:nowrap; border-radius:var(--r-sm) var(--r-sm) 0 0;
  transition:color var(--base) var(--ease), background var(--base) var(--ease);
}
.tab:hover { color:var(--text); background:var(--surface-2); }
.tab[aria-selected="true"] { color:var(--accent-text); }
.tab[aria-selected="true"]::after {
  content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px;
  border-radius:2px 2px 0 0; background:var(--accent);
}
.tabpanel[hidden] { display:none; }

.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip {
  padding:4px 10px; border-radius:var(--r-pill); font-size:.75rem; font-weight:550;
  background:var(--surface-3); color:var(--text-2); border:1px solid transparent;
  transition:all var(--base) var(--ease);
}
.chip:hover { color:var(--text); border-color:var(--border-strong); }
.chip[aria-pressed="true"] { background:var(--accent); color:var(--accent-fg); border-color:transparent; }

/* --- multi-target picker (Penjadwalan) --- */
/* One schedule reaches several groups, so the destinations are chosen one at
   a time and shown as removable chips. The whole block has to survive a group
   called "Pelanggan Korporat Jakarta Selatan — Batch 3": every element below
   carries min-width:0 and the name truncates, or one long chip would push the
   modal body into sideways scrolling at phone width. */
.target-add { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); min-width:0; }
/* .select is width:100%; inside the row it may shrink but must still be the
   wide one of the two, so it grows and the Tambah button does not. */
.target-add > .select, .target-add > .input { flex:1 1 12rem; min-width:0; }
.target-add > .btn { flex:0 0 auto; }
.target-chips {
  display:flex; flex-wrap:wrap; gap:6px; min-width:0;
  margin:var(--s-2) 0 0; padding:0; list-style:none;
}
.target-chip {
  display:inline-flex; align-items:center; gap:4px; min-width:0; max-width:100%;
  padding:3px 3px 3px 10px; border-radius:var(--r-pill);
  font-size:.75rem; font-weight:550;
  background:var(--surface-3); color:var(--text-2); border:1px solid var(--border);
}
/* The cap is in rem, not per cent. A nowrap, ellipsised name still reports
   its whole unwrapped length as its min-content width, and percentages are
   ignored while that is computed -- so one 63-character group name was
   widening the modal card itself from 390px to 485px at phone width, pushing
   its own Simpan button off the screen. An absolute ceiling is what the
   intrinsic pass actually honours. The full name is in the chip's tooltip. */
.target-chip-name {
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; max-width:16rem;
}
@media (max-width:480px) { .target-chip-name { max-width:11rem; } }
/* The memory notes in the chat room reuse the chip shape, but the info pane is
   much narrower than the modal those caps were measured in. Without a tighter
   ceiling here one 160-character note widens the pane itself, for the same
   intrinsic-width reason documented above. */
.pane-info .target-chip-name { max-width:10rem; }
.target-chip-x {
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; font-size:.875rem; line-height:1;
  color:var(--text-3); transition:background var(--base) var(--ease), color var(--base) var(--ease);
}
.target-chip-x:hover { background:var(--danger-soft); color:var(--danger); }
.target-chip-x:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

/* --- modal --- */
.modal-root { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:var(--s-4); }
.modal-backdrop { position:absolute; inset:0; background:var(--overlay); backdrop-filter:blur(3px); animation:fade var(--base) var(--ease); }
@keyframes fade { from { opacity:0; } }
.modal-card {
  position:relative; z-index:1; width:min(640px,100%); max-height:88dvh;
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-2xl); box-shadow:var(--shadow-3);
  animation:rise var(--slow) var(--ease);
}
.modal-card.is-wide { width:min(880px,100%); }
.modal-card.is-narrow { width:min(440px,100%); }
.modal-card.is-alarm { border-color:var(--danger); box-shadow:0 0 0 4px var(--danger-soft), var(--shadow-3); }
.modal-card.is-alarm .modal-head h2 { color:var(--danger); }
.dev-alarm { text-align:center; padding:var(--s-4) var(--s-3) var(--s-2); }
.dev-alarm-ico { width:72px; height:72px; margin:0 auto var(--s-4); border-radius:50%; display:grid; place-items:center;
  background:var(--danger-soft); color:var(--danger); animation:alarmPulse 1.6s ease-in-out infinite; }
.dev-alarm-ico .ico { width:36px; height:36px; }
.dev-alarm h3 { font-size:1.25rem; margin-bottom:var(--s-2); }
.dev-alarm > p { max-width:56ch; margin:0 auto var(--s-4); color:var(--text-2); }
.dev-alarm-list { list-style:none; display:flex; flex-direction:column; gap:8px; max-width:520px; margin:0 auto var(--s-4); text-align:left; }
.dev-alarm-item { display:flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface-2); }
.dev-alarm-item .dot { width:10px; height:10px; }
@keyframes alarmPulse { 0%,100% { box-shadow:0 0 0 0 var(--danger-soft); } 50% { box-shadow:0 0 0 12px transparent; } }
@keyframes rise { from { opacity:0; transform:translateY(12px) scale(.985); } }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--border-soft); flex:none; }
.modal-head h2 { font-size:.9375rem; }
.modal-body { padding:var(--s-5); overflow-y:auto; flex:1; }
.modal-foot { display:flex; align-items:center; justify-content:flex-end; gap:var(--s-2); padding:var(--s-3) var(--s-5); border-top:1px solid var(--border-soft); background:var(--surface-2); border-radius:0 0 var(--r-2xl) var(--r-2xl); flex:none; flex-wrap:wrap; }
.modal-foot .spread { margin-right:auto; }

/* --- toast --- */
.toast-stack {
  position:fixed; z-index:200; right:var(--s-4); bottom:var(--s-4);
  display:flex; flex-direction:column; gap:var(--s-2); width:min(360px,calc(100vw - 32px));
  pointer-events:none;
}
.toast {
  pointer-events:auto; display:flex; align-items:flex-start; gap:10px;
  padding:11px 13px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-3);
  font-size:.8125rem; animation:slidein var(--slow) var(--ease);
  border-left:3px solid var(--text-3);
}
@keyframes slidein { from { opacity:0; transform:translateX(16px); } }
.toast.is-out { opacity:0; transform:translateX(16px); transition:all var(--slow) var(--ease); }
.toast .ico { width:16px; height:16px; margin-top:1px; flex:none; }
.toast > * { min-width:0; overflow-wrap:anywhere; }
.toast-success { border-left-color:var(--success); } .toast-success .ico { color:var(--success); }
.toast-error   { border-left-color:var(--danger); }  .toast-error .ico { color:var(--danger); }
.toast-warn    { border-left-color:var(--warning); } .toast-warn .ico { color:var(--warning); }
.toast-info    { border-left-color:var(--info); }    .toast-info .ico { color:var(--info); }

/* --- alert --- */
.alert {
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 14px; border-radius:var(--r-lg); font-size:.8125rem;
  border:1px solid var(--border); background:var(--surface-2); margin-bottom:var(--s-4);
}
.alert .ico { width:17px; height:17px; flex:none; margin-top:1px; }
.alert-success { background:var(--success-soft); border-color:transparent; color:var(--success); }
.alert-danger  { background:var(--danger-soft);  border-color:transparent; color:var(--danger); }
.alert-warning { background:var(--warning-soft); border-color:transparent; color:var(--warning); }
.alert-info    { background:var(--info-soft);    border-color:transparent; color:var(--info); }

/* --- empty / skeleton --- */
.empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s-2); text-align:center; padding:var(--s-7) var(--s-4); }
.empty-art { width:52px; height:52px; display:grid; place-items:center; border-radius:16px; background:var(--surface-3); color:var(--text-3); margin-bottom:var(--s-1); }
.empty-art .ico { width:24px; height:24px; }
.empty h3 { font-size:.875rem; }
.empty p { font-size:.8125rem; color:var(--text-3); max-width:40ch; }
.empty .btn { margin-top:var(--s-3); }

.skeleton { position:relative; overflow:hidden; background:var(--surface-3); border-radius:var(--r-sm); }
.skeleton::after {
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 70%,transparent),transparent);
  animation:shimmer 1.3s infinite;
}
@keyframes shimmer { to { transform:translateX(100%); } }
.sk-line { height:11px; margin-bottom:8px; }
.sk-line.w-40 { width:40%; } .sk-line.w-60 { width:60%; } .sk-line.w-80 { width:80%; }
.sk-card { height:96px; border-radius:var(--r-xl); }
.sk-row { height:44px; margin-bottom:6px; border-radius:var(--r-md); }

/* --- tooltip --- */
[data-tip] { position:relative; }
[data-tip]::after {
  content:attr(data-tip); position:absolute; bottom:calc(100% + 7px); left:50%;
  transform:translateX(-50%) translateY(3px);
  background:var(--n-900); color:#fff; font-size:.6875rem; font-weight:500;
  padding:4px 8px; border-radius:var(--r-xs); white-space:nowrap; pointer-events:none;
  opacity:0; transition:all var(--base) var(--ease); z-index:90;
}
:root[data-theme="dark"] [data-tip]::after { background:var(--n-700); }
[data-tip]:hover::after,[data-tip]:focus-visible::after { opacity:1; transform:translateX(-50%) translateY(0); }

/* --- code --- */
pre.code {
  background:var(--surface-sunk); border:1px solid var(--border);
  border-radius:var(--r-md); padding:12px 14px; overflow-x:auto;
  font-size:.75rem; line-height:1.65; color:var(--text-2);
  white-space:pre; tab-size:2;
}
code.inline { background:var(--surface-3); border-radius:5px; padding:1px 5px; font-size:.75em; color:var(--accent-text); }
.key-reveal { font-family:var(--mono); font-size:.875rem; word-break:break-all; background:var(--surface-sunk); border:1px dashed var(--border-strong); border-radius:var(--r-md); padding:12px; }

/* --- charts --- */
.chart { width:100%; display:block; overflow:visible; }
.chart text { font-family:var(--font); font-size:10px; fill:var(--chart-axis); }
.chart .grid-line { stroke:var(--chart-grid); stroke-width:1; shape-rendering:crispEdges; }
.chart .bar { transition:opacity var(--base) var(--ease); }
.chart .hit:hover ~ .bar,.chart g:hover > .bar { opacity:.85; }
.chart-legend { display:flex; gap:var(--s-4); align-items:center; font-size:.75rem; color:var(--text-2); }
.chart-legend span { display:inline-flex; align-items:center; gap:6px; }
.chart-legend i { width:9px; height:9px; border-radius:3px; display:inline-block; background:var(--text-3); }
.chart-legend i[data-legend="in"]  { background:var(--chart-in); }
.chart-legend i[data-legend="out"] { background:var(--chart-out); }
.offscreen { position:fixed; top:-1000px; left:-1000px; opacity:0; pointer-events:none; }
.chart-tip {
  position:absolute; z-index:40; pointer-events:none; left:var(--x,0); top:var(--y,0);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm);
  box-shadow:var(--shadow-2); padding:7px 9px; font-size:.6875rem; line-height:1.5;
  white-space:nowrap; transform:translate(-50%,-115%); transition:opacity var(--fast) var(--ease);
}
.chart-box { position:relative; }
.hbar-row { display:grid; grid-template-columns:minmax(80px,30%) 1fr auto; gap:10px; align-items:center; font-size:.8125rem; padding:5px 0; }
.hbar-track { height:8px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.hbar-fill { height:100%; border-radius:99px; background:var(--accent); width:var(--w,0%); transition:width var(--slow) var(--ease); }

/* --- list rows --- */
.list { display:flex; flex-direction:column; }
.list-row {
  display:flex; align-items:center; gap:10px; padding:10px var(--s-4);
  border-bottom:1px solid var(--border-soft); font-size:.8125rem;
}
.tool-row { flex-wrap:wrap; row-gap:4px; }
.tool-row code { flex:0 0 11.5rem; }
.tool-row span { flex:1 1 14rem; min-width:0; }
.list-row:last-child { border-bottom:0; }
.list-row:hover { background:var(--surface-2); }
.feed { display:flex; flex-direction:column; gap:1px; }
.feed-item { display:flex; gap:10px; padding:9px var(--s-4); font-size:.8125rem; }
.feed-item:hover { background:var(--surface-2); }
.feed-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); margin-top:6px; flex:none; }
.feed-body { min-width:0; }
.feed-body strong { font-weight:600; }
.feed-time { margin-left:auto; color:var(--text-3); font-size:.6875rem; white-space:nowrap; padding-left:8px; }

/* 5. PAGES ================================================================= */

/* --- login --- */
.auth {
  min-height:100dvh; display:grid; grid-template-columns:1fr;
  background:
    radial-gradient(900px 500px at 15% -10%, var(--accent-soft), transparent 60%),
    radial-gradient(700px 500px at 110% 110%, var(--violet-soft), transparent 60%),
    var(--bg);
}
.auth-panel { display:grid; place-items:center; padding:var(--s-5); }
.auth-card {
  width:min(400px,100%); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-2xl); box-shadow:var(--shadow-3); padding:var(--s-6) var(--s-5);
}
.auth-brand { display:flex; align-items:center; gap:10px; margin-bottom:var(--s-5); }
.auth-brand img { width:38px; height:38px; }
.auth-brand strong { font-size:1.0625rem; letter-spacing:-.02em; display:block; }
.auth-brand small { font-size:.6875rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.09em; }
.auth-card h1 { font-size:1.25rem; margin-bottom:4px; }
.auth-card > p.lead { font-size:.8125rem; color:var(--text-2); margin-bottom:var(--s-5); }
.auth-form { display:flex; flex-direction:column; gap:var(--s-4); }
.auth-foot { margin-top:var(--s-5); text-align:center; font-size:.6875rem; color:var(--text-3); }
.auth-aside { display:none; }
.auth-pitch { max-width:420px; }
.auth-pitch h2 { font-size:1.5rem; letter-spacing:-.025em; margin-bottom:var(--s-3); }
.auth-pitch > p { color:var(--text-2); font-size:.875rem; margin-bottom:var(--s-5); }
.pitch-list { display:flex; flex-direction:column; gap:var(--s-4); }
.pitch-item { display:flex; gap:12px; }
.pitch-ico { width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--border); color:var(--accent); box-shadow:var(--shadow-1); }
.pitch-item strong { display:block; font-size:.8125rem; }
.pitch-item p { font-size:.75rem; color:var(--text-2); }

/* --- inbox --- */
.inbox { position:relative; display:grid; grid-template-columns:320px minmax(0,1fr); height:100%; min-height:0; }
.inbox.show-info { grid-template-columns:320px minmax(0,1fr) 300px; }
.pane { display:flex; flex-direction:column; min-height:0; min-width:0; background:var(--surface); }
.pane-chats { border-right:1px solid var(--border); }
.pane-conv { background:var(--surface-2); }
.pane-info { border-left:1px solid var(--border); overflow-y:auto; }
.inbox-head { flex:none; padding:var(--s-3) var(--s-3) var(--s-2); border-bottom:1px solid var(--border-soft); display:flex; flex-direction:column; gap:var(--s-2); }
.chat-search { position:relative; }
.chat-search .ico { position:absolute; left:9px; top:50%; transform:translateY(-50%); color:var(--text-3); width:15px; height:15px; }
.chat-search input { padding-left:30px; height:32px; }
.chat-list { flex:1; overflow-y:auto; overscroll-behavior:contain; }
.chat-item {
  display:flex; gap:10px; width:100%; text-align:left; padding:10px var(--s-3);
  border-bottom:1px solid var(--border-soft); position:relative;
  transition:background var(--fast) var(--ease);
}
.chat-item:hover { background:var(--surface-2); }
.chat-item.is-active { background:var(--accent-soft); }
.chat-item.is-active::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); }
.chat-item-body { flex:1; min-width:0; }
.chat-item-top { display:flex; align-items:baseline; gap:6px; }
.chat-item-name { font-size:.8125rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-item-time { margin-left:auto; font-size:.625rem; color:var(--text-3); white-space:nowrap; }
.chat-item-preview { font-size:.75rem; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; }
.chat-item-tags { display:flex; align-items:center; gap:5px; margin-top:4px; }
.unread-pill { background:var(--accent); color:var(--accent-fg); border-radius:var(--r-pill); min-width:18px; height:18px; padding:0 5px; font-size:.625rem; font-weight:700; display:grid; place-items:center; }

.conv-head {
  flex:none; display:flex; align-items:center; gap:10px;
  padding:var(--s-2) var(--s-3); min-height:56px;
  background:var(--surface); border-bottom:1px solid var(--border);
}
.conv-title { min-width:0; }
.conv-title strong { display:block; font-size:.875rem; }
.conv-title small { display:block; font-size:.6875rem; color:var(--text-3); font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conv-title { flex:1 1 auto; }
.conv-actions { margin-left:auto; display:flex; align-items:center; gap:4px;
  flex:0 0 auto; max-width:100%; overflow-x:auto; scrollbar-width:none; }
.conv-actions::-webkit-scrollbar { display:none; }
.conv-actions > * { flex:none; }
.ai-toggle {
  display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 10px;
  border-radius:var(--r-pill); background:var(--surface-3); font-size:.6875rem; font-weight:600;
  color:var(--text-2);
}
.ai-toggle[data-mode="auto"] { background:var(--violet-soft); color:var(--violet-text); }
.ai-toggle[data-mode="manual"] { background:var(--warning-soft); color:var(--warning); }
.ai-toggle[data-mode="off"] { background:var(--surface-3); color:var(--text-3); }

.thread { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:var(--s-4) var(--s-4) var(--s-2); display:flex; flex-direction:column; gap:3px; }
.day-sep { align-self:center; margin:var(--s-3) 0 var(--s-2); font-size:.625rem; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--text-3); background:var(--surface-3); border-radius:var(--r-pill); padding:3px 12px; }
.msg { display:flex; max-width:min(680px,78%); }
.msg.is-out { align-self:flex-end; justify-content:flex-end; }
.msg.is-in { align-self:flex-start; }
.bubble {
  position:relative; padding:8px 11px 6px; border-radius:var(--r-lg);
  background:var(--bubble-in); border:1px solid var(--bubble-in-br);
  font-size:.8125rem; line-height:1.5; box-shadow:var(--shadow-1); min-width:84px;
}
.msg.is-in .bubble { border-top-left-radius:4px; }
.msg.is-out .bubble { border-top-right-radius:4px; background:var(--bubble-out); border-color:var(--bubble-out-br); }
.msg[data-source="ai"] .bubble { background:var(--bubble-ai); border-color:var(--bubble-ai-br); }
.msg[data-source="rule"] .bubble { background:var(--info-soft); border-color:color-mix(in srgb,var(--info) 35%,transparent); }
.msg[data-source="scheduled"] .bubble { background:transparent; border-style:dashed; border-color:var(--border-strong); }
.msg[data-source="system"] { align-self:center; max-width:60ch; }
.msg[data-source="system"] .bubble { background:var(--surface-3); border-color:transparent; color:var(--text-3); font-size:.75rem; text-align:center; }
.bubble-sender { font-size:.6875rem; font-weight:700; color:var(--accent-text); margin-bottom:2px; }
.msg[data-source="ai"] .bubble-sender { color:var(--violet-text); }
.bubble-text { white-space:pre-wrap; word-break:break-word; }
.bubble-meta { display:flex; align-items:center; gap:5px; justify-content:flex-end; margin-top:3px; font-size:.625rem; color:var(--text-3); }
.bubble-meta .ico { width:13px; height:13px; }
.src-tag { display:inline-flex; align-items:center; gap:3px; font-size:.5625rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:1px 5px; border-radius:var(--r-pill); }
.src-tag.ai { background:var(--violet); color:#fff; }
.src-tag.sched { background:var(--surface-3); color:var(--text-2); }
.src-tag.api { background:var(--info-soft); color:var(--info); }
.src-tag.rule { background:var(--info-soft); color:var(--info); }
.src-tag .ico { width:10px; height:10px; }
.src-tag.phone { background:var(--warning-soft); color:var(--warning); }
.src-tag.manual { background:var(--surface-3); color:var(--text-2); }
.msg[data-source="phone"] .bubble { border-color:color-mix(in srgb,var(--warning) 55%,transparent); }
.tick-read { color:var(--info); }
/* --- lampiran di gelembung ---
   Gambar dipajang sebatas lebar gelembung dan tingginya dibatasi, jadi foto
   potret tidak mengusir sisa percakapan. `width:fit-content` membuat kotaknya
   mengikuti gambar, bukan sebaliknya, sehingga tidak ada latar kosong di
   sisi gambar yang sempit. Semua baris berkas memakai min-width:0 supaya nama
   berkas yang panjang terpotong dengan elipsis, bukan melebarkan gelembung. */
.media-img {
  display:block; width:fit-content; max-width:100%; padding:0; border:0;
  background:none; border-radius:var(--r-md); overflow:hidden; line-height:0; cursor:zoom-in;
}
.media-img img {
  display:block; width:auto; height:auto; max-width:100%; max-height:260px;
  border-radius:var(--r-md); background:var(--surface-3);
}
.media-img:focus-visible { outline:none; box-shadow:0 0 0 3px var(--accent-ring); }
.media-img.is-sticker img { max-height:130px; background:transparent; }

.media-audio { display:block; width:248px; max-width:100%; }
.media-audio audio { display:block; width:100%; height:34px; }

.media-file {
  display:flex; align-items:center; gap:9px; min-width:0; max-width:100%;
  padding:7px 9px; border-radius:var(--r-md); background:var(--surface-3);
  border:1px solid var(--border-soft); color:var(--text);
}
a.media-file:hover { background:var(--surface-sunk); text-decoration:none; }
a.media-file:focus-visible { outline:none; box-shadow:0 0 0 3px var(--accent-ring); }
.media-file > .ico { width:17px; height:17px; flex:none; color:var(--text-2); }
.media-file-body { flex:1 1 auto; min-width:0; }
.media-file-name { display:block; font-size:.75rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-file-sub { display:block; margin-top:1px; font-size:.625rem; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-file.is-gone { background:var(--warning-soft); border-color:color-mix(in srgb,var(--warning) 34%,transparent); }
.media-file.is-gone > .ico { color:var(--warning); }
.media-file.is-gone .media-file-name { color:var(--warning); }
/* Lampiran yang masih mungkin muncul sendiri (sedang diunduh, menunggu
   percobaan ulang) tidak diberi warna peringatan: tidak ada yang perlu
   dikerjakan operator, cukup menunggu. */
.media-file.is-waiting { background:var(--surface-3); border-style:dashed; }
.media-file.is-waiting > .ico { color:var(--text-3); }
/* keterangan "tidak tersedia" harus terbaca utuh, jadi boleh turun baris */
.media-file.is-gone .media-file-sub,
.media-file.is-waiting .media-file-sub { white-space:normal; }

/* --- video di gelembung ---
   Pemutar bawaan browser, dibatasi tingginya seperti gambar. Lebarnya tetap
   (bukan fit-content) karena sebelum metadata termuat video belum tahu
   ukurannya, dan kotak yang melompat lebar saat termuat mengganggu. Tombol
   perbesar menumpang di pojok, di luar jangkauan kontrol pemutar yang ada di
   bawah. */
.media-video { position:relative; display:block; width:288px; max-width:100%; }
.media-video video {
  display:block; width:100%; max-height:260px; border-radius:var(--r-md);
  background:#000; object-fit:contain;
}
.media-video-expand {
  position:absolute; top:6px; right:6px; width:28px; height:28px; padding:0; border:0;
  display:grid; place-items:center; border-radius:var(--r-md); cursor:pointer;
  background:rgba(0,0,0,.55); color:#fff; opacity:0; transition:opacity var(--base) var(--ease);
}
.media-video-expand .ico { width:15px; height:15px; }
.media-video:hover .media-video-expand,
.media-video:focus-within .media-video-expand { opacity:1; }
.media-video-expand:focus-visible { opacity:1; outline:none; box-shadow:0 0 0 3px var(--accent-ring); }
@media (hover:none) { .media-video-expand { opacity:1; } }
.media-video .media-file-sub { margin-top:3px; }
/* video yang berkasnya tidak ada: poster di atas keterangan */
.media-video-missing { display:block; width:288px; max-width:100%; }
.media-video-missing img { display:block; width:100%; max-height:180px; object-fit:cover; border-radius:var(--r-md) var(--r-md) 0 0; background:var(--surface-3); opacity:.75; }
.media-video-missing .media-file { border-radius:0 0 var(--r-md) var(--r-md); }

/* jarak keterangan (caption) di bawah lampiran */
.media-img + .bubble-text,
.media-file + .bubble-text,
.media-audio + .bubble-text,
.media-video + .bubble-text,
.media-video-missing + .bubble-text { margin-top:5px; }

/* pratinjau besar di dalam dialog */
.media-view { display:flex; flex-direction:column; align-items:center; gap:var(--s-2); min-width:0; }
.media-view img { max-width:100%; max-height:min(68dvh,700px); width:auto; height:auto; border-radius:var(--r-md); background:var(--surface-3); }
.media-view video { display:block; width:100%; max-width:100%; max-height:min(68dvh,700px); border-radius:var(--r-md); background:#000; object-fit:contain; }
.media-view p { font-size:.75rem; color:var(--text-2); max-width:100%; overflow-wrap:anywhere; text-align:center; }

.typing { display:flex; align-items:center; gap:4px; align-self:flex-start; padding:9px 13px; background:var(--bubble-in); border:1px solid var(--bubble-in-br); border-radius:var(--r-lg); border-top-left-radius:4px; }
.typing i { width:6px; height:6px; border-radius:50%; background:var(--text-3); animation:blink 1.3s infinite; }
.typing i:nth-child(2) { animation-delay:.18s; } .typing i:nth-child(3) { animation-delay:.36s; }
@keyframes blink { 0%,60%,100%{opacity:.25;transform:translateY(0)} 30%{opacity:1;transform:translateY(-2px)} }

.composer { flex:none; padding:var(--s-3); background:var(--surface); border-top:1px solid var(--border); }
.composer-box { display:flex; align-items:flex-end; gap:8px; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--r-xl); padding:6px 6px 6px 12px; transition:border-color var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.composer-box:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); }
.composer textarea { height:var(--ta-h,34px); min-height:34px; flex:1 1 auto; min-width:0;
  border:0; background:transparent; resize:none; outline:none; font-size:.8125rem;
  line-height:1.5; max-height:168px; padding:7px 0; }
.composer-attach {
  display:flex; align-items:center; gap:10px; margin-bottom:var(--s-2);
  padding:7px 9px; border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface-2); min-width:0;
}
.composer-attach-thumb {
  width:40px; height:40px; flex:none; border-radius:var(--r-sm); overflow:hidden;
  background:var(--surface-3); color:var(--text-2); display:grid; place-items:center;
}
.composer-attach-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.composer-attach-body { flex:1 1 auto; min-width:0; }
.composer-attach-name { display:block; font-size:.75rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.composer-attach-sub { display:block; font-size:.625rem; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upload-bar { margin-top:5px; height:4px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden; }
.upload-bar > i { display:block; height:100%; width:0; background:var(--accent); transition:width var(--fast) linear; }
.composer-hint { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-top:6px; font-size:.625rem; color:var(--text-3); }
.scroll-bottom { position:absolute; right:18px; bottom:96px; z-index:5; box-shadow:var(--shadow-2); background:var(--surface); border:1px solid var(--border); }
.pane-conv { position:relative; }

.info-section { padding:var(--s-4); border-bottom:1px solid var(--border-soft); }
.info-row { display:flex; justify-content:space-between; gap:var(--s-3); padding:4px 0; font-size:.75rem; }
.info-row dt { color:var(--text-3); flex:none; }
.info-row dd { text-align:right; min-width:0; overflow-wrap:anywhere; }

/* --- devices --- */
.device-card { display:flex; flex-direction:column; }
.device-top { display:flex; align-items:flex-start; gap:10px; padding:var(--s-4); }
.device-ico { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--surface-3); color:var(--text-2); flex:none; }
.device-card.is-online .device-ico { background:var(--accent-soft); color:var(--accent); }
.device-body { padding:0 var(--s-4) var(--s-4); display:flex; flex-direction:column; gap:var(--s-3); }
.qr-frame {
  width:min(260px,100%); aspect-ratio:1; margin:0 auto; display:grid; place-items:center;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:10px;
}
.qr-frame img { width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
.pair-code { font-family:var(--mono); font-size:2rem; font-weight:700; letter-spacing:.14em; text-align:center; padding:var(--s-4); background:var(--surface-sunk); border-radius:var(--r-lg); border:1px dashed var(--border-strong); }
.countdown { text-align:center; font-size:.75rem; color:var(--text-3); }

/* --- reports --- */
/* --- report list --- */
/* One row per report. The columns collapse in a deliberate order as the
   viewport narrows: the excerpt goes first, then the counts, so the group
   name, the period and the status survive down to phone width. */
.report-row { gap:12px; padding:12px var(--s-4); color:inherit; }
.report-row:hover { text-decoration:none; }
.report-row .avatar { flex:none; }
/* basis 0, not auto: with flex-wrap on at phone width an "auto" basis makes
   the browser ask for the text's natural width and push the column onto its
   own line instead of letting it shrink and ellipsise. */
.report-row-main { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:2px; }
.report-row-title { gap:8px; align-items:center; min-width:0; }
.report-row-title strong { font-size:.8125rem; }
.report-row-excerpt { max-width:60ch; }
.report-row-meta { flex:none; display:flex; gap:var(--s-4); align-items:center; white-space:nowrap; }
.report-row-meta b { color:var(--text); font-weight:650; }
.report-row-go { flex:none; display:inline-flex; color:var(--text-3); }
.report-row:hover .report-row-go { color:var(--text); }
.badge-xs { padding:0 6px; font-size:.625rem; line-height:1.4; }

@media (max-width:1023px) {
  .report-row-excerpt { display:none; }
}
@media (max-width:640px) {
  .report-row { flex-wrap:wrap; row-gap:6px; }
  .report-row-meta { gap:var(--s-3); order:3; flex:1 1 100%; }
  .report-row-go { display:none; }
}

.report-card { display:flex; flex-direction:column; gap:var(--s-3); padding:var(--s-4); transition:border-color var(--base) var(--ease), transform var(--base) var(--ease); }
.report-card:hover { border-color:var(--border-strong); }
.report-excerpt { font-size:.75rem; color:var(--text-2); line-height:1.6; }
.report-stats { display:flex; gap:var(--s-4); font-size:.75rem; color:var(--text-3); }
.report-stats b { color:var(--text); font-weight:650; }
.prose { font-size:.875rem; line-height:1.75; max-width:76ch; }
.prose p { margin-bottom:var(--s-3); }
.prose h4 { margin:var(--s-4) 0 var(--s-2); font-size:.9375rem; }
.prose ul { list-style:none; display:flex; flex-direction:column; gap:6px; margin-bottom:var(--s-3); }
.prose li { position:relative; padding-left:18px; }
.prose li::before { content:""; position:absolute; left:4px; top:9px; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.prose strong { font-weight:650; color:var(--text); }

/* --- agents --- */
.agent-card { padding:var(--s-4); display:flex; flex-direction:column; gap:var(--s-3); }
.agent-meta { display:grid; grid-template-columns:repeat(2,1fr); gap:8px var(--s-3); font-size:.75rem; }
.agent-meta div { display:flex; justify-content:space-between; gap:8px; border-bottom:1px dashed var(--border-soft); padding-bottom:4px; }
.agent-meta span { color:var(--text-3); }
.prompt-preview { font-size:.75rem; color:var(--text-2); background:var(--surface-sunk); border-radius:var(--r-md); padding:10px; line-height:1.6; max-height:88px; overflow:hidden; position:relative; }
.counter { font-size:.6875rem; color:var(--text-3); text-align:right; }
.var-hints { display:flex; gap:5px; flex-wrap:wrap; }
.var-hints button { font-family:var(--mono); font-size:.6875rem; background:var(--surface-3); color:var(--accent-text); border-radius:var(--r-xs); padding:2px 7px; transition:background var(--base) var(--ease); }
.var-hints button:hover { background:var(--accent-soft); }

/* 6. RESPONSIVE / MOTION =================================================== */

.only-mobile { display:none; }
.only-desktop { display:inline-grid; }
/* Desktop: the sidebar can be tucked away. The class sits on <html> so the
   inline script in <head> can apply the remembered state before first paint. */
@media (min-width:1024px) {
  /* Slide with `left`, not transform: a transformed parent would trap the
     fixed-position toggle below, and that toggle has to stay on screen. */
  .sidebar { transition:left var(--slow) var(--ease), visibility 0s; }
  .shell { transition:margin-left var(--slow) var(--ease); }
  html.sidebar-collapsed .sidebar { left:calc(-1 * var(--sidebar-w)); visibility:hidden; transition:left var(--slow) var(--ease), visibility 0s var(--slow); }
  html.sidebar-collapsed .shell { margin-left:0; }
  /* the one toggle follows the sidebar out and parks at the screen edge */
  html.sidebar-collapsed .sidebar .sidebar-toggle {
    position:fixed; left:10px; top:calc((var(--topbar-h) - 34px) / 2); z-index:70; visibility:visible;
    background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-1);
  }
  html.sidebar-collapsed .topbar { padding-left:56px; }
}
.only-light { display:block; }
.only-dark  { display:none; }
:root[data-theme="dark"] .only-light { display:none; }
:root[data-theme="dark"] .only-dark  { display:block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-light { display:none; }
  :root:not([data-theme="light"]) .only-dark  { display:block; }
}
:root[data-theme="light"] .only-light { display:block; }
:root[data-theme="light"] .only-dark  { display:none; }

@media (min-width:900px) {
  .auth { grid-template-columns:1fr 1fr; }
  .auth-aside { display:grid; place-items:center; padding:var(--s-6); border-left:1px solid var(--border); background:color-mix(in srgb,var(--surface) 55%,transparent); }
}

@media (max-width:1280px) {
  .grid-dash { grid-template-columns:minmax(0,1fr); }
  .inbox.show-info { grid-template-columns:300px minmax(0,1fr); }
  .inbox.show-info .pane-info { position:absolute; right:0; top:0; bottom:0; width:300px; z-index:20; box-shadow:var(--shadow-3); }
  .pane-conv { position:relative; }
}

@media (max-width:1023px) {
  .sidebar { transform:translateX(-100%); transition:transform var(--slow) var(--ease); box-shadow:none; }
  body.sidebar-open .sidebar { transform:none; box-shadow:var(--shadow-3); }
  .sidebar-foot .ws-state { display:flex; align-items:center; gap:7px; font-size:.6875rem; color:var(--text-2); }
  .shell { margin-left:0; }
  .only-mobile { display:inline-grid; }
  .only-desktop { display:none; }
  .topbar { padding:0 var(--s-3); }
  .topbar-title { font-size:.875rem; }
  .topbar-search { max-width:none; margin-left:0; }
  .main { padding:var(--s-4); }
  .user-meta { display:none; }
  .conn-text { display:none; }
  .conn { width:28px; padding:0; justify-content:center; }

  .inbox { grid-template-columns:minmax(0,1fr); }
  .inbox .pane-chats { display:flex; }
  .inbox .pane-conv { display:none; }
  .inbox.show-conv .pane-chats { display:none; }
  .inbox.show-conv .pane-conv { display:flex; }
  .inbox.show-info { grid-template-columns:minmax(0,1fr); }
  .inbox.show-info .pane-info { width:min(320px,88vw); }
  .conv-head { gap:8px; padding:var(--s-2); }
  .conv-title small { display:none; }
  .thread { padding:var(--s-3) var(--s-3) var(--s-2); }
  .msg { max-width:88%; }
  .composer { padding:var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom)); }
  /* satu tombol lebih banyak (lampiran) di kotak yang sama: rapatkan kontrol
     supaya kolom teks tetap lebar di layar ponsel */
  .composer-box { gap:5px; padding:6px 6px 6px 10px; }
  .composer-box .btn-icon { width:30px; height:30px; }
  .composer-box .btn-icon .ico { width:16px; height:16px; }
  .media-img img { max-height:220px; }
  /* Keep the takeover warning: it is the one thing an operator must see
     before replying by hand. Just make it compact. */
  .composer-hint { margin-top:4px; gap:var(--s-2); }
  .composer-hint [data-composer-note] { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .scroll-bottom { bottom:84px; right:12px; }
}

@media (max-width:640px) {
  .topbar-search { display:none; }
  .topbar-title { flex:1; }
  .main { padding:var(--s-3); }
  .page-head { margin-bottom:var(--s-4); }
  .modal-root { padding:0; align-items:flex-end; }
  .modal-card { width:100%; max-height:92dvh; border-radius:var(--r-2xl) var(--r-2xl) 0 0; }
  .modal-body,.modal-head { padding-left:var(--s-4); padding-right:var(--s-4); }
  .modal-foot { padding-left:var(--s-4); padding-right:var(--s-4); }
  .modal-foot .btn { flex:1; }
  .toast-stack { right:var(--s-3); left:var(--s-3); bottom:var(--s-3); width:auto; }
  .msg { max-width:90%; }
  /* di layar sesempit ini label tombol kirim memakan lebar kolom teks;
     ikon pesawat kertas plus aria-label sudah cukup menjelaskan */
  .composer-box .btn-primary span { display:none; }
  .composer-box .btn-primary { padding:0 12px; }
  .grid-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-3); }
  .stat { padding:var(--s-3); }
  .stat-value { font-size:1.375rem; }
  .auth-card { padding:var(--s-5) var(--s-4); border:0; box-shadow:none; background:transparent; }
}

@media print {
  .sidebar,.topbar,.toast-stack,.no-print { display:none !important; }
  .shell { margin-left:0; }
  .main { padding:0; }
  .card { border:0; box-shadow:none; }
  body { background:#fff; color:#000; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* --- error page --- */
.error-page .empty { padding:var(--s-8) var(--s-4); }
.error-code {
  font-family:var(--mono); font-size:2.75rem; font-weight:700; letter-spacing:-.04em;
  color:var(--text-3); line-height:1; margin-bottom:var(--s-2);
}
.error-page .btn-group { margin-top:var(--s-4); }

/* --- dashboard --- */
.sk-chart { height:180px; border-radius:var(--r-lg); }
.dash-main { margin-top:var(--s-4); }
.activity-scroll { max-height:420px; overflow-y:auto; }
.dev-row { display:flex; align-items:center; gap:10px; padding:11px var(--s-4); border-bottom:1px solid var(--border-soft); }
.dev-row:last-child { border-bottom:0; }
.dev-row .grow strong { display:block; font-size:.8125rem; }
.dev-row .grow small { font-size:.6875rem; color:var(--text-3); font-family:var(--mono); }
.top-chat { display:flex; align-items:center; gap:10px; padding:7px 0; }
.top-chat + .top-chat { border-top:1px dashed var(--border-soft); }
.top-chat .bar { flex:1; min-width:60px; }

/* --- inbox extras --- */
.tick-failed { color:var(--danger); }
.pane-conv [data-back] .ico { transform:rotate(90deg); }
.chat-item[aria-current="true"] { background:var(--accent-soft); }
.pane-info .btn-group .btn { flex:1; }

/* --- devices --- */
.switch-row { align-items:flex-start; padding:7px 0; border-bottom:1px dashed var(--border-soft); }
.switch-row .switch-track { margin-top:2px; }
.switch-row .grow { display:flex; flex-direction:column; }
.sk-qr { width:100%; height:100%; border-radius:var(--r-md); }
.pair-grid { display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr); gap:var(--s-5); align-items:start; }
.pair-steps { counter-reset:step; display:flex; flex-direction:column; gap:7px; font-size:.8125rem; color:var(--text-2); }
.pair-steps li { counter-increment:step; display:flex; gap:9px; align-items:flex-start; }
.pair-steps li::before {
  content:counter(step); flex:none; width:19px; height:19px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent-text);
  font-size:.6875rem; font-weight:700; display:grid; place-items:center;
}
.device-card .btn-group { margin-top:var(--s-1); }
@media (max-width:720px) { .pair-grid { grid-template-columns:minmax(0,1fr); } }

/* --- reports --- */
.load-more { display:flex; justify-content:center; margin-top:var(--s-5); }
.report-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.report-card-link { color:inherit; }
.report-card-link:hover { text-decoration:none; }

/* --- agents --- */
.prompt-input { min-height:200px; font-family:var(--mono); font-size:.75rem; line-height:1.7; }
.test-output {
  background:var(--surface-sunk); border:1px solid var(--border); border-radius:var(--r-md);
  padding:12px; font-size:.8125rem; line-height:1.65; white-space:pre-wrap; min-height:72px;
}
.test-output pre { margin-top:8px; padding:8px 10px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--border-soft); white-space:pre-wrap; overflow-wrap:anywhere; max-height:320px; overflow-y:auto; }
.agent-card .avatar-lg { background:var(--violet-soft); color:var(--violet); border-radius:13px; }

/* --- rules --- */
.input-prio { width:76px; text-align:center; padding:5px 6px; min-height:28px; }
.cell-reply { max-width:320px; }
.tester { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s-3); }
.tester-verdict { font-size:.75rem; font-weight:600; }
.tester-verdict.is-ok { color:var(--success); }
.tester-verdict.is-no { color:var(--text-3); }
.tester-verdict.is-warn { color:var(--warning); }

/* --- users --- */
.role-note { margin-top:var(--s-4); }
.role-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s-3); margin-top:var(--s-3); }
.role-list > div { display:flex; gap:10px; align-items:flex-start; font-size:.8125rem; color:var(--text-2); }
.role-list dt { flex:none; }

/* --- settings --- */
.link-btn { color:var(--accent-text); font-size:.6875rem; text-decoration:underline; }
.curl-card { margin-top:var(--s-4); }
.theme-picker { display:flex; gap:var(--s-2); flex-wrap:wrap; }
.theme-opt { position:relative; }
.theme-opt input { position:absolute; opacity:0; width:0; height:0; }
.theme-opt span {
  display:inline-flex; align-items:center; gap:7px; padding:9px 14px;
  border:1px solid var(--border-strong); border-radius:var(--r-md);
  font-size:.8125rem; cursor:pointer; background:var(--surface);
  transition:all var(--base) var(--ease);
}
.theme-opt span .ico { width:16px; height:16px; color:var(--text-3); }
.theme-opt input:checked + span { border-color:var(--accent); background:var(--accent-soft); color:var(--accent-text); }
.theme-opt input:checked + span .ico { color:var(--accent); }
.theme-opt input:focus-visible + span { box-shadow:0 0 0 3px var(--accent-ring); }

/* --- profile --- */
.profile-grid { align-items:start; }

/* --- inbox: lokasi, teruskan, sunting --- */
/* Semua panel di sini disembunyikan lewat atribut `hidden`, jadi tidak ada
   satu pun aturan di bawah yang menyetel `display` pada elemen tersebut. */
.bubble-fwd { display:flex; align-items:center; gap:4px; margin-bottom:3px; font-size:.6875rem; font-style:italic; color:var(--text-3); }
.bubble-fwd .ico { width:13px; height:13px; }
.bubble-edited { font-style:italic; }

.loc-card { display:flex; flex-direction:column; gap:6px; min-width:min(216px,56vw); }
.loc-head { display:flex; align-items:flex-start; gap:8px; }
.loc-head > .ico { width:18px; height:18px; flex:none; margin-top:1px; color:var(--accent); }
.loc-head-text { display:flex; flex-direction:column; gap:1px; min-width:0; }
.loc-title { font-size:.8125rem; font-weight:650; overflow-wrap:anywhere; }
.loc-name,.loc-addr { font-size:.75rem; color:var(--text-2); overflow-wrap:anywhere; }
.loc-coords { font-family:var(--mono); font-size:.6875rem; color:var(--text-3); overflow-wrap:anywhere; }
.loc-link {
  display:inline-flex; align-items:center; gap:5px; align-self:flex-start;
  padding:4px 10px; border-radius:var(--r-pill); font-size:.75rem; font-weight:600;
  background:var(--surface); border:1px solid var(--border); color:var(--accent-text);
}
.loc-link:hover { background:var(--surface-3); text-decoration:none; }
.loc-link:focus-visible { box-shadow:0 0 0 3px var(--accent-ring); }
.loc-link .ico { width:13px; height:13px; }
.loc-preview { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.75rem; color:var(--text-2); min-height:30px; }
.loc-preview .num { font-family:var(--mono); }

.msg { align-items:flex-end; gap:2px; }
.msg-actions { display:flex; align-items:center; flex:none; }
.msg.is-out .msg-actions { order:-1; }
.msg-menu-btn {
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  color:var(--text-3); opacity:0;
  transition:opacity var(--base) var(--ease), background var(--base) var(--ease), color var(--base) var(--ease);
}
.msg-menu-btn .ico { width:15px; height:15px; }
.msg:hover .msg-menu-btn,
.msg:focus-within .msg-menu-btn,
.msg-menu-btn[aria-expanded="true"] { opacity:1; }
.msg-menu-btn:hover { background:var(--surface-3); color:var(--text); }
.msg-menu-btn:focus-visible { opacity:1; box-shadow:0 0 0 3px var(--accent-ring); }
@media (hover:none) { .msg-menu-btn { opacity:.6; } }
.msg-menu { position:fixed; left:0; top:0; right:auto; min-width:186px; max-width:calc(100vw - 16px); }

.fwd-list {
  display:flex; flex-direction:column; gap:2px; padding:4px;
  max-height:min(42vh,320px); overflow-y:auto; overscroll-behavior:contain;
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-2);
}
.fwd-item { display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:var(--r-sm); cursor:pointer; }
.fwd-item:hover { background:var(--surface-3); }
.fwd-item input { appearance:none; width:16px; height:16px; flex:none; border:1.5px solid var(--border-strong); border-radius:5px; background:var(--surface); transition:all var(--base) var(--ease); }
.fwd-item input:checked { background:var(--accent); border-color:var(--accent); background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='m20 6-11 11-5-5'/></svg>"); background-size:11px; background-position:center; background-repeat:no-repeat; }
.fwd-item input:focus-visible { box-shadow:0 0 0 3px var(--accent-ring); }
.fwd-item .grow strong { display:block; font-size:.8125rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fwd-item .grow small { display:block; font-size:.6875rem; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fwd-empty { padding:10px 8px; }