@layer base, components, utilities;

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: dark; }
  html[data-theme="light"] { color-scheme: light; }
  body { margin: 0; background: var(--bg); color: var(--text-2); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
  a { color: var(--accent); text-decoration: none; }
  h1, h2, h3 { color: var(--text-1); letter-spacing: -0.01em; }
  :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
}

@layer components {
  /* ============================================================
     Shell — app grid: fixed sidebar + fluid main (Tokyo Night)
     ============================================================ */
  .app { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 100dvh; }

  /* ---- Sidebar (left rail) ---- */
  .sidebar { position: sticky; top: 0; align-self: start; height: 100dvh;
    display: flex; flex-direction: column; gap: 2px;
    padding: 14px 11px; background: var(--bg-sidebar); border-right: 1px solid var(--border); }
  .sidebar nav { display: flex; flex-direction: column; gap: 2px; }

  .brand { display: flex; align-items: center; gap: 9px; padding: 4px 7px 14px;
    font-weight: 700; color: var(--text-1); font-size: 14px; letter-spacing: -0.01em; }
  .brand-glyph { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 7px;
    background: linear-gradient(145deg, var(--accent), var(--accent-2));
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--accent-contrast); font-weight: 800; font-size: 12px; }
  .brand-avatar { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, var(--accent), var(--accent-2));
    color: var(--accent-contrast); font-weight: 700; font-size: 18px; line-height: 1; }
  .env { margin-left: auto; font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em;
    color: var(--ok-text); background: var(--ok-bg);
    border: 1px solid var(--ok-strong); padding: 1px 6px; border-radius: 5px; }

  .nav-sec { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-3); padding: 13px 8px 5px; }
  .nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 9px;
    border-radius: var(--radius-control); font-size: 12.5px; color: var(--text-2);
    box-shadow: inset 2px 0 0 transparent; transition: background-color 0.12s, color 0.12s; }
  .nav-item .ico { width: 16px; height: 16px; color: var(--text-3); flex: 0 0 auto; }
  .nav-item:hover { background: var(--nav-hover); color: var(--text-1); }
  .nav-item.is-active { background: var(--accent-bg); color: var(--text-1); font-weight: 600;
    box-shadow: inset 2px 0 0 var(--accent); }
  .nav-item.is-active .ico { color: var(--accent); }
  .nav-soon { margin-left: auto; font-size: 9px; color: var(--accent-2);
    border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent);
    border-radius: 5px; padding: 0 5px; letter-spacing: 0.03em; }
  /* A feature-locked nav item: muted, still visible, links to the upgrade page (PRO chip). */
  .nav-item.nav-locked { opacity: 0.55; }
  .nav-item.nav-locked:hover { opacity: 0.8; }

  .sidebar-foot { margin-top: auto; display: flex; align-items: center; gap: 9px;
    padding: 11px 9px 2px; margin-top: 14px; border-top: 1px solid var(--border);
    font-size: 12px; color: var(--text-2); }
  .sidebar-foot .ico { width: 16px; height: 16px; color: var(--text-3); }
  .sidebar-foot:hover { color: var(--text-1); }

  /* ---- Main column ---- */
  .main { display: flex; flex-direction: column; min-width: 0; }
  .topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px;
    padding: 13px 18px; background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
  .title-wrap { min-width: 0; }
  .topbar h1 { margin: 0; font-size: 16px; font-weight: 650; color: var(--text-1); letter-spacing: -0.01em; }
  .crumb { font-size: 11.5px; color: var(--text-3); margin-top: 2px; font-family: var(--font-mono); }
  .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

  .content { flex: 1; padding: 18px; display: flex; flex-direction: column; gap: 15px;
    max-width: var(--shell-max); width: 100%; }
  .content > h3 { margin: 8px 0 0; font-size: 13px; font-weight: 600; }
  .content > p { margin: 0; }
  .content > p small { color: var(--text-3); }

  /* ============================================================
     Buttons — primary / secondary / danger / ghost (tokyo-buttons)
     ============================================================ */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 13px; font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2;
    white-space: nowrap; border: 1px solid transparent; border-radius: var(--radius-control);
    background: var(--surface-2); color: var(--text-1); cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s, opacity 0.12s; }
  .btn .ico { width: 14px; height: 14px; }
  .btn:hover { border-color: var(--border-strong); }
  .btn:active { transform: translateY(0.5px); }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

  .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
  .btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, white); border-color: color-mix(in srgb, var(--accent) 88%, white); }
  .btn-secondary { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-1); }
  .btn-secondary:hover { border-color: var(--accent); }
  .btn-danger { background: var(--bad-bg); border-color: transparent; color: var(--bad-text); }
  .btn-danger:hover { background: color-mix(in srgb, var(--bad) 26%, transparent); }
  .btn-ghost { background: transparent; border-color: transparent; color: var(--text-3); padding: 7px 9px; }
  .btn-ghost:hover { background: var(--surface-2); color: var(--text-1); border-color: transparent; }

  .btn-sm { padding: 5px 11px; font-size: 12px; }
  .btn-md { padding: 8px 14px; font-size: 13px; }
  .btn-ic { display: inline-flex; align-items: center; justify-content: center;
    padding: 0; width: 28px; height: 28px; flex: 0 0 auto;
    background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-control); color: var(--text-3); }
  .btn-ic .ico { width: 15px; height: 15px; display: block; }
  .btn-ic:hover { color: var(--text-1); border-color: var(--accent); }

  /* ============================================================
     Status — badge / pill / dot tones + platform + icon
     ============================================================ */
  .badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
    border-radius: var(--radius-pill); font-size: 12px; font-weight: 500;
    background: var(--surface-2); color: var(--text-2); }
  .badge.tone-ok { background: var(--ok-bg); color: var(--ok-text); }
  .badge.tone-warn { background: var(--warn-bg); color: var(--warn-text); }
  .badge.tone-bad { background: var(--bad-bg); color: var(--bad-text); }
  .badge.tone-info { background: var(--info-bg); color: var(--info); }
  .badge.tone-neutral { background: var(--surface-2); color: var(--text-2); }
  /* BRANDLIMIT1: locked-brand upsell badge + dimmed card (still readable, clearly inactive). */
  .badge.badge-locked { background: var(--warn-bg); color: var(--warn-text); text-decoration: none; cursor: pointer; }
  .badge.badge-locked:hover { filter: brightness(1.1); }
  .brand-card.brand-locked { opacity: 0.62; }
  .brand-card.brand-locked:hover { opacity: 0.82; }

  .pill { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: var(--radius-pill);
    font-size: 10px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
    background: var(--surface-2); color: var(--text-2); }
  .pill.tone-ok { background: var(--ok-bg); color: var(--ok-text); }
  .pill.tone-warn { background: var(--warn-bg); color: var(--warn-text); }
  .pill.tone-bad { background: var(--bad-bg); color: var(--bad-text); }
  .pill.tone-info { background: var(--info-bg); color: var(--info); }
  .pill.tone-neutral { background: var(--surface-2); color: var(--text-2); }

  .dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; display: inline-block;
    background: var(--text-3); }
  .dot.tone-ok { background: var(--ok); }
  .dot.tone-warn { background: var(--warn); }
  .dot.tone-bad { background: var(--bad); }
  .dot.tone-info { background: var(--info); }
  .dot.tone-neutral { background: var(--text-3); }

  .platform { display: inline-flex; align-items: center; gap: 7px; color: var(--text-1); font-weight: 500; }
  .platform svg { display: block; flex: 0 0 auto; }
  .ico { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

  /* ============================================================
     Tables — card-like panel, hairline rows, mono code
     ============================================================ */
  .table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border);
    border-radius: var(--radius-card); background: var(--surface); }
  .table-wrap table { border: 0; border-radius: 0; }

  table { width: 100%; border-collapse: collapse; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
  thead th { text-align: left; padding: 10px 14px; font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3);
    background: color-mix(in srgb, var(--surface-2) 40%, transparent);
    border-bottom: 1px solid var(--border); white-space: nowrap; }
  tbody td { padding: 11px 14px; font-size: 13px; color: var(--text-2);
    border-top: 1px solid var(--border); vertical-align: middle; }
  tbody tr:first-child td { border-top: 0; }
  tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 28%, transparent); }
  td code { font-size: 12px; font-family: var(--font-mono); color: var(--text-2);
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; }
  td small { color: var(--text-3); }

  /* Row actions: small secondary (`.act`) / ghost (`.act.outline`) buttons */
  a[role="button"].act { display: inline-flex; align-items: center; width: auto; margin: 0;
    padding: 5px 11px; font-size: 12px; font-weight: 600; line-height: 1.2;
    border: 1px solid var(--border-strong); border-radius: var(--radius-control);
    background: var(--surface-2); color: var(--text-1);
    transition: background-color 0.12s, border-color 0.12s; }
  a[role="button"].act:hover { border-color: var(--accent); }
  a[role="button"].act.outline { background: transparent; color: var(--text-3); }
  a[role="button"].act.outline:hover { color: var(--text-1); border-color: var(--accent); }

  /* ============================================================
     Forms — dark inputs + focus ring (connect forms)
     ============================================================ */
  form { display: flex; flex-direction: column; gap: 10px; max-width: 460px;
    padding: 16px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-card); }
  form input { width: 100%; padding: 9px 12px; font: inherit; font-size: 13px;
    color: var(--text-1); background: var(--bg);
    border: 1px solid var(--border-strong); border-radius: var(--radius-control); }
  /* The blanket `form input { width:100% }` above is meant for text inputs. Checkboxes/radios must
     NEVER stretch — a 100%-wide checkbox shoves its label to the far right (and staggers radio rows).
     Reset them globally instead of per-context (.chk-inline/.evt-opt/.theme-opt did this piecemeal).
     Lower specificity than .compose-toggle's switch + .accent-field's colour swatch, so those win. */
  form input[type="checkbox"], form input[type="radio"] { width: auto; flex: 0 0 auto; padding: 0; accent-color: var(--accent); }
  form input::placeholder { color: var(--text-3); }
  form input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--ring); }
  form button[type="submit"], form button:not([class]) { align-self: flex-start; }
  form button { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap;
    border: 1px solid var(--accent); border-radius: var(--radius-control);
    background: var(--accent); color: var(--accent-contrast); cursor: pointer;
    transition: background-color 0.12s; }
  form button:hover { background: color-mix(in srgb, var(--accent) 88%, white); border-color: color-mix(in srgb, var(--accent) 88%, white); }

  /* ============================================================
     Login — centered card, dark + minimal
     ============================================================ */
  .auth-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px;
    background:
      radial-gradient(420px 200px at 50% -40px, var(--accent-bg), transparent),
      var(--bg); }
  .auth-card { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
    padding: 28px; }
  .auth-card h1 { margin: 0 0 4px; font-size: 18px; }
  .auth-card input { width: 100%; padding: 10px 12px; font: inherit; color: var(--text-1);
    background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-control); }
  .auth-card input::placeholder { color: var(--text-3); }
  .auth-card input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--ring); }
  .auth-card .btn { width: 100%; padding: 10px 14px; font-size: 13px; }
  .auth-error { margin: 0; padding: 8px 12px; font-size: 13px; border-radius: var(--radius-control);
    color: var(--bad-text); background: var(--bad-bg); }

  /* ---- Toasts (Alpine store → HX-Trigger driven, auto-dismiss, not focus-stealing) ---- */
  [x-cloak] { display: none !important; }
  .toasts { position: fixed; right: 16px; bottom: 16px; z-index: 50;
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
    max-width: min(360px, calc(100vw - 32px)); }
  .toast { pointer-events: auto; display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; font-size: 12.5px; color: var(--text-1);
    background: var(--overlay); border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--accent-contrast) 60%, transparent);
    border-left: 3px solid var(--text-3); }
  .toast.tone-ok { border-left-color: var(--ok); }
  .toast.tone-warn { border-left-color: var(--warn); }
  .toast.tone-bad { border-left-color: var(--bad); }
  .toast.tone-info { border-left-color: var(--info); }
  .toast-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--text-3); }
  .toast-dot.tone-ok { background: var(--ok); }
  .toast-dot.tone-warn { background: var(--warn); }
  .toast-dot.tone-bad { background: var(--bad); }
  .toast-dot.tone-info { background: var(--info); }
  .toast-msg { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
  .toast-x { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; cursor: pointer;
    background: transparent; color: var(--text-3); }
  .toast-x:hover { color: var(--text-1); background: var(--surface-2); }
  .toast-x .ico { width: 13px; height: 13px; }

  /* ---- Styled confirm dialog (replaces native confirm() on destructive HTMX actions) ---- */
  .confirm-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
    padding: 24px; background: color-mix(in srgb, var(--bg) 70%, transparent);
    backdrop-filter: blur(3px); }
  .confirm-card { width: 100%; max-width: 400px; padding: 20px;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    box-shadow: 0 24px 60px -20px color-mix(in srgb, var(--accent-contrast) 70%, transparent); }
  .confirm-title { margin: 0 0 8px; font-size: 15px; font-weight: 650; color: var(--text-1); }
  .confirm-body { margin: 0 0 18px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
  .confirm-acts { display: flex; justify-content: flex-end; gap: 8px; }

  /* ---- ⌘K command palette (Alpine overlay, focus-trapped, type-to-filter) ---- */
  .cmdk-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 6px 9px;
    font: inherit; font-size: 12px; color: var(--text-3); cursor: pointer;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--radius-control); transition: border-color 0.12s, color 0.12s; }
  .cmdk-trigger:hover { color: var(--text-1); border-color: var(--accent); }
  .cmdk-trigger .ico { color: var(--text-3); }
  .cmdk-trigger-label { font-weight: 500; }
  .cmdk-kbd { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3);
    background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; }

  .cmdk { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: center;
    align-items: flex-start; padding: 14vh 24px 24px;
    background: color-mix(in srgb, var(--bg) 68%, transparent); backdrop-filter: blur(3px); }
  .cmdk-panel { width: 100%; max-width: 540px; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    box-shadow: 0 28px 70px -22px color-mix(in srgb, var(--accent-contrast) 75%, transparent); }
  .cmdk-search { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
    border-bottom: 1px solid var(--border); }
  .cmdk-search .ico { color: var(--text-3); flex: 0 0 auto; }
  .cmdk-search input { flex: 1 1 auto; min-width: 0; padding: 2px 0; font: inherit; font-size: 14px;
    color: var(--text-1); background: transparent; border: 0; outline: none; }
  .cmdk-search input::placeholder { color: var(--text-3); }
  .cmdk-list { list-style: none; margin: 0; padding: 6px; max-height: 46vh; overflow-y: auto; }
  .cmdk-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px;
    border-radius: var(--radius-control); cursor: pointer; color: var(--text-2); }
  .cmdk-item.is-active { background: var(--accent-bg); color: var(--text-1); }
  .cmdk-label { font-size: 13px; font-weight: 500; color: var(--text-1); }
  .cmdk-hint { margin-left: auto; font-size: 11px; font-family: var(--font-mono); color: var(--text-3); }
  .cmdk-empty { padding: 16px 12px; text-align: center; font-size: 12.5px; color: var(--text-3); }

  /* ---- Mobile bottom nav (hidden on desktop, shown < 1024) ---- */
  .mobile-nav { display: none; }

  /* ============================================================
     Dashboard — KPI row, attention hero, upcoming + activity feeds
     ============================================================ */

  /* Ambient accent glow behind the KPI row (atmosphere, not chrome). */
  .dash-glow { position: absolute; top: 0; left: 96px; width: 380px; height: 168px;
    background: radial-gradient(closest-side, var(--accent), transparent);
    opacity: 0.1; filter: blur(48px); pointer-events: none; }
  .content { position: relative; }

  /* ---- KPI cards ---- */
  .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; position: relative; }
  .kpi { display: block; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 13px 14px; color: inherit;
    transition: border-color 0.12s, background-color 0.12s; }
  a.kpi:hover { border-color: var(--border-strong); background: var(--overlay); }
  .kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
  .kpi-n { font-family: var(--font-mono); font-size: 27px; font-weight: 600; line-height: 1;
    letter-spacing: -0.03em; color: var(--text-1);
    font-variant-numeric: tabular-nums; font-feature-settings: "zero" 0; }
  .kpi-n.tone-ok { color: var(--ok); }
  .kpi-n.tone-warn { color: var(--warn); }
  .kpi-n.tone-bad { color: var(--bad); }
  .kpi-n.tone-info { color: var(--accent); }
  .kpi-n.tone-neutral { color: var(--text-1); }
  .kpi-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); padding-top: 2px; }
  .kpi-l { display: flex; align-items: center; gap: 6px; margin-top: 9px;
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); }

  /* ---- Panels (shared shell for attention / upcoming / activity) ---- */
  .panel { background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-card); overflow: hidden; }
  .panel-span { position: relative; }
  .panel-head { display: flex; align-items: center; gap: 9px; padding: 11px 14px;
    border-bottom: 1px solid var(--border); }
  .panel-head h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-1); }
  .panel-count { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3);
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; }
  .panel-more { margin-left: auto; font-size: 11.5px; color: var(--accent); }
  .panel-more:hover { text-decoration: underline; }

  /* "Live" pulse dot — marks the auto-refreshing region. Animation off under reduced-motion (global). */
  .live-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--ok);
    box-shadow: 0 0 0 0 var(--ok-strong); animation: live-pulse 2.4s ease-out infinite; }
  @keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 var(--ok-strong); }
    70% { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }

  /* ---- Needs-attention rows ---- */
  .attn-row { display: flex; align-items: center; gap: 11px; padding: 11px 14px;
    border-top: 1px solid var(--border); font-size: 13px; }
  .attn-row:first-child { border-top: 0; }
  .attn-title { font-weight: 600; color: var(--text-1); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .attn-acts { margin-left: auto; display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }

  /* ---- Two-column feed grid (upcoming + activity) ---- */
  .dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; }

  /* ---- Upcoming feed ---- */
  .up-row { display: flex; align-items: center; gap: 11px; padding: 10px 14px;
    border-top: 1px solid var(--border); font-size: 12.5px; }
  .up-row:first-child { border-top: 0; }
  .up-time { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent);
    flex: 0 0 auto; min-width: 46px; }
  .up-title { color: var(--text-1); font-weight: 500; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .up-channel { margin-left: auto; color: var(--text-3); font-size: 11.5px;
    flex: 0 0 auto; white-space: nowrap; }

  /* ---- Recent-activity feed ---- */
  .feed-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px;
    border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-2); }
  .feed-row:first-child { border-top: 0; }
  .feed-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .feed-type { color: var(--text-1); font-weight: 500; }
  .feed-detail { font-size: 11px; color: var(--text-3); font-family: var(--font-mono);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34ch; }
  .feed-subject { font-family: var(--font-mono); font-size: 11px; color: var(--text-3);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .feed-time { margin-left: auto; font-family: var(--font-mono); font-size: 11px;
    color: var(--text-3); flex: 0 0 auto; }

  /* ---- Empty state (calm "all healthy" placeholder) ---- */
  .empty { display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 30px 18px; text-align: center; }
  .empty-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-1); }
  .empty-body { margin: 0; font-size: 12.5px; color: var(--text-3); max-width: 320px; }
  .empty .btn { margin-top: 6px; }

  /* ============================================================
     Channels list — counts bar, filter toolbar, sortable table
     ============================================================ */

  /* ---- Counts bar (status chips + per-platform breakdown) ---- */
  .counts-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; }
  .counts-status { display: flex; flex-wrap: wrap; gap: 7px; }
  .count-chip { display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px 3px 7px; border: 1px solid var(--border); border-radius: var(--radius-pill);
    background: var(--surface); transition: border-color 0.12s, background-color 0.12s; }
  .count-chip:hover { border-color: var(--border-strong); }
  .count-chip.is-on { border-color: var(--accent); background: var(--accent-bg); }
  .count-chip .count-n { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
    color: var(--text-1); }
  .counts-plat { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto;
    font-size: 11.5px; }
  .count-plat { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
    border-radius: var(--radius-pill); color: var(--text-3);
    border: 1px solid transparent; transition: color 0.12s, border-color 0.12s; }
  .count-plat:hover { color: var(--text-1); }
  .count-plat b { font-family: var(--font-mono); font-weight: 600; color: var(--text-2); }
  .count-plat.is-on { color: var(--text-1); border-color: var(--accent);
    background: var(--accent-bg); }

  /* ---- Filter toolbar (GET form, URL-driven) ---- */
  .filter-bar { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 9px;
    max-width: none; padding: 10px 12px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-card); }
  .filter-search { position: relative; flex: 1 1 230px; min-width: 180px; display: flex; align-items: center; }
  .filter-search .ico { position: absolute; left: 11px; color: var(--text-3); pointer-events: none; }
  .filter-search input { width: 100%; padding-left: 32px; }
  .filter-bar select { padding: 9px 12px; font: inherit; font-size: 12.5px; color: var(--text-1);
    background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-control);
    cursor: pointer; }
  .filter-bar select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--ring); }
  .filter-bar .btn { align-self: auto; }
  .filter-clear { font-size: 12px; color: var(--text-3); padding: 0 4px; }
  .filter-clear:hover { color: var(--text-1); }

  /* ---- Sortable column headers ---- */
  .th-sort { display: inline-flex; align-items: center; gap: 5px; color: inherit;
    font: inherit; letter-spacing: inherit; text-transform: inherit; }
  .th-sort:hover { color: var(--text-1); }
  thead th[aria-sort] .th-sort { color: var(--accent); }
  .th-arrow { font-family: var(--font-mono); font-size: 11px; }
  .th-act { text-align: right; }

  /* ---- Row links + mode tag + empty row ---- */
  .row-link { color: inherit; display: inline-flex; }
  .row-link.row-name { font-weight: 500; color: var(--text-1); }
  tbody tr:hover .row-link.row-name { color: var(--accent); }
  .mode-tag { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); }
  .table-empty { text-align: center; color: var(--text-3); padding: 26px 14px; }
  tbody td.th-act, td[data-label="Action"] { text-align: right; }

  /* ============================================================
     Channel detail — header, token/rate panels, recent feeds
     ============================================================ */

  /* ---- Header: identity + status + action bar ---- */
  .detail-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 16px 18px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-card); position: relative; overflow: hidden; }
  /* A thin tinted edge keyed to the channel's status — quiet, not chrome. */
  .detail-head::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; }
  .detail-head.tone-edge-ok::before { background: var(--ok); }
  .detail-head.tone-edge-warn::before { background: var(--warn); }
  .detail-head.tone-edge-bad::before { background: var(--bad); }
  .detail-head.tone-edge-neutral::before { background: var(--text-3); }
  .detail-head.tone-edge-info::before { background: var(--info); }
  .detail-id { display: flex; align-items: center; gap: 13px; min-width: 0; }
  .detail-glyph { display: inline-flex; align-items: center; gap: 8px; }
  .detail-glyph .platform { gap: 0; }
  .detail-glyph .platform svg { width: 26px; height: 26px; }
  .detail-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
    border: 1px solid var(--border-strong); background: var(--surface-2); }
  .detail-name { min-width: 0; }
  .detail-name h2 { margin: 0 0 4px; font-size: 18px; font-weight: 650; color: var(--text-1);
    letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .detail-sub { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
  .ch-rename { margin-top: 8px; }
  .ch-rename > summary { cursor: pointer; color: var(--text-3); font-size: 0.8rem; width: max-content; }
  .ch-rename > summary:hover { color: var(--text-1); }
  .ch-rename-form { display: flex; gap: 8px; margin-top: 7px; align-items: center; }
  .ch-rename-form input { padding: 7px 10px; font: inherit; font-size: 0.84rem; min-width: 240px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--bg); color: var(--text-1); }
  .detail-acct { font-size: 11.5px; font-family: var(--font-mono); color: var(--text-3);
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; }
  .detail-handle { font-size: 11.5px; font-family: var(--font-mono); color: var(--accent);
    background: transparent; border: none; padding: 0; }

  /* ---- Action bar (POST→redirect forms; native confirm for disable) ---- */
  .action-bar { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .action-bar form { flex-direction: row; max-width: none; padding: 0; background: transparent;
    border: 0; border-radius: 0; }

  /* ---- Two-up panel grid (token+rate, then posts+events) ---- */
  .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

  /* ---- Definition list inside panels ---- */
  .meta-list { margin: 0; padding: 4px 0; }
  .meta-row { display: flex; align-items: baseline; gap: 12px; padding: 9px 16px;
    border-top: 1px solid var(--border); }
  .meta-row:first-child { border-top: 0; }
  .meta-row dt { flex: 0 0 110px; font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-3); }
  .meta-row dd { margin: 0; min-width: 0; display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; color: var(--text-2); }
  .meta-mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-1); }
  .token-mask { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em;
    color: var(--text-3); background: var(--bg); border: 1px solid var(--border);
    border-radius: 6px; padding: 2px 9px; }
  .reason { color: var(--warn-text); font-size: 12.5px; }

  /* ---- Recent posts + event rows ---- */
  .rec-row { display: flex; align-items: center; gap: 11px; padding: 9px 16px;
    border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-2); }
  .rec-row:first-child { border-top: 0; }
  .rec-row:hover { background: color-mix(in srgb, var(--surface-2) 28%, transparent); }
  .rec-time { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3);
    flex: 0 0 auto; min-width: 56px; }
  .rec-fmt { color: var(--text-1); font-weight: 500; flex: 1 1 auto; }
  .rec-empty { padding: 22px 16px; text-align: center; color: var(--text-3); }

  /* ============================================================
     Queue — list cells (time, channel, attempts, error) + inline actions
     ============================================================ */
  .q-time { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.25; }
  .q-rel { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent); }
  .q-abs { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); }
  /* Channel cell: platform icon+label, then the channel name, separated. */
  .q-chcell { align-items: center; gap: 8px; }
  .q-chcell .platform { color: var(--text-3); font-weight: 500; }
  .row-link .q-ch { color: var(--text-1); font-weight: 500; }
  .row-link .q-ch::before { content: "·"; margin-right: 8px; color: var(--text-3); font-weight: 400; }
  tbody tr:hover .row-link .q-ch { color: var(--accent); }
  .q-fmt { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
  .q-att { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-1); }
  .q-att-zero { color: var(--text-3); }
  /* Last-error: clamp to one line; full text is in the title attribute. */
  .q-err { display: block; max-width: 30ch; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: var(--bad-text); font-size: 12px; }
  /* Inline row-action form: shed the card chrome the global form rule applies. */
  .q-inline { display: inline-flex; flex-direction: row; max-width: none; margin: 0;
    padding: 0; background: transparent; border: 0; border-radius: 0; }

  /* ---- Post detail: payload, media preview, error panel ---- */
  .panel-body { padding: 4px 0; }
  .panel-body.media-list { padding: 12px 16px; }
  .panel-error { border-color: var(--bad-strong); }
  .panel-error .panel-head { border-bottom-color: var(--bad-strong); }
  .q-err-full { margin: 0; padding: 12px 16px; color: var(--bad-text); font-size: 12.5px;
    font-family: var(--font-mono); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

  /* Pretty-printed JSON payload (escaped via hono/html). */
  .payload { margin: 0; padding: 14px 16px; overflow-x: auto; font-family: var(--font-mono);
    font-size: 12px; line-height: 1.55; color: var(--text-2); background: var(--bg);
    border-top: 1px solid var(--border); white-space: pre; }

  /* Media preview tiles. */
  .media-list { display: flex; flex-wrap: wrap; gap: 12px; }
  .media-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px;
    border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--bg); }
  .media-thumb { width: 44px; height: 60px; object-fit: cover; flex: 0 0 auto;
    border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); }
  .media-thumb-video { display: flex; align-items: center; justify-content: center;
    color: var(--text-3); font-size: 16px; }
  .media-meta { display: flex; flex-direction: column; gap: 4px; }
  .media-kind { color: var(--text-1); font-weight: 500; font-size: 12.5px; text-transform: capitalize; }
  .media-kind .mode-tag { text-transform: none; }
  .media-dims { display: flex; gap: 10px; }
  .media-dims .meta-mono { font-size: 11.5px; color: var(--text-3); }

  /* ============================================================
     Webhooks — endpoints table, secret chip, inline edit, deliveries
     ============================================================ */
  .page-intro { margin: 0 0 14px; }
  .page-intro small { color: var(--text-3); line-height: 1.55; }
  /* Stack the webhooks page panels with the same rhythm as detail grids. */
  .content > .panel + .panel { margin-top: 14px; }

  /* Endpoint row: a thin status edge (active = ok, paused = neutral) like detail heads. */
  .wh-row { position: relative; }
  .wh-row > td:first-child { position: relative; padding-left: 16px; }
  .wh-row > td:first-child::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; }
  .wh-row.tone-edge-ok > td:first-child::before { background: var(--ok); }
  .wh-row.tone-edge-neutral > td:first-child::before { background: var(--text-3); }
  .wh-url { display: flex; align-items: center; gap: 8px; }
  .wh-url code { font-size: 12.5px; color: var(--text-1); word-break: break-all; }

  /* Pills wrap (an endpoint can subscribe to many event types). */
  .pill-row { display: inline-flex; flex-wrap: wrap; gap: 4px; }

  /* Last-error note under a degraded-but-active channel: a pill + reason, spaced off the meta rows. */
  .ch-last-error { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

  /* Signing secret: viewable mono chip — the receiver needs it to verify signatures. */
  .secret-chip { display: inline-block; max-width: 30ch; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; vertical-align: middle; font-family: var(--font-mono); font-size: 11.5px;
    letter-spacing: 0.02em; color: var(--text-2); }

  /* Per-row action cluster (Rotate / Delete): inline, no card chrome. */
  .wh-actions { display: inline-flex; gap: 7px; flex-wrap: wrap; }
  .wh-actions form { flex-direction: row; max-width: none; margin: 0; padding: 0;
    background: transparent; border: 0; border-radius: 0; }

  /* Inline edit: a disclosure that opens a real form below the URL. */
  .row-edit { margin-top: 7px; }
  .row-edit > summary { display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    list-style: none; font-size: 11.5px; font-weight: 600; color: var(--text-3);
    width: max-content; user-select: none; }
  .row-edit > summary::-webkit-details-marker { display: none; }
  .row-edit > summary:hover { color: var(--accent); }
  .row-edit[open] > summary { color: var(--accent); margin-bottom: 9px; }
  .row-edit .ico { color: inherit; }

  /* Shared form scaffold for the create + inline-edit forms (overrides the card .form rule lightly). */
  .stack-form { max-width: 520px; gap: 13px; }
  .row-edit .stack-form { padding: 0; background: transparent; border: 0; }
  .fld { display: flex; flex-direction: column; gap: 5px; }
  .fld > span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-3); font-weight: 600; }
  .chk-inline { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
  .chk-inline input { width: auto; }

  /* Event-type checkbox grid. */
  .evt-grid { margin: 0; padding: 0; border: 0; display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 14px; }
  .evt-grid legend { padding: 0 0 6px; font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-3); font-weight: 600; }
  .evt-grid legend small { text-transform: none; letter-spacing: 0; color: var(--text-3);
    font-weight: 400; }
  .evt-opt { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono);
    font-size: 12px; color: var(--text-2); }
  .evt-opt input { width: auto; flex: 0 0 auto; accent-color: var(--accent); }
  .check-all { text-transform: none; letter-spacing: 0; margin-left: 8px; white-space: nowrap; }
  .check-all .link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 11px;
    font-weight: 600; color: var(--accent); cursor: pointer; }
  .check-all .link-btn:hover { text-decoration: underline; }
  .check-all-sep { color: var(--text-3); margin: 0 5px; font-weight: 400; }

  .wh-create { padding: 16px; }

  /* Deliveries: event type + endpoint cells. */
  .wh-evt { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-1); }

  /* ============================================================
     API keys — one-time secret banner, keys table
     ============================================================ */
  .key-name { color: var(--text-1); font-weight: 500; }
  .muted-mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); }

  /* The freshly-minted key — shown exactly once. An accent-edged callout with a soft glow so it
     reads as "act now"; the mono code is selectable + has a one-click copy. */
  .keybanner { position: relative; overflow: hidden; padding: 15px 16px;
    background: var(--surface); border: 1px solid var(--accent);
    border-radius: var(--radius-card);
    box-shadow: 0 0 0 1px var(--accent-bg), 0 10px 30px -16px var(--accent); }
  .keybanner::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: linear-gradient(var(--accent), var(--accent-2)); }
  .keybanner-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    font-size: 13px; color: var(--text-1); }
  .keybanner-head .ico { color: var(--accent); }
  .keybanner-warn { font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--warn-text); background: var(--warn-bg);
    border-radius: var(--radius-pill); padding: 2px 8px; }
  .keybanner-row { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
  .keybanner-code { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap;
    font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; color: var(--text-1);
    background: var(--bg); border: 1px solid var(--border-strong);
    border-radius: var(--radius-control); padding: 9px 12px; user-select: all; }
  .keybanner-row .btn { flex: 0 0 auto; }
  .keybanner-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-3); }
  .keybanner-note code { font-family: var(--font-mono); font-size: 11px; color: var(--text-2);
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 1px 5px; }

  /* ============================================================
     Settings — appearance (theme picker), providers status, security
     ============================================================ */
  .sidebar-foot.is-active { color: var(--text-1); font-weight: 600;
    box-shadow: inset 2px 0 0 var(--accent); border-radius: var(--radius-control); }
  .sidebar-foot.is-active .ico { color: var(--accent); }

  .set-body { padding: 15px 16px; }
  .set-lead { margin: 0 0 13px; font-size: 12.5px; color: var(--text-3); }

  /* Theme picker: segmented radio cards; disabled (soon) ones read muted. */
  .theme-row { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 9px;
    max-width: none; padding: 0; background: transparent; border: 0; border-radius: 0; }
  .theme-opt { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-control);
    background: var(--surface-2); color: var(--text-2); cursor: pointer;
    transition: border-color 0.12s, color 0.12s, background-color 0.12s; }
  .theme-opt input { width: auto; accent-color: var(--accent); margin: 0; }
  .theme-opt .theme-name { font-size: 12.5px; font-weight: 600; }
  .theme-opt:hover:not(.is-soon) { border-color: var(--accent); color: var(--text-1); }
  .theme-opt.is-on { border-color: var(--accent); background: var(--accent-bg); color: var(--text-1); }
  .theme-opt.is-soon { opacity: 0.55; cursor: not-allowed; }
  .theme-opt .nav-soon { margin-left: 0; }
}

@layer utilities {
  /* Visually-hidden but available to assistive tech (skip-link target, icon-only labels). */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  /* A skip link that becomes visible only when focused (keyboard-first). */
  .skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; transform: translateY(-150%);
    padding: 8px 14px; border-radius: var(--radius-control); font-size: 13px; font-weight: 600;
    background: var(--accent); color: var(--accent-contrast); transition: transform 0.12s; }
  .skip-link:focus-visible { transform: translateY(0); }

  /* ============================================================
     Responsive
     ============================================================ */

  /* < 1024px: collapse sidebar → fixed bottom mobile-nav */
  @media (max-width: 1023.98px) {
    .app { grid-template-columns: minmax(0, 1fr); }
    .sidebar { display: none; }
    .content { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

    .mobile-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
      display: flex; justify-content: space-around; align-items: stretch;
      padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
      background: color-mix(in srgb, var(--bg-sidebar) 92%, transparent);
      backdrop-filter: blur(10px); border-top: 1px solid var(--border); }
    .mobile-nav a { flex: 1; min-height: 44px; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 3px;
      font-size: 9.5px; color: var(--text-3); border-radius: var(--radius-control); }
    .mobile-nav a .ico { width: 20px; height: 20px; }
    .mobile-nav a.is-active { color: var(--accent); }
    .mobile-nav a.is-active .ico { color: var(--accent); }
  }

  /* < 768px: compact spacing + readable tables via card transform */
  @media (max-width: 767.98px) {
    .topbar { padding: 12px 14px; }
    /* The ⌘K affordance is keyboard-centric — drop its label (and the hint) on small screens. */
    .cmdk-trigger-label { display: none; }
    .cmdk-trigger .cmdk-kbd { display: none; }
    .cmdk { padding: 8vh 14px 14px; }
    .content { padding: 14px; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    form { max-width: none; }

    /* Dashboard: KPIs to two columns, feeds stacked. */
    .kpis { grid-template-columns: 1fr 1fr; }
    .dash-grid { grid-template-columns: 1fr; }
    .dash-glow { left: 24px; width: 260px; }

    /* Channels list: counts breakdown drops below the chips; filter controls go full-width. */
    .counts-plat { margin-left: 0; width: 100%; }
    .filter-bar select, .filter-bar .btn { flex: 1 1 auto; }

    /* Webhooks: event-type grid to a single column; secret chip + actions go full-width. */
    .evt-grid { grid-template-columns: 1fr; }
    .secret-chip { max-width: 100%; }
    .wh-actions { width: 100%; }
    .wh-actions form, .wh-actions .btn { flex: 1 1 auto; }

    /* Channel detail: header + panel grids stack; action bar wraps full-width under the title. */
    .detail-head { align-items: flex-start; }
    .action-bar { margin-left: 0; width: 100%; }
    .action-bar form, .action-bar .btn { flex: 1 1 auto; }
    .action-bar .btn { width: 100%; }
    .detail-grid { grid-template-columns: 1fr; }
    .meta-row dt { flex-basis: 92px; }

    /* Attention rows wrap on narrow screens: glyph + title on one line, pill + action below
       (so the action button is never clipped and titles aren't crushed to an ellipsis). */
    .attn-row { flex-wrap: wrap; row-gap: 8px; }
    .attn-row .platform { flex: 0 0 auto; }
    .attn-title { flex: 1 1 auto; white-space: normal; overflow: visible; }
    .attn-acts { margin-left: auto; }
    .attn-row .pill { order: 3; flex: 0 0 auto; }
    .attn-row .attn-acts { order: 4; }

    /* Card transform: each row becomes a stacked card; cells labelled via data-label. */
    table, thead, tbody, tr, td { display: block; width: 100%; }
    table { border: 0; background: transparent; overflow: visible; }
    thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    tbody tr { margin-bottom: 10px; background: var(--surface);
      border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
    tbody tr:hover td { background: transparent; }
    tbody td { display: flex; align-items: center; gap: 12px;
      padding: 9px 14px; border-top: 1px solid var(--border); min-height: 44px; }
    tbody tr td:first-child { border-top: 0; }
    tbody td[data-label]::before { content: attr(data-label);
      flex: 0 0 38%; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.06em; color: var(--text-3); }
    tbody td[data-label] { justify-content: space-between; }

    /* Tables inside an explicit scroll wrapper keep their native layout. */
    .table-wrap table { display: table; }
    .table-wrap thead { position: static; width: auto; height: auto; clip: auto; }
    .table-wrap thead, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: revert; }
    .table-wrap tbody tr { margin: 0; border: 0; border-radius: 0; }
    .table-wrap tbody td { display: table-cell; }
    .table-wrap tbody td[data-label]::before { content: none; }
  }
}

/* ── Content cockpit ─────────────────────────────────────────────────────── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 10px; }
/* Content library (brand-grouped card grid) */
.lib { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; }
.lib-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.lib-card { display: flex; flex-direction: column; gap: 11px; padding: 13px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  color: inherit; transition: border-color .14s, background .14s; }
.lib-card:hover { border-color: var(--border-strong); background: var(--overlay); }
.lib-top { display: flex; align-items: flex-start; gap: 11px; }
.lib-thumb { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-3); }
.lib-thumb .ico { width: 20px; height: 20px; }
.lib-id { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.lib-title { font-size: 13.5px; font-weight: 600; color: var(--text-1); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lib-card:hover .lib-title { color: var(--accent); }
.lib-type { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); text-transform: capitalize; }
.lib-top .badge { flex: 0 0 auto; }
.lib-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
.lib-when { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
/* Channels (brand-grouped card grid; cards extend .post-card with a status-tinted left edge) */
.ch-card { position: relative; overflow: hidden; transition: border-color .12s, background-color .12s; }
.ch-card:hover { border-color: var(--border-strong); }
.ch-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; }
.ch-card.tone-edge-ok::before { background: var(--ok); }
.ch-card.tone-edge-warn::before { background: var(--warn); }
.ch-card.tone-edge-bad::before { background: var(--bad); }
.ch-card.tone-edge-neutral::before { background: var(--text-3); }
.ch-card.tone-edge-info::before { background: var(--info); }
.ch-card img.conv-av-i { object-fit: cover; }
.ch-card-head { display: flex; align-items: center; gap: 10px; color: inherit; }
.ch-card-head:hover .acct-name { color: var(--accent); }
.ch-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ch-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 11px; border-top: 1px solid var(--border); }
.ch-foot .ch-foot-act { margin-left: auto; }
.connect-form { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; max-width: none; padding: 0; background: transparent; border: 0; border-radius: 0; }
.connect-form .input { flex: 1 1 220px; width: auto; min-width: 0; }
.panel-form { max-width: none; padding: 0; background: transparent; border: 0; border-radius: 0; gap: 8px; align-items: flex-start; }
.post-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.post-card-head { display: flex; align-items: center; gap: 8px; }
.post-card-head .card-edit { margin-left: auto; }
.post-card-desc { display: flex; flex-direction: column; gap: 6px; }
.card-desc-text { margin: 0; color: var(--text-1); white-space: pre-wrap; font-size: 0.92rem; line-height: 1.45; }
.post-card-fields { display: flex; flex-direction: column; gap: 5px; }
.card-field { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; }
.card-field-k { color: var(--text-3); min-width: 64px; }
.card-field-v { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.copy-btn { margin-left: auto; padding: 2px 8px; font-size: 0.74rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius-control); background: var(--surface-2); color: var(--text-2); cursor: pointer; white-space: nowrap; }
.copy-btn:hover { color: var(--text-1); border-color: var(--accent); }
.copyable { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border-radius: var(--radius-control); }
.copyable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.copyable-code { padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--radius-control);
  background: var(--surface-2); transition: border-color 0.12s ease, color 0.12s ease; }
.copyable:hover .copyable-code, .copyable:focus-visible .copyable-code { color: var(--text-1); border-color: var(--accent); }
.copyable-flag { font-size: 0.72rem; color: var(--accent); }
.acct { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; line-height: 1.25; }
.acct-solo { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; }
.acct-text { display: inline-flex; flex-direction: column; gap: 1px; min-width: 0; }
.acct-name { color: var(--text-1); overflow: hidden; text-overflow: ellipsis; }
.acct-handle { font-size: 0.72rem; color: var(--accent); font-family: var(--font-mono); }
.acct-id { font-size: 0.72rem; color: var(--text-3); font-family: var(--font-mono); }
.acct-id-solo { font-family: var(--font-mono); font-size: 0.84rem; color: var(--text-2); }
.acct-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  background: var(--surface-2); border: 1px solid var(--border); }
.card-publish { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-top: 1px solid var(--border); padding-top: 10px; }
.card-publish select, .card-publish input[type="datetime-local"] { font-size: 0.82rem; padding: 4px 6px; }
.card-published { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.card-hint { border-top: 1px solid var(--border); padding-top: 10px; color: var(--text-3); margin: 0; }
.card-edit-area { width: 100%; resize: vertical; font: inherit; padding: 8px; border-radius: var(--radius-control);
  border: 1px solid var(--border-strong); background: var(--bg); color: var(--text-1); }
.card-edit-actions { display: flex; gap: 8px; margin-top: 8px; }
.card-script { margin-top: 10px; }
.card-script summary { cursor: pointer; color: var(--text-2); font-size: 0.85rem; }

/* ---- Brands + brand-first content (redesign) ---- */

/* Custom-styled native selects — one consistent control across the admin. The closed control is
   fully themed (chevron, surface, focus ring); the open option list is OS-rendered (a native limit). */
.content select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 0.84rem; line-height: 1.4; color: var(--text-1);
  padding: 7px 32px 7px 11px;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b93c4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 13px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-control);
  cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s, background-color 0.12s;
}
.content select:hover { border-color: var(--accent); background-color: var(--surface-2); }
.content select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.content select:disabled { opacity: 0.5; cursor: not-allowed; }
.content select option { background: var(--overlay); color: var(--text-1); } /* honored where the OS allows */

/* ps-select: JS-enhanced custom listbox (replaces the native popup). The trigger mirrors the styled
   native select above so there is no flash before/after enhancement; the panel is fully themed. */
select.ps-native-hidden { display: none !important; }
.ps-select { position: relative; display: inline-block; min-width: 200px; vertical-align: middle; }
.ps-trigger { display: flex; align-items: center; gap: 8px; width: 100%; font: inherit; font-size: 0.84rem;
  color: var(--text-1); text-align: left; padding: 7px 11px; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-control); cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s, background-color 0.12s; }
.ps-trigger:hover { border-color: var(--accent); background: var(--surface-2); }
.ps-select.open .ps-trigger { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.ps-trigger .val { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-trigger .val.is-placeholder { color: var(--text-3); }
.ps-trigger .chev { color: var(--text-3); flex: 0 0 auto; transition: transform 0.16s ease; }
.ps-select.open .ps-trigger .chev { transform: rotate(180deg); }
.ps-select.is-disabled { opacity: 0.5; pointer-events: none; }

/* position:fixed + JS-computed coords so the panel escapes overflow:auto ancestors (scrollable tables) */
.ps-panel { position: fixed; z-index: 1000;
  background: var(--overlay); border: 1px solid var(--border-strong); border-radius: 10px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4); padding: 5px;
  max-height: 280px; overflow-y: auto; opacity: 0; transform: translateY(-6px) scale(0.985);
  pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; }
.ps-select.open .ps-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.ps-opt { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px;
  color: var(--text-2); cursor: pointer; font-size: 0.84rem; user-select: none; }
.ps-opt .check { width: 15px; height: 15px; flex: 0 0 auto; color: var(--accent); opacity: 0; }
.ps-opt[aria-selected="true"] { color: var(--text-1); }
.ps-opt[aria-selected="true"] .check { opacity: 1; }
.ps-opt.active { background: var(--accent-bg); color: var(--text-1); }
.ps-opt .muted { color: var(--text-3); }

/* context widths so the enhanced control fills the same space the native select did */
.brand-slot .ps-select { flex: 1 1 auto; min-width: 0; }
.filter-bar .ps-select { min-width: 160px; }
.data-table .ps-select { max-width: 240px; }

.section-intro { color: var(--text-3); font-size: 0.86rem; margin: 0 0 14px; max-width: 70ch; }

/* ---- Compose (authoring) ---- */
[x-cloak] { display: none !important; }
.compose { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .compose { grid-template-columns: 1fr; } }
.compose-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.compose-form .panel { display: flex; flex-direction: column; gap: 12px; }
.fld { display: flex; flex-direction: column; gap: 5px; }
.fld > span { font-size: 0.78rem; color: var(--text-3); font-weight: 600; }
.fld > span small { font-weight: 400; }
.fld input, .fld textarea { font: inherit; font-size: 0.88rem; color: var(--text-1); padding: 8px 11px;
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-control);
  transition: border-color 0.12s, box-shadow 0.12s; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.fld textarea { resize: vertical; }
.fld-row { display: flex; gap: 12px; align-items: flex-end; }
.fld-row .fld { flex: 0 0 auto; }
.fld-row .fld.grow { flex: 1 1 auto; min-width: 0; }

.compose-counter { align-self: flex-end; font-size: 0.72rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.compose-counter.over { color: var(--bad-text); font-weight: 700; }
.compose-toggle { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-1); cursor: pointer; }
/* UXPOLISH1: render the binary on/off toggles as a switch instead of a default checkbox. Pure CSS,
   no markup change — applies to the compose Auto-Story / auto-reply toggles. */
.compose-toggle input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0;
  width: 34px; height: 20px; border-radius: 999px; position: relative; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  transition: background 0.15s, border-color 0.15s;
}
.compose-toggle input[type="checkbox"]::after {
  content: ""; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-3); transition: transform 0.15s, background 0.15s;
}
.compose-toggle input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.compose-toggle input[type="checkbox"]:checked::after { transform: translateX(14px); background: var(--accent-contrast); }
.compose-toggle input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* UXPOLISH1: smooth cross-page navigation via the MPA View Transitions API (Chrome 126+; ignored
   elsewhere). Disabled under reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.compose-autoreply { display: flex; flex-direction: column; gap: 6px; }

.compose-preview { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 12px; }

/* ---- Compose v2 (redesign: channel toggle-cards · caption tabs · live preview) ---- */
.compose-form .panel { gap: 0; }
.compose-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.compose-body .card-hint { border-top: 0; padding-top: 0; margin: 0; }
.panel-sub { font-size: 11px; color: var(--text-3); }
.panel-count { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; }

.targets { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 8px; }
.target { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--bg); cursor: pointer; transition: border-color .14s, background .14s; }
.target:hover { border-color: var(--border-strong); }
.target.on { border-color: var(--accent); background: var(--accent-bg); }
.target .t-pic { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; display: grid; place-items: center; color: white; }
.target .t-pic svg { width: 16px; height: 16px; }
.target .t-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.target .t-nm { font-size: 12.5px; font-weight: 600; color: var(--text-1); }
.target .t-hd { font-size: 10.5px; color: var(--text-3); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.target .t-tick { margin-left: auto; width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid var(--border-strong); display: grid; place-items: center; color: transparent; transition: .14s; }
.target.on .t-tick { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.target .t-tick svg { width: 11px; height: 11px; }

.media-row { display: flex; gap: 12px; align-items: stretch; }
.media-thumb { width: 84px; height: 108px; flex: 0 0 auto; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface-2); display: grid; place-items: center; overflow: hidden; color: var(--text-3); }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.cap-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.cap-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg); color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer; transition: .14s; }
.cap-tab .cap-glyph svg { width: 13px; height: 13px; display: block; }
.cap-tab.on { border-color: var(--accent); background: var(--accent-bg); color: var(--text-1); }
.cap-tab .cap-ov { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }
.cap-edit { display: flex; flex-direction: column; gap: 4px; }
.cap-edit textarea { width: 100%; font: inherit; font-size: 0.88rem; color: var(--text-1); padding: 9px 11px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-control); resize: vertical; transition: border-color .12s, box-shadow .12s; }
.cap-edit textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.cap-foot { display: flex; justify-content: flex-end; }

.auto { border: 1px dashed var(--border-strong); border-radius: var(--radius-control); }
.auto + .auto { margin-top: 8px; }
.auto > summary { display: flex; align-items: center; gap: 9px; padding: 10px 12px; cursor: pointer; list-style: none; font-size: 12.5px; color: var(--text-1); user-select: none; }
.auto > summary::-webkit-details-marker { display: none; }
.auto-chev { color: var(--text-3); transition: transform .15s; flex: 0 0 auto; }
.auto[open] > summary .auto-chev { transform: rotate(90deg); }
.auto-glyph svg { width: 14px; height: 14px; display: block; }
.auto-t { font-weight: 550; }
.auto-body { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); }
.auto-ar { display: flex; flex-direction: column; gap: 8px; padding-left: 12px; border-left: 2px solid var(--border); }
.lock-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: .03em; color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent); border-radius: 999px; padding: 1px 7px; vertical-align: middle; }
.lock-chip svg { width: 11px; height: 11px; }

.compose-pubbar { position: sticky; bottom: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 14px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); }
.compose-pubbar .seg { display: inline-flex; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-control); }
.compose-pubbar .seg button { border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 12px; font-weight: 500; padding: 6px 13px; border-radius: 7px; cursor: pointer; }
.compose-pubbar .seg button.on { background: var(--accent); color: var(--accent-contrast); }
.compose-pubbar .when input { font: inherit; font-size: 12.5px; padding: 7px 10px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-control); color: var(--text-1); }
.pubbar-grow { flex: 1; }

.pv-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.pv-tab { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text-3); cursor: pointer; transition: .14s; }
.pv-tab svg { width: 16px; height: 16px; }
.pv-tab.on { border-color: var(--accent); background: var(--accent-bg); }
.device { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 10px; box-shadow: var(--shadow-pop); }
.pv-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.pv-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px; }
.pv-av { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; color: white; font-size: 11px; font-weight: 600; }
.pv-av svg { width: 16px; height: 16px; }
.pv-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pv-nm { font-size: 12.5px; font-weight: 600; color: var(--text-1); }
.pv-hd { font-size: 10px; color: var(--text-3); font-family: var(--font-mono); }
.pv-media { aspect-ratio: 4/5; background: var(--surface-2); display: grid; place-items: center; color: var(--text-3); }
.pv-media img { width: 100%; height: 100%; object-fit: cover; }
.pv-cap { margin: 0; padding: 11px 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-1); white-space: pre-wrap; max-height: 200px; overflow: auto; }
.pv-foot { display: flex; align-items: center; gap: 14px; padding: 0 12px 11px; color: var(--text-3); }
.pv-foot .ico { width: 17px; height: 17px; }
.pv-foot .ct { margin-left: auto; }
.pv-plat { margin-left: auto; color: var(--text-3); display: inline-flex; }
.pv-plat svg { width: 16px; height: 16px; }
.pv-empty { padding: 32px 16px; text-align: center; color: var(--text-3); font-size: 12.5px; }
.api-hint { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-3); font-family: var(--font-mono); padding: 4px 9px; border: 1px dashed var(--border-strong); border-radius: var(--radius-control); }
.api-hint .ico { width: 13px; height: 13px; color: var(--accent); }
.api-hint b { color: var(--text-2); font-weight: 500; }
.auto-n { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--text-3); }
.compose-pubbar .when { display: flex; align-items: center; gap: 8px; color: var(--text-3); }

/* ---- Inbox v2 (redesign: avatars + platform badge · SVG controls) ---- */
.conv-item { display: flex; gap: 11px; align-items: flex-start; width: 100%; text-align: left; background: transparent; color: var(--text-1); font: inherit; border: 0; border-bottom: 1px solid var(--border); padding: 11px 12px; cursor: pointer; position: relative; transition: background .12s; }
.conv-item:hover { background: var(--nav-hover); }
.conv-av { position: relative; width: 38px; height: 38px; flex: 0 0 auto; }
.conv-av-i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: white; font-size: 13px; font-weight: 600; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.conv-pg { position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--surface); color: white; }
.conv-pg svg { width: 9px; height: 9px; display: block; }
.conv-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.conv-top { display: flex; align-items: baseline; gap: 8px; }
.conv-name { font-size: 13px; color: var(--text-1); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item.unread .conv-name { font-weight: 700; }
/* Bug fix: the unread dot used to be position:absolute at the same right edge as the timestamp,
   overlapping its last character(s). Flowing both inside one flex wrapper (dot always renders here,
   just conditionally empty) keeps the timestamp flush right in every state and puts a real gap
   between the two when the dot is present — they can never overlap again. */
.conv-time-wrap { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; position: relative; }
.conv-time { font-size: 10.5px; color: var(--text-3); font-family: var(--font-mono); }
.conv-subject { font-size: 12px; font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-preview { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.conv-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.conv-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--radius-pill); padding: 1px 8px; }
.conv-flag .ico { width: 11px; height: 11px; }
.conv-kind { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-3); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 1px 7px; }
.conv-kind .ico { width: 11px; height: 11px; }
.conv-kind-email { color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.conv-kind-comment { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 35%, transparent); }
.conv-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }

.thread-legend { font-size: .72rem; width: 100%; }
.thread-legend > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 5px; color: var(--text-3); }
.thread-legend > summary::-webkit-details-marker { display: none; }
.thread-legend .ico { width: 13px; height: 13px; }

.empty-ic { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-bg); color: var(--accent); margin-bottom: 6px; }
.empty-ic .ico { width: 20px; height: 20px; }
.pro-link { display: inline-flex; align-items: center; gap: 4px; }
.pro-link .ico { width: 12px; height: 12px; }

.banner { padding: 10px 14px; border-radius: var(--radius-control); margin-bottom: 14px; font-size: 0.88rem; }
.banner-bad { background: var(--bad-bg); color: var(--bad-text); }
.banner-pro { background: color-mix(in srgb, var(--accent) 12%, var(--surface-1)); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text-1); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.banner-pro strong { color: var(--accent); }
.guide-panel { margin-top: 20px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-1); }
.guide-summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; font-size: 0.88rem; user-select: none; list-style: none; }
.guide-summary::-webkit-details-marker { display: none; }
.guide-summary::before { content: "▶"; font-size: 9px; color: var(--text-3); transition: transform 0.15s; }
details[open] .guide-summary::before { transform: rotate(90deg); }
.guide-badge { font-size: 0.72rem; }
.guide-body { padding: 0 16px 16px; font-size: 0.85rem; color: var(--text-2); border-top: 1px solid var(--border); }
.guide-body p { margin: 12px 0 8px; }
.guide-steps { margin: 8px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.guide-steps li { line-height: 1.5; }
.guide-steps code { font-family: var(--font-mono); font-size: 0.8em; background: var(--surface-2); padding: 1px 5px; border-radius: 3px; }
.guide-note { color: var(--text-3); font-size: 0.82rem; margin-top: 12px; }
.row-group-head td { background: color-mix(in srgb, var(--surface-2) 50%, transparent);
  font-weight: 650; color: var(--text-1); font-size: 0.8rem; letter-spacing: 0.02em; text-transform: uppercase; }
.row-group-head .muted { color: var(--text-3); font-weight: 400; text-transform: none; }

.brand-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--text-1); font-size: 0.82rem; font-weight: 600; }
.brand-chip.is-muted { color: var(--text-3); font-weight: 400; }
.brand-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; background: var(--accent); }
.brand-ico { line-height: 1; }
.brand-key { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-3); }

.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; margin-top: 12px; }
.brand-card { display: flex; flex-direction: column; gap: 10px; }
.brand-head { align-items: center; }
.brand-title { display: flex; align-items: center; gap: 8px; }
.brand-title h3 { margin: 0; }
.brand-edit > summary { cursor: pointer; color: var(--text-3); font-size: 0.8rem; }
.brand-edit-form, .brand-new-form { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; max-width: 420px; }
.brand-edit-form > input, .brand-new-form > input,
.brand-fld input { padding: 8px 10px; font: inherit; font-size: 0.86rem; width: 100%;
  border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--bg); color: var(--text-1); }
.brand-edit-form .btn, .brand-new-form .btn { align-self: flex-start; }
.brand-fld { display: flex; flex-direction: column; gap: 6px; }
.brand-fld > span { font-size: 0.78rem; color: var(--text-2); }
.accent-field { display: flex; align-items: center; gap: 8px; }
.accent-field input[type="color"] { width: 38px; min-width: 38px; height: 38px; flex: none; padding: 2px; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--bg); }
.accent-field input[name="accent"] { flex: 1; width: auto; }
.emoji-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.emoji-pick { border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--bg-2);
  cursor: pointer; padding: 4px 7px; font-size: 1.05rem; line-height: 1; }
.emoji-pick:hover { border-color: var(--border-strong); background: var(--bg); }
.brand-slots { display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--border); padding-top: 10px; }
.brand-slot { display: flex; align-items: center; gap: 9px; }
.brand-slot-platform { min-width: 96px; color: var(--text-2); font-size: 0.84rem; }
.brand-slot select { flex: 1 1 auto; } /* look inherited from .content select */
.brand-assign { font-size: 0.78rem; max-width: 220px; padding: 5px 30px 5px 9px; } /* compact, in-table */

/* per-platform status strip on the content list — small toned pills */
.plat-strip { display: flex; flex-wrap: wrap; gap: 5px; }
.plat-dot { display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em;
  padding: 2px 9px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border); }
.plat-dot.tone-ok { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.plat-dot.tone-warn { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
.plat-dot.tone-bad { background: var(--bad-bg); color: var(--bad-text); border-color: transparent; }
.plat-dot.tone-info { background: var(--info-bg); color: var(--info); border-color: transparent; }
.plat-dot.tone-neutral { background: var(--surface-2); color: var(--text-3); }

/* the publish panel: bulk bar + cards */
.publish-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 0 14px; }
.when-control { display: flex; align-items: center; gap: 8px; }
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-control); overflow: hidden; }
.seg-btn { padding: 5px 13px; font: inherit; font-size: 0.82rem; background: var(--surface); color: var(--text-2);
  border: none; cursor: pointer; }
.seg-btn.on { background: var(--accent); color: var(--accent-contrast); font-weight: 600; }
.when-at { padding: 5px 8px; font: inherit; font-size: 0.82rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius-control); background: var(--bg); color: var(--text-1); }
.select-all { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 0.82rem; }
.publish-bulk { margin-left: auto; }
.publish-none { margin-left: auto; color: var(--text-3); }

.pub-pick { display: inline-flex; align-items: center; gap: 7px; }
.pub-target { color: var(--text-2); font-size: 0.84rem; }
.card-warn { border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px; color: var(--warn-text); }

/* ── Legacy reply-section layout vocabulary ───────────────────────────────────────────────────────
   The re-mounted replies-wing section bodies (overview/inbox/rules/contacts/sequences/settings/events/
   webhooks) predate the Tokyo-Night shell and share these classes (the old replies styles.ts, removed in
   the shell port). Style them with the shell's tokens so those pages aren't unstyled stacks. */
.page { max-width: var(--shell-max); }
.page > h1 { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; color: var(--text-1); margin: 0 0 6px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.section { margin-top: 20px; }
.section > h2 { font-size: 14px; font-weight: 600; color: var(--text-1); margin: 0 0 12px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 13px 15px; }

/* ── Settings: horizontal tab bar ────────────────────────────────────────── */
.settings-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 18px 0 22px;
  border-bottom: 1px solid var(--border); padding-bottom: 0; }
.settings-tab { appearance: none; background: transparent; border: 0; cursor: pointer;
  color: var(--text-2); font-size: 13px; font-weight: 500; padding: 9px 14px;
  border-radius: var(--radius-control) var(--radius-control) 0 0; position: relative;
  transition: color .15s ease, background .15s ease; white-space: nowrap; }
.settings-tab:hover { color: var(--text-1); background: var(--surface-2); }
.settings-tab.active { color: var(--accent); }
.settings-tab.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px;
  height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; }
.settings-panel { animation: settings-fade .18s ease; }
@keyframes settings-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .settings-panel { animation: none; } }
.settings-panel > .section:first-child { margin-top: 0; }

/* ── Settings: credential / config rows (replaces the cramped list-row) ──── */
.cred-list { display: flex; flex-direction: column; gap: 10px; }
.cred-row { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 13px 15px; }
.cred-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cred-label { font-weight: 600; color: var(--text-1); font-size: 13px; }
.cred-meta { color: var(--text-3); font-size: 11px; margin-top: 3px; }
.cred-meta code { font-size: 11px; }
.cred-help { color: var(--text-2); font-size: 12px; margin-top: 6px; line-height: 1.45; }
.cred-form { display: flex; gap: 8px; margin-top: 11px; align-items: center; }
.cred-form form { display: contents; } /* let the Save + Clear forms' controls share one flex row */
.cred-form .input { flex: 1; min-width: 0; }
.cred-subhead { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3); margin: 18px 0 9px; }
.cred-subhead:first-child { margin-top: 4px; }

/* ── Inbox (replies wing; classes had no CSS after the shell port) ──────────────────────────── */
.inbox {
  display: grid;
  grid-template-columns: 320px 1fr;
  height: min(74vh, calc(100vh - 8.5rem));
  min-height: 26rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
}
.conv-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); }
.conv-head { padding: 10px 12px; font-weight: 600; border-bottom: 1px solid var(--border); }
/* Active contact filter banner (set when arriving from a contact's "View"): a removable chip so the
   one-person view is visible and clearable without guessing. */
.conv-contact-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; font-size: 12px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.conv-contact-chip .btn-ic { flex: 0 0 auto; }
#conv-list-items { flex: 1; min-height: 0; overflow-y: auto; }
/* .conv-item/.conv-top/.conv-name/.conv-time/.conv-preview are defined in the Inbox v2 block above
   (flex row w/ avatar) — this used to re-declare all of them here too, later in source order, so
   equal-specificity properties (font-size/color on .conv-time, e.g.) silently overrode v2's values.
   Removed the duplicates; only the genuinely v2-unique rule below stays. */
.conv-item .badge { position: absolute; right: 12px; bottom: 8px; }

.thread { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.thread-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-2); }

/* Thread header: avatar + name/“via” line + Done/Snooze actions (top row), then a controls row
   (status pill, Needs-reply badge, the auto-replies toggle switch). Ported from priv/design. */
.thread-head { padding: 11px 14px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.th-top { display: flex; align-items: center; gap: 11px; }
.th-av { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; color: white; font-weight: 600; font-size: 12px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.th-id { min-width: 0; }
.th-nm { font-size: 14px; font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-via { font-size: 11px; color: var(--text-3); display: flex; align-items: center; gap: 5px; margin-top: 1px; }
.th-via svg, .th-via .ico { width: 12px; height: 12px; }
.th-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; position: relative; }
.th-actions .btn .ico { width: 14px; height: 14px; }
.th-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .8rem; }
.th-controls .badge .ico { width: 11px; height: 11px; }
.pause-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); cursor: pointer; }
.pause-row.is-paused { color: var(--warn); }

/* Toggle switch (the auto-replies on/off control). */
.switch { position: relative; width: 38px; height: 22px; flex: 0 0 auto; appearance: none; -webkit-appearance: none; cursor: pointer; margin: 0; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); transition: background .18s, border-color .18s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-3); transition: transform .18s, background .18s; }
.switch:checked { background: var(--accent); border-color: var(--accent); }
.switch:checked::after { transform: translateX(16px); background: white; }

.thread-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.daysep { align-self: center; font-size: 10px; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px 11px; margin: 4px 0; }
.msg { display: flex; flex-direction: column; max-width: 74%; gap: 3px; }
.msg-in { align-self: flex-start; align-items: flex-start; }
.msg-out { align-self: flex-end; align-items: flex-end; }
.msg .bubble { padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.msg-in .bubble { background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 5px; color: var(--text-1); }
.msg-out .bubble { background: var(--accent); color: var(--accent-contrast); border-bottom-right-radius: 5px; }
/* ADUX1: a pending draft/rule-hold is NOT a sent message — it gets its own card treatment (surface +
   accent left rail) instead of the confirmed-outbound blue bubble, so "awaiting approval" reads as a
   distinct state rather than looking like it already went out. */
.msg-draft { align-self: flex-end; align-items: flex-end; max-width: 88%; }
.msg-draft .draft-bubble { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-card); padding: var(--sp-3) var(--sp-4); color: var(--text-1); white-space: normal; }
.draft-tag { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); margin-bottom: var(--sp-2); }
.draft-tag .ico { width: 13px; height: 13px; }
.draft-part { margin-bottom: var(--sp-2); }
.draft-part:last-child { margin-bottom: 0; }
.draft-part .badge { margin-bottom: 4px; }
.draft-text { font-size: var(--fs-body); line-height: 1.5; color: var(--text-1); white-space: pre-wrap; word-break: break-word; }
.draft-edit .textarea { width: 100%; margin-top: 2px; }
.draft-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }

/* Per-message mono meta line (clock time + outbound delivery receipt). */
.msg-meta { font-size: 10px; color: var(--text-3); font-family: var(--font-mono); display: flex; align-items: center; gap: 5px; }
.msg-meta .ico { width: 12px; height: 12px; color: var(--info); }
/* Reaction pill, tucked under the message it belongs to (emoji only — that emoji IS content). */
.msg-react { display: inline-flex; align-items: center; gap: 3px; margin-top: -7px; background: var(--overlay); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 1px 7px; font-size: 11px; line-height: 1.4; }

/* Non-text message content (follow-gate buttons, quick replies, media): a wrapped row of small inline
   chips under the message text. Media chips are clickable labelled links (no inline thumbnail). */
.msg-extras { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.msg-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--overlay); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px 9px; font-size: 11px; line-height: 1.4; color: inherit; text-decoration: none; }
a.msg-chip.msg-media:hover { border-color: var(--accent); }
.msg-tap { margin-top: 6px; font-size: 11px; opacity: 0.75; font-family: var(--font-mono); }

/* Comment item: compact card with a “commented on post …” header + auto-DM/reply status lines. */
.msg-comment { max-width: 86%; }
.msg-comment .bubble { background: var(--info-bg); border: 1px solid color-mix(in srgb, var(--info) 28%, transparent); color: var(--text-1); white-space: normal; }
.cmt-top { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--info); margin-bottom: 5px; }
.cmt-top .ico { width: 12px; height: 12px; }
.cmt-link { margin-left: auto; color: var(--accent); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmt-dm { margin-top: 6px; font-size: 11px; color: var(--ok); display: flex; align-items: center; gap: 5px; }
.cmt-dm .ico { width: 12px; height: 12px; flex: 0 0 auto; }
.cmt-dm a { color: var(--accent); }
.cmt-err { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11px; color: var(--bad); }
.cmt-err .ico { width: 12px; height: 12px; }

/* Email mode: stacked email cards (from avatar + name/address + date, then the body). */
.email-list { padding: 16px; gap: 14px; }
.email { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.email-head { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.email-from-av { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; color: white; font-weight: 600; font-size: 12px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.email-meta { min-width: 0; flex: 1; }
.email-from { font-size: 13px; color: var(--text-1); font-weight: 600; }
.email-addr { color: var(--text-3); font-weight: 400; font-family: var(--font-mono); font-size: 11px; }
.email-date { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); flex: 0 0 auto; }
.email-body { padding: 13px 14px; font-size: 13px; line-height: 1.6; color: var(--text-1); white-space: pre-wrap; }

.reply-bar { display: flex; gap: 10px; align-items: flex-end; padding: 12px 14px; border-top: 1px solid var(--border); }
.reply-bar .textarea { flex: 1; min-height: 42px; max-height: 140px; }
.reply-locked .textarea { opacity: .6; }

/* ── Form controls + notices + list (replies wing; missing after shell port) ─────────────────── */
.textarea, .input, textarea.textarea, select.input {
  width: 100%; background: var(--bg); color: var(--text-1);
  border: 1px solid var(--border); border-radius: var(--radius-control);
  padding: 7px 10px; font: inherit; resize: vertical;
}
.textarea:focus, .input:focus { outline: none; border-color: var(--accent); }
/* Inline control row (checkbox/radio + label). Display lives in this class — NOT inline — because
   Alpine x-show toggles the element's inline `display`, which would wipe an inline `display:flex`
   when it shows the element (leaving it `inline` and visually broken). gap can be overridden inline. */
.row-center { display: flex; align-items: center; gap: 8px; }
.notice { padding: 9px 12px; border-radius: var(--radius-control); margin: 8px 0; font-size: 13px; }
.notice-err { background: var(--bad-bg); color: var(--bad-text); border: 1px solid var(--bad); }
.notice-ok { background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok); }
.notice-info { background: var(--info-bg); color: var(--text-1); border: 1px solid var(--info); }
.notice-warn { background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn); }
.list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.list-row { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.list-row:last-child { border-bottom: 0; }
.avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; vertical-align: middle; }

/* Approvals — one scannable card per pending reply: header + actions, the quoted trigger, then the
   outgoing message(s) (public comment / DM) as distinct labelled blocks. */
.appr-list { display: flex; flex-direction: column; gap: 10px; }
.appr { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.appr-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.appr-who { font-weight: 600; color: var(--text-1); }
.appr-meta { font-size: 0.74rem; color: var(--text-3); margin-top: 2px; }
.appr-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.appr-trigger { margin: 0; padding: 2px 0 2px 12px; border-left: 2px solid var(--border-strong); color: var(--text-2); font-size: 0.84rem; }
.appr-replies { display: flex; flex-direction: column; gap: 8px; }
.appr-reply { display: flex; flex-direction: column; gap: 4px; padding: 8px 11px; background: var(--surface); border-radius: var(--radius-control); }
.appr-reply-head { display: flex; align-items: center; gap: 8px; }
.appr-reply-extra { font-size: 0.7rem; color: var(--text-3); }
.appr-reply-text { color: var(--text-1); font-size: 0.9rem; white-space: pre-wrap; }
.appr-reply-text.is-empty { color: var(--text-3); font-style: italic; }
@media (max-width: 640px) { .appr-top { flex-direction: column; } .appr-actions { width: 100%; } }
.appr-resolved { margin-top: 14px; }
.appr-resolved > summary { cursor: pointer; font-weight: 600; font-size: 0.82rem; color: var(--text-2); padding: 4px 0; }
.appr-resolved-row { display: flex; align-items: center; gap: 9px; padding: 7px 2px; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--text-2); }
.appr-resolved-snippet { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appr-resolved-time { margin-left: auto; color: var(--text-3); font-size: 0.72rem; white-space: nowrap; flex: 0 0 auto; }

/* ── htmx in-flight feedback (UXPOLISH1) ────────────────────────────────────
   Any control that issues an htmx request gets `.htmx-request` for the duration.
   Globally: prepend a spinner, dim, and block re-clicks — so no action ever feels
   "dead" while the request is in flight. Applies to every htmx button app-wide. */
@keyframes ps-spin { to { transform: rotate(360deg); } }
.btn.htmx-request, button.htmx-request { opacity: 0.7; pointer-events: none; }
.btn.htmx-request::before, button.htmx-request::before {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: ps-spin 0.6s linear infinite; vertical-align: -1px;
}
/* Forms posting via htmx (no explicit indicator button) dim gently while in flight. */
form.htmx-request { opacity: 0.85; transition: opacity 0.1s; }
/* Bug fix: .conv-item is a bare <button> covering a whole clickable inbox row (not a `.btn` action
   button), so it inherited the generic spinner above — an INSERTED ::before pseudo-element, which
   shoves the row's flex content ~18px right for the request's (near-instant) duration, then snaps
   back. Keep the dim + no-double-click protection; drop only the layout-shifting spinner itself. */
.conv-item.htmx-request::before { content: none; }
/* Follow-up: dropping the spinner outright left NO click feedback (felt unresponsive). Overlay one
   in the timestamp's own (still-reserved, just hidden) slot instead of inserting a new element — it
   can't shift anything because that slot's size never changes, spinning or not. */
.conv-item.htmx-request .conv-time { visibility: hidden; }
.conv-item.htmx-request .conv-time-wrap::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 11px; height: 11px; margin-top: -5.5px;
  border: 2px solid var(--text-3); border-right-color: transparent; border-radius: 50%;
  animation: ps-spin 0.6s linear infinite;
}

/* ADPOLL1: visible feedback while an AI draft is generating (the drafts-region self-poll). Spins for
   the whole wait, not just the ~100ms of each poll request — reuses ps-spin above. */
.draft-generating { display: flex; align-items: center; gap: 8px; padding: 6px 2px; color: var(--text-3); font-size: 0.82rem; }
.draft-spinner { display: inline-block; width: 13px; height: 13px; flex: 0 0 auto;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: ps-spin 0.6s linear infinite; }

/* License upsell — gated tabs (API keys, etc.) show this instead of the locked UI. */
.upsell { max-width: 44rem; border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--surface); padding: 18px 18px 16px; }
.upsell-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.upsell-head .ico { color: var(--accent); }
.upsell-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-1); }
.upsell-lead { color: var(--text-2); font-size: 13px; line-height: 1.55; margin: 0 0 14px; max-width: 60ch; }
.upsell-sub { font-size: 12px; font-weight: 600; color: var(--text-1); margin-bottom: 8px; }
.upsell-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.upsell-list li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.upsell-list .ico { color: var(--text-3); flex: 0 0 auto; }
.upsell-actions { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.callout { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px;
  border-radius: var(--r-control); font-size: 12px; line-height: 1.5; color: var(--text-2);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); }
.callout .ico { color: var(--accent); flex: 0 0 auto; margin-top: 1px; }

/* Base text + form utilities — referenced app-wide (95×/30×/9×) but never had a standalone rule;
   `.muted` text was inheriting body --text-2 instead of dimming, `.stack`/`.stack-form` had no gap. */
.muted { color: var(--text-3); }
.label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 5px; }
.stack { display: flex; flex-direction: column; gap: 12px; }

/* Branded error pages (404 / 500). */
.errpage { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.errpage-card { text-align: center; max-width: 30rem; }
.errpage-code { font-family: var(--font-mono); font-size: 64px; font-weight: 700; line-height: 1;
  letter-spacing: -0.04em; color: var(--accent);
  font-variant-numeric: tabular-nums; font-feature-settings: "zero" 0; }
.errpage-title { font-size: 20px; font-weight: 600; color: var(--text-1); margin: 14px 0 8px; }
.errpage-body { color: var(--text-2); font-size: 13.5px; line-height: 1.55; margin: 0 0 20px; }
.errpage-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* Theme toggle (topbar) — sun shown in dark mode (click → light), moon in light mode (click → dark). */
.theme-toggle .ico-moon { display: none; }
[data-theme="light"] .theme-toggle .ico-sun { display: none; }
[data-theme="light"] .theme-toggle .ico-moon { display: block; }