/*
 * IA Fluency — Estilos base (tema escuro, estilo app de mensagens).
 *
 * Tarefa 11.1: layout principal + estilos das bolhas de mensagem e player de
 * áudio. As tarefas seguintes (cartão de feedback, tradução, imagem) irão
 * reutilizar estas variáveis e adicionar seus próprios blocos.
 *
 * Convenção de nomes: BEM leve (bloco__elemento--modificador).
 */

/* ---------------------------------------------------------------------------
 * Tokens de design (tema escuro)
 * ------------------------------------------------------------------------- */
:root {
  /* Grafite elegante: profundo, sóbrio e com contraste confortável. */
  --cor-fundo: #0d1016;
  --cor-fundo-chat: #151923;
  --cor-header: #1a1f2b;
  --cor-composer: #1a1f2b;

  /* Bolhas */
  --cor-bolha-usuario: #343b4b;
  --cor-bolha-sistema: #232936;

  /* Texto */
  --cor-texto: #f0f1f3;
  --cor-texto-suave: #a0a5af;
  --cor-texto-titulo: #ffffff;

  /* Acentos */
  --cor-acento: #c7d2e5;
  --cor-acento-claro: #eef3fb;
  --cor-erro: #d98289;

  /* Estrutura */
  --raio-bolha: 12px;
  --raio-controle: 24px;
  --sombra-bolha: 0 1px 1px rgba(0, 0, 0, 0.25);
  --largura-max-conteudo: 820px;
  --altura-header: 60px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --fonte-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
 * Reset básico
 * ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--fonte-base);
  color: var(--cor-texto);
  background: radial-gradient(circle at top, #282c33 0, var(--cor-fundo) 42%);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* ---------------------------------------------------------------------------
 * Estrutura do app: header / chat / composer em coluna, ocupando a tela
 * ------------------------------------------------------------------------- */
.app {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 100dvh;
  max-width: var(--largura-max-conteudo);
  margin: 0 auto;
  background: linear-gradient(145deg, #1b1e23, var(--cor-fundo-chat));
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.28);
}

/* Cabeçalho fixo no topo */
.app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--altura-header);
  padding: max(8px, var(--safe-top)) calc(16px + var(--safe-right)) 8px
    calc(16px + var(--safe-left));
  background-color: var(--cor-header);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex: 0 0 auto;
}

.app-header__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--cor-acento);
  color: #04231c;
  font-weight: 700;
  font-size: 0.9rem;
}

.app-header__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--cor-texto-titulo);
}

.app-header__subtitle {
  font-size: 0.78rem;
  color: var(--cor-texto-suave);
}

/* Empurra a ação do cabeçalho para a direita */
.app-header__info {
  flex: 1 1 auto;
}

/* Botão "Teste de Nível" — fixo no cabeçalho, inicia o teste de nivelamento. */
.app-header__botao-teste {
  flex: 0 0 auto;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-family: inherit;
  font-weight: 600;
  color: #04231c;
  background-color: var(--cor-acento);
  border: none;
  border-radius: var(--raio-controle);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.app-header__botao-teste:hover {
  background-color: var(--cor-acento-claro);
}

.app-header__botao-teste:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Estado "em andamento": mostra o progresso (turno atual/total) com destaque
 * âmbar, deixando claro que o teste está de fato rodando (Requisito de UX). */
.app-header__botao-teste--ativo {
  background-color: #f2c744;
  color: #1d2a32;
}

.app-header__botao-teste--ativo:hover {
  background-color: #f7d878;
}

/* Balão de primeiro acesso apontando para o teste de nível. */
.convite-teste-nivel {
  position: fixed;
  z-index: 35;
  top: calc(66px + var(--safe-top));
  right: calc(58px + var(--safe-right));
  width: min(286px, calc(100vw - 32px));
  padding: 8px 34px 8px 8px;
  border: 1px solid rgba(139, 168, 184, 0.3);
  border-radius: 18px;
  background: linear-gradient(145deg, #25323c, #1c2730);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
  animation: convite-entrar 0.32s ease-out;
}

.convite-teste-nivel[hidden] { display: none; }

.convite-teste-nivel::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 74px;
  width: 16px;
  height: 16px;
  border-left: 1px solid rgba(139, 168, 184, 0.3);
  border-top: 1px solid rgba(139, 168, 184, 0.3);
  background: #23313a;
  transform: rotate(45deg);
}

.convite-teste-nivel__acao {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 4px;
  border: 0;
  color: var(--cor-texto);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.convite-teste-nivel__acao strong,
.convite-teste-nivel__acao small { display: block; }

.convite-teste-nivel__acao strong { font-size: 0.88rem; }
.convite-teste-nivel__acao small {
  margin-top: 3px;
  color: var(--cor-texto-suave);
  font-size: 0.76rem;
  line-height: 1.3;
}

.convite-teste-nivel__icone {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #dce9ee;
  background: rgba(123, 151, 166, 0.2);
}

.convite-teste-nivel__fechar {
  position: absolute;
  z-index: 1;
  top: 6px;
  right: 8px;
  border: 0;
  color: var(--cor-texto-suave);
  background: transparent;
  font-size: 1.15rem;
  cursor: pointer;
}

@keyframes convite-entrar {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------------------------------------------------------------------------
 * Modal do Teste de Nível (subsistema dedicado, separado do chat)
 * ------------------------------------------------------------------------- */
.modal-teste-nivel {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background-color: rgba(5, 8, 14, 0.58);
  backdrop-filter: blur(14px) saturate(0.7);
  -webkit-backdrop-filter: blur(14px) saturate(0.7);
  padding: calc(16px + var(--safe-top)) calc(16px + var(--safe-right))
    calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left));
}

.modal-teste-nivel__painel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(700px, 100%);
  max-height: 94vh;
  overflow-y: auto;
  padding: 24px;
  border-radius: 20px;
  background: linear-gradient(155deg, #242b3a, #171c27);
  border: 1px solid rgba(199, 210, 229, 0.2);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58);
}

.modal-teste-nivel__cabecalho {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-teste-nivel__titulo-bloco {
  flex: 1 1 auto;
}

.modal-teste-nivel__titulo {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cor-texto-titulo);
}

.modal-teste-nivel__etapa {
  font-size: 0.8rem;
  color: var(--cor-acento-claro);
  font-weight: 600;
}

.modal-teste-nivel__finalizar {
  flex: 0 0 auto;
  padding: 6px 12px;
  font-size: 0.76rem;
  font-family: inherit;
  color: var(--cor-texto-suave);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--raio-controle);
  cursor: pointer;
}

.modal-teste-nivel__finalizar:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--cor-texto);
}

.modal-teste-nivel__fechar {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
}

.modal-teste-nivel__fechar:hover {
  color: var(--cor-texto);
}

.modal-teste-nivel__progresso {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-teste-nivel__barra {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.modal-teste-nivel__barra-preenchimento {
  height: 100%;
  width: 0%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--cor-acento), var(--cor-acento-claro));
  transition: width 0.3s ease;
}

.modal-teste-nivel__progresso-texto {
  flex: 0 0 auto;
  font-size: 0.76rem;
  color: var(--cor-texto-suave);
}

.modal-teste-nivel__corpo {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal-teste-nivel__carregando,
.modal-teste-nivel__erro {
  text-align: center;
  padding: 20px 0;
  color: var(--cor-texto-suave);
}

.modal-teste-nivel__erro {
  color: #ffb3bb;
}

/* Atividade atual (texto/imagem/áudio) */
.teste-nivel-atividade__enunciado {
  font-size: 1rem;
  font-weight: 600;
}

.teste-nivel-atividade__traducao {
  font-size: 0.86rem;
  color: var(--cor-texto-suave);
}

.teste-nivel-atividade__imagem {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.teste-nivel-atividade__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.teste-nivel-atividade__opcoes {
  display: grid;
  gap: 9px;
}

.teste-nivel-atividade__opcao {
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: #292c32;
  color: var(--cor-texto);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.teste-nivel-atividade__opcao.is-selecionada {
  border-color: #f0f1f3;
  background: rgba(255, 255, 255, 0.16);
}

.teste-nivel-atividade__lacuna {
  min-height: 48px;
}

.teste-nivel-atividade__campo {
  resize: vertical;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--cor-texto);
  background-color: #2a303d;
  border: none;
  border-radius: 10px;
  outline: none;
}

.teste-nivel-atividade__enviar {
  align-self: flex-end;
  padding: 8px 18px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #04231c;
  background-color: var(--cor-acento);
  border: none;
  border-radius: var(--raio-controle);
  cursor: pointer;
}

.teste-nivel-atividade__enviar:hover {
  background-color: var(--cor-acento-claro);
}

.teste-nivel-atividade__enviar:disabled {
  opacity: 0.6;
  cursor: progress;
}

.teste-nivel-atividade__aviso-audio {
  font-size: 0.86rem;
  color: var(--cor-texto-suave);
  font-style: italic;
}

.teste-nivel-atividade__player {
  width: 100%;
}

.teste-nivel-atividade__gravar {
  align-self: flex-start;
  padding: 8px 16px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #04231c;
  background-color: var(--cor-acento);
  border: none;
  border-radius: var(--raio-controle);
  cursor: pointer;
}

.teste-nivel-atividade__gravar:hover {
  background-color: var(--cor-acento-claro);
}

.teste-nivel-atividade__gravar:disabled {
  opacity: 0.6;
  cursor: progress;
}

.teste-nivel-atividade__status-gravacao {
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
}

.teste-nivel-atividade__erro {
  font-size: 0.82rem;
  color: #ffb3bb;
}

/* Tela de resultado final */
.teste-nivel-resultado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.teste-nivel-resultado__selo {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: 800;
  color: #04231c;
  background: linear-gradient(160deg, var(--cor-acento), var(--cor-acento-claro));
}

.teste-nivel-resultado__resumo {
  font-size: 0.92rem;
  color: var(--cor-texto);
  line-height: 1.5;
}

.teste-nivel-resultado__aviso-avancado {
  font-size: 0.86rem;
  color: #f2c744;
  background-color: rgba(242, 199, 68, 0.12);
  padding: 10px 14px;
  border-radius: 10px;
}

.teste-nivel-resultado__secoes {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  width: 100%;
}

.teste-nivel-resultado__secoes h3 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  margin-bottom: 6px;
}

.teste-nivel-resultado__secoes ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  font-size: 0.85rem;
}

.teste-nivel-resultado__secoes li {
  padding-left: 10px;
  border-left: 2px solid rgba(0, 168, 132, 0.4);
}

.teste-nivel-resultado__fechar {
  padding: 8px 24px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #04231c;
  background-color: var(--cor-acento);
  border: none;
  border-radius: var(--raio-controle);
  cursor: pointer;
}

.teste-nivel-resultado__fechar:hover {
  background-color: var(--cor-acento-claro);
}

/* Botão que abre/fecha o card lateral de nível (Perfil_Aprendiz). */
.app-header__botao-perfil {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  color: var(--cor-texto-suave);
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.app-header__botao-perfil:hover,
.app-header__botao-perfil[aria-expanded="true"] {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--cor-texto);
}

/* ---------------------------------------------------------------------------
 * Card lateral do Perfil_Aprendiz (nível CEFR, pontos fortes/fracos)
 * Editado exclusivamente pela IA; sobreposto como painel flutuante à direita.
 * ------------------------------------------------------------------------- */
.perfil-lateral {
  position: absolute;
  top: calc(var(--altura-header) + 8px);
  right: 12px;
  z-index: 20;
  width: min(280px, calc(100% - 24px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: var(--raio-bolha);
  background: linear-gradient(160deg, #1d2a32, #182229);
  border: 1px solid rgba(0, 168, 132, 0.25);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.perfil-lateral__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.perfil-lateral__titulo {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cor-texto-titulo);
}

.perfil-lateral__fechar {
  border: none;
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}

.perfil-lateral__fechar:hover {
  color: var(--cor-texto);
}

.perfil-lateral__nivel {
  display: flex;
  align-items: center;
  gap: 10px;
}

.perfil-lateral__nivel-selo {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 6px;
  border-radius: 50%;
  font-size: 1.05rem;
  font-weight: 700;
  color: #04231c;
  background: linear-gradient(160deg, var(--cor-acento), var(--cor-acento-claro));
}

.perfil-lateral__nivel-legenda {
  font-size: 0.74rem;
  color: var(--cor-texto-suave);
}

.perfil-lateral__teste {
  padding: 6px 10px;
  font-size: 0.76rem;
  color: #f2c744;
  background-color: rgba(242, 199, 68, 0.12);
  border-radius: 8px;
}

.perfil-lateral__secao-titulo {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  margin-bottom: 4px;
}

.perfil-lateral__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
}

.perfil-lateral__lista:empty::after {
  content: "Ainda sem dados suficientes.";
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
  font-style: italic;
}

.perfil-lateral__lista li {
  padding-left: 10px;
  border-left: 2px solid rgba(0, 168, 132, 0.4);
}

/* ---------------------------------------------------------------------------
 * Área de chat com scroll
 * ------------------------------------------------------------------------- */
.chat {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px calc(16px + var(--safe-right)) 20px calc(16px + var(--safe-left));
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* leve textura de gradiente para dar profundidade ao fundo escuro */
  background-image: radial-gradient(
    circle at 50% 0%,
    rgba(0, 168, 132, 0.05),
    transparent 60%
  );
  scroll-behavior: smooth;
}

/* Barra de rolagem discreta */
.chat::-webkit-scrollbar {
  width: 8px;
}
.chat::-webkit-scrollbar-thumb {
  background-color: rgba(134, 150, 160, 0.35);
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
 * Bolha de mensagem (componente base — texto + timestamp)
 * ------------------------------------------------------------------------- */
.bolha {
  position: relative;
  max-width: 78%;
  padding: 8px 12px 6px;
  border-radius: var(--raio-bolha);
  box-shadow: var(--sombra-bolha);
  word-wrap: break-word;
  overflow-wrap: anywhere;
  animation: bolha-entra 0.18s ease-out;
}

/* Mensagem do usuário: alinhada à direita, verde */
.bolha--usuario {
  align-self: flex-end;
  background-color: var(--cor-bolha-usuario);
  border-bottom-right-radius: 4px;
}

/* Mensagem do sistema/tutor: alinhada à esquerda, cinza */
.bolha--sistema {
  align-self: flex-start;
  background-color: var(--cor-bolha-sistema);
  border-bottom-left-radius: 4px;
}

.bolha__texto {
  font-size: 0.95rem;
  white-space: pre-wrap;
}

/* Timestamp exibido no canto inferior da bolha (Requisito 7.8) */
.bolha__hora {
  display: block;
  margin-top: 2px;
  text-align: right;
  font-size: 0.68rem;
  color: var(--cor-texto-suave);
  user-select: none;
}

@keyframes bolha-entra {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------------------------
 * Player de voz compacto (mensagem de áudio estilo WhatsApp/BeConfident)
 * Substitui o widget nativo <audio controls>, que tinha aparência de painel.
 * ------------------------------------------------------------------------- */
.voice-player {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 320px;
}

/* Card de mensagem de voz estilo WhatsApp: única "bolha" visual permitida na
 * resposta do Tutor — o áudio é a mensagem em si, então mantém a aparência de
 * card; o texto/tradução revelados pelo botão "Ver" continuam soltos, sem card. */
.voice-player--card {
  padding: 8px 12px;
  border-radius: var(--raio-bolha);
  background-color: var(--cor-bolha-sistema);
  border-bottom-left-radius: 4px;
  box-shadow: var(--sombra-bolha);
  align-self: flex-start;
  max-width: 320px;
}

.voice-player__play {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background-color: var(--cor-acento);
  color: #04231c;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.voice-player__play:hover {
  background-color: var(--cor-acento-claro);
}

.voice-player__play:active {
  transform: scale(0.94);
}

.voice-player__conteudo {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.voice-player__barra {
  flex: 1 1 auto;
  display: block;
  width: 100%;
  padding: 8px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}

.voice-player__trilha {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.14);
  overflow: visible;
}

.voice-player__preenchimento {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background-color: var(--cor-acento-claro);
  transition: width 0.15s linear;
}

.voice-player__polegar {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--cor-acento-claro);
  box-shadow: 0 0 0 3px rgba(6, 207, 156, 0.16);
  transform: translate(-50%, -50%);
}

.voice-player__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.voice-player__tempo {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: var(--cor-texto-suave);
  min-width: 76px;
  text-align: left;
}

.voice-player__audio-oculto {
  display: none;
}

.voice-player__velocidades {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.voice-player__velocidade {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--cor-texto-suave);
  font-size: 0.68rem;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}

.voice-player__velocidade:hover {
  color: var(--cor-texto);
  background-color: rgba(255, 255, 255, 0.12);
}

.voice-player__velocidade.is-ativo {
  color: #04231c;
  background-color: var(--cor-acento-claro);
  border-color: transparent;
}

/* Botão único "Ver": revela o mini-card bilíngue (EN + PT) de uma resposta do
 * Tutor. Substitui os antigos botões separados "Ver mensagem"/"Ver tradução". */
.botao-ver {
  align-self: flex-start;
  padding: 3px 10px;
  font-size: 0.74rem;
  font-family: inherit;
  color: var(--cor-texto-suave);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--raio-controle);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.botao-ver:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--cor-texto);
}

.botao-ver:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Mini-card bilíngue revelado pelo botão "Ver": EN e PT em blocos distintos,
 * sem aparência de card "pesado" — apenas separação visual leve. */
.mini-card-bilingue {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}

.mini-card-bilingue__idioma {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mini-card-bilingue__rotulo {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.mini-card-bilingue__idioma--en .mini-card-bilingue__rotulo {
  color: var(--cor-acento-claro);
}

.mini-card-bilingue__texto {
  font-size: 0.9rem;
  white-space: pre-wrap;
}

/* ---------------------------------------------------------------------------
 * Indicador de status do Turno (gancho para 11.4)
 * ------------------------------------------------------------------------- */
.turno-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 0.82rem;
  color: var(--cor-texto-suave);
  background-color: var(--cor-fundo-chat);
  flex: 0 0 auto;
}

.turno-status__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(134, 150, 160, 0.35);
  border-top-color: var(--cor-acento-claro);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

/* ---------------------------------------------------------------------------
 * Barra de entrada (composer) fixa embaixo
 * ------------------------------------------------------------------------- */
.composer {
  flex: 0 0 auto;
  padding: 10px calc(12px + var(--safe-right))
    calc(10px + var(--safe-bottom)) calc(12px + var(--safe-left));
  background-color: var(--cor-composer);
  border-top: 1px solid rgba(0, 0, 0, 0.3);
}

.composer__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}

.composer__campo {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  resize: none;
  max-height: 120px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--cor-texto);
  background-color: #2a3942;
  border: none;
  border-radius: var(--raio-controle);
  outline: none;
}

.composer__campo::placeholder {
  color: var(--cor-texto-suave);
}

.composer__campo:focus {
  box-shadow: 0 0 0 2px rgba(0, 168, 132, 0.4);
}

.composer__gravacao-status {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: var(--raio-controle);
  background: #262c38;
  color: var(--cor-texto-suave);
  font-size: 0.76rem;
  overflow: hidden;
}

.composer__gravacao-status[hidden] {
  display: none;
}

.composer__gravacao-status strong {
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums;
}

.composer__gravacao-ponto {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #ef6c78;
  animation: pulsar-gravacao 1s ease-in-out infinite;
}

@keyframes pulsar-gravacao {
  50% { opacity: 0.35; }
}

.composer__campo[aria-invalid="true"] {
  box-shadow: 0 0 0 2px rgba(241, 92, 109, 0.55);
}

.composer__erro {
  order: 3;
  flex-basis: 100%;
  margin: 0 52px;
  color: #ffb3bb;
  font-size: 0.78rem;
}

.composer__botao {
  order: 2;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  color: var(--cor-texto);
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.composer__botao[hidden] {
  display: none;
}

.composer__botao:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.composer__botao:active {
  transform: scale(0.94);
}

.composer__botao--enviar {
  background-color: var(--cor-acento);
  color: #04231c;
}

.composer__botao--enviar:hover {
  background-color: var(--cor-acento-claro);
}

/* Estado de gravação ativo (gancho para 11.2) */
.composer__botao--gravar.is-gravando {
  background-color: var(--cor-erro);
  color: #fff;
  animation: pulsar 1.2s ease-in-out infinite;
}

@keyframes pulsar {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(241, 92, 109, 0.5);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(241, 92, 109, 0);
  }
}

/* Estado desabilitado (usado enquanto o Turno processa — Requisito 7.6) */
.composer__botao:disabled,
.composer__campo:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
 * Resposta_Sistema: segmentos EN/PT visualmente distintos (tarefa 11.4)
 * Requisito 7.3 — cores/bordas diferentes por idioma.
 * ------------------------------------------------------------------------- */
/* Sem card: a resposta do Tutor flutua sobre o fundo, sem caixa nem sombra —
 * como uma narração de assistente pessoal, não como uma mensagem "empacotada".
 * Apenas a bolha do Usuário mantém o estilo de bolha de chat tradicional. */
.bolha--resposta {
  max-width: 84%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
  box-shadow: none;
  padding: 4px 0;
  border-radius: 0;
}

/* Sem caixa/card: o segmento é só um bloco de texto dentro da bolha comum,
 * exatamente como uma mensagem normal de chat (Requisito de UX do Usuário). */
.segmento {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.segmento__rotulo {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.segmento__texto {
  font-size: 0.95rem;
  white-space: pre-wrap;
}

/* Cursor de digitação enquanto o efeito de revelação progressiva ocorre. */
.segmento__texto.digitando::after {
  content: "▍";
  display: inline-block;
  margin-left: 2px;
  color: var(--cor-acento-claro);
  animation: cursor-pisca 0.9s steps(2) infinite;
}

@keyframes cursor-pisca {
  50% {
    opacity: 0;
  }
}

.segmento__sem-audio {
  font-size: 0.72rem;
  color: var(--cor-texto-suave);
  font-style: italic;
}

.segmento-traducao {
  margin-top: 2px;
}

/* ---------------------------------------------------------------------------
 * Cartao_Feedback (tarefa 11.5)
 * Cartão com seções distintas: nota (barra), comparação (erros destacados), dica.
 * ------------------------------------------------------------------------- */
.cartao {
  align-self: flex-start;
  max-width: 88%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: var(--raio-bolha);
  background: linear-gradient(160deg, #1d2a32, #182229);
  border: 1px solid rgba(0, 168, 132, 0.25);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  animation: bolha-entra 0.2s ease-out;
}

.cartao__cabecalho {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-acento-claro);
}

.cartao__secao {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Seção de nota — destaque com barra de progresso */
.cartao__nota-titulo {
  font-size: 1.05rem;
  color: var(--cor-texto);
}

.cartao__nota-titulo strong {
  font-size: 1.35rem;
  color: var(--cor-acento-claro);
}

.cartao__barra {
  width: 100%;
  height: 10px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.cartao__barra-preenchimento {
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s ease;
}

.cartao__barra-preenchimento--alta {
  background: linear-gradient(90deg, var(--cor-acento), var(--cor-acento-claro));
}

.cartao__barra-preenchimento--media {
  background: linear-gradient(90deg, #d9a406, #f2c744);
}

.cartao__barra-preenchimento--baixa {
  background: linear-gradient(90deg, #c0392b, var(--cor-erro));
}

/* Mensagem de "sem erros" (nota máxima) */
.cartao__sem-erros {
  padding: 8px 10px;
  font-size: 0.9rem;
  color: var(--cor-acento-claro);
  background-color: rgba(0, 168, 132, 0.12);
  border-radius: 8px;
}

/* Seção de comparação (original × corrigida) */
.cartao__linha {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.04);
}

.cartao__linha-rotulo {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-suave);
}

.cartao__linha-texto {
  font-size: 0.92rem;
  white-space: pre-wrap;
}

/* Trechos destacados: erro original (vermelho) × correção (verde) */
.erro-orig {
  color: #ffb3bb;
  background-color: rgba(241, 92, 109, 0.22);
  border-radius: 4px;
  padding: 0 3px;
  text-decoration: line-through;
  text-decoration-color: var(--cor-erro);
}

.erro-corr {
  color: #a8f0dc;
  background-color: rgba(0, 168, 132, 0.22);
  border-radius: 4px;
  padding: 0 3px;
  font-weight: 600;
}

/* Lista de explicações dos erros */
.cartao__erros {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.cartao__erro-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 10px;
  border-left: 2px solid rgba(0, 168, 132, 0.4);
}

.cartao__erro-par {
  font-size: 0.85rem;
}

.cartao__erro-seta {
  color: var(--cor-texto-suave);
}

.cartao__erro-explicacao {
  font-size: 0.82rem;
  color: var(--cor-texto-suave);
}

/* Seção de dica (em português) */
.cartao__dica {
  padding: 8px 10px;
  border-radius: 8px;
  background-color: rgba(242, 199, 68, 0.1);
  border-left: 3px solid #f2c744;
}

.cartao__dica-rotulo {
  font-size: 0.72rem;
  font-weight: 700;
  color: #f2c744;
}

.cartao__dica-texto {
  font-size: 0.9rem;
  margin-top: 2px;
}

/* ---------------------------------------------------------------------------
 * Exercicio_Imagem (tarefa 11.7)
 * ------------------------------------------------------------------------- */
.bolha--imagem {
  max-width: 84%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.imagem-exercicio {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.04);
}

.imagem-exercicio__img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}

/* Diagnóstico explícito: não cria placeholder nem simula uma cena ausente. */
.imagem-exercicio__erro {
  padding: 20px 16px;
  text-align: center;
  color: #ffb3bb;
  border: 1px solid rgba(241, 92, 109, 0.4);
  border-radius: 10px;
  font-size: 0.85rem;
}

.imagem-exercicio__instrucoes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.imagem-exercicio__instrucao {
  margin: 0;
}

/* ---------------------------------------------------------------------------
 * Bolhas especiais: transcrição e erro
 * ------------------------------------------------------------------------- */
.bolha--transcricao .bolha__texto {
  font-style: italic;
  color: var(--cor-texto-suave);
  font-size: 0.88rem;
}

.bolha--erro {
  align-self: center;
  max-width: 92%;
  background-color: rgba(241, 92, 109, 0.15);
  border: 1px solid rgba(241, 92, 109, 0.4);
  color: #ffd5da;
}

.bolha--erro .bolha__texto {
  font-size: 0.86rem;
}

.bolha--aviso {
  align-self: center;
  max-width: 92%;
  background-color: rgba(0, 168, 132, 0.12);
  border: 1px solid rgba(0, 168, 132, 0.35);
  color: #a8f0dc;
}

.bolha--aviso .bolha__texto {
  font-size: 0.86rem;
}

/* ---------------------------------------------------------------------------
 * Utilitário
 * ------------------------------------------------------------------------- */
[hidden] {
  display: none !important;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
 * Ajustes responsivos para celular
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --altura-header: 72px;
  }

  .app {
    max-width: none;
  }

  .app-header {
    gap: 8px;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .app-header__avatar {
    width: 34px;
    height: 34px;
    font-size: 0.82rem;
  }

  .app-header__info {
    min-width: 0;
  }

  .app-header__title {
    font-size: 0.96rem;
    line-height: 1.15;
  }

  .app-header__subtitle {
    font-size: 0.74rem;
    line-height: 1.2;
  }

  .app-header__botao-teste {
    order: 3;
    min-height: 36px;
    padding: 0 12px;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .app-header__botao-perfil {
    width: 34px;
    height: 34px;
  }

  .perfil-lateral {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: min(72dvh, 560px);
    border-radius: 16px 16px 0 0;
    padding-bottom: calc(18px + var(--safe-bottom));
  }

  .chat {
    padding-top: 14px;
    padding-bottom: 14px;
    gap: 8px;
  }

  .bolha,
  .bolha--resposta,
  .cartao,
  .bolha--imagem {
    max-width: 92%;
  }

  .bolha {
    padding: 8px 10px 6px;
  }

  .bolha__texto,
  .segmento__texto,
  .mini-card-bilingue__texto,
  .cartao__linha-texto,
  .cartao__dica-texto {
    font-size: 0.92rem;
  }

  .voice-player {
    max-width: 100%;
  }

  .voice-player--card {
    width: min(100%, 320px);
    max-width: 100%;
  }

  .voice-player__meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .voice-player__tempo {
    min-width: 0;
  }

  .voice-player__velocidades {
    justify-content: flex-start;
  }

  .cartao {
    padding: 12px;
    gap: 10px;
  }

  .cartao__nota-titulo {
    font-size: 0.98rem;
  }

  .cartao__nota-titulo strong {
    font-size: 1.2rem;
  }

  .turno-status {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 0.78rem;
  }

  .composer {
    padding-top: 8px;
  }

  .composer__form {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: end;
  }

  .composer__campo {
    width: 100%;
    max-height: 132px;
    padding: 11px 14px;
    font-size: 16px;
  }

  .composer__erro {
    grid-column: 1 / -1;
    margin: 0;
    padding: 2px 2px 0;
    font-size: 0.76rem;
  }

  .modal-teste-nivel {
    padding: 0;
    place-items: stretch;
    background-color: rgba(0, 0, 0, 0.78);
  }

  .modal-teste-nivel__painel {
    width: 100%;
    max-height: 100dvh;
    min-height: 100dvh;
    border-radius: 0;
    padding: calc(16px + var(--safe-top)) calc(14px + var(--safe-right))
      calc(16px + var(--safe-bottom)) calc(14px + var(--safe-left));
  }

  .modal-teste-nivel__cabecalho {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .modal-teste-nivel__titulo-bloco {
    min-width: 0;
  }

  .modal-teste-nivel__finalizar {
    order: 3;
    width: 100%;
    min-height: 40px;
  }

  .modal-teste-nivel__fechar {
    margin-left: auto;
  }

  .teste-nivel-atividade__imagem {
    max-height: 220px;
  }

  .teste-nivel-atividade__campo {
    font-size: 16px;
  }

  .teste-nivel-atividade__enviar,
  .teste-nivel-atividade__gravar,
  .teste-nivel-resultado__fechar {
    align-self: stretch;
    min-height: 42px;
  }

  .teste-nivel-resultado__secoes {
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
  }
}

/* Questões de alternativas inseridas pelo Tutor no fluxo normal do chat. */
.exercicio-selecao {
  align-self: flex-start;
  width: min(100%, 420px);
  margin: 2px 0 10px;
  padding: 12px;
  border: 1px solid rgba(37, 211, 102, 0.28);
  border-radius: 14px;
  background: rgba(18, 140, 126, 0.12);
}
.exercicio-selecao__titulo { margin: 0 0 8px; font-weight: 700; }
.exercicio-selecao__opcao {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.exercicio-selecao__opcao.is-selecionada { border-color: #25d366; background: rgba(37, 211, 102, 0.2); }
.exercicio-selecao__opcao:disabled { cursor: default; opacity: 0.72; }

.exercicio-estruturado {
  width: min(100%, 560px);
  margin: 8px 0 12px;
  padding: 14px;
  border: 1px solid rgba(145, 160, 178, 0.32);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(44, 50, 59, 0.98), rgba(31, 36, 43, 0.98));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}
.exercicio-estruturado__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.exercicio-estruturado__rotulo {
  color: #dce8ee;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.exercicio-estruturado__habilidade {
  padding: 4px 8px;
  border-radius: 999px;
  color: #b8c7cf;
  background: rgba(181, 199, 208, 0.1);
  font-size: 0.72rem;
}
.exercicio-estruturado__enunciado {
  margin: 0;
  color: #f4f7f8;
  font-weight: 700;
  line-height: 1.45;
}
.exercicio-estruturado__apoio,
.exercicio-estruturado__instrucao {
  margin: 7px 0 0;
  color: #aebbc2;
  font-size: 0.88rem;
  line-height: 1.4;
}
.exercicio-estruturado__opcoes {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.exercicio-estruturado__opcao {
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid rgba(174, 190, 201, 0.28);
  border-radius: 12px;
  color: #eef3f5;
  background: rgba(255, 255, 255, 0.045);
  text-align: left;
  cursor: pointer;
}
.exercicio-estruturado__opcao:hover:not(:disabled),
.exercicio-estruturado__opcao.is-selecionada {
  border-color: #8fb2b8;
  background: rgba(143, 178, 184, 0.16);
}
.exercicio-estruturado__opcao:disabled { cursor: default; opacity: 0.7; }

@media (max-width: 600px) {
  .app-header { gap: 8px; padding-inline: 12px; }
  .app-header__avatar { width: 36px; height: 36px; }
  .app-header__botao-teste { padding: 8px 10px; font-size: 0.72rem; }
  .chat { padding: 14px 12px; gap: 9px; }
  .bolha { max-width: 88%; padding: 10px 12px 7px; }
  .imagem-exercicio__img { max-height: 280px; }
  .exercicio-selecao { width: 100%; padding: 10px; }
  .exercicio-selecao__opcao { min-height: 46px; font-size: 0.94rem; }
  .teste-nivel-atividade__imagem { max-height: min(42vh, 330px); }
}

/* Acabamento do tema grafite: superfícies em camadas e destaques neutros. */
.chat {
  background:
    linear-gradient(rgba(23, 25, 29, 0.92), rgba(23, 25, 29, 0.98)),
    radial-gradient(circle at 20% 0%, #30343b 0, transparent 32%);
}
.bolha {
  border: 1px solid rgba(255, 255, 255, 0.055);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.bolha--usuario { border-color: rgba(255, 255, 255, 0.12); }
.modal-teste-nivel__barra-preenchimento,
.teste-nivel-resultado__selo,
.perfil-lateral__nivel-selo {
  background: linear-gradient(135deg, #d4d7dd, #ffffff);
}
.perfil-lateral,
.cartao,
.exercicio-selecao {
  background: linear-gradient(145deg, #292c32, #202228);
  border-color: rgba(255, 255, 255, 0.12);
}
.perfil-lateral__lista li { border-left-color: #b7bbc3; }
.composer__campo,
.teste-nivel-atividade__campo {
  background-color: #292c32;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.composer { box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.12); }
.exercicio-selecao__opcao.is-selecionada {
  border-color: #f0f1f3;
  background: rgba(255, 255, 255, 0.16);
}

@media (max-width: 420px) {
  .app-header {
    padding-left: calc(12px + var(--safe-left));
    padding-right: calc(12px + var(--safe-right));
  }

  .chat {
    padding-left: calc(10px + var(--safe-left));
    padding-right: calc(10px + var(--safe-right));
  }

  .composer {
    padding-left: calc(8px + var(--safe-left));
    padding-right: calc(8px + var(--safe-right));
  }

  .bolha,
  .bolha--resposta,
  .cartao,
  .bolha--imagem,
  .bolha--erro,
  .bolha--aviso {
    max-width: 96%;
  }

  .app-header__botao-teste {
    padding: 0 10px;
    font-size: 0.72rem;
  }

  .voice-player__tempo {
    min-width: 28px;
    font-size: 0.68rem;
  }

  .cartao__linha {
    padding: 6px;
  }
}

/* ---------------------------------------------------------------------------
 * Refinamento visual — conversa e teste de nível
 * Superfícies em grafite, hierarquia mais clara e controles confortáveis no
 * celular. Mantido propositalmente sem cores chamativas.
 * ------------------------------------------------------------------------- */
.app {
  background: #11151d;
  box-shadow: 0 0 0 1px rgba(208, 219, 236, 0.06), 0 20px 70px rgba(0, 0, 0, 0.28);
}

.app-header {
  min-height: 68px;
  padding-inline: clamp(14px, 3vw, 22px);
  background: rgba(26, 31, 42, 0.96);
  border-bottom-color: rgba(213, 224, 239, 0.09);
}

.app-header__avatar {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.app-header__botao-teste {
  min-height: 38px;
  padding-inline: 15px;
  border-radius: 999px;
  background: #dbe3ef;
  color: #14202a;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.chat {
  gap: 14px;
  padding: clamp(18px, 3vw, 30px) max(16px, calc((100% - 760px) / 2)) 26px;
  background-color: #11151d;
  background-image:
    radial-gradient(circle at 50% -10%, rgba(142, 163, 192, 0.13), transparent 36rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.015), transparent 42%);
}

.bolha {
  padding: 10px 13px 7px;
  border: 1px solid rgba(224, 232, 242, 0.08);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

.bolha--usuario { background: #303949; }
.bolha--sistema { background: #202733; }
.bolha--resposta { border-left: 2px solid rgba(186, 205, 225, 0.55); }

.boas-vindas {
  width: min(100%, 560px);
  margin: auto;
  padding: clamp(24px, 6vw, 42px);
  text-align: center;
  border: 1px solid rgba(218, 229, 243, 0.12);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(38, 47, 62, 0.98), rgba(23, 28, 38, 0.98));
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.28);
}

.boas-vindas__marca {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin: 0 auto 16px;
  border-radius: 17px;
  color: #15212c;
  background: #dce5f1;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.boas-vindas__sobretitulo {
  margin: 0 0 8px;
  color: #aebed2;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.boas-vindas h2 { margin: 0; color: #f5f7fb; font-size: clamp(1.32rem, 4vw, 1.7rem); }
.boas-vindas > p:not(.boas-vindas__sobretitulo) { margin: 12px auto 22px; max-width: 42ch; color: #b9c3d0; }
.boas-vindas__acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.boas-vindas button { min-height: 44px; border: 1px solid rgba(220, 229, 241, 0.15); border-radius: 13px; color: #edf2f8; background: rgba(255, 255, 255, 0.055); font: inherit; font-size: 0.86rem; cursor: pointer; }
.boas-vindas button:hover { background: rgba(229, 237, 248, 0.13); }
.boas-vindas__nivel { width: 100%; margin-top: 10px; color: #17232c !important; background: #dbe4f0 !important; border-color: transparent !important; font-weight: 750 !important; }
.boas-vindas__nivel span { margin-left: 7px; }

.composer {
  padding: 10px max(12px, calc((100% - 790px) / 2));
  border-top-color: rgba(217, 229, 242, 0.09);
  background: rgba(25, 30, 40, 0.98);
}

.composer__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 6px;
  padding: 4px;
  border: 1px solid rgba(220, 230, 244, 0.12);
  border-radius: 24px;
  background: #252c38;
}
.composer__campo {
  grid-column: 1;
  grid-row: 1;
  order: unset;
  width: 100%;
  min-height: 42px;
  padding-block: 11px;
}
.composer__botao {
  grid-column: 2;
  grid-row: 1;
  order: unset;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  border-radius: 50%;
}
.composer__gravacao-status { grid-column: 1; grid-row: 1; order: unset; }
.composer__erro { grid-column: 1 / -1; grid-row: 2; order: unset; }

.modal-teste-nivel { background: rgba(6, 9, 14, 0.7); }
.modal-teste-nivel__painel {
  width: min(760px, 100%);
  gap: 18px;
  padding: clamp(20px, 4vw, 32px);
  border-radius: 26px;
  background: linear-gradient(145deg, #252d3d, #171d28 68%);
  border-color: rgba(215, 226, 241, 0.16);
}
.modal-teste-nivel__titulo { font-size: 1.18rem; }
.modal-teste-nivel__etapa { color: #bdcce0; }
.modal-teste-nivel__barra { height: 9px; background: rgba(219, 228, 241, 0.14); }
.modal-teste-nivel__barra-preenchimento { background: linear-gradient(90deg, #e6edf7, #a9bbd1); }
.modal-teste-nivel__corpo { gap: 16px; }
.teste-nivel-atividade__contexto { margin: 0; color: #aebfd5; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; }
.teste-nivel-atividade__enunciado { margin: 2px 0 0; font-size: clamp(1.05rem, 2vw, 1.18rem); line-height: 1.42; }
.teste-nivel-atividade__traducao { margin: -7px 0 2px; color: #b7c0ce; }
.teste-nivel-atividade__imagem { max-height: min(35vh, 310px); border-radius: 16px; border-color: rgba(227, 235, 246, 0.2); background: #131924; }
.teste-nivel-atividade__opcao { min-height: 54px; padding: 13px 15px; border-color: rgba(223, 233, 246, 0.17); border-radius: 14px; background: rgba(255, 255, 255, 0.055); transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; }
.teste-nivel-atividade__opcao:hover { border-color: rgba(223, 233, 246, 0.45); transform: translateY(-1px); }
.teste-nivel-atividade__opcao.is-selecionada { border-color: #dce7f4; background: rgba(204, 218, 236, 0.18); }
.teste-nivel-atividade__campo { border-radius: 14px; background: rgba(255, 255, 255, 0.06); }
.teste-nivel-atividade__enviar { min-height: 46px; border-radius: 999px; font-weight: 800; }
.teste-nivel-atividade__erro { padding: 16px; border: 1px solid rgba(248, 144, 158, 0.5); border-radius: 14px; background: rgba(107, 38, 49, 0.18); }

@media (max-width: 600px) {
  .app-header { min-height: 62px; }
  .app-header__title { font-size: 0.96rem; }
  .app-header__subtitle { font-size: 0.72rem; }
  .app-header__botao-teste { padding-inline: 11px; font-size: 0.74rem; }
  .chat { padding: 18px 12px 20px; }
  .boas-vindas { margin: auto 0; border-radius: 21px; }
  .modal-teste-nivel { padding: 0; place-items: stretch; }
  .modal-teste-nivel__painel { width: 100%; max-height: 100dvh; min-height: 100dvh; padding: calc(18px + var(--safe-top)) 18px calc(18px + var(--safe-bottom)); border: 0; border-radius: 0; }
  .modal-teste-nivel__finalizar { padding: 8px 10px; }
  .teste-nivel-atividade__imagem { max-height: min(34vh, 290px); }
}

@media (max-width: 380px) {
  .boas-vindas__acoes { grid-template-columns: 1fr; }
  .app-header__botao-teste { padding-inline: 9px; font-size: 0.7rem; }
}