/* ============================================================
   English AI Tutor Pro v3.32.0 — Holographic Mode
   Layout 3 columnas + glassmorphism + avatares SVG reactivos
   con 4 estados (idle/thinking/speaking/listening) y 4 emociones
   (neutral/happy/sad/poker).

   Activa con la clase `.eatp-holo-mode` en `.eatp-app`. Si no está,
   todo este CSS es no-op (el layout clásico se mantiene intacto).
   ============================================================ */

/* ── Variable override cuando el modo holográfico está activo ── */
.eatp-app.eatp-holo-mode {
    --eatp-holo-en: #3b82f6;       /* azul — English Teacher */
    --eatp-holo-es: #f59e0b;       /* ámbar — Spanish Helper */
    --eatp-holo-glass: rgba(255, 255, 255, 0.72);
    --eatp-holo-glass-border: rgba(255, 255, 255, 0.55);
    --eatp-holo-bg-glow: rgba(16, 185, 129, 0.10);
}

/* ── Override del fondo del main para añadir halos radiales ── */
.eatp-app.eatp-holo-mode .eatp-main {
    background:
        radial-gradient(ellipse 60% 50% at 15% 30%, var(--eatp-holo-bg-glow), transparent 60%),
        radial-gradient(ellipse 60% 50% at 85% 70%, rgba(59, 130, 246, 0.06), transparent 60%),
        var(--eatp-bg);
    position: relative;
}

/* ── Layout 3 columnas para TODOS los paneles ──
   v3.34.1: ahora incluye Práctica y Reto, no solo Clases y Conversación. */
.eatp-app.eatp-holo-mode .eatp-panel-chat,
.eatp-app.eatp-holo-mode .eatp-panel-conversation,
.eatp-app.eatp-holo-mode .eatp-panel-practice,
.eatp-app.eatp-holo-mode .eatp-panel-challenge {
    display: grid;
    grid-template-areas: "left board right";
    grid-template-columns: 150px 1fr 150px;
    gap: 14px;
    padding: 14px;
}

.eatp-holo-col-left   { grid-area: left; }
.eatp-holo-col-board  { grid-area: board; min-width: 0; min-height: 0; }
.eatp-holo-col-right  { grid-area: right; }

/* ── Columna de avatar ── */
.eatp-holo-avatar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 14px;
}
.eatp-holo-avatar-label {
    text-align: center;
    line-height: 1.2;
}
.eatp-holo-avatar-label .name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--eatp-text);
}
.eatp-holo-avatar-label .status {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--eatp-text-faint);
    margin-top: 2px;
    transition: color 0.3s ease;
}
.eatp-holo-avatar-label .status.thinking  { color: var(--eatp-holo-es); }
.eatp-holo-avatar-label .status.speaking { color: var(--eatp-holo-en); }
.eatp-holo-avatar-label .status.listening { color: var(--eatp-red); }

/* ── Wrap del avatar (130px) ── */
.eatp-holo-avatar-wrap {
    position: relative;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.eatp-holo-avatar-halo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    filter: blur(22px);
    opacity: 0.18;
    transition: opacity 0.5s ease, background 0.5s ease;
    pointer-events: none;
}
.eatp-holo-avatar-svg {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.eatp-holo-avatar-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border: 2px solid #fff;
}

/* ── Smart Board (glassmorphism) ──
   Reemplaza el contenedor de mensajes del panel de chat con un look
   de cristal esmerilado. Mantiene la misma estructura interna. */
.eatp-app.eatp-holo-mode .eatp-panel-chat .eatp-messages,
.eatp-app.eatp-holo-mode .eatp-panel-conversation .eatp-messages {
    background: var(--eatp-holo-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--eatp-holo-glass-border);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
    padding: 14px;
}

/* La tarjeta de lección también se vuelve glass */
.eatp-app.eatp-holo-mode .eatp-lesson-card {
    background: var(--eatp-holo-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--eatp-holo-glass-border);
    border-radius: 16px;
    margin-bottom: 12px;
}

/* Intro del chat (pantalla inicial) también transparente */
.eatp-app.eatp-holo-mode .eatp-panel-chat #eatp-chat-intro,
.eatp-app.eatp-holo-mode .eatp-panel-conversation #eatp-conversation-intro {
    background: var(--eatp-holo-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--eatp-holo-glass-border);
    border-radius: 20px;
    padding: 24px 20px;
    margin: 14px;
}

/* Mensajes: hover sutil + transition */
.eatp-app.eatp-holo-mode .eatp-msg {
    transition: transform 0.2s ease;
}
.eatp-app.eatp-holo-mode .eatp-msg-teacher {
    border-left: 3px solid var(--eatp-holo-en);
}
.eatp-app.eatp-holo-mode .eatp-msg-helper {
    border-left: 3px solid var(--eatp-holo-es);
}

/* ── Animation: fade in para mensajes ── */
@keyframes eatp-holo-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.eatp-app.eatp-holo-mode .eatp-msg {
    animation: eatp-holo-fade-in 0.3s ease;
}

/* ── Status dot para el panel de chat ── */
.eatp-holo-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--eatp-text-muted);
    margin-bottom: 8px;
}
.eatp-holo-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--eatp-text-faint);
    transition: background 0.3s ease;
}
.eatp-holo-status-dot.thinking  { background: var(--eatp-holo-es); animation: eatp-holo-blink 1s infinite; }
.eatp-holo-status-dot.speaking  { background: var(--eatp-holo-en); animation: eatp-holo-blink 0.6s infinite; }
.eatp-holo-status-dot.listening { background: var(--eatp-red);     animation: eatp-holo-blink 0.6s infinite; }
@keyframes eatp-holo-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ── Listener orb (avatar del estudiante) ──
   Se muestra solo cuando el estudiante está grabando con el mic.
   Cuando no está grabando, queda en estado idle sutil. */
.eatp-holo-avatar-wrap .holo-listen-pulse {
    display: none;
}
.eatp-holo-avatar-wrap.listening .holo-listen-pulse {
    display: block;
}

/* ── Emociones de los avatares ──
   Las emociones son clases que se añaden al SVG. El JS cambia la
   forma de la boca y los ojos según la emoción.

   happy   → boca curva hacia arriba (sonrisa) + ojos un poco más cerrados
   sad     → boca curva hacia abajo + ojos más abiertos
   poker   → boca recta + ojos sin expresión
   neutral → estado por defecto (boca de lip-sync) */
.eatp-holo-avatar-svg .mouth-arc {
    transition: d 0.4s ease, transform 0.3s ease;
}
.eatp-holo-avatar-svg .eye {
    transition: ry 0.3s ease, cy 0.3s ease;
    transform-box: fill-box;
    transform-origin: center;
}

/* Cuando hay emoción, desactivar la boca de lip-sync (la JS controla) */
.eatp-holo-avatar-wrap.emotion-happy .lip-mouth,
.eatp-holo-avatar-wrap.emotion-sad .lip-mouth,
.eatp-holo-avatar-wrap.emotion-laugh .lip-mouth,
.eatp-holo-avatar-wrap.emotion-surprise .lip-mouth,
.eatp-holo-avatar-wrap.emotion-anger .lip-mouth,
.eatp-holo-avatar-wrap.emotion-mock .lip-mouth,
.eatp-holo-avatar-wrap.emotion-poker .lip-mouth {
    opacity: 0 !important;
    display: none !important;
}
.eatp-holo-avatar-wrap.emotion-happy .emotion-mouth,
.eatp-holo-avatar-wrap.emotion-sad .emotion-mouth,
.eatp-holo-avatar-wrap.emotion-laugh .emotion-mouth,
.eatp-holo-avatar-wrap.emotion-surprise .emotion-mouth,
.eatp-holo-avatar-wrap.emotion-anger .emotion-mouth,
.eatp-holo-avatar-wrap.emotion-mock .emotion-mouth,
.eatp-holo-avatar-wrap.emotion-poker .emotion-mouth {
    opacity: 1 !important;
    /* v3.33.1: stroke más grueso para que se vea claramente la emoción */
    stroke-width: 4.5 !important;
}
.eatp-holo-avatar-wrap .emotion-mouth {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* ── v3.33.0: Burbuja flotante estilo anime/manga ──
   Aparece sobre la cabeza del avatar, flota hacia arriba, y se desvanece.
   Como los "thought bubbles" de manga cuando un personaje reacciona. */
@keyframes eatp-holo-bubble-float {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(0) scale(0.3) rotate(-10deg);
    }
    15% {
        opacity: 1;
        transform: translateX(-50%) translateY(-8px) scale(1.3) rotate(5deg);
    }
    25% {
        transform: translateX(-50%) translateY(-14px) scale(1) rotate(-3deg);
    }
    70% {
        opacity: 1;
        transform: translateX(-50%) translateY(-35px) scale(1) rotate(2deg);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-55px) scale(0.7) rotate(-5deg);
    }
}

/* ── v3.33.0: Emociones extendidas — estilos visuales por emoción ── */

/* Happy — brillo extra + halo más cálido */
.eatp-holo-avatar-wrap.emotion-happy .avatar-glow {
    filter: brightness(1.3) saturate(1.2);
}
.eatp-holo-avatar-wrap.emotion-happy .avatar-halo {
    opacity: 0.4 !important;
}

/* Laugh — todavía más brillo + halo pulsante */
.eatp-holo-avatar-wrap.emotion-laugh .avatar-glow {
    filter: brightness(1.5) saturate(1.4);
    animation: eatp-holo-laugh-pulse 0.3s ease-in-out infinite alternate;
}
.eatp-holo-avatar-wrap.emotion-laugh .avatar-halo {
    opacity: 0.5 !important;
    animation: eatp-holo-laugh-pulse 0.3s ease-in-out infinite alternate;
}
@keyframes eatp-holo-laugh-pulse {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}

/* Sad — tinte apagado */
.eatp-holo-avatar-wrap.emotion-sad .avatar-svg {
    filter: saturate(0.6) brightness(0.88);
}
.eatp-holo-avatar-wrap.emotion-sad .avatar-halo {
    opacity: 0.10 !important;
}

/* Surprise — halo expandido + brillo intenso */
.eatp-holo-avatar-wrap.emotion-surprise .avatar-glow {
    filter: brightness(1.4) saturate(1.3);
    transform: scale(1.15);
    transition: transform 0.2s ease;
}
.eatp-holo-avatar-wrap.emotion-surprise .avatar-halo {
    opacity: 0.45 !important;
}

/* Anger — tinte rojizo + halo rojo */
.eatp-holo-avatar-wrap.emotion-anger .avatar-svg {
    filter: hue-rotate(-30deg) saturate(1.3) brightness(0.95);
}
.eatp-holo-avatar-wrap.emotion-anger .avatar-halo {
    opacity: 0.4 !important;
    background: radial-gradient(circle, #ef4444 0%, transparent 70%) !important;
}

/* Mock — tinte ligeramente morado + smirk */
.eatp-holo-avatar-wrap.emotion-mock .avatar-svg {
    filter: hue-rotate(20deg) saturate(0.9);
}
.eatp-holo-avatar-wrap.emotion-mock .avatar-halo {
    opacity: 0.25 !important;
}

/* Poker — sin cambios especiales, solo boca recta */
.eatp-holo-avatar-wrap.emotion-poker .avatar-svg {
    filter: saturate(0.8);
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .eatp-app.eatp-holo-mode .eatp-panel-chat,
    .eatp-app.eatp-holo-mode .eatp-panel-conversation,
    .eatp-app.eatp-holo-mode .eatp-panel-practice,
    .eatp-app.eatp-holo-mode .eatp-panel-challenge {
        grid-template-areas:
            "left right"
            "board board";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr;
        gap: 10px;
        padding: 10px;
    }
    .eatp-holo-avatar-wrap {
        width: 88px;
        height: 88px;
    }
    .eatp-holo-avatar-label .name { font-size: 0.74rem; }
    .eatp-holo-avatar-label .status { font-size: 0.62rem; }
}

@media (max-width: 560px) {
    .eatp-app.eatp-holo-mode .eatp-panel-chat,
    .eatp-app.eatp-holo-mode .eatp-panel-conversation,
    .eatp-app.eatp-holo-mode .eatp-panel-practice,
    .eatp-app.eatp-holo-mode .eatp-panel-challenge {
        grid-template-areas:
            "left"
            "right"
            "board";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
    }
    .eatp-holo-avatar-col {
        flex-direction: row;
        gap: 14px;
        padding-top: 6px;
    }
    .eatp-holo-avatar-wrap {
        width: 72px;
        height: 72px;
    }
    .eatp-holo-avatar-label {
        text-align: left;
    }
}

/* ── Toggle en admin (Apariencia) ── */
.eatp-holo-toggle-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    border: 1.5px solid #c4b5fd;
    border-radius: 12px;
    margin-top: 12px;
}
.eatp-holo-toggle-row .holo-icon {
    font-size: 1.6rem;
}
.eatp-holo-toggle-row .holo-info {
    flex: 1;
}
.eatp-holo-toggle-row .holo-info strong {
    display: block;
    color: #4c1d95;
    font-size: 0.95rem;
    margin-bottom: 2px;
}
.eatp-holo-toggle-row .holo-info small {
    color: #6d28d9;
    font-size: 0.78rem;
    line-height: 1.4;
}
.eatp-holo-toggle-row input[type="checkbox"] {
    width: 22px;
    height: 22px;
    accent-color: #7c3aed;
    cursor: pointer;
}

/* ── Spinner de "thinking" más sutil en modo holo ── */
.eatp-app.eatp-holo-mode .eatp-typing {
    background: var(--eatp-holo-glass);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 8px 14px;
    margin: 4px auto;
}

/* ════════════════════════════════════════════════════════════════
   v3.35.0 — Mobile-First Avatar Stage Dock + Flat/Material redesign

   PROBLEMA que resuelve:
   En móvil vertical, los avatares viven ARRIBA de cada panel (dentro
   del grid de 3 columnas). Como `.eatp-app` tenía `overflow: visible`
   y `min-height: auto`, la página entera crecía y hacía scroll en vez
   del área de chat. Resultado: al acumularse mensajes, los avatares
   se desplazaban fuera de vista mientras el TTS seguía hablando — se
   perdía el vínculo emocional (pilar del producto).

   SOLUCIÓN:
   1. Stage Dock persistente inferior: un único par de avatares que
      vive entre `</main>` y `<footer>`, siempre visible, NUNCA se
      desplaza. El avatar que habla se resalta (scale + halo).
   2. App nativa: `.eatp-app` pasa a `height: 100dvh; overflow: hidden`
      en móvil — el chat hace scroll interno, no la página.
   3. Flat/Material: se quita el glassmorphism pesado (`backdrop-filter`)
      en móvil por superficies sólidas + sombras suaves de elevación.
      Mejor rendimiento y look más limpio tipo app nativa.
   4. Se ocultan las columnas de avatar por-panel en móvil (el stage
      las reemplaza). En escritorio (>960px) todo queda igual.
   ════════════════════════════════════════════════════════════════ */

/* Stage dock: oculto por defecto (escritorio usa 3 columnas) */
.eatp-holo-stage {
    display: none;
}

/* ── Mobile / tablet portrait (≤960px): app-like + stage dock ── */
@media (max-width: 960px) {

    /* THE fix: la app llena el viewport y NO crece con el contenido.
       100vh como fallback, 100dvh (dynamic viewport height) para
       móviles modernos — accounta la barra del navegador. */
    .eatp-app.eatp-holo-mode {
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        min-height: 0;
        overflow: hidden;
        border-radius: 0;
    }

    /* Ocultar columnas de avatar por-panel — el stage las reemplaza */
    .eatp-app.eatp-holo-mode .eatp-holo-col-left,
    .eatp-app.eatp-holo-mode .eatp-holo-col-right {
        display: none !important;
    }

    /* Paneles: columna única, solo el board. Se anula el grid 3-col. */
    .eatp-app.eatp-holo-mode .eatp-panel-chat,
    .eatp-app.eatp-holo-mode .eatp-panel-conversation,
    .eatp-app.eatp-holo-mode .eatp-panel-practice,
    .eatp-app.eatp-holo-mode .eatp-panel-challenge {
        display: flex !important;
        flex-direction: column;
        grid-template-areas: none !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        gap: 8px;
        padding: 8px;
        min-height: 0;
        flex: 1 1 auto;
    }

    /* Board: llena el panel y permite scroll interno del contenido */
    .eatp-app.eatp-holo-mode .eatp-holo-col-board {
        grid-area: auto !important;
        flex: 1 1 auto;
        min-height: 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    /* Chat/Conversación: el board NO scrollea (los mensajes sí) */
    .eatp-app.eatp-holo-mode .eatp-panel-chat .eatp-holo-col-board,
    .eatp-app.eatp-holo-mode .eatp-panel-conversation .eatp-holo-col-board {
        overflow: hidden;
    }
    /* Práctica/Reto: el board scrollea si la tarjeta es muy alta */
    .eatp-app.eatp-holo-mode .eatp-panel-practice .eatp-holo-col-board,
    .eatp-app.eatp-holo-mode .eatp-panel-challenge .eatp-holo-col-board {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Mensajes: scroll interno fluido */
    .eatp-app.eatp-holo-mode .eatp-panel-chat .eatp-messages,
    .eatp-app.eatp-holo-mode .eatp-panel-conversation .eatp-messages {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* v3.35.0: La tarjeta de lección NO se encoge — mantiene su altura
       natural y los mensajes se ajustan al espacio restante. Evita que
       el contenido se comprima feo en pantallas pequeñas. */
    .eatp-app.eatp-holo-mode .eatp-lesson-card {
        flex-shrink: 0;
    }

    /* Pantallas de intro (Start): llenan el board y hacen scroll propio
       si son más altas que el espacio disponible. Así nunca se clipping
       el botón "Comenzar" en móviles pequeños. */
    .eatp-app.eatp-holo-mode .eatp-panel-chat #eatp-chat-intro,
    .eatp-app.eatp-holo-mode .eatp-panel-conversation #eatp-conversation-intro {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Stage Dock: barra inferior persistente con ambos avatares ── */
    .eatp-app.eatp-holo-mode .eatp-holo-stage {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        padding: 8px 14px;
        background: var(--eatp-surface);
        border-top: 1px solid var(--eatp-border);
        box-shadow: 0 -2px 14px rgba(15, 23, 42, 0.08);
        flex-shrink: 0;
        z-index: 20;
    }

    /* Cada slot: avatar + etiqueta, uno a cada lado */
    .eatp-holo-stage-slot {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1 1 0;
        min-width: 0;
    }
    .eatp-holo-stage-slot[data-who="es"] {
        flex-direction: row-reverse;
    }

    /* Avatares compactos en el dock */
    .eatp-holo-stage .eatp-holo-avatar-wrap {
        width: 58px;
        height: 58px;
        flex-shrink: 0;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .eatp-holo-stage .eatp-holo-avatar-halo {
        filter: blur(14px);
    }
    .eatp-holo-stage .eatp-holo-avatar-badge {
        width: 22px;
        height: 22px;
        font-size: 10px;
        bottom: -1px;
        right: -1px;
        border-width: 1.5px;
    }

    /* Active speaker highlight: escala + elevación suave */
    .eatp-holo-stage .eatp-holo-avatar-wrap[data-state="speaking"] {
        transform: scale(1.14);
    }
    .eatp-holo-stage .eatp-holo-avatar-wrap[data-state="thinking"] {
        transform: scale(1.05);
    }
    .eatp-holo-stage .eatp-holo-avatar-wrap[data-state="listening"] {
        transform: scale(1.08);
    }

    /* Etiquetas: nombre + estado, truncadas si hace falta */
    .eatp-holo-stage .eatp-holo-avatar-label {
        flex: 1 1 auto;
        min-width: 0;
        line-height: 1.15;
    }
    .eatp-holo-stage .eatp-holo-avatar-label .name {
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--eatp-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .eatp-holo-stage .eatp-holo-avatar-label .status {
        font-size: 0.62rem;
        margin-top: 1px;
    }
    .eatp-holo-stage-slot[data-who="es"] .eatp-holo-avatar-label {
        text-align: right;
    }

    /* Divisor vertical entre los dos profesores */
    .eatp-holo-stage-divider {
        width: 1px;
        height: 42px;
        background: linear-gradient(to bottom, transparent, var(--eatp-border), transparent);
        flex-shrink: 0;
    }

    /* ── Flat / Material Design: quitar glassmorphism pesado ──
       En móvil, backdrop-filter es costoso y se ve "típico de IA".
       Superficies sólidas + sombras de elevación = look más limpio
       y nativo. Mejor rendimiento en dispositivos modestos. */
    .eatp-app.eatp-holo-mode .eatp-panel-chat .eatp-messages,
    .eatp-app.eatp-holo-mode .eatp-panel-conversation .eatp-messages {
        background: var(--eatp-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid var(--eatp-border);
        border-radius: 14px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
        padding: 12px;
    }
    .eatp-app.eatp-holo-mode .eatp-lesson-card {
        background: var(--eatp-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid var(--eatp-border);
        border-radius: 12px;
        margin-bottom: 8px;
    }
    .eatp-app.eatp-holo-mode .eatp-panel-chat #eatp-chat-intro,
    .eatp-app.eatp-holo-mode .eatp-panel-conversation #eatp-conversation-intro {
        background: var(--eatp-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid var(--eatp-border);
        border-radius: 14px;
    }
    .eatp-app.eatp-holo-mode .eatp-typing {
        background: var(--eatp-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid var(--eatp-border);
        border-radius: 12px;
    }

    /* Main: el fondo radial queda sutil (no compite con el contenido) */
    .eatp-app.eatp-holo-mode .eatp-main {
        background: var(--eatp-bg);
    }

    /* Footer: respetar safe-area de iOS (notch / home indicator) */
    .eatp-app.eatp-holo-mode .eatp-footer {
        flex-shrink: 0;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }

    /* Ocultar mini-stats en móviles muy pequeños para ganar pantalla
       (las stats completas siguen en el header superior). El JS sigue
       actualizando los contadores — solo se ocultan visualmente. */
    @media (max-width: 560px) {
        .eatp-header-stats .eatp-mini-stats {
            display: none;
        }
        .eatp-holo-stage .eatp-holo-avatar-wrap {
            width: 52px;
            height: 52px;
        }
        .eatp-holo-stage .eatp-holo-avatar-label .name {
            font-size: 0.68rem;
        }
        .eatp-holo-stage .eatp-holo-avatar-label .status {
            font-size: 0.58rem;
        }
        .eatp-app.eatp-holo-mode .eatp-holo-stage {
            padding: 7px 12px;
        }
        .eatp-holo-stage-divider {
            height: 36px;
        }
        .eatp-holo-stage-slot {
            gap: 8px;
        }
    }
}

/* ── Landscape en móvil: dock un poco más bajo para no tapar ── */
@media (max-width: 960px) and (orientation: landscape) and (max-height: 500px) {
    .eatp-holo-stage .eatp-holo-avatar-wrap {
        width: 44px;
        height: 44px;
    }
    .eatp-holo-stage .eatp-holo-avatar-label .name {
        font-size: 0.66rem;
    }
    .eatp-app.eatp-holo-mode .eatp-holo-stage {
        padding: 5px 12px;
    }
    .eatp-holo-stage-divider {
        height: 30px;
    }
}