/* =====================================================
   English AI Tutor Pro v3.0.0 — Frontend Styles
   Mobile-first. Emerald primary. Sticky footer.
   Three modes: Chat / Práctica / Reto.
   ===================================================== */

/* FIX bug #4: [hidden] must ALWAYS hide, overriding any display:flex/inline-flex
   set by component classes later in this file. */
[hidden] { display: none !important; }

:root {
    --eatp-primary: #10b981;          /* emerald-500 */
    --eatp-primary-dark: #059669;     /* emerald-600 */
    --eatp-primary-light: #d1fae5;    /* emerald-100 */
    --eatp-primary-soft: #ecfdf5;     /* emerald-50 */
    --eatp-bg: #f8fafc;               /* slate-50 */
    --eatp-surface: #ffffff;
    --eatp-surface-alt: #f1f5f9;      /* slate-100 */
    --eatp-text: #0f172a;             /* slate-900 */
    --eatp-text-muted: #475569;       /* slate-600 */
    --eatp-text-faint: #94a3b8;       /* slate-400 */
    --eatp-border: #e2e8f0;           /* slate-200 */
    --eatp-border-strong: #cbd5e1;    /* slate-300 */
    --eatp-amber: #f59e0b;            /* amber-500 — María */
    --eatp-amber-bg: #fef3c7;         /* amber-100 */
    --eatp-amber-border: #eab308;
    --eatp-yellow-bg: #fef9c3;
    --eatp-yellow-border: #eab308;
    --eatp-red: #ef4444;
    --eatp-red-bg: #fee2e2;
    --eatp-radius: 12px;
    --eatp-radius-sm: 8px;
    --eatp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --eatp-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --eatp-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
    --eatp-touch: 44px;               /* min touch target */
    --eatp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", sans-serif;
    --eatp-font-serif: Georgia, "Times New Roman", serif;
    --eatp-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --eatp-header-h: 132px;
    --eatp-tabs-h: 48px;
}

/* Reset within plugin scope */
.eatp-app,
.eatp-app *,
.eatp-app *::before,
.eatp-app *::after {
    box-sizing: border-box;
}

.eatp-app {
    --w: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--eatp-bg);
    color: var(--eatp-text);
    font-family: var(--eatp-font);
    font-size: 16px;
    line-height: 1.5;
    max-width: 920px;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
    /* v3.10: ensure visibility even if JS fails to load (mobile robustness) */
    position: relative;
    visibility: visible;
    opacity: 1;
}

.eatp-app button,
.eatp-app input,
.eatp-app textarea,
.eatp-app select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

.eatp-app button {
    cursor: pointer;
    border: 0;
    background: transparent;
    min-height: var(--eatp-touch);
    min-width: var(--eatp-touch);
    border-radius: var(--eatp-radius-sm);
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.eatp-app button:active {
    transform: scale(0.97);
}

.eatp-app button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.eatp-app :focus-visible {
    outline: 2px solid var(--eatp-primary);
    outline-offset: 2px;
}

/* sr-only */
.eatp-sr-only,
.eatp-app .sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* =====================================================
   Header: name + level badge + gamification + XP bar + streak
   ===================================================== */
.eatp-header {
    background: linear-gradient(135deg, var(--eatp-primary), var(--eatp-primary-dark));
    color: #fff;
    padding: 12px 16px 14px;
    flex-shrink: 0;
    box-shadow: var(--eatp-shadow-sm);
    z-index: 20;
}

.eatp-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.eatp-user-name {
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
}

.eatp-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.eatp-level-badge .eatp-gami {
    font-size: 0.95rem;
    line-height: 1;
}

.eatp-streak {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.18);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.eatp-streak.eatp-streak-hot {
    background: rgba(251, 191, 36, 0.35);
}

.eatp-xp-meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.95;
}

.eatp-header-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
}

.eatp-header-actions button {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    padding: 6px 10px;
    min-height: 36px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 999px;
}

.eatp-header-actions button:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* XP progress bar (5-tier style) */
.eatp-xp-bar {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.eatp-xp-bar-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.85);
    min-width: 64px;
}

.eatp-xp-track {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.eatp-xp-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #fbbf24, #fde047);
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.eatp-xp-pct {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    min-width: 36px;
    text-align: right;
}

/* =====================================================
   Tabs (role=tablist)
   ===================================================== */
.eatp-tabs {
    display: flex;
    background: var(--eatp-surface);
    border-bottom: 1px solid var(--eatp-border);
    flex-shrink: 0;
    z-index: 10;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.eatp-tabs::-webkit-scrollbar {
    display: none;
}

.eatp-tab {
    flex: 1 0 auto;
    padding: 12px 16px;
    min-height: var(--eatp-tabs-h);
    color: var(--eatp-text-muted);
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 3px solid transparent;
    background: transparent;
    white-space: nowrap;
    border-radius: 0;
}

.eatp-tab:hover {
    color: var(--eatp-text);
    background: var(--eatp-surface-alt);
}

.eatp-tab[aria-selected="true"] {
    color: var(--eatp-primary-dark);
    border-bottom-color: var(--eatp-primary);
    background: var(--eatp-surface);
}

/* v3.31.1: cada pestaña con su propio color de acento, como pidió el cliente:
   Clases      → azul
   Práctica    → amarillo
   Reto        → rojo
   Conversación → blanco (con borde gris oscuro para contraste sobre fondo claro)
   Aplica tanto al estado activo como al hover, sin perder legibilidad. */

/* Clases — AZUL */
.eatp-tab[data-tab="chat"] {
    color: #1d4ed8;
}
.eatp-tab[data-tab="chat"]:hover {
    background: #dbeafe;
    color: #1e3a8a;
}
.eatp-tab[data-tab="chat"][aria-selected="true"] {
    color: #ffffff !important;
    background: #2563eb !important;
    border-bottom-color: #1d4ed8 !important;
}

/* Práctica — AMARILLO */
.eatp-tab[data-tab="practice"] {
    color: #a16207;
}
.eatp-tab[data-tab="practice"]:hover {
    background: #fef9c3;
    color: #713f12;
}
.eatp-tab[data-tab="practice"][aria-selected="true"] {
    color: #1f2937 !important;
    background: #facc15 !important;
    border-bottom-color: #ca8a04 !important;
}

/* Reto — ROJO */
.eatp-tab[data-tab="challenge"] {
    color: #b91c1c;
}
.eatp-tab[data-tab="challenge"]:hover {
    background: #fee2e2;
    color: #7f1d1d;
}
.eatp-tab[data-tab="challenge"][aria-selected="true"] {
    color: #ffffff !important;
    background: #dc2626 !important;
    border-bottom-color: #b91c1c !important;
}

/* Conversación — BLANCO con borde oscuro para contraste */
.eatp-tab[data-tab="conversation"] {
    color: #334155;
    background: #ffffff;
    border-left: 1px solid var(--eatp-border);
    border-right: 1px solid var(--eatp-border);
}
.eatp-tab[data-tab="conversation"]:hover {
    background: #f8fafc;
    color: #0f172a;
}
.eatp-tab[data-tab="conversation"][aria-selected="true"] {
    color: #0f172a !important;
    background: #ffffff !important;
    border-bottom-color: #0f172a !important;
    box-shadow: inset 0 -3px 0 #0f172a;
}

/* =====================================================
   Main + panels
   ===================================================== */
.eatp-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--eatp-bg);
}

.eatp-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.eatp-panel[hidden] {
    display: none !important;
}

/* =====================================================
   Chat panel — messages
   ===================================================== */
.eatp-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
    background: var(--eatp-bg);
}

.eatp-message {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.95rem;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    position: relative;
    animation: eatp-msg-in 0.28s ease;
    box-shadow: var(--eatp-shadow-sm);
}

@keyframes eatp-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.eatp-message-user {
    align-self: flex-end;
    background: var(--eatp-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.eatp-message-alex {
    align-self: flex-start;
    background: var(--eatp-surface);
    color: var(--eatp-text);
    border-bottom-left-radius: 4px;
    border: 1px solid var(--eatp-border);
}

.eatp-message-maria {
    align-self: flex-start;
    background: var(--eatp-amber-bg);
    color: #78350f; /* amber-900 */
    border-bottom-left-radius: 4px;
    border: 1px solid #fcd34d;
}

.eatp-message-system {
    align-self: center;
    background: transparent;
    color: var(--eatp-text-muted);
    font-size: 0.82rem;
    font-style: italic;
    padding: 4px 10px;
    box-shadow: none;
}

.eatp-message-text {
    white-space: pre-wrap;
}

.eatp-message-text strong,
.eatp-message-text b { font-weight: 700; }
.eatp-message-text em,
.eatp-message-text i { font-style: italic; }
/* v3.20: code elements — force visible with !important to override theme dark backgrounds */
.eatp-app code,
.eatp-message-text code,
.eatp-maria-a-text code,
.eatp-practice-result code,
.eatp-challenge-result code,
.eatp-feedback code,
.eatp-app .eatp-message-maria code,
.eatp-app .eatp-message-alex code,
.eatp-app .eatp-message-user code {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #065f46 !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    font-family: inherit !important;
    font-size: 0.95em !important;
    font-weight: 600 !important;
    white-space: nowrap;
}
.eatp-message-user .eatp-message-text code {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}
.eatp-message-text ul,
.eatp-message-text ol { margin: 6px 0 0 0; padding-left: 1.4em; }
.eatp-message-text li { margin: 2px 0; }
.eatp-message-text p { margin: 4px 0; }
.eatp-message-text p:first-child { margin-top: 0; }
.eatp-message-text p:last-child { margin-bottom: 0; }

/* Time + actions */
.eatp-message-time {
    font-size: 0.68rem;
    color: var(--eatp-text-faint);
    margin-top: 4px;
    text-align: right;
}

.eatp-message-alex .eatp-message-time,
.eatp-message-maria .eatp-message-time {
    text-align: left;
}

.eatp-message-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.eatp-msg-btn {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--eatp-surface-alt);
    color: var(--eatp-text-muted);
    border-radius: 999px;
}

.eatp-msg-btn:hover {
    background: var(--eatp-primary-soft);
    color: var(--eatp-primary-dark);
}

.eatp-message-user .eatp-msg-btn {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.eatp-xp-award {
    display: inline-block;
    background: #fde047;
    color: #713f12;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 999px;
    margin-top: 4px;
    animation: eatp-xp-pop 0.4s ease;
}

@keyframes eatp-xp-pop {
    0%   { transform: scale(0.5); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}

/* Correction box — rendered ONCE (FIX v2.0.0 duplicate bug) */
.eatp-correction {
    background: var(--eatp-yellow-bg);
    border-left: 4px solid var(--eatp-yellow-border);
    padding: 8px 12px;
    margin: 8px 0;
    border-radius: 6px;
    font-size: 0.9em;
    color: #713f12;
}

.eatp-correction-title {
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
}

.eatp-correction-row {
    display: flex;
    gap: 6px;
    align-items: baseline;
    flex-wrap: wrap;
    margin: 2px 0;
}

.eatp-correction-from {
    text-decoration: line-through;
    color: #b45309;
}

.eatp-correction-arrow {
    font-weight: 700;
    color: #713f12;
}

.eatp-correction-to {
    font-weight: 700;
    color: #14532d;
}

/* Typing indicator */
.eatp-typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    background: var(--eatp-surface);
    border: 1px solid var(--eatp-border);
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
    box-shadow: var(--eatp-shadow-sm);
}

.eatp-typing-dot {
    width: 7px; height: 7px;
    background: var(--eatp-text-faint);
    border-radius: 50%;
    animation: eatp-typing 1.2s infinite ease-in-out;
}

.eatp-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.eatp-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes eatp-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30%           { transform: translateY(-5px); opacity: 1; }
}

/* =====================================================
   Practice panel
   ===================================================== */
.eatp-panel-practice,
.eatp-panel-challenge {
    padding: 16px;
    overflow-y: auto;
    background: var(--eatp-bg);
}

.eatp-practice-card,
.eatp-challenge-card {
    background: var(--eatp-surface);
    border: 1px solid var(--eatp-border);
    border-radius: var(--eatp-radius);
    padding: 24px 20px;
    box-shadow: var(--eatp-shadow-md);
    text-align: center;
    margin-bottom: 16px;
}

.eatp-practice-prompt {
    color: var(--eatp-text-muted);
    font-size: 0.85rem;
    margin: 0 0 12px;
}

.eatp-practice-phrase {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--eatp-text);
    margin: 8px 0 20px;
    line-height: 1.3;
}

.eatp-practice-actions,
.eatp-challenge-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.eatp-btn {
    min-height: var(--eatp-touch);
    padding: 10px 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.eatp-btn-primary {
    background: var(--eatp-primary);
    color: #fff;
}

.eatp-btn-primary:hover:not(:disabled) {
    background: var(--eatp-primary-dark);
}

.eatp-btn-secondary {
    background: var(--eatp-surface-alt);
    color: var(--eatp-text);
    border: 1px solid var(--eatp-border-strong);
}

.eatp-btn-secondary:hover:not(:disabled) {
    background: var(--eatp-primary-soft);
    color: var(--eatp-primary-dark);
    border-color: var(--eatp-primary);
}

.eatp-btn-amber {
    background: var(--eatp-amber);
    color: #fff;
}

.eatp-btn-amber:hover:not(:disabled) {
    background: #d97706;
}

/* Practice/challenge score badge */
.eatp-score-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    margin: 6px 0;
}

.eatp-score-perfect,
.eatp-score-good {
    background: var(--eatp-primary-soft);
    color: var(--eatp-primary-dark);
}

.eatp-score-mid {
    background: var(--eatp-amber-bg);
    color: #78350f;
}

.eatp-score-low {
    background: var(--eatp-red-bg);
    color: #991b1b;
}

.eatp-feedback {
    background: var(--eatp-surface);
    border: 1px solid var(--eatp-border);
    border-left: 4px solid var(--eatp-primary);
    padding: 12px 14px;
    border-radius: var(--eatp-radius-sm);
    margin: 10px 0;
    text-align: left;
    color: var(--eatp-text);
    font-size: 0.92rem;
}

.eatp-feedback.eatp-feedback-low {
    border-left-color: var(--eatp-red);
}

/* v3.24: Info-style feedback for the "Explicar" button in Practice/Challenge tabs. */
.eatp-feedback.eatp-feedback-info {
    border-left-color: #3b82f6;
    background: #eff6ff;
}

/* =====================================================
   v3.25 — Botón "Detener voz" siempre visible (naranja)
   Reemplaza al botón de pánico flotante. Vive en la barra
   inferior para que esté disponible en TODAS las pestañas.
   ===================================================== */
.eatp-stop-voice-btn {
    background: #f97316 !important;
    color: #fff !important;
    border: 2px solid #ea580c !important;
    border-radius: 12px !important;
    padding: 0 16px !important;
    height: 48px !important;
    min-width: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35) !important;
}
.eatp-stop-voice-btn:hover {
    background: #ea580c !important;
    transform: scale(1.04);
}
.eatp-stop-voice-btn:active {
    transform: scale(0.97);
}
.eatp-stop-voice-btn .eatp-stop-icon {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
}
.eatp-stop-voice-btn .eatp-stop-voice-label {
    /* Hidden on narrow screens via media query below. */
    white-space: nowrap;
}

/* On narrow screens, hide the label and keep just the icon. */
@media (max-width: 640px) {
    .eatp-stop-voice-btn .eatp-stop-voice-label {
        display: none;
    }
    .eatp-stop-voice-btn {
        padding: 0 !important;
        width: 48px !important;
        min-width: 48px !important;
    }
}

/* v3.25: ocultar permanentemente el viejo botón de pánico flotante. */
.eatp-tts-stop-always-disabled {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* =====================================================
   v3.26 — Banner "Continuar" dentro del chat
   Aparece al final de los mensajes cuando el estudiante
   vuelve a la pestaña Clases o Conversación después de
   haberla abandonado. Le da un affordance explícito para
   reanudar la lección/conversación.
   ===================================================== */
.eatp-continue-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 16px auto;
    padding: 18px 20px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 2px dashed #3b82f6;
    border-radius: 14px;
    text-align: center;
    animation: eatp-pop-in 0.3s ease;
}
.eatp-continue-banner-text {
    font-size: 1rem;
    font-weight: 600;
    color: #1e40af;
}
.eatp-continue-banner-btn {
    background: #3b82f6;
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
}
.eatp-continue-banner-btn:hover {
    background: #2563eb;
    transform: scale(1.04);
}
@keyframes eatp-pop-in {
    0% { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* =====================================================
   v3.28 — Botón "Tutor" (consulta libre) + modal
   ===================================================== */

/* Botón "Tutor" en la barra inferior — morado para diferenciarlo del
   botón "Explicar" (que vive dentro de las respuestas de Alex) y del
   botón naranja "Detener voz". */
.eatp-tutor-btn {
    background: #8b5cf6 !important;
    color: #fff !important;
    border: 2px solid #7c3aed !important;
    border-radius: 12px !important;
    padding: 0 14px !important;
    height: 48px !important;
    min-width: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35) !important;
}
.eatp-tutor-btn:hover {
    background: #7c3aed !important;
    transform: scale(1.04);
}
@media (max-width: 640px) {
    .eatp-tutor-btn {
        padding: 0 10px !important;
        font-size: 0.85rem !important;
    }
}

/* Modal del Tutor — v3.31.1: anchura igual a la del modal de Clases
   (Plan de estudios / app container, 920px) para que las explicaciones
   largas (tablas de verbos, listas de ejemplos) se vean bien y para que
   visualmente ambos modales tengan el mismo footprint. */
.eatp-tutor-dialog {
    max-width: 920px;
    width: 96%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
@media (max-width: 1023px) {
    .eatp-tutor-dialog {
        width: 100%;
        max-width: 100%;
    }
}
.eatp-tutor-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 16px 20px !important;
    min-height: 0; /* allow flex child to shrink */
}
.eatp-tutor-intro {
    font-size: 0.88rem;
    color: #64748b;
    margin: 0 0 12px;
    line-height: 1.4;
    flex-shrink: 0;
}
.eatp-tutor-messages {
    flex: 1;
    overflow-y: auto;
    min-height: 250px;
    max-height: 60vh;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}
.eatp-tutor-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.92rem;
    line-height: 1.5;
    word-wrap: break-word;
}
.eatp-tutor-msg-user {
    align-self: flex-end;
    background: #8b5cf6;
    color: #fff;
    border-bottom-right-radius: 4px;
}
.eatp-tutor-msg-assistant {
    align-self: flex-start;
    background: #f1f5f9;
    color: #1e293b;
    border-bottom-left-radius: 4px;
    border-left: 3px solid #8b5cf6;
}
.eatp-tutor-loading {
    color: #64748b;
    font-style: italic;
}
.eatp-tutor-msg-actions {
    margin-top: 8px;
    display: flex;
    gap: 6px;
}
.eatp-tutor-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0;
    border-top: 1px solid #e2e8f0;
    margin-top: 8px;
}
.eatp-tutor-suggestion-chip {
    background: #ede9fe;
    color: #6d28d9;
    border: 1px solid #c4b5fd;
    border-radius: 16px;
    padding: 5px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.eatp-tutor-suggestion-chip:hover {
    background: #c4b5fd;
    color: #4c1d95;
}
.eatp-tutor-input-row {
    display: flex;
    gap: 8px;
    padding: 12px 20px !important;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 12px 12px;
}
.eatp-tutor-input {
    flex: 1;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.95rem;
    transition: border-color 0.15s ease;
}
.eatp-tutor-input:focus {
    outline: none;
    border-color: #8b5cf6;
}
.eatp-tutor-send {
    background: #8b5cf6;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0 18px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.15s ease;
}
.eatp-tutor-send:hover {
    background: #7c3aed;
}

/* v3.29: mic button in the Tutor modal — same WhatsApp-style as the main mic. */
.eatp-tutor-mic {
    width: 48px !important;
    height: 48px !important;
    background: #0f172a !important;
    color: #fff !important;
    border: 2px solid #1e293b !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    padding: 0 !important;
}
.eatp-tutor-mic .eatp-mic-icon {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
}
.eatp-tutor-mic:hover {
    background: #1e293b !important;
    transform: scale(1.05);
}
.eatp-tutor-mic.eatp-listening {
    background: #ef4444 !important;
    border-color: #dc2626 !important;
    animation: eatp-mic-pulse 1.2s infinite;
}

/* v3.31: header actions del modal Tutor + botón detener voz.
   v3.31.1: el botón ahora usa !important en TODAS las propiedades de
   contraste (background, color, border) y un SVG en lugar del glifo
   Unicode "⏹" (que algunos sistemas renderizan como emoji blanca).
   Así garantizamos contraste blanco-sobre-naranja sobre cualquier fondo,
   incluyendo temas de WordPress que sobreescriben estilos de botón. */
.eatp-tutor-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.eatp-tutor-stop-voice {
    background: #f97316 !important;
    color: #ffffff !important;
    border: 2px solid #ea580c !important;
    border-radius: 8px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.45) !important;
    padding: 0 !important;
}
.eatp-tutor-stop-voice:hover {
    background: #ea580c !important;
    color: #ffffff !important;
    transform: scale(1.05);
}
.eatp-tutor-stop-voice:focus-visible {
    outline: 3px solid #fde68a !important;
    outline-offset: 2px;
}
.eatp-tutor-stop-voice .eatp-stop-icon {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
}

/* v3.31: botones "Verificar" cambian a rojo cuando están grabando (WhatsApp-style) */
.eatp-btn-primary.eatp-recording,
#eatp-practice-check.eatp-recording,
#eatp-challenge-check.eatp-recording {
    background: #ef4444 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
    animation: eatp-mic-pulse 1.2s infinite;
}

/* v3.31: contenedor de traducción + pronunciación en Práctica */
.eatp-practice-info {
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.eatp-practice-info-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: #475569;
}
.eatp-practice-info-label {
    font-size: 1rem;
    flex-shrink: 0;
}
.eatp-practice-info-value {
    font-weight: 500;
}
.eatp-practice-info-value.eatp-phonetic {
    color: #7c3aed;
    font-style: italic;
}

/* Challenge 4-field card */
.eatp-challenge-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 16px 0;
    text-align: left;
}

.eatp-challenge-field {
    background: var(--eatp-surface-alt);
    border-radius: var(--eatp-radius-sm);
    padding: 10px 12px;
    border-left: 3px solid var(--eatp-primary);
}

.eatp-challenge-field-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--eatp-text-muted);
    font-weight: 700;
    margin-bottom: 2px;
}

.eatp-challenge-field-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--eatp-text);
    word-break: break-word;
}

.eatp-challenge-field-value.eatp-phonetic {
    font-family: var(--eatp-font-mono);
    color: var(--eatp-primary-dark);
    font-style: italic;
}

/* =====================================================
   Input bar — sticky at bottom on mobile
   ===================================================== */
.eatp-footer {
    margin-top: auto;
    flex-shrink: 0;
    background: var(--eatp-surface);
    border-top: 1px solid var(--eatp-border);
    padding: 8px 10px;
    box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.04);
    z-index: 15;
}

.eatp-input-bar {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    background: var(--eatp-surface);
    border-radius: 999px;
    border: 1px solid var(--eatp-border-strong);
    padding: 4px 4px 4px 4px;
}

.eatp-mic-btn,
.eatp-help-btn {
    min-height: var(--eatp-touch);
    min-width: var(--eatp-touch);
    background: var(--eatp-surface-alt);
    color: var(--eatp-text-muted);
    border-radius: 50%;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.eatp-mic-btn:hover:not(:disabled),
.eatp-help-btn:hover:not(:disabled) {
    background: var(--eatp-primary-soft);
    color: var(--eatp-primary-dark);
}

.eatp-mic-btn.eatp-listening {
    background: var(--eatp-red);
    color: #fff;
    animation: eatp-mic-pulse 1.4s infinite;
}

.eatp-mic-btn.eatp-processing {
    background: var(--eatp-amber);
    color: #fff;
    position: relative;
}

.eatp-mic-btn.eatp-processing::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: eatp-spin 0.8s linear infinite;
}

@keyframes eatp-mic-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    70%  { box-shadow: 0 0 0 14px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.eatp-help-btn {
    background: var(--eatp-amber);
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    border-radius: 999px;
    padding: 0 14px;
    min-width: auto;
}

.eatp-help-btn:hover:not(:disabled) {
    background: #d97706;
}

.eatp-input {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    padding: 10px 12px;
    resize: none;
    max-height: 120px;
    min-height: var(--eatp-touch);
    line-height: 1.4;
    border-radius: 999px;
    color: var(--eatp-text);
}

.eatp-input::placeholder {
    color: var(--eatp-text-faint);
}

.eatp-input:focus {
    outline: none;
}

.eatp-send-btn {
    min-height: var(--eatp-touch);
    min-width: var(--eatp-touch);
    background: var(--eatp-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.eatp-send-btn:hover:not(:disabled) {
    background: var(--eatp-primary-dark);
}

/* Voice/recording status row */
.eatp-voice-status {
    margin-top: 6px;
    padding: 4px 12px;
    font-size: 0.8rem;
    color: var(--eatp-text-muted);
    text-align: center;
    display: none;
}

.eatp-voice-status.eatp-visible {
    display: block;
}

/* TTS controls */
.eatp-tts-controls {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 4px 0 0;
    flex-wrap: wrap;
}

.eatp-tts-stop {
    background: var(--eatp-red-bg);
    color: var(--eatp-red);
    border: 1px solid #fca5a5;
    padding: 4px 12px;
    min-height: 32px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.8rem;
}

/* =====================================================
   Name gate (guest)
   ===================================================== */
.eatp-name-gate {
    position: absolute;
    inset: 0;
    background: var(--eatp-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 50;
}

.eatp-name-gate[hidden] {
    display: none !important;
}

.eatp-name-gate-card {
    background: var(--eatp-surface);
    border: 1px solid var(--eatp-border);
    border-radius: var(--eatp-radius);
    padding: 28px 24px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: var(--eatp-shadow-md);
}

.eatp-name-gate-logo {
    font-size: 2.4rem;
    margin-bottom: 8px;
}

.eatp-name-gate-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--eatp-text);
    margin: 0 0 4px;
}

.eatp-name-gate-subtitle {
    font-size: 0.85rem;
    color: var(--eatp-text-muted);
    margin: 0 0 18px;
}

.eatp-name-gate-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.eatp-name-gate-form label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--eatp-text-muted);
    margin-top: 4px;
}

.eatp-name-gate-input,
.eatp-name-gate-select {
    min-height: var(--eatp-touch);
    border: 1px solid var(--eatp-border-strong);
    border-radius: var(--eatp-radius-sm);
    padding: 10px 12px;
    background: var(--eatp-surface);
    color: var(--eatp-text);
    width: 100%;
}

.eatp-name-gate-input:focus,
.eatp-name-gate-select:focus {
    border-color: var(--eatp-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

.eatp-name-gate-input.eatp-invalid {
    border-color: var(--eatp-red);
}

.eatp-name-gate-btn {
    margin-top: 8px;
    background: var(--eatp-primary);
    color: #fff;
    padding: 12px;
    min-height: var(--eatp-touch);
    border-radius: var(--eatp-radius-sm);
    font-weight: 700;
    font-size: 1rem;
}

.eatp-name-gate-btn:hover:not(:disabled) {
    background: var(--eatp-primary-dark);
}

.eatp-name-gate-error {
    background: var(--eatp-red-bg);
    color: #991b1b;
    padding: 8px 12px;
    border-radius: var(--eatp-radius-sm);
    font-size: 0.85rem;
    display: none;
}

.eatp-name-gate-error.eatp-visible {
    display: block;
}

/* =====================================================
   Modals
   ===================================================== */
.eatp-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1000;
}

.eatp-modal[hidden] {
    display: none !important;
}

.eatp-modal-dialog {
    background: var(--eatp-surface);
    border-radius: var(--eatp-radius);
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--eatp-shadow-lg);
    display: flex;
    flex-direction: column;
}

.eatp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--eatp-border);
    position: sticky;
    top: 0;
    background: var(--eatp-surface);
    z-index: 1;
    border-radius: var(--eatp-radius) var(--eatp-radius) 0 0;
}

.eatp-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--eatp-text);
    margin: 0;
}

.eatp-modal-close {
    min-height: 36px;
    min-width: 36px;
    background: var(--eatp-surface-alt);
    color: var(--eatp-text-muted);
    border-radius: 50%;
    font-size: 1.1rem;
}

.eatp-modal-close:hover {
    background: var(--eatp-red-bg);
    color: var(--eatp-red);
}

.eatp-modal-body {
    padding: 20px;
    flex: 1;
}

.eatp-modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--eatp-border);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
    position: sticky;
    bottom: 0;
    background: var(--eatp-surface);
}

/* Curriculum modal */
.eatp-curriculum-intro {
    background: var(--eatp-primary-soft);
    border-radius: var(--eatp-radius-sm);
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: 0.88rem;
    color: var(--eatp-text);
}

.eatp-curriculum-level {
    margin-bottom: 14px;
    border: 1px solid var(--eatp-border);
    border-radius: var(--eatp-radius-sm);
    overflow: hidden;
}

.eatp-curriculum-level-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--eatp-surface-alt);
    font-weight: 700;
    color: var(--eatp-text);
}

.eatp-curriculum-level-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.78rem;
    color: #fff;
}

.eatp-curriculum-level-status {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--eatp-border);
    color: var(--eatp-text-muted);
}

.eatp-curriculum-level-status.eatp-current {
    background: var(--eatp-primary);
    color: #fff;
}

.eatp-curriculum-units {
    padding: 8px 12px;
}

.eatp-curriculum-unit {
    padding: 6px 0;
    border-bottom: 1px dashed var(--eatp-border);
    font-size: 0.88rem;
}

.eatp-curriculum-unit:last-child {
    border-bottom: 0;
}

.eatp-curriculum-unit-title {
    font-weight: 600;
    color: var(--eatp-text);
}

.eatp-curriculum-unit-topics {
    color: var(--eatp-text-muted);
    font-size: 0.82rem;
    margin-top: 2px;
}

/* =====================================================
   Toast
   ===================================================== */
.eatp-toast {
    position: fixed;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%) translateY(20px);
    background: var(--eatp-text);
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: var(--eatp-shadow-lg);
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    max-width: calc(100% - 32px);
    text-align: center;
}

.eatp-toast[hidden] {
    display: block;
    pointer-events: none;
}

.eatp-toast.eatp-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.eatp-toast.eatp-toast-error {
    background: var(--eatp-red);
}

.eatp-toast.eatp-toast-success {
    background: var(--eatp-primary);
}

/* =====================================================
   Level-up celebration
   ===================================================== */
.eatp-levelup {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1500;
}

.eatp-levelup[hidden] {
    display: none !important;
}

.eatp-levelup-card {
    background: var(--eatp-surface);
    border-radius: var(--eatp-radius);
    padding: 32px 28px;
    text-align: center;
    max-width: 380px;
    width: 100%;
    box-shadow: var(--eatp-shadow-lg);
    animation: eatp-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes eatp-pop-in {
    from { transform: scale(0.7); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.eatp-levelup-emoji {
    font-size: 3rem;
    margin-bottom: 6px;
}

.eatp-levelup-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--eatp-text);
    margin: 0 0 8px;
}

.eatp-levelup-msg {
    color: var(--eatp-text-muted);
    margin: 0 0 16px;
    font-size: 0.92rem;
}

.eatp-levelup-badge {
    display: inline-block;
    background: var(--eatp-primary);
    color: #fff;
    padding: 8px 20px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}

/* =====================================================
   Scrollbars (slim, emerald thumb)
   ===================================================== */
.eatp-scroll,
.eatp-messages,
.eatp-modal-dialog,
.eatp-panel-practice,
.eatp-panel-challenge {
    scrollbar-width: thin;
    scrollbar-color: var(--eatp-primary) transparent;
}

.eatp-scroll::-webkit-scrollbar,
.eatp-messages::-webkit-scrollbar,
.eatp-modal-dialog::-webkit-scrollbar,
.eatp-panel-practice::-webkit-scrollbar,
.eatp-panel-challenge::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.eatp-scroll::-webkit-scrollbar-track,
.eatp-messages::-webkit-scrollbar-track,
.eatp-modal-dialog::-webkit-scrollbar-track,
.eatp-panel-practice::-webkit-scrollbar-track,
.eatp-panel-challenge::-webkit-scrollbar-track {
    background: transparent;
}

.eatp-scroll::-webkit-scrollbar-thumb,
.eatp-messages::-webkit-scrollbar-thumb,
.eatp-modal-dialog::-webkit-scrollbar-thumb,
.eatp-panel-practice::-webkit-scrollbar-thumb,
.eatp-panel-challenge::-webkit-scrollbar-thumb {
    background: var(--eatp-primary);
    border-radius: 999px;
}

.eatp-scroll {
    max-height: 24rem;
    overflow-y: auto;
}

/* =====================================================
   Loading skeletons + spinners
   ===================================================== */
.eatp-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--eatp-border);
    border-top-color: var(--eatp-primary);
    border-radius: 50%;
    animation: eatp-spin 0.8s linear infinite;
}

.eatp-spinner-lg {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

@keyframes eatp-spin {
    to { transform: rotate(360deg); }
}

.eatp-loading {
    text-align: center;
    padding: 32px;
    color: var(--eatp-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.eatp-skeleton {
    background: linear-gradient(90deg, var(--eatp-surface-alt) 0%, var(--eatp-border) 50%, var(--eatp-surface-alt) 100%);
    background-size: 200% 100%;
    animation: eatp-shimmer 1.4s infinite;
    border-radius: var(--eatp-radius-sm);
    height: 14px;
    margin-bottom: 8px;
}

@keyframes eatp-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =====================================================
   Certificate (modal + printable)
   ===================================================== */
.eatp-cert {
    background: #fff;
    border: 3px solid var(--eatp-primary);
    border-radius: var(--eatp-radius);
    padding: 40px 28px;
    text-align: center;
    position: relative;
    font-family: var(--eatp-font-serif);
    color: #1a1a1a;
}

.eatp-cert::before {
    content: "";
    position: absolute;
    top: 10px; left: 10px; right: 10px; bottom: 10px;
    border: 1px solid var(--eatp-primary);
    border-radius: 6px;
    pointer-events: none;
}

.eatp-cert-seal {
    font-size: 3rem;
    margin-bottom: 8px;
}

.eatp-cert-title {
    font-size: 1.4rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0f172a;
    margin: 0 0 4px;
}

.eatp-cert-subtitle {
    font-style: italic;
    color: #6b7280;
    margin: 0 0 24px;
}

.eatp-cert-name {
    font-size: 1.8rem;
    color: var(--eatp-primary-dark);
    font-weight: 700;
    border-bottom: 2px solid var(--eatp-primary);
    display: inline-block;
    padding-bottom: 4px;
    margin: 8px 0 16px;
}

.eatp-cert-body {
    color: #374151;
    margin: 12px 0;
    line-height: 1.6;
}

.eatp-cert-level-badge {
    display: inline-block;
    background: var(--eatp-primary);
    color: #fff;
    padding: 6px 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    margin: 8px 0 12px;
    font-family: var(--eatp-font);
}

.eatp-cert-details {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin: 20px 0;
    flex-wrap: wrap;
    font-family: var(--eatp-font);
}

.eatp-cert-detail-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a1a;
}

.eatp-cert-detail-label {
    font-size: 0.7rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 2px;
}

.eatp-cert-code-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
    font-family: var(--eatp-font);
}

.eatp-cert-code {
    font-family: var(--eatp-font-mono);
    font-size: 1.1rem;
    color: #1a1a1a;
    background: #f9fafb;
    padding: 6px 16px;
    border-radius: 4px;
    display: inline-block;
    letter-spacing: 0.16em;
    margin-top: 4px;
}

.eatp-cert-code-label {
    font-size: 0.7rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.eatp-cert-footer {
    margin-top: 20px;
    font-size: 0.72rem;
    color: #9ca3af;
    font-family: var(--eatp-font);
}

.eatp-cert-empty {
    text-align: center;
    padding: 24px;
    color: var(--eatp-text-muted);
}

.eatp-cert-empty-emoji {
    font-size: 2.4rem;
    margin-bottom: 8px;
}

/* Print: only show certificate */
@media print {
    body * { visibility: hidden; }
    .eatp-cert, .eatp-cert * { visibility: visible; }
    .eatp-cert {
        position: absolute;
        left: 0; top: 0;
        width: 100%;
        max-width: none;
        border-color: var(--eatp-primary);
    }
    .eatp-modal-footer,
    .eatp-modal-header { display: none !important; }
}

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width: 640px) {
    .eatp-app {
        font-size: 15px;
        border-radius: 0;
        /* v3.10: allow scrolling on mobile — overflow:hidden was hiding content */
        overflow: visible;
        min-height: auto;
    }

    .eatp-message {
        max-width: 92%;
        font-size: 0.95rem;
        padding: 10px 12px;
    }

    .eatp-user-name {
        max-width: 38%;
        font-size: 0.92rem;
    }

    .eatp-header-actions button {
        padding: 6px 8px;
        font-size: 0.74rem;
    }

    .eatp-tabs {
        gap: 0;
    }

    .eatp-tab {
        padding: 12px 12px;
        font-size: 0.85rem;
    }

    .eatp-practice-phrase {
        font-size: 1.25rem;
    }

    .eatp-input-bar {
        border-radius: var(--eatp-radius);
        padding: 4px;
    }

    .eatp-mic-btn,
    .eatp-send-btn {
        min-width: 48px;
        min-height: 48px;
    }

    .eatp-help-btn {
        padding: 0 12px;
        min-height: 44px;
    }

    .eatp-input {
        font-size: 16px; /* avoid iOS zoom */
        padding: 10px 8px;
    }

    .eatp-name-gate-card {
        padding: 22px 18px;
    }

    .eatp-cert {
        padding: 28px 16px;
    }

    .eatp-cert-name {
        font-size: 1.4rem;
    }

    .eatp-modal-dialog {
        max-height: 88vh;
    }
}

/* Larger screens — give the app breathing room */
@media (min-width: 1024px) {
    .eatp-app {
        margin-top: 16px;
        margin-bottom: 16px;
        border-radius: 16px;
        box-shadow: var(--eatp-shadow-lg);
        overflow: hidden;
        min-height: calc(100vh - 32px);
        max-width: 920px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .eatp-app *,
    .eatp-app *::before,
    .eatp-app *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================
   v3.2 — Mixed-language TTS: highlight English phrases in María's bubbles
   ===================================================== */
.eatp-message-maria .eatp-message-text {
    line-height: 1.55;
}
/* v3.16: English phrases inside double quotes (rendered as <code> by renderRichText)
   get a subtle highlight. Using !important to override theme styles that may set
   a dark background on <code> elements (which made text invisible). */
.eatp-message-maria .eatp-message-text code,
.eatp-message-maria .eatp-message-text q,
.eatp-maria-a-text code,
.eatp-practice-result code,
.eatp-challenge-result code,
.eatp-message-text code {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #065f46 !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    font-family: inherit !important;
    font-size: 0.95em !important;
    font-weight: 600 !important;
    white-space: nowrap;
}
/* Make the 💡 Explicar button visually distinct from the old 🇪🇸 Ayuda. */
.eatp-help-btn {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    color: #92400e;
    font-weight: 700;
}
.eatp-help-btn:hover {
    background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
}
.eatp-msg-btn {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid var(--eatp-border);
    background: var(--eatp-surface);
    color: var(--eatp-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}
.eatp-msg-btn:hover {
    background: var(--eatp-surface-alt);
    color: var(--eatp-text);
    border-color: var(--eatp-border-strong);
}

/* =====================================================
   v3.5 — Name gate: two fields (nombres + apellidos) side by side
   ===================================================== */
.eatp-name-gate-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.eatp-name-gate-field {
    flex: 1;
    min-width: 0;
}
.eatp-name-gate-field label {
    display: block;
    margin-bottom: 4px;
}
@media (max-width: 480px) {
    .eatp-name-gate-row {
        flex-direction: column;
        gap: 8px;
    }
}

/* =====================================================
   v3.3 — María conversational sub-chat (inline Q&A thread)
   ===================================================== */

/* The green "Preguntar" button (distinct from other msg buttons). */
.eatp-ask-maria-btn {
    background: var(--eatp-primary) !important;
    color: #fff !important;
    border-color: var(--eatp-primary-dark) !important;
    font-weight: 700;
}
.eatp-ask-maria-btn:hover {
    background: var(--eatp-primary-dark) !important;
    color: #fff !important;
}

/* Inline sub-chat container that appears inside a María bubble. */
.eatp-maria-subchat {
    margin-top: 10px;
    padding: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
}

/* Thread: stacked Q&A pairs. */
.eatp-maria-thread {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

/* Student's question (right-aligned, subtle). */
.eatp-maria-q {
    align-self: flex-end;
    max-width: 85%;
    background: #fef3c7;
    color: #78350f;
    padding: 7px 12px;
    border-radius: 12px 12px 4px 12px;
    font-size: 0.86rem;
    line-height: 1.4;
}

/* María's answer (left-aligned, amber-tinted card). */
.eatp-maria-a {
    background: #fff;
    border: 1px solid #fde68a;
    border-left: 3px solid var(--eatp-amber);
    border-radius: 8px;
    padding: 10px 12px;
}
.eatp-maria-a-text {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--eatp-text);
}
/* English phrases in María's answers also get the emerald highlight. */
.eatp-maria-a-text code {
    background: rgba(16, 185, 129, 0.1);
    color: var(--eatp-primary-dark);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.92em;
    font-weight: 600;
}
.eatp-maria-a-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.eatp-maria-a-btn,
.eatp-maria-a .eatp-ask-maria-btn {
    font-size: 0.72rem;
    padding: 3px 8px;
}

/* Input row at the bottom of the sub-chat. */
.eatp-maria-input-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.eatp-maria-input {
    flex: 1;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.88rem;
    background: #fff;
    color: var(--eatp-text);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-height: 40px;
}
.eatp-maria-input:focus {
    border-color: var(--eatp-primary);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.eatp-maria-input:disabled {
    background: #f9fafb;
    color: var(--eatp-text-faint);
    cursor: not-allowed;
}
.eatp-maria-send {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: var(--eatp-primary);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.eatp-maria-send:hover:not(:disabled) {
    background: var(--eatp-primary-dark);
}
.eatp-maria-send:disabled {
    background: var(--eatp-text-faint);
    cursor: not-allowed;
}

/* =====================================================
   v3.1 — Pedagogical UI: enriched header, lesson card, learning map
   ===================================================== */

/* Header restructure: top row (user info) + stats row (ring + xp bar + mini stats) */
.eatp-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.eatp-header-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    width: 100%;
}

/* Daily XP goal ring */
.eatp-stat-ring {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    cursor: help;
}
.eatp-ring-svg {
    width: 100%;
    height: 100%;
    display: block;
}
.eatp-ring-fill {
    transition: stroke-dasharray 0.6s ease;
}
.eatp-ring-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--eatp-text-muted);
    white-space: nowrap;
}
.eatp-stat-ring:hover .eatp-ring-text {
    color: var(--eatp-primary-dark);
}

/* Mini stats (words learned + lessons completed) */
.eatp-mini-stats {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.eatp-mini-stat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--eatp-text-muted);
    background: var(--eatp-surface-alt);
    padding: 4px 8px;
    border-radius: 8px;
    white-space: nowrap;
}
.eatp-mini-total {
    color: var(--eatp-text-faint);
    font-weight: 400;
}

/* Adjust xp-bar to flex-grow in the new stats row */
.eatp-header-stats .eatp-xp-bar {
    flex: 1;
    min-width: 100px;
}

/* =====================================================
   Lesson Card (collapsible, sits above chat messages)
   ===================================================== */
.eatp-lesson-card {
    background: linear-gradient(135deg, var(--eatp-primary-soft) 0%, #f0fdfa 100%);
    border: 1px solid var(--eatp-primary-light);
    border-radius: 12px;
    margin-bottom: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.eatp-lesson-card-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--eatp-text);
}
.eatp-lesson-card-toggle:hover {
    background: rgba(16, 185, 129, 0.06);
}
.eatp-lesson-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}
.eatp-lesson-card-icon {
    font-size: 1.2rem;
    line-height: 1;
}
.eatp-lesson-card-titles {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.eatp-lesson-card-unit {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--eatp-primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.eatp-lesson-card-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--eatp-text);
    line-height: 1.2;
}
.eatp-lesson-card-chevron {
    transition: transform 0.2s ease;
    color: var(--eatp-text-faint);
    font-size: 0.85rem;
}
.eatp-lesson-card[aria-collapsed="true"] .eatp-lesson-card-chevron {
    transform: rotate(-90deg);
}
.eatp-lesson-card[aria-collapsed="true"] .eatp-lesson-card-body {
    display: none;
}
.eatp-lesson-card-body {
    padding: 0 14px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.eatp-lesson-objective,
.eatp-lesson-grammar {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--eatp-text-muted);
}
.eatp-lesson-label {
    font-weight: 700;
    color: var(--eatp-text);
    margin-right: 4px;
}
.eatp-lesson-vocab {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.eatp-vocab-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}
.eatp-vocab-chip {
    display: inline-flex;
    align-items: center;
    background: var(--eatp-surface);
    border: 1px solid var(--eatp-primary-light);
    color: var(--eatp-primary-dark);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.eatp-vocab-chip:hover {
    background: var(--eatp-primary);
    color: #fff;
    border-color: var(--eatp-primary);
}
.eatp-vocab-chip.eatp-vocab-learned {
    background: var(--eatp-primary);
    color: #fff;
    border-color: var(--eatp-primary);
}
.eatp-vocab-chip.eatp-vocab-learned::after {
    content: ' ✓';
    font-weight: 700;
}

/* Lesson completion celebration banner (injected into chat) */
.eatp-lesson-complete-banner {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 2px solid var(--eatp-primary);
    border-radius: 12px;
    padding: 14px 18px;
    margin: 8px 0;
    text-align: center;
    animation: eatp-pop-in 0.4s ease;
}
.eatp-lesson-complete-banner .eatp-banner-emoji {
    font-size: 2rem;
    display: block;
    margin-bottom: 4px;
}
.eatp-lesson-complete-banner .eatp-banner-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--eatp-primary-dark);
    margin-bottom: 2px;
}
.eatp-lesson-complete-banner .eatp-banner-sub {
    font-size: 0.85rem;
    color: var(--eatp-text-muted);
}
@keyframes eatp-pop-in {
    0% { transform: scale(0.8); opacity: 0; }
    60% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* =====================================================
   Learning Map (curriculum modal enhancement)
   ===================================================== */
.eatp-map-level-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 2px solid var(--eatp-border);
    margin-bottom: 12px;
}
.eatp-map-level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}
.eatp-map-level-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--eatp-text);
}
.eatp-map-level-desc {
    font-size: 0.82rem;
    color: var(--eatp-text-muted);
    line-height: 1.4;
    margin-top: 2px;
}
.eatp-map-units {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.eatp-map-unit {
    border: 1px solid var(--eatp-border);
    border-radius: 10px;
    overflow: hidden;
}
.eatp-map-unit-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--eatp-surface-alt);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--eatp-text);
}
.eatp-map-unit-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--eatp-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    flex-shrink: 0;
}
.eatp-map-lessons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px 10px;
}
.eatp-map-lesson {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 0.84rem;
    transition: background 0.15s ease;
}
.eatp-map-lesson:hover {
    background: var(--eatp-surface-alt);
}
.eatp-map-lesson-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--eatp-border-strong);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--eatp-text-faint);
}
.eatp-map-lesson.eatp-map-completed .eatp-map-lesson-dot {
    background: var(--eatp-primary);
    border-color: var(--eatp-primary);
    color: #fff;
}
.eatp-map-lesson.eatp-map-current .eatp-map-lesson-dot {
    background: var(--eatp-amber);
    border-color: var(--eatp-amber);
    color: #fff;
    animation: eatp-pulse-dot 1.5s infinite;
}
@keyframes eatp-pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}
.eatp-map-lesson-title {
    flex: 1;
    color: var(--eatp-text);
    line-height: 1.3;
}
.eatp-map-lesson.eatp-map-completed .eatp-map-lesson-title {
    color: var(--eatp-text-muted);
}
.eatp-map-lesson-objective {
    font-size: 0.76rem;
    color: var(--eatp-text-faint);
    margin-top: 1px;
}

/* Responsive: on small screens, stack the header stats vertically */
@media (max-width: 480px) {
    .eatp-header-stats {
        flex-wrap: wrap;
        gap: 8px;
    }
    .eatp-stat-ring {
        width: 44px;
        height: 44px;
    }
    .eatp-ring-text {
        font-size: 0.55rem;
    }
    .eatp-mini-stats {
        flex: 1;
        justify-content: flex-end;
    }
    .eatp-mini-stat {
        font-size: 0.7rem;
        padding: 3px 6px;
    }
    .eatp-lesson-card-title {
        font-size: 0.85rem;
    }
}

/* =====================================================
   v3.12 — Help hint banner (admin-configurable)
   ===================================================== */
.eatp-help-hint-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
    border-bottom: 1px solid #f59e0b;
    font-size: 0.82rem;
    color: #78350f;
    line-height: 1.4;
}
.eatp-help-hint-icon {
    flex-shrink: 0;
    font-size: 1rem;
}
.eatp-help-hint-text {
    flex: 1;
}
.eatp-help-hint-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #78350f;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}
.eatp-help-hint-close:hover {
    opacity: 1;
}
@media (max-width: 640px) {
    .eatp-help-hint-banner {
        font-size: 0.75rem;
        padding: 6px 10px;
    }
}

/* =====================================================
   v3.15 — Mic button in María sub-chat (speak questions)
   ===================================================== */
.eatp-maria-mic {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fff;
    color: #92400e;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.eatp-maria-mic:hover {
    background: #fef3c7;
    border-color: #f59e0b;
}
.eatp-maria-mic.eatp-mic-listening {
    background: #ef4444;
    border-color: #dc2626;
    color: #fff;
    animation: eatp-mic-pulse 1.2s infinite;
}
@keyframes eatp-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* =====================================================
   v3.16 — Mic buttons more visible + always-available stop button
   ===================================================== */

/* Main mic button — more contrast */
.eatp-mic-btn {
    background: #1e293b !important;
    color: #fff !important;
    border: 2px solid #334155 !important;
    font-size: 1.3rem !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0;
}
.eatp-mic-btn:hover {
    background: #334155 !important;
    border-color: #475569 !important;
    transform: scale(1.05);
}
.eatp-mic-btn.eatp-listening {
    background: #ef4444 !important;
    border-color: #dc2626 !important;
    animation: eatp-mic-pulse 1.2s infinite;
}

/* María sub-chat mic button — more contrast */
.eatp-maria-mic {
    width: 44px !important;
    height: 44px !important;
    background: #1e293b !important;
    color: #fff !important;
    border: 2px solid #334155 !important;
    border-radius: 50% !important;
    font-size: 1.15rem !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.eatp-maria-mic:hover {
    background: #334155 !important;
    border-color: #475569 !important;
    transform: scale(1.05);
}
.eatp-maria-mic.eatp-mic-listening {
    background: #ef4444 !important;
    border-color: #dc2626 !important;
}

/* Always-available stop voice button (panic button) */
.eatp-tts-stop-always {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 9999;
    background: #ef4444 !important;
    color: #fff !important;
    border: 2px solid #dc2626 !important;
    border-radius: 50% !important;
    width: 52px !important;
    height: 52px !important;
    font-size: 1.3rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
    transition: all 0.15s ease !important;
}
.eatp-tts-stop-always:hover {
    background: #dc2626 !important;
    transform: scale(1.08);
}
.eatp-tts-stop-always.eatp-hidden {
    display: none !important;
}

/* =====================================================
   v3.20 — Bigger, more visible mic buttons + confetti + start button
   ===================================================== */

/* Main mic button — bigger and bolder */
.eatp-app .eatp-mic-btn {
    background: #0f172a !important;
    color: #fff !important;
    border: 2px solid #1e293b !important;
    font-size: 1.5rem !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    padding: 0 !important;
}
/* v3.24 FIX: SVG mic icon fills ~58% of the button (Material Design spec),
   replacing the tiny emoji that was impossible to see at 1.5rem. */
.eatp-app .eatp-mic-btn .eatp-mic-icon {
    width: 34px !important;
    height: 34px !important;
    display: block !important;
}
.eatp-app .eatp-mic-btn:hover {
    background: #1e293b !important;
    transform: scale(1.08);
}
.eatp-app .eatp-mic-btn.eatp-listening {
    background: #ef4444 !important;
    border-color: #dc2626 !important;
    animation: eatp-mic-pulse 1.2s infinite;
}

/* María sub-chat mic button — bigger */
.eatp-maria-mic {
    width: 52px !important;
    height: 52px !important;
    background: #0f172a !important;
    color: #fff !important;
    border: 2px solid #1e293b !important;
    border-radius: 50% !important;
    font-size: 1.3rem !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    padding: 0 !important;
}
/* v3.24: SVG mic icon for the María sub-chat mic button (same icon as main). */
.eatp-maria-mic .eatp-mic-icon {
    width: 28px !important;
    height: 28px !important;
    display: block !important;
}
.eatp-maria-mic:hover {
    background: #1e293b !important;
    transform: scale(1.08);
}

/* Confetti animation for lesson completion */
.eatp-confetti {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10000; /* v3.26: above the lesson-complete modal (9999) so confetti is visible */
    overflow: hidden;
}
.eatp-confetti-piece {
    position: absolute;
    width: 12px;
    height: 12px;
    top: -12px;
    animation: eatp-confetti-fall 3s linear forwards;
    border-radius: 2px; /* v3.26: slight rounding so pieces look like real confetti */
}
/* v3.26: shape variety for confetti pieces. */
.eatp-confetti-piece.eatp-confetti-circle {
    border-radius: 50%;
    width: 10px;
    height: 10px;
}
.eatp-confetti-piece.eatp-confetti-rect {
    width: 14px;
    height: 6px;
    border-radius: 1px;
}
.eatp-confetti-piece.eatp-confetti-square {
    /* default square — uses the base .eatp-confetti-piece styles */
}
@keyframes eatp-confetti-fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Start classes button + lesson complete modal */
.eatp-start-classes-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--eatp-primary);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.eatp-start-classes-btn:hover {
    background: var(--eatp-primary-dark);
    transform: scale(1.03);
}

.eatp-lesson-complete-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.eatp-lesson-complete-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px 36px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: eatp-pop-in 0.4s ease;
}
.eatp-lesson-complete-emoji {
    font-size: 4rem;
    margin-bottom: 12px;
}
.eatp-lesson-complete-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #065f46;
    margin-bottom: 8px;
}
.eatp-lesson-complete-sub {
    font-size: 1rem;
    color: #475569;
    margin-bottom: 24px;
}
.eatp-lesson-complete-btn {
    background: var(--eatp-primary);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}
.eatp-lesson-complete-btn:hover {
    background: var(--eatp-primary-dark);
}

/* Conversation tab styling */
.eatp-panel-conversation .eatp-messages {
    min-height: 300px;
}