/* ══════════════════════════════════════════════════════════════════════════ NOVA GLASS v7 — stability + clean moving background + bolder thinking text. Loaded LAST. Fixes the glitch (content stops drifting, background moves), replaces the rainbow waves with a clean flowing layer + liquid-glass orbs. ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. STOP the glitch: kill heavy / clipped background layers & content drift ── */ html[data-theme="glass"] #mainContent::after { display: none !important; } /* old heavy waves (transform-scale jank) */ html[data-theme="glass"] #sidebar::before { display: none !important; } /* orbs were clipped by the sidebar's backdrop-filter */ html[data-theme="glass"] body::before { content: none; } /* will be redefined below as waves */ /* content must NOT drift around — only the background moves */ html[data-theme="glass"] .ai-row .message-content, html[data-theme="glass"] .ai-content, html[data-theme="glass"] .user-row .message-content, html[data-theme="glass"] .suggestion-card { animation: none !important; } /* ── 2. Conversation area: locked, stable, full-screen ── */ html[data-theme="glass"] #mainContent, html[data-theme="glass"] .main-content { position: relative !important; z-index: 1; transform: none !important; background: transparent !important; min-height: 100vh; } html[data-theme="glass"] #messagesContainer, html[data-theme="glass"] .messages-container, html[data-theme="glass"] .chat-messages { transform: none !important; background: transparent !important; } /* ── 3. CLEAN flowing rainbow background + drifting liquid-glass orbs ── Put on the root/body (no backdrop-filter there → never clipped). The light base sits on ; is transparent so the moving layers show. ── */ html[data-theme="glass"] { background: linear-gradient(135deg, #eaf6ff 0%, #f3edff 45%, #e9fffb 100%) fixed !important; } html[data-theme="glass"] body { background: transparent !important; } /* clean rainbow waves — smooth, cheap (background-position only) */ html[data-theme="glass"] body::before { content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none; display: block; background: linear-gradient(120deg, #7fe9f0, #a5b4fc, #d6b4fe, #f6a5d0, #8debdc, #7fe9f0); background-size: 280% 280%; opacity: 0.40; animation: gv7Waves 30s ease-in-out infinite; } @keyframes gv7Waves { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* liquid-glass orbs that drift and "breathe" like water (transform = smooth) */ html[data-theme="glass"] body::after { content: ""; position: fixed; inset: -12%; z-index: -2; pointer-events: none; display: block; background: radial-gradient(22vmax 22vmax at 20% 30%, rgba(255,255,255,0.55), rgba(6,182,212,0.20) 38%, transparent 70%), radial-gradient(17vmax 17vmax at 80% 22%, rgba(255,255,255,0.5), rgba(168,85,247,0.18) 40%, transparent 70%), radial-gradient(26vmax 26vmax at 66% 78%, rgba(255,255,255,0.5), rgba(236,72,153,0.17) 42%, transparent 70%), radial-gradient(20vmax 20vmax at 28% 82%, rgba(255,255,255,0.48), rgba(20,184,166,0.18) 40%, transparent 70%), radial-gradient(15vmax 15vmax at 50% 50%, rgba(255,255,255,0.42), rgba(99,102,241,0.16) 44%, transparent 70%); will-change: transform; animation: gv7Orbs 36s ease-in-out infinite alternate; } @keyframes gv7Orbs { 0% { transform: translate3d(0,0,0) scale(1); } 33% { transform: translate3d(2.5%,-2%,0) scale(1.05); } 66% { transform: translate3d(-2%,2.5%,0) scale(1.03); } 100% { transform: translate3d(1.5%,1.5%,0) scale(1.06); } } /* keep app surfaces above the moving background */ html[data-theme="glass"] #sidebar, html[data-theme="glass"] #mainContent, html[data-theme="glass"] .topbar { position: relative; z-index: 1; } /* ── 4. BOLDER, more noticeable "Nova is thinking / done thinking" (both themes) ── */ .thinking-step-label { font-weight: 800 !important; font-size: 14.5px !important; letter-spacing: 0.2px !important; } .nova-done2 { font-size: 12.5px !important; font-weight: 800 !important; letter-spacing: 0.3px; padding: 4px 12px 4px 9px; border-radius: 999px; animation: novaDone2Pop 0.55s cubic-bezier(0.34,1.7,0.5,1) both !important; } .nova-done2 .lbl { font-weight: 800 !important; } @keyframes novaDone2Pop { 0% { opacity: 0; transform: translateY(4px) scale(0.6); } 55% { opacity: 1; transform: translateY(0) scale(1.12); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* Moon: dark glowing pill */ html[data-theme="moon"] .nova-done2 { color: #67e8f9 !important; background: rgba(12,18,40,0.7); border: 1px solid rgba(6,182,212,0.35); box-shadow: 0 0 14px rgba(6,182,212,0.3), inset 0 1px 0 rgba(255,255,255,0.06); } /* Glass: bright liquid pill */ html[data-theme="glass"] .nova-done2 { color: #0e7490 !important; background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(207,250,254,0.7)); border: 1px solid rgba(6,182,212,0.4); box-shadow: 0 6px 18px rgba(6,182,212,0.22), inset 0 1px 0 rgba(255,255,255,0.9); } html[data-theme="glass"] .nova-done2 .lbl { color: #0e7490 !important; } /* ── 5. Reduced motion ── */ @media (prefers-reduced-motion: reduce) { html[data-theme="glass"] body::before, html[data-theme="glass"] body::after { animation: none !important; } .nova-done2 { animation: none !important; } }