/* ============================================================================ GIDEON · Quantum AI Core — PORTAL EDITION (RFC-0012 / Session Q) The bridge's holographic command-center theme (web/css/gideon.css), ported to the authenticated portal and scoped under #qcore so nothing leaks into (or from) admin.css. Rendered as the Pulse page on desktop (>=1000px). ============================================================================ */ /* ---------- portal integration (unscoped on purpose) ---------- */ /* While the Quantum page is showing: portal chrome steps aside — the sidebar unpins (kebab pattern returns, drawer still slides over), the portal topbar and the mini-core canvas hide. Other sections restore the pinned rail. */ body.quantum-on .topbar{ display:none } body.quantum-on .main{ margin:0; padding:0; max-width:none } body.quantum-on #core-scene{ display:none!important } @media (min-width:1000px){ body.quantum-on .sidebar{ transform:translateX(-100%); box-shadow:none } body.quantum-on .sidebar.open{ transform:none; box-shadow:0 0 60px rgba(0,0,0,.6) } } /* ---------- the chamber ---------- */ #qcore{ --cyan:#2dd4ff; --cyan-soft:#7fe9ff; --cyan-dim:#0e6e8c; --blue:#3b82f6; --violet:#9b6bff; --amber:#f7a91e; --crimson:#ff4d4d; --green:#36e07f; --ok:#36e07f; --ink:#03060f; --ink2:#060b18; --panel:rgba(8,16,32,.46); --panel-edge:rgba(60,180,230,.26); --panel-edge-bright:rgba(90,220,255,.7); --text:#cfe9f7; --text-dim:#86a7bd; --muted:#5b7488; --accent:var(--cyan); --accent-rgb:45,212,255; --grid:rgba(60,150,200,.06); position:fixed; inset:0; z-index:25; /* above content, below drawer(40)/backdrop(30) */ font-family:"Rajdhani","Segoe UI",system-ui,sans-serif; color:var(--text); letter-spacing:.02em; font-size:14px; background: radial-gradient(120% 90% at 50% 8%, #0a1830 0%, #050a16 42%, #02050d 100%), var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow:hidden; } #qcore.q-hidden{ display:none } #qcore *{ box-sizing:border-box } #qcore::before{ /* faint chamber grid + vignette */ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background: linear-gradient(var(--grid) 1px,transparent 1px) 0 0/44px 44px, linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/44px 44px, radial-gradient(120% 80% at 50% 40%, transparent 55%, rgba(0,0,0,.6) 100%); mask:radial-gradient(120% 80% at 50% 35%, #000 40%, transparent 85%); } /* state retint (whole UI moves with the core) — on the container, not */ #qcore[data-state="idle"]{ --accent:var(--cyan); --accent-rgb:45,212,255 } #qcore[data-state="listening"]{ --accent:var(--amber); --accent-rgb:247,169,30 } #qcore[data-state="thinking"]{ --accent:var(--violet); --accent-rgb:155,107,255 } #qcore[data-state="speaking"]{ --accent:var(--cyan); --accent-rgb:45,212,255 } #qcore[data-state="executing"]{ --accent:var(--blue); --accent-rgb:59,130,246 } #qcore[data-state="error"]{ --accent:var(--crimson); --accent-rgb:255,77,77 } /* ---------- full-window 3D chamber ---------- */ #qcore #qscene{ position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block } /* ---------- HUD overlay grid (safe areas: 320 / 320 / 110 / 220) ---------- */ #qcore .q-app{ position:absolute; inset:0; z-index:1; pointer-events:none; display:grid; grid-template-columns:320px 1fr 320px; grid-template-rows:110px 1fr 220px 30px; grid-template-areas: "top top top" "left stage right" "left stripe right" "foot foot foot"; gap:12px; padding:12px; } #qcore .panel,#qcore .status-pill,#qcore .net-ico,#qcore .q-menu{ pointer-events:auto } /* ---------- panels ---------- */ #qcore .panel{ position:relative; background:var(--panel); border:1px solid var(--panel-edge); border-radius:10px; padding:7px 12px 7px; backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); box-shadow:inset 0 0 30px rgba(var(--accent-rgb),.05), 0 0 0 1px rgba(0,0,0,.3); overflow:hidden; min-height:0; } #qcore .panel::before,#qcore .panel::after{ content:""; position:absolute; width:13px; height:13px; pointer-events:none; border:1.5px solid var(--accent); opacity:.55; transition:opacity .5s,border-color .5s; } #qcore .panel::before{ left:5px; top:5px; border-right:0; border-bottom:0 } #qcore .panel::after{ right:5px; bottom:5px; border-left:0; border-top:0 } #qcore .panel-h{ font-family:"Orbitron",sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.2em; color:var(--cyan-soft); text-transform:uppercase; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 0 5px 12px; margin-bottom:5px; border-bottom:1px solid rgba(var(--accent-rgb),.18); } #qcore .panel-h::after{ content:""; position:absolute; left:25px; top:1.7em; width:34px; height:2px; background:var(--accent); box-shadow:0 0 9px var(--accent); border-radius:2px; transition:background .5s,box-shadow .5s; } #qcore .grow{ flex:1 1 auto } #qcore .rail{ grid-area:left; display:flex; flex-direction:column; gap:6px; min-height:0; overflow:hidden } #qcore .rail>.panel{ flex:0 1 auto; min-height:0; overflow:hidden } #qcore .rail>.panel.grow{ flex:1 1 auto } #qcore .rail .list{ overflow:hidden auto } #qcore .rail-right{ grid-area:right } /* ---------- top bar (bridge design + the portal kebab, top right) ---------- */ #qcore .q-topbar{ grid-area:top; display:grid; grid-template-columns:1fr auto 1fr; align-items:center } #qcore .top-left{ display:flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.18em } #qcore .top-right{ display:flex; align-items:center; justify-content:flex-end; gap:16px } #qcore .muted{ color:var(--muted) } #qcore .status-pill{ display:inline-flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.14em; padding:5px 11px; border:1px solid var(--panel-edge); border-radius:20px; background:rgba(7,15,28,.5); color:var(--text-dim) } #qcore .status-pill b{ color:var(--text); font-weight:700 } #qcore .dot{ width:8px; height:8px; border-radius:50%; background:var(--muted); display:inline-block; flex:0 0 auto } #qcore .dot-ok{ background:var(--green); box-shadow:0 0 9px var(--green); animation:qpulse 2.2s infinite } @keyframes qpulse{ 0%,100%{opacity:1} 50%{opacity:.45} } #qcore .top-center{ text-align:center } #qcore .q-brand{ margin:0; font-family:"Orbitron",sans-serif; font-weight:900; font-size:34px; line-height:1; letter-spacing:.36em; text-indent:.36em; background:linear-gradient(180deg,#eafdff 0%,#74dcff 60%,#2aa7d8 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 22px rgba(60,190,255,.55)); } #qcore .brand-sub{ margin:2px 0 0; font-size:11px; letter-spacing:.3em; color:var(--text-dim) } #qcore .clock-wrap{ text-align:right; line-height:1.15 } #qcore .clock{ font-family:"Share Tech Mono",monospace; font-size:17px; color:#dff4ff; letter-spacing:.06em } #qcore .date{ font-size:10px; letter-spacing:.22em; color:var(--muted) } #qcore .net-ico{ width:22px; height:22px; color:var(--cyan); filter:drop-shadow(0 0 6px var(--cyan)) } #qcore .net-ico use,#qcore .net-ico path,#qcore .net-ico circle{ fill:none; stroke:currentColor; stroke-width:1.6 } #qcore .q-menu{ width:34px; height:38px; background:transparent; border:0; color:var(--text-dim); font-size:23px; line-height:1; cursor:pointer; padding:0; opacity:.7 } #qcore .q-menu:hover{ color:var(--cyan); opacity:1 } /* ---------- gauges ---------- */ #qcore .gauge-wrap{ display:grid; place-items:center; padding:2px 0 } #qcore svg.gauge{ width:78px; height:78px } #qcore svg.gauge.sm{ width:96px; height:96px } #qcore .gauge-bg{ fill:none; stroke:rgba(var(--accent-rgb),.13); stroke-width:7 } #qcore .gauge-fg{ fill:none; stroke:var(--accent); stroke-width:7; stroke-linecap:round; filter:drop-shadow(0 0 7px var(--accent)); transition:stroke .5s, stroke-dashoffset .6s ease } #qcore .gauge-val{ fill:#eafdff; font-family:"Orbitron",sans-serif; font-weight:700; font-size:30px; text-anchor:middle; filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),.6)) } #qcore .gauge-val.sm{ font-size:24px } /* ---------- resources ---------- */ #qcore .res-list{ display:flex; flex-direction:column; gap:4px } #qcore .res{ display:grid; grid-template-columns:74px 1fr 42px; align-items:center; gap:9px; font-size:11px; letter-spacing:.08em } #qcore .res-lab{ color:var(--text-dim) } #qcore .res-val{ text-align:right; font-family:"Share Tech Mono",monospace; color:var(--cyan-soft) } #qcore .bar{ height:6px; border-radius:6px; background:rgba(var(--accent-rgb),.12); overflow:hidden; position:relative } #qcore .bar.slim{ display:block; height:5px; margin-top:8px } #qcore .bar i{ display:block; height:100%; width:50%; background:linear-gradient(90deg,var(--cyan-dim),var(--accent)); box-shadow:0 0 10px var(--accent); border-radius:6px; transition:width .55s ease, background .5s } /* ---------- canvases / numbers / state ---------- */ #qcore .mini-canvas{ width:100%; height:40px; display:block } #qcore .mini-canvas.tall{ height:50px } #qcore .accent-txt{ color:var(--accent); font-weight:600; letter-spacing:.12em; font-size:12px; margin-top:6px; transition:color .5s } #qcore .learn-meta{ display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--text-dim); margin-top:8px } #qcore .mono{ font-family:"Share Tech Mono",monospace; letter-spacing:.06em } #qcore .big-num{ font-size:20px; color:#dff4ff } #qcore .state-panel .cur-state{ font-family:"Orbitron",sans-serif; font-weight:700; font-size:23px; letter-spacing:.12em; color:var(--accent); margin:2px 0 4px; text-shadow:0 0 18px var(--accent); transition:color .45s,text-shadow .45s } /* ---------- center stage ---------- */ #qcore .stage{ grid-area:stage; position:relative } #qcore .webgl-fallback{ position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-family:"Orbitron",sans-serif; letter-spacing:.2em; font-size:13px } #qcore .webgl-fallback[hidden]{ display:none } #qcore .core-label{ position:absolute; bottom:6px; left:50%; transform:translateX(-50%); z-index:3; pointer-events:auto; font-family:"Orbitron",sans-serif; font-size:11px; letter-spacing:.34em; color:#cdeeff; padding:6px 22px; border:1px solid var(--panel-edge-bright); border-radius:7px; background:rgba(6,14,28,.5); backdrop-filter:blur(6px); box-shadow:0 0 22px rgba(var(--accent-rgb),.35), inset 0 0 16px rgba(var(--accent-rgb),.08); transition:box-shadow .5s, border-color .5s } /* ---------- bottom stripe ---------- */ #qcore .stripe{ grid-area:stripe; display:grid; grid-template-columns:1.25fr 1.15fr 1.3fr; gap:12px; pointer-events:none } #qcore .stripe .panel{ display:flex; flex-direction:column } #qcore .think-grid{ display:grid; grid-template-columns:88px 1fr; gap:10px; flex:1; min-height:0; align-items:center } #qcore .think-bars{ display:flex; flex-direction:column; gap:6px } #qcore .tb{ font-size:9.5px; color:var(--text-dim); letter-spacing:.05em } #qcore .tb span{ display:block; margin-bottom:3px } #qcore .proc-grid{ display:grid; grid-template-columns:1fr 96px; gap:8px; flex:1; min-height:0 } #qcore .proc-log{ font-family:"Share Tech Mono",monospace; font-size:10.5px; line-height:1.55; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; color:var(--text-dim) } #qcore .proc-log .t{ color:var(--cyan-dim); margin-right:6px } #qcore .proc-ring{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px } #qcore .tiny{ font-size:8px; letter-spacing:.22em } /* ---------- voice ---------- */ #qcore .mic-row{ display:flex; align-items:center; gap:12px; margin-bottom:8px } #qcore .mic-btn{ flex:0 0 auto; width:46px; height:46px; border-radius:50%; cursor:pointer; padding:0; margin:0; border:1px solid var(--panel-edge-bright); color:var(--cyan-soft); display:grid; place-items:center; transition:all .25s; background:radial-gradient(circle at 50% 35%, rgba(45,212,255,.25), rgba(8,18,30,.6)); box-shadow:0 0 14px rgba(var(--accent-rgb),.3), inset 0 0 10px rgba(var(--accent-rgb),.15); font-size:0 } #qcore .mic-btn svg{ width:22px; height:22px } #qcore .mic-btn svg *{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round } #qcore .mic-btn:hover{ box-shadow:0 0 22px rgba(var(--accent-rgb),.55), inset 0 0 12px rgba(var(--accent-rgb),.25); transform:translateY(-1px) } #qcore .mic-btn.recording{ color:#ff7a7a; border-color:rgba(255,77,77,.75); background:radial-gradient(circle at 50% 35%, rgba(255,77,77,.32), rgba(30,8,8,.6)); animation:qmicPulse 1.1s infinite } @keyframes qmicPulse{ 0%,100%{box-shadow:0 0 16px rgba(255,77,77,.5)} 50%{box-shadow:0 0 30px rgba(255,77,77,.9)} } #qcore .mic-meta{ display:flex; flex-direction:column; gap:4px; min-width:0 } #qcore .stop-btn{ font-family:"Orbitron",sans-serif; font-size:9px; letter-spacing:.14em; cursor:pointer; padding:3px 9px; border-radius:14px; border:1px solid rgba(255,77,77,.5); background:rgba(30,8,8,.5); color:#ff9a9a; align-self:flex-start } #qcore .stop-btn:hover{ background:rgba(255,77,77,.18) } /* ---------- conversation ---------- */ #qcore .chat{ display:flex; flex-direction:column; gap:7px; overflow-y:auto; min-height:0; flex:1; padding-right:4px } #qcore .msg{ display:flex; flex-direction:column; gap:1px; font-size:12px; line-height:1.35; padding:6px 9px; border-radius:8px; border:1px solid rgba(var(--accent-rgb),.12); background:rgba(10,22,38,.4) } #qcore .msg-who{ font-family:"Orbitron",sans-serif; font-size:8.5px; letter-spacing:.16em; color:var(--muted) } #qcore .msg-text{ color:#dbf2ff; white-space:pre-wrap; word-break:break-word } #qcore .msg-you{ border-color:rgba(45,212,255,.3); align-self:flex-end; max-width:88% } #qcore .msg-you .msg-who{ color:var(--cyan-soft); text-align:right } #qcore .msg-gideon{ border-color:rgba(54,224,127,.28); align-self:flex-start; max-width:92% } #qcore .msg-gideon .msg-who{ color:#7af0b0 } #qcore .msg-system,#qcore .msg-error{ border-color:rgba(255,77,77,.4); background:rgba(40,12,14,.45); align-self:stretch } #qcore .msg-error .msg-text,#qcore .msg-system .msg-text{ color:#ffb4b4 } #qcore .msg-empty{ border-style:dashed; opacity:.6; align-self:stretch } #qcore .msg-empty .msg-text{ color:var(--muted) } #qcore .msg-top{ display:flex; align-items:center; justify-content:space-between; gap:8px } #qcore .msg-copy{ flex:0 0 auto; width:16px; height:16px; padding:0; border:0; background:none; cursor:pointer; color:var(--muted); opacity:.4; display:grid; place-items:center; transition:opacity .2s, color .2s } #qcore .msg:hover .msg-copy{ opacity:.85 } #qcore .msg-copy:hover{ color:var(--cyan-soft); opacity:1 } #qcore .msg-copy svg{ width:13px; height:13px } #qcore .msg-copy svg *{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round } #qcore .msg-copy.copied svg{ display:none } #qcore .msg-copy.copied::after{ content:"✓"; color:var(--green); font-size:12px; font-weight:700 } #qcore .chat-input{ display:flex; align-items:center; gap:7px; margin-top:7px; flex:0 0 auto } #qcore .chat-input input{ flex:1 1 auto; min-width:0; font-family:inherit; font-size:12px; color:var(--text); background:rgba(6,14,26,.6); border:1px solid var(--panel-edge); border-radius:8px; padding:7px 10px; outline:none; transition:border-color .25s, box-shadow .25s } #qcore .chat-input input::placeholder{ color:var(--muted) } #qcore .chat-input input:focus{ border-color:var(--panel-edge-bright); box-shadow:0 0 12px rgba(var(--accent-rgb),.22) } #qcore .chat-send{ flex:0 0 auto; width:34px; height:34px; border-radius:8px; cursor:pointer; padding:0; font-size:13px; border:1px solid var(--panel-edge-bright); color:var(--cyan-soft); display:grid; place-items:center; background:radial-gradient(circle at 50% 35%, rgba(45,212,255,.22), rgba(8,18,30,.6)); box-shadow:0 0 10px rgba(var(--accent-rgb),.25); transition:box-shadow .25s, transform .25s } #qcore .chat-send:hover{ box-shadow:0 0 18px rgba(var(--accent-rgb),.5); transform:translateY(-1px) } /* ---------- right-rail lists ---------- */ #qcore .list{ display:flex; flex-direction:column; gap:8px; overflow:hidden; min-height:0 } #qcore .rail .grow .list{ overflow-y:auto } #qcore .row{ display:flex; align-items:center; gap:10px; font-size:12px; padding:6px 8px; border:1px solid rgba(var(--accent-rgb),.1); border-radius:7px; background:rgba(10,22,38,.4) } #qcore .row .hex{ --c:var(--cyan); width:24px; height:27px; flex:0 0 auto; display:grid; place-items:center; color:var(--c); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background:rgba(var(--accent-rgb),.08); box-shadow:0 0 9px color-mix(in srgb,var(--c) 55%,transparent) } #qcore .row .hex svg{ width:14px; height:14px } #qcore .row .hex svg *{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round } #qcore .row-main{ display:flex; flex-direction:column; min-width:0 } #qcore .row-main b{ font-weight:600; color:#dbf2ff; font-size:12px; letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } #qcore .row-sub{ font-size:10px; color:var(--muted); letter-spacing:.04em } #qcore .row-dot{ margin-left:auto; width:9px; height:9px; border-radius:50%; background:currentColor; box-shadow:0 0 9px currentColor; flex:0 0 auto } #qcore .badge-pill{ margin-left:auto; font-size:8.5px; letter-spacing:.12em; padding:3px 8px; border-radius:14px; border:1px solid rgba(var(--accent-rgb),.3); color:var(--cyan-soft); white-space:nowrap; flex:0 0 auto; font-family:"Orbitron",sans-serif } #qcore .badge-pill.working{ color:#ffe08a; border-color:rgba(247,169,30,.55); box-shadow:0 0 10px rgba(247,169,30,.25); animation:qpulse 1.6s infinite } #qcore .badge-pill.prog{ color:#9be7ff; border-color:rgba(45,212,255,.5) } #qcore .badge-pill.queued{ color:var(--muted); border-color:rgba(91,116,136,.4) } #qcore .badge-pill.done{ color:#86f5b6; border-color:rgba(54,224,127,.5) } #qcore .events .evt{ display:flex; align-items:center; gap:8px; font-size:11px; padding:2px 0 } #qcore .evt-time{ font-family:"Share Tech Mono",monospace; font-size:10px; color:var(--muted); flex:0 0 auto } #qcore .evt-dot{ width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 7px currentColor; flex:0 0 auto } #qcore .evt-txt{ color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } /* ---------- footer ---------- */ #qcore .q-footer{ grid-area:foot; position:relative; display:grid; place-items:center; border-top:1px solid rgba(var(--accent-rgb),.14) } #qcore #data-stream{ position:absolute; inset:0; width:100%; height:100%; opacity:.7 } #qcore .footer-label{ position:relative; font-family:"Orbitron",sans-serif; font-size:9px; letter-spacing:.5em; color:rgba(127,200,230,.55); text-indent:.5em } #qcore ::-webkit-scrollbar{ width:5px; height:5px } #qcore ::-webkit-scrollbar-thumb{ background:rgba(var(--accent-rgb),.3); border-radius:4px } @media (prefers-reduced-motion:reduce){ #qcore *{ animation:none!important; transition:none!important } }