/* ═══════════════════════════════════════════════════════════════════════════
   QUBBLE CHAT — "QUANTUM OBSIDIAN" elevation layer  (2026-06-08)
   A refined dark-luxe pass over the existing theme. Loaded LAST so it wins the
   cascade. Pure visual polish — NO DOM/JS dependencies touched. Premium feel
   comes from depth, a unified glass+glow language, spacing, and restraint.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* unified elevation language */
    --qe-edge:      1px solid rgba(123, 47, 247, 0.28);
    --qe-edge-cy:   1px solid rgba(0, 212, 255, 0.30);
    --qe-radius:    16px;
    --qe-radius-sm: 11px;
    --qe-glass:     rgba(18, 18, 31, 0.66);
    --qe-glass-up:  rgba(26, 26, 46, 0.72);
    --qe-blur:      blur(16px) saturate(1.35);
    --qe-glow-p:    0 0 24px rgba(123, 47, 247, 0.30);
    --qe-glow-c:    0 0 24px rgba(0, 212, 255, 0.26);
    --qe-shadow:    0 10px 40px rgba(0, 0, 0, 0.55);
    --qe-grad:      linear-gradient(120deg, #7b2ff7 0%, #a855f7 38%, #00d4ff 100%);
    --qe-hair:      linear-gradient(90deg, transparent, rgba(123,47,247,.5) 20%, rgba(0,212,255,.5) 80%, transparent);
}

/* ── living atmosphere on the landing void ─────────────────────────────── */
#login-screen {
    position: relative;
    background:
        radial-gradient(60% 50% at 18% 12%, rgba(123, 47, 247, 0.16), transparent 60%),
        radial-gradient(55% 45% at 85% 25%, rgba(0, 212, 255, 0.12), transparent 60%),
        radial-gradient(70% 60% at 50% 100%, rgba(244, 114, 182, 0.07), transparent 65%),
        var(--color-void);
}
#login-screen::after {            /* whisper-fine grain for texture, not noise */
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
    background-image: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.008) 2px 3px);
}

/* ── the quantum-glass login card ──────────────────────────────────────── */
.login-card {
    position: relative; z-index: 1;
    background: linear-gradient(180deg, rgba(20,20,34,.82), rgba(10,10,16,.86)) !important;
    border: var(--qe-edge) !important;
    border-radius: 22px !important;
    box-shadow: var(--qe-shadow), inset 0 1px 0 rgba(255,255,255,.04), 0 0 60px rgba(123,47,247,.10) !important;
    backdrop-filter: var(--qe-blur); -webkit-backdrop-filter: var(--qe-blur);
    padding: 34px 30px 30px !important;
    animation: qe-rise .6s cubic-bezier(.2, .9, .25, 1.05) both;
}
.login-card::before {             /* luminous top hairline */
    content: ""; position: absolute; top: -1px; left: 14%; right: 14%; height: 1px;
    background: var(--qe-hair); opacity: .9;
}
@keyframes qe-rise { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }

/* staggered reveal of the card's children = one orchestrated page load */
.login-card > * { animation: qe-fade .5s ease both; }
.login-card > img        { animation-delay: .05s; }
.login-card .brand-title { animation-delay: .10s; }
.login-card .brand-tagline, .login-card .brand-attrib { animation-delay: .14s; }
.login-card .trial-banner { animation-delay: .20s; }
.login-card #name-label, .login-card #username-input { animation-delay: .26s; }
.login-card #join-btn { animation-delay: .32s; }
@keyframes qe-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── hero wordmark ─────────────────────────────────────────────────────── */
.brand-title {
    font-size: clamp(2.1rem, 6vw, 2.9rem) !important;
    letter-spacing: .12em !important;
    background: linear-gradient(180deg, #fff 0%, #cfc6ff 45%, #00d4ff 130%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent !important;
    filter: drop-shadow(0 0 22px rgba(123, 47, 247, .45));
    animation: qe-fade .5s ease both, qe-titleglow 5s ease-in-out infinite 1s !important;
}
@keyframes qe-titleglow {
    0%, 100% { filter: drop-shadow(0 0 18px rgba(123,47,247,.40)); }
    50%      { filter: drop-shadow(0 0 30px rgba(0,212,255,.45)); }
}
.brand-tagline { color: var(--color-text-dim) !important; letter-spacing: .04em; }

/* logo plate gets a soft halo */
.login-card > img[alt="Qubble Chat"] {
    border-radius: 18px;
    box-shadow: 0 0 28px rgba(123, 47, 247, .35), 0 0 0 1px rgba(123,47,247,.25) !important;
}

/* ── freemium badge → a crisp glass pill ───────────────────────────────── */
.trial-banner {
    background: rgba(52, 211, 153, .06) !important;
    border: 1px solid rgba(52, 211, 153, .30) !important;
    border-radius: var(--qe-radius) !important;
    box-shadow: 0 0 18px rgba(52,211,153,.10);
}
.trial-banner__label { color: var(--color-success) !important; letter-spacing: .14em; }

/* ── onboarding panel: present but quiet (it's collapsed by default now) ── */
.onboard-panel {
    background: rgba(18,18,31,.5) !important;
    border: 1px solid rgba(123,47,247,.18) !important;
    border-radius: var(--qe-radius) !important;
}
.onboard-head { letter-spacing: .12em; }
.onboard-li b { color: #c9bbff; }
/* Fully hide the body when collapsed. The original grid-0fr technique leaked
   the dismiss button (it sits in an implicit 2nd grid row the 0fr doesn't clip),
   showing a sliver. Collapsed-by-default now, so it cleanly expands on tap. */
.onboard-panel[data-state="collapsed"] .onboard-body { display: none !important; }

/* ── inputs: glowing quantum fields ────────────────────────────────────── */
.login-card input[type="text"],
.login-card input[type="password"],
.login-card select,
#link-input {
    background: rgba(10, 10, 16, .7) !important;
    border: 1px solid rgba(123, 47, 247, .28) !important;
    border-radius: var(--qe-radius-sm) !important;
    color: var(--color-text) !important;
    transition: border-color .2s, box-shadow .2s, background .2s !important;
}
#username-input {
    font-size: 1.05rem !important; padding: 15px 16px !important; letter-spacing: .02em;
}
.login-card input:focus, #link-input:focus {
    border-color: rgba(0, 212, 255, .65) !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, .12), var(--qe-glow-c) !important;
    background: rgba(10, 10, 16, .9) !important; outline: none !important;
}
#name-label { color: rgba(0,212,255,.7) !important; letter-spacing: .18em; font-size: .68rem; }

/* ═══ UNIFIED BUTTON SYSTEM ═══ */

/* the HERO action — START / SEND / primary CTAs */
.btn-generate {
    position: relative; overflow: hidden;
    background: var(--qe-grad) !important;
    border: none !important; border-radius: 14px !important;
    color: #fff !important; font-family: var(--font-display) !important;
    letter-spacing: .14em !important; font-weight: 600 !important;
    padding: 16px 24px !important;
    box-shadow: 0 8px 26px rgba(123, 47, 247, .38), inset 0 1px 0 rgba(255,255,255,.22) !important;
    transition: transform .14s, box-shadow .2s, filter .2s !important;
}
.btn-generate:hover { transform: translateY(-1px); box-shadow: 0 12px 34px rgba(0,212,255,.4), inset 0 1px 0 rgba(255,255,255,.25) !important; filter: brightness(1.06); }
.btn-generate:active { transform: translateY(0) scale(.99); }
.btn-generate::after {            /* slow shine sweep */
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.28), transparent);
    transform: skewX(-18deg); animation: qe-shine 5.5s ease-in-out infinite;
}
@keyframes qe-shine { 0%, 70% { left: -60%; } 100% { left: 150%; } }
#join-btn { width: 100%; font-size: .92rem !important; }

/* account toggle + secondary links */
#account-toggle, .forgot-password-row a, #forgot-password-link { transition: color .15s, text-shadow .15s; }
#account-toggle:hover { text-shadow: 0 0 12px rgba(0,212,255,.6); }

/* ── header buttons: refined ghost-glass, clear hierarchy ──────────────── */
#chat-screen header {
    background: linear-gradient(180deg, rgba(18,18,31,.92), rgba(12,12,20,.9)) !important;
    border-bottom: 1px solid rgba(123,47,247,.22) !important;
    backdrop-filter: var(--qe-blur); -webkit-backdrop-filter: var(--qe-blur);
    box-shadow: 0 2px 20px rgba(0,0,0,.4);
    position: relative;
}
#chat-screen header::after {      /* luminous underline */
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--qe-hair); opacity: .55;
}
.header-right { flex-wrap: wrap; gap: 6px !important; justify-content: flex-end; }
.hbtn {
    background: rgba(123, 47, 247, .08) !important;
    border: 1px solid rgba(123, 47, 247, .22) !important;
    border-radius: 9px !important;
    color: var(--color-text) !important;
    font-family: var(--font-display) !important; font-size: .62rem !important; letter-spacing: .08em !important;
    padding: 7px 11px !important; min-height: 34px;
    transition: background .15s, border-color .15s, transform .1s !important;
}
.hbtn:hover { background: rgba(0,212,255,.12) !important; border-color: rgba(0,212,255,.4) !important; }
.hbtn:active { transform: scale(.96); }
/* de-emphasize the destructive one; it shouldn't shout */
.hbtn.dc { background: transparent !important; border-color: rgba(244,114,182,.28) !important; color: rgba(244,114,182,.8) !important; }
.hbtn.dc:hover { background: rgba(244,114,182,.1) !important; border-color: rgba(244,114,182,.55) !important; }
/* the live crypto badge = the proud, prominent element */
.qsec-badge {
    border-radius: 9px !important;
    border: 1px solid rgba(52,211,153,.35) !important;
    background: rgba(52,211,153,.07) !important;
    box-shadow: 0 0 16px rgba(52,211,153,.12);
}
.user-count {
    background: rgba(0,212,255,.1) !important; border: 1px solid rgba(0,212,255,.3) !important;
    border-radius: 8px; color: var(--color-secondary) !important; font-family: var(--font-mono);
}
/* mobile: header scrolls horizontally instead of exploding into 4 rows */
@media (max-width: 720px) {
    .header-right { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .header-right::-webkit-scrollbar { display: none; }
    .hbtn { flex-shrink: 0; }
}

/* ── invite-link bar → one clean glass strip ───────────────────────────── */
#share-banner {
    background: rgba(10,10,16,.55) !important;
    border: 1px solid rgba(123,47,247,.2) !important;
    border-radius: var(--qe-radius) !important;
    gap: 7px;
}
#share-link { background: rgba(0,0,0,.4) !important; border: 1px solid rgba(0,212,255,.18) !important; border-radius: 8px !important; color: var(--color-secondary) !important; }
#copy-link-btn { background: var(--qe-grad) !important; border: none !important; color: #fff !important; border-radius: 8px !important; font-family: var(--font-display); font-size: .62rem; letter-spacing: .08em; }

/* ── message bubbles: refined entangled glass ──────────────────────────── */
.bubble {
    border-radius: 18px !important;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 18px rgba(0,0,0,.35) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
}
.bubble--sent {
    background: linear-gradient(135deg, rgba(123,47,247,.4), rgba(123,47,247,.14)) !important;
    border-color: rgba(123,47,247,.4) !important;
    box-shadow: 0 4px 20px rgba(123,47,247,.22) !important;
}
.bubble--recv {
    background: linear-gradient(135deg, rgba(0,212,255,.26), rgba(0,212,255,.08)) !important;
    border-color: rgba(0,212,255,.3) !important;
    box-shadow: 0 4px 20px rgba(0,212,255,.16) !important;
}

/* ── composer: a focused glass dock ────────────────────────────────────── */
#chat-form {
    background: linear-gradient(180deg, rgba(18,18,31,.9), rgba(12,12,20,.94)) !important;
    border-top: 1px solid rgba(123,47,247,.2) !important;
    backdrop-filter: var(--qe-blur);
}
#msg-input {
    background: rgba(10,10,16,.7) !important;
    border: 1px solid rgba(123,47,247,.25) !important;
    border-radius: 13px !important; color: var(--color-text) !important;
    transition: border-color .2s, box-shadow .2s !important;
}
#msg-input:focus { border-color: rgba(0,212,255,.6) !important; box-shadow: 0 0 0 3px rgba(0,212,255,.1) !important; outline: none; }
#chat-form button[type="submit"] {
    background: var(--qe-grad) !important; border: none !important; border-radius: 12px !important;
    color: #fff !important; font-family: var(--font-display); letter-spacing: .1em;
    box-shadow: 0 6px 20px rgba(123,47,247,.35); transition: transform .12s, filter .2s;
}
#chat-form button[type="submit"]:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ── sidebar polish ────────────────────────────────────────────────────── */
#sidebar, aside#sidebar { border-right: 1px solid rgba(123,47,247,.16) !important; background: linear-gradient(180deg, rgba(14,14,24,.7), rgba(10,10,16,.8)) !important; }
.sidebar-header h2 { letter-spacing: .16em; color: rgba(0,212,255,.75); }

/* ── recents list: align glow language ─────────────────────────────────── */
.recent-open { box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.recent-open:hover { box-shadow: var(--qe-glow-c), inset 0 1px 0 rgba(255,255,255,.04); }
.recents-title { color: rgba(0,212,255,.7) !important; }

/* ── reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .login-card, .login-card > *, .brand-title, .btn-generate::after { animation: none !important; }
}