/* Semantic skin adapter. Classic has no selector match and remains untouched. */
html[data-fairystack-skin]{background:var(--skin-page);color:var(--skin-ink);accent-color:var(--skin-accent);scrollbar-color:var(--skin-line) var(--skin-page)}
html[data-fairystack-skin] body,html[data-fairystack-skin] body[data-fairystack-shell],html[data-fairystack-skin] body.conversation-visible{--page:var(--skin-page);--surface:var(--skin-panel);--ink:var(--skin-ink);--muted:var(--skin-muted);--line:var(--skin-line);--divider:var(--skin-line);--accent:var(--skin-accent);--activity:var(--skin-accent);--tab-surface:var(--skin-raised);--tab-selected:var(--skin-selected);--user-surface:var(--skin-selected);--footer-chrome:var(--skin-page);--footer-control:var(--skin-panel);--footer-ink:var(--skin-ink);--footer-line:var(--skin-line);--footer-selected:var(--skin-selected);background:var(--skin-page);color:var(--skin-ink);font-family:var(--skin-font)}
html[data-fairystack-skin] body.conversation-visible::before{background:radial-gradient(ellipse at 80% 0,color-mix(in srgb,var(--skin-accent) 6%,transparent),transparent 60%)}
html[data-fairystack-skin] body::after{display:none}
html[data-fairystack-skin] body.conversation-visible #session-loading{border:1px solid var(--skin-line);border-radius:var(--skin-radius);background:var(--skin-panel)}
html[data-fairystack-skin] body.conversation-visible .message{border:1px solid var(--skin-line);border-radius:var(--skin-radius);background:var(--skin-panel);color:var(--skin-ink);box-shadow:none;backdrop-filter:none;padding:var(--skin-density)}
html[data-fairystack-skin] body.conversation-visible .message.user{background:var(--skin-selected);border-left:3px solid var(--skin-accent)}
html[data-fairystack-skin] body.conversation-visible .message.user[data-provenance="machine"]{background:var(--skin-raised);border-color:var(--skin-line)}
html[data-fairystack-skin] .message.assistant a{color:var(--skin-accent)}
html[data-fairystack-skin] #composer{border-radius:var(--skin-radius);border-color:var(--skin-line);background:var(--skin-panel);color:var(--skin-ink);box-shadow:0 -2px 0 var(--skin-accent)}
html[data-fairystack-skin] #composer textarea{padding:var(--skin-density);font-family:var(--skin-font)}
html[data-fairystack-skin] body.conversation-visible #send{background:var(--skin-button);color:var(--skin-button-ink);border-color:var(--skin-button);border-radius:var(--skin-radius)}
html[data-fairystack-skin] body.conversation-visible #enqueue{background:var(--skin-panel);color:var(--skin-accent);border-color:var(--skin-line)}
html[data-fairystack-skin] #session-tabs{--page:var(--skin-page);--surface:var(--skin-panel);--tab-surface:var(--skin-raised);--tab-selected:var(--skin-selected);--ink:var(--skin-ink);--muted:var(--skin-muted);--line:var(--skin-line);--accent:var(--skin-accent);--create-bg:var(--skin-button);--create-hover:var(--skin-button);--create-ink:var(--skin-button-ink);--rail-edge:var(--skin-accent);background:var(--skin-page);border-color:var(--skin-line);box-shadow:none;font-family:var(--skin-font)}
html[data-fairystack-skin] .session-tab:has([aria-selected="true"]){--row-bg:color-mix(in srgb,var(--skin-accent) 18%,var(--skin-page));border-color:var(--skin-accent);border-radius:0;box-shadow:inset 3px 0 0 var(--skin-accent)}
html[data-fairystack-skin] .session-fairy{background-image:none;filter:none;transform:none;border:1px solid var(--skin-accent);border-radius:2px}
html[data-fairystack-skin] .session-fairy:not(.is-halted):not(:has(.session-tab-favicon:not([hidden])))::before{content:'/';font:700 15px ui-monospace,monospace;color:var(--skin-accent)}
html[data-fairystack-skin] .session-fairy:has(.session-tab-favicon:not([hidden])){border:0}
html[data-fairystack-skin] :is(#surface-view,dialog,.trace-dot-tooltip){color:var(--skin-ink);background-color:var(--skin-panel);border-color:var(--skin-line)}
html[data-fairystack-skin] :is(#surface-view[data-surface],dialog) :is(input,select,textarea){background:var(--skin-page);color:var(--skin-ink);border-color:var(--skin-line)}
html[data-fairystack-skin] body.conversation-visible #composer-dock::after,html[data-fairystack-skin] .gate{background:var(--skin-page)}
html[data-fairystack-skin] .gate>#inline-login{border:1px solid var(--skin-line);border-top:3px solid var(--skin-accent);border-radius:var(--skin-radius);background:var(--skin-panel);color:var(--skin-ink);box-shadow:none;--gate-ink:var(--skin-ink);--gate-muted:var(--skin-muted);--gate-label:var(--skin-ink);--gate-input:var(--skin-page);--gate-input-ink:var(--skin-ink);--gate-line:var(--skin-line);--gate-focus:var(--skin-accent);--gate-link:var(--skin-accent);--gate-button:var(--skin-button);--gate-button-hover:var(--skin-button);--gate-button-ink:var(--skin-button-ink)}
html[data-fairystack-skin] .gate :is(.activation-brand,#activation-intro .activation-kicker,#activation-intro p:not(.activation-kicker)){color:var(--skin-muted)}
html[data-fairystack-skin] .gate :is(#activation-intro h1,#activation-intro strong){color:var(--skin-ink);font-family:var(--skin-display)}
html[data-fairystack-skin] ::selection{background:var(--skin-button);color:var(--skin-button-ink)}
html[data-fairystack-skin] :focus-visible{outline:2px solid var(--skin-accent);outline-offset:3px}
/* Loaded inside the existing footer shadow root as well as the document. */
:host([data-skinned]){font-family:var(--skin-font);--shell-control-radius:var(--skin-radius)}
:host([data-skinned]) #app-header-nav{background:var(--skin-page);color:var(--skin-ink);border-color:var(--skin-line);box-shadow:none}
:host([data-skinned]) :is(.ah-link,.platform-version,#subsystem-toggle,#subsystem-menu){background:var(--skin-panel);color:var(--skin-ink);border-color:var(--skin-line);border-radius:var(--skin-radius)}
:host([data-skinned]) :is(.ah-link,.platform-version):is(:hover,:focus-visible,[aria-current="page"]){background:var(--skin-selected);color:var(--skin-accent);border-color:var(--skin-accent)}
:host([data-skinned]) :is(.platform-user,#subsystem-menu button,#subsystem-menu a){color:var(--skin-ink)}
:host([data-skinned]) #account-menu{--account-bg:var(--skin-panel);--account-ink:var(--skin-ink);--account-line:var(--skin-line);--account-hover:var(--skin-selected)}
:host([data-skinned]) #release-history{--release-bg:var(--skin-panel);--release-ink:var(--skin-ink);--release-muted:var(--skin-muted);--release-line:var(--skin-line);--release-row:var(--skin-raised);border-radius:var(--skin-radius)}
html[data-fairystack-skin] #composer-frame,html[data-fairystack-skin] #composer-header{border-radius:var(--skin-radius);border-color:var(--skin-line)}
:where(html[data-fairystack-skin]) button{background:var(--skin-button);color:var(--skin-button-ink);border-color:var(--skin-button)}html[data-fairystack-skin] button:disabled{background-color:var(--skin-raised);color:var(--skin-muted);border-color:var(--skin-line);opacity:1}

/* Rainbow bats decoration (decorations/bats.js); bat-swarm.js places each bat. */
.night-creatures{display:block;position:absolute;bottom:100%;left:0;width:100%;height:24px;pointer-events:none;user-select:none;overflow:hidden;color:var(--skin-ink);z-index:2}
.night-bat{position:absolute;bottom:0;width:26px;height:18px;transform-origin:center;pointer-events:none;color:var(--skin-accent,var(--skin-ink))}
.night-bat i{display:block;width:100%;height:100%;background:currentColor;clip-path:polygon(30% 18%,38% 0,46% 22%,54% 22%,62% 0,70% 18%,76% 65%,64% 95%,36% 95%,24% 65%)}
.night-bat[data-wing-state="up"] i{clip-path:polygon(0 0,35% 30%,45% 45%,46% 20%,50% 36%,54% 20%,55% 45%,65% 30%,100% 0,85% 75%,62% 65%,50% 100%,38% 65%,15% 75%)}
.night-bat[data-wing-state="down"] i{clip-path:polygon(0 85%,30% 40%,44% 35%,46% 10%,50% 25%,54% 10%,56% 35%,70% 40%,100% 85%,72% 68%,60% 80%,50% 100%,40% 80%,28% 68%)}

/* Bat color is a local appearance choice, shared with the studio preview. */
html[data-bat-color="rainbow"] .night-bat{color:var(--bat-rainbow)}
.night-bat-0{--bat-rainbow:#ff929e}.night-bat-1{--bat-rainbow:#ffc080}.night-bat-2{--bat-rainbow:#ffe799}.night-bat-3{--bat-rainbow:#99e5b8}.night-bat-4{--bat-rainbow:#97d5ff}.night-bat-5{--bat-rainbow:#d4afff}.night-bat-6{--bat-rainbow:#fface1}
html[data-skin-mode="light"] .night-bat-0{--bat-rainbow:#a0253d}html[data-skin-mode="light"] .night-bat-1{--bat-rainbow:#874600}html[data-skin-mode="light"] .night-bat-2{--bat-rainbow:#6c5400}html[data-skin-mode="light"] .night-bat-3{--bat-rainbow:#16623b}html[data-skin-mode="light"] .night-bat-4{--bat-rainbow:#225e90}html[data-skin-mode="light"] .night-bat-5{--bat-rainbow:#64328f}html[data-skin-mode="light"] .night-bat-6{--bat-rainbow:#8d306e}
@media(forced-colors:active){.night-bat{color:CanvasText!important}}

/* Spectrum details: layered sign enamel, bright inlays, and warm highlights. */
html[data-skin-family="spectrum"]{--city-gold:#ffd879;--city-lime:#d7ff69;--city-violet:#c6a0ff;--city-orange:#ffac72;--city-enamel:#233653}
html[data-skin-family="spectrum"][data-skin-mode="light"]{--city-gold:#785200;--city-lime:#466300;--city-violet:#7540a4;--city-orange:#9a4200;--city-enamel:#dceaf4}
:host([data-skin-family="spectrum"]) #app-header-nav{border-top:2px solid var(--skin-accent);background:var(--skin-page);box-shadow:0 -3px 18px color-mix(in srgb,var(--skin-accent) 14%,transparent)}
:host([data-skin-family="spectrum"]) :is(.ah-link,#subsystem-toggle){border:1px solid var(--skin-accent);border-radius:7px 2px 7px 2px;color:var(--skin-accent);background:var(--skin-panel);box-shadow:inset 0 -2px color-mix(in srgb,var(--skin-accent) 20%,transparent)}
:host([data-skin-family="spectrum"]) :is(.ah-link,#subsystem-toggle):nth-child(4n+1){color:var(--city-gold);border-color:var(--city-gold)}
:host([data-skin-family="spectrum"]) :is(.ah-link,#subsystem-toggle):nth-child(4n+2){color:var(--city-lime);border-color:var(--city-lime)}
:host([data-skin-family="spectrum"]) :is(.ah-link,#subsystem-toggle):nth-child(4n+3){color:var(--city-violet);border-color:var(--city-violet)}
:host([data-skin-family="spectrum"]) :is(.ah-link,#subsystem-toggle):nth-child(4n){color:var(--city-orange);border-color:var(--city-orange)}
:host([data-skin-family="spectrum"]) .ah-link:is(:hover,:focus-visible,[aria-current="page"]){background:var(--skin-selected);box-shadow:0 0 12px color-mix(in srgb,var(--skin-accent) 25%,transparent)}

html[data-fairystack-skin] body::after,html[data-fairystack-skin] .gate::before,html[data-fairystack-skin] .gate>#inline-login::after{display:none}
html[data-skin-family="spectrum"] :is(#composer-header,.composer-actions){background:var(--skin-raised);color:var(--skin-ink);border-color:var(--skin-line)}
:host([data-skin-family="spectrum"]) #platform-menu-toggle{background:var(--skin-panel);color:var(--skin-ink);border-color:var(--skin-line)}

/* Spectrum keeps its controls readable. */
:where(html[data-skin-family="spectrum"]) :is(#current-app,#composer-model,#voice-feed,#clear-composer,#composer-options-open){background:var(--skin-panel);color:var(--skin-accent);border-color:var(--skin-line)}
html[data-skin-family="spectrum"] .composer-actions{padding:7px 10px;border-top:1px solid var(--skin-line)}
html[data-skin-family="spectrum"] .message.assistant article :is(pre,code,blockquote),html[data-skin-family="spectrum"] .turn-profile-host>.turn-profile{background:var(--skin-raised);color:var(--skin-ink);border-color:var(--skin-line)}
html[data-skin-family="spectrum"] #composer-header :is(#current-app,#composer-model){background:transparent;color:var(--skin-ink)}
html[data-skin-family="spectrum"]{--spectrum:linear-gradient(100deg,#ff809d,#ffba72,#f5e780,#89deb3,#85cfff,#b5a0ff,#ed9fdf);--spectrum-pinstripe:#9dc4ff0c;--console-inline-gutter:max(16px,env(safe-area-inset-left),env(safe-area-inset-right))}
html[data-skin-family="spectrum"][data-skin-mode="light"]{--spectrum-pinstripe:#34507514}
html[data-skin-family="spectrum"] body.conversation-visible::before{background:repeating-linear-gradient(115deg,transparent 0 38px,var(--spectrum-pinstripe) 39px 40px),radial-gradient(ellipse at 0 15%,#ef619d30,transparent 45%),radial-gradient(ellipse at 95% 35%,#65bcff30,transparent 45%),radial-gradient(ellipse at 55% 100%,#a5dc8230,transparent 45%);opacity:1}
/* The default reading canvas stays neutral beneath expressive message accents. */
html[data-fairystack-skin="spectrum"][data-skin-mode="dark"] body.conversation-visible::before{background:none}
html[data-skin-family="spectrum"] #session-tabs{border-bottom:3px solid transparent;border-image:var(--spectrum) 1}
html[data-skin-family="spectrum"] body.conversation-visible #composer-frame{border:2px solid transparent;background:linear-gradient(var(--skin-panel),var(--skin-panel)) padding-box,var(--spectrum) border-box;box-shadow:0 0 26px #b5a0ff20}
html[data-skin-family="spectrum"] #composer-frame #composer{border:0;border-top:1px solid var(--skin-line);border-radius:0;background:var(--skin-panel);box-shadow:none}
html[data-skin-family="spectrum"] body.conversation-visible .message.assistant{border:1.5px solid transparent;background:linear-gradient(var(--skin-panel),var(--skin-panel)) padding-box,var(--spectrum) border-box var(--skin-panel);color:var(--skin-ink)}
html[data-skin-family="spectrum"] body.conversation-visible .message,html[data-skin-family="spectrum"] body.conversation-visible .message.user{border:1px solid var(--skin-line);border-radius:18px}
html[data-skin-family="spectrum"] .session-tab:has([aria-selected="true"]){background:var(--skin-selected);box-shadow:inset 0 3px var(--skin-accent)}
:host([data-skin-family="spectrum"]) #app-header-nav{border-top:3px solid transparent;border-image:var(--spectrum) 1}
@media(max-width:620px){html[data-skin-family="spectrum"] .composer-actions{padding:5px;gap:5px}}
@media(prefers-reduced-motion:reduce){.night-creatures *{animation:none!important}.night-bat{transform:none!important}}

html[data-skin-family="spectrum"] .message.assistant article ::selection{-webkit-text-fill-color:var(--skin-button-ink);background:var(--skin-button);color:var(--skin-button-ink)}

/* Locally hosted expressive type and reading voice. */
@font-face{font-family:'Bricolage Grotesque';src:url('/assets/fonts/bricolage-grotesque.ttf') format('truetype');font-weight:200 800;font-style:normal;font-display:swap}
html[data-skin-family="spectrum"] .message.assistant article{max-width:68ch;font-family:var(--agent-message-font);font-size:16px;line-height:1.8}

/* Spectrum accents with square geometry. */
html[data-skin-family="spectrum"] body.conversation-visible #send{font:700 13px ui-monospace,monospace;letter-spacing:.06em;border:1px solid var(--skin-accent);border-bottom:3px solid color-mix(in srgb,var(--skin-button) 65%,#000);border-radius:7px 2px 7px 2px;padding-inline:24px;font-weight:800;box-shadow:0 0 18px color-mix(in srgb,var(--skin-accent) 28%,transparent)}
html[data-skin-family="spectrum"] :is(#current-app,#composer-model){border:1px solid var(--skin-line);border-radius:4px;padding:3px 7px;background:var(--skin-panel);color:var(--skin-ink)}
html[data-skin-family="spectrum"] #current-app,html[data-skin-family="spectrum"] #context-track,html[data-skin-family="spectrum"] #composer-options-open{border-color:var(--city-gold);color:var(--city-gold)}
html[data-skin-family="spectrum"] #composer-model{border-color:var(--city-violet);color:var(--city-violet)}
html[data-skin-family="spectrum"] body.conversation-visible #enqueue{border-color:var(--city-orange);color:var(--city-orange);box-shadow:inset 0 -2px color-mix(in srgb,var(--city-orange) 30%,transparent)}
html[data-skin-family="spectrum"] body.conversation-visible :is(#send,#enqueue,#voice-feed,button):disabled{background:var(--skin-raised);color:var(--skin-muted);box-shadow:none;opacity:1}
html[data-skin-family="spectrum"] #session-tabs :is(.session-tab,.session-tab>:is(button,a):first-child){border-radius:0}
html[data-skin-family="spectrum"] #composer-frame{border:2px solid transparent;border-radius:4px;background:linear-gradient(var(--skin-panel),var(--skin-panel)) padding-box,var(--spectrum) border-box}
html[data-skin-family="spectrum"] #composer-header{border-radius:0;gap:8px}
html[data-skin-family="spectrum"] #send{letter-spacing:.06em;font-family:ui-monospace,monospace}
@media(max-width:620px){html[data-skin-family="spectrum"] body.conversation-visible #send{padding-inline:12px}}
html[data-skin-family="spectrum"] #composer-header :is(#session-account,#current-app,#session-speed,#composer-model,#composer-status,#composer-session-reference)::before{content:none}
html[data-skin-family="spectrum"] #composer-header :is(#session-account,#current-app,#session-speed,#composer-model,#composer-status,#composer-session-reference){margin-inline-start:0}

/* Every workshop surface shares the explicit appearance, not the OS palette.
   Local component aliases must be rebound here: inherited body tokens cannot
   override a component's own legacy light palette. */
html[data-fairystack-skin][data-skin-mode="dark"]{--skin-good:#90ddb0;--skin-good-bg:#173727;--skin-warn:#f1d28c;--skin-warn-bg:#3c3018;--skin-bad:#ffb3be;--skin-bad-bg:#421e28}
html[data-fairystack-skin][data-skin-mode="light"]{--skin-good:#17633b;--skin-good-bg:#def1e4;--skin-warn:#74500b;--skin-warn-bg:#fff0c9;--skin-bad:#922b40;--skin-bad-bg:#fbe3e8}
html[data-fairystack-skin] #surface-view[data-surface]{--page:var(--skin-page);--surface:var(--skin-panel);--surface-alt:var(--skin-raised);--ink:var(--skin-ink);--muted:var(--skin-muted);--line:var(--skin-line);--accent:var(--skin-accent);--danger:var(--skin-bad);--good:var(--skin-good);--good-bg:var(--skin-good-bg);--warn:var(--skin-warn);--warn-bg:var(--skin-warn-bg);--bad:var(--skin-bad);--bad-bg:var(--skin-bad-bg);color:var(--skin-ink);background:var(--skin-panel)}
html[data-fairystack-skin] #surface-view:is([data-surface="studio"],[data-surface="expressive"]){background:transparent}
html[data-fairystack-skin] #surface-view[data-surface="apps"] :is(.app,.app-favicon,.app-fallback,.app-actions,.instances,.instances a){border-color:var(--skin-line);border-radius:var(--skin-radius);box-shadow:none}
:host([data-skinned]) .platform-user,html[data-fairystack-skin] #surface-view[data-surface="apps"] .app{background:var(--skin-panel);color:var(--skin-ink)}
html[data-fairystack-skin] #surface-view[data-surface="apps"] :is(.app-actions,.instances,.instances a,.app-favicon){background:var(--skin-raised);color:var(--skin-ink)}
html[data-fairystack-skin] #surface-view[data-surface="apps"] :is(.app-name,.instances a){color:var(--skin-accent)}
html[data-fairystack-skin] #surface-view[data-surface="apps"] :is(.app-fallback,.app-actions button,.app-actions .open-app){background:var(--skin-button);color:var(--skin-button-ink);border-color:var(--skin-line);border-radius:var(--skin-radius)}
html[data-fairystack-skin] #surface-view[data-surface="apps"] .app-actions button:disabled{background:var(--skin-raised);color:var(--skin-muted);border-color:var(--skin-line);opacity:1}
html[data-fairystack-skin] #surface-view[data-surface="apps"] :is(input,select,.directory,.app-actions button,.app-actions .open-app):focus-visible{outline:2px solid var(--skin-accent);outline-offset:2px}
html[data-fairystack-skin] #surface-view[data-surface="backups"] :is(.backup-instrument,.history,.flow-node,.stage-detail,.recovery-run){border-radius:var(--skin-radius)}
html[data-fairystack-skin] .onboarding-workbench{--ob-bg:var(--skin-panel);--ob-ink:var(--skin-ink);--ob-muted:var(--skin-muted);--ob-line:var(--skin-line);--ob-accent:var(--skin-accent);--ob-selected:var(--skin-selected);--ob-danger:var(--skin-bad);--ob-warning:var(--skin-warn);border-radius:var(--skin-radius)}
html[data-fairystack-skin] .customer-activity{--usage-bg:var(--skin-panel);--usage-ink:var(--skin-ink);--usage-muted:var(--skin-muted);--usage-line:var(--skin-line);--usage-selected:var(--skin-selected)}
html[data-fairystack-skin] :is(.architecture-model-mount,.architecture-model){--architecture-page:var(--skin-page);--architecture-surface:var(--skin-panel);--architecture-alt:var(--skin-raised);--architecture-ink:var(--skin-ink);--architecture-muted:var(--skin-muted);--architecture-line:var(--skin-line);--architecture-added:var(--skin-good);--architecture-added-fill:var(--skin-good-bg);--architecture-changed:var(--skin-warn);--architecture-changed-fill:var(--skin-warn-bg)}
html[data-fairystack-skin] #surface-view[data-surface="apps"] .app-actions .delete-app,html[data-fairystack-skin] .architecture-model-failure{background:var(--skin-panel);color:var(--skin-bad);border-color:var(--skin-bad)}
html[data-fairystack-skin] #surface-view[data-surface="feature-ledger"] .ledger .loc-count{border-color:color-mix(in srgb,var(--skin-bad) var(--loc-heat),var(--skin-line));background:color-mix(in srgb,var(--skin-bad-bg) var(--loc-heat),var(--skin-panel));color:var(--skin-ink)}

/* The recorded-submission dialog pins its own palette; under a skin it wears the skin's. */
html[data-fairystack-skin] #runtime-instructions{--page:var(--skin-page);--surface:var(--skin-panel);--ink:var(--skin-ink);--muted:var(--skin-muted);--line:var(--skin-line);--divider:var(--skin-line);--accent:var(--skin-accent)}
html[data-fairystack-skin] #runtime-instructions .instructions-view{--json-surface:var(--skin-raised)}

@media(forced-colors:active){html[data-skin-family="spectrum"] body.conversation-visible :is(.message.assistant,#composer-frame){border-color:CanvasText;box-shadow:none}}

/* Workspace identity remains visible beside the draft and above desktop sessions. */
/* The server name keeps its own colour under every skin, so a post never lands on the wrong server unnoticed. */
:is(#desktop-instance-name,#mobile-instance-name){min-height:0;margin:0;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}
:is(#desktop-instance-name,#mobile-instance-name)::after{content:"▾";margin-inline-start:4px;font-size:.85em}
:is(#desktop-instance-name,#mobile-instance-name):focus-visible{outline:2px solid var(--accent,currentColor);outline-offset:2px}
/* One color per server on its badge and its row in the server menu (Jessald teal green, operator 2026-10-25); white ink reads on every fill. */
[data-server-color]{--server-fill:#3f4650}[data-server-color="blue"]{--server-fill:#0071e3}[data-server-color="green"]{--server-fill:#0f8b74}[data-server-color="purple"]{--server-fill:#8944ab}
html[data-server-color] :is(#desktop-instance-name,#mobile-instance-name){background:var(--server-fill);color:#fff;border-radius:999px;font-weight:700;letter-spacing:.03em}
html[data-server-color] :is(#desktop-instance-name,#mobile-instance-name):is(:hover,[aria-expanded="true"]){background:color-mix(in srgb,var(--server-fill) 82%,#000)}
#desktop-instance-name{display:block;flex:0 1 auto;min-width:0;max-width:120px;margin:0;padding:4px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:text;user-select:text}
html[data-server-color] #mobile-instance-name{padding:2px 6px;-webkit-user-select:text;user-select:text}
@media(max-width:620px){#desktop-instance-name{display:none}}
/* Classic has no skin tokens; give its workshop the same workspace cue. */
html[data-instance]:not([data-fairystack-skin]) body[data-fairystack-shell],html[data-instance]:not([data-fairystack-skin]) body.conversation-visible,html[data-instance]:not([data-fairystack-skin]) #session-tabs{--page:var(--instance-page);--surface:var(--instance-panel);--user-surface:var(--instance-selected);--tab-surface:var(--instance-raised);--tab-selected:var(--instance-selected);--ink:var(--instance-ink);--muted:var(--instance-muted);--line:var(--instance-line);--divider:var(--instance-line);--accent:var(--instance-accent);background:var(--instance-page);color:var(--instance-ink)}
html[data-instance]:not([data-fairystack-skin]) body.conversation-visible::before{background:radial-gradient(ellipse at 80% 0,color-mix(in srgb,var(--instance-accent) 8%,transparent),transparent 60%)}
html[data-instance]:not([data-fairystack-skin]) body.conversation-visible .message{background:var(--instance-panel);color:var(--instance-ink);border-color:var(--instance-line)}
html[data-instance]:not([data-fairystack-skin]) body.conversation-visible .message.user{background:var(--instance-selected)}
html[data-instance]:not([data-fairystack-skin]) body.conversation-visible #composer-dock::after{background:var(--instance-page)}

/* The menu list (phone ☰ and the console composer menu) uses the containing skin's palette without desktop tile accents. */
:host([data-skinned][data-menu-list]){--menu-bg:var(--skin-panel);--menu-ink:var(--skin-ink);--menu-line:var(--skin-line);--menu-active:var(--skin-selected);--menu-muted:var(--skin-muted)}
:host([data-skinned]) #instance-list{--instance-bg:var(--skin-panel);--instance-ink:var(--skin-ink);--instance-line:var(--skin-line);--instance-active:var(--skin-selected);border-radius:var(--skin-radius)}
:host([data-skinned][data-menu-list]) #app-header-nav:popover-open{background:var(--menu-bg);color:var(--menu-ink);border:1px solid var(--menu-line);border-image:none;box-shadow:0 12px 40px #0003}
:host([data-skinned][data-menu-list]) #app-header-nav :is(.ah-link,#subsystem-toggle){border:0;border-radius:10px;box-shadow:none;background:var(--menu-bg);color:var(--menu-ink)}
:host([data-skinned][data-menu-list]) #app-header-nav :is(.ah-link,#subsystem-toggle):is(:hover,:focus-visible,[aria-current="page"]){background:var(--menu-active);color:var(--menu-ink);box-shadow:none}


/* The original workshop is a theme of the current console, not a separate UI. */
html[data-skin-family="fairystack"] body.conversation-visible::before{background:linear-gradient(color-mix(in srgb,var(--skin-page) 72%,transparent),color-mix(in srgb,var(--skin-page) 88%,transparent)),url('/assets/fairystack-treehouse-workshop-v3.webp') center top/cover no-repeat}
html[data-skin-family="fairystack"] body.conversation-visible .message{box-shadow:0 5px 18px color-mix(in srgb,var(--skin-ink) 9%,transparent)}
html[data-skin-family="fairystack"] .session-fairy:not(.is-halted):not(:has(.session-tab-favicon:not([hidden]))){background-image:var(--fairy-suite-url);filter:hue-rotate(var(--fairy-hue,0deg));border:0}
html[data-skin-family="fairystack"] .session-fairy:not(.is-halted):not(:has(.session-tab-favicon:not([hidden])))::before{content:none}
html[data-skin-family="fairystack"] .night-bat{width:32px;height:32px;background:url('/fairy-session-mossbell-tinker-frames-v2.webp') 100% 0/300% 100% no-repeat;filter:drop-shadow(0 1px 2px #0005)}
html[data-skin-family="fairystack"] .night-bat i{display:none}
html[data-skin-family="fairystack"] .night-bat[data-wing-state="up"]{background-position:0 0}
html[data-skin-family="fairystack"] .night-bat[data-wing-state="down"]{background-position:50% 0}
html[data-skin-family="fairystack"] .night-bat-1{background-image:url('/fairy-session-bramble-lantern-frames-v2.webp')}
html[data-skin-family="fairystack"] .night-bat-2{background-image:url('/fairy-session-coral-comet-frames-v2.webp')}
html[data-skin-family="fairystack"] .night-bat-3{background-image:url('/fairy-session-moonlit-courier-frames-v2.webp')}
html[data-skin-family="fairystack"] .night-bat-4{background-image:url('/fairy-session-porcelain-star-frames-v2.webp')}
html[data-skin-family="fairystack"] .night-bat-5{background-image:url('/fairy-session-inkcap-sprite-frames-v2.webp')}
html[data-skin-family="fairystack"] .night-bat-6{background-image:url('/fairy-session-cozy-perch-frames-v2.webp')}

/* Restored Cyberpsychos terminal material. */
html[data-fairystack-skin="corpo"]{--corpo-blue:#4aa8ff;--corpo-lime:#c8ff2e}
html[data-fairystack-skin="corpo"][data-skin-mode="light"]{--corpo-blue:#0a58c2;--corpo-lime:#3d5c00}
html[data-fairystack-skin="corpo"] body{--danger:var(--skin-bad);font-size:13px;line-height:1.4}
html[data-fairystack-skin="corpo"] body *{font-family:var(--skin-font)!important}
html[data-fairystack-skin="corpo"] body.conversation-visible::before{background:repeating-linear-gradient(0deg,transparent 0 2px,color-mix(in srgb,var(--corpo-blue) 5%,transparent) 2px 3px);opacity:1}
html[data-fairystack-skin="corpo"] body.conversation-visible .message{border:1px solid var(--skin-line);padding:8px 10px;font-size:13px}
html[data-fairystack-skin="corpo"] body.conversation-visible .message.user{border-left:2px solid var(--skin-accent)}
html[data-fairystack-skin="corpo"] .message.assistant article{font-size:13px;line-height:1.45;text-shadow:0 0 6px color-mix(in srgb,var(--corpo-blue) 28%,transparent)}
html[data-fairystack-skin="corpo"] .message.assistant article :is(h1,h2,h3){color:var(--corpo-blue);font-size:13px;text-transform:uppercase;letter-spacing:.08em}
html[data-fairystack-skin="corpo"] .message.assistant article :is(h1,h2,h3)::before{content:'## ';color:var(--skin-accent)}
html[data-fairystack-skin="corpo"] .message.assistant a{color:var(--corpo-blue)}
html[data-fairystack-skin="corpo"] .message.assistant article :is(pre,code,blockquote){background:var(--skin-raised);color:var(--corpo-lime);border-color:var(--skin-line)}
html[data-fairystack-skin="corpo"] :is(#composer-header,#composer-frame,.composer-actions){background:var(--skin-panel);color:var(--skin-ink);border-color:var(--skin-line);box-shadow:none}
html[data-fairystack-skin="corpo"] #composer{box-shadow:0 -1px 0 var(--skin-accent)}
html[data-fairystack-skin="corpo"] #context-bar{stroke:var(--corpo-lime)}
html[data-fairystack-skin="corpo"] .session-tab{--promise-white:var(--skin-page);--promise-green:#123e5c;border-color:var(--skin-line);box-shadow:none}
html[data-fairystack-skin="corpo"] .session-tab:has([aria-selected="true"]){border-left:2px solid var(--corpo-lime)}
html[data-fairystack-skin="corpo"] #composer .composer-actions #clear-composer{background:transparent;color:var(--skin-ink);border-color:var(--skin-line)}
html[data-fairystack-skin="corpo"] #composer .composer-actions #stop-response{background:var(--skin-bad);color:var(--skin-page);border-color:var(--skin-bad)}
html[data-fairystack-skin="corpo"][data-skin-mode="light"] #composer .composer-actions #stop-response{background:#922b40;color:#ffffff;border-color:#922b40}

/* Wallpaper under any skin: the account's images, one behind the conversation and one behind the sidebar, each from the images placed there, washed with the skin's page colour for reading.
   Panels keep each skin's own borders and images and only turn their fill translucent. */
html[data-fairystack-skin][data-wallpaper~="main"] body.conversation-visible::before{display:block;inset:0 0 var(--platform-footer-height,0px) var(--session-sidebar,0px);background:linear-gradient(color-mix(in srgb,var(--skin-page) var(--wallpaper-dim),transparent),color-mix(in srgb,var(--skin-page) var(--wallpaper-dim),transparent)),var(--wallpaper-main) var(--wallpaper-main-position)/cover no-repeat;transform:scale(var(--wallpaper-main-zoom));transform-origin:var(--wallpaper-main-position);opacity:1;filter:none}
html[data-fairystack-skin][data-wallpaper~="side"] #session-tabs{background:var(--skin-page)}
html[data-fairystack-skin][data-wallpaper~="side"] #session-tabs::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(color-mix(in srgb,var(--skin-page) var(--wallpaper-dim),transparent),color-mix(in srgb,var(--skin-page) var(--wallpaper-dim),transparent)),var(--wallpaper-side) var(--wallpaper-side-position)/cover no-repeat;transform:scale(var(--wallpaper-side-zoom));transform-origin:var(--wallpaper-side-position);opacity:1}
html[data-fairystack-skin][data-wallpaper~="main"][data-wallpaper-fade~="main"] body.conversation-visible::after{content:"";display:block;position:fixed;inset:0 0 var(--platform-footer-height,0px) var(--session-sidebar,0px);z-index:0;pointer-events:none;background:linear-gradient(color-mix(in srgb,var(--skin-page) var(--wallpaper-dim),transparent),color-mix(in srgb,var(--skin-page) var(--wallpaper-dim),transparent)),var(--wallpaper-main-was) var(--wallpaper-main-was-position)/cover no-repeat;transform:scale(var(--wallpaper-main-was-zoom));transform-origin:var(--wallpaper-main-was-position);animation:wallpaper-fade-out 1.2s ease-in-out forwards}
html[data-fairystack-skin][data-wallpaper~="side"][data-wallpaper-fade~="side"] #session-tabs::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(color-mix(in srgb,var(--skin-page) var(--wallpaper-dim),transparent),color-mix(in srgb,var(--skin-page) var(--wallpaper-dim),transparent)),var(--wallpaper-side-was) var(--wallpaper-side-was-position)/cover no-repeat;transform:scale(var(--wallpaper-side-was-zoom));transform-origin:var(--wallpaper-side-was-position);animation:wallpaper-fade-out 1.2s ease-in-out forwards}
@keyframes wallpaper-fade-out{to{opacity:0}}
html[data-fairystack-skin][data-wallpaper~="main"] body.conversation-visible :is(.message,.conversation-interval,.turn-profile-host>.turn-profile),html[data-fairystack-skin][data-wallpaper~="main"] body.conversation-visible :is(#session-notes,#session-loading){background-color:color-mix(in srgb,var(--skin-panel) var(--wallpaper-panel,80%),transparent);backdrop-filter:blur(6px)}
html[data-fairystack-skin][data-wallpaper~="main"] body.conversation-visible .message.user{background-color:color-mix(in srgb,var(--skin-selected) var(--wallpaper-panel,80%),transparent)}
/* Nested content in glass messages and interval bars stays translucent at half the panel strength. */
html[data-fairystack-skin][data-wallpaper~="main"] body.conversation-visible :is(.message,.conversation-interval){--nested-panel:calc(var(--wallpaper-panel,80%) / 2);--surface:color-mix(in srgb,var(--skin-panel) var(--nested-panel),transparent);--page:color-mix(in srgb,var(--skin-page) var(--nested-panel),transparent);--tab-selected:color-mix(in srgb,var(--skin-selected) var(--nested-panel),transparent)}
html[data-fairystack-skin][data-wallpaper~="main"] body.conversation-visible .message article :is(pre,code,blockquote,th){background-color:color-mix(in srgb,var(--skin-raised) var(--nested-panel),transparent)}

/* Storefront: square controls and panels, grey surfaces, one blue action and four white-to-mint bats. */
html[data-fairystack-skin="storefront"] body{font-family:var(--skin-font);-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
html[data-fairystack-skin="storefront"] body.conversation-visible::before{background:none}
html[data-fairystack-skin="storefront"] body.conversation-visible .message{border:0;border-radius:0;box-shadow:0 1px 2px color-mix(in srgb,var(--skin-ink) 6%,transparent)}
html[data-fairystack-skin="storefront"] body.conversation-visible .message.user{border-left:0;border-radius:12px;background:var(--skin-selected)}
html[data-fairystack-skin="storefront"] #composer{border-radius:0;box-shadow:0 2px 12px color-mix(in srgb,var(--skin-ink) 8%,transparent)}
html[data-fairystack-skin="storefront"] :is(#composer-frame,#composer-header,#surface-view,#session-loading){border-radius:0}
html[data-fairystack-skin="storefront"] #composer .composer-actions :is(button,#current-app){border-radius:var(--bar-control-radius)}
html[data-fairystack-skin="storefront"] #composer-header :is(button,#composer-model){border-radius:0}
html[data-fairystack-skin="storefront"] button:not(.generated-image-link):not(#session-tab-list *):not([data-instance-name]){border-radius:0}
html[data-fairystack-skin="storefront"] button:not(#send):not(#stop-response):not(:disabled):not(#session-tab-list *):not(.message-controls button):not(.runtime-instructions-button):not(.generated-image-link):not(.voice-view-tabs [aria-selected="true"]):not(fairystack-footer *):not([data-instance-name]):not(.server-account){background:var(--skin-selected);color:var(--skin-ink);border-color:transparent}
html[data-fairystack-skin="storefront"] .session-tab:has([aria-selected="true"]){--row-bg:color-mix(in srgb,var(--skin-accent) 18%,var(--skin-page));border-radius:0;border-color:transparent;background:var(--row-bg)}
/* Session rows show their own shade (who started them, or selected), not the storefront button fill. */
html[data-fairystack-skin="storefront"] #session-tab-list .session-tab>:is(button:first-child,.session-tab-close){background:var(--row-bg)}
html[data-fairystack-skin="storefront"] .session-fairy{border:0}
html[data-fairystack-skin="storefront"] .session-fairy:not(.is-halted):not(:has(.session-tab-favicon:not([hidden])))::before{content:'';display:block;width:6px;height:6px;margin:auto;border-radius:50%;background:var(--skin-muted)}
html[data-fairystack-skin="storefront"] .gate>#inline-login{border:0;border-radius:0;box-shadow:0 4px 24px color-mix(in srgb,var(--skin-ink) 8%,transparent)}
html[data-fairystack-skin="storefront"] body :not(code,pre,kbd,samp,code *,pre *){font-family:var(--skin-font)!important}
:host([data-inline][data-skin-family="storefront"]) #inline-nav :is(.ah-link,#subsystem-toggle,.platform-version,.platform-user){background:var(--skin-selected);color:var(--skin-ink);border-color:transparent}
html[data-fairystack-skin="storefront"] #composer .composer-actions #send{background:var(--skin-button);color:var(--skin-button-ink);border-color:var(--skin-button)}
html[data-fairystack-skin="storefront"] #composer .composer-actions :is(#clear-composer,#tasks-toggle,button:not(#send):not(#stop-response):not(:disabled)){background:var(--skin-selected);color:var(--skin-ink);border-color:transparent}
/* Keep four sprites in this theme, including every copy drawn by the trail owner. */
html[data-skin-family="storefront"] :is(.night-bat-4,.night-bat-5,.night-bat-6){display:none}
html[data-fairystack-skin="storefront"][data-bat-color="theme"] .night-bat{filter:drop-shadow(0 1px 1.5px #0000004d)}
html[data-fairystack-skin="storefront"][data-bat-color="theme"] .night-bat-0{color:#ffffff}html[data-fairystack-skin="storefront"][data-bat-color="theme"] .night-bat-1{color:#f0fff4}html[data-fairystack-skin="storefront"][data-bat-color="theme"] .night-bat-2{color:#d7f3e0}html[data-fairystack-skin="storefront"][data-bat-color="theme"] .night-bat-3{color:#bde5cc}
/* Your own prompts stay solid blue with white text in every skin, instance palette and wallpaper; this outranks each skin's .message.user background. */
html:is([data-fairystack-skin],[data-instance]) body.conversation-visible .message.user.own-message{--ink:#ffffff;--muted:#dcebff;--accent:#ffffff;--line:#80bcff;--surface:var(--own-raised);--page:var(--own-raised);--tab-selected:var(--own-raised);border-color:var(--own-bubble);background-color:var(--own-bubble);background-image:none;color:#ffffff;backdrop-filter:none}