/* ============================================================================ QUBBLE CHAT — "AURORA NOVA" skin · injected LAST (wins on specificity) A cinematic deep-space quantum aurora. The living field is painted by qbc-skin-aurora.js into at the back of ; this stylesheet makes the chat shell float over it as entangled glass. Style-only — every app id/class is preserved, never renamed. ============================================================================ */ /* ---- 0. let the living field show through the whole chat shell ---------- */ #qbc-aurora-field { position: fixed; inset: 0; z-index: 0; pointer-events: none; } /* Kill the old faint static backdrops so our dramatic field owns the space. */ body .quantum-bg, body .quantum-nebula { opacity: 0 !important; } /* The shell itself goes glass-transparent so the nebula reads behind it. */ #main-layout, #chat-screen, #messages { background: transparent !important; } #main-layout { position: relative; z-index: 2; } /* ---- 1. SIDEBAR — a thin slab of cold space glass ----------------------- */ #sidebar { background: linear-gradient(180deg, rgba(10,10,22,0.62), rgba(8,8,18,0.46)) !important; border-right: 1px solid rgba(0, 212, 255, 0.18) !important; -webkit-backdrop-filter: blur(16px) saturate(125%); backdrop-filter: blur(16px) saturate(125%); box-shadow: 1px 0 30px 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, #7b2ff7); -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); } /* ---- 2. HEADER — dark aurora glass bar, mobile-graceful ----------------- */ #chat-screen > header { background: linear-gradient(180deg, rgba(8,8,18,0.86), rgba(8,8,18,0.66)) !important; border-bottom: 1px solid rgba(123, 47, 247, 0.28) !important; -webkit-backdrop-filter: blur(18px) saturate(135%); backdrop-filter: blur(18px) saturate(135%); box-shadow: 0 1px 0 rgba(0,212,255,0.12), 0 18px 40px -22px rgba(123,47,247,0.55); position: relative; z-index: 6; } /* faint aurora ribbon glow riding the underline */ #chat-screen > header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, #00d4ff 22%, #7b2ff7 55%, #f472b6 78%, transparent); opacity: 0.55; filter: blur(0.4px); } /* Wordmark — luminous aurora gradient, gently shimmering */ #chat-screen .header-left .logo { font-family: var(--font-display) !important; font-weight: 800 !important; letter-spacing: 0.16em !important; background: linear-gradient(100deg, #00d4ff, #a855f7 45%, #f472b6 75%, #00d4ff) !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: qbcAuroraShimmer 9s linear infinite; } @keyframes qbcAuroraShimmer { to { background-position: 280% 0; } } #chat-screen .header-left .codename { color: #cfeaff !important; text-shadow: 0 0 14px rgba(0,212,255,0.5); font-weight: 600 !important; } /* Header buttons — glass chips that bloom on hover */ #chat-screen .header-right .hbtn, #chat-screen .header-right .qsec-badge { background: rgba(20, 20, 40, 0.5) !important; border: 1px solid rgba(255,255,255,0.14) !important; color: #c9c9e6 !important; border-radius: 9px !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 { 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(--color-success) !important; } #chat-screen .header-right .hbtn.share { border-color: rgba(0,212,255,0.45) !important; color: var(--color-secondary) !important; } #chat-screen .header-right .hbtn.dc { border-color: rgba(244,114,182,0.45) !important; color: var(--color-accent-hot) !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.55), rgba(0,212,255,0.45)) !important; color: #fff !important; box-shadow: 0 0 14px rgba(123,47,247,0.4); } /* Q-E2EE live badge — give its dot a real glow */ #chat-screen .header-right .qsec-badge .qsec-dot { box-shadow: 0 0 10px 2px currentColor; } /* ---- 3. 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: #bfefff !important; border-radius: 8px !important; } #chat-screen #share-banner button { border-radius: 8px !important; } /* enc-bar 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); } /* ============================================================================ 4. MESSAGES — "ENTANGLED GLASS" bubbles incoming = cold cyan-edged glass with bloom mine = violet plasma with an inner light core ============================================================================ */ #messages { padding-top: 14px !important; } /* shared glass body — override the base so our edges + bloom win */ #messages .bubble { border-radius: 24px !important; -webkit-backdrop-filter: blur(13px) saturate(150%); backdrop-filter: blur(13px) saturate(150%); border: 1px solid rgba(255,255,255,0.14) !important; color: #f2f3ff !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; } #messages .bubble .sender { letter-spacing: 0.16em !important; text-shadow: 0 0 12px currentColor; } #messages .bubble .text { color: #f2f3ff !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.16), rgba(10,16,34,0.50) 62%, rgba(8,12,28,0.40)) !important; border: 1px solid rgba(0,212,255,0.45) !important; border-bottom-left-radius: 8px !important; box-shadow: 0 0 0 1px rgba(0,212,255,0.10), 0 0 26px rgba(0,212,255,0.30), 0 0 60px rgba(0,212,255,0.12), 0 10px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.16), inset 0 0 22px rgba(0,212,255,0.10) !important; } #messages .bubble.bubble--recv .sender { color: #6ff0ff !important; } /* MINE — violet plasma with an inner light core + magenta rim */ #messages .bubble.bubble--sent { align-self: flex-end; background: radial-gradient(120% 100% at 30% 18%, rgba(196,132,255,0.55), rgba(123,47,247,0.40) 42%, rgba(60,18,120,0.46) 100%) !important; border: 1px solid rgba(196,132,255,0.55) !important; border-bottom-right-radius: 8px !important; box-shadow: 0 0 0 1px rgba(244,114,182,0.18), 0 0 28px rgba(123,47,247,0.42), 0 0 66px rgba(168,85,247,0.18), 0 10px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 26px rgba(196,132,255,0.30) !important; } #messages .bubble.bubble--sent .sender { color: #f3c7ff !important; } /* keep the base's curved glass specular highlight, 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; } #messages .bubble::after { opacity: 0.8; } /* hover — the bubble "excites": lifts + brightens its bloom */ #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(196,132,255,0.36) !important; } /* entrance flash for arriving / materializing bubbles */ #messages .bubble.bubble--arriving, #messages .bubble.bubble--materializing { animation-name: bubble-float-up, qbcEntangleFlash; } @keyframes qbcEntangleFlash { 0% { filter: brightness(2.2) saturate(1.6); } 35% { filter: brightness(1.5) saturate(1.4); } 100% { filter: brightness(1) saturate(1); } } /* system lines — quiet quantum telemetry */ #messages .system-message { color: #8fa6d8 !important; opacity: 0.8 !important; text-shadow: 0 0 12px rgba(0,212,255,0.28); } #messages .system-message::before { content: "◇ "; color: #00d4ff; opacity: 0.7; } #messages .system-message::after { content: " ◇"; color: #7b2ff7; opacity: 0.7; } /* ---- 5. COMPOSER — plasma send, glass field --------------------------- */ #chat-screen #chat-form { background: linear-gradient(0deg, rgba(8,8,18,0.88), rgba(8,8,18,0.62)) !important; border-top: 1px solid rgba(123,47,247,0.28) !important; -webkit-backdrop-filter: blur(18px) saturate(135%); backdrop-filter: blur(18px) saturate(135%); box-shadow: 0 -16px 40px -24px rgba(0,212,255,0.45); position: relative; z-index: 6; } #chat-screen #chat-form input#msg-input { background: rgba(6,8,20,0.6) !important; border: 1px solid rgba(0,212,255,0.22) !important; border-radius: 14px !important; color: #eaf6ff !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"] { background: linear-gradient(135deg, #7b2ff7, #a855f7 45%, #00d4ff) !important; background-size: 180% 100% !important; color: #fff !important; border: none !important; border-radius: 14px !important; letter-spacing: 0.14em !important; box-shadow: 0 0 22px rgba(123,47,247,0.45), inset 0 1px 0 rgba(255,255,255,0.25); 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); } /* ============================================================================ 6. MOBILE — the header is crowded; let it scroll, never overflow (≤480px) ============================================================================ */ @media (max-width: 480px) { /* keep the header on ONE tidy line: brand left, buttons scroll horizontally */ #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; } /* the busy button row becomes a horizontal scroll-strip with fade hints */ #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 { padding: 5px 9px !important; font-size: 10px !important; } /* invite bar wraps cleanly */ #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; } }