/* Font loaded via layout.html <link> for better performance */

@property --narrow-sentinel {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 100vi;
}


@layer reset, base, components, utilities, theme, overrides;

/* ============================================
   CROSS-DOCUMENT VIEW TRANSITIONS
   Animate page sections on navigation
   ============================================ */
@view-transition {
    navigation: auto;
}

/* Nav persists across pages — morph instead of fade */
nav {
    view-transition-name: main-nav;
}

/* Main content gets a named transition */
#main-content {
    view-transition-name: page-content;
}

/* Page header animates independently */
.page-header {
    view-transition-name: page-header;
}

/* Default old-page exit: fade + blur out fast */
::view-transition-old(page-content) {
    animation: vt-fade-out 0.15s ease-in forwards;
}

/* New page entrance: slide up + fade in */
::view-transition-new(page-content) {
    animation: vt-slide-up 0.4s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

/* Page header: slide in from left */
::view-transition-old(page-header) {
    animation: vt-fade-out 0.12s ease-in forwards;
}

::view-transition-new(page-header) {
    animation: vt-slide-right 0.45s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

/* Nav: crossfade smoothly (no slide) */
::view-transition-old(main-nav),
::view-transition-new(main-nav) {
    animation-duration: 0.25s;
}

@keyframes vt-fade-out {
    to {
        opacity: 0;
        filter: blur(4px);
    }
}

@keyframes vt-slide-up {
    from {
        opacity: 0;
        transform: translateY(24px);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes vt-slide-right {
    from {
        opacity: 0;
        transform: translateX(-20px);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

/* ============================================
   LANDING ↔ SIGNIN — element-level morphing
   Matching elements morph position/size/content
   ============================================ */
.hero h1,
.signin-info h1 {
    view-transition-name: page-title;
}

.hero .tagline,
.signin-info .tagline {
    view-transition-name: page-subtitle;
}

.hero .cta-button.primary,
.signin-card {
    view-transition-name: action-focus;
}

.hero-visual {
    view-transition-name: hero-visual;
}

/* Title: morph position, size & crossfade text */
::view-transition-group(page-title) {
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Subtitle: slightly faster */
::view-transition-group(page-subtitle) {
    animation-duration: 0.45s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Button ↔ Card: expand/contract morph */
::view-transition-group(action-focus) {
    animation-duration: 0.55s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

::view-transition-old(action-focus) {
    animation-duration: 0.2s;
    animation-timing-function: ease-in;
}

::view-transition-new(action-focus) {
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hero visual: scale + blur away on exit, scale in on enter */
::view-transition-old(hero-visual) {
    animation: vt-scale-out 0.3s ease-in forwards;
}

::view-transition-new(hero-visual) {
    animation: vt-scale-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

@keyframes vt-scale-out {
    to {
        opacity: 0;
        transform: scale(0.85);
        filter: blur(6px);
    }
}

@keyframes vt-scale-in {
    from {
        opacity: 0;
        transform: scale(0.85);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

/* JS page-transition classes (landing ↔ signin) */
#main-content.page-exit {
    animation: vt-fade-out 0.2s ease-in forwards;
}

#main-content.page-enter {
    animation: vt-slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Skip per-element CSS entrance animations when content arrived via
   JS transition (the page-level animation handles it instead) */
#main-content[data-vt-loaded] :is(
    .hero-content, .hero-visual,
    .signin-info, .signin-card
) {
    animation: none;
}

/* ============================================
   SHARED COMPONENTS
   Layout patterns reused across all pages
   ============================================ */
@layer components {
    .page {
        padding: 1rem;
    }

    /* === GRADIENT MESH BACKGROUND === */
    .page-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
    }

    .page-bg-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(120px);
    }

    .page-bg-orb--1 {
        width: var(--orb-1-size, 600px);
        height: var(--orb-1-size, 600px);
        top: var(--orb-1-top, -200px);
        right: var(--orb-1-right, -100px);
    }

    .page-bg-orb--2 {
        width: var(--orb-2-size, 500px);
        height: var(--orb-2-size, 500px);
        bottom: var(--orb-2-bottom, -150px);
        left: var(--orb-2-left, -150px);
    }

    .page-bg-orb--3 {
        width: var(--orb-3-size, 350px);
        height: var(--orb-3-size, 350px);
        top: var(--orb-3-top, 40%);
        left: var(--orb-3-left, 30%);
    }

    /* === PAGE HEADER === */
    .page-header {
        position: relative;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-lg);
        margin-block-end: var(--space-xl);
        padding-block-end: var(--space-xl);

        .header-left,
        .header-title {
            display: flex;
            align-items: center;
            gap: var(--space-lg);
        }

        .header-actions {
            display: flex;
            flex-wrap: wrap;
            gap: var(--wire-gap);
            align-items: center;
        }

        h1 {
            font-family: var(--font-display);
            font-size: 1.6rem;
            font-weight: 800;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            margin-block-end: var(--space-3xs);
        }

        .subtitle,
        .timestamp {
            font-size: var(--fs-small);
        }
    }

    .page-header-icon,
    .page-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        inline-size: 56px;
        block-size: 56px;
        border-radius: 16px;
        flex-shrink: 0;
    }

    /* === CHAT SIDEBAR === */
    .chat-sidebar {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        padding: var(--space-md);
        border-radius: 16px;
    }

    .sidebar-header {
        display: flex;
        gap: var(--space-sm);
        align-items: center;

        strong {
            display: block;
            font-size: var(--fs-small);
        }

        p {
            font-size: var(--fs-xsmall);
            opacity: 0.7;
        }
    }

    .ai-avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        inline-size: 36px;
        block-size: 36px;
        border-radius: 10px;
        flex-shrink: 0;
    }

    .chat-card {
        padding: var(--space-sm) var(--space-md);
        border-radius: 14px;

        p {
            font-size: var(--fs-xsmall);
            line-height: 1.6;
            margin-block-end: var(--space-xs);

            &:last-child {
                margin-block-end: 0;
            }
        }
    }

    .suggested-actions {
        h4 {
            font-size: var(--fs-xsmall);
            font-weight: var(--fw-semibold);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-block-end: var(--space-sm);
            opacity: 0.6;
        }

        .action-chips {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .chip {
            padding: 6px var(--space-sm);
            border-radius: 10px;
            font-size: var(--fs-xsmall);
            cursor: pointer;
            text-align: start;
            transition: all 0.15s ease;
        }
    }

    .chat-input {
        display: flex;
        align-items: flex-end;
        gap: var(--space-xs);
        padding: 8px 8px 8px var(--space-sm);
        border-radius: 14px;

        textarea {
            flex: 1;
            border: none;
            background: transparent;
            padding: 6px 0;
            resize: none;
            font-family: inherit;
            font-size: var(--fs-xsmall);
            line-height: 1.5;
            overflow-y: auto;
            color: inherit;

            &::placeholder {
                color: var(--text-secondary);
            }

            &:focus {
                outline: none;
            }
        }

        .send-button {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            inline-size: 32px;
            block-size: 32px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.15s ease;
        }
    }

}

/* Shared entrance keyframes */
@keyframes entrance-slide-right {
    from {
        opacity: 0;
        transform: translateX(-24px);
        filter: blur(3px);
    }
}

@keyframes entrance-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(2px);
    }
}

@keyframes entrance-fade-in {
    from { opacity: 0; }
}

/* ============================================
   PROFESSIONAL HR/RECRUITMENT THEME
   Clean, trustworthy, empowering recruiters
   ============================================ */
@layer theme {
    /* ============================================
       THEME TOKENS — auto-switch via color-scheme
       light-dark(light, dark)
       ============================================ */
    :root {
        color-scheme: dark;

        /* Typography */
        --font-primary: 'DM Sans', system-ui, -apple-system, sans-serif;
        --font-heading: 'Outfit', 'DM Sans', system-ui, sans-serif;
        --font-display: 'Orbitron', 'Outfit', system-ui, sans-serif;
        --font-mono: 'Roboto Mono', monospace;

        /* Rounded corners */
        --wire-radius: 0.5rem;

        /* Font sizes - Refined scale */
        --fs-xxl: 2.25rem;
        --fs-xl: 1.5rem;
        --fs-large: 1.125rem;

        /* Constant tokens */
        --button-text-color: oklch(100% 0 0);
        --color-white: oklch(100% 0 0);

        /* Background */
        --bg-primary: light-dark(oklch(98% 0.005 250), oklch(15% 0.01 250));
        --bg-secondary: light-dark(oklch(95% 0.008 250), oklch(20% 0.015 250));

        /* Text */
        --text-primary: light-dark(oklch(20% 0.01 250), oklch(95% 0.005 250));
        --text-secondary: light-dark(oklch(45% 0.01 250), oklch(65% 0.01 250));

        /* Primary accent */
        --accent-primary: light-dark(oklch(50% 0.18 270), oklch(65% 0.15 270));
        --accent-secondary: light-dark(oklch(45% 0.15 275), oklch(55% 0.12 275));
        --accent-glow: oklch(from var(--accent-primary) l c h / 0.2);

        /* Warm accent */
        --accent-warm: light-dark(oklch(60% 0.2 25), oklch(70% 0.18 25));
        --accent-warm-hover: light-dark(oklch(55% 0.18 25), oklch(65% 0.16 25));

        /* Status colors */
        --color-success: light-dark(oklch(55% 0.18 145), oklch(70% 0.15 145));
        --color-warning: light-dark(oklch(60% 0.18 85), oklch(75% 0.15 85));
        --color-info: light-dark(oklch(50% 0.15 230), oklch(65% 0.12 230));
        --color-error: light-dark(oklch(55% 0.22 25), oklch(65% 0.2 25));

        /* Borders */
        --border-color: light-dark(oklch(85% 0.005 250), oklch(30% 0.01 250));
        --wire-border: 1px solid light-dark(oklch(82% 0.008 250), oklch(28% 0.015 250));

        /* Surfaces */
        --surface-elevated: light-dark(oklch(100% 0 0), oklch(22% 0.015 250));
        --surface-base: light-dark(oklch(96% 0.005 250), oklch(18% 0.01 250));
        --surface-sunken: light-dark(oklch(92% 0.008 250), oklch(12% 0.008 250));
        --surface-deep: light-dark(oklch(94% 0.005 250), oklch(12% 0.015 260 / 0.6));

        /* Input styling */
        --input-bg: light-dark(oklch(100% 0 0), oklch(18% 0.01 250));
        --input-border-color: light-dark(oklch(80% 0.008 250), oklch(32% 0.015 250));
        --input-focus-shadow: oklch(from var(--accent-primary) l c h / 0.2);
        --input-bg-darker: light-dark(oklch(96% 0.005 250), oklch(9.8% 0.008 263.9));

        /* Shadows */
        --shadow-sm: 0 1px 2px light-dark(oklch(0% 0 0 / 0.08), oklch(0% 0 0 / 0.1));
        --shadow-md: 0 4px 12px light-dark(oklch(0% 0 0 / 0.1), oklch(0% 0 0 / 0.15));
        --shadow-lg: 0 8px 24px light-dark(oklch(0% 0 0 / 0.12), oklch(0% 0 0 / 0.2));
        --shadow-color: light-dark(oklch(0% 0 0 / 0.12), oklch(0% 0 0 / 0.65));

        /* Border variants */
        --border-subtle: light-dark(oklch(75% 0.02 260 / 0.3), oklch(40% 0.05 260 / 0.3));
        --border-muted: light-dark(oklch(80% 0.015 260 / 0.4), oklch(30% 0.03 260 / 0.5));
        --border-faint: light-dark(oklch(85% 0.01 260 / 0.4), oklch(25% 0.02 260 / 0.5));
        --border-section: light-dark(oklch(78% 0.015 260 / 0.3), oklch(35% 0.04 260 / 0.3));

        /* Highlights */
        --highlight-subtle: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.05));
        --highlight-soft: light-dark(oklch(0% 0 0 / 0.08), oklch(100% 0 0 / 0.2));

        /* Glass tints — white in dark, black in light */
        --glass-tint: light-dark(oklch(0% 0 0), oklch(100% 0 0));
    }

    html[data-theme="light"] { color-scheme: light; }

    /* Clean background */
    html {
        background: var(--bg-primary);
        min-block-size: 100dvb;
    }

    body {
        font-family: var(--font-primary);
        color: var(--text-primary);
        line-height: 1.6;
    }

    /* Links - Professional indigo */
    a {
        color: var(--accent-primary);
        transition: color var(--time-fast) var(--ease-out);

        &:hover {
            color: oklch(from var(--accent-primary) calc(l + 0.1) c h);
        }
    }

    /* Smooth transitions */
    *, *::before, *::after {
        transition-property: background-color, border-color, box-shadow, color;
        transition-duration: 0.15s;
        transition-timing-function: ease-out;
    }

    /* Primary buttons - Gradient coral CTA with glow */
    .primary-button,
    .submit-button,
    .cta-button.primary {
        background: linear-gradient(135deg,
            light-dark(oklch(55% 0.22 25), oklch(65% 0.2 25)),
            light-dark(oklch(50% 0.24 15), oklch(60% 0.22 15)));
        border: none;
        color: white;
        font-family: var(--font-heading);
        font-weight: var(--fw-semibold);
        padding: var(--space-sm) var(--space-xl);
        border-radius: 100px;
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        text-decoration: none;
        cursor: pointer;
        box-shadow: 0 4px 20px light-dark(oklch(55% 0.22 25 / 0.25), oklch(65% 0.2 25 / 0.3)),
                    inset 0 1px 0 oklch(100% 0 0 / 0.1);

        &:hover {
            box-shadow: 0 6px 28px light-dark(oklch(55% 0.22 25 / 0.35), oklch(65% 0.2 25 / 0.45)),
                        inset 0 1px 0 oklch(100% 0 0 / 0.15);
            transform: translateY(-2px);
        }

        svg {
            transition: transform 0.25s ease-out;
        }

        &:hover svg {
            transform: translateX(3px);
        }
    }

    /* Secondary buttons - Glass outlined pill */
    .secondary-button,
    .cta-button:not(.primary) {
        background: oklch(from var(--accent-primary) l c h / 0.06);
        border: 1px solid oklch(from var(--accent-primary) l c h / 0.3);
        color: var(--accent-primary);
        font-family: var(--font-heading);
        font-weight: var(--fw-medium);
        font-size: var(--fs-small);
        padding: var(--space-sm) var(--space-xl);
        border-radius: 100px;
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        text-decoration: none;
        cursor: pointer;
        backdrop-filter: blur(8px);
        transition: all 0.25s ease-out;

        &:hover {
            background: oklch(from var(--accent-primary) l c h / 0.12);
            border-color: oklch(from var(--accent-primary) l c h / 0.5);
            box-shadow: 0 0 16px oklch(from var(--accent-primary) l c h / 0.15);
            transform: translateY(-1px);
        }
    }

    /* Cards - Glassmorphism panels */
    .card {
        background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.04));
        backdrop-filter: blur(12px);
        border: 1px solid oklch(from var(--glass-tint) l c h / 0.08);
        box-shadow:
            var(--shadow-sm),
            inset 0 1px 0 oklch(from var(--glass-tint) l c h / 0.05);
        border-radius: var(--wire-radius);
    }

    .card-header {
        h2 { color: var(--text-primary); }
        .card-hint { color: var(--text-secondary); }
    }

    .form-group label {
        color: var(--text-secondary);
    }

    /* Inputs - Clean with focus ring */
    input, textarea, select {
        background: var(--input-bg);
        border: 1px solid var(--input-border-color);
        color: var(--text-primary);
        border-radius: var(--wire-radius);

        &::placeholder {
            color: var(--text-secondary);
        }

        &:focus {
            outline: none;
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px var(--input-focus-shadow);
        }
    }

    /* Tags/badges - Subtle colored pills */
    .tag {
        background: oklch(from var(--accent-primary) l c h / 0.15);
        border: 1px solid oklch(from var(--accent-primary) l c h / 0.3);
        color: oklch(from var(--accent-primary) calc(l + 0.1) calc(c - 0.03) h);
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-medium);
    }

    .status-badge {
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-semibold);
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .chip {
        background: var(--surface-base);
        border: 1px solid var(--border-color);
        color: var(--text-primary);

        &:hover {
            background: var(--surface-elevated);
            border-color: var(--accent-primary);
        }
    }

    /* Progress bars - Gradient */
    .progress {
        background: linear-gradient(90deg, var(--accent-primary), var(--accent-warm));
        border-radius: 2px;
    }

    /* Table rows - Subtle hover */
    tbody tr:hover {
        background: var(--surface-elevated);
    }

    /* Headers - Space Grotesk for punch */
    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-heading);
    }

    h1 {
        color: var(--text-primary);
        font-weight: var(--fw-bold);
        letter-spacing: -0.02em;
        line-height: 1.2;
    }

    h2, h3 {
        color: var(--text-primary);
        font-weight: var(--fw-semibold);
    }

    /* View tabs - Clean pill style */
    .view-tab.active,
    .tab.active {
        background: var(--accent-primary);
        color: var(--button-text-color);
        font-weight: var(--fw-medium);
    }

    .view-tab,
    .tab {
        color: var(--text-secondary);

        &:not(.active):hover {
            background: var(--surface-elevated);
            color: var(--text-primary);
        }
    }

    /* Page header - Clean border */
    .page-header {
        padding-block-end: var(--space-lg);
        margin-block-end: var(--space-xl);
        border-block-end: 1px solid oklch(from var(--glass-tint) l c h / 0.06);

        &::after {
            display: none;
        }
    }

    /* Gradient title underlines — page h1 only */
    .page-header h1,
    .signin-info h1 {
        position: relative;

        &::after {
            content: '';
            position: absolute;
            inset-inline-start: 0;
            inset-block-end: -4px;
            inline-size: 100%;
            block-size: 3px;
            border-radius: 3px;
            background: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-warm) 55%, transparent 100%);
            box-shadow: 0 0 12px oklch(from var(--accent-primary) l c h / 0.4);
        }
    }

    /* Title accent bars */
    .company-title h2,
    .brief-header h2,
    .story-title,
    .dialog-header h2,
    .section-header h3,
    .insight-card .label {
        position: relative;

        &::after {
            content: '';
            position: absolute;
            inset-inline-start: 0;
            inset-block-end: -4px;
            inline-size: 48px;
            block-size: 2px;
            border-radius: 2px;
            background: linear-gradient(90deg, var(--accent-primary), var(--accent-warm));
        }
    }

    /* Background orbs - Shared gradient mesh theme */
    .page-bg-orb--1 { background: light-dark(oklch(55% 0.25 270 / 0.07), oklch(55% 0.25 270 / 0.18)); }
    .page-bg-orb--2 { background: light-dark(oklch(65% 0.22 25 / 0.02), oklch(65% 0.22 25 / 0.05)); }
    .page-bg-orb--3 { background: light-dark(oklch(60% 0.18 180 / 0.02), oklch(60% 0.18 180 / 0.05)); }

    /* Page header icon - gradient */
    .page-header-icon,
    .page-header .page-icon {
        background: linear-gradient(135deg,
            light-dark(oklch(from var(--accent-primary) l c h / 0.15), oklch(from var(--accent-primary) l c h / 0.25)),
            light-dark(oklch(from var(--accent-warm) l c h / 0.08), oklch(from var(--accent-warm) l c h / 0.15)));
        border: 1px solid light-dark(oklch(from var(--accent-primary) l c h / 0.2), oklch(from var(--accent-primary) l c h / 0.35));
        color: var(--accent-primary);
        box-shadow: 0 4px 18px light-dark(oklch(from var(--accent-primary) l c h / 0.1), oklch(from var(--accent-primary) l c h / 0.2));
    }

    /* Chat sidebar - Glass */
    .chat-sidebar {
        background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));
        border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
        backdrop-filter: blur(20px);
    }

    .ai-avatar {
        background: oklch(from var(--accent-primary) l c h / 0.15);
        border: 1px solid oklch(from var(--accent-primary) l c h / 0.25);
        color: var(--accent-primary);
    }

    .page-header .subtitle,
    .page-header .timestamp {
        color: var(--text-secondary);
    }

    /* Feature icons - Indigo tinted */
    .feature-icon,
    .section-icon,
    .page-icon,
    .step-number,
    .chapter-number {
        background: oklch(from var(--accent-primary) l c h / 0.15);
        border: 1px solid oklch(from var(--accent-primary) l c h / 0.3);
        color: var(--accent-primary);
    }

    /* Stats styling */
    .stat-value {
        color: var(--accent-warm) !important;
        font-weight: var(--fw-bold);
        font-family: var(--font-heading);
    }

    /* Nav - fallback (nav.css overrides with gradient) */
    nav {
        background: var(--surface-sunken);
    }

    /* Signin card */
    .signin-card {
        background: var(--surface-elevated);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-lg);
    }

    /* Table styling */
    .positions-table {
        th {
            color: var(--text-secondary);
            font-weight: var(--fw-semibold);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            font-size: var(--fs-xsmall);
            background: var(--surface-base);
        }

        td {
            border-color: var(--border-color);
        }
    }

    /* Labels */
    .label {
        color: var(--text-secondary);
        font-weight: var(--fw-medium);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    /* Chat sidebar - AI assistant feel */
    .chat-card {
        background: oklch(from var(--accent-primary) l c h / 0.06);
        border: 1px solid oklch(from var(--accent-primary) l c h / 0.12);
    }

    .suggested-actions .chip {
        background: oklch(from var(--glass-tint) l c h / 0.04);
        border: 1px solid oklch(from var(--glass-tint) l c h / 0.08);

        &:hover {
            background: oklch(from var(--accent-primary) l c h / 0.08);
            border-color: oklch(from var(--accent-primary) l c h / 0.2);
            color: var(--accent-primary);
        }
    }

    .chat-input {
        background: oklch(from var(--glass-tint) l c h / 0.04);
        border: 1px solid oklch(from var(--glass-tint) l c h / 0.08);

        &:focus-within {
            border-color: oklch(from var(--accent-primary) l c h / 0.3);
            box-shadow: 0 0 0 2px oklch(from var(--accent-primary) l c h / 0.06);
        }

        .send-button {
            background: var(--accent-primary);
            color: var(--button-text-color);
            border: none;

            &:hover {
                background: light-dark(oklch(45% 0.16 270), oklch(60% 0.14 270));
                transform: scale(1.05);
            }
        }
    }

    /* Theme toggle — single animated button */
    .theme-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        inline-size: 44px;
        block-size: 44px;
        border-radius: 50%;
        border: 1.5px solid oklch(90% 0.16 85 / 0.5);
        background: oklch(90% 0.16 85 / 0.1);
        backdrop-filter: blur(12px);
        cursor: pointer;
        color: oklch(95% 0.14 80);
        box-shadow: 0 0 10px oklch(90% 0.16 85 / 0.15);
        transition: all 0.25s ease;

        &:hover {
            color: oklch(95% 0.18 85);
            border-color: oklch(85% 0.18 85 / 0.6);
            background: oklch(85% 0.18 85 / 0.18);
            box-shadow: 0 0 16px oklch(85% 0.18 85 / 0.25);
        }

        .theme-icon {
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        &:active .theme-icon {
            transform: scale(0.85);
        }

        /* Sun/moon icon swap */
        .icon-sun {
            transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .icon-moon {
            opacity: 0;
            transform: rotate(-45deg) scale(0.6);
            transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
    }

    /* Light mode: show moon, hide sun */
    html[data-theme="light"] .theme-toggle-btn {
        color: oklch(45% 0.18 270);
        border-color: oklch(45% 0.15 270 / 0.3);
        background: oklch(45% 0.15 270 / 0.06);

        &:hover {
            color: oklch(40% 0.2 270);
            border-color: oklch(40% 0.2 270 / 0.4);
            background: oklch(40% 0.2 270 / 0.1);
            box-shadow: 0 0 12px oklch(40% 0.2 270 / 0.15);
        }

        .icon-sun {
            opacity: 0;
            transform: rotate(45deg) scale(0.6);
        }
        .icon-moon {
            opacity: 1;
            transform: rotate(0) scale(1);
        }
    }
}

@layer reset {

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

    html {
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
        container-type: size;
        container-name: root;
        block-size: 100vb;
    }

    body {
        margin: 0;
        line-height: 1.5;
        text-rendering: optimizeSpeed;
        min-block-size: 100cqb;
    }

    img,
    picture,
    svg {
        display: block;
        max-inline-size: 100%;
    }

    input,
    button,
    textarea,
    select {
        font: inherit;
        appearance: none;
    }

    dialog {
        color: inherit;
    }

    /* Custom elements default to inline — make them block */
    expand-panel {
        display: block;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: break-word;
        margin: 0;
    }

    a {
        text-decoration: none;
    }

    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    /* Remove animations for people who've turned them off */
    @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;
        }
    }
}

@layer base {
    :root {
        /* Breakpoints & measures */
        --breakpoint: 600px;
        --measure-narrow: 35ch;
        --measure: 60ch;
        --measure-wide: 90ch;
        --full: stretch;

        /* Font Sizes (base scale) */
        --fs-medium: 1.05rem;
        --fs-body: 1rem;
        --fs-small: 0.95rem;
        --fs-xsmall: 0.9rem;
        --fs-xxsmall: 0.85rem;
        --fs-tiny: 0.8rem;

        /* Font Weights */
        --fw-regular: 400;
        --fw-medium: 500;
        --fw-semibold: 600;
        --fw-bold: 700;
        --fw-extrabold: 800;

        /* Timing */
        --time-fast: 0.2s;
        --time-medium: 0.3s;
        --time-slow: 0.4s;
        --time-slower: 0.5s;
        --time-slowest: 0.6s;
        --time-animation: 1.3s;

        /* Easing */
        --ease-standard: ease;
        --ease-out: ease-out;
        --ease-in-out: ease-in-out;
        --ease-bounce: cubic-bezier(0.23, 1, 0.32, 1);

        /* Spacing (based on --wire-gap) */
        --wire-gap: 0.75rem;
        --space-4xs: calc(var(--wire-gap) * 0.12);
        --space-3xs: calc(var(--wire-gap) * 0.33);
        --space-2xs: calc(var(--wire-gap) * 0.25);
        --space-xs: calc(var(--wire-gap) * 0.5);
        --space-sm: calc(var(--wire-gap) * 0.67);
        --space-compact: calc(var(--wire-gap) * 0.83);
        --space-md: calc(var(--wire-gap) * 1.17);
        --space-base: calc(var(--wire-gap) * 1.33);
        --space-lg: calc(var(--wire-gap) * 1.67);
        --space-xl: calc(var(--wire-gap) * 2);
        --space-2xl: calc(var(--wire-gap) * 2.67);
        --space-3xl: calc(var(--wire-gap) * 3.33);

        /* Glow spread sizes */
        --glow-spread-sm: calc(var(--wire-gap) * 1.25);
        --glow-spread-md: calc(var(--wire-gap) * 2.5);
        --glow-spread-lg: calc(var(--wire-gap) * 5);

        --corner-accent-size: 0.5rem;
    }
}