/* ALFRED system layer — additive, does not touch app.js */
#sysdock{position:fixed;top:30px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:6000;
 background:rgba(8,18,30,.78);border:1px solid #1d4a66;border-radius:30px;padding:5px 8px;backdrop-filter:blur(6px);box-shadow:0 0 24px rgba(56,225,255,.18)}
.sysbtn{font:600 11px/1 Rajdhani,system-ui,sans-serif;letter-spacing:1.5px;color:#7fb9d6;background:transparent;border:1px solid transparent;
 padding:7px 11px;border-radius:20px;cursor:pointer;transition:.15s;text-transform:uppercase}
.sysbtn:hover{color:#7af0ff;border-color:#2a6f93;box-shadow:0 0 12px rgba(56,225,255,.25)}
.sysbtn.on{color:#04121c;background:linear-gradient(180deg,#7af0ff,#2bbbe0);border-color:#7af0ff}
.sysbtn.mute{color:#5d7a93}
.sys-win{position:fixed;min-width:300px;min-height:200px;background:linear-gradient(180deg,#0a1320,#0c1726);border:1px solid #1d4a66;border-radius:12px;
 z-index:5000;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 30px rgba(56,225,255,.12),inset 0 0 40px rgba(8,20,34,.6);resize:both}
.sys-win .bar{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:move;border-bottom:1px solid #16324a;
 background:linear-gradient(90deg,rgba(20,50,74,.6),transparent);user-select:none}
.sys-win .bar b{font:700 11px/1 Orbitron,monospace;letter-spacing:2px;color:#38e1ff;flex:1;text-transform:uppercase}
.sys-win .bar i{width:13px;height:13px;border-radius:50%;display:inline-block;cursor:pointer;border:1px solid #2a6f93}
.sys-win .bar .wmin{background:#1b3850}.sys-win .bar .wcls{background:#5a2230;border-color:#a33}
.sys-win .body{flex:1;min-height:0;overflow:auto;padding:11px;color:#cfe8f6;font:13px/1.5 Rajdhani,system-ui,sans-serif;display:flex;flex-direction:column;gap:9px}
.sw-out{flex:1;min-height:90px;background:#03070d;border:1px solid #16324a;border-radius:8px;padding:9px;
 font:12px/1.45 ui-monospace,Consolas,monospace;white-space:pre-wrap;color:#bfe6d8;overflow:auto}
.sw-row{display:flex;gap:7px}
.sw-row input,.sw-row select,.sw-row textarea,.sw-in{font:inherit;color:#cfe8f6;background:#08111d;border:1px solid #16324a;border-radius:8px;padding:7px 9px;outline:none}
.sw-in:focus,.sw-row input:focus,.sw-row textarea:focus{border-color:#38e1ff;box-shadow:0 0 14px rgba(56,225,255,.25)}
.sw-btn{font:600 12px/1 Rajdhani;letter-spacing:1px;color:#38e1ff;background:#08111d;border:1px solid #16324a;border-radius:8px;padding:7px 12px;cursor:pointer}
.sw-btn:hover{background:#0c1a2c;border-color:#38e1ff}
.sw-tile{display:flex;align-items:center;gap:9px;padding:8px 9px;border:1px solid #16324a;border-radius:8px;cursor:pointer;background:rgba(13,24,40,.5)}
.sw-tile:hover{border-color:#38e1ff;box-shadow:0 0 14px rgba(56,225,255,.2)}
.sw-tile .nm{font-weight:600}.sw-tile .sm{font-size:11px;color:#5d7a93}.sw-tile .meta{margin-left:auto;font-size:10px;color:#5d7a93;text-transform:uppercase}
.sw-item{font-size:12px;padding:5px 8px;border-left:2px solid #16324a;color:#cfe8f6}
.sw-item:hover{border-left-color:#38e1ff;color:#7af0ff}
.sw-kpi{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sw-kpi .k{background:rgba(13,24,40,.6);border:1px solid #16324a;border-radius:9px;padding:9px}
.sw-kpi .k b{display:block;font-size:18px;color:#7af0ff}.sw-kpi .k span{font-size:10px;color:#5d7a93;text-transform:uppercase;letter-spacing:1px}
.sw-kpi .k.live b{color:#39e0a0}
.sw-dot{width:8px;height:8px;border-radius:50%;background:#5d7a93;box-shadow:0 0 8px currentColor;flex:0 0 auto}
.sw-dot.green{background:#39e0a0;color:#39e0a0}.sw-dot.amber{background:#ffb648;color:#ffb648}.sw-dot.red{background:#ff5a6e;color:#ff5a6e}
.sw-note{font-size:11px;color:#5d7a93}
.sw-spin{animation:swp 1.1s infinite}@keyframes swp{50%{opacity:.4}}
.sys-bootfx{position:fixed;inset:0;pointer-events:none;z-index:4000;background:repeating-linear-gradient(0deg,rgba(56,225,255,.05) 0,rgba(56,225,255,.05) 1px,transparent 2px,transparent 4px);opacity:0;transition:opacity .4s}
.sys-bootfx.show{opacity:1;animation:scan 1.4s ease-out}@keyframes scan{0%{transform:translateY(-100%)}100%{transform:translateY(0)}}
/* Sam: hide centre greeting + spoken caption, keep orb + bottom-right status */
#greet,#sub,#subtitle{display:none!important;}


/* ================= STAGE v2 ================= */
.side,.centre{transition:opacity .35s ease,transform .35s ease}
body.stage-on .side.left{opacity:0;pointer-events:none;transform:translateX(-36px)}
body.stage-on .side.right{opacity:0;pointer-events:none;transform:translateX(36px)}
body.stage-on .centre{opacity:0;pointer-events:none}
#stage{position:fixed;top:76px;left:14px;right:112px;bottom:100px;z-index:3000;display:flex;flex-direction:column;
 opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .35s ease,transform .35s ease,visibility .35s}
body.stage-on #stage{opacity:1;visibility:visible;transform:none}
#stage .sg-head{display:flex;align-items:center;gap:14px;padding:12px 18px;border:1px solid #1d4a66;border-bottom:1px solid #38e1ff55;
 border-radius:14px 14px 0 0;background:linear-gradient(90deg,rgba(20,50,74,.75),rgba(10,19,32,.3));position:relative;overflow:hidden}
#stage .sg-head::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:40%;background:linear-gradient(90deg,#7af0ff,transparent);
 animation:sghl 3.2s linear infinite}
@keyframes sghl{0%{transform:translateX(-40%)}100%{transform:translateX(260%)}}
#stage .sg-title{font:700 15px/1 Orbitron,monospace;letter-spacing:3px;color:#7af0ff;text-transform:uppercase;text-shadow:0 0 14px rgba(122,240,255,.5)}
#stage .sg-title::before{content:'◢ ';color:#2bbbe0}
#stage .sg-sub{font:500 12px/1 Rajdhani;color:#5d7a93;letter-spacing:1.2px;flex:1}
#stage .sg-body{flex:1;min-height:0;border:1px solid #1d4a66;border-top:none;border-radius:0 0 14px 14px;position:relative;
 background:radial-gradient(1100px 500px at 30% 0%,rgba(16,38,58,.55),rgba(5,10,17,.92));backdrop-filter:blur(5px);
 padding:16px 18px 12px;overflow:hidden;display:flex;flex-direction:column;gap:12px}
#stage .sg-body::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.4;
 background:repeating-linear-gradient(0deg,rgba(56,225,255,.025) 0 1px,transparent 1px 4px)}
/* hero gauges */
.sg-hero{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sg-g{position:relative;display:flex;align-items:center;gap:12px;padding:14px 14px;border:1px solid #16324a;background:rgba(11,22,38,.72);
 clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
 opacity:0;animation:sgin .5s ease forwards}
.sg-g:nth-child(2){animation-delay:.08s}.sg-g:nth-child(3){animation-delay:.16s}.sg-g:nth-child(4){animation-delay:.24s}
@keyframes sgin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sg-g::before{content:'';position:absolute;top:5px;right:5px;width:12px;height:12px;border-top:2px solid #38e1ff88;border-right:2px solid #38e1ff88}
.sg-g::after{content:'';position:absolute;bottom:5px;left:5px;width:12px;height:12px;border-bottom:2px solid #38e1ff44;border-left:2px solid #38e1ff44}
.sg-ringwrap{position:relative;width:58px;height:58px;flex:0 0 auto}
.sg-ring{width:58px;height:58px;filter:drop-shadow(0 0 6px rgba(56,225,255,.45))}
.sg-ring .fg{transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.3,1)}
.sg-ringpct{position:absolute;inset:0;display:grid;place-items:center;font:700 10px Orbitron;color:#7fb9d6}
.sg-gnum{font:800 30px/1.05 Orbitron,monospace;color:#7af0ff;text-shadow:0 0 16px rgba(122,240,255,.4);white-space:nowrap}
.sg-gnum.hot{color:#39e0a0;text-shadow:0 0 16px rgba(57,224,160,.4)}
.sg-gnum.warn{color:#ffb648;text-shadow:0 0 16px rgba(255,182,72,.4)}
.sg-gnum.dim{color:#3d586e;text-shadow:none}
.sg-glab{font:600 10px Rajdhani;letter-spacing:2px;color:#5d7a93;text-transform:uppercase;margin-top:3px}
.sg-gnote{font:500 9px Rajdhani;letter-spacing:1px;color:#3d586e;text-transform:uppercase}
/* mid band */
.sg-mid{flex:1;min-height:0;display:grid;grid-template-columns:2.1fr 1fr;gap:12px}
.sg-sig{position:relative;border:1px solid #16324a;background:rgba(8,16,28,.6);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
 display:flex;flex-direction:column;opacity:0;animation:sgin .5s .3s ease forwards}
.sg-sig .sg-sighead{display:flex;justify-content:space-between;padding:9px 13px 0;font:600 10px Rajdhani;letter-spacing:2px;color:#5d7a93;text-transform:uppercase}
.sg-sig .sg-sighead b{color:#38e1ff;font-weight:600}
.sg-sig canvas{flex:1;width:100%;min-height:0}
.sg-side{display:flex;flex-direction:column;gap:12px;min-height:0;opacity:0;animation:sgin .5s .38s ease forwards}
.sg-card{border:1px solid #16324a;background:rgba(11,22,38,.72);padding:12px 14px;position:relative;
 clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.sg-card h4{margin:0 0 6px;font:600 10px Rajdhani;letter-spacing:2.2px;color:#5d7a93;text-transform:uppercase}
.sg-card h4 b{color:#38e1ff;font-weight:600}
.sg-card .big{font:700 17px Rajdhani;color:#cfe8f6;letter-spacing:.5px}
.sg-card .big em{font-style:normal;color:#39e0a0}
.sg-card .big strong{color:#ffb648}
.sg-bars{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.sg-bar{display:flex;flex-direction:column;gap:3px}
.sg-bar .l{display:flex;justify-content:space-between;font:600 10px Rajdhani;letter-spacing:1.6px;color:#5d7a93;text-transform:uppercase}
.sg-bar .l b{color:#7fb9d6;font-weight:600}
.sg-bar .t{height:5px;background:rgba(22,50,74,.6);border-radius:3px;overflow:hidden}
.sg-bar .f{height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#2bbbe0,#7af0ff);box-shadow:0 0 8px rgba(56,225,255,.6);transition:width 1.1s cubic-bezier(.2,.7,.3,1)}
.sg-bar .f.warn{background:linear-gradient(90deg,#b96a1b,#ffb648);box-shadow:0 0 8px rgba(255,182,72,.5)}
/* ticker */
.sg-tick{flex:0 0 26px;display:flex;align-items:center;overflow:hidden;border-top:1px solid #16324a;position:relative}
.sg-tick .in{display:flex;gap:42px;white-space:nowrap;font:600 11px Rajdhani;letter-spacing:2px;color:#5d7a93;text-transform:uppercase;
 animation:sgt 26s linear infinite;padding-left:100%}
.sg-tick .in b{color:#38e1ff;font-weight:600}.sg-tick .in em{font-style:normal;color:#39e0a0}.sg-tick .in strong{color:#ffb648}
@keyframes sgt{to{transform:translateX(-100%)}}
.sg-iframe{flex:1;min-height:200px;border:1px solid #16324a;border-radius:10px;background:#03070d;width:100%}
.sg-agentwrap{flex:1;display:flex;flex-direction:column;gap:10px;min-height:0}
.sg-note{font:500 13px Rajdhani;color:#9fc3da}
/* ============ RIGHT SPINE ============ */
#spine{position:fixed;top:76px;right:12px;bottom:100px;width:86px;z-index:4500;display:flex;flex-direction:column;align-items:center;gap:16px;
 padding:16px 0;border:1px solid #1d4a66;border-radius:16px;background:rgba(8,18,30,.82);backdrop-filter:blur(6px);
 opacity:0;visibility:hidden;transform:translateX(24px);transition:opacity .35s ease,transform .35s ease,visibility .35s;box-shadow:0 0 26px rgba(56,225,255,.14)}
body.stage-on #spine{opacity:1;visibility:visible;transform:none}
#spine .core{width:44px;height:44px;border-radius:50%;border:2px solid #38e1ff;position:relative;flex:0 0 auto;
 background:radial-gradient(circle at 50% 45%,rgba(122,240,255,.5),rgba(8,18,30,.2) 65%);box-shadow:0 0 18px rgba(56,225,255,.5);animation:corep 3.2s infinite}
@keyframes corep{50%{box-shadow:0 0 32px rgba(56,225,255,.9)}}
#spine.speaking .core{animation-duration:1.1s}
#spine .wavebars{display:flex;gap:3px;align-items:center;height:36px;flex:0 0 auto}
#spine .wavebars i{width:4px;height:7px;background:#2bbbe0;border-radius:2px}
#spine.speaking .wavebars i{animation:wb .5s infinite ease-in-out}
#spine .wavebars i:nth-child(2){animation-delay:.08s}#spine .wavebars i:nth-child(3){animation-delay:.16s}
#spine .wavebars i:nth-child(4){animation-delay:.24s}#spine .wavebars i:nth-child(5){animation-delay:.32s}
@keyframes wb{50%{height:30px}}
#spine .sp-clock{font:700 12px Orbitron,monospace;color:#7fb9d6;letter-spacing:1px;writing-mode:vertical-rl;flex:1;display:flex;align-items:center}
#spine .sp-home{font:700 10px Rajdhani;letter-spacing:2px;color:#38e1ff;background:#08111d;border:1px solid #16324a;border-radius:9px;padding:8px 6px;cursor:pointer;writing-mode:vertical-rl}
#spine .sp-home:hover{border-color:#38e1ff;box-shadow:0 0 12px rgba(56,225,255,.3)}

/* ================= VIEWPORT — docking clamp live view ================= */
#viewport{position:fixed;top:70px;left:12px;right:12px;bottom:96px;z-index:4800;visibility:hidden;opacity:0;transform:scale(.985);
 transition:opacity .3s,transform .45s ease,visibility .3s;border:1px solid #1d4a66;border-radius:14px;overflow:hidden;
 background:rgba(4,8,14,.92);box-shadow:0 0 44px rgba(56,225,255,.16),inset 0 0 60px rgba(8,20,34,.5)}
body.view-on #viewport{visibility:visible;opacity:1;transform:none}
body.view-on .side.left,body.view-on .side.right,body.view-on .centre{opacity:0;pointer-events:none}
#viewport .vp-head{position:absolute;top:0;left:0;right:0;height:42px;display:flex;align-items:center;gap:12px;padding:0 16px;z-index:3;
 background:linear-gradient(180deg,rgba(8,18,30,.95),rgba(8,18,30,.7));border-bottom:1px solid #1d4a66}
#viewport .vp-title{font:700 13px/1 Orbitron,monospace;letter-spacing:3px;color:#7af0ff;text-shadow:0 0 12px rgba(122,240,255,.45)}
#viewport .vp-title::before{content:'◢ ';color:#2bbbe0}
#viewport .vp-url{flex:1;font:500 11px/1 Rajdhani;letter-spacing:1px;color:#5d7a93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#viewport .vp-body{position:absolute;inset:0;padding-top:42px;display:flex}
.vp-frame{flex:1;width:100%;height:100%;border:0;background:#0a0f16}
#viewport .sg-agentwrap{flex:1;padding:14px}
.vpc{position:absolute;width:38px;height:38px;z-index:5;opacity:0;transition:opacity .16s,transform .3s ease;pointer-events:none}
.vpc.c1{top:-2px;left:-2px;border-top:3px solid #7af0ff;border-left:3px solid #7af0ff;transform:translate(-22px,-22px)}
.vpc.c2{top:-2px;right:-2px;border-top:3px solid #7af0ff;border-right:3px solid #7af0ff;transform:translate(22px,-22px);transition-delay:.07s}
.vpc.c3{bottom:-2px;left:-2px;border-bottom:3px solid #7af0ff;border-left:3px solid #7af0ff;transform:translate(-22px,22px);transition-delay:.14s}
.vpc.c4{bottom:-2px;right:-2px;border-bottom:3px solid #7af0ff;border-right:3px solid #7af0ff;transform:translate(22px,22px);transition-delay:.21s}
.vpe{position:absolute;height:3px;width:64px;background:#7af0ff;left:50%;margin-left:-32px;z-index:5;opacity:0;transition:opacity .2s .3s;pointer-events:none;box-shadow:0 0 10px rgba(122,240,255,.7)}
.vpe.e1{top:-1px}.vpe.e2{bottom:-1px}
#viewport.clamping .vpc,#viewport.docked .vpc{opacity:1;transform:none}
#viewport.clamping .vpe,#viewport.docked .vpe{opacity:1}
#viewport.docked .vpc{opacity:.75}
#viewport.absorbing{transform-origin:96% 112%;transform:scale(.015);opacity:0;
 transition:transform .52s cubic-bezier(.55,-.05,.85,.35),opacity .45s .05s}
#cornerAl{position:fixed;right:26px;bottom:26px;z-index:6200;display:none;flex-direction:column;align-items:center;gap:5px;cursor:pointer}
body.view-on #cornerAl{display:flex}
.ca-core{width:36px;height:36px;border-radius:50%;border:2px solid #38e1ff;flex:0 0 auto;
 background:radial-gradient(circle at 50% 45%,rgba(122,240,255,.55),rgba(8,18,30,.25) 65%);box-shadow:0 0 16px rgba(56,225,255,.5);animation:corep 3s infinite;transition:.25s}
#cornerAl.speaking .ca-core{animation-duration:1s}
#cornerAl.busy .ca-core{border-color:#ffb648;box-shadow:0 0 18px rgba(255,182,72,.65)}
#cornerAl.flash .ca-core{box-shadow:0 0 40px rgba(122,240,255,1);transform:scale(1.25)}
.ca-bars{display:flex;gap:2px;height:12px;align-items:center}
.ca-bars i{width:3px;height:5px;background:#2bbbe0;border-radius:1px}
#cornerAl.speaking .ca-bars i{animation:wb .5s infinite}
.ca-bars i:nth-child(2){animation-delay:.1s}.ca-bars i:nth-child(3){animation-delay:.2s}
.vp-mirror{flex:1;overflow:auto;padding:28px 38px}
.vp-mtitle{font:700 13px Orbitron,monospace;letter-spacing:3px;color:#38e1ff;margin-bottom:14px;text-shadow:0 0 10px rgba(56,225,255,.4)}
.vp-mtitle::before{content:'◢ ';color:#2bbbe0}
.vp-mtext{font:500 15px/1.85 Rajdhani,system-ui;color:#cfe8f6;max-width:940px;white-space:pre-wrap}
.vp-mnote{font:600 10px Rajdhani;letter-spacing:2px;color:#5d7a93;margin-top:16px;text-transform:uppercase}

/* Sam 2026-06-04: ring bounces as ALFRED's voice; centre core stays calm */
@keyframes ringbounce{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
#orb.speaking i{animation:ringbounce .55s ease-in-out infinite!important}
#orb.speaking i:nth-child(2){animation-delay:.09s!important}
#orb.speaking i:nth-child(3){animation-delay:.18s!important}
#orb.speaking i:nth-child(4){animation-delay:.27s!important}
#orb.speaking .pulse,#orb.speaking .hex,#orb.speaking .hex2{animation:none!important;transform:none!important}
/* Sam 2026-06-04: mic waveform docks just above the command bar */
.wave{position:fixed!important;left:50%!important;bottom:96px!important;top:auto!important;transform:translateX(-50%)!important;margin:0!important;z-index:4000!important}