/* ═══════════════════════════════════════════════════════════════════════
   CRITICAL ABOVE-FOLD CSS, Design tokens + skeleton + auth gate
   ═══════════════════════════════════════════════════════════════════════ */

.dashboard-page {
  --db-gold:         #d4a843;
  --db-gold-dim:     rgba(212,168,67,.10);
  --db-gold-border:  rgba(212,168,67,.22);
  --db-gold-glow:    rgba(212,168,67,.15);
  --db-teal:         #65e7d2;
  --db-teal-dim:     rgba(101,231,210,.09);
  --db-teal-border:  rgba(101,231,210,.20);
  --db-surface:      rgba(255,255,255,.035);
  --db-surface-2:    rgba(255,255,255,.06);
  --db-surface-3:    rgba(255,255,255,.09);
  --db-border:       rgba(255,255,255,.07);
  --db-border-hover: rgba(255,255,255,.14);
  --db-green:        #34d399;
  --db-green-dim:    rgba(52,211,153,.10);
  --db-red:          #f87171;
  --db-red-dim:      rgba(248,113,113,.10);
  --db-amber:        #fbbf24;
  --db-amber-dim:    rgba(251,191,36,.10);
  --db-blue:         #60a5fa;
  --db-blue-dim:     rgba(96,165,250,.10);
  --db-purple:       #c084fc;
  --db-purple-dim:   rgba(192,132,252,.10);
  --db-bg:           #0a0e1a;
  --db-bg-elevated:  #0f1422;
  --db-card:         #111827;
  --db-text:         #c8cdd8;
  --db-muted:        #a0a8b8;
  --db-heading:      #f0f2f5;
  --db-text-3:       #667a90;
  --db-radius:       12px;
  --db-radius-sm:    8px;
  --db-radius-lg:    16px;
  --db-max:          1400px;
  --db-gap:          16px;
  --db-chat-w:       380px;
  --db-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  font-family: var(--db-font);
  color: var(--db-text);
  /* BUG FIX #1: Removed min-height:100vh, dashboard-page is now a flex child
     of .page-shell which handles viewport filling. min-height:100vh caused the
     page to exceed viewport height by the header's height, clipping content. */
  min-height: 0;
  padding-bottom: 0;
  background: var(--db-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
  overflow-x: hidden; /* prevent horizontal scroll on narrow devices */
  overflow-y: hidden;
}

/* ─── PREVENT DOUBLE SCROLLBAR, body must not scroll on dashboard ── */
body:has(.dashboard-page) {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}
/* WP admin bar offset, admin bar is 32px on desktop, 46px on mobile */
body.admin-bar:has(.dashboard-page) {
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
}
@media (max-width: 782px) {
  body.admin-bar:has(.dashboard-page) {
    height: calc(100vh - 46px);
    height: calc(100dvh - 46px);
  }
}
/* BUG FIX #1: Make page-shell a flex column so header takes natural height
   and dashboard fills the rest. Prevents scanner from being clipped behind
   the sticky header regardless of header height. */
body:has(.dashboard-page) .page-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  /* FIX: Force full viewport width, without styles.css, page-shell inherits
     no width rules, and WP core or browser defaults can constrain it. */
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}
body.admin-bar:has(.dashboard-page) .page-shell {
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
}
body:has(.dashboard-page) .page-shell > .dashboard-page {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* FIX: Must be flex column so #db-content can flex: 1 within it.
     Without this, #db-content grows to natural content height (~5000px)
     instead of fitting within the viewport, breaking all scroll containers. */
  display: flex;
  flex-direction: column;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
/* BUG FIX #4: Hide site footer on dashboard, belt-and-suspenders.
   The footer is a sibling of .dashboard-page inside .page-shell.
   With page-shell as flex column + overflow:hidden, footer is naturally
   pushed offscreen, but we also explicitly hide it. */
body:has(.dashboard-page) .site-footer,
.dashboard-page ~ .site-footer,
.dashboard-page + .site-footer,
body:has(.dashboard-page) footer.site-footer {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ─── GLOBAL LINK RESET, styles.css is NOT loaded on dashboard ──
   Without this, browser default underlines appear on ALL <a> tags.
   This is the single most critical rule for visual consistency. */
.dashboard-page a {
  text-decoration: none;
  color: inherit;
}
.dashboard-page a:hover {
  text-decoration: none;
}

/* ─── HIDE OVERLAYS ON DASHBOARD (search + more panel not needed) ── */
.dashboard-page .search-overlay,
.dashboard-page .more-panel,
body.page-template-page-dashboard .search-overlay,
body.page-template-page-dashboard .more-panel {
  display: none !important;
}
/* Also constrain any stray sig-anim SVGs in case header partial leaks through */
.sig-anim svg {
  max-width: 32px !important;
  max-height: 32px !important;
}

/* ─── FULL-WIDTH OVERRIDE, dashboard content fills edge-to-edge,
   but the site nav header stays standard (1400px centered) to match
   other pages like homepage, weather, newsroom. ── */
.dashboard-page,
.dashboard-page .db-main-layout,
.dashboard-page .db-content {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* ─── SITE HEADER ON DASHBOARD, dark theme override ── */
/* styles.css is NOT loaded on dashboard pages. We MUST replicate ALL base
   nav typography/layout rules here or browser defaults leak through
   (underlined links, wrong font-size, no padding, etc.).
   BUG FIX #1: .site-header is a SIBLING of .dashboard-page, not a child.
   Must use body:has() to target it. */
body:has(.dashboard-page) .site-header.site-nav {
  background: var(--db-bg-elevated) !important;
  border-bottom: 1px solid var(--db-border);
  /* FIX: Force header full width on dashboard */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  /* FIX: Use position:relative instead of sticky. The page-shell is a flex
     column with overflow:hidden, sticky has no scroll ancestor to stick to,
     but it creates a stacking context that can paint over the hero-scanner
     and noc-header on mobile Safari/Chrome. position:relative keeps the
     header in normal flow within the flex column. */
  position: relative;
  z-index: 200;
  padding: 0;
  flex-shrink: 0;
}

/* ── Nav link base (replicated from styles.css, DO NOT REMOVE) ── */
body:has(.dashboard-page) .site-header__nav a,
body:has(.dashboard-page) .site-header .nav-link {
  text-decoration: none !important;
  font-family: var(--db-font);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  white-space: nowrap;
  color: rgba(238,245,255,0.6);
  border: none;
  background: transparent;
  transition: color .18s ease, background .18s ease;
  letter-spacing: -0.01em;
  line-height: 1;
  gap: 5px;
}
body:has(.dashboard-page) .site-header__nav a:hover,
body:has(.dashboard-page) .site-header .nav-link:hover {
  color: #eef5ff;
  background: rgba(255,255,255,.06);
}
/* Active page indicator, matches reference nav screenshot */
body:has(.dashboard-page) .site-header .nav-link[aria-current="page"],
body:has(.dashboard-page) .site-header .nav-link.is-active {
  color: #eef5ff;
  position: relative;
}
body:has(.dashboard-page) .site-header .nav-link[aria-current="page"]::after,
body:has(.dashboard-page) .site-header .nav-link.is-active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--db-gold);
}
/* Signal Pro, special styling */
body:has(.dashboard-page) .site-header .nav-link-account {
  color: var(--db-gold) !important;
  font-weight: 700;
}
body:has(.dashboard-page) .site-header .nav-link-account:hover {
  background: rgba(212,168,67,.1);
}
/* CTA button on dashboard */
body:has(.dashboard-page) .nav-cta-btn {
  background: linear-gradient(135deg, var(--db-gold) 0%, #f0d78c 100%) !important;
  color: #0a0e1a !important;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  min-height: 32px;
  letter-spacing: 0;
}
body:has(.dashboard-page) .nav-cta-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
/* Mobile header actions on dashboard */
body:has(.dashboard-page) .mob-header-cta {
  background: linear-gradient(135deg, var(--db-gold) 0%, #f0d78c 100%) !important;
  color: #0a0e1a !important;
  text-decoration: none !important;
}
body:has(.dashboard-page) .mob-header-account {
  background: rgba(101,231,210,0.12) !important;
  color: #65e7d2 !important;
  text-decoration: none !important;
}
/* Logo text, ensure correct styling without styles.css */
body:has(.dashboard-page) .nav-logo-text {
  display: inline-flex;
  align-items: baseline;
  letter-spacing: -0.02em;
  line-height: 1;
  font-family: var(--db-font);
}
body:has(.dashboard-page) .nav-logo-img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
/* ═══ SITE MOBILE NAV, Critical size constraints ═══
   styles.css is NOT loaded on dashboard pages. Without these rules the
   .mob-nav SVG icons explode to 1440×1440 px filling the viewport
   ("purple wave" bug). We replicate the essential sizing from styles.css
   and hide it on desktop where the dashboard has its own nav. */
.mob-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9000;
  display: none;          /* hidden by default, shown at ≤899px */
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-end;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--db-bg-elevated, #0f1422);
  border-top: 1px solid var(--db-border, rgba(255,255,255,.07));
}
.mob-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  min-width: 0;
  padding: 6px 4px;
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
  color: var(--db-muted, rgba(255,255,255,.5));
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mob-nav__item--active {
  color: var(--db-gold, #d4a843);
}
.mob-nav__icon {
  position: relative;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mob-nav__icon svg {
  width: 22px;
  height: 22px;
}
.mob-nav__label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Site-wide .mob-nav is now shown on dashboard (same nav as all other pages).
   The old dashboard-specific .db-mobile-nav has been removed.
   Tab switching is handled by the .nav-tabs bar at the top of dashboard content. */
/* BUG FIX: Show mob-nav at <=1024px on dashboard (matches chat-sidebar hide breakpoint).
   Prevents gap at 900-1024px where desktop sidebar is hidden but mob-nav wasn't shown,
   leaving no way to access chat. */
@media (max-width: 1024px) {
  body:has(.dashboard-page) .mob-nav {
    display: flex !important;
  }
}
/* BUG FIX: Raise mob-nav above chat drawer overlay (z-index 9050) and drawer (9100)
   so users can still tap nav items when chat is open, instead of being trapped. */
body:has(.dashboard-page) .mob-nav {
  z-index: 9200;
}

/* ─── DASHBOARD SITE HEADER, responsive layout ── */
/* Base layout (styles.css not loaded on dashboard, so replicate essentials).
   NOTE: Do NOT override max-width/width here, .site-nav__inner inherits
   max-width:1400px from the inline styles in header.php, which keeps the
   nav consistent with all other pages. */
body:has(.dashboard-page) .site-nav__inner {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  box-sizing: border-box;
}
body:has(.dashboard-page) .nav-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
/* Base mob-header-actions layout (inline styles removed from header.php) */
body:has(.dashboard-page) .mob-header-actions {
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
/* Mobile: hide desktop nav, show mobile CTA */
@media (max-width: 899px) {
  body:has(.dashboard-page) .site-header__nav { display: none !important; }
  body:has(.dashboard-page) .mob-header-actions { display: flex !important; }
  body:has(.dashboard-page) .mob-header-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
  }
  body:has(.dashboard-page) .site-nav__inner {
    justify-content: space-between;
  }
}
/* Desktop: show nav, hide mobile header CTA */
@media (min-width: 900px) {
  body:has(.dashboard-page) .mob-header-actions { display: none !important; }
  body:has(.dashboard-page) .site-header__nav {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    justify-content: center;
    gap: 2px;
  }
  body:has(.dashboard-page) .site-nav__inner {
    justify-content: space-between;
    padding: 0 24px;
    min-height: 50px;
  }
  body:has(.dashboard-page) .nav-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
}
/* Tablet, tighten nav spacing */
@media (min-width: 900px) and (max-width: 1200px) {
  body:has(.dashboard-page) .site-header__nav a,
  body:has(.dashboard-page) .site-header .nav-link {
    font-size: 0.76rem;
    padding: 6px 8px;
  }
  body:has(.dashboard-page) .site-header__nav { gap: 1px; }
}
/* Large screens, more breathing room */
@media (min-width: 1400px) {
  body:has(.dashboard-page) .site-nav__inner { padding: 0 40px; }
  body:has(.dashboard-page) .site-header__nav { gap: 4px; }
  body:has(.dashboard-page) .site-header__nav a,
  body:has(.dashboard-page) .site-header .nav-link {
    font-size: 0.85rem;
    padding: 8px 16px;
  }
}

/* ─── LOADING SKELETON ──────────────────────────────────────────── */
.db-skeleton {
  background: linear-gradient(90deg, var(--db-surface) 25%, var(--db-surface-2) 50%, var(--db-surface) 75%);
  background-size: 200% 100%;
  animation: db-shimmer 1.8s ease-in-out infinite;
  border-radius: var(--db-radius-sm);
}
@keyframes db-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.db-skeleton--line  { height: 14px; margin-bottom: 10px; }
.db-skeleton--title { height: 24px; width: 60%; margin-bottom: 14px; }
.db-skeleton--card  { height: 140px; margin-bottom: 16px; border-radius: var(--db-radius); }
.db-skeleton--badge { height: 28px; width: 100px; border-radius: 999px; display: inline-block; }

.db-loading {
  max-width: 680px;
  margin: 0 auto;
  padding: 80px 20px;
}
.db-loading__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}
@media (max-width: 400px) { .db-loading__grid { grid-template-columns: 1fr; } }

/* Google Maps + focus-visible + accessibility, now in dashboard.css */

/* ═══════════════════════════════════════════════════════════════════════
   NOC STATUS STRIP, slim secondary bar below site header
   ~34px, dark bg, clock + status + session + logout in one line
   ═══════════════════════════════════════════════════════════════════════ */
.noc-header {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; padding: 0 20px;
  height: 34px; min-height: 34px; max-height: 34px;
  background: var(--db-bg); border-bottom: 1px solid var(--db-border);
  z-index: 100; flex-shrink: 0;
}
/* Hide the old left section (logo + badge), brand is in site header now */
.noc-header__left { display: none !important; }
/* Center section becomes the strip content */
.noc-header__center { display: flex; align-items: center; gap: 16px; }
.noc-header__clock {
  font-size: .72rem; font-weight: 600; color: var(--db-heading);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.noc-header__system-status {
  display: flex; align-items: center; gap: 5px;
  font-size: .62rem; color: var(--db-green); font-weight: 500;
}
.noc-header__system-status:has(.noc-header__system-dot--warning) {
  color: var(--db-amber, #f59e0b);
}
.noc-header__system-status:has(.noc-header__system-dot--connecting) {
  color: var(--db-text-3, #667a90);
}
.noc-header__system-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--db-green);
  box-shadow: 0 0 6px var(--db-green); animation: pulse-dot 2s ease infinite;
}
.noc-header__system-dot--warning {
  background: var(--db-amber, #f59e0b);
  box-shadow: 0 0 6px var(--db-amber, #f59e0b);
}
.noc-header__system-dot--connecting {
  background: var(--db-text-3, #667a90);
  box-shadow: none;
}
@keyframes pulse-dot { 0%,100% { opacity:1; } 50% { opacity:.4; } }
/* Right section, session timer, user, logout inline in the strip */
.noc-header__right { display: flex; align-items: center; gap: 10px; }
.noc-header__user { font-size: .68rem; color: var(--db-muted); font-variant-numeric: tabular-nums; }
.noc-header__logout {
  display: flex; align-items: center; gap: 4px; font-size: .65rem; font-weight: 600;
  color: var(--db-muted); background: none; border: 1px solid var(--db-border);
  border-radius: 5px; padding: 3px 10px; cursor: pointer; transition: all .2s ease;
}
.noc-header__logout:hover { color: var(--db-red); border-color: rgba(248,113,113,.3); background: var(--db-red-dim); }
@media (max-width: 768px) {
  .noc-header { padding: 0 12px; gap: 10px; height: 32px; min-height: 32px; max-height: 32px; }
  .noc-header__center { gap: 10px; }
  .noc-header__clock { font-size: .66rem; }
  .noc-header__system-status { font-size: .58rem; }
  .noc-header__user { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .62rem; }
  .noc-header__logout { padding: 2px 7px; font-size: .6rem; }
}

/* ─── DASHBOARD MODE BUTTON ────────────────────────────────────── */
.db-mode-btn {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 12px; border-radius: 6px; cursor: pointer;
  font-size: .62rem; font-weight: 700; font-family: inherit;
  letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
  color: var(--db-gold); border: 1px solid rgba(212,168,67,.25);
  background: linear-gradient(135deg, rgba(212,168,67,.08) 0%, rgba(212,168,67,.02) 100%);
  transition: all .25s cubic-bezier(.4,0,.2,1);
  overflow: hidden; flex-shrink: 0;
}
.db-mode-btn__glow {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(212,168,67,.15) 0%, transparent 70%);
  opacity: 0; transition: opacity .3s;
}
.db-mode-btn:hover .db-mode-btn__glow { opacity: 1; }
.db-mode-btn:hover {
  border-color: rgba(212,168,67,.5);
  background: linear-gradient(135deg, rgba(212,168,67,.15) 0%, rgba(212,168,67,.05) 100%);
  box-shadow: 0 0 16px rgba(212,168,67,.15);
  transform: translateY(-1px);
}
.db-mode-btn:active { transform: translateY(0); }
.db-mode-btn svg { opacity: .8; flex-shrink: 0; }
.db-mode-btn:hover svg { opacity: 1; }
.db-mode-btn__label { position: relative; z-index: 1; }
/* Active state */
.db-mode-btn.is-active {
  background: linear-gradient(135deg, var(--db-gold) 0%, #e8b84a 100%);
  color: #0a0e1a; border-color: var(--db-gold);
  box-shadow: 0 0 20px rgba(212,168,67,.3);
}
.db-mode-btn.is-active svg { opacity: 1; }
/* Fullscreen dashboard mode, hide site chrome */
body.db-fullscreen-mode .site-header,
body.db-fullscreen-mode .site-nav,
body.db-fullscreen-mode .site-footer,
body.db-fullscreen-mode footer,
body.db-fullscreen-mode #wpadminbar { display: none !important; }
body.db-fullscreen-mode .dashboard-page {
  position: fixed; inset: 0; z-index: 99999; overflow-y: auto;
}
@media (max-width: 768px) {
  .db-mode-btn { padding: 2px 8px; font-size: .56rem; }
  .db-mode-btn__label { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPACT SCANNER STRIP, Player + Stats in single row (~48px)
   ═══════════════════════════════════════════════════════════════════════ */
.hero-scanner {
  background: rgba(0,0,0,.45);
  border-bottom: 1px solid var(--db-border);
  padding: 0 20px;
  position: relative;
  height: 48px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden; /* prevent children from causing horizontal page scroll */
  z-index: 1; /* ensure scanner sits above content but below header */
}
/* Subtle ambient glow when live */
.hero-scanner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(212,168,67,.04) 0%, transparent 40%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}
.hero-scanner.is-live::before { opacity: 1; }
.hero-scanner__inner {
  /* BUG FIX #2: Removed max-width constraint, scanner fills full viewport width */
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  height: 100%;
}
/* Play button, perfect circle, centered icon */
.hero-scanner__play {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid rgba(212,168,67,.4);
  background: rgba(212,168,67,.06); color: var(--db-gold);
  display: flex; align-items: center; justify-content: center;
  padding: 0; margin: 0; line-height: 1;
  cursor: pointer; flex-shrink: 0; position: relative; z-index: 1;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box;
  font-size: 0; /* kill any inherited text sizing that affects button height */
}
.hero-scanner__play svg {
  display: block; /* remove inline baseline gap */
  flex-shrink: 0;
  transition: transform .2s ease;
}
.hero-scanner__play:hover {
  background: var(--db-gold); color: #0a0e1a;
  border-color: var(--db-gold);
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(212,168,67,.25);
}
.hero-scanner__play:active svg { transform: scale(.9); }
.hero-scanner__play.is-playing {
  background: var(--db-gold); color: #0a0e1a;
  border-color: var(--db-gold);
  box-shadow: 0 0 12px rgba(212,168,67,.3);
  animation: scanner-pulse-ring 2.2s cubic-bezier(.4,0,.6,1) infinite;
}
/* Simplified from multi-value box-shadow animation for GPU performance */
@keyframes scanner-pulse-ring {
  0%   { box-shadow: 0 0 8px rgba(212,168,67,.25); }
  50%  { box-shadow: 0 0 16px rgba(212,168,67,.1); }
  100% { box-shadow: 0 0 8px rgba(212,168,67,.25); }
}
/* Mini waveform */
.hero-scanner__viz { width: 120px; flex-shrink: 0; position: relative; }
.hero-scanner__canvas {
  width: 120px; height: 32px; display: block; border-radius: 6px;
  background: linear-gradient(180deg, rgba(5,8,16,0.9), rgba(10,22,40,0.9));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

/* ── Frequency overlay on spectrum canvas ──
   Compact monospace readout over the mini waveform.
   Frequency top-left, talkgroup bottom-left.
   Subtle glow for readability against dark spectrum bars. */
.scanner-freq-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2px 5px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', 'Consolas', monospace;
  line-height: 1;
  overflow: hidden;
  border-radius: 6px;
}
.scanner-freq-overlay.is-active { opacity: 1; }
.scanner-freq-overlay__freq {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(120, 240, 255, 0.92);
  text-shadow:
    0 0 6px rgba(100, 220, 240, 0.5),
    0 0 12px rgba(100, 220, 240, 0.2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scanner-freq-overlay__tg {
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(212, 168, 67, 0.75);
  text-shadow: 0 0 4px rgba(212, 168, 67, 0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Channel + status, stacked compact */
.hero-scanner__meta {
  display: flex; flex-direction: column; gap: 1px; flex-shrink: 0;
  min-width: 0; max-width: 220px;
}
.hero-scanner__channel-row {
  display: flex; align-items: center; gap: 5px; min-width: 0;
}
.hero-scanner__svc-badge {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: .5rem; font-weight: 800; letter-spacing: .06em;
  padding: 1px 5px; border-radius: 3px; flex-shrink: 0;
  line-height: 1.3; text-transform: uppercase;
}
.hero-scanner__svc-badge.svc--fire {
  background: rgba(248,113,113,.18); color: #f87171;
  border: 1px solid rgba(248,113,113,.25);
}
.hero-scanner__svc-badge.svc--ems {
  background: rgba(52,211,153,.15); color: #34d399;
  border: 1px solid rgba(52,211,153,.22);
}
.hero-scanner__svc-badge.svc--law {
  background: rgba(96,165,250,.15); color: #60a5fa;
  border: 1px solid rgba(96,165,250,.22);
}
.hero-scanner__svc-badge.svc--service {
  background: rgba(212,168,67,.12); color: var(--db-gold);
  border: 1px solid rgba(212,168,67,.2);
}
.hero-scanner__svc-badge.svc--dispatch {
  background: rgba(100,120,140,.15); color: rgba(100,180,220,.9);
  border: 1px solid rgba(100,180,220,.2);
}
.hero-scanner__coverage-label {
  display: inline; font-size: .55rem; opacity: .65; margin-left: 3px;
  font-weight: 500; color: rgba(212,168,67,.8);
  transition: opacity .4s ease;
}
.hero-scanner__channel {
  font-size: .68rem; font-weight: 700; color: var(--db-heading);
  letter-spacing: -0.01em; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-scanner__svc-desc {
  font-size: .48rem; color: var(--db-muted); font-weight: 500;
  letter-spacing: .02em; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: .7;
}
.hero-scanner__status {
  display: flex; align-items: center; gap: 4px;
  font-size: .56rem; color: var(--db-muted); font-weight: 500; line-height: 1;
}
.hero-scanner__status-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--db-muted); flex-shrink: 0;
  transition: background .3s ease, box-shadow .3s ease;
}
.hero-scanner__status-dot.is-live {
  background: var(--db-green);
  box-shadow: 0 0 5px rgba(34,197,94,.5);
  animation: scanner-dot-pulse 1.8s ease infinite;
}
.hero-scanner__status-dot.is-connecting {
  background: var(--db-amber);
  animation: scanner-dot-pulse 1s ease infinite;
}
.hero-scanner__status-dot.is-error { background: var(--db-red); }
@keyframes scanner-dot-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
/* Level meter, thin line under meta */
.hero-scanner__level-wrap {
  width: 100%; height: 2px; border-radius: 1px;
  background: rgba(255,255,255,.05); overflow: hidden; margin-top: 2px;
}
.hero-scanner__level-bar {
  height: 100%; width: 0%; border-radius: 1px;
  background: linear-gradient(90deg, var(--db-gold), #e8b84a);
  transition: width .08s linear;
}
/* Volume controls, tight */
.hero-scanner__controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.hero-scanner__mute {
  background: none; border: none; color: var(--db-muted);
  cursor: pointer; padding: 4px; border-radius: 4px;
  transition: color .15s, background .15s;
  display: flex; align-items: center; justify-content: center;
}
.hero-scanner__mute:hover { color: var(--db-heading); background: rgba(255,255,255,.06); }
.hero-scanner__volume {
  width: 56px; height: 3px; -webkit-appearance: none; appearance: none;
  background: linear-gradient(to right, rgba(212,168,67,.5) 0%, rgba(212,168,67,.5) 70%, rgba(255,255,255,.08) 70%);
  border-radius: 2px; outline: none; cursor: pointer;
  transition: height .15s ease;
}
.hero-scanner__volume:hover { height: 5px; }
.hero-scanner__volume::-webkit-slider-thumb {
  -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--db-gold); cursor: pointer;
  box-shadow: 0 0 6px rgba(212,168,67,.35);
  transition: transform .15s ease;
}
.hero-scanner__volume::-webkit-slider-thumb:hover { transform: scale(1.15); }
.hero-scanner__volume::-moz-range-thumb {
  width: 10px; height: 10px; border-radius: 50%; border: none;
  background: var(--db-gold); cursor: pointer;
  box-shadow: 0 0 6px rgba(212,168,67,.35);
}
.hero-scanner__volume::-moz-range-track {
  height: 3px; background: var(--db-surface-3); border-radius: 2px; border: none;
}
/* Separator between controls and stats */
.hero-scanner__sep {
  width: 1px; height: 24px; background: var(--db-border);
  flex-shrink: 0; margin: 0 4px;
}
/* Inline stats within the scanner strip */
.hero-scanner .scanner-stats {
  display: flex; align-items: center; gap: 10px;
  font-size: .56rem; color: var(--db-muted);
  margin-left: auto; flex-shrink: 1; min-width: 0;
  background: none; border: none; padding: 0;
  overflow: hidden;
  flex-wrap: nowrap;
}
@media (max-width: 600px) {
  .hero-scanner { padding: 0 12px; height: 44px; }
  .hero-scanner__inner { gap: 8px; }
  .hero-scanner__viz { display: none; }
  .hero-scanner__meta { max-width: 130px; }
  .hero-scanner__channel { font-size: .62rem; }
  .hero-scanner__volume { width: 40px; }
  .hero-scanner__play { width: 30px; height: 30px; }
  .hero-scanner__sep { display: none; }
  .hero-scanner .scanner-stats { gap: 6px; font-size: .52rem; }
  .hero-scanner .scanner-stats .scanner-stats__tg-list { display: none; }
}
/* Wide desktop, let scanner channel name + status text breathe.
   Default max-width: 220px truncates "Central New York Scanner" on
   screens that have plenty of room. Scale up progressively. */
@media (min-width: 1200px) {
  .hero-scanner__meta { max-width: 320px; }
}
@media (min-width: 1600px) {
  .hero-scanner__meta { max-width: 400px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TRANSCRIPT TICKER, Compact scrolling line (~28px), expands on click
   ═══════════════════════════════════════════════════════════════════════ */
.radio-transcript {
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid var(--db-border);
  overflow: hidden;
  transition: max-height .3s ease, border-bottom-color .3s ease;
  max-height: 28px;
  flex-shrink: 0;
}
/* Collapse transcript ticker when idle (no active transcripts), reclaims 28px */
.radio-transcript:has(.radio-transcript__ticker-text.is-waiting) {
  max-height: 0;
  border-bottom-color: transparent;
}
.radio-transcript.is-expanded { max-height: 220px; }
/* Ticker row */
.radio-transcript__ticker {
  display: flex; align-items: center; gap: 8px;
  padding: 0 20px;
  height: 28px;
  cursor: pointer;
  user-select: none;
}
.radio-transcript__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--db-gold); opacity: 0.35;
  flex-shrink: 0;
  transition: opacity .3s;
}
.radio-transcript__dot.is-active {
  opacity: 1;
  animation: transcript-pulse 1.5s ease infinite;
}
/* Simplified from box-shadow animation to opacity for GPU performance */
@keyframes transcript-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.radio-transcript__ticker-track {
  flex: 1; min-width: 0; overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 92%, transparent 100%);
}
.radio-transcript__ticker-text {
  display: inline-block;
  white-space: nowrap;
  font-size: .62rem; color: var(--db-muted); font-weight: 500;
  line-height: 28px;
  animation: ticker-scroll 20s linear infinite;
  animation-play-state: running;
  transition: opacity .2s ease;
}
/* Fade transition class, toggled by JS for smooth text swap */
.radio-transcript__ticker-text.is-fading {
  opacity: 0;
}
/* Placeholder state, centered, no scroll animation */
.radio-transcript__ticker-text.is-waiting {
  animation: none;
  transform: none;
  text-align: center;
  width: 100%;
  font-style: italic;
  opacity: .6;
}
.radio-transcript:hover .radio-transcript__ticker-text {
  animation-play-state: paused;
}
@keyframes ticker-scroll {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
.radio-transcript__chevron {
  flex-shrink: 0; opacity: .4;
  transition: transform .2s ease, opacity .2s ease;
}
.radio-transcript:hover .radio-transcript__chevron { opacity: .7; }
.radio-transcript.is-expanded .radio-transcript__chevron { transform: rotate(180deg); }
/* Expanded scroll panel */
.radio-transcript__scroll {
  max-height: 160px; overflow-y: auto; padding: 0 20px 6px;
  scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: rgba(212,168,67,.2) transparent;
  display: none;
}
.radio-transcript.is-expanded .radio-transcript__scroll { display: block; }
.radio-transcript__scroll::-webkit-scrollbar { width: 4px; }
.radio-transcript__scroll::-webkit-scrollbar-track { background: transparent; }
.radio-transcript__scroll::-webkit-scrollbar-thumb { background: rgba(212,168,67,.2); border-radius: 2px; }
.radio-transcript__empty {
  font-size: .64rem; color: var(--db-muted); padding: 6px 0;
  font-style: italic;
  /* FIX: Hide empty placeholder by default, the ticker text already shows
     "Listening for dispatch radio traffic..." so displaying it again inside
     the expanded scroll panel is redundant (user reported seeing it twice).
     JS hides this div anyway once the first transcript arrives. */
  display: none;
}
.radio-transcript__entry {
  display: flex; gap: 8px; padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,.03);
  animation: transcript-fadein .4s ease;
}
.radio-transcript__entry:last-child { border-bottom: none; }
@keyframes transcript-fadein {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
.radio-transcript__time {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: .58rem; color: var(--db-gold); opacity: .7;
  white-space: nowrap; padding-top: 1px; flex-shrink: 0;
  min-width: 52px;
}
.radio-transcript__channel {
  font-size: .56rem; font-weight: 600; color: var(--db-teal);
  white-space: nowrap; flex-shrink: 0; min-width: 80px;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis;
  padding-top: 1px;
}
.radio-transcript__text {
  font-size: .64rem; color: var(--db-text); line-height: 1.4;
  flex: 1; min-width: 0;
}
@media (max-width: 600px) {
  .radio-transcript__ticker { padding: 0 12px; }
  .radio-transcript__scroll { max-height: 140px; padding: 0 12px 6px; }
  .radio-transcript__channel { display: none; }
  .radio-transcript__entry { gap: 5px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   NAV TABS
   ═══════════════════════════════════════════════════════════════════════ */
.nav-tabs {
  display: flex; flex-wrap: nowrap; gap: 0; border-bottom: 1px solid var(--db-border);
  background: var(--db-bg-elevated); padding: 0 24px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  position: relative; flex-shrink: 0;
}
.nav-tabs::-webkit-scrollbar { display: none; }
/* Scroll fade, only on narrow screens (defined in dashboard.css) */
.nav-tabs::after { display: none; }
.nav-tabs__btn {
  display: flex; align-items: center; gap: 7px; padding: 10px 18px;
  font-size: .74rem; font-weight: 600; color: var(--db-muted);
  background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap; transition: all .2s ease;
  letter-spacing: 0.01em; flex-shrink: 0;
}
.nav-tabs__btn:hover { color: var(--db-heading); background: rgba(255,255,255,.02); }
.nav-tabs__btn.is-active {
  color: var(--db-gold); border-bottom-color: transparent; /* B21 FIX: remove border, use ::after only */
}
@media (max-width: 1024px) {
  /* nav-tabs stays visible on mobile, it handles tab switching between
     Feed/Cameras/Stats/Alerts/Pro. The bottom bar is the site-wide mob-nav. */
  .nav-tabs { display: flex; flex-wrap: nowrap; }
}
@media (max-width: 600px) {
  .nav-tabs { padding: 0 8px; flex-wrap: nowrap; }
  .nav-tabs__btn { padding: 10px 10px; font-size: .66rem; gap: 4px; }
}
@media (max-width: 380px) {
  .nav-tabs__btn svg { display: none; }
  .nav-tabs__btn { padding: 10px 8px; font-size: .62rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MAIN LAYOUT, Content + Chat Sidebar
   ═══════════════════════════════════════════════════════════════════════ */
/* Main layout: dashboard.css has the full definition.
   Kept here for above-fold paint. */
#db-content {
  display: flex; flex-direction: column;
  /* BUG FIX #1: Use flex: 1 to fill remaining space below header
     instead of hardcoded calc(100vh - 50px) which breaks when header
     height varies. The .page-shell flex column handles the math. */
  flex: 1;
  min-height: 0;
  height: auto;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
.db-main-layout {
  display: flex;
  flex: 1; min-height: 0; overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

/* ── 3-Column Layout: Map | Alerts | Chat ── */
.db-map-column {
  flex: 0 0 28%;
  min-width: 220px;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  background: var(--db-bg, #0a0e1a);
  border-right: 1px solid var(--db-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.db-map-column .mini-map-widget {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 0;
}
.db-map-column .mini-map-widget__body {
  flex: 1;
  min-height: 0;
  height: auto;
  max-height: none;
}
.db-map-column .mini-map-widget__body #mini-map-container {
  width: 100%;
  height: 100%;
}

.db-main-content {
  flex: 1 1 40%;
  min-width: 0;
  padding: 16px 20px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-sizing: border-box;
}

/* Feed scroll: fill available height in center column */
.db-main-layout--three-col .feed-scroll {
  max-height: none;
  flex: 1;
  min-height: 0;
}

/* Responsive: tablet, hide map column, keep feed + chat */
@media (min-width: 601px) and (max-width: 1024px) {
  .db-map-column { display: none; }
  .db-main-content { flex: 1; padding: 16px 16px 80px; }
}
/* Responsive: mobile, stack map above feed */
@media (max-width: 600px) {
  .db-main-layout--three-col { flex-direction: column; }
  .db-map-column { display: flex; flex: 0 0 auto; height: 35vh; border-right: none; border-bottom: 1px solid var(--db-border); }
  .db-main-content { flex: 1; padding: 16px 16px 80px; }
}

/* ── Wide screens (1600px+): Rebalance columns, alerts doesn't need to
   dominate; give map and chat more breathing room. On a 1920px monitor
   at default zoom, alerts was ~800px wide while map/chat were cramped.
   Now map gets 32%, alerts is capped, chat expands to 420px. ── */
@media (min-width: 1600px) {
  .db-map-column { flex: 0 0 32%; }
  .db-main-content { flex: 1 1 30%; max-width: 600px; }
  .chat-sidebar { --db-chat-w: 420px; }
}
/* ── Ultra-wide (1920px+): Map and chat get even more room.
   Alerts feed has diminishing returns past ~600px, the extra
   pixels are far more useful for the live map and chat. ── */
@media (min-width: 1920px) {
  .db-map-column { flex: 0 0 35%; }
  .db-main-content { flex: 1 1 25%; max-width: 640px; }
  .chat-sidebar { --db-chat-w: 480px; }
}

/* ─── Tab Panels ── */
.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fadeInPanel .3s ease; }
@keyframes fadeInPanel { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Feed Panel ── */
.feed-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.feed-header__title { font-size: .88rem; font-weight: 800; color: var(--db-heading); display: flex; align-items: center; gap: 8px; letter-spacing: -0.02em; }
.feed-header__live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--db-red); box-shadow: 0 0 8px rgba(248,113,113,.4); animation: pulse-dot 2s ease infinite; }
.feed-header__count { font-size: .66rem; color: var(--db-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.feed-scroll { display: flex; flex-direction: column; gap: 4px; }
.feed-scroll::-webkit-scrollbar { width: 4px; }
.feed-scroll::-webkit-scrollbar-track { background: transparent; }
.feed-scroll::-webkit-scrollbar-thumb { background: var(--db-surface-3); border-radius: 3px; }
.feed-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.12); }

/* ─── Timeline Group Separators ─── */
.feed-time-group {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0 2px; margin-top: 4px;
  font-size: .6rem; font-weight: 700; color: var(--db-muted);
  text-transform: uppercase; letter-spacing: .06em;
  user-select: none;
}
.feed-time-group:first-of-type { margin-top: 0; }
.feed-time-group__label {
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.feed-time-group__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--db-muted); flex-shrink: 0;
}
.feed-time-group--now .feed-time-group__dot {
  background: var(--db-green);
  box-shadow: 0 0 6px rgba(52,211,153,.5);
  animation: pulse-dot 2s ease infinite;
}
.feed-time-group--now .feed-time-group__label { color: var(--db-green); }
.feed-time-group--recent .feed-time-group__dot { background: var(--db-gold); }
.feed-time-group--recent .feed-time-group__label { color: var(--db-gold); }
.feed-time-group__line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--db-border), transparent);
}
.feed-time-group__count {
  font-size: .54rem; font-weight: 500; color: var(--db-muted);
  opacity: .6; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ─── "Just now" card accent, subtle green left-border glow ─── */
.feed-card--just-now {
  border-left-color: var(--db-green) !important;
}
.feed-card--just-now::after {
  content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 3px;
  background: var(--db-green);
  box-shadow: 0 0 8px rgba(52,211,153,.3);
  border-radius: 2px 0 0 2px;
}

/* ─── Auto-refresh elapsed time indicator ─── */
.feed-card__live-elapsed {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: .56rem; color: var(--db-green); font-weight: 600;
  background: var(--db-green-dim); padding: 1px 6px; border-radius: 3px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.feed-card__live-elapsed--stale {
  color: var(--db-muted); background: var(--db-surface-2);
}

/* ─── Feed Card, Compact Redesign ─── */
.feed-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 12px; background: var(--db-surface);
  border: 1px solid var(--db-border); border-radius: var(--db-radius-sm);
  border-left: 3px solid var(--db-muted); cursor: pointer;
  transition: all .2s ease, box-shadow .25s ease; position: relative;
  animation: feed-card-enter .35s ease both;
}
@keyframes feed-card-enter {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.feed-card:hover { background: var(--db-surface-2); border-color: var(--db-border-hover); }

/* Type-based left border colors + hover glow per type */
.feed-card--fire    { border-left-color: #f87171; }
.feed-card--fire:hover { box-shadow: inset 0 0 24px rgba(248,113,113,.04), 0 2px 12px rgba(248,113,113,.08); }
.feed-card--ems     { border-left-color: #fb923c; }
.feed-card--ems:hover { box-shadow: inset 0 0 24px rgba(251,146,60,.04), 0 2px 12px rgba(251,146,60,.08); }
.feed-card--police  { border-left-color: #c084fc; }
.feed-card--police:hover { box-shadow: inset 0 0 24px rgba(192,132,252,.04), 0 2px 12px rgba(192,132,252,.08); }
.feed-card--weather { border-left-color: #60a5fa; }
.feed-card--weather:hover { box-shadow: inset 0 0 24px rgba(96,165,250,.04), 0 2px 12px rgba(96,165,250,.08); }
.feed-card--traffic { border-left-color: #fbbf24; }
.feed-card--traffic:hover { box-shadow: inset 0 0 24px rgba(251,191,36,.04), 0 2px 12px rgba(251,191,36,.08); }
.feed-card--hazmat  { border-left-color: #34d399; }
.feed-card--hazmat:hover { box-shadow: inset 0 0 24px rgba(52,211,153,.04), 0 2px 12px rgba(52,211,153,.08); }
/* Severity fallbacks, with background tint for critical/high to increase visual hierarchy */
.feed-card--sev-critical {
  border-left-color: var(--db-red);
  background: rgba(248,113,113,.04);
  border-left-width: 4px;
}
.feed-card--sev-critical:hover { box-shadow: inset 0 0 24px rgba(248,113,113,.05), 0 2px 12px rgba(248,113,113,.1); background: rgba(248,113,113,.07); }
.feed-card--sev-high {
  border-left-color: #ff9357;
  background: rgba(255,147,87,.03);
}
.feed-card--sev-high:hover { box-shadow: inset 0 0 24px rgba(255,147,87,.04), 0 2px 12px rgba(255,147,87,.08); background: rgba(255,147,87,.06); }
.feed-card--sev-medium   { border-left-color: var(--db-amber); }
.feed-card--sev-low      { border-left-color: var(--db-teal); }

/* Signal strength bars, visual priority indicator */
.feed-card__signal {
  display: flex; align-items: flex-end; gap: 1.5px; height: 14px; flex-shrink: 0;
}
.feed-card__signal-bar {
  width: 3px; border-radius: 1px;
  background: rgba(255,255,255,.12);
  transition: background .3s ease;
}
.feed-card__signal-bar:nth-child(1) { height: 4px; }
.feed-card__signal-bar:nth-child(2) { height: 7px; }
.feed-card__signal-bar:nth-child(3) { height: 10px; }
.feed-card__signal-bar:nth-child(4) { height: 14px; }
.feed-card__signal-bar.is-active { background: var(--db-gold); }
.feed-card--sev-critical .feed-card__signal-bar.is-active { background: var(--db-red); }
.feed-card--sev-high .feed-card__signal-bar.is-active { background: #ff9357; }

/* Trending badge */
.feed-card__trending {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px; border-radius: 4px;
  background: rgba(248,113,113,.1); color: var(--db-red);
  font-size: .56rem; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap; animation: trending-pulse 2s ease infinite;
}
@keyframes trending-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}

/* Distance from user */
.feed-card__distance {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .6rem; color: var(--db-teal); font-weight: 600; white-space: nowrap;
}

/* Time-since counter (elapsed dispatch time) */
.feed-card__elapsed {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: .58rem; color: var(--db-gold); font-weight: 600;
  background: var(--db-gold-dim); padding: 1px 6px; border-radius: 3px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* Type icon column */
.feed-card__icon {
  font-size: 1.1rem; line-height: 1; flex-shrink: 0;
  width: 34px; height: 34px; min-width: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--db-surface-2);
  transition: transform .2s ease, box-shadow .2s ease;
  text-align: center; overflow: hidden;
}
.feed-card__icon img { width: 1.1rem; height: 1.1rem; object-fit: contain; }
.feed-card:hover .feed-card__icon { transform: scale(1.08); }
.feed-card--fire .feed-card__icon    { background: rgba(248,113,113,.10); }
.feed-card--ems .feed-card__icon     { background: rgba(251,146,60,.10); }
.feed-card--police .feed-card__icon  { background: rgba(192,132,252,.10); }
.feed-card--weather .feed-card__icon { background: rgba(96,165,250,.10); }
.feed-card--traffic .feed-card__icon { background: rgba(251,191,36,.10); }
.feed-card--hazmat .feed-card__icon  { background: rgba(52,211,153,.10); }

/* Severity dot (replaces the large badge) */
.feed-card__sev-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block;
}
.feed-card__sev-dot--critical { background: var(--db-red); box-shadow: 0 0 6px rgba(248,113,113,.5); }
.feed-card__sev-dot--high     { background: #ff9357; box-shadow: 0 0 5px rgba(255,147,87,.4); }
.feed-card__sev-dot--medium   { background: var(--db-amber); }
.feed-card__sev-dot--low      { background: var(--db-teal); }

/* Severity text badge, shown for critical/high to draw immediate attention */
.feed-card__sev-badge {
  display: inline-flex; align-items: center;
  padding: 1px 6px; border-radius: 3px;
  font-size: .52rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
  line-height: 1.4;
}
.feed-card__sev-badge--critical {
  background: var(--db-red-dim); color: var(--db-red);
  animation: sev-badge-pulse 2.5s ease-in-out infinite;
}
.feed-card__sev-badge--high {
  background: rgba(255,147,87,.12); color: #ff9357;
}
@keyframes sev-badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .6; }
}

.feed-card__body { flex: 1; min-width: 0; }
.feed-card__row-top { display: flex; align-items: center; gap: 6px; }
.feed-card__title {
  font-size: .8rem; font-weight: 700; color: var(--db-heading);
  line-height: 1.3; letter-spacing: -0.01em;
  /* BUG FIX: Removed -webkit-line-clamp:2, titles should show in full, not truncated */
  flex: 1; min-width: 0;
  word-break: break-word;
}
.feed-card__time {
  font-size: .62rem; color: var(--db-muted); white-space: nowrap;
  flex-shrink: 0; font-variant-numeric: tabular-nums; font-weight: 500;
}
.feed-card__meta {
  display: flex; align-items: center; gap: 8px; margin-top: 3px;
  font-size: .66rem; color: var(--db-muted); line-height: 1.3;
  flex-wrap: wrap;
}
.feed-card__location {
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 55%;
}
.feed-card__location svg { flex-shrink: 0; opacity: .45; }
.feed-card__location--withheld { font-style: italic; opacity: .55; }

/* Unit count badge */
.feed-card__units-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 4px;
  background: var(--db-blue-dim); color: var(--db-blue);
  font-size: .6rem; font-weight: 600; white-space: nowrap;
}

/* Merged count */
.feed-card__merged {
  font-size: .6rem; color: var(--db-gold); font-weight: 600; white-space: nowrap;
}

/* Expandable details (technical data hidden by default) */
.feed-card__details {
  display: none; margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--db-border);
  font-size: .64rem; color: var(--db-muted); line-height: 1.5;
}
.feed-card__details.is-open { display: block; animation: feed-details-open .2s ease; }
@keyframes feed-details-open { from { opacity: 0; } to { opacity: 1; } }
.feed-card__details-toggle {
  color: var(--db-muted); cursor: pointer; font-size: .58rem;
  font-weight: 500; opacity: .5; transition: opacity .15s;
}
.feed-card__details-toggle:hover { opacity: 1; color: var(--db-gold); }

/* ── Expandable Detail Panel (click card to open) ── */
.feed-card.is-expanded { background: var(--db-surface-2); border-color: var(--db-border-hover); }
.feed-card__expand-panel {
  display: none; margin-top: 8px; padding-top: 10px;
  border-top: 1px solid var(--db-border);
}
.feed-card.is-expanded .feed-card__expand-panel {
  display: block; animation: feed-panel-open .25s ease;
}
@keyframes feed-panel-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.feed-card__expand-panel__section {
  margin-bottom: 8px;
}
.feed-card__expand-panel__section-title {
  font-size: .65rem; font-weight: 700; color: var(--db-muted);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
}

/* Timeline inside expanded card */
.feed-card__timeline {
  position: relative; padding-left: 14px;
}
.feed-card__timeline::before {
  content: ''; position: absolute; left: 4px; top: 2px; bottom: 2px;
  width: 1px; background: var(--db-border);
}
.feed-card__timeline-item {
  position: relative; padding: 4px 0; font-size: .7rem; color: var(--db-text);
  line-height: 1.45;
}
.feed-card__timeline-item::before {
  content: ''; position: absolute; left: -14px; top: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--db-surface-3); border: 1.5px solid var(--db-muted);
}
.feed-card__timeline-item--active::before {
  background: var(--db-green); border-color: var(--db-green);
  box-shadow: 0 0 6px rgba(34,197,94,.4);
}
.feed-card__timeline-item--alert::before {
  background: var(--db-red); border-color: var(--db-red);
  box-shadow: 0 0 6px rgba(248,113,113,.4);
}
.feed-card__timeline-time {
  font-size: .62rem; color: var(--db-muted); font-weight: 500;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-variant-numeric: tabular-nums;
}

/* Detail grid */
.feed-card__detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
}
.feed-card__detail-row {
  display: flex; align-items: baseline; gap: 6px;
  font-size: .7rem; line-height: 1.5;
}
.feed-card__detail-label {
  color: var(--db-muted); font-weight: 500; white-space: nowrap; min-width: 56px;
  font-size: .65rem;
}
.feed-card__detail-value {
  color: var(--db-text); font-weight: 600;
  word-break: break-word;
}

/* Pro badge on expanded panel */
.feed-card__pro-section {
  margin-top: 6px; padding: 6px 8px; border-radius: 6px;
  background: linear-gradient(135deg, rgba(212,168,67,.06), rgba(240,215,140,.04));
  border: 1px solid rgba(212,168,67,.12);
}
.feed-card__pro-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .6rem; font-weight: 800; color: var(--db-gold);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
}
.feed-card__pro-badge::before {
  content: '\2B50'; font-size: .55rem;
}

/* Expand chevron indicator */
.feed-card__expand-chevron {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; opacity: 0;
  transition: opacity .15s, transform .2s;
  color: var(--db-muted);
}
.feed-card:hover .feed-card__expand-chevron { opacity: .4; }
.feed-card.is-expanded .feed-card__expand-chevron {
  opacity: .6; transform: translateY(-50%) rotate(180deg);
}

@media (max-width: 600px) {
  .feed-card__detail-grid { grid-template-columns: 1fr; }
  /* Keep chevron visible on mobile, indicates tap-to-expand */
  .feed-card__expand-chevron { opacity: .3; }
}

/* ── SDR / Radio metadata badges on feed cards ── */
.feed-card__radio-row {
  display: flex; align-items: center; gap: 6px; margin-top: 4px;
  flex-wrap: wrap;
}
.feed-card__antenna-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 4px;
  background: var(--db-green-dim); color: var(--db-green);
  font-size: .56rem; font-weight: 700; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .04em;
}
.feed-card__antenna-badge svg { width: 10px; height: 10px; }
.feed-card__dispatch-priority {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 4px;
  font-size: .56rem; font-weight: 700; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .04em;
}
.feed-card__dispatch-priority--emergency {
  background: var(--db-red-dim); color: var(--db-red);
  animation: dispatch-pulse 2s ease infinite;
}
.feed-card__dispatch-priority--urgent {
  background: var(--db-amber-dim); color: var(--db-amber);
}
.feed-card__dispatch-priority--routine {
  background: var(--db-surface-2); color: var(--db-muted);
}
/* Simplified from box-shadow spread animation for GPU performance */
@keyframes dispatch-pulse {
  0%,100% { opacity: 1; }
  50% { opacity: .5; }
}
.feed-card__channel-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 4px;
  background: var(--db-teal-dim); color: var(--db-teal);
  font-size: .56rem; font-weight: 600; white-space: nowrap;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis;
}
.feed-card__freq-tag {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: .55rem; color: var(--db-muted); white-space: nowrap;
  opacity: .7; font-variant-numeric: tabular-nums;
}
.feed-card__duration-tag {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: .55rem; color: var(--db-purple); white-space: nowrap;
  opacity: .8; font-variant-numeric: tabular-nums;
}
/* Decode quality badge (Airspy R2 signal metrics) */
.feed-card__decode-quality {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: .52rem; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-family: 'SF Mono', monospace;
}
.feed-card__decode-quality--excellent { color: var(--db-green); }
.feed-card__decode-quality--good { color: var(--db-gold); }
.feed-card__decode-quality--fair { color: #ff9357; }
.feed-card__decode-quality--poor { color: var(--db-red); opacity: .7; }
.feed-card__decode-quality svg { opacity: .6; }
/* Talkgroup group tag (Fire Dispatch, Law Enforcement, EMS, etc.), color-coded by service */
.feed-card__tg-group-tag {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-size: .52rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; background: rgba(139,92,246,.12); color: var(--db-purple);
}
.feed-card__tg-group-tag--fire {
  background: rgba(248,113,113,.12); color: #f87171;
}
.feed-card__tg-group-tag--ems {
  background: rgba(251,146,60,.12); color: #fb923c;
}
.feed-card__tg-group-tag--law {
  background: rgba(192,132,252,.12); color: #c084fc;
}
.feed-card__tg-group-tag--default {
  background: rgba(139,92,246,.12); color: var(--db-purple);
}
/* Unit radio count badge */
.feed-card__unit-radio-count {
  font-size: .52rem; color: var(--db-blue); font-weight: 600;
  white-space: nowrap; opacity: .8;
}
.feed-card__unit-names {
  font-size: .58rem; color: var(--db-blue); font-weight: 500;
  line-height: 1.3; margin-top: 2px;
}
.feed-card__key-details {
  display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px;
}
.feed-card__key-detail {
  display: inline-block; padding: 0px 5px; border-radius: 3px;
  font-size: .52rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em;
}
.feed-card__key-detail--injuries { background: var(--db-red-dim); color: var(--db-red); }
.feed-card__key-detail--hazmat { background: rgba(52,211,153,.12); color: #34d399; }
.feed-card__key-detail--weapons { background: var(--db-red-dim); color: var(--db-red); }
.feed-card__key-detail--entrapment { background: var(--db-amber-dim); color: var(--db-amber); }
.feed-card__key-detail--multi_alarm { background: var(--db-red-dim); color: var(--db-red); }
.feed-card__key-detail--structure_threat { background: var(--db-amber-dim); color: var(--db-amber); }
.feed-card__key-detail--water_rescue { background: var(--db-blue-dim); color: var(--db-blue); }
.feed-card__key-detail--road_blocked { background: var(--db-amber-dim); color: var(--db-amber); }
.feed-card__confidence-bar {
  display: inline-flex; align-items: center; gap: 4px;
}
.feed-card__confidence-track {
  width: 32px; height: 3px; border-radius: 2px;
  background: var(--db-surface-3); overflow: hidden;
}
.feed-card__confidence-fill {
  height: 100%; border-radius: 2px; transition: width .3s ease;
}
.feed-card__confidence-fill--high { background: var(--db-green); }
.feed-card__confidence-fill--mid { background: var(--db-amber); }
.feed-card__confidence-fill--low { background: var(--db-red); }
.feed-card__confidence-label {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: .5rem; color: var(--db-muted); opacity: .6;
}

/* ── Scanner Stats (inline within scanner strip) ── */
.scanner-stats__item {
  display: inline-flex; align-items: baseline; gap: 4px;
  white-space: nowrap; flex-shrink: 0;
  cursor: default;
}
.scanner-stats__value {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-weight: 700; color: var(--db-heading);
  font-variant-numeric: tabular-nums;
  font-size: .6rem;
}
.scanner-stats__label { font-weight: 500; font-size: .50rem; opacity: .7; letter-spacing: .01em; }
.scanner-stats__divider {
  width: 1px; height: 12px; background: var(--db-border);
}
.scanner-stats__alert {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 3px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: .52rem;
}
.scanner-stats__alert--watch {
  background: var(--db-amber-dim); color: var(--db-amber);
}
.scanner-stats__alert--warning {
  background: var(--db-amber-dim); color: var(--db-amber);
  animation: dispatch-pulse 2s ease infinite;
}
.scanner-stats__alert--major {
  background: var(--db-red-dim); color: var(--db-red);
  animation: dispatch-pulse 1.5s ease infinite;
}
.scanner-stats__tg-list {
  display: inline-flex; gap: 3px; flex-wrap: nowrap;
  overflow: hidden; max-width: 280px;
  align-items: center;
}
.scanner-stats__tg-chip {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-size: .52rem; font-weight: 600;
  background: var(--db-surface-2); color: var(--db-text);
  max-width: 120px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; flex-shrink: 0;
  line-height: 1.4;
  cursor: pointer; transition: all .15s ease;
  border: 1px solid transparent;
}
.scanner-stats__tg-chip:hover {
  background: rgba(212,168,67,.12); color: var(--db-gold);
  border-color: rgba(212,168,67,.2);
  transform: translateY(-1px);
}
.scanner-stats__tg-chip.is-selected {
  background: rgba(212,168,67,.18); color: var(--db-gold);
  border-color: rgba(212,168,67,.35);
  box-shadow: 0 0 8px rgba(212,168,67,.15);
}
.scanner-stats__tg-chip--anomaly {
  background: var(--db-red-dim); color: var(--db-red);
  animation: tg-anomaly-glow 2s ease infinite;
}
.scanner-stats__tg-overflow {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-size: .50rem; font-weight: 700;
  background: rgba(212,168,67,.12); color: var(--db-gold);
  white-space: nowrap; flex-shrink: 0; cursor: default;
  line-height: 1.4;
}
/* Recently active department badges */
.scanner-stats__depts {
  display: inline-flex; align-items: center; gap: 4px;
  flex-wrap: wrap; max-width: 320px;
}
.scanner-stats__dept-label {
  font-size: .46rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: rgba(100,180,220,.6); margin-right: 2px;
  white-space: nowrap;
}
.scanner-stats__dept-list {
  display: inline-flex; gap: 3px; flex-wrap: wrap;
}
.scanner-stats__dept-badge {
  display: inline-block; padding: 1px 5px; border-radius: 3px;
  font-size: .48rem; font-weight: 600;
  background: rgba(100,180,220,.08); color: rgba(100,180,220,.85);
  border: 1px solid rgba(100,180,220,.15);
  white-space: nowrap; transition: all .15s ease;
}
.scanner-stats__dept-badge:hover {
  background: rgba(100,180,220,.15);
  border-color: rgba(100,180,220,.3);
}
/* Coverage button (mobile only) */
.hero-scanner__coverage-btn {
  display: none; width: 32px; height: 32px; border-radius: 6px;
  border: 1px solid rgba(212,168,67,.2);
  background: rgba(212,168,67,.08); color: var(--db-gold);
  font-size: .55rem; font-weight: 700; cursor: pointer;
  flex-shrink: 0; transition: all .15s ease;
  align-items: center; justify-content: center;
}
.hero-scanner__coverage-btn:active {
  background: rgba(212,168,67,.15);
  box-shadow: 0 0 8px rgba(212,168,67,.15);
}
/* Mobile coverage drawer */
.scanner-coverage-drawer {
  position: fixed; bottom: 0; left: 0; right: 0;
  max-height: 85vh; background: var(--db-surface);
  border-top: 1px solid var(--db-border);
  border-radius: 12px 12px 0 0; z-index: 600;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  animation: drawer-slide-up .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes drawer-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.scanner-coverage-drawer__handle {
  width: 40px; height: 4px; background: rgba(255,255,255,.2);
  border-radius: 2px; margin: 12px auto;
}
.scanner-coverage-drawer__content {
  padding: 16px; max-width: 480px; margin: 0 auto;
}
.scanner-coverage-drawer__title {
  font-size: 1rem; font-weight: 700; margin-bottom: 16px;
  color: var(--db-heading);
}
.scanner-coverage-drawer__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 20px;
}
.scanner-coverage-drawer__item {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px; background: rgba(212,168,67,.05);
  border: 1px solid rgba(212,168,67,.1); border-radius: 8px;
  text-align: center;
}
.scanner-coverage-drawer__count {
  font-size: 1.3rem; font-weight: 700; color: var(--db-gold);
  margin-bottom: 2px; font-variant-numeric: tabular-nums;
}
.scanner-coverage-drawer__label {
  font-size: .6rem; color: rgba(255,255,255,.7); line-height: 1.3;
}
.scanner-coverage-drawer__list {
  display: flex; flex-direction: column; gap: 14px;
}
.scanner-coverage-drawer__section h4 {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: rgba(212,168,67,.8); margin: 0 0 6px;
}
.scanner-coverage-drawer__section p {
  font-size: .65rem; color: rgba(255,255,255,.8); line-height: 1.5; margin: 0;
}
.scanner-coverage-drawer__close {
  display: block; width: 100%; margin-top: 16px; padding: 10px;
  background: var(--db-surface-2); color: var(--db-text);
  border: 1px solid var(--db-border); border-radius: 8px;
  font-size: .75rem; font-weight: 600; cursor: pointer;
  text-align: center; transition: background .15s ease;
}
.scanner-coverage-drawer__close:active {
  background: rgba(212,168,67,.1);
}
/* Hide drawer + coverage btn on desktop */
@media (min-width: 481px) {
  .scanner-coverage-drawer { display: none !important; }
  .hero-scanner__coverage-btn { display: none !important; }
}
/* Simplified from box-shadow spread animation for GPU performance */
@keyframes tg-anomaly-glow {
  0%,100% { opacity: 1; }
  50% { opacity: .6; }
}
/* ── Talkgroup Detail Popover ── */
.tg-popover {
  position: absolute; z-index: 500;
  background: linear-gradient(135deg, var(--db-surface) 0%, rgba(15,22,36,.98) 100%);
  border: 1px solid rgba(212,168,67,.2);
  border-radius: 10px; padding: 12px 14px;
  min-width: 180px; max-width: 220px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 20px rgba(212,168,67,.06);
  animation: tg-pop-in .2s cubic-bezier(.34,1.56,.64,1);
  pointer-events: auto;
}
@keyframes tg-pop-in {
  from { opacity: 0; transform: translateY(4px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.tg-popover__arrow {
  position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 5px; overflow: hidden;
}
.tg-popover__arrow::before {
  content: ''; display: block; width: 8px; height: 8px;
  background: var(--db-surface); border: 1px solid rgba(212,168,67,.2);
  transform: rotate(45deg) translate(1px, 1px);
}
.tg-popover__header {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
}
.tg-popover__name {
  font-size: .72rem; font-weight: 700; color: var(--db-heading);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.tg-popover__badge {
  font-size: .56rem; font-weight: 800; text-transform: uppercase;
  padding: 1px 5px; border-radius: 3px; letter-spacing: .04em;
  flex-shrink: 0;
}
.tg-popover__badge--active { background: var(--db-green-dim); color: var(--db-green); }
.tg-popover__badge--anomaly { background: var(--db-red-dim); color: var(--db-red); animation: tg-anomaly-glow 2s ease infinite; }
.tg-popover__stats {
  display: flex; gap: 12px; margin-bottom: 8px;
}
.tg-popover__stat { display: flex; flex-direction: column; }
.tg-popover__stat-val {
  font-size: .82rem; font-weight: 800; color: var(--db-gold);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.tg-popover__stat-label {
  font-size: .56rem; font-weight: 500; color: var(--db-muted);
  text-transform: uppercase; letter-spacing: .04em; margin-top: 2px;
}
.tg-popover__bar-wrap {
  height: 3px; border-radius: 2px; background: var(--db-surface-2);
  overflow: hidden; margin-bottom: 10px;
}
.tg-popover__bar {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--db-gold), #e8b84a);
  transition: width .3s ease;
}
.tg-popover__filter-btn {
  display: inline-flex; align-items: center; gap: 4px; width: 100%;
  justify-content: center;
  padding: 4px 10px; border-radius: 5px; cursor: pointer;
  font-size: .56rem; font-weight: 700; font-family: inherit;
  color: var(--db-gold); background: rgba(212,168,67,.08);
  border: 1px solid rgba(212,168,67,.15);
  transition: all .15s ease; text-transform: uppercase; letter-spacing: .03em;
}
.tg-popover__filter-btn:hover {
  background: rgba(212,168,67,.15); border-color: rgba(212,168,67,.3);
}

@media (max-width: 600px) {
  .feed-card__radio-row { gap: 4px; }
  .feed-card__channel-tag { max-width: 100px; }
  .feed-card__unit-names { display: none; }
}

/* Description row */
.feed-card__desc {
  font-size: .66rem; color: var(--db-muted); margin-top: 4px; line-height: 1.45;
}
.feed-card__desc-text { }
.feed-card__desc-toggle { color: var(--db-gold); cursor: pointer; font-size: .6rem; margin-left: 4px; font-weight: 600; }
.feed-card__desc-toggle:hover { text-decoration: underline; }
/* Whisper transcript snippet on feed card front. Italic muted blockquote
   with a gold left rule, mobile 2-line clamp, desktop 3-line clamp. */
.event-transcript-snippet,
.feed-card__transcript-snippet {
  margin: 4px 0 0; padding: 4px 8px;
  font-style: italic; font-size: .64rem; color: var(--db-muted, #6b7280);
  border-left: 2px solid var(--db-gold, #d4a843);
  background: rgba(212, 168, 67, 0.04);
  line-height: 1.45;
  border-radius: 0 4px 4px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
@media (min-width: 768px) {
  .event-transcript-snippet,
  .feed-card__transcript-snippet {
    -webkit-line-clamp: 3;
    font-size: .68rem;
  }
}
.feed-card__agency-note {
  display: flex; align-items: center; gap: 5px;
  font-size: .58rem; font-weight: 600;
  color: var(--db-amber); opacity: 0.85;
  margin-top: 4px; padding: 3px 8px;
  background: rgba(245, 158, 11, 0.07);
  border-radius: 5px; line-height: 1.4;
}
.feed-card__agency-note svg { flex-shrink: 0; color: var(--db-amber); }

/* ──────────── Incident Update Pulse ────────────
   Triggered when a dedup-linked call updates an existing incident.
   Adds a 600ms ease-out pulse on the card, plus a temporary "updated"
   pip badge (auto-fades after 30s) and a "X related calls" counter.
   Animation: scale + opacity, GPU-accelerated, no layout thrash. */
@keyframes feed-card-pulse {
  0%   { transform: scale(1);     box-shadow: 0 0 0 0 rgba(212,168,67,0); }
  20%  { transform: scale(1.012); box-shadow: 0 0 0 6px rgba(212,168,67,.18); }
  100% { transform: scale(1);     box-shadow: 0 0 0 0 rgba(212,168,67,0); }
}
.feed-card--updated {
  animation: feed-card-pulse .6s ease-out 1;
  will-change: transform, box-shadow;
}
@media (prefers-reduced-motion: reduce) {
  .feed-card--updated { animation: none; }
}
@keyframes feed-card-pip-fade {
  0%   { opacity: 0; transform: scale(.6); }
  10%  { opacity: 1; transform: scale(1); }
  85%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.95); }
}
.feed-card__updated-pip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; margin-left: 6px;
  background: rgba(212,168,67,.14);
  border: 1px solid rgba(212,168,67,.32);
  color: var(--db-gold, #d4a843);
  border-radius: 999px;
  font-size: .56rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  animation: feed-card-pip-fade 30s ease-in-out forwards;
  pointer-events: none;
}
.feed-card__updated-pip::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--db-gold, #d4a843);
  box-shadow: 0 0 4px rgba(212,168,67,.7);
}
.feed-card__related-count {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; margin-left: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--db-muted, #6b7280);
  border-radius: 6px;
  font-size: .58rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.feed-card__related-count strong { color: var(--db-heading, #f0f2f5); font-weight: 700; }
.feed-card__last-update {
  display: inline-block; margin-left: 4px;
  font-size: .56rem; color: var(--db-muted, #6b7280);
  font-variant-numeric: tabular-nums; opacity: .85;
}

/* ──────────── Zone Counter Widget ────────────
   Compact East/West/North/Syracuse hourly counts at top of /alerts/
   and /dashboard/. Civic-media palette. Click to filter the timeline.
   Mobile: horizontal scroll with snap. Desktop: 4-column grid. */
.zone-counter {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: rgba(13, 21, 32, .55);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.zone-counter__item {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 8px 10px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
  text-align: left;
  font-family: inherit;
  color: var(--db-heading, #f0f2f5);
  min-height: 56px;
}
.zone-counter__item:hover,
.zone-counter__item:focus-visible {
  border-color: rgba(212,168,67,.35);
  background: rgba(212,168,67,.05);
  outline: none;
  transform: translateY(-1px);
}
.zone-counter__item.is-active {
  border-color: rgba(212,168,67,.5);
  background: rgba(212,168,67,.08);
}
.zone-counter__label {
  font-size: .58rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--db-muted, #6b7280);
  margin-bottom: 4px;
}
.zone-counter__count {
  font-size: 1.1rem; font-weight: 800;
  color: var(--db-heading, #f0f2f5);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.zone-counter__sublabel {
  font-size: .54rem; font-weight: 500;
  color: var(--db-muted, #6b7280);
  margin-top: 3px;
  text-transform: uppercase; letter-spacing: .04em;
}
.zone-counter__item[data-zone="east"] .zone-counter__count   { color: #10d9c0; }
.zone-counter__item[data-zone="west"] .zone-counter__count   { color: #f59e0b; }
.zone-counter__item[data-zone="north"] .zone-counter__count  { color: #818cf8; }
.zone-counter__item[data-zone="syracuse"] .zone-counter__count { color: var(--db-gold, #d4a843); }
@media (max-width: 600px) {
  .zone-counter {
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .zone-counter::-webkit-scrollbar { display: none; }
  .zone-counter__item { scroll-snap-align: start; }
}
@media (max-width: 420px) {
  .zone-counter {
    grid-template-columns: 1fr 1fr;
    overflow-x: visible;
  }
}

/* Live dot */
.feed-card__live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--db-red);
  flex-shrink: 0; animation: pulse-dot 2s ease infinite;
  box-shadow: 0 0 6px rgba(248,113,113,.4);
}

.feed-empty { text-align: center; padding: 48px 20px; color: var(--db-muted); font-size: .82rem; line-height: 1.6; }
.feed-empty svg { opacity: .3; margin-bottom: 12px; }

/* ─── Map Panel ── */
.map-panel { position: relative; }
.map-container { flex: 1; min-height: 350px; max-height: 800px; border-radius: var(--db-radius); overflow: hidden; border: 1px solid var(--db-border); position: relative; }
@media (max-width: 768px) { .map-container { min-height: 280px; max-height: 500px; border-radius: var(--db-radius-sm); } }

/* Map legend overlay */
.map-legend {
  position: absolute; bottom: 16px; left: 16px; z-index: 10;
 background: rgba(13,21,32,.92); 
  border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
  padding: 12px 16px; min-width: 130px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.map-legend__title {
  font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--db-muted); margin-bottom: 10px;
  padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.map-legend__items { display: flex; flex-direction: column; gap: 6px; }
.map-legend__item {
  display: flex; align-items: center; gap: 10px;
  font-size: .65rem; color: var(--db-text); font-weight: 500;
  letter-spacing: .01em;
}
.map-legend__dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 8px currentColor, 0 0 3px currentColor inset;
  border: 1.5px solid rgba(255,255,255,.15);
}
.map-legend__dot--critical { background: #ef4444; color: rgba(239,68,68,.5); }
.map-legend__dot--high { background: #f97316; color: rgba(249,115,22,.5); }
.map-legend__dot--medium { background: #eab308; color: rgba(234,179,8,.4); }
.map-legend__dot--low { background: #2dd4bf; color: rgba(45,212,191,.4); }
.map-legend__pulse-note {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.06);
  font-size: .58rem; color: #6b7280; font-weight: 500; letter-spacing: .01em;
}
.map-legend__pulse-indicator {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: #ef4444;
  animation: legend-pulse 2s ease infinite;
}
/* Simplified from box-shadow + transform animation for GPU performance */
@keyframes legend-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
@media (max-width: 600px) {
  .map-legend { bottom: 10px; left: 10px; padding: 10px 12px; min-width: 110px; }
  .map-legend__item { font-size: .58rem; gap: 8px; }
  .map-legend__dot { width: 8px; height: 8px; }
}

/* ─── Mini Map Widget (Feed Panel) ── */
.mini-map-widget {
  border-radius: var(--db-radius);
  border: 1px solid var(--db-border);
  overflow: hidden;
  margin-bottom: 12px;
  background: var(--db-surface);
  transition: all .3s ease;
}
.mini-map-widget__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: var(--db-surface-2);
  border-bottom: 1px solid var(--db-border);
}
.mini-map-widget__title {
  display: flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; color: var(--db-heading);
  letter-spacing: -0.01em; text-transform: uppercase;
}
.mini-map-widget__live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--db-green);
  box-shadow: 0 0 6px rgba(52,211,153,.5);
  animation: pulse-dot 2s ease infinite;
}
.mini-map-widget__actions { display: flex; align-items: center; gap: 6px; }
.mini-map-widget__btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 6px;
  background: var(--db-surface-3); border: 1px solid var(--db-border);
  color: var(--db-muted); font-size: .62rem; font-weight: 600;
  cursor: pointer; transition: all .15s ease;
  letter-spacing: .02em;
}
.mini-map-widget__btn:hover { background: var(--db-gold-dim); color: var(--db-gold); border-color: var(--db-gold-border); }
.mini-map-widget__btn svg { flex-shrink: 0; }
.mini-map-widget__body {
  height: 35vh; min-height: 200px; max-height: 340px;
  position: relative;
}
.mini-map-widget__body #mini-map-container {
  width: 100%; height: 100%;
}
/* Loading skeleton while Google Maps JS initializes */
.mini-map-widget__body #mini-map-container:empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--db-surface-2, #1a1a2e);
}
.mini-map-widget__body #mini-map-container:empty::before {
  content: 'Loading map\2026';
  color: var(--db-muted, #888);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: 0;
  animation: map-skeleton-fade 1.2s ease-in-out infinite alternate;
}
@keyframes map-skeleton-fade {
  0%   { opacity: .3; }
  100% { opacity: .7; }
}
.mini-map-widget.is-collapsed .mini-map-widget__body { display: none; }
.mini-map-widget.is-collapsed { margin-bottom: 8px; }

/* Feed scroll, no max-height needed, parent .db-main-content handles scrolling */

@media (max-width: 1024px) {
  .mini-map-widget__body { height: 200px; min-height: 160px; max-height: 200px; }
}
@media (max-width: 600px) {
  .mini-map-widget__body { height: 180px; min-height: 140px; max-height: 180px; }
  .mini-map-widget__header { padding: 6px 10px; }
}

/* ─── Cameras Panel ── */
.cameras-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.cameras-panel-header__title {
  font-size: .84rem; font-weight: 800; color: var(--db-heading);
  display: flex; align-items: center; gap: 8px; letter-spacing: -0.02em;
}
.cameras-panel-header__count {
  font-size: .62rem; color: var(--db-muted); font-weight: 500;
  background: var(--db-surface-2); padding: 3px 10px; border-radius: 12px;
  font-variant-numeric: tabular-nums;
}
.cameras-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
@media (max-width: 600px) { .cameras-grid { grid-template-columns: 1fr; } }

/* Camera connection status indicator */
.cam-connection-indicator {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  display: flex; align-items: center; gap: 4px;
  font-size: .52rem; font-weight: 700; letter-spacing: .04em;
  color: rgba(255,255,255,.8); background: rgba(0,0,0,.6);
  padding: 3px 8px; border-radius: 10px; text-transform: uppercase;
}
.cam-connection-indicator__dot {
  width: 5px; height: 5px; border-radius: 50%;
}
.cam-connection-indicator--streaming .cam-connection-indicator__dot {
  background: var(--db-green); box-shadow: 0 0 4px rgba(52,211,153,.6);
}
.cam-connection-indicator--buffering .cam-connection-indicator__dot {
  background: var(--db-amber); animation: pulse-dot 1s ease infinite;
}
.cam-connection-indicator--offline .cam-connection-indicator__dot {
  background: var(--db-red);
}

/* ─── Analytics Panel ── */
.analytics-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.analytics-header__title {
  font-size: .84rem; font-weight: 800; color: var(--db-heading);
  display: flex; align-items: center; gap: 8px; letter-spacing: -0.02em;
}
.analytics-header__period {
  font-size: .62rem; color: var(--db-muted); font-weight: 500;
  background: var(--db-surface-2); padding: 4px 12px; border-radius: 12px;
}
.analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .analytics-grid { grid-template-columns: 1fr; } }
.analytics-card {
  background: var(--db-surface); border: 1px solid var(--db-border);
  border-radius: var(--db-radius); padding: 20px;
  transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.analytics-card:hover { border-color: var(--db-border-hover); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.analytics-card__title { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--db-muted); margin-bottom: 16px; display: flex; align-items: center; gap: 6px; }
.analytics-card__title-icon { opacity: .5; }
.analytics-card--wide { grid-column: 1 / -1; }

/* Talkgroup table */
.analytics-tg-table { width: 100%; border-collapse: collapse; font-size: .64rem; }
.analytics-tg-table thead th { text-align: left; color: var(--db-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .56rem; padding: 0 0 8px 0; border-bottom: 1px solid var(--db-border); }
.analytics-tg__count-hd { text-align: right !important; min-width: 36px; }
.analytics-tg-table tbody tr { border-bottom: 1px solid var(--db-surface-2); }
.analytics-tg-table tbody tr:last-child { border-bottom: none; }
.analytics-tg__name { color: var(--db-text); font-weight: 500; padding: 7px 8px 7px 0; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.analytics-tg__count { color: var(--db-muted); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; padding: 7px 0; min-width: 32px; }

/* Daily / Hourly bar chart variants */
.noc-bar-chart--daily { height: 90px; }
.noc-bar-chart--hourly { height: 70px; }
.noc-bar--hourly { min-width: 0; }

/* Analytics stat widget, for simple big-number cards */
.analytics-stat {
  display: flex; flex-direction: column; gap: 4px;
}
.analytics-stat__value {
  font-size: 1.6rem; font-weight: 800; color: var(--db-heading);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1;
}
.analytics-stat__label {
  font-size: .62rem; color: var(--db-muted); font-weight: 500;
}
.analytics-stat__trend {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .58rem; font-weight: 700; margin-top: 6px;
  padding: 2px 8px; border-radius: 4px; width: fit-content;
}
.analytics-stat__trend--up { background: var(--db-green-dim); color: var(--db-green); }
.analytics-stat__trend--down { background: var(--db-red-dim); color: var(--db-red); }
.analytics-stat__trend--flat { background: var(--db-surface-2); color: var(--db-muted); }

/* Horizontal mini-bar for zone activity */
.analytics-zone-bar {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
}
.analytics-zone-bar__label {
  font-size: .64rem; color: var(--db-text); font-weight: 500;
  min-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.analytics-zone-bar__track {
  flex: 1; height: 6px; background: var(--db-surface-2); border-radius: 3px; overflow: hidden;
}
.analytics-zone-bar__fill {
  height: 100%; border-radius: 3px; transition: width .6s cubic-bezier(.4,0,.2,1);
  background: linear-gradient(90deg, var(--db-gold), #e8c36a);
}
.analytics-zone-bar__count {
  font-size: .6rem; color: var(--db-muted); font-variant-numeric: tabular-nums; min-width: 24px; text-align: right;
}
.noc-donut { position: relative; width: 150px; height: 150px; margin: 0 auto 16px; }
.noc-donut__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.noc-donut__svg circle { fill: none; stroke-width: 5; }
.noc-donut__center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; }
.noc-donut__total { display: block; font-size: 1.3rem; font-weight: 800; color: var(--db-heading); letter-spacing: -0.02em; }
.noc-donut__label { display: block; font-size: .6rem; color: var(--db-muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }
.noc-donut__legend { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.noc-donut__legend-item { display: flex; align-items: center; gap: 5px; font-size: .64rem; color: var(--db-text); font-weight: 500; }
.noc-donut__legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.noc-bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 100px; padding-bottom: 20px; }
.noc-bar { flex: 1; background: var(--db-surface-3); border-radius: 4px 4px 0 0; min-height: 4px; position: relative; transition: height .4s cubic-bezier(.4,0,.2,1); }
.noc-bar:hover { filter: brightness(1.3); }
.noc-bar__label { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: .56rem; color: var(--db-muted); font-weight: 500; }

/* ─── Settings Panel, toggle styles in dashboard.css ── */
.db-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--db-border);
}
.db-toggle-row__info { display: flex; align-items: center; gap: 12px; }
.db-toggle-row__icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.db-toggle-row__label { font-size: .76rem; color: var(--db-text); font-weight: 500; }
/* db-toggle styles moved to dashboard.css */

/* Zones in settings */
.zone-list { display: flex; flex-direction: column; gap: 8px; }
.zone-item {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  background: var(--db-surface); border: 1px solid var(--db-border);
  border-radius: var(--db-radius); transition: border-color .2s ease;
}
.zone-item:hover { border-color: var(--db-border-hover); }
.zone-item__icon {
  width: 36px; height: 36px; background: var(--db-gold-dim);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: var(--db-gold); flex-shrink: 0;
}
.zone-item__info { flex: 1; min-width: 0; }
.zone-item__name { font-size: .78rem; font-weight: 700; color: var(--db-heading); letter-spacing: -0.01em; }
.zone-item__address { font-size: .66rem; color: var(--db-text); margin-top: 1px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zone-item__meta { font-size: .62rem; color: var(--db-muted); margin-top: 2px; font-weight: 500; }
.zone-item__actions { display: flex; gap: 4px; }
.zone-item__toggle,
.zone-item__btn {
  width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--db-border);
  background: none; color: var(--db-muted); cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: all .2s ease;
}
.zone-item__toggle:hover,
.zone-item__btn:hover { color: var(--db-heading); border-color: var(--db-border-hover); background: var(--db-surface); }
.zone-item__toggle.is-off { opacity: .5; }
.zone-item__toggle.is-off:hover { color: var(--db-green); border-color: rgba(52,211,153,.3); background: var(--db-green-dim); }
.zone-item__btn--delete:hover { color: var(--db-red); border-color: rgba(248,113,113,.3); background: var(--db-red-dim); }

.db-severity-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.db-severity-chip {
  display: flex; align-items: center; gap: 5px; padding: 6px 12px;
  border-radius: 20px; font-size: .68rem; font-weight: 600;
  background: var(--chip-bg); color: var(--chip-color);
  border: 1px solid transparent; cursor: pointer; transition: all .2s ease;
  opacity: .45;
}
.db-severity-chip:hover { opacity: .7; }
.db-severity-chip.is-active { opacity: 1; border-color: var(--chip-color); }
.db-severity-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Billing / Plan Management */
.settings-billing__card {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  padding: 18px;
}
.settings-billing__plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.settings-billing__plan-name {
  font-size: .84rem;
  font-weight: 700;
  color: var(--db-heading);
  letter-spacing: -0.01em;
}
.settings-billing__plan-status {
  font-size: .68rem;
  color: var(--db-green);
  font-weight: 600;
  margin-top: 2px;
}
.settings-billing__plan-status.is-past-due { color: var(--db-amber); }
.settings-billing__plan-status.is-canceled { color: var(--db-red); }
.settings-billing__plan-badge {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--db-surface-2);
  color: var(--db-muted);
}
.settings-billing__plan-badge.is-pro {
  background: var(--db-gold-dim);
  color: var(--db-gold);
  border: 1px solid var(--db-gold-border);
}
.settings-billing__plan-badge.is-enterprise {
  background: var(--db-teal-dim);
  color: var(--db-teal);
  border: 1px solid var(--db-teal-border);
}
.settings-billing__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.settings-billing__renewal {
  margin-top: 12px;
  font-size: .7rem;
  color: var(--db-muted);
  padding-top: 10px;
  border-top: 1px solid var(--db-border);
}

/* ═══════════════════════════════════════════════════════════════════════
   CHAT SIDEBAR, TikTok-style floating panel
   ═══════════════════════════════════════════════════════════════════════ */
/* Chat sidebar layout is defined in dashboard.css.
   Kept here only for above-fold skeleton/paint. */
.chat-sidebar {
  width: var(--db-chat-w); flex-shrink: 0;
  border-left: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column;
  background: rgba(15,20,34,.92);
  height: 100%; min-height: 0;
  overflow: hidden;
  max-width: var(--db-chat-w);
  box-sizing: border-box;
}
.chat-sidebar__header {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.2);
  min-width: 0; overflow: hidden;
  flex-shrink: 0;
}
.chat-sidebar__live-dot { width: 7px; height: 7px; min-width: 7px; border-radius: 50%; background: var(--db-red); animation: pulse-dot 2s ease infinite; box-shadow: 0 0 8px rgba(248,113,113,.4); flex-shrink: 0; }
.chat-sidebar__title { font-size: .76rem; font-weight: 800; color: var(--db-heading); letter-spacing: -0.01em; flex-shrink: 0; }
.chat-sidebar__encrypted { flex-shrink: 1; min-width: 0; overflow: hidden; }
.chat-sidebar__viewers { font-size: .62rem; color: var(--db-muted); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; margin-left: auto; }
.chat-sidebar__ws-status { display: flex; align-items: center; gap: 6px; padding: 4px 14px; font-size: .6rem; border-bottom: 1px solid rgba(255,255,255,.04); font-weight: 500; color: var(--db-muted); flex-shrink: 0; }
/* New-message attention pulse on chat header */
.chat-sidebar__header.has-new-msg { animation: chatHeaderPulse .6s ease; }
@keyframes chatHeaderPulse {
  0%   { background: rgba(0,0,0,.2); }
  40%  { background: rgba(212,168,67,.12); }
  100% { background: rgba(0,0,0,.2); }
}
.chat-ws-dot { width: 6px; height: 6px; border-radius: 50%; }
.chat-ws-dot--connected { background: var(--db-green); box-shadow: 0 0 6px rgba(52,211,153,.3); }
.chat-ws-dot--connecting { background: var(--db-amber); animation: pulse-dot 1s ease infinite; }
.chat-ws-dot--disconnected { background: var(--db-red); }
.chat-ws-dot--error { background: var(--db-amber); animation: pulse-dot 1s ease infinite; }

/* ─── Quick Emoji Bar (TikTok-style) ── */
.chat-quick-emoji-bar {
  display: flex; gap: 2px; padding: 3px 10px; overflow-x: auto;
  border-bottom: 1px solid rgba(255,255,255,.04);
  scrollbar-width: none;
  /* BUG FIX: removed justify-content:center, clips left emojis on narrow screens.
     Restored via media query on wider screens where overflow doesn't occur. */
  background: rgba(0,0,0,.15);
  flex-shrink: 0;
}
@media (min-width: 400px) {
  .chat-quick-emoji-bar { justify-content: center; }
}
.chat-quick-emoji-bar::-webkit-scrollbar { display: none; }
.chat-quick-emoji {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  font-size: .8rem; line-height: 1; cursor: pointer; transition: all .2s cubic-bezier(.4,0,.2,1);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; -webkit-tap-highlight-color: transparent;
}
.chat-quick-emoji:hover { background: rgba(255,255,255,.12); transform: scale(1.15); border-color: rgba(212,168,67,.3); }
.chat-quick-emoji:active { transform: scale(0.9); }
.chat-quick-emoji.is-popped {
  animation: emojiPop .3s cubic-bezier(.4,0,.2,1);
}
@keyframes emojiPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ─── Floating Emoji Reactions (TikTok-style) ── */
.chat-floating-reactions {
  position: absolute; bottom: 60px; right: 0; left: 0; height: 200px;
  pointer-events: none; overflow: hidden; z-index: 10;
}
.chat-floating-emoji {
  position: absolute; bottom: 0; font-size: 1.6rem;
  animation: floatUpPhysics var(--float-duration, 2s) cubic-bezier(.2,.8,.3,1) forwards;
  opacity: 0; pointer-events: none;
  transform: scale(var(--float-scale, 1));
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
  will-change: transform, opacity;
}
@keyframes floatUpPhysics {
  0%   { opacity: 0; transform: translateY(0) translateX(0) scale(var(--float-scale, 1)) rotate(0deg); }
  8%   { opacity: 1; transform: translateY(-10px) translateX(2px) scale(calc(var(--float-scale, 1) * 1.15)) rotate(0deg); }
  25%  { opacity: 1; transform: translateY(-50px) translateX(calc(var(--float-drift, 0px) * 0.4)) scale(var(--float-scale, 1)) rotate(calc(var(--float-rotation, 0deg) * 0.5)); }
  50%  { opacity: .9; transform: translateY(-100px) translateX(calc(var(--float-drift, 0px) * 0.8)) scale(var(--float-scale, 1)) rotate(var(--float-rotation, 0deg)); }
  75%  { opacity: .5; transform: translateY(-145px) translateX(calc(var(--float-drift, 0px) * 1.1)) scale(calc(var(--float-scale, 1) * 0.8)) rotate(calc(var(--float-rotation, 0deg) * 1.3)); }
  100% { opacity: 0; transform: translateY(-190px) translateX(calc(var(--float-drift, 0px) * 1.4)) scale(calc(var(--float-scale, 1) * 0.5)) rotate(calc(var(--float-rotation, 0deg) * 1.6)); }
}

/* ─── Messages container ── */
.chat-messages {
  flex: 1; overflow-y: auto; padding: 10px 14px; display: flex;
  flex-direction: column; gap: 4px; position: relative;
  /* Messages flow from bottom */
  justify-content: flex-end;
}
.chat-messages::-webkit-scrollbar { width: 2px; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

/* ─── Message bubble (TikTok-style) ── */
.chat-msg {
  display: flex; padding: 0; max-width: 100%;
  opacity: 1; transform: translateY(0) scale(1);
  /* Default visible state, animation applied via JS class staging */
}
/* Pre-animation state: message is in DOM but invisible */
.chat-msg--entering {
  opacity: 0; transform: translateY(16px) scale(0.95);
}
/* Spring slide-in animation triggered after entering state */
.chat-msg--slide-in {
  animation: msgSlideInSpring .4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  /* Defensive fallback: if animation is killed by nuclear !important rule,
     ensure message is still visible via direct property set */
  opacity: 1; transform: translateY(0) scale(1);
}
@keyframes msgSlideInSpring {
  0%   { opacity: 0; transform: translateY(16px) scale(0.95); }
  40%  { opacity: 1; transform: translateY(-2px) scale(1.01); }
  70%  { transform: translateY(1px) scale(0.995); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Grouped messages: tighter, no bounce */
.chat-msg--grouped {
  padding-top: 0; margin-top: -2px;
}
.chat-msg--grouped .chat-msg__bubble {
  border-top-left-radius: 4px;
  padding-top: 3px;
}
/* Fade-out for recycled messages */
.chat-msg--fade-out {
  animation: msgFadeOut .3s ease forwards !important;
  pointer-events: none;
}
@keyframes msgFadeOut {
  from { opacity: 1; transform: translateY(0); max-height: 80px; }
  to   { opacity: 0; transform: translateY(-8px); max-height: 0; padding: 0; margin: 0; overflow: hidden; }
}
.chat-msg__bubble {
  background: rgba(255,255,255,.09);
  /* NO backdrop-filter, GPU crash risk, replaced with slightly more opaque bg */
  border-radius: 14px; padding: 6px 12px; max-width: 90%;
  border: 1px solid rgba(255,255,255,.05);
  transition: background .15s;
}
.chat-msg__bubble:hover { background: rgba(255,255,255,.1); }
.chat-msg--self .chat-msg__bubble {
  background: rgba(212,168,67,.12);
  border-color: rgba(212,168,67,.15);
}
.chat-msg__username {
  font-size: .62rem; font-weight: 700; margin-right: 4px;
  letter-spacing: 0.01em;
}
/* Chat user role badges (Twitch-style) */
.chat-msg__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 3px; margin-right: 3px;
  font-size: .5rem; font-weight: 800; vertical-align: middle;
  flex-shrink: 0;
}
.chat-msg__badge--pro {
  background: var(--db-gold-dim); color: var(--db-gold);
  border: 1px solid var(--db-gold-border);
}
.chat-msg__badge--responder {
  background: var(--db-red-dim); color: var(--db-red);
  border: 1px solid rgba(248,113,113,.2);
}
.chat-msg__badge--verified {
  background: var(--db-teal-dim); color: var(--db-teal);
  border: 1px solid var(--db-teal-border);
}
.chat-msg__badge--mod {
  background: var(--db-green-dim); color: var(--db-green);
  border: 1px solid rgba(52,211,153,.2);
}
.chat-msg__time {
  font-size: .5rem; color: rgba(255,255,255,.3);
  font-variant-numeric: tabular-nums;
}
.chat-msg__text {
  display: block; font-size: .72rem; color: rgba(255,255,255,.85);
  word-break: break-word; line-height: 1.4; margin-top: 2px;
}
.chat-msg__emoji-large {
  display: block; font-size: 1.8rem; margin-top: 2px; line-height: 1.2;
}
/* Pinned message */
.chat-pinned {
  flex-shrink: 0; display: none; padding: 8px 14px;
  background: rgba(212,168,67,.06); border-bottom: 1px solid var(--db-gold-border);
  animation: pinnedSlideDown .3s ease;
}
.chat-pinned.is-visible { display: flex; align-items: flex-start; gap: 8px; }
@keyframes pinnedSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-pinned__icon {
  font-size: .7rem; flex-shrink: 0; margin-top: 1px;
}
.chat-pinned__content { flex: 1; min-width: 0; }
.chat-pinned__label {
  font-size: .54rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--db-gold); margin-bottom: 2px;
}
.chat-pinned__text {
  font-size: .66rem; color: var(--db-text); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-pinned__dismiss {
  background: none; border: none; color: var(--db-muted); cursor: pointer;
  padding: 2px; font-size: .72rem; line-height: 1; opacity: .5;
  transition: opacity .15s;
}
.chat-pinned__dismiss:hover { opacity: 1; }

.chat-msg--system {
  padding: 4px 12px; text-align: center;
}
.chat-msg__system-text {
  font-size: .62rem; color: var(--db-gold); font-weight: 500;
  opacity: .7;
}

/* Enhanced message hover, show timestamp more clearly */
.chat-msg__bubble:hover .chat-msg__time { color: rgba(255,255,255,.5); }
.chat-msg--incident .chat-msg__bubble {
  background: rgba(248,113,113,.1);
  border-color: rgba(248,113,113,.15);
}
.chat-msg--failed { opacity: .5; }
.chat-msg__error {
  font-size: .58rem; color: var(--db-red); margin-top: 3px; cursor: pointer;
  font-weight: 500;
}
/* Community member styles removed, all users identical */

/* ─── Jump to live ── */
.chat-jump-live {
  display: none; align-items: center; gap: 5px; justify-content: center;
  padding: 7px; font-size: .64rem; font-weight: 600; color: var(--db-gold);
  background: rgba(212,168,67,.1); border: none; cursor: pointer;
  transition: background .15s; 
}
.chat-jump-live:hover { background: rgba(212,168,67,.15); }
.chat-jump-live.is-visible { display: flex; }

/* ─── Input area ── */
.chat-input-area {
  padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.08);
  position: relative; background: rgba(0,0,0,.3);
  margin-top: auto; /* Push to bottom of sidebar flex column */
  flex-shrink: 0;
}
.chat-input-row { display: flex; align-items: center; gap: 8px; }
.chat-input {
  flex: 1; padding: 11px 16px; font-size: .78rem; font-family: inherit;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px; color: var(--db-text); outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.chat-input:focus {
  border-color: rgba(212,168,67,.3);
  box-shadow: 0 0 0 3px rgba(212,168,67,.08);
  background: rgba(255,255,255,.08);
}
.chat-input::placeholder { color: rgba(255,255,255,.3); }
.chat-char-count { font-size: .54rem; color: var(--db-muted); font-variant-numeric: tabular-nums; }
.chat-char-count.is-warning { color: var(--db-amber); }
.chat-char-count.is-danger { color: var(--db-red); }
.chat-emoji-toggle {
  background: none; border: none; font-size: .92rem; cursor: pointer; padding: 2px;
  transition: transform .15s;
  /* Mobile tap fix: min touch target + eliminate 300ms delay */
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(212,168,67,.25);
  user-select: none; -webkit-user-select: none;
}
.chat-emoji-toggle:hover { transform: scale(1.15); }
.chat-emoji-toggle:active { transform: scale(0.9); }
.chat-send-btn {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--db-gold); color: #0a0e1a; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease; flex-shrink: 0;
}
.chat-send-btn:hover:not(:disabled) { filter: brightness(1.1); transform: scale(1.05); box-shadow: 0 0 12px rgba(212,168,67,.3); }
.chat-send-btn:disabled { opacity: .4; cursor: default; }
.chat-signin-prompt { padding: 12px 14px; text-align: center; font-size: .72rem; color: var(--db-muted); }
.chat-signin-prompt a { color: var(--db-gold); font-weight: 600; text-decoration: none; }
.chat-signin-prompt a:hover { text-decoration: underline; }
.chat-rate-limit { display: none; padding: 5px 14px; font-size: .62rem; color: var(--db-amber); text-align: center; font-weight: 500; }
.chat-rate-limit.is-visible { display: block; }
.chat-typing-indicator { display: none; padding: 2px 14px; font-size: .58rem; color: var(--db-muted); font-style: italic; }

/* ─── Emoji picker ── */
.chat-emoji-picker {
  display: none; position: absolute; bottom: 100%; right: 12px;
  background: rgba(15,20,34,.95);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--db-radius); padding: 10px; width: 240px; z-index: 50;
  box-shadow: 0 -8px 32px rgba(0,0,0,.5);
  animation: emojiSlideUp .2s cubic-bezier(.4,0,.2,1);
}
@keyframes emojiSlideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.chat-emoji-picker.is-open { display: block; }
.chat-emoji-picker__cat-label { font-size: .58rem; font-weight: 700; text-transform: uppercase; color: var(--db-muted); margin-bottom: 5px; letter-spacing: .06em; }
.chat-emoji-picker__grid { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 10px; }
.chat-emoji-btn {
  background: none; border: none; font-size: 1.1rem; cursor: pointer; padding: 5px;
  border-radius: 8px; transition: background .1s, transform .15s;
  /* Mobile tap fix: proper touch targets + eliminate 300ms delay */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(212,168,67,.25);
  user-select: none; -webkit-user-select: none;
}
.chat-emoji-btn:hover { background: rgba(255,255,255,.1); transform: scale(1.2); }
.chat-emoji-btn:active { background: rgba(255,255,255,.15); transform: scale(0.9); }

/* ─── Empty & loading states ── */
.chat-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 6px; opacity: .7; }
.chat-empty-state__emoji { font-size: 2rem; }
.chat-empty-state__text { font-size: .74rem; font-weight: 600; color: var(--db-muted); }
.chat-empty-state__sub { font-size: .62rem; color: var(--db-muted); opacity: .6; }
.chat-loading-state { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 8px; }
.chat-loading-state__text { font-size: .64rem; color: var(--db-muted); }
.chat-loading-state__dots { display: flex; gap: 4px; }
.chat-loading-state__dots span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--db-muted);
  animation: dotBounce .6s ease infinite;
}
.chat-loading-state__dots span:nth-child(2) { animation-delay: .1s; }
.chat-loading-state__dots span:nth-child(3) { animation-delay: .2s; }
@keyframes dotBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: .3; }
  40% { transform: scale(1); opacity: 1; }
}

@media (max-width: 1200px) {
  .chat-sidebar { --db-chat-w: 260px; }
  /* Hide "Encrypted" text at narrow sidebar, keep icon only */
  .chat-sidebar__encrypted { gap: 0 !important; }
  .chat-sidebar__encrypted svg + * { display: none; }
}
@media (max-width: 1024px) {
  /* B7 FIX: Hide desktop chat sidebar when mobile nav (with chat button) is visible.
     Prevents dual chat interfaces between 768-1024px. */
  .chat-sidebar { display: none; }
}
@media (max-width: 480px) {
  .feed-card { padding: 8px 10px; gap: 8px; }
  .feed-card__title { font-size: .76rem; }
  .feed-card__desc { font-size: .64rem; }
  .feed-card__icon { width: 24px; height: 24px; font-size: .9rem; }
  .feed-card__meta { gap: 6px; }
  .analytics-card { padding: 16px; }
}

/* ─── Mobile Chat Drawer ── */
.chat-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 9050; opacity: 0; pointer-events: none; transition: opacity .3s ease;
  /* NO backdrop-filter, GPU crash risk */ }
.chat-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }
.chat-drawer {
  position: fixed; bottom: 0; left: 0; right: 0; height: 80vh;
  background: rgba(15,20,34,.97);
  /* NO backdrop-filter, GPU crash risk, compensated with more opaque bg */
  border-radius: 20px 20px 0 0;
  z-index: 9100; transform: translateY(100%);
  /* Spring-based open/close transition */
  transition: transform .45s cubic-bezier(0.32, 1.25, 0.54, 1);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 -16px 48px rgba(0,0,0,.5);
  /* Pad bottom for mob-nav (56px) + safe area so chat input isn't hidden */
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}
.chat-drawer.is-open { transform: translateY(0); }
/* BUG FIX #5: Ensure chat drawer content fills width and messages
   are not clipped on the left edge on mobile. */
.chat-drawer * {
  box-sizing: border-box;
}
.chat-drawer .chat-panel__messages {
  width: 100%;
  overflow-x: hidden;
  padding-left: 0;
  padding-right: 0;
}
.chat-drawer .chat-msg {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}
.chat-drawer__handle {
  width: 40px; height: 4px; background: rgba(255,255,255,.2);
  border-radius: 2px; margin: 10px auto; cursor: grab;
  transition: background .15s ease;
}
.chat-drawer__handle:active { background: rgba(255,255,255,.35); cursor: grabbing; }

/* ── BUG FIX: Ensure mobile chat drawer content is fully interactive ──
   The NUCLEAR animation kill block (.dashboard-page *) can cascade opacity/filter
   side-effects into the drawer. These overrides guarantee the drawer and all
   interactive elements remain fully visible and tappable. Also prevents
   cloned messages (via innerHTML sync) from getting stuck at opacity:0
   if they retain the .chat-msg--entering class. */
.chat-drawer.is-open .chat-sidebar__header,
.chat-drawer.is-open .chat-sidebar__ws-status,
.chat-drawer.is-open .chat-quick-emoji-bar,
.chat-drawer.is-open .chat-messages,
.chat-drawer.is-open .chat-input-area,
.chat-drawer.is-open .chat-input-row,
.chat-drawer.is-open .chat-emoji-toggle,
.chat-drawer.is-open .chat-input,
.chat-drawer.is-open .chat-send-btn:not(:disabled),
.chat-drawer.is-open .chat-signin-prompt,
.chat-drawer.is-open .chat-reconnect-banner,
.chat-drawer.is-open .chat-online-strip,
.chat-drawer.is-open .chat-gif-toggle {
  opacity: 1;
  pointer-events: auto;
  filter: none;
}
/* Cloned messages in drawer must be visible even without slide-in animation */
.chat-drawer .chat-msg--entering {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.chat-drawer .chat-msg--slide-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Quick emoji buttons must be tappable */
.chat-drawer .chat-quick-emoji {
  pointer-events: auto;
  cursor: pointer;
}
/* Emoji picker in drawer */
.chat-drawer .chat-emoji-picker.is-open {
  pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV (DEPRECATED)
   The dashboard-specific .db-mobile-nav has been replaced by the site-wide
   .mob-nav from header.php. These styles are retained only as a safety net
   in case any cached HTML still references these classes.
   ═══════════════════════════════════════════════════════════════════════ */
.db-mobile-nav {
  display: none !important; position: fixed; left: 0; right: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(10,14,26,.95); border-top: 1px solid var(--db-border);
  padding: 8px 0 4px; z-index: 100;
}
.db-mobile-nav__items { display: flex; justify-content: space-around; }
.db-mobile-nav__item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 12px; font-size: .65rem; font-weight: 600; color: var(--db-muted);
  background: none; border: none; cursor: pointer; position: relative;
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
}
.db-mobile-nav__item.is-active { color: var(--db-gold); }
.db-mobile-nav__icon { width: 22px; height: 22px; }
.db-mobile-nav__badge {
  position: absolute; top: 2px; right: 6px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--db-red); display: none;
  box-shadow: 0 0 6px rgba(248,113,113,.4);
}
.db-mobile-nav__badge.has-unread { display: block; animation: pulse-dot 2s ease infinite; }
/* Chat-specific unread badge, shows count, not just a dot */
.db-mobile-nav__chat-badge {
  position: absolute; top: -2px; right: 0;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px;
  background: var(--db-red);
  color: #fff; font-size: .54rem; font-weight: 700; line-height: 16px;
  text-align: center;
  display: none;
  box-shadow: 0 0 6px rgba(248,113,113,.4);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.db-mobile-nav__chat-badge.has-unread { display: block; animation: pulse-dot 2s ease infinite; }
.db-mobile-nav__chat-badge.has-unread:empty {
  /* Dot-only fallback if no count text */
  min-width: 8px; height: 8px; padding: 0; top: 2px; right: 6px;
}

/* ═══ Chat badge in site-wide mob-nav (dashboard only) ═══
   #chat-mobile-badge is now a .mob-nav__badge inside the mob-nav Chat button.
   JS toggles .has-unread and sets .textContent for the count. */
#chat-mobile-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px;
  background: var(--db-red, #f87171);
  color: #fff; font-size: .54rem; font-weight: 700; line-height: 16px;
  text-align: center;
  display: none;
  box-shadow: 0 0 6px rgba(248,113,113,.4);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
#chat-mobile-badge.has-unread { display: block; animation: pulse-dot 2s ease infinite; }
#chat-mobile-badge.has-unread:empty {
  min-width: 8px; height: 8px; padding: 0; top: 2px; right: 6px;
}

/* BUG FIX #7 (updated): db-mobile-nav removed, site-wide mob-nav is used instead.
   Keep bottom padding for the mob-nav bar. */
@media (max-width: 1024px) {
  .db-mobile-nav {
    display: none !important;  /* deprecated, use site-wide mob-nav */
  }
  .db-main-content { padding-bottom: 72px; } /* Room for site-wide mob-nav */
}
@media (max-width: 768px) {
  .db-main-content { padding: 16px 16px 72px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════════════ */
.db-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.db-modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.db-modal {
  width: 100%; max-width: 420px; background: var(--db-bg-elevated);
  border: 1px solid var(--db-border); border-radius: var(--db-radius-lg);
  padding: 28px; transform: scale(.95) translateY(8px); transition: transform .25s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
}
.db-modal-overlay.is-open .db-modal { transform: scale(1) translateY(0); }
.db-modal__title { font-size: .92rem; font-weight: 800; color: var(--db-heading); margin: 0 0 8px; letter-spacing: -0.02em; }
.db-modal__desc { font-size: .74rem; color: var(--db-muted); margin: 0 0 18px; line-height: 1.5; }
.db-modal__label { display: block; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--db-muted); margin-bottom: 6px; }
.db-modal__input {
  width: 100%; padding: 10px 12px; font-size: .78rem; font-family: inherit;
  background: var(--db-surface); border: 1px solid var(--db-border);
  border-radius: 10px; color: var(--db-text); outline: none; margin-bottom: 14px; box-sizing: border-box;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.db-modal__input:focus { border-color: var(--db-gold-border); box-shadow: 0 0 0 3px rgba(212,168,67,.08); }
.db-modal__input::placeholder { color: var(--db-muted); opacity: .6; }
.db-modal__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.db-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; font-size: .74rem; font-weight: 700; border-radius: 8px; cursor: pointer; transition: all .2s ease; font-family: inherit; letter-spacing: 0.01em; text-decoration: none; border: none; min-height: 40px; }
.db-btn--primary { background: var(--db-gold); color: #0a0e1a; }
.db-btn--primary:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(212,168,67,.2); }
.db-btn--primary:active { transform: translateY(0); }
.db-btn--outline { background: none; color: var(--db-text); border: 1px solid var(--db-border); }
.db-btn--outline:hover { border-color: var(--db-border-hover); background: var(--db-surface); }
.db-btn--danger { background: var(--db-red); color: white; border: none; }
.db-btn--danger:hover { filter: brightness(1.1); }
.db-btn--sm { padding: 7px 14px; font-size: .7rem; }

/* ─── Toast ── */
.db-toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px);
  padding: 12px 24px; background: var(--db-bg-elevated); border: 1px solid var(--db-border);
  border-radius: 10px; font-size: .74rem; font-weight: 600; color: var(--db-heading); z-index: 400;
  opacity: 0; transition: all .3s cubic-bezier(.4,0,.2,1); pointer-events: none;
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.db-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.db-toast--error { border-color: rgba(248,113,113,.3); color: var(--db-red); }

/* ─── Delete modal warning ── */
.noc-delete-modal__warning {
  padding: 12px; background: var(--db-red-dim); border: 1px solid rgba(248,113,113,.2);
  border-radius: 8px; font-size: .72rem; color: var(--db-red); margin-bottom: 16px;
}

/* ─── Callsign modal ── */
.chat-callsign-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.82); z-index: 310;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s cubic-bezier(.4,0,.2,1);
  /* NO backdrop-filter, GPU crash risk */
}
.chat-callsign-modal.is-open { opacity: 1; pointer-events: auto; }
.chat-callsign-modal__card {
  width: 100%; max-width: 380px; background: var(--db-bg-elevated);
  border: 1px solid var(--db-border); border-radius: var(--db-radius-lg);
  padding: 32px 28px; text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
  /* Card entrance: start scaled down, spring up when is-animating is added */
  transform: scale(0.92) translateY(12px);
  opacity: 0;
  transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .2s ease;
}
.chat-callsign-modal.is-animating .chat-callsign-modal__card {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.chat-callsign-modal__icon { font-size: 2.2rem; margin-bottom: 10px; }
.chat-callsign-modal__title { font-size: .92rem; font-weight: 800; color: var(--db-heading); margin-bottom: 6px; letter-spacing: -0.02em; }
.chat-callsign-modal__subtitle { font-size: .72rem; color: var(--db-muted); margin-bottom: 18px; line-height: 1.5; }
.chat-callsign-modal__input {
  width: 100%; padding: 12px 14px; font-size: .86rem; font-family: inherit;
  background: var(--db-surface); border: 1px solid var(--db-border);
  border-radius: 10px; color: var(--db-text); outline: none; text-align: center;
  margin-bottom: 8px; box-sizing: border-box; font-weight: 600;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.chat-callsign-modal__input:focus { border-color: var(--db-gold-border); box-shadow: 0 0 0 3px rgba(212,168,67,.08); }
/* Shake animation for validation errors */
.chat-callsign-modal__input.is-shake {
  animation: callsignShake .4s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes callsignShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.chat-callsign-modal__error {
  font-size: .62rem; color: var(--db-red); min-height: 16px;
  transition: opacity .15s ease;
}
.chat-callsign-modal__rules { font-size: .58rem; color: var(--db-muted); margin-bottom: 12px; }
.chat-callsign-modal__submit {
  width: 100%; padding: 12px; background: var(--db-gold); color: #0a0e1a;
  border: none; border-radius: 10px; font-size: .78rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: all .2s ease, background .15s ease;
}
.chat-callsign-modal__submit:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(212,168,67,.2); }
.chat-callsign-modal__submit.is-success {
  background: var(--db-green, #34d399); color: #fff;
  transform: scale(1.02);
}

/* ─── Incident toast ── */
.chat-incident-toast {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%) translateY(-20px);
  padding: 10px 20px; background: var(--db-bg-elevated); border: 1px solid var(--db-red);
  border-radius: 10px; font-size: .72rem; font-weight: 600; color: var(--db-red); z-index: 350;
  display: flex; align-items: center; gap: 8px;
  opacity: 0; transition: all .3s cubic-bezier(.4,0,.2,1); pointer-events: none;
  box-shadow: 0 8px 32px rgba(248,113,113,.15);
}
.chat-incident-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.chat-incident-toast__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--db-red); animation: pulse-dot 1s ease infinite; box-shadow: 0 0 6px rgba(248,113,113,.4); }

/* Callsign in settings */
.chat-callsign-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.chat-callsign-row__name { font-size: .78rem; font-weight: 700; color: var(--db-heading); }
.chat-callsign-row__change {
  font-size: .66rem; color: var(--db-gold); background: none; border: none;
  cursor: pointer; font-weight: 600; text-decoration: underline;
  transition: opacity .15s;
}
.chat-callsign-row__change:hover { opacity: .8; }

/* ─── Chat connection status: reconnecting state ── */
.chat-ws-dot--reconnecting {
  background: var(--db-amber, #fbbf24);
  box-shadow: 0 0 6px rgba(251,191,36,.4);
  animation: pulse-dot 1.2s ease-in-out infinite;
}

/* ─── Chat reconnection banner ── */
.chat-reconnect-banner {
  display: none; padding: 6px 12px;
  background: rgba(251,191,36,.08);
  border-bottom: 1px solid rgba(251,191,36,.15);
  font-size: .62rem; font-weight: 600;
  color: var(--db-amber, #fbbf24);
  text-align: center;
  transition: opacity .2s ease;
  opacity: 0;
}
.chat-reconnect-banner.is-visible {
  display: block; opacity: 1;
}

/* ─── Chat character count enhanced states ── */
.chat-char-count {
  transition: color .15s ease, transform .15s ease;
}
.chat-char-count.is-warning {
  color: var(--db-amber, #fbbf24);
  font-weight: 700;
}
.chat-char-count.is-danger {
  color: var(--db-red, #f87171);
  font-weight: 700;
  transform: scale(1.1);
}
.chat-char-count.is-over {
  color: var(--db-red, #f87171);
  font-weight: 800;
  animation: charCountPulse .6s ease infinite;
}
@keyframes charCountPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* ─── Chat rate limit countdown ── */
.chat-rate-limit {
  font-variant-numeric: tabular-nums;
}

/* ─── Chat send button disabled during rate limit ── */
.chat-send-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none !important;
}

/* ─── NOC Footer ── */
/* Skip-to-content: visually hidden until focused */
a[href="#main-content"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
a[href="#main-content"]:focus {
  position: static; width: auto; height: auto; padding: 8px 16px; margin: 0;
  overflow: visible; clip: auto; background: var(--db-gold); color: #000;
  font-weight: 700; z-index: 9999;
}

/* ── Focus-visible for keyboard accessibility ── */
.feed-card:focus-visible,
.nav-tabs__btn:focus-visible,
.chat-emoji-btn:focus-visible,
.chat-jump-live:focus-visible,
.stg-card:focus-visible,
.zone-item:focus-visible {
  outline: 2px solid var(--db-gold);
  outline-offset: 2px;
}

/* Google Maps dark mode filter */
.db-map-column .gm-style,
.mini-map-widget .gm-style {
  filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.95);
}

/* Chat online users strip, fade edge instead of hard clip */
.chat-online-strip__users {
  mask-image: linear-gradient(to right, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent);
}

.noc-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; border-top: 1px solid var(--db-border);
  font-size: .62rem; color: var(--db-muted); font-weight: 500;
  background: var(--db-bg);
  flex-wrap: wrap; gap: 8px;
  width: 100%; box-sizing: border-box;
  flex-shrink: 0;
}
.noc-footer__links { display: flex; gap: 14px; }
.noc-footer__link { color: var(--db-muted); text-decoration: none; cursor: pointer; transition: color .15s; }
.noc-footer__link:hover { color: var(--db-heading); }
.noc-footer__link--danger { color: var(--db-red); }
.noc-footer__link--danger:hover { text-decoration: underline; }

/* ─── Quiet hours select ── */
.db-quiet-hours { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.db-quiet-hours select {
  background: var(--db-surface); color: var(--db-text); border: 1px solid var(--db-border);
  border-radius: 8px; padding: 6px 10px; font-size: .72rem; font-family: inherit; cursor: pointer;
  transition: border-color .2s ease;
}
.db-quiet-hours select:focus { border-color: var(--db-gold-border); outline: none; }
.db-quiet-hours__sep { font-size: .72rem; color: var(--db-muted); font-weight: 500; }

/* Site footer hiding + Google Maps dark theme, now in dashboard.css */

/* Analytics empty state + camera skeleton, now in dashboard.css */

/* ═══════════════════════════════════════════════════════════════════════
   WCAG COLOR CONTRAST FIXES
   ═══════════════════════════════════════════════════════════════════════ */
/* Bump muted text to meet 4.5:1 ratio on dark bg */
.dashboard-page {
  --db-muted: #a0a8b8; /* bumped from #9ca3af for WCAG AA on #0a0e1a */
}
.chat-msg__time { color: rgba(255,255,255,.5); } /* B28 FIX: bumped from .35 to meet WCAG AA 4.5:1 */
.chat-msg__username { color: var(--db-gold); } /* Ensure username is always readable */

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV, Prevent overlap with dashboard content
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .dashboard-page { padding-bottom: 0; }
  .noc-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom, 8px) + 56px); } /* Room for single .db-mobile-nav */
}

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL POLISH, Selection, scrollbars, micro-interactions
   ═══════════════════════════════════════════════════════════════════════ */
/* Selection color */
.dashboard-page ::selection {
  background: rgba(212,168,67,.25); color: var(--db-heading);
}

/* Smooth tab transitions for all panels */
.tab-panel.is-active {
  animation: fadeInPanel .35s cubic-bezier(.4,0,.2,1);
}

/* Active card press effect */
.feed-card:active { transform: scale(.99); transition-duration: .1s; }

/* Subtle gradient at top of feed scroll for depth */
.feed-scroll { position: relative; }
.feed-scroll::before {
  content: ''; position: sticky; top: 0; left: 0; right: 0;
  display: block; height: 16px; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, var(--db-bg) 0%, transparent 100%);
  margin-bottom: -16px;
}

/* Nav tab underline transition */
.nav-tabs__btn {
  position: relative;
}
.nav-tabs__btn::after {
  content: ''; position: absolute; bottom: -1px; left: 18px; right: 18px;
  height: 2px; background: var(--db-gold); border-radius: 1px;
  transform: scaleX(0); transition: transform .25s cubic-bezier(.4,0,.2,1);
  transform-origin: center;
}
.nav-tabs__btn.is-active::after { transform: scaleX(1); }

/* Analytics card entrance stagger */
.analytics-card {
  animation: analytics-card-in .4s ease both;
}
.analytics-card:nth-child(1) { animation-delay: 0s; }
.analytics-card:nth-child(2) { animation-delay: .06s; }
.analytics-card:nth-child(3) { animation-delay: .12s; }
.analytics-card:nth-child(4) { animation-delay: .18s; }
.analytics-card:nth-child(5) { animation-delay: .24s; }
.analytics-card:nth-child(6) { animation-delay: .30s; }
.analytics-card:nth-child(7) { animation-delay: .36s; }
.analytics-card:nth-child(8) { animation-delay: .42s; }
@keyframes analytics-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Camera card entrance stagger (CSS only) */
.cam-card {
  animation: cam-card-in .35s ease both;
}
@keyframes cam-card-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Chat message entrance, now uses msgSlideInSpring defined above.
   The old msgSlideInEnhanced is superseded by the spring-based animation. */

/* Header blur enhancement on scroll */
.noc-header {
  transition: background .2s ease;
}

/* ═══════════════════════════════════════════════════════════════════════
 GPU PERFORMANCE: Reduce animation/backdrop-filter load to prevent
   browser crash from GPU memory exhaustion.
   ═══════════════════════════════════════════════════════════════════════ */

/* Pause infinite animations on elements that are not visible (hidden tabs, etc.) */
.tab-panel:not(.is-active) * {
  animation-play-state: paused !important;
}

/* Reduce backdrop-filter compositing cost, replace heavy blurs with solid bg */
.chat-drawer-overlay {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(0,0,0,.75) !important;
}

/* Prefer prefers-reduced-motion for accessibility and performance */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Limit simultaneous infinite animations, consolidate pulse to shared keyframe */
/* Remove box-shadow animations (GPU-expensive) from non-critical dots */
.map-legend__pulse-indicator,
.scanner-stats__alert::before,
.feed-card__trending-badge {
  animation: none !important;
}

/* Use will-change sparingly for elements that actually animate */
.noc-header__system-dot,
.feed-header__live-dot,
.chat-sidebar__live-dot,
.chat-ws-dot {
  will-change: opacity;
}

/* NUCLEAR: Kill ALL backdrop-filters AND infinite animations site-wide on the dashboard page.
   backdrop-filter: each blurred element creates a compositing layer that eats VRAM.
   infinite animations: 30+ concurrent CSS animations across listener-pro, dashboard-auth,
   scanner.css crash Chrome GPU process. Kill everything, re-enable only essentials below. */
.dashboard-page *,
.dashboard-page *::before,
.dashboard-page *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  animation: none !important;
  will-change: auto !important;
}
/* Re-enable ONLY essential status animations (minimal GPU cost) */
/* Live indicator dots, these must pulse to show system is alive */
.dashboard-page .noc-header__system-dot {
  animation: pulse-dot 2s ease infinite !important;
}
.dashboard-page .hero-scanner__status-dot.is-live {
  animation: scanner-dot-pulse 1.8s ease infinite !important;
}
.dashboard-page .hero-scanner__status-dot.is-connecting {
  animation: scanner-dot-pulse 1s ease infinite !important;
}
.dashboard-page .feed-header__live-dot,
.dashboard-page .feed-card__live-dot,
.dashboard-page .mini-map-widget__live-dot,
.dashboard-page .chat-sidebar__live-dot,
.dashboard-page .chat-incident-toast__dot,
.dashboard-page .db-mobile-nav__chat-badge.has-unread {
  animation: pulse-dot 2s ease infinite !important;
}
.dashboard-page .cam-connection-indicator--buffering .cam-connection-indicator__dot {
  animation: pulse-dot 1s ease infinite !important;
}
/* WS new event flash (one-shot) */
.dashboard-page .feed-card--ws-new {
  animation: feed-card-enter .35s ease both !important;
}
/* Base feed card entrance animation */
.dashboard-page .feed-card {
  animation: feed-card-enter .35s ease both !important;
}
/* Scanner pulse ring when playing */
.dashboard-page .hero-scanner__play.is-playing {
  animation: scanner-pulse-ring 2.2s cubic-bezier(.4,0,.6,1) infinite !important;
}
/* Loading skeleton shimmer */
.dashboard-page .db-skeleton {
  animation: db-shimmer 1.8s ease-in-out infinite !important;
}
/* IDP loading spinner */
.dashboard-page .idp__spinner {
  animation: idp-spin .8s linear infinite !important;
}
/* Transcript dot pulse */
.dashboard-page .radio-transcript__dot.is-active {
  animation: transcript-pulse 1.5s ease infinite !important;
}
/* Antenna broadcast animation (header logo), staggered arc pulse + beacon glow */
.dashboard-page .sig-arc {
  animation: sig-broadcast 1.8s ease-out infinite !important;
}
.dashboard-page .sig-arc-1 { animation-delay: 0s !important; }
.dashboard-page .sig-arc-2 { animation-delay: 0.4s !important; }
.dashboard-page .sig-arc-3 { animation-delay: 0.8s !important; }
.dashboard-page .sig-tip-glow {
  animation: sig-tip 2.5s ease-in-out infinite !important;
}
/* Re-enable chat message slide-in animation (one-shot, not infinite) */
.dashboard-page .chat-msg--slide-in {
  animation: msgSlideInSpring .4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}
/* Re-enable chat loading dots animation */
.dashboard-page .chat-loading-state__dots span {
  animation: chatLoadDot 1.2s ease-in-out infinite !important;
}
@keyframes chatLoadDot { 0%,80%,100% { opacity: .3; } 40% { opacity: 1; } }
.dashboard-page .chat-loading-state__dots span:nth-child(2) { animation-delay: .15s !important; }
.dashboard-page .chat-loading-state__dots span:nth-child(3) { animation-delay: .3s !important; }
/* Re-enable chat connection dot pulse (connecting/reconnecting) */
.dashboard-page .chat-ws-dot--connecting,
.dashboard-page .chat-ws-dot--error,
.dashboard-page .chat-ws-dot--reconnecting {
  animation: pulse-dot 1s ease infinite !important;
}
/* Re-enable callsign modal shake on validation error (one-shot) */
.dashboard-page .chat-callsign-modal__input.is-shake {
  animation: callsignShake .4s cubic-bezier(.36,.07,.19,.97) both !important;
}
/* Re-enable floating emoji reactions (starts at opacity:0, needs animation to be visible) */
.dashboard-page .chat-floating-emoji {
  animation: floatUpPhysics var(--float-duration, 2s) cubic-bezier(.2,.8,.3,1) forwards !important;
  will-change: transform, opacity !important;
}
/* Re-enable quick emoji pop feedback (one-shot) */
.dashboard-page .chat-quick-emoji.is-popped {
  animation: emojiPop .3s cubic-bezier(.4,0,.2,1) !important;
}
/* Re-enable emoji picker slide-up entrance (one-shot) */
.dashboard-page .chat-emoji-picker.is-open {
  animation: emojiSlideUp .2s cubic-bezier(.4,0,.2,1) !important;
}
/* Re-enable GIF picker skeleton shimmer animation.
   Picker is appended to body (outside .dashboard-page), so use global selector. */
.gif-picker__skeleton {
  animation: gif-shimmer 1.2s infinite !important;
}

/* ─── GIF Picker fixes ── */
/* GIF picker is appended to document.body (outside .dashboard-page) to escape
   overflow:hidden on .chat-sidebar/.chat-drawer. Uses position:fixed, anchored
   via JS to the chat-input-area bounding rect. These selectors cover both cases:
   body-level (normal) and inside .dashboard-page (safety fallback). */
.gif-picker {
  position: fixed !important;
  z-index: 9200 !important;
  pointer-events: auto !important;
}
.gif-picker.is-open {
  display: flex !important;
  pointer-events: auto !important;
}
/* GIF thumbnails must be fully visible and clickable.
   min-height + aspect-ratio prevent iOS Safari from collapsing images to thin bars
   before intrinsic dimensions are known. object-fit:cover fills the aspect box. */
.gif-picker__thumb {
  pointer-events: auto !important;
  cursor: pointer !important;
  min-height: 80px !important;
}
.gif-picker__thumb img {
  width: 100% !important;
  height: auto !important;
  min-height: 80px !important;
  display: block !important;
  pointer-events: auto !important;
  object-fit: cover !important;
  aspect-ratio: 4/3 !important;
}
/* Grid container needs min-height:0 for flex-child scrolling in Safari */
.gif-picker__grid {
  min-height: 0 !important;
}
/* GIF search input must be interactive */
.gif-picker__search {
  pointer-events: auto !important;
}
/* GIF button must be visible and clickable (inside .dashboard-page, so needs
   to override the NUCLEAR animation/will-change kill) */
.dashboard-page .chat-gif-toggle {
  pointer-events: auto !important;
  opacity: .65 !important;
}
.dashboard-page .chat-gif-toggle:hover {
  opacity: 1 !important;
}
/* Inline GIF images in chat messages, full display, no clipping.
   GIFs are rendered as <img> INSIDE .chat-msg__text which has line-height: 1.4
   and font-size: .72rem. Without overriding the parent's line-height, the img
   is constrained to text line height, causing distorted horizontal bars on mobile.
   The .chat-msg__text container itself must also become a block-level flex column
   when it contains a GIF, so the image escapes the inline text flow. */
.dashboard-page .chat-msg__gif {
  max-width: 200px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  line-height: 0 !important;
  object-fit: contain !important;
}
/* When .chat-msg__text contains a GIF, override its text-centric layout.
   The line-height: 1.4 on .chat-msg__text collapses the img to text height. */
.dashboard-page .chat-msg__text:has(.chat-msg__gif) {
  line-height: 0 !important;
  font-size: 0 !important;
  overflow: visible !important;
}
/* Mobile chat drawer: same fix, GIFs must render at intrinsic aspect ratio */
.chat-drawer .chat-msg__gif {
  max-width: 180px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  line-height: 0 !important;
  object-fit: contain !important;
}
.chat-drawer .chat-msg__text:has(.chat-msg__gif) {
  line-height: 0 !important;
  font-size: 0 !important;
  overflow: visible !important;
}
/* Re-enable chat drawer live dot (mobile drawer reuses .chat-sidebar__live-dot) */
.dashboard-page .chat-drawer .chat-sidebar__live-dot {
  animation: pulse-dot 2s ease infinite !important;
}
/* Re-enable chat WS dot animations inside drawer */
.dashboard-page .chat-drawer .chat-ws-dot--connecting,
.dashboard-page .chat-drawer .chat-ws-dot--error {
  animation: pulse-dot 1s ease infinite !important;
}
/* Re-enable feed card entrance animation (one-shot, staggered) */
.dashboard-page .feed-card--entering {
  animation: feed-card-enter .35s ease both !important;
}
/* Re-enable expand panel open animation */
.dashboard-page .feed-card.is-expanded .feed-card__expand-panel {
  animation: feed-panel-open .25s ease !important;
}
/* Re-enable tab panel fade */
.dashboard-page .tab-panel.is-active {
  animation: fadeInPanel .35s cubic-bezier(.4,0,.2,1) !important;
}
/* Re-enable chat header pulse for new messages */
.dashboard-page .chat-sidebar__header.has-new-msg {
  animation: chatHeaderPulse .6s ease both !important;
}

/* Re-enable analytics card staggered entrance */
.dashboard-page .analytics-card {
  animation: analytics-card-in .4s ease both !important;
}
.dashboard-page .analytics-card:nth-child(1) { animation-delay: 0s !important; }
.dashboard-page .analytics-card:nth-child(2) { animation-delay: .06s !important; }
.dashboard-page .analytics-card:nth-child(3) { animation-delay: .12s !important; }
.dashboard-page .analytics-card:nth-child(4) { animation-delay: .18s !important; }
.dashboard-page .analytics-card:nth-child(5) { animation-delay: .24s !important; }
.dashboard-page .analytics-card:nth-child(6) { animation-delay: .30s !important; }
.dashboard-page .analytics-card:nth-child(7) { animation-delay: .36s !important; }
.dashboard-page .analytics-card:nth-child(8) { animation-delay: .42s !important; }
/* Re-enable camera card entrance */
.dashboard-page .cam-card {
  animation: cam-card-in .35s ease both !important;
}
/* Re-enable breaking news banner */
.dashboard-page .breaking-banner.is-visible {
  animation: breakingEnter .35s ease both !important;
}
@keyframes breakingEnter { from { opacity:0; max-height:0; } to { opacity:1; max-height:200px; } }
/* Re-enable timeline group dot pulse */
.dashboard-page .feed-time-group--now .feed-time-group__dot {
  animation: pulse-dot 2s ease infinite !important;
}

/* ── Auth keyframes inlined from dashboard-auth.css, prevents race condition
   when dashboard-auth.css loads deferred (media="print" onload swap).
   Without these, auth elements stay invisible (opacity:0) until deferred CSS arrives. ── */
@keyframes authFadeUp {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes authCardStagger {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes authCardIn {
  0% { opacity: 0; transform: translateY(20px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes authDotPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--db-green); }
  50% { opacity: 0.5; box-shadow: 0 0 4px var(--db-green); }
}

/* ── B2/B3 FIX: Re-enable auth gate animations (elements start at opacity:0, need animation to reach opacity:1) ── */
.dashboard-page .db-auth__hero-content {
  animation: authFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards !important;
}
.dashboard-page .db-auth__feature-card { animation: authCardStagger .5s cubic-bezier(.16,1,.3,1) forwards !important; }
.dashboard-page .db-auth__feature-card:nth-child(1) { animation-delay: .2s !important; }
.dashboard-page .db-auth__feature-card:nth-child(2) { animation-delay: .3s !important; }
.dashboard-page .db-auth__feature-card:nth-child(3) { animation-delay: .4s !important; }
.dashboard-page .db-auth__feature-card:nth-child(4) { animation-delay: .5s !important; }
.dashboard-page .db-auth__card { animation: authCardIn .65s cubic-bezier(.16,1,.3,1) .1s forwards !important; }
.dashboard-page .db-auth__social-proof { animation: authFadeUp .6s cubic-bezier(.16,1,.3,1) .6s forwards !important; }
.dashboard-page .db-auth__stat-dot { animation: authDotPulse 2s ease-in-out infinite !important; }
/* Fallback: ensure auth elements reach visible state via animation-fill-mode */
.dashboard-page .db-auth__hero-content,
.dashboard-page .db-auth__feature-card,
.dashboard-page .db-auth__card,
.dashboard-page .db-auth__social-proof { animation-fill-mode: forwards !important; }
/* No-animation fallback (prefers-reduced-motion) */
@media (prefers-reduced-motion: reduce) {
  .dashboard-page .db-auth__hero-content,
  .dashboard-page .db-auth__feature-card,
  .dashboard-page .db-auth__card,
  .dashboard-page .db-auth__social-proof { opacity: 1 !important; animation: none !important; }
}

/* ── B22 FIX: Re-enable transcript ticker scroll animation ── */
.dashboard-page .radio-transcript__ticker-text:not(.is-waiting) {
  animation: ticker-scroll 20s linear infinite !important;
}

/* ── B23 FIX: Re-enable breaking banner border pulse ── */
.dashboard-page .breaking-banner.is-visible.breaking-banner--critical {
  animation: breakingEnter .35s ease both, breaking-border-pulse 2s ease-in-out infinite .35s !important;
}

/* Compensate removed blur with slightly more opaque backgrounds */
.db-modal-overlay {
  background: rgba(0,0,0,.82) !important;
}
.noc-header {
  background: rgba(10,14,26,.97) !important;
}
.db-mobile-nav {
  background: rgba(10,14,26,.97) !important;
}
.chat-drawer {
  background: rgba(15,20,34,.97) !important;
}
.stg-save-bar {
  background: rgba(15,20,34,.97) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARE BUTTON, per-incident card share
   ═══════════════════════════════════════════════════════════════════════════ */
.feed-card__share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  background: transparent; border: 1px solid transparent;
  color: var(--db-muted); cursor: pointer; flex-shrink: 0;
  transition: color .2s ease, border-color .2s ease, transform .15s ease;
  padding: 0; margin-left: 2px;
}
.feed-card__share-btn:hover {
  color: var(--db-gold); border-color: var(--db-gold-border);
  transform: translateY(-1px);
}
.feed-card__share-btn:active {
  transform: translateY(0) scale(0.94);
}
.feed-card__share-btn svg {
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WS NEW EVENT FLASH, subtle pulse when event arrives via WebSocket
   ═══════════════════════════════════════════════════════════════════════════ */
.feed-card--ws-new {
  animation: ws-new-flash .8s ease-out;
}
@keyframes ws-new-flash {
  0%   { opacity: 0.5; transform: translateX(-4px); }
  30%  { opacity: 1; transform: translateX(0); }
  50%  { box-shadow: 0 0 0 2px rgba(212,168,67,.3), 0 2px 8px rgba(212,168,67,.15); }
  100% { box-shadow: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BREAKING NEWS BANNER
   ═══════════════════════════════════════════════════════════════════════════ */
/* BUG FIX #3: Breaking banner must not overlap feed cards.
   Hidden state: collapsed to 0 height so it takes no space.
   Visible state: in normal flow with proper margins. */
.breaking-banner {
  position: relative; z-index: 10;
  margin: 0 0 8px 0; border-radius: 10px;
  border: 1.5px solid var(--db-gold);
  background: rgba(212,168,67,.06);
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity .3s ease, max-height .3s ease;
  flex-shrink: 0; /* BUG FIX: Don't let banner collapse into content below */
}
.breaking-banner.is-visible {
  opacity: 1; max-height: none; overflow: visible; /* BUG FIX: Removed max-height:80px, was clipping banner and causing overlap with cards below */
  animation: breaking-border-pulse 2s ease-in-out infinite;
}
.breaking-banner.is-dismissing {
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity .25s ease, max-height .25s ease;
}
.breaking-banner--critical {
  border-color: var(--db-red);
  background: rgba(248,113,113,.06);
}
.breaking-banner--critical .breaking-banner__badge {
  background: var(--db-red);
}
.breaking-banner__inner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
}
.breaking-banner__badge {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: 4px;
  background: var(--db-gold); color: #0a0e1a;
  font-size: .6rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; flex-shrink: 0;
  white-space: nowrap;
}
.breaking-banner__text {
  flex: 1; min-width: 0;
  font-size: .76rem; font-weight: 600; color: var(--db-heading);
  /* BUG FIX: Removed nowrap+ellipsis, banner text should wrap, not truncate */
  white-space: normal; overflow: visible;
  line-height: 1.35;
  word-break: break-word;
}
.breaking-banner__dismiss {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px;
  background: transparent; border: none; color: var(--db-muted);
  cursor: pointer; font-size: 1.1rem; flex-shrink: 0;
  transition: color .2s ease;
  padding: 0; line-height: 1;
}
.breaking-banner__dismiss:hover {
  color: var(--db-heading);
}

@keyframes breaking-border-pulse {
  0%, 100% { border-color: var(--db-gold); box-shadow: 0 0 0 0 rgba(212,168,67,0); }
  50%      { border-color: var(--db-gold); box-shadow: 0 0 12px 2px rgba(212,168,67,.15); }
}
.breaking-banner--critical.is-visible {
  animation: breaking-border-pulse-critical 2s ease-in-out infinite;
}
@keyframes breaking-border-pulse-critical {
  0%, 100% { border-color: var(--db-red); box-shadow: 0 0 0 0 rgba(248,113,113,0); }
  50%      { border-color: var(--db-red); box-shadow: 0 0 12px 2px rgba(248,113,113,.15); }
}

/* ─── Mobile adjustments ── */
@media (max-width: 700px) {
  .feed-card__share-btn {
    width: 30px; height: 30px;
  }
  .breaking-banner__inner {
    padding: 8px 10px;
  }
  .breaking-banner__text {
    font-size: .7rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEED PREPEND-ONLY, Card slide-in animation for new cards
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes feed-card-slide-in {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.feed-card--entering {
  animation: feed-card-slide-in .35s cubic-bezier(.16,1,.3,1) forwards;
}

/* "New incidents" floating button, appears when scrolled down and new events arrive */
.feed-new-incidents-btn {
  position: sticky;
  top: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 6px 0;
  padding: 8px 16px;
  border: 1.5px solid var(--db-gold);
  border-radius: 8px;
  background: rgba(212,168,67,.10);
  color: var(--db-gold);
  font-size: .72rem;
  font-weight: 700;
  font-family: var(--db-font);
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
  opacity: 0;
  transform: translateY(-8px);
}
.feed-new-incidents-btn.is-visible {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
.feed-new-incidents-btn:hover {
  background: rgba(212,168,67,.16);
}
.feed-new-incidents-btn__arrow {
  font-size: .8rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FREE TIER DELAY, 5-min delay banner & badge
   ═══════════════════════════════════════════════════════════════════════════ */
.feed-delay-banner {
  position: relative;
  margin: 0 0 8px 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid rgba(212,168,67,.35);
  background: rgba(15,20,34,.95);
  display: flex;
  align-items: center;
  gap: 12px;
}
.feed-delay-banner__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(212,168,67,.12);
  color: var(--db-gold);
  font-size: .9rem;
}
.feed-delay-banner__text {
  flex: 1;
  font-size: .74rem;
  color: var(--db-text);
  line-height: 1.5;
}
.feed-delay-banner__text strong {
  background: linear-gradient(135deg, #d4a843, #f5d47a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}
.feed-delay-banner__cta {
  flex-shrink: 0;
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg, #d4a843, #c49a38);
  color: #0a0e1a;
  font-size: .68rem;
  font-weight: 800;
  font-family: var(--db-font);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: opacity .15s ease;
}
.feed-delay-banner__cta:hover {
  opacity: .85;
}
.feed-delay-banner__dismiss {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: var(--db-muted);
  cursor: pointer;
  font-size: .8rem;
  padding: 2px 4px;
  line-height: 1;
}
.feed-delay-banner__dismiss:hover {
  color: var(--db-text);
}

/* Delay badge on individual free-tier cards */
.feed-card__delay-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border: 1px solid rgba(212,168,67,.2);
  border-radius: 4px;
  background: rgba(212,168,67,.10);
  color: var(--db-gold);
  font-family: inherit;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.feed-card__delay-badge:hover {
  background: rgba(212,168,67,.18);
}

/* Mobile adjustments for delay banner */
@media (max-width: 700px) {
  .feed-delay-banner {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  .feed-delay-banner__cta {
    width: 100%;
    text-align: center;
    padding: 8px 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAYWALL GATES DISABLED, all users get real-time, free access
   Hide all upgrade/pro/delay UI elements until monetization switch is ready.
   Infrastructure (Paddle, subscription logic) is preserved, only UI hidden.
   ═══════════════════════════════════════════════════════════════════════════ */
.feed-delay-banner,
.feed-card__delay-badge,
.feed-card__pro-badge,
.db-upgrade-prompt,
.noc-pro-teaser,
#billing-upgrade-btn,
.cny-gate-overlay,
.cny-chat-gate,
.cny-zone-counter,
.cny-history-gate-bar,
.nav-tabs__btn--pro,
.pro-pricing,
#pro-free-note,
#pro-pricing-card,
.pro-pricing__offer,
.pro-pricing__cta {
  display: none !important;
}
/* Neutralize locked/gated classes injected by premium-features.js */
.cny-history-gated {
  opacity: 1 !important;
  pointer-events: auto !important;
  filter: none !important;
  user-select: auto !important;
}
.db-locked::after {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE OVERHAUL
   Breakpoints: 1024px (tablet landscape), 768px (tablet portrait), 480px (phone)
   Uses existing custom properties from .dashboard-page where possible.
   All rules use specificity >= existing rules so no !important needed
   (except where overriding the NUCLEAR animation kill block).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1. CHAT SIDEBAR, Slide-in drawer on mobile via nav bar chat button
   At <=1024px: hide desktop sidebar, chat opens via bottom nav
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  /* Hide desktop chat sidebar */
  .dashboard-page .chat-sidebar.chat-panel {
    display: none;
  }

  /* BUG FIX #6: Ensure dashboard fills full mobile width.
     Remove any max-width constraints and ensure 100% width. */
  #db-content {
    width: 100%;
    max-width: 100%;
  }
  .db-main-content {
    width: 100%;
  }
  .hero-scanner {
    width: 100%;
  }
  /* BUG FIX #7: Ensure tab navigation is visible on mobile.
     Force display:flex, nowrap, and proper z-index so it's not clipped
     or hidden behind other content. Horizontal scroll handles overflow. */
  .nav-tabs {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    z-index: 5;
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs__btn {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* BUG FIX #8: Scanner hero must be visible on mobile.
     Ensure it's not collapsed or hidden. Make it prominent enough
     to be noticed as audio controls. */
  .hero-scanner {
    display: flex;
    flex-shrink: 0;
    min-height: 44px;
    z-index: 2;
  }

  /* Main layout becomes single-column */
  .db-main-layout {
    flex-direction: column;
  }

  /* Main content takes full width */
  .db-main-content {
    max-width: 100%;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   2. TABLET LANDSCAPE (max-width: 1024px)
   Stack layout, adjust spacing, show mobile nav
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* NOC header, tighten */
  .noc-header {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .noc-header::-webkit-scrollbar { display: none; }

  /* Scanner strip, horizontal scroll on tight screens */
  .hero-scanner__inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .hero-scanner__inner::-webkit-scrollbar { display: none; }

  /* Scanner stats, constrain and hide overflow gracefully */
  .hero-scanner .scanner-stats {
    max-width: 260px;
  }
  .hero-scanner .scanner-stats .scanner-stats__tg-list {
    max-width: 180px;
  }

  /* Tab navigation, horizontal scroll with momentum */
  .nav-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs__btn {
    flex-shrink: 0;
    white-space: nowrap;
    scroll-snap-align: start;
    min-height: 44px; /* touch target */
  }

  /* Analytics grid, maintain 2-col on tablet */
  .analytics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* Camera grid, 2 columns */
  .cameras-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
  }

  /* Modals, wider on tablet */
  .db-modal {
    max-width: 90vw;
  }

  /* Callsign modal, wider */
  .chat-callsign-modal__card {
    max-width: 90vw;
  }

  /* Settings save bar, full width, sticky to bottom */
  .stg-save-bar {
    position: sticky;
    bottom: 72px; /* above single db-mobile-nav */
    z-index: 50;
    border-radius: 0;
    margin: 16px -24px 0;
  }

  /* Alerts hero details, allow wrapping */
  .alerts-hero__details {
    flex-wrap: wrap;
    gap: 0;
  }

  /* Toast, above stacked mobile navs */
  .db-toast {
    bottom: 180px;
  }

  /* Chat incident toast, reposition */
  .chat-incident-toast {
    top: auto;
    bottom: 72px;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   3. TABLET PORTRAIT (max-width: 768px)
   Single column, reduced padding, touch-optimized
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Main content, reduced padding */
  .db-main-content {
    padding: 14px 14px 80px;
  }

  /* NOC header, compact */
  .noc-header {
    gap: 8px;
    padding: 0 10px;
  }
  .noc-header__right {
    gap: 6px;
  }

  /* Scanner strip, tighter */
  .hero-scanner {
    padding: 0 14px;
    overflow: hidden; /* prevent scanner children from causing horizontal scroll */
  }
  .hero-scanner__meta {
    max-width: 140px;
    min-width: 0; /* allow text truncation in flex */
  }
  .hero-scanner .scanner-stats {
    font-size: .5rem;
    gap: 6px;
    min-width: 0; /* allow flex shrinking */
  }
  .hero-scanner .scanner-stats .scanner-stats__tg-list {
    max-width: 140px;
  }

  /* Tab nav, touch-friendly, horizontal scroll only, never wrap */
  .nav-tabs {
    padding: 0 10px;
    flex-wrap: nowrap;
  }
  .nav-tabs__btn {
    padding: 12px 12px;
    font-size: .68rem;
    min-height: 44px;
    gap: 5px;
  }

  /* Feed header */
  .feed-header {
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
  }
  .feed-header__title {
    font-size: .82rem;
  }

  /* Feed cards, full width, reduced padding */
  .feed-card {
    padding: 10px 12px;
    gap: 8px;
  }
  .feed-card__title {
    font-size: .78rem;
  }
  .feed-card__location {
    max-width: 100%;
  }
  .feed-card__meta {
    gap: 6px;
    flex-wrap: wrap;
  }
  .feed-card__expand-chevron {
    opacity: .3; /* always visible on touch */
  }

  /* Feed card detail grid, single column */
  .feed-card__detail-grid {
    grid-template-columns: 1fr;
  }

  /* Mini map widget, shorter */
  .mini-map-widget__body {
    height: 180px;
    min-height: 140px;
    max-height: 180px;
  }

  /* Map panel, flex-driven height (no hardcoded calc) */
  .map-container {
    flex: 1;
    min-height: 280px;
    max-height: 500px;
  }

  /* Analytics grid, single column */
  .analytics-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .analytics-card {
    padding: 16px;
  }
  .analytics-stat__value {
    font-size: 1.3rem;
  }

  /* Camera grid, single column on narrow tablet */
  .cameras-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Settings sections, tighter */
  .stg-section {
    border-radius: var(--db-radius-sm);
  }
  .stg-section__header {
    padding: 12px 14px;
    min-height: 44px; /* touch target */
  }
  .stg-section__body {
    padding: 12px 14px;
  }
  .stg-card {
    padding: 12px;
  }
  .stg-card__header {
    gap: 10px;
  }

  /* Zone items, stack on narrow */
  .zone-item {
    padding: 10px 12px;
    gap: 10px;
  }
  .zone-item__actions {
    flex-shrink: 0;
  }
  .zone-item__toggle,
  .zone-item__btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  /* Severity chips, wrap nicely */
  .db-severity-chips {
    gap: 6px;
  }
  .db-severity-chip {
    padding: 8px 14px;
    min-height: 36px;
  }

  /* Toggle rows, touch friendly */
  .stg-toggle-row {
    min-height: 44px;
  }
  .db-toggle-row {
    min-height: 44px;
  }

  /* Alerts hero, compact */
  .alerts-hero__status-row {
    gap: 10px;
  }
  .alerts-hero__details {
    flex-direction: column;
  }
  .alerts-hero__detail {
    border-right: none;
    border-bottom: 1px solid var(--db-border);
    padding: 8px 0;
  }
  .alerts-hero__detail:last-child {
    border-bottom: none;
  }

  /* Modals, near full screen */
  .db-modal-overlay {
    padding: 12px;
    align-items: flex-end;
  }
  .db-modal {
    max-width: 100%;
    border-radius: var(--db-radius-lg) var(--db-radius-lg) 0 0;
    padding: 24px 20px;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* Callsign modal, full width */
  .chat-callsign-modal__card {
    max-width: 100%;
    margin: 0 12px;
    padding: 24px 20px;
  }

  /* Billing section */
  .settings-billing__plan-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .settings-billing__actions {
    width: 100%;
  }
  .settings-billing__actions .db-btn {
    flex: 1;
    justify-content: center;
  }

  /* Breaking banner, stack */
  .breaking-banner__inner {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* NOC footer, stack on narrow */
  .noc-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 12px 14px;
  }

  /* Chat drawer, full height on tablet */
  .chat-drawer {
    height: 85vh;
  }

  /* Transcript ticker, tighter */
  .radio-transcript__ticker {
    padding: 0 14px;
  }
  .radio-transcript__scroll {
    padding: 0 14px 6px;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   4. PHONE (max-width: 480px)
   Maximum compactness, full-width everything, large touch targets
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Main content, edge-to-edge feel */
  .db-main-content {
    padding: 10px 10px 80px;
  }

  /* Typography scale-down */
  .feed-header__title {
    font-size: .78rem;
  }
  .feed-header__count {
    font-size: .6rem;
  }
  .analytics-header__title {
    font-size: .78rem;
  }
  .cameras-panel-header__title {
    font-size: .78rem;
  }

  /* NOC header, minimal */
  .noc-header {
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    gap: 6px;
    padding: 0 8px;
  }
  .noc-header__clock {
    font-size: .6rem;
  }
  .noc-header__system-status {
    font-size: .54rem;
  }
  .noc-header__user {
    display: none; /* hide phone number on small screens */
  }
  .noc-header__logout {
    padding: 2px 6px;
    font-size: .56rem;
  }

  /* Scanner strip, ultra compact */
  .hero-scanner {
    height: 42px;
    padding: 0 10px;
  }
  .hero-scanner__inner {
    gap: 6px;
  }
  .hero-scanner__play {
    width: 28px;
    height: 28px;
    /* Touch target via transparent padding, 28 + 8*2 = 44px total tap area */
    padding: 8px;
    box-sizing: content-box;
    margin: -8px; /* offset padding so layout stays tight */
  }
  .hero-scanner__viz {
    display: none; /* hide waveform on phone */
  }
  .hero-scanner__meta {
    max-width: 110px;
  }
  .hero-scanner__channel {
    font-size: .58rem;
  }
  .hero-scanner__status {
    font-size: .52rem;
  }
  .hero-scanner__volume {
    width: 36px;
  }
  .hero-scanner__sep {
    display: none;
  }
  .hero-scanner .scanner-stats {
    gap: 4px;
    font-size: .56rem;
  }
  /* Hide TG list + dept badges on phone, too cramped */
  .hero-scanner .scanner-stats .scanner-stats__tg-list,
  .scanner-stats__depts,
  .scanner-stats__dept-divider,
  .hero-scanner__coverage-label {
    display: none !important;
  }
  /* Show coverage button on phone */
  .hero-scanner__coverage-btn {
    display: flex;
  }
  /* Coverage drawer, only visible when toggled via JS (hidden attr removed).
     Do NOT set display:block, it overrides the HTML hidden attribute and
     causes the drawer content to bleed through the entire page on mobile.
     The drawer's base styles (position:fixed, z-index:600) handle display
     when JS removes the hidden attribute on button click. */

  /* Transcript ticker */
  .radio-transcript__ticker {
    padding: 0 10px;
  }
  .radio-transcript__scroll {
    max-height: 120px;
    padding: 0 10px 6px;
  }
  .radio-transcript__channel {
    display: none; /* hide channel on phone */
  }

  /* Tab navigation, compact, horizontal scroll, never wrap */
  .nav-tabs {
    padding: 0 6px;
    flex-wrap: nowrap;
  }
  .nav-tabs__btn {
    padding: 10px 8px;
    font-size: .62rem;
    gap: 3px;
    min-height: 44px;
  }
  /* Shrink tab icons on phone to save space */
  .nav-tabs__btn svg {
    width: 11px;
    height: 11px;
  }

  /* Feed cards, maximum compactness */
  .feed-card {
    padding: 8px 10px;
    gap: 8px;
    border-radius: var(--db-radius-sm);
  }
  .feed-card__icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: .85rem;
  }
  .feed-card__title {
    font-size: .74rem;
  }
  .feed-card__time {
    font-size: .58rem;
  }
  .feed-card__meta {
    font-size: .6rem;
    gap: 4px;
  }
  .feed-card__location {
    max-width: 100%;
  }
  .feed-card__desc {
    font-size: .62rem;
  }
  .feed-card__elapsed {
    font-size: .54rem;
    padding: 1px 4px;
  }
  .feed-card__live-elapsed {
    font-size: .52rem;
    padding: 1px 4px;
  }
  .feed-time-group {
    padding: 4px 0 1px;
    font-size: .56rem;
  }
  .feed-card__radio-row {
    gap: 3px;
  }
  .feed-card__channel-tag {
    max-width: 90px;
    font-size: .5rem;
  }
  .feed-card__unit-names {
    display: none;
  }

  /* Feed card share button, 44px touch target */
  .feed-card__share-btn {
    width: 44px;
    height: 44px;
    padding: 10px;
  }

  /* Mini map widget */
  .mini-map-widget__header {
    padding: 6px 10px;
  }
  .mini-map-widget__title {
    font-size: .66rem;
  }
  .mini-map-widget__btn {
    font-size: .58rem;
    padding: 4px 8px;
    min-height: 32px;
  }
  .mini-map-widget__body {
    height: 160px;
    min-height: 120px;
    max-height: 160px;
  }

  /* Map panel, flex-driven (no hardcoded calc) */
  .map-container {
    flex: 1;
    min-height: 250px;
    max-height: 400px;
    border-radius: var(--db-radius-sm);
  }
  .map-legend {
    bottom: 8px;
    left: 8px;
    padding: 8px 10px;
    min-width: 100px;
    border-radius: 8px;
  }
  .map-legend__item {
    font-size: .54rem;
    gap: 6px;
  }
  .map-legend__dot {
    width: 7px;
    height: 7px;
  }

  /* Analytics, ultra compact */
  .analytics-card {
    padding: 14px;
    border-radius: var(--db-radius-sm);
  }
  .analytics-card__title {
    font-size: .58rem;
    margin-bottom: 12px;
  }
  .analytics-stat__value {
    font-size: 1.2rem;
  }
  .noc-donut {
    width: 120px;
    height: 120px;
  }
  .noc-donut__total {
    font-size: 1.1rem;
  }
  .noc-bar-chart {
    height: 80px;
    gap: 4px;
  }

  /* Settings, phone compact */
  .stg-section__header {
    padding: 12px 12px;
    gap: 8px;
  }
  .stg-section__title {
    font-size: .76rem;
  }
  .stg-section__subtitle {
    font-size: .6rem;
  }
  .stg-section__body {
    padding: 10px 12px;
  }
  .stg-card {
    padding: 10px;
    border-radius: var(--db-radius-sm);
  }
  .stg-card__name {
    font-size: .72rem;
  }
  .stg-card__desc {
    font-size: .6rem;
  }
  .stg-badge--coming-soon {
    font-size: .56rem;
    padding: 1px 4px;
    margin-left: 4px;
  }
  .stg-coming-soon-note {
    font-size: .58rem;
  }

  /* Zone items, compact */
  .zone-item {
    padding: 10px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .zone-item__icon {
    width: 32px;
    height: 32px;
  }
  .zone-item__name {
    font-size: .72rem;
  }
  .zone-item__address {
    font-size: .6rem;
  }
  .zone-item__toggle,
  .zone-item__btn {
    width: 44px;
    height: 44px;
    padding: 2px;
  }

  /* Settings toggles, 44px touch targets */
  .stg-toggle-row {
    min-height: 48px;
    padding: 10px 0;
  }
  .stg-toggle-row__info {
    gap: 8px;
  }
  .stg-toggle-row__info span {
    font-size: .72rem;
  }

  /* Radio groups, larger touch targets */
  .stg-radio {
    min-height: 44px;
    padding: 10px;
  }

  /* Quiet hours selects */
  .stg-quiet-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .stg-quiet-row__times {
    width: 100%;
  }
  .stg-select {
    min-height: 40px;
    font-size: .72rem;
  }
  .stg-select--time {
    flex: 1;
    min-width: 0;
  }

  /* Severity chips, 2 per row */
  .db-severity-chips {
    gap: 6px;
  }
  .db-severity-chip {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    justify-content: center;
    min-height: 40px;
  }

  /* Keyword inputs */
  .stg-keyword-input {
    min-height: 40px;
    font-size: .72rem;
  }

  /* Account rows */
  .stg-acct-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 0;
  }
  .stg-acct-row__value {
    width: 100%;
    justify-content: flex-start;
  }
  .stg-inline-input {
    width: 100%;
    min-height: 40px;
  }

  /* Save bar, full width at bottom */
  .stg-save-bar {
    margin: 12px -10px 0;
    border-radius: 0;
  }
  .stg-save-bar__inner {
    padding: 10px 12px;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  .stg-save-bar__status {
    text-align: center;
    font-size: .64rem;
  }
  .stg-save-bar .db-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  /* Alerts hero */
  .alerts-hero {
    padding: 14px;
    border-radius: var(--db-radius-sm);
  }
  .alerts-hero__icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }
  .alerts-hero__title {
    font-size: .8rem;
  }
  .alerts-hero__subtitle {
    font-size: .64rem;
  }
  .alerts-hero__step-text {
    font-size: .62rem;
  }

  /* Billing, stack actions */
  .settings-billing__actions {
    flex-direction: column;
  }
  .settings-billing__actions .db-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  /* Modals, full screen bottom sheet */
  .db-modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .db-modal {
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--db-radius-lg) var(--db-radius-lg) 0 0;
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 8px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .db-modal__title {
    font-size: .86rem;
  }
  .db-modal__desc {
    font-size: .7rem;
  }
  .db-modal__input {
    min-height: 44px;
    font-size: 16px; /* >= 16px prevents iOS auto-zoom */
  }
  .db-modal__actions {
    flex-direction: column-reverse;
    gap: 6px;
  }
  .db-modal__actions .db-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  /* Callsign modal, full width bottom sheet */
  .chat-callsign-modal {
    align-items: flex-end;
  }
  .chat-callsign-modal__card {
    max-width: 100%;
    margin: 0;
    border-radius: var(--db-radius-lg) var(--db-radius-lg) 0 0;
    padding: 24px 16px calc(16px + env(safe-area-inset-bottom, 8px));
  }
  .chat-callsign-modal__input {
    min-height: 44px;
  }
  .chat-callsign-modal__submit {
    min-height: 44px;
  }

  /* Chat drawer, near full screen */
  .chat-drawer {
    height: 92vh;
    border-radius: 16px 16px 0 0;
  }
  .chat-input {
    min-height: 44px;
    font-size: 16px; /* >= 16px prevents iOS auto-zoom on focus */
    padding: 10px 14px;
  }
  .chat-send-btn {
    width: 44px;
    height: 44px;
    padding: 4px;
  }
  .chat-quick-emoji {
    width: 44px;
    height: 44px;
    padding: 6px;
  }
  .chat-emoji-picker {
    width: calc(100vw - 28px);
    right: 0;
    left: 0;
    margin: 0 auto;
  }

  /* Upgrade prompt, stack */
  .db-upgrade-prompt {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  /* Breaking banner */
  .breaking-banner__inner {
    padding: 8px 10px;
    gap: 6px;
  }
  .breaking-banner__badge {
    font-size: .52rem;
    padding: 2px 6px;
  }
  .breaking-banner__text {
    font-size: .66rem;
  }

  /* Delay banner */
  .feed-delay-banner {
    padding: 10px;
    gap: 8px;
    border-radius: var(--db-radius-sm);
  }
  .feed-delay-banner__text {
    font-size: .68rem;
  }

  /* New incidents button */
  .feed-new-incidents-btn {
    font-size: .68rem;
    padding: 8px 12px;
    border-radius: 6px;
  }

  /* Toast positioning */
  .db-toast {
    bottom: 120px;
    left: 12px;
    right: 12px;
    transform: translateY(20px);
    max-width: none;
    text-align: center;
    font-size: .7rem;
    padding: 10px 16px;
  }
  .db-toast.is-visible {
    transform: translateY(0);
  }

  /* Mobile nav items, larger touch targets */
  .db-mobile-nav__item {
    min-width: 44px;
    min-height: 44px;
    padding: 6px 8px;
  }
  .db-mobile-nav__icon {
    width: 24px;
    height: 24px;
  }



  /* Feed scroll gradient */
  .feed-scroll::before {
    height: 12px;
    margin-bottom: -12px;
  }

  /* Loading skeleton, single column */
  .db-loading__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .db-loading {
    padding: 40px 16px;
  }

  /* Error state */
  .db-error {
    padding: 40px 16px;
  }

  /* NOC footer */
  .noc-footer {
    padding: 10px 12px;
    font-size: .56rem;
    flex-direction: column;
    gap: 6px;
  }
  .noc-footer__links {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   5. EXTRA SMALL (max-width: 380px)
   iPhone SE, very narrow devices
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 380px) {

  /* Tab icons hidden, text only */
  .nav-tabs__btn svg {
    display: none;
  }
  .nav-tabs__btn {
    padding: 10px 8px;
    font-size: .64rem;
  }

  /* Feed card icon, smaller */
  .feed-card__icon {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    font-size: .8rem;
  }
  .feed-card__title {
    font-size: .7rem;
  }
  .feed-card {
    padding: 7px 8px;
    gap: 6px;
  }

  /* Scanner, absolute minimum */
  .hero-scanner {
    height: 40px;
  }
  .hero-scanner__play {
    width: 26px;
    height: 26px;
    /* 26 + 9*2 = 44px touch target */
    padding: 9px;
    margin: -9px;
  }
  .hero-scanner__play svg {
    width: 12px;
    height: 12px;
  }
  .hero-scanner__channel {
    font-size: .56rem;
  }
  .hero-scanner .scanner-stats {
    display: none; /* hide stats on very small phones */
  }
  .hero-scanner__controls {
    gap: 2px;
  }
  .hero-scanner__volume {
    width: 30px;
  }

  /* Analytics donut, smaller */
  .noc-donut {
    width: 100px;
    height: 100px;
  }
  .noc-donut__total {
    font-size: .92rem;
  }

  /* Alerts hero steps, compact */
  .alerts-hero__step {
    gap: 8px;
  }
  .alerts-hero__step-num {
    width: 20px;
    height: 20px;
    font-size: .56rem;
  }

  /* Chat drawer, ensure inputs fit narrow width */
  .chat-drawer {
    overflow-x: hidden;
  }
  .chat-input-row {
    padding: 4px 8px;
  }
  .chat-input-row input,
  .chat-input-row textarea {
    font-size: 16px; /* prevent iOS zoom on focus */
  }

  /* Callsign modal, no side margins on tiny screens */
  .chat-callsign-modal__card {
    margin: 0 8px;
    padding: 20px 14px;
  }

  /* Mobile nav, tighter item padding */
  .db-mobile-nav__item {
    padding: 6px 8px;
    font-size: .52rem;
  }

  /* Prevent any fixed-width elements from overflowing */
  .noc-header__right {
    min-width: 0;
    overflow: hidden;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   6. LANDSCAPE PHONE, Prevent scanner from eating viewport
   ───────────────────────────────────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {

  .hero-scanner {
    height: 36px;
  }
  .noc-header {
    height: 26px;
    min-height: 26px;
    max-height: 26px;
  }
  .mini-map-widget__body {
    height: 120px;
    min-height: 100px;
    max-height: 120px;
  }
  .map-container {
    min-height: 200px;
  }
  .radio-transcript {
    max-height: 24px;
  }
  .radio-transcript.is-expanded {
    max-height: 140px;
  }
  .chat-drawer {
    height: 95vh;
  }
  /* Hide mobile bottom nav in landscape to maximize content area */
  .db-mobile-nav {
    padding: 4px 0 max(4px, env(safe-area-inset-bottom));
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   7. TOUCH TARGET ENFORCEMENT, Global 44px minimum
   Applied at touch-capable media query to avoid affecting desktop cursor
   ───────────────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {

  /* Buttons */
  .dashboard-page .db-btn {
    min-height: 44px;
    min-width: 44px;
  }
  .dashboard-page .db-btn--sm {
    min-height: 40px;
  }

  /* Nav tab buttons */
  .dashboard-page .nav-tabs__btn {
    min-height: 44px;
  }

  /* Scanner play button */
  .dashboard-page .hero-scanner__play {
    min-width: 44px;
    min-height: 44px;
  }

  /* Scanner mute button */
  .dashboard-page .hero-scanner__mute {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
  }

  /* Toggle switches */
  .dashboard-page .db-toggle {
    min-width: 44px;
    min-height: 28px;
  }

  /* Settings section headers */
  .dashboard-page .stg-section__header {
    min-height: 48px;
  }

  /* Zone action buttons */
  .dashboard-page .zone-item__toggle,
  .dashboard-page .zone-item__btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Mini map widget buttons */
  .dashboard-page .mini-map-widget__btn {
    min-height: 36px;
    padding: 6px 12px;
  }

  /* Modal inputs */
  .dashboard-page .db-modal__input {
    min-height: 44px;
  }

  /* Chat send button */
  .dashboard-page .chat-send-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Severity chips */
  .dashboard-page .db-severity-chip {
    min-height: 40px;
  }

  /* Logout button */
  .dashboard-page .noc-header__logout {
    min-height: 28px;
    padding: 4px 10px;
  }

  /* Feed card share button */
  .dashboard-page .feed-card__share-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Emoji buttons */
  .dashboard-page .chat-quick-emoji {
    min-width: 44px;
    min-height: 44px;
  }
  .dashboard-page .chat-emoji-btn {
    min-width: 40px;
    min-height: 40px;
  }

  /* Breaking banner dismiss */
  .dashboard-page .breaking-banner__dismiss {
    min-width: 44px;
    min-height: 44px;
  }

  /* Transcript toggle, ensure tappable */
  .dashboard-page .radio-transcript__ticker {
    min-height: 36px;
  }

  /* Disable hover effects on touch, prevent sticky :hover states */
  .feed-card:hover {
    transform: none;
    box-shadow: none;
  }
  .analytics-card:hover {
    transform: none;
    box-shadow: none;
  }
  .cam-card:hover {
    transform: none;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   8. SAFE AREA INSETS, Notched phones (iPhone X+)
   ───────────────────────────────────────────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 1024px) {
    .db-mobile-nav {
      padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
    .db-main-content {
      padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }
    .chat-drawer {
      padding-bottom: env(safe-area-inset-bottom);
    }
    .db-modal {
      padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    .stg-save-bar {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   9. PRINT, Clean output if anyone tries to print the dashboard
   ───────────────────────────────────────────────────────────────────────── */
@media print {
  .dashboard-page {
    background: white;
    color: #1a1a1a;
  }
  .hero-scanner,
  .noc-header,
  .nav-tabs,
  .chat-sidebar,
  .db-mobile-nav,
  .radio-transcript,
  .noc-footer,
  .stg-save-bar,
  .breaking-banner,
  .feed-delay-banner,
  .feed-new-incidents-btn,
  .chat-drawer,
  .chat-drawer-overlay {
    display: none !important;
  }
  .db-main-content {
    overflow: visible;
    padding: 0;
  }
  .feed-card {
    break-inside: avoid;
    border: 1px solid #ccc;
    background: white;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Google Places Autocomplete, dark theme + z-index above modal overlay
   (styles.css / sms-signup.css aren't loaded on the dashboard page)
   ═══════════════════════════════════════════════════════════════════════ */
.pac-container {
  background: #0a1628;
  border: 1px solid rgba(170, 206, 255, 0.13);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  font-family: inherit;
  margin-top: 4px;
  z-index: 100001 !important;
  pointer-events: auto !important;
  /* Ensure the dropdown is properly positioned and not clipped */
  overflow: visible !important;
  position: absolute !important;
}
.pac-container .pac-item {
  border-top: 1px solid rgba(170, 206, 255, 0.08);
  padding: 12px 14px;
  cursor: pointer;
  color: #eef5ff;
  font-size: 0.88rem;
  line-height: 1.4;
  transition: background 0.15s;
  min-height: 44px;
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto !important;
  /* Ensure items are above any overlapping layers */
  position: relative;
  /* Prevent text selection on click/drag */
  user-select: none;
  -webkit-user-select: none;
}
.pac-container .pac-item:first-child {
  border-top: none;
}
/* Active state for visual feedback on click/tap */
.pac-container .pac-item:active {
  background: rgba(170, 206, 255, 0.18);
}
/* Ensure child spans don't intercept pointer events, clicks must
   bubble to the .pac-item parent for Google's handler to work */
.pac-container .pac-item span {
  pointer-events: none;
}
/* ═══════════════════════════════════════════════════════════════════════
   CAMERA MAP VISUAL FIXES, polish markers, popups, controls, mobile
   ═══════════════════════════════════════════════════════════════════════ */

/* Map container, ensure proper containment and depth */
.cam-map-container {
  position: relative;
  overflow: hidden;
}

/* Inner shadow for depth on the map */
.cam-map-container::after {
  content: '';
  position: absolute; inset: 0;
  box-shadow: inset 0 2px 16px rgba(0,0,0,.35);
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}

/* Google Maps InfoWindow dark-theme overrides (consolidated) */
.gm-style-iw-d {
  overflow: auto !important;
  max-height: 420px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,168,67,.25) transparent;
}
.gm-style-iw-d::-webkit-scrollbar { width: 4px; }
.gm-style-iw-d::-webkit-scrollbar-thumb { background: rgba(212,168,67,.25); border-radius: 2px; }

.gm-style-iw {
  background: #0a1628 !important;
  border: 1px solid rgba(212,168,67,.2) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.5) !important;
  max-width: 360px !important;
  padding: 0 !important;
}

/* InfoWindow tail/arrow piece */
.gm-style-iw-tc::after {
  background: #0a1628 !important;
  border-color: rgba(212,168,67,.2) !important;
}

/* InfoWindow close button, reposition for dark theme visibility */
.gm-ui-hover-effect {
  top: 8px !important;
  right: 8px !important;
  width: 28px !important;
  height: 28px !important;
  background: rgba(255,255,255,.06) !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: .7;
  transition: opacity .15s, background .15s;
}
.gm-ui-hover-effect:hover {
  opacity: 1;
  background: rgba(255,255,255,.12) !important;
}
.gm-ui-hover-effect > span {
  background-color: #fff !important;
  margin: 0 !important;
}

/* InfoWindow content wrapper, remove default Google padding */
.gm-style-iw-c {
  padding: 0 !important;
}

/* Camera map legend, prevent overlap with zoom controls */
.cam-map-legend {
  max-width: 140px;
}

/* Camera modal, safe area handling for notched phones */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .cam-modal__content {
    margin-bottom: env(safe-area-inset-bottom);
  }
}

/* Camera modal mobile, better sizing */
@media (max-width: 768px) {
  .cam-modal__content {
    max-height: 90vh;
    max-height: 90dvh;
  }
  .cam-modal__video-wrap {
    max-height: 50vh;
    max-height: 50dvh;
  }
}
@media (max-width: 480px) {
  .cam-modal__header {
    padding: 10px 14px;
  }
  .cam-modal__title {
    font-size: .74rem;
  }
  .cam-modal__footer {
    padding: 8px 14px;
  }
}

/* Camera map, zoom controls visual refinement */
.cam-map-container .gm-bundled-control {
  margin: 10px !important;
}
.cam-map-container .gm-control-active {
  background: rgba(10,22,40,.85) !important;
  border: 1px solid rgba(212,168,67,.15) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.3) !important;
}
.cam-map-container .gm-control-active:hover {
  background: rgba(10,22,40,.95) !important;
  border-color: rgba(212,168,67,.3) !important;
}
.cam-map-container .gm-control-active > img {
  filter: invert(1) brightness(.85) !important;
}

/* Camera grid cards, ensure snapshot images don't overflow */
.cam-card__poster img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════════════════
   PAC-CONTAINER SUPPLEMENTAL, hover/selected/icon/query styles
   (primary styles are above in the Google Places Autocomplete section)
   ═══════════════════════════════════════════════════════════════════════ */
.pac-container .pac-item:hover,
.pac-container .pac-item.pac-item-selected {
  background: rgba(170, 206, 255, 0.1);
}
.pac-container .pac-item .pac-icon {
  display: none;
}
.pac-container .pac-item .pac-item-query {
  color: #eef5ff;
  font-weight: 600;
  font-size: 0.88rem;
  pointer-events: none;
}
.pac-container .pac-item .pac-item-query .pac-matched {
  color: #3b82f6;
  font-weight: 700;
}
.pac-container::after {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   INCIDENT DETAIL PANEL (IDP), Premium slide-out
   ═══════════════════════════════════════════════════════════════════════ */

/* Overlay */
.idp-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.idp-overlay.is-open {
  opacity: 1; pointer-events: auto;
}

/* Panel shell */
.idp {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 100vw;
  z-index: 9999;
  background: var(--db-bg-elevated, #0f1422);
  border-left: 1px solid var(--db-border, rgba(255,255,255,.07));
  box-shadow: -8px 0 40px rgba(0,0,0,.45), -2px 0 12px rgba(0,0,0,.3);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}
.idp.is-open {
  transform: translateX(0);
}

/* Header bar */
.idp__header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: var(--db-card, #111827);
  border-bottom: 1px solid var(--db-border);
  flex-shrink: 0;
}
.idp__back {
  display: none; /* shown on mobile */
  background: none; border: none; color: var(--db-muted); cursor: pointer;
  padding: 4px; border-radius: 6px;
  transition: color .15s, background .15s;
}
.idp__back:hover { color: var(--db-heading); background: var(--db-surface); }
.idp__header-text {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
.idp__header-label {
  font-size: .68rem; font-weight: 700; color: var(--db-muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.idp__header-id {
  font-size: .6rem; color: var(--db-text-3, #667a90);
  font-family: 'SF Mono', 'Fira Code', monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.idp__close {
  background: none; border: none; color: var(--db-muted); cursor: pointer;
  padding: 6px; border-radius: 6px;
  transition: color .15s, background .15s;
}
.idp__close:hover { color: var(--db-heading); background: var(--db-surface); }

/* Body scroll area */
.idp__body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--db-surface-3) transparent;
}
.idp__body::-webkit-scrollbar { width: 5px; }
.idp__body::-webkit-scrollbar-track { background: transparent; }
.idp__body::-webkit-scrollbar-thumb { background: var(--db-surface-3); border-radius: 3px; }

/* Loading state */
.idp__loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 60px 20px; color: var(--db-muted); font-size: .8rem;
}
.idp__spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--db-surface-3);
  border-top-color: var(--db-green, #34d399);
  animation: idp-spin .8s linear infinite;
}
@keyframes idp-spin { to { transform: rotate(360deg); } }

/* Content wrapper */
.idp__content { padding: 0; }

/* Hero */
.idp__hero {
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--db-border);
  background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, transparent 100%);
}
.idp__hero-badges {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: 10px;
}
.idp__badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 3px 8px; border-radius: 4px;
  line-height: 1.3;
}
.idp__badge--sev-critical { background: var(--db-red-dim); color: var(--db-red); border: 1px solid rgba(248,113,113,.2); }
.idp__badge--sev-high { background: rgba(255,147,87,.1); color: #ff9357; border: 1px solid rgba(255,147,87,.2); }
.idp__badge--sev-medium { background: var(--db-amber-dim); color: var(--db-amber); border: 1px solid rgba(251,191,36,.2); }
.idp__badge--sev-low { background: var(--db-teal-dim); color: var(--db-teal); border: 1px solid rgba(101,231,210,.2); }
.idp__badge--type-fire { background: rgba(248,113,113,.1); color: #f87171; border: 1px solid rgba(248,113,113,.2); }
.idp__badge--type-ems { background: rgba(251,146,60,.1); color: #fb923c; border: 1px solid rgba(251,146,60,.2); }
.idp__badge--type-police { background: rgba(192,132,252,.1); color: #c084fc; border: 1px solid rgba(192,132,252,.2); }
.idp__badge--type-weather { background: rgba(96,165,250,.1); color: #60a5fa; border: 1px solid rgba(96,165,250,.2); }
.idp__badge--type-traffic { background: rgba(251,191,36,.1); color: #fbbf24; border: 1px solid rgba(251,191,36,.2); }
.idp__badge--type-hazmat { background: rgba(52,211,153,.1); color: #34d399; border: 1px solid rgba(52,211,153,.2); }
.idp__badge--live {
  background: rgba(52,211,153,.12); color: var(--db-green);
  border: 1px solid rgba(52,211,153,.25);
  animation: idp-pulse 2s ease infinite;
}
.idp__badge--live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--db-green); box-shadow: 0 0 6px rgba(52,211,153,.5);
}
@keyframes idp-pulse { 0%,100%{ opacity:1; } 50%{ opacity:.7; } }
.idp__badge--ota {
  background: var(--db-gold-dim); color: var(--db-gold);
  border: 1px solid var(--db-gold-border);
}

.idp__title {
  font-size: 1.15rem; font-weight: 800; color: var(--db-heading);
  line-height: 1.3; margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.idp__hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-size: .72rem; color: var(--db-muted);
}
.idp__hero-meta-item {
  display: inline-flex; align-items: center; gap: 4px;
}
.idp__hero-meta-item svg { opacity: .5; flex-shrink: 0; }

/* Sections */
.idp__section {
  padding: 14px 18px;
  border-bottom: 1px solid var(--db-border);
}
.idp__section-head {
  display: flex; align-items: center; gap: 6px;
  font-size: .7rem; font-weight: 700; color: var(--db-muted);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 10px;
}
.idp__section-head svg { opacity: .5; }

/* Location */
.idp__location-text {
  font-size: .84rem; color: var(--db-heading); font-weight: 600;
  margin-bottom: 10px; line-height: 1.45;
}
.idp__location-sub {
  font-size: .72rem; color: var(--db-muted); font-weight: 400;
}
.idp__minimap {
  width: 100%; height: 140px; border-radius: var(--db-radius-sm, 8px);
  overflow: hidden; background: var(--db-surface);
  border: 1px solid var(--db-border);
}
.idp__minimap img {
  width: 100%; height: 100%; object-fit: cover;
}
.idp__minimap--empty {
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; color: var(--db-text-3);
}

/* Timeline */
.idp__timeline {
  position: relative; padding-left: 18px;
}
.idp__timeline::before {
  content: ''; position: absolute; left: 5px; top: 4px; bottom: 4px;
  width: 1.5px; background: var(--db-border);
}
.idp__tl-item {
  position: relative; padding: 6px 0;
  font-size: .76rem; color: var(--db-text); line-height: 1.5;
}
.idp__tl-item::before {
  content: ''; position: absolute; left: -18px; top: 12px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--db-surface-3); border: 2px solid var(--db-muted);
}
.idp__tl-item--dispatch::before {
  background: var(--db-green); border-color: var(--db-green);
  box-shadow: 0 0 8px rgba(52,211,153,.35);
}
.idp__tl-item--units::before {
  background: var(--db-blue); border-color: var(--db-blue);
  box-shadow: 0 0 6px rgba(96,165,250,.35);
}
.idp__tl-item--alert::before {
  background: var(--db-red); border-color: var(--db-red);
  box-shadow: 0 0 6px rgba(248,113,113,.35);
}
.idp__tl-item--status::before {
  background: var(--db-amber); border-color: var(--db-amber);
}
.idp__tl-time {
  font-size: .62rem; color: var(--db-text-3);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
}
.idp__tl-label {
  font-weight: 600; color: var(--db-heading);
}
.idp__tl-detail {
  color: var(--db-muted); font-weight: 400;
}

/* Details grid */
.idp__details-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
}
.idp__detail-row {
  display: flex; flex-direction: column; gap: 2px;
}
.idp__detail-row--full {
  grid-column: 1 / -1;
}
.idp__detail-label {
  font-size: .62rem; font-weight: 600; color: var(--db-text-3);
  text-transform: uppercase; letter-spacing: .04em;
}
.idp__detail-value {
  font-size: .8rem; font-weight: 600; color: var(--db-heading);
  word-break: break-word; line-height: 1.45;
}
.idp__detail-value--mono {
  font-family: 'SF Mono', 'Fira Code', monospace; font-size: .76rem;
}
.idp__detail-value--desc {
  font-weight: 500; color: var(--db-text); font-size: .78rem;
  line-height: 1.55;
}

/* Transcript */
.idp__transcript {
  font-size: .78rem; color: var(--db-text); line-height: 1.6;
  background: var(--db-surface); border: 1px solid var(--db-border);
  border-radius: var(--db-radius-sm); padding: 12px 14px;
  max-height: 200px; overflow-y: auto;
  font-family: 'SF Mono', 'Fira Code', monospace; font-size: .72rem;
  white-space: pre-wrap; word-break: break-word;
}

/* Audio player */
.idp__audio-wrap {
  display: flex; align-items: center; gap: 10px;
  background: var(--db-surface); border: 1px solid var(--db-border);
  border-radius: var(--db-radius-sm); padding: 10px 14px;
}
.idp__audio-play {
  background: none; border: none; cursor: pointer;
  color: var(--db-green); padding: 4px;
  transition: transform .15s;
}
.idp__audio-play:hover { transform: scale(1.15); }
.idp__audio-bar {
  flex: 1; height: 4px; background: var(--db-surface-3);
  border-radius: 2px; overflow: hidden; cursor: pointer;
}
.idp__audio-bar-fill {
  height: 100%; background: var(--db-green); border-radius: 2px;
  width: 0; transition: width .1s linear;
}
.idp__audio-time {
  font-size: .68rem; color: var(--db-muted);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-variant-numeric: tabular-nums;
  min-width: 36px; text-align: right;
}

/* Actions */
.idp__actions {
  display: flex; gap: 8px; padding: 14px 18px;
  border-bottom: 1px solid var(--db-border);
}
.idp__action-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 9px 14px;
  font-size: .74rem; font-weight: 600;
  border-radius: var(--db-radius-sm); border: 1px solid var(--db-border);
  background: var(--db-surface); color: var(--db-text);
  cursor: pointer; transition: all .15s;
}
.idp__action-btn:hover {
  background: var(--db-surface-2); border-color: var(--db-border-hover);
  color: var(--db-heading);
}
.idp__action-btn--share:hover { border-color: rgba(52,211,153,.3); color: var(--db-green); }
.idp__action-btn--report:hover { border-color: rgba(251,191,36,.3); color: var(--db-amber); }

/* Related incidents */
.idp__related-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--db-border);
  cursor: pointer; transition: background .15s;
}
.idp__related-card:last-child { border-bottom: none; }
.idp__related-card:hover { background: var(--db-surface); margin: 0 -18px; padding: 10px 18px; }
.idp__related-icon {
  font-size: .9rem; line-height: 1; flex-shrink: 0;
  width: 24px; text-align: center;
}
.idp__related-body { flex: 1; min-width: 0; }
.idp__related-title {
  font-size: .76rem; font-weight: 600; color: var(--db-heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.idp__related-meta {
  font-size: .65rem; color: var(--db-muted); margin-top: 2px;
}

/* ─── IDP Responsive ── */
@media (max-width: 600px) {
  .idp {
    width: 100vw; border-left: none;
    border-radius: 0;
  }
  .idp__back { display: block; }
  .idp__close { display: none; }
  .idp__title { font-size: 1.05rem; }
  .idp__details-grid { grid-template-columns: 1fr; }
  .idp__actions { flex-direction: column; }
  .idp__hero { padding: 16px 14px 12px; }
  .idp__section { padding: 12px 14px; }
}

@media (min-width: 601px) and (max-width: 900px) {
  .idp { width: 380px; }
}

/* ═══ Legal Disclaimer Styles ═══ */
.legal-disclaimer {
  font-size: 0.75rem;
  color: #94a3b8;
  line-height: 1.4;
  margin-top: 0.5rem;
}
.legal-disclaimer a {
  color: #94a3b8;
  text-decoration: underline;
}

/* First-visit disclaimer modal */
.cny-disclaimer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cny-disclaimer-modal {
  background: var(--db-bg-elevated, #0f1422);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 32px 28px 24px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.cny-disclaimer-modal__icon {
  margin-bottom: 16px;
}
.cny-disclaimer-modal__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--db-heading, #e8ecf4);
  margin: 0 0 12px;
}
.cny-disclaimer-modal__text {
  font-size: 0.82rem;
  color: var(--db-text, #c8cdd8);
  line-height: 1.6;
  margin: 0 0 20px;
}
.cny-disclaimer-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 28px;
  background: var(--db-gold, #d4a843);
  color: #0a0e1a;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}
.cny-disclaimer-modal__btn:hover {
  opacity: 0.9;
}

/* Chat content policy */
.chat-content-policy {
  font-size: 0.65rem;
  color: #94a3b8;
  line-height: 1.4;
  padding: 4px 12px 2px;
  opacity: 0.8;
}


/* ============================================================
   MOBILE DASHBOARD FIXES (2026-04-13)
   Issues fixed:
     1. Scanner disclaimer overflow/bleed
     2. Scanner strip text truncation
     3. Coverage drawer bleeding through map/feed
     4. Stats bar text overlap
     5. Feed card overlap with detail popups
     6. Coverage department list showing through
     7. Toast/notification z-index
     8. Badge/label overlap in feed cards
     9. Legal disclaimer spacing
   ============================================================ */

/* -- Issue 1 & 9: Scanner disclaimer overflow --
   The .legal-disclaimer inside .hero-scanner sits after the flex row
   in a container with fixed height (48/42px). It adds height beyond
   the container, causing text to bleed below the scanner strip.
   On mobile, the first-visit disclaimer modal covers this info,
   so hide the inline disclaimer. On desktop, constrain it. */
.hero-scanner > .legal-disclaimer {
  position: absolute;
  bottom: 1px;
  left: 12px;
  right: 12px;
  font-size: 0.5rem;
  margin: 0;
  padding: 0;
  opacity: 0.4;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

@media (max-width: 768px) {
  /* Issue 1: Hide scanner inline disclaimer on tablet/phone -
     redundant with first-visit modal, causes overflow */
  .hero-scanner > .legal-disclaimer {
    display: none;
  }

  /* Issue 9: Legal disclaimers in feed/map need proper spacing
     so they don't run into adjacent content */
  .tab-panel > .legal-disclaimer {
    margin-top: 4px;
    margin-bottom: 8px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 0.65rem;
    line-height: 1.4;
  }

  /* Issue 3 & 6: Coverage drawer, ensure it stays hidden by default.
     The base rule at line 1702 uses position:fixed + z-index:600, which
     is correct when toggled open. But the drawer MUST honor the HTML
     hidden attribute. Force display:none when [hidden] is present. */
  .scanner-coverage-drawer[hidden] {
    display: none !important;
  }

  /* Issue 5: Feed scroll needs its own stacking context so nothing
     bleeds through from behind */
  .feed-scroll {
    position: relative;
    z-index: 1;
  }

  /* Issue 7: Toast z-index, ensure toasts sit above feed content
     and the mobile nav bar */
  .db-toast {
    z-index: 500;
  }
  .chat-incident-toast {
    z-index: 450;
  }
}

@media (max-width: 480px) {
  /* Issue 2: Scanner meta text truncation, the 110px max-width is
     too tight, clipping "Monitoring Ononda..." badly. Allow more room
     by hiding the coverage label (already hidden via !important rule)
     and giving meta more flex space. */
  .hero-scanner__meta {
    max-width: 140px;
    flex-shrink: 1;
  }
  .hero-scanner__channel {
    font-size: 0.58rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hero-scanner__status {
    font-size: 0.48rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Issue 4: Scanner stats items, prevent overlap by hiding
     less important stats on small phones. The coverage button
     already provides this info via the drawer. */
  .hero-scanner .scanner-stats .scanner-stats__item:nth-child(n+3) {
    display: none;
  }
  .hero-scanner .scanner-stats .scanner-stats__divider:nth-child(n+4) {
    display: none;
  }

  /* Issue 8: Feed card badge/label overlap, ensure row-top wraps
     properly and badges don't overrun titles */
  .feed-card__row-top {
    flex-wrap: wrap;
    gap: 4px;
  }
  .feed-card__sev-badge {
    font-size: 0.48rem;
    padding: 1px 4px;
    flex-shrink: 0;
  }
  .feed-card__trending {
    font-size: 0.48rem;
    padding: 1px 5px;
  }
  .feed-card__key-details {
    flex-wrap: wrap;
    gap: 3px;
  }
  .feed-card__key-detail {
    font-size: 0.48rem;
    padding: 1px 4px;
  }

  /* Issue 5 cont: Incident detail toasts/popups above feed */
  .feed-card.is-expanded {
    z-index: 2;
    position: relative;
  }

  /* Issue 9: Map panel legal disclaimer spacing */
  .mini-map-widget__body > .legal-disclaimer {
    font-size: 0.55rem;
    margin: 0;
    padding: 2px 8px;
    line-height: 1.2;
  }

}

@media (max-width: 380px) {
  /* Issue 2: Extra-small phones, give scanner meta even more
     room by further shrinking play button spacing */
  .hero-scanner__meta {
    max-width: 120px;
  }
  .hero-scanner__channel {
    font-size: 0.54rem;
  }
  .hero-scanner__status {
    font-size: 0.46rem;
  }

  /* Issue 8: Feed card badges, stack vertically on tiny screens */
  .feed-card__row-top {
    gap: 3px;
  }
  .feed-card__title {
    font-size: 0.68rem;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MY ALERTS TAB, Alert Feed Components
   ═══════════════════════════════════════════════════════════════════════════ */

/* Alert Feed Status Bar */
.alert-feed-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--db-border);
}
.alert-feed-status__left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.alert-feed-status__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--db-teal);
  animation: pulse-dot 2s infinite;
}
.alert-feed-status__title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--db-heading);
}
.alert-feed-status__right {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .68rem;
  color: var(--db-muted);
}
.alert-feed-status__sep {
  opacity: .5;
}

/* Filter Bar */
.alert-filter-bar {
  padding: 12px 16px;
  border-bottom: 1px solid var(--db-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.alert-filter-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.alert-filter-chips::-webkit-scrollbar { display: none; }
.alert-filter-chip {
  flex-shrink: 0;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid var(--db-border);
  background: var(--db-surface);
  color: var(--db-muted);
  font-size: .7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
}
.alert-filter-chip:hover {
  border-color: var(--db-gold);
  color: var(--db-gold);
}
.alert-filter-chip.is-active {
  background: var(--db-gold);
  border-color: var(--db-gold);
  color: #1a1a2e;
  font-weight: 600;
}

/* Search Bar */
.alert-search-wrap {
  position: relative;
}
.alert-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--db-muted);
  pointer-events: none;
}
.alert-search-input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-sm, 8px);
  background: var(--db-surface);
  color: var(--db-text);
  font-size: .75rem;
  outline: none;
  transition: border-color 200ms ease;
}
.alert-search-input::placeholder {
  color: var(--db-text-3, var(--db-muted));
}
.alert-search-input:focus {
  border-color: var(--db-gold);
}

/* Alert Feed Container */
.alert-feed-scroll {
  padding: 12px 16px;
  overflow-y: auto;
  flex: 1;
}

/* Date Separator */
.alert-date-separator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 12px;
}
.alert-date-separator::before,
.alert-date-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--db-border);
}
.alert-date-separator__label {
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--db-muted);
  white-space: nowrap;
}

/* Alert Card */
.alert-feed-card {
  background: var(--db-card, #111827);
  border: 1px solid var(--db-border);
  border-left: 3px solid var(--db-muted);
  border-radius: var(--db-radius, 12px);
  padding: 16px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.alert-feed-card:hover {
  background: var(--db-bg-elevated, #0f1422);
}
.alert-feed-card--unread {
  background: var(--db-card, #111827);
}
.alert-feed-card--read {
  background: var(--db-bg-elevated, #0f1422);
  opacity: .85;
}

/* Severity Borders */
.alert-feed-card--critical { border-left-color: var(--db-red, #ef4444); }
.alert-feed-card--high     { border-left-color: var(--db-amber, #fbbf24); }
.alert-feed-card--medium   { border-left-color: var(--db-blue, #60a5fa); }
.alert-feed-card--low      { border-left-color: var(--db-green, #34d399); }

/* Card Header */
.alert-feed-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.alert-feed-card__severity {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.alert-feed-card__severity--critical {
  background: rgba(239,68,68,.15);
  color: var(--db-red, #ef4444);
}
.alert-feed-card__severity--high {
  background: rgba(251,191,36,.15);
  color: var(--db-amber, #fbbf24);
}
.alert-feed-card__severity--medium {
  background: rgba(96,165,250,.15);
  color: var(--db-blue, #60a5fa);
}
.alert-feed-card__severity--low {
  background: rgba(52,211,153,.15);
  color: var(--db-green, #34d399);
}
.alert-feed-card__time {
  font-size: .64rem;
  color: var(--db-muted);
}

/* Card Body */
.alert-feed-card__title {
  font-size: .8rem;
  font-weight: 600;
  color: var(--db-heading);
  margin-bottom: 4px;
  line-height: 1.3;
}
.alert-feed-card__summary {
  font-size: .72rem;
  color: var(--db-text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card Footer */
.alert-feed-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--db-border);
}
.alert-feed-card__zone {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .62rem;
  color: var(--db-muted);
  background: var(--db-surface);
  padding: 3px 8px;
  border-radius: 12px;
}
.alert-feed-card__actions {
  display: flex;
  gap: 8px;
}
.alert-feed-card__action {
  font-size: .62rem;
  color: var(--db-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  transition: color 150ms;
}
.alert-feed-card__action:hover {
  color: var(--db-gold);
}

/* Expanded state */
.alert-feed-card__detail {
  display: none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--db-border);
  font-size: .7rem;
  color: var(--db-text);
  line-height: 1.5;
}
.alert-feed-card.is-expanded .alert-feed-card__summary {
  -webkit-line-clamp: unset;
}
.alert-feed-card.is-expanded .alert-feed-card__detail {
  display: block;
}
.alert-feed-card__detail-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}
.alert-feed-card__detail-label {
  color: var(--db-muted);
  font-weight: 500;
}
.alert-feed-card__detail-value {
  color: var(--db-heading);
  text-align: right;
}

/* Empty State */
.alert-feed-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  color: var(--db-muted);
}
.alert-feed-empty svg {
  opacity: .4;
  margin-bottom: 12px;
}
.alert-feed-empty__title {
  font-size: .82rem;
  font-weight: 600;
  color: var(--db-heading);
  margin-bottom: 8px;
}
.alert-feed-empty__text {
  font-size: .72rem;
  line-height: 1.5;
  max-width: 300px;
  margin-bottom: 16px;
}

/* Load More */
.alert-feed-loadmore {
  width: calc(100% - 32px);
  margin: 4px 16px 16px;
}

/* New alerts banner */
.alert-feed-new-banner {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(212,168,67,.12);
  border: 1px solid var(--db-gold);
  border-radius: var(--db-radius-sm, 8px);
  margin-bottom: 12px;
  font-size: .72rem;
  color: var(--db-gold);
  cursor: pointer;
}
.alert-feed-new-banner__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--db-gold);
  animation: pulse-dot 2s infinite;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MY SETTINGS TAB, Section Jump Nav
   ═══════════════════════════════════════════════════════════════════════════ */

.section-jump-nav {
  display: flex;
  gap: 4px;
  padding: 10px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--db-border);
  background: var(--db-bg-elevated, #0f1422);
  position: sticky;
  top: 0;
  z-index: 8;
}
.section-jump-nav::-webkit-scrollbar { display: none; }
.section-jump-pill {
  flex-shrink: 0;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  border: none;
  background: transparent;
  color: var(--db-muted);
  font-size: .66rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 200ms ease;
  white-space: nowrap;
  position: relative;
}
.section-jump-pill:hover {
  color: var(--db-heading);
}
.section-jump-pill.is-active {
  color: var(--db-heading);
}
.section-jump-pill.is-active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: var(--db-gold);
  border-radius: 1px;
}

/* Settings sections, remove accordion collapse, show as visible cards */
#panel-my-settings .stg-section {
  margin: 0 16px 16px;
}
#panel-my-settings .stg-section:first-of-type {
  margin-top: 16px;
}
#panel-my-settings .stg-section__header {
  cursor: default;
  pointer-events: none;
}
#panel-my-settings .stg-section__chevron {
  display: none;
}
#panel-my-settings .stg-section__body {
  display: block !important;
}
#panel-my-settings .stg-section__body[hidden] {
  display: block !important;
}

/* Toast notification system */
.db-toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}
.db-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  max-width: 340px;
  padding: 10px 16px;
  background: var(--db-card, #111827);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius, 12px);
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
  font-size: .72rem;
  color: var(--db-text);
  pointer-events: auto;
  animation: toast-in 200ms ease-out forwards;
}
.db-toast--success .db-toast__icon { color: var(--db-green, #34d399); }
.db-toast--error .db-toast__icon { color: var(--db-red, #ef4444); }
.db-toast--warning .db-toast__icon { color: var(--db-amber, #fbbf24); }
.db-toast__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.db-toast.is-exiting {
  animation: toast-out 300ms ease forwards;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(10px); }
}

/* Mobile responsive tweaks for new tabs */
@media (max-width: 768px) {
  .alert-feed-status {
    padding: 10px 12px;
  }
  .alert-filter-bar {
    padding: 10px 12px;
  }
  .alert-feed-scroll {
    padding: 10px 12px;
  }
  .section-jump-nav {
    padding: 8px 12px;
  }
  #panel-my-settings .stg-section {
    margin: 0 12px 12px;
  }
}

/* === Sidebar revamp 2026-05-05: multi-call transcript stack === */
.idp__transcript-call {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; border-bottom: 1px solid var(--db-border);
}
.idp__transcript-call:last-child { border-bottom: none; }
.idp__transcript-meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: .68rem;
}
.idp__transcript-time {
  color: var(--db-text-muted); font-weight: 600;
}
.idp__transcript-tg {
  background: rgba(120, 144, 168, 0.12);
  color: var(--db-text); padding: 2px 8px;
  border-radius: 999px; font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: .64rem; letter-spacing: 0.5px;
}
.idp__transcript-conf {
  padding: 2px 8px; border-radius: 999px;
  font-size: .64rem; font-weight: 600;
}
.idp__transcript-conf--high {
  background: rgba(34, 197, 94, 0.15); color: rgb(34, 197, 94);
}
.idp__transcript-conf--med {
  background: rgba(234, 179, 8, 0.15); color: rgb(234, 179, 8);
}
.idp__transcript-text {
  font-size: .78rem; color: var(--db-text); line-height: 1.55;
  word-break: break-word;
}
.idp__transcript-empty {
  font-size: .72rem; color: var(--db-text-muted); font-style: italic;
  padding: 8px 12px;
}
/* Adjust container when stacked: reset the monospace + scroll constraints. */
.idp__transcript:has(.idp__transcript-call) {
  font-family: inherit; font-size: .78rem;
  white-space: normal; padding: 0;
  max-height: 320px;
}
/* Related card: thread position pill */
.idp__related-pos {
  display: inline-block;
  background: rgba(59, 130, 246, 0.15); color: rgb(96, 165, 250);
  padding: 1px 6px; border-radius: 4px;
  font-size: .62rem; font-weight: 700;
  margin-right: 6px; vertical-align: middle;
}