/* ================================================================
   LEONA — LIQUID GLASS · v8  "Sphère de clarté"
   DA : verre transparent quasi-invisible, rim iridescent,
   spéculaire propre, caustique douce. Matière pure.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────────── */
:root {
    /* Fond — vide cosmique doux (pas pur noir — le fond compte car on voit à travers) */
    --void:    #08090F;
    --void-1:  #0B0D16;
    --void-2:  #10121C;

    /* Iridescence — rose ↔ ice (les deux pôles de la sphère de référence) */
    --iris-rose: rgba(255, 170, 200, 0.85);   /* rose gauche */
    --iris-ice:  rgba(150, 220, 255, 0.85);   /* bleu-glacier droit */
    --iris-mint: rgba(100, 240, 200, 0.70);   /* menthe accent */

    /* Verre — quasi-transparent */
    --glass:        rgba(255, 255, 255, 0.032);
    --glass-hover:  rgba(255, 255, 255, 0.058);
    --glass-shine:  rgba(255, 255, 255, 0.55);   /* spéculaire fort */
    --glass-sheen:  rgba(255, 255, 255, 0.07);   /* nappe de lumière */

    /* Bord iridescent */
    --rim-bright:   rgba(255, 255, 255, 0.18);
    --rim-dim:      rgba(255, 255, 255, 0.06);

    /* Texte */
    --t1: #F0F4FF;
    --t2: #6878A0;
    --t3: #2E3858;

    /* Accent pur — ice (actions, boutons) */
    --accent:   #72C8FF;
    --accent-l: #B0E4FF;
    --accent-d: #3899DF;

    /* Système */
    --red:   #FF6B8A;
    --green: #5DFFE0;

    /* Rayons */
    --r1: 6px; --r2: 12px; --r3: 18px; --r4: 26px; --r5: 999px;

    /* Easing */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --organic:  cubic-bezier(0.37, 0, 0.63, 1);

    /* Typo */
    --serif: 'Instrument Serif', Georgia, serif;
    --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ── RESET ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; color-scheme: dark; }
body {
    font-family: var(--sans);
    background: var(--void);
    color: var(--t1);
    height: 100dvh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }

/* ================================================================
   VIDEO BACKGROUND
   ================================================================ */
.vid-bg {
    position: fixed; inset: 0; z-index: -2;
    pointer-events: none; overflow: hidden;
}
.vid-bg video {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    opacity: 0; will-change: opacity;
}

/* ================================================================
   NEBULA — Le fond qui compte (visible à travers le verre)
   Gradient soft rose-ice, fluides très doux, quasi-invisible
   ================================================================ */
.nebula-bg {
    position: fixed; inset: 0; z-index: -1;
    pointer-events: none; overflow: hidden;
}

/* Nappe rose — bas gauche */
.fluid-1 {
    position: absolute;
    width: 80vw; height: 80vw;
    left: -25vw; bottom: -10vw;
    background: radial-gradient(
        circle,
        rgba(255, 140, 180, 0.075) 0%,
        rgba(220,  90, 140, 0.032) 45%,
        transparent 70%
    );
    border-radius: 55% 45% 60% 40% / 48% 58% 42% 52%;
    animation: morph-1 28s var(--organic) infinite, drift-1 42s ease-in-out infinite alternate;
    will-change: border-radius, transform;
}
@keyframes morph-1 {
    0%   { border-radius: 55% 45% 60% 40% / 48% 58% 42% 52%; }
    33%  { border-radius: 42% 58% 45% 55% / 60% 38% 62% 40%; }
    66%  { border-radius: 58% 42% 52% 48% / 42% 62% 38% 58%; }
    100% { border-radius: 55% 45% 60% 40% / 48% 58% 42% 52%; }
}
@keyframes drift-1 {
    from { transform: translate(0,   0)   scale(1);    }
    to   { transform: translate(5vw, 4vw) scale(1.06); }
}

/* Nappe ice — haut droite */
.fluid-2 {
    position: absolute;
    width: 70vw; height: 70vw;
    right: -20vw; top: -15vw;
    background: radial-gradient(
        circle,
        rgba(100, 200, 255, 0.068) 0%,
        rgba( 60, 160, 240, 0.028) 50%,
        transparent 72%
    );
    border-radius: 45% 55% 38% 62% / 58% 42% 60% 40%;
    animation: morph-2 34s var(--organic) infinite, drift-2 52s ease-in-out infinite alternate;
    will-change: border-radius, transform;
}
@keyframes morph-2 {
    0%   { border-radius: 45% 55% 38% 62% / 58% 42% 60% 40%; }
    40%  { border-radius: 62% 38% 55% 45% / 40% 60% 42% 58%; }
    70%  { border-radius: 38% 62% 62% 38% / 52% 48% 54% 46%; }
    100% { border-radius: 45% 55% 38% 62% / 58% 42% 60% 40%; }
}
@keyframes drift-2 {
    from { transform: translate(0,    0)    scale(1);    }
    to   { transform: translate(-4vw,-5vw)  scale(1.05); }
}

/* Nappe centrale — lueur très diffuse */
.fluid-3 {
    position: absolute;
    width: 100vw; height: 60vw;
    left: 50%; top: 30%;
    transform: translateX(-50%);
    background: radial-gradient(
        ellipse 60% 50% at 50% 50%,
        rgba(140, 200, 255, 0.032) 0%,
        transparent 70%
    );
    animation: breathe-3 16s ease-in-out infinite;
}
@keyframes breathe-3 {
    0%,100% { opacity: 1; transform: translateX(-50%) scale(1); }
    50%      { opacity: 0.6; transform: translateX(-50%) scale(1.08); }
}

/* Nappe lumière dorsale */
.light-pool {
    position: absolute; inset: 0;
    background: radial-gradient(
        ellipse 75% 60% at 50% 42%,
        rgba(130, 190, 255, 0.025) 0%,
        transparent 65%
    );
}

/* Grain ultra-discret */
.noise-overlay {
    position: absolute; inset: 0;
    pointer-events: none;
    opacity: 0.022;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat; background-size: 200px 200px;
    mix-blend-mode: soft-light;
}

/* Vignette */
.vignette {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(
        ellipse 78% 78% at 50% 50%,
        transparent 28%,
        rgba(8, 9, 15, 0.40) 65%,
        rgba(8, 9, 15, 0.85) 100%
    );
}

/* ================================================================
   LIQUID GLASS v9 — "iOS 18 Crystal"
   Formule : ultra-transparent + aberration chromatique sur le rim
   + spéculaire propre + caustique colorée
   ================================================================ */

/* ── Tokens iridescence renforcés ── */
:root {
    --glass:        rgba(255, 255, 255, 0.022);
    --glass-hover:  rgba(255, 255, 255, 0.048);
    --glass-shine:  rgba(255, 255, 255, 0.60);
}

.liquid-glass {
    background: var(--glass);
    backdrop-filter: blur(52px) saturate(240%) brightness(1.08) contrast(1.02);
    -webkit-backdrop-filter: blur(52px) saturate(240%) brightness(1.08) contrast(1.02);

    border: 1px solid transparent;
    background-clip: padding-box;
    position: relative; overflow: hidden;

    box-shadow:
        /* Spéculaire supérieur — ligne lumière blanche nette */
        inset 0 1.5px 0 rgba(255, 255, 255, 0.26),
        /* Ombre intérieure basse douce */
        inset 0 -1px 0 rgba(0, 0, 0, 0.12),
        /* Depth externe */
        0 8px 48px rgba(0, 0, 0, 0.48),
        0 2px 10px rgba(0, 0, 0, 0.24),
        /* Caustique rose */
        0 24px 64px rgba(255, 140, 180, 0.028),
        /* Caustique ice */
        0 24px 64px rgba(100, 200, 255, 0.036),
        /* Aberration chromatique — ombre rouge gauche */
        -1px 0 8px rgba(255, 80, 120, 0.025),
        /* Aberration chromatique — ombre bleue droite */
        1px  0 8px rgba(80, 160, 255, 0.025);
}

/* Rim iridescent — aberration chromatique + gradient rotatif */
.liquid-glass::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        148deg,
        rgba(255, 255, 255, 0.34) 0%,
        rgba(200, 140, 255, 0.16) 18%,
        rgba(150, 220, 255, 0.14) 36%,
        rgba(255, 255, 255, 0.04) 52%,
        rgba(255, 140, 190, 0.12) 72%,
        rgba(180, 255, 220, 0.10) 88%,
        rgba(255, 255, 255, 0.22) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none; z-index: 1;
}

/* Nappe spéculaire — gradient directionnel */
.liquid-glass::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        172deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(220, 240, 255, 0.04) 35%,
        transparent 58%
    );
    pointer-events: none; z-index: 2;
}

/* ================================================================
   AUTH SCREEN
   ================================================================ */
#auth-screen {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}

.auth-card {
    width: 100%; max-width: 380px;
    border-radius: 32px;
    padding: 52px 40px 48px;
    display: flex; flex-direction: column; align-items: center; gap: 16px;

    /* Verre */
    background: var(--glass) !important;
    backdrop-filter: blur(72px) saturate(220%) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(72px) saturate(220%) brightness(1.08) !important;
    border: 1px solid transparent !important;
    background-clip: padding-box !important;

    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.10),
        0 40px 100px rgba(0, 0, 0, 0.62),
        0  0   80px rgba(100, 200, 255, 0.05),
        0  0  120px rgba(255, 140, 180, 0.03);

    animation: card-emerge 0.9s var(--ease-out) both;
    position: relative;
}
/* Rim iridescent sur la carte auth */
.auth-card::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 32px;
    padding: 1px;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(150, 220, 255, 0.18) 25%,
        rgba(255, 255, 255, 0.04) 50%,
        rgba(255, 170, 200, 0.14) 78%,
        rgba(255, 255, 255, 0.22) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none; z-index: 0;
}

@keyframes card-emerge {
    from { opacity: 0; transform: translateY(50px) scale(0.94); filter: blur(8px); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0);   }
}

.auth-badge {
    font-family: var(--sans);
    font-size: 8px; font-weight: 600; letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--accent-l);
    border-radius: var(--r5);
    padding: 5px 14px;
    margin-bottom: 4px;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    position: relative; z-index: 2;
}

.auth-icon {
    width: 68px; height: 68px;
    border-radius: 22px;
    display: flex; align-items: center; justify-content: center;
    margin: 4px 0 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 0 40px rgba(100,200,255,0.10);
    animation: icon-breathe 6s ease-in-out infinite;
    position: relative; z-index: 2;
}
@keyframes icon-breathe {
    0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 30px rgba(100,200,255,0.08); }
    50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 0 55px rgba(100,200,255,0.18), 0 0 80px rgba(255,140,180,0.06); }
}

.auth-title {
    font-family: var(--serif);
    font-size: 46px; font-weight: 400;
    line-height: 1.06; letter-spacing: -1px;
    color: var(--t1); text-align: center; margin-top: 4px;
    position: relative; z-index: 2;
}
.auth-title em {
    font-style: italic;
    background: linear-gradient(135deg,
        rgba(255, 200, 220, 0.95) 0%,
        rgba(200, 230, 255, 0.90) 50%,
        rgba(150, 245, 210, 0.85) 100%
    );
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.auth-sub {
    font-size: 11.5px; color: var(--t2); letter-spacing: 0.8px;
    margin-bottom: 4px; position: relative; z-index: 2;
}

.auth-field {
    width: 100%;
    background: rgba(255,255,255,0.025) !important;
    border-radius: var(--r2);
    border: 1px solid rgba(255,255,255,0.08) !important;
    display: flex; align-items: center; gap: 10px;
    padding: 0 16px;
    transition: border-color 0.3s, box-shadow 0.3s;
    margin-top: 4px;
    position: relative; z-index: 2;
}
.auth-field:focus-within {
    border-color: rgba(150, 220, 255, 0.35) !important;
    box-shadow: 0 0 0 3px rgba(100,200,255,0.06), 0 0 24px rgba(100,200,255,0.08) !important;
}
.auth-field input {
    width: 100%; background: transparent; border: none; outline: none;
    padding: 15px 0; font-family: var(--sans); font-size: 14px; color: var(--t1);
}
.auth-field input::placeholder { color: rgba(240,244,255,0.18); }

.cta-btn {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--r2);
    font-family: var(--sans); font-size: 13.5px; font-weight: 600;
    color: var(--t1); letter-spacing: 0.3px;
    cursor: pointer; margin-top: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 20px rgba(0,0,0,0.25);
    transition: transform 0.25s var(--spring), box-shadow 0.25s, background 0.25s;
    position: relative; overflow: hidden; z-index: 2;
}
.cta-btn::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 55%);
    pointer-events: none;
}
.cta-btn:hover {
    background: rgba(255,255,255,0.12);
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22),
                0 0 40px rgba(100,200,255,0.12), 0 8px 28px rgba(0,0,0,0.32);
}
.cta-btn:active { transform: scale(0.97); }

#auth-error {
    font-size: 12px; color: var(--red);
    min-height: 14px; text-align: center; margin-top: 2px; position: relative; z-index: 2;
}

/* ================================================================
   APP SHELL
   ================================================================ */
#app {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; height: 100dvh;
}

/* ── NAV ─────────────────────────────────────────────────────────── */
#nav {
    flex-shrink: 0;
    padding: calc(var(--safe-t) + 12px) 16px 12px;
    animation: slide-down 0.6s var(--ease-out) both;
}
@keyframes slide-down {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

.nav-pill {
    max-width: 700px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; padding: 10px 20px;
    border-radius: var(--r5);
}
.nav-left  { display: flex; align-items: center; gap: 10px; }
.nav-center { display: flex; justify-content: center; }
.nav-right  { display: flex; justify-content: flex-end; }

.nav-logo {
    width: 28px; height: 28px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.nav-wordmark {
    font-family: var(--serif);
    font-size: 17px; font-weight: 400;
    color: var(--t1); letter-spacing: 0.2px;
}

#speaker-badge {
    font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
    color: var(--accent-l); text-transform: uppercase;
    padding: 4px 12px; border-radius: var(--r5);
    min-width: 60px; text-align: center;
}

.status-indicator {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: var(--r5);
    font-size: 11px; font-weight: 500; color: var(--t2);
}
.status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--t3); transition: background 0.4s, box-shadow 0.4s;
}
.status-dot.connected    { background: var(--green);  box-shadow: 0 0 8px rgba(93,255,224,0.55); }
.status-dot.thinking     { background: var(--accent);  animation: dot-think 1.2s ease-in-out infinite; }
.status-dot.disconnected { background: var(--red); }
@keyframes dot-think {
    0%,100% { opacity: 1; transform: scale(1);   }
    50%      { opacity: 0.4; transform: scale(0.7); }
}

/* ── FEED ────────────────────────────────────────────────────────── */
#messages {
    flex: 1; overflow-y: auto; padding: 0 16px 8px;
    scroll-behavior: smooth; scrollbar-width: none;
    display: flex; flex-direction: column;
}
#messages::-webkit-scrollbar { display: none; }

/* ================================================================
   ORB v11 — "8K Liquid Glass"
   Rendu Three.js sur canvas — styles CSS minimalistes
   Seuls les wrappers et états drop-shadow sont définis ici.
   Tout le rendu visuel est dans orb.js (WebGL).
   ================================================================ */

.hero-welcome {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; position: relative;
    min-height: 0;
}

/* ── Conteneur Three.js ── */
.orb-wrapper {
    position: relative;
    width: 280px; height: 280px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    animation: orb-enter 1.8s var(--ease-out) 0.1s both;
    will-change: transform, filter;
    overflow: visible;
    transition: filter 0.7s var(--organic);
}

/* ── Halo CSS externe — caustique douce derrière le canvas ── */
.orb-wrapper::before {
    content: '';
    position: absolute;
    width: 340px; height: 340px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(120, 40, 220, 0.22)  0%,
        rgba(160, 60, 255, 0.12)  28%,
        rgba(200, 90, 200, 0.06)  52%,
        transparent 72%
    );
    filter: blur(38px);
    animation: halo-breathe 12s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
    will-change: transform, opacity;
}
@keyframes halo-breathe {
    0%,100% { transform: scale(1.00); opacity: 0.85; }
    45%      { transform: scale(1.18); opacity: 1.00; }
    70%      { transform: scale(0.92); opacity: 0.70; }
}

/* ── Caustique sous l'orbe ── */
.orb-wrapper::after {
    content: '';
    position: absolute;
    width: 200px; height: 28px;
    bottom: 0px; left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(
        ellipse 100% 100% at 50% 30%,
        rgba(120, 30, 200, 0.30) 0%,
        rgba(180, 70, 240, 0.12) 40%,
        transparent 72%
    );
    filter: blur(14px);
    animation: caustic-ground 8s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}
@keyframes caustic-ground {
    0%,100% { transform: translateX(-50%) scaleX(1.00); opacity: 0.80; }
    40%      { transform: translateX(-50%) scaleX(1.30); opacity: 1.00; }
    72%      { transform: translateX(-50%) scaleX(0.80); opacity: 0.55; }
}

/* ── Enter animation ── */
@keyframes orb-enter {
    from { opacity: 0; transform: scale(0.38) translateY(40px); filter: blur(28px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    filter: blur(0);    }
}

/* ── États — drop-shadow CSS + halo couleur ── */
.orb-wrapper.idle {
    filter: drop-shadow(0 0 28px rgba(120, 40, 220, 0.38));
}
.orb-wrapper.listening {
    filter: drop-shadow(0 0 32px rgba(80, 180, 255, 0.55));
}
.orb-wrapper.listening::before {
    background: radial-gradient(
        circle,
        rgba(60, 150, 255, 0.22)  0%,
        rgba(100, 200, 255, 0.12) 30%,
        transparent 68%
    );
}
.orb-wrapper.thinking {
    filter: drop-shadow(0 0 30px rgba(240, 180, 40, 0.48));
}
.orb-wrapper.thinking::before {
    background: radial-gradient(
        circle,
        rgba(240, 160, 20, 0.22)  0%,
        rgba(255, 200, 80, 0.12)  30%,
        transparent 68%
    );
}
.orb-wrapper.speaking {
    filter: drop-shadow(0 0 36px rgba(255, 50, 200, 0.58));
    animation: orb-enter 1.8s var(--ease-out) 0.1s both,
               speak-pulse 0.9s ease-in-out infinite;
}
.orb-wrapper.speaking::before {
    background: radial-gradient(
        circle,
        rgba(220, 40, 180, 0.26)  0%,
        rgba(255, 90, 220, 0.14)  30%,
        transparent 68%
    );
    animation: halo-breathe 0.85s ease-in-out infinite;
}
@keyframes speak-pulse {
    0%,100% { filter: drop-shadow(0 0 32px rgba(255, 50, 200, 0.52)); }
    50%      { filter: drop-shadow(0 0 52px rgba(255, 80, 240, 0.78)); }
}

/* ── Canvas Three.js ── */
#orb-canvas {
    display: block;
    margin: 0 auto;
    border-radius: 50%;
}

/* ── HÉRO TITRE ── */
.hero-title {
    font-family: var(--serif);
    font-size: clamp(44px, 9vw, 70px);
    font-weight: 400; line-height: 1.05; letter-spacing: -1.5px;
    color: var(--t1);
    animation: hero-in 0.9s var(--ease-out) 0.3s both;
}
@keyframes hero-in {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-italic {
    display: block; font-style: italic;
    background: linear-gradient(
        135deg,
        rgba(255, 200, 220, 0.95) 0%,
        rgba(200, 230, 255, 0.90) 50%,
        rgba(150, 245, 215, 0.85) 100%
    );
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; font-size: 1.05em;
}
.hero-sub {
    font-size: 13px; color: var(--t2); letter-spacing: 1.2px;
    text-transform: uppercase; font-weight: 400;
    animation: hero-in 0.9s var(--ease-out) 0.45s both;
}

/* ── QUICK ACTIONS ── */
.quick-actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center; margin-top: 12px;
    animation: hero-in 0.9s var(--ease-out) 0.6s both;
}
.qa-chip {
    padding: 9px 16px; border-radius: var(--r5);
    font-size: 12.5px; font-weight: 500; color: var(--t1);
    cursor: pointer; border: none;
    background: rgba(255,255,255,0.035) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    transition: background 0.25s, border-color 0.25s, transform 0.2s, box-shadow 0.25s;
    position: relative; overflow: hidden;
}
.qa-chip::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg,
        rgba(255,255,255,0.12) 0%,
        rgba(255,255,255,0.02) 50%,
        rgba(255,170,200,0.06) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
}
.qa-chip:hover {
    background: rgba(255,255,255,0.065) !important;
    border-color: rgba(150,220,255,0.20) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12),
                0 4px 20px rgba(0,0,0,0.22);
    transform: translateY(-1px);
}
.qa-chip:active { transform: scale(0.96); }

/* ── MARQUEE ── */
.marquee-wrap {
    width: 100%; overflow: hidden; margin-top: 28px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
}
.marquee-track {
    display: flex; gap: 0; white-space: nowrap;
    animation: marquee-move 30s linear infinite;
}
@keyframes marquee-move {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.mq-logo {
    font-family: var(--serif); font-style: italic;
    font-size: 12px; letter-spacing: 2px;
    color: rgba(200, 220, 255, 0.22); padding: 0 18px; text-transform: uppercase;
}
.mq-sep {
    color: rgba(200, 220, 255, 0.10); font-size: 12px; line-height: 1; align-self: center;
}

/* ── MESSAGES ── */
.msg-row {
    display: flex; margin: 8px 0;
    max-width: 700px; margin-left: auto; margin-right: auto;
    animation: msg-in 0.35s var(--ease-out) both;
}
@keyframes msg-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.msg-row.user      { justify-content: flex-end; }
.msg-row.assistant { justify-content: flex-start; }

.msg-bubble {
    max-width: 82%; padding: 12px 16px;
    border-radius: 18px; font-size: 14px; line-height: 1.6;
    word-break: break-word;
}
.msg-row.user .msg-bubble {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 4px 20px rgba(0,0,0,0.28);
    color: var(--t1);
    border-radius: 18px 18px 5px 18px;
}
.msg-row.assistant .msg-bubble {
    background: rgba(255,255,255,0.032);
    backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 20px rgba(0,0,0,0.25);
    color: var(--t1);
    border-radius: 18px 18px 18px 5px;
}

/* Markdown */
.msg-bubble h1,.msg-bubble h2,.msg-bubble h3 {
    font-family: var(--serif); font-weight: 400;
    color: rgba(200,232,255,0.92); margin: 12px 0 6px; line-height: 1.2;
}
.msg-bubble h1 { font-size: 22px; }
.msg-bubble h2 { font-size: 18px; }
.msg-bubble h3 { font-size: 15px; }
.msg-bubble ul,.msg-bubble ol { padding-left: 18px; margin: 6px 0; }
.msg-bubble li { margin: 3px 0; }
.msg-bubble code {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 4px; padding: 1px 6px;
    font-size: 12.5px; color: rgba(180,230,255,0.90);
}
.msg-bubble pre {
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--r2); padding: 14px; overflow-x: auto; margin: 8px 0;
}
.msg-bubble pre code { background: none; border: none; padding: 0; font-size: 12px; }
.msg-bubble strong { color: rgba(200,235,255,0.95); font-weight: 600; }
.msg-bubble a { color: var(--accent-l); text-decoration: underline; text-decoration-color: rgba(150,220,255,0.30); }
.msg-bubble blockquote {
    border-left: 2px solid rgba(255,255,255,0.12);
    padding-left: 12px; color: var(--t2); margin: 6px 0; font-style: italic;
}

/* Typing */
#typing-indicator { display: flex; max-width: 700px; margin: 4px auto; }
.typing-pill {
    padding: 12px 18px; border-radius: 18px 18px 18px 5px;
    display: flex; gap: 6px; align-items: center;
    background: rgba(255,255,255,0.032) !important;
    backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.t-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(200,232,255,0.60);
    animation: t-bounce 1.4s ease-in-out infinite;
}
.t-dot:nth-child(2) { animation-delay: 0.2s; }
.t-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes t-bounce {
    0%,60%,100% { transform: translateY(0);   opacity: 0.38; }
    30%          { transform: translateY(-5px); opacity: 1; }
}

/* Screenshot */
.msg-screenshot {
    margin-top: 8px; cursor: pointer;
    border-radius: var(--r2); overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    transition: transform 0.2s, border-color 0.2s;
    max-width: 280px;
}
.msg-screenshot:hover { transform: scale(1.02); border-color: rgba(150,220,255,0.22); }
.msg-screenshot img { display: block; width: 100%; }

/* ── COMPOSER ── */
#composer-zone {
    flex-shrink: 0;
    padding: 12px 16px calc(var(--safe-b) + 16px);
    animation: slide-up 0.6s var(--ease-out) 0.1s both;
}
@keyframes slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.composer-pill {
    max-width: 700px; margin: 0 auto;
    display: flex; align-items: flex-end; gap: 10px;
    padding: 10px 10px 10px 16px;
    border-radius: var(--r4);
    background: rgba(255,255,255,0.034) !important;
    backdrop-filter: blur(48px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(48px) saturate(200%) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(0,0,0,0.08),
        0 8px 32px rgba(0,0,0,0.38),
        0 20px 60px rgba(255,140,180,0.025),
        0 20px 60px rgba(100,200,255,0.018);
    transition: border-color 0.3s, box-shadow 0.3s;
    position: relative; overflow: hidden;
}
/* Rim composer */
.composer-pill::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit; padding: 1px;
    background: linear-gradient(145deg,
        rgba(255,255,255,0.16) 0%,
        rgba(150,220,255,0.07) 40%,
        rgba(255,255,255,0.02) 65%,
        rgba(255,170,200,0.07) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none; z-index: 0;
}
.composer-pill:focus-within {
    border-color: rgba(200, 230, 255, 0.18) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        0 8px 32px rgba(0,0,0,0.38),
        0 0 60px rgba(100,200,255,0.06) !important;
}

#input {
    flex: 1; background: transparent; border: none; outline: none; resize: none;
    font-family: var(--sans); font-size: 14px; line-height: 1.55;
    color: var(--t1); max-height: 140px; overflow-y: auto;
    scrollbar-width: none; position: relative; z-index: 1;
}
#input::-webkit-scrollbar { display: none; }
#input::placeholder { color: rgba(240,244,255,0.20); }

.comp-mic, .comp-send {
    flex-shrink: 0; width: 36px; height: 36px;
    border-radius: var(--r5); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s var(--spring), background 0.2s, box-shadow 0.2s;
    position: relative; z-index: 1;
}
.comp-mic {
    background: rgba(255,255,255,0.05);
    color: rgba(200,230,255,0.75);
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.comp-mic:hover { background: rgba(255,255,255,0.10); transform: scale(1.08); }
.comp-mic.active {
    background: rgba(93, 255, 220, 0.15);
    color: var(--green);
    border: 1px solid rgba(93,255,220,0.22);
    animation: mic-pulse 1.8s ease-in-out infinite;
}
@keyframes mic-pulse {
    0%,100% { box-shadow: 0 0 14px rgba(93,255,220,0.30); }
    50%      { box-shadow: 0 0 28px rgba(93,255,220,0.65); }
}
.comp-send {
    background: rgba(255,255,255,0.07);
    color: rgba(210,240,255,0.90);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 2px 8px rgba(0,0,0,0.20);
}
.comp-send:hover {
    background: rgba(255,255,255,0.14);
    transform: scale(1.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22),
                0 0 28px rgba(150,220,255,0.14);
}
.comp-send:active { transform: scale(0.92); }
.comp-send:disabled { background: rgba(255,255,255,0.03); cursor: not-allowed; box-shadow: none; }

.composer-hint {
    max-width: 700px; margin: 6px auto 0;
    font-size: 10.5px; color: var(--t3); text-align: center; letter-spacing: 0.3px;
}

/* ── BARRE VOCALE ── */
#voice-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    padding: 0 16px calc(var(--safe-b) + 16px);
    z-index: 100; display: none; flex-direction: column; align-items: center; gap: 10px;
}
.voice-pill {
    max-width: 700px; width: 100%; padding: 16px 20px;
    border-radius: var(--r4);
    background: rgba(255,255,255,0.040) !important;
    backdrop-filter: blur(48px) saturate(220%) !important;
    -webkit-backdrop-filter: blur(48px) saturate(220%) !important;
    border: 1px solid rgba(93,255,220,0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12),
                0 0 60px rgba(93,255,220,0.08),
                0 20px 60px rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.voice-label { font-size: 12px; color: rgba(180,245,230,0.90); font-weight: 500; flex: 1; text-align: center; }
.voice-waveform { display: flex; gap: 3px; align-items: center; height: 28px; }
.voice-bar-item {
    width: 3px; background: rgba(93,255,220,0.75); border-radius: 2px; min-height: 3px;
    animation: wave-bar 1.2s ease-in-out infinite; opacity: 0.7;
}
.voice-bar-item:nth-child(1) { animation-delay: 0s; }
.voice-bar-item:nth-child(2) { animation-delay: 0.15s; }
.voice-bar-item:nth-child(3) { animation-delay: 0.30s; }
.voice-bar-item:nth-child(4) { animation-delay: 0.45s; }
.voice-bar-item:nth-child(5) { animation-delay: 0.60s; }
@keyframes wave-bar {
    0%,100% { height: 4px; opacity: 0.4; }
    50%      { height: 22px; opacity: 1; }
}
.voice-stop {
    width: 34px; height: 34px; border-radius: var(--r5);
    background: rgba(255,100,130,0.10); border: 1px solid rgba(255,100,130,0.20);
    color: var(--red); display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; transition: background 0.2s, transform 0.2s;
}
.voice-stop:hover { background: rgba(255,100,130,0.22); transform: scale(1.08); }

/* ── SCREENSHOT MODAL ── */
#sc-modal {
    display: none; position: fixed; inset: 0; z-index: 1000;
    background: rgba(8,9,15,0.88); backdrop-filter: blur(28px);
    align-items: center; justify-content: center;
}
#sc-modal.open { display: flex; }
.sc-close {
    position: absolute; top: 20px; right: 20px;
    width: 36px; height: 36px; border-radius: var(--r5);
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--t2);
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.sc-close:hover { background: rgba(255,255,255,0.08) !important; color: var(--t1); }
.sc-inner { max-width: 90vw; max-height: 85vh; }
.sc-inner img { max-width: 100%; max-height: 85vh; border-radius: var(--r3); }

/* ── UTILITAIRES ── */
.fade-in { animation: hero-in 0.4s var(--ease-out) both; }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.08);
    border-top-color: rgba(180,230,255,0.70);
    border-radius: 50%;
    animation: spin 0.8s linear infinite; display: inline-block;
}

/* ================================================================
   MODEL TOGGLE — Claude ↔ Gemma4 local
   ================================================================ */

.model-toggle-bar {
    display: flex;
    justify-content: center;
    padding: 6px 0 2px;
}

.model-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px 5px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(12px);
    color: rgba(255,255,255,0.65);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}
.model-toggle-btn:hover {
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.90);
    border-color: rgba(255,255,255,0.18);
}

.model-icon { font-size: 12px; }
.model-label { font-size: 11px; }

/* Dot indicateur d'état */
.model-toggle-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(140,200,255,0.60);
    box-shadow: 0 0 6px rgba(140,200,255,0.50);
    transition: background 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}

/* État actif : Gemma4 local */
.model-toggle-btn.local-active {
    border-color: rgba(180,100,255,0.35);
    background: rgba(120,50,200,0.18);
    color: rgba(220,180,255,0.95);
}
.model-toggle-btn.local-active .model-toggle-dot {
    background: rgba(180,100,255,0.85);
    box-shadow: 0 0 8px rgba(180,100,255,0.60);
    animation: dot-pulse 2s ease-in-out infinite;
}

/* État erreur : Ollama inaccessible */
.model-toggle-btn.local-error {
    border-color: rgba(255,80,80,0.30);
    color: rgba(255,120,120,0.80);
}
.model-toggle-btn.local-error .model-toggle-dot {
    background: rgba(255,80,80,0.70);
    box-shadow: 0 0 6px rgba(255,80,80,0.40);
}

/* Chargement */
.model-toggle-btn.loading {
    opacity: 0.6;
    pointer-events: none;
}

@keyframes dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.6; transform: scale(0.75); }
}