/* Neon: warm cyberpunk over the hue knobs of the Neon theme. Violet night,
   purple neon with pink and cyan edges, and amber for live indicators, like a
   valve that is warm. Everything here applies only while Neon is chosen. */
html[data-theme=neon]{
  --cy-violet:#b26bff;--cy-pink:#ff5fd2;--cy-cyan:#62e6ff;--cy-amber:#ffb35c;
  --cy-edge:linear-gradient(90deg,var(--cy-pink),var(--cy-violet) 55%,var(--cy-cyan));
  --cy-glow:0 0 0 1px color-mix(in srgb,var(--cy-violet) 45%,transparent),0 0 22px color-mix(in srgb,var(--cy-violet) 28%,transparent);
  --cy-mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,monospace;
  --blue:#8ad8ff;scrollbar-color:color-mix(in srgb,var(--cy-violet) 40%,transparent) transparent;
}
html[data-theme=neon] .sessions-mode,html[data-theme=neon] .ss-project-dialog{--ss-blue:#8ad8ff}
html[data-theme=neon] body{background:radial-gradient(1100px 680px at 6% -12%,color-mix(in srgb,var(--cy-violet) 15%,transparent),transparent 62%),radial-gradient(900px 620px at 104% 112%,color-mix(in srgb,var(--cy-pink) 9%,transparent),transparent 60%),var(--bg);background-attachment:fixed}
/* Faint scanlines over the whole window; they never take input. */
html[data-theme=neon] body::after{content:'';position:fixed;inset:0;z-index:2147483000;pointer-events:none;background:repeating-linear-gradient(180deg,rgb(255 255 255/.022) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
html[data-theme=neon] ::selection{background:color-mix(in srgb,var(--cy-pink) 45%,transparent);color:#fff}
html[data-theme=neon] :focus-visible{outline-color:var(--cy-violet)}

/* Top bar with a neon horizon. */
html[data-theme=neon] .topbar{position:relative;background:linear-gradient(180deg,color-mix(in srgb,var(--cy-violet) 8%,transparent),transparent)}
html[data-theme=neon] .topbar::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--cy-edge);opacity:.75;box-shadow:0 0 14px var(--cy-violet)}
html[data-theme=neon] .brand b{background:var(--cy-edge);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--cy-violet) 70%,transparent))}
html[data-theme=neon] .brand-sub,html[data-theme=neon] .statusbar,html[data-theme=neon] .eyebrow,html[data-theme=neon] .sidebar-label{font-family:var(--cy-mono);letter-spacing:.14em}
html[data-theme=neon] .statusbar{border-top-color:color-mix(in srgb,var(--cy-violet) 30%,var(--line))}
html[data-theme=neon] .connection.online{color:var(--cy-amber)}
html[data-theme=neon] .connection.online .dot,html[data-theme=neon] .machine-indicator .dot{background:var(--cy-amber);box-shadow:0 0 8px var(--cy-amber),0 0 2px #fff8}

/* Primary actions glow. */
html[data-theme=neon] .button.primary,html[data-theme=neon] .ss-button.primary,html[data-theme=neon] .bp-button.primary{background:linear-gradient(135deg,var(--cy-pink),var(--cy-violet) 70%);border-color:transparent;color:#fff;text-shadow:0 0 6px #0006;box-shadow:0 0 18px color-mix(in srgb,var(--cy-violet) 42%,transparent)}
html[data-theme=neon] .button.primary:hover,html[data-theme=neon] .ss-button.primary:hover,html[data-theme=neon] .bp-button.primary:hover{box-shadow:0 0 26px color-mix(in srgb,var(--cy-pink) 55%,transparent)}
html[data-theme=neon] .button.primary:disabled,html[data-theme=neon] .ss-button.primary:disabled{box-shadow:none;filter:saturate(.4) brightness(.8)}

/* Navigation and the session list mark the current item with a neon edge. */
html[data-theme=neon] .nav-item.selected{color:#f1e4ff;background:linear-gradient(90deg,color-mix(in srgb,var(--cy-violet) 22%,transparent),transparent);border-color:color-mix(in srgb,var(--cy-violet) 40%,transparent);box-shadow:inset 2px 0 0 var(--cy-violet)}
html[data-theme=neon] .ss-session.selected{box-shadow:inset 2px 0 0 var(--cy-violet),0 0 0 1px color-mix(in srgb,var(--cy-violet) 35%,transparent),0 0 18px color-mix(in srgb,var(--cy-violet) 16%,transparent)}
html[data-theme=neon] .ss-session.working .ss-session-avatar{box-shadow:0 0 10px color-mix(in srgb,var(--cy-amber) 55%,transparent)}

/* Conversation: the owner's messages carry the violet, live work glows amber. */
html[data-theme=neon] .ss-bubble.user,html[data-theme=neon] .ss-bubble.owner{background:linear-gradient(160deg,color-mix(in srgb,var(--cy-violet) 16%,var(--ss-raised)),color-mix(in srgb,var(--cy-pink) 6%,var(--ss-raised)));border-color:color-mix(in srgb,var(--cy-violet) 38%,var(--ss-line))}
html[data-theme=neon] .ss-streaming{background:var(--cy-amber);box-shadow:0 0 9px var(--cy-amber)}
html[data-theme=neon] .ss-task{border-color:color-mix(in srgb,var(--cy-violet) 30%,var(--ss-line));background:linear-gradient(160deg,color-mix(in srgb,var(--cy-violet) 7%,var(--ss-panel)),var(--ss-panel))}
html[data-theme=neon] .ss-task-type{color:var(--cy-pink);text-shadow:0 0 8px color-mix(in srgb,var(--cy-pink) 50%,transparent)}
html[data-theme=neon] .ss-tool pre,html[data-theme=neon] .ss-task pre{color:#d9d2ff}
html[data-theme=neon] #ss-composer{border-color:color-mix(in srgb,var(--cy-violet) 35%,var(--ss-line))}
html[data-theme=neon] #ss-composer:focus-within{box-shadow:var(--cy-glow)}
html[data-theme=neon] .ss-create-view .ss-create-composer:focus-within{border-color:var(--cy-violet);box-shadow:var(--cy-glow)}
html[data-theme=neon] .ss-book:hover{box-shadow:0 14px 30px #0006,0 0 22px color-mix(in srgb,var(--book) 30%,transparent)}
html[data-theme=neon] .ss-book-new{border-color:color-mix(in srgb,var(--cy-violet) 45%,var(--ss-line))}
html[data-theme=neon] .ss-book-plus{color:var(--cy-pink);background:color-mix(in srgb,var(--cy-pink) 14%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--cy-pink) 30%,transparent)}
html[data-theme=neon] .sf-queue{border-color:color-mix(in srgb,var(--cy-amber) 40%,var(--ss-line))}
html[data-theme=neon] .sf-queue>summary{color:var(--cy-amber)}

/* Sign-in: the title lights up like a sign. */
html[data-theme=neon] .login-main h1 span{background:var(--cy-edge);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--cy-violet) 60%,transparent))}
html[data-theme=neon] .login-card{box-shadow:0 0 0 1px color-mix(in srgb,var(--cy-violet) 30%,transparent),0 20px 60px #0007,0 0 40px color-mix(in srgb,var(--cy-violet) 14%,transparent)}
html[data-theme=neon] .mini-node.core{box-shadow:0 0 18px color-mix(in srgb,var(--cy-violet) 40%,transparent)}
@media(prefers-reduced-motion:reduce){html[data-theme=neon] body::after{display:none}}
/* Agents keep their own neon: Claude warm amber, Codex cyan, DeepSeek violet. */
html[data-theme=neon] .ss-session-avatar.claude{color:var(--cy-amber);background:color-mix(in srgb,var(--cy-amber) 12%,#120c1c);border-color:color-mix(in srgb,var(--cy-amber) 35%,transparent)}
html[data-theme=neon] .ss-session-avatar.codex{color:var(--cy-cyan);background:color-mix(in srgb,var(--cy-cyan) 10%,#120c1c);border-color:color-mix(in srgb,var(--cy-cyan) 32%,transparent)}
html[data-theme=neon] .ss-session-avatar.deepseek{color:#b9a2ff;background:color-mix(in srgb,var(--cy-violet) 14%,#120c1c);border-color:color-mix(in srgb,var(--cy-violet) 40%,transparent)}
html[data-theme=neon] .update-banner{border-color:color-mix(in srgb,var(--cy-violet) 45%,transparent);box-shadow:0 14px 40px #0008,0 0 26px color-mix(in srgb,var(--cy-violet) 30%,transparent)}
html[data-theme=neon] #ss-list.ss-hints [data-hint]::after{color:#fff;background:linear-gradient(135deg,var(--cy-pink),var(--cy-violet));border-color:transparent;box-shadow:0 0 12px color-mix(in srgb,var(--cy-violet) 55%,transparent)}