/* ═══════════════════════════════════════════════════════
   CosmoCode — style.css
   Tema: Dark Space | Mascote Kawaii Animado
   ═══════════════════════════════════════════════════════ */

/* ─── RESET & TOKENS ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Tema Claro (Padrão) */
    --bg-deep:        #f1f5f9; /* slate-100 */
    --bg-panel:       #ffffff; /* branco puro */
    --bg-panel2:      #f8fafc; /* slate-50 */
    --border:         rgba(124,58,237,0.12);
    --border-bright:  rgba(124,58,237,0.25);
    --accent:         #6d28d9; /* roxo mais escuro para contraste */
    --accent-bright:  #7c3aed; /* roxo */
    --accent-glow:    rgba(124,58,237,0.12);
    --cyan:           #0891b2;
    --pink:           #db2777;
    --green:          #059669;
    --amber:          #d97706;
    --text-primary:   #000000; /* Preto puro para contraste máximo */
    --text-secondary: #111827; /* Cinza quase preto */
    --text-dim:       #374151; /* Cinza escuro para melhor leitura */
    --font-scale:     1;
    --radius-sm:      8px;
    --radius-md:      14px;
    --radius-lg:      20px;
    --shadow-panel:   0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -4px rgba(0,0,0,0.05);
    --transition:     all 0.25s ease;
    --sidebar-w:      240px;
    --font:           'Outfit', sans-serif;
    --font-mono:      'JetBrains Mono', monospace;

    /* Variáveis dinâmicas para opacidade */
    --card-bg:            rgba(0,0,0,0.02);
    --stat-item-bg:       rgba(0,0,0,0.03);
    --bar-bg:             rgba(0,0,0,0.05);
    --btn-secondary-bg:   rgba(0,0,0,0.04);
    --btn-secondary-hover:rgba(0,0,0,0.08);
    --slider-bg:          rgba(0,0,0,0.08);
    --inner-border:       rgba(0,0,0,0.02);
    --system-msg-bg:      rgba(0,0,0,0.03);
    --input-bg:           rgba(0,0,0,0.03);
    --bubble-bg:          #ffffff;
    --bubble-border:      rgba(124,58,237,0.2);
}

/* Tema Escuro */
body.dark-theme {
    --bg-deep:        #0a0818;
    --bg-panel:       #110e24;
    --bg-panel2:      #160f2e;
    --border:         rgba(139,92,246,0.18);
    --border-bright:  rgba(139,92,246,0.4);
    --accent:         #7c3aed;
    --accent-bright:  #a78bfa;
    --accent-glow:    rgba(124,58,237,0.35);
    --cyan:           #06b6d4;
    --pink:           #ec4899;
    --green:          #10b981;
    --amber:          #f59e0b;
    --text-primary:   #f1f0ff;
    --text-secondary: #a8a3c5;
    --text-dim:       #6b6888;
    --shadow-panel:   0 4px 32px rgba(0,0,0,0.5);

    /* Variáveis dinâmicas para opacidade (modo escuro) */
    --card-bg:            rgba(255,255,255,0.03);
    --stat-item-bg:       rgba(255,255,255,0.04);
    --bar-bg:             rgba(255,255,255,0.07);
    --btn-secondary-bg:   rgba(255,255,255,0.06);
    --btn-secondary-hover:rgba(255,255,255,0.1);
    --slider-bg:          rgba(255,255,255,0.12);
    --inner-border:       rgba(255,255,255,0.04);
    --system-msg-bg:      rgba(255,255,255,0.04);
    --input-bg:           rgba(255,255,255,0.05);
    --bubble-bg:          #1e1a3a;
    --bubble-border:      var(--border-bright);
}

/* ECO theme overrides */
.theme-eco {
    --accent:        #0d9488;
    --accent-bright: #2dd4bf;
    --accent-glow:   rgba(13,148,136,0.35);
    --bg-deep:       #021526;
    --bg-panel:      #04223a;
    --border:        rgba(45,212,191,0.18);
    --border-bright: rgba(45,212,191,0.45);
}

html, body { height: 100%; }

body {
    font-family: var(--font);
    background: var(--bg-deep);
    color: var(--text-primary);
    overflow: hidden;
    font-size: calc(14px * var(--font-scale));
    line-height: 1.5;
}

/* ─── LAYOUT ──────────────────────────────────────────── */
.app-container {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    height: 100vh;
    overflow: hidden;
}

/* ─── SIDEBAR ─────────────────────────────────────────── */
.sidebar {
    background: var(--bg-panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--border);
}

.logo-icon {
    width: 34px; height: 34px;
    background: linear-gradient(135deg, var(--accent), var(--accent-bright));
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 16px var(--accent-glow);
}

.icon-neon { width: 18px; height: 18px; color: #fff; }

.brand h1 {
    font-size: 1.21em; font-weight: 800;
    background: linear-gradient(135deg, var(--accent-bright), var(--cyan));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    letter-spacing: -0.3px;
}

/* Profile card */
.profile-card {
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--border);
}

.avatar-container {
    position: relative; width: 52px; height: 52px;
    margin: 0 auto 10px;
}

.avatar-ring {
    position: absolute; inset: -3px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: linear-gradient(135deg, var(--accent), var(--cyan)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out; mask-composite: exclude;
}

.avatar-img { width: 52px; height: 52px; border-radius: 50%; display: block; }

.profile-info { text-align: center; margin-bottom: 10px; }
.player-name  { font-size: 0.93em; font-weight: 700; color: var(--text-primary); }
.player-title { font-size: 0.71em; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.8px; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.stat-item  { background: var(--stat-item-bg); border-radius: var(--radius-sm); padding: 5px; text-align: center; }
.stat-label { display: block; font-size: 0.64em; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.stat-value { font-size: 1.14em; font-weight: 800; color: var(--accent-bright); }

.xp-bar-container { height: 5px; background: var(--bar-bg); border-radius: 99px; overflow: hidden; margin-bottom: 4px; }
.xp-bar-fill      { height: 100%; background: linear-gradient(90deg, var(--accent), var(--cyan)); border-radius: 99px; transition: width 0.6s ease; }
.xp-text          { font-size: 10px; color: var(--text-dim); display: block; text-align: center; }

/* Modules nav */
.modules-nav { flex: 1; overflow-y: auto; padding: 10px 10px 6px; }
.modules-nav::-webkit-scrollbar { width: 4px; }
.modules-nav::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 99px; }

.modules-nav h3 {
    font-size: 0.71em; font-weight: 700; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 8px; padding: 0 4px;
}

.levels-list { display: flex; flex-direction: column; gap: 3px; }

.level-nav-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 8px; border-radius: var(--radius-sm);
    cursor: pointer; transition: var(--transition);
    border: 1px solid transparent;
    position: relative;
}

.level-nav-item:hover:not(.locked) {
    background: rgba(139,92,246,0.12);
    border-color: var(--border);
}

.level-nav-item.active {
    background: rgba(139,92,246,0.18);
    border-color: var(--border-bright);
}

.level-nav-item.completed .level-num-badge {
    background: linear-gradient(135deg, var(--green), #059669);
    color: #fff;
}

.level-nav-item.locked { opacity: 0.45; cursor: not-allowed; }

.level-num-badge {
    min-width: 24px; height: 24px; border-radius: 7px;
    background: rgba(139,92,246,0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.71em; font-weight: 800; color: var(--accent-bright);
    flex-shrink: 0;
}

.level-nav-name {
    font-size: 0.82em; font-weight: 500; color: var(--text-secondary);
    flex: 1; line-height: 1.3;
}

.level-nav-item.active .level-nav-name { color: var(--text-primary); font-weight: 600; }

.level-lock-icon { color: var(--text-dim); flex-shrink: 0; }

.sidebar-footer {
    padding: 10px;
    border-top: 1px solid var(--border);
}

.btn-icon {
    width: 100%; display: flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    color: var(--text-secondary); border-radius: var(--radius-sm);
    padding: 7px 10px; font-family: var(--font); font-size: 0.86em;
    cursor: pointer; transition: var(--transition);
}
.btn-icon:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.btn-icon i     { width: 14px; height: 14px; }

/* ─── MAIN CONTENT ────────────────────────────────────── */
.main-content {
    display: flex; flex-direction: column;
    overflow: hidden; background: var(--bg-deep);
}

/* Header */
.top-header {
    padding: 12px 20px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-panel);
    flex-shrink: 0;
}

.level-title-container {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
}

.mission-tag {
    background: var(--accent-glow);
    border: 1px solid var(--border-bright);
    color: var(--accent-bright);
    font-size: 0.64em; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; border-radius: 99px; padding: 2px 8px;
    flex-shrink: 0;
}

.level-title-container h2 {
    font-size: 1.07em; font-weight: 700; color: var(--text-primary);
    flex: 1; line-height: 1.3;
}

.btn-speak-icon {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-dim); border-radius: 8px; padding: 5px 7px;
    cursor: pointer; transition: var(--transition); flex-shrink: 0;
    display: flex; align-items: center;
}
.btn-speak-icon:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-speak-icon i { width: 14px; height: 14px; }

.instructions-card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 8px 12px;
}
.instructions-card p { font-size: 0.86em; color: var(--text-secondary); line-height: 1.6; }

/* Workspace grid */
.workspace-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    flex: 1; overflow: hidden; gap: 0;
}

/* ─── PANELS ──────────────────────────────────────────── */
.code-panel, .game-panel {
    display: flex; flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
}

.code-panel { border-left: none; border-bottom: none; border-top: none; }
.game-panel { border-right: none; border-bottom: none; border-top: none; border-left: 1px solid var(--border); }

.panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-bottom: 1px solid var(--border);
    background: var(--bg-panel2); flex-shrink: 0;
}

.panel-title {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.86em; font-weight: 700; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.6px;
}

.title-icon { width: 14px; height: 14px; color: var(--accent-bright); }

.code-actions { display: flex; gap: 7px; }

/* Buttons */
.btn-success, .btn-secondary, .btn-primary {
    display: flex; align-items: center; gap: 5px;
    border: none; border-radius: var(--radius-sm);
    font-family: var(--font); font-size: 0.86em; font-weight: 600;
    padding: 7px 12px; cursor: pointer; transition: var(--transition);
}

.btn-success {
    background: linear-gradient(135deg, var(--green), #059669);
    color: #fff; box-shadow: 0 2px 10px rgba(16,185,129,0.35);
}
.btn-success:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(16,185,129,0.5); }
.btn-success:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-secondary {
    background: var(--btn-secondary-bg); border: 1px solid var(--border);
    color: var(--text-secondary);
}
.btn-secondary:hover { background: var(--btn-secondary-hover); color: var(--text-primary); }

.btn-primary {
    background: linear-gradient(135deg, var(--accent), #6d28d9);
    color: #fff; box-shadow: 0 2px 14px var(--accent-glow);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 20px var(--accent-glow); }

.btn-success i, .btn-secondary i, .btn-primary i { width: 13px; height: 13px; }

/* Blockly container */
#blockly-container { flex: 1; overflow: hidden; position: relative; }
#blockly-div       { width: 100%; height: 100%; }

/* Canvas */
.canvas-container { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; padding: 10px; }

#game-canvas {
    max-width: 100%; max-height: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: 0 0 40px rgba(0,0,0,0.15), inset 0 0 0 1px var(--inner-border);
    object-fit: contain;
}

.game-speed-control { display: flex; align-items: center; gap: 7px; }
.speed-label { font-size: 0.71em; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.range-slider {
    -webkit-appearance: none; appearance: none;
    width: 70px; height: 4px; border-radius: 99px;
    background: var(--slider-bg); outline: none; cursor: pointer;
}
.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 14px; height: 14px;
    border-radius: 50%; background: var(--accent-bright);
    box-shadow: 0 0 8px var(--accent-glow);
    transition: var(--transition);
}
.range-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }

/* Canvas overlay */
.canvas-overlay {
    position: absolute; inset: 0;
    display: none; align-items: center; justify-content: center;
    background: rgba(10,8,24,0.88); backdrop-filter: blur(8px);
    border-radius: var(--radius-md); z-index: 20;
}
.canvas-overlay.show { display: flex; animation: overlay-in 0.4s ease; }

@keyframes overlay-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

.overlay-content { text-align: center; padding: 30px; }
.overlay-content h2 { font-size: 1.86em; font-weight: 900; margin-bottom: 10px;
    background: linear-gradient(135deg, var(--accent-bright), var(--cyan));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.overlay-content p  { font-size: 0.93em; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.6; }

/* ═══════════════════════════════════════════════════════
   MASCOTE BIT — Design Kawaii + Sistema de Movimento
   ═══════════════════════════════════════════════════════ */

.mascot-wrapper {
    position: fixed;
    left: calc(100vw - 120px);
    top:  calc(100vh - 170px);
    z-index: 900;
    cursor: pointer;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    /* Transição springy para o movimento entre painéis */
    transition:
        left 0.65s cubic-bezier(0.34, 1.56, 0.64, 1),
        top  0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Balão de Fala ──────────────────────────────────── */
.mascot-speech-bubble {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bubble-bg);
    border: 1.5px solid var(--bubble-border);
    border-radius: 14px;
    padding: 9px 28px 9px 13px;
    min-width: 160px;
    max-width: 230px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 0 0 1px var(--inner-border);
    opacity: 0;
    transform: translateX(-50%) translateY(8px) scale(0.92);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    white-space: normal;
}

.mascot-speech-bubble.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    pointer-events: all;
}

/* Botão de fala dentro do balão do Bit */
#btn-speak-mascot {
    position: absolute;
    top: 6px;
    right: 6px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 3px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: var(--transition);
}
#btn-speak-mascot:hover {
    color: var(--cyan);
    background: var(--btn-secondary-bg);
}
#btn-speak-mascot i {
    width: 13px;
    height: 13px;
}

/* Cauda do balão (triângulo apontando para baixo) */
.mascot-speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid var(--bubble-bg);
}

#mascot-bubble-text {
    font-size: 0.82em;
    line-height: 1.55;
    color: var(--text-primary);
    font-weight: 500;
}

/* ── Corpo principal ────────────────────────────────── */
.mascot-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    animation: mascot-float 3.2s ease-in-out infinite;
    filter: drop-shadow(0 6px 16px rgba(124,58,237,0.5));
    transition: filter 0.3s ease;
}

.mascot-body:hover { filter: drop-shadow(0 8px 24px rgba(124,58,237,0.7)); }

/* ── Antena ─────────────────────────────────────────── */
.mascot-antenna      { display: flex; flex-direction: column; align-items: center; }
.mascot-antenna-stem {
    width: 3px; height: 14px;
    background: linear-gradient(to top, #7c3aed, #a78bfa);
    border-radius: 99px;
}
.mascot-antenna-ball {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #f9a8d4, #ec4899);
    box-shadow: 0 0 8px #ec4899, 0 0 16px rgba(236,72,153,0.5);
    animation: antenna-pulse 1.8s ease-in-out infinite;
}

/* ── Cabeça ─────────────────────────────────────────── */
.mascot-head {
    width: 68px; height: 64px;
    background: linear-gradient(145deg, #8b5cf6 0%, #6d28d9 60%, #4c1d95 100%);
    border-radius: 50% 50% 44% 44%;
    position: relative;
    border: 2px solid rgba(167,139,250,0.5);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08) inset,
        0 2px 20px rgba(109,40,217,0.6);
}

/* Orelhinhas laterais */
.mascot-ear {
    position: absolute; top: 14px;
    width: 12px; height: 16px;
    background: linear-gradient(to bottom, #7c3aed, #5b21b6);
    border-radius: 50% 50% 40% 40%;
    border: 1.5px solid rgba(167,139,250,0.4);
}
.mascot-ear-left  { left: -8px;  border-radius: 50% 30% 40% 50%; }
.mascot-ear-right { right: -8px; border-radius: 30% 50% 50% 40%; }

/* Rosto */
.mascot-face {
    position: absolute;
    top: 10px; left: 50%;
    transform: translateX(-50%);
    width: 56px; height: 44px;
}

/* ── Olhos ─────────────────────────────────────────── */
.mascot-eye {
    position: absolute; top: 4px;
    width: 20px; height: 20px;
    background: #fff;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.9);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    transition: transform 0.2s ease;
}

.mascot-eye-left  { left: 4px; }
.mascot-eye-right { right: 4px; }

.mascot-pupil {
    position: absolute;
    width: 11px; height: 11px;
    background: #1e1b4b;
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, width 0.2s ease, height 0.2s ease;
}

.mascot-shine {
    position: absolute;
    width: 4px; height: 4px;
    background: #fff;
    border-radius: 50%;
    top: 4px; left: 5px;
}

/* Bochechas */
.mascot-cheek {
    position: absolute; top: 24px;
    width: 12px; height: 6px;
    background: rgba(236,72,153,0.4);
    border-radius: 50%;
    filter: blur(2px);
}
.mascot-cheek-left  { left: 3px; }
.mascot-cheek-right { right: 3px; }

/* Boca */
.mascot-mouth {
    position: absolute; bottom: 2px; left: 50%;
    transform: translateX(-50%);
    width: 20px; height: 8px;
    border-bottom: 2.5px solid rgba(255,255,255,0.8);
    border-left:   2.5px solid rgba(255,255,255,0.8);
    border-right:  2.5px solid rgba(255,255,255,0.8);
    border-top: none;
    border-radius: 0 0 14px 14px;
    transition: border-radius 0.3s ease, transform 0.3s ease;
}

/* ── Tronco ─────────────────────────────────────────── */
.mascot-chest {
    width: 52px; height: 32px;
    background: linear-gradient(145deg, #5b21b6, #4c1d95);
    border-radius: 10px 10px 12px 12px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid rgba(167,139,250,0.35);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.mascot-screen {
    width: 36px; height: 18px;
    background: #0a0818;
    border-radius: 6px;
    border: 1px solid rgba(6,182,212,0.4);
    display: flex; align-items: center; justify-content: center; gap: 5px;
    box-shadow: 0 0 8px rgba(6,182,212,0.2) inset;
}

.mascot-screen-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--cyan);
    animation: screen-blink 1.5s ease-in-out infinite;
    box-shadow: 0 0 4px var(--cyan);
}
.mascot-screen-dot:nth-child(2) { animation-delay: 0.3s; }
.mascot-screen-dot:nth-child(3) { animation-delay: 0.6s; }

/* ── Label hover ────────────────────────────────────── */
.mascot-label {
    font-size: 0.71em; font-weight: 700; color: var(--accent-bright);
    text-transform: uppercase; letter-spacing: 1px;
    opacity: 0; transition: opacity 0.2s ease;
}
.mascot-wrapper:hover .mascot-label { opacity: 1; }

/* ══ EXPRESSÕES FACIAIS ════════════════════════════════ */

/* Happy — boca mais curvada, olhos ligeiramente maiores */
.mascot-body.expr-happy .mascot-mouth {
    width: 24px; height: 10px;
    border-radius: 0 0 18px 18px;
    border-color: rgba(255,255,255,0.95);
}
.mascot-body.expr-happy .mascot-eye { transform: scale(1.08); }
.mascot-body.expr-happy .mascot-cheek { background: rgba(236,72,153,0.65); }

/* Excited — olhos bem abertos, boca grande */
.mascot-body.expr-excited .mascot-mouth {
    width: 26px; height: 12px;
    border-radius: 0 0 20px 20px;
}
.mascot-body.expr-excited .mascot-eye { transform: scale(1.15); }
.mascot-body.expr-excited .mascot-pupil { width: 13px; height: 13px; }
.mascot-body.expr-excited .mascot-cheek { background: rgba(236,72,153,0.75); filter: blur(1.5px); }

/* Thinking — olho direito semicerrado, boca neutra */
.mascot-body.expr-thinking .mascot-eye-right { transform: scaleY(0.55); }
.mascot-body.expr-thinking .mascot-mouth     { border-radius: 0 0 4px 12px; width: 16px; left: calc(50% + 3px); }

/* Sad — boca virada para baixo */
.mascot-body.expr-sad .mascot-mouth {
    border-bottom: none;
    border-top: 2.5px solid rgba(255,255,255,0.7);
    border-radius: 14px 14px 0 0;
    top: 26px; bottom: auto;
}
.mascot-body.expr-sad .mascot-pupil { transform: translate(-50%, -30%); }

/* Surprised — olhos bem grandes, boca aberta */
.mascot-body.expr-surprised .mascot-eye   { transform: scale(1.2); }
.mascot-body.expr-surprised .mascot-pupil { width: 8px; height: 8px; }
.mascot-body.expr-surprised .mascot-mouth { width: 14px; height: 12px; border-radius: 50%; border-right: none; border-left: none; border-top: 2.5px solid rgba(255,255,255,0.8); }

/* Piscar */
.mascot-body.blinking .mascot-eye { transform: scaleY(0.08); }

/* ══ ANIMAÇÕES ═════════════════════════════════════════ */

@keyframes mascot-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-7px); }
}

@keyframes antenna-pulse {
    0%, 100% { box-shadow: 0 0 6px #ec4899, 0 0 12px rgba(236,72,153,0.4); transform: scale(1); }
    50%       { box-shadow: 0 0 12px #ec4899, 0 0 24px rgba(236,72,153,0.7); transform: scale(1.2); }
}

@keyframes screen-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.2; }
}

/* Mascote "falando" — vibração suave */
.mascot-wrapper.speaking .mascot-body { animation: mascot-float 3.2s ease-in-out infinite, mascot-talk 0.25s ease-in-out infinite alternate; }

@keyframes mascot-talk {
    from { transform: translateY(0) rotate(-1deg); }
    to   { transform: translateY(-6px) rotate(1deg); }
}

/* Sacudir (erro grave) */
@keyframes mascot-shake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-6px) rotate(-3deg); }
    40%     { transform: translateX(6px)  rotate(3deg); }
    60%     { transform: translateX(-4px) rotate(-2deg); }
    80%     { transform: translateX(4px)  rotate(2deg); }
}
.mascot-body.expr-sad { animation: mascot-shake 0.5s ease, mascot-float 3.2s ease-in-out 0.5s infinite; }

/* ═══════════════════════════════════════════════════════
   CHAT WINDOW
   ═══════════════════════════════════════════════════════ */
.ai-chat-window {
    position: fixed;
    bottom: 170px; right: 20px;
    width: 300px;
    background: var(--bg-panel);
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 40px rgba(0,0,0,0.15), 0 0 0 1px var(--inner-border) inset;
    display: flex; flex-direction: column;
    opacity: 0; pointer-events: none; transform: translateY(12px) scale(0.96);
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 850; overflow: hidden;
    max-height: 380px;
}

.ai-chat-window.show {
    opacity: 1; pointer-events: all;
    transform: translateY(0) scale(1);
}

.chat-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-panel2);
    flex-shrink: 0;
}

.chat-bot-profile { display: flex; align-items: center; gap: 9px; }

.mini-mascot-icon {
    width: 32px; height: 32px; border-radius: 10px;
    background: linear-gradient(135deg, #7c3aed, #4c1d95);
    border: 1.5px solid var(--border-bright);
    position: relative;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 10px var(--accent-glow);
}
.mini-mascot-icon::before {
    content: '🤖';
    font-size: 16px;
}

.chat-bot-profile h4    { font-size: 0.93em; font-weight: 700; color: var(--text-primary); }
.status-online          { font-size: 0.71em; color: var(--green); font-weight: 500; }

.btn-close {
    background: transparent; border: none; color: var(--text-dim);
    cursor: pointer; padding: 4px; border-radius: 6px;
    display: flex; transition: var(--transition);
}
.btn-close:hover { color: var(--text-primary); background: var(--btn-secondary-bg); }
.btn-close i { width: 14px; height: 14px; }

.chat-messages {
    flex: 1; overflow-y: auto; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 7px;
    scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

.msg-bubble {
    padding: 8px 11px; border-radius: 12px;
    font-size: 0.86em; line-height: 1.5; max-width: 90%;
    word-break: break-word; animation: bubble-in 0.2s ease;
}
@keyframes bubble-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

.bot-msg {
    background: rgba(139,92,246,0.14); border: 1px solid var(--border);
    color: var(--text-primary); border-radius: 12px 12px 12px 3px;
    align-self: flex-start;
}
.bot-msg.hint { border-color: var(--amber); background: rgba(245,158,11,0.1); }

.user-msg {
    background: linear-gradient(135deg, var(--accent), #5b21b6);
    color: #fff; border-radius: 12px 12px 3px 12px;
    align-self: flex-end;
}

.system-msg {
    background: var(--system-msg-bg); border: 1px solid var(--border);
    color: var(--text-secondary); border-radius: 10px;
    font-size: 0.79em; text-align: center; align-self: center; width: 100%;
}

/* Typing indicator */
.typing-dots { display: flex; gap: 4px; align-items: center; padding: 2px 0; }
.typing-dots span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent-bright); animation: dot-bounce 1.2s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-bounce {
    0%,80%,100% { transform: translateY(0); opacity: 0.5; }
    40%          { transform: translateY(-5px); opacity: 1; }
}

.chat-input-area {
    display: flex; gap: 6px; padding: 8px 10px;
    border-top: 1px solid var(--border);
    background: var(--bg-panel2); flex-shrink: 0;
}

#chat-input {
    flex: 1; background: var(--input-bg);
    border: 1px solid var(--border); border-radius: 8px;
    color: var(--text-primary); font-family: var(--font); font-size: 0.86em;
    padding: 7px 10px; outline: none; transition: var(--transition);
}
#chat-input:focus { border-color: var(--accent-bright); box-shadow: 0 0 0 2px var(--accent-glow); }
#chat-input::placeholder { color: var(--text-dim); }

.btn-send {
    background: linear-gradient(135deg, var(--accent), #5b21b6);
    border: none; border-radius: 8px; padding: 7px 10px;
    color: #fff; cursor: pointer; transition: var(--transition);
    display: flex; align-items: center;
}
.btn-send:hover { transform: scale(1.06); box-shadow: 0 2px 10px var(--accent-glow); }
.btn-send i { width: 13px; height: 13px; }

/* ═══════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════ */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
    display: none; align-items: center; justify-content: center;
    z-index: 1000;
}
.modal-backdrop.show { display: flex; animation: modal-in 0.25s ease; }
@keyframes modal-in { from { opacity:0; } to { opacity:1; } }

.modal-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-lg);
    width: 400px; max-width: 95vw;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
    animation: card-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes card-in { from { transform: scale(0.92) translateY(16px); opacity:0; } to { transform: none; opacity:1; } }

.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px 14px; border-bottom: 1px solid var(--border);
}
.modal-header h2 { font-size: 1.07em; font-weight: 700; color: var(--text-primary); }

.btn-close-modal {
    background: transparent; border: none; color: var(--text-dim);
    cursor: pointer; padding: 5px; border-radius: 6px; display: flex;
    transition: var(--transition);
}
.btn-close-modal:hover { color: var(--text-primary); background: var(--btn-secondary-bg); }
.btn-close-modal i { width: 15px; height: 15px; }

.modal-body { padding: 16px 18px; }
.modal-body p { font-size: 0.93em; color: var(--text-secondary); margin-bottom: 14px; line-height: 1.6; }

.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 0.79em; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; }

.form-input {
    width: 100%; background: var(--input-bg);
    border: 1px solid var(--border); border-radius: 8px;
    color: var(--text-primary); font-family: var(--font-mono); font-size: 0.86em;
    padding: 8px 11px; outline: none; transition: var(--transition);
}
.form-input:focus { border-color: var(--accent-bright); box-shadow: 0 0 0 2px var(--accent-glow); }

.info-alert {
    display: flex; align-items: flex-start; gap: 8px;
    background: rgba(6,182,212,0.08); border: 1px solid rgba(6,182,212,0.25);
    border-radius: 8px; padding: 9px 11px;
}
.alert-icon { width: 14px; height: 14px; color: var(--cyan); flex-shrink: 0; margin-top: 1px; }
.info-alert span { font-size: 0.82em; color: var(--text-secondary); line-height: 1.5; }

.modal-footer { padding: 12px 18px 16px; }
.modal-footer .btn-primary { width: 100%; justify-content: center; font-size: 0.93em; padding: 10px; }

/* ═══════════════════════════════════════════════════════
   BLOCKLY CUSTOMIZATION
   ═══════════════════════════════════════════════════════ */
.blocklySvg { background: transparent !important; }

.blocklyToolboxDiv {
    background: var(--bg-panel2) !important;
    border-right: 1px solid var(--border) !important;
}

.blocklyFlyoutBackground { fill: var(--bg-panel) !important; fill-opacity: 0.97 !important; }
.blocklyScrollbarBackground { fill: transparent !important; }
.blocklyScrollbarHandle     { fill: var(--border-bright) !important; }
.blocklyMainBackground      { fill: var(--bg-deep) !important; fill-opacity: 0.6 !important; }

/* ═══════════════════════════════════════════════════════
   SCROLLBARS GLOBAIS
   ═══════════════════════════════════════════════════════ */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-bright); }

/* ─── ACCESSIBILITY: DISABLED ICON BUTTONS ────────────── */
.btn-speak-icon:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: var(--border);
    color: var(--text-dim);
}

/* ─── ACCESSIBILITY: BUBBLE POSITION ADJUSTMENT FOR TOP ── */
.mascot-wrapper.bubble-bottom .mascot-speech-bubble {
    bottom: auto;
    top: calc(100% + 12px);
    transform: translateX(-50%) translateY(-8px) scale(0.92);
}

.mascot-wrapper.bubble-bottom .mascot-speech-bubble.visible {
    transform: translateX(-50%) translateY(0) scale(1);
}

.mascot-wrapper.bubble-bottom .mascot-speech-bubble::after {
    bottom: auto;
    top: -8px;
    border-top: none;
    border-bottom: 8px solid var(--bubble-bg);
}