:root {
  --bg: #020604;
  --panel: rgba(4, 16, 10, 0.72);
  --panel-line: rgba(34, 197, 94, 0.18);
  --text: #d2f5df;
  --muted: #5f8a72;
  --cyan: #2bff88;
  --amber: #fbbf24;
  --red: #f87171;
  --green: #34d399;
  --accent: var(--cyan);
  --level: 0;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --hud: "Rajdhani", "JetBrains Mono", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: radial-gradient(ellipse at 50% 45%, #04140b 0%, var(--bg) 70%);
  color: var(--text);
  font: 13px/1.5 var(--mono);
}
body[data-state="listening"] { --accent: var(--cyan); }
body.auth-gated { overflow: hidden; }
body.auth-gated > :not(#auth-gate) { visibility: hidden; pointer-events: none; }
#auth-gate { display: none; }
body.auth-gated #auth-gate { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; gap: 12px; padding: 24px; text-align: center; color: var(--text, #d7ffe5); background: #061b13; }
#auth-gate h1, #auth-gate p { margin: 0; }
#auth-gate h1 { font: 600 clamp(24px, 5vw, 42px) var(--mono); }
#auth-gate p { color: var(--muted, #86b89a); }
#auth-gate .auth-gate-kicker { color: var(--cyan, #4fffc5); letter-spacing: .2em; font: 600 12px var(--mono); }
#auth-gate .icon-btn { justify-self: center; margin-top: 8px; color: #86efac; text-decoration: none; }
body[data-state="thinking"] { --accent: var(--amber); }
body[data-state="speaking"] { --accent: #b8ffd6; }
body[data-state="error"] { --accent: var(--red); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
kbd { font: 600 11px var(--mono); border: 1px solid var(--panel-line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: var(--text); }

/* ---------- canvas + atmosphere ---------- */
#graph { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; cursor: grab; touch-action: none; }
#graph.dragging { cursor: grabbing; }
#graph.hovering { cursor: pointer; }
.fx-grid, .fx-vignette, .fx-scan { position: fixed; inset: 0; pointer-events: none; }
.fx-grid {
  background-image:
    linear-gradient(rgba(34, 197, 94, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 197, 94, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  z-index: -1;
}
.fx-vignette { background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.65) 100%); }
.fx-scan {
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* ---------- top bar ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px;
  background: linear-gradient(180deg, rgba(2, 6, 4, 0.9), transparent);
}
.brand { display: flex; align-items: center; gap: 10px; font: 700 18px/1 var(--hud); letter-spacing: 0.22em; }
.brand-mark {
  width: 18px; height: 18px; border: 2px solid var(--cyan); border-radius: 50%;
  box-shadow: 0 0 12px var(--cyan), inset 0 0 6px var(--cyan); position: relative;
}
.brand-mark::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--cyan); }
.brand-sep { color: var(--muted); }
.brand-sub { color: var(--cyan); font-weight: 500; }
.topbar-controls { display: flex; align-items: center; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border: 1px solid var(--panel-line); border-radius: 999px; background: var(--panel);
  font-size: 11px; letter-spacing: 0.08em; color: var(--muted);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.chip.ok .dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
.chip.ok { color: var(--text); }
.chip.down .dot { background: var(--red); box-shadow: 0 0 8px var(--red); }
.chip.down { color: var(--red); }
.seg { display: inline-flex; border: 1px solid var(--panel-line); border-radius: 6px; overflow: hidden; background: var(--panel); }
.seg button { background: none; border: 0; padding: 5px 10px; font-size: 11px; letter-spacing: 0.1em; color: var(--muted); }
.seg button[aria-checked="true"] { color: #02140a; background: var(--cyan); font-weight: 600; }
.seg button[data-mode="demo"][aria-checked="true"] { background: var(--amber); }
.icon-btn {
  display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--panel-line); border-radius: 6px; background: var(--panel);
}
.icon-btn svg { width: 16px; height: 16px; fill: var(--text); }
#mute .ico-off { display: none; }
#mute[aria-pressed="true"] .ico-on { display: none; }
#mute[aria-pressed="true"] .ico-off { display: inline; }
#mute[aria-pressed="true"] svg { fill: var(--red); }
.clock { font-size: 12px; color: var(--muted); letter-spacing: 0.08em; min-width: 64px; text-align: right; }

/* ---------- panels ---------- */
.panel {
  position: fixed; top: 64px; z-index: 4; width: 300px; max-height: calc(100vh - 260px);
  overflow: auto; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 10px;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 20px 50px rgba(0, 0, 0, 0.4);
}
.panel::before {
  content: ""; position: absolute; top: -1px; left: 16px; width: 48px; height: 2px;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
}
.panel-left { left: 20px; }
.panel-right { right: 20px; }
.panel h2, .panel h3 {
  margin: 0 0 8px; font: 600 12px/1 var(--hud); letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
}
.panel h3 { margin-top: 16px; }
.panel-sec + .panel-sec { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--panel-line); }

.log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow: auto; }
.log li { display: grid; grid-template-columns: auto auto 1fr; gap: 6px; font-size: 11.5px; align-items: baseline; animation: fade-in 0.3s ease; }
.log time { color: #3d5a48; }
.log .tag { font-weight: 600; letter-spacing: 0.06em; }
.log .tag.you { color: var(--text); }
.log .tag.jarvis { color: var(--cyan); }
.log .tag.sys { color: var(--muted); }
.log .tag.err { color: var(--red); }
.log .tag.ok { color: var(--green); }

.legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: 11.5px; }
.legend li { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.legend li.has { color: var(--text); }
.legend i { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 8px currentColor; }
.legend b { margin-left: auto; font-weight: 600; }
.warnings { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.warnings li {
  font-size: 11px; padding: 6px 8px; border-left: 2px solid var(--amber);
  background: rgba(251, 191, 36, 0.07); color: #f6dfa0;
}

/* ---------- inspector ---------- */
.panel-right { animation: slide-in 0.25s ease; }
.close { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; font-size: 12px; }
.insp-head { display: flex; flex-direction: column; gap: 6px; padding-right: 30px; }
.insp-type { font: 600 11px var(--hud); letter-spacing: 0.24em; text-transform: uppercase; }
.insp-head h2 { margin: 0; font: 600 18px/1.2 var(--mono); letter-spacing: 0; text-transform: none; color: var(--text); word-break: break-word; }
.badge { align-self: flex-start; font-size: 10px; letter-spacing: 0.12em; padding: 2px 7px; border-radius: 4px; font-weight: 600; }
.badge.demo { background: var(--amber); color: #1a1200; }
.badge.public { background: var(--cyan); color: #02140a; }
.insp-fields { margin: 14px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 12px; }
.insp-fields dt { color: var(--muted); }
.insp-fields dd { margin: 0; word-break: break-word; }
.insp-fields a, .insp-sources a { color: var(--cyan); }
.insp-links, .insp-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.insp-links button {
  width: 100%; display: flex; align-items: center; gap: 8px; text-align: left;
  background: rgba(255, 255, 255, 0.02); border: 1px solid transparent; border-radius: 6px; padding: 5px 8px;
}
.insp-links button:hover { border-color: var(--panel-line); }
.insp-links i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.insp-links small { color: var(--muted); margin-left: auto; font-size: 10.5px; }
.insp-sources li { padding: 6px 8px; border: 1px solid var(--panel-line); border-radius: 6px; }
.insp-sources small { display: block; color: var(--muted); font-size: 10.5px; }

/* ---------- hero ---------- */
.hero {
  position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 2;
  text-align: center; pointer-events: none; width: min(720px, 90vw); transition: opacity 0.5s ease;
}
.hero.gone { opacity: 0; }
.kicker { margin: 0 0 12px; font: 600 12px var(--hud); letter-spacing: 0.4em; color: var(--cyan); }
.hero h1 { margin: 0; font: 600 clamp(26px, 4vw, 44px)/1.15 var(--hud); letter-spacing: 0.04em; color: #e6fff0; text-shadow: 0 0 24px rgba(43, 255, 136, 0.35); }
.hero h1 em { font-style: normal; color: var(--cyan); }
.hint { margin: 14px 0 0; color: var(--muted); }

/* ---------- dock ---------- */
.dock {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5;
  width: min(720px, calc(100vw - 32px)); display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.transcript {
  margin: 0; min-height: 22px; max-width: 100%; text-align: center; font-size: 15px; color: #e6fff0;
  text-shadow: 0 0 10px rgba(43, 255, 136, 0.4);
}
.transcript.interim { color: var(--muted); }
.dock-row { display: flex; align-items: center; gap: 14px; width: 100%; }

.orb {
  --size: 76px;
  position: relative; flex: none; width: var(--size); height: var(--size); padding: 0;
  border: 0; border-radius: 50%; background: none;
}
.orb-core {
  position: absolute; inset: 14px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(184, 255, 214, 0.95), var(--accent) 45%, rgba(6, 46, 24, 0.9) 100%);
  box-shadow: 0 0 calc(18px + var(--level) * 40px) var(--accent), inset 0 0 12px rgba(255, 255, 255, 0.4);
  transform: scale(calc(1 + var(--level) * 0.18));
  transition: transform 0.08s linear, background 0.3s ease;
}
.orb-core svg { width: 22px; height: 22px; fill: #02140a; }
.orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0.55; }
.orb-ring.r1 { border-style: dashed; animation: spin 14s linear infinite; }
.orb-ring.r2 { inset: 6px; border-color: transparent; border-top-color: var(--accent); border-bottom-color: var(--accent); animation: spin 5s linear infinite reverse; }
.orb-ring.r3 { inset: -8px; opacity: 0; }
body[data-state="listening"] .orb-ring.r3 { animation: ping 1.4s ease-out infinite; }
body[data-state="thinking"] .orb-ring.r2 { animation-duration: 0.9s; }
body[data-state="thinking"] .orb-ring.r1 { animation-duration: 3s; }

.cmd {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 6px 0 14px;
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 10px; backdrop-filter: blur(10px);
}
.cmd:focus-within { border-color: rgba(43, 255, 136, 0.6); box-shadow: 0 0 0 3px rgba(43, 255, 136, 0.12); }
.cmd-prompt { color: var(--cyan); font-weight: 600; }
.cmd input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font: 14px var(--mono); }
.cmd input::placeholder { color: #3d5a48; }
.cmd-send, .cmd-cancel {
  height: 34px; padding: 0 14px; border-radius: 7px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  border: 1px solid var(--panel-line); background: rgba(43, 255, 136, 0.12); color: var(--cyan);
}
.cmd-send { display: inline-grid; place-items: center; min-width: 44px; }
.ai-controls { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.ai-controls[hidden],.ai-captions[hidden] { display:none; }
.ai-controls button { min-height:44px; border:1px solid var(--panel-line); border-radius:7px; background:var(--panel); color:var(--text); padding:6px 10px; }
.ai-controls button[aria-pressed="true"] { border-color:var(--cyan); color:var(--cyan); }
.ai-captions { max-height:140px; overflow:auto; overflow-wrap:anywhere; padding:8px; font:12px var(--mono); }
.ai-captions p { margin:4px 0; white-space:pre-wrap; }
.cmd-cancel { background: rgba(248, 113, 113, 0.12); color: var(--red); border-color: rgba(248, 113, 113, 0.3); }
.chips-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.chips-row button {
  background: rgba(4, 16, 10, 0.6); border: 1px solid var(--panel-line); border-radius: 999px;
  padding: 3px 10px; font-size: 11px; color: var(--muted);
}
.chips-row button:hover { color: var(--text); border-color: rgba(43, 255, 136, 0.45); }
.notice { margin: 0; font-size: 10.5px; color: #3d5a48; text-align: center; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ping { 0% { transform: scale(0.85); opacity: 0.7; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(12px); } }

@media (max-width: 900px) {
  .panel-left { display: none; }
  .panel-right { left: 16px; right: 16px; width: auto; top: auto; bottom: 200px; max-height: 40vh; }
  .brand-sub, .brand-sep, .clock { display: none; }
  .topbar { padding: 12px 16px; }
  .chips-row button:nth-child(n + 4) { display: none; }
}

@media (max-width: 600px) {
  .brand { font-size: 15px; letter-spacing: 0.14em; white-space: nowrap; }
  .topbar-controls { gap: 6px; }
  #api-label { display: none; }
  .chip { padding: 6px; }
  .seg button { padding: 5px 7px; font-size: 10px; letter-spacing: 0.06em; }
  .orb { --size: 62px; }
  .orb-core { inset: 11px; }
  .dock-row { gap: 10px; }
  .cmd-send, .cmd-cancel { padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- T-020 voice-first home (main.js marks "no result yet" via #hero:not(.gone)) ---------- */
.hero { display: none; }
.joy-kicker, .joy-id { display: none; }

/* Home view: only the big voice interface */
body:has(#hero:not(.gone)) .topbar-controls > :is(a.icon-btn, #open-geospy, #save-case, #load-case, .clock) { display: none; }
body:has(#hero:not(.gone)) .dock {
  top: 64px; bottom: 0; left: 0; right: 0; transform: none; width: auto;
  justify-content: center; gap: 12px; padding: 0 16px 92px;
}
body:has(#hero:not(.gone)) .dock-row { display: contents; }
body:has(#hero:not(.gone)) .joy-kicker {
  display: block; order: 0; margin: 0; font: 600 12px var(--hud); letter-spacing: 0.42em; color: var(--cyan);
}
body:has(#hero:not(.gone)) .orb { order: 1; --size: min(300px, 38vh, 68vw); margin: 10px 0 4px; transition: width 0.4s ease, height 0.4s ease; }
body:has(#hero:not(.gone)) .orb::before {
  content: ""; position: absolute; inset: -32%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent) 0%, transparent 62%);
  transform: scale(calc(1 + var(--level) * 0.3)); transition: transform 0.08s linear;
}
body:has(#hero:not(.gone)) .orb-core { inset: 16%; box-shadow: 0 0 calc(40px + var(--level) * 90px) var(--accent), inset 0 0 30px rgba(255, 255, 255, 0.35); }
body:has(#hero:not(.gone)) .orb-ring.r2 { inset: 7%; }
body:has(#hero:not(.gone)) .orb-ring.r3 { inset: -7%; }
body:has(#hero:not(.gone)) .joy-id { display: flex; order: 2; flex-direction: column; align-items: center; gap: 6px; }
.joy-status { font: 600 12px var(--hud); letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }
.joy-status::after { content: "Ketuk V atau tahan Spasi untuk bicara"; }
body[data-state="listening"] .joy-status::after { content: "V mendengarkan…"; }
body[data-state="thinking"] .joy-status::after { content: "V menelusuri jejak publik…"; }
body[data-state="speaking"] .joy-status::after { content: "V menjawab"; }
body[data-state="error"] .joy-status::after { content: "Ada kendala — lihat pesan di bawah"; }
body:has(#hero:not(.gone)) .transcript {
  order: 3; font-size: clamp(18px, 2.6vw, 28px); min-height: 1.5em; max-width: min(860px, 100%);
}
body:has(#hero:not(.gone)) .cmd { order: 4; flex: none; width: min(520px, 100%); height: 42px; }
body:has(#hero:not(.gone)) .chips-row { order: 5; }

/* Home view: Joy's latest line from the log becomes a subtitle */
body:has(#hero:not(.gone)) .panel-left {
  display: block; left: 50%; right: auto; top: auto; bottom: 40px; transform: translateX(-50%);
  width: min(720px, calc(100vw - 32px)); max-height: none; overflow: visible; padding: 0;
  background: none; border: 0; box-shadow: none; backdrop-filter: none; text-align: center; animation: none;
  bottom: max(56px, 7vh);
}
body:has(#hero:not(.gone)) .panel-left::before,
body:has(#hero:not(.gone)) .panel-left h2,
body:has(#hero:not(.gone)) .panel-left .panel-sec + .panel-sec { display: none; }
body:has(#hero:not(.gone)) .log { max-height: none; overflow: visible; }
body:has(#hero:not(.gone)) .log li { display: none; }
body:has(#hero:not(.gone)) .log li:last-child { display: block; font-size: 13px; color: var(--muted); animation: fade-in 0.3s ease; }
body:has(#hero:not(.gone)) .log li:last-child time { display: none; }
body:has(#hero:not(.gone)) .log li:last-child .tag { margin-right: 8px; }
body:has(#hero:not(.gone)) .notice { position: fixed; left: 16px; right: 16px; bottom: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Text buttons in the top bar (they reuse .icon-btn, which is a fixed 30px square) */
.brand { white-space: nowrap; }
.topbar-controls > :is(a.icon-btn, #open-geospy, #save-case, #load-case) {
  width: auto; padding: 0 10px; font: 600 11px var(--mono); letter-spacing: 0.08em; color: var(--text); text-decoration: none;
}
@media (max-width: 900px) { .topbar-controls > a.icon-btn, #api-label { display: none; } }

/* Result view: panels ease in when the first result replaces the home view */
body:has(#hero.gone) .panel-left { animation: fade-in 0.4s ease; }

@media (max-width: 600px) {
  body:has(#hero:not(.gone)) .chips-row button:nth-child(n + 4) { display: none; }
  body:has(#hero:not(.gone)) .dock { padding-bottom: 104px; }
}

/* ---------- T-021 God's Eye — mata menggantikan maskot (dua tampilan: home besar & dock kecil) ---------- */
@property --open { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --pupil { syntax: "<number>"; inherits: true; initial-value: 0.34; }

.orb-core svg:not(.eye-rim) { display: none; }
/* bola tetap bulat; mata berada di dalam lingkaran */
.orb-core {
  border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: #03110a;
  box-shadow: 0 0 calc(18px + var(--level) * 40px) var(--accent), inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 80%, white),
    inset 0 0 calc(10px + var(--level) * 20px) color-mix(in srgb, var(--accent) 60%, transparent);
}
body:has(#hero:not(.gone)) .orb-core {
  box-shadow: 0 0 calc(40px + var(--level) * 90px) var(--accent), inset 0 0 0 2px color-mix(in srgb, var(--accent) 85%, white),
    inset 0 0 calc(30px + var(--level) * 40px) color-mix(in srgb, var(--accent) 55%, transparent);
}
.orb-core .eye-rim { /* garis almond bercahaya di atas mata */
  position: absolute; left: 50%; top: 50%; width: 86%; height: auto; aspect-ratio: 100 / 58; fill: none; transform: translate(-50%, -50%);
  overflow: visible; pointer-events: none; z-index: 4;
  filter: drop-shadow(0 0 4px var(--accent));
}
.eye-rim path { fill: none; stroke: color-mix(in srgb, var(--accent) 75%, white); stroke-width: 1.6px; vector-effect: non-scaling-stroke; }
body:has(#hero:not(.gone)) .eye-rim path { stroke-width: 2px; }

.god-eye {
  --gx: 0; --gy: 0; --squash: 1; --hippus: 0;
  --pupil: 0.34; --open: 0.94;
  position: relative; display: block; width: 86%; aspect-ratio: 100 / 58;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 58' preserveAspectRatio='none'><path d='M1 29 C20 -1 80 -1 99 29 C80 59 20 59 1 29Z'/></svg>") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 58' preserveAspectRatio='none'><path d='M1 29 C20 -1 80 -1 99 29 C80 59 20 59 1 29Z'/></svg>") center / 100% 100% no-repeat;
  transition: --open 0.28s ease, --pupil 0.45s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.god-eye.blink { --open: 0 !important; transition: --open 0.075s ease-in; }

/* sklera polos */
.eye-white { position: absolute; inset: 0; background: #082012; }

/* iris sederhana */
.eye-iris {
  position: absolute; left: 50%; top: 50%; height: 92%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(calc(-50% + var(--gx) * 52%), calc(-50% + var(--gy) * 20%)) scaleX(var(--squash));
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 65%, white) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 55%, #063a1c) 100%);
  transition: background 0.3s ease;
}

.eye-pupil {
  position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%; z-index: 1;
  width: calc((var(--pupil) + var(--hippus)) * 100%); transform: translate(-50%, -50%); background: #010703;
}
.eye-glint {
  position: absolute; z-index: 2; left: 60%; top: 22%; width: 13%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.85);
}

/* kelopak: atas bergerak jauh, bawah sedikit; ikut naik saat melirik ke atas */
.lid {
  position: absolute; left: -4%; right: -4%; z-index: 3; background: #03110a;
  transition: transform 0.05s linear;
}
.lid-top {
  top: 0; height: 64%; border-radius: 0 0 50% 50% / 0 0 46% 46%;
  transform: translateY(calc(-104% * clamp(0, var(--open) - var(--gy) * 0.1, 1.15)));
}
.lid-bot {
  bottom: 0; height: 40%; border-radius: 50% 50% 0 0 / 46% 46% 0 0;
  transform: translateY(calc(104% * clamp(0, var(--open) + var(--gy) * 0.06, 1.15)));
}

/* status → kelopak & pupil */
body[data-state="idle"] .god-eye { --open: 0.94; --pupil: 0.34; }
body[data-state="listening"] .god-eye { --open: 1.12; --pupil: calc(0.46 + var(--level) * 0.12); }
body[data-state="thinking"] .god-eye { --open: 0.72; --pupil: 0.22; }
body[data-state="speaking"] .god-eye { --open: 1; --pupil: calc(0.3 + var(--level) * 0.16); }
body[data-state="error"] .god-eye { --open: 0.42; --pupil: 0.18; }
body[data-state="speaking"] .orb-core { transform: scale(calc(1 + var(--level) * 0.06)); }

/* home: lingkaran HUD jadi "aperture" di sekitar mata */
body:has(#hero:not(.gone)) .orb { --size: min(340px, 40vh, 74vw); }
body:has(#hero:not(.gone)) .orb-ring.r1 { inset: -2%; opacity: 0.35; }
body:has(#hero:not(.gone)) .orb-ring.r2 { inset: 9%; opacity: 0.4; }
body:has(#hero:not(.gone)) .orb::before { inset: -20%; }

/* teks status */
.joy-status::after { content: "Ketuk mata atau tahan Spasi · ketik untuk menulis"; }
body[data-state="listening"] .joy-status::after { content: "Mendengarkan…"; }
body[data-state="thinking"] .joy-status::after { content: "Menelusuri jejak publik…"; }
body[data-state="speaking"] .joy-status::after { content: "Menjawab"; }
body[data-state="error"] .joy-status::after { content: "Ada kendala — lihat pesan di bawah"; }
.joy-status { text-align: center; }
@media (max-width: 600px) {
  body[data-state="idle"] .joy-status::after { content: "Ketuk mata untuk bicara"; }
}

/* home: bagian bawah disembunyikan dulu; muncul saat mulai mengetik / KETIK / error */
.home-type { display: none; }
body:has(#hero:not(.gone)) .home-type {
  display: block; order: 3; margin-top: 2px; padding: 4px 10px; border: 1px solid transparent; border-radius: 4px; background: none;
  font: 600 11px var(--hud); letter-spacing: 0.22em; color: var(--muted); opacity: 0.7;
}
body:has(#hero:not(.gone)) .home-type:hover { color: var(--cyan); border-color: var(--panel-line); opacity: 1; }
body:has(#hero:not(.gone)):is(.home-typing, [data-state="error"]) .home-type { display: none; }
body:has(#hero:not(.gone)):not(.home-typing):not([data-state="error"]) :is(.cmd, .chips-row) { display: none; }
body:has(#hero:not(.gone)):not([data-state="error"]) .panel-left { display: none; }
body:has(#hero:not(.gone)) .notice { display: none; }
body.home-typing:has(#hero:not(.gone)) .cmd { animation: fade-in 0.25s ease; }


/* ---------- T-022 GOD'S EYE: tema hijau, latar matrix, transisi halus ---------- */
:root { --cyan: #2bff88; --accent: var(--cyan); }
body[data-state="thinking"] { --accent: #c6ff4d; }
body[data-state="speaking"] { --accent: #b8ffd6; }
body { background: #061b13; }

/* T-023 latar matrix biner: dasar #061b13 + glow hijau lembut di tengah, tepi lebih gelap */
#matrix {
  position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 45%, rgba(84, 255, 131, 0.11) 0%, rgba(84, 255, 131, 0.04) 45%, transparent 75%),
    radial-gradient(ellipse at center, #061b13 35%, #03100b 75%, #010805 100%);
  transition: opacity 1.2s ease;
}
body:has(#hero.gone) #matrix { opacity: 0.7; }
.fx-grid, .fx-scan { display: none; }
.fx-vignette { background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.45) 100%); }

.brand-name { letter-spacing: 0.18em; }

/* transisi halus */
.god-eye { transition: --open 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), --pupil 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); }
.god-eye.blink { transition: --open 0.09s cubic-bezier(0.4, 0, 1, 1); }
.eye-iris, .orb-core, .eye-rim path, .joy-status, .brand-mark, .brand-sub { transition: background 0.6s ease, box-shadow 0.6s ease, stroke 0.6s ease, color 0.6s ease, text-shadow 0.6s ease; }
body:has(#hero:not(.gone)) .dock > *, body:has(#hero:not(.gone)) .dock-row > * { animation: rise-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
body:has(#hero:not(.gone)) .orb { animation-delay: 0.05s; }
body:has(#hero:not(.gone)) .joy-id { animation-delay: 0.15s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }

/* T-025 avatar di inspector */
.insp-avatar { display: block; width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--accent); object-fit: cover; }

/* ---------- T-028 tampilan graph: dock diciutkan jadi ikon; mic selalu aktif ---------- */
.home-type { display: block; }
body:has(#hero.gone) .home-type {
  order: 3; padding: 6px 10px; border: 1px solid var(--panel-line); border-radius: 999px; background: rgba(2, 8, 5, 0.7);
  font: 600 11px var(--hud); letter-spacing: 0.2em; color: var(--muted);
}
body:has(#hero.gone) .home-type:hover { color: var(--cyan); border-color: var(--cyan); }
body.home-typing .home-type, body[data-state="error"] .home-type { display: none; }
body:has(#hero.gone):not(.home-typing):not([data-state="error"]) .dock :is(.cmd, .chips-row, .notice) { display: none; }
body:has(#hero.gone):not(.home-typing):not([data-state="error"]) .dock { width: auto; }
body:has(#hero.gone):not(.home-typing):not([data-state="error"]) .dock-row { width: auto; gap: 10px; }
body:has(#hero.gone) .dock .transcript { transition: opacity 0.4s ease; }
body.home-typing:has(#hero.gone) .cmd { animation: fade-in 0.25s ease; }

.mic-chip { width: auto !important; padding: 0 10px; gap: 6px; display: inline-flex; align-items: center; font: 600 11px var(--mono); letter-spacing: 0.08em; }
.mic-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
body[data-wake="armed"] .mic-chip .dot { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: mic-breathe 2.4s ease-in-out infinite; }
body[data-wake="capturing"] .mic-chip .dot { background: #c6ff4d; box-shadow: 0 0 10px #c6ff4d; }
body[data-wake="transcribing"] .mic-chip .dot { background: #fbbf24; }
body[data-wake="blocked"] .mic-chip { color: #fbbf24; border-color: rgba(251, 191, 36, 0.5); }
body[data-wake="off"] .mic-chip { color: var(--muted); }
@keyframes mic-breathe { 50% { opacity: 0.45; } }
/* ring mata ikut "bernapas" saat mic aktif menunggu panggilan */
body[data-wake="capturing"] .orb-ring.r1 { opacity: 0.9; }

/* T-058: contain intrinsic widths while keeping the graph and eye canvas intact. */
.topbar { flex-wrap: wrap; gap: 8px 16px; padding-top: max(14px, env(safe-area-inset-top)); }
.brand, .topbar-controls, .topbar-controls > *, .dock-row > *, .panel, .insp-fields > *, .log li > * { min-width: 0; }
.brand-mark { flex: none; }
.topbar-controls { flex-wrap: wrap; }
.topbar-controls > .icon-btn { min-height: 44px; min-width: 44px; height: auto; }
.topbar-controls > :is(#open-cctv, #open-geospy, #save-case, #load-case) { width: auto; padding: 8px 10px; }
.panel { top: 124px; max-width: calc(100vw - 32px); max-height: calc(100vh - 340px); max-height: calc(100dvh - 340px); overscroll-behavior-y: contain; overflow-wrap: anywhere; }
.log li { grid-template-columns: auto auto minmax(0, 1fr); }
.legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.insp-fields { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
.insp-links button { flex-wrap: wrap; }
.insp-links small { margin-left: 0; }
.insp-head, .transcript, .notice, .warnings, .insp-sources { overflow-wrap: anywhere; }
.dock { bottom: max(18px, env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); }
.transcript { max-height: 20dvh; overflow-y: auto; }
.cmd { height: auto; min-height: 46px; flex-wrap: wrap; padding-block: 6px; }
.cmd input { flex: 1 1 80px; }
.cmd-send, .cmd-cancel, .home-type, .chips-row button { min-height: 44px; }
/* Navigation remains available on home and result views. */
body:has(#hero:not(.gone)) .topbar-controls > :is(a.icon-btn, #open-geospy, #save-case, #load-case), .topbar-controls > a.icon-btn { display: inline-flex; }
body:has(#hero:not(.gone)) .dock { top: 124px; padding-bottom: max(32px, env(safe-area-inset-bottom)); }
body:has(#hero:not(.gone)) .notice { position: static; white-space: normal; overflow: visible; }
/* Existing dialog geometry is inline in main.js; reserve a close-control row. */
dialog[aria-label="Katalog CCTV publik"], dialog[aria-label="GeoSpy photo intelligence"] {
  display: none; grid-template-rows: auto minmax(0, 1fr); overflow: auto;
  width: 100% !important; height: 100vh !important; height: 100dvh !important;
  max-width: 100% !important; max-height: 100dvh !important;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
}
dialog[aria-label="Katalog CCTV publik"][open], dialog[aria-label="GeoSpy photo intelligence"][open] { display: grid; }
dialog[aria-label="Katalog CCTV publik"] > iframe, dialog[aria-label="GeoSpy photo intelligence"] > iframe { grid-row: 2; display: block; min-width: 0; min-height: 0; width: 100% !important; height: 100% !important; }
dialog[aria-label="Katalog CCTV publik"] > button, dialog[aria-label="GeoSpy photo intelligence"] > button { grid-row: 1; justify-self: end; position: static !important; min-height: 44px; margin-bottom: 8px; }
@media (max-width: 1100px) {
  html, body { height: auto; min-height: 100dvh; overflow: auto; }
  .topbar { position: sticky; top: 0; padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); background: rgba(2, 6, 4, .95); }
  .topbar-controls { width: 100%; gap: 6px; }
  .brand { white-space: normal; }
  #api-label { display: inline; }
  .panel-left, .panel-right { position: relative; inset: auto; display: block; width: auto; margin: 12px 16px; max-height: 40vh; max-height: 40dvh; }
  body:has(#hero.gone) .topbar { margin-bottom: 36vh; margin-bottom: 36dvh; }
  .dock, body:has(#hero.gone):not(.home-typing):not([data-state="error"]) .dock { position: relative; inset: auto; transform: none; width: auto; margin: 16px; max-width: calc(100% - 32px); }
  .dock-row, body:has(#hero.gone):not(.home-typing):not([data-state="error"]) .dock-row { width: 100%; flex-wrap: wrap; justify-content: center; }
  .cmd { flex-basis: 100%; }
  body:has(#hero:not(.gone)) .dock { position: relative; inset: auto; min-height: calc(100dvh - 200px); width: auto; padding: 24px 0 max(24px, env(safe-area-inset-bottom)); }
  body:has(#hero:not(.gone)) .orb { --size: min(300px, 34dvh, 60vw); }
  .chips-row button:nth-child(n + 4), body:has(#hero:not(.gone)) .chips-row button:nth-child(n + 4) { display: inline-block; }
}

/* Keep the inspector close target clear of wrapped headings. */
.close { width: 44px; height: 44px; }
.insp-head { padding-right: 54px; }

/* Versioned mascot V2; original V1 styles above remain the backup. */
.god-eye.mascot-v2 { width:96%; aspect-ratio:240/128; -webkit-mask:none; mask:none; overflow:visible; }
.orb-core svg.mascot-v2-svg { display:block; width:100%; height:100%; overflow:visible; fill:var(--accent); filter:drop-shadow(0 0 3px color-mix(in srgb,var(--accent) 55%,transparent)); }
.v2-face { transform:translate(calc(var(--gx)*8px),calc(var(--gy)*2px)); }
.v2-expression { transform-origin:50% 65%; transform:scaleY(clamp(.15,var(--open),1.12)); transition:transform .24s cubic-bezier(.2,.8,.2,1); }
.mascot-v2.blink .v2-expression { transform:scaleY(.06); transition-duration:.075s; }
.v2-gaze { transform:translate(calc(var(--gx)*6px),calc(var(--gy)*4px)); }
.v2-pupil { fill:var(--accent); }
body[data-state="listening"] .mascot-v2-svg { filter:drop-shadow(0 0 5px var(--accent)); }
@media(prefers-reduced-motion:reduce){ .v2-face,.v2-expression,.v2-gaze { transform:none!important; transition:none!important; } }

/* Aggregate database response: readable metrics, explicit scope, no invented records. */
.database-breakdown { margin:16px 0; min-width:0; }
.database-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0 18px; }
.database-stats > div { min-width:0; padding:14px 10px; border:1px solid #225b3d; border-radius:12px; background:#0c271b; }
.database-stats strong { display:block; color:var(--accent); font-size:clamp(22px,5vw,32px); overflow-wrap:anywhere; }
.database-stats span { display:block; margin-top:6px; color:var(--muted); font-size:11px; line-height:1.5; }
.database-note { padding:12px; border-left:2px solid #43845f; color:var(--muted); font-size:11px; line-height:1.7; overflow-wrap:anywhere; }

/* Structured anonymous provider response: wrap labels and values inside the panel. */
.anonymous-response-table { width:100%; border-collapse:collapse; table-layout:fixed; margin:12px 0; font-size:12px; line-height:1.6; }
.anonymous-response-table caption { text-align:left; color:var(--muted); font-size:11px; padding:0 0 8px; }
.anonymous-response-table th,.anonymous-response-table td { padding:10px 6px; border-bottom:1px solid var(--panel-line); vertical-align:top; text-align:left; overflow-wrap:anywhere; }
.anonymous-response-table th { width:43%; color:var(--muted); font-weight:500; }
.anonymous-response-table td { color:var(--text); }

#inspector { scroll-margin-top:160px; }

/* Keep voice status and command entry on independent rows; neither can shrink the other. */
body:has(#hero.gone) .dock { width:min(720px,calc(100vw - 32px)); }
body:has(#hero.gone) .dock-row {
  display:grid; grid-template-columns:76px minmax(0,1fr); width:100%; gap:12px 16px; align-items:center;
}
body:has(#hero.gone) .dock-row .orb { grid-column:1; grid-row:1; }
body:has(#hero.gone) .operation-progress { grid-column:2; grid-row:1; width:100%; max-width:100%; }
body:has(#hero.gone) .home-type { grid-column:2; justify-self:center; }
body:has(#hero.gone) .cmd,body:has(#hero.gone) #voice-draft-status { grid-column:1 / -1; }
.cmd,body:has(#hero:not(.gone)) .cmd {
  display:grid; grid-template-columns:16px minmax(0,1fr) auto auto;
  flex:none; width:100%; min-width:0; height:auto; min-height:58px; padding:6px 10px; gap:8px;
}
.cmd input { width:100%; min-width:0; min-height:44px; }
.cmd-send,.cmd-cancel { white-space:nowrap; }
body:has(#hero:not(.gone)) .cmd { width:min(560px,100%); }
#voice-draft-status { width:100%; text-align:center; white-space:normal; overflow-wrap:anywhere; }
body:has(#hero:not(.gone)) #voice-draft-status:not([hidden]) { display:block; order:4; }
@media(max-width:1100px) {
  body:has(#hero.gone) .dock { width:auto; }
}
@media(max-width:600px) {
  .cmd,body:has(#hero:not(.gone)) .cmd { grid-template-columns:16px minmax(0,1fr) auto; }
  .cmd input { grid-column:2 / -1; }
  .cmd-send { grid-column:2; }
  .cmd-cancel { grid-column:3; }
  body:has(#hero.gone) .dock-row { grid-template-columns:64px minmax(0,1fr); gap:12px; }
  body:has(#hero.gone) .dock-row .orb { --size:64px; }
}

/* Author layout rules must preserve explicit closed/cancelled UI state. */
.panel[hidden],.dock [hidden] { display:none !important; }

/* Text actions need intrinsic width, rather than the original square icon size. */
.topbar-controls > :is(#open-history,#new-search,#clear-search) { width:auto; flex:none; padding:8px 10px; white-space:nowrap; font:600 11px var(--mono); letter-spacing:.08em; }