@import url("./hud-panel.css");
/* v27 overlay; v26 files remain the exact ?hud=off fallback. Concept: art/hud-concept-*.png. */
html[data-hud="v27"] {
  --hud-bg: #04080f; --hud-cyan: #00e5ff; --hud-cyan-soft: rgba(165,243,252,.55);
  --hud-amber: #f5a623; --hud-gold: rgba(201,168,76,.75); --hud-ink: #f0ede8;
  --hud-ink-dim: #b7c6cb; --hud-red: #ff5a7a;
  --hud-line: rgb(0 229 255 / var(--hud-lines,.5));
  body { font-family: 'Helvetica Neue','Noto Sans JP',system-ui,sans-serif; font-feature-settings: 'palt'; color: var(--hud-ink); }
  #hud-fx, #hud-instruments { display:none; position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:34; }
  body.core :is(#hud-fx,#hud-instruments) { display:block; }
  #hud-fx { fill:none; stroke:var(--hud-line); stroke-width:1; }
  #hud-fx .hf-gold { stroke:var(--hud-gold); }
  #hud-fx .hf-progress { stroke:var(--hud-amber); stroke-width:2; }
  #hud-fx .hf-orbit { animation:hf-boot 1s ease-out both; transform-origin:50% 43%; }
  #hud-fx .hf-active { animation:hf-breathe 4s ease-in-out infinite; }
  #hud-instruments { color:var(--hud-ink-dim); font-size:10px; letter-spacing:.15em; text-shadow:0 1px 2px #04080f; }
  #hud-instruments > * { position:absolute; white-space:pre-line; }
  .hf-brand { top:32px; left:32px; color:var(--hud-ink); letter-spacing:.32em; font-size:16px; }
  .hf-clock { top:64px; left:32px; color:var(--hud-cyan); font-size:40px; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
  .hf-host { top:120px; left:32px; line-height:2; letter-spacing:.08em; }
  .hf-host.hf-stale { opacity:.55; }
  .hf-host.hf-stale::after { content:' · stale'; font-size:9px; letter-spacing:.08em; }
  .hf-links { top:32px; right:32px; max-width:270px; line-height:2; letter-spacing:.08em; }
  .hf-version { right:32px; bottom:16px; text-align:right; font-size:9px; line-height:2; }
  #core-ui { --core-cyan:var(--hud-cyan); --core-amber:var(--hud-amber); --core-line:var(--hud-line); color:var(--hud-ink); }
  #core-ui *, #core-ui *::before, #core-ui *::after { box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; animation:none; }
  #core-ui button { color:var(--hud-ink); border-radius:2px; background:transparent; min-height:44px; }
  #core-ui button:hover:not(:disabled) { background:transparent; border-color:var(--hud-cyan); color:var(--hud-cyan); }
  #core-ui .core-ring { inset:0; width:100%; height:100%; transform:none; border:0; border-radius:0; background:none; }
  #core-node { position:absolute; left:30%; top:auto; bottom:32px; width:40%; max-height:220px; transform:none; padding:0; gap:8px; border:0; border-radius:0; background:none; text-align:left; }
  #core-ui .core-halo, #core-ui .core-glyph { display:none; }
  #core-state { color:var(--hud-ink-dim); font-size:10px; letter-spacing:.16em; }
  #core-reply { color:var(--hud-ink); background:rgba(4,8,15,.55); padding:8px 12px; max-height:80px; font-size:13px; line-height:1.7; letter-spacing:0; text-shadow:0 1px 1px #04080f; pointer-events:auto; }
  #core-chat { order:2; position:relative; border:0; border-top:1px solid var(--hud-line); border-bottom:1px solid var(--hud-line); border-radius:0; padding:0 0 0 48px; background:none; gap:8px; }
  #core-prompt { color:var(--hud-ink); font-size:13px; min-height:48px; }
  #core-prompt::placeholder { color:var(--hud-ink-dim); }
  #core-ui #core-send { min-width:48px; border:0; font-size:22px; }
  #core-ui .core-keys { order:3; justify-content:flex-end; gap:8px; }
  #core-ui .core-keys button { color:var(--hud-ink-dim); padding:0 8px; border:0; font-size:10px; }
  #core-ui #core-mic { position:absolute; bottom:52px; left:0; width:44px; height:48px; font-size:0; }
  #core-mic::before { content:''; display:inline-block; width:8px; height:8px; border:1px solid var(--hud-cyan); border-radius:50%; }
  #core-mic[aria-pressed=true]::before { background:var(--hud-cyan); animation:hf-breathe 4s ease-in-out infinite; }
  #core-node .url-reference { position:fixed; left:5vw; top:calc(74vh + 96px); width:17vw; margin:0; color:var(--hud-ink); pointer-events:auto; }
  #core-node .url-reference[open] { max-height:calc(26vh - 120px); overflow:auto; overscroll-behavior:contain; }
  #core-node .url-reference summary { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-transform:uppercase; letter-spacing:.12em; font-size:10px; }
  #core-node .url-reference :is(form,input,button,details) { background:transparent; border:1px solid var(--hud-line); border-radius:0; box-shadow:none; color:var(--hud-ink); }
  #core-node .url-reference details { margin-top:8px; padding:0 8px; }
  #core-node .url-reference #hud-sessions { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
  #core-node .url-reference .hud-session { flex:none; width:100%; min-height:32px; padding:8px; background:none; border:1px solid var(--hud-line); border-radius:0; color:var(--hud-ink); font-size:10px; text-transform:uppercase; letter-spacing:.12em; text-align:left; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  #core-node .url-reference [hidden] { display:none!important; }
  #core-ui .core-module { position:absolute; left:5%; top:25%; width:17%; height:88px; margin:0; padding:8px 0; transform:none; grid-template-columns:32px minmax(0,1fr); gap:4px 8px; border:0; border-bottom:1px solid var(--hud-line); border-radius:0; background:none; }
  #core-ui .core-module:nth-of-type(2) { top:43%; left:3%; }
  #core-ui .core-module:nth-of-type(3) { top:61%; left:5%; }
  #core-ui .core-module:nth-of-type(4) { top:18%; left:auto; right:5%; }
  #core-ui .core-module:nth-of-type(5) { top:72%; left:auto; right:5%; }
  #core-ui .core-module:nth-of-type(6) { top:74%; left:5%; }
  #core-ui .cm-glyph { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--hud-line); border-radius:50%; font-size:19px; color:var(--hud-cyan); }
  #core-ui .cm-title { text-transform:uppercase; letter-spacing:.15em; font-size:11px; font-weight:500; }
  #core-ui .cm-sub { color:var(--hud-ink-dim); font-size:11px; letter-spacing:0; }
  #core-ui .cm-status { color:var(--hud-cyan); grid-column:2; font-size:11px; letter-spacing:0; }
  #core-ui .cm-alt { position:absolute; right:0; bottom:0; min-width:44px; padding:4px; transform:translateY(100%); color:var(--hud-ink-dim); }
  #core-ui [data-module="communication"] .cm-alt { transform:none; bottom:0; }
  #core-ui [data-module="communication"] .cm-status { max-width:calc(100% - 48px); }
  #core-tracker { left:auto; top:32%; right:24px; bottom:auto; width:20%; max-height:37%; padding:0 0 0 12px; background:none; border:0; border-radius:0; }
  #core-ui .ct-head { margin:0 0 8px; flex-wrap:wrap; font-size:10px; letter-spacing:.14em; }
  #core-ui #ct-clear { padding:0; font-size:10px; color:var(--hud-ink-dim); }
  #ct-count { color:var(--hud-ink-dim); }
  #ct-list { gap:16px; }
  #core-ui .ct-task { position:relative; padding:0 0 0 12px; background:none; border:0; border-left:1px solid var(--hud-line); border-radius:0; }
  #core-ui .ct-title { font-size:12px; color:var(--hud-ink); font-weight:500; }
  #core-ui .ct-stages { margin:8px 0; gap:4px; }
  #core-ui .ct-stages li { padding:4px 0; border-width:1px; color:var(--hud-ink-dim); background:none; }
  #core-ui .ct-stages li.reached { color:var(--hud-cyan); background:none; }
  #core-ui .ct-stages li.failed { color:var(--hud-red); background:none; border-color:var(--hud-red); }
  #core-ui .ct-meta { color:var(--hud-ink); font-variant-numeric:tabular-nums; }
  #core-ui .ct-activity, #core-ui .ct-empty { color:var(--hud-ink-dim); }
  #core-ui .ct-actions, #core-ui .se-actions { margin-top:4px; gap:8px; }
  #core-ui .ct-actions button, #core-ui .se-actions button { border:0; padding:0 4px; }
  #core-ui .ct-task:not(:hover):not(:focus-within) :is(.ct-stages,.ct-activity) { display:none; }
  #core-ui .ct-task[data-state=failed] { border-color:var(--hud-red); }
  #core-ui .staged-error p.se-headline { color:var(--hud-red); }
  #core-ui .staged-error p.se-detail { color:var(--hud-ink-dim); }
  body.core #hud { top:178px; left:32px; max-width:23%; padding:0; background:none; border:0; backdrop-filter:none; -webkit-backdrop-filter:none; font-size:11px; }
  body.core #hud > #hud-sessions { display:none; }
  body.core #hud :is(.hud-row,.hud-keys,#hud-reply,#hud-state,#hud-dot,#hud-agents) { display:none; }
  body.core #hud .hud-session { background:none; color:var(--hud-ink-dim); min-height:44px; }
  body.core #voice-jarvis { display:none; }
  body.core :is(.scene-label,.local-stats) { display:none; }
  /* Optical edge falloff, continuous over the room rather than rectangular UI surfaces. */
  body.core .vignette { display:block; opacity:1; z-index:3; background:linear-gradient(180deg,rgba(4,8,15,.86),transparent 28%,transparent 68%,rgba(4,8,15,.88)),linear-gradient(90deg,rgba(4,8,15,.88),rgba(4,8,15,.65) 22%,transparent 30%,transparent 70%,rgba(4,8,15,.7) 78%,rgba(4,8,15,.92)); }
  #core-ui :is(.cm-title,.cm-sub,.cm-status,.ct-title,.ct-state,.ct-activity,.core-keys), #core-prompt { text-shadow:0 1px 1px #04080f; }
  #core-ui #ct-clear { border:0; }
  body.core #toast { bottom:16px; padding:4px 12px; border:0; background:rgba(4,8,15,.55); }
  body.core #asset-loading { top:auto; bottom:12px; left:32px; right:auto; background:none; font:10px/1.6 inherit; }
  body.core:has(#core-ui[data-activity=speaking]) #hud-fx .hf-orbit { stroke:var(--hud-cyan); }
  @media (width < 1000px) {
    .hf-host { font-size:9px; }
    #core-node .url-reference { left:2vw; width:22vw; }
    #core-ui .cm-title { font-size:10px; letter-spacing:.05em; }
    #core-ui .cm-sub { font-size:10px; }
    #core-tracker { right:16px; width:24%; }
    #core-ui .core-module { width:22%; left:2%; }
    #core-ui .core-module:nth-of-type(2) { left:2%; }
    #core-ui .core-module:nth-of-type(3), #core-ui .core-module:nth-of-type(6) { left:2%; }
    #core-ui .core-module:nth-of-type(4), #core-ui .core-module:nth-of-type(5) { right:2%; }
    .hf-links { max-width:220px; font-size:9px; }
  }
  @media (width < 760px) {
    .hf-brand { top:20px; left:16px; font-size:12px; }
    .hf-clock { top:48px; left:16px; font-size:28px; }
    .hf-host { top:88px; left:16px; }
    .hf-links { right:16px; top:20px; max-width:45%; }
    .hf-version { right:16px; bottom:4px; font-size:8px; }
    #hud-fx .hf-orbit, #hud-fx .hf-leaders, #hud-fx .hf-active { opacity:.35; }
    #core-ui .core-ring { display:block; overflow:visible; padding:0; }
    #core-ui .core-module { width:44%; height:72px; top:22%; left:16px; }
    #core-ui .core-module:nth-of-type(2) { top:34%; left:16px; }
    #core-ui .core-module:nth-of-type(3) { top:46%; left:16px; }
    #core-ui .core-module:nth-of-type(4) { top:22%; right:16px; }
    #core-ui .core-module:nth-of-type(5) { top:34%; right:16px; }
    #core-ui .core-module:nth-of-type(6) { top:46%; left:auto; right:16px; }
    #core-ui .cm-alt { transform:none; bottom:0; }
    #core-ui .cm-status { max-width:calc(100% - 32px); }
    #core-tracker { top:61%; bottom:auto; left:16px; right:16px; width:auto; height:12%; max-height:12%; padding:0; }
    #core-node { left:16px; bottom:24px; width:calc(100% - 32px); max-height:22%; margin:0; padding:0; }
    #core-reply { max-height:48px; font-size:12px; }
    #core-state { display:none; }
    #core-ui .core-keys button { min-height:44px; }
    #core-node .url-reference { left:calc(50vw + 0px); top:calc(46vh + 80px); width:calc(50vw - 16px); }
    #core-node .url-reference[open] { max-height:calc(15vh - 88px); }
    body.core #hud { top:136px; left:16px; max-width:90%; }
  }
  @media (prefers-reduced-motion:reduce) { #hud-fx .hf-orbit, #hud-fx .hf-active, #core-mic::before { animation:none!important; } }
}
@keyframes hf-boot { from { opacity:0; transform:scale(.94); } to { opacity:1; transform:scale(1); } }
@keyframes hf-breathe { 0%,100% { opacity:.45; } 50% { opacity:1; } }

html[data-hud="v27"] .hf-dock-wire { stroke:var(--hud-cyan); animation:hp-open .4s ease-out both; }
@media(prefers-reduced-motion:reduce) {
  html[data-hud="v27"] .hf-dock-wire { animation:none; }
}
/* Text-only backing also survives bright moving holograms on hardware GL. */
html[data-hud="v27"] :is(.cm-title,.cm-sub,.cm-status,.hf-clock,.hf-host,.hf-links,.ct-title,.ct-state) { background:rgba(4,8,15,.72); }