/* ============================================================
   English AI Tutor Pro v3.35.0 — Holographic Mode
   Flat / Material Design refresh + mobile-first avatar dock.

   v3.35.0 redesign goals (mobile vertical):
     - Avatares SIEMPRE visibles mientras hablan, en TODOS los modos.
     - Look flat Material (superficies sólidas + sombras sutiles),
       no más glassmorphism "típico de IA" (backdrop-filter blur).
     - Sensación de app nativa: header / content / avatar dock /
       input bar. Sin espacios inutiles.
     - Desktop (>=960px) conserva el layout de 3 columnas.

   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).
   ============================================================ */

/* ── Tokens del modo holográfico ── */
.eatp-app.eatp-holo-mode {
    --eatp-holo-en: #3b82f6;       /* azul — English Teacher */
    --eatp-holo-es: #f59e0b;       /* ámbar — Spanish Helper */
    --eatp-holo-tutor: #8b5cf6;    /* morado — Tutor modal */
    --eatp-holo-dock-bg: var(--eatp-surface, #ffffff);
    --eatp-holo-dock-border: var(--eatp-border, #e2e8f0);
    --eatp-holo-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                             0 1px 3px rgba(15, 23, 42, 0.06);
    --eatp-holo-card-shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.08),
                                0 2px 4px rgba(15, 23, 42, 0.04);
}

/* ── Fondo del main: plano, sin halos radiales (v3.35.0) ──
   Antes tenía dos radial-gradients que aportaban ruido visual
   "típico de IA" y costaban GPU en móvil. Ahora: fondo sólido. */
.eatp-app.eatp-holo-mode .eatp-main {
    background: var(--eatp-bg);
    position: relative;
}

/* ════════════════════════════════════════════════════════
   LAYOUT — DESKTOP (>=960px): 2 columnas (v3.45.3 redesign)
   Avatares apilados (izq: EN arriba, ES abajo) · board (der)
   El estudiante solicitó este cambio para dar más espacio al
   chat y tener ambos profesores visibles juntos a la izquierda.
   ════════════════════════════════════════════════════════ */
.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 board";
    grid-template-columns: 150px 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    padding: 14px;
    min-height: 0;
}

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

/* ── Columna de avatar (desktop, vertical) ── */
/* v3.45.3: ajustado para layout apilado — menos padding top para
   que ambos avatares quepan bien en sus filas respectivas. */
.eatp-holo-avatar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 6px;
    justify-content: center;
}
.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, #ef4444); }

/* ── Wrap del avatar ── */
/* v3.45.3: reducido de 130px a 110px para que ambos avatares
   quepan cómodamente apilados en la columna izquierda. */
.eatp-holo-avatar-wrap {
    position: relative;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
/* v3.35.0: halo más sutil (menos blur) para look flat */
.eatp-holo-avatar-halo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    filter: blur(14px);
    opacity: 0.16;
    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 6px rgba(0, 0, 0, 0.12);
    border: 2px solid #fff;
}

/* ════════════════════════════════════════════════════════
   v3.35.0 — ACTIVE SPEAKER HIGHLIGHT
   El avatar que está hablando se ilumina; el otro se atenúa.
   Las clases is-{state} las añade holographic-avatars.js al
   wrap. En desktop ambos avatares quedan visibles (no se
   atenúan) porque hay espacio; en móvil sí se atenúa el idle
   para focalizar la atención en el que habla.
   ════════════════════════════════════════════════════════ */
.eatp-holo-avatar-wrap.is-speaking {
    filter: brightness(1.05);
}
.eatp-holo-avatar-wrap.is-speaking .eatp-holo-avatar-halo {
    opacity: 0.42;
}

/* ── Smart Board — FLAT (v3.35.0) ──
   Reemplaza el glassmorphism por una superficie sólida con
   sombra sutil (Material elevation). Más limpio, más rápido,
   más nativo. */
.eatp-app.eatp-holo-mode .eatp-panel-chat .eatp-messages,
.eatp-app.eatp-holo-mode .eatp-panel-conversation .eatp-messages {
    background: var(--eatp-surface, #fff);
    border: 1px solid var(--eatp-holo-dock-border);
    border-radius: 16px;
    box-shadow: var(--eatp-holo-card-shadow);
    padding: 14px;
}

/* La tarjeta de lección también pasa a flat */
.eatp-app.eatp-holo-mode .eatp-lesson-card {
    background: var(--eatp-surface, #fff);
    border: 1px solid var(--eatp-holo-dock-border);
    border-radius: 14px;
    box-shadow: var(--eatp-holo-card-shadow);
    margin-bottom: 10px;
}

/* Intro del chat — flat */
.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, #fff);
    border: 1px solid var(--eatp-holo-dock-border);
    border-radius: 16px;
    box-shadow: var(--eatp-holo-card-shadow);
    padding: 24px 20px;
    margin: 14px;
}

/* Mensajes: acento lateral del profesor */
.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 pill (no usado en el dock mobile pero se mantiene) ── */
.eatp-holo-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--eatp-surface-alt, #f1f5f9);
    border: 1px solid var(--eatp-holo-dock-border);
    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, #ef4444); animation: eatp-holo-blink 0.6s infinite; }
@keyframes eatp-holo-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ── Listener orb (avatar del estudiante) ── */
.eatp-holo-avatar-wrap .holo-listen-pulse {
    display: none;
}
.eatp-holo-avatar-wrap.listening .holo-listen-pulse {
    display: block;
}

/* ════════════════════════════════════════════════════════
   EMOCIONES — Sin cambios (la "magia" de los avatares)
   Las emociones son clases en el SVG. El JS cambia la boca,
   los ojos, las cejas y la pantalla de cara según emoción.
   ════════════════════════════════════════════════════════ */
.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 */
.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;
    stroke-width: 4.5 !important;
}
.eatp-holo-avatar-wrap .emotion-mouth {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* ── Burbuja flotante anime/manga ── */
@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);
    }
}

/* ── Estilos visuales por emoción (sin cambios) ── */
.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;
}
.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); }
}
.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;
}
.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;
}
.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;
}
.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;
}
.eatp-holo-avatar-wrap.emotion-poker .avatar-svg {
    filter: saturate(0.8);
}

/* ════════════════════════════════════════════════════════
   v3.35.0 — TABLET + MOBILE LAYOUT (<= 960px)
   El cambio clave: los avatares bajan a un DOCK inferior
   horizontal, siempre visibles sobre la barra de input.
   El board (chat/práctica/reto/conversación) ocupa todo el
   espacio restante y hace scroll interno.

   CRÍTICO: la app se constraint a 100dvh (dynamic viewport
   height) para que el dock + footer queden SIEMPRE visibles
   sin scroll del body. Esto da la sensación de app nativa.
   ════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
    /* Constraint la app al viewport — sin scroll del body.
       100dvh maneja el UI del browser móvil (barra de URL que
       se contrae/expande). Override del overflow:visible del
       base CSS en <=640px. */
    .eatp-app.eatp-holo-mode {
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        min-height: 0;
        overflow: hidden;
        border-radius: 0;
        margin: 0;
        max-width: 100%;
    }

    /* Layout: board arriba (flex), avatares abajo (dock) */
    .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:
            "board board"
            "left right";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr auto;
        gap: 8px;
        padding: 8px;
        min-height: 0;
    }

    /* Board: área scrollable, ocupa todo el alto disponible */
    .eatp-holo-col-board {
        min-height: 0;
        min-width: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    /* Practice/Challenge boards deben poder scrollar internamente */
    .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;
    }

    /* ── Avatar dock cards (flat Material) ──
       Cada columna es una tarjeta horizontal compacta con
       el avatar circular a la izquierda y nombre+estado a
       la derecha. Altura total del dock: ~72-84px. */
    .eatp-holo-avatar-col {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        background: var(--eatp-holo-dock-bg);
        border: 1px solid var(--eatp-holo-dock-border);
        border-radius: 14px;
        box-shadow: var(--eatp-holo-card-shadow);
        min-height: 0;
        position: relative;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    /* Acento lateral del profesor en cada tarjeta del dock */
    .eatp-holo-col-left .eatp-holo-avatar-col {
        border-left: 3px solid var(--eatp-holo-en);
    }
    .eatp-holo-col-right .eatp-holo-avatar-col {
        border-left: 3px solid var(--eatp-holo-es);
    }

    .eatp-holo-avatar-wrap {
        width: 82px;
        height: 82px;
        flex-shrink: 0;
    }
    .eatp-holo-avatar-badge {
        width: 26px;
        height: 26px;
        font-size: 12px;
        bottom: -1px;
        right: -1px;
    }
    .eatp-holo-avatar-label {
        text-align: left;
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }
    .eatp-holo-avatar-label .name {
        font-size: 0.74rem;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .eatp-holo-avatar-label .status {
        font-size: 0.62rem;
        margin-top: 1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ── Active speaker highlight en el dock ──
       El avatar que habla realza su tarjeta; el idle se atenúa
       sutilmente para focalizar la atención. */
    .eatp-holo-avatar-col:has(.eatp-holo-avatar-wrap.is-speaking) {
        border-color: var(--eatp-holo-en);
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18),
                    var(--eatp-holo-card-shadow-lg);
    }
    .eatp-holo-col-right .eatp-holo-avatar-col:has(.eatp-holo-avatar-wrap.is-speaking) {
        border-color: var(--eatp-holo-es);
        box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18),
                    var(--eatp-holo-card-shadow-lg);
    }
    /* Idle dimming (solo cuando el otro está hablando) */
    .eatp-app.eatp-holo-mode .eatp-panel-chat:has(.is-speaking) .eatp-holo-avatar-wrap:not(.is-speaking),
    .eatp-app.eatp-holo-mode .eatp-panel-conversation:has(.is-speaking) .eatp-holo-avatar-wrap:not(.is-speaking),
    .eatp-app.eatp-holo-mode .eatp-panel-practice:has(.is-speaking) .eatp-holo-avatar-wrap:not(.is-speaking),
    .eatp-app.eatp-holo-mode .eatp-panel-challenge:has(.is-speaking) .eatp-holo-avatar-wrap:not(.is-speaking) {
        opacity: 0.62;
    }

    /* ── Ajustes de paneles flat ──
       Los paneles de práctica/reto ya no tienen padding propio
       (lo aporta el grid). */
    .eatp-app.eatp-holo-mode .eatp-panel-practice,
    .eatp-app.eatp-holo-mode .eatp-panel-challenge {
        padding: 0;
        overflow: visible;
    }

    /* La tarjeta de práctica/reto: flat, más compacta */
    .eatp-app.eatp-holo-mode .eatp-practice-card,
    .eatp-app.eatp-holo-mode .eatp-challenge-card {
        padding: 16px 14px;
        margin-bottom: 8px;
        border-radius: 14px;
        box-shadow: var(--eatp-holo-card-shadow);
    }

    /* Mensajes: padding ajustado */
    .eatp-app.eatp-holo-mode .eatp-panel-chat .eatp-messages,
    .eatp-app.eatp-holo-mode .eatp-panel-conversation .eatp-messages {
        padding: 10px;
        border-radius: 14px;
    }
}

/* ════════════════════════════════════════════════════════
   v3.35.0 — PHONE (<= 560px): refinements
   El dock sigue abajo (heredado del breakpoint 960px), pero
   apretamos aún más el padding y el tamaño de avatares para
   maximizar el espacio del chat en pantallas pequeñas.
   ════════════════════════════════════════════════════════ */
@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 {
        gap: 6px;
        padding: 6px;
    }

    .eatp-holo-avatar-col {
        padding: 6px 8px;
        gap: 8px;
        border-radius: 12px;
    }
    .eatp-holo-avatar-wrap {
        width: 72px;
        height: 72px;
    }
    .eatp-holo-avatar-badge {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }
    .eatp-holo-avatar-label .name {
        font-size: 0.7rem;
    }
    .eatp-holo-avatar-label .status {
        font-size: 0.58rem;
    }

    /* En pantallas muy angostas, ocultar el badge emoji para
       ganar 20px y dejar solo el círculo del avatar. */
    .eatp-holo-avatar-badge {
        display: none;
    }

    /* Mensajes más compactos */
    .eatp-app.eatp-holo-mode .eatp-panel-chat .eatp-messages,
    .eatp-app.eatp-holo-mode .eatp-panel-conversation .eatp-messages {
        padding: 8px;
        gap: 8px;
    }
    .eatp-app.eatp-holo-mode .eatp-msg {
        padding: 8px 11px;
        font-size: 0.9rem;
    }

    /* Intro más compacta */
    .eatp-app.eatp-holo-mode .eatp-panel-chat #eatp-chat-intro,
    .eatp-app.eatp-holo-mode .eatp-panel-conversation #eatp-conversation-intro {
        padding: 18px 14px;
        margin: 6px;
    }

    /* Tarjetas de práctica/reto más compactas */
    .eatp-app.eatp-holo-mode .eatp-practice-card,
    .eatp-app.eatp-holo-mode .eatp-challenge-card {
        padding: 14px 12px;
    }
    .eatp-app.eatp-holo-mode .eatp-practice-phrase {
        font-size: 1.15rem;
    }
}

/* ════════════════════════════════════════════════════════
   v3.35.0 — TUTOR MODAL (mobile)
   El modal del tutor se vuelve casi full-screen en móvil para
   sentirse como una app nativa. El avatar del tutor se reubica
   a un dock compacto arriba del input del tutor.
   ════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .eatp-modal {
        padding: 0;
    }
    .eatp-tutor-dialog {
        max-height: 100vh;
        max-height: 100dvh;
        height: 100dvh;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
    }
    .eatp-tutor-body {
        padding: 12px 14px !important;
    }
    .eatp-tutor-intro {
        font-size: 0.82rem;
        margin-bottom: 8px;
    }
    .eatp-tutor-messages {
        max-height: none;
        flex: 1;
        min-height: 0;
    }
    .eatp-tutor-input-row {
        padding: 10px 14px !important;
        border-radius: 0;
    }
    .eatp-tutor-input {
        font-size: 16px; /* evitar zoom iOS */
        padding: 9px 12px;
    }
    /* Avatar del tutor: dock compacto, no bloque central */
    #holo-tutor-container {
        width: 64px !important;
        height: 64px !important;
    }
    /* El contenedor flex del avatar tutor: alineado a la izquierda
       como un "chip" de profesor, no como un bloque centrado. */
    .eatp-tutor-body > div:has(#holo-tutor-container) {
        justify-content: flex-start !important;
        margin-bottom: 8px !important;
    }
}

/* ════════════════════════════════════════════════════════
   v3.35.0 — SAFE AREA (iOS notch / home indicator)
   Asegura que el dock de avatares y la barra de input no
   queden ocultos bajo el home indicator en iPhones modernos.
   ════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
    .eatp-app.eatp-holo-mode .eatp-footer {
        padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    }
    .eatp-app.eatp-holo-mode .eatp-header {
        padding-top: max(12px, env(safe-area-inset-top, 0px));
    }
}

/* ── Toggle en admin (Apariencia) — sin cambios ── */
.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" flat ── */
.eatp-app.eatp-holo-mode .eatp-typing {
    background: var(--eatp-surface, #fff);
    border: 1px solid var(--eatp-holo-dock-border);
    border-radius: 14px;
    padding: 8px 14px;
    margin: 4px auto;
    box-shadow: var(--eatp-holo-card-shadow);
}

/* ════════════════════════════════════════════════════════
   v3.36.0 — TUTOR AVATAR IN MODAL HEADER (Point 1)
   El avatar del tutor se mueve al header del modal, compacto
   (40px), entre el título y el botón de detener/cerrar.
   ════════════════════════════════════════════════════════ */
.eatp-tutor-avatar-inline {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: auto; /* empuja las actions (stop/close) a la derecha */
    margin-left: 8px;
}
.holo-tutor-header-avatar {
    width: 40px;
    height: 40px;
    position: relative;
}
.holo-tutor-header-avatar .eatp-holo-avatar-wrap {
    width: 40px !important;
    height: 40px !important;
}
.holo-tutor-header-avatar .eatp-holo-avatar-badge {
    width: 16px;
    height: 16px;
    font-size: 8px;
    border-width: 1.5px;
}
.holo-tutor-header-avatar .eatp-holo-avatar-halo {
    filter: blur(8px);
}

@media (max-width: 640px) {
    .holo-tutor-header-avatar {
        width: 36px;
        height: 36px;
    }
    .holo-tutor-header-avatar .eatp-holo-avatar-wrap {
        width: 36px !important;
        height: 36px !important;
    }
    /* El título del modal puede acortarse en móvil para dejar espacio al avatar */
    .eatp-tutor-modal .eatp-modal-title {
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 45vw;
    }
}

/* ════════════════════════════════════════════════════════
   v3.36.0 — MESSAGE BUTTONS ACCESSIBILITY (Point 2)
   v3.36.1 — Make buttons VISIBLE: antes el background del
   botón coincidía con el bubble del mensaje → invisibles.
   Ahora: fondo tintado con color primario, borde visible,
   texto oscuro. "Explicar" destaca con fondo amarillo.
   ════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
    /* El bubble del mensaje ocupa casi todo el ancho del board */
    .eatp-app.eatp-holo-mode .eatp-message {
        max-width: 90%;
        padding: 10px 12px;
    }
    /* Las acciones van full-width dentro del bubble, wrap limpio */
    .eatp-app.eatp-holo-mode .eatp-message-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 8px;
        width: 100%;
    }
    /* v3.36.1: Touch target + fondo tintado visible + borde */
    .eatp-app.eatp-holo-mode .eatp-msg-btn {
        min-height: 36px;
        padding: 7px 14px;
        font-size: 0.8rem;
        font-weight: 700;
        border-radius: 999px;
        flex: 0 1 auto;
        white-space: nowrap;
        background: var(--eatp-primary-soft, #d1fae5) !important;
        color: var(--eatp-primary-dark, #059669) !important;
        border: 1px solid var(--eatp-primary-light, #a7f3d0) !important;
    }
    .eatp-app.eatp-holo-mode .eatp-msg-btn:hover,
    .eatp-app.eatp-holo-mode .eatp-msg-btn:active {
        background: var(--eatp-primary, #10b981) !important;
        color: #fff !important;
        border-color: var(--eatp-primary-dark, #059669) !important;
    }
    /* v3.36.1: "Explicar" — amarillo para destacar sobre "Escuchar" */
    .eatp-app.eatp-holo-mode .eatp-msg-btn[aria-label*="Explicar"] {
        background: #fef3c7 !important;
        color: #92400e !important;
        border: 1px solid #fcd34d !important;
    }
    .eatp-app.eatp-holo-mode .eatp-msg-btn[aria-label*="Explicar"]:hover,
    .eatp-app.eatp-holo-mode .eatp-msg-btn[aria-label*="Explicar"]:active {
        background: #f59e0b !important;
        color: #fff !important;
        border-color: #d97706 !important;
    }
    /* "Preguntar" a María — verde sólido para destacar */
    .eatp-app.eatp-holo-mode .eatp-msg-btn.eatp-ask-maria-btn {
        min-height: 36px;
        padding: 7px 16px;
        background: var(--eatp-primary, #10b981) !important;
        color: #fff !important;
        border: 1px solid var(--eatp-primary-dark, #059669) !important;
    }
    .eatp-app.eatp-holo-mode .eatp-msg-btn.eatp-ask-maria-btn:hover,
    .eatp-app.eatp-holo-mode .eatp-msg-btn.eatp-ask-maria-btn:active {
        background: var(--eatp-primary-dark, #059669) !important;
    }
}

@media (max-width: 560px) {
    .eatp-app.eatp-holo-mode .eatp-message {
        max-width: 94%;
        padding: 9px 11px;
        font-size: 0.9rem;
    }
    .eatp-app.eatp-holo-mode .eatp-msg-btn {
        min-height: 34px;
        padding: 6px 12px;
        font-size: 0.78rem;
    }
    /* v3.36.1: En móvil angosto, los botones van full-width apilados
       para máxima accesibilidad. */
    .eatp-app.eatp-holo-mode .eatp-message-actions {
        flex-direction: column;
        gap: 6px;
    }
    .eatp-app.eatp-holo-mode .eatp-msg-btn {
        width: 100%;
        text-align: center;
    }
}

/* ════════════════════════════════════════════════════════
   v3.36.0 — CONVERSATION INTRO (Point 4)
   El intro de Conversación era un div con estilos inline que
   no se veía bien en móvil. Ahora es una clase propia, flat,
   scrollable, con el botón Start siempre visible.
   ════════════════════════════════════════════════════════ */
.eatp-conversation-intro {
    text-align: center;
    padding: 24px 16px;
    background: var(--eatp-surface, #fff);
    border: 1px solid var(--eatp-holo-dock-border);
    border-radius: 16px;
    box-shadow: var(--eatp-holo-card-shadow);
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.eatp-conversation-intro-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
    line-height: 1;
}
.eatp-conversation-intro-title {
    color: var(--eatp-primary-dark, #059669);
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 700;
}
.eatp-conversation-intro-text {
    color: var(--eatp-text-muted, #475569);
    max-width: 360px;
    margin: 0 auto 16px;
    font-size: 0.85rem;
    line-height: 1.5;
}
@media (max-width: 560px) {
    .eatp-conversation-intro {
        padding: 18px 14px;
        margin: 6px;
    }
    .eatp-conversation-intro-icon { font-size: 2rem; }
    .eatp-conversation-intro-title { font-size: 1rem; }
    .eatp-conversation-intro-text { font-size: 0.8rem; }
    .eatp-conversation-intro .eatp-start-classes-btn {
        font-size: 0.95rem;
        padding: 11px 22px;
    }
}

/* ════════════════════════════════════════════════════════
   v3.36.0 — TUTOR BUTTON IN HEADER (Point 6)
   El botón Tutor se movió del footer al header. Estilo compacto
   que encaja con los botones de Plan de estudios y Certificado.
   ════════════════════════════════════════════════════════ */
.eatp-tutor-btn-header {
    background: rgba(139, 92, 246, 0.85) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 6px 12px !important;
    min-height: 36px !important;
    min-width: 36px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3) !important;
}
.eatp-tutor-btn-header:hover {
    background: #7c3aed !important;
    transform: scale(1.04);
}
@media (max-width: 640px) {
    /* En móvil, ocultar el texto "Tutor" y mostrar solo el emoji 🎓
       para ahorrar espacio en el header ya concurrido. */
    .eatp-tutor-btn-header .eatp-tutor-btn-label {
        display: none;
    }
    .eatp-tutor-btn-header {
        padding: 6px 8px !important;
    }
}

/* ════════════════════════════════════════════════════════
   v3.36.0 — WHATSAPP-STYLE INPUT BAR (Point 6)
   La barra inferior se rediseña al estilo WhatsApp/Telegram:
   - Micrófono (izquierda, claro, no pegado al input)
   - Campo de texto (crece para llenar el espacio)
   - Botón enviar (derecha)
   - El botón "Detener voz" solo aparece cuando hay voz activa
   ════════════════════════════════════════════════════════ */

/* El botón "Detener voz" está oculto por defecto. Solo aparece
   cuando el footer tiene la clase .eatp-voice-active (añadida
   por holographic-avatars.js cuando un avatar está hablando). */
.eatp-app.eatp-holo-mode .eatp-stop-voice-btn {
    display: none !important;
}
.eatp-app.eatp-holo-mode .eatp-footer.eatp-voice-active .eatp-stop-voice-btn {
    display: inline-flex !important;
}

/* Rediseño del input bar: WhatsApp style */
@media (max-width: 960px) {
    .eatp-app.eatp-holo-mode .eatp-input-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--eatp-surface, #fff);
        border-radius: 999px;
        border: 1px solid var(--eatp-border-strong, #cbd5e1);
        padding: 4px 6px;
        box-shadow: var(--eatp-holo-card-shadow);
    }

    /* Micrófono: círculo claro a la izquierda, NO pegado al input.
       Cuando está grabando (.eatp-listening), el SVG del micro
       se oculta y aparece la animación de waveform. */
    .eatp-app.eatp-holo-mode .eatp-mic-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        background: #0f172a !important;
        color: #fff !important;
        border: none !important;
        border-radius: 50% !important;
        flex-shrink: 0;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        position: relative;
        box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
    }
    .eatp-app.eatp-holo-mode .eatp-mic-btn .eatp-mic-icon {
        width: 22px !important;
        height: 22px !important;
        display: block !important;
    }

    /* Cuando está grabando: el botón se vuelve rojo y el ícono
       del micro se oculta para mostrar la waveform. */
    .eatp-app.eatp-holo-mode .eatp-mic-btn.eatp-listening {
        background: #ef4444 !important;
        animation: eatp-mic-pulse 1.4s infinite;
    }
    .eatp-app.eatp-holo-mode .eatp-mic-btn.eatp-listening .eatp-mic-icon {
        display: none !important;
    }

    /* Input: crece para llenar el espacio entre mic y send */
    .eatp-app.eatp-holo-mode .eatp-input {
        flex: 1 1 auto;
        border: none;
        background: transparent;
        padding: 10px 12px;
        min-height: 40px;
        font-size: 16px; /* evitar zoom iOS */
        line-height: 1.4;
        color: var(--eatp-text);
        border-radius: 999px;
        resize: none;
        max-height: 100px;
    }
    .eatp-app.eatp-holo-mode .eatp-input:focus {
        outline: none;
    }
    .eatp-app.eatp-holo-mode .eatp-input::placeholder {
        color: var(--eatp-text-faint, #94a3b8);
    }

    /* Send button: círculo a la derecha */
    .eatp-app.eatp-holo-mode .eatp-send-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        background: var(--eatp-primary, #10b981) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 50% !important;
        flex-shrink: 0;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.1rem !important;
        padding: 0 !important;
        box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3) !important;
    }
    .eatp-app.eatp-holo-mode .eatp-send-btn:hover:not(:disabled) {
        background: var(--eatp-primary-dark, #059669) !important;
        transform: scale(1.05);
    }

    /* El botón "Detener voz" cuando aparece, va después del send,
       estilo naranja compacto. */
    .eatp-app.eatp-holo-mode .eatp-footer.eatp-voice-active .eatp-stop-voice-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        background: #f97316 !important;
        color: #fff !important;
        border: none !important;
        border-radius: 50% !important;
        flex-shrink: 0;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        box-shadow: 0 1px 3px rgba(249, 115, 22, 0.35) !important;
    }
    .eatp-app.eatp-holo-mode .eatp-footer.eatp-voice-active .eatp-stop-voice-btn .eatp-stop-voice-label {
        display: none; /* en móvil solo el ícono */
    }
    .eatp-app.eatp-holo-mode .eatp-footer.eatp-voice-active .eatp-stop-voice-btn .eatp-stop-icon {
        width: 18px !important;
        height: 18px !important;
    }
}

/* ════════════════════════════════════════════════════════
   v3.36.0 — MIC WAVEFORM ANIMATION (Point 7)
   Cuando el micro está grabando (.eatp-listening), se muestra
   una animación de 5 barras verticales que simulan el espectro
   de audio. Estilo WhatsApp/Telegram.
   ════════════════════════════════════════════════════════ */
.eatp-mic-waveform {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
}
.eatp-mic-waveform span {
    display: block;
    width: 3px;
    height: 8px;
    background: #fff;
    border-radius: 2px;
    transform-origin: center;
}
/* Cuando el botón está grabando, mostrar la waveform */
.eatp-app.eatp-holo-mode .eatp-mic-btn.eatp-listening .eatp-mic-waveform {
    display: flex;
}
.eatp-app.eatp-holo-mode .eatp-mic-btn.eatp-listening .eatp-mic-waveform span {
    animation: eatp-waveform-bar 0.9s ease-in-out infinite;
}
/* Cada barra con un delay diferente para simular el espectro */
.eatp-app.eatp-holo-mode .eatp-mic-btn.eatp-listening .eatp-mic-waveform span:nth-child(1) { animation-delay: 0s;    height: 10px; }
.eatp-app.eatp-holo-mode .eatp-mic-btn.eatp-listening .eatp-mic-waveform span:nth-child(2) { animation-delay: 0.15s; height: 16px; }
.eatp-app.eatp-holo-mode .eatp-mic-btn.eatp-listening .eatp-mic-waveform span:nth-child(3) { animation-delay: 0.3s;  height: 20px; }
.eatp-app.eatp-holo-mode .eatp-mic-btn.eatp-listening .eatp-mic-waveform span:nth-child(4) { animation-delay: 0.1s;  height: 14px; }
.eatp-app.eatp-holo-mode .eatp-mic-btn.eatp-listening .eatp-mic-waveform span:nth-child(5) { animation-delay: 0.25s; height: 9px; }

@keyframes eatp-waveform-bar {
    0%, 100% { transform: scaleY(0.3); opacity: 0.6; }
    50%      { transform: scaleY(1.6); opacity: 1; }
}

/* Estado "processing" (procesando audio): waveform se detiene y
   aparece un spinner sutil sobre el botón. */
.eatp-app.eatp-holo-mode .eatp-mic-btn.eatp-processing .eatp-mic-waveform {
    display: flex;
}
.eatp-app.eatp-holo-mode .eatp-mic-btn.eatp-processing .eatp-mic-waveform span {
    animation: none;
    transform: scaleY(0.5);
    opacity: 0.4;
    background: #fff;
}

/* ════════════════════════════════════════════════════════
   v3.36.0 — SHORTER AVATAR LABELS ON MOBILE (Point 8)
   "English Teacher" y "Spanish Helper" se truncaban en móvil.
   Ahora en pantallas pequeñas mostramos versiones cortas.
   ════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
    .eatp-app.eatp-holo-mode .eatp-holo-avatar-label .name {
        font-size: 0.66rem;
        font-weight: 700;
    }
    /* Ocultar el texto largo y mostrar etiquetas cortas vía CSS.
       Usamos data-who del wrap para identificar EN vs ES. */
    .eatp-app.eatp-holo-mode .eatp-holo-col-left .eatp-holo-avatar-label .name::after {
        content: 'EN';
    }
    .eatp-app.eatp-holo-mode .eatp-holo-col-right .eatp-holo-avatar-label .name::after {
        content: 'ES';
    }
    /* En móvil muy angosto, ocultar el texto original y mostrar solo la etiqueta corta */
    .eatp-app.eatp-holo-mode .eatp-holo-avatar-label .name {
        font-size: 0;
    }
    .eatp-app.eatp-holo-mode .eatp-holo-avatar-label .name::after {
        font-size: 0.7rem;
        font-weight: 700;
    }
}

/* ════════════════════════════════════════════════════════
   v3.36.0 — LESSON CARD COLLAPSED BY DEFAULT ON MOBILE (Point 8)
   La tarjeta de lección (Unidad/Lección/Vocab/Gramática) ocupa
   mucho espacio vertical en móvil. Se colapsa por defecto en
   móvil y el usuario la expande tocando el header.
   ════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
    /* La tarjeta inicia colapsada en móvil vía JS, pero también
       lo forzamos con CSS por si el JS no ha corrido. */
    .eatp-app.eatp-holo-mode .eatp-lesson-card {
        border-radius: 10px;
        margin-bottom: 6px;
    }
    .eatp-app.eatp-holo-mode .eatp-lesson-card .eatp-lesson-card-toggle {
        padding: 8px 12px;
    }
    .eatp-app.eatp-holo-mode .eatp-lesson-card .eatp-lesson-card-title {
        font-size: 0.82rem;
    }
    .eatp-app.eatp-holo-mode .eatp-lesson-card .eatp-lesson-card-unit {
        font-size: 0.62rem;
    }
}

/* ════════════════════════════════════════════════════════
   v3.36.1 — HEADER ICONS: NO ENVELOPES (Point 3 + 4)
   En móvil, los iconos del header (Plan de estudios, Tutor,
   Certificado) estaban dentro de "envolturas" ovaladas
   (background + border-radius:999px + padding). El usuario
   quiere: solo iconos, sin envoltura, más grandes, espaciados
   uniformemente. El Tutor debe destacar visualmente.

   Estrategia:
   - Quitar background, border, border-radius de los botones.
   - Iconos a 1.4rem (antes ~0.8rem).
   - Gap uniforme de 4px entre ellos.
   - Tutor: icono morado 🎓 a 1.6rem + sutil indicador de
     punto morado abajo (como un "notification dot") para que
     destaque sin necesidad de envoltura.
   ════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
    /* Reset de los botones del header: sin envoltura */
    .eatp-app.eatp-holo-mode .eatp-header-actions {
        gap: 2px; /* gap muy tight, los iconos llevan su propio padding */
    }
    .eatp-app.eatp-holo-mode .eatp-header-actions button,
    .eatp-app.eatp-holo-mode .eatp-header-actions .eatp-mode-selector {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 6px 8px !important;
        min-height: 40px !important;
        min-width: 40px !important;
        font-size: 1.4rem !important; /* iconos más grandes */
        line-height: 1;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        color: #fff !important;
        box-shadow: none !important;
    }
    .eatp-app.eatp-holo-mode .eatp-header-actions button:hover,
    .eatp-app.eatp-holo-mode .eatp-header-actions button:active {
        background: rgba(255, 255, 255, 0.12) !important;
        border-radius: 8px !important;
        transform: none;
    }

    /* El selector de modo (🎯 + <select>) necesita tratamiento especial:
       el emoji se agranda, el select se mantiene legible. */
    .eatp-app.eatp-holo-mode .eatp-header-actions .eatp-mode-selector {
        gap: 2px;
    }
    .eatp-app.eatp-holo-mode .eatp-header-actions .eatp-mode-label {
        font-size: 1.4rem;
    }
    .eatp-app.eatp-holo-mode .eatp-header-actions select {
        font-size: 0.7rem !important;
        min-height: 32px !important;
        padding: 2px 4px !important;
        max-width: 70px;
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 6px;
    }

    /* v3.36.1: Tutor destacado — icono morado más grande + dot indicator.
       NOTA: usamos `button.eatp-tutor-btn-header` (specificity 0,4,1) para
       ganar sobre `.eatp-header-actions button` (0,3,1). Sin el `button` en
       el selector, la regla general de 1.4rem ganaba por specificity. */
    .eatp-app.eatp-holo-mode .eatp-header-actions button.eatp-tutor-btn-header {
        background: transparent !important;
        color: #c4b5fd !important; /* morado claro para el emoji */
        font-size: 1.6rem !important; /* más grande que los demás (1.4rem) */
        padding: 6px 8px !important;
        min-height: 40px !important;
        min-width: 40px !important;
        position: relative;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
    }
    .eatp-app.eatp-holo-mode .eatp-header-actions button.eatp-tutor-btn-header:hover,
    .eatp-app.eatp-holo-mode .eatp-header-actions button.eatp-tutor-btn-header:active {
        background: rgba(139, 92, 246, 0.18) !important;
        border-radius: 8px !important;
        color: #ddd6fe !important;
        transform: none;
    }
    /* Dot indicator morado abajo del icono Tutor — sutil pero distintivo */
    .eatp-app.eatp-holo-mode .eatp-header-actions button.eatp-tutor-btn-header::after {
        content: '';
        position: absolute;
        bottom: 2px;
        left: 50%;
        transform: translateX(-50%);
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #a78bfa; /* morado */
        box-shadow: 0 0 6px rgba(167, 139, 250, 0.8);
    }
    /* Ocultar el texto "Tutor" en móvil (solo emoji + dot) */
    .eatp-app.eatp-holo-mode .eatp-tutor-btn-header .eatp-tutor-btn-label {
        display: none;
    }

    /* v3.36.1: Certificado — ocultar el texto "Certificado" en móvil,
       mostrar solo 🏅. El texto está envuelto en <span class="eatp-cert-btn-label">. */
    .eatp-app.eatp-holo-mode .eatp-cert-btn {
        font-size: 1.4rem !important;
        color: #fef3c7 !important; /* dorado claro */
    }
    .eatp-app.eatp-holo-mode .eatp-cert-btn-label {
        display: none;
    }
}

@media (max-width: 560px) {
    /* En móvil angosto, los iconos del header pueden ser ligeramente
       más pequeños para asegurar que todos quepan. */
    .eatp-app.eatp-holo-mode .eatp-header-actions button,
    .eatp-app.eatp-holo-mode .eatp-header-actions .eatp-mode-selector {
        font-size: 1.3rem !important;
        padding: 4px 6px !important;
        min-height: 36px !important;
        min-width: 36px !important;
    }
    /* v3.36.1: Tutor sigue siendo más grande que los demás (specificity fix) */
    .eatp-app.eatp-holo-mode .eatp-header-actions button.eatp-tutor-btn-header {
        font-size: 1.5rem !important;
    }
}


/* ════════════════════════════════════════════════════════
   v3.37.0+ — NATIVE APP SHELL: Drawer + Topbar + Tips modal
   v3.37.1: Tabs in drawer + Explicar button + lesson card collapse
   v3.37.2: Full-width on desktop too
   ════════════════════════════════════════════════════════ */

/* v3.38.0: Topbar + drawer nav hidden on desktop by default.
   The .eatp-drawer-info section (user/stats/mode/plan/cert) is visible on
   desktop as the normal header; on mobile it's inside the drawer. */
.eatp-topbar,
.eatp-drawer-nav {
    display: none;
}

@media (max-width: 960px) {
    /* ── Topbar: minimal bar (hamburger + title + tutor) ── */
    .eatp-app.eatp-holo-mode .eatp-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 6px 12px;
        padding-top: max(6px, env(safe-area-inset-top, 0px));
        background: linear-gradient(135deg, var(--eatp-primary, #10b981), var(--eatp-primary-dark, #059669));
        color: #fff;
        min-height: 48px;
        flex-shrink: 0;
        z-index: 30;
    }
    .eatp-app.eatp-holo-mode .eatp-drawer-toggle {
        background: transparent; border: none; color: #fff;
        padding: 6px; min-width: 40px; min-height: 40px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 8px; cursor: pointer;
    }
    .eatp-app.eatp-holo-mode .eatp-drawer-toggle:hover { background: rgba(255,255,255,0.15); }
    .eatp-app.eatp-holo-mode .eatp-topbar-title {
        font-size: 1.05rem; font-weight: 700; flex: 1; text-align: center;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* Tutor button: pinned to top-right of topbar */
    .eatp-app.eatp-holo-mode .eatp-header-actions button.eatp-tutor-btn-header {
        position: fixed;
        top: max(4px, env(safe-area-inset-top, 0px));
        right: 8px; z-index: 40;
        background: transparent !important;
        color: #c4b5fd !important;
        font-size: 1.5rem !important;
        padding: 6px !important;
        min-height: 44px !important; min-width: 44px !important;
    }

    /* ── Header → Drawer (off-canvas left) ── */
    .eatp-app.eatp-holo-mode .eatp-header {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 300px; max-width: 85vw;
        background: var(--eatp-surface, #fff);
        color: var(--eatp-text, #0f172a);
        z-index: 50; overflow-y: auto; -webkit-overflow-scrolling: touch;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
        padding: 16px; padding-top: max(16px, env(safe-area-inset-top, 0px));
        box-shadow: 2px 0 16px rgba(0,0,0,0.15);
        display: block;
    }
    .eatp-app.eatp-holo-mode.eatp-drawer-open .eatp-header { transform: translateX(0); }

    .eatp-app.eatp-holo-mode .eatp-drawer-backdrop {
        position: fixed; inset: 0; background: rgba(0,0,0,0.5);
        z-index: 45; display: block;
    }
    .eatp-app.eatp-holo-mode .eatp-drawer-backdrop[hidden] { display: none; }

    /* Drawer internal layout */
    .eatp-app.eatp-holo-mode .eatp-header .eatp-header-top {
        flex-direction: column; align-items: stretch; gap: 12px;
        background: transparent; padding: 0 0 12px 0;
        border-bottom: 1px solid var(--eatp-border, #e2e8f0);
    }
    .eatp-app.eatp-holo-mode .eatp-header .eatp-user-info { flex-direction: column; align-items: flex-start; gap: 6px; }
    .eatp-app.eatp-holo-mode .eatp-header .eatp-user-name { color: var(--eatp-text, #0f172a); font-size: 1.1rem; max-width: 100%; }
    .eatp-app.eatp-holo-mode .eatp-header .eatp-level-badge { background: var(--eatp-primary-soft, #d1fae5); color: var(--eatp-primary-dark, #059669); }
    .eatp-app.eatp-holo-mode .eatp-header .eatp-streak { background: var(--eatp-amber-bg, #fef3c7); color: #78350f; }
    .eatp-app.eatp-holo-mode .eatp-header .eatp-header-actions { flex-direction: column; gap: 6px; margin-left: 0; }
    .eatp-app.eatp-holo-mode .eatp-header .eatp-header-actions button {
        background: var(--eatp-surface-alt, #f1f5f9) !important;
        color: var(--eatp-text, #0f172a) !important;
        border: 1px solid var(--eatp-border, #e2e8f0) !important;
        border-radius: 10px !important; padding: 12px 14px !important;
        min-height: 44px !important; font-size: 0.9rem !important; font-weight: 600 !important;
        justify-content: flex-start !important; gap: 8px !important; width: 100%;
    }
    .eatp-app.eatp-holo-mode .eatp-header .eatp-header-actions .eatp-tutor-btn-label,
    .eatp-app.eatp-holo-mode .eatp-header .eatp-header-actions .eatp-cert-btn-label { display: inline !important; }
    .eatp-app.eatp-holo-mode.eatp-drawer-open .eatp-header-actions button.eatp-tutor-btn-header {
        position: static; color: #7c3aed !important;
    }
    .eatp-app.eatp-holo-mode.eatp-drawer-open .eatp-header-actions button.eatp-tutor-btn-header::after { display: none; }
    .eatp-app.eatp-holo-mode .eatp-header .eatp-mode-selector { width: 100%; justify-content: flex-start; }
    .eatp-app.eatp-holo-mode .eatp-header .eatp-mode-selector select {
        max-width: none; flex: 1; background: var(--eatp-surface-alt, #f1f5f9);
        color: var(--eatp-text, #0f172a); border: 1px solid var(--eatp-border, #e2e8f0);
        padding: 8px 10px; border-radius: 8px; font-size: 0.9rem;
    }
    .eatp-app.eatp-holo-mode .eatp-header .eatp-header-stats {
        flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 12px;
        border-top: 1px solid var(--eatp-border, #e2e8f0);
    }
    .eatp-app.eatp-holo-mode .eatp-header .eatp-header-stats .eatp-xp-bar { width: 100%; }
    .eatp-app.eatp-holo-mode .eatp-header .eatp-header-stats .eatp-xp-bar-label { color: var(--eatp-text-muted, #475569); }
    .eatp-app.eatp-holo-mode .eatp-header .eatp-header-stats .eatp-xp-pct { color: var(--eatp-text-muted, #475569); }
    .eatp-app.eatp-holo-mode .eatp-header .eatp-header-stats .eatp-mini-stats { justify-content: flex-start; }

    /* Hide external tab bar on mobile — tabs live in the drawer */
    .eatp-app.eatp-holo-mode .eatp-tabs { display: none !important; }

    /* v3.38.0: Show drawer nav + info sections on mobile */
    .eatp-app.eatp-holo-mode .eatp-drawer-nav { display: block; }
    .eatp-app.eatp-holo-mode .eatp-drawer-info { display: block; }

    /* v3.38.0: Prominent Tutor bar at the top of the drawer */
    .eatp-app.eatp-holo-mode .eatp-drawer-tutor-bar {
        display: flex; align-items: center; gap: 12px; width: 100%;
        padding: 14px 16px; margin-bottom: 8px;
        background: linear-gradient(135deg, #8b5cf6, #7c3aed);
        color: #fff; border: none; border-radius: 12px;
        font-size: 1rem; font-weight: 700; text-align: left; cursor: pointer;
        min-height: 52px; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .eatp-app.eatp-holo-mode .eatp-drawer-tutor-bar:hover {
        transform: translateY(-1px); box-shadow: 0 6px 16px rgba(139, 92, 246, 0.45);
    }
    .eatp-app.eatp-holo-mode .eatp-drawer-tutor-bar:active { transform: translateY(0); }
    .eatp-app.eatp-holo-mode .eatp-drawer-tutor-icon { font-size: 1.5rem; line-height: 1; }
    .eatp-app.eatp-holo-mode .eatp-drawer-tutor-text { flex: 1; }
    .eatp-app.eatp-holo-mode .eatp-drawer-tutor-arrow { font-size: 1.5rem; opacity: 0.7; }

    /* Drawer navigation section — at the TOP, below the tutor bar */
    .eatp-app.eatp-holo-mode .eatp-drawer-nav { padding: 0 0 12px 0; border-bottom: 1px solid var(--eatp-border, #e2e8f0); margin-bottom: 12px; }
    .eatp-app.eatp-holo-mode .eatp-drawer-section-title {
        font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
        color: var(--eatp-text-faint, #94a3b8); padding: 0 4px 8px 4px;
    }
    .eatp-app.eatp-holo-mode .eatp-drawer-tab {
        display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px;
        background: transparent; border: none; border-radius: 10px;
        color: var(--eatp-text, #0f172a); font-size: 0.95rem; font-weight: 600;
        text-align: left; cursor: pointer; transition: background 0.15s ease; min-height: 44px;
    }
    .eatp-app.eatp-holo-mode .eatp-drawer-tab:hover { background: var(--eatp-surface-alt, #f1f5f9); }
    .eatp-app.eatp-holo-mode .eatp-drawer-tab[aria-selected="true"] {
        background: var(--eatp-primary-soft, #d1fae5); color: var(--eatp-primary-dark, #059669); font-weight: 700;
    }

    /* Drawer info section — BELOW the navigation */
    .eatp-app.eatp-holo-mode .eatp-drawer-info { }

    /* Full-width app on mobile */
    .eatp-app.eatp-holo-mode { max-width: 100% !important; margin: 0 !important; border-radius: 0 !important; }

    /* Chat intro compact */
    .eatp-app.eatp-holo-mode #eatp-chat-intro { padding: 16px 12px !important; text-align: center; }
    .eatp-app.eatp-holo-mode #eatp-chat-intro > div:first-child { font-size: 2rem !important; margin-bottom: 6px !important; }
    .eatp-app.eatp-holo-mode #eatp-chat-intro h3 { font-size: 1rem !important; margin-bottom: 6px !important; }
    .eatp-app.eatp-holo-mode #eatp-chat-intro p { font-size: 0.8rem !important; margin-bottom: 12px !important; }
    .eatp-app.eatp-holo-mode #eatp-chat-intro .eatp-start-classes-btn { font-size: 0.95rem; padding: 11px 24px; }

    /* Message buttons: full-width solid bars */
    .eatp-app.eatp-holo-mode .eatp-message-actions {
        display: flex; flex-direction: column; gap: 6px; margin-top: 8px; width: 100%; padding: 0;
    }
    .eatp-app.eatp-holo-mode .eatp-msg-btn {
        width: 100%; min-height: 40px; padding: 8px 14px; font-size: 0.85rem; font-weight: 700;
        border-radius: 10px; border: none; display: flex; align-items: center; justify-content: center; gap: 6px;
        background: #10b981 !important; color: #ffffff !important; box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    }
    .eatp-app.eatp-holo-mode .eatp-msg-btn[aria-label*="Explicar"] { background: #f59e0b !important; color: #ffffff !important; }
    .eatp-app.eatp-holo-mode .eatp-msg-btn.eatp-ask-maria-btn { background: #3b82f6 !important; color: #ffffff !important; }

    /* Panels: minimal padding */
    .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 { padding: 6px !important; gap: 6px !important; }
    .eatp-app.eatp-holo-mode .eatp-messages { padding: 6px !important; border-radius: 10px !important; }
}

/* v3.38.0: Tips modal CSS removed (Point 2 — tips popup eliminated). */


/* ════════════════════════════════════════════════════════
   v3.38.1 — Tutor modal header alignment (Point 2)
   All header elements (title + avatar + stop + close) must be
   horizontally aligned and centered. Avatar bigger. Stop button
   not dominant. Intro text darker + bigger.
   ════════════════════════════════════════════════════════ */

.eatp-app.eatp-holo-mode .eatp-tutor-modal .eatp-modal-header {
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
}

/* The tutor avatar (injected by holographic-avatars.js into the header) */
.eatp-app.eatp-holo-mode .eatp-tutor-avatar-inline {
    margin-left: 0;
    margin-right: 0;
    flex-shrink: 0;
}
.eatp-app.eatp-holo-mode .holo-tutor-header-avatar {
    width: 48px;
    height: 48px;
}
.eatp-app.eatp-holo-mode .holo-tutor-header-avatar .eatp-holo-avatar-wrap {
    width: 48px !important;
    height: 48px !important;
}
.eatp-app.eatp-holo-mode .holo-tutor-header-avatar .eatp-holo-avatar-badge {
    width: 18px;
    height: 18px;
    font-size: 9px;
    border-width: 1.5px;
}

/* Stop voice button — same size as the close button, not dominant */
.eatp-app.eatp-holo-mode .eatp-tutor-stop-voice {
    min-width: 36px !important;
    min-height: 36px !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
}
.eatp-app.eatp-holo-mode .eatp-tutor-stop-voice .eatp-stop-icon {
    width: 16px !important;
    height: 16px !important;
}
.eatp-app.eatp-holo-mode .eatp-tutor-stop-voice:hover {
    background: #ef4444 !important;
    color: #fff !important;
}

/* Close button — same size as stop */
.eatp-app.eatp-holo-mode .eatp-tutor-modal .eatp-modal-close {
    min-width: 36px;
    min-height: 36px;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

/* Header actions group — push to the right */
.eatp-app.eatp-holo-mode .eatp-tutor-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Intro text — bigger + darker for readability */
.eatp-app.eatp-holo-mode .eatp-tutor-intro {
    font-size: 0.95rem !important;
    color: #334155 !important;
    line-height: 1.5 !important;
    margin: 0 0 12px !important;
    padding: 10px 14px;
    background: #f1f5f9;
    border-radius: 8px;
}

@media (max-width: 640px) {
    .eatp-app.eatp-holo-mode .holo-tutor-header-avatar {
        width: 40px;
        height: 40px;
    }
    .eatp-app.eatp-holo-mode .holo-tutor-header-avatar .eatp-holo-avatar-wrap {
        width: 40px !important;
        height: 40px !important;
    }
    /* On mobile, the title can be shorter to fit */
    .eatp-app.eatp-holo-mode .eatp-tutor-modal .eatp-modal-title {
        font-size: 0.9rem;
        max-width: 35vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ════════════════════════════════════════════════════════
   v3.38.1 — FLAT DESIGN: Remove left-border accents + rounded boxes (Point 6)
   Replace with full-width flat cells, no AI-style margins.
   Only keep color for subtle top/bottom separation (like spreadsheet cells).
   ════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
    /* Message bubbles: flat full-width cells, no rounded corners, no left accent */
    .eatp-app.eatp-holo-mode .eatp-msg-teacher,
    .eatp-app.eatp-holo-mode .eatp-msg-helper {
        border-left: none !important;
        border-radius: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        /* Subtle bottom border for cell separation */
        border-bottom: 1px solid var(--eatp-border, #e2e8f0);
    }
    .eatp-app.eatp-holo-mode .eatp-msg-teacher {
        background: #f0f9ff !important; /* very light blue tint */
    }
    .eatp-app.eatp-holo-mode .eatp-msg-helper {
        background: #fffbeb !important; /* very light amber tint */
    }
    /* User messages: flat too, right-aligned tint */
    .eatp-app.eatp-holo-mode .eatp-message-user {
        border-radius: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        border-bottom: 1px solid var(--eatp-border, #e2e8f0);
    }

    /* Messages container: no rounded box, just flat */
    .eatp-app.eatp-holo-mode .eatp-messages {
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        background: var(--eatp-bg, #f8fafc) !important;
    }

    /* Lesson card: flat, no rounded */
    .eatp-app.eatp-holo-mode .eatp-lesson-card {
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 2px solid var(--eatp-primary, #10b981) !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

    /* Practice/Challenge cards: flat */
    .eatp-app.eatp-holo-mode .eatp-practice-card,
    .eatp-app.eatp-holo-mode .eatp-challenge-card {
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 2px solid var(--eatp-primary, #10b981) !important;
        box-shadow: none !important;
        margin: 0 0 6px 0 !important;
        padding: 12px 10px !important;
    }

    /* Feedback boxes: flat, no left accent */
    .eatp-app.eatp-holo-mode .eatp-feedback {
        border-left: none !important;
        border-radius: 0 !important;
        border-bottom: 1px solid var(--eatp-border, #e2e8f0) !important;
        padding: 10px 12px !important;
        margin: 4px 0 !important;
    }

    /* Typing indicator: flat */
    .eatp-app.eatp-holo-mode .eatp-typing {
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Conversation intro: flat */
    .eatp-app.eatp-holo-mode .eatp-conversation-intro {
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 2px solid var(--eatp-primary, #10b981) !important;
        box-shadow: none !important;
        margin: 0 !important;
    }
}

/* ════════════════════════════════════════════════════════
   v3.38.2 — Tutor modal header unified + flat design everywhere
   + avatar dock flat + drawer flat + Salir button
   ════════════════════════════════════════════════════════ */

/* ── Point 3: Tutor modal header — ONE centered horizontal line ──
   All elements (title + avatar + stop + close) in a single flex row,
   vertically centered. Avatar bigger (56px). No divisions. */
.eatp-app.eatp-holo-mode .eatp-tutor-modal .eatp-modal-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    min-height: 56px !important;
}
/* Title: flex-shrink so it truncates if needed */
.eatp-app.eatp-holo-mode .eatp-tutor-modal .eatp-modal-title {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Avatar: bigger, same line */
.eatp-app.eatp-holo-mode .eatp-tutor-avatar-inline {
    margin: 0 !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.eatp-app.eatp-holo-mode .holo-tutor-header-avatar {
    width: 56px !important;
    height: 56px !important;
}
.eatp-app.eatp-holo-mode .holo-tutor-header-avatar .eatp-holo-avatar-wrap {
    width: 56px !important;
    height: 56px !important;
}
/* Actions group: pushed right, all same size */
.eatp-app.eatp-holo-mode .eatp-tutor-header-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0;
}
.eatp-app.eatp-holo-mode .eatp-tutor-stop-voice,
.eatp-app.eatp-holo-mode .eatp-tutor-modal .eatp-modal-close {
    min-width: 36px !important;
    min-height: 36px !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
}

/* ── Point 5: Mobile avatar dock — flat, no containers ──
   Avatars side-by-side in the same bar, no rounded boxes. */
@media (max-width: 960px) {
    .eatp-app.eatp-holo-mode .eatp-holo-avatar-col {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 4px 8px !important;
        border-bottom: 1px solid var(--eatp-border, #e2e8f0) !important;
    }
    /* Remove the left accent border from avatar columns */
    .eatp-app.eatp-holo-mode .eatp-holo-col-left .eatp-holo-avatar-col,
    .eatp-app.eatp-holo-mode .eatp-holo-col-right .eatp-holo-avatar-col {
        border-left: none !important;
    }
    /* Remove the active-speaker box-shadow ring (keep just border-color) */
    .eatp-app.eatp-holo-mode .eatp-holo-avatar-col:has(.eatp-holo-avatar-wrap.is-speaking) {
        box-shadow: none !important;
        border-bottom: 2px solid var(--eatp-primary, #10b981) !important;
    }
    .eatp-app.eatp-holo-mode .eatp-holo-col-right .eatp-holo-avatar-col:has(.eatp-holo-avatar-wrap.is-speaking) {
        border-bottom-color: var(--eatp-holo-es, #f59e0b) !important;
    }
}

/* ── Point 6: App drawer — flat material design, no rounded containers ── */
@media (max-width: 960px) {
    /* Drawer itself: flat, no shadow */
    .eatp-app.eatp-holo-mode .eatp-header {
        box-shadow: 2px 0 8px rgba(0,0,0,0.1) !important;
    }
    /* Action buttons in drawer: flat, full-width, no rounded */
    .eatp-app.eatp-holo-mode .eatp-header .eatp-header-actions button {
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--eatp-border, #e2e8f0) !important;
        background: transparent !important;
        padding: 12px 14px !important;
    }
    .eatp-app.eatp-holo-mode .eatp-header .eatp-header-actions button:hover {
        background: var(--eatp-surface-alt, #f1f5f9) !important;
    }
    /* Mode selector + level selector: flat */
    .eatp-app.eatp-holo-mode .eatp-header .eatp-mode-selector select {
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--eatp-border, #e2e8f0) !important;
        background: transparent !important;
        padding: 8px 0 !important;
    }
    /* Drawer nav tabs: flat, no rounded */
    .eatp-app.eatp-holo-mode .eatp-drawer-tab {
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--eatp-border, #e2e8f0) !important;
    }
    .eatp-app.eatp-holo-mode .eatp-drawer-tab:hover {
        background: var(--eatp-surface-alt, #f1f5f9) !important;
    }
    .eatp-app.eatp-holo-mode .eatp-drawer-tab[aria-selected="true"] {
        border-left: 3px solid var(--eatp-primary, #10b981) !important;
        background: var(--eatp-primary-soft, #d1fae5) !important;
    }
    /* Tutor bar: flat, no rounded */
    .eatp-app.eatp-holo-mode .eatp-drawer-tutor-bar {
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    /* Stats section: flat */
    .eatp-app.eatp-holo-mode .eatp-header .eatp-header-stats {
        border-top: 1px solid var(--eatp-border, #e2e8f0) !important;
    }
    /* XP bar track: flat */
    .eatp-app.eatp-holo-mode .eatp-xp-track {
        border-radius: 0 !important;
    }
    .eatp-app.eatp-holo-mode .eatp-xp-fill {
        border-radius: 0 !important;
    }
    /* Mini stats: flat */
    .eatp-app.eatp-holo-mode .eatp-mini-stat {
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
    }
    /* Level badge + streak: flat */
    .eatp-app.eatp-holo-mode .eatp-level-badge,
    .eatp-app.eatp-holo-mode .eatp-streak {
        border-radius: 0 !important;
    }
}

/* ── Point 4: Flat design for remaining containers (all viewports) ──
   Remove rounded corners + left borders from ALL remaining containers. */

/* Message bubbles (desktop too) */
.eatp-app.eatp-holo-mode .eatp-msg-teacher,
.eatp-app.eatp-holo-mode .eatp-msg-helper {
    border-left: none !important;
    border-radius: 0 !important;
}

/* Feedback boxes */
.eatp-app.eatp-holo-mode .eatp-feedback {
    border-left: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--eatp-border, #e2e8f0) !important;
}

/* Tutor messages */
.eatp-app.eatp-holo-mode .eatp-tutor-msg {
    border-radius: 0 !important;
    border-left: none !important;
}
.eatp-app.eatp-holo-mode .eatp-tutor-msg-assistant {
    border-left: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--eatp-border, #e2e8f0) !important;
}

/* María sub-chat */
.eatp-app.eatp-holo-mode .eatp-maria-subchat {
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--eatp-border, #e2e8f0) !important;
}

/* Input bar: flat */
.eatp-app.eatp-holo-mode .eatp-input-bar {
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid var(--eatp-border, #e2e8f0) !important;
}

/* Vocab chips: flat */
.eatp-app.eatp-holo-mode .eatp-vocab-chip {
    border-radius: 0 !important;
}

/* Score badges: flat */
.eatp-app.eatp-holo-mode .eatp-score-badge {
    border-radius: 0 !important;
}

/* Continue banner: flat */
.eatp-app.eatp-holo-mode .eatp-continue-banner {
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 2px solid #3b82f6 !important;
}

/* Lesson complete banner: flat */
.eatp-app.eatp-holo-mode .eatp-lesson-complete-banner {
    border-radius: 0 !important;
}

/* Modals: flat */
.eatp-app.eatp-holo-mode .eatp-modal-dialog {
    border-radius: 0 !important;
}
.eatp-app.eatp-holo-mode .eatp-modal-header {
    border-radius: 0 !important;
}
.eatp-app.eatp-holo-mode .eatp-modal-footer {
    border-radius: 0 !important;
}

/* ── Point 7: Salir button — full-width at bottom of drawer ── */
.eatp-drawer-exit-btn {
    display: none; /* hidden on desktop */
}
@media (max-width: 960px) {
    .eatp-app.eatp-holo-mode .eatp-drawer-exit-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 14px 16px;
        margin-top: 16px;
        background: transparent;
        color: var(--eatp-text-muted, #475569);
        border: none;
        border-top: 1px solid var(--eatp-border, #e2e8f0);
        border-radius: 0;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        min-height: 48px;
        transition: background 0.15s ease;
    }
    .eatp-app.eatp-holo-mode .eatp-drawer-exit-btn:hover {
        background: var(--eatp-red-bg, #fee2e2);
        color: var(--eatp-red, #ef4444);
    }
    .eatp-app.eatp-holo-mode .eatp-drawer-exit-btn:active {
        background: var(--eatp-red, #ef4444);
        color: #fff;
    }
}

/* ── Point 3: Tutor intro text — bigger + darker (extends v3.38.1) ── */
.eatp-app.eatp-holo-mode .eatp-tutor-intro {
    font-size: 0.95rem !important;
    color: #1e293b !important;
    line-height: 1.6 !important;
    padding: 12px 14px !important;
    background: #f1f5f9 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--eatp-border, #e2e8f0) !important;
}

/* ════════════════════════════════════════════════════════
   v3.38.4 — Translation bubble (A1/A2 conversation mode)
   Text-only, NO TTS. Just visual Spanish for comprehension.
   ════════════════════════════════════════════════════════ */
.eatp-app.eatp-holo-mode .eatp-message-translation {
    align-self: flex-start;
    background: #f8fafc !important;
    color: #64748b !important;
    border: none !important;
    border-left: 3px solid #cbd5e1 !important;
    border-radius: 0 !important;
    font-size: 0.85rem;
    font-style: italic;
    padding: 8px 12px !important;
    max-width: 90% !important;
    opacity: 0.85;
}
.eatp-app.eatp-holo-mode .eatp-message-translation::before {
    content: '📝 ';
    font-style: normal;
}
.eatp-app.eatp-holo-mode .eatp-message-translation .eatp-message-actions {
    display: none !important;
}

/* v3.38.4 Point 6: Change 🇬🇧 England flag → 🇺🇸 US flag in avatar badges */
.eatp-app.eatp-holo-mode .eatp-holo-avatar-badge {
    /* The badge emoji is set by holographic-avatars.js buildTeacherAvatar().
       We override it via CSS for the EN teacher badge. */
}

/* ════════════════════════════════════════════════════════════════════
   v3.46.2 FIX — Eliminar agujero blanco entre topbar y tabs
   El problema: al mover el botón Tutor, quedó espacio fantasma
   del viejo contenedor .eatp-drawer-tutor-bar que tenía min-height: 52px.
   Solución: ocultar el viejo tutor bar CSS + reducir padding del header.
   ════════════════════════════════════════════════════════════════════ */

/* Anular el CSS del viejo tutor bar — ya no existe en el HTML */
.eatp-app.eatp-holo-mode .eatp-drawer-tutor-bar {
    display: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* En desktop, reducir el padding superior del header para eliminar
   el agujero blanco entre el topbar (oculto) y el contenido */
@media (min-width: 961px) {
    .eatp-app.eatp-holo-mode .eatp-header {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .eatp-app.eatp-holo-mode .eatp-drawer-info {
        padding: 0;
        margin: 0;
    }
    .eatp-app.eatp-holo-mode .eatp-header-top {
        padding: 0;
        margin: 0;
    }
}

/* En móvil, asegurar que no haya espacio fantasma entre topbar y drawer */
@media (max-width: 960px) {
    .eatp-app.eatp-holo-mode .eatp-topbar {
        margin-bottom: 0;
    }
    /* El header es off-canvas en móvil, no debe ocupar espacio visible */
    .eatp-app.eatp-holo-mode:not(.eatp-drawer-open) .eatp-header {
        position: fixed;
        transform: translateX(-100%);
        pointer-events: none;
    }
}