/* Sobagi Runtime — design system shared across every page. * * One stylesheet so admin / chat / login / login look like the same product. * Loaded from /static/css/runtime.css by every HTML entry point; the per-page * Tailwind CDN config still extends from these tokens for utility classes. * * Sections: * 1. fonts — Geist (UI) + Geist Mono (mono/data) * 2. tokens — palette + spacing + radius + shadow vars * 3. base — body, focus-visible, scrollbar, selection * 4. components — .btn, .card, .chip, .input, .table * 5. patterns — .empty-state, .navlink active, dialog * * Anti-patterns we deliberately fix here: * - emoji-as-icon (use SVG) - low-contrast text in dark mode * - serif/sans mix between pages - missing focus-visible rings * - per-page color forks - hover-shift layout from scale */ /* 1. fonts ── Geist for UI chrome, Geist Mono for data/code (timestamps, * IDs, JSON previews). Loaded via + * in each page's (NOT @import here: @import blocks render + adds a * round-trip; lets the preload scanner fetch fonts during HTML parse). */ /* 2. tokens ── single source of truth for color / spacing / radius. */ :root { /* Surfaces — deeper, less navy. Aim for WCAG AAA on body text. */ --bg: #0a0d12; /* page */ --bg-1: #11151c; /* sidebar / secondary panel */ --bg-2: #161b24; /* card */ --bg-3: #1d2330; /* nested surface, button-ghost, hover */ --bg-elev: #1a212c; /* dialog / popover */ --border: #232a36; --border-strong: #2e3744; /* Text — bumped per UX review for enterprise readability. --text ≈ 14:1 on --bg (WCAG AAA) --text-muted ≈ 7.5:1 (was 4.6:1 — readable but a bit soft) --text-faint ≈ 4.5:1 (reserved for low-priority meta) */ --text: #f1f5f9; --text-muted: #b8c2cc; --text-faint: #7e8794; /* Brand — Teal. Single accent so AI/CTA reads as one identity. */ --primary: #14B8A6; --primary-2: #2DD4BF; /* lighter teal for gradients / hover */ --primary-d: #0D9488; --primary-tint: rgba(20,184,166,.12); --primary-ring: rgba(20,184,166,.30); --accent: #F59E0B; /* sparingly — reminders / unread badges */ /* Status */ --success: #10B981; --warn: #F59E0B; --danger: #EF4444; --info: #60A5FA; /* Tints — uniform .14 opacity across status chips. */ --danger-tint: rgba(239, 68, 68, .14); --success-tint: rgba(16, 185, 129, .14); --warn-tint: rgba(245, 158, 11, .14); --info-tint: rgba(96, 165, 250, .14); /* Density */ --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-pill: 999px; /* Elevation — 4 levels. Shadow ám navy (theo nền tối), không đen thuần. */ --e1: 0 1px 2px rgba(3,7,18,.34); --e2: 0 4px 12px rgba(3,7,18,.38); --e3: 0 12px 28px rgba(3,7,18,.46); --e4: 0 24px 56px rgba(3,7,18,.56); /* Back-compat aliases — existing components keep working without a sweep. Map onto the new 4-level scale. */ --shadow-sm: var(--e1); --shadow: var(--e2); --shadow-lg: var(--e3); /* Motion */ --t-fast: 120ms; --t: 180ms; --t-slow: 260ms; --ease: cubic-bezier(.22,.61,.36,1); /* z-index — 6 named tiers. Drawer sits BELOW modal so a settings drawer can be summoned while a confirm dialog is up. */ --z-rail: 10; --z-nav: 20; --z-pop: 30; /* autocomplete, kebab dropdown */ --z-popover: 30; /* alias for legacy callsites */ --z-drawer: 40; /* sidebar drawer + settings drawer */ --z-modal: 50; /* command palette, HITL sheet, alerts */ --z-toast: 60; /* Overlay base — borders/hover surfaces built from `white/[.xx]` in the * chat shell. RGB channels so Tailwind's `rgb(var(--ink-rgb)/)` * composes alpha. Dark = white veil; light = slate veil (so dividers * stay visible on a white page). */ --ink-rgb: 255 255 255; /* Chat-shell gradients — token-ised so the chat follows the theme. Brand * (teal) / status gradients stay literal; only the neutral chrome flips. */ --grad-header: linear-gradient(90deg,#11151c 0%,#161b24 50%,#11151c 100%); --grad-sidebar: linear-gradient(180deg,#11151c 0%,#0c1117 100%); --grad-bubble: linear-gradient(180deg,#1a212c 0%,#161b24 100%); --grad-input: linear-gradient(180deg,rgba(255,255,255,.01),rgba(255,255,255,.035)); --grad-title: linear-gradient(90deg,#f4fbfa 0%,#2DD4BF 100%); } /* Theme SÁNG — ấm, sang: nền ngả vàng-ngà (warm ivory) + chút teal (accent + * ambient glow), chữ warm near-black, shadow ám nâu ấm. Bật bằng * (theme.js). Mọi token tự đổi. */ html[data-theme="light"] { --bg: #f6f4ea; /* ivory ấm, hơi ngả vàng-xanh */ --bg-1: #fffdf6; /* sidebar / panel ấm nhất */ --bg-2: #fffef9; /* card — trắng ngà ấm */ --bg-3: #ece7d8; /* nested / hover — cát ấm */ --bg-elev: #fffefb; --border: #e7e1d1; --border-strong: #d5ccb8; --text: #21201a; /* warm near-black (không slate lạnh) */ --text-muted: #595442; --text-faint: #8c8674; --primary: #0d9488; /* teal = "xanh tiny" trên nền ấm */ --primary-2: #14b8a6; --primary-d: #0f766e; --primary-tint: rgba(13,148,136,.12); --primary-ring: rgba(13,148,136,.32); /* Shadow ám nâu ấm (hue theo nền, không đen thuần) — depth dịu. */ --e1: 0 1px 2px rgba(74,64,40,.07); --e2: 0 4px 12px rgba(74,64,40,.10); --e3: 0 12px 28px rgba(74,64,40,.13); --e4: 0 24px 56px rgba(74,64,40,.17); /* Overlay veil → warm dark so dividers/hover ấm theo nền. */ --ink-rgb: 33 32 26; /* Chat-shell gradients — chrome trung tính ngả ivory ấm. */ --grad-header: linear-gradient(90deg,#fffef9 0%,#f6f4ea 50%,#fffef9 100%); --grad-sidebar: linear-gradient(180deg,#fffdf6 0%,#efe9da 100%); --grad-bubble: linear-gradient(180deg,#fffef9 0%,#f3efe2 100%); --grad-input: linear-gradient(180deg,rgba(33,32,26,.012),rgba(33,32,26,.03)); --grad-title: linear-gradient(90deg,#21201a 0%,#0d9488 100%); } html[data-theme="light"] body::before { opacity:.6; } /* 3. base ── apply across every page that imports this file. */ /* Universal border-box so `width:100%` + `padding` never overflows a card — * Tailwind's preflight does this on pages that load Tailwind, but the login * page is a hand-rolled HTML form (no Tailwind), so we set it here for * everyone. */ *, *::before, *::after { box-sizing: border-box; } html, body { background: var(--bg); color: var(--text); font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Geist dùng default features; số tabular bật riêng ở .num/.mono/bảng. */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Ambient teal hint — a single radial in the top-right corner at ~6% * opacity. Brand whisper, not a wallpaper. Pinned to viewport so it * reads as ambient room light, not a watermark on the document. */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(at top right, rgba(20, 184, 166, .07), transparent 55%); pointer-events: none; z-index: 0; } body > * { position: relative; z-index: 1; } /* prefers-reduced-motion users opt out of every transition + ambient. */ @media (prefers-reduced-motion: reduce) { body::before { display: none; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } code, pre, .mono, .num { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-feature-settings: 'tnum' 1; } /* Bare form-field defaults — admin SPAs lost their inline `input,select{}` * block when we de-duplicated styles, so any `` / `

` without an explicit class falls back here instead of to the
 * browser's white-on-light defaults. `:where()` keeps specificity at 0 so
 * `.input` (or a page-specific override) wins. Checkboxes / radios / file
 * inputs are excluded — those use the browser's accessible defaults. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]))
,
:where(select),
:where(textarea) {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r);
  padding: 8px 10px;
  font: 400 14px/1.4 'Geist', sans-serif;
  width: 100%;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
:where(input, select, textarea)::placeholder { color: var(--text-faint); }
:where(input, select, textarea):hover { border-color: var(--border-strong); }
:where(input, select, textarea):focus,
:where(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}

::selection { background: var(--primary-tint); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
::-webkit-scrollbar-track { background: transparent; }

/* Visible keyboard focus on every interactive element — never strip
 * focus without a replacement. We use focus-visible (not :focus) so a
 * mouse click doesn't leave a ring stuck. NO border-radius override —
 * each component keeps its own corner so focusing doesn't visually
 * shrink the element. */
:where(button, a, [role="button"], summary):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-ring);
}

/* Icon alignment — every SVG that came through `icon()` (renders with
 * `class="icon"`) plus every `<span data-icon>` host gets the same
 * inline-flex treatment so the icon sits exactly on the cap-height
 * of surrounding text. Fixes the "icon 1-2px low" baseline drift
 * that hand-rolled inline SVGs suffer in dark UIs. */
.icon-host,
[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 0;
}
svg.icon {
  display: inline-block;
  vertical-align: middle;
  /* Width/height already set inline; this just prevents the SVG from
   * picking up a fractional baseline gap in line-box contexts. */
  line-height: 0;
}
/* Buttons that wrap a bare SVG (no .icon-host span) — make sure the
 * button itself centres its content too. Catches one-off uses like
 * the hp-refresh / copy buttons where we drop the icon string straight
 * into innerHTML. */
button > svg, a > svg { vertical-align: middle; }

/* Code block extras — language label top-right + copy button. Applied
 * to any `<pre>` inside .ai-msg-content / .prose. The pre needs
 * position:relative for the absolute children — the markdown-it
 * highlight() above renders `<pre class="hljs">` so we anchor on that. */
pre.hljs {
  position: relative;
}
pre.hljs .lang-tag {
  position: absolute;
  top: 6px; right: 10px;
  font: 600 9.5px/1 'Geist Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-faint);
  opacity: .85;
  pointer-events: none;
}
pre.hljs .copy-btn {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  display: none;
  align-items: center; justify-content: center;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
pre.hljs:hover .copy-btn { display: inline-flex; }
pre.hljs:hover .lang-tag { display: none; }
pre.hljs .copy-btn:hover { color: var(--text); background: var(--bg-elev); }
pre.hljs .copy-btn.copied { color: var(--success); border-color: var(--success); }

/* Health popover — per-service breakdown summoned from the badge in
 * the header. Anchored to the badge's right edge so it sits under
 * the dot. */
.health-pop {
  position: absolute;
  right: 0; top: calc(100% + 6px);
  display: none;
  min-width: 240px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--e2);
  padding: 6px;
  z-index: var(--z-pop);
}
.health-pop.show { display: block; animation: fadeInPop 140ms var(--ease); }
@keyframes fadeInPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; } }
.hp-empty { padding: 12px; text-align: center; color: var(--text-muted); font-size: 12px; }
.hp-head {
  display: flex; align-items: center;
  padding: 6px 8px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.hp-overall { display: flex; align-items: center; gap: 6px; font: 600 12px/1 'Geist'; flex: 1; }
.hp-overall svg { flex-shrink: 0; }
.hp-overall.hp-ok    { color: var(--success); }
.hp-overall.hp-err   { color: var(--danger); }
.hp-overall.hp-warn  { color: var(--warn); }
.hp-refresh {
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-faint); padding: 4px; border-radius: 4px;
  display: inline-flex; align-items: center;
}
.hp-refresh:hover { color: var(--text); background: var(--bg-3); }
.hp-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  font-size: 12.5px;
}
.hp-row .hp-icon { display: inline-flex; flex-shrink: 0; }
.hp-row.hp-ok    .hp-icon { color: var(--success); }
.hp-row.hp-err   .hp-icon { color: var(--danger); }
.hp-row.hp-warn  .hp-icon { color: var(--warn); }
.hp-row.hp-faint .hp-icon { color: var(--text-faint); }
.hp-row .hp-name  { flex: 1; color: var(--text); }
.hp-row .hp-state { font-size: 11px; color: var(--text-muted); text-transform: lowercase; }

/* Notification popover entries — visually echo the chat AI message so
 * the same content (task result, reminder) reads the same in both
 * places. Body goes through markdown-it via .prose just like
 * .ai-msg-content; head row carries the unread dot + title + time. */
.notif-item {
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.notif-item:hover { background: rgba(255,255,255,.05); border-color: var(--border-strong); }
.notif-item.is-read { opacity: .55; }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.notif-title {
  font: 600 12.5px/1.3 'Geist';
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; flex: 1;
}
.notif-time { font: 400 10.5px/1 'Geist Mono', monospace; color: var(--text-faint); flex-shrink: 0; }
.notif-unread-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  margin-right: 6px;
  vertical-align: middle;
}
.notif-body {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
  /* Tighter prose for the compact popover — no large headings, no
     big code blocks running off the panel. */
  max-height: 360px;
  overflow-y: auto;
}
.notif-body > * + * { margin-top: 8px; }
.notif-body h1, .notif-body h2, .notif-body h3 {
  font-size: 13px; font-weight: 600; color: var(--text);
  margin: 8px 0 4px;
}
.notif-body code:not(pre code) {
  background: var(--bg-3); padding: 1px 4px; border-radius: 3px;
  font-size: 11.5px; font-family: 'Geist Mono', monospace;
}
.notif-body pre {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 4px; padding: 8px;
  font-size: 11px; overflow-x: auto;
  max-width: 100%;
}
.notif-body ul, .notif-body ol { padding-left: 18px; }
.notif-body li { margin: 2px 0; }
.notif-body p { margin: 0; }
.notif-body strong { color: var(--text); font-weight: 600; }
.notif-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

/* Brand mark — square tile carrying "DL" wordmark. Used in every header
 * (chat shell + admin pages + login) as the product's visual anchor.
 * Renders via icons.js (`icon('dl-mark')`) so callsites stay uniform with
 * the rest of the icon API. */
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--primary), var(--primary-d));
  color: #fff;
  font: 700 11px/1 'Geist', sans-serif;
  letter-spacing: .04em;
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 6px rgba(20,184,166,.20);
}
.brand-mark.brand-mark-lg {
  width: 36px; height: 36px;
  border-radius: 10px;
  font-size: 14px;
}

/* 4. components ──────────────────────────────────────────────────────── */

/* Button system. Keep this small — variants come from one base + modifiers.
 * Variants: primary (gradient), ghost (subtle), danger (red), sm/icon size. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: 600 13px/1 'Geist', sans-serif;
  border: 1px solid transparent;
  border-radius: var(--r);
  padding: 8px 14px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  user-select: none;
  white-space: nowrap;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
/* Tactile press — mọi nút lún nhẹ khi bấm (btn-pri có scale riêng override). */
.btn:active { transform: translateY(1px); }
.btn .icon { width: 16px; height: 16px; flex-shrink: 0; }

.btn-pri      {
  background: linear-gradient(135deg, var(--primary), var(--primary-d));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 14px rgba(20,184,166,.22);
}
.btn-pri:hover{ filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 8px 18px rgba(20,184,166,.30); }
.btn-pri:active{ transform: translateY(0) scale(.98); }
.btn-ghost    { background: var(--bg-3); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--bg-elev); border-color: var(--border-strong); }
.btn-danger   { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }
.btn-sm       { padding: 5px 10px; font-size: 12px; }
.btn-icon     { padding: 6px; }   /* square icon button */

/* Surfaces */
.card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.card-pad   { padding: 14px; }
.card-elev  { box-shadow: var(--shadow); }

/* Chips — small labels (status, role, action) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 600 11px/1 'Geist', sans-serif;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  letter-spacing: 0;
}
.chip-primary { background: var(--primary-tint); color: #5eead4; }
.chip-success { background: var(--success-tint); color: #6ee7b7; }
.chip-warn    { background: var(--warn-tint);    color: #fcd34d; }
.chip-danger  { background: var(--danger-tint);  color: #fca5a5; }
.chip-info    { background: var(--info-tint);    color: #93c5fd; }
/* Legacy alias — purple/violet chip was used by admin role pill before
   the teal rebrand. Map to teal so existing markup keeps working. */
.chip-violet  { background: var(--primary-tint); color: #5eead4; }

/* Form fields — single shared style so admin / chat / login all agree. */
.input, input.input, select.input, textarea.input,
.input-group input, .input-group select, .input-group textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r);
  padding: 8px 10px;
  width: 100%;
  font: 400 14px/1.4 'Geist', sans-serif;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:hover, input.input:hover { border-color: var(--border-strong); }
.input::placeholder { color: var(--text-faint); }
.input:focus, .input:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.input-label { display: block; font: 500 12px/1.3 'Geist'; color: var(--text-muted); margin-bottom: 4px; }

/* Table — consistent spacing + readability. Wrap in `.table-wrap` so it
 * scrolls horizontally on narrow viewports. Zebra + hover-lift add
 * visual rhythm so a long list doesn't read as one undifferentiated wall. */
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
}
.tbl th {
  font: 600 11px/1 'Geist';
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  background: rgba(255,255,255,.015);
}
.tbl tbody tr { transition: background var(--t-fast); }
.tbl tbody tr:nth-child(even) td { background: rgba(255,255,255,.012); }
.tbl tbody tr:hover td { background: var(--primary-tint); }
.tbl .num { text-align: right; font-family: 'Geist Mono', monospace; }

/* ── Page hero ──────────────────────────────────────────────────────────
 * Goes under every admin SPA header. Big page title + subtitle so each
 * tool feels like an intentional product surface, not a bare table on
 * void. Optional .page-hero-cta slot on the right (refresh button etc).
 */
.page-hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(at top left, rgba(20,184,166,.06), transparent 70%),
    linear-gradient(to bottom, rgba(255,255,255,.012), transparent);
}
.page-hero-titles { min-width: 0; }
.page-hero-eyebrow {
  font: 600 11px/1 'Geist'; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-faint);
  margin-bottom: 8px;
  display: inline-flex; align-items: center; gap: 6px;
}
.page-hero-eyebrow svg { width: 13px; height: 13px; }
.page-hero-title {
  font: 700 26px/1.15 'Geist';
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0;
  background: linear-gradient(90deg, #f4fbfa, var(--primary-2));
  background-clip: text; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-hero-sub {
  font: 400 13.5px/1.55 'Geist';
  color: var(--text-muted);
  margin-top: 6px; max-width: 720px;
}
.page-hero-cta { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }

/* Compact modifier — for dense list pages (audit / usage) where the
 * default hero eats 30%+ of viewport before any data is visible.
 * Tightens vertical padding, shrinks the title, drops the sub line. */
.page-hero.is-compact { padding: 14px 28px 12px; }
.page-hero.is-compact .page-hero-title { font-size: 20px; }
.page-hero.is-compact .page-hero-eyebrow { margin-bottom: 4px; }
.page-hero.is-compact .page-hero-sub    { display: none; }

/* Cell-level click affordance — looks like a regular mono name until
 * mouseover, then underlines/brightens to telegraph the drill-through.
 * Used by audit/usage/stats tables for actor click-through filters. */
.actor-link { cursor: pointer; color: var(--text); text-decoration: none;
              border-bottom: 1px dotted var(--text-faint); }
.actor-link:hover { color: #5eead4; border-bottom-color: #5eead4; }

/* Inline in-cell horizontal bar — used in usage tables so a column of
 * numbers also doubles as a visual "who's spending the most" ranking
 * without needing a separate chart. Pure CSS, no chart-lib dep. */
.bar-cell { position: relative; min-width: 120px; }
.bar-cell .bar-track {
  position: absolute; left: 0; right: 0; bottom: 2px; height: 3px;
  background: var(--border); border-radius: 999px; overflow: hidden;
}
.bar-cell .bar-fill {
  height: 100%; background: var(--primary); border-radius: 999px;
  transition: width var(--t) var(--ease);
}
.bar-cell .bar-num { position: relative; z-index: 1; }

/* Link-style button — looks like a link but is a real <button> for
 * a11y. Used by audit "Xem detail" and any other in-row triggers. */
.link-btn { background: none; border: 0; padding: 0; color: var(--primary);
            cursor: pointer; font: inherit; }
.link-btn:hover { color: #5eead4; text-decoration: underline; }
.link-btn:focus-visible { outline: 2px solid var(--primary-ring); outline-offset: 2px; border-radius: 3px; }

/* Compact icon button used inside drawer headers (audit detail,
 * jobs runs panel) — no chrome until hovered. */
.header-icon-btn { background: none; border: 0; padding: 4px;
                   color: var(--text-muted); cursor: pointer;
                   border-radius: var(--r-sm);
                   transition: color var(--t-fast), background var(--t-fast); }
.header-icon-btn:hover { color: var(--text); background: var(--bg-3); }

/* Slide-out detail drawer (right edge) — used by Audit so expanding
 * one row's JSON doesn't shove every other row down. Same scrim +
 * pane pattern as the notification drawer on /ui for consistency. */
.detail-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: calc(var(--z-drawer) - 1);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t) var(--ease);
}
.detail-scrim.is-open { opacity: 1; pointer-events: auto; }
.detail-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(520px, 100vw);
  background: var(--bg-1); border-left: 1px solid var(--border);
  box-shadow: var(--e3);
  z-index: var(--z-drawer);
  transform: translateX(100%); transition: transform var(--t) var(--ease);
  display: flex; flex-direction: column;
}
/* Wider variant — used when the drawer hosts a table (e.g. jobs run
 * history) instead of a single JSON dump. */
.detail-drawer.is-wide { width: min(820px, 100vw); }
.detail-drawer.is-open { transform: translateX(0); }
.detail-drawer .dd-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.detail-drawer .dd-title { font: 700 14px/1 'Geist'; flex: 1; }
.detail-drawer .dd-body  { padding: 14px 16px; overflow: auto; }
.detail-drawer pre.json {
  margin: 0; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r); padding: 10px;
  font: 12px/1.5 ui-monospace, monospace; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
}
@media (prefers-reduced-motion: reduce) {
  .detail-scrim, .detail-drawer { transition: none; }
}

/* ── Page container — wider than max-w-6xl so the table doesn't float
 * lonely on a 2000px monitor. Comfortable horizontal padding. */
.page-wrap { max-width: 1480px; margin: 0 auto; padding: 22px 28px 40px; }
@media (max-width: 900px) { .page-wrap { padding: 16px 16px 32px; } }

/* ── Card entrance — subtle fade-up so loading rows don't pop in flat. */
.card { animation: cardIn 260ms cubic-bezier(.22,.61,.36,1); transition: box-shadow var(--t), transform var(--t); }
.card:hover { box-shadow: var(--shadow); }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* 5. patterns ──────────────────────────────────────────────────────── */

/* Empty state — replaces "Đang tải…" / "Trống." text-only fallbacks.
 * Use inside a card or full-bleed area; the .empty-cta slot is optional
 * (button/link the user can tap to populate the data set). */
.empty {
  padding: 44px 20px 40px;
  text-align: center;
  color: var(--text-muted);
  display: flex; flex-direction: column; align-items: center;
}
.empty .empty-icon {
  width: 52px; height: 52px;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: var(--primary-tint);
  color: #5eead4;
  display: grid; place-items: center;
}
.empty .empty-icon svg { width: 26px; height: 26px; }
.empty .empty-title { font: 600 15px/1.3 'Geist'; color: var(--text); margin-bottom: 6px; }
.empty .empty-hint  { font: 400 13px/1.55 'Geist'; max-width: 380px; margin: 0 auto; }
.empty .empty-cta   { margin-top: 14px; }

/* Welcome screen — shown when no session is active. Hierarchy:
 *   eyebrow (brand label)
 *   title   (greeting, light gradient)
 *   sub     (one-line nudge)
 *   starters 2×2 grid of clickable prompt cards
 * Falls back gracefully on <600px to a single column. */
.welcome {
  max-width: 560px;
  margin: auto;
  padding: 40px 20px;
  text-align: center;
  animation: cardIn var(--t-slow) var(--ease) both;
}
.welcome-eyebrow {
  font: 600 11px/1 'Geist';
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--primary);
  margin-bottom: 14px;
}
.welcome-title {
  font: 700 30px/1.15 'Geist';
  letter-spacing: -.02em;
  margin: 0 0 8px;
  background: linear-gradient(90deg, #f4fbfa, var(--primary-2));
  background-clip: text; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.01em;
}
.welcome-sub {
  font: 400 14px/1.55 'Geist';
  color: var(--text-muted);
  max-width: 460px;
  margin: 0 auto 28px;
}
.welcome-starters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  text-align: left;
}
@media (max-width: 600px) {
  .welcome-starters { grid-template-columns: 1fr; }
  .welcome-title    { font-size: 24px; }
}

/* Welcome-screen Telegram discovery card — value-prop visible without
   feeling like an ad. Single row, dismissible, sits below the starters. */
.welcome-tg-promo {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(20,184,166,.06), rgba(20,184,166,.02));
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.welcome-tg-promo.hidden { display: none; }
.tg-promo-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--primary-tint);
  color: var(--primary);
  flex-shrink: 0;
}
.tg-promo-title { font-weight: 600; font-size: 13.5px; color: var(--text); }
.tg-promo-sub   { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.tg-promo-actions { display: inline-flex; gap: 6px; flex-shrink: 0; }
@media (max-width: 600px) {
  .welcome-tg-promo { grid-template-columns: auto 1fr; }
  .tg-promo-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Header Telegram button — render the brand logo in Telegram blue so it
   reads as "Telegram" at a glance, not just another icon button. */
#tgBtn svg            { color: #229ED9; }
.tg-promo-icon        { background: rgba(34,158,217,.14); color: #229ED9; }

/* Soft pulse when unlinked + not dismissed, so the icon catches the eye
   on first visits without being noisy. */
@keyframes tgPulseHint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,158,217,0); }
  50%      { box-shadow: 0 0 0 4px rgba(34,158,217,.32); }
}
#tgBtn.tg-pulse { animation: tgPulseHint 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  #tgBtn.tg-pulse { animation: none; }
}
.starter-card {
  display: flex; align-items: center; gap: 10px;
  padding: 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
  color: var(--text);
  font: 500 13px/1.45 'Geist';
  text-align: left;
  transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast);
}
.starter-card:hover {
  border-color: var(--primary);
  background: var(--bg-3);
}
.starter-card:active { transform: scale(.98); }
/* First card carries a subtle teal-tint background so the eye lands
 * on the most-likely action (a small hierarchy nudge, not a heavy
 * "primary CTA"). All cards stay equally clickable. */
.starter-card.is-primary {
  background: linear-gradient(180deg, var(--primary-tint), rgba(20,184,166,.04));
  border-color: var(--primary);
}
.starter-card.is-primary .starter-arrow {
  background: var(--primary);
  color: #fff;
}
.starter-arrow {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--primary-tint);
  color: var(--primary);
  flex-shrink: 0;
}
.starter-text { flex: 1; min-width: 0; }
.starter-card-skeleton {
  height: 56px;
  border-radius: var(--r);
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s linear infinite;
}
@keyframes skeletonShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* "Phiên gần đây" block removed — sidebar already lists every
 * session and the welcome screen is for first-touch starters. */

/* Toast rack — bottom-right stack of transient notifications. Each toast
 * slides in from the right, idles ~3.5s, slides out. Click anywhere on
 * the toast to dismiss early; the [Hoàn tác] button (when present) calls
 * back into the caller and dismisses without firing the auto-close. */
.toast-rack {
  position: fixed;
  right: 20px; bottom: 20px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: var(--z-toast);
  pointer-events: none;          /* don't block clicks on the page */
}
.toast {
  pointer-events: auto;
  min-width: 240px; max-width: 380px;
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--primary);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  font: 500 13px/1.4 'Geist';
  color: var(--text);
  display: flex; align-items: center; gap: 10px;
  animation: toastIn 180ms cubic-bezier(.22,.61,.36,1);
}
.toast.toast-ok  { border-left-color: var(--success); }
.toast.toast-err { border-left-color: var(--danger); }
.toast.toast-warn{ border-left-color: var(--warn); }
.toast .toast-icon { width: 18px; height: 18px; flex-shrink: 0; }
.toast .toast-msg  { flex: 1; min-width: 0; }
.toast .toast-action {
  background: transparent; color: var(--primary); border: 0;
  padding: 4px 8px; font: 600 12px/1 'Geist'; cursor: pointer;
  border-radius: var(--r-sm); flex-shrink: 0;
}
.toast .toast-action:hover { background: var(--primary-tint); }
.toast.leaving { animation: toastOut 160ms cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(20px); } }

/* Command palette — fuzzy-search modal triggered by Cmd+K. One bar, one
 * list, one tiny footer with hotkeys. Stack of "candidates" (sessions /
 * admin pages / quick actions) ranked by simple substring match. */
.cmdk-overlay {
  position: fixed; inset: 0;
  background: rgba(2, 6, 23, 0.55);
  backdrop-filter: blur(8px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: var(--z-modal);
  padding-top: 12vh;
}
.cmdk-overlay.on { display: flex; }
.cmdk-box {
  width: 100%; max-width: 560px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.cmdk-search {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.cmdk-search svg { width: 18px; height: 18px; color: var(--text-muted); }
.cmdk-search input {
  flex: 1; background: transparent; border: 0; outline: none; padding: 0;
  color: var(--text);
  font: 400 15px/1.4 'Geist';
}
.cmdk-search input::placeholder { color: var(--text-faint); }
.cmdk-list { max-height: 56vh; overflow-y: auto; padding: 6px; }
.cmdk-group {
  font: 700 10px/1 'Geist'; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-faint);
  padding: 10px 10px 6px;
}
.cmdk-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r);
  cursor: pointer;
  color: var(--text);
  font: 500 13.5px/1.3 'Geist';
}
.cmdk-item .cmdk-icon { width: 16px; height: 16px; opacity: .8; flex-shrink: 0; }
.cmdk-item .cmdk-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item .cmdk-hint  { font-size: 11px; color: var(--text-faint); flex-shrink: 0; }
.cmdk-item.sel, .cmdk-item:hover { background: var(--primary-tint); color: #fff; }
.cmdk-item.sel .cmdk-icon, .cmdk-item:hover .cmdk-icon { opacity: 1; }
.cmdk-foot {
  display: flex; gap: 12px; align-items: center;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  font: 400 11px/1 'Geist';
  color: var(--text-faint);
}
.cmdk-foot .kbd {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  padding: 2px 5px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--bg);
}
.cmdk-empty {
  padding: 28px 20px;
  text-align: center;
  color: var(--text-muted);
}
.cmdk-empty-ico {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--bg-3);
  color: var(--text-faint);
  margin-bottom: 12px;
}
.cmdk-empty-title { font: 600 14px/1.3 'Geist'; color: var(--text); margin-bottom: 4px; }
.cmdk-empty-hint  { font: 400 12px/1.5 'Geist'; color: var(--text-muted); max-width: 320px; margin: 0 auto; }

.cmdk-mark {
  background: rgba(20,184,166,.22);
  color: inherit;
  padding: 0;
  border-radius: 2px;
  font-weight: 700;
}

/* Nav links — small text-only tabs in admin page headers. Active state
 * uses a pill background so it pops without a layout shift on hover.
 * Below 1100px the nav row collapses icon-only to keep the header from
 * wrapping (Tài khoản / Files / Audit / Usage / Jobs / Chat = 6 items
 * with text overflow easily even on narrow laptops). Tooltips on the
 * link still give the label. */
.navlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font: 500 13px/1 'Geist';
  color: var(--text-muted);
  border-radius: var(--r);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.navlink:hover { color: var(--text); background: var(--bg-3); }
.navlink.active { color: var(--text); background: var(--primary-tint); }
.navlink .icon { width: 16px; height: 16px; opacity: .85; }
.navlink.active .icon { opacity: 1; }

/* Admin page headers — flex-wrap so a narrow viewport pushes the nav row
 * down instead of off-screen. Per-link padding shrinks under 1100px. */
/* Shared top-bar height so the chat shell (.app-header) and the admin/config/
 * workspace pages (.admin-header) line up — min-height (not fixed) keeps the
 * mobile nav-wrap free to grow. */
.admin-header { flex-wrap: wrap; row-gap: 8px; min-height: 52px; align-content: center; }
@media (max-width: 1100px) {
  .navlink { padding: 6px 9px; font-size: 12.5px; }
}
/* Mobile-first responsive for the admin SPAs. Below 768px we collapse
 * padding everywhere, force table containers to scroll horizontally,
 * and let the nav row scroll instead of wrapping into 3 lines. */
@media (max-width: 768px) {
  .admin-header        { gap: 8px; padding: 10px 12px !important; }
  .admin-header nav    { width: 100%; overflow-x: auto;
                         padding-bottom: 4px; flex-wrap: nowrap !important; }
  .admin-header nav::-webkit-scrollbar { height: 4px; }
  .page-wrap           { padding: 14px !important; }
  .page-hero-title     { font-size: 22px; }
  .page-hero           { padding: 16px 14px 12px; }
  .card                { padding: 10px; }
  .tbl-scroll          { overflow-x: auto; -webkit-overflow-scrolling: touch;
                         margin: 0 -10px; padding: 0 10px; }
  /* Native table scrolling fallback if the wrapper isn't applied. */
  .tbl { font-size: 12.5px; }
  .tbl th, .tbl td { padding: 8px 10px; white-space: nowrap; }
}

/* ── Account menu — ChatGPT-style popover ──────────────────────────────────
 * Shared by the chat sidebar foot and the top-nav pages. The trigger lives in
 * the page; the popover (.acct-pop) is appended to <body> and positioned with
 * fixed coords by account.js, so it never clips or nests. */

/* Top-right cluster on nav pages: theme toggle + avatar, fixed so header
 * flex-wrap can't push it off. Reserve right padding on the header so nav
 * links never slide under the cluster. */
.acct-cluster { position: fixed; top: 8px; right: 14px; z-index: 60;
                display: flex; align-items: center; gap: 8px; }
header.admin-header { padding-right: 140px; }
.acct-iconbtn { width: 34px; height: 34px; border-radius: 9px;
                border: 1px solid var(--border); background: var(--bg-2);
                color: var(--text); cursor: pointer; display: inline-flex;
                align-items: center; justify-content: center;
                transition: background var(--t), border-color var(--t); }
.acct-iconbtn:hover { background: var(--bg-3); }

.acct-trigger { display: inline-flex; align-items: center; gap: 6px; height: 36px;
                padding: 3px 8px 3px 3px; border-radius: var(--r-pill);
                background: var(--bg-2); border: 1px solid var(--border);
                color: var(--text-muted); cursor: pointer;
                transition: background var(--t), border-color var(--t), color var(--t); }
.acct-trigger:hover { background: var(--bg-3); color: var(--text); }
.acct-trigger .acct-ic { display: inline-flex; }

.acct-ava { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
            display: grid; place-items: center; font-weight: 700; font-size: 13px;
            color: #fff; text-transform: uppercase;
            background: linear-gradient(135deg, var(--primary), var(--primary-d)); }

.acct-pop { position: fixed; width: 248px; padding: 6px; z-index: 70;
            background: var(--bg-elev); border: 1px solid var(--border);
            border-radius: var(--r-lg); box-shadow: var(--e3);
            animation: acct-in var(--t-fast) var(--ease); }
.acct-pop[hidden] { display: none; }
@keyframes acct-in { from { opacity: 0; transform: translateY(-4px); }
                     to   { opacity: 1; transform: none; } }
.acct-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; }
.acct-head .acct-ava { width: 38px; height: 38px; font-size: 15px; }
.acct-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.acct-name { font-weight: 600; font-size: 13.5px; color: var(--text);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-sub { font-size: 11.5px; color: var(--text-muted);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-sep { height: 1px; background: var(--border); margin: 5px 6px; }
.acct-item { display: flex; align-items: center; gap: 10px; width: 100%;
             padding: 8px 10px; border: 0; border-radius: var(--r);
             background: transparent; color: var(--text); font-size: 13px;
             text-align: left; text-decoration: none; cursor: pointer;
             transition: background var(--t-fast), color var(--t-fast); }
.acct-item:hover { background: var(--bg-3); }
.acct-item .acct-ic { flex: 0 0 auto; display: inline-flex; color: var(--text-muted); }
.acct-item.is-danger { color: var(--danger); }
.acct-item.is-danger:hover { background: var(--danger-tint); }
.acct-item.is-danger .acct-ic { color: var(--danger); }

/* Settings drawer — right-slide panel replacing the old profile modal.
 * Sections: account / password / display / shortcuts / usage. Sits at
 * `z-drawer` (40), scrim at `z-drawer - 1`. On mobile takes the full
 * viewport width minus a small inset; on desktop caps at 380px. */
.settings-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: calc(var(--z-drawer) - 1);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t) var(--ease);
}
.settings-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(380px, 92vw);
  background: var(--bg-elev);
  border-left: 1px solid var(--border);
  box-shadow: var(--e3);
  z-index: var(--z-drawer);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t) var(--ease);
}
body.has-settings .settings-drawer { transform: translateX(0); }
body.has-settings .settings-scrim  { opacity: 1; pointer-events: auto; }

/* Generic right-side drawer pane + scrim — shared by .notif-drawer
   and any other future right-slide panels. The settings drawer keeps
   its own legacy classes for back-compat. */
.drawer-pane {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(380px, 92vw);
  background: var(--bg-elev);
  border-left: 1px solid var(--border);
  box-shadow: var(--e3);
  z-index: var(--z-drawer);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t) var(--ease);
}
.drawer-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: calc(var(--z-drawer) - 1);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t) var(--ease);
}

/* Notification drawer — wider than the settings one because reminder
   bodies render markdown-prose. */
.notif-drawer { width: min(440px, 92vw); }
body.has-notif #notifDrawer { transform: translateX(0); }
body.has-notif #notifScrim  { opacity: 1; pointer-events: auto; }
/* Counter shown in the drawer header next to the title (e.g. "3 chưa đọc"). */
.notif-counter {
  font: 500 11px/1 'Geist';
  color: var(--text-faint);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--bg-3);
  margin-right: auto;
}
.sd-header {
  display: flex; align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.sd-title { font: 700 15px/1 'Geist'; margin: 0; flex: 1; }
.sd-body  { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 18px; }
.sd-section {
  display: flex; flex-direction: column; gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.sd-section:last-child { border-bottom: 0; padding-bottom: 0; }
.sd-label {
  font: 600 10.5px/1 'Geist';
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.sd-row   { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.sd-row .input { flex: 1; }
.sd-hint  { font: 400 12px/1.5 'Geist'; color: var(--text-muted); min-height: 1.2em; }
.sd-toggle {
  display: grid; grid-template-columns: 18px 1fr;
  column-gap: 10px; row-gap: 2px;
  align-items: center;
  padding: 8px 0;
  cursor: pointer;
}
.sd-toggle input { grid-row: 1; }
.sd-toggle > span { grid-row: 1; font: 500 13px/1 'Geist'; color: var(--text); }
.sd-toggle-hint   { grid-column: 2; grid-row: 2; font: 400 11.5px/1.4 'Geist'; color: var(--text-muted); }
.sd-skills-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.sd-skill {
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px;
  background: var(--bg-1);
}
.sd-skill-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sd-kbd { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 12.5px; color: var(--text-muted); }
.sd-kbd dt { margin: 0; }
.sd-kbd dd { margin: 0; }
.sd-kbd code {
  font-family: 'Geist Mono', monospace;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  color: var(--text);
}

/* Density preference — applied via body.density-compact. Tightens the
 * messages gap so more turns fit on screen at once. */
body.density-compact .messages { gap: 14px; }
body.density-compact .ai-msg-content { font-size: 13.5px; line-height: 1.55; }
body.density-compact .msg-user .bubble { padding: 8px 12px; }

/* Optional user-forced reduce motion (mirrors prefers-reduced-motion). */
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}

/* Dialog/modal overlay — used by admin.html editor + index.html profile. */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.62);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
}
.overlay.on { display: flex; }
.overlay .dialog {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  width: 100%;
  max-width: 460px;
  margin: 16px;
  box-shadow: var(--shadow-lg);
}

/* Tiny utilities used across pages */
.text-muted { color: var(--text-muted); }
.text-faint { color: var(--text-faint); }
.divider    { height: 1px; background: var(--border); margin: 14px 0; }
.row        { display: flex; gap: 10px; align-items: center; }
.row > .grow { flex: 1; min-width: 0; }
.spinner-dot {
  display: inline-block;
  width: 6px; height: 6px; margin: 0 1px;
  background: var(--text-muted);
  border-radius: var(--r-pill);
  animation: dots 1.2s infinite ease-in-out both;
}
.spinner-dot:nth-child(2){ animation-delay: .15s; }
.spinner-dot:nth-child(3){ animation-delay: .30s; }
@keyframes dots { 0%, 80%, 100% { opacity: .25 } 40% { opacity: 1 } }

/* Spinning icon for loading buttons (send-while-streaming, etc.). Use
 * `.icon.spin` on the SVG element. transform-origin: center is implicit
 * for SVGs sized with width/height. */
.icon.spin { animation: spin 0.9s linear infinite; transform-origin: 50% 50%; }
@keyframes spin { to { transform: rotate(360deg); } }