/* ────────────────────────────────────────────────────────────────────────────
 * scott_common unified shell — design tokens + sidebar/layout/KPI/panel.
 *
 * Promoted to scott_common v0.55.0 (2026-05-26) from SR-2's Wave 1.1 local
 * shell.css. Any Scott app extending ``scott_common/shell/_shell.html``
 * gets this stylesheet via {% static "scott_common/css/shell.css" %}.
 *
 * Surface/text colors pull from the global theme tokens set per-app in
 * the consumer's theme.css (referenced via brand.theme_css) — see --bg,
 * --card-bg, --text, etc. Page-local extras (the sidebar's deeper
 * background, the accent shades, the panel-tint backdrops) live here
 * and override under [data-theme="dark"] below.
 *
 * Per-app override hook: --app-primary (set inline in _shell.html when
 * brand.primary_color is configured) is available for consumers to bind
 * brand-specific accents in their per-app shell_css override.
 *
 * Class names use the historical ``sr2-`` prefix for back-compat with
 * SR-2 templates already extending the shell. A future major version
 * (1.0+) may rename to ``sc-`` once all consumer apps cut over.
 * ────────────────────────────────────────────────────────────────────────── */

:root {
  --card-2:    #ffffff;   /* sidebar surface — light: white */
  --border-2:  #e2e8f0;   /* sidebar / table inner borders */
  --accent:    #3b82f6;   /* blue-500 — selected */
  --accent-soft: #dbeafe; /* light blue tint for active row */
  --accent-fg: #1d4ed8;   /* active row text in light mode */
  --row-hover: rgba(15,23,42,.04);
  /* Per-app primary brand color — overridden inline via brand.primary_color */
  --app-primary: #3b82f6;
  /* Panel-tint base colors — KPI cards layer these under the card surface */
  --tint-ops:    rgba(59,130,246,.10);
  --tint-cust:   rgba(168,85,247,.10);
  --tint-sales:  rgba(34,197,94,.10);
  --tint-trucks: rgba(249,115,22,.10);
}

[data-theme="dark"] {
  --card-2:    #0b1220;
  --border-2:  #1f2a3a;
  --accent-soft: #1e3a8a;
  --accent-fg: #93c5fd;
  --row-hover: rgba(255,255,255,.04);
  --tint-ops:    rgba(30,58,138,.35);
  --tint-cust:   rgba(88,28,135,.35);
  --tint-sales:  rgba(20,83,45,.35);
  --tint-trucks: rgba(124,45,18,.35);
}

html, body { background: var(--bg); color: var(--text); }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--text); opacity: .85; }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.sr2-layout { display: flex; min-height: 100vh; }
.sr2-sidebar {
  width: 240px; flex: 0 0 240px;
  background: var(--card-2);
  border-right: 1px solid var(--border-2);
  display: flex; flex-direction: column;
  transition: width .2s ease, flex-basis .2s ease;
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh; overflow-y: auto;
}
body.sidebar-collapsed .sr2-sidebar { width: 64px; flex-basis: 64px; }
body.sidebar-collapsed .sr2-sidebar .sr2-sb-label,
body.sidebar-collapsed .sr2-sidebar .sr2-sb-brand-text,
body.sidebar-collapsed .sr2-sidebar .sr2-sb-subtitle { display: none; }
body.sidebar-collapsed .sr2-sidebar .sr2-sb-item { justify-content: center; padding-left: 0; padding-right: 0; }
body.sidebar-collapsed .sr2-sidebar .sr2-sb-item__icon { margin-right: 0; }

.sr2-sb-head {
  padding: 1rem; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border-2);
}
.sr2-sb-brand { display: flex; align-items: center; }
.sr2-sb-brand-link,
.sr2-sb-brand-link:hover,
.sr2-sb-brand-link:focus {
  text-decoration: none;
  color: inherit;
  display: flex;
}
.sr2-sb-brand-link:hover { opacity: 0.9; }
.sr2-header-home {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  color: var(--text-muted); background: transparent;
  text-decoration: none; font-size: 1.05rem;
  margin-right: .25rem;
}
.sr2-header-home:hover,
.sr2-header-home:focus {
  background: var(--row-hover); color: var(--text); text-decoration: none;
}
.sr2-sb-brand-mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800;
  margin-right: .65rem; flex: 0 0 auto;
}
.sr2-sb-brand-text { font-weight: 700; line-height: 1.1; }
.sr2-sb-subtitle { color: var(--text-muted); font-size: .72rem; }
.sr2-sb-collapse {
  background: none; border: 0; color: var(--text-muted); cursor: pointer;
  width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
}
.sr2-sb-collapse:hover { background: var(--row-hover); color: var(--text); }

.sr2-sb-nav { padding: .5rem 0; flex: 1 1 auto; }
.sr2-sb-item {
  display: flex; align-items: center; padding: .55rem 1rem;
  color: var(--text-muted); border-left: 3px solid transparent;
  font-size: .9rem;
}
.sr2-sb-item__icon { width: 20px; margin-right: .75rem; text-align: center; font-size: 1.05rem; flex: 0 0 20px; }
.sr2-sb-item:hover { background: var(--row-hover); color: var(--text); }
.sr2-sb-item.active {
  background: var(--accent-soft);
  color: var(--accent-fg);
  border-left-color: var(--accent);
}
/* v0.58.0 — recent (not-pinned) items render slightly muted to visually
 * distinguish from the pinned set above them. */
.sr2-sb-item--recent .sr2-sb-item__icon,
.sr2-sb-item--recent .sr2-sb-label { opacity: .85; }
.sr2-sb-item--recent:hover { opacity: 1; }

/* v0.58.0 — pin toggle button in page header. */
.sc-pin-toggle {
  background: none; border: 0; padding: .15rem .35rem; cursor: pointer;
  color: var(--text-muted); font-size: 1.1rem; line-height: 1;
}
.sc-pin-toggle:hover { color: var(--accent); }
.sc-pin-toggle .bi-star-fill { color: var(--scott-warning, #f59e0b); }

.sr2-sb-foot { padding: .5rem 0; border-top: 1px solid var(--border-2); }
.sr2-sb-foot form { margin: 0; }
.sr2-sb-foot button.sr2-sb-item {
  background: none; border: 0; width: 100%; text-align: left; cursor: pointer;
  font: inherit;
}

/* ── Main area ───────────────────────────────────────────────────────────── */
/* v0.56.3 — explicit bg + text so the content slot itself carries dark-mode
 * tokens. Body already does this (line 51) but consumer pages occasionally
 * paint their own light backgrounds via Bootstrap utilities; tokenizing the
 * main wrapper guarantees a tokenized backdrop regardless. */
.sr2-main {
  flex: 1 1 auto; min-width: 0; padding: 1.5rem 2rem 3rem;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.sr2-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.sr2-header h1 { margin: 0; font-size: 1.75rem; font-weight: 700; }
.sr2-header .sr2-subtitle { color: var(--text-muted); margin-top: .25rem; }

.sr2-header-actions { display: flex; align-items: center; gap: 1rem; }
.sr2-bell { position: relative; color: var(--text-muted); font-size: 1.4rem; cursor: pointer; }
.sr2-bell .sr2-bell-dot {
  position: absolute; top: -3px; right: -6px;
  background: #ef4444; color: #fff;
  border-radius: 999px; min-width: 18px; height: 18px;
  font-size: .7rem; font-weight: 700; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
}
.sr2-avatar {
  width: 40px; height: 40px; border-radius: 999px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* ── KPI tiles (top row) ─────────────────────────────────────────────────── */
.sr2-kpi-row { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 1.5rem; }
@media (max-width: 992px) { .sr2-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sr2-kpi-row { grid-template-columns: 1fr; } }
.sr2-kpi {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 14px; padding: 1.25rem; position: relative;
}
.sr2-kpi__icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-size: 1.4rem; margin-bottom: .9rem;
}
.sr2-kpi__value { font-size: 2rem; font-weight: 700; line-height: 1; }
.sr2-kpi__label { color: var(--text-muted); margin-top: .35rem; font-size: .9rem; }
.sr2-kpi__chip {
  position: absolute; top: 1.1rem; right: 1.1rem;
  font-size: .75rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px;
}
.sr2-kpi__chip--up { background: rgba(34,197,94,.18); color: #4ade80; }
.sr2-kpi__chip--down { background: rgba(239,68,68,.18); color: #f87171; }

.sr2-kpi--ops    .sr2-kpi__icon { background: #3b82f6; }
.sr2-kpi--cust   .sr2-kpi__icon { background: #a855f7; }
.sr2-kpi--sales  .sr2-kpi__icon { background: #22c55e; }
.sr2-kpi--trucks .sr2-kpi__icon { background: #f97316; }
.sr2-kpi--ops    { background: linear-gradient(135deg, var(--tint-ops),    var(--card-bg)); }
.sr2-kpi--cust   { background: linear-gradient(135deg, var(--tint-cust),   var(--card-bg)); }
.sr2-kpi--sales  { background: linear-gradient(135deg, var(--tint-sales),  var(--card-bg)); }
.sr2-kpi--trucks { background: linear-gradient(135deg, var(--tint-trucks), var(--card-bg)); }

/* ── Department panel grid ───────────────────────────────────────────────── */
.sr2-panels { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.5rem; }
@media (max-width: 992px) { .sr2-panels { grid-template-columns: 1fr; } }
.sr2-panel { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; overflow: hidden; }
.sr2-panel__head {
  padding: .85rem 1.1rem; color: #fff; display: flex; align-items: center;
  font-weight: 700; font-size: 1.02rem;
}
.sr2-panel__head i { margin-right: .55rem; font-size: 1.2rem; }
.sr2-panel__body { padding: .35rem 0; }
.sr2-panel__row {
  display: flex; align-items: center; padding: .65rem 1.1rem;
  color: var(--text); border-top: 1px solid var(--border-2);
}
.sr2-panel__row:first-child { border-top: 0; }
.sr2-panel__row i { width: 22px; color: var(--text-muted); margin-right: .65rem; }
.sr2-panel__row:hover { background: var(--row-hover); }
.sr2-panel__row:hover i { color: var(--text-soft); }
.sr2-panel__row-label { flex: 1 1 auto; }
.sr2-panel__row-badge {
  background: rgba(148,163,184,.15); color: var(--text);
  padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
  margin-left: .5rem;
}

.sr2-grad--ops      { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.sr2-grad--crm      { background: linear-gradient(135deg, #ec4899, #db2777); }
.sr2-grad--sales    { background: linear-gradient(135deg, #10b981, #059669); }
.sr2-grad--logistics{ background: linear-gradient(135deg, #f97316, #ea580c); }
.sr2-grad--compliance{ background: linear-gradient(135deg, #ef4444, #dc2626); }
.sr2-grad--reports  { background: linear-gradient(135deg, #a855f7, #9333ea); }
.sr2-grad--hr       { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.sr2-grad--marketing{ background: linear-gradient(135deg, #f43f5e, #e11d48); }

/* ── Recent pickups full-width table ─────────────────────────────────────── */
.sr2-recent { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; overflow: hidden; }
.sr2-recent__head { padding: .85rem 1.1rem; color: #fff; display: flex; align-items: center; font-weight: 700; }
.sr2-recent__head i { margin-right: .55rem; }
.sr2-recent table { width: 100%; border-collapse: collapse; }
.sr2-recent th, .sr2-recent td {
  padding: .75rem 1.1rem; border-top: 1px solid var(--border-2); text-align: left; font-size: .9rem;
}
.sr2-recent th { color: var(--text-muted); font-weight: 600; }
.sr2-recent td a { color: #2563eb; }
[data-theme="dark"] .sr2-recent td a { color: #93c5fd; }
.sr2-recent td a:hover { text-decoration: underline; opacity: .85; }
.sr2-recent td .sr2-empty { color: var(--text-muted); }

/* Tooltip on collapsed sidebar icons */
.sr2-sb-item[title] { position: relative; }

/* ────────────────────────────────────────────────────────────────────────────
 * Onboarding tour — v0.62.0 first-login modal walkthrough.
 *
 * 3-step modal rendered into the unified shell. Theme-aware via tokens; no
 * hard-coded colors. Bootstrap-modal-ish markup but standalone (no JS dep
 * on Bootstrap's modal manager).
 * ──────────────────────────────────────────────────────────────────────── */

.sc-onboarding-tour {
  position: fixed; inset: 0; z-index: 1080;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: scOnboardingFadeIn .18s ease-out;
}
.sc-onboarding-tour.is-dismissed { animation: scOnboardingFadeOut .22s ease-in forwards; }

@keyframes scOnboardingFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scOnboardingFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.sc-onboarding-tour__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
}
[data-theme="dark"] .sc-onboarding-tour__backdrop {
  background: rgba(0, 0, 0, .65);
}

.sc-onboarding-tour__dialog {
  position: relative; z-index: 1;
  width: 100%; max-width: 560px;
}

.sc-onboarding-tour__card {
  background: var(--card-bg, #fff);
  color: var(--text, #0f172a);
  border: 1px solid var(--card-border, #e2e8f0);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .35);
  padding: 1.5rem 1.75rem 1.25rem;
  display: flex; flex-direction: column;
  max-height: 92vh; overflow-y: auto;
}
[data-theme="dark"] .sc-onboarding-tour__card {
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}

/* Progress dots */
.sc-onboarding-tour__progress {
  display: flex; justify-content: center; gap: .4rem;
  margin-bottom: 1.1rem;
}
.sc-onboarding-tour__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border-2, #e2e8f0);
  transition: background-color .2s ease, transform .2s ease;
}
.sc-onboarding-tour__dot.is-active {
  background: var(--app-primary, var(--accent, #3b82f6));
  transform: scale(1.2);
}

/* Step content */
.sc-onboarding-tour__step { display: none; }
.sc-onboarding-tour__step.is-active { display: block; }

.sc-onboarding-tour__icon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--accent-soft, #dbeafe);
  color: var(--accent-fg, #1d4ed8);
  font-size: 1.6rem;
  margin: 0 auto .9rem;
}

.sc-onboarding-tour__title {
  margin: 0 0 .85rem; text-align: center;
  font-size: 1.35rem; font-weight: 700; line-height: 1.25;
  color: var(--text, #0f172a);
}

.sc-onboarding-tour__body {
  color: var(--text, #0f172a);
  font-size: .95rem; line-height: 1.55;
}
.sc-onboarding-tour__body p { margin: 0 0 .75rem; }
.sc-onboarding-tour__body p:last-child { margin-bottom: 0; }

.sc-onboarding-tour__list {
  margin: .25rem 0 .25rem; padding-left: 1.25rem;
}
.sc-onboarding-tour__list li {
  margin-bottom: .55rem; line-height: 1.5;
}
.sc-onboarding-tour__list li:last-child { margin-bottom: 0; }
.sc-onboarding-tour__list strong { color: var(--text, #0f172a); }

/* Step 2 — Work Punch vs Station split */
.sc-onboarding-tour__split {
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
  margin: .9rem 0;
}
@media (max-width: 480px) {
  .sc-onboarding-tour__split { grid-template-columns: 1fr; }
}
.sc-onboarding-tour__pill {
  display: flex; flex-direction: column; gap: .25rem;
  padding: .85rem .95rem;
  border-radius: 10px;
  border: 1px solid var(--card-border, #e2e8f0);
  background: var(--card-2, #fff);
}
.sc-onboarding-tour__pill i {
  font-size: 1.25rem;
  color: var(--app-primary, var(--accent, #3b82f6));
}
.sc-onboarding-tour__pill--work i { color: #2563eb; }
.sc-onboarding-tour__pill--station i { color: #7c3aed; }
.sc-onboarding-tour__pill strong { font-size: .95rem; font-weight: 700; }
.sc-onboarding-tour__pill small {
  font-size: .82rem; line-height: 1.45;
  color: var(--text-muted, #64748b);
}

.sc-onboarding-tour__note {
  margin-top: .85rem;
  padding: .65rem .85rem;
  background: var(--accent-soft, #dbeafe);
  color: var(--accent-fg, #1d4ed8);
  border-radius: 8px;
  font-size: .88rem; line-height: 1.5;
}
[data-theme="dark"] .sc-onboarding-tour__note {
  background: rgba(59, 130, 246, .12);
  color: #93c5fd;
}

.sc-onboarding-tour__body kbd {
  display: inline-block;
  padding: .08rem .4rem;
  border: 1px solid var(--card-border, #cbd5e1);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--card-2, #f8fafc);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .82rem;
  color: var(--text, #0f172a);
}

/* Footer */
.sc-onboarding-tour__footer {
  margin-top: 1.25rem;
  padding-top: .9rem;
  border-top: 1px solid var(--card-border, #e2e8f0);
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
}

.sc-onboarding-tour__skip {
  background: transparent; border: 0;
  color: var(--text-muted, #64748b);
  font-size: .88rem;
  cursor: pointer;
  padding: .4rem .25rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sc-onboarding-tour__skip:hover { color: var(--text, #0f172a); }

.sc-onboarding-tour__nav {
  display: flex; gap: .5rem;
}

.sc-onboarding-tour__btn {
  border: 1px solid transparent;
  padding: .5rem 1.1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease;
}
.sc-onboarding-tour__btn:disabled {
  opacity: .4; cursor: not-allowed;
}
.sc-onboarding-tour__btn--primary {
  background: var(--app-primary, var(--accent, #3b82f6));
  color: #fff;
}
.sc-onboarding-tour__btn--primary:hover:not(:disabled) { opacity: .9; }
.sc-onboarding-tour__btn--secondary {
  background: var(--card-2, #fff);
  color: var(--text, #0f172a);
  border-color: var(--card-border, #e2e8f0);
}
.sc-onboarding-tour__btn--secondary:hover:not(:disabled) {
  background: var(--row-hover, rgba(15,23,42,.04));
}

/* ── Ask Scott AI drawer (v0.68.0 — Phase 8) ─────────────────────────────── */

/* Header trigger — ``?`` button before the bell. */
.sc-ask-scott-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--accent-soft, rgba(99,102,241,.12));
  color: var(--accent-fg, var(--text));
  border: 0; cursor: pointer;
  font-size: 1.05rem; font-weight: 700; line-height: 1;
  transition: background .15s ease, transform .15s ease;
}
.sc-ask-scott-trigger:hover,
.sc-ask-scott-trigger:focus {
  background: var(--accent, #6366f1); color: #fff; outline: none;
  transform: translateY(-1px);
}
.sc-ask-scott-trigger[aria-expanded="true"] {
  background: var(--accent, #6366f1); color: #fff;
}

/* Slide-in drawer. Fixed to right edge, 360px wide, full-height. */
.sc-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 360px; max-width: 100vw;
  background: var(--card-bg, #fff);
  color: var(--text, #111);
  border-left: 1px solid var(--card-border, #e5e7eb);
  box-shadow: -8px 0 24px rgba(15, 23, 42, .12);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .2s ease;
  z-index: 1080;
}
.sc-drawer[hidden] { display: none; }
.sc-drawer.is-open { transform: translateX(0); }
[data-theme="dark"] .sc-drawer { box-shadow: -8px 0 24px rgba(0,0,0,.5); }

.sc-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border-2, #e5e7eb);
  background: var(--card-bg, #fff);
}
.sc-drawer__head h3 {
  margin: 0; font-size: 1.05rem; font-weight: 700;
}
.sc-drawer__close {
  background: none; border: 0; cursor: pointer;
  color: var(--text-muted, #6b7280); font-size: 1.6rem; line-height: 1;
  width: 32px; height: 32px; border-radius: 6px;
}
.sc-drawer__close:hover { background: var(--row-hover, rgba(0,0,0,.04)); color: var(--text); }

.sc-drawer__body {
  flex: 1 1 auto; overflow-y: auto;
  padding: 1rem;
  display: flex; flex-direction: column; gap: .75rem;
  font-size: .92rem; line-height: 1.5;
}
.sc-ask-scott__intro { color: var(--text-muted, #6b7280); }
.sc-ask-scott__intro p { margin: 0 0 .35rem; }
.sc-ask-scott__hint { font-size: .82rem; opacity: .85; }

.sc-ask-scott__turn { display: flex; flex-direction: column; gap: .35rem; }
.sc-ask-scott__q {
  background: var(--accent-soft, rgba(99,102,241,.12));
  color: var(--text, #111);
  padding: .5rem .75rem; border-radius: 10px;
  align-self: flex-end; max-width: 92%;
  white-space: pre-wrap; word-wrap: break-word;
}
.sc-ask-scott__a {
  background: var(--bg-2, rgba(0,0,0,.03));
  color: var(--text, #111);
  padding: .5rem .75rem; border-radius: 10px;
  align-self: flex-start; max-width: 100%;
  white-space: pre-wrap; word-wrap: break-word;
}
.sc-ask-scott__sources {
  font-size: .78rem; color: var(--text-muted, #6b7280);
  display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
}
.sc-ask-scott__sources strong { font-weight: 600; }
.sc-ask-scott__source-chip {
  background: var(--bg-2, rgba(0,0,0,.04));
  padding: .1rem .45rem; border-radius: 999px;
  font-size: .72rem;
}
.sc-ask-scott__error {
  color: #b91c1c; background: rgba(239,68,68,.08);
  padding: .5rem .75rem; border-radius: 10px;
}

.sc-drawer__foot {
  border-top: 1px solid var(--border-2, #e5e7eb);
  padding: .75rem 1rem;
  background: var(--card-bg, #fff);
}
.sc-drawer__foot form { margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.sc-drawer__foot textarea {
  width: 100%;
  resize: vertical;
  min-height: 56px;
  padding: .5rem .65rem;
  border: 1px solid var(--border-2, #d1d5db);
  border-radius: 8px;
  font: inherit;
  background: var(--bg, #fff);
  color: var(--text, #111);
}
.sc-drawer__foot textarea:focus {
  outline: 2px solid var(--accent, #6366f1); outline-offset: 1px;
  border-color: transparent;
}

.sc-ask-scott__bar {
  display: flex; align-items: center; justify-content: space-between;
}
.sc-ask-scott__quota {
  font-size: .78rem; color: var(--text-muted, #6b7280);
}
.sc-ask-scott__quota.is-warn { color: #b45309; }
.sc-ask-scott__quota.is-exhausted { color: #b91c1c; font-weight: 600; }
.sc-ask-scott__submit {
  background: var(--accent, #6366f1); color: #fff;
  border: 0; padding: .45rem 1rem; border-radius: 8px;
  font-weight: 600; cursor: pointer;
}
.sc-ask-scott__submit:hover:not(:disabled) { filter: brightness(1.05); }
.sc-ask-scott__submit:disabled { opacity: .55; cursor: not-allowed; }

/* Mobile — drawer fills full width. */
@media (max-width: 600px) {
  .sc-drawer { width: 100vw; border-left: none; }
}

/* v0.68.1 — Header hamburger toggle (always visible). Restores the
   sidebar from collapsed state when the in-sidebar X is no longer
   reachable. Mirrors .sr2-bell + .sr2-header-home button styling. */
.sr2-header-menu {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--card-border);
  width: 36px; height: 36px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
}
.sr2-header-menu:hover { background: var(--row-hover); }