/* =====================================================================
   Inglês com Propósito — design system "AMERICAN POP"
   Cores da bandeira: vermelho + branco + azul. Energia de app de aula.
   Fredoka (display redondo) + Nunito (corpo). Botões chunky "pressáveis".
   ===================================================================== */
:root {
  --red:#E4002B; --red-deep:#B4001F; --blue:#0A3161; --royal:#1D4ED8; --white:#FFFFFF;
  --bg:#EEF4FC; --surface:#FFFFFF; --surface-2:#E8F0FB; --ink:#0A2450; --ink-soft:#5E6E8E;
  --line:#D7E3F5; --accent:#E4002B; --accent-deep:#B4001F; --accent-ink:#C4001E;
  --mentor-bg:#E9F1FC; --mentor-ink:#0A2450; --user-bg:#1D4ED8; --user-ink:#FFFFFF;
  --flame:#FF8A00; --gold:#FFC93C;
  --display:'Fredoka','Baloo 2',-apple-system,system-ui,sans-serif;
  --sans:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --shadow:0 18px 40px -22px rgba(10,49,97,.45);
  --r:22px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#061733; --surface:#0C2148; --surface-2:#112A54; --ink:#EAF1FB; --ink-soft:#93A6CC;
    --line:#203C72; --accent:#FF3B52; --accent-deep:#D01E38; --accent-ink:#FF6577;
    --mentor-bg:#112A54; --mentor-ink:#EAF1FB; --user-bg:#2563EB; --user-ink:#FFFFFF;
    --flame:#FF9D2E; --gold:#FFD25E; --shadow:0 18px 44px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="light"] {
  --bg:#EEF4FC; --surface:#FFFFFF; --surface-2:#E8F0FB; --ink:#0A2450; --ink-soft:#5E6E8E;
  --line:#D7E3F5; --accent:#E4002B; --accent-deep:#B4001F; --accent-ink:#C4001E;
  --mentor-bg:#E9F1FC; --mentor-ink:#0A2450; --user-bg:#1D4ED8; --user-ink:#FFFFFF;
  --flame:#FF8A00; --gold:#FFC93C; --shadow:0 18px 40px -22px rgba(10,49,97,.45);
}
:root[data-theme="dark"] {
  --bg:#061733; --surface:#0C2148; --surface-2:#112A54; --ink:#EAF1FB; --ink-soft:#93A6CC;
  --line:#203C72; --accent:#FF3B52; --accent-deep:#D01E38; --accent-ink:#FF6577;
  --mentor-bg:#112A54; --mentor-ink:#EAF1FB; --user-bg:#2563EB; --user-ink:#FFFFFF;
  --flame:#FF9D2E; --gold:#FFD25E; --shadow:0 18px 44px -20px rgba(0,0,0,.7);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--sans); font-weight: 600; color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; overscroll-behavior: none;
}
h1,h2,h3,h4 { font-family: var(--display); font-weight: 600; text-wrap: balance; letter-spacing: -.01em; }
button { font-family: var(--sans); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--royal); outline-offset: 2px; border-radius: 8px; }

/* ---- Shell -------------------------------------------------------- */
.app-shell {
  max-width: 460px; margin: 0 auto; height: 100dvh;
  display: flex; flex-direction: column; position: relative;
  background: var(--surface); box-shadow: var(--shadow); overflow: hidden;
}
.screen { flex: 1; min-height: 0; position: relative; }
.tab-panel { position: absolute; inset: 0; display: none; flex-direction: column; min-height: 0; }
.tab-panel.active { display: flex; animation: pop .3s cubic-bezier(.2,.8,.2,1) both; }

/* ---- Fields ------------------------------------------------------- */
input, select, textarea {
  font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink); background: var(--surface-2);
  border: 2px solid var(--line); border-radius: 16px; padding: 13px 15px; width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--ink-soft); font-weight: 600; }
input:focus, select:focus, textarea:focus { border-color: var(--royal); outline: none; }
textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
select { appearance: none; background-image: none; cursor: pointer; }

/* chunky pressable button (estilo app de jogo/aula) */
.tab-panel button:not(.row):not(.chip):not(.mic-btn):not(.linkrow):not(.ghost):not(.orb):not(.tab),
.wide-btn {
  font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: .01em;
  color: var(--white); background: var(--accent); border: none; border-radius: 16px;
  padding: 13px 20px; cursor: pointer; box-shadow: 0 4px 0 var(--accent-deep);
  transition: transform .06s ease, box-shadow .06s ease;
}
.tab-panel button:not(.row):not(.mic-btn):not(.ghost):not(.orb):not(.tab):active,
.wide-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-deep); }
.tab-panel button.ghost { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--royal);
  background: var(--surface-2); border: 2px solid var(--line); border-radius: 16px; padding: 12px 18px; cursor: pointer; box-shadow: none; }
.wide-btn { width: 100%; margin-top: 12px; }

.eyebrow { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); font-weight: 800; margin: 0 0 6px; font-family: var(--sans); }
.pad { padding: 16px 20px; }
.scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.scroll::-webkit-scrollbar { width: 0; }

/* ---- HOME HEADER — bloco azul flag com estrelas -------------------- */
.app-head {
  flex: none; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #123C7A 0%, var(--blue) 55%, #08214A 100%);
  color: var(--white); padding: 20px 22px 22px;
  border-radius: 0 0 26px 26px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.app-head::before { /* faixa vermelha inferior (stripe) */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: repeating-linear-gradient(90deg, var(--red) 0 26px, #fff 26px 52px);
  opacity: .9;
}
.app-head .head-stars { position: absolute; top: 12px; right: 16px; color: rgba(255,255,255,.35); font-size: 13px; letter-spacing: 3px; user-select: none; }
.app-head .kicker { margin: 0 0 4px; font-family: var(--sans); font-weight: 800; font-size: 12px; letter-spacing: .03em; color: #BFD3F2; text-transform: uppercase; }
.app-head .greet { font-family: var(--display); font-weight: 700; font-size: 28px; margin: 0; color: var(--white); line-height: 1.05; }
.app-head .sub { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: #C9D9F2; }
.streak { flex: none; z-index: 1; display: inline-flex; align-items: center; gap: 5px; background: var(--red);
  color: #fff; border-radius: 999px; padding: 8px 13px; font-family: var(--display); font-weight: 600; font-size: 15px;
  box-shadow: 0 4px 0 var(--red-deep); }
.streak .flame { font-size: 15px; }
.streak svg { display: none; }

/* ---- Chat --------------------------------------------------------- */
.thread { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 14px; }
.msg { max-width: 85%; font-size: 15px; font-weight: 600; line-height: 1.45; padding: 12px 15px; border-radius: 20px; animation: pop .35s cubic-bezier(.2,.8,.2,1) both; word-wrap: break-word; }
.msg.mentor, .msg.assistant, .msg.bot { align-self: flex-start; background: var(--mentor-bg); color: var(--mentor-ink); border-bottom-left-radius: 7px; }
.msg.me, .msg.user { align-self: flex-end; background: var(--user-bg); color: var(--user-ink); border-bottom-right-radius: 7px; box-shadow: 0 4px 0 rgba(10,49,97,.18); }
.msg .tip, .msg small { display: block; margin-top: 5px; font-size: 12px; font-weight: 700; opacity: .8; }

/* onboarding pop card */
.onboarding-card { margin: 12px 16px 0; background: var(--surface); border: 2px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: 0 6px 0 var(--surface-2); }
.onboarding-card h3 { font-family: var(--display); font-weight: 600; font-size: 20px; margin: 0 0 6px; color: var(--ink); }
.onboarding-card p { margin: 0 0 12px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.5; }
.onboarding-options { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.assessment-box { margin-top: 14px; padding: 14px; border-radius: 16px; background: var(--surface-2); border: 2px solid var(--line); font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.chat-voice-hint { text-align: center; font-size: 13px; font-weight: 800; color: var(--accent-ink); padding: 4px 0; }

/* composer */
.chat-form { flex: none; display: flex; gap: 10px; align-items: center; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 2px solid var(--line); background: var(--surface); }
.chat-form input { flex: 1; border-radius: 999px; }
.mic-btn { flex: none; width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 0 var(--accent-deep); transition: transform .06s ease, box-shadow .06s ease; }
.mic-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-deep); }
.mic-btn svg { width: 23px; height: 23px; }
.mic-btn.active { background: var(--flame); box-shadow: 0 4px 0 #C96A00; }
.send-btn { flex: none; }

/* ---- Rows (Praticar / Você) --------------------------------------- */
.list { display: flex; flex-direction: column; gap: 10px; padding: 8px 16px 24px; }
.sec-label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); font-weight: 800; margin: 16px 4px 2px; }
.row { display: flex; align-items: center; gap: 14px; padding: 15px 16px; background: var(--surface); border: 2px solid var(--line); border-radius: 18px; width: 100%; text-align: left; cursor: pointer; color: inherit; box-shadow: 0 4px 0 var(--surface-2); transition: transform .06s ease, box-shadow .06s ease; }
.row:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--surface-2); }
.row .ic { flex: none; width: 40px; height: 40px; border-radius: 13px; background: var(--surface-2); display: grid; place-items: center; }
.row .ic svg { width: 20px; height: 20px; color: var(--royal); }
.row .rt { flex: 1; min-width: 0; }
.row .rt strong { display: block; font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink); }
.row .rt span { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-top: 1px; }
.row .chev { flex: none; color: var(--accent); font-size: 22px; font-weight: 800; }

.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px 2px 4px; }
.metrics article { background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 13px; box-shadow: 0 4px 0 var(--surface-2); }
.metrics span { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--ink-soft); }
.metrics strong { display: block; margin-top: 4px; font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--red); }
.daily-report { background: var(--surface-2); border: 2px solid var(--line); border-radius: 16px; padding: 14px; font-size: 13.5px; font-weight: 700; line-height: 1.5; color: var(--ink-soft); margin-top: 12px; }

.pronunciation-card { background: var(--surface); border: 2px solid var(--line); border-radius: var(--r); padding: 16px; margin-top: 12px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 5px 0 var(--surface-2); }
.pronunciation-card > div > span { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--accent-ink); }
.pronunciation-card strong { display: block; margin-top: 3px; font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink); }
.pronunciation-actions { display: flex; gap: 10px; }
.pronunciation-actions button { flex: 1; }
.pronunciation-result { font-size: 13px; font-weight: 700; color: var(--ink-soft); }

/* section heads */
.mode-heading, .workspace-header, .guided-header, .quickstart-copy { flex: none; padding: 18px 20px 6px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.mode-heading h3, .panel-title { font-family: var(--display); font-weight: 600; font-size: 24px; margin: 0; color: var(--ink); }
.lesson-steps { display: flex; flex-direction: column; gap: 10px; padding: 6px 20px; }
.lesson-steps .step, .lesson-step { background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 14px; font-size: 14px; font-weight: 700; line-height: 1.5; box-shadow: 0 4px 0 var(--surface-2); }
.lesson-card, .voice-card, .share-card, .profile-card, .lesson-panel { padding: 6px 20px 20px; display: flex; flex-direction: column; gap: 12px; }

.visual-card { margin: 6px 20px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--r); padding: 18px; text-align: center; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 6px 0 var(--surface-2); font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--ink); }
.visual-card img { max-width: 100%; border-radius: 14px; }
.visual-actions, .share-actions, .repeat-form { display: flex; gap: 10px; padding: 6px 20px; }
.repeat-form input { flex: 1; }
.feedback { padding: 6px 20px; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }

.progress-grid { display: flex; flex-direction: column; gap: 12px; padding: 6px 20px 20px; }
.progress-grid article { background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 14px; box-shadow: 0 4px 0 var(--surface-2); }
.progress-grid span { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); font-weight: 800; }
.progress-grid > article > div { margin-top: 8px; font-size: 13.5px; font-weight: 700; line-height: 1.6; }
.full-report { margin: 14px 20px 0; }

.plans-list { display: flex; flex-direction: column; gap: 10px; }
.plans-list article, .plan { background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 14px; font-weight: 700; box-shadow: 0 4px 0 var(--surface-2); }
.checkout-form, .share-actions, .profile-strip, .tutor-controls { display: flex; flex-direction: column; gap: 10px; }
.share-card h3, .profile-card h3, .tutor-card h3 { font-family: var(--display); font-weight: 600; font-size: 22px; margin: 0; color: var(--ink); }
.share-card p, .profile-card p, .tutor-card p { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.5; margin: 0; }
.tutor-card { background: var(--surface); border: 2px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 5px 0 var(--surface-2); }
.tutor-controls label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.personality-preview { font-size: 13px; font-weight: 700; color: var(--ink-soft); line-height: 1.5; background: var(--surface-2); border: 2px solid var(--line); border-radius: 14px; padding: 12px; }
.students-table { font-size: 12.5px; font-weight: 700; overflow-x: auto; }
.students-table table { width: 100%; border-collapse: collapse; }
.students-table td, .students-table th { padding: 8px; border-bottom: 2px solid var(--line); text-align: left; }
.share-link { display: inline-block; text-align: center; padding: 13px; border-radius: 16px; background: var(--royal); color: #fff !important; font-family: var(--display); font-weight: 600; text-decoration: none; box-shadow: 0 4px 0 #123C7A; }
.panel-close-btn { align-self: flex-start; background: none !important; color: var(--accent-ink) !important; padding: 6px 0 !important; font-weight: 800 !important; box-shadow: none !important; font-family: var(--sans) !important; }

.you-top { flex: none; background: linear-gradient(135deg, #123C7A 0%, var(--blue) 60%, #08214A 100%); color: #fff; padding: 22px 22px 24px; border-radius: 0 0 26px 26px; position: relative; overflow: hidden; }
.you-top::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: repeating-linear-gradient(90deg, var(--red) 0 26px, #fff 26px 52px); }
.you-top .name { font-family: var(--display); font-weight: 700; font-size: 28px; margin: 0; color: #fff; }
.you-top .plan { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 800; color: #C9D9F2; }
.you-top .plan i { width: 8px; height: 8px; border-radius: 50%; background: #46D17A; }
.install-btn { position: static; }

/* ---- Voice orb (navy flag + orb vermelho) ------------------------- */
#voicePanel { background: radial-gradient(130% 75% at 50% 22%, #10336E 0%, #0A2450 46%, #051230 100%); color: #EAF1FB; }
.voice-top { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px 0; flex: none; }
.voice-top button { background: none !important; border: none; color: rgba(234,241,251,.8) !important; font-family: var(--display) !important; font-weight: 600 !important; font-size: 14px; cursor: pointer; padding: 6px 0 !important; display: inline-flex; gap: 6px; align-items: center; box-shadow: none !important; }
.voice-top button svg { width: 17px; height: 17px; }
.voice-brand { font-family: var(--display); font-weight: 600; font-size: 14px; color: rgba(234,241,251,.85); }
.orb-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 10px 20px; }
.orb { position: relative; width: 200px; height: 200px; display: grid; place-items: center; border: none; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease; }
.orb:active { transform: scale(.96); }
.orb .ring { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 60%, transparent) 0%, transparent 66%); animation: breathe 4.4s ease-in-out infinite; }
.orb .ring.r2 { animation-delay: -1.3s; opacity: .7; }
.orb .ring.r3 { animation-delay: -2.6s; opacity: .5; }
.orb .core { width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #FF6B7E, var(--accent) 60%, var(--accent-deep)); box-shadow: 0 0 64px -2px color-mix(in srgb, var(--accent) 80%, transparent); }
#voicePanel.recording .orb .ring { animation-duration: 1.7s; }
#voicePanel.recording .orb .core { animation: corepulse 1.1s ease-in-out infinite; }
.voice-caption { font-family: var(--display); font-weight: 600; font-size: 25px; text-align: center; max-width: 300px; line-height: 1.2; min-height: 60px; color: #fff; }
.voice-status { font-size: 14px; font-weight: 800; color: rgba(234,241,251,.75); text-align: center; }
.voice-actions { display: flex; flex-direction: column; gap: 14px; align-items: center; padding: 0 20px 30px; flex: none; }

/* ---- Botão PUSH-TO-TALK: grande e muito visível ------------------- */
#voicePanel .orb { cursor: default; }
#voicePanel .ptt {
  width: 92%; max-width: 340px; min-height: 86px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--display); font-weight: 600; font-size: 21px;
  color: #fff; background: var(--accent); border: none; border-radius: 26px;
  cursor: pointer; box-shadow: 0 6px 0 var(--accent-deep), 0 16px 34px -12px rgba(228,0,43,.75);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; touch-action: none;
  transition: transform .06s ease, box-shadow .06s ease, background .12s ease;
}
#voicePanel .ptt svg { width: 30px; height: 30px; }
/* NÃO mover o botão ao apertar: se ele sai de baixo do dedo, o "soltar" se perde. */
#voicePanel .ptt:active { transform: none; filter: brightness(1.08); }
/* gravando: fica verde e "respira" — feedback visual junto do bipe */
/* Gravando: só muda COR/sombra — nada que altere layout ou posição do botão. */
#voicePanel.recording .ptt { background: #12A150; box-shadow: 0 6px 0 #0B7038, 0 0 0 8px rgba(18,161,80,.22); }
/* botão secundário (ouvir a aula) sobre o fundo navy */
#voicePanel #playLessonBtn {
  background: rgba(255,255,255,.13); color: #fff; border: 2px solid rgba(255,255,255,.28);
  font-family: var(--display); font-weight: 600; font-size: 15px; border-radius: 16px; padding: 12px 20px; box-shadow: none;
}
#voicePanel #playLessonBtn:disabled { opacity: .5; }
.realtime-log { font-size: 12.5px; font-weight: 700; color: rgba(234,241,251,.6); text-align: center; line-height: 1.5; max-height: 0; overflow: hidden; transition: max-height .35s ease; padding: 0 10px; }
#voicePanel.show-log .realtime-log { max-height: 240px; overflow-y: auto; }

/* ---- Bottom nav (3) — pop ----------------------------------------- */
.bottom-nav { flex: none; display: flex; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 2px solid var(--line); background: var(--surface); }
.bottom-nav-item { flex: 1; background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px; color: var(--ink-soft); font-family: var(--display); font-size: 12px; font-weight: 600; border-radius: 14px; }
.bottom-nav-item svg { width: 24px; height: 24px; }
.bottom-nav-item.active { color: var(--accent); }
.bottom-nav-item.active svg { transform: scale(1.06); }
/* NÃO esconder a nav durante a gravação: ela sumindo empurrava o botão ~76px
   para baixo, saindo de debaixo do dedo do usuário no meio do push-to-talk. */

@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes breathe { 0%,100% { transform: scale(.82); } 50% { transform: scale(1.07); } }
@keyframes corepulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }
@media (min-width: 480px) { .app-shell { height: 94dvh; margin: 3dvh auto; border-radius: 30px; border: 2px solid var(--line); } }