/* ==========================================================================
   Lexi mit lebendigen Augen
   Grundbild ohne Augen (images/lexi/*_base.webp), Augen und Leuchten
   als eigene Ebenen darüber. Die Visier-Maske hält das Leuchten im Visier.
   Alle Maße in % bzw. cqw, damit Lexi in jeder Größe gleich aussieht
   (Crashkurs, KI-Chat, Testseite).
   Varianten (data-variant): Standard-Lexi und "teacher" (Brille, Crashkurs).
   Die Brille liegt als eigenes Bild (.lexi-front) über den Augen.
   Gesteuert über lexi-avatar.js (Klassen + CSS-Variablen):
     data-mood   neutral | happy | sad | thinking | surprised | closed
     --lx, --ly  Blickrichtung, je -1 … 1
     --lexi-level  Lautstärke beim Sprechen, 0 … 1
   ========================================================================== */

.lexi-avatar {
    --lx: 0;
    --ly: 0;
    --lexi-level: 0;
    --lexi-eye: #c8fcff;
    --lexi-eye-edge: #4fe0ff;
    --lexi-ring: 20, 232, 255;
    --lexi-glow: 0, 172, 228;
    /* Geometrie in % des Bildes (Standard-Lexi, 1230 × 1278) */
    --eye-top: 27.15%;
    --eye-w: 7.8%;
    --eye-h: 11.19%;
    --eye-l: 36.51%;
    --eye-r: 55.98%;
    --look-x: 4.2cqw;
    --look-y: 3.2cqw;
    --dots-top: 42.6%;
    --ant-lx: 23.74%;
    --ant-ly: 9.15%;
    --ant-rx: 76.59%;
    --ant-ry: 9.15%;
    --lexi-mask: url('/images/lexi/lexi_visor_mask.png');
    position: relative;
    display: block;
    aspect-ratio: 1230 / 1278;
    container-type: inline-size;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Lehrer-Lexi mit Brille (1000 × 1000), Augen sitzen hinter den Gläsern */
.lexi-avatar[data-variant="teacher"] {
    --lexi-ring: 10, 190, 255;
    --lexi-glow: 0, 150, 240;
    --eye-top: 29.2%;
    --eye-w: 7.9%;
    --eye-h: 11.2%;
    --eye-l: 35.4%;
    --eye-r: 56.4%;
    --look-x: 2.6cqw;
    --look-y: 2.2cqw;
    --dots-top: 46.3%;
    --ant-lx: 23.3%;
    --ant-ly: 8.1%;
    --ant-rx: 77.0%;
    --ant-ry: 7.8%;
    --lexi-mask: url('/images/lexi/lexi_teacher_visor_mask.png');
    aspect-ratio: 1 / 1;
}

.lexi-avatar > .lexi-base,
.lexi-avatar > .lexi-front {
    display: block;
    width: 100%;
    height: 100%;
}

.lexi-avatar > .lexi-front {
    position: absolute;
    inset: 0;
}

/* ---------- Visier ---------- */
.lexi-face {
    position: absolute;
    inset: 0;
    -webkit-mask: var(--lexi-mask) 0 0 / 100% 100% no-repeat;
    mask: var(--lexi-mask) 0 0 / 100% 100% no-repeat;
}

/* Blickrichtung: Augen samt Leuchten wandern im Visier */
.lexi-eyes {
    position: absolute;
    inset: 0;
    transform: translate(calc(var(--lx) * var(--look-x)), calc(var(--ly) * var(--look-y)));
    transition: transform 0.32s cubic-bezier(0.3, 1.35, 0.5, 1);
}

.lexi-eye {
    position: absolute;
    top: var(--eye-top);
    width: var(--eye-w);
    height: var(--eye-h);
    /* Sprechen: Augen werden mit der Stimme etwas größer */
    scale: calc(1 + var(--lexi-level) * 0.05) calc(1 + var(--lexi-level) * 0.12);
}

.lexi-eye-l { left: var(--eye-l); }
.lexi-eye-r { left: var(--eye-r); }

/* Lichtschein auf dem Visier (im Original Teil des Bildes) */
.lexi-eye-glow {
    position: absolute;
    inset: -106% -164%;
    border-radius: 50%;
    background: radial-gradient(closest-side,
        rgba(var(--lexi-glow), 0.9) 0%,
        rgba(var(--lexi-glow), 0.72) 37%,
        rgba(var(--lexi-glow), 0.22) 61%,
        rgba(var(--lexi-glow), 0.05) 85%,
        rgba(var(--lexi-glow), 0) 100%);
    mix-blend-mode: screen;
    opacity: calc(0.82 + var(--lexi-level) * 0.35);
    transition: opacity 0.25s ease;
}

/* Lid: hier läuft das Blinzeln, unabhängig von Stimmung und Stimme.
   Der weiche Schein sitzt als drop-shadow hier und nicht als box-shadow
   am Kern: So folgt er der (per clip-path geformten) Augenform, statt vom
   clip-path rechteckig abgeschnitten zu werden. */
.lexi-eye-lid {
    position: absolute;
    inset: 0;
    filter: drop-shadow(0 0 1.1cqw rgba(var(--lexi-ring), 0.75)) drop-shadow(0 0 2.6cqw rgba(var(--lexi-glow), 0.55));
}

.lexi-eye-core {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(closest-side,
        #d2fdff 0%,
        var(--lexi-eye) 88%,
        #a8f6ff 97%,
        var(--lexi-eye-edge) 100%);
    /* gesättigter Cyan-Ring wie im Original. Bleibt innerhalb der
       clip-path-Reserve von 40 %, damit nichts abgeschnitten wird. */
    box-shadow:
        0 0 0.4cqw 0.9cqw rgba(var(--lexi-ring), 0.95),
        0 0 1cqw 1.2cqw rgba(var(--lexi-ring), 0.45);
    clip-path: polygon(-40% -40%, 140% -40%, 140% 140%, -40% 140%);
    transition: transform 0.28s cubic-bezier(0.3, 1.3, 0.5, 1),
                clip-path 0.28s ease, opacity 0.2s ease;
}

/* Fröhliche Bögen ^^ (wie lexi_blink.webp), als SVG-Pfad mit runden Enden */
.lexi-eye-arc {
    position: absolute;
    left: -46%;
    width: 192%;
    top: 14%;
    height: 64%;
    filter: drop-shadow(0 0 0.7cqw rgba(120, 240, 255, 0.95));
    opacity: 0;
    transform: translateY(18%) scaleY(0.4);
    transition: opacity 0.18s ease, transform 0.28s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.lexi-eye-arc svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.lexi-eye-arc path {
    fill: none;
    stroke: var(--lexi-eye);
    stroke-width: 12;
    stroke-linecap: round;
}

/* Denk-Punkte unten im Visier */
.lexi-dots {
    position: absolute;
    left: 50.08%;
    top: var(--dots-top);
    display: flex;
    /* Mindestgrößen, damit die Punkte auch bei kleinen Lexis (44 px) sichtbar bleiben */
    gap: max(1.6cqw, 2px);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.lexi-dots i {
    width: max(2.2cqw, 3px);
    height: max(2.2cqw, 3px);
    border-radius: 50%;
    background: var(--lexi-eye);
    box-shadow: 0 0 1.2cqw rgba(var(--lexi-glow), 0.9);
}

/* ---------- Antennen leuchten beim Sprechen ---------- */
.lexi-antenna {
    position: absolute;
    width: 9%;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(200, 245, 255, 0.95), rgba(var(--lexi-glow), 0.55) 45%, rgba(var(--lexi-glow), 0) 100%);
    mix-blend-mode: screen;
    opacity: calc(var(--lexi-level) * 1.1);
}

.lexi-antenna-l { left: var(--ant-lx); top: var(--ant-ly); }
.lexi-antenna-r { left: var(--ant-rx); top: var(--ant-ry); }

/* ==========================================================================
   Stimmungen
   ========================================================================== */

/* Fröhlich: Ovale klappen zu Bögen */
.lexi-avatar[data-mood="happy"] .lexi-eye-core {
    opacity: 0;
    transform: scaleY(0.25) translateY(-40%);
}

.lexi-avatar[data-mood="happy"] .lexi-eye-arc {
    opacity: 1;
    transform: none;
}

.lexi-avatar[data-mood="happy"] .lexi-eye-glow {
    opacity: 0.62;
}

/* Traurig: Außenseiten hängen, Blick nach unten, Licht gedimmt.
   Schräge Kante läuft von (0 %, 36 %) nach (100 %, 4 %), über die
   Reserve von 40 % hinaus verlängert. */
.lexi-avatar[data-mood="sad"] .lexi-eye-l .lexi-eye-core {
    clip-path: polygon(-40% 48.8%, 140% -8.8%, 140% 140%, -40% 140%);
    transform: scaleY(0.88);
}

.lexi-avatar[data-mood="sad"] .lexi-eye-r .lexi-eye-core {
    clip-path: polygon(-40% -8.8%, 140% 48.8%, 140% 140%, -40% 140%);
    transform: scaleY(0.88);
}

.lexi-avatar[data-mood="sad"] .lexi-eye-glow {
    opacity: 0.55;
}

/* Nachdenklich: leicht zusammengekniffen, Punkte laufen */
.lexi-avatar[data-mood="thinking"] .lexi-eye-core {
    transform: scaleY(0.72);
    clip-path: polygon(-40% 18%, 140% 18%, 140% 140%, -40% 140%);
}

.lexi-avatar[data-mood="thinking"] .lexi-dots {
    opacity: 1;
}

.lexi-avatar[data-mood="thinking"] .lexi-dots i {
    animation: lexi-dot 1.1s ease-in-out infinite;
}

.lexi-avatar[data-mood="thinking"] .lexi-dots i:nth-child(2) { animation-delay: 0.16s; }
.lexi-avatar[data-mood="thinking"] .lexi-dots i:nth-child(3) { animation-delay: 0.32s; }

@keyframes lexi-dot {
    0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
    30%           { opacity: 1;    transform: translateY(-40%); }
}

/* Überrascht: große Augen, helleres Licht */
.lexi-avatar[data-mood="surprised"] .lexi-eye-core {
    transform: scale(1.14, 1.12);
}

.lexi-avatar[data-mood="surprised"] .lexi-eye-glow {
    opacity: 1;
}

/* Augen zu: schmale Striche, Licht fast aus (Passwort-Feld) */
.lexi-avatar[data-mood="closed"] .lexi-eye-core {
    transform: translateY(18%) scaleY(0.07);
}

.lexi-avatar[data-mood="closed"] .lexi-eye-glow {
    opacity: 0.32;
}

/* ==========================================================================
   Blinzeln (Klasse setzt lexi-avatar.js für ~190 ms)
   ========================================================================== */
.lexi-avatar.is-blinking .lexi-eye-lid {
    animation: lexi-blink 0.19s ease-in-out;
}

.lexi-avatar.is-blinking .lexi-eye-glow {
    animation: lexi-blink-glow 0.19s ease-in-out;
}

@keyframes lexi-blink {
    0%, 100% { transform: none; }
    40%, 55% { transform: scaleY(0.06); }
}

@keyframes lexi-blink-glow {
    0%, 100% { filter: none; }
    40%, 55% { filter: brightness(0.45); }
}

/* Schweben (optional per Klasse) */
.lexi-avatar.is-floating {
    animation: lexi-float 3.2s ease-in-out infinite;
}

@keyframes lexi-float {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-3.5%) rotate(1.2deg); }
}

/* ==========================================================================
   Einbauten, die mehrere Seiten teilen
   ========================================================================== */

/* LexiAvatar.react(): kleine Lexi neben einer Rückmeldung, z. B. nach
   "Gewusst / Teilweise / Nicht gewusst" im Fall-Modal und Fall des Tages */
.lexi-react {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    animation: lexi-react-in 0.35s ease both;
}

.lexi-react > :not(.lexi-react-figure) {
    margin: 0;
}

.lexi-react-figure {
    width: 46px;
    flex: 0 0 auto;
    filter: drop-shadow(0 6px 10px rgba(68, 95, 242, 0.25));
}

@keyframes lexi-react-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Login / Registrierung (auth-lexi.js): Lexi lugt oben rechts über den
   Kartenrand. Der Rahmen schneidet sie an der Kartenkante ab, dadurch
   wirkt es, als säße sie hinter der Karte. */
.auth-container.has-lexi {
    position: relative;
    margin-top: 46px;
}

.auth-lexi {
    position: absolute;
    right: 26px;
    bottom: 100%;
    width: 92px;
    height: 54px;
    overflow: hidden;
    pointer-events: none;
}

.auth-lexi > .lexi-avatar {
    width: 100%;
    animation: auth-lexi-peek 0.6s cubic-bezier(0.22, 1.25, 0.36, 1) 0.25s both;
}

@keyframes auth-lexi-peek {
    from { transform: translateY(70%); }
    to   { transform: none; }
}

@media (max-width: 480px) {
    .auth-lexi { right: 16px; width: 76px; height: 45px; }
}

/* Level-Aufstieg / Gast-Belohnung (#levelUpModal): Lexi statt Emoji */
.reward-lexi {
    width: 112px;
    margin: -8px auto 14px;
    filter: drop-shadow(0 12px 20px rgba(68, 95, 242, 0.32));
}

@media (prefers-reduced-motion: reduce) {
    .lexi-react, .auth-lexi > .lexi-avatar { animation: none; }
    .lexi-avatar.is-floating { animation: none; }
    .lexi-eyes, .lexi-eye-core, .lexi-eye-arc { transition-duration: 0.01s; }
    .lexi-avatar[data-mood="thinking"] .lexi-dots i { animation: none; opacity: 0.8; }
}