/* A quiet optical edge gives controls depth; content keeps a stable reading surface. */
:root{--optical-edge:rgba(214,241,255,.23);--optical-floor:rgba(0,0,11,.38);--optical-glow:rgba(0,194,212,.075)}
:root[data-theme=light]{--optical-edge:rgba(255,255,255,.95);--optical-floor:rgba(0,31,92,.09);--optical-glow:rgba(0,122,146,.045)}
.topbar{border-bottom:1px solid var(--glass-edge);background:linear-gradient(110deg,color-mix(in oklch,var(--glass-shine) 22%,transparent),transparent 58%),color-mix(in oklch,var(--rail) 66%,transparent);backdrop-filter:blur(23px) saturate(112%);-webkit-backdrop-filter:blur(23px) saturate(112%);box-shadow:inset 0 1px 0 var(--optical-edge),0 8px 25px -21px var(--optical-floor)}
.topbar::after{content:'';position:absolute;pointer-events:none;left:20%;right:13%;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,color-mix(in oklch,var(--teal) 24%,transparent),var(--optical-edge),transparent);opacity:.32;animation:optical-breath 7s ease-in-out infinite}
.genie-panel{border-color:var(--glass-edge);background:linear-gradient(135deg,color-mix(in oklch,var(--glass-shine) 42%,transparent),transparent 36%),color-mix(in oklch,var(--panel) 89%,transparent);box-shadow:inset 0 1px 0 var(--optical-edge),inset 0 -1px 0 var(--optical-floor),0 24px 70px -22px var(--glass-shadow),0 8px 20px -12px var(--optical-floor);backdrop-filter:blur(34px) saturate(102%);-webkit-backdrop-filter:blur(34px) saturate(102%);transition:background .6s,border-color .6s,box-shadow .6s,backdrop-filter .6s}
.genie-panel:is(:hover,:focus-within){border-color:color-mix(in oklch,var(--teal) 19%,var(--glass-edge));background:linear-gradient(135deg,color-mix(in oklch,var(--glass-shine) 55%,transparent),transparent 42%),color-mix(in oklch,var(--panel) 84%,transparent);box-shadow:inset 0 1px 0 var(--optical-edge),inset 0 -1px 0 var(--optical-floor),0 30px 80px -24px var(--glass-shadow),0 0 22px var(--optical-glow);backdrop-filter:blur(24px) saturate(114%);-webkit-backdrop-filter:blur(24px) saturate(114%)}
[data-theme=light] .genie-panel{background:linear-gradient(135deg,rgba(255,255,255,.62),transparent 48%),rgba(239,246,252,.89)}
[data-theme=light] .genie-panel:is(:hover,:focus-within){background:linear-gradient(135deg,rgba(255,255,255,.72),transparent 46%),rgba(242,248,253,.82)}
.g-titlebar{background:linear-gradient(110deg,color-mix(in oklch,var(--glass-shine) 26%,transparent),transparent 70%);box-shadow:inset 0 1px 0 color-mix(in oklch,var(--optical-edge) 70%,transparent)}
.g-content{background:color-mix(in oklch,var(--panel) 16%,transparent)}
.g-composer{box-shadow:inset 0 1px 0 var(--optical-edge),inset 0 -1px 0 var(--optical-floor),0 8px 22px -18px var(--glass-shadow)}
.g-composer:focus-within{box-shadow:inset 0 1px 0 var(--optical-edge),0 0 15px var(--optical-glow);border-color:color-mix(in oklch,var(--teal) 44%,var(--glass-edge))}
.crm-focus,.workspace-companion-card{box-shadow:inset 0 1px 0 var(--optical-edge),inset 0 -1px 0 var(--optical-floor),0 22px 60px -23px var(--glass-shadow)}
@keyframes optical-breath{0%,100%{opacity:.25}40%{opacity:.56}}
.companion-calm .topbar::after,.genie-quiet .topbar::after{animation:none;opacity:.32}
@media(prefers-reduced-motion:reduce){.topbar::after{animation:none}.genie-panel{transition:none}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.topbar,.genie-panel,.genie-panel:is(:hover,:focus-within),[data-theme=light] .genie-panel,[data-theme=light] .genie-panel:is(:hover,:focus-within),.g-composer,.crm-focus,.workspace-companion-card{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}.topbar::after{display:none}}
@supports not (backdrop-filter:blur(1px)){.topbar,.genie-panel,.genie-panel:is(:hover,:focus-within),[data-theme=light] .genie-panel,[data-theme=light] .genie-panel:is(:hover,:focus-within){background:var(--panel)}}