/* ══════════════════════════════════════════════════
   DISPATCH v1 — Design System (mockup6)
   Dark grey base, slate silver text, service colors
   ══════════════════════════════════════════════════ */

:root {
  --bg-deep: #141414;
  --bg-panel: #1a1a1a;
  --bg-surface: #212121;
  --bg-elevated: #2a2a2a;
  --border: #333333;
  --border-light: #3d3d3d;
  --text-pri: #E2E8F0;
  --text-sec: #CBD5E1;
  --text-mut: #94A3B8;
  --red: #EF4444;
  --red-dim: rgba(239,68,68,0.08);
  --green: #22C55E;
  --green-dim: rgba(34,197,94,0.08);
  --amber: #F59E0B;
  --amber-dim: rgba(245,158,11,0.08);
  --police: #2563EB;
  --police-dim: rgba(37,99,235,0.10);
  --fire: #DC2626;
  --fire-dim: rgba(220,38,38,0.10);
  --ems: #16A34A;
  --ems-dim: rgba(22,163,74,0.10);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 20px;
  --transition: 180ms ease;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font); background:var(--bg-deep); color:var(--text-pri); min-height:100vh; line-height:1.5; }
a { color:var(--text-sec); text-decoration:none; }
a:hover { color:var(--text-pri); }

/* ── Animations ── */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
@keyframes flash-red { 0%,100%{opacity:1;box-shadow:0 0 4px rgba(239,68,68,0.6)} 50%{opacity:0.4;box-shadow:0 0 1px rgba(239,68,68,0.2)} }
@keyframes fade-in { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

/* ══════════ HEADER ══════════ */
.header { background:var(--bg-panel); border-bottom:1px solid var(--border); padding:0 24px; height:60px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; }
.header-left { display:flex; align-items:center; gap:14px; }
.logo { width:38px; height:38px; border-radius:var(--radius-sm); object-fit:contain; }
.brand { display:flex; flex-direction:column; }
.brand-name { font-size:17px; font-weight:700; letter-spacing:4px; color:var(--text-pri); }
.brand-sub { font-size:10px; color:var(--text-sec); letter-spacing:1.5px; font-weight:500; opacity:0.7; }
.header-right { display:flex; align-items:center; gap:12px; }
.header-nav { display:flex; align-items:center; gap:8px; }
.nav-link { font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:1px; padding:6px 14px; border-radius:var(--radius-sm); border:1px solid var(--border); color:var(--text-sec); transition:var(--transition); text-transform:uppercase; }
.nav-link:hover { border-color:var(--text-mut); color:var(--text-pri); }
.nav-link.active { background:rgba(226,232,240,0.06); border-color:rgba(226,232,240,0.15); color:var(--text-pri); }
.admin-link { color:var(--amber) !important; border-color:rgba(245,158,11,0.25) !important; }
.admin-link:hover { border-color:var(--amber) !important; }
.hdr-clock { font-family:var(--mono); font-size:12px; color:var(--text-sec); }
.hdr-divider { width:1px; height:24px; background:var(--border); }
.engine-status { font-family:var(--mono); font-size:10px; font-weight:600; padding:5px 12px; border-radius:var(--radius-pill); letter-spacing:1px; display:flex; align-items:center; gap:6px; }
.engine-active { color:var(--green); border:1px solid rgba(34,197,94,0.25); background:rgba(34,197,94,0.06); }
.engine-active::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse 2s infinite; }
.engine-idle { color:var(--red); border:1px solid rgba(239,68,68,0.25); background:rgba(239,68,68,0.06); }

/* ── Mobile hamburger ── */
.menu-btn { display:none; background:none; border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px; cursor:pointer; color:var(--text-pri); }
.menu-btn svg { display:block; }


/* ══════════ STATS STRIP ══════════ */
.stats-strip { display:flex; gap:1px; background:var(--border); border-bottom:1px solid var(--border); }
.stat-card { flex:1; background:var(--bg-panel); padding:14px 12px; text-align:center; }
.stat-num { font-family:var(--mono); font-size:22px; font-weight:600; }
.stat-lbl { font-family:var(--mono); font-size:9px; color:var(--text-mut); letter-spacing:2px; text-transform:uppercase; margin-top:4px; }
.n-pri { color:var(--text-pri); }
.n-sec { color:var(--text-sec); }
.n-green { color:var(--green); }
.n-red { color:var(--red); }
.n-amber { color:var(--amber); }

/* ══════════ FILTER CHIPS ══════════ */
.chip-bar { display:flex; gap:8px; padding:14px 24px; overflow-x:auto; background:var(--bg-deep); border-bottom:1px solid var(--border); -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.chip-bar::-webkit-scrollbar { display:none; }
.chip { font-family:var(--font); font-size:12px; font-weight:500; padding:7px 16px; border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--bg-surface); color:var(--text-sec); cursor:pointer; white-space:nowrap; transition:var(--transition); user-select:none; }
.chip:hover { border-color:var(--text-mut); color:var(--text-pri); }
.chip.active { background:rgba(226,232,240,0.06); border-color:rgba(226,232,240,0.15); color:var(--text-pri); }
.chip.active-red { background:var(--red-dim); border-color:rgba(239,68,68,0.3); color:var(--red); }
.chip-search { position:relative; flex:1; min-width:180px; }
.chip-search input { width:100%; font-family:var(--font); font-size:13px; padding:8px 14px 8px 34px; background:var(--bg-elevated); color:var(--text-pri); border:1px solid var(--border); border-radius:var(--radius-pill); outline:none; transition:var(--transition); }
.chip-search input:focus { border-color:var(--text-mut); }
.chip-search input::placeholder { color:var(--text-mut); }
.chip-search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-mut); font-size:13px; pointer-events:none; }

/* ══════════ LAYOUT ══════════ */
.layout { display:flex; max-width:1300px; margin:0 auto; padding:20px 24px; gap:20px; }
.main-col { flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; }
.side-col { width:300px; flex-shrink:0; }

/* ══════════ LIVE DRAWER ══════════ */
.live-drawer { border:1px solid rgba(34,197,94,0.2); border-radius:var(--radius); overflow:hidden; background:var(--bg-surface); }
.live-hdr { display:flex; align-items:center; gap:10px; padding:11px 16px; cursor:pointer; transition:var(--transition); user-select:none; }
.live-hdr:hover { background:rgba(34,197,94,0.03); }
.live-pulse { width:9px; height:9px; border-radius:50%; background:var(--green); animation:pulse 2s infinite; flex-shrink:0; }
.live-title { font-family:var(--mono); font-size:12px; font-weight:600; color:var(--green); letter-spacing:1px; flex:1; }
.live-arrow { display:inline-block; width:7px; height:7px;
  border-top:2px solid var(--text-mut); border-right:2px solid var(--text-mut);
  transform:rotate(45deg); transition:transform 0.2s; vertical-align:middle;
  margin-bottom:2px; pointer-events:none; }
.live-arrow.open { transform:rotate(135deg); margin-bottom:0; margin-top:2px; }
.live-body { border-top:1px solid var(--border); padding:10px; display:none; flex-direction:column; gap:8px; }
.live-body.open { display:flex; }
.live-mini { background:var(--bg-elevated); border-radius:var(--radius-sm); padding:10px 14px; border-left:3px solid var(--green); transition:var(--transition); }
.live-mini:hover { background:var(--border); }
.live-mini-tg { font-size:12px; font-weight:600; color:var(--text-pri); }
.live-mini-text { font-size:11px; color:var(--text-sec); margin-top:3px; line-height:1.4; }
.live-mini-meta { font-family:var(--mono); font-size:10px; color:var(--text-mut); margin-top:5px; }

/* ══════════ INCIDENT CARD ══════════ */
.card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:var(--transition); animation:fade-in 0.2s ease; }
.card:hover { background:var(--bg-elevated); border-color:var(--border-light); }
.card-accent { height:3px; }
.card-accent-law { background:var(--police); }
.card-accent-fire { background:var(--fire); }
.card-accent-ems { background:var(--ems); }
.card-accent-dispatch { background:var(--text-mut); }
.card-accent-other { background:var(--text-mut); }
.card-inner { padding:16px 18px; }
.card-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; }
.card-left { display:flex; align-items:center; gap:10px; }
.card-tg-info { }
.card-tg { font-size:14px; font-weight:600; color:var(--text-pri); }
.card-tgid { font-family:var(--mono); font-size:10px; color:var(--text-mut); margin-top:2px; }
.card-time { font-family:var(--mono); font-size:11px; color:var(--text-mut); white-space:nowrap; }

/* Service badge */
.svc-badge { font-family:var(--mono); font-size:9px; font-weight:700; padding:4px 10px; border-radius:6px; letter-spacing:1.5px; flex-shrink:0; }
.svc-law { background:var(--police-dim); color:var(--police); border:1px solid rgba(37,99,235,0.2); }
.svc-fire { background:var(--fire-dim); color:var(--fire); border:1px solid rgba(220,38,38,0.2); }
.svc-ems { background:var(--ems-dim); color:var(--ems); border:1px solid rgba(22,163,74,0.2); }
.svc-dispatch { background:rgba(148,163,184,0.08); color:var(--text-mut); border:1px solid rgba(148,163,184,0.12); }
.svc-other { background:rgba(148,163,184,0.08); color:var(--text-mut); border:1px solid rgba(148,163,184,0.12); }

/* AI Summary */
.ai-summary { margin-bottom:12px; padding:10px 14px; background:var(--bg-elevated); border-radius:var(--radius-sm); border:1px solid var(--border); }
.ai-label { font-family:var(--mono); font-size:9px; font-weight:600; color:var(--text-mut); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:6px; }
.ai-text { font-size:13px; color:var(--text-sec); line-height:1.6; }

/* Transcript */
.transcript-toggle { font-family:var(--mono); font-size:10px; color:var(--text-mut); cursor:pointer; display:flex; align-items:center; gap:6px; padding:6px 0; border:none; background:none; transition:var(--transition); }
.transcript-toggle:hover { color:var(--text-pri); }
.transcript-toggle .arrow { transition:transform 0.2s; display:inline-block; }
.transcript-toggle.open .arrow { transform:rotate(90deg); }
.transcript-body { font-family:var(--mono); font-size:11px; color:var(--text-sec); line-height:1.7; padding:10px 14px; background:var(--bg-deep); border-radius:var(--radius-sm); border:1px solid var(--border); margin-top:6px; display:none; max-height:400px; overflow-y:auto; }
.transcript-body.open { display:block; }
.transcript-body .unit-tag { color:var(--text-pri); font-weight:600; }
.transcript-body .tx-line { margin-bottom:8px; }
.transcript-body .tx-line:last-child { margin-bottom:0; }
.transcript-body .tx-time { color:var(--text-mut); font-size:10px; margin-left:6px; }

/* Card footer */
.card-foot { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top:10px; border-top:1px solid var(--border); }
.tag { font-family:var(--mono); font-size:10px; font-weight:600; padding:3px 10px; border-radius:6px; letter-spacing:0.5px; display:inline-flex; align-items:center; gap:5px; }
.t-emrg { background:var(--red-dim); color:var(--red); }
.t-tact { background:rgba(59,130,246,0.08); color:#3B82F6; }
.t-rout { background:rgba(226,232,240,0.06); color:var(--text-sec); }
.t-admn { background:rgba(148,163,184,0.06); color:var(--text-mut); }
.t-flag { background:var(--red-dim); color:var(--red); }
.flag-light { width:8px; height:8px; border-radius:50%; background:var(--red); animation:flash-red 1.5s infinite; display:inline-block; flex-shrink:0; }
.flag-light-sm { width:6px; height:6px; }
.conf-pill { font-family:var(--mono); font-size:10px; color:var(--text-mut); display:inline-flex; align-items:center; gap:4px; }
.conf-dot { width:7px; height:7px; border-radius:50%; display:inline-block; flex-shrink:0; }
.conf-green { background:var(--green); }
.conf-yellow { background:var(--amber); }
.conf-red { background:var(--red); }
.card-meta { font-family:var(--mono); font-size:10px; color:var(--text-mut); margin-left:auto; }
.card-actions { display:flex; gap:6px; margin-left:auto; }
.act-btn { font-family:var(--mono); font-size:10px; color:var(--text-sec); background:rgba(226,232,240,0.04); border:1px solid var(--border); padding:5px 14px; border-radius:6px; cursor:pointer; transition:var(--transition); text-decoration:none; display:inline-block; }
.act-btn:hover { background:rgba(226,232,240,0.08); border-color:var(--border-light); color:var(--text-pri); }

/* Flag message */
.flag-msg { font-size:11px; color:var(--red); padding:6px 10px; margin-top:10px; background:var(--red-dim); border-radius:6px; display:flex; align-items:center; gap:6px; }

/* ══════════ SIDEBAR ══════════ */
.side-col { position:sticky; top:80px; align-self:flex-start; max-height:calc(100vh - 100px); }
.side-panel { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; max-height:calc(100vh - 120px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.side-panel::-webkit-scrollbar { width:4px; }
.side-panel::-webkit-scrollbar-track { background:transparent; }
.side-panel::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.flagged-item:hover { background:var(--bg-elevated); border-radius:var(--radius-sm); margin:0 -8px; padding:12px 8px; }
.side-title { font-family:var(--mono); font-size:10px; font-weight:600; color:var(--text-mut); letter-spacing:2px; text-transform:uppercase; margin-bottom:14px; }
.flagged-item { padding:12px 0; border-bottom:1px solid var(--border); }
.flagged-item:last-child { border-bottom:none; }
.flagged-svc { display:inline-block; font-family:var(--mono); font-size:8px; font-weight:700; padding:2px 8px; border-radius:4px; letter-spacing:1px; margin-bottom:4px; }
.flagged-cat { font-size:11px; font-weight:600; color:var(--red); margin-bottom:4px; display:flex; align-items:center; gap:5px; }
.flagged-text { font-size:12px; color:var(--text-sec); line-height:1.4; }
.flagged-meta { font-family:var(--mono); font-size:10px; color:var(--text-mut); margin-top:6px; }
.flagged-empty { font-size:12px; color:var(--text-mut); text-align:center; padding:20px 0; }

/* ══════════ EMPTY STATE ══════════ */
.empty-state { text-align:center; padding:60px 20px; color:var(--text-mut); }
.empty-state h2 { color:var(--text-sec); margin-bottom:8px; font-size:18px; font-weight:600; }
.empty-state p { font-size:13px; }

/* ══════════ AUTH PAGES ══════════ */
.auth-container { max-width:420px; margin:60px auto; padding:0 20px; }
.auth-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px; }
.auth-title { font-size:20px; font-weight:700; margin-bottom:4px; color:var(--text-pri); }
.auth-subtitle { font-size:13px; color:var(--text-mut); margin-bottom:24px; }
.auth-logo { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.auth-logo img { width:36px; height:36px; }
.auth-logo .brand-name { font-size:16px; letter-spacing:3px; }
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:12px; font-weight:500; color:var(--text-sec); margin-bottom:6px; }
.form-input { width:100%; padding:10px 14px; background:var(--bg-elevated); color:var(--text-pri); border:1px solid var(--border); border-radius:var(--radius-sm); font-family:var(--font); font-size:14px; outline:none; transition:var(--transition); }
.form-input:focus { border-color:var(--text-mut); }
.form-input::placeholder { color:var(--text-mut); }
.form-btn { width:100%; padding:12px; background:var(--police); color:#fff; border:none; border-radius:var(--radius-sm); font-family:var(--font); font-size:14px; font-weight:600; cursor:pointer; transition:var(--transition); margin-top:8px; }
.form-btn:hover { background:#1d4ed8; }
.form-link { font-size:12px; color:var(--text-mut); text-align:center; margin-top:16px; display:block; }
.form-link a { color:var(--text-sec); }
.form-link a:hover { color:var(--text-pri); }
.form-error { background:var(--red-dim); color:var(--red); padding:10px 14px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:16px; }
.form-success { background:var(--green-dim); color:var(--green); padding:10px 14px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:16px; }

/* ══════════ SETTINGS PAGE ══════════ */
.settings-container { max-width:800px; margin:0 auto; padding:20px 24px; }
.settings-section { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:16px; }
.settings-section-title { font-family:var(--mono); font-size:11px; font-weight:600; color:var(--text-mut); letter-spacing:2px; text-transform:uppercase; margin-bottom:16px; }
.county-group { margin-bottom:16px; }
.county-name { font-size:14px; font-weight:600; color:var(--text-pri); margin-bottom:8px; cursor:pointer; display:flex; align-items:center; gap:8px; }
.county-name .arrow { font-size:10px; color:var(--text-mut); transition:transform 0.2s; }
.county-name .arrow.open { transform:rotate(90deg); }
.county-tgs { padding-left:8px; display:none; }
.county-tgs.open { display:block; }
.tg-check { display:flex; align-items:center; gap:10px; padding:6px 0; }
.tg-check input[type="checkbox"] { width:18px; height:18px; accent-color:var(--police); cursor:pointer; }
.tg-check label { font-size:13px; color:var(--text-sec); cursor:pointer; flex:1; }
.tg-type-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.tg-type-law { background:var(--police); }
.tg-type-fire { background:var(--fire); }
.tg-type-ems { background:var(--ems); }
.tg-type-other { background:var(--text-mut); }
.county-actions { display:flex; gap:8px; margin-bottom:8px; padding-left:8px; }
.county-actions button { font-family:var(--mono); font-size:10px; padding:4px 10px; border-radius:4px; border:1px solid var(--border); background:var(--bg-elevated); color:var(--text-mut); cursor:pointer; transition:var(--transition); }
.county-actions button:hover { color:var(--text-pri); border-color:var(--border-light); }
.settings-save { display:flex; justify-content:flex-end; padding-top:8px; }
.settings-save .form-btn { width:auto; padding:10px 32px; }
.settings-msg { font-family:var(--mono); font-size:12px; margin-right:12px; display:inline-flex; align-items:center; }
.settings-msg.ok { color:var(--green); }
.settings-msg.err { color:var(--red); }

/* Push toggle */
.push-toggle { display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.push-label { font-size:13px; color:var(--text-sec); }
.push-status { font-family:var(--mono); font-size:11px; color:var(--text-mut); }
.toggle-switch { position:relative; width:44px; height:24px; cursor:pointer; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-track { position:absolute; top:0; left:0; right:0; bottom:0; background:var(--border); border-radius:12px; transition:var(--transition); }
.toggle-switch input:checked + .toggle-track { background:var(--green); }
.toggle-knob { position:absolute; top:2px; left:2px; width:20px; height:20px; background:#fff; border-radius:50%; transition:var(--transition); }
.toggle-switch input:checked ~ .toggle-knob { left:22px; }

/* ══════════ MOBILE DRAWER ══════════ */
.drawer-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:998; }
.drawer-overlay.open { display:block; }
.drawer { position:fixed; top:0; right:-280px; width:280px; height:100%; z-index:999; background:var(--bg-panel); border-left:1px solid var(--border); transition:right 0.25s ease; display:flex; flex-direction:column; overflow-y:auto; }
.drawer.open { right:0; }
.drawer-hdr { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.drawer-close { background:none; border:none; color:var(--text-mut); font-size:24px; cursor:pointer; }
.drawer-nav { padding:16px 20px; display:flex; flex-direction:column; gap:8px; }
.drawer-nav a { display:block; text-align:center; padding:10px 14px; font:700 12px var(--mono); letter-spacing:1px; color:var(--text-sec); background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-sm); text-transform:uppercase; transition:var(--transition); }
.drawer-nav a:hover { border-color:var(--text-mut); color:var(--text-pri); }

/* ══════════ MOBILE RESPONSIVE ══════════ */
@media (max-width: 900px) {
  .layout { flex-direction:column; padding:10px; gap:10px; }
  .side-col { display:none; }
  .header { padding:0 12px; height:52px; }
  .header-nav { display:none; }
  .menu-btn { display:block; }
  .brand-name { font-size:14px; letter-spacing:3px; }
  .brand-sub { display:none; }
  .stats-strip .stat-card { padding:10px 4px; }
  .stats-strip .stat-num { font-size:17px; }
  .chip-bar { padding:10px 10px; gap:6px; }
  .chip { font-size:11px; padding:6px 12px; }
  .card-inner { padding:12px 14px; }
  .card-top { flex-direction:column; gap:6px; }
  .card-actions { margin-left:0; width:100%; }
  .card-actions .act-btn { flex:1; text-align:center; padding:9px 8px; font-size:11px; }
  .card-foot { flex-direction:column; align-items:flex-start; gap:6px; }
  .ai-text { font-size:14px; line-height:1.6; }
  .transcript-body { font-size:13px; line-height:1.8; }
  .auth-container { margin:30px auto; }
  .settings-container { padding:10px; }
}

@media (max-width: 480px) {
  .header { height:48px; }
  .logo { width:30px; height:30px; }
  .brand-name { font-size:13px; letter-spacing:2px; }
  .stats-strip .stat-num { font-size:15px; }
  .card-tg { font-size:13px; }
  .ai-text { font-size:13px; }
  .auth-card { padding:24px 20px; }
}

/* ══════════ INCIDENT GROUPS ══════════ */
.incident-group {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
  animation: fade-in 0.3s ease;
}
.incident-group.flagged {
  border-color: var(--fire);
  box-shadow: 0 0 12px rgba(220,38,38,0.08);
}

/* Incident header */
.incident-header {
  padding: 14px 18px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  transition: background var(--transition);
}
.incident-header:hover { background: #2f2f2f; }
.incident-id {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mut);
  opacity: 0.7;
}
.incident-category {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 14px;
  color: var(--fire);
  letter-spacing: 0.5px;
}
.incident-county {
  font-size: 13px;
  color: var(--text-mut);
  margin-left: 4px;
}
.incident-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mut);
}
.incident-stats {
  font-size: 11px;
  color: var(--text-mut);
  margin-top: 4px;
}
.incident-summary {
  font-size: 13px;
  color: var(--text-sec);
  line-height: 1.5;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.incident-arrow {
  position: absolute;
  right: 22px;
  bottom: 16px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--text-mut);
  border-right: 2px solid var(--text-mut);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  pointer-events: none;
}
.incident-arrow.open { transform: rotate(135deg); }

/* Unit badges */
.unit-badges { display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; }
.unit-badge {
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(59,130,246,0.12);
  color: #60A5FA;
  letter-spacing: 0.3px;
}
.unit-badge.cleared {
  opacity: 0.4;
  text-decoration: line-through;
  background: rgba(148,163,184,0.08);
  color: var(--text-mut);
}

/* Conversation rows within incident */
.incident-convs { }
.incident-conv {
  padding: 10px 18px;
  border-bottom: 1px solid rgba(51,51,51,0.5);
  transition: background var(--transition);
}
.incident-conv:last-child { border-bottom: none; }
.incident-conv:hover { background: rgba(255,255,255,0.02); }
.incident-conv-hidden { display: none; }

.incident-conv-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.svc-badge-sm {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  letter-spacing: 1px;
}
.svc-badge-sm.svc-law { background:var(--police-dim); color:#60A5FA; }
.svc-badge-sm.svc-fire { background:var(--fire-dim); color:#F87171; }
.svc-badge-sm.svc-ems { background:var(--ems-dim); color:#4ADE80; }
.svc-badge-sm.svc-dispatch { background:rgba(245,158,11,0.1); color:#FBBF24; }
.svc-badge-sm.svc-other { background:rgba(148,163,184,0.1); color:var(--text-mut); }

.tg-name {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mut);
  letter-spacing: 0.5px;
}
.incident-conv-time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mut);
  margin-left: auto;
}
.conv-summary {
  font-size: 13px;
  color: var(--text-sec);
  margin-top: 4px;
  line-height: 1.5;
}
.incident-conv-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.act-btn-sm {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mut);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04);
  transition: color var(--transition), background var(--transition);
  text-decoration: none;
  cursor: pointer;
}
.act-btn-sm:hover {
  color: var(--text-pri);
  background: rgba(255,255,255,0.08);
}
.act-btn-sm.act-feedback { color: var(--amber); }
.act-btn-sm.act-feedback:hover { color: var(--text-pri); }
.flag-msg-sm {
  font-size: 11px;
  color: var(--red);
  margin-top: 4px;
  padding: 4px 8px;
  background: var(--red-dim);
  border-radius: var(--radius-sm);
}

/* Flagged sidebar incident group */
.flagged-incident {
  border-left: 3px solid var(--fire);
}
.flagged-linked {
  font-size: 10px;
  color: var(--text-mut);
  margin-top: 2px;
  font-family: var(--mono);
}

/* ══════════ FEEDBACK MODAL ══════════ */
.feedback-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  animation: fade-in 0.15s ease;
}
.feedback-modal {
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  width: 480px; max-width: 92vw;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.feedback-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; font-size: 15px; color: var(--text-pri);
}
.feedback-close {
  background: none; border: none; color: var(--text-mut);
  font-size: 22px; cursor: pointer; padding: 0 4px;
  transition: color var(--transition);
}
.feedback-close:hover { color: var(--text-pri); }
.feedback-body { padding: 18px; }
.feedback-help {
  font-size: 12px; color: var(--text-mut);
  margin-bottom: 14px; line-height: 1.5;
}
.feedback-label {
  font-size: 13px; font-weight: 500; color: var(--text-sec);
  display: block; margin-bottom: 8px;
}
.feedback-conv-ref {
  font-family: var(--mono); font-size: 11px; color: var(--text-mut);
}
.feedback-textarea {
  width: 100%; padding: 10px 14px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-pri);
  font-family: var(--font); font-size: 14px; resize: vertical;
  transition: border-color var(--transition);
  line-height: 1.5;
}
.feedback-textarea:focus {
  outline: none; border-color: var(--amber);
}
.feedback-textarea::placeholder { color: var(--text-mut); font-size: 13px; }
.feedback-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px;
}
.feedback-msg { font-size: 13px; }
.feedback-submit {
  background: var(--amber); color: #000; border: none;
  padding: 8px 20px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 13px; cursor: pointer;
  transition: opacity var(--transition);
}
.feedback-submit:hover { opacity: 0.85; }

/* Correct button in card actions */
.act-feedback { color: var(--amber) !important; }
.act-feedback:hover { color: var(--text-pri) !important; }

/* ══════════ CONFIDENCE / NEEDS REVIEW ══════════ */
.confidence-note {
  padding: 8px 12px; margin-top: 8px;
  background: var(--amber-dim);
  border: 1px solid rgba(245,158,11,0.15);
  border-radius: var(--radius-sm);
  font-size: 13px; color: var(--amber);
  line-height: 1.5;
}
.confidence-note-sm {
  font-size: 11px; color: var(--amber);
  margin-top: 4px; padding: 3px 8px;
  background: var(--amber-dim);
  border-radius: var(--radius-sm);
}
.conf-warn-icon { font-size: 12px; margin-right: 2px; }

/* Needs Review chip active state */
.chip.active-amber {
  background: var(--amber); color: #000;
  box-shadow: 0 0 0 1px var(--amber);
}

/* ============================================================
   LANDING / ABOUT PAGE
   ============================================================ */
.landing-hero {
  background: linear-gradient(180deg, #1a1a2e 0%, var(--bg-deep) 100%);
  text-align: center;
  padding: 80px 24px 60px;
  border-bottom: 1px solid var(--border);
}
.landing-hero-inner { max-width: 700px; margin: 0 auto; }
.landing-logo { width: 80px; height: 80px; margin-bottom: 16px; border-radius: 16px; }
.landing-title {
  font-family: var(--mono);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--text-pri);
  margin: 0 0 12px;
}
.landing-tagline {
  font-size: 18px;
  color: var(--green);
  font-weight: 500;
  margin: 0 0 12px;
}
.landing-subtitle {
  font-size: 15px;
  color: var(--text-mut);
  line-height: 1.6;
  margin: 0 0 28px;
}
.landing-cta {
  display: inline-block;
  padding: 14px 36px;
  background: var(--green);
  color: #000;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.landing-cta:hover { background: #16a34a; transform: translateY(-1px); }
.landing-cta-secondary {
  display: inline-block;
  padding: 12px 28px;
  margin-left: 12px;
  border: 1px solid var(--border);
  color: var(--text-sec);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.landing-cta-secondary:hover { border-color: var(--text-mut); color: var(--text-pri); }
.landing-cta-donate { background: var(--amber); }
.landing-cta-donate:hover { background: #d97706; }

/* Sections */
.landing-section { padding: 60px 24px; }
.landing-section-alt { background: var(--bg-surface); }
.landing-container { max-width: 900px; margin: 0 auto; }
.landing-heading {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-pri);
  margin: 0 0 16px;
}
.landing-text {
  font-size: 15px;
  color: var(--text-sec);
  line-height: 1.6;
  margin: 0 0 8px;
}
.landing-text-sm { font-size: 12px; color: var(--text-mut); }
.landing-text-block p {
  font-size: 15px;
  color: var(--text-sec);
  line-height: 1.7;
  margin: 0 0 16px;
}

/* Live Preview */
.landing-preview { position: relative; display: flex; flex-direction: column; gap: 12px; }
.preview-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.landing-section-alt .preview-card { background: var(--bg-elevated); }
.preview-card-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.preview-cat {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--red);
  text-transform: uppercase;
}
.preview-meta { font-size: 11px; color: var(--text-mut); }
.preview-summary { font-size: 14px; color: var(--text-sec); line-height: 1.5; }
.preview-fade {
  position: relative;
  margin-top: -80px;
  padding-top: 80px;
  background: linear-gradient(180deg, transparent 0%, var(--bg-deep) 60%);
  text-align: center;
  padding-bottom: 20px;
}
.landing-section-alt .preview-fade { background: linear-gradient(180deg, transparent 0%, var(--bg-surface) 60%); }
.preview-fade-inner { padding-top: 20px; }
.preview-fade-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-pri);
  margin-bottom: 16px;
}

/* Feature Cards */
.landing-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.feature-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
}
.landing-section-alt .feature-card { background: var(--bg-elevated); }
.feature-card h3 {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-pri);
  margin: 0 0 8px;
}
.feature-card p {
  font-size: 14px;
  color: var(--text-sec);
  line-height: 1.5;
  margin: 0;
}
.feature-icon { font-size: 28px; margin-bottom: 12px; }
.feature-card-sm { padding: 18px 16px; }
.feature-card-sm h3 { font-size: 12px; margin-bottom: 6px; }
.feature-card-sm p { font-size: 13px; }

/* Steps */
.landing-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.step-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green);
  color: #000;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}
.step-card h3 {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-pri);
  margin: 0 0 8px;
}
.step-card p { font-size: 13px; color: var(--text-sec); line-height: 1.5; margin: 0 0 8px; }
.step-link {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
}
.step-link:hover { text-decoration: underline; }

/* Coverage */
.landing-coverage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.coverage-group h3 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--green);
  text-transform: uppercase;
  margin: 0 0 12px;
}
.coverage-group ul { list-style: none; padding: 0; margin: 0; }
.coverage-group li {
  font-size: 13px;
  color: var(--text-sec);
  line-height: 1.6;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.coverage-group li:last-child { border-bottom: none; }
.coverage-group li strong { color: var(--text-pri); }

/* Donate Card */
.donate-card {
  background: var(--bg-surface);
  border: 2px solid var(--amber);
  border-radius: var(--radius);
  padding: 32px 28px;
}
.donate-card p {
  font-size: 15px;
  color: var(--text-sec);
  line-height: 1.7;
  margin: 0 0 12px;
}

/* Contact Form */
.contact-form-wrap { max-width: 500px; margin: 20px auto 0; }
.contact-status { margin-top: 12px; font-size: 13px; }
.contact-success { color: var(--green); }
.contact-error { color: var(--red); }

/* Footer */
.landing-footer {
  text-align: center;
  padding: 40px 24px;
  border-top: 1px solid var(--border);
  color: var(--text-mut);
  font-size: 13px;
}
.landing-footer p { margin: 4px 0; }

/* Responsive */
/* Subscribe Overlay (public scanner limit) */
.subscribe-overlay {
  position: relative;
  margin-top: -60px;
  padding-top: 60px;
  background: linear-gradient(180deg, transparent 0%, var(--bg-deep) 50%);
}
.subscribe-overlay-inner {
  text-align: center;
  padding: 40px 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.subscribe-overlay-inner h3 {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-pri);
  margin: 0 0 12px;
}
.subscribe-overlay-inner p {
  font-size: 14px;
  color: var(--text-sec);
  line-height: 1.6;
  margin: 0 0 20px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* Nav CTA highlight for Sign Up */
.nav-link-cta {
  background: var(--green);
  color: #000 !important;
  border-color: var(--green);
}
.nav-link-cta:hover { background: #16a34a; border-color: #16a34a; }

@media (max-width: 700px) {
  .landing-hero { padding: 50px 20px 40px; }
  .landing-title { font-size: 26px; letter-spacing: 2px; }
  .landing-tagline { font-size: 15px; }
  .landing-cta { display: block; margin: 8px 0; }
  .landing-cta-secondary { display: block; margin: 8px 0; }
  .landing-features { grid-template-columns: 1fr; }
  .landing-steps { grid-template-columns: 1fr; }
  .landing-coverage { grid-template-columns: 1fr; }
  .landing-section { padding: 40px 16px; }
}

/* ══════════ DONATION BANNER — always visible, top of every page ══════════ */
.donate-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  background: linear-gradient(90deg, rgba(245,158,11,0.10), rgba(245,158,11,0.20), rgba(245,158,11,0.10));
  border-bottom: 1px solid rgba(245,158,11,0.30);
  font-size: 13px;
  color: var(--text-pri);
  line-height: 1.4;
  flex-wrap: wrap;
  z-index: 10;
}
.donate-banner-msg {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
}
.donate-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.donate-banner-btn {
  background: var(--amber);
  color: #1a1a1a;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
.donate-banner-btn:hover {
  background: #d97706;
  color: #000;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(245,158,11,0.35);
}
.donate-banner-btn-alt {
  background: transparent;
  color: var(--amber);
  border: 1px solid rgba(245,158,11,0.6);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.donate-banner-btn-alt:hover {
  background: rgba(245,158,11,0.15);
  color: #fff;
  border-color: rgba(245,158,11,0.9);
}

/* Install App button — green, separate from amber donate/contact to signal a different action class */
.donate-banner-btn-install {
  background: rgba(34,197,94,0.18);
  color: var(--green);
  border: 1px solid rgba(34,197,94,0.6);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.donate-banner-btn-install:hover {
  background: rgba(34,197,94,0.30);
  color: #fff;
  border-color: rgba(34,197,94,0.95);
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .donate-banner { padding: 8px 12px; font-size: 12px; gap: 8px; }
  .donate-banner-btn { padding: 5px 12px; font-size: 12px; }
  .donate-banner-btn-alt { padding: 5px 12px; font-size: 12px; }
  .donate-banner-btn-install { padding: 5px 12px; font-size: 12px; }
  .donate-banner-actions { gap: 6px; }
}

/* ══════════ INSTALL APP MODAL ══════════ */
.install-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.78);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 16px;
  animation: install-fade-in 160ms ease-out;
}
@keyframes install-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.install-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 460px; width: 100%;
  max-height: 90vh; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.install-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 16px;
  color: var(--text-pri);
  background: var(--bg-panel);
}
.install-modal-close {
  background: none; border: none; color: var(--text-mut);
  font-size: 28px; line-height: 1; cursor: pointer;
  padding: 0 6px;
  transition: color var(--transition);
}
.install-modal-close:hover { color: var(--text-pri); }
.install-modal-body {
  padding: 20px;
  color: var(--text-sec);
  overflow-y: auto;
  flex: 1 1 auto;
}
.install-modal-body p {
  font-size: 14px; line-height: 1.55; margin-bottom: 10px;
}
.install-device-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--green);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px !important;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}
.install-steps {
  padding-left: 24px; margin: 12px 0;
}
.install-steps li {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-sec);
}
.install-steps strong { color: var(--text-pri); }
.install-icon-hint {
  font-size: 12px;
  color: var(--text-mut);
  font-style: italic;
}
.install-note {
  margin-top: 16px !important;
  padding: 10px 12px;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: var(--radius-sm);
  font-size: 12px !important;
  color: var(--text-mut) !important;
  line-height: 1.5 !important;
}
.install-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  text-align: right;
  background: var(--bg-panel);
}
.install-modal-btn {
  background: var(--amber);
  color: #1a1a1a;
  border: none;
  padding: 8px 22px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--transition);
}
.install-modal-btn:hover { background: #d97706; }

/* ══════════ PWA NAG BANNER (dashboard) ══════════ */
.pwa-nag-banner {
  display: none; /* JS toggles to flex when NOT in PWA */
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  margin: 0 0 12px 0;
  background: linear-gradient(90deg, rgba(239,68,68,0.15), rgba(239,68,68,0.25), rgba(239,68,68,0.15));
  border: 1px solid rgba(239,68,68,0.45);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text-pri);
  line-height: 1.4;
  flex-wrap: wrap;
}
.pwa-nag-msg { flex: 1 1 auto; min-width: 0; }
.pwa-nag-msg strong { color: var(--red); display: block; margin-bottom: 2px; }
.pwa-nag-btn {
  background: var(--red);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition), transform var(--transition);
}
.pwa-nag-btn:hover {
  background: #dc2626;
  transform: translateY(-1px);
}
@media (max-width: 480px) {
  .pwa-nag-banner { padding: 10px 12px; font-size: 12px; gap: 8px; }
  .pwa-nag-btn { padding: 7px 14px; font-size: 12px; }
}


/* ────────────────────────────────────────────────────
   MOBILE READABILITY BOOST — added 2026-04-22
   Larger body text on phones for aging eyes. Targets
   the content users actually read (incident cards,
   summaries, unit badges) and leaves chrome alone.
   ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Primary incident card content */
  .incident-category { font-size: 19px; }
  .incident-summary  { font-size: 18px; line-height: 1.55; }
  .conv-summary      { font-size: 17px; line-height: 1.55; }
  .incident-id       { font-size: 14px; }
  .incident-county   { font-size: 14px; }
  .incident-stats    { font-size: 14px; }
  .incident-meta     { font-size: 14px; }
  .incident-conv-time { font-size: 13px; }
  .tg-name           { font-size: 15px; }
  .unit-badge        { font-size: 13px; padding: 3px 10px; }
  .svc-badge-sm      { font-size: 11px; padding: 2px 8px; }

  /* AI summaries + flag messages */
  .ai-text           { font-size: 17px; line-height: 1.55; }
  .ai-label          { font-size: 11px; }
  .flag-msg          { font-size: 14px; }
  .flag-msg-sm       { font-size: 13px; }

  /* Stand-alone conversation cards (card-tg / card etc.) */
  .card-tg           { font-size: 16px; }
  .card-tgid         { font-size: 12px; }

  /* Live drawer + flagged sidebar when shown */
  .live-title        { font-size: 14px; }
  .live-mini-tg      { font-size: 14px; }
  .live-mini-text    { font-size: 14px; line-height: 1.5; }
  .flagged-cat       { font-size: 13px; }
  .flagged-text      { font-size: 15px; line-height: 1.5; }
  .flagged-meta      { font-size: 12px; }

  /* Filter chips + search */
  .chip              { font-size: 14px; padding: 8px 16px; }
  .chip-search input { font-size: 15px; }

  /* Stats strip */
  .stats-strip .stat-num { font-size: 22px; }
  .stats-strip .stat-lbl { font-size: 11px; }

  /* Action buttons under convs (Transcript / Audio / Correct) */
  .act-btn-sm        { font-size: 14px; padding: 8px 14px; }

  /* Settings page */
  .settings-section-title { font-size: 16px; }
  .tg-check          { padding: 11px 12px; }
  .tg-check label    { font-size: 15px; }
  .county-name       { font-size: 15px; }

  /* Auth forms (login / signup) */
  .form-input        { font-size: 16px; padding: 13px 15px; }
  .form-label        { font-size: 14px; }
  .form-btn          { font-size: 16px; padding: 15px; }
  .auth-subtitle     { font-size: 15px; }
}

/* Narrow phones — slight pullback so wide lines don't wrap into too many rows */
@media (max-width: 400px) {
  .incident-category { font-size: 18px; }
  .incident-summary  { font-size: 17px; }
  .conv-summary      { font-size: 16px; }
  .ai-text           { font-size: 16px; }
}