@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Orbitron:wght@500;700;800&display=swap");

:root {
  --bg-deep: #050714;
  --bg-mid: #070b1f;
  --blue: #3ea6ff;
  --blue-soft: #8fd0ff;
  --purple: #9b5cff;
  --purple-soft: #c39bff;
  --magenta: #ff5cb8;
  --ok: #34e7a8;
  --warn: #ffb547;
  --danger: #ff5c7a;
  --text: #eef2ff;
  --muted: #93a0c9;
  --muted-2: #5c6794;
  --glass: rgba(20, 26, 56, 0.46);
  --glass-strong: rgba(28, 36, 74, 0.62);
  --border: rgba(140, 170, 255, 0.16);
  --border-strong: rgba(160, 190, 255, 0.32);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --glow-blue: 0 0 40px -6px rgba(62, 166, 255, 0.55);
  --glow-purple: 0 0 40px -6px rgba(155, 92, 255, 0.55);
}

* { box-sizing: border-box; }

html, body.dash-page {
  margin: 0;
  height: 100%;
  background: radial-gradient(ellipse at 30% 0%, var(--bg-mid), var(--bg-deep) 65%);
  color: var(--text);
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
}

/* ================= Background fx ================= */
#particles {
  position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%;
}

.aurora-dash {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.aurora-dash span {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5;
  animation: drift-dash 28s ease-in-out infinite alternate;
}
.aurora-dash span:nth-child(1) { width: 560px; height: 560px; background: var(--blue); top: -180px; left: -140px; }
.aurora-dash span:nth-child(2) { width: 480px; height: 480px; background: var(--purple); bottom: -200px; right: -120px; animation-delay: -8s; }
.aurora-dash span:nth-child(3) { width: 360px; height: 360px; background: var(--magenta); top: 45%; left: 55%; opacity: 0.28; animation-delay: -16s; }
@keyframes drift-dash { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(60px,-40px) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .aurora-dash span { animation: none; } }
/* Stop the dashboard's continuous decorative motion when reduced-motion is set */
@media (prefers-reduced-motion: reduce) {
  .brand-mark, .status-ring, .scan-line, .live-dot.on,
  .orb, .orb::before, .orb.listening, .orb.thinking, .orb.speaking,
  .state-badge .state-dot, .mic-btn.listening .mic-pulse {
    animation: none !important;
  }
}

/* ================= Glass system ================= */
.glass {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 24px 70px -30px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.glass:hover { border-color: var(--border-strong); }
.panel { position: relative; padding: 16px 18px; }

/* ================= Layout shell ================= */
.dash {
  position: relative; z-index: 1;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  padding: 14px; gap: 12px;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; flex: 0 0 auto;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  font-size: 26px; color: var(--blue-soft);
  filter: drop-shadow(0 0 10px var(--blue));
  animation: pulse-mark 3s ease-in-out infinite;
}
@keyframes pulse-mark { 0%,100% { opacity: .75; } 50% { opacity: 1; } }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: "Orbitron", sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .08em;
  background: linear-gradient(120deg, var(--blue-soft), var(--purple-soft));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-sub { font-size: 11px; color: var(--muted); letter-spacing: .04em; }

.topbar-mid { display: flex; align-items: center; gap: 14px; }
.conn-pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--glass-strong); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 6px 14px; font-size: 12px; color: var(--muted);
}
.conn-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); transition: background .3s; }
.conn-pill.online .dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.conn-pill.offline .dot { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.clock {
  font-family: "Orbitron", sans-serif; font-size: 13px; color: var(--blue-soft); letter-spacing: .05em;
  min-width: 86px; text-align: center;
}

.topbar-actions { display: flex; gap: 8px; }
.ghost-btn, .chip-btn, .primary-btn, .icon-btn {
  font-family: inherit; cursor: pointer; border: 1px solid var(--border);
  background: var(--glass-strong); color: var(--text);
  border-radius: var(--r-pill); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ghost-btn { padding: 8px 12px; font-size: 13px; }
.ghost-btn:hover, .chip-btn:hover { transform: translateY(-1px); border-color: var(--border-strong); box-shadow: var(--glow-blue); }
/* Keyboard focus indicator (no visible affordance existed before) */
.dash-page :is(a, button, textarea, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--blue-soft);
  outline-offset: 2px;
}
.ghost-btn.admin-active { border-color: var(--ok); color: var(--ok); box-shadow: 0 0 8px rgba(52,231,168,.4); }
.primary-btn {
  border: none; background: linear-gradient(120deg, var(--blue), var(--purple));
  color: #08101f; font-weight: 700; padding: 10px 20px;
}
.primary-btn:hover { transform: translateY(-1px); box-shadow: var(--glow-purple); }

/* ================= Main grid ================= */
.main-grid {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 300px;
  grid-template-areas: "left center right";
  gap: 12px;
}
.col { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden; }
.col-left { grid-area: left; }
.col-center { grid-area: center; }
.col-right { grid-area: right; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
.col-right::-webkit-scrollbar { width: 6px; }
.col-right::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

/* ---- Left: camera ---- */
.cam-panel { display: flex; flex-direction: column; gap: 10px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.panel-title {
  font-family: "Orbitron", sans-serif; font-size: 11px; letter-spacing: .1em; color: var(--muted);
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
.live-dot.on { background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: blink-dot 2s infinite; }
@keyframes blink-dot { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

.cam-stage {
  position: relative; aspect-ratio: 4/3; border-radius: var(--r-md); overflow: hidden;
  background: #060a18; border: 1px solid var(--border);
}
.cam-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: var(--muted-2); font-size: 12px;
}
.cam-empty-icon { font-size: 28px; opacity: .5; }
.cam-stage video[hidden] { display: none; }
.cam-stage.live .cam-empty { display: none; }
.live-badge {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  font-size: 10px; letter-spacing: .04em; color: var(--ok);
  background: rgba(5,10,20,0.55); border: 1px solid rgba(52,231,168,.4);
  border-radius: var(--r-pill); padding: 3px 8px;
  text-shadow: 0 0 6px var(--ok);
}
.scan-line {
  position: absolute; left: 0; right: 0; height: 2px; top: 0;
  background: linear-gradient(90deg, transparent, var(--blue-soft), transparent);
  opacity: .6; animation: scan 3.2s linear infinite;
}
@keyframes scan { 0% { top: 0; } 100% { top: 100%; } }

.visitor-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
/* author display:flex beats UA [hidden]; restore hiding when toggled via JS */
.visitor-row[hidden] { display: none; }
.visitor-name { font-weight: 600; color: var(--blue-soft); }
.visitor-tag {
  font-size: 10px; padding: 2px 8px; border-radius: var(--r-pill); background: rgba(52, 231, 168, 0.15);
  color: var(--ok); letter-spacing: .04em;
}
.cam-actions { display: flex; }
.chip-btn { padding: 6px 12px; font-size: 12px; background: transparent; }

.consent-panel { font-size: 13px; line-height: 1.5; color: var(--muted); display: flex; flex-direction: column; gap: 12px; }
/* author display:flex beats UA [hidden]; keep the consent panel hidden until shown */
.consent-panel[hidden] { display: none; }
.consent-actions { display: flex; gap: 10px; }

/* ---- Center: avatar stage ---- */
.stage-panel { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; padding-bottom: 6px; }
.avatar-stage {
  position: relative; width: clamp(120px, 16vh, 180px); height: clamp(120px, 16vh, 180px);
  margin-top: 4px; display: flex; align-items: center; justify-content: center;
}
.status-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--border); opacity: .6;
}
.ring-1 { animation: spin-slow 14s linear infinite; border-style: dashed; border-color: rgba(62,166,255,.35); }
.ring-2 { inset: -14px; animation: spin-slow 20s linear infinite reverse; border-color: rgba(155,92,255,.3); }
.ring-3 { inset: -28px; border-style: dotted; border-color: rgba(255,92,184,.22); animation: spin-slow 30s linear infinite; }
@keyframes spin-slow { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.avatar3d { position: absolute; inset: 10px; border-radius: 50%; overflow: hidden; display: none; }
.avatar3d.ready { display: block; }
.avatar3d canvas { border-radius: 50%; }

.orb {
  width: 72%; height: 72%; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #cdeaff, var(--blue) 45%, #1c2c66 100%);
  box-shadow: 0 0 60px rgba(62,166,255,.55), inset 0 0 30px rgba(255,255,255,.18);
  transition: transform .25s ease, box-shadow .3s ease;
  position: relative; z-index: 1;
}
.orb.hidden { display: none; }
.orb::before {
  content: ""; position: absolute; inset: -16px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, var(--blue), var(--purple), var(--magenta), var(--blue));
  filter: blur(14px); opacity: .55; animation: spin-slow 8s linear infinite;
}
.orb.listening { box-shadow: 0 0 80px rgba(255,181,71,.6), inset 0 0 30px rgba(255,255,255,.2); animation: breathe .9s ease-in-out infinite; }
.orb.thinking { animation: breathe 1.3s ease-in-out infinite; }
.orb.thinking::before { animation-duration: 2.4s; }
.orb.speaking { animation: speak-pulse .5s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes speak-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }

.state-badge {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  background: var(--glass-strong); border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  padding: 5px 14px; font-family: "Orbitron", sans-serif; font-size: 10px; letter-spacing: .1em;
  white-space: nowrap;
}
.state-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); }
.state-badge.idle .state-dot { background: var(--muted-2); }
.state-badge.listening .state-dot { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.state-badge.thinking .state-dot { background: var(--purple-soft); box-shadow: 0 0 8px var(--purple); animation: blink-dot 1s infinite; }
.state-badge.speaking .state-dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); }

.avatar-meta { display: flex; flex-direction: column; align-items: center; margin-top: 8px; }
.avatar-name {
  font-family: "Orbitron", sans-serif; font-weight: 600; font-size: 15px;
  background: linear-gradient(120deg, var(--blue-soft), var(--purple-soft));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.avatar-role { font-size: 11px; color: var(--muted); letter-spacing: .03em; }

.waveform { width: 100%; height: 36px; margin-top: 8px; }

/* ---- Chat panel ---- */
.chat-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.chat-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.chat-scroll::-webkit-scrollbar { width: 6px; }
.chat-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

.bubble {
  padding: 11px 15px; border-radius: var(--r-md); font-size: 14.5px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word; animation: pop-in .25s ease both;
}
@keyframes pop-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.bubble.user {
  align-self: flex-end; max-width: 72%;
  background: linear-gradient(135deg, var(--blue), var(--purple)); color: #07101f; font-weight: 500;
}
.bubble.bot {
  align-self: flex-start; max-width: 94%;
  background: var(--glass-strong); border: 1px solid var(--border);
  border-left: 2.5px solid var(--blue-soft);
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
}
.bubble.bot .bubble-head {
  display: block; font-family: "Orbitron", sans-serif; font-size: 10px; letter-spacing: .08em;
  color: var(--blue-soft); margin-bottom: 5px; opacity: .85; text-transform: uppercase;
}
.bubble.bot .bubble-body { display: block; }

/* Per-answer thumbs up/down rating */
.rating-row { display: flex; gap: 6px; margin-top: 8px; }
.rating-btn {
  background: transparent; border: 1px solid var(--border); border-radius: var(--r-pill);
  cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 9px; color: var(--text);
  opacity: .65; transition: opacity .15s, border-color .15s, background .15s;
}
.rating-btn:hover { opacity: 1; border-color: var(--border-strong); }
.rating-btn.selected { opacity: 1; border-color: var(--ok); background: rgba(52,231,168,.16); }
.rating-row.rated .rating-btn:not(.selected) { opacity: .3; pointer-events: none; }

.quick { display: flex; gap: 8px; flex-wrap: wrap; }
.quick button {
  font-family: inherit; font-size: 12px; cursor: pointer; border: 1px solid var(--border);
  background: var(--glass-strong); color: var(--muted); padding: 7px 12px; border-radius: var(--r-pill);
  transition: all .15s ease;
}
.quick button:hover { color: var(--text); border-color: var(--border-strong); box-shadow: var(--glow-blue); }
/* Follow-up ("next probable") question chips — even more compact + capped width */
.quick.compact button { font-size: 11.5px; padding: 5px 10px; max-width: 100%; }

.composer {
  display: flex; align-items: center; gap: 8px;
  background: var(--glass-strong); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 6px 8px 6px 14px;
}
.composer textarea {
  flex: 1; resize: none; border: none; background: transparent; color: var(--text);
  font-family: inherit; font-size: 14px; line-height: 1.4; max-height: 90px; min-height: 22px;
  padding: 8px 4px; outline: none;
}
.composer textarea::placeholder { color: var(--muted-2); }
.icon-btn {
  width: 40px; height: 40px; flex: 0 0 auto; font-size: 16px; background: transparent;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.icon-btn:hover { border-color: var(--border-strong); }
.icon-btn.armed { border-color: var(--ok); color: var(--ok); box-shadow: 0 0 12px rgba(52,231,168,.4); }
.mic-btn.listening { border-color: var(--warn); box-shadow: 0 0 14px rgba(255,181,71,.5); }
.mic-pulse {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--warn); opacity: 0;
}
.mic-btn.listening .mic-pulse { animation: mic-ripple 1.2s ease-out infinite; }
@keyframes mic-ripple { 0% { opacity: .8; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.8); } }
.speaker-status { font-size: 16px; opacity: .5; transition: opacity .2s; }
.speaker-status.active { opacity: 1; filter: drop-shadow(0 0 6px var(--ok)); }
.send-btn { padding: 9px 18px; font-size: 13px; }

/* ---- Right: status / retrieval / analytics ---- */
.status-card { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
.badge-ok { color: var(--ok); font-size: 10px; filter: drop-shadow(0 0 4px var(--ok)); }
.badge-ok.warn { color: var(--warn); filter: drop-shadow(0 0 4px var(--warn)); }
.badge-ok.off { color: var(--muted-2); filter: none; }
.kv { display: flex; align-items: baseline; justify-content: space-between; font-size: 12.5px; gap: 10px; }
.kv span { color: var(--muted); }
.kv b { color: var(--text); font-weight: 600; text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.latency-panel { flex: 0 0 auto; }
.latency-rows { display: flex; flex-direction: column; gap: 7px; }
.latency-row { display: grid; grid-template-columns: 52px 1fr 46px; align-items: center; gap: 8px; font-size: 11.5px; }
.latency-label { color: var(--muted); }
.latency-track { height: 6px; border-radius: var(--r-pill); background: rgba(255,255,255,0.06); overflow: hidden; }
.latency-fill { height: 100%; width: 0%; border-radius: var(--r-pill); transition: width .4s ease; }
.fill-stt { background: linear-gradient(90deg, #ffb547, #ff8fd0); }
.fill-retrieval { background: linear-gradient(90deg, var(--purple), var(--magenta)); }
.fill-llm { background: linear-gradient(90deg, var(--blue), var(--purple)); }
.fill-tools { background: linear-gradient(90deg, #34e7a8, var(--blue)); }
.fill-tts { background: linear-gradient(90deg, var(--magenta), #ffb547); }
.latency-ms { color: var(--text); font-weight: 600; text-align: right; font-family: "Orbitron", sans-serif; font-size: 10.5px; }
.latency-row.stale .latency-fill { opacity: .25; }
.latency-row.stale .latency-ms { color: var(--muted-2); }

.retrieval-panel { flex: 0 0 auto; }
.retrieval-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }
.retrieval-empty { font-size: 12px; color: var(--muted-2); padding: 8px 0; }
.retrieval-item {
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px;
  background: rgba(255,255,255,0.02); animation: pop-in .25s ease both;
}
.retrieval-item-head { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.retrieval-item-head b { color: var(--blue-soft); font-weight: 600; }
.confidence-bar { height: 5px; border-radius: var(--r-pill); background: rgba(255,255,255,0.07); overflow: hidden; }
.confidence-fill { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--purple), var(--blue)); transition: width .4s ease; }

.analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.analytics-card { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; }
.an-label { font-family: "Orbitron", sans-serif; font-size: 9.5px; letter-spacing: .08em; color: var(--muted-2); }
.an-value { font-family: "Orbitron", sans-serif; font-size: 22px; font-weight: 700; color: var(--blue-soft); text-shadow: 0 0 16px rgba(62,166,255,.4); }
.an-sub { font-size: 10px; color: var(--muted-2); }

/* ================= Responsive ================= */
@media (max-width: 1180px) {
  .main-grid { grid-template-columns: 220px minmax(0,1fr) 280px; }
}

/* Tablet: drop to 2 columns, status/retrieval/analytics become a horizontal-scroll bottom strip */
@media (max-width: 980px) {
  .main-grid {
    grid-template-columns: 200px minmax(0,1fr);
    grid-template-areas: "left center" "right right";
  }
  .col-right {
    flex-direction: row; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px;
    max-height: 220px;
  }
  .col-right > * { flex: 0 0 260px; }
  .retrieval-panel, .analytics-grid { flex: 0 0 320px; }
  .analytics-grid { grid-template-columns: 1fr 1fr; display: grid; }
}

/* Phone / portrait kiosk: single column stack, camera collapses to a strip */
@media (max-width: 680px) {
  .dash { padding: 8px; gap: 8px; }
  /* Wrap the topbar so the Kiosk / My Panel nav links stay reachable instead
     of overflowing off the right edge on a phone. */
  .topbar { padding: 8px 12px; flex-wrap: wrap; height: auto; row-gap: 6px; }
  .topbar-actions { flex-wrap: wrap; }
  .brand-sub, .clock { display: none; }
  .main-grid {
    display: flex; flex-direction: column; overflow-y: auto; gap: 10px;
  }
  .col-left { flex-direction: row; }
  .cam-panel { flex: 0 0 130px; }
  .cam-stage { aspect-ratio: 1; }
  .visitor-row, .cam-actions { display: none; }
  .col-right { flex-direction: column; overflow: visible; max-height: none; }
  .col-right > * { flex: 0 0 auto; }
  .avatar-stage { width: 130px; height: 130px; margin-top: 0; }
  .stage-panel { padding-bottom: 6px; }
  .chat-panel { min-height: 280px; }
  .retrieval-list { max-height: 160px; }
}

@media (max-width: 460px) {
  #resetBtn, #adminTokenBtn { display: none; }
  .quick { display: none; }
}

/* ====================================================================
   Developer Analytics view (Live ↔ Analytics toggle)
   ==================================================================== */

/* View toggle in the topbar */
.view-toggle { display: flex; gap: 2px; background: var(--glass-strong); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px; }
.view-tab { background: transparent; border: none; color: var(--muted); font-family: inherit; font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: var(--r-pill); cursor: pointer; transition: color .2s, background .2s; }
.view-tab.active { background: linear-gradient(120deg, var(--blue), var(--purple)); color: #fff; box-shadow: 0 4px 14px -4px var(--purple); }
.view-tab:hover:not(.active) { color: var(--text); }

/* These two share the flex:1 slot in .dash; only one is visible. Explicit
   [hidden] rules are required because .main-grid sets display:grid, which would
   otherwise win over the [hidden] attribute. */
.main-grid[hidden] { display: none !important; }
.analytics-view { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 4px; scrollbar-width: thin; }
.analytics-view[hidden] { display: none !important; }
.analytics-view::-webkit-scrollbar { width: 7px; }
.analytics-view::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

/* Toolbar + range selector */
.an-toolbar { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.an-toolbar-title { font-family: "Orbitron", sans-serif; font-size: 12px; letter-spacing: .12em; color: var(--blue-soft); }
.an-updated { margin-left: auto; font-size: 11px; color: var(--muted-2); }
.range-toggle { display: flex; gap: 2px; background: var(--glass-strong); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px; }
.range-btn { background: transparent; border: none; color: var(--muted); font-family: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 12px; border-radius: var(--r-pill); cursor: pointer; transition: color .2s, background .2s; }
.range-btn.active { background: var(--blue); color: #04101f; }
.range-btn:hover:not(.active) { color: var(--text); }

/* KPI strip */
.kpi-strip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; flex: 0 0 auto; }
.kpi { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; }
.kpi-label { font-family: "Orbitron", sans-serif; font-size: 9px; letter-spacing: .07em; color: var(--muted-2); }
.kpi-value { font-family: "Orbitron", sans-serif; font-size: 23px; font-weight: 700; color: var(--blue-soft); text-shadow: 0 0 16px rgba(62,166,255,.35); line-height: 1.1; }
.kpi-sub { font-size: 10px; color: var(--muted); }
.kpi.warn .kpi-value { color: var(--warn); text-shadow: 0 0 16px rgba(255,181,71,.3); }
.kpi.danger .kpi-value { color: var(--danger); text-shadow: 0 0 16px rgba(255,92,122,.3); }
.kpi.good .kpi-value { color: var(--ok); text-shadow: 0 0 16px rgba(52,231,168,.3); }

/* Rows */
.an-row { display: grid; gap: 12px; flex: 0 0 auto; }
.an-row-2 { grid-template-columns: 1fr 1fr; }
.an-row-3 { grid-template-columns: 1fr 1fr 1fr; }

/* Charts */
.chart-panel { display: flex; flex-direction: column; }
.chart-wrap { position: relative; height: 200px; margin-top: 6px; }

/* Horizontal bars (outcomes / stage latency) */
.bars { display: flex; flex-direction: column; gap: 9px; padding-top: 6px; }
.bar-row { display: grid; grid-template-columns: 92px 1fr 56px; align-items: center; gap: 8px; font-size: 11.5px; }
.bar-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 8px; border-radius: var(--r-pill); background: rgba(255,255,255,0.06); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--r-pill); width: 0%; transition: width .5s ease; }
.bar-val { text-align: right; font-family: "Orbitron", sans-serif; font-size: 10.5px; color: var(--text); }
.fill-grounded { background: linear-gradient(90deg, var(--ok), #6fffd0); }
.fill-tool_answered { background: linear-gradient(90deg, var(--blue), var(--blue-soft)); }
.fill-escalated { background: linear-gradient(90deg, var(--warn), #ffd591); }
.fill-ungrounded { background: linear-gradient(90deg, var(--danger), #ff9aae); }
.fill-error { background: linear-gradient(90deg, #ff3b5c, #ff7a90); }
.fill-stage { background: linear-gradient(90deg, var(--purple), var(--blue)); }

/* Tables */
.table-wrap { overflow-x: auto; margin-top: 4px; }
.an-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.an-table th { text-align: left; font-weight: 600; color: var(--muted-2); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.an-table td { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--muted); white-space: nowrap; }
.an-table td.strong, .an-table td:first-child { color: var(--text); }
.an-table tr:last-child td { border-bottom: none; }
.trace-table .trace-q { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.mono { font-family: "Orbitron", sans-serif; font-size: 10.5px; }
.pill { display: inline-block; padding: 1px 8px; border-radius: var(--r-pill); font-size: 10px; font-weight: 600; }
.pill.grounded { background: rgba(52,231,168,0.14); color: var(--ok); }
.pill.tool_answered { background: rgba(62,166,255,0.14); color: var(--blue-soft); }
.pill.escalated { background: rgba(255,181,71,0.16); color: var(--warn); }
.pill.ungrounded { background: rgba(255,92,122,0.14); color: var(--danger); }
.pill.error { background: rgba(255,92,122,0.22); color: #ffb0bf; }

/* Lists (top questions / gaps / errors) */
.an-list { display: flex; flex-direction: column; gap: 7px; max-height: 240px; overflow-y: auto; padding-top: 4px; }
.an-list-item { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.an-list-item .ali-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); flex: 1; min-width: 0; }
.an-list-item .ali-tag { flex: none; color: var(--muted-2); font-family: "Orbitron", sans-serif; font-size: 10px; }
.cost-note { font-size: 10px; color: var(--muted-2); margin-top: 8px; line-height: 1.4; }

/* Analytics view responsiveness */
@media (max-width: 1180px) { .kpi-strip { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 980px) { .an-row-2, .an-row-3 { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } .view-tab { padding: 5px 9px; } }