/* ============================================================================ QUBBLE CHAT — "SUPERNOVA" skin · injected LAST (wins the cascade) ---------------------------------------------------------------------------- The ultimate evolution of Aurora Nova. The chat lives INSIDE a living galaxy: a deep volumetric starfield + drifting nebula + a reactive entanglement web (painted by qbc-skin-supernova.js into ). This stylesheet floats the whole product over that void as radiant entangled glass — breathing wordmark, glass-core bubbles, a warp send-moment. Style-only. Every app id/class is preserved & never renamed. Additive layer: remove these two tags to revert cleanly to Aurora underneath. ============================================================================ */ /* ---- 0. tokens + the living field ------------------------------------- */ :root { --sn-cyan: #00d4ff; --sn-violet: #7b2ff7; --sn-lilac: #a855f7; --sn-pink: #f472b6; --sn-mint: #34d399; --sn-ink: #eaf2ff; --sn-dim: #94a0c8; --sn-glass: rgba(10, 12, 26, 0.55); --sn-edge: rgba(124, 92, 255, 0.30); --sn-grad: linear-gradient(100deg, #00d4ff, #a855f7 42%, #f472b6 74%, #00d4ff); } /* our canvas owns the void; hide Aurora's + the old static backdrops */ #qbc-supernova-field { position: fixed; inset: 0; z-index: 0; pointer-events: none; } #qbc-aurora-field { display: none !important; } body .quantum-bg, body .quantum-nebula { opacity: 0 !important; } /* ---- 0b. ALWAYS-ON painted galaxy (first-paint WOW, canvas-independent) ---- Two CSS layers on guarantee a saturated, deep-space wash the instant the page paints — before any JS canvas frame, and fully present for reduced-motion users (the drama is BAKED into static gradients, not motion). ::before = colossal saturated nebula blooms (violet / cyan / pink families). ::after = a fine star-dust grain + cinematic vignette over the top. z-index -2 sits just under the canvas (z 0) so the reactive web layers on top, but if the canvas is dim/slow this still reads unmistakably as a galaxy. */ body::before { content: ""; position: fixed; inset: -10%; z-index: -2; pointer-events: none; background: radial-gradient(38% 32% at 18% 14%, rgba(123,47,247,0.62), transparent 60%), radial-gradient(34% 30% at 82% 22%, rgba(0,212,255,0.50), transparent 62%), radial-gradient(40% 34% at 72% 84%, rgba(244,114,182,0.46), transparent 60%), radial-gradient(30% 26% at 30% 78%, rgba(168,85,247,0.50), transparent 60%), radial-gradient(46% 40% at 50% 50%, rgba(91,40,196,0.34), transparent 70%), #05030f; background-size: 160% 160%; filter: saturate(1.25); animation: snNebulaDrift 38s ease-in-out infinite alternate; } body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.95), transparent 60%), radial-gradient(1px 1px at 28% 64%, rgba(180,225,255,0.9), transparent 60%), radial-gradient(1.4px 1.4px at 44% 18%, rgba(255,255,255,0.85), transparent 60%), radial-gradient(1px 1px at 62% 48%, rgba(255,210,245,0.85), transparent 60%), radial-gradient(1.2px 1.2px at 78% 30%, rgba(200,235,255,0.9), transparent 60%), radial-gradient(1px 1px at 88% 72%, rgba(255,255,255,0.85), transparent 60%), radial-gradient(1.3px 1.3px at 34% 86%, rgba(220,200,255,0.9), transparent 60%), radial-gradient(1px 1px at 8% 52%, rgba(255,255,255,0.8), transparent 60%), radial-gradient(1px 1px at 54% 78%, rgba(190,230,255,0.85), transparent 60%), radial-gradient(1.2px 1.2px at 70% 90%, rgba(255,255,255,0.8), transparent 60%), /* cinematic edge vignette so text columns stay legible over the bloom */ radial-gradient(120% 90% at 50% 45%, transparent 52%, rgba(4,3,12,0.62) 100%); background-size: 320px 320px, 280px 280px, 360px 360px, 300px 300px, 340px 340px, 260px 260px, 380px 380px, 300px 300px, 320px 320px, 280px 280px, 100% 100%; opacity: 0.9; animation: snStarDrift 120s linear infinite; } @keyframes snNebulaDrift { 0% { background-position: 0% 0%; filter: saturate(1.2) hue-rotate(0deg); } 100% { background-position: 100% 100%; filter: saturate(1.35) hue-rotate(-14deg); } } @keyframes snStarDrift { from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } to { background-position: 320px 480px, -280px 360px, 360px -300px, 300px 420px, -340px 300px, 260px -260px, 380px 360px, -300px 300px, 320px 440px, 280px -280px, 0 0; } } /* shell goes glass so the galaxy reads behind everything */ #login-screen, #main-layout, #chat-screen, #messages { background: transparent !important; } #login-screen { position: relative; z-index: 2; } #main-layout { position: relative; z-index: 2; } /* a HUGE violet→cyan→pink nebula bloom erupts right behind the login card so the hero sits in a blazing pool of light — vivid at first paint, motion optional. */ #login-screen::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(54% 46% at 50% 32%, rgba(123,47,247,0.60), transparent 66%), radial-gradient(46% 36% at 50% 64%, rgba(0,212,255,0.40), transparent 70%), radial-gradient(40% 34% at 24% 50%, rgba(244,114,182,0.30), transparent 64%), radial-gradient(38% 32% at 78% 46%, rgba(168,85,247,0.34), transparent 64%); filter: blur(14px) saturate(1.2); animation: snHeroBloom 12s ease-in-out infinite alternate; } @keyframes snHeroBloom { 0% { transform: scale(1); opacity: 0.92; } 100% { transform: scale(1.07); opacity: 1; } } /* LUMINOUS ORBITAL RINGS — concentric entanglement halo behind the login card. Painted with conic + radial ring gradients on the login-screen's ::after so they sit behind the glass and are NOT clipped by the card's overflow:hidden. Two slowly counter-rotating ring sets = an unmistakable "reactor core" motif. */ #login-screen::after { content: ""; position: fixed; z-index: -1; pointer-events: none; left: 50%; top: 45%; width: min(92vw, 860px); height: min(92vw, 860px); transform: translate(-50%, -50%); background: /* sweeping energy arc — two bright sweeps (cyan + pink) */ conic-gradient(from 0deg, transparent 0deg, rgba(0,212,255,0.0) 30deg, rgba(0,212,255,0.85) 80deg, transparent 124deg, transparent 210deg, rgba(244,114,182,0.75) 262deg, rgba(168,85,247,0.0) 308deg, transparent 360deg), /* four crisp orbital rings spanning a wider visible band */ radial-gradient(circle, transparent 30%, rgba(0,212,255,0.70) 30.3%, transparent 31.6%), radial-gradient(circle, transparent 38%, rgba(168,85,247,0.58) 38.3%, transparent 39.6%), radial-gradient(circle, transparent 45%, rgba(244,114,182,0.52) 45.3%, transparent 46.5%), radial-gradient(circle, transparent 50%, rgba(0,212,255,0.42) 50.3%, transparent 51.4%); border-radius: 50%; -webkit-mask-image: radial-gradient(circle, transparent 26%, #000 30%, #000 52%, transparent 58%); mask-image: radial-gradient(circle, transparent 26%, #000 30%, #000 52%, transparent 58%); filter: blur(0.3px) saturate(1.5) drop-shadow(0 0 34px rgba(0,212,255,0.45)); opacity: 1; animation: snSpin 60s linear infinite, snHaloPulse 9s ease-in-out infinite; } /* a couple of brand keyframes reused across both screens */ @keyframes snBreath { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes snFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes snPulseRing { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(2.4); opacity: 0; } 100% { transform: scale(2.4); opacity: 0; } } @keyframes snSpin { to { transform: rotate(360deg); } } @keyframes snSpinRev { to { transform: rotate(-360deg); } } /* halo "breathing" so the orbital rings pulse luminosity even when static-ish */ @keyframes snHaloPulse { 0%,100% { opacity: 0.55; filter: blur(0.4px) saturate(1.3); } 50% { opacity: 0.95; filter: blur(0.6px) saturate(1.5); } } /* ============================================================================ 1. LOGIN — the UNFORGETTABLE hero A floating slab of deep-space glass with an aurora rim-light, a giant breathing wordmark, and the name field + START PRIVATE CHAT as the one unmistakable, glowing primary action. ============================================================================ */ #login-screen .login-card { position: relative; background: /* supernova burst blooming right behind the wordmark zone */ radial-gradient(60% 30% at 50% 22%, rgba(0,212,255,0.30), transparent 62%), radial-gradient(130% 90% at 50% -10%, rgba(123,47,247,0.34), transparent 60%), radial-gradient(80% 50% at 50% 120%, rgba(244,114,182,0.16), transparent 60%), linear-gradient(180deg, rgba(15,12,34,0.80), rgba(8,9,20,0.70)) !important; border: 1px solid rgba(124,92,255,0.32) !important; border-radius: 26px !important; -webkit-backdrop-filter: blur(22px) saturate(135%); backdrop-filter: blur(22px) saturate(135%); box-shadow: 0 0 0 1px rgba(0,212,255,0.12), 0 30px 90px -28px rgba(123,47,247,0.70), 0 0 160px -36px rgba(0,212,255,0.55), 0 0 90px -30px rgba(244,114,182,0.40), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 60px -20px rgba(123,47,247,0.30) !important; overflow: hidden; } /* aurora rim-light sweeping the top edge of the card */ #login-screen .login-card::before { content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 2px; background: var(--sn-grad); background-size: 280% 100%; filter: blur(0.5px); opacity: 0.85; border-radius: 2px; animation: snBreath 8s ease-in-out infinite; pointer-events: none; } /* tighten the loose top so the wordmark anchors the hero */ #login-screen .login-card { padding-top: 30px !important; } /* faint orbiting halo behind the logo */ #login-screen .login-card > img[src*="icon"] { position: relative; margin-bottom: 10px !important; filter: drop-shadow(0 0 22px rgba(123,47,247,0.6)) drop-shadow(0 0 40px rgba(0,212,255,0.35)) !important; animation: snFloat 6s ease-in-out infinite; } /* THE WORDMARK — giant, breathing aurora gradient with a bulletproof glow. We layer a real glow UNDER the gradient text (via text-shadow on a pseudo that mirrors the letters) so the mark is always luminous even at a frozen gradient frame or when Orbitron hasn't loaded. */ #login-screen .brand-title { position: relative; font-family: var(--font-display), 'Exo 2', sans-serif !important; font-weight: 900 !important; font-size: clamp(3.4rem, 13vw, 5.6rem) !important; /* COLOSSAL */ letter-spacing: 0.04em !important; line-height: 1.0 !important; background: linear-gradient(96deg, #7df0ff, #d9b6ff 38%, #ffb0e0 68%, #7df0ff) !important; background-size: 280% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; /* deep layered bloom so the mark reads as a light source, never flat */ filter: drop-shadow(0 0 18px rgba(0,212,255,0.70)) drop-shadow(0 0 46px rgba(168,85,247,0.62)) drop-shadow(0 0 80px rgba(244,114,182,0.38)) !important; /* an elevate layer fades .brand-title in from opacity:0 and can get stuck at frame 0 (fonts still "loading"); force it visible so the hero NEVER blanks */ opacity: 1 !important; animation: snBreath 7s ease-in-out infinite !important; margin: 6px 0 0.6rem !important; text-transform: uppercase; } #login-screen .brand-tagline { color: #b9c6ee !important; font-style: italic !important; text-shadow: 0 0 18px rgba(0,212,255,0.18); } #login-screen .brand-attrib { color: #8a7ad6 !important; } /* trial banner — a glowing "free + private" pill */ #login-screen .trial-banner, #login-screen #trial-banner { background: linear-gradient(100deg, rgba(0,212,255,0.10), rgba(123,47,247,0.10)) !important; border: 1px solid rgba(0,212,255,0.28) !important; border-radius: 14px !important; box-shadow: 0 0 26px -8px rgba(0,212,255,0.35), inset 0 0 18px rgba(123,47,247,0.06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } #login-screen .trial-banner__label { color: #7df0ff !important; letter-spacing: 0.18em !important; } #login-screen .trial-pulse { box-shadow: 0 0 12px 3px var(--sn-cyan) !important; } /* onboarding panel — quiet glass that opens without breaking the hero */ #login-screen .onboard-panel { background: rgba(10,12,26,0.45) !important; border: 1px solid rgba(124,92,255,0.22) !important; border-radius: 14px !important; } #login-screen .onboard-head { color: #c7d2f5 !important; } #login-screen .onboard-title { color: #d7defb !important; letter-spacing: 0.12em !important; } #login-screen .onboard-glyph { color: var(--sn-cyan) !important; text-shadow: 0 0 10px rgba(0,212,255,0.6); } /* NAME field — the primary input glows the brightest of all inputs */ #login-screen #name-label { color: #9fb0e0 !important; } #login-screen .login-card input[type="text"], #login-screen .login-card input[type="password"] { background: rgba(6,8,20,0.62) !important; border: 1px solid rgba(124,92,255,0.28) !important; border-radius: 12px !important; color: var(--sn-ink) !important; transition: border-color .2s, box-shadow .25s, background .2s !important; } #login-screen #username-input { border-color: rgba(0,212,255,0.42) !important; box-shadow: 0 0 0 1px rgba(0,212,255,0.10), 0 0 26px -8px rgba(0,212,255,0.40) !important; font-size: 1.05rem !important; } #login-screen .login-card input[type="text"]:focus, #login-screen .login-card input[type="password"]:focus { border-color: rgba(0,212,255,0.75) !important; box-shadow: 0 0 0 3px rgba(0,212,255,0.14), 0 0 30px -6px rgba(0,212,255,0.55) !important; } #login-screen .login-card input::placeholder { color: #6f7aa6 !important; } /* THE primary action — START PRIVATE CHAT becomes a warp-drive button */ #login-screen #join-btn.btn-generate { position: relative; background: linear-gradient(120deg, #f472b6, #a855f7 30%, #7b2ff7 52%, #00d4ff 92%) !important; background-size: 220% 100% !important; border: none !important; border-radius: 18px !important; padding: 20px 24px !important; font-size: 1.08rem !important; font-weight: 800 !important; letter-spacing: 0.18em !important; text-transform: uppercase; color: #fff !important; text-shadow: 0 1px 14px rgba(0,0,0,0.35); box-shadow: 0 0 44px -2px rgba(123,47,247,0.85), 0 0 90px -18px rgba(0,212,255,0.70), 0 0 70px -22px rgba(244,114,182,0.55), inset 0 1px 0 rgba(255,255,255,0.42), inset 0 -10px 26px -14px rgba(0,0,0,0.45) !important; animation: snBreath 6s ease-in-out infinite; transition: transform .18s ease, box-shadow .3s, background-position .5s !important; margin-top: 6px !important; } #login-screen #join-btn.btn-generate:hover { transform: translateY(-2px) scale(1.012) !important; background-position: 100% 0 !important; box-shadow: 0 0 42px -2px rgba(0,212,255,0.7), 0 0 90px -20px rgba(168,85,247,0.6), inset 0 1px 0 rgba(255,255,255,0.34) !important; } /* a soft breathing ring just outside the primary CTA = unmistakable focus */ #login-screen #join-btn.btn-generate::before { content: ""; position: absolute; inset: -3px; border-radius: 18px; border: 1px solid rgba(0,212,255,0.5); opacity: 0; pointer-events: none; animation: snCtaRing 3.4s ease-out infinite; } @keyframes snCtaRing { 0% { opacity: .55; transform: scale(1); } 70% { opacity: 0; transform: scale(1.06); } 100% { opacity: 0; transform: scale(1.06); } } #login-screen .account-toggle-row a, #login-screen #account-toggle { color: var(--sn-cyan) !important; text-shadow: 0 0 12px rgba(0,212,255,0.35); } #login-screen .login-divider { color: #7e8ab6 !important; } #login-screen .login-divider::before, #login-screen .login-divider::after { background: linear-gradient(90deg, transparent, rgba(124,92,255,0.4), transparent) !important; } #login-screen #crypto-status, #login-screen .crypto-status { color: #7df0ff !important; text-shadow: 0 0 12px rgba(0,212,255,0.3); } #login-screen .login-foot__link { color: #9fb0e0 !important; } #login-screen .login-foot__link:hover { color: var(--sn-cyan) !important; } /* ============================================================================ 2. CHAT — header / sidebar / invite bar ============================================================================ */ /* SIDEBAR — a cold slab of space glass */ #sidebar { background: linear-gradient(180deg, rgba(11,12,26,0.66), rgba(8,9,20,0.50)) !important; border-right: 1px solid rgba(0,212,255,0.18) !important; -webkit-backdrop-filter: blur(18px) saturate(130%); backdrop-filter: blur(18px) saturate(130%); box-shadow: 1px 0 34px rgba(0,0,0,0.45), inset -1px 0 0 rgba(123,47,247,0.10); } #sidebar .sidebar-header h2 { background: linear-gradient(90deg, #00d4ff, #a855f7) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 0.22em; text-shadow: 0 0 22px rgba(0,212,255,0.25); } #sidebar #add-friend-btn { border-color: rgba(0,212,255,0.4) !important; color: var(--sn-cyan) !important; } /* HEADER — aurora glass bar with a BLAZING luminous ribbon underline */ #chat-screen > header { background: linear-gradient(180deg, rgba(20,12,44,0.92), rgba(9,10,22,0.70)) !important; border-bottom: 1px solid rgba(124,92,255,0.45) !important; -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); box-shadow: 0 1px 0 rgba(0,212,255,0.18), 0 22px 50px -22px rgba(123,47,247,0.70), inset 0 -22px 40px -28px rgba(0,212,255,0.30); position: relative; z-index: 6; } /* a soft top glow ribbon */ #chat-screen > header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 38%; background: linear-gradient(180deg, rgba(168,85,247,0.16), transparent); pointer-events: none; } #chat-screen > header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; background: linear-gradient(90deg, transparent, #00d4ff 18%, #a855f7 50%, #f472b6 82%, transparent); background-size: 220% 100%; opacity: 0.95; filter: blur(0.3px) drop-shadow(0 0 8px rgba(0,212,255,0.6)); animation: snBreath 9s ease-in-out infinite; } /* WORDMARK in the header — breathing aurora gradient */ #chat-screen .header-left .logo { font-family: var(--font-display) !important; font-weight: 800 !important; letter-spacing: 0.16em !important; background: var(--sn-grad) !important; background-size: 280% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 0 14px rgba(123,47,247,0.45)); animation: snBreath 8s ease-in-out infinite; } #chat-screen .header-left .codename { color: #d3ecff !important; font-weight: 600 !important; text-shadow: 0 0 14px rgba(0,212,255,0.5); } /* header buttons — glass chips that bloom on hover */ #chat-screen .header-right .hbtn, #chat-screen .header-right .qsec-badge, #chat-screen .header-right .qcall-hbtn { background: rgba(18,20,40,0.52) !important; border: 1px solid rgba(255,255,255,0.14) !important; color: #cdd3ef !important; border-radius: 10px !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .18s ease, box-shadow .25s ease, color .2s, border-color .25s, background .25s; } #chat-screen .header-right .hbtn:hover, #chat-screen .header-right .qsec-badge:hover, #chat-screen .header-right .qcall-hbtn:hover { color: #fff !important; transform: translateY(-1px); border-color: rgba(0,212,255,0.6) !important; box-shadow: 0 0 18px rgba(0,212,255,0.28), inset 0 0 12px rgba(0,212,255,0.10); } #chat-screen .header-right .hbtn.e2ee { border-color: rgba(52,211,153,0.45) !important; color: var(--sn-mint) !important; } #chat-screen .header-right .hbtn.share { border-color: rgba(0,212,255,0.45) !important; color: var(--sn-cyan) !important; } #chat-screen .header-right .hbtn.dc { border-color: rgba(244,114,182,0.45) !important; color: var(--sn-pink) !important; } #chat-screen .header-right .hbtn.dc:hover { border-color: rgba(244,114,182,0.75) !important; box-shadow: 0 0 18px rgba(244,114,182,0.30); } #chat-screen .header-right .user-count { background: linear-gradient(135deg, rgba(123,47,247,0.6), rgba(0,212,255,0.5)) !important; color: #fff !important; box-shadow: 0 0 14px rgba(123,47,247,0.4); } #chat-screen .header-right .qsec-badge .qsec-dot { box-shadow: 0 0 10px 2px currentColor; } /* INVITE-LINK bar — cyan entanglement strip */ #chat-screen #share-banner { background: linear-gradient(90deg, rgba(0,212,255,0.10), rgba(123,47,247,0.07)) !important; border-bottom: 1px solid rgba(0,212,255,0.22) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } #chat-screen #share-banner input { background: rgba(6,8,20,0.6) !important; border: 1px solid rgba(0,212,255,0.28) !important; color: #c6f2ff !important; border-radius: 9px !important; } #chat-screen #share-banner button { border-radius: 9px !important; } /* enc status strip */ #chat-screen .enc-bar { background: rgba(6,8,18,0.42) !important; border-bottom: 1px solid rgba(123,47,247,0.16) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* ============================================================================ 3. MESSAGES — RADIANT ENTANGLED-GLASS bubbles with inner cores incoming = cold cyan glass + bloom ; mine = violet plasma + living core ============================================================================ */ #messages { padding-top: 16px !important; position: relative; } /* DEPTH SCRIM — a soft central darkening down the message column so text stays crisp over the brighter galaxy without hiding the void at the edges. Painted on the scroll container, behind the bubbles, never intercepts clicks. */ #messages::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(5,4,14,0.42) 22%, rgba(5,4,14,0.50) 50%, rgba(5,4,14,0.42) 78%, transparent); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } #messages > * { position: relative; z-index: 1; } #messages .bubble { position: relative; border-radius: 24px !important; -webkit-backdrop-filter: blur(14px) saturate(155%); backdrop-filter: blur(14px) saturate(155%); border: 1px solid rgba(255,255,255,0.14) !important; color: #f3f5ff !important; text-shadow: 0 1px 10px rgba(0,0,0,0.45); transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .3s, filter .25s !important; overflow: visible !important; } #messages .bubble .sender { letter-spacing: 0.16em !important; text-shadow: 0 0 12px currentColor; } #messages .bubble .text { color: #f3f5ff !important; } /* INCOMING — cold cyan glass, frosty rim, soft cyan bloom */ #messages .bubble.bubble--recv { align-self: flex-start; background: linear-gradient(150deg, rgba(0,212,255,0.32), rgba(12,28,54,0.62) 58%, rgba(8,14,32,0.50)) !important; border: 1.5px solid rgba(0,212,255,0.70) !important; border-bottom-left-radius: 8px !important; box-shadow: 0 0 0 1px rgba(0,212,255,0.20), 0 0 34px rgba(0,212,255,0.45), 0 0 80px rgba(0,212,255,0.20), 0 12px 34px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.24), inset 0 0 28px rgba(0,212,255,0.18) !important; } #messages .bubble.bubble--recv .sender { color: #6ff0ff !important; } /* MINE — violet plasma with a bright inner core + magenta rim */ #messages .bubble.bubble--sent { align-self: flex-end; background: radial-gradient(120% 100% at 30% 18%, rgba(229,170,255,0.78), rgba(140,55,255,0.60) 40%, rgba(74,22,150,0.58) 100%) !important; border: 1.5px solid rgba(229,160,255,0.78) !important; border-bottom-right-radius: 8px !important; box-shadow: 0 0 0 1px rgba(244,114,182,0.30), 0 0 38px rgba(140,55,255,0.55), 0 0 84px rgba(244,114,182,0.26), 0 12px 34px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.32), inset 0 0 32px rgba(229,170,255,0.40) !important; } #messages .bubble.bubble--sent .sender { color: #f3c7ff !important; } /* the INNER CORE — a tiny living light nucleus inside each entangled bubble */ #messages .bubble::after { content: "" !important; position: absolute !important; width: 13px; height: 13px; border-radius: 50%; top: 9px; opacity: 0.9 !important; background: radial-gradient(circle, #fff, rgba(255,255,255,0.0) 70%); animation: snCore 3.6s ease-in-out infinite; pointer-events: none; } #messages .bubble.bubble--recv::after { left: 12px; box-shadow: 0 0 14px 3px rgba(0,212,255,0.85); } #messages .bubble.bubble--sent::after { right: 12px; top: auto; bottom: 9px; box-shadow: 0 0 14px 3px rgba(244,114,182,0.85); } @keyframes snCore { 0%,100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(1.45); opacity: 1; } } /* keep the base's curved specular highlight on top, just brighten it */ #messages .bubble::before { background: linear-gradient(to bottom, rgba(255,255,255,0.22), rgba(255,255,255,0.04) 60%, transparent) !important; opacity: 0.9; } /* hover — the bubble "excites": lifts + blooms */ #messages .bubble.bubble--recv:hover { transform: translateY(-6px) scale(1.025) !important; box-shadow: 0 0 34px rgba(0,212,255,0.5), 0 0 80px rgba(0,212,255,0.18), 0 16px 40px rgba(0,0,0,0.5), inset 0 0 26px rgba(0,212,255,0.16) !important; } #messages .bubble.bubble--sent:hover { transform: translateY(-6px) scale(1.025) !important; box-shadow: 0 0 36px rgba(168,85,247,0.55), 0 0 88px rgba(244,114,182,0.20), 0 16px 40px rgba(0,0,0,0.5), inset 0 0 30px rgba(199,135,255,0.36) !important; } /* arrival flash for materializing bubbles (rides the base float-up keyframe) */ #messages .bubble.bubble--arriving, #messages .bubble.bubble--materializing { animation-name: bubble-float-up, snEntangleFlash; } @keyframes snEntangleFlash { 0% { filter: brightness(2.3) saturate(1.7); } 35% { filter: brightness(1.5) saturate(1.4); } 100% { filter: brightness(1) saturate(1); } } /* system lines — quiet quantum telemetry */ #messages .system-message { color: #94abda !important; opacity: 0.85 !important; text-shadow: 0 0 12px rgba(0,212,255,0.28); } #messages .system-message::before { content: "◇ "; color: var(--sn-cyan); opacity: 0.7; } #messages .system-message::after { content: " ◇"; color: var(--sn-violet); opacity: 0.7; } /* ============================================================================ 4. COMPOSER — warp send, glass field ============================================================================ */ #chat-screen #chat-form { background: linear-gradient(0deg, rgba(18,11,40,0.94), rgba(9,10,22,0.68)) !important; border-top: 1px solid rgba(123,47,247,0.42) !important; -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); box-shadow: 0 -20px 50px -24px rgba(0,212,255,0.55), inset 0 22px 40px -28px rgba(168,85,247,0.30); position: relative; z-index: 6; } /* charged-capsule input — always faintly glowing, not just on focus */ #chat-screen #chat-form input#msg-input { background: rgba(6,8,20,0.6) !important; border: 1.5px solid rgba(0,212,255,0.40) !important; border-radius: 16px !important; color: #eaf6ff !important; box-shadow: 0 0 22px -8px rgba(0,212,255,0.45), inset 0 0 18px -8px rgba(0,212,255,0.30) !important; transition: border-color .2s, box-shadow .25s; } #chat-screen #chat-form input#msg-input:focus { border-color: rgba(0,212,255,0.6) !important; box-shadow: 0 0 0 3px rgba(0,212,255,0.12), 0 0 22px rgba(0,212,255,0.22) !important; } #chat-screen #chat-form input#msg-input::placeholder { color: #6f7aa6 !important; } #chat-screen #chat-form button[type="submit"] { position: relative; overflow: hidden; background: linear-gradient(135deg, #f472b6, #a855f7 40%, #7b2ff7 60%, #00d4ff) !important; background-size: 220% 100% !important; color: #fff !important; border: none !important; border-radius: 16px !important; letter-spacing: 0.16em !important; font-weight: 800 !important; text-shadow: 0 1px 10px rgba(0,0,0,0.35); box-shadow: 0 0 30px rgba(123,47,247,0.60), 0 0 56px -16px rgba(0,212,255,0.50), inset 0 1px 0 rgba(255,255,255,0.34) !important; transition: background-position .4s ease, box-shadow .25s, transform .15s; } #chat-screen #chat-form button[type="submit"]:hover { background-position: 100% 0 !important; box-shadow: 0 0 30px rgba(0,212,255,0.5), inset 0 1px 0 rgba(255,255,255,0.3); transform: translateY(-1px); } /* warp streak that sweeps across SEND when pressed = the launch moment */ #chat-screen #chat-form button[type="submit"]:active::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%); transform: translateX(-120%); animation: snWarp .5s ease-out; } @keyframes snWarp { to { transform: translateX(120%); } } /* the crypto-send orb button keeps its bloom on hover */ #chat-screen #chat-form .send-crypto-btn { transition: transform .2s, box-shadow .25s; } #chat-screen #chat-form .send-crypto-btn:hover { box-shadow: 0 0 18px rgba(168,85,247,0.55); } /* ============================================================================ 5. RECENT-CHAT cards (login) + QR modal ============================================================================ */ #recent-chats { border-top: 1px solid rgba(124,92,255,0.22) !important; } .recents-title { color: #7df0ff !important; text-shadow: 0 0 10px rgba(0,212,255,0.3); } .recent-open { background: linear-gradient(120deg, rgba(0,212,255,0.06), rgba(18,18,31,0.6)) !important; border: 1px solid rgba(124,92,255,0.28) !important; border-radius: 12px !important; transition: border-color .18s, background .18s, transform .12s, box-shadow .25s !important; } .recent-open:hover { border-color: rgba(0,212,255,0.6) !important; background: linear-gradient(120deg, rgba(0,212,255,0.12), rgba(18,18,31,0.65)) !important; box-shadow: 0 0 22px -6px rgba(0,212,255,0.5) !important; } .recent-dot { box-shadow: 0 0 8px 1px rgba(0,212,255,0.7); } .recent-label { color: var(--sn-ink) !important; } .qr-card { background: linear-gradient(180deg, rgba(13,14,30,0.98), rgba(8,9,20,0.98)) !important; border: 1px solid rgba(124,92,255,0.45) !important; box-shadow: 0 0 60px -16px rgba(123,47,247,0.6), 0 12px 40px rgba(0,0,0,0.6) !important; } .qr-title { color: #d7defb !important; } .qr-close { border-color: rgba(0,212,255,0.5) !important; color: var(--sn-cyan) !important; } /* ============================================================================ 6. CALL OVERLAY — primary surfaces (entangled-glass stage + orbs) ============================================================================ */ #qbc-call-overlay .qcall-veil { background: radial-gradient(ellipse 80% 60% at 50% 28%, rgba(123,47,247,0.22), transparent 70%), radial-gradient(ellipse 60% 50% at 50% 82%, rgba(0,212,255,0.12), transparent 70%), rgba(7,8,16,0.86) !important; -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25); } #qbc-call-overlay .qcall-orb { box-shadow: 0 0 30px rgba(123,47,247,0.45), inset 0 0 20px rgba(0,212,255,0.16) !important; } #qbc-call-overlay .qcall-orb-peer { box-shadow: 0 0 30px rgba(0,212,255,0.4), inset 0 0 20px rgba(123,47,247,0.16) !important; } #qbc-call-overlay .qcall-peer-name { background: linear-gradient(90deg, #00d4ff, #a855f7) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 22px rgba(0,212,255,0.25); } #qbc-call-overlay .qcall-accept { box-shadow: 0 0 26px rgba(52,211,153,0.5) !important; } #qbc-call-overlay .qcall-btn { transition: transform .15s, box-shadow .25s, background .2s; } #qbc-call-overlay .qcall-btn:hover { box-shadow: 0 0 22px rgba(0,212,255,0.4); } /* ============================================================================ 7. MOBILE — header scrolls, never overflows (≤480px); galaxy stays cheap ============================================================================ */ @media (max-width: 480px) { #login-screen .login-card { padding: 30px 20px !important; border-radius: 22px !important; } /* still colossal on phones — big enough to dominate, safe at 390px */ #login-screen .brand-title { font-size: clamp(2.7rem, 15vw, 3.4rem) !important; } /* shrink the orbital halo so it frames the card, not the whole viewport */ #login-screen::after { width: 96vw; height: 96vw; top: 44%; } #chat-screen > header { flex-wrap: nowrap !important; gap: 8px !important; padding: 10px 12px !important; } #chat-screen .header-left { flex: 0 0 auto; min-width: 0; gap: 7px !important; } #chat-screen .header-left .logo { font-size: 0.78rem !important; } #chat-screen .header-left .codename { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #chat-screen .header-right { flex: 1 1 auto; flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 6px !important; padding-bottom: 2px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); } #chat-screen .header-right::-webkit-scrollbar { display: none; } #chat-screen .header-right > * { flex: 0 0 auto; } #chat-screen .header-right .hbtn, #chat-screen .header-right .qsec-badge, #chat-screen .header-right .qcall-hbtn { padding: 5px 9px !important; font-size: 10px !important; } #chat-screen #share-banner { flex-wrap: wrap !important; } #chat-screen #share-banner input { flex: 1 1 100%; min-width: 0; } #messages .bubble { max-width: 86% !important; } } /* reduced motion: freeze ALL motion but keep every vivid static gradient/glow (the drama is baked into the gradients, not the animation). The painted galaxy, orbital rings, hero bloom and wordmark stay fully saturated — they just stop moving. */ @media (prefers-reduced-motion: reduce) { body::before, body::after, #login-screen::before, #login-screen::after, #login-screen .brand-title, #login-screen .login-card::before, #login-screen #join-btn.btn-generate, #login-screen #join-btn.btn-generate::before, #login-screen .login-card > img[src*="icon"], #chat-screen .header-left .logo, #chat-screen > header::after, #chat-screen #chat-form button[type="submit"], #messages .bubble::after { animation: none !important; } /* hold the drifting layers at their richest composed frame */ body::before { background-position: 50% 50% !important; filter: saturate(1.3) !important; } } /* ═══ VISIBILITY HARD-GUARD (6/9 hotfix — nova2) ═══════════════════════════ Root cause of "buttons went missing": qchat-elevate.css gives controls a base opacity:0 + an entrance animation; THIS skin's `animation:` overrides (snBreath etc.) replace that entrance, so the fade never runs and the base opacity:0 sticks — invisible-but-clickable controls. Reduced-motion had the same effect by disabling the entrance outright. Guard: interactive controls may NEVER rest transparent. `!important` author rules outrank animation keyframes in the cascade, so this wins over every layer below, every mode. */ #join-btn, #username-input, #link-input, #onboard-toggle, #account-toggle, #login-screen .login-card button, #login-screen .login-card input, #login-screen .login-card select, #login-screen .login-card a, #chat-screen .header-right button, #chat-form button, #chat-form input, .btn-generate, .hbtn, .dc { opacity: 1 !important; visibility: visible !important; } /* Guard v2: ancestors count too (cumulative opacity) — the onboard PANEL was the transparent one, not the button. Pin the containers, and under reduced-motion (no entrances will ever run) force the entire login card opaque. */ #onboard-panel, .onboard-panel, .trial-banner, #recent-chats { opacity: 1 !important; visibility: visible !important; } @media (prefers-reduced-motion: reduce) { #login-screen .login-card, #login-screen .login-card * { opacity: 1 !important; } }