/* Animated environments and clear glass: no opaque pastel card fills. */
body { isolation: isolate; }
.ambient-background, .threads-effect { pointer-events: none; position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.ambient-background { background: var(--bg); }
.ambient-background::before { content: ""; position: absolute; inset: -15%; background: radial-gradient(ellipse at 20% 25%, #7591b326, transparent 65%), radial-gradient(ellipse at 80% 75%, #8999b520, transparent 65%); animation: fallback-flow 18s ease-in-out infinite alternate; }
.ambient-background[data-ready="true"]::before { opacity: 0; animation: none; }
#ambient-canvas { display: block; width: 100%; height: 100%; opacity: .725; transition: opacity .6s, filter .35s, transform .35s; }
.threads-effect { opacity: 0; transition: opacity .8s; }
.threads-effect::before { content: ""; position: absolute; inset: 0; background: #52677f; opacity: .4; mask: url('assets/threads-fallback.svg') center/cover no-repeat; -webkit-mask: url('assets/threads-fallback.svg') center/cover no-repeat; }
.threads-effect[data-ready="true"]::before { display: none; }
.threads-effect > canvas { display: block; width: 100%; height: 100%; opacity: .65; transition: opacity 1s; }
[data-background-mode="threads"] .threads-effect { opacity: 1; }
[data-background-mode="threads"] #ambient-canvas { opacity: 0; }
[data-theme="dark"] #ambient-canvas { opacity: .92; }
[data-theme="dark"][data-background-mode="threads"] #ambient-canvas { opacity: 0; }
[data-theme="dark"] .threads-effect::before { background: #9aa8b8; }
[data-theme="dark"] .threads-effect > canvas { opacity: .85; }
body:has(.has-conversation) .threads-effect > canvas { opacity: .27; }
[data-theme="dark"] body:has(.has-conversation) .threads-effect > canvas { opacity: .3; }
[data-reading="true"] #ambient-canvas { filter: blur(10px); transform: scale(1.035); opacity: .4; }
[data-theme="dark"][data-reading="true"] #ambient-canvas { opacity: .5; }
[data-reading="true"] .ambient-background::before { filter: blur(10px); }
.chat-welcome::before, .assistant-stage::before { content: none; }
.sheet-window { background: color-mix(in srgb, var(--bg) 12%, transparent); }
.avatar { --avatar-h: 205; }
.sidebar { backdrop-filter: blur(20px) saturate(1.05); -webkit-backdrop-filter: blur(20px) saturate(1.05); box-shadow: inset -1px 0 var(--glass-highlight); }
.card, .panel, .subject-card, .today-note-list, .entry-row, .lesson { backdrop-filter: blur(14px) saturate(1.05); -webkit-backdrop-filter: blur(14px) saturate(1.05); }
.homework-card, .ai-launcher, .lesson, .lesson.is-long, [data-theme="dark"] .lesson { background: var(--surface); border-color: var(--glass-rim); box-shadow: inset 0 1px 0 var(--glass-highlight), inset 1px 0 0 var(--glass-highlight), 0 9px 26px -18px #385c7830; }
.ai-launcher::before { content: none; }
.today-note:first-child, .today-note:last-child { background: none; }
.chat-starters > button, [data-theme="dark"] .chat-starters > button { background: var(--surface); border-color: var(--glass-rim); box-shadow: inset 0 1px 0 var(--glass-highlight), inset 1px 0 0 var(--glass-highlight), 0 9px 24px -20px #385c784d; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.segmented { background: var(--surface); border-color: var(--glass-rim); }
.chat-composer { background: color-mix(in srgb, var(--surface-solid) 22%, transparent); border-color: var(--glass-rim); }
.chat-welcome h1 { background-image: linear-gradient(105deg, #2d567d 10%, #3d6591 50%, #516b96 90%); }
[data-theme="dark"] .chat-welcome h1 { background: none; color: var(--heading); -webkit-text-fill-color: currentColor; }
[data-theme="dark"] .chat-welcome .lede { color: #c9cdd6; text-shadow: 0 1px 10px #101116, 0 0 4px #101116; }
.user-message-bubble { background: var(--surface-2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.nav-orb { display: block; width: 45px; height: 45px; position: relative; flex: none; pointer-events: none; background: url('assets/assistant.svg') center/36px no-repeat; transition: filter .8s; }
.nav-orb[data-ready="true"] { background: none; }
.nav-orb canvas { display: block; width: 100%; height: 100%; }
.nav-orb[data-state="generating"] { filter: drop-shadow(0 0 3px #7898be40); }
/* Smoked glass and restrained white highlights, following the Threads reference. */
[data-theme="dark"] .conversation-toolbar { border-color: #ffffff21; background: #10111630; }
[data-theme="dark"] .chat-composer { background: #ffffff0d; border-color: #ffffff66; box-shadow: inset 0 1px 0 #ffffff40, 0 18px 45px -24px #000000a0; backdrop-filter: blur(22px) saturate(1.02); -webkit-backdrop-filter: blur(22px) saturate(1.02); }
[data-theme="dark"] .chat-composer::before { background: linear-gradient(115deg, #ffffffb8, #c8cfdb45 32%, #ffffff24 65%, #ffffff8c); }
[data-theme="dark"] .chat-composer:focus-within { box-shadow: inset 0 1px 0 #ffffff66, 0 0 0 3px #ffffff0a, 0 18px 45px -24px #000000a0; border-color: #d6dfedbf; }
[data-theme="dark"] .composer-context { border: 1px solid #ffffff21; background: #ffffff09; border-radius: 999px; padding: 3px 8px; color: #c8cdd7; }
[data-theme="dark"] .composer-context > .ic { color: #bac5d5; }
[data-theme="dark"] .chat-send { border-color: #ffffff30; background: #ffffff0d; color: #d0d7e2; }
[data-theme="dark"] .has-draft .chat-send { background: #ffffff18; border-color: #ffffff52; color: #f0f1f5; }
[data-theme="dark"] .chat-starters > button { background: #ffffff06; box-shadow: inset 0 1px #ffffff1f, 0 10px 30px -23px #000000a0; }
[data-theme="dark"] .tabbar { border-color: #ffffff40; box-shadow: inset 0 1px #ffffff38, 0 14px 32px -18px #000000c0; }
@media (max-width: 760px) {
  .topbar { background: color-mix(in srgb, var(--surface-solid) 32%, transparent); border-color: var(--glass-rim); box-shadow: inset 0 -1px var(--glass-highlight); }
  .tabbar { border-color: var(--glass-rim); }
  .tab-item-ai.is-active { background: transparent; }
}
@keyframes fallback-flow { from { transform: translate(-2%, -1%) rotate(-4deg); } to { transform: translate(2%, 1%) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .ambient-background::before { animation: none; } .threads-effect, .threads-effect > canvas { transition: none; } }