/* The living energy is the authored focal motion; reading surfaces stay still. */
:root { --energy-night:#10100e; --energy-blue:#edc48b; --energy-surface:#1c1a17; --energy-text:#f4eee4; --energy-muted:#c2b8a7; --energy-enter:240ms; --energy-ease:cubic-bezier(.23,1,.32,1); }
.workspace .core { width:390px; top:0; }
.core canvas { width:100%; height:auto; aspect-ratio:1; }
.core-word { top:173px; font-size:24px; letter-spacing:.19em; }
.core-word span { font-size:11px; }
.core canvas.core-fallback { background:radial-gradient(ellipse at 43% 40%,#d3f5ff 0%,#6bdaef 7%,#1776b7 24%,#063c64 32%,#051c31 41%,transparent 54%),radial-gradient(ellipse at 58% 58%,#23c4ef 12%,transparent 57%); border-radius:50%; }
.workspace { min-height:810px; }
.workspace .capture-window,.workspace .result-window { top:438px; }
#immersive-enter { gap:9px; min-height:44px; color:var(--cyan); border-color:#75634a; }
#immersive-enter svg { width:17px; height:17px; }
.immersive-open { overflow:hidden; }
#immersive-stage {
  position:fixed; inset:0; margin:0; padding:0; border:0; width:100vw; height:100dvh; max-width:none; max-height:none; overflow:hidden;
  color:var(--energy-text); background:var(--energy-night); font:inherit; color-scheme:dark;
}
#immersive-stage::backdrop { background:var(--energy-night); }
#immersive-stage[open] { display:block; }
#immersive-heart { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
#immersive-heart .core { position:relative; top:auto; left:auto; transform:none; width:min(660px,75vw,85dvh); max-width:none; margin:0; }
#immersive-heart .core-word,#immersive-heart .core>p { display:none; }
#immersive-heart canvas { display:block; }
#immersive-heart .core canvas { width:100%; height:auto; max-width:none; }
#immersive-presence { position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%); width:min(400px,48vw,53dvh); aspect-ratio:1; border:0; padding:0; border-radius:50%; background:transparent; cursor:pointer; }
#immersive-presence:focus-visible { outline:1px solid #edc48b; outline-offset:12px; }
.immersive-toolbar { position:absolute; z-index:5; left:32px; right:32px; top:24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.immersive-identity { display:flex; flex-direction:column; gap:6px; }
.immersive-identity strong { font-size:16px; letter-spacing:.14em; font-weight:500; }
.immersive-identity span { color:var(--energy-muted); font-size:12px; }
.immersive-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
#immersive-stage button,#immersive-stage .button { min-height:44px; }
.immersive-actions button { background:#24211d; border-color:#595043; color:var(--energy-text); font-size:12px; }
.immersive-toolbar,.immersive-bottom { opacity:0; visibility:hidden; transition:opacity 180ms var(--energy-ease); }
.controls-visible .immersive-toolbar,.controls-visible .immersive-bottom,.immersive-toolbar:focus-within,.immersive-bottom:focus-within { opacity:1; visibility:visible; }
.immersive-bottom { position:absolute; z-index:5; bottom:0; left:0; right:0; background:linear-gradient(transparent,var(--energy-night) 22%); padding:38px 32px 24px; }
.immersive-bottom>p { margin:0 0 12px; display:flex; justify-content:space-between; gap:10px; color:var(--energy-muted); font-size:12px; }
#immersive-dock .voicebar { position:static; border:1px solid #595043; border-radius:12px; background:#1c1a17; padding:12px; margin:auto; max-width:1040px; }
#immersive-dock #chat-input { color:var(--energy-text); background:#141311; }
#immersive-dock #chat-input::placeholder { color:var(--energy-muted); }
.immersive-hint { position:absolute; top:calc(50% + min(260px,32dvh)); width:100%; text-align:center; color:var(--energy-muted); font-size:12px; pointer-events:none; opacity:0; transition:opacity 180ms ease; }
.controls-visible .immersive-hint { opacity:1; }
#immersive-windows { position:absolute; inset:110px 32px 164px; display:grid; grid-template-columns:minmax(240px,330px) 1fr minmax(240px,330px); align-content:start; gap:16px; overflow-y:auto; scrollbar-gutter:stable; pointer-events:none; z-index:3; }
.immersive-window { grid-column:1; align-self:start; background:var(--energy-surface); border:1px solid #595043; border-radius:12px; overflow:hidden; pointer-events:auto; animation:energy-window-arrive var(--energy-enter) var(--energy-ease); }
.immersive-window:nth-child(even) { grid-column:3; }
.immersive-window:nth-child(2) { grid-row:1; }
.immersive-window:nth-child(4) { grid-row:2; }
.immersive-window>header { display:flex; align-items:center; padding:8px 10px 8px 16px; gap:9px; border-bottom:1px solid #454036; }
.immersive-window h2 { margin:0; font-size:14px; font-weight:500; line-height:1.5; overflow-wrap:anywhere; flex:1; }
.immersive-window>header button { border:0; background:transparent; width:44px; flex:none; }
.mission-indicator { width:7px; height:7px; border-radius:50%; background:#edc48b; flex:none; }
.mission-indicator[data-status=waiting_for_approval] { background:#f0c77e; }
.mission-indicator[data-status=failed] { background:#efa8a1; }
.immersive-job-body { padding:14px 16px; overflow-wrap:anywhere; max-height:35dvh; overflow-y:auto; }
.immersive-job-state { margin:0 0 12px; font-size:12px; color:var(--energy-muted); }
.immersive-window[data-status=waiting_for_approval] .immersive-job-state { color:#f0c77e; }
.immersive-tool { padding:12px 0; border-top:1px solid #454036; }
.immersive-tool strong { font-size:12px; color:#edc48b; font-weight:500; }
.immersive-tool p,.immersive-output { margin:7px 0 0; font-size:13px; line-height:1.7; white-space:pre-wrap; }
.immersive-error { color:#efa8a1; white-space:pre-wrap; font-size:13px; }
.immersive-window>footer { display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 16px; }
.immersive-window>footer:empty { display:none; }
.immersive-window footer button,.immersive-window footer .button { font-size:12px; }
.immersive-sheet { position:absolute; z-index:6; right:32px; top:100px; width:min(400px,calc(100vw - 64px)); max-height:calc(100dvh - 280px); overflow-y:auto; padding:20px; background:#1c1a17; border:1px solid #595043; border-radius:12px; }
.immersive-sheet h2 { font-size:18px; margin:0 0 14px; }
.immersive-sheet>button { display:block; text-align:left; width:100%; margin-bottom:8px; padding:12px; }
.immersive-sheet button strong,.immersive-sheet button span { display:block; font-size:13px; }
.immersive-sheet button span { color:var(--energy-muted); margin-top:5px; }
#immersive-messages p { font-size:14px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }
#immersive-messages strong { display:block; color:#edc48b; margin-bottom:5px; }
#immersive-notice { position:absolute; z-index:10; bottom:130px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 40px); padding:14px 18px; border:1px solid #595043; background:#24211d; border-radius:12px; font-size:14px; overflow-wrap:anywhere; }
@keyframes energy-window-arrive { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } }
@media (hover:hover) and (pointer:fine) { .immersive-actions button:hover,.immersive-sheet>button:hover { background:#322d24; } }
@media (max-width:1180px) {
  #immersive-windows { grid-template-columns:minmax(210px,280px) 1fr minmax(210px,280px); gap:12px; inset:110px 20px 174px; }
  #immersive-heart .core { width:min(580px,75vw,80dvh); }
  .immersive-toolbar { left:20px; right:20px; }
}
@media (max-width:720px) {
  .workspace-controls { flex-wrap:wrap; }
  .workspace .core { width:min(360px,100%); }
  .workspace .capture-window,.workspace .result-window { top:auto; }
  .immersive-toolbar { top:16px; left:16px; right:16px; flex-wrap:wrap; }
  .immersive-identity { display:none; }
  .immersive-actions { width:100%; gap:6px; justify-content:space-between; }
  .immersive-actions button { padding:10px; font-size:11px; }
  #immersive-heart .core { width:min(600px,112vw,75dvh); }
  #immersive-stage[data-windows]:not([data-windows="0"]) #immersive-heart { align-items:start; padding-top:36px; }
  #immersive-stage[data-windows]:not([data-windows="0"]) #immersive-heart .core { width:300px; align-self:start; }
  #immersive-stage[data-windows]:not([data-windows="0"]) #immersive-presence { top:178px; width:180px; }
  #immersive-windows { inset:286px 16px 184px; display:flex; flex-direction:column; gap:12px; }
  .immersive-window { flex:none; width:100%; }
  .immersive-job-body { max-height:28dvh; }
  .immersive-bottom { padding:24px 16px 12px; }
  .immersive-bottom>p { font-size:11px; }
  #immersive-dock .voicebar { padding:8px; gap:8px; }
  #immersive-dock #voice-caption { display:none; }
  .immersive-sheet { right:16px; width:calc(100vw - 32px); top:78px; max-height:calc(100dvh - 260px); }
  .immersive-hint { top:calc(50% + 26dvh); }
  #immersive-stage:not([data-windows="0"]) .immersive-hint { display:none; }
  #immersive-notice { bottom:176px; }
}
@media (max-height:560px) and (min-width:721px) { #immersive-windows { inset:84px 20px 118px; } .immersive-bottom { padding:15px 20px 10px; } .immersive-bottom>p { display:none; } }
@media (prefers-reduced-motion:reduce) { .immersive-window { animation:none; } .immersive-toolbar,.immersive-bottom,.immersive-hint { transition:none; } }