/* ============================================================
   Lea Web UI — Base: Tokens, Reset, Screens, Responsive
   ============================================================ */

:root {
    --bg:           #060611;
    --bg-surface:   #0c0c1c;
    --bg-elevated:  #161230;
    --bg-input:     rgba(255, 255, 255, 0.03);
    --bg-msg-lea:   rgba(255, 255, 255, 0.04);
    --bg-msg-user:  #6c5ce7;
    --bg-code:      #08081a;

    --text:         #e8e8f0;
    --text-muted:   rgba(232, 232, 240, 0.5);
    --text-subtle:  rgba(232, 232, 240, 0.28);

    --accent:       #7c6bf5;
    --accent-dim:   rgba(124, 107, 245, 0.15);
    --accent-glow:  rgba(124, 107, 245, 0.4);

    --border:       rgba(255, 255, 255, 0.06);
    --border-focus: rgba(124, 107, 245, 0.6);

    --error:        #e85555;
    --error-bg:     rgba(232, 85, 85, 0.08);
    --error-border: rgba(232, 85, 85, 0.25);

    --radius-sm:    8px;
    --radius-md:    14px;
    --radius-lg:    20px;
    --radius-pill:  999px;

    --ease-out:    cubic-bezier(0.25, 1, 0.5, 1);
    --ease-spring: cubic-bezier(0.19, 1, 0.22, 1);
    --t-fast:  0.15s;
    --t-base:  0.25s;
    --t-slow:  0.45s;

    --header-h: 60px;
    --footer-h: 72px;
    --sidebar-w: 340px;
    --topic-rail-w: 72px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* hidden must always hide, even when a component sets display: flex/grid */
[hidden] { display: none !important; }

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    height: 100%;
    background: var(--bg);
}

body {
    background: none;
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.5;
    height: 100%;
    min-height: 100dvh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ── Screens ────────────────────────────────────────────────── */
.screen {
    position: fixed;
    inset: 0;
    transition: opacity var(--t-slow) var(--ease-out);
}
.screen[hidden] { display: none !important; }

/* ── Shared Animations ──────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    15%      { transform: translateX(-8px); }
    30%      { transform: translateX(8px); }
    45%      { transform: translateX(-6px); }
    60%      { transform: translateX(6px); }
    75%      { transform: translateX(-3px); }
    90%      { transform: translateX(3px); }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --topic-rail-w: 58px;
        /* Sidebar fills rest of viewport so rail+sidebar = full width */
        --sidebar-w: calc(100vw - var(--topic-rail-w));
    }
}

@media (max-width: 480px) {
    :root {
        --topic-rail-w: 50px;
        --sidebar-w: calc(100vw - var(--topic-rail-w));
    }
    .msg__bubble { max-width: 84%; }
    .login__card { padding: 0 20px; }
    .login__avatar, .login__avatar-wrap { width: 96px; height: 96px; }
    .login__name { font-size: 1.5rem; }
    /* Compact topic rail: emoji only, hide names */
    .topic-rail__name { display: none; }
    .topic-rail__item { padding: 8px 2px; }
    .topic-rail__emoji { font-size: 1.1rem; }
}

@supports (padding: env(safe-area-inset-bottom)) {
    .chat-input-bar { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}