/* ═══════════════════════════════════════════════════════════════════════════
   Quantum Universe — Phase II.3 Cutting Edge Stylesheet
   ═══════════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root {
    --accent: #3b82f6;
    --accent-rgb: 59,130,246;
    --surface: rgba(8,8,18,0.78);
    --surface-solid: #0a0a14;
    --surface-hover: rgba(20,20,36,0.85);
    --surface-border: rgba(255,255,255,0.06);
    --surface-border-hl: rgba(255,255,255,0.12);
    --text-1: rgba(255,255,255,0.92);
    --text-2: rgba(255,255,255,0.52);
    --text-3: rgba(255,255,255,0.24);
    --font: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    --mono: 'JetBrains Mono','SF Mono',monospace;
    --dock-w: 56px;
    --panel-w: 280px;
    --r: 12px;
    --r-sm: 8px;
    --spring: cubic-bezier(0.34,1.56,0.64,1);
    --ease: cubic-bezier(0.4,0,0.2,1);
}

html,body{width:100%;height:100%;overflow:hidden;background:#060610;font-family:var(--font);color:var(--text-1);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;user-select:none;-webkit-user-select:none;perspective:1000px;}

/* ─── Canvas ──────────────────────────────────────────────────────────────── */
#quantum-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;}

/* ─── HUD ─────────────────────────────────────────────────────────────────── */
#hud{position:fixed;top:0;left:var(--dock-w);right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 16px;z-index:20;pointer-events:none;}
#hud > *{pointer-events:auto;}
#hud-left{display:flex;align-items:center;gap:8px;}
.hud-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pulse 2.5s ease-in-out infinite;flex-shrink:0;transition:background .4s,box-shadow .4s;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
#hud-domain-label{font-size:9px;font-weight:600;letter-spacing:2.5px;color:var(--text-2);text-transform:uppercase;}
.hud-sep{color:var(--text-3);font-size:10px;}
.mono{font-family:var(--mono);font-size:10px;color:var(--text-2);}
.dim{color:var(--text-3);font-size:8px;letter-spacing:.5px;}
#hud-right{display:flex;gap:2px;}
.hud-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--r-sm);background:transparent;color:var(--text-3);cursor:pointer;transition:all .2s var(--ease);}
.hud-btn:hover{background:rgba(255,255,255,.04);color:var(--text-2);border-color:var(--surface-border);}
.hud-btn:active{transform:scale(.92);transition-duration:.08s;}

/* ─── Domain Dock ─────────────────────────────────────────────────────────── */
#domain-dock{position:fixed;top:0;left:0;width:var(--dock-w);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:48px 0 16px;z-index:15;background:rgba(4,4,12,.55);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border-right:1px solid var(--surface-border);}
.dock-top,.dock-bottom{display:flex;flex-direction:column;align-items:center;gap:4px;}
.domain-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--text-3);cursor:pointer;transition:all .25s var(--spring);position:relative;outline:none;}
.domain-btn:hover{color:var(--text-2);background:rgba(255,255,255,.04);border-color:var(--surface-border);transform:scale(1.08);}
.domain-btn:active{transform:scale(.93);transition-duration:.08s;}
.domain-btn.active{color:var(--text-1);background:rgba(var(--accent-rgb),.08);border-color:rgba(var(--accent-rgb),.25);}
.domain-btn.active::after{content:'';position:absolute;left:-7px;top:10px;bottom:10px;width:2.5px;border-radius:2px;background:var(--accent);box-shadow:0 0 6px var(--accent);}
.domain-btn-add{color:var(--text-3);border:1px dashed rgba(255,255,255,.1);}
.domain-btn-add:hover{border-color:rgba(var(--accent-rgb),.3);color:var(--accent);}

/* ─── Right Panel ─────────────────────────────────────────────────────────── */
#utility-panel{position:fixed;top:0;right:0;width:var(--panel-w);height:100%;z-index:15;background:rgba(6,6,14,.7);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-left:1px solid var(--surface-border);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;transition:transform .35s var(--ease),opacity .3s;padding-top:44px;transform-style:preserve-3d;}
#utility-panel.collapsed{transform:translateX(100%);opacity:0;}
.panel-section{border-bottom:1px solid var(--surface-border);}
.panel-section-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 14px;background:none;border:none;color:var(--text-2);cursor:pointer;font-family:var(--font);font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;transition:background .15s;}
.panel-section-header:hover{background:rgba(255,255,255,.02);}
.sh-left{display:flex;align-items:center;gap:7px;}
.chevron{transition:transform .25s var(--ease);flex-shrink:0;}
.panel-section-header[aria-expanded="false"] .chevron{transform:rotate(-90deg);}
.badge{font-family:var(--mono);font-size:9px;padding:1px 5px;border-radius:4px;background:rgba(var(--accent-rgb),.12);color:var(--accent);min-width:18px;text-align:center;}
.panel-section-body{padding:0 14px 12px;transition:max-height .3s var(--ease),opacity .25s;overflow:hidden;}
.panel-section-body.collapsed{max-height:0!important;padding:0 14px;opacity:0;}

/* File dropzone */
#file-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:18px 12px;border:1.5px dashed rgba(255,255,255,.08);border-radius:var(--r-sm);cursor:pointer;transition:all .25s var(--ease);color:var(--text-3);font-size:10px;margin-bottom:8px;}
#file-dropzone:hover,#file-dropzone:focus-visible{border-color:rgba(var(--accent-rgb),.35);color:var(--text-2);background:rgba(var(--accent-rgb),.03);}
#file-dropzone.drag-over{border-color:var(--accent);background:rgba(var(--accent-rgb),.06);box-shadow:0 0 24px rgba(var(--accent-rgb),.08);color:var(--accent);}

/* File cards */
.file-card{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;cursor:pointer;transition:background .15s;}
.file-card:hover{background:rgba(255,255,255,.04);}
.file-card-icon{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;font-weight:600;color:#fff;}
.file-card-icon.pdf{background:rgba(239,68,68,.2);color:#ef4444;}
.file-card-icon.xlsx{background:rgba(16,185,129,.2);color:#10b981;}
.file-card-icon.md{background:rgba(168,85,247,.2);color:#a855f7;}
.file-card-icon.doc{background:rgba(59,130,246,.2);color:#3b82f6;}
.file-card-icon.default{background:rgba(255,255,255,.06);color:var(--text-2);}
.file-card-info{flex:1;min-width:0;}
.file-card-name{font-size:11px;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.file-card-meta{font-family:var(--mono);font-size:8px;color:var(--text-3);margin-top:1px;}
.file-card-remove{width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text-3);cursor:pointer;opacity:0;transition:opacity .15s,color .15s;border-radius:4px;flex-shrink:0;}
.file-card:hover .file-card-remove{opacity:1;}
.file-card-remove:hover{color:var(--text-1);background:rgba(255,255,255,.06);}

/* Calendar */
#calendar-today{display:flex;align-items:baseline;gap:6px;margin-bottom:10px;padding:0 2px;}
#cal-day-name{font-size:12px;font-weight:600;color:var(--text-1);}
#cal-date{font-family:var(--mono);font-size:10px;color:var(--text-3);}
.cal-event{display:flex;align-items:flex-start;gap:8px;padding:8px;border-radius:6px;cursor:pointer;transition:background .15s;position:relative;}
.cal-event:hover{background:rgba(255,255,255,.03);}
.cal-event-time{font-family:var(--mono);font-size:9px;color:var(--text-3);min-width:48px;padding-top:2px;}
.cal-event-body{flex:1;}
.cal-event-title{font-size:11px;color:var(--text-1);line-height:1.35;}
.cal-event-tag{display:inline-block;font-family:var(--mono);font-size:7px;font-weight:600;letter-spacing:.8px;padding:1px 5px;border-radius:3px;margin-top:3px;text-transform:uppercase;}
.cal-event-tag.cyber{background:rgba(59,130,246,.12);color:#3b82f6;}
.cal-event-tag.business{background:rgba(245,158,11,.12);color:#f59e0b;}
.cal-event-tag.medical{background:rgba(16,185,129,.12);color:#10b981;}
.cal-event-tag.personal{background:rgba(168,85,247,.12);color:#a855f7;}
.cal-event-dot{width:3px;height:3px;border-radius:50%;margin-top:5px;flex-shrink:0;}

/* Agents */
.agent-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;}
.agent-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;transition:all .4s var(--ease);}
.agent-dot.idle{background:rgba(255,255,255,.15);}
.agent-dot.active{background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pulse 1.2s ease-in-out infinite;}
.agent-label{font-size:11px;color:var(--text-1);flex:1;}
.agent-state{font-family:var(--mono);font-size:8px;color:var(--text-3);letter-spacing:.5px;text-transform:uppercase;transition:color .3s;}
.agent-state.running{color:var(--accent);}

/* Tasks */
#task-input-wrap{display:flex;gap:4px;margin-bottom:8px;}
#task-input{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--surface-border);border-radius:var(--r-sm);padding:6px 8px;font-family:var(--font);font-size:11px;color:var(--text-1);outline:none;transition:border-color .2s;}
#task-input:focus{border-color:rgba(var(--accent-rgb),.4);}
#task-input::placeholder{color:var(--text-3);}
#task-add-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.2);border-radius:var(--r-sm);color:var(--accent);cursor:pointer;flex-shrink:0;transition:all .15s;}
#task-add-btn:hover{background:rgba(var(--accent-rgb),.2);}
.task-item{display:flex;align-items:flex-start;gap:6px;padding:5px 6px;border-radius:5px;transition:background .15s;cursor:pointer;}
.task-item:hover{background:rgba(255,255,255,.03);}
.task-check{width:14px;height:14px;border:1.5px solid var(--text-3);border-radius:4px;flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;}
.task-check.done{background:var(--accent);border-color:var(--accent);}
.task-check.done svg{opacity:1;}
.task-check svg{width:10px;height:10px;stroke:#fff;stroke-width:3;opacity:0;transition:opacity .2s;}
.task-text{font-size:11px;color:var(--text-1);line-height:1.35;flex:1;}
.task-text.done{text-decoration:line-through;color:var(--text-3);}
.task-domain{font-family:var(--mono);font-size:7px;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;}
.task-remove{opacity:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text-3);cursor:pointer;border-radius:3px;flex-shrink:0;}
.task-item:hover .task-remove{opacity:1;}
.task-remove:hover{color:var(--text-1);background:rgba(255,255,255,.06);}

/* Pinned Outputs */
.pin-card{padding:8px;border:1px solid var(--surface-border);border-radius:var(--r-sm);margin-bottom:6px;cursor:pointer;transition:background .15s,border-color .15s;}
.pin-card:hover{background:rgba(255,255,255,.03);border-color:var(--surface-border-hl);}
.pin-card-text{font-size:10px;color:var(--text-2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.pin-card-meta{display:flex;justify-content:space-between;align-items:center;margin-top:4px;}
.pin-card-domain{font-family:var(--mono);font-size:7px;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;}
.pin-card-remove{width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text-3);cursor:pointer;border-radius:3px;opacity:0;transition:opacity .15s;}
.pin-card:hover .pin-card-remove{opacity:1;}
.pin-card-remove:hover{color:var(--text-1);}
.empty-hint{font-size:10px;color:var(--text-3);text-align:center;padding:8px 0;}

/* AI Pin button */
.msg-ai-pin{width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text-3);cursor:pointer;border-radius:4px;opacity:0;transition:all .15s;position:absolute;top:0;right:0;}
.msg-ai-body{position:relative;}
.msg-ai-body:hover .msg-ai-pin{opacity:1;}
.msg-ai-pin:hover{color:var(--accent);background:rgba(var(--accent-rgb),.08);}
.msg-ai-pin.pinned{color:var(--accent);opacity:1;}

/* File extraction indicator */
.file-card-status{font-family:var(--mono);font-size:7px;color:var(--accent);letter-spacing:.5px;text-transform:uppercase;}

/* Global Drop Overlay (Endocytosis) */
#global-drop-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;opacity:0;pointer-events:none;transition:all .3s var(--ease);}
#global-drop-overlay.active{opacity:1;pointer-events:all;}
#global-drop-overlay span{font-family:var(--mono);font-size:14px;color:var(--accent);letter-spacing:4px;margin-top:24px;text-transform:uppercase;animation:pulse 1.5s infinite;}
.drop-ring{position:absolute;width:100px;height:100px;border:2px solid var(--accent);border-radius:50%;opacity:0;}
#global-drop-overlay.active .drop-ring{animation:ring-expand 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;}
#global-drop-overlay.active .drop-ring.delay-1{animation-delay:0.4s;}
#global-drop-overlay.active .drop-ring.delay-2{animation-delay:0.8s;}
@keyframes ring-expand{0%{transform:scale(0.5);opacity:1;border-width:4px;}100%{transform:scale(3);opacity:0;border-width:1px;}}

/* ─── Chat & Omnibar ─────────────────────────────────────────────────────── */
#chat-container{position:fixed;bottom:0;left:var(--dock-w);right:var(--panel-w);height:60vh;max-height:60vh;z-index:15;display:flex;flex-direction:column;pointer-events:none;transition:right .35s var(--ease),height .4s var(--ease),max-height .4s var(--ease);transform-style:preserve-3d;}
body.panel-collapsed #chat-container{right:0;}
#chat-container > *{pointer-events:auto;}

/* Chat Collapse Toggle */
#btn-collapse-chat{width:100%;height:24px;display:flex;align-items:center;justify-content:center;background:rgba(8,8,18,0.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;border-bottom:1px solid var(--surface-border);color:var(--text-3);cursor:pointer;transition:all .25s var(--ease);pointer-events:auto;flex-shrink:0;}
#btn-collapse-chat:hover{background:rgba(var(--accent-rgb),.06);color:var(--text-2);}
#btn-collapse-chat svg{transition:transform .3s var(--ease);}
#chat-container.chat-collapsed #btn-collapse-chat svg{transform:rotate(180deg);}
#chat-container.chat-collapsed #conversation{max-height:0!important;opacity:0;padding:0 24px;overflow:hidden;pointer-events:none;}
#chat-container.chat-collapsed{height:auto;max-height:none;}

#conversation{flex:1;max-height:50vh;overflow-y:auto;overscroll-behavior:contain;padding:0 24px;display:flex;flex-direction:column;gap:16px;mask-image:linear-gradient(transparent 0%,#000 8%,#000 100%);-webkit-mask-image:linear-gradient(transparent 0%,#000 8%,#000 100%);transition:max-height .4s var(--ease),opacity .3s var(--ease),padding .3s var(--ease);}
#conversation.empty{max-height:none;align-items:center;justify-content:center;padding:60px 24px 0;}

/* Welcome */
#conversation-welcome{text-align:center;max-width:440px;}
#conversation-welcome h2{font-size:22px;font-weight:600;color:var(--text-1);margin-bottom:6px;letter-spacing:-.3px;}
#conversation-welcome p{font-size:13px;color:var(--text-3);line-height:1.5;margin-bottom:20px;}
#welcome-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}

.chip{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;background:var(--surface);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--surface-border);border-radius:20px;color:var(--text-2);font-family:var(--font);font-size:11px;cursor:pointer;transition:all .2s var(--spring);outline:none;white-space:nowrap;}
.chip:hover{background:var(--surface-hover);border-color:rgba(var(--accent-rgb),.3);color:var(--text-1);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.2);}
.chip:active{transform:scale(.96) translateY(0);transition-duration:.06s;}
.chip svg{opacity:.5;}

/* Messages */
.msg{max-width:680px;width:100%;animation:msg-in .35s var(--spring);}
@keyframes msg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.msg-user{align-self:flex-end;display:flex;justify-content:flex-end;}
.msg-user-bubble{background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.15);border-radius:var(--r) var(--r) 4px var(--r);padding:10px 14px;font-size:13px;line-height:1.5;color:var(--text-1);max-width:480px;}
.msg-ai{display:flex;gap:10px;align-items:flex-start;}
.msg-ai-avatar{width:24px;height:24px;border-radius:8px;background:rgba(var(--accent-rgb),.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.msg-ai-avatar svg{width:12px;height:12px;stroke:var(--accent);}
.msg-ai-body{flex:1;min-width:0;}
.msg-ai-label{font-family:var(--mono);font-size:8px;color:var(--text-3);letter-spacing:1px;text-transform:uppercase;margin-bottom:4px;}
.msg-ai-text{font-size:13px;line-height:1.65;color:var(--text-1);font-weight:300;}
.msg-ai-text strong{font-weight:500;}

/* Typing indicator */
.typing-dots{display:flex;gap:4px;padding:8px 0;}
.typing-dots span{width:5px;height:5px;border-radius:50%;background:var(--text-3);animation:blink 1.4s infinite;}
.typing-dots span:nth-child(2){animation-delay:.2s;}
.typing-dots span:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}

/* Omnibar */
#omnibar-wrap{padding:8px 24px 12px;background:linear-gradient(transparent,rgba(6,6,14,.9) 20%);}
#omnibar{display:flex;align-items:center;background:var(--surface);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--surface-border-hl);border-radius:var(--r);padding:4px 4px 4px 12px;transition:border-color .3s,box-shadow .3s;}
#omnibar:focus-within{border-color:rgba(var(--accent-rgb),.35);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.06);}
#omnibar-indicator{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-right:10px;transition:background .4s;}
#omnibar-input{flex:1;background:none;border:none;color:var(--text-1);font-family:var(--font);font-size:13px;outline:none;padding:10px 0;min-width:0;}
#omnibar-input::placeholder{color:var(--text-3);}
#omnibar-actions{display:flex;gap:2px;flex-shrink:0;}
.omni-btn{width:32px;height:32px;border-radius:var(--r-sm);border:none;background:transparent;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s var(--ease);}
.omni-btn:hover{color:var(--text-2);background:rgba(255,255,255,.04);}
.send-btn{background:var(--accent);color:#fff;transition:all .2s var(--spring);}
.send-btn:hover{filter:brightness(1.1);transform:scale(1.06);}
.send-btn:active{transform:scale(.92);transition-duration:.06s;}
.send-btn:disabled{opacity:.3;pointer-events:none;}

#omnibar-footer{display:flex;justify-content:center;gap:16px;padding:6px 0 0;}
.footer-hint{font-size:9px;color:var(--text-3);display:flex;align-items:center;gap:3px;}
kbd{font-family:var(--mono);font-size:8px;padding:1px 4px;border:1px solid var(--surface-border);border-radius:3px;background:rgba(255,255,255,.03);color:var(--text-3);}

/* ─── Command Palette ─────────────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-start;justify-content:center;padding-top:20vh;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .2s var(--ease);animation:overlay-in .2s var(--ease);}
.overlay.hidden{opacity:0;pointer-events:none;}
@keyframes overlay-in{from{opacity:0}to{opacity:1}}

#cmd-palette{width:520px;max-width:90vw;background:var(--surface-solid);border:1px solid var(--surface-border-hl);border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.6);overflow:hidden;animation:modal-in .25s var(--spring);}
@keyframes modal-in{from{opacity:0;transform:scale(.97) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}
#cmd-input-wrap{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--surface-border);}
#cmd-input-wrap svg{color:var(--text-3);flex-shrink:0;}
#cmd-input{flex:1;background:none;border:none;font-family:var(--font);font-size:14px;color:var(--text-1);outline:none;}
#cmd-input::placeholder{color:var(--text-3);}
#cmd-results{max-height:320px;overflow-y:auto;padding:6px;}
.cmd-group-label{font-size:9px;font-weight:600;letter-spacing:1.5px;color:var(--text-3);text-transform:uppercase;padding:8px 10px 4px;}
.cmd-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;transition:background .12s;}
.cmd-item:hover,.cmd-item.active{background:rgba(var(--accent-rgb),.08);}
.cmd-item svg{color:var(--text-3);flex-shrink:0;}
.cmd-item-label{font-size:12px;color:var(--text-1);flex:1;}
.cmd-item-hint{font-family:var(--mono);font-size:9px;color:var(--text-3);}

/* ─── Settings ────────────────────────────────────────────────────────────── */
#settings-modal{width:440px;max-width:90vw;background:var(--surface-solid);border:1px solid var(--surface-border-hl);border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.6);overflow:hidden;animation:modal-in .25s var(--spring);}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--surface-border);}
.modal-header h2{font-size:14px;font-weight:600;letter-spacing:-.2px;}
.modal-header button{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;border-radius:6px;color:var(--text-3);cursor:pointer;transition:all .15s;}
.modal-header button:hover{color:var(--text-1);background:rgba(255,255,255,.04);border-color:var(--surface-border);}
.modal-body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:16px;}
.settings-group{display:flex;flex-direction:column;gap:6px;}
.settings-label{font-size:11px;font-weight:500;color:var(--text-2);}
.settings-row{display:flex;gap:6px;}
.settings-input,.settings-select{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--surface-border);border-radius:var(--r-sm);padding:8px 10px;font-family:var(--font);font-size:12px;color:var(--text-1);outline:none;transition:border-color .2s;}
.settings-input:focus,.settings-select:focus{border-color:rgba(var(--accent-rgb),.4);}
.settings-select{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.3)' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:28px;}
.settings-select option{background:var(--surface-solid);color:var(--text-1);}
.settings-btn-icon{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border:1px solid var(--surface-border);border-radius:var(--r-sm);color:var(--text-3);cursor:pointer;flex-shrink:0;transition:all .15s;}
.settings-btn-icon:hover{color:var(--text-1);border-color:var(--surface-border-hl);}
.settings-hint{font-size:10px;color:var(--text-3);}
.settings-hint a{color:var(--accent);text-decoration:none;}
.settings-hint a:hover{text-decoration:underline;}
.settings-range{-webkit-appearance:none;width:100%;height:3px;border-radius:2px;background:rgba(255,255,255,.08);outline:none;}
.settings-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 6px rgba(var(--accent-rgb),.3);}
.settings-check{accent-color:var(--accent);margin-right:6px;}

/* ─── Toast ───────────────────────────────────────────────────────────────── */
#toast-container{position:fixed;top:52px;right:16px;z-index:200;display:flex;flex-direction:column;gap:6px;pointer-events:none;}
.toast{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--surface-solid);border:1px solid var(--surface-border-hl);border-radius:var(--r-sm);font-size:11px;color:var(--text-1);box-shadow:0 8px 32px rgba(0,0,0,.4);pointer-events:auto;animation:toast-in .3s var(--spring);max-width:320px;}
.toast.leaving{animation:toast-out .25s var(--ease) forwards;}
@keyframes toast-in{from{opacity:0;transform:translateX(20px) scale(.95)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes toast-out{to{opacity:0;transform:translateX(20px) scale(.95)}}
.toast-icon{flex-shrink:0;width:16px;height:16px;}
.toast-icon.success{color:#10b981;}
.toast-icon.info{color:var(--accent);}
.toast-icon.warning{color:#f59e0b;}

/* ─── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.12)}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:900px){
    :root{--panel-w:0px;}
    #utility-panel{transform:translateX(100%);opacity:0;}
    #chat-container{right:0!important;}
}
@media(max-width:600px){
    :root{--dock-w:0px;}
    #domain-dock{display:none;}
    #hud{left:0;}
    #chat-container{left:0;}
}

/* ─── Scale Indicator ─────────────────────────────────────────────────────── */
#scale-label{transition:color .3s,opacity .3s;text-transform:uppercase;letter-spacing:1px;}
#scale-bar{position:fixed;left:calc(var(--dock-w) + 8px);top:50%;transform:translateY(-50%);width:3px;height:120px;background:rgba(255,255,255,.04);border-radius:2px;z-index:18;pointer-events:none;transition:opacity .3s;}
#scale-thumb{position:absolute;left:-2.5px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);transition:top .15s var(--ease);}
#scale-labels{position:fixed;left:calc(var(--dock-w) + 18px);top:50%;transform:translateY(-50%);height:120px;display:flex;flex-direction:column;justify-content:space-between;z-index:18;pointer-events:none;}
.scale-tick{font-family:var(--mono);font-size:7px;letter-spacing:.5px;color:var(--text-3);text-transform:uppercase;transition:color .3s,opacity .3s;opacity:.4;}
.scale-tick.active{color:var(--accent);opacity:1;}

/* ─── Focus ───────────────────────────────────────────────────────────────── */
:focus-visible{outline:2px solid rgba(var(--accent-rgb),.5);outline-offset:2px;}

/* ─── Timeline Scrubber ───────────────────────────────────────────────────── */
#timeline-container {
    padding: 6px 24px 2px;
    background: transparent;
    pointer-events: auto;
}
#timeline-track-wrap {
    background: rgba(8,8,18,0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--surface-border);
    border-radius: var(--r-sm);
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}
#timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.timeline-label {
    font-family: var(--mono);
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--text-3);
}
.timeline-date-display {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--accent);
    letter-spacing: .5px;
    transition: color .4s;
}
#timeline-scrubber {
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    outline: none;
}
#timeline-progress {
    height: 100%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    border-radius: 2px;
    width: 50%;
    transition: width 0.1s var(--ease), background 0.4s, box-shadow 0.4s;
}
#timeline-handle {
    width: 10px;
    height: 10px;
    background: #fff;
    border: 2px solid var(--accent);
    box-shadow: 0 0 6px var(--accent);
    border-radius: 50%;
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    cursor: grab;
    transition: left 0.1s var(--ease), border-color 0.4s, box-shadow 0.4s, transform 0.15s;
    z-index: 3;
}
#timeline-handle:active {
    cursor: grabbing;
    transform: translateX(-50%) scale(1.3);
}

/* NOW Marker */
#timeline-now-marker {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 16px;
    background: var(--accent);
    border-radius: 1px;
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
    box-shadow: 0 0 8px var(--accent), 0 0 16px rgba(var(--accent-rgb), 0.3);
    transition: left 0.3s var(--ease);
}
#timeline-now-marker::after {
    content: 'NOW';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--mono);
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--accent);
    white-space: nowrap;
}

/* Event Pins Overlay */
#timeline-events-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
.timeline-event-pin {
    position: absolute;
    top: -4px;
    width: 6px;
    height: 12px;
    border-radius: 3px 3px 1px 1px;
    opacity: 0.8;
    transition: opacity 0.2s, transform 0.2s var(--spring);
    pointer-events: auto;
    cursor: pointer;
}
.timeline-event-pin:hover {
    opacity: 1;
    transform: scale(1.4);
}
.timeline-event-pin.cyber { background: #3b82f6; box-shadow: 0 0 4px #3b82f6; }
.timeline-event-pin.business { background: #f59e0b; box-shadow: 0 0 4px #f59e0b; }
.timeline-event-pin.medical { background: #10b981; box-shadow: 0 0 4px #10b981; }
.timeline-event-pin.personal { background: #a855f7; box-shadow: 0 0 4px #a855f7; }
.timeline-event-pin.chat { background: rgba(255,255,255,0.5); box-shadow: 0 0 4px rgba(255,255,255,0.3); }

#timeline-ticks {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}
.time-tick {
    font-family: var(--mono);
    font-size: 7px;
    color: var(--text-3);
    cursor: pointer;
    transition: color 0.2s;
    user-select: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.time-tick:hover, .time-tick.active {
    color: var(--text-2);
}
.time-tick.active {
    color: var(--accent);
    font-weight: 500;
}
.time-tick.now-tick {
    color: var(--accent);
    font-weight: 700;
}

/* Apple OS safe-area offsets for iOS notches and home indicators */
@media (max-width: 600px) {
    #omnibar-wrap {
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        padding-left: calc(24px + env(safe-area-inset-left));
        padding-right: calc(24px + env(safe-area-inset-right));
    }
    #hud {
        padding-top: env(safe-area-inset-top);
    }
}
