[data-mode="dark"]{ --bg-g1: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(59,130,246,.08) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 80% 80%, rgba(80,60,200,.12) 0%, transparent 60%), radial-gradient(ellipse 100% 100% at 50% 50%, #0e1018 0%, #080a0e 100%); --txt: #e9ebee; --txt2: rgba(255,255,255,.5); --txt3: rgba(255,255,255,.25); --muted: rgba(255,255,255,.5); --dim: rgba(255,255,255,.25); --amber: #3b82f6; --amber-bg: rgba(59,130,246,.1); --amber-border: rgba(59,130,246,.22); --glass-bg: rgba(255,255,255,.04); --glass-border: rgba(255,255,255,.09); --nav-bg: rgba(8,10,14,.55); --nav-border: rgba(255,255,255,.07); --input-bg: rgba(255,255,255,.05); --input-border: rgba(255,255,255,.09); --input-focus: rgba(59,130,246,.4); --divider: rgba(255,255,255,.04); --chip-bg: rgba(255,255,255,.05); --chip-border: rgba(255,255,255,.08); --btn-bg: rgba(59,130,246,.15); --btn-border: rgba(59,130,246,.3); --icon-bg: rgba(255,255,255,.05); --icon-border: rgba(255,255,255,.08); --tag-bg: rgba(59,130,246,.08); --tag-border: rgba(59,130,246,.18); --bubble-user-bg: rgba(59,130,246,.1); --bubble-user-border: rgba(59,130,246,.2); --bubble-user-txt: #bfdbfe; --bubble-ai-bg: rgba(255,255,255,.05); --bubble-ai-border: rgba(255,255,255,.08); --bubble-ai-txt: #d8dce5; --chat-footer: rgba(0,0,0,.15); --ok: #4ade80; --danger: #f87171; --panel-head: rgba(255,255,255,.04); } [data-mode="light"]{ --bg-g1: radial-gradient(ellipse 80% 60% at 15% 5%, rgba(59,130,246,.12) 0%, transparent 55%), radial-gradient(ellipse 50% 70% at 85% 85%, rgba(160,140,255,.1) 0%, transparent 55%), radial-gradient(ellipse 100% 100% at 50% 50%, #f5f3ef 0%, #ebe8e2 100%); --txt: #1a1a1a; --txt2: rgba(0,0,0,.45); --txt3: rgba(0,0,0,.25); --muted: rgba(0,0,0,.45); --dim: rgba(0,0,0,.25); --amber: #2563eb; --amber-bg: rgba(37,99,235,.08); --amber-border: rgba(37,99,235,.28); --glass-bg: rgba(255,255,255,.55); --glass-border: rgba(0,0,0,.08); --nav-bg: rgba(245,243,239,.72); --nav-border: rgba(0,0,0,.08); --input-bg: rgba(255,255,255,.7); --input-border: rgba(0,0,0,.12); --input-focus: rgba(37,99,235,.5); --divider: rgba(0,0,0,.06); --chip-bg: rgba(0,0,0,.04); --chip-border: rgba(0,0,0,.08); --btn-bg: rgba(37,99,235,.12); --btn-border: rgba(37,99,235,.35); --icon-bg: rgba(0,0,0,.04); --icon-border: rgba(0,0,0,.08); --tag-bg: rgba(37,99,235,.08); --tag-border: rgba(37,99,235,.2); --bubble-user-bg: rgba(37,99,235,.08); --bubble-user-border: rgba(37,99,235,.22); --bubble-user-txt: #1e3a5f; --bubble-ai-bg: rgba(255,255,255,.7); --bubble-ai-border: rgba(0,0,0,.07); --bubble-ai-txt: #2a2a2a; --chat-footer: rgba(0,0,0,.04); --ok: #16a34a; --danger: #dc2626; --panel-head: rgba(0,0,0,.02); } /* ── Theme overrides (applied via data-theme on ) ── */ [data-theme="terminal"] { --amber: #d4af37; --amber-bg: rgba(212,175,55,.08); --amber-border: rgba(212,175,55,.35); --txt: #e8d9a0; --txt2: #a38e5f; --muted: #8a7a55; --glass-bg: rgba(10,10,8,.85); --glass-border: #3a3528; --input-bg: #11100c; --input-border: #3a3528; --bg: #0a0905; --bg-g1: #0a0905; --panel: #11100c; --line: #2a261f; --good: #00aa55; --danger: #aa3333; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } [data-theme="terminal"] body::before { background: repeating-linear-gradient(180deg, transparent, transparent 2px, rgba(0,0,0,.6) 2px, rgba(0,0,0,.6) 3px); opacity: .65; } [data-theme="terminal"] .hud-rail span { color: #d4af37; } [data-theme="steel"] { --amber: #3b82f6; --amber-bg: rgba(59,130,246,.1); --amber-border: rgba(59,130,246,.22); --txt: #e6eef7; --txt2: rgba(230,238,247,.6); --muted: rgba(200,210,225,.55); --glass-bg: rgba(20,26,38,.7); --glass-border: rgba(90,110,140,.25); --input-bg: rgba(15,20,30,.8); --input-border: rgba(80,100,130,.3); --bg: #0b1018; --bg-g1: radial-gradient(ellipse 140% 120% at 50% 22%, #141925 0%, #0b0f16 64%, #070a10 100%); --panel: rgba(14,20,32,.9); --line: rgba(100,120,150,.18); --good: #4cc38a; --danger: #e5484d; --panel-head: rgba(80,100,140,.08); } /* default theme (explicit for switching) */ [data-theme="default"] { --amber: #3b82f6; --amber-bg: rgba(59,130,246,.1); --amber-border: rgba(59,130,246,.22); --txt: #e9ebee; --txt2: rgba(255,255,255,.5); --muted: rgba(255,255,255,.5); --glass-bg: rgba(255,255,255,.04); --glass-border: rgba(255,255,255,.09); --bg: #0a0b0d; --bg-g1: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(59,130,246,.08) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 80% 80%, rgba(80,60,200,.12) 0%, transparent 60%), radial-gradient(ellipse 100% 100% at 50% 50%, #0e1018 0%, #080a0e 100%); --panel: rgba(18,20,24,0.82); --line: rgba(255,255,255,0.10); --good: #46d17a; --danger: #ff5247; } /* Experiment themes - color explorations for Fleet/Kanban */ [data-theme="neon"] { --amber: #00f9ff; --amber-bg: rgba(0,249,255,.12); --amber-border: rgba(0,249,255,.35); --txt: #f0f0ff; --txt2: #a0a0cc; --muted: #7070aa; --glass-bg: rgba(10,5,20,.85); --glass-border: #4a2a6a; --input-bg: #120a1f; --input-border: #3a2a5a; --bg: #05020f; --bg-g1: #05020f; --panel: #0f0820; --line: #2a1f4a; --good: #39ff14; --danger: #ff2e63; --amber2: #ff00aa; } [data-theme="neon"] .kanban-column.running { border-color: #ff00aa; box-shadow: 0 0 0 1px rgba(255,0,170,.3); } [data-theme="neon"] .kanban-card.running { border-color: #00f9ff; } [data-theme="neon"] .progress-bar { background: linear-gradient(90deg, #ff00aa, #00f9ff); } [data-theme="matrix"] { --amber: #00ff41; --amber-bg: rgba(0,255,65,.08); --amber-border: rgba(0,255,65,.4); --txt: #00ff41; --txt2: #00aa2a; --muted: #006611; --glass-bg: rgba(0,5,0,.9); --glass-border: #003300; --input-bg: #001100; --input-border: #003300; --bg: #000200; --bg-g1: #000200; --panel: #001100; --line: #002200; --good: #00ff41; --danger: #aa0000; font-family: 'Courier New', monospace; } [data-theme="matrix"] body::before { background: repeating-linear-gradient(180deg, transparent, transparent 3px, rgba(0,255,65,.03) 3px, rgba(0,255,65,.03) 4px); opacity: .8; } [data-theme="matrix"] .kanban-column.running { border-color: #00ff41; } [data-theme="matrix"] .kanban-card { font-family: 'Courier New', monospace; } [data-theme="aurora"] { --amber: #c084fc; --amber-bg: rgba(192,132,252,.1); --amber-border: rgba(192,132,252,.35); --txt: #f3e8ff; --txt2: #c4b5fd; --muted: #a78bfa; --glass-bg: rgba(15,10,30,.8); --glass-border: #6366f1; --input-bg: #1e183a; --input-border: #4f46e5; --bg: #0f0a1f; --bg-g1: radial-gradient(circle at 30% 20%, #1e183a 0%, #0f0a1f 70%); --panel: #1a1533; --line: #433c6b; --good: #67e8f9; --danger: #f472b6; } [data-theme="aurora"] .kanban-column { border-color: #6366f1; } [data-theme="aurora"] .kanban-column.running { border-color: #c084fc; box-shadow: 0 0 0 1px rgba(192,132,252,.25); } [data-theme="aurora"] .kanban-card.running .progress-bar { background: linear-gradient(90deg, #c084fc, #67e8f9, #f472b6); } /* === VISUAL OVERHAUL: Centralized Futuristic Glassmorphism + Neon HUD for FCP Fleet === Decisions (researched + expert-reviewed): - Glassmorphism core: frosted translucent panels + real blur + depth (inspired by Apple Liquid Glass 2025/26 + sci-fi HUDs). - Limited high-contrast palettes per theme for power + readability (dark surfaces #0a0b0d base, neon accents, no pure #000/white). - Purposeful motion: low-key pulses/shimmers for status/flow (not decoration; respects reduced-motion). - Kanban: 6-column Hermes flow (Triage→Todo→Ready→In Progress[lanes by agent]→Blocked→Done). Rich cards with step progress, drag visual, glows. - Themes now *actually* swap everything via vars + targeted overrides. No more hardcodes in critical paths. - Functional futuristic: clean hierarchy, live indicators, high contrast, sci-fi depth without clutter. */ :root { --bg-deep: #0a0b0d; --bg-g1: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(59,130,246,.08) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 80% 80%, rgba(80,60,200,.12) 0%, transparent 60%), radial-gradient(ellipse 100% 100% at 50% 50%, #0e1018 0%, #080a0e 100%); --glass: rgba(255,255,255,0.04); --glass-border: rgba(255,255,255,0.09); --panel: rgba(18,20,24,0.82); --line: rgba(255,255,255,0.10); --line2: rgba(255,255,255,0.18); --accent: #3b82f6; --accent2: #60a5fa; --accent-glow: rgba(59,130,246,0.25); --txt: #e9ebee; --txt2: rgba(255,255,255,.5); --muted: rgba(255,255,255,.5); --good: #46d17a; --danger: #ff5247; --fast: cubic-bezier(.2,.8,.2,1); --spring: cubic-bezier(.34,1.56,.64,1); --blur: 20px; } /* Glass utility - apply to panels, cards, tables for consistent frosted depth */ .glass, .orch-panel, .panel, .chip, .kanban-column, .orch-fleet-table, .fleet-row, .orch-app-card, .orch-agent-card { background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); transition: background .3s var(--fast), border-color .2s, box-shadow .2s; } /* Enhanced Kanban - proper visual flow + rich cards (Hermes 6-col + progress) */ .kanban-board { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; min-height: 260px; } /* Fleet tables + panels now glass-driven (no more hardcodes) */ .orch-fleet-table, .orch-jobs-table { background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(var(--blur)); } .orch-fleet-head, .orch-fleet-body > div { border-color: var(--line); } .kanban-column { flex: 0 0 188px; padding: 10px; display: flex; flex-direction: column; background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(var(--blur)); } .kanban-column.triage { border-left: 3px solid var(--muted); } .kanban-column.inprogress { border-left: 3px solid var(--accent); box-shadow: 0 0 0 1px var(--accent-glow); } .kanban-column.done { border-left: 3px solid var(--good); opacity: .92; } .kanban-column.blocked { border-left: 3px solid var(--danger); } .kanban-cards { flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 120px; } .kanban-card { background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; padding: 8px 10px; font-size: 10px; cursor: grab; position: relative; overflow: hidden; transition: transform .15s var(--fast), box-shadow .15s; } .kanban-card:active { cursor: grabbing; transform: scale(0.98); } .kanban-card.inprogress { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-glow); animation: kanbanActivePulse 1.8s ease-in-out infinite; } @keyframes kanbanActivePulse { 0%,100% { box-shadow: 0 0 0 1px var(--accent-glow); } 50% { box-shadow: 0 0 0 3px rgba(0,0,0,0.1); } } .kanban-card .card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:2px; } .kanban-card .card-title { font-weight:600; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .kanban-card .agent-badge { font-size:7px; padding:0 3px; border-radius:2px; background:var(--glass); border:1px solid var(--accent-border, var(--glass-border)); color:var(--accent); } .kanban-card .current-step { font-size:8px; background:rgba(59,130,246,0.08); padding:1px 3px; border-radius:2px; margin:2px 0; color:var(--accent); font-family:monospace; } .kanban-card .step-check { display:inline-block; width:8px; text-align:center; } .kanban-card .progress { height:3px; background:var(--line); border-radius:2px; margin:4px 0; overflow:hidden; } .kanban-card .progress-bar { height:100%; background:linear-gradient(90deg, var(--accent), var(--accent2)); transition:width .4s var(--fast); } .kanban-card.inprogress .progress-bar { animation: progressShimmer 1.5s linear infinite; } @keyframes progressShimmer { 0% { background-position: 0 0; } 100% { background-position: 20px 0; } } :root{ --bg:#0a0b0d; --bg2:#101216; --panel:rgba(18,20,24,0.82); --panel2:rgba(24,27,32,0.92); --amber:#3b82f6; --amber2:#60a5fa; --amberdim:#1e3a5f; --txt:#e9ebee; --muted:#888d96; --dim:#565b63; --line:rgba(255,255,255,0.10); --line2:rgba(255,255,255,0.18); --good:#46d17a; --warn:#3b82f6; --danger:#ff5247; --fast:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1); } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{background:var(--bg-g1);color:var(--txt);font-family:Inter,system-ui,sans-serif;overflow:hidden; transition:background .3s,color .2s} h1,h2,h3{font-family:'Oswald',Inter,sans-serif} .bg,.orb{display:none} body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none; background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.05) 3px,rgba(0,0,0,.05) 4px);opacity:.3} .wrap{position:relative;z-index:2;height:100%;height:100dvh;display:flex;flex-direction:column} @media(min-width:681px){.wrap{padding-left:26px}} /* ── LEFT HUD RAIL ── */ .hud-rail{position:fixed;left:0;top:0;bottom:0;width:26px;z-index:6;pointer-events:none; border-right:1px solid var(--line);background:linear-gradient(180deg,rgba(59,130,246,.07),transparent 28%)} .hud-rail::before{content:"";position:absolute;top:0;left:0;width:100%;height:64px;background:var(--amber)} .hud-rail span{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);writing-mode:vertical-rl; font-family:'Oswald';font-weight:600;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--amber);opacity:.85} @media(max-width:680px){.hud-rail{display:none}} /* ── HUD corner brackets on panels/cards ── */ .panel,.tpanel,.chip,.card,.msg.c,.capsheet,.sheet{position:relative} .panel::before,.tpanel::before,.chip::before,.card::before,.msg.c::before,.capsheet::before,.sheet::before{ content:"";position:absolute;top:-1px;left:-1px;width:13px;height:13px; border-top:2px solid var(--amber);border-left:2px solid var(--amber);pointer-events:none;z-index:3} .panel::after,.tpanel::after,.chip::after,.card::after,.msg.c::after,.capsheet::after,.sheet::after{ content:"";position:absolute;bottom:-1px;right:-1px;width:13px;height:13px; border-bottom:2px solid var(--line2);border-right:2px solid var(--line2);pointer-events:none;z-index:3} .card:hover::after,.cand-item:hover::after{border-color:var(--amber)} /* ── LOGIN ── */ #login{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:22px;background:var(--bg-g1);transition:opacity .6s,visibility .6s,background .3s} #login.hide{opacity:0;visibility:hidden} .ring{width:84px;height:84px;position:relative;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)} .ring::before{content:"";position:absolute;inset:-1px;border:2px solid transparent;border-top-color:var(--amber);animation:spin .9s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .mark{font-family:'Oswald';font-weight:700;font-size:54px;letter-spacing:.16em;color:#fff;display:flex;align-items:center} .mark::after{content:"";width:12px;height:12px;background:var(--amber);margin-left:12px} .sub{font-family:'Oswald';color:var(--amber);letter-spacing:.4em;text-transform:uppercase;font-size:11px} .pin{display:flex;gap:10px} .pin input{width:46px;height:58px;text-align:center;font-family:'Oswald';font-size:26px;color:var(--txt);background:var(--input-bg);border:1px solid var(--input-border);outline:none;transition:background .2s,border-color .15s,color .2s} .pin input:focus{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)} .err{color:var(--danger);height:14px;letter-spacing:.2em;font-size:11px;font-family:'Oswald';text-transform:uppercase} /* team login */ .team-input{display:block;width:260px;margin:8px 0;padding:10px 14px;background:var(--input-bg);border:1px solid var(--input-border); color:var(--txt);font-family:Inter;font-size:14px;outline:none;transition:background .2s,border-color .15s,color .2s} .team-input:focus{border-color:var(--input-focus)} .team-toggle{margin-top:14px;font-size:11px;color:var(--muted)} .team-toggle a{color:var(--amber);text-decoration:none;cursor:pointer} .team-toggle a:hover{text-decoration:underline} /* ── SECRETS VAULT ── */ #secrets{overflow:auto} .sv-wrap{padding:22px 24px;max-width:860px} .sv-hdr{display:flex;align-items:center;gap:14px;margin-bottom:6px;flex-wrap:wrap} .sv-title{font-family:'Oswald';font-size:18px;font-weight:600;letter-spacing:.08em;color:#fff} .sv-sub{font-size:11px;color:var(--muted);flex:1} .sv-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px} .sv-cat{padding:4px 12px;font-family:'Oswald';font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; border:1px solid var(--line2);color:var(--muted);cursor:pointer;transition:.15s} .sv-cat.on,.sv-cat:hover{border-color:var(--amber);color:var(--amber)} .sv-form{background:var(--glass-bg);border:1px solid var(--glass-border);padding:18px 20px;margin-bottom:18px; backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:14px;transition:background .3s,border-color .2s} .sv-form input,.sv-form select,.sv-form textarea{ display:block;width:100%;margin-bottom:10px;padding:9px 12px; background:var(--input-bg);border:1px solid var(--input-border);color:var(--txt); font-family:Inter;font-size:13px;outline:none;resize:vertical;transition:background .2s,border-color .15s,color .2s} .sv-form input:focus,.sv-form select:focus,.sv-form textarea:focus{border-color:var(--input-focus)} .sv-form select option{background:#16181c} .sv-gen{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px} .sv-gen #svGenLen{display:inline-block;width:auto;margin-bottom:0} .sv-gen #svGenBtn{margin-bottom:0;white-space:nowrap} .sv-gen-hint{font-size:11px;font-family:Inter;color:var(--muted)} .sv-list{display:flex;flex-direction:column;gap:8px} .sv-item{display:flex;align-items:flex-start;gap:12px;padding:12px 14px; background:var(--glass-bg);border:1px solid var(--glass-border);border-bottom:1px solid var(--divider);border-radius:10px;transition:background .2s,border-color .15s} .sv-item:hover{border-color:var(--amber-border)} .sv-badge{flex-shrink:0;padding:3px 8px;font-family:'Oswald';font-size:9px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;background:#1a1c20;color:var(--amber);border:1px solid var(--amberdim)} .sv-badge.password{color:#ff8a3d;border-color:rgba(255,138,61,.4)} .sv-badge.token{color:var(--good);border-color:rgba(70,209,122,.4)} .sv-badge.note{color:var(--muted);border-color:var(--line2)} .sv-name{font-size:14px;color:#fff;font-weight:500;flex:1} .sv-notes{font-size:11px;color:var(--muted);margin-top:3px} .sv-val{font-family:'Oswald';font-size:12px;color:var(--amber);letter-spacing:.04em; word-break:break-all;margin-top:6px;padding:8px 10px;background:#0d0e10;border:1px solid var(--amberdim);display:none} .sv-actions{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap} .sv-empty{color:var(--muted);font-size:13px;padding:20px 0;text-align:center} /* ── HEADER ── */ header{display:flex;align-items:center;gap:24px;padding:0 24px;height:56px;background:var(--nav-bg); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--nav-border);position:relative;z-index:5;transition:background .3s} .logo{font-family:'Oswald';font-weight:700;font-size:20px;letter-spacing:.18em;color:#fff;display:flex;align-items:center} .logo::after{content:"";width:8px;height:8px;background:var(--amber);margin-left:8px} .tabs{display:flex;position:relative;height:100%} .tab{display:flex;align-items:center;padding:0 18px;font-family:'Oswald';font-weight:500;font-size:13px; letter-spacing:.12em;text-transform:uppercase;color:var(--muted);cursor:pointer;position:relative;z-index:1;transition:color .2s} .tab.on{color:#fff} .tab:hover:not(.on){color:var(--txt)} .tab-slider{position:absolute;bottom:0;left:0;width:0;height:3px;background:var(--amber); box-shadow:0 0 12px rgba(59,130,246,.6);transition:transform .35s var(--spring),width .35s var(--spring);z-index:2} .right{margin-left:auto;display:flex;align-items:center;gap:14px;color:var(--muted);font-size:11px; letter-spacing:.12em;text-transform:uppercase;font-family:'Oswald'} .btn{font-family:'Oswald';font-weight:500;text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--txt); background:transparent;border:1px solid var(--line2);padding:7px 14px;cursor:pointer;transition:.15s} .btn:hover{border-color:var(--amber);color:var(--amber)} .sfxbtn{font-size:13px;padding:6px 11px} .instbtn{border-color:var(--amber);color:var(--amber)} .instbtn:hover{background:var(--amber);color:#000} .instbtn[hidden]{display:none} #cxToast{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0));transform:translateX(-50%) translateY(8px); z-index:70;max-width:88vw;background:var(--panel2);border:1px solid var(--amber);color:var(--txt); font-family:'Oswald';font-size:12px;letter-spacing:.04em;padding:11px 16px;text-align:center; box-shadow:0 0 22px rgba(59,130,246,.18);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;pointer-events:none} #cxToast.on{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} /* ── VIEWS ── */ main{flex:1;overflow:hidden;position:relative} .view{position:absolute;inset:0;display:none;opacity:0} .view.on{display:flex;opacity:1} .view.scene-in{animation:scin .42s var(--fast) both} .view.scene-out{animation:scout .34s var(--fast) both;pointer-events:none} @keyframes scin{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:translateX(0)}} @keyframes scout{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-22px)}} /* ── BRAIN ── */ #brain{flex-direction:column;align-items:center} .stage{width:100%;max-width:900px;height:100%;display:flex;flex-direction:column;padding:0 24px} .log{flex:1;overflow:auto;padding:26px 4px 16px;display:flex;flex-direction:column;gap:16px} .hello{margin:auto;text-align:left;max-width:640px;width:100%;color:var(--muted);border-left:2px solid var(--amber);padding:6px 0 6px 18px} .hello .big{font-family:'Oswald';font-weight:700;font-size:34px;letter-spacing:.04em;text-transform:uppercase;color:#fff;margin-bottom:8px} .hello p{font-size:14px;line-height:1.5;color:var(--muted)} .hello .chipline{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px} .seed{font-family:'Oswald';text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--txt); border:1px solid var(--line2);padding:8px 14px;cursor:pointer;transition:.15s;background:rgba(255,255,255,.02)} .seed:hover{border-color:var(--amber);color:var(--amber)} /* messages — floating answer cards */ .msg{max-width:84%;line-height:1.55;font-size:14.5px} .msg.u{align-self:flex-end;background:var(--bubble-user-bg);border:1px solid var(--bubble-user-border);border-right:3px solid var(--amber);color:var(--bubble-user-txt);padding:12px 16px} .msg.u.pending{opacity:.45} .msg.c{align-self:flex-start;background:var(--bubble-ai-bg);border:1px solid var(--bubble-ai-border);color:var(--bubble-ai-txt);padding:14px 18px; backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:12px; animation:cardin .4s var(--fast) both} .msg.c.live{animation:cardin .4s var(--fast) both, glowpulse 1.6s ease-out .3s both} @keyframes cardin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} @keyframes glowpulse{0%{box-shadow:none}40%{box-shadow:0 0 20px rgba(59,130,246,.28),inset 0 0 0 1px rgba(59,130,246,.14)}100%{box-shadow:none}} @keyframes heartbeat{0%,100%{opacity:1}50%{opacity:.45}} .dot{width:7px;height:7px;background:var(--good);box-shadow:0 0 8px var(--good);animation:heartbeat 2.6s ease-in-out infinite} .msg.c h1,.msg.c h2,.msg.c h3{font-family:'Oswald';text-transform:uppercase;letter-spacing:.06em;color:#fff;font-size:15px;margin:.5em 0} .msg.c code{background:#000;color:var(--amber2);padding:2px 6px;font-size:12.5px;border:1px solid var(--line)} .msg.c pre{background:#000;padding:12px;overflow:auto;border:1px solid var(--line);margin:8px 0} .msg.c a{color:var(--amber)} .msg.c ul{list-style:none;padding-left:0;margin:6px 0} .msg.c li{position:relative;padding-left:18px;margin:4px 0} .msg.c li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;background:var(--amber)} .msg.c table{border-collapse:collapse;width:100%;margin:8px 0}.msg.c td,.msg.c th{border:1px solid var(--line);padding:6px 10px} .msg.c .mermaid{background:#000;border:1px solid var(--line);padding:14px;margin:10px 0;text-align:center;overflow:auto; position:relative;cursor:zoom-in} .msg.c .mermaid svg{max-width:100%;height:auto} .msg.c .mermaid::after{content:none} /* keep HUD bracket off the zoom-hint corner */ .mermaid .zhint{position:absolute;top:6px;right:6px;z-index:4;display:flex;align-items:center;gap:5px; font-family:'Oswald';font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber); background:rgba(10,11,13,.7);border:1px solid var(--line);padding:3px 7px;pointer-events:none;opacity:.7} .mermaid .zhint svg{width:12px!important;height:12px!important;stroke:var(--amber);fill:none;stroke-width:2} /* ── DIAGRAM ZOOM VIEWER (tap any diagram to expand · pinch / wheel / drag) ── */ #diagzoom{position:fixed;inset:0;z-index:60;display:none;background:rgba(6,7,9,.96); backdrop-filter:blur(2px);touch-action:none;overflow:hidden} #diagzoom.on{display:block} #diagzoom .dz-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; will-change:transform;transform-origin:center center} #diagzoom .dz-stage svg{max-width:92vw;max-height:88vh;width:auto;height:auto;filter:drop-shadow(0 0 30px rgba(0,0,0,.6))} #diagzoom .dz-bar{position:absolute;top:calc(12px + env(safe-area-inset-top,0));right:14px;left:14px;z-index:2; display:flex;align-items:center;gap:10px;pointer-events:none} #diagzoom .dz-title{font-family:'Oswald';font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber); opacity:.8;margin-right:auto;pointer-events:none} #diagzoom .dz-btns{display:flex;gap:8px;pointer-events:auto} .dz-btn{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:rgba(17,19,22,.9); border:1px solid var(--line2);color:var(--txt);cursor:pointer;font-family:'Oswald';font-size:20px;line-height:1; -webkit-tap-highlight-color:transparent;transition:.15s} .dz-btn:hover{border-color:var(--amber);color:var(--amber)} .dz-btn:active{transform:translateY(1px)} #diagzoom .dz-foot{position:absolute;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom,0));text-align:center; font-family:'Oswald';font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);pointer-events:none} .notecards{align-self:flex-start;width:88%;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px} .card{background:var(--glass-bg);border:1px solid var(--glass-border);padding:14px 16px;cursor:pointer; backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:14px;transition:background .3s,border-color .2s} .card:hover{border-color:var(--amber)} .card .cf{font-family:'Oswald';font-size:10px;color:var(--amber);letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px} .card .ct{font-family:'Oswald';text-transform:uppercase;color:#fff;font-size:14px;margin-bottom:4px;letter-spacing:.02em} .card .cs{font-size:12px;color:var(--muted);line-height:1.4;max-height:52px;overflow:hidden} .cursor{display:inline-block;width:8px;background:var(--amber);margin-left:2px;animation:blink 1s steps(2) infinite} @keyframes blink{50%{opacity:0}} .toolstat{display:flex;align-items:center;gap:8px;font-family:'Oswald';font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:8px} .toolstat .pulse{width:7px;height:7px;background:var(--amber);animation:blink .8s infinite} /* composer — command bar */ .composer{display:flex;gap:8px;align-items:center;padding:12px 0 22px} .composer input{flex:1;background:var(--input-bg);border:1px solid var(--input-border);color:var(--txt);padding:14px 16px;font-family:Inter;font-size:15px;outline:none;transition:background .2s,border-color .15s,color .2s} .composer input::placeholder{color:var(--txt3);text-transform:uppercase;letter-spacing:.05em;font-size:13px} .composer input:focus{border-color:var(--input-focus);box-shadow:inset 0 0 0 1px var(--input-focus)} .shot-strip{display:flex;gap:6px;flex-wrap:wrap;padding:0 0 8px} .shot-thumb{position:relative;width:56px;height:56px;border-radius:6px;border:1px solid var(--line);overflow:hidden;background:#111} .shot-thumb img{width:100%;height:100%;object-fit:cover;cursor:zoom-in} .shot-thumb:hover img{filter:brightness(1.1)} .shot-thumb button{position:absolute;top:1px;right:1px;width:16px;height:16px;border:none;border-radius:3px;background:rgba(0,0,0,.7);color:#fff;font-size:10px;cursor:pointer;line-height:1;padding:0} .msg-shot{max-width:220px;max-height:140px;border-radius:6px;border:1px solid var(--line);margin-top:6px;display:block;cursor:zoom-in;transition:border-color .15s,box-shadow .15s} .msg-shot:hover{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)} /* shared zoom hint for screenshots + any chat images (same as mermaid diagrams) */ .shot-wrap{position:relative;display:inline-block;vertical-align:top;margin-top:6px} .shot-wrap .msg-shot{margin-top:0} .shot-wrap .zhint, .mermaid .zhint{ position:absolute;top:6px;right:6px;z-index:4;display:flex;align-items:center;gap:5px; font-family:'Oswald';font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber); background:rgba(10,11,13,.7);border:1px solid var(--line);padding:3px 7px;pointer-events:none;opacity:.7 } .shot-wrap .zhint svg, .mermaid .zhint svg{width:12px!important;height:12px!important;stroke:var(--amber);fill:none;stroke-width:2} .icon-btn{display:flex;align-items:center;justify-content:center;width:46px;height:48px;border:1px solid var(--icon-border); background:var(--icon-bg);color:var(--txt2);cursor:pointer;transition:background .2s,border-color .15s,color .2s;flex-shrink:0} .icon-btn:hover{border-color:var(--amber);color:var(--amber)} .icon-btn.on{border-color:var(--amber);color:#000;background:var(--amber)} .icon-btn svg,.send-btn svg{width:20px;height:20px;pointer-events:none} .icon-btn svg line,.icon-btn svg rect{transform-box:fill-box;transform-origin:center} .icon-btn.on svg line{animation:eq .55s ease-in-out infinite alternate} .icon-btn.on svg line:nth-child(2){animation-delay:.1s}.icon-btn.on svg line:nth-child(3){animation-delay:.2s} .icon-btn.on svg line:nth-child(4){animation-delay:.15s}.icon-btn.on svg line:nth-child(5){animation-delay:.05s} @keyframes eq{from{transform:scaleY(.45)}to{transform:scaleY(1.4)}} .send-btn{display:flex;align-items:center;justify-content:center;width:54px;height:48px;border:none;background:var(--amber); color:#000;cursor:pointer;transition:.15s;flex-shrink:0;clip-path:polygon(0 0,100% 0,100% 100%,11px 100%,0 calc(100% - 11px))} .send-btn:hover{background:var(--amber2)} .send-btn:active,.icon-btn:active{transform:translateY(1px)} /* ── MISSION CONTROL ── */ #mc{overflow:auto} .mcgrid{width:100%;padding:22px 24px;display:grid;grid-template-columns:repeat(12,1fr);gap:16px;align-content:start} .chips{grid-column:span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media(max-width:900px){.chips{grid-template-columns:repeat(2,1fr)}} .chip{background:var(--glass-bg);border:1px solid var(--glass-border);padding:18px; backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:14px;transition:background .3s,border-color .2s} .chip .k{font-family:'Oswald';text-transform:uppercase;letter-spacing:.14em;font-size:10px;color:var(--muted);margin-bottom:8px} .chip .v{font-family:'Oswald';font-weight:700;font-size:34px;color:#fff;line-height:1} .chip .vsub{font-family:'Oswald';font-size:11px;color:var(--amber);letter-spacing:.1em;text-transform:uppercase;margin-top:6px} .panel{background:var(--glass-bg);border:1px solid var(--glass-border);padding:18px 20px;grid-column:span 6; backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:14px;transition:background .3s,border-color .2s} .panel.full{grid-column:span 12} @media(max-width:900px){.panel{grid-column:span 12}} .panel h3,.tpanel h3{font-family:'Oswald';font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase; color:var(--txt);margin:0 0 14px;display:flex;align-items:center;gap:8px} .panel h3::before,.tpanel h3::before{content:"";width:8px;height:8px;background:var(--amber);flex:0 0 auto} .bar{display:flex;align-items:center;gap:12px;margin:9px 0;font-size:13px} .bar .label{width:34%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt); font-family:'Oswald';text-transform:uppercase;letter-spacing:.03em;font-size:12px} .bar .track{flex:1;height:8px;background:#0d0e10;border:1px solid var(--line);position:relative;overflow:hidden} .bar .fill{height:100%;width:0;background:var(--amber);transition:width 1s var(--fast)} .bar .num{width:64px;text-align:right;font-family:'Oswald';font-size:12px;color:var(--amber)} .empty{color:var(--dim);font-size:12px;padding:8px 0;font-family:'Oswald';text-transform:uppercase;letter-spacing:.1em} .user-cards{display:flex;flex-direction:column;gap:8px} .user-card{display:flex;align-items:center;gap:12px;padding:11px 14px;background:rgba(255,255,255,.02);border:1px solid var(--line);transition:.15s} .user-card:hover{border-color:var(--line2)} .avatar{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#1a1c20; border:1px solid var(--amber);color:var(--amber);font-family:'Oswald';font-weight:700;font-size:12px} .uinfo{flex:1;min-width:0} .uname{font-family:'Oswald';text-transform:uppercase;letter-spacing:.03em;color:#fff;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ufeatures{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:2px} .utokens{font-family:'Oswald';font-weight:700;font-size:16px;color:var(--amber);white-space:nowrap} .ucalls{font-size:10px;color:var(--muted);text-align:right;margin-top:2px} /* ── GRAPH ── */ #graph3d{position:absolute;inset:0;min-height:420px} .ghint{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:var(--muted);font-size:10px; letter-spacing:.14em;text-transform:uppercase;font-family:'Oswald';pointer-events:none} /* tactical toolbar — edge filters + focus modes */ .gtools{position:absolute;top:14px;left:14px;z-index:4;display:flex;flex-direction:column;gap:7px; background:rgba(10,11,13,.82);border:1px solid var(--line);padding:11px 12px;backdrop-filter:blur(3px); font-family:'Oswald';min-width:208px} .gtrow{display:flex;align-items:center;gap:6px} .gtlabel{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);width:42px;flex:0 0 auto} .gtool{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line2); padding:4px 9px;cursor:pointer;transition:.14s;-webkit-tap-highlight-color:transparent;user-select:none} .gtool:hover{border-color:var(--amber);color:var(--txt)} .gtool.on{border-color:var(--amber);color:#000;background:var(--amber)} .gtstat{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);opacity:.85; min-height:11px;margin-top:1px;border-top:1px solid var(--line);padding-top:6px} @media(max-width:680px){.gtools{top:10px;left:10px;min-width:0;padding:9px 10px;gap:6px} .gtool{padding:3px 7px;font-size:9px}.gtlabel{width:38px}} /* ── TRIAGE ── */ #triage{overflow:auto} .tgrid{padding:22px 24px;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:start} @media(max-width:820px){.tgrid{grid-template-columns:1fr}} /* ── ORCHESTRATION ── */ #orchestration{overflow:auto} .orch-wrap{width:100%;max-width:1180px;margin:0 auto;padding:20px 24px 36px;box-sizing:border-box} .orch-hero{height:auto;display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)} .orch-hero-main{flex:1;min-width:220px} .orch-hero h2{margin:0;font-family:'Oswald';font-weight:700;font-size:22px;letter-spacing:.06em;text-transform:uppercase;color:#fff} .orch-hero-sub{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--muted);max-width:540px} .orch-hero-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .orch-poll{font-size:10px;color:var(--muted);letter-spacing:.04em} .orch-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;align-content:start} .orch-s12{grid-column:span 12}.orch-s7{grid-column:span 7}.orch-s5{grid-column:span 5} @media(max-width:960px){.orch-s7,.orch-s5{grid-column:span 12}} .orch-panel{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:14px;padding:18px 20px; backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)} .orch-panel-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px} .orch-panel-hdr h3{margin:0;font-family:'Oswald';font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt); display:flex;align-items:center;gap:8px} .orch-panel-hdr h3::before{content:"";width:8px;height:8px;background:var(--amber);flex:0 0 auto} .orch-panel-desc{font-size:11px;color:var(--muted);line-height:1.45;margin:-6px 0 12px} .orch-badge{font-family:'Oswald';font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted); padding:3px 8px;border:1px solid var(--line);border-radius:20px;white-space:nowrap} .orch-status-row{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch} .orch-app-card{flex:1;min-width:160px;max-width:280px;background:rgba(255,255,255,.02);border:1px solid var(--line); border-radius:10px;padding:10px 12px;font-size:12px} .orch-app-card .name{font-weight:600;text-transform:capitalize;display:flex;align-items:center;gap:8px} .orch-app-card .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0} .orch-app-card ul{margin:6px 0 0;padding:0 0 0 14px;font-size:10px;color:var(--muted);line-height:1.4} .orch-agent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px} .orch-agent-card{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:11px;min-height:54px} .orch-agent-card.on{border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.04)} .orch-agent-card .name{font-weight:600;margin-bottom:3px} .orch-agent-card .sub{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .orch-fleet-table{border:1px solid var(--line);border-radius:10px;background:#0a0b0d;overflow:hidden} .orch-fleet-head,.orch-fleet-row{display:grid;grid-template-columns:minmax(72px,1fr) minmax(100px,1.4fr) 52px 56px 72px 52px; gap:8px;align-items:center;padding:7px 12px;font-size:10px} .orch-fleet-head{font-family:'Oswald';letter-spacing:.1em;text-transform:uppercase;color:var(--muted); border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)} .orch-fleet-row{border-bottom:1px solid rgba(255,255,255,.04);line-height:1.3} .orch-fleet-row:last-child{border-bottom:none} .orch-fleet-row .host{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .orch-fleet-row .actions{display:flex;gap:4px;justify-content:flex-end} .orch-fleet-body{max-height:200px;overflow:auto} .orch-fleet-body .orch-fleet-row{cursor:default} .orch-jobs-table .orch-fleet-head,.orch-jobs-table .orch-fleet-row{ grid-template-columns:36px minmax(72px,1fr) 52px 68px minmax(72px,1fr) 44px} .orch-jobs-table .orch-fleet-row{cursor:pointer;transition:background .12s} .orch-jobs-table .orch-fleet-row:hover{background:rgba(59,130,246,.04)} .orch-jobs-table .orch-fleet-row.live{box-shadow:inset 3px 0 0 var(--amber)} .orch-jobs-body{max-height:180px;overflow:auto} .grok-sess-table{border:1px solid var(--line);border-radius:10px;background:#0a0b0d;overflow:hidden;font-size:10px} .grok-sess-head,.grok-sess-row{display:grid;grid-template-columns:minmax(120px,1.6fr) 88px 72px 72px 56px 64px 48px; gap:8px;align-items:center;padding:7px 12px} .grok-sess-head{font-family:'Oswald';letter-spacing:.1em;text-transform:uppercase;color:var(--muted); border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)} .grok-sess-row{border-bottom:1px solid rgba(255,255,255,.04);line-height:1.3} .grok-sess-row:last-child{border-bottom:none} .grok-sess-row.live{box-shadow:inset 3px 0 0 var(--good)} .grok-sess-body{max-height:220px;overflow:auto} .orch-reg-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px} @media(max-width:680px){.orch-reg-form{grid-template-columns:1fr}} .orch-field{display:flex;flex-direction:column;gap:4px} .orch-field label{font-family:'Oswald';font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .orch-field input,.orch-field select{background:var(--input-bg);border:1px solid var(--input-border);border-radius:6px; padding:8px 10px;font-size:12px;color:var(--txt)} .orch-reg-actions{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px} .orch-pipeline{border:1px solid var(--line);border-radius:10px;background:#0a0b0d;overflow:hidden} .orch-pipeline summary{padding:10px 14px;font-family:'Oswald';font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);cursor:pointer;user-select:none;list-style:none;display:flex;align-items:center;gap:8px} .orch-pipeline summary::-webkit-details-marker{display:none} .orch-pipeline summary::before{content:"";width:8px;height:8px;background:var(--amber);opacity:.6} .orch-pipeline-inner{position:relative;height:96px;border-top:1px solid var(--line)} .orch-tasks{border:1px solid var(--line);border-radius:10px;background:#0a0b0d;max-height:240px;overflow:auto} .orch-task-row{display:flex;gap:10px;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.04);font-size:11px;line-height:1.35} .orch-task-row:last-child{border-bottom:none} .orch-task-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0;margin-top:4px} .orch-task-meta{font-size:9px;opacity:.65;margin-top:2px} .orch-empty{padding:12px 14px;color:var(--muted);font-size:11px} .orch-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px; font-size:10px;color:var(--muted);flex-wrap:wrap} .orch-grok-panel{border-color:rgba(160,123,255,.28);background:linear-gradient(135deg,rgba(160,123,255,.04),var(--glass-bg) 55%)} .orch-grok-meta{font-size:11px;color:var(--muted);margin-bottom:10px;line-height:1.45} .orch-grok-hint{margin-top:8px;font-size:9px;color:var(--dim,#666);line-height:1.45} .orch-grok-hint code{font-size:9px;color:var(--txt2)} /* ── FAB STACK (capture + co-pilot) ── */ .fab-stack{position:fixed;right:22px;bottom:22px;z-index:22;display:flex;flex-direction:column-reverse; align-items:center;gap:10px;pointer-events:none} .fab-stack > *{pointer-events:auto} .fab-stack .fab{position:static} .copilot-fab{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:#1a1f2e;color:var(--amber);border:1px solid var(--amber-border,var(--line)); font-family:'Oswald';font-weight:700;font-size:16px;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.4); transition:transform .15s,box-shadow .15s,border-color .15s} .copilot-fab:hover{transform:translateY(-2px);border-color:var(--amber);box-shadow:0 6px 20px rgba(59,130,246,.25)} .copilot-fab.open{background:var(--amber);color:#000;border-color:var(--amber)} .copilot-panel{position:fixed;right:16px;bottom:148px;z-index:21;width:min(380px,calc(100vw - 32px));max-height:min(70vh,520px); display:none;flex-direction:column;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:14px; backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 12px 40px rgba(0,0,0,.55);overflow:hidden} .copilot-panel.open{display:flex} .copilot-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line); background:rgba(0,0,0,.2)} .copilot-hdr-title{font-family:'Oswald';font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)} .copilot-hdr-tab{font-size:10px;color:var(--muted);margin-top:2px} .copilot-log{flex:1;overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px;min-height:120px} .copilot-msg{font-size:12px;line-height:1.5;color:var(--txt2)} .copilot-msg.user{color:var(--txt);text-align:right;opacity:.9} .copilot-msg.assistant{color:var(--txt2)} .copilot-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 8px} .copilot-chip{font-size:10px;padding:4px 8px;border:1px solid var(--line);border-radius:20px;color:var(--muted); cursor:pointer;background:rgba(255,255,255,.02);transition:.12s;max-width:100%;line-height:1.3} .copilot-chip:hover{border-color:var(--amber);color:var(--amber)} .copilot-input-row{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:rgba(0,0,0,.15)} .copilot-input{flex:1;background:var(--input-bg);border:1px solid var(--input-border);border-radius:8px;padding:8px 10px; font-size:12px;color:var(--txt);resize:none;min-height:36px;max-height:80px;font-family:Inter} @media(max-width:680px){ .fab-stack{right:14px;bottom:calc(76px + env(safe-area-inset-bottom,0))} .fab-stack .fab{display:none} .copilot-panel{right:10px;left:10px;width:auto;bottom:calc(132px + env(safe-area-inset-bottom,0));max-height:55vh} } .tpanel{background:var(--glass-bg);border:1px solid var(--glass-border);padding:18px 20px; backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:14px;transition:background .3s,border-color .2s} .tbtn-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px} .tbtn{font-family:'Oswald';text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--amber); background:var(--btn-bg);border:1px solid var(--btn-border);padding:9px 16px;cursor:pointer;transition:.15s} .tbtn:hover{border-color:var(--amber);color:var(--amber)} .tbtn.go{background:var(--amber);color:#000;border-color:var(--amber)}.tbtn.go:hover{background:var(--amber2)} .tbtn:disabled{opacity:.4;cursor:default} .cand-item{padding:10px 12px;border:1px solid var(--line);margin-bottom:7px;cursor:pointer;transition:.15s;background:rgba(255,255,255,.02);position:relative} .cand-item:hover{border-color:var(--amber)} .cand-path{font-size:10px;color:var(--amber);letter-spacing:.06em;margin-bottom:3px;font-family:'Oswald';text-transform:uppercase} .cand-title{color:#fff;font-family:'Oswald';text-transform:uppercase;font-size:13px;letter-spacing:.02em} .cand-folder{font-size:10px;color:var(--muted);margin-top:3px} .tlog-item{padding:9px 12px;border-left:2px solid var(--amber);margin-bottom:7px;font-size:12.5px;line-height:1.4;background:rgba(255,255,255,.02)} .tlog-ts{color:var(--muted);font-size:10px;font-family:'Oswald';letter-spacing:.06em} .tlog-path{color:#fff;font-family:'Oswald';text-transform:uppercase;font-size:12px;margin:3px 0} .tlog-tags{color:var(--amber);font-size:11px}.tlog-reason{color:var(--muted);font-size:11px} .tlog-moved{color:var(--good);font-size:11px}.tlog-err{color:var(--danger);font-size:11px} .tstat{font-size:12px;color:var(--muted);padding:6px 0} .tresult{background:#0d0e10;border:1px solid var(--line);padding:12px 16px;margin-top:12px;font-size:12.5px;line-height:1.6} .tresult .ok{color:var(--good)}.tresult .warn{color:var(--amber)} /* ── MEMORY ── */ #memory{overflow:auto} #access{overflow-y:auto} .memgrid{padding:22px 24px;display:grid;grid-template-columns:1.1fr 1fr;gap:16px;align-content:start} @media(max-width:820px){.memgrid{grid-template-columns:1fr;padding:16px 14px}} .soul-editor{width:100%;min-height:160px;resize:none;overflow-y:hidden;background:var(--input-bg);border:1px solid var(--input-border);color:var(--txt); padding:14px 16px;font-family:Inter;font-size:13.5px;line-height:1.6;outline:none;transition:background .2s,border-color .15s,color .2s} .soul-editor:focus{border-color:var(--input-focus)} .mem-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px} .mem-hint{font-size:11px;color:var(--muted)} .voicepick-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .vmode-row{display:flex;gap:8px;margin-bottom:4px} .vmode-btn{flex:1;padding:10px 8px;background:var(--input-bg);border:1px solid var(--input-border);color:var(--txt2); font-family:'Oswald';font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; cursor:pointer;text-align:center;transition:background .2s,border-color .15s,color .2s} .vmode-btn:hover{border-color:var(--line2);color:var(--txt)} .vmode-btn.on{border-color:var(--amber);color:var(--amber);background:rgba(251,191,36,.06)} #voiceSelect,#sysVoiceSelect{flex:1;min-width:220px;background:var(--input-bg);border:1px solid var(--input-border);color:var(--txt); padding:11px 13px;font-family:Inter;font-size:13.5px;outline:none;cursor:pointer;transition:.15s; -webkit-appearance:none;appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--amber) 50%),linear-gradient(135deg,var(--amber) 50%,transparent 50%); background-position:calc(100% - 18px) center,calc(100% - 13px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat} #voiceSelect:focus,#sysVoiceSelect:focus{border-color:var(--input-focus)} #voiceSelect option,#sysVoiceSelect option{background:#16181c;color:var(--txt)} .mem-item{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;margin-bottom:7px;border:1px solid var(--line);background:rgba(255,255,255,.02)} .mem-item:hover{border-color:var(--line2)} .mem-kind{flex-shrink:0;font-family:'Oswald';font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; padding:3px 8px;background:#1a1c20;color:var(--amber);border:1px solid var(--amberdim)} .mem-kind.decision{color:var(--good);border-color:rgba(70,209,122,.4)} .mem-kind.person{color:#ff8a3d;border-color:rgba(255,138,61,.4)} .mem-body{flex:1;min-width:0}.mem-text{color:#fff;font-size:13.5px;line-height:1.45} .mem-meta{font-size:10px;color:var(--muted);margin-top:5px;display:flex;gap:8px;flex-wrap:wrap;align-items:center} .mem-src{color:var(--muted)}.mem-src.link{color:var(--amber);cursor:pointer}.mem-src.link:hover{text-decoration:underline} .mem-strength{display:flex;align-items:center;gap:6px} .mem-strbar{width:50px;height:4px;background:#0d0e10;border:1px solid var(--line);overflow:hidden} .mem-strfill{height:100%;background:var(--amber);width:0;transition:width 1s var(--fast)} .mem-strfill.faded{background:var(--dim)} .mem-item.archived{opacity:.5} .mem-ctl{display:flex;gap:6px;flex-shrink:0} .mem-btn{cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center; border:1px solid var(--icon-border);background:var(--icon-bg);color:var(--txt2);font-size:13px;transition:.15s} .mem-btn:hover{border-color:var(--amber);color:var(--amber)} .mem-btn.pinned{color:#000;background:var(--amber);border-color:var(--amber)} .mem-btn.del:hover{color:var(--danger);border-color:var(--danger)} .mem-add{display:flex;gap:8px;margin-bottom:12px} .mem-add input{flex:1;background:var(--input-bg);border:1px solid var(--input-border);color:var(--txt);padding:10px 13px;font-family:Inter;font-size:13.5px;outline:none;transition:background .2s,border-color .15s,color .2s} .mem-add input:focus{border-color:var(--input-focus)} .mem-toggle{font-family:'Oswald';font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);cursor:pointer} .mem-toggle:hover{color:var(--amber)} /* ── MODAL ── */ .modal{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.82);display:none;align-items:center;justify-content:center;padding:30px} .modal.show{display:flex;animation:cardin .3s var(--fast)} .sheet{background:var(--glass-bg);border:1px solid var(--glass-border);max-width:880px;width:100%;max-height:86vh;overflow:auto; backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:14px;transition:background .3s,border-color .2s} .shead{position:sticky;top:0;background:var(--panel-head);border-bottom:1px solid var(--glass-border);display:flex;justify-content:space-between;align-items:center;padding:14px 22px;z-index:4;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} .sheet .sbody{padding:18px 26px 30px;line-height:1.65} .sheet .sbody h1,.sheet .sbody h2,.sheet .sbody h3{font-family:'Oswald';text-transform:uppercase;color:#fff;margin:.6em 0 .3em} .sheet .sbody a{color:var(--amber)}.sheet .sbody code{background:#000;color:var(--amber2);padding:2px 6px;border:1px solid var(--line)} .sheet .sbody pre{background:#000;padding:12px;overflow:auto;border:1px solid var(--line)} .sheet .sbody table{border-collapse:collapse;width:100%}.sheet .sbody td,.sheet .sbody th{border:1px solid var(--line);padding:7px 11px;text-align:left} ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-thumb{background:var(--line2)}::-webkit-scrollbar-thumb:hover{background:var(--amberdim)} ::-webkit-scrollbar-track{background:transparent} /* ── QUICK CAPTURE ── */ .fab{position:fixed;right:22px;bottom:22px;z-index:18;width:54px;height:54px;display:flex;align-items:center;justify-content:center; cursor:pointer;font-family:'Oswald';font-size:30px;color:#000;background:var(--amber);border:none;transition:.15s; clip-path:polygon(0 0,100% 0,100% 100%,12px 100%,0 calc(100% - 12px))} .fab:hover{background:var(--amber2);transform:translateY(-2px)}.fab:active{transform:translateY(0)} .capsheet-bg{position:fixed;inset:0;z-index:19;background:rgba(0,0,0,.8);display:none;align-items:flex-end;justify-content:center} .capsheet-bg.show{display:flex;animation:cardin .25s var(--fast)} @media(min-width:700px){.capsheet-bg{align-items:center;padding:30px}} .capsheet{width:100%;max-width:620px;background:var(--glass-bg);border:1px solid var(--glass-border);border-top:3px solid var(--amber); padding:24px 22px 28px;animation:sheetup .3s var(--fast);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:14px;transition:background .3s,border-color .2s} @keyframes sheetup{from{transform:translateY(40px);opacity:.4}to{transform:translateY(0);opacity:1}} .capsheet h3{font-family:'Oswald';font-weight:600;letter-spacing:.12em;font-size:14px;text-transform:uppercase;color:#fff; margin-bottom:16px;display:flex;align-items:center;gap:8px} .capsheet h3::before{content:"";width:8px;height:8px;background:var(--amber)} .capsheet input,.capsheet textarea{width:100%;background:var(--input-bg);border:1px solid var(--input-border);color:var(--txt);padding:13px 15px; font-family:Inter;font-size:15px;outline:none;margin-bottom:12px;transition:background .2s,border-color .15s,color .2s} .capsheet input:focus,.capsheet textarea:focus{border-color:var(--input-focus)} .capsheet textarea{min-height:150px;resize:vertical;line-height:1.5} .caprow{display:flex;gap:10px;margin-top:4px} .capbtn{flex:1;cursor:pointer;padding:13px;font-family:'Oswald';font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;text-align:center;transition:.15s} .capbtn.save{background:var(--amber);color:#000;border:none}.capbtn.save:hover{background:var(--amber2)} .capbtn.cancel{background:transparent;border:1px solid var(--line2);color:var(--muted)}.capbtn.cancel:hover{border-color:var(--txt);color:var(--txt)} .capok{text-align:center;color:var(--good);font-size:12px;padding:10px 0 0;min-height:18px;font-family:'Oswald';letter-spacing:.06em;text-transform:uppercase} .impdivider{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--muted);font-family:'Oswald';font-size:11px;letter-spacing:.12em;text-transform:uppercase} .impdivider::before,.impdivider::after{content:"";flex:1;height:1px;background:var(--line2)} .impdrop{display:flex;align-items:center;gap:12px;cursor:pointer;padding:16px;border:1px dashed var(--line2);background:#0d0e10; color:var(--muted);transition:.15s;font-size:13px} .impdrop:hover{border-color:var(--amber);color:var(--txt)} .impdrop svg{width:24px;height:24px;color:var(--amber);flex-shrink:0} .impdrop.busy{border-style:solid;border-color:var(--amber);color:var(--txt);pointer-events:none} .impdrop.busy svg{animation:heartbeat 1s ease-in-out infinite} /* ── NEXUS OPS extras ── */ .ntoggle-track{width:42px;height:22px;background:var(--input-bg);border:1px solid var(--line2);cursor:pointer; position:relative;transition:.2s;display:inline-block;flex-shrink:0} .ntoggle-track.on{background:rgba(59,130,246,.14);border-color:var(--amber)} .ntoggle-track::after{content:"";position:absolute;width:16px;height:14px;top:3px;left:3px; background:var(--dim);transition:.2s} .ntoggle-track.on::after{background:var(--amber);left:22px} #nexus{overflow:auto} .nlog{font-family:'Courier New',monospace;font-size:11px;color:var(--muted);background:#0a0b0d; border:1px solid var(--line);padding:12px;max-height:calc(100vh - 220px);overflow:auto; white-space:pre-wrap;line-height:1.45} /* Nexus read-only data explorer */ .nxdata{display:grid;grid-template-columns:240px 1fr;gap:14px} @media(max-width:680px){.nxdata{grid-template-columns:1fr}} .nxdata-tables{border:1px solid var(--line);background:#0a0b0d;max-height:520px;overflow:auto} .nxdl-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px; border-bottom:1px solid var(--line);font-family:'Oswald';font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);position:sticky;top:0;background:#0a0b0d;z-index:1} .nxtbl{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:7px 10px;cursor:pointer; border-bottom:1px solid rgba(255,255,255,.04);transition:.12s} .nxtbl:hover{background:rgba(59,130,246,.06)} .nxtbl.on{background:rgba(59,130,246,.10);border-left:2px solid var(--amber)} .nxtbl .nm{font-family:'Courier New',monospace;font-size:12.5px;color:var(--txt);word-break:break-all} .nxtbl .ct{font-family:'Oswald';font-size:10px;color:var(--dim);white-space:nowrap} .nxtbl .kd{color:var(--amber);opacity:.7} .nxq-row{display:flex;gap:8px;margin-bottom:6px} .nxq-row input{flex:1;background:var(--input-bg);border:1px solid var(--input-border);color:var(--txt);padding:11px 13px; font-family:'Courier New',monospace;font-size:13px;outline:none;transition:background .2s,border-color .15s,color .2s} .nxq-row input:focus{border-color:var(--input-focus);box-shadow:inset 0 0 0 1px var(--input-focus)} .nxq-hint{font-family:'Oswald';font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:12px} .nxres-wrap{overflow:auto;max-height:520px;border:1px solid var(--line)} .nxres{border-collapse:collapse;font-size:12.5px;width:100%;font-family:'Courier New',monospace} .nxres th{position:sticky;top:0;background:#16181c;color:var(--amber);text-align:left;padding:7px 10px; border-bottom:1px solid var(--line2);white-space:nowrap;font-weight:600;letter-spacing:.02em} .nxres td{padding:6px 10px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--txt); vertical-align:top;max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nxres tr:hover td{background:rgba(255,255,255,.02);white-space:normal} .nxres .nullv{color:var(--dim);font-style:italic} .nxres-meta{font-family:'Oswald';font-size:11px;letter-spacing:.06em;text-transform:uppercase; color:var(--muted);margin:10px 0 6px} .nxerr{color:var(--danger);font-family:'Courier New',monospace;font-size:12.5px;padding:10px; border:1px solid rgba(255,82,71,.4);background:rgba(255,82,71,.08)} /* ── ACCESS LOG ── */ .acctbl{width:100%;border-collapse:collapse;font-size:13px} .acctbl th{text-align:left;font-size:10px;letter-spacing:.6px;text-transform:uppercase; color:var(--t3);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line)} .acctbl td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--t2);vertical-align:middle} .acctbl tr:hover td{background:rgba(255,255,255,.02)} .acctbl .mono{font-family:'Courier New',monospace;font-size:12px;color:var(--t2)} .accbadge{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;white-space:nowrap} .accbadge.good{color:#bff5d4;background:rgba(70,209,122,.12);border:1px solid rgba(70,209,122,.35)} .accbadge.bad{color:#ffb4ad;background:rgba(255,82,71,.12);border:1px solid rgba(255,82,71,.4)} .accbadge.neutral{color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--line)} /* ── BOTTOM NAV (mobile) ── */ .bnav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:10;background:var(--nav-bg); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border-top:1px solid var(--nav-border);padding-bottom:env(safe-area-inset-bottom,0);transition:background .3s} .bnav-inner{display:flex;position:relative} .bnav-slider{position:absolute;top:0;left:0;width:calc(100%/5);height:3px;background:var(--amber);box-shadow:0 0 10px rgba(59,130,246,.6);transition:transform .35s var(--spring);z-index:2} .bni{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer; padding:9px 4px;color:var(--muted);position:relative;-webkit-tap-highlight-color:transparent} .bni.on{color:var(--amber)} .bni svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .bni span{font-family:'Oswald';font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:500} .bni-action{flex:1;display:flex;align-items:center;justify-content:center;padding:4px;cursor:pointer;-webkit-tap-highlight-color:transparent} .bni-fab{width:50px;height:50px;background:var(--amber);color:#000;display:flex;align-items:center;justify-content:center; font-size:28px;font-family:'Oswald';font-weight:700;transition:.12s var(--fast); clip-path:polygon(0 0,100% 0,100% 100%,9px 100%,0 calc(100% - 9px)); box-shadow:0 -3px 14px rgba(59,130,246,.28)} .bni-action:active .bni-fab{transform:scale(.9);background:var(--amber2)} .btn-ico{display:none;width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle} /* ── MOBILE ── */ @media(max-width:680px){ .tabs{display:none} header{padding:env(safe-area-inset-top,0) 12px 0;height:calc(50px + env(safe-area-inset-top,0));gap:8px} .right #status{display:none} .right #installBtn{display:none!important} .logo{font-size:16px} .bnav{display:block} main{padding-bottom:calc(68px + env(safe-area-inset-bottom,0))} .stage{padding:0 12px calc(68px + env(safe-area-inset-bottom,0)) 12px} .hello .big{font-size:24px} .composer{padding:10px 0;gap:6px} .icon-btn{width:40px;height:46px}.send-btn{width:48px;height:46px} .fab{display:none!important} /* keep the speak/audio toggle visible on mobile — it's the only way to hear replies without starting a mic session; hide the secondary search button instead to make room. */ #srchBtn{display:none} .btn-ico{display:inline-block} .btn-txt{display:none} .sfxbtn,.lockbtn{padding:7px 10px;min-width:34px} .mcgrid{padding:14px 12px;gap:12px}.chips{gap:10px}.chip .v{font-size:26px} .tgrid{padding:14px 12px;grid-template-columns:1fr}.panel{grid-column:span 12} .orch-wrap{padding:14px 12px 28px} .orch-fleet-head{display:none} .orch-fleet-row{grid-template-columns:1fr auto auto;gap:6px} .orch-fleet-row .host{grid-column:1/-1;font-size:9px} .orch-jobs-table .orch-fleet-row{grid-template-columns:1fr auto auto;gap:6px} .orch-jobs-table .orch-fleet-row .job-when{grid-column:1/-1;font-size:9px;color:var(--muted)} } @media(prefers-reduced-motion:reduce){ *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.05s!important} .msg.c{animation:none} } /* constitution unlock modal - improved scrolling and layout */ #constModal {position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:9999} #constModal .box { background:#111; border:1px solid #333; padding:20px; width: min(720px, 92vw); max-height: 85vh; overflow-y: auto; border-radius:8px; display: flex; flex-direction: column; } #constModal .box h3 {margin:0 0 12px;font-size:16px} #constEditor { width:100%; flex: 1; min-height: 320px; max-height: 55vh; overflow-y: auto; font-family:monospace; background:#0a0b0d; color:#ddd; border:1px solid #333; padding:12px; resize: vertical; line-height:1.45; } #constStep2 { display: flex; flex-direction: column; flex: 1; min-height:0; } /* ── CONNECTIONS view (scoped) ── */ #connections{flex-direction:column;align-items:stretch} .conn-wrap{width:100%;max-width:1180px;margin:0 auto;height:100%;overflow-y:auto;padding:4px 24px 32px;box-sizing:border-box} .conn-intro{margin:6px 0 22px} .conn-intro p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.5;max-width:760px} .conn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:start} .conn-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:12px;padding:18px; display:flex;flex-direction:column;gap:10px;min-width:0;backdrop-filter:blur(6px); box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 8px 24px rgba(0,0,0,.18)} .conn-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap} .conn-card-title{font-family:'Oswald',Inter,sans-serif;font-weight:600;font-size:14px;letter-spacing:.06em; text-transform:uppercase;color:var(--txt)} .conn-card-sub{font-size:11px;color:var(--muted);line-height:1.45} .conn-card-note{font-size:11px;color:var(--muted);line-height:1.45;margin-top:auto} .conn-card-note b{color:var(--txt2,var(--muted))} /* status pill */ .conn-pill{display:inline-flex;align-items:center;gap:5px;font-family:'Oswald',Inter,sans-serif; font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:999px; border:1px solid var(--line2);background:var(--chip-bg);color:var(--muted);white-space:nowrap} .conn-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9} .conn-pill.on{color:var(--good);border-color:rgba(70,209,122,.45);background:rgba(70,209,122,.1)} /* rows inside app-connections / providers */ .conn-rows{display:flex;flex-direction:column;gap:8px} .conn-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; padding:9px 11px;border-radius:8px;background:var(--input-bg);border:1px solid var(--input-border)} .conn-row.active{border-color:var(--amber-border);background:var(--amber-bg)} .conn-row-main{display:flex;align-items:center;gap:8px;min-width:0;flex:1} .conn-row-name{font-weight:600;font-size:13px;color:var(--txt);text-transform:capitalize} .conn-row-meta{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis} .conn-row-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap} /* hermes toggle */ .conn-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none} .conn-toggle input{width:18px;height:18px;accent-color:var(--amber);cursor:pointer} .conn-toggle span{font-size:13px;color:var(--txt)} /* buttons */ .conn-btn{font-family:'Oswald',Inter,sans-serif;font-size:11px;letter-spacing:.04em;text-transform:uppercase; padding:5px 12px;border-radius:6px;cursor:pointer;transition:.15s; background:var(--chip-bg);border:1px solid var(--line2);color:var(--txt)} .conn-btn:hover{border-color:var(--amber);color:var(--amber)} .conn-btn.primary{background:var(--btn-bg);border-color:var(--btn-border);color:var(--amber)} .conn-btn.primary:hover{background:var(--amber);color:#000;border-color:var(--amber)} .conn-btn.danger{color:var(--danger);border-color:var(--line2)} .conn-btn.danger:hover{border-color:var(--danger);color:var(--danger)} .conn-btn.mini{padding:3px 9px;font-size:10px} /* inline form (llm + service keys) */ .conn-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center; border-top:1px solid var(--divider);padding-top:14px;margin-top:4px} .conn-input,.conn-select{padding:7px 10px;background:var(--input-bg);color:var(--txt); border:1px solid var(--input-border);border-radius:6px;font-size:12px;font-family:inherit;outline:none} .conn-input:focus,.conn-select:focus{border-color:var(--amber);box-shadow:0 0 0 1px var(--input-focus)} .conn-input::placeholder{color:var(--dim)} .conn-meta-badge{font-size:10px;font-family:'Oswald',Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase} .conn-meta-badge.ok{color:var(--good)} .conn-meta-badge.no{color:var(--danger)} .conn-empty{color:var(--muted);font-size:12px;padding:8px 2px} @media (max-width:560px){ .conn-wrap{padding:4px 14px 28px} .conn-input,.conn-select{flex:1 1 100%;width:auto} } /* Command palette polish */ #cmdPalette .cmd-item:hover, #cmdPalette .cmd-item.cmd-active { background: rgba(59,130,246,.08); border-color: var(--amber-border); color: #fff; } #cmdPalette input:focus { border-color: var(--amber); box-shadow: 0 0 0 1px var(--input-focus); } /* ── Richer orchestration tasks + real-time agent feel ── */ .orch-task-row { display:flex; gap:8px; align-items:flex-start; padding:6px 8px; margin:3px 0; border-radius:6px; border:1px solid var(--line); background:rgba(255,255,255,.015); transition: transform .12s var(--fast), border-color .2s, background .2s; } .orch-task-row:hover { transform: translateY(-1px); border-color: var(--amber-border); } .orch-task-row.done, .orch-task-row.completed { opacity:.85; } .orch-task-dot { width:8px; height:8px; border-radius:50%; margin-top:5px; flex:0 0 8px; box-shadow:0 0 0 2px rgba(0,0,0,.2); } .orch-task-meta { font-size:9px; opacity:.55; font-family:monospace; margin-top:1px; } .orch-steps { display:flex; gap:3px; margin:3px 0 1px; flex-wrap:wrap; } .step-badge { font-size:8px; padding:1px 5px; border-radius:3px; background:var(--amber-bg); border:1px solid var(--amber-border); color:var(--amber); letter-spacing:.5px; text-transform:uppercase; } .orch-task-row.running .orch-task-dot { animation: pulse 1.4s infinite ease-in-out; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} } /* animated flow already has inline svg anims; extra polish */ #orch-svg line { transition: stroke-dashoffset .2s linear; } /* Theme picker + misc */ #themeSelect { margin-left:4px; } [data-theme="terminal"] .orch-task-row { font-family: ui-monospace, monospace; border-color:#3a3528; } [data-theme="steel"] .orch-task-row { border-color: rgba(90,120,170,.2); } /* Bring-back tabs polish */ .tabs .tab { transition: color .1s, border-color .1s; } .tabs .tab:hover { color: var(--amber); } /* === Fleet / Orchestration revamp for Loop-Engineering-AI style animations === */ .orch-wrap { transition: opacity 0.2s ease; } .orch-panel { transition: transform 0.2s var(--fast), box-shadow 0.2s; } .orch-panel:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0,0,0,0.2); } .orch-status-row .conn-pill, .orch-status-row .status { transition: all 0.3s var(--spring); } .conn-pill.on, .status.on { animation: statusPop 0.4s var(--spring); } @keyframes statusPop { 0% { transform: scale(0.8); opacity: 0; } 60% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } .orch-task-row { animation: taskSlideIn 0.35s cubic-bezier(0.23, 1, 0.32, 1) both; position: relative; overflow: hidden; } .orch-task-row:nth-child(2) { animation-delay: 60ms; } .orch-task-row:nth-child(3) { animation-delay: 110ms; } .orch-task-row:nth-child(4) { animation-delay: 160ms; } .orch-task-row.running { background: linear-gradient(90deg, rgba(59,130,246,0.03), rgba(59,130,246,0.08)); animation: taskSlideIn 0.35s cubic-bezier(0.23, 1, 0.32, 1), taskPulse 2.2s ease-in-out infinite; } @keyframes taskSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes taskPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.1); } 50% { box-shadow: 0 0 0 4px rgba(59,130,246,0.05); } } .orch-agent-card { transition: transform 0.2s var(--fast), border-color 0.2s; } .orch-agent-card.on { animation: agentLive 1.8s ease-in-out infinite; } @keyframes agentLive { 0%,100% { border-color: var(--good); } 50% { border-color: rgba(74,222,128,0.6); } } .orch-steps .step-badge { transition: all 0.2s; } .orch-steps .step-badge.active { background: var(--amber); color: #111; transform: scale(1.05); animation: stepActive 0.6s ease; } @keyframes stepActive { 0% { transform: scale(0.95); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } /* Enhanced animated flow for real-time agents (Loop style) */ #orch-svg { transition: opacity 0.3s; } #orch-svg circle.flow-dot { animation: flowDotMove 1.8s linear infinite; } @keyframes flowDotMove { 0% { opacity: 0.3; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0.3; } } .orch-empty { transition: all 0.3s; } .orch-hero { position: relative; } .orch-hero::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 60px; height: 2px; background: linear-gradient(to right, var(--amber), transparent); animation: heroLine 3s ease-in-out infinite; } @keyframes heroLine { 0%,100% { width: 60px; opacity: 0.6; } 50% { width: 120px; opacity: 1; } } /* Internet status special animation when green */ #orch-apps .internet .conn-pill.on { background: var(--good); box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2); animation: internetGlow 2s ease-in-out infinite; } @keyframes internetGlow { 0%,100% { box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2); } 50% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0.05); } } /* === Hermes Kanban for Active Tasks (Loop Engineering style) === */ .kanban-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; min-height: 140px; } .kanban-column { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 8px; padding: 8px; min-height: 120px; transition: all 0.3s var(--fast); } .kanban-column.running { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(59,130,246,0.15); } .kanban-column h4 { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line); } .kanban-cards { display: flex; flex-direction: column; gap: 6px; } .kanban-card { background: var(--panel); border: 1px solid var(--line2); border-radius: 6px; padding: 6px 8px; font-size: 10px; transition: transform 0.2s var(--fast), box-shadow 0.2s, border-color 0.2s; animation: kanbanCardIn 0.25s cubic-bezier(0.23,1,0.32,1) both; position: relative; overflow: hidden; } .kanban-card:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.15); } .kanban-card.running { border-color: var(--amber); animation: kanbanCardIn 0.25s, kanbanActivePulse 1.8s ease-in-out infinite; } @keyframes kanbanCardIn { from { opacity:0; transform: translateY(6px) scale(0.98); } to { opacity:1; transform: none; } } @keyframes kanbanActivePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.15); } 50% { box-shadow: 0 0 0 4px rgba(59,130,246,0.05); } } .kanban-card .title { font-weight: 600; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kanban-card .meta { font-size: 9px; opacity: .6; margin: 2px 0; } .kanban-card .progress { height: 3px; background: var(--line); border-radius: 2px; margin: 4px 0 3px; overflow: hidden; } .kanban-card .progress-bar { height: 100%; background: var(--amber); transition: width 0.4s var(--fast); animation: progressFlow 1.5s linear infinite paused; } .kanban-card.running .progress-bar { animation-play-state: running; } @keyframes progressFlow { 0% { background-position: 0 0; } 100% { background-position: 20px 0; } } .kanban-card .steps { display: flex; gap: 2px; flex-wrap: wrap; } .kanban-card .step-mini { font-size: 8px; padding: 0 3px; border-radius: 2px; background: var(--chip-bg); border: 1px solid var(--line); opacity: .7; } .kanban-card .step-mini.active { background: var(--amber); color: #111; border-color: var(--amber); opacity: 1; animation: stepPop 0.5s var(--spring); } .kanban-card .status-tag { position: absolute; top: 4px; right: 4px; font-size: 8px; padding: 0 3px; border-radius: 2px; background: var(--tag-bg); } .kanban-card.done { opacity: 0.85; } .kanban-column .kanban-empty { font-size: 9px; opacity: .5; padding: 4px; } /* Proper Hermes Kanban styling - Trello-like cards, flow visualization */ .kanban-board { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; min-height: 220px; } .kanban-column { flex: 0 0 180px; background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 6px; padding: 6px; display: flex; flex-direction: column; } .kanban-column h4 { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; padding: 2px 4px; background: var(--glass-bg); border-radius: 3px; flex-shrink: 0; } .kanban-cards { flex: 1; display: flex; flex-direction: column; gap: 4px; min-height: 100px; } .kanban-card { background: var(--panel); border: 1px solid var(--line2); border-radius: 4px; padding: 5px 6px; font-size: 9px; cursor: grab; user-select: none; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.1); } .kanban-card:active { cursor: grabbing; transform: scale(0.98); } .kanban-card:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.15); border-color: var(--amber-border); } .kanban-card .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; } .kanban-card .card-title { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kanban-card .agent-badge { font-size: 7px; padding: 0 3px; border-radius: 2px; background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); } .kanban-card .current-step { font-size: 8px; background: rgba(59,130,246,0.1); padding: 1px 3px; border-radius: 2px; margin: 2px 0; color: var(--amber); font-family: monospace; } .kanban-card .step-check { display: inline-block; width: 8px; text-align: center; } .kanban-card.inprogress .current-step { animation: stepPulse 1.5s infinite; } @keyframes stepPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } } .kanban-card .wip { font-size: 7px; opacity: .6; } /* Color experiments for Fleet Kanban - columns pop with distinct vibrant palettes */ .kanban-column.queued { border-left: 3px solid #4a90e2; } .kanban-column.running { border-left: 3px solid #ff9500; background: linear-gradient(180deg, rgba(255,149,0,0.03), transparent); } .kanban-column.completed { border-left: 3px solid #10b981; } .kanban-column.failed { border-left: 3px solid #ef4444; } [data-theme="neon"] .kanban-column.queued { border-left-color: #00f9ff; } [data-theme="neon"] .kanban-column.running { border-left-color: #ff00aa; } [data-theme="neon"] .kanban-column.completed { border-left-color: #39ff14; } [data-theme="neon"] .kanban-column.failed { border-left-color: #ff2e63; } [data-theme="matrix"] .kanban-column.queued { border-left-color: #00aa2a; } [data-theme="matrix"] .kanban-column.running { border-left-color: #00ff41; background: rgba(0,255,65,.02); } [data-theme="matrix"] .kanban-column.completed { border-left-color: #00ff41; } [data-theme="matrix"] .kanban-column.failed { border-left-color: #aa0000; } [data-theme="aurora"] .kanban-column.queued { border-left-color: #6366f1; } [data-theme="aurora"] .kanban-column.running { border-left-color: #c084fc; background: rgba(192,132,252,.03); } [data-theme="aurora"] .kanban-column.completed { border-left-color: #67e8f9; } [data-theme="aurora"] .kanban-column.failed { border-left-color: #f472b6; } /* Additional overrides to make theme changes visible across Cortex FCP */ [data-theme="neon"] { --panel: #0a0520; --line: #3a2a5a; } [data-theme="neon"] .orch-panel, [data-theme="neon"] .kanban-column { background: rgba(10,5,20,0.9); border-color: #4a2a6a; } [data-theme="neon"] .kanban-card { background: #120a1f; border-color: #3a2a5a; } [data-theme="matrix"] .orch-panel, [data-theme="matrix"] .kanban-column { background: #001100; border-color: #003300; } [data-theme="matrix"] .kanban-card { background: #000800; border-color: #002200; } [data-theme="aurora"] .orch-panel, [data-theme="aurora"] .kanban-column { background: #1a1533; border-color: #433c6b; } [data-theme="aurora"] .kanban-card { background: #251f40; border-color: #5a5580; } /* Make theme switch visibly dramatic for Cortex FCP overall look */ [data-theme="neon"] body, [data-theme="neon"] .wrap { background: var(--bg-g1) !important; color: var(--txt) !important; } [data-theme="matrix"] body, [data-theme="matrix"] .wrap { background: #000200 !important; color: #00ff41 !important; } [data-theme="aurora"] body, [data-theme="aurora"] .wrap { background: var(--bg-g1) !important; color: #f3e8ff !important; } [data-theme="terminal"] body, [data-theme="terminal"] .wrap { background: #0a0905 !important; color: #e8d9a0 !important; } [data-theme="steel"] body { background: var(--bg-g1) !important; background-attachment: fixed; color: #e6eef7 !important; } [data-theme="steel"] .wrap { background: transparent; color: #e6eef7 !important; } /* ════════════════════════════════════════════════════════════════════════ STEEL skin — brushed-metal chrome + circuit-board field (from Jong's mockup) ════════════════════════════════════════════════════════════════════════ */ [data-theme="steel"] { --steel-hi: #d4d8de; --steel-lo: #a3a9b3; --steel-edge: #6f757f; --steel-rivet: #6b7280; } /* Circuit-board field behind all content (body::before is the scanline layer) */ [data-theme="steel"] body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .85; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%237e8da6' stroke-width='1.5'%3E%3Cpath d='M40 0V60H120V150'/%3E%3Cpath d='M0 100H70V180H170'/%3E%3Cpath d='M400 50H300V130H250'/%3E%3Cpath d='M360 400V330H280V250'/%3E%3Cpath d='M200 400V350H110'/%3E%3Cpath d='M400 250H330V300'/%3E%3Cpath d='M120 210H210V300H290V360'/%3E%3Cpath d='M0 300H60V360'/%3E%3Cpath d='M250 0V40H320V110'/%3E%3Cpath d='M150 60V120H90'/%3E%3Cpath d='M300 180H360V230'/%3E%3Cpath d='M40 200V260H110V330'/%3E%3Cpath d='M210 150H180V200'/%3E%3Cpath d='M330 360V320H400'/%3E%3C/g%3E%3Cg fill='%2399a8c0'%3E%3Ccircle cx='40' cy='0' r='2.8'/%3E%3Ccircle cx='120' cy='150' r='2.8'/%3E%3Ccircle cx='170' cy='180' r='2.8'/%3E%3Ccircle cx='250' cy='130' r='2.8'/%3E%3Ccircle cx='280' cy='250' r='2.8'/%3E%3Ccircle cx='110' cy='350' r='2.8'/%3E%3Ccircle cx='330' cy='300' r='2.8'/%3E%3Ccircle cx='290' cy='360' r='2.8'/%3E%3Ccircle cx='60' cy='360' r='2.8'/%3E%3Ccircle cx='320' cy='110' r='2.8'/%3E%3Ccircle cx='90' cy='120' r='2.8'/%3E%3Ccircle cx='360' cy='230' r='2.8'/%3E%3Ccircle cx='110' cy='330' r='2.8'/%3E%3Ccircle cx='180' cy='200' r='2.8'/%3E%3C/g%3E%3C/svg%3E"); background-size: 380px 380px; } /* Bright brushed-SILVER surface — header bar, composer, chips */ [data-theme="steel"] header, [data-theme="steel"] .composer, [data-theme="steel"] .chipline .seed { background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.045) 1px 2px, transparent 2px 4px), linear-gradient(180deg, var(--steel-hi) 0%, #b6bcc5 46%, #9ca2ac 54%, var(--steel-lo) 100%) !important; border: 1px solid var(--steel-edge) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.4) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Darker raised metal insets that sit ON the silver bar */ [data-theme="steel"] #themeSelect, [data-theme="steel"] #modeToggle, [data-theme="steel"] .right .btn, [data-theme="steel"] .icon-btn { background: linear-gradient(180deg, #3a4049 0%, #262b33 100%) !important; border: 1px solid #15191f !important; color: #d6dce4 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 3px rgba(0,0,0,.4) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Header as a full-width chrome bar */ [data-theme="steel"] header { border-left: none !important; border-right: none !important; border-top: none !important; border-radius: 0 !important; position: relative; z-index: 5; } /* Dark text on the silver bar */ [data-theme="steel"] .logo { color: #1c2026; } [data-theme="steel"] .tab { color: #3a3f48; } [data-theme="steel"] .tab.on { color: #8a6500; } /* Riveted brushed-metal quick-action chips */ [data-theme="steel"] .chipline .seed { position: relative; border-radius: 7px; color: #23272e; font-weight: 700; text-shadow: 0 1px 0 rgba(255,255,255,.35); } [data-theme="steel"] .chipline .seed::before { content: ""; position: absolute; inset: 0; border-radius: 7px; pointer-events: none; background: radial-gradient(circle at 7px 7px, #c6cdd8 0 1.4px, var(--steel-rivet) 1.9px, transparent 2.6px), radial-gradient(circle at calc(100% - 7px) 7px, #c6cdd8 0 1.4px, var(--steel-rivet) 1.9px, transparent 2.6px), radial-gradient(circle at 7px calc(100% - 7px), #c6cdd8 0 1.4px, var(--steel-rivet) 1.9px, transparent 2.6px), radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #c6cdd8 0 1.4px, var(--steel-rivet) 1.9px, transparent 2.6px); } [data-theme="steel"] .chipline .seed:hover { color: #000; filter: brightness(1.06); } /* Composer (search bar) — brushed frame with an inset well */ [data-theme="steel"] .composer { border-radius: 12px; } [data-theme="steel"] #ask { background: rgba(8,11,16,.55) !important; color: #e6eef7; box-shadow: inset 0 1px 3px rgba(0,0,0,.5); } /* Brushed-GOLD metal — send button, FAB, command-palette key, logo badge */ [data-theme="steel"] .send-btn, [data-theme="steel"] .fab, [data-theme="steel"] .logo .sq, [data-theme="steel"] header > button:first-of-type { background: repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, rgba(120,75,0,.10) 1px 2px, transparent 2px 4px), linear-gradient(180deg, #ffe08a 0%, #f3c33d 46%, #e0a91e 54%, #c98f10 100%) !important; border: 1px solid #9c6f08 !important; color: #2a1d00 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(120,80,0,.35), 0 2px 6px rgba(0,0,0,.45) !important; text-shadow: 0 1px 0 rgba(255,255,255,.25) !important; } /* Brushed-gold active nav tab underline */ [data-theme="steel"] .tab-slider { background: repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 1px, transparent 1px 3px), linear-gradient(180deg, #ffd75e, #d99700) !important; box-shadow: 0 0 6px rgba(240,180,0,.5) !important; } /* ════════════════════════════════════════════════════════════════════════ STEEL — faithful port of Gemini's "Steel" design system (supersedes above). Machined gunmetal panels, the circuit void (grid + faint trace overlay), pill chat bar, yellow accents. ════════════════════════════════════════════════════════════════════════ */ [data-theme="steel"] { --cx-void: #0a0b0e; --cx-base: #1e2024; --cx-dark: #15171a; --cx-light: #2c2f35; --cx-txt: #e2e4e9; --cx-txt2: #8b92a5; --cx-acc: #ffcc00; --cx-green: #00fa9a; --cx-outset: 3px 3px 6px rgba(0,0,0,.6), -1px -1px 3px rgba(255,255,255,.05); --cx-inset: inset 2px 2px 5px rgba(0,0,0,.7), inset -1px -1px 2px rgba(255,255,255,.04); /* Re-point shared tokens so the whole app inherits Gemini's palette */ --amber: #ffcc00; --amber-bg: rgba(255,204,0,.1); --amber-border: rgba(255,204,0,.3); --txt: #e2e4e9; --txt2: #8b92a5; --bg: #0a0b0e; } /* ── The circuit void: machined 30px grid base ── */ [data-theme="steel"] body { background-color: var(--cx-void) !important; background-image: linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px) !important; background-size: 30px 30px !important; background-position: center center !important; color: var(--cx-txt) !important; } [data-theme="steel"] .wrap { background: transparent !important; color: var(--cx-txt) !important; } /* Circuit traces layered at 5% over the grid, screen-blended (Gemini spec) */ [data-theme="steel"] body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .05; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23cdd7e6' stroke-width='1' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M42 0V63H126V158'/%3E%3Cpath d='M0 105H74V189H179'/%3E%3Cpath d='M420 53H315V137H263'/%3E%3Cpath d='M378 420V347H294V263'/%3E%3Cpath d='M210 420V368H116'/%3E%3Cpath d='M420 263H347V315'/%3E%3Cpath d='M126 221H221V315H305V378'/%3E%3Cpath d='M0 315H63V378'/%3E%3Cpath d='M263 0V42H336V116'/%3E%3Cpath d='M158 63V126H95'/%3E%3Cpath d='M315 189H378V242'/%3E%3Cpath d='M42 210V273H116V347'/%3E%3Cpath d='M221 158H189V210'/%3E%3Cpath d='M347 378V336H420'/%3E%3C/g%3E%3Cg fill='%23dbe3f0'%3E%3Ccircle cx='42' cy='0' r='2.2'/%3E%3Ccircle cx='126' cy='158' r='2.2'/%3E%3Ccircle cx='179' cy='189' r='2.2'/%3E%3Ccircle cx='263' cy='137' r='2.2'/%3E%3Ccircle cx='294' cy='263' r='2.2'/%3E%3Ccircle cx='116' cy='368' r='2.2'/%3E%3Ccircle cx='347' cy='315' r='2.2'/%3E%3Ccircle cx='305' cy='378' r='2.2'/%3E%3Ccircle cx='63' cy='378' r='2.2'/%3E%3Ccircle cx='336' cy='116' r='2.2'/%3E%3Ccircle cx='95' cy='126' r='2.2'/%3E%3Ccircle cx='378' cy='242' r='2.2'/%3E%3Ccircle cx='189' cy='210' r='2.2'/%3E%3C/g%3E%3C/svg%3E"); background-size: 420px 420px; } /* ── steel-panel: raised machined panels (header, dropdown, chips) ── */ [data-theme="steel"] header, [data-theme="steel"] #themeSelect, [data-theme="steel"] .chipline .seed { background: linear-gradient(145deg, var(--cx-light) 0%, var(--cx-base) 100%) !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: var(--cx-outset) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; color: var(--cx-txt) !important; } [data-theme="steel"] header { border-radius: 0 !important; border-left: none !important; border-right: none !important; border-top: none !important; position: relative; z-index: 5; } [data-theme="steel"] .chipline .seed { border-radius: 8px !important; font-weight: 600; text-shadow: none !important; color: var(--cx-txt) !important; } [data-theme="steel"] .chipline .seed::before { content: none !important; background: none !important; } [data-theme="steel"] .chipline .seed:hover { color: #fff !important; filter: brightness(1.12); } /* ── steel-btn: hardware buttons (Lock/Audio, icon btns, mode toggle) ── */ [data-theme="steel"] .right .btn, [data-theme="steel"] .icon-btn, [data-theme="steel"] #modeToggle { background: linear-gradient(180deg, var(--cx-light) 0%, var(--cx-base) 100%) !important; border: 1px solid rgba(0,0,0,.8) !important; border-top: 1px solid rgba(255,255,255,.15) !important; box-shadow: 0 4px 6px rgba(0,0,0,.4) !important; color: var(--cx-txt2) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ── steel-inset: the bottom chat pill + input ── */ [data-theme="steel"] .composer { background: linear-gradient(145deg, var(--cx-dark) 0%, var(--cx-void) 100%) !important; border: 1px solid rgba(255,255,255,.03) !important; box-shadow: var(--cx-inset) !important; border-radius: 50px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } [data-theme="steel"] #ask { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--cx-txt) !important; font-family: 'JetBrains Mono','Fira Code',ui-monospace,monospace !important; } /* ── cortex-accent: send button, FAB, ⌘K key ── */ [data-theme="steel"] .send-btn, [data-theme="steel"] .fab, [data-theme="steel"] header > button:first-of-type { background: linear-gradient(145deg, #ffd633, var(--cx-acc)) !important; color: #000 !important; box-shadow: 0 0 10px rgba(255,204,0,.2), inset 1px 1px 2px rgba(255,255,255,.4) !important; border: 1px solid #cc9900 !important; text-shadow: none !important; } /* ── nav links + accents ── */ [data-theme="steel"] .logo { color: var(--cx-acc) !important; } [data-theme="steel"] .tab { color: var(--cx-txt2) !important; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; } [data-theme="steel"] .tab.on { color: var(--cx-txt) !important; } [data-theme="steel"] .tab-slider { background: var(--cx-acc) !important; box-shadow: none !important; } [data-theme="steel"] .hello .big { font-weight: 800; letter-spacing: .05em; text-shadow: 0 2px 10px rgba(255,255,255,.1); } /* LED green online indicator */ [data-theme="steel"] .dot { background-color: var(--cx-green) !important; box-shadow: 0 0 8px var(--cx-green) !important; } /* ════════════════════════════════════════════════════════════════════ AESTHETIC OVERHAUL — soft-UI / neumorphic surfaces + warm rose accent. Inspired by the dark Pinterest music-app reference. Scoped to the default "Glass" theme (data-theme="default") on dark so the experiment themes (neon/matrix/aurora/terminal/steel) keep their own identity. Tweak the two shadow tokens below to dial the depth. ════════════════════════════════════════════════════════════════════ */ [data-theme="default"][data-mode="dark"], [data-mode="dark"]:not([data-theme]) { --neu-dark: rgba(0,0,0,.55); /* lower-right shadow */ --neu-light: rgba(255,255,255,.022); /* upper-left highlight */ --neu-raise: 6px 6px 16px var(--neu-dark), -6px -6px 16px var(--neu-light); --neu-raise-sm: 4px 4px 10px var(--neu-dark), -4px -4px 10px var(--neu-light); --neu-inset: inset 4px 4px 10px rgba(0,0,0,.5), inset -3px -3px 8px rgba(255,255,255,.02); --accent2: #60a5fa; } /* Cards, chips, panels → soft extruded surfaces */ [data-theme="default"] .card, [data-theme="default"] .seed, [data-theme="default"] .glass, [data-theme="default"] .panel, [data-theme="default"] .orch-panel, [data-theme="default"] .orch-app-card, [data-theme="default"] .orch-agent-card { border-radius: 18px; border-color: transparent; box-shadow: var(--neu-raise); } [data-theme="default"] .seed { border-radius: 14px; } [data-theme="default"] .card:hover, [data-theme="default"] .seed:hover { box-shadow: var(--neu-raise), 0 0 0 1px var(--amber-border); border-color: transparent; } /* Composer: input becomes a soft inset well; icon buttons softly raised */ [data-theme="default"] .composer input { border-radius: 16px; border-color: transparent; box-shadow: var(--neu-inset); } [data-theme="default"] .composer input:focus { box-shadow: var(--neu-inset), 0 0 0 1px var(--input-focus); } [data-theme="default"] .icon-btn { border-radius: 14px; border-color: transparent; box-shadow: var(--neu-raise-sm); } [data-theme="default"] .icon-btn:hover { color: var(--amber); } [data-theme="default"] .icon-btn:active { box-shadow: var(--neu-inset); } /* Accent action buttons (send / capture / co-pilot open) → solid rose pill with a soft drop + faint colored glow, like the reference's coral player */ [data-theme="default"] .send-btn, [data-theme="default"] .fab, [data-theme="default"] .bni-fab { border-radius: 16px; box-shadow: 5px 5px 14px rgba(0,0,0,.5), -3px -3px 10px rgba(255,255,255,.03), 0 6px 18px rgba(59,130,246,.28); } [data-theme="default"] .fab, [data-theme="default"] .bni-fab { border-radius: 18px; } /* Bottom nav → floating soft bar */ [data-theme="default"] .bnav { box-shadow: 0 -8px 24px rgba(0,0,0,.5); border-top-color: transparent; } /* Co-Pilot "?" button → soft round, and LIFTED so it no longer overlaps the composer's search/send buttons (the reported overlap). */ [data-theme="default"] .copilot-fab { border-color: transparent; box-shadow: var(--neu-raise-sm); } [data-theme="default"] .copilot-fab.open { box-shadow: var(--neu-raise-sm), 0 6px 18px rgba(59,130,246,.3); } @media (max-width: 760px){ .fab-stack{ bottom: calc(150px + env(safe-area-inset-bottom,0)) !important; } } /* ── Surface/shape cleanup for the redesigned default theme ─────────────── The sharp HUD corner-brackets (::before/::after L-shapes) clash with the soft rounded neumorphic surfaces — that was the "doubled box" glitch on cards/messages. Drop them here and give chat bubbles a clean soft shape. */ [data-theme="default"] .card::before, [data-theme="default"] .card::after, [data-theme="default"] .panel::before, [data-theme="default"] .panel::after, [data-theme="default"] .tpanel::before, [data-theme="default"] .tpanel::after, [data-theme="default"] .chip::before, [data-theme="default"] .chip::after, [data-theme="default"] .msg.c::before, [data-theme="default"] .msg.c::after, [data-theme="default"] .capsheet::before,[data-theme="default"] .capsheet::after, [data-theme="default"] .sheet::before, [data-theme="default"] .sheet::after { content: none !important; } /* Chat bubbles → soft rounded surfaces, no harsh accent edge */ [data-theme="default"] .msg.c { border-radius: 16px; border-color: transparent; box-shadow: var(--neu-raise-sm); } [data-theme="default"] .msg.u { border-radius: 16px; border: none; background: rgba(59,130,246,.12); box-shadow: var(--neu-raise-sm); color: var(--txt); } /* ── Coherent LIGHT mode for the default theme ──────────────────────────── The default "Glass" theme hardcoded dark bg + surface tokens, so light mode rendered as light bubbles on a dark canvas with no neumorphic shadow. This higher-specificity block makes light mode a proper soft-UI light theme (the look of the light Pinterest reference), accent stays electric-blue. */ [data-theme="default"][data-mode="light"] { --txt: #1f2733; --txt2: rgba(31,39,51,.55); --txt3: rgba(31,39,51,.3); --muted: rgba(31,39,51,.5); --dim: rgba(31,39,51,.3); --bg-g1: radial-gradient(ellipse 90% 70% at 18% 6%, rgba(59,130,246,.10) 0%, transparent 55%), radial-gradient(ellipse 100% 100% at 50% 50%, #eef1f7 0%, #e3e7f0 100%); --glass-bg: #e9edf4; --glass-border: rgba(255,255,255,.6); --nav-bg: rgba(233,237,244,.82); --nav-border: rgba(0,0,0,.06); --input-bg: #e9edf4; --input-border: transparent; --input-focus: rgba(59,130,246,.5); --line: rgba(31,39,51,.12); --panel: #e9edf4; --panel-head: rgba(0,0,0,.02); --chip-bg: #e9edf4; --bubble-ai-bg: #e9edf4; --bubble-ai-txt: #1f2733; --bubble-user-bg: rgba(59,130,246,.14); --bubble-user-txt: #1e3a5f; /* light neumorphism: dark lower-right, white upper-left */ --neu-dark: rgba(163,177,198,.55); --neu-light: rgba(255,255,255,.95); --neu-raise: 6px 6px 14px var(--neu-dark), -6px -6px 14px var(--neu-light); --neu-raise-sm: 4px 4px 10px var(--neu-dark), -4px -4px 10px var(--neu-light); --neu-inset: inset 4px 4px 9px var(--neu-dark), inset -4px -4px 9px var(--neu-light); --accent2: #60a5fa; } /* In light mode the soft surfaces read better with no hard border */ [data-theme="default"][data-mode="light"] .card, [data-theme="default"][data-mode="light"] .seed, [data-theme="default"][data-mode="light"] .icon-btn, [data-theme="default"][data-mode="light"] .composer input, [data-theme="default"][data-mode="light"] .msg.c { border-color: transparent; } /* Accent buttons (send / capture+ / co-pilot) in LIGHT mode: the dark drop shadow tuned for the dark canvas read as a hard gray square behind the button. Use a soft light neumorphic shadow + gentle blue glow instead. */ [data-theme="default"][data-mode="light"] .send-btn, [data-theme="default"][data-mode="light"] .fab, [data-theme="default"][data-mode="light"] .bni-fab { box-shadow: 4px 4px 10px rgba(163,177,198,.6), -4px -4px 10px rgba(255,255,255,.9), 0 4px 14px rgba(59,130,246,.30); } [data-theme="default"][data-mode="light"] .copilot-fab { background: #e9edf4; color: var(--amber); box-shadow: var(--neu-raise-sm); } [data-theme="default"][data-mode="light"] .copilot-fab.open { box-shadow: var(--neu-raise-sm), 0 4px 14px rgba(59,130,246,.3); } /* Drop the folded-corner clip-path on the accent buttons for the redesigned default theme — it clashed with the rounded radius and clipped the soft neumorphic shadow into a hard square behind the button. Clean rounded shape. */ [data-theme="default"] .send-btn, [data-theme="default"] .fab, [data-theme="default"] .bni-fab { clip-path: none !important; } /* ════════════════════════════════════════════════════════════════════════ MOBILE DECLUTTER — logical density + tap-friendliness on phones. ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 680px){ /* Header: drop keyboard-only ⌘K and the redundant "online" word (keep dot) */ header > button:first-of-type { display: none; } #status { display: none; } /* The animated hero accent line reads as a strikethrough on a wrapped hero */ .orch-hero::after { display: none; } /* Fleet hero: the wrapping flex row collapsed its own height on mobile and the subtitle/actions spilled over the panel below. A flex COLUMN reliably sizes to its stacked children, so title → subtitle → actions flow with no overlap. */ .orch-hero { display: flex; flex-direction: column; align-items: stretch; padding-bottom: 12px; margin-bottom: 16px; } .orch-hero-actions { width: 100%; justify-content: flex-start; margin-top: 8px; } /* Connected services: one readable card per row instead of cramped 2-up */ .orch-app-card { min-width: 100%; max-width: none; flex-basis: 100%; } /* Bigger, comfier tap targets for the small inline action buttons */ .tbtn { min-height: 34px; } } /* Data/terminal surfaces hardcode a near-black bg (#0a0b0d) — they read as black boxes in light mode. Give them a light inset surface there. */ [data-theme="default"][data-mode="light"] .orch-fleet-table, [data-theme="default"][data-mode="light"] .orch-jobs-table, [data-theme="default"][data-mode="light"] .grok-sess-table, [data-theme="default"][data-mode="light"] .orch-pipeline, [data-theme="default"][data-mode="light"] .orch-tasks, [data-theme="default"][data-mode="light"] .nxdata-tables { background: #e1e6ef !important; } /* Mobile overflow guard — a flex/grid child with a hard min-width (e.g. the voice