/* ============================================================
   RESET & BASE
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

:focus { outline: none; }
:focus-visible {
    outline: var(--focus-ring) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    border-radius: 4px;
}

/* ELITE: Keyboard-only focus rings for interactive controls */
.action-icon-btn:focus-visible,
.send-btn:focus-visible,
.ws-btn:focus-visible,
.tab-btn:focus-visible,
.close-modal-btn:focus-visible,
.footer-opt:focus-visible,
.action-list-item:focus-visible,
.history-options-btn:focus-visible,
.back-btn:focus-visible,
.auth-provider-btn:focus-visible,
.auth-guest-btn:focus-visible,
.modal-submit-btn:focus-visible,
.tier-cta-btn:focus-visible {
    outline: var(--focus-ring) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    border-radius: 8px;
}

/* ELITE: Respect high-contrast preference */
@media (prefers-contrast: more) {
    :root {
        --text-muted: #d4dbe6;
        --text-dim: #a1b5cc;
        --border-muted: rgba(255, 255, 255, 0.22);
        --border-hover: rgba(255, 255, 255, 0.35);
    }
    body.light-theme {
        --text-muted: #1e293b;
        --text-dim: #334155;
        --border-muted: rgba(15, 23, 42, 0.20);
        --border-hover: rgba(15, 23, 42, 0.30);
    }
}

/* ============================================================
   UTILITY
   ============================================================ */
.material-symbols-rounded {
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    font-size: 24px;
}
.action-icon-btn span,
.action-list-item span,
.footer-opt span,
.sidebar-sub-box span {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
}

/* ELITE: Screen-reader-only utility */
.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Persistent Ambient Atmospheric Underlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--theme-surface-glow);
    pointer-events: none;
    z-index: 0;
}
/* Backdrop-filter: only where it was originally authored */
.auth-card,
.nexus-bubble,
.input-frame,
.features-menu,
.toast,
.modal-overlay,
#search-overlay {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

@supports not (backdrop-filter: blur(1px)) {
    .auth-card,
    .nexus-bubble,
    .input-frame,
    .features-menu,
    .toast {
        background: var(--bg-card) !important;
    }
}

/* ELITE: Respect reduced-transparency preference */
@media (prefers-reduced-transparency: reduce) {
    .glass,
    .auth-card,
    .nexus-bubble,
    .input-frame,
    .features-menu,
    .modal-overlay,
    #search-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: var(--bg-card) !important;
    }
}

/* ============================================================
   HIGH-PERFORMANCE MOTION PHYSICS ENGINE
   ============================================================ */
body {
    transition: background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ws-btn, .action-btn, .feature-item, .send-btn, .user-bubble, .nexus-bubble,
.auth-provider-btn, .auth-guest-btn, .workspace-card, .theme-option, .input-frame {
    transition: background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Interactions: snappy (200ms). Theme swap only: 600ms. */
.ws-btn, .action-btn, .send-btn, .feature-item,
.auth-provider-btn, .auth-guest-btn, .theme-option,
.input-frame, .workspace-card, .user-bubble, .nexus-bubble,
.tab-btn, .history-item, .footer-opt, .settings-item {
    transition: background-color 200ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color     200ms cubic-bezier(0.16, 1, 0.3, 1),
                color            200ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow       200ms cubic-bezier(0.16, 1, 0.3, 1),
                transform        200ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity          200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ELITE: Theme-switch guard — only apply 600ms paint transition during
   active theme swap to avoid paint-trap on every element entering the DOM.
   Toggle `html.theme-switching` from JS for ~600ms around the swap. */
html.theme-switching,
html.theme-switching body,
html.theme-switching body * {
    transition: background-color 600ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color     600ms cubic-bezier(0.16, 1, 0.3, 1),
                color            600ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hero-text h1,
.auth-brand span,
#workspace-selector h2,
.tier-name {
    letter-spacing: -0.025em;
}
.ws-feature-badge,
.tier-badge,
.sidebar-section-header,
.tier-feature-list .check,
.auth-divider,
.limit-chip {
    letter-spacing: 0.04em;
}
.skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    z-index: 9999;
    background: var(--bg-card);
    color: var(--text-main);
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-muted);
    transition: top 0.2s ease;
}
.skip-link:focus { top: 8px; }
.logout-btn:focus-visible,
.action-list-item.danger:focus-visible {
    outline-color: var(--accent-designer);
}

/* ============================================================
   COMPONENTS TIER A: SYSTEM INFRASTRUCTURE PANELS
   ============================================================ */

/* Main Adaptive Window Shell — merged from Tier A + Batches 4-5 */
.main-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.main-wrapper.visible {
    display: flex;
    opacity: 1;
}

/* ELITE: Failsafe reveal — if JS never fires `.visible` (script error,
   blocked execution, hydration failure), the shell would stay invisible
   forever. This auto-reveals at 2s so the app degrades to "usable"
   instead of "blank". Cancels instantly if `.visible` is applied. */
@media (prefers-reduced-motion: no-preference) {
    .main-wrapper:not(.visible) {
        animation: failsafeReveal 0.4s ease 2s forwards;
    }
}
@keyframes failsafeReveal {
    to { opacity: 1; }
}

/* ============================================================
   COMPONENTS TIER C: INTERIOR MICRO-CONTROLS & DIALOGS
   ============================================================ */

/* Tightly Locked Sharp Subelements (8px to 12px Architecture) */
.theme-option,
.tab-btn,
.action-icon-btn,
.file-chip,
.model-option,
.history-item,
.modal-input {
    border-radius: 10px; /* Locked Core Sweet Spot */
    border: 1px solid var(--border-muted);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}

.theme-option:hover,
.history-item:hover,
.model-option:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-hover);
    color: var(--text-main);
}

/* Premium Selection State Matrices */
.theme-option.active,
.tab-btn.active,
.model-option.active {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent-glow);
    color: var(--text-main);
    box-shadow: 0 0 20px -5px color-mix(in srgb, var(--accent-glow) 20%, transparent);
}
/* ============================================================
   ELITE TYPOGRAPHY — modern text-wrap for balanced headings
   and pretty body text. Silently ignored on unsupported engines.
   ============================================================ */
.hero-text h1,
.auth-brand span,
#workspace-selector h2,
.tier-name,
.modal-title,
.agent-trace-header {
    text-wrap: balance;
}
.nexus-bubble p,
.user-bubble,
.agent-final-body,
.tier-summary,
.ws-desc {
    text-wrap: pretty;
}

/* ============================================================
   ELITE: Content-visibility for long scroll lists — the browser
   skips layout/paint on off-screen items. Massive win on sidebars
   with hundreds of chat history entries. contain-intrinsic-size
   reserves space so scrollbar doesn't jump.
   ============================================================ */
.history-item {
    content-visibility: auto;
    contain-intrinsic-size: auto 44px;
}

/* ============================================================
   ELITE: Respect user's global accent-color preference.
   Native checkboxes/radios in tier matrix + knowledge form
   automatically pick up the OS accent where sensible.
   ============================================================ */
:root { accent-color: var(--accent-glow); }
body.workspace-data { accent-color: #10b981; }
body.workspace-design { accent-color: #ef4444; }
/* ============================================================
   ELITE BASE — scrollbar chrome, focus gems, ambient texture
   ============================================================ */
@layer elite {

/* Custom scrollbar — dark theme, elegant thumb, accent on hover.
   The scrollbar becomes a brand surface instead of an OS graft. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.10) transparent;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
        rgba(255,255,255,0.06) 0%,
        rgba(255,255,255,0.14) 100%);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background var(--duration-quick) var(--ease-smooth);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--accent-glow) 35%, transparent) 0%,
        color-mix(in srgb, var(--accent-pro) 35%, transparent) 100%);
    background-clip: padding-box;
    border: 2px solid transparent;
}
::-webkit-scrollbar-corner { background: transparent; }

/* Focus gems — glow halo replaces rigid outline for keyboard users.
   A double-ring: inner buffer (bg-deep) + outer accent bloom.
   Visually communicates "you are here" without a harsh rectangle. */
:focus-visible,
.action-icon-btn:focus-visible,
.send-btn:focus-visible,
.ws-btn:focus-visible,
.tab-btn:focus-visible,
.close-modal-btn:focus-visible,
.footer-opt:focus-visible,
.action-list-item:focus-visible,
.history-options-btn:focus-visible,
.back-btn:focus-visible,
.auth-provider-btn:focus-visible,
.auth-guest-btn:focus-visible,
.modal-submit-btn:focus-visible,
.tier-cta-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px var(--bg-deep),
        0 0 0 4px color-mix(in srgb, var(--focus-ring-color) 85%, transparent),
        0 0 24px -4px color-mix(in srgb, var(--focus-ring-color) 55%, transparent);
    border-radius: 8px;
    transition: box-shadow var(--duration-quick) var(--ease-smooth);
}

/* Ambient material texture — subtle noise overlay across the app.
   Uses blend-mode overlay so it reads as materiality, not dirt. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: var(--noise-overlay);
    opacity: 0.028;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: overlay;
    will-change: opacity;
}
@media (prefers-reduced-data: reduce) {
    body::after { display: none; }
}

/* Optical typography refinements — kerning, tabular numbers for stats,
   contextual ligatures for headings. This is invisible but reads as premium. */
body {
    font-feature-settings:
        'kern' 1,
        'liga' 1,
        'calt' 1,
        'ss01' 1;
    text-rendering: optimizeLegibility;
}
.profile-stat-value,
.tier-amount,
.regen-countdown,
.dropdown-email,
.quota-count {
    font-variant-numeric: tabular-nums;
}

/* Breathing ambient underlay — the surface is quietly alive.
   Cancels cleanly when the user prefers reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    body::before {
        animation: ambientBreath 12s ease-in-out infinite;
    }
    @keyframes ambientBreath {
        0%, 100% { opacity: 0.85; transform: scale(1);     }
        50%      { opacity: 1;    transform: scale(1.008); }
    }
}

} /* end @layer elite */