/* ============================================================
   Quantum Bubble Chat — Design polish (v3)
   Copyright (c) 2026 Derek King / Qubble Labs LLC.
   All Rights Reserved. PROPRIETARY AND CONFIDENTIAL.

   This file is loaded AFTER style.css and qbc-features.css.
   It introduces:
   - extended design tokens (spacing / motion / radius scales)
   - prefers-reduced-motion support
   - accessible :focus-visible rings
   - refined selection + scrollbar
   - subtle ambient lighting on bubbles
   - micro-interactions on interactive elements
   - tighter type scale + better letterforms via OpenType features
   - hardened dark-only guarantees (forced-colors resilience)
   ============================================================ */

:root {
    /* Spacing scale (multiples of 4) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;

    /* Radius scale */
    --r-1: 6px;
    --r-2: 10px;
    --r-3: 14px;
    --r-4: 20px;
    --r-5: 28px;

    /* Motion — one tuned easing per intent */
    --ease-out:    cubic-bezier(0.25, 1, 0.5, 1);     /* enter */
    --ease-in:     cubic-bezier(0.6, 0, 0.75, 0);     /* exit */
    --ease-in-out: cubic-bezier(0.5, 0, 0.3, 1);      /* neutral */
    --ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.25); /* overshoot */

    --dur-1: 120ms;
    --dur-2: 180ms;
    --dur-3: 260ms;
    --dur-4: 380ms;

    /* Elevation (z shadows) */
    --elev-1: 0 2px 6px rgba(0,0,0,0.2), 0 0 1px rgba(123,47,247,0.1);
    --elev-2: 0 6px 18px rgba(0,0,0,0.35), 0 0 1px rgba(123,47,247,0.15);
    --elev-3: 0 14px 36px rgba(0,0,0,0.5), 0 0 1px rgba(0,212,255,0.2);
    --elev-4: 0 24px 56px rgba(0,0,0,0.6), 0 0 2px rgba(123,47,247,0.25);

    /* Focus ring */
    --focus-ring: 0 0 0 2px rgba(0,212,255,0.75), 0 0 0 4px rgba(0,212,255,0.25);

    color-scheme: dark;
}

/* Dark-only — reject system forced-light overrides wherever possible */
@media (prefers-color-scheme: light) {
    :root { color-scheme: dark; }
    html, body { background: var(--color-void) !important; color: var(--color-text) !important; }
}

/* Typography polish — enable OpenType features + better line-height + variable weight */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv11', 'ss01', 'ss02', 'ss03', 'kern', 'liga';
    font-variant-ligatures: contextual;
    font-size: 16px;
}
body {
    font-synthesis: none;
    line-height: 1.5;
}

/* Selection */
::selection {
    background: rgba(123, 47, 247, 0.4);
    color: #ffffff;
    text-shadow: 0 0 8px rgba(0,212,255,0.6);
}

/* Scrollbar — Firefox + WebKit, overlay-style */
html {
    scrollbar-color: rgba(123,47,247,0.35) transparent;
    scrollbar-width: thin;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(123,47,247,0.45), rgba(0,212,255,0.35));
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(123,47,247,0.7), rgba(0,212,255,0.6));
    background-clip: padding-box;
}

/* Accessible focus — keyboard users get a visible ring, mouse users don't */
*:focus { outline: none; }
*:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--r-2);
}

/* Bubbles: add a subtle ambient rim that shifts with cursor proximity (via JS hook) */
.bubble {
    will-change: transform, filter;
    transition:
        transform var(--dur-2) var(--ease-spring),
        filter var(--dur-2) var(--ease-out),
        box-shadow var(--dur-3) var(--ease-out);
    contain: layout paint;
}

/* Improved sender chip inside bubble */
.bubble .sender {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bubble--sent .sender::before,
.bubble--recv .sender::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    opacity: 0.8;
    flex: 0 0 6px;
}

/* Gift & photo bubbles inherit the polish */
.bubble--gift, .bubble--photo { contain: layout paint; }

/* Buttons — uniform press feedback */
button, .btn-generate, .hbtn, .wallet-btn, .qbc-icon-btn, .qbc-chip, .qbc-gift-tile, [data-copy] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
button:active,
.btn-generate:active,
.hbtn:active,
.wallet-btn:active,
.qbc-icon-btn:active,
.qbc-chip:active {
    transform: translateY(0.5px) scale(0.985);
    transition-duration: 80ms;
}

/* Header chrome — subtle aurora accent */
header {
    position: relative;
}
header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(123,47,247,0.5), rgba(0,212,255,0.5), transparent);
    opacity: 0.6;
    filter: blur(0.5px);
}

/* Chat form — sharpen send button feel */
#chat-form button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
#chat-form button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.18) 45%, rgba(255,255,255,0.24) 50%, rgba(255,255,255,0.18) 55%, transparent 100%);
    transform: translateX(-120%);
    transition: transform 650ms var(--ease-out);
    z-index: -1;
}
#chat-form button:hover::before { transform: translateX(120%); }

/* Login card — floating 3D hint on mouse move */
.login-card {
    perspective: 1200px;
}

/* Credit chip — richer animated border when low */
.qbc-chip[data-low="1"] {
    position: relative;
}
.qbc-chip[data-low="1"]::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 10px;
    padding: 2px;
    background: conic-gradient(from 0deg, rgba(244,114,182,0.6), rgba(123,47,247,0.6), rgba(0,212,255,0.6), rgba(244,114,182,0.6));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: qbc-conic-spin 3s linear infinite;
    pointer-events: none;
}
@keyframes qbc-conic-spin { to { transform: rotate(360deg); } }

/* Gift tile hover — subtle 3D lift */
.qbc-gift-tile {
    transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.qbc-gift-tile:hover { transform: translateY(-3px) scale(1.04) rotate(-0.5deg); }

/* Modal entrance */
.qbc-overlay.open > .qbc-modal,
.qbc-overlay.open > .wallet-modal {
    animation: qbc-modal-in var(--dur-4) var(--ease-spring) backwards;
}
@keyframes qbc-modal-in {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Toast-style system messages */
.system-message {
    animation: qbc-toast-in var(--dur-3) var(--ease-out);
}
@keyframes qbc-toast-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 0.6; transform: translateY(0); }
}

/* Reduced motion — a single override that tames EVERY animation */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .bubble { animation: none !important; }
    .quantum-bg::before, .quantum-bg::after, .quantum-nebula { animation: none !important; }
}

/* Accessible hidden text for screen readers */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* Skeleton loader token — usable across modules */
.qb-skeleton {
    background: linear-gradient(90deg, rgba(123,47,247,0.08) 0%, rgba(0,212,255,0.14) 50%, rgba(123,47,247,0.08) 100%);
    background-size: 400% 100%;
    animation: qb-skel-shimmer 1.4s var(--ease-in-out) infinite;
    border-radius: var(--r-2);
}
@keyframes qb-skel-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Mobile tweaks — larger tap targets */
@media (max-width: 768px) {
    .hbtn, .qbc-icon-btn, button {
        min-height: 38px;
    }
    .bubble {
        padding: 12px 16px;
        font-size: 0.96rem;
    }
    #messages { gap: 10px; padding: 14px 14px 6px; }
}

/* Hover bloom — only on non-touch devices */
@media (hover: hover) and (pointer: fine) {
    .bubble:hover { filter: brightness(1.15) saturate(1.1); }
}