/* The existing HUD tokens remain the visual source of truth. */
.companion-home{position:relative;display:flex;flex:1;flex-direction:column;min-width:0;min-height:0;height:calc(100dvh - var(--header));overflow:hidden;background:radial-gradient(ellipse at 50% 48%,color-mix(in srgb,var(--blue) 5%,var(--bg)),var(--bg) 70%)}
.companion-top{position:absolute;z-index:2;top:24px;left:28px;right:28px;display:flex;align-items:start;justify-content:space-between;gap:16px;pointer-events:none}
.companion-top>div{display:grid;gap:9px}.companion-top h1{font-size:24px;letter-spacing:.02em;margin:0;font-weight:500}.companion-top p{margin:0;color:var(--muted);font-size:14px}.companion-top button{pointer-events:auto}
.companion-stage{position:absolute;inset:0 0 165px;touch-action:none;isolation:isolate}
.companion-stage canvas{display:block;width:100%;height:100%;outline:none}
.companion-loader{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:14px;color:var(--secondary);padding:30px;pointer-events:none}
.companion-loader button{pointer-events:auto}.companion-loader[hidden]{display:none}
.companion-loader progress{width:180px;height:3px;margin:auto;accent-color:var(--blue)}
.companion-presence{position:absolute;left:28px;bottom:205px;font:12px var(--mono);letter-spacing:.12em;color:var(--muted);pointer-events:none}
.companion-controls{margin:auto 0 0;padding:0 28px 22px;z-index:2;display:grid;gap:12px;background:linear-gradient(transparent,var(--bg) 44%)}
.companion-transcript{font-size:16px;line-height:1.5;max-height:116px;overflow-y:auto;white-space:pre-wrap;color:var(--secondary);max-width:820px;margin:0 auto;text-align:center;padding:12px;width:100%;scrollbar-width:thin}
.companion-transcript:empty{display:none}.companion-transcript[data-partial=true]{color:var(--blue)}
.companion-compose{display:flex;align-items:end;gap:10px;max-width:820px;width:100%;margin:0 auto}
.companion-compose textarea{resize:none;flex:1;min-width:0;max-height:130px;min-height:52px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 94%,transparent);padding:14px 16px;border-radius:12px;outline-offset:3px;font-size:16px;line-height:1.5}
.companion-controls button{min-height:48px;min-width:48px}.companion-mic{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;color:var(--blue);background:var(--surface)}
.companion-mic[aria-pressed=true]{border-color:var(--pink);color:var(--pink);box-shadow:0 0 14px color-mix(in srgb,var(--pink) 20%,transparent)}
.companion-footer{display:flex;justify-content:center;align-items:center;gap:16px;font:12px var(--mono);color:var(--muted);flex-wrap:wrap}.companion-footer button{min-height:28px;font:inherit;text-decoration:underline;text-underline-offset:5px}.companion-footer a{color:var(--blue)}
.companion-status{display:inline-flex;align-items:center;gap:8px}.companion-status::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}.companion-status[data-active=true]{color:var(--blue)}
.companion-model-select{margin-block:20px;padding:20px;border:1px solid var(--line);background:var(--panel);border-radius:12px}.companion-model-select select{width:100%}.companion-model-select p{color:var(--muted);font-size:14px;line-height:1.6}
.companion-settings{display:grid;gap:24px}.companion-settings fieldset{border:1px solid var(--line);border-radius:12px;padding:20px;margin:0;min-width:0}.companion-settings legend{padding:0 8px;font:12px var(--mono);color:var(--blue);letter-spacing:.08em}.companion-settings .field{margin-bottom:18px}
.companion-test-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.companion-test-grid button{padding:14px;border:1px solid var(--line);border-radius:8px;text-align:left}.companion-test-grid button.active{border-color:var(--blue);color:var(--blue)}.companion-test-grid small{display:block;margin-top:8px;color:var(--muted)}
.companion-test-stage{height:420px;position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden}.companion-test-stage .companion-stage{inset:0}.companion-test-actions{display:flex;flex-wrap:wrap;gap:8px;margin-block:12px}.companion-test-actions button{padding:10px 14px;border:1px solid var(--line);border-radius:8px;min-height:44px}
.companion-capabilities{font:12px/1.7 var(--mono);color:var(--muted);white-space:pre-wrap}.companion-settings input[type=range]{width:100%}
/* Two narrow light strips share a looping perimeter palette, with opposite travel directions. */
.mic-edge-glow{position:fixed;inset:0;z-index:110;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .2s;--mic-opacity:.2;--mic-width:10px;--mic-level:0}
.mic-edge-glow[data-active=true]{opacity:1}
.mic-edge-glow::before,.mic-edge-glow::after{content:'';position:absolute;top:-2%;bottom:-2%;width:var(--mic-width);background:linear-gradient(0deg,var(--pink) 0%,var(--blue) 25%,var(--pink) 50%,var(--blue) 75%,var(--pink) 100%);background-size:100% 200%;filter:blur(4px);opacity:var(--mic-opacity);animation:mic-edge-flow 7s linear infinite;animation-play-state:paused;will-change:opacity;transform:translateZ(0)}
.mic-edge-glow::before{left:-3px}.mic-edge-glow::after{right:-3px;animation-direction:reverse;background-position:0 100%}
.mic-edge-glow[data-active=true]::before,.mic-edge-glow[data-active=true]::after{animation-play-state:running}
@keyframes mic-edge-flow{from{background-position-y:0%}to{background-position-y:200%}}
body[data-motion=off] .mic-edge-glow::before,body[data-motion=off] .mic-edge-glow::after,body[data-motion=reduced] .mic-edge-glow::before,body[data-motion=reduced] .mic-edge-glow::after{animation:none}
@media(prefers-reduced-motion:reduce){.mic-edge-glow::before,.mic-edge-glow::after{animation:none}.mic-edge-glow{transition:none}}
@media(max-width:700px){.companion-home{height:calc(100dvh - var(--header) - 64px - env(safe-area-inset-bottom));min-height:320px}.companion-top{top:18px;left:20px;right:20px}.companion-top h1{font-size:20px}.companion-controls{padding:0 16px 14px}.companion-stage{bottom:156px}.companion-presence{left:20px;bottom:210px;font-size:12px}.companion-test-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.companion-footer{gap:10px}.companion-footer span{font-size:12px}.companion-compose{gap:8px}.companion-transcript{max-height:96px}.mobile-nav{grid-template-columns:repeat(6,minmax(0,1fr))!important}}

@media(max-width:700px){.mobile-nav a{width:calc(100% / 6);font-size:10px!important}.companion-home .circle-button{flex-shrink:0}.companion-home .companion-mic{flex-shrink:0}}
/* Home keeps the complete stage behind its floating controls. */
.companion-stage{inset:0}
.companion-home::after{content:'';position:absolute;z-index:1;left:0;right:0;bottom:0;height:30px;background:linear-gradient(to bottom,transparent,#0e1219);pointer-events:none}
.companion-controls{background:none;position:relative;pointer-events:none}
.companion-controls>*{pointer-events:auto}
.companion-voice-error{max-width:820px;width:100%;margin:0 auto;padding:12px;border:1px solid var(--line);background:var(--bg);color:var(--secondary);font-size:13px;line-height:1.5;max-height:32dvh;overflow:auto}
.companion-voice-error[hidden]{display:none}.companion-voice-error p{margin:0 0 8px}.companion-voice-error>div{display:flex;flex-wrap:wrap;gap:8px}.companion-voice-error button{padding:6px 12px;min-height:44px;border:1px solid var(--line);color:var(--blue);font:inherit}
.companion-transcript{max-height:4.5em;padding:4px 12px;text-shadow:0 1px 3px var(--bg),0 0 12px var(--bg)}
.companion-top{top:10px;left:20px;right:20px}
.companion-top h1{font-size:20px}.companion-top p{font-size:12px}.companion-top>div{gap:4px}
.companion-presence{display:none}
@media(max-width:700px){.companion-stage{bottom:0}.companion-transcript{font-size:15px;max-height:4.5em}.companion-top{top:10px;left:16px;right:16px}}
.voice-log-entry{border:1px solid var(--line,#33434c);padding:14px;margin:12px 0;overflow-wrap:anywhere}
.voice-log-entry summary{display:flex;flex-wrap:wrap;align-items:center;gap:10px;cursor:pointer;min-height:44px}
.voice-log-entry summary small{width:100%;opacity:.7}
.voice-log-entry h3{margin-top:20px;font-size:15px}
.voice-log .detail-list>div{align-items:flex-start;gap:12px}
.voice-log .detail-list strong{white-space:nowrap}
.voice-log .overlay-actions{flex-wrap:wrap}