:root{--cy:#46f0ff;--cy2:#3ad2ee;--gold:#ffd27a;--bg:#02060c;--ink:#eefaff;--dim:#a9cee0;--red:#ff5d5d;--amb:#ffb547;--grn:#46e8a0}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:radial-gradient(1400px 820px at 50% -14%,#0a1c2b 0%,var(--bg) 60%);color:var(--ink);font-family:'Rajdhani',system-ui,sans-serif;overflow:hidden}
.grid-bg{position:fixed;inset:0;background-image:linear-gradient(rgba(70,240,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(70,240,255,.045) 1px,transparent 1px);background-size:46px 46px;mask:radial-gradient(circle at 50% 42%,#000 24%,transparent 80%);z-index:0}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:3;box-shadow:inset 0 0 240px 60px rgba(0,0,0,.85)}
.graph{position:fixed;inset:0;width:100vw;height:100vh;z-index:1;pointer-events:none}
/* corner brackets */
.frame .c{position:fixed;width:42px;height:42px;border:2px solid rgba(70,240,255,.5);z-index:4}
.frame .tl{top:14px;left:14px;border-right:0;border-bottom:0}.frame .tr{top:14px;right:14px;border-left:0;border-bottom:0}
.frame .bl{bottom:14px;left:14px;border-right:0;border-top:0}.frame .br{bottom:14px;right:14px;border-left:0;border-top:0}
.tag{position:fixed;top:16px;left:50%;transform:translateX(-50%);font-family:'Orbitron';font-size:9px;letter-spacing:4px;color:var(--dim);z-index:5}.tag b{color:var(--cy)}
.gear{position:fixed;top:26px;left:26px;color:var(--dim);cursor:pointer;z-index:6;font-size:20px}
.gear.need{color:var(--gold);animation:gpulse 1.1s ease-in-out infinite}@keyframes gpulse{50%{text-shadow:0 0 18px var(--gold);transform:scale(1.2)}}

.wrap{position:relative;z-index:2;height:100vh;display:grid;grid-template-columns:260px 1fr 320px;gap:18px;padding:20px 20px 96px}
.side{display:flex;flex-direction:column;gap:16px;min-height:0}
.grow{flex:1;min-height:0}
.panel{border:1px solid rgba(70,240,255,.34);background:linear-gradient(180deg,rgba(12,30,42,.62),rgba(7,18,28,.46));border-radius:14px;position:relative;overflow:hidden}
.panel::after{content:'';position:absolute;left:0;top:0;width:24px;height:2px;background:var(--cy);box-shadow:0 0 10px var(--cy)}
.lbl{font-family:'Orbitron';font-size:9px;letter-spacing:3px;color:var(--cy2);text-transform:uppercase;padding:11px 14px 7px;border-bottom:1px solid rgba(70,240,255,.1);display:flex;justify-content:space-between}
.lbl .x{color:var(--dim);cursor:pointer}
.hud-id{text-align:center;padding-bottom:14px}
.ring{width:104px;height:104px;margin:14px auto 6px;border-radius:50%;border:2px solid rgba(70,240,255,.2);position:relative;display:grid;place-items:center}
.ring::after{content:'';position:absolute;inset:-6px;border-radius:50%;border-top:2px solid var(--cy);border-right:2px solid transparent;animation:spin 4s linear infinite}
.ring span{font-family:'Orbitron';font-weight:900;font-size:24px;color:var(--cy);text-shadow:0 0 16px var(--cy)}
@keyframes spin{to{transform:rotate(360deg)}}
.op{display:flex;gap:8px;justify-content:center;margin-top:8px}.op b{cursor:pointer;font-family:'Orbitron';font-size:9px;letter-spacing:2px;padding:5px 12px;border:1px solid rgba(70,240,255,.25);border-radius:20px;color:var(--dim)}.op b.on{color:var(--bg);background:var(--cy);box-shadow:0 0 16px var(--cy)}
.clock{font-family:'Orbitron';font-size:13px;color:var(--cy);letter-spacing:2px;margin-top:10px}
.src{padding:6px 14px;font-size:13.5px;overflow-y:auto;max-height:100%}
.src div{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed rgba(70,240,255,.07)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:7px}.g{background:var(--grn);box-shadow:0 0 8px var(--grn)}.a{background:var(--amb);box-shadow:0 0 8px var(--amb)}.r{background:var(--red);box-shadow:0 0 8px var(--red)}.u{background:var(--dim)}

/* CENTRE — transparent so the BRAIN shows through */
.centre{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;position:relative}
.orb{width:280px;height:280px;position:relative;display:grid;place-items:center;flex:0 0 auto}
.orb i{position:absolute;border-radius:50%;border:1px solid rgba(70,240,255,.32)}
.orb i:nth-child(1){inset:0;animation:spin 18s linear infinite}
.orb i:nth-child(2){inset:30px;border-style:dashed;animation:spin 12s linear infinite reverse}
.orb i:nth-child(3){inset:64px;border-color:rgba(255,210,122,.32);animation:spin 24s linear infinite}
.orb i:nth-child(4){inset:96px;border-color:rgba(70,240,255,.5);border-style:dotted;animation:spin 8s linear infinite}
.hex{position:absolute;width:150px;height:150px;border:1px solid rgba(70,240,255,.38);clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0% 50%);animation:spin 28s linear infinite}
.hex2{width:200px;height:200px;border-color:rgba(255,210,122,.22);animation:spin 38s linear infinite reverse}
.orb .pulse{width:104px;height:104px;border-radius:50%;background:radial-gradient(circle,var(--cy) 0%,rgba(70,240,255,.16) 55%,transparent 72%);box-shadow:0 0 60px var(--cy);transition:transform .06s ease-out}
.orb.speaking .pulse{background:radial-gradient(circle,var(--gold) 0%,rgba(255,210,122,.18) 55%,transparent 72%);box-shadow:0 0 80px var(--gold)}
.orb.speaking .hex{border-color:rgba(255,210,122,.7)}
.orb::after{content:'';position:absolute;width:7px;height:7px;border-radius:50%;background:#eaffff;box-shadow:0 0 12px #fff,0 0 26px var(--cy)}
.wave{display:flex;align-items:center;gap:3px;height:38px}.wave b{width:4px;height:8px;background:var(--cy);border-radius:2px;box-shadow:0 0 8px var(--cy);transition:height .07s}
.greet{font-family:'Orbitron';font-size:24px;font-weight:800;letter-spacing:3px;color:#eafcff;text-shadow:0 0 20px rgba(70,240,255,.6);min-height:28px}
.sub{color:var(--dim);font-size:14px;letter-spacing:1px}
.subtitle{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);width:90%;max-width:780px;margin:0;text-align:center;font-size:20px;line-height:1.45;color:#eafcff;text-shadow:0 0 16px rgba(70,240,255,.45);min-height:30px;opacity:0;transition:opacity .25s;z-index:60;pointer-events:none}
.subtitle.show{opacity:1}

.plist{padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow-y:auto;max-height:calc(100% - 38px)}
.tile{cursor:pointer;border:1px solid rgba(70,240,255,.34);border-radius:10px;padding:9px;background:rgba(12,30,42,.62);transition:.16s}
.tile:hover{border-color:var(--cy);box-shadow:0 0 18px rgba(70,240,255,.28);transform:translateY(-2px)}
.tile.busy{animation:busy .7s ease-in-out infinite}@keyframes busy{50%{box-shadow:0 0 22px var(--gold);border-color:var(--gold)}}
.tile .t{font-family:'Orbitron';font-size:9px;letter-spacing:1px;color:#dff7ff}.tile .s{font-size:11px;color:var(--dim);margin-top:3px}
.tile.new{grid-column:1/3;text-align:center;border-style:dashed;color:var(--gold)}
.briefpanel{padding:10px 12px;display:flex;flex-direction:column;gap:6px;max-height:46%}
.stats{display:flex;gap:6px;flex-wrap:wrap}.stat{flex:1;min-width:60px;border:1px solid rgba(70,240,255,.14);border-radius:7px;padding:6px;text-align:center}.stat b{display:block;font-family:'Orbitron';font-size:15px;color:var(--cy)}.stat span{font-size:9px;letter-spacing:1px;color:var(--dim)}
.briefbody{font-size:13px;line-height:1.45;color:#bfe7f5}.leak{color:var(--amb);font-weight:600}
.feed{flex:1;overflow-y:auto;font-size:12.5px;color:var(--dim);min-height:40px}.feed .me{color:#eafcff}.feed .al{color:var(--cy)}.feed p{padding:2px 0}

.cmd{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;width:min(780px,74vw);display:flex;align-items:center;gap:12px;padding:9px 14px;border:1px solid rgba(70,240,255,.32);border-radius:40px;background:rgba(4,12,20,.9);box-shadow:0 0 34px rgba(70,240,255,.16);z-index:6}
.mic{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle,var(--cy),var(--cy2));display:grid;place-items:center;flex:0 0 auto;cursor:pointer;font-size:18px;color:#022}.mic.live{animation:listen 1.5s ease-out infinite}@keyframes listen{0%{box-shadow:0 0 0 0 rgba(70,240,255,.5)}100%{box-shadow:0 0 0 18px rgba(70,240,255,0)}}
.cmd input{flex:1;background:transparent;border:0;outline:0;color:var(--ink);font-family:'Rajdhani';font-size:17px}.cmd .hint{font-family:'Orbitron';font-size:9px;color:var(--cy2);letter-spacing:2px;white-space:nowrap}
.toast{position:fixed;bottom:92px;left:50%;transform:translateX(-50%);background:rgba(6,20,30,.96);border:1px solid var(--cy);border-radius:10px;padding:10px 18px;font-family:'Orbitron';font-size:11px;letter-spacing:1px;color:var(--cy);opacity:0;transition:.3s;pointer-events:none;box-shadow:0 0 24px rgba(70,240,255,.3);z-index:7}.toast.show{opacity:1;bottom:102px}
.boot{position:fixed;inset:0;background:var(--bg);z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;font-family:'Orbitron';transition:opacity .8s}.boot.gone{opacity:0;pointer-events:none}
.boot .big{font-size:46px;letter-spacing:12px;color:var(--cy);text-shadow:0 0 28px var(--cy)}.boot .log{font-family:'Rajdhani';font-size:13px;color:var(--dim);height:96px;width:400px;overflow:hidden}.boot .log p{opacity:0;animation:fin .3s forwards}@keyframes fin{to{opacity:1}}
.btn{cursor:pointer;font-family:'Orbitron';font-size:11px;letter-spacing:2px;color:var(--cy);border:1px solid var(--cy);border-radius:30px;padding:12px 26px;background:transparent}.btn:hover{background:var(--cy);color:#022;box-shadow:0 0 20px var(--cy)}
.modal{position:fixed;inset:0;background:rgba(2,6,12,.78);z-index:40;display:none;align-items:center;justify-content:center}.modal.show{display:flex}
.card{width:440px;max-width:92vw;border:1px solid var(--cy);border-radius:14px;background:#05111b;padding:20px}.card h3{font-family:'Orbitron';font-size:14px;letter-spacing:2px;color:var(--cy);margin-bottom:12px}
.card label{display:block;font-size:12px;color:var(--dim);margin:10px 0 4px;letter-spacing:1px}.card input,.card select{width:100%;background:#020a10;border:1px solid rgba(70,240,255,.25);border-radius:8px;color:var(--ink);padding:9px;font-family:'Rajdhani';font-size:15px}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:rgba(70,240,255,.25);border-radius:3px}

/* ---- dramatic thinking / speaking states ---- */
.orb.thinking i{animation-duration:2.2s !important}
.orb.thinking .pulse{animation:think .55s ease-in-out infinite}
@keyframes think{0%,100%{transform:scale(.85);opacity:.7}50%{transform:scale(1.12);opacity:1;box-shadow:0 0 90px var(--cy)}}
.orb.thinking .hex{border-color:rgba(70,240,255,.85);animation-duration:6s !important}
.orb.speaking i:nth-child(1){animation-duration:5s !important}
.orb.speaking .pulse{box-shadow:0 0 110px var(--gold)}
.orb.speaking .hex2{border-color:rgba(255,210,122,.6)}
.orb::before{content:'';position:absolute;inset:-14px;border-radius:50%;border:2px solid transparent}
.orb.thinking::before{border-top-color:var(--cy);border-right-color:var(--gold);animation:spin 1.1s linear infinite}
.orb.speaking::before{border:2px solid rgba(255,210,122,.45);animation:ripple 1.1s ease-out infinite}
@keyframes ripple{0%{transform:scale(.9);opacity:.7}100%{transform:scale(1.35);opacity:0}}

/* ---- one big pulsing circle of neurons (hide the small orb) ---- */
.orb i,.orb .hex,.orb .pulse,.orb::before,.orb::after{display:none !important}
.orb{width:0;height:0}

/* ===== ALFRED UI v2.0 - polish + responsive ===== */
.panel{backdrop-filter:blur(2px);transition:border-color .3s,box-shadow .3s}
.panel:hover{border-color:rgba(70,240,255,.3);box-shadow:0 0 22px rgba(70,240,255,.08)}
.panel::before{content:'';position:absolute;right:0;top:0;width:22px;height:2px;background:var(--gold);box-shadow:0 0 10px var(--gold);opacity:.55}
.stat{position:relative;overflow:hidden}
.stat::after{content:'';position:absolute;left:-45%;top:0;width:35%;height:100%;background:linear-gradient(90deg,transparent,rgba(70,240,255,.12),transparent);animation:sweep 4.5s linear infinite}
@keyframes sweep{to{left:150%}}
.cmd{backdrop-filter:blur(6px)}
.greet{text-shadow:0 0 24px rgba(70,240,255,.7),0 0 50px rgba(70,240,255,.22)}
.tag{animation:tagflick 7s steps(1) infinite}
@keyframes tagflick{96%{opacity:1}97%{opacity:.35}98%{opacity:1}}
@media(max-width:1100px){.wrap{grid-template-columns:200px 1fr 240px;gap:12px;padding:16px 14px 92px}}
@media(max-width:860px){.wrap{grid-template-columns:1fr;grid-auto-rows:auto;overflow-y:auto;padding:14px 12px 100px}.side{flex-direction:row;flex-wrap:wrap}.side>.panel{flex:1 1 46%}.centre{min-height:48vh;order:-1}}
@media(max-width:520px){.cmd{width:94vw}.side>.panel{flex-basis:100%}.greet{font-size:18px}.wrap{grid-template-columns:1fr}}

/* V8PATCH-MOBILE4: brain wallpaper + translucent chat (whatsapp-style) */
@media(max-width:640px){
 .boot .big{font-size:26px!important;letter-spacing:4px!important}
 .boot .log{width:88vw!important;font-size:12px!important;height:84px!important}
 .boot{gap:14px!important;padding:0 12px!important}
 .graph{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;opacity:1!important;z-index:1!important}
 .grid-bg{opacity:.5!important}
 .frame,.tag,#sysdock,.side.left,.subtitle,.wave,.orb,.centre{display:none!important}
 .side.right .panel.grow{display:none!important}
 .briefpanel .lbl,.briefpanel .stats,.briefpanel .briefbody{display:none!important}
 .gear{top:12px!important;right:12px!important;left:auto!important;opacity:.55!important;z-index:7!important}
 body{overflow:hidden!important}
 .wrap{display:flex!important;flex-direction:column!important;height:100dvh!important;height:100vh!important;grid-template-columns:none!important;gap:0!important;padding:0!important;background:transparent!important}
 .side.right{order:1!important;flex:1 1 auto!important;display:flex!important;min-height:0!important;padding:0!important;background:transparent!important}
 .briefpanel{flex:1 1 auto!important;display:flex!important;flex-direction:column!important;min-height:0!important;background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;max-height:none!important}
 .feed{flex:1 1 auto!important;max-height:none!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;display:flex!important;flex-direction:column!important;gap:10px!important;padding:48px 12px 18px!important;font-size:14.5px!important;line-height:1.45!important}
 .feed p{margin:0!important;padding:10px 14px!important;border-radius:16px!important;max-width:82%!important;width:fit-content!important;word-wrap:break-word!important;box-shadow:0 3px 16px rgba(0,0,0,.55)!important;text-shadow:0 1px 2px rgba(0,0,0,.9)!important}
 .feed p.me{align-self:flex-end!important;background:rgba(20,140,185,.5)!important;border:1px solid rgba(120,240,255,.72)!important;color:#ffffff!important;border-bottom-right-radius:5px!important}
 .feed p.al{align-self:flex-start!important;background:rgba(6,14,24,.6)!important;border:1px solid rgba(90,220,255,.55)!important;color:#f2fbff!important;border-bottom-left-radius:5px!important}
 .feed p span{display:none!important}
 .cmd{position:fixed!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;max-width:none!important;transform:none!important;margin:0!important;border-radius:0!important;border:0!important;border-top:1px solid rgba(70,240,255,.28)!important;padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important;gap:10px!important;background:rgba(4,12,20,.82)!important}
 .cmd input{flex:1 1 auto!important;min-width:0!important;font-size:16px!important;color:#eafcff!important}
 .cmd .mic{flex:0 0 auto!important;width:52px!important;height:52px!important;min-width:52px!important;font-size:22px!important}
 .cmd .hint{display:none!important}
}