:root { --ink:#0b0d12; --muted:#7a7f89; --line:#ececef; --bg:#ffffff; }
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.45 Inter, "Proxima Nova", system-ui, -apple-system, sans-serif; -webkit-font-smoothing:antialiased; overflow:hidden; }

header { position:fixed; inset:0 0 auto 0; display:flex; justify-content:space-between; align-items:center; padding:22px 28px; z-index:5; }
.logo { height:26px; width:auto; display:block; }
.logo.client { height:34px; }
button { font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
.ghost { color:var(--muted); font-size:14px; padding:6px 10px; border-radius:999px; }
.ghost:hover { color:var(--ink); background:#f4f4f6; }

main { height:100%; flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }

/* The orb: soft blurred colour fields drifting inside a sphere, with film grain. */
.orb { --lvl:0; --size:min(520px, 46vw, 62vh); position:relative; width:var(--size); height:var(--size); border-radius:50%; overflow:hidden; isolation:isolate;
  background:var(--orb-base,#3b2fd9); transform:scale(calc(1 + var(--lvl) * .05)); transition:transform 120ms ease-out, filter 600ms ease;
  box-shadow: 0 30px 90px -30px rgba(4,0,212,.35); }
.blob { position:absolute; border-radius:50%; filter:blur(calc(var(--size) * .09)); opacity:.95; mix-blend-mode:normal; }
.b1 { width:80%; height:80%; left:-10%; top:-15%; background:var(--orb-c1,#0400D4); animation:drift1 22s ease-in-out infinite; }
.b2 { width:70%; height:70%; right:-20%; top:5%;  background:var(--orb-c2,#8a6bff); animation:drift2 26s ease-in-out infinite; }
.b3 { width:60%; height:60%; left:-20%; bottom:-10%; background:var(--orb-c3,#e6e0ff); animation:drift3 19s ease-in-out infinite; }
.b4 { width:55%; height:55%; right:0%; bottom:-20%; background:var(--orb-c4,#7fe9f0); animation:drift4 24s ease-in-out infinite; }
.shade { position:absolute; inset:0; border-radius:50%; background: radial-gradient(circle at 50% 55%, rgba(0,2,44,.45), transparent 55%), radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), transparent 40%); }
.grain { position:absolute; inset:-50%; opacity:.28; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes drift1 { 50% { transform:translate(18%, 14%) scale(1.1); } }
@keyframes drift2 { 50% { transform:translate(-22%, 18%) scale(.9); } }
@keyframes drift3 { 50% { transform:translate(20%, -18%) scale(1.15); } }
@keyframes drift4 { 50% { transform:translate(-16%, -22%) scale(1.05); } }

.orb.idle { filter:saturate(.85); }
.orb.listening .blob { animation-duration:12s; }
.orb.thinking .blob { animation-duration:5s; }
.orb.thinking { filter:saturate(1.1) brightness(1.04); }
.orb.speaking .blob { animation-duration:8s; }
.orb.speaking { filter:saturate(1.15); }
@media (prefers-reduced-motion: reduce) { .blob { animation:none !important; } }

/* The call pill sits over the centre of the orb. */
.stage { position:relative; display:grid; place-items:center; }
.pill-wrap { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.pill-wrap .mic { pointer-events:auto; }
.mic { position:relative; width:112px; height:112px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.38), rgba(255,255,255,.08) 60%), rgba(20,16,70,.28);
  border:1px solid rgba(255,255,255,.55); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 40px rgba(20,10,90,.25), inset 0 1px 0 rgba(255,255,255,.6); transition:transform .18s ease, background .25s; }
.mic:hover { transform:scale(1.05); }
.mic:active { transform:scale(.97); }
.mic:disabled { opacity:.7; cursor:default; transform:none; }
.mic .label { position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%); white-space:nowrap; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.92); text-shadow:0 1px 8px rgba(10,5,60,.45); }
.mic .label .x { margin-left:6px; opacity:.7; }
.mic .ring { position:absolute; inset:-10px; border-radius:50%; border:1px solid rgba(255,255,255,.45); opacity:.0; }
.mic:not(.live):hover .ring { opacity:.6; }
.mic.live { background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.3), rgba(255,255,255,.06) 60%), rgba(20,16,70,.38); }
.mic.live .ring { animation:ripple 2.4s ease-out infinite; }
.mic.live .ring.r2 { animation-delay:1.2s; }
.speaking-ui .mic.live .ring { animation-duration:1.2s; }
.speaking-ui .mic.live .ring.r2 { animation-delay:.6s; }
@keyframes ripple { 0% { transform:scale(.9); opacity:.7; } 100% { transform:scale(1.6); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .mic.live .ring { animation:none; opacity:.5; } }

.caption { min-height:1.5em; max-width:min(620px, 86vw); margin:26px 0 0; text-align:center; color:#3b4049; font-size:17px; transition:opacity .4s; }
.caption.you { color:var(--muted); }
.caption:empty { opacity:0; }

.mic[hidden] { display:none; }
.incall { display:flex; gap:10px; align-items:center; margin-top:14px; }
.incall[hidden] { display:none; }
.round { padding:9px 16px; border-radius:999px; border:1px solid var(--line); font-size:14px; color:var(--muted); }
.round:hover, .round.on { color:var(--ink); border-color:#d6d7dc; }

footer { position:absolute; bottom:28px; color:var(--muted); font-size:15px; }
footer .brandname { color:#5c616b; text-decoration:none; }

.layout { display:flex; height:100%; }
.side { width:min(420px, 38vw); height:100%; border-left:1px solid var(--line); display:flex; flex-direction:column; padding:74px 22px 18px; gap:8px; background:#fcfcfe; }
.side h2 { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:6px 0 0; }
.log { flex:1; overflow:auto; min-height:0; background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 14px; font-size:15px; }
.log.small { flex:.75; font-size:13px; }
.log p { margin:0 0 12px; }
.log .who { display:block; font-size:12px; color:var(--muted); margin-bottom:2px; }
.log .you .who { color:#0400D4; }
.log .sys { color:var(--muted); font-size:13px; }
.log .err { color:#BF003F; }
.log .empty { color:var(--muted); }
.ask { border-left:2px solid #c9c2ff; padding-left:10px; margin-bottom:12px; }
.ask.done { border-color:#0400D4; } .ask.fail { border-color:#BF003F; }
.ask .q { color:var(--ink); } .ask .a { color:#3b4049; margin-top:4px; } .ask .t { font-size:11px; color:var(--muted); margin-top:2px; }
.typed { display:flex; gap:8px; }
.typed input { flex:1; border:1px solid var(--line); border-radius:999px; padding:9px 16px; font:inherit; font-size:14px; outline:none; background:#fff; }
.typed input:focus { border-color:#c9c2ff; }
.typed button { padding:9px 16px; border-radius:999px; background:var(--ink); color:#fff; font-size:14px; }
.typed button:disabled, .typed input:disabled { opacity:.5; cursor:default; }
.sec-head { display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.sec-head h2 { margin:0; }
.toggle { font-size:12px; color:var(--muted); background:none; border:1px solid var(--line); border-radius:999px; padding:3px 10px; cursor:pointer; }
.toggle:hover { color:var(--ink); border-color:#c9c2ff; }
body.side-hidden .side { display:none; }
.side-toggle { position:fixed; top:22px; right:28px; z-index:6; background:#fff; }
.meta { font-size:12px; color:var(--muted); min-height:1.2em; }
@media (max-width: 900px) { body { overflow:auto; } .layout { flex-direction:column; height:auto; } main { min-height:100vh; } .side { width:100%; height:auto; min-height:70vh; border-left:0; border-top:1px solid var(--line); padding-top:20px; } .orb { --size:min(520px, 82vw, 60vh); } }

/* Hold-to-talk (packs with their own tools). */
.talk { display:flex; align-items:center; gap:10px; padding:14px 26px; border-radius:999px; background:var(--ink); color:#fff;
  font-size:15px; box-shadow:0 8px 28px rgba(20,10,90,.18); touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  transition:transform .12s ease, background .2s, box-shadow .2s; }
.talk[hidden] { display:none; }
.talk .t2 { font-size:12px; opacity:.6; }
.talk:hover { transform:scale(1.03); }
.talk.down { background:#0400D4; transform:scale(.97); box-shadow:0 0 0 6px rgba(4,0,212,.15), 0 8px 28px rgba(4,0,212,.3); }
.talk.down .t2 { display:none; }

/* Packs with tools: the bottom panel switches between Tool calls and Knowledge. */
.tools-mode .side .pane { flex:1; }
.switch { display:inline-flex; align-self:flex-start; gap:2px; padding:3px; margin-top:6px; background:#f1f1f5; border-radius:999px; }
.switch[hidden], .switch button[hidden] { display:none; }
.switch button { position:relative; padding:5px 14px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.switch button:hover { color:var(--ink); }
.switch button.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(20,10,90,.12); }
.switch .dot { position:absolute; top:3px; right:5px; width:7px; height:7px; border-radius:50%; background:#0400D4; animation:dotpulse 1.2s ease-in-out infinite; }
.switch .dot[hidden] { display:none; }
@keyframes dotpulse { 0%,100% { box-shadow:0 0 0 0 rgba(4,0,212,.45); } 50% { box-shadow:0 0 0 5px rgba(4,0,212,0); } }

/* Spinner, used on running tool cards and in the chip under the orb. */
.spin { display:inline-block; width:14px; height:14px; border-radius:50%; border:2px solid rgba(4,0,212,.2); border-top-color:#0400D4; animation:spin .8s linear infinite; vertical-align:-2px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Tool call cards: what runs, then what came back. Click a card to see the full result. */
.tool { border:1px solid var(--line); border-left:3px solid #c9c2ff; border-radius:10px; padding:8px 10px; margin-bottom:8px; background:#fff; transition:border-color .3s, background .3s; }
.tool.run { border-left-color:#0400D4; background:#f7f6ff; }
.tool .head { display:flex; gap:10px; align-items:flex-start; width:100%; text-align:left; }
.tool .st { width:18px; flex:none; font-size:15px; line-height:20px; text-align:center; }
.tool .body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tool .lbl { font-size:14px; font-weight:600; color:var(--ink); line-height:20px; }
.tool .sig { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:11.5px; color:var(--muted); overflow-wrap:anywhere; }
.tool .sum { font-size:13px; color:#3b4049; }
.tool .sum[hidden] { display:none; }
.tool .ms { flex:none; font-size:12px; color:var(--muted); line-height:20px; font-variant-numeric:tabular-nums; }
.tool .why { font-size:13px; color:#BF003F; margin:2px 0 0 28px; }
.tool pre { margin:6px 0 2px 28px; padding:8px 10px; background:#f6f6f9; border-radius:8px; font-size:11px; line-height:1.4; white-space:pre-wrap; overflow-wrap:anywhere; max-height:260px; overflow:auto; }
.tool.ok { border-left-color:#0400D4; }
.tool.ok .st { color:#0400D4; }
.tool.blocked, .tool.err { border-left-color:#BF003F; background:#fff8fa; }
.tool.blocked .lbl, .tool.err .lbl { color:#BF003F; }
.tool:not(.run) .head:hover .lbl { text-decoration:underline; text-decoration-color:#c9c2ff; }

/* The chip under the orb while a tool runs. */
.chip { display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:7px 16px 7px 12px; border-radius:999px; background:#fff; border:1px solid #d9d4ff;
  box-shadow:0 6px 20px rgba(20,10,90,.10); font-size:14px; color:var(--ink); transition:opacity .4s; }
.chip[hidden] { display:none; }
.tools-mode .chip[hidden] { display:inline-flex; visibility:hidden; } /* keeps its space, so the orb does not jump */
.chip .ci { display:inline-grid; place-items:center; min-width:16px; }
.chip.ok .ci { color:#0400D4; }
.chip.blocked, .chip.err { border-color:#f2b8c8; color:#BF003F; }
.chip.out { opacity:0; }
.chip + .caption { margin-top:12px; }

/* The caller's line while the transcript is being fixed, and a line without words. */
.typing { display:inline-flex; gap:4px; padding:6px 0 2px; }
.typing i { width:6px; height:6px; border-radius:50%; background:#c9c2ff; animation:typing 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay:.15s; } .typing i:nth-child(3) { animation-delay:.3s; }
@keyframes typing { 0%,80%,100% { opacity:.35; transform:translateY(0); } 40% { opacity:1; transform:translateY(-3px); } }
.log .nospeech .txt { color:var(--muted); font-style:italic; font-size:13px; }

/* Knowledge card: one row per field; where each value came from; a changed row glows for a moment. */
.kn { display:grid; grid-template-columns:118px 1fr; gap:10px; padding:8px 8px; border-radius:8px; border-bottom:1px solid #f1f1f5; }
.kn:last-child { border-bottom:0; }
.kn .kl { font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; padding-top:2px; }
.kn .kv { font-size:14px; color:var(--ink); min-width:0; overflow-wrap:anywhere; }
.kn.blank .kv { color:#c4c6cc; }
.kn .ki + .ki { margin-top:4px; }
.kn .src { display:inline-block; margin-left:6px; padding:0 7px; border-radius:999px; font-size:10.5px; line-height:17px; vertical-align:1px; white-space:nowrap; }
.kn .src.tool { background:#eceaff; color:#0400D4; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.kn .src.caller { background:#f1f1f5; color:var(--muted); }
.kn.flash { animation:knflash 1.5s ease-out; }
@keyframes knflash { 0% { background:rgba(4,0,212,.14); box-shadow:inset 3px 0 0 #0400D4; } 100% { background:transparent; box-shadow:inset 3px 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .spin, .switch .dot, .typing i { animation:none; } .kn.flash { animation-duration:.01s; } }