/* ══════════════════════════════════════════════════════════════════════════ NOVA GLASS v6 — true liquid glass + rainbow waves. Loaded after v5. 10 agents + 5 hand-written pieces (both thinking bars, welcome orbs, clarification, surfaces). Cleaned & curated. Scoped html[data-theme]. ══════════════════════════════════════════════════════════════════════════ */ /* ── RAINBOW WAVES (replaces earlier #mainContent::after) ── */ html[data-theme="glass"] #mainContent::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: 0.42; overflow: hidden; background: radial-gradient(140% 90% at 20% 110%, rgba(6,182,212,0.55), transparent 60%), radial-gradient(150% 95% at 80% 105%, rgba(168,85,247,0.50), transparent 62%), radial-gradient(130% 80% at 50% 120%, rgba(236,72,153,0.45), transparent 58%), linear-gradient(115deg, rgba(99,102,241,0.40), rgba(20,184,166,0.38) 40%, rgba(6,182,212,0.40) 70%, rgba(168,85,247,0.38)), linear-gradient(200deg, rgba(20,184,166,0.30), rgba(99,102,241,0.30) 55%, rgba(236,72,153,0.28)); background-size: 220% 220%, 240% 240%, 200% 200%, 300% 300%, 280% 280%; background-position: 0% 100%, 100% 100%, 50% 100%, 0% 50%, 100% 50%; filter: blur(34px) saturate(1.25); will-change: background-position, transform; transform: translateZ(0) scale(1.06); animation: gv6WaveFlow 26s ease-in-out infinite, gv6WaveDrift 19s ease-in-out infinite; } @keyframes gv6WaveFlow { 0% { background-position: 0% 100%, 100% 100%, 50% 100%, 0% 50%, 100% 50%; } 25% { background-position: 40% 80%, 60% 90%, 30% 85%, 50% 40%, 60% 60%; } 50% { background-position: 100% 90%, 0% 100%, 70% 95%, 100% 55%, 0% 45%; } 75% { background-position: 60% 85%, 30% 80%, 40% 100%, 70% 60%, 40% 50%; } 100% { background-position: 0% 100%, 100% 100%, 50% 100%, 0% 50%, 100% 50%; } } @keyframes gv6WaveDrift { 0%,100% { transform: translateZ(0) scale(1.06) translateY(0); } 50% { transform: translateZ(0) scale(1.10) translateY(-2%); } } /* ── AMBIENT LIQUID-GLASS ORBS ── */ html[data-theme="glass"] #sidebar::before { content: ""; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none; background: radial-gradient(34vmax 34vmax at 18% 24%, rgba(6,182,212,.16), transparent 62%), radial-gradient(30vmax 30vmax at 82% 30%, rgba(99,102,241,.15), transparent 62%), radial-gradient(38vmax 38vmax at 30% 82%, rgba(168,85,247,.14), transparent 62%), radial-gradient(26vmax 26vmax at 74% 78%, rgba(236,72,153,.13), transparent 62%), radial-gradient(30vmax 30vmax at 52% 52%, rgba(20,184,166,.12), transparent 64%); filter: blur(46px) saturate(120%); opacity: .85; will-change: transform; animation: gv6OrbDrift 46s ease-in-out infinite alternate; } @keyframes gv6OrbDrift { 0% { transform: translate3d(-3%,-2%,0) scale(1); } 50% { transform: translate3d(2%,3%,0) scale(1.08); } 100% { transform: translate3d(3%,-1%,0) scale(1.04); } } /* ── WELCOME SCREEN — floating liquid-glass orbs (hand-written) ── */ html[data-theme="glass"] #welcomeScreen { position: relative; overflow: hidden; } html[data-theme="glass"] #welcomeScreen::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 16% 30%, rgba(255,255,255,0.5) 0 38px, rgba(6,182,212,0.18) 40px 70px, transparent 72px), radial-gradient(circle at 80% 22%, rgba(255,255,255,0.42) 0 26px, rgba(168,85,247,0.16) 28px 54px, transparent 56px), radial-gradient(circle at 68% 74%, rgba(255,255,255,0.46) 0 46px, rgba(236,72,153,0.15) 48px 84px, transparent 86px); filter: blur(2px); animation: gv6WelFloatA 16s ease-in-out infinite; will-change: transform; } html[data-theme="glass"] #welcomeScreen::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 35% 80%, rgba(255,255,255,0.44) 0 30px, rgba(20,184,166,0.16) 32px 60px, transparent 62px), radial-gradient(circle at 90% 60%, rgba(255,255,255,0.4) 0 22px, rgba(99,102,241,0.16) 24px 48px, transparent 50px), radial-gradient(circle at 8% 70%, rgba(255,255,255,0.4) 0 18px, rgba(6,182,212,0.16) 20px 40px, transparent 42px); filter: blur(2px); animation: gv6WelFloatB 21s ease-in-out infinite; will-change: transform; } html[data-theme="glass"] .welcome-logo-wrap, html[data-theme="glass"] .welcome-title, html[data-theme="glass"] .welcome-screen > * { position: relative; z-index: 1; } @keyframes gv6WelFloatA { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(2%,-3%) scale(1.05); } 66% { transform: translate(-2%,2%) scale(0.97); } } @keyframes gv6WelFloatB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-3%,-2%) scale(1.06); } } /* ── MESSAGE BUBBLES — liquid glass refraction (inherit-hack dropped) ── */ html[data-theme="glass"] .ai-row .message-content, html[data-theme="glass"] .ai-content, html[data-theme="glass"] .user-row .message-content { position: relative; border-radius: 20px; padding: 12px 16px; isolation: isolate; -webkit-backdrop-filter: blur(16px) saturate(165%); backdrop-filter: blur(16px) saturate(165%); box-shadow: 0 10px 30px -8px rgba(22,33,62,.35), inset 0 1px 0 rgba(255,255,255,.6); overflow: hidden; } html[data-theme="glass"] .ai-row .message-content, html[data-theme="glass"] .ai-content { background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.34)) !important; border: 1px solid rgba(255,255,255,.5) !important; color: var(--g-text) !important; } html[data-theme="glass"] .user-row .message-content { background: linear-gradient(135deg, rgba(6,182,212,.88), rgba(99,102,241,.85) 35%, rgba(168,85,247,.85) 65%, rgba(236,72,153,.88)) !important; border: 1px solid rgba(255,255,255,.35) !important; color: #fff !important; text-shadow: 0 1px 2px rgba(22,33,62,.4); } html[data-theme="glass"] .ai-row .message-content::before, html[data-theme="glass"] .ai-content::before, html[data-theme="glass"] .user-row .message-content::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: radial-gradient(120% 60% at 30% -10%, rgba(255,255,255,.7), rgba(255,255,255,0) 55%); mix-blend-mode: screen; } html[data-theme="glass"] .ai-row .message-content::after, html[data-theme="glass"] .ai-content::after, html[data-theme="glass"] .user-row .message-content::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; padding: 1px; background: conic-gradient(from 0deg, #06b6d4, #6366f1, #a855f7, #ec4899, #14b8a6, #06b6d4); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .5; animation: gv6BubEdge 9s linear infinite; } html[data-theme="glass"] .ai-row .message-content > *, html[data-theme="glass"] .ai-content > *, html[data-theme="glass"] .user-row .message-content > * { position: relative; z-index: 1; } @keyframes gv6BubEdge { to { filter: hue-rotate(360deg); } } /* ── SUGGESTION CARDS — floating glass tiles ── */ @keyframes gv6SugBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes gv6SugSweep { 0% { background-position: -150% 0; } 100% { background-position: 250% 0; } } html[data-theme="glass"] .suggestion-card { position: relative; isolation: isolate; color: var(--g-text); border-radius: 20px; padding: 16px 18px; background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.18)); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255,255,255,.5); box-shadow: 0 14px 34px -10px rgba(22,33,62,.35), 0 2px 6px rgba(99,102,241,.15), inset 0 1px 1px rgba(255,255,255,.85); will-change: transform; transform: translateZ(0); animation: gv6SugBob 6s ease-in-out infinite; transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, background .4s ease; } html[data-theme="glass"] .suggestion-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--g-accent), var(--g-accent3), var(--g-accent4), var(--g-accent5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; pointer-events: none; z-index: -1; } html[data-theme="glass"] .suggestion-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.5) 45%, rgba(168,85,247,.25) 50%, rgba(6,182,212,.25) 55%, transparent 70%); background-size: 250% 100%; background-position: -150% 0; opacity: 0; pointer-events: none; mix-blend-mode: screen; transition: opacity .3s ease; } html[data-theme="glass"] .suggestion-card:hover { transform: translateY(-8px) scale(1.025); background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.28)); box-shadow: 0 24px 50px -12px rgba(22,33,62,.45), 0 4px 12px rgba(168,85,247,.25), inset 0 1px 1px rgba(255,255,255,.95); } html[data-theme="glass"] .suggestion-card:hover::after { opacity: 1; animation: gv6SugSweep 1.1s ease forwards; } /* ── BUTTONS / CHIPS — liquid-glass droplets ── */ html[data-theme="glass"] .icon-btn, html[data-theme="glass"] .model-chip, html[data-theme="glass"] .nova-fb-btn, html[data-theme="glass"] .send-btn { position: relative; color: var(--g-text); font-weight: 600; border: 1px solid rgba(255,255,255,.55); border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.12) 42%, rgba(255,255,255,.28)); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); box-shadow: inset 0 1px 1px rgba(255,255,255,.85), inset 0 -6px 12px rgba(99,102,241,.10), 0 6px 16px rgba(22,33,62,.18); overflow: hidden; transition: transform .25s cubic-bezier(.2,.9,.25,1.4), box-shadow .25s ease, background .25s ease; will-change: transform; } html[data-theme="glass"] .icon-btn::before, html[data-theme="glass"] .model-chip::before, html[data-theme="glass"] .nova-fb-btn::before, html[data-theme="glass"] .send-btn::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 48%; border-radius: 18px 18px 50% 50%/18px 18px 22px 22px; background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0)); pointer-events: none; opacity: .9; } html[data-theme="glass"] .icon-btn:hover, html[data-theme="glass"] .model-chip:hover, html[data-theme="glass"] .nova-fb-btn:hover, html[data-theme="glass"] .send-btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 2px rgba(255,255,255,1), inset 0 -8px 16px rgba(168,85,247,.16), 0 10px 22px rgba(22,33,62,.26); } html[data-theme="glass"] .icon-btn:active, html[data-theme="glass"] .model-chip:active, html[data-theme="glass"] .nova-fb-btn:active, html[data-theme="glass"] .send-btn:active { transform: scale(.93) translateY(0); animation: gv6BtnJelly .4s ease; } html[data-theme="glass"] .model-chip.active { color: #fff; border-color: rgba(255,255,255,.7); text-shadow: 0 1px 2px rgba(22,33,62,.4); background: linear-gradient(120deg, var(--g-accent), var(--g-accent2) 30%, var(--g-accent3) 55%, var(--g-accent4) 78%, var(--g-accent5)); background-size: 220% 220%; animation: gv6BtnRainbow 7s ease infinite; box-shadow: inset 0 1px 2px rgba(255,255,255,.7), 0 8px 20px rgba(168,85,247,.4); } html[data-theme="glass"] .icon-btn:focus-visible, html[data-theme="glass"] .model-chip:focus-visible, html[data-theme="glass"] .nova-fb-btn:focus-visible, html[data-theme="glass"] .send-btn:focus-visible { outline: none; } @keyframes gv6BtnJelly { 0% { transform: scale(.93); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } } @keyframes gv6BtnRainbow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ── FEEDBACK ("Helpful?") bar — tidy liquid-glass pill ── */ html[data-theme="glass"] .nova-feedback-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px 7px 14px; margin: 8px 0; border-radius: 9999px; background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.28)); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255,255,255,.6); box-shadow: 0 6px 20px rgba(99,102,241,.16), inset 0 1px 0 rgba(255,255,255,.7); color: var(--g-text); } html[data-theme="glass"] .nova-fb-label { flex: 0 0 auto; margin-right: auto; font-weight: 600; font-size: 13px; background: linear-gradient(90deg, var(--g-accent), var(--g-accent2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html[data-theme="glass"] .nova-fb-btn { width: 32px; height: 32px; border-radius: 9999px; border: 1px solid rgba(255,255,255,.65); color: var(--g-text); background: linear-gradient(160deg, rgba(255,255,255,.6), rgba(255,255,255,.3)); box-shadow: 0 3px 9px rgba(99,102,241,.14), inset 0 1px 0 rgba(255,255,255,.75); } html[data-theme="glass"] .nova-fb-btn.up:hover { background: linear-gradient(160deg, rgba(20,184,166,.5), rgba(6,182,212,.4)); } html[data-theme="glass"] .nova-fb-btn.down:hover { background: linear-gradient(160deg, rgba(236,72,153,.45), rgba(168,85,247,.38)); } html[data-theme="glass"] .nova-fb-web { flex: 0 0 auto; padding: 7px 14px; border-radius: 9999px; color: #fff; border: 1px solid rgba(255,255,255,.4); background: linear-gradient(135deg, var(--g-accent), var(--g-accent2) 55%, var(--g-accent3)); box-shadow: 0 4px 14px rgba(99,102,241,.28), inset 0 1px 0 rgba(255,255,255,.4); } html[data-theme="glass"] .nova-fb-web:hover { transform: translateY(-1px); filter: brightness(1.08); } /* ── SETTINGS / THEME CARDS — liquid glass ── */ @keyframes gv6SetRing { to { transform: rotate(360deg); } } @keyframes gv6SetFlow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes gv6SetTwinkle { 0%,100% { opacity: .35; } 50% { opacity: .9; } } html[data-theme="glass"] .settings-drawer, html[data-theme="glass"] .nova-theme-card { position: relative; color: var(--g-text); background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.22)); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255,255,255,.6); border-radius: 20px; box-shadow: 0 8px 32px rgba(31,38,135,.18), inset 0 1px 1px rgba(255,255,255,.9), inset 0 -2px 6px rgba(99,102,241,.12); will-change: transform; } html[data-theme="glass"] .settings-title, html[data-theme="glass"] .settings-section-title { color: var(--g-text); font-weight: 700; background: linear-gradient(90deg, var(--g-accent), var(--g-accent3), var(--g-accent4)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html[data-theme="glass"] .lang-btn { color: var(--g-text); background: rgba(255,255,255,.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.5); border-radius: 12px; box-shadow: inset 0 1px 1px rgba(255,255,255,.8); } html[data-theme="glass"] .lang-btn.active, html[data-theme="glass"] .nova-theme-card.active { position: relative; } html[data-theme="glass"] .lang-btn.active::after, html[data-theme="glass"] .nova-theme-card.active::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: conic-gradient(from 0deg, var(--g-accent), var(--g-accent2), var(--g-accent3), var(--g-accent4), var(--g-accent5), var(--g-accent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: gv6SetRing 6s linear infinite; pointer-events: none; } html[data-theme="glass"] .nova-theme-swatch.glass { background: linear-gradient(120deg, var(--g-accent), var(--g-accent2), var(--g-accent3), var(--g-accent4), var(--g-accent5)) !important; background-size: 300% 300% !important; animation: gv6SetFlow 8s ease infinite; } html[data-theme="glass"] .settings-danger-btn { color: #fff; background: linear-gradient(135deg, var(--g-accent4), #ef4444); border: 1px solid rgba(255,255,255,.4); border-radius: 12px; box-shadow: 0 4px 14px rgba(236,72,153,.35); } /* ── WEB-RESULT panel + BIG MODAL — liquid glass ── */ html[data-theme="glass"] .nova-web-result, html[data-theme="glass"] .nova-web-modal { position: relative; border-radius: 18px; overflow: hidden; color: var(--g-text); background: linear-gradient(160deg, rgba(255,255,255,.66), rgba(255,255,255,.4)) !important; -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255,255,255,.6) !important; box-shadow: 0 18px 50px rgba(99,102,241,.22), inset 0 1px 0 rgba(255,255,255,.7) !important; } html[data-theme="glass"] .nova-web-result::before, html[data-theme="glass"] .nova-web-modal::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 3; background: linear-gradient(90deg, var(--g-accent), var(--g-accent2), var(--g-accent3), var(--g-accent4), var(--g-accent5), var(--g-accent)); background-size: 200% 100%; animation: gv6WebFlow 6s linear infinite; } html[data-theme="glass"] .nova-web-result-head, html[data-theme="glass"] .nova-web-modal-head { background: linear-gradient(120deg, rgba(6,182,212,.20), rgba(99,102,241,.18), rgba(168,85,247,.20), rgba(236,72,153,.18)) !important; border-bottom: 1px solid rgba(255,255,255,.5) !important; } html[data-theme="glass"] .nova-web-result-title, html[data-theme="glass"] .nova-web-modal-title { color: var(--g-text) !important; font-weight: 700; } html[data-theme="glass"] .nwr-btn, html[data-theme="glass"] .nova-web-modal-close { color: var(--g-text) !important; background: linear-gradient(160deg, rgba(255,255,255,.7), rgba(255,255,255,.32)) !important; border: 1px solid rgba(255,255,255,.6) !important; box-shadow: 0 2px 8px rgba(99,102,241,.18), inset 0 1px 0 rgba(255,255,255,.85); } html[data-theme="glass"] .nova-web-result-body, html[data-theme="glass"] .nova-web-modal-body { color: var(--g-text) !important; background: rgba(255,255,255,.3) !important; } html[data-theme="glass"] .nova-web-modal-overlay { background: rgba(226,232,240,.5) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } @keyframes gv6WebFlow { to { background-position: 200% 0; } } /* ── SCROLLBAR / SELECTION / CARET (no focus rings) ── */ @keyframes gv6Scrl { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } html[data-theme="glass"] ::-webkit-scrollbar { width: 14px; height: 14px; } html[data-theme="glass"] ::-webkit-scrollbar-track { background: rgba(255,255,255,.18); border-radius: 10px; } html[data-theme="glass"] ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 10px; background-clip: padding-box; background-image: linear-gradient(135deg, #06b6d4, #6366f1, #a855f7, #ec4899, #14b8a6); background-size: 200% 200%; animation: gv6Scrl 9s linear infinite; } html[data-theme="glass"] ::selection { background: rgba(168,85,247,.45); color: #16213e; } html[data-theme="glass"] .chat-input { caret-color: #a855f7; } /* ── SIDEBAR ITEMS / TOPBAR / INPUT — liquid glass (no focus ring) ── */ html[data-theme="glass"] .chat-history > *, html[data-theme="glass"] .topbar-action-btn, html[data-theme="glass"] .attach-btn { position: relative; color: var(--g-text); border: 1px solid rgba(255,255,255,.55); border-radius: 16px; background: linear-gradient(160deg, rgba(255,255,255,.42), rgba(255,255,255,.12)); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -6px 14px rgba(99,102,241,.10), 0 6px 18px rgba(22,33,62,.12); transition: transform .25s ease, box-shadow .25s ease; will-change: transform; } html[data-theme="glass"] .chat-history > *::before, html[data-theme="glass"] .topbar-action-btn::before, html[data-theme="glass"] .attach-btn::before { content: ""; position: absolute; inset: 1px 1px auto 1px; height: 42%; border-radius: 15px 15px 40% 40%/15px 15px 18px 18px; background: linear-gradient(rgba(255,255,255,.55), transparent); pointer-events: none; } html[data-theme="glass"] .chat-history > *:hover, html[data-theme="glass"] .topbar-action-btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 24px rgba(22,33,62,.18); } /* input capsule: liquid-glass pill with animated rainbow refraction edge (NO focus ring) */ html[data-theme="glass"] .input-container { position: relative; border-radius: 999px; padding: 6px; border: 1.5px solid transparent; background: linear-gradient(160deg, rgba(255,255,255,.5), rgba(255,255,255,.16)) padding-box, linear-gradient(120deg, var(--g-accent), var(--g-accent2), var(--g-accent3), var(--g-accent4), var(--g-accent5)) border-box; -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: 0 10px 30px rgba(70,110,200,.18), inset 0 1px 0 rgba(255,255,255,.75); animation: gv6BarSheen 9s ease infinite; } html[data-theme="glass"] .input-container:focus, html[data-theme="glass"] .input-container:focus-within, html[data-theme="glass"] .input-container *:focus, html[data-theme="glass"] .input-container *:focus-visible { outline: none !important; } html[data-theme="glass"] .new-chat-btn, html[data-theme="glass"] .send-btn { color: #fff; border-color: rgba(255,255,255,.45); border-radius: 999px; background: linear-gradient(120deg, var(--g-accent), var(--g-accent2), var(--g-accent3), var(--g-accent4)); background-size: 200% 100%; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -8px 16px rgba(0,0,0,.12), 0 8px 20px rgba(99,102,241,.32); animation: gv6BarSheen 7s ease infinite; } html[data-theme="glass"] .new-chat-btn:hover, html[data-theme="glass"] .send-btn:hover { filter: brightness(1.07); } @keyframes gv6BarSheen { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ══ HAND-WRITTEN: GLASS THINKING BAR — liquid glass + rainbow waves ══ */ html[data-theme="glass"] .thinking-row.nova-enh { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px; overflow: hidden; isolation: isolate; color: var(--g-text); background: linear-gradient(160deg, rgba(255,255,255,.6), rgba(255,255,255,.3)); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 10px 30px rgba(99,102,241,.2), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -8px 16px rgba(99,102,241,.12); } html[data-theme="glass"] .thinking-row.nova-enh::before { content: ""; position: absolute; inset: -40% -10%; z-index: -1; background: linear-gradient(110deg, var(--g-accent), var(--g-accent2), var(--g-accent3), var(--g-accent4), var(--g-accent5), var(--g-accent)); background-size: 300% 100%; filter: blur(10px) saturate(160%); opacity: .5; animation: gv6GThkSlosh 6s linear infinite; } html[data-theme="glass"] .thinking-row.nova-enh::after { content: ""; position: absolute; inset: 1px 1px auto 1px; height: 45%; border-radius: 999px; background: linear-gradient(rgba(255,255,255,.6), transparent); pointer-events: none; } html[data-theme="glass"] .thinking-row.nova-enh .nova-enh-star { width: 22px; height: 22px; } html[data-theme="glass"] .thinking-row.nova-enh .nova-enh-star > svg { width: 22px; height: 22px; filter: drop-shadow(0 0 6px rgba(6,182,212,.6)); animation: gv6GThkDrop 3.2s ease-in-out infinite; } html[data-theme="glass"] .thinking-row.nova-enh .nova-enh-dots i { width: 6px; height: 6px; background: radial-gradient(circle at 35% 30%, #fff, var(--g-accent) 70%); box-shadow: 0 0 6px rgba(6,182,212,.6); animation: gv6GThkBub 1.8s ease-in infinite; } html[data-theme="glass"] .thinking-row.nova-enh .nova-enh-dots i:nth-child(2) { animation-delay: .3s; background: radial-gradient(circle at 35% 30%, #fff, var(--g-accent3) 70%); } html[data-theme="glass"] .thinking-row.nova-enh .nova-enh-dots i:nth-child(3) { animation-delay: .6s; background: radial-gradient(circle at 35% 30%, #fff, var(--g-accent4) 70%); } html[data-theme="glass"] .thinking-row.nova-enh .thinking-step-label { font-weight: 600; background: linear-gradient(90deg, var(--g-accent), var(--g-accent5), var(--g-accent2), var(--g-accent3), var(--g-accent4), var(--g-accent)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: gv6GThkSpec 6s linear infinite; } @keyframes gv6GThkSlosh { to { background-position: 300% 0; } } @keyframes gv6GThkDrop { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.1) rotate(8deg); } } @keyframes gv6GThkBub { 0% { transform: translateY(3px) scale(.5); opacity: 0; } 30% { opacity: 1; } 70% { transform: translateY(-5px) scale(1); opacity: .9; } 100% { transform: translateY(-11px) scale(1.4); opacity: 0; } } @keyframes gv6GThkSpec { to { background-position: 300% 0; } } /* ══ HAND-WRITTEN: MOON THINKING BAR — premium cosmic ══ */ html[data-theme="moon"] .thinking-row.nova-enh { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px; overflow: hidden; isolation: isolate; background: rgba(18,14,34,0.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid transparent; box-shadow: 0 8px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); } html[data-theme="moon"] .thinking-row.nova-enh::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, #a855f7, #06b6d4, #a855f7); background-size: 200% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: gv6MThkBorder 5s linear infinite; } html[data-theme="moon"] .thinking-row.nova-enh > * { position: relative; z-index: 1; } html[data-theme="moon"] .thinking-row.nova-enh .nova-enh-star > svg { filter: drop-shadow(0 0 6px #a855f7) drop-shadow(0 0 10px rgba(6,182,212,.5)); } html[data-theme="moon"] .thinking-row.nova-enh .nova-enh-dots i { background: radial-gradient(circle at 35% 30%, #fff, #a855f7 70%); box-shadow: 0 0 7px #a855f7; animation: gv6MThkTwinkle 1.6s ease-in-out infinite; } html[data-theme="moon"] .thinking-row.nova-enh .nova-enh-dots i:nth-child(2) { animation-delay: .25s; background: radial-gradient(circle at 35% 30%, #fff, #06b6d4 70%); box-shadow: 0 0 7px #06b6d4; } html[data-theme="moon"] .thinking-row.nova-enh .nova-enh-dots i:nth-child(3) { animation-delay: .5s; } html[data-theme="moon"] .thinking-row.nova-enh .thinking-step-label { font-weight: 600; background: linear-gradient(90deg, rgba(255,255,255,.7), #a855f7, #06b6d4, rgba(255,255,255,.7)); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: gv6MThkShim 3s ease-in-out infinite; } @keyframes gv6MThkBorder { to { background-position: 200% 0; } } @keyframes gv6MThkTwinkle { 0%,100% { opacity: .4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } } @keyframes gv6MThkShim { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ══ HAND-WRITTEN: CLARIFICATION OVERLAY — liquid glass ══ */ html[data-theme="glass"] #nova-clarify-overlay { background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.46)) !important; -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255,255,255,.65) !important; box-shadow: 0 24px 70px rgba(99,102,241,.25), inset 0 1px 0 rgba(255,255,255,.8) !important; } html[data-theme="glass"] #nova-clarify-overlay::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; padding: 2px; background: linear-gradient(120deg, var(--g-accent), var(--g-accent2), var(--g-accent3), var(--g-accent4), var(--g-accent5), var(--g-accent)); background-size: 300% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .7; animation: gv6ClarEdge 7s linear infinite; } html[data-theme="glass"] .nova-cl-title { color: var(--g-text) !important; } html[data-theme="glass"] .nova-cl-row { background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.3)) !important; border: 1px solid rgba(255,255,255,.6) !important; } html[data-theme="glass"] .nova-cl-num { background: linear-gradient(135deg, var(--g-accent2), var(--g-accent3)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 8px rgba(99,102,241,.3); } @keyframes gv6ClarEdge { to { background-position: 300% 0; } } /* ── REDUCED MOTION ── */ @media (prefers-reduced-motion: reduce) { html[data-theme="glass"] #mainContent::after, html[data-theme="glass"] #sidebar::before, html[data-theme="glass"] #welcomeScreen::before, html[data-theme="glass"] #welcomeScreen::after { animation: none !important; } html[data-theme="glass"] [class], html[data-theme="moon"] .thinking-row.nova-enh [class] { animation-duration: .001ms !important; animation-iteration-count: 1 !important; } }