/* Inter — fonte do modelo "pílula" (Uiverse) usada no campo de tema do estúdio. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: var(--ink-soft);
  --bg-elevated: rgba(20, 20, 20, 0.52);
  --bg-input: rgba(255, 255, 255, 0.05);
  --bg-user: rgba(255, 255, 255, 0.08);
  --text: #f3f3f3;
  --text-dim: rgba(243, 243, 243, 0.7);
  --text-muted: rgba(243, 243, 243, 0.42);
  --border: rgba(255, 255, 255, 0.1);
  --border-input: rgba(255, 255, 255, 0.14);
  /* Acento monocromático — preto e branco PUROS (sem temperatura). */
  --biolume: rgba(255, 255, 255, 0.92);
  --biolume-bright: #ffffff;
  --biolume-glow: rgba(255, 255, 255, 0.16);
  --biolume-glow-strong: rgba(255, 255, 255, 0.3);
  --accent: var(--biolume);
  --accent-dim: rgba(255, 255, 255, 0.6);
  --accent-glow: var(--biolume-glow);

  /* ── Paleta NEUTRA (cinza puro, sem azul) — grayscale do usuário:
     white #ffffff, anti-flash-white #f3f3f3, chinese-white #e1e1e1,
     night-rider #2e2e2e, eerie-black #1b1b1b, chinese-black #141414, black #000000.
     Como a paleta não tem tom médio, os "muted" são pretos com alpha (ainda neutros). */
  --n-bright: #ffffff;            /* branco puro (centro atrás da orca) */
  --n-canvas: #f3f3f3;            /* anti-flash-white — canvas off-white */
  --n-edge: #e1e1e1;              /* chinese-white — borda do canvas */
  --ink: #141414;                 /* chinese-black — tinta principal */
  --ink-soft: #1b1b1b;            /* eerie-black — tinta de texto/ícone */
  --ink-icon: #2e2e2e;            /* night-rider — ícones um tom mais claro */
  --text-muted-l: rgba(20, 20, 20, 0.56);  /* cinza médio neutro (~AA em branco) */
  --hairline: rgba(0, 0, 0, 0.1);           /* contorno fino (neutro) */
  --hairline-strong: rgba(0, 0, 0, 0.18);   /* contorno em foco/hover */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-strong: rgba(20, 20, 20, 0.38);
  --glass-blur: 28px;
  --glass-saturate: 1.35;
  --font-display: 'Clash Display', system-ui, sans-serif;
  --font-serif: var(--font-display);
  --font-sans: 'Satoshi', system-ui, -apple-system, sans-serif;
  --font: var(--font-sans);
  --hero-size: clamp(72px, 8vw, 140px);
  --subtitle-size: clamp(0.95rem, 1.35vw, 1.125rem);
  --menu-size: 13px;
  --orb-size: min(42vmin, 300px);
  --stage-gap: 1.5rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.26, 0.64, 1);
  --ease-spring-menu: linear(
    0, 0.0014, 0.0055 1.03%, 0.0239, 0.053 3.44%, 0.0961 4.81%, 0.1957 7.39%,
    0.4354 12.88%, 0.5484, 0.6494, 0.7362, 0.8083 23.88%, 0.8696, 0.9168 29.72%,
    0.9368, 0.9536 32.81%, 0.9793 35.9%, 0.997 39.17%, 1.0084 42.77%, 1.0142 47.07%,
    1.0144 53.43%, 1.0054 68.37%, 1.0019 77.3%, 0.9998 99.98%
  );
  --orca-glass-gradient: linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 48%, rgba(255, 255, 255, 0.04) 100%);
  --orca-glass-base: rgba(20, 20, 20, 0.42);
  --orca-glass-border: rgba(255, 255, 255, 0.11);
  --orca-glass-border-focus: rgba(255, 255, 255, 0.18);
  --orca-glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --orca-glass-shadow-focus: 0 24px 56px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --orca-glass-shadow-listen: 0 24px 56px rgba(0, 0, 0, 0.42), 0 0 26px var(--biolume-glow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  /* ── Sistema de elevação ──────────────────────────────────────────────────
     Sombra em 3 camadas (contato nítido + chave média + ambiente larga e suave),
     em tom AZULADO FRIO (rgba(16,24,40)) em vez de preto puro — preto puro "suja"
     o off-white frio do site. As camadas dão profundidade real: a de contato
     define a borda, a ambiente faz o elemento "flutuar". */
  --elev-soft:
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 6px 16px -8px rgba(0, 0, 0, 0.16),
    0 16px 36px -18px rgba(0, 0, 0, 0.24);
  --elev-card:
    0 1px 2px rgba(0, 0, 0, 0.14),
    0 10px 24px -10px rgba(0, 0, 0, 0.22),
    0 30px 60px -28px rgba(0, 0, 0, 0.36);
  --elev-card-hi:
    0 2px 4px rgba(0, 0, 0, 0.18),
    0 16px 32px -10px rgba(0, 0, 0, 0.28),
    0 42px 80px -30px rgba(0, 0, 0, 0.46);
  --elev-modal:
    0 2px 4px rgba(0, 0, 0, 0.16),
    0 20px 44px -14px rgba(0, 0, 0, 0.30),
    0 64px 120px -44px rgba(0, 0, 0, 0.52);
  --menu-margin: max(20px, env(safe-area-inset-top, 0px));
  --menu-margin-x: max(20px, env(safe-area-inset-right, 0px));
  --menu-panel-w: min(560px, calc(100vw - max(40px, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px))));
  --menu-bg: rgba(15, 15, 15, 0.55);
  --menu-ink: rgba(243, 243, 243, 0.94);
  --menu-muted: rgba(243, 243, 243, 0.42);
  --menu-trigger-bg: transparent;
  --menu-trigger-fg: #f3f3f3;
  --nav-mark-size: 48px;
  --nav-mark-size-mobile: 42px;
  --nav-name-size: clamp(1.15rem, 1.65vw, 1.375rem);
  --chat-header-pad-y: max(20px, env(safe-area-inset-top, 0px));
  --chat-header-pad-x: max(20px, env(safe-area-inset-left, 0px));
}

html, body {
  height: 100%;
  min-height: 100dvh;
  width: 100%;
  max-width: 100%;
  font-family: var(--font-sans);
  font-weight: 400;
  background-color: var(--n-canvas); /* base off-white coerente (evita flash branco) */
  color: var(--text);
  overflow: hidden;
  overflow-x: clip;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  /* Nunca "engordar" texto com bold sintético: se um peso pedido for mais pesado
     que o arquivo da fonte tem (Clash vai até 600, Satoshi até 700), o navegador
     usa o peso REAL mais próximo em vez de borrar/engrossar — strokes uniformes
     em todo o site. (Mantém a síntese de itálico p/ <em>.) */
  font-synthesis-weight: none;
}

/* Fundo neutro do vão: agora o cenário é o CÂNION DE GELO 3D (Three.js). O CSS só
   entrega um céu frio claro → prata que aparece ENTRE as paredes 3D — coeso, sem
   o antigo wallpaper azul de icebergs (que duplicava as paredes). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  /* Vinheta sutil: centro branco puro (a barriga da orca continua limpa), bordas
     com um cinza-frio quase imperceptível. Tira o "branco 100% chapado" e dá
     profundidade — a orca passa a ocupar um ambiente em vez de flutuar no vazio. */
  background:
    /* halo neutro atrás da orca → separa a silhueta escura do fundo */
    radial-gradient(circle at 50% 40%, rgba(20, 20, 20, 0.06), transparent 54%),
    /* vinheta clara, agora mais FUNDA nas bordas (empurra o fundo pra trás) */
    radial-gradient(
      122% 98% at 50% 42%,
      #ffffff 0%,
      #ffffff 38%,
      #f3f3f3 70%,
      #e1e1e1 100%
    );
  pointer-events: none;
}

/* Camada atmosférica: neutraliza o azul restante, abre um "claro" de luar atrás
   da orca (integra a criatura ao ambiente) e fecha as bordas com uma vinheta
   suave clara — moldura premium, sem cor de marca. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* claro de luar atrás da orca — mais presente p/ a silhueta escura "saltar" */
    radial-gradient(56% 50% at 50% 44%,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.16) 40%,
      rgba(255, 255, 255, 0) 72%),
    /* HAZE de profundidade: bordas levemente mais densas/frias (perspectiva aérea) */
    radial-gradient(150% 122% at 50% 40%,
      rgba(255, 255, 255, 0) 52%,
      rgba(225, 225, 225, 0.22) 82%,
      rgba(214, 214, 214, 0.40) 100%),
    linear-gradient(180deg,
      rgba(248, 248, 248, 0.30) 0%,
      rgba(243, 243, 243, 0.10) 42%,
      rgba(234, 234, 234, 0.40) 100%);
}

/* Seleção: tinta escura sobre o tema claro (antes era branco sobre branco —
   invisível). Legível também dentro dos painéis escuros. */
::selection {
  background: rgba(20, 20, 20, 0.92);
  color: #fff;
}

/* Scrollbar editorial: fina e monocromática. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(27, 31, 37, 0.24) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(27, 31, 37, 0.2);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(27, 31, 37, 0.38);
  background-clip: padding-box;
}
/* Painéis escuros (chat): thumb claro p/ contraste. */
.ui-panel ::-webkit-scrollbar-thumb,
.ui-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.24);
  background-clip: padding-box;
}

/* Foco por teclado: anel limpo e visível em fundo claro ou escuro (a11y). */
:focus-visible {
  outline: 2px solid rgba(110, 122, 138, 0.9);
  outline-offset: 3px;
  border-radius: 6px;
}

button,
a,
input,
textarea,
select,
summary,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
  outline: none;
}

/* ── Tipografia Orca (serif × sans) ── */
.font-display {
  font-family: var(--font-serif);
  font-weight: 500;
}

.menu-text {
  font-family: var(--font-sans);
  font-size: var(--menu-size);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ── Navegação ── */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 16;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding:
    var(--menu-margin)
    var(--menu-margin-x)
    0
    max(1.5rem, env(safe-area-inset-left, 0px));
  pointer-events: none;
}

/* Sombra do header: faixa que cobre toda a largura, escurece no miolo e some nas
   pontas (gradiente horizontal), com um leve desvanecer pra baixo pra não cortar
   numa linha dura. Fica atrás do conteúdo do nav e não captura cliques. */
.site-nav::before {
  display: none;
}

.site-nav__brand {
  pointer-events: auto;
}

.site-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-soft);
  /* Estático no load (sem nav-in): só a orca anima na página inicial. */
  opacity: 1;
}

.site-nav__wordmark {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.05;
}

.site-nav__name {
  font-size: clamp(1.5rem, 2.1vw, 1.8rem);
  font-weight: 800;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  line-height: 1;
  /* Marca em cor ÚNICA e sólida, igual ao logo (sem gradiente): mais encorpada
     e memorável — a "cara" do site. */
  color: var(--ink);
}

/* Kicker editorial discreto sob a marca: dá contexto sem peso visual. */
.site-nav__tag {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(52, 52, 52, 0.42);
}

.site-nav__mark {
  width: var(--nav-mark-size);
  height: var(--nav-mark-size);
  object-fit: contain;
  opacity: 1;
  /* logo é silhueta branca → brightness(0.078) deixa na MESMA cor da marca
     (var(--ink) ≈ #141414), unificando logo + texto numa única tinta sólida. */
  filter: brightness(0.078);
  image-rendering: auto;
}

@keyframes nav-in {
  0% { opacity: 0; transform: translateY(-12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════════════
   CTA "Redação" — círculo GRANDE ancorado no canto superior direito.
   O centro fica no vértice da tela, então só o quarto inferior-esquerdo
   aparece, preenchendo o canto. Vidro fosco, símbolo em cinza, brilho no hover.
   ════════════════════════════════════════════════════════════════════════ */
.nav-cta {
  pointer-events: auto;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 20;
  isolation: isolate;
  overflow: hidden;
  display: block;
  width: clamp(150px, 19vw, 230px);
  height: clamp(150px, 19vw, 230px);
  padding: 0;
  font: inherit;
  color: var(--ink-icon);
  cursor: pointer;
  border-radius: 50%;
  /* MESMO estilo neumórfico do composer "Escreva ou fale": base sólida #f3f3f3,
     sem borda, com luz branca (cima/esquerda) + sombra #e1e1e1 (baixo/direita) e
     relevo interno (inset) — aspecto "soft UI". */
  border: none;
  background: #f3f3f3;
  box-shadow:
    -8px -4px 8px 0px #ffffff,
    8px 4px 12px 0px #e1e1e1,
    4px 4px 4px 0px #e1e1e1 inset,
    -4px -4px 4px 0px #ffffff inset;
  /* Sem animação de entrada: já nasce no estado final. */
  opacity: 1;
  transform: translate(50%, -50%) scale(1);
}

/* sem reação no hover: mantém o mesmo relevo neumórfico estático (igual ao composer) */
.nav-cta:hover {
  box-shadow:
    -8px -4px 8px 0px #ffffff,
    8px 4px 12px 0px #e1e1e1,
    4px 4px 4px 0px #e1e1e1 inset,
    -4px -4px 4px 0px #ffffff inset;
  transform: translate(50%, -50%) scale(1);
}

/* anel de foco apenas para teclado (acessibilidade), sem efeito no mouse */
.nav-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.16);
}

/* símbolo em cinza, posicionado no quarto visível (inferior-esquerdo) */
.nav-cta__glyph {
  position: absolute;
  left: 31%;
  top: 69%;
  width: clamp(30px, 3.3vw, 42px);
  height: clamp(30px, 3.3vw, 42px);
  transform: translate(-50%, -50%);
}

/* rótulo do módulo: deixa claro que o botão é a "Redação", sem competir com o
   ícone. Posicionado logo abaixo do glyph, no quarto visível. */
.nav-cta__label {
  /* rótulo removido a pedido — escondido mesmo se o markup for restaurado */
  display: none;
}

/* em telas muito pequenas o quarto-de-círculo encolhe: esconde o rótulo p/ não
   atravessar a borda curva (o aria-label/title seguem garantindo o contexto). */
@media (max-width: 520px) {
  .nav-cta__label { display: none; }
}

/* ── Hero editorial ── */
.hero-copy {
  position: fixed;
  left: max(2rem, env(safe-area-inset-left, 0px));
  top: 50%;
  bottom: auto;
  z-index: 52;
  transform: translateY(-50%);
  max-width: min(46vw, 560px);
  padding: 0 1rem 0 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.hero-eyebrow {
  font-family: var(--font-sans);
  font-size: clamp(0.72rem, 1vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 247, 251, 0.48);
  margin-bottom: 1.15rem;
  opacity: 0;
  will-change: transform, opacity;
  animation: hero-rise 1.1s var(--ease-out) 0.4s forwards;
}

.hero-copy__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 6.2vw, 5rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: rgba(244, 247, 251, 0.98);
  text-wrap: balance;
  opacity: 0;
  will-change: transform, opacity;
  animation: hero-rise 1.1s var(--ease-out) 0.52s forwards;
}

.hero-copy__title em {
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(244, 247, 251, 0.55);
  text-transform: none;
  display: block;
  margin-top: -0.1em;
}

.hero-copy__subtitle {
  margin-top: 1.35rem;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--subtitle-size);
  line-height: 1.65;
  color: rgba(244, 247, 251, 0.55);
  max-width: 24rem;
  opacity: 0;
  will-change: transform, opacity;
  animation: hero-rise 1.1s var(--ease-out) 0.64s forwards;
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Wordmark fantasma: tipografia ENORME (editorial) atrás da orca ──
   Palavra gigante quase imperceptível, em tinta escura de baixíssima opacidade.
   Fica atrás do canvas 3D (a orca passa por cima), dando escala e "presença"
   tipográfica ao vazio central sem competir com a criatura. */
.stage-wordmark {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Altura ANCORADA no large viewport: não encolhe quando o teclado do celular
     abre (com interactive-widget=resizes-content o inset:0/% encolhia e a palavra
     "subia"). --stage-vh é travado por JS (maior altura vista); 100lvh/100vh são
     os fallbacks. */
  height: 100vh;
  height: 100lvh;
  height: var(--stage-vh, 100lvh);
  z-index: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  overflow: hidden;
}

.stage-wordmark span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(7rem, 30vw, 30rem);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: rgba(20, 20, 20, 0.06);
  transform: translateY(-3%) scale(1.05);
  user-select: none;
  /* Estático no load (sem ghost-reveal): só a orca anima. */
  opacity: 1;
  /* A metade de baixo das letras dissolve até sumir na cor do site, como se o
     wordmark "ORCA" emergisse do fundo em vez de ser um bloco chapado. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 38%,
    rgba(0, 0, 0, 0.55) 64%,
    rgba(0, 0, 0, 0.18) 84%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 38%,
    rgba(0, 0, 0, 0.55) 64%,
    rgba(0, 0, 0, 0.18) 84%,
    rgba(0, 0, 0, 0) 100%
  );
}

@keyframes ghost-reveal {
  /* Antes animava letter-spacing (força LAYOUT por frame) e filter: blur(16px)
     num elemento gigante (tela inteira) — principal causa da travada inicial,
     pior no Firefox. Agora só opacity + scale (compositáveis na GPU). */
  from { opacity: 0; transform: translateY(-3%) scale(1.08); }
  to { opacity: 1; transform: translateY(-3%) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .stage-wordmark span {
    animation: none;
    opacity: 1;
    letter-spacing: -0.04em;
    filter: none;
  }
  .film-grain { animation: none; }
}

/* ── Glass gloss (Awwwards) ── */
.glass-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 38%, rgba(255, 255, 255, 0.06) 100%),
    var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 12px 40px rgba(0, 8, 20, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  transform: translateZ(0);
  contain: layout style paint;
}

.glass-panel__edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.06) 22%,
    transparent 45%,
    rgba(255, 255, 255, 0.08) 100%
  );
  opacity: 0.55;
  mix-blend-mode: overlay;
}

.glass-panel__glow {
  position: absolute;
  top: -40%;
  left: -10%;
  width: 65%;
  height: 80%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 230, 255, 0.18) 0%, transparent 68%);
  pointer-events: none;
  filter: blur(8px);
}

.glass-panel--pill { border-radius: var(--radius-pill); }
.glass-panel--round { border-radius: 50%; }

.perf-lite {
  --glass-blur: 10px;
  --glass-saturate: 1.1;
}

.perf-lite .glass-panel__glow { display: none; }

/* ── Hero + overlay (vídeo de fundo) ── */
.hero {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Mesma vinheta sutil do body::before (a .hero é opaca e cobriria o fundo).
     Centro branco puro + bordas levemente frias = profundidade atrás da orca. */
  background: radial-gradient(
    120% 95% at 50% 42%,
    var(--n-bright) 0%,
    var(--n-bright) 38%,
    var(--n-canvas) 72%,
    var(--n-edge) 100%
  );
  contain: strict;
}

/* Grão de filme editorial: textura monocromática quase imperceptível sobre o
   branco. 'multiply' com ruído dessaturado escurece de leve e tira o "branco
   chapado" — assinatura de site premiado, sem cor de marca. */
.film-grain {
  position: fixed;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px 170px;
  mix-blend-mode: multiply;
  /* Grão estático (sem grain-shift): página inicial parada, só a orca anima. */
}

.perf-lite .film-grain { display: none; }

/* Em telas pequenas o grão (mix-blend-mode: multiply animado, cobrindo 2× a tela)
   é puro custo de GPU por ~0% de ganho visual perceptível (opacidade 0.06 num
   display denso). Escondemos sempre no celular, independente do tier — não afeta
   o design percebido e libera GPU para a orca rodar a 60fps. */
@media (max-width: 768px) {
  .film-grain { display: none; }
}

@keyframes grain-shift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-2%, -1%); }
  50% { transform: translate(1%, 2%); }
  75% { transform: translate(-1%, 1%); }
}

/* ── Cena ── */
.universe {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: transparent;
}

/* Fade da base: faixa horizontal no rodapé na MESMA cor do fundo do site
   (centro #f4f7fa → borda #e9eef4). Vai de transparente (topo) até a cor do
   site (base), fundindo a parte de baixo da orca com o ambiente — ela "vira"
   o fundo em vez de flutuar. Fica acima da orca (z1) e abaixo da UI (z3+). */
.universe::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38vh;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to top,
    #e1e1e1 0%,
    rgba(225, 225, 225, 0.88) 16%,
    rgba(243, 243, 243, 0.52) 44%,
    rgba(248, 248, 248, 0.22) 68%,
    rgba(255, 255, 255, 0) 100%
  );
}

.space-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.space-scene canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.nova-ui {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  height: 100%;
  pointer-events: none;
}

.nova-stage {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem 10.5rem;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
}

/* ── Cena 3D Orca — entre geleira e UI ── */
.orca-stage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* A altura é controlada por JS (orca-scene) e travada no tamanho SEM teclado:
     com 'bottom: auto' a base não acompanha o layout que o teclado virtual encolhe,
     então o canvas 3D não é espremido (orca deixa de "achatar"). */
  bottom: auto;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  contain: layout style paint;
}

/* Glow gradiente atrás da orca removido a pedido (a "bola" radial). */

/* ── Sombra de oclusão (contato) ──
   Elipse cinza-suave borrada no chão de gelo, logo abaixo do corpo da orca.
   Dá peso e presença 3D: a orca deixa de parecer recortada e flutuando. */
.orca-ground-shadow {
  /* Sombra removida a pedido do usuário (a orca fica sem sombra de contato). */
  display: none;
  position: fixed;
  left: 50%;
  top: 75%;
  z-index: 0;
  width: clamp(280px, 44vw, 600px);
  height: clamp(40px, 6vw, 80px);
  transform: translate(-50%, -50%) scale(0.92);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(58, 76, 96, 0.3) 0%,
    rgba(74, 92, 112, 0.17) 42%,
    rgba(98, 116, 136, 0.06) 70%,
    transparent 84%
  );
  filter: blur(22px);
  transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
  will-change: opacity, transform;
}

body.orca-model-ready .orca-ground-shadow {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  /* mesmo timing do float (8s, sem atraso): orca no topo @50% → sombra menor/clara */
  animation: orca-shadow-breathe 8s ease-in-out infinite;
}

/* Respira em CONTRA-FASE com a orca: quando ela sobe (float -16px @50%), a sombra
   de contato encolhe e clareia, como se a luz/distância ao chão aumentasse. */
@keyframes orca-shadow-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.74; }
}

@media (prefers-reduced-motion: reduce) {
  body.orca-model-ready .orca-ground-shadow { animation: none; }
}

.perf-lite .orca-ground-shadow { filter: blur(10px); }

@media (min-width: 901px) {
  .orca-ground-shadow { top: 72%; }
}

@media (max-width: 900px) {
  .orca-ground-shadow { top: 70%; }
}

.orca-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: auto;
  /* Sem sombra: a orca não projeta drop-shadow nem oclusão ambiente. */
  filter: brightness(1.02) saturate(1.04);
  contain: strict;
  /* float leve: a orca "respira" sem mexer no sizing do stage (controlado por JS) */
  will-change: transform;
  animation: float 8s ease-in-out infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .orca-canvas { animation: none; }
}

/* perf-lite: sem float e sem sombra cara */
.perf-lite .orca-canvas {
  animation: none;
  filter: brightness(1.02) saturate(1.04);
}

body.orca-loading .orca-hit-zone {
  visibility: hidden;
  pointer-events: none;
}

body.orca-entering .orca-stage {
  animation: orca-swim-in 2.4s ease-out forwards;
}

body.orca-model-ready .orca-stage {
  opacity: 1;
}

/* Fallback quando o WebGL não pôde iniciar (ex.: aceleração/GPU desativada no
   Firefox, ou falha persistente). A silhueta da orca aparece centralizada e
   discreta — a página continua 100% utilizável (chat, voz, etc.). */
body.orca-failed .orca-stage::after {
  content: "";
  position: absolute;
  top: 46%;
  left: 50%;
  width: min(46vw, 380px);
  aspect-ratio: 1024 / 573;
  transform: translate(-50%, -50%);
  background: url('assets/orca-logo.png?v=2') center / contain no-repeat;
  opacity: 0.18;
  pointer-events: none;
}

@keyframes orca-swim-in {
  from { opacity: 0.72; }
  to { opacity: 1; }
}

@keyframes orca-fade-in {
  from { opacity: 0.85; }
  to { opacity: 1; }
}

.orca-hit-zone.orca-hit-zone--synced {
  right: auto;
}

.orca-hit-zone {
  position: fixed;
  top: 58%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: clamp(160px, 32vw, 340px);
  height: clamp(110px, 22vw, 220px);
  z-index: 3;
  pointer-events: none;
}

.orca-hit {
  position: absolute;
  inset: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  /* Cobre toda a extensão da orca (cauda/nadadeiras), p/ passar o mouse por
     qualquer parte dela disparar o holograma. O holofote só pinta onde há pixels
     da orca, então as quinas vazias da caixa não mostram nada. */
  border-radius: 18px;
  padding: 0;
  pointer-events: auto;
}

.orca-hit:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.4);
  outline-offset: 6px;
}

.orca-hit.is-active {
  cursor: pointer;
}

.orca-hit.is-listening {
  cursor: crosshair;
}

@media (min-width: 1101px) {
  .hero-copy {
    left: max(2.5rem, env(safe-area-inset-left, 0px));
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: max-content;
    max-width: min(46vw, 560px);
    padding: 0 1.25rem 0 0;
  }

  .hero-eyebrow {
    margin-bottom: 0.8rem;
  }

  .hero-copy__title {
    line-height: 0.9;
  }

  .hero-copy__title em {
    margin-top: -0.14em;
  }
}

@media (min-width: 901px) {
  .orca-hit-zone {
    top: 60%;
    width: clamp(200px, 34vw, 380px);
    height: clamp(130px, 24vw, 250px);
  }
}

@media (min-width: 769px) and (pointer: fine) {
  .orca-hit-zone {
    top: 60%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: clamp(200px, 34vw, 380px);
    height: clamp(130px, 24vw, 250px);
  }
}

body.chat-open .hero-copy {
  opacity: 0.94;
  transform: translateY(-50%);
  transition: opacity 0.45s var(--ease-out);
}

body.chat-open .hero-copy__subtitle {
  opacity: 0.55;
  transition: opacity 0.45s var(--ease-out);
}

/* ── Composer ChatGPT ── */
/* atmosfera oceânica viva — tela cheia, atrás do modelo 3D da orca */
/* ponto focal fantasma — wordmark gigante quase invisível no vazio central */
.stage-bottom {
  position: fixed;
  left: 50%;
  bottom: max(1.1rem, calc(env(safe-area-inset-bottom, 0px) + 0.6rem));
  transform: translateX(-50%);
  z-index: 12;
  width: min(92vw, 768px);
  pointer-events: none;
  /* Estático no load (sem gpt-composer-rise): só a orca anima. */
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  transition:
    opacity 0.35s var(--ease-out),
    visibility 0.35s var(--ease-out),
    transform 0.4s var(--ease-expo);
}

/* ── Ações por mensagem (só ícones, embaixo — estilo ChatGPT) ── */
.chat-actions {
  width: 100%;
  display: flex;
  gap: 0.1rem;
  margin-top: 0.3rem;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.chat-row--user .chat-actions { justify-content: flex-end; }

.chat-row:hover .chat-actions,
.chat-actions:focus-within {
  opacity: 1;
}

@media (hover: none) {
  /* touch: sem hover → ações sempre visíveis (discretas) */
  .chat-actions { opacity: 0.6; }
}

.chat-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: rgba(40, 54, 70, 0.5);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease;
}

.chat-action:hover {
  color: var(--ink-soft);
  background: rgba(20, 20, 20, 0.07);
}

.chat-action svg {
  width: 16px;
  height: 16px;
}

.chat-action.is-done { color: #1f9d57; }
.chat-action.is-busy { color: var(--ink-soft); cursor: progress; }
.chat-action__spin { animation: chat-action-spin 0.7s linear infinite; transform-origin: 50% 50%; }
@keyframes chat-action-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chat-action__spin { animation: none; } }

@keyframes gpt-composer-rise {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(34px) scale(0.97);
  }
  60% { opacity: 1; }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.stage-disclaimer {
  margin-top: 0;
  order: 2;
  /* Mesma fonte da marca (Satoshi) p/ padronizar — antes usava SF Pro/sistema,
     que destoava do resto do site. Mini-nota discreta porém legível. */
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-align: center;
  /* nota discreta: peso leve e cor mais fraca (menos imponente). */
  color: var(--text-muted-l);
  pointer-events: none;
  /* Estático no load (sem disclaimer-rise): só a orca anima. */
  opacity: 1;
}

@keyframes disclaimer-rise {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── Entrada GSAP (home) ──
   Quando o movimento é permitido, layout.js marca <html class="gsap-anim">
   ANTES do paint, então escondemos só os 4 elementos que a GSAP vai revelar
   (sem flash). Se a GSAP não inicializar a tempo, o timer de segurança adiciona
   'gsap-anim-fallback' e tudo volta a aparecer — conteúdo nunca some. */
html.gsap-anim .orca-card--gpt,
html.gsap-anim .stage-disclaimer {
  opacity: 0;
}
html.gsap-anim-fallback .orca-card--gpt,
html.gsap-anim-fallback .stage-disclaimer {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Card base (legado — composer usa --gpt) ── */
.orca-card {
  pointer-events: auto;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.orca-card__inner {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 2.5rem;
  position: relative;
  z-index: 1;
}

.orca-card__field {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.orca-card__input {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #ececec;
  padding: 0;
  outline: none;
  resize: none;
  overflow: hidden;
  min-height: 1.5em;
  max-height: 12rem;
  field-sizing: content;
}

.orca-card__input::placeholder {
  color: rgba(236, 236, 236, 0.5);
}

.orca-card__input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.orca-card__rail {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ── Glass card (vidro) ── */
.glass-card {
  --glass-border: rgba(255, 255, 255, 0.14);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.11);
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.28),
    transparent
  );
  pointer-events: none;
  z-index: 1;
}

.glass-card__ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.glass-card__ring-glow {
  position: absolute;
  inset: -120%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 288deg,
    rgba(255, 255, 255, 0.95) 316deg,
    rgba(255, 255, 255, 0.35) 330deg,
    transparent 360deg
  );
  /* Brilho estático (sem giro): página inicial parada, só a orca anima. */
}

.glass-card__sweep {
  position: absolute;
  top: 0;
  left: -40%;
  width: 38%;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.95) 50%,
    transparent
  );
  /* Sweep desligado (sem animação): fica invisível, página inicial parada. */
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

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

@keyframes glass-top-sweep {
  0%,
  12% {
    left: -40%;
    opacity: 0;
  }

  22% {
    opacity: 1;
  }

  78% {
    opacity: 0.85;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

.glass-card > *:not(.glass-card__ring):not(.glass-card__sweep) {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .glass-card__ring-glow,
  .glass-card__sweep {
    animation: none;
  }

  .glass-card__ring-glow {
    transform: rotate(45deg);
    opacity: 0.45;
  }
}

/* ── Card Orca ── */
.orca-card {
  pointer-events: auto;
  padding: 0.5rem 0.55rem 0.5rem 0.65rem;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.28s var(--ease-out);
}

.orca-card.is-dragover {
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.35),
    0 10px 38px rgba(0, 0, 0, 0.28);
}

.orca-card:not(.orca-card--gpt):focus-within {
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

.orca-card:not(.orca-card--gpt).is-listening {
  border-color: rgba(255, 255, 255, 0.48);
  box-shadow:
    0 8px 36px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 0 20px rgba(140, 180, 230, 0.12);
}

.orca-card.is-busy:not(.is-listening) {
  border-color: rgba(255, 255, 255, 0.36);
}

.orca-card__inner {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 2.875rem;
  position: relative;
  z-index: 1;
}

.orca-card:not(.orca-card--gpt) .orca-card__field {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.2rem 0.65rem 0.2rem 0.35rem;
}

.orca-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.18rem 0.55rem 0.18rem 0.42rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  color: rgba(244, 247, 251, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.2rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.orca-card__status::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.75;
}

.orca-card.is-listening .orca-card__status {
  color: rgba(244, 247, 251, 0.82);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}

.orca-card.is-thinking .orca-card__status {
  color: rgba(244, 247, 251, 0.7);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.orca-card.is-speaking .orca-card__status {
  color: rgba(244, 247, 251, 0.78);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
}

.orca-card__status[hidden] {
  display: none;
}

.orca-card.is-error .orca-card__status {
  color: rgba(255, 190, 170, 0.95);
  background: rgba(200, 80, 60, 0.14);
  border-color: rgba(255, 140, 120, 0.24);
}

.orca-card__input {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(244, 247, 251, 0.94);
  padding: 0;
  outline: none;
  resize: none;
  overflow: hidden;
  min-height: 1.45em;
  max-height: 7.5rem;
  field-sizing: content;
}

.orca-card__input::placeholder {
  color: rgba(244, 247, 251, 0.38);
  transition: color 0.2s ease;
}

.orca-card:focus-within .orca-card__input::placeholder,
.orca-card--gpt:focus-within .orca-card__input::placeholder {
  color: rgba(244, 247, 251, 0.28);
}

.orca-card__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.orca-card__input[hidden] {
  display: none;
}

.orca-card__response {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(244, 247, 251, 0.62);
  max-height: 2.75rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-word;
}

.orca-card__response[hidden] {
  display: none;
}

.orca-card.is-thinking .orca-card__response {
  color: rgba(244, 247, 251, 0.42);
}

.orca-card.has-response .orca-card__response {
  color: rgba(244, 247, 251, 0.78);
}

.orca-card__rail {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
  padding: 0.15rem 0.2rem 0.15rem 0.35rem;
}

.orca-card__divider {
  display: none;
}

.orca-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: rgba(244, 247, 251, 0.46);
  cursor: pointer;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    transform 0.15s var(--ease-spring);
}

.orca-card__action:hover:not(:disabled) {
  color: rgba(244, 247, 251, 0.92);
  background: rgba(255, 255, 255, 0.07);
}

.orca-card__action:active:not(:disabled) {
  transform: scale(0.94);
}

.orca-card__action:disabled {
  opacity: 0.28;
  cursor: default;
}

.orca-card__action.is-listening {
  color: rgba(200, 225, 255, 0.95);
  background: rgba(255, 255, 255, 0.08);
}

.orca-card__action--stop:not(:disabled) {
  color: rgba(244, 247, 251, 0.88);
  background: rgba(255, 255, 255, 0.1);
}

.orca-card__action--send:not(:disabled) {
  color: rgba(244, 247, 251, 0.38);
}

.orca-card.has-text .orca-card__action--send:not(:disabled) {
  color: rgba(244, 247, 251, 0.95);
  background: rgba(255, 255, 255, 0.1);
}

.orca-card.has-text .orca-card__action--send:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
}

/* Card ChatGPT — ver composer-gpt.css (carregado depois) */

.orca-card__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}

.orca-card__attachments:not(:empty) {
  display: flex;
}

/* Vazio/oculto: colapsa totalmente (sem margem fantasma que desalinha o texto) */
.orca-card__attachments[hidden],
.orca-card__attachments:empty {
  display: none !important;
  margin: 0 !important;
}

.orca-card__attachment {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.28);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.orca-card__attachment img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.orca-card__attachment-remove {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
}

/* Chip de documento (PDF/TXT/MD) no composer — pílula larga em vez de quadrado */
.orca-card__attachment--doc {
  width: auto;
  max-width: 15rem;
  height: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.7rem 0.45rem 0.6rem;
  border-radius: 0.7rem;
}

.orca-card__doc-icon {
  flex: none;
  display: inline-flex;
  width: 1.6rem;
  height: 1.6rem;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.78);
}
.orca-card__doc-icon svg { width: 1.05rem; height: 1.05rem; }

.orca-card__doc-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.orca-card__doc-name {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(244, 247, 251, 0.95);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.orca-card__doc-size {
  font-size: 0.68rem;
  color: rgba(244, 247, 251, 0.5);
}

/* No card claro (gpt) o texto precisa de contraste escuro */
.orca-card.orca-card--gpt .orca-card__doc-icon { color: rgba(10, 10, 10, 0.6); }
.orca-card.orca-card--gpt .orca-card__doc-name { color: rgba(10, 10, 10, 0.92); }
.orca-card.orca-card--gpt .orca-card__doc-size { color: rgba(10, 10, 10, 0.5); }

/* Chip de documento adaptado ao card branco: fundo branco sólido */
.orca-card.orca-card--gpt .orca-card__attachment--doc {
  background: #ffffff;
  border-color: rgba(10, 10, 10, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  /* nome centralizado verticalmente já que não há mais a 2ª linha */
  padding: 0.5rem 1.9rem 0.5rem 0.6rem;
}

/* Botão remover do documento: apenas o "×" preto, sem círculo/contorno */
.orca-card.orca-card--gpt .orca-card__attachment--doc .orca-card__attachment-remove {
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  background: transparent;
  color: rgba(10, 10, 10, 0.6);
  font-size: 1rem;
  transition: color 0.15s ease;
}

.orca-card.orca-card--gpt .orca-card__attachment--doc .orca-card__attachment-remove:hover {
  color: var(--ink-soft);
}

/* Chips de documento dentro da bolha do usuário (transcrição) */
.chat-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.chat-doc {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  padding: 0.3rem 0.6rem;
  border-radius: 0.6rem;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.14);
}
.chat-doc svg { width: 0.95rem; height: 0.95rem; flex: none; opacity: 0.7; }
.chat-doc__name {
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-bubble--assistant .chat-doc {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.orca-card.has-attachments {
  border-radius: 1.35rem;
}

.orca-card.has-attachments .orca-card__inner {
  align-items: flex-start;
}

.orca-card.has-attachments .orca-card__rail {
  align-self: flex-end;
  margin-bottom: 0.15rem;
}

.chat-images {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}

.chat-image {
  display: block;
  max-width: min(220px, 100%);
  max-height: 180px;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  object-fit: cover;
}

.chat-bubble--user .chat-text:empty {
  display: none;
}

.orca-card__icon {
  display: block;
  flex-shrink: 0;
}

.orca-card__action[hidden],
.orca-card .dock-btn[hidden] {
  display: none !important;
}

.orca-card .dock-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  color: inherit;
  box-shadow: none;
  transform: none;
  background: transparent;
}

.orca-card .dock-btn:hover:not(:disabled) {
  transform: none;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(244, 247, 251, 0.92);
}

.orca-card .dock-btn.is-listening {
  color: rgba(244, 247, 251, 0.95);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  transform: none;
}

.sonar-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sonar-hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
  pointer-events: auto;
}

.sonar-hit:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.35);
  outline-offset: 10px;
}

/* Dock (estados via .dock-btn) */
.dock-btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(248, 251, 255, 0.9);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.dock-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.dock-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.96);
}

.dock-btn:disabled {
  opacity: 0.28;
  cursor: default;
}

.dock-btn.is-listening {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.dock-btn--stop:not(:disabled) {
  color: rgba(248, 251, 255, 0.78);
}

/* Status — oculto */
.status-dot,
.header__pulse,
.nova-header {
  display: none !important;
}

.state-float,
#stateText {
  display: none !important;
}

/* ── Menu Pacôme-style ── */
.orca-menu {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 50;
  pointer-events: none;
  transition: right 0.5s var(--ease-expo);
}

/* Aberto: o painel ganha respiro na direita; segue centralizado na vertical. */
.orca-menu:has(.orca-menu__surface.is-open) {
  right: var(--menu-margin-x);
}

.orca-menu__surface {
  position: relative;
  width: var(--nav-mark-size);
  height: var(--nav-mark-size);
  overflow: hidden;
  border-radius: 24px;
  background: transparent;
  color: var(--menu-trigger-fg);
  box-shadow: none;
  /* escala a partir da borda direita-central (onde mora o pill) */
  transform-origin: right center;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
  pointer-events: auto;
}

/* Fechado: semicírculo perfeito colado na borda direita (lado reto no limite
   da tela). Preto sólido, sem contorno nem sombra — altura = 2x largura para a
   curva ser um meio-círculo exato. */
/* Fechado: aba cinza-clara translúcida e fosca — borda fina definida + sombra
   sutil dão contraste sobre o gelo branco (o branco antigo sumia no fundo). */
.orca-menu__surface:not(.is-open) {
  /* Meio-disco colado na borda direita. Mantemos a relação altura = 2x largura
     para a curva ser um semicírculo exato; o tamanho foi calibrado para ficar
     equilibrado com o ícone interno (aba mais enxuta, ícone com mais presença). */
  width: clamp(50px, 6.2vw, 76px);
  height: clamp(100px, 12.4vw, 152px);
  /* MESMO estilo neumórfico do composer "Escreva ou fale": base sólida #f3f3f3,
     sem borda, luz branca (cima/esquerda) + sombra #e1e1e1 (baixo/direita) e
     relevo interno (inset) — aspecto "soft UI". */
  background: #f3f3f3;
  border-radius: 999px 0 0 999px;
  border: none;
  box-shadow:
    -8px -4px 8px 0px #ffffff,
    8px 4px 12px 0px #e1e1e1,
    4px 4px 4px 0px #e1e1e1 inset,
    -4px -4px 4px 0px #ffffff inset;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.orca-menu__surface:not(.is-open):hover {
  box-shadow:
    -8px -4px 8px 0px #ffffff,
    8px 4px 12px 0px #e1e1e1,
    4px 4px 4px 0px #e1e1e1 inset,
    -4px -4px 4px 0px #ffffff inset;
}

/* ícone de chat: dimensionado para equilibrar com a aba (presença clara, sem
   lotar o meio-disco), centralizado verticalmente (flex do trigger) e levemente
   puxado para a massa visível do meio-disco (centroide à direita do centro). */
.orca-menu__surface:not(.is-open) .orca-menu__trigger-icon {
  display: inline-flex;
  width: clamp(26px, 2.8vw, 36px);
  height: clamp(26px, 2.8vw, 36px);
  margin-left: clamp(10px, 1.3vw, 16px);
  color: var(--ink-icon);
  filter: none;
  /* Sem animação: o ícone fica estático no hover/clique. */
  transition: none;
}

.orca-menu__surface:not(.is-open):hover .orca-menu__trigger-icon,
.orca-menu__surface:not(.is-open):active .orca-menu__trigger-icon {
  color: var(--ink-icon);
  transform: none;
}

/* O tamanho da aba fechada escala sozinho pelo clamp(...,vw,...) acima,
   acompanhando a "bola" da Redação em qualquer largura — sem override fixo no PC. */

.orca-menu__surface.is-open {
  width: var(--menu-panel-w);
  height: calc(100dvh - var(--menu-margin) * 2 - env(safe-area-inset-bottom, 0px));
  border-radius: 16px;
  /* Liquid glass — blur forte e confiável (sem url(#orca-glass), que zera o
     blur em alguns navegadores) p/ o fundo não atrapalhar a leitura */
  background: rgba(10, 16, 28, 0.42);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  backdrop-filter: blur(30px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--menu-ink);
  isolation: isolate;
  /* Bevel de vidro (estilo botão liquid-glass Uiverse): luz interna em cima e
     embaixo dá relevo, e a sombra suave faz o card "flutuar". Sem hover. */
  box-shadow:
    inset 0 2px 2px rgba(0, 0, 0, 0.18),
    inset 0 -2px 2px rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 30px 90px -24px rgba(0, 0, 0, 0.55),
    0 10px 30px -12px rgba(0, 0, 0, 0.35);
}

/* Borda com gradiente cônico (a "assinatura" do botão): um anel só na borda,
   recortado por máscara (mask-composite: exclude). Ângulo fixo — sem animação
   de hover, só o desenho. */
.orca-menu__surface.is-open::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background:
    conic-gradient(
      from -75deg at 50% 50%,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0) 5% 40%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0) 60% 95%,
      rgba(0, 0, 0, 0.5)
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.5);
}

/* sem camada branca de base: o vidro deixa o fundo aparecer/distorcer */
.orca-menu__surface.is-open::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
}

.orca-menu__surface.is-opening {
  /* Cresce DA ABA: começa pequeno (origin: right center) e abre com leve spring
     (--ease-spring tem overshoot suave) — lê como se emergisse do pill lateral,
     em vez do antigo "pop" em 82%. Transform/opacity = 60fps na GPU. */
  animation: menu-surface-open 0.6s var(--ease-spring) both;
  will-change: transform, opacity;
}

.orca-menu__surface.is-closing {
  /* Retrai de volta p/ a aba (mesma origem), acelerando na saída. */
  animation: menu-surface-close 0.34s cubic-bezier(0.4, 0, 1, 1) both;
  will-change: transform, opacity;
}

@keyframes menu-surface-open {
  0% { transform: scale(0.3); opacity: 0; }
  /* opacidade entra rápido p/ não exibir o "vidro" minúsculo crescendo */
  42% { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes menu-surface-close {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.3); opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   Desktop (≥901px): chat como MODAL grande centralizado (quase tela cheia).
   Aberto, o container vira uma camada full-viewport que centraliza a superfície
   e hospeda o scrim; fechado, segue como aba à direita. No mobile permanece
   tela cheia (overrides em @media max-width:900px).
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  .orca-menu:has(.orca-menu__surface.is-open) {
    inset: 0;
    transform: none;
    display: grid;
    place-items: center;
    /* camada modal capta cliques (o scrim fecha; a superfície reabilita os seus) */
    pointer-events: auto;
  }

  /* Scrim: escurece E desfoca levemente a cena atrás → o chat vira o único foco
     (a orca/cenário some pro fundo). Clique fecha (ver menu-panel.js). */
  .orca-menu:has(.orca-menu__surface.is-open)::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(12, 18, 30, 0.38);
    -webkit-backdrop-filter: blur(5px) saturate(1.05);
    backdrop-filter: blur(5px) saturate(1.05);
    animation: menu-scrim-in 0.4s var(--ease-out) both;
  }

  /* Some o scrim junto com a saída da superfície. */
  .orca-menu:has(.orca-menu__surface.is-closing)::before {
    animation: menu-scrim-out 0.34s var(--ease-out) both;
  }

  .orca-menu__surface.is-open {
    width: min(860px, calc(100vw - 6rem));
    height: min(920px, calc(100dvh - 4rem));
    /* cantos um pouco maiores p/ um modal grande (mais premium que 16px) */
    border-radius: 22px;
    /* pop a partir do próprio centro (modal), não mais da aba lateral */
    transform-origin: center;
  }

  /* Entrada de MODAL: "lift + fade" (sobe e materializa no centro) em vez do
     zoom-de-minúsculo herdado do mobile. Mais sóbrio e caro de GPU = idêntico
     (só transform/opacity). O spring dá um assentamento suave no fim. */
  .orca-menu__surface.is-opening {
    animation: menu-modal-open 0.5s var(--ease-spring) both;
  }

  .orca-menu__surface.is-closing {
    animation: menu-modal-close 0.26s cubic-bezier(0.4, 0, 1, 1) both;
  }

  /* perf-lite: scrim sem blur (mantém o foco pelo escurecimento, sem custo) */
  .perf-lite .orca-menu:has(.orca-menu__surface.is-open)::before,
  html[data-perf="low"] .orca-menu:has(.orca-menu__surface.is-open)::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(12, 18, 30, 0.46);
  }

  /* O canvas do chat preenche o modal (antes era um drawer fixo de 560px). */
  .orca-menu__surface.is-open .ui-panel__canvas {
    width: 100%;
  }

  /* Coluna de leitura centralizada e com teto: linhas curtas o bastante p/ leitura
     confortável, com respiro de vidro nas laterais do modal largo. */
  .orca-menu__surface.is-open .transcript {
    width: 100%;
    max-width: 820px;
    margin-inline: auto;
  }
}

@keyframes menu-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes menu-scrim-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Entrada/saída do modal de chat no desktop: sobe ~18px e materializa. */
@keyframes menu-modal-open {
  0% { transform: scale(0.96) translateY(18px); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes menu-modal-close {
  0% { transform: scale(1) translateY(0); opacity: 1; }
  100% { transform: scale(0.975) translateY(12px); opacity: 0; }
}

/* Mobile: folha (bottom-sheet) deslizando de baixo + fade. Mais nativo que o
   zoom-do-canto herdado da aba lateral. Só transform/opacity = 60fps. */
@keyframes menu-sheet-open {
  0% { transform: translateY(44px) scale(0.99); opacity: 0; }
  46% { opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes menu-sheet-close {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(40px) scale(0.99); opacity: 0; }
}

.orca-menu__trigger:focus {
  outline: none;
}

.orca-menu__trigger:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.45);
  outline-offset: 3px;
}

.orca-menu__trigger {
  position: absolute;
  inset: 0;
  z-index: 32;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.orca-menu__trigger-mark {
  display: none;
}

.orca-menu__trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nav-mark-size);
  height: var(--nav-mark-size);
  color: rgba(248, 250, 253, 0.96);
  opacity: 1;
  filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.45));
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.orca-menu__trigger:hover .orca-menu__trigger-icon {
  color: #ffffff;
}

.orca-menu__trigger-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.orca-menu__trigger-icon .menu-line {
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.orca-menu__trigger:hover .menu-line--1 {
  transform: translateY(-1px);
}

.orca-menu__trigger:hover .menu-line--3 {
  transform: translateY(1px);
}

.orca-menu__trigger:active .orca-menu__trigger-icon .menu-line {
  opacity: 0.7;
}

.orca-menu__trigger-word {
  display: none !important;
}

.orca-menu__trigger.is-open {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.orca-menu__trigger.is-open .orca-menu__trigger-icon {
  opacity: 0;
  transform: scale(0.85);
  transition-delay: 0s;
}

.menu-letter {
  display: inline-block;
  transition: none;
  opacity: 0;
  transform: translate(20px, -20px);
  will-change: transform, opacity;
}

.orca-menu__surface.is-settled .menu-letter {
  animation: menu-reveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.2s + var(--i, 0) * 0.04s);
}

.orca-menu__surface:not(.is-settled) .menu-letter {
  animation: none;
}

@keyframes menu-reveal {
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

.orca-menu__close {
  position: absolute;
  top: 20px;
  right: 15px;
  z-index: 35;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 24px;
  /* apenas o X, sem círculo de fundo (claro sobre o vidro) */
  background: transparent;
  color: rgba(244, 247, 251, 0.82);
  cursor: pointer;
  transform: scale(0.125);
  transform-origin: top right;
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.8s var(--ease-spring-menu),
    opacity 0.3s ease,
    color 0.2s ease,
    right 0.8s var(--ease-spring-menu),
    top 0.8s var(--ease-spring-menu);
}

.orca-menu__close:hover {
  background: transparent;
  color: #ffffff;
}

.orca-menu__surface.is-open .orca-menu__close {
  right: 20px;
  top: 20px;
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

.orca-menu__close svg {
  transform: rotate(-45deg);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.3s ease;
}

.orca-menu__surface.is-open .orca-menu__close svg {
  transform: rotate(0deg);
  opacity: 1;
}

/* ── Painel de chat (vidro escuro) ── */
.ui-panel {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
}

.ui-panel.is-open {
  pointer-events: auto;
}

.ui-panel__canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--menu-panel-w);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  contain: layout style;
}

.orca-menu__surface.is-settled .ui-panel__canvas {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.45s ease 0.05s, visibility 0s linear 0s;
}

.orca-menu__surface.is-open:not(.is-settled) .ui-panel__canvas {
  transition: opacity 0.12s ease, visibility 0s linear 0.12s;
}

.orca-menu__surface.is-settled .chat-session {
  animation: menu-reveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.12s;
}

.orca-menu__surface:not(.is-settled) .chat-session {
  animation: none;
  opacity: 0;
  transform: translate(20px, -20px);
}

/* ── Identidade de sessão (substitui o logo redundante) ── */
.chat-session {
  position: absolute;
  top: max(22px, env(safe-area-inset-top, 0px));
  left: max(24px, env(safe-area-inset-left, 0px));
  right: max(24px, env(safe-area-inset-right, 0px));
  z-index: 11;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  pointer-events: none;
}

.chat-session__logo {
  flex: none;
  width: 34px;
  height: 34px;
  object-fit: contain;
  /* logo claro sobre o liquid glass */
  filter: none;
}

.chat-session__meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.chat-session__new {
  margin-left: auto;
  margin-right: 2.85rem; /* folga para o X de fechar */
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(40, 54, 70, 0.62);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(20, 20, 20, 0.12);
  border-radius: 999px;
  padding: 0.32rem 0.72rem;
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.chat-session__new:hover {
  color: var(--ink-soft);
  background: #ffffff;
  border-color: rgba(20, 20, 20, 0.2);
}

.chat-session__new svg { width: 15px; height: 15px; }

@media (max-width: 560px) {
  .chat-session__new span { display: none; }
  .chat-session__new { margin-right: 2.6rem; padding: 0.36rem; gap: 0; }
}

.chat-session__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.1;
  /* texto claro sobre o liquid glass */
  color: var(--menu-ink);
}

.chat-session__status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.chat-session__state {
  color: rgba(225, 235, 245, 0.7);
  transition: color 0.25s ease;
}

/* cor do texto acompanha o estado (mesma paleta do ponto) */
.chat-session__status[data-state='listening'] .chat-session__state { color: #9cc8ff; }
.chat-session__status[data-state='thinking'] .chat-session__state { color: #cdb6ff; }
.chat-session__status[data-state='speaking'] .chat-session__state { color: #a9e6ff; }
.chat-session__status[data-state='error'] .chat-session__state { color: #ff9c80; }
.chat-session__status[data-state='offline'] .chat-session__state { color: rgba(184, 196, 208, 0.6); }

/* status dot (id #statusDot) — JS troca a classe is-<estado> */
.chat-brand__pulse {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #56d6a0;
  box-shadow: 0 0 0 0 rgba(86, 214, 160, 0.55);
  animation: orca-online-pulse 2.6s ease-out infinite;
}

.chat-brand__pulse.is-listening { background: #6fb6ff; }
.chat-brand__pulse.is-thinking { background: #c2a4ff; }
.chat-brand__pulse.is-speaking { background: #8fe0ff; }
.chat-brand__pulse.is-error { background: #ff8a6a; animation: none; }
.chat-brand__pulse.is-offline { background: rgba(184, 196, 208, 0.5); animation: none; }

@keyframes orca-online-pulse {
  0% { box-shadow: 0 0 0 0 rgba(86, 214, 160, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(86, 214, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(86, 214, 160, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .chat-brand__pulse { animation: none; }
}

/* ── Input do chat (sticky no painel — único composer com chat aberto) ── */
.orca-menu__surface:not(.is-open) .chat-input {
  display: none !important;
}

.chat-input[hidden] {
  display: none !important;
}

.chat-input {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin:
    0
    max(20px, env(safe-area-inset-right, 0px))
    max(20px, env(safe-area-inset-bottom, 0px))
    max(20px, env(safe-area-inset-left, 0px));
  padding: 0.55rem 0.55rem 0.55rem 1.15rem;
  border-radius: 22px;
  background: rgba(7, 13, 22, 0.55);
  border: 1px solid rgba(140, 200, 222, 0.24);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow:
    inset 0 0 0 1px rgba(140, 200, 224, 0.06),
    0 0 18px -6px rgba(94, 190, 222, 0.2),
    0 8px 24px -12px rgba(0, 0, 0, 0.5);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* Painel claro aberto: composer neutro (sem glow azul) alinhado à paleta P&B */
.orca-menu__surface.is-open .chat-input {
  background: #f3f3f3;
  border: 1px solid rgba(20, 20, 20, 0.1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 10px 28px -14px rgba(0, 0, 0, 0.18);
}

.orca-menu__surface.is-open .chat-input:focus-within {
  border-color: rgba(20, 20, 20, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 14px 32px -14px rgba(0, 0, 0, 0.22);
}

.chat-input:focus-within {
  border-color: rgba(150, 212, 232, 0.5);
  box-shadow:
    inset 0 0 0 1px rgba(150, 210, 230, 0.1),
    0 0 26px -4px rgba(104, 202, 232, 0.34),
    0 8px 24px -12px rgba(0, 0, 0, 0.55);
}

.chat-input__field {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--menu-ink);
}

.chat-input__field::placeholder {
  color: rgba(244, 247, 251, 0.4);
}

.chat-input__attach {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.chat-input__attach svg {
  width: 20px;
  height: 20px;
}

.chat-input__attach:hover {
  opacity: 0.9;
  background: rgba(0, 0, 0, 0.06);
}

.chat-input__attach:active {
  transform: scale(0.96);
}

.chat-input__send {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink-soft);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition:
    transform 0.2s var(--ease-spring),
    background 0.22s var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    color 0.22s var(--ease-out);
}

.chat-input__voice-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity 0.14s ease,
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.chat-input__voice-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

.chat-input__voice-icon--send svg {
  transform: translateY(1px);
}

/* data-mode no botão (sincronizado com o card via updateCardUI) */
.chat-input__send[data-mode="mic"] .chat-input__voice-icon--wave,
.chat-input__send[data-mode="record"] .chat-input__voice-icon--wave,
.chat-input__send[data-mode="thinking"] .chat-input__voice-icon--wave {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.chat-input__send[data-mode="send"] .chat-input__voice-icon--send {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.chat-input__send[data-mode="stop"] .chat-input__voice-icon--stop {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.chat-input__send[data-mode="record"] .chat-input__voice-icon--wave svg,
.chat-input__send[data-mode="thinking"] .chat-input__voice-icon--wave svg {
  transform-box: fill-box;
  transform-origin: center;
  animation: orca-mic-pulse 1.2s ease-in-out infinite;
}

.orca-menu__surface.is-open .chat-input__send[data-mode="send"],
.orca-menu__surface.is-open .chat-input__send[data-mode="stop"] {
  background: var(--ink-soft);
  color: #f3f3f3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

.chat-input__send:hover {
  transform: scale(1.06);
}

.chat-input__send:active {
  transform: scale(0.96);
}

.chat-input__send:disabled {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.5);
  cursor: default;
  box-shadow: none;
  transform: none;
}

.chat-controls-hidden {
  display: none !important;
}

.transcript {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  min-height: 0;
  padding:
    4.25rem
    max(1.85rem, env(safe-area-inset-right, 0px))
    max(2rem, env(safe-area-inset-bottom, 0px))
    max(1.85rem, env(safe-area-inset-left, 0px));
  scroll-behavior: smooth;
  scroll-padding-top: 4.9rem;
  /* barra de rolagem oculta (scroll continua funcional) */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* fade no topo: mensagens somem antes de alcançar o cabeçalho */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 3.25rem, #000 4.9rem);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 3.25rem, #000 4.9rem);
}

.transcript::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.chat-form-hidden {
  display: none !important;
}

.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;
}

/* ── Loader do site (4 círculos que giram e pulsam) ── */
.loader {
  --dim: 3rem;
  width: var(--dim);
  height: var(--dim);
  position: relative;
  animation: spin988 2s linear infinite;
}

.loader .circle {
  --color: #333;
  --dim: 1.2rem;
  width: var(--dim);
  height: var(--dim);
  background-color: var(--color);
  border-radius: 50%;
  position: absolute;
}

.loader .circle:nth-child(1) { top: 0; left: 0; }
.loader .circle:nth-child(2) { top: 0; right: 0; }
.loader .circle:nth-child(3) { bottom: 0; left: 0; }
.loader .circle:nth-child(4) { bottom: 0; right: 0; }

@keyframes spin988 {
  0% { transform: scale(1) rotate(0); }
  20%, 25% { transform: scale(1.3) rotate(90deg); }
  45%, 50% { transform: scale(1) rotate(180deg); }
  70%, 75% { transform: scale(1.3) rotate(270deg); }
  95%, 100% { transform: scale(1) rotate(360deg); }
}

/* Variante no chat (fundo escuro/vidro): menor e clara */
.loader--chat { --dim: 1.5rem; }
.loader--chat .circle { --color: rgba(244, 247, 251, 0.7); --dim: 0.5rem; }

/* Variante sobre fundo claro (ex.: redação): escura */
.loader--ink { --dim: 1.3rem; }
.loader--ink .circle { --color: var(--ink); --dim: 0.45rem; }

@media (prefers-reduced-motion: reduce) {
  .loader { animation-duration: 3.4s; }
}

.chat-row--typing {
  margin-bottom: 1.25rem;
}

.transcript__welcome {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: min(42vh, 360px);
  padding-top: 5rem;
}

.transcript__hello {
  margin: 0 0 0.9rem;
  font-family: var(--font-sans);
  font-size: clamp(0.78rem, 1.4vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 247, 251, 0.5);
}

.transcript__greeting {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.4rem, 7vw, 5.6rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: rgba(244, 247, 251, 0.98);
  max-width: min(92%, 560px);
}

.transcript__greeting em {
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(244, 247, 251, 0.55);
  text-transform: none;
}

.transcript__title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  margin-top: 0.15rem;
  max-width: min(96%, 620px);
}

.transcript__lead {
  position: relative;
  max-width: min(92%, 320px);
  margin-top: 0.1rem;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.012em;
  color: rgba(244, 247, 251, 0.56);
}

.transcript__lead::before {
  display: none;
}

@keyframes orca-line-glow {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.orca-menu__surface:not(.is-settled) .transcript__hello,
.orca-menu__surface:not(.is-settled) .transcript__greeting,
.orca-menu__surface:not(.is-settled) .transcript__lead {
  opacity: 0;
}

.orca-menu__surface.is-settled .transcript__hello {
  animation: welcome-rise 0.75s var(--ease-expo) 0.1s both;
}

.orca-menu__surface.is-settled .transcript__greeting {
  animation: welcome-rise 0.75s var(--ease-expo) 0.18s both;
}

.orca-menu__surface.is-settled .transcript__lead {
  animation: welcome-rise 0.75s var(--ease-expo) 0.3s both;
}

@keyframes welcome-rise {
  0% { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════════════
   TEMA CLARO do painel de menu/chat — fundo branco opaco, texto escuro.
   Tudo escopado a .orca-menu__surface.is-open p/ não afetar o resto do site.
   ════════════════════════════════════════════════════════════════════════ */
.orca-menu__surface.is-open {
  --menu-ink: var(--ink-soft);
  --menu-muted: rgba(19, 26, 36, 0.55);
  /* Híbrido: quase-SÓLIDO (~93–96% opaco) p/ leitura/contraste estáveis numa
     superfície de conversa que fica aberta, com um sheen diagonal e um blur LEVE
     só p/ um toque de profundidade — o vidro vira ACENTO, não a base. Bem mais
     barato de GPU que o antigo blur(26px) sobre fundo a 18–40%. */
  background: linear-gradient(
    -75deg,
    rgba(250, 252, 255, 0.93),
    rgba(255, 255, 255, 0.96),
    rgba(250, 252, 255, 0.93)
  );
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
  border: 1px solid rgba(20, 20, 20, 0.10);
  color: var(--menu-ink);
  /* Bevel de vidro (estilo botão liquid-glass): luz interna em cima/embaixo +
     sombra suave para o card "flutuar". Sem hover. */
  box-shadow:
    inset 0 2px 2px rgba(0, 0, 0, 0.05),
    inset 0 -2px 2px rgba(255, 255, 255, 0.5),
    inset 0 0 0.4em 0.2em rgba(255, 255, 255, 0.2),
    var(--elev-modal);
}

/* botão fechar escuro (e visível no hover) */
.orca-menu__surface.is-open .orca-menu__close { color: var(--ink-soft); }
.orca-menu__surface.is-open .orca-menu__close:hover { color: var(--ink-soft); }

/* boas-vindas */
.orca-menu__surface.is-open .transcript__hello { color: rgba(19, 26, 36, 0.55); }
.orca-menu__surface.is-open .transcript__greeting { color: var(--ink-soft); }
.orca-menu__surface.is-open .transcript__greeting em { color: rgba(19, 26, 36, 0.5); }
.orca-menu__surface.is-open .transcript__lead { color: rgba(19, 26, 36, 0.6); }

/* bolhas: usuário em pill escura; Orca em prosa full-width (estilo ChatGPT),
   sem balão branco-no-branco. Tipagem/resumo/redação mantêm container próprio. */
.orca-menu__surface.is-open .chat-row--bot {
  width: 100%;
  justify-content: flex-start;
}
.orca-menu__surface.is-open .chat-bubble--assistant:not(.chat-bubble--typing):not(.chat-resumo):not(.redacao-card) {
  background: transparent;
  color: var(--ink-soft);
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0.2rem 0.15rem;
  max-width: min(100%, 720px);
}
.orca-menu__surface.is-open .chat-bubble--assistant.chat-bubble--typing {
  background: rgba(20, 20, 20, 0.04);
  color: var(--ink-soft);
  border: 1px solid rgba(20, 20, 20, 0.06);
  box-shadow: none;
}
.orca-menu__surface.is-open .chat-bubble--user {
  background: #0e1013;
  color: #f3f3f3;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
}

/* Banner de sistema/erro (não parece mensagem da tutora) */
.chat-row--system {
  width: 100%;
  justify-content: flex-start;
  margin-bottom: 1rem;
}
.chat-banner {
  width: 100%;
  max-width: min(100%, 720px);
  padding: 0.85rem 1.15rem;
  border-radius: 14px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 500;
}
.chat-banner--error {
  color: #4a1818;
  background: rgba(160, 40, 40, 0.07);
  border: 1px solid rgba(160, 40, 40, 0.22);
}
.orca-menu__surface.is-open .chat-banner--error {
  color: #5c1a1a;
}

/* O card de código mantém fundo escuro mesmo na bolha clara. O de PDF NÃO:
   ele é uma resposta enxuta (estilo ChatGPT) e usa o balão branco normal. */
.orca-menu__surface.is-open .chat-bubble--assistant .chat-code { background: var(--ink-soft); }

/* fórmula dentro do balão claro da Orca */
.orca-menu__surface.is-open .chat-bubble--assistant .chat-math { color: #1a222e; }

/* links (fundo claro → escuros e legíveis) */
.orca-menu__surface.is-open .chat-bubble--assistant .chat-link {
  color: #0b7268;
  text-decoration-color: rgba(11, 114, 104, 0.5);
}
.orca-menu__surface.is-open .chat-bubble--assistant .chat-link:hover {
  color: #0a5a52;
  text-decoration-color: rgba(10, 90, 82, 0.85);
}
.orca-menu__surface.is-open .chat-bubble--user .chat-link {
  color: #cfe0ff;
  text-decoration-color: rgba(207, 224, 255, 0.5);
}
.orca-menu__surface.is-open .chat-bubble--user .chat-link:hover { color: #ffffff; }

/* código inline na bolha clara */
.orca-menu__surface.is-open .chat-bubble--assistant .chat-inline-code {
  background: rgba(20, 20, 20, 0.06);
  border-color: rgba(20, 20, 20, 0.12);
  color: #1a222e;
}

/* chip de documento na bolha clara */
.orca-menu__surface.is-open .chat-bubble--assistant .chat-doc {
  background: rgba(20, 20, 20, 0.05);
  border-color: rgba(20, 20, 20, 0.12);
}

/* campo de texto alternativo */
.orca-menu__surface.is-open .chat-input__field { color: var(--ink-soft); }
.orca-menu__surface.is-open .chat-input__field::placeholder { color: rgba(19, 26, 36, 0.4); }
.orca-menu__surface.is-open .chat-input__attach { color: var(--ink-soft); }
.orca-menu__surface.is-open .chat-input__send {
  background: #fff;
  color: var(--ink-soft);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.orca-menu__surface.is-open .chat-input__send:hover {
  background: #f7f7f7;
}
.orca-menu__surface.is-open .chat-input__send[data-mode="send"]:hover,
.orca-menu__surface.is-open .chat-input__send[data-mode="stop"]:hover {
  background: #000;
}
.orca-menu__surface.is-open .chat-input__send:disabled {
  background: rgba(20, 20, 20, 0.08);
  color: rgba(20, 20, 20, 0.35);
  box-shadow: none;
}

/* logo da orca é uma silhueta BRANCA — escurece p/ aparecer no painel branco */
.orca-menu__surface.is-open .chat-session__logo { filter: brightness(0.204); }

@keyframes msg-in {
  0% { opacity: 0; transform: translateY(20px); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}

.chat-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
  padding: 0;
  will-change: transform, opacity;
  animation: msg-in 0.72s var(--ease-expo) both;
}

.chat-bubble {
  max-width: min(94%, 700px);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.62;
  word-break: break-word;
  white-space: pre-wrap;
  padding: 1.05rem 1.4rem;
  border-radius: 1.4rem;
}

/* ── Revelação suave do texto em sincronia com a fala ── */
.chat-reveal { white-space: pre-wrap; }

.chat-bubble .rw {
  display: inline;
  /* Fade suave por palavra, no mesmo espírito do ChatGPT. Só opacity
     (compositável na GPU) — o filter:blur por palavra forçava repaint a cada
     frame e, somado à cena 3D, engasgava a revelação. */
  animation: chat-word-in 0.34s ease both;
}

@keyframes chat-word-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* cursor que pisca enquanto a Orca "escreve falando" */
.chat-reveal__caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.18em;
  background: currentColor;
  border-radius: 1px;
  opacity: 0.55;
  animation: chat-caret-blink 1.05s steps(1) infinite;
}

@keyframes chat-caret-blink {
  0%, 49% { opacity: 0.55; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-bubble .rw { animation: none; }
  .chat-reveal__caret { animation: none; opacity: 0.4; }
}

.chat-bubble--user {
  background: #0e1013;
  color: rgba(244, 247, 251, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.35rem 1.35rem 0.4rem 1.35rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.chat-bubble--assistant {
  background: #0e1013;
  color: rgba(244, 247, 251, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.35rem 1.35rem 1.35rem 0.4rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.chat-bubble--typing {
  padding: 0.75rem 1rem;
  min-width: 3.5rem;
}

.chat-bubble--assistant .chat-link,
.chat-bubble--user .chat-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
}

/* balão da Orca (fundo escuro): link claro */
.chat-bubble--assistant .chat-link {
  color: var(--biolume);
  text-decoration-color: rgba(255, 255, 255, 0.45);
}

.chat-bubble--assistant .chat-link:hover {
  color: var(--biolume-bright);
  text-decoration-color: rgba(255, 255, 255, 0.85);
}

/* balão do usuário (fundo branco): link escuro e legível */
.chat-bubble--user .chat-link {
  color: rgba(10, 12, 16, 0.82);
  text-decoration-color: rgba(10, 12, 16, 0.4);
}

.chat-bubble--user .chat-link:hover {
  color: var(--ink-soft);
}

/* ── Galeria de imagens da resposta (estilo ChatGPT) ── */
.chat-row--gallery { margin-bottom: 0.4rem; }

/* UMA fileira horizontal só (sem quebra de linha). */
.chat-gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px;
  overflow: hidden;
  max-width: min(480px, 94%);
}

.chat-gallery .chat-img {
  position: relative;
  flex: 0 0 auto;
  width: 148px;
  height: 112px;
  border-radius: 12px;
  overflow: hidden;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  display: block;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  cursor: zoom-in;
  transition: transform 0.2s var(--ease-expo, ease), box-shadow 0.2s;
}

.chat-gallery .chat-img:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}

.chat-gallery .chat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.28s var(--ease-expo, ease);
}

.chat-gallery .chat-img:hover img { transform: scale(1.06); }
.chat-gallery .chat-img:focus-visible { outline: 2px solid var(--accent, #ffffff); outline-offset: 2px; }

/* Badge de contagem no canto inferior direito da última miniatura. */
.chat-gallery .chat-img__count {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

/* Quando há mais imagens do que cabem, a última escurece com o "+N". */
.chat-gallery .chat-img--more img { filter: brightness(0.45); }
.chat-gallery .chat-img--more .chat-img__count {
  inset: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  justify-content: center;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 1.1rem;
  backdrop-filter: none;
}

.orca-menu__surface.is-open .chat-gallery .chat-img {
  border-color: rgba(20, 20, 20, 0.1);
  box-shadow: 0 4px 14px rgba(10, 20, 40, 0.12);
}

@media (max-width: 640px) {
  .chat-gallery { max-width: 100%; }
  .chat-gallery .chat-img { width: 112px; height: 84px; }
}

/* ── Lightbox / visualizador de imagens ── */
html.img-lightbox-open { overflow: hidden; }

.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 14, 0.93);
  backdrop-filter: blur(6px);
  animation: imgLightboxIn 0.18s ease;
}

.img-lightbox[hidden] { display: none; }

@keyframes imgLightboxIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.img-lightbox__counter {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.img-lightbox__close {
  position: absolute;
  top: 8px;
  left: 12px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.img-lightbox__close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.img-lightbox__stage {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 78vw;
  max-height: 84vh;
}

.img-lightbox__img {
  max-width: 78vw;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
}

.img-lightbox__caption {
  max-width: min(78vw, 760px);
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  line-height: 1.4;
}
.img-lightbox__title { color: rgba(255, 255, 255, 0.85); }
.img-lightbox__src {
  color: #8ab4ff;
  text-decoration: none;
  white-space: nowrap;
}
.img-lightbox__src:hover { text-decoration: underline; }

.img-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.img-lightbox__nav:hover { background: rgba(255, 255, 255, 0.22); }
.img-lightbox__nav--prev { left: 16px; }
.img-lightbox__nav--next { right: 16px; }
.img-lightbox__nav[hidden] { display: none; }

/* Trilho de miniaturas (lado direito no desktop). */
.img-lightbox__rail {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 4px;
}
.img-lightbox__rail[hidden] { display: none; }

.img-lightbox__thumb {
  width: 64px;
  height: 64px;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  background: #f2f3f5;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.img-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-lightbox__thumb:hover { opacity: 0.85; }
.img-lightbox__thumb.is-active { opacity: 1; border-color: #fff; }

@media (max-width: 640px) {
  .img-lightbox__stage { max-width: 94vw; }
  .img-lightbox__img { max-width: 94vw; max-height: 64vh; }
  .img-lightbox__nav { width: 40px; height: 40px; font-size: 1.5rem; }
  .img-lightbox__nav--prev { left: 6px; }
  .img-lightbox__nav--next { right: 6px; }
  /* No celular o trilho vira uma faixa horizontal embaixo. */
  .img-lightbox__rail {
    top: auto;
    bottom: 12px;
    right: 50%;
    transform: translateX(50%);
    flex-direction: row;
    max-width: 94vw;
    max-height: none;
    overflow-x: auto;
  }
  .img-lightbox__thumb { width: 52px; height: 52px; }
}

.chat-bubble--assistant .chat-link:focus-visible,
.chat-bubble--user .chat-link:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
  border-radius: 2px;
}

.chat-bubble--tool {
  color: var(--menu-muted);
  font-size: 0.78rem;
  padding: 0.35rem 0;
  background: none;
  border-radius: 0;
}

/* ── Código no chat (estilo ChatGPT) ── */
.chat-inline-code {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 0.12em 0.4em;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

/* ── Quiz interativo: cartão por pergunta + alternativas clicáveis ──
   Layout inspirado em apps de quiz/estudo (Quizlet, Kahoot, Brainly):
   cada questão é um cartão com número destacado e alternativas com badge de
   letra (A/B/C/D) que vira ✓/✕ ao responder. */
.quiz-q {
  margin: 0.85rem 0;
  padding: 0.95rem 1rem 1rem;
  background: rgba(128, 128, 128, 0.07);
  border: 1px solid rgba(128, 128, 128, 0.2);
  border-radius: 18px;
}

.quiz-q + .quiz-q {
  margin-top: 0.65rem;
}

/* Herda a cor do balão (escuro ou claro) para o título ser sempre legível. */
.quiz-q__title {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0 0 0.7rem;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.42;
  color: inherit;
}

/* Número da questão num badge discreto (estilo "1", "2"…). */
.quiz-q__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff;
  background: #0e1013;
  border-radius: 8px;
  transform: translateY(0.06rem);
}

.quiz-q__text {
  flex: 1 1 auto;
}

.quiz-q__opts {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.quiz-opt {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  margin: 0;
  padding: 0.62rem 0.8rem;
  font: inherit;
  font-size: 0.92rem;
  text-align: left;
  color: #1a222e;
  background: #f3f5f9;
  border: 1px solid rgba(20, 30, 45, 0.12);
  border-radius: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.quiz-opt:active {
  transform: scale(0.99);
}

.quiz-opt:hover {
  background: #e8edf3;
  border-color: rgba(20, 30, 45, 0.32);
}

/* Badge de letra (A/B/C/D): quadrado arredondado com a inicial da alternativa. */
.quiz-opt__badge {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #2b3645;
  background: rgba(20, 30, 45, 0.08);
  border: 1px solid rgba(20, 30, 45, 0.14);
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.quiz-opt__letter {
  line-height: 1;
}

.quiz-opt__text {
  flex: 1 1 auto;
  line-height: 1.35;
}

/* Selecionada (quando não há gabarito): a alternativa "fica preta". */
.quiz-opt.is-selected {
  background: #0e1013;
  border-color: #0e1013;
  color: #ffffff;
}

.quiz-opt.is-selected .quiz-opt__badge {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.34);
  color: #ffffff;
}

/* Acertou → verde; errou → vermelho (e a correta também acende em verde). */
.quiz-opt.is-correct {
  background: #1f9d57;
  border-color: #1f9d57;
  color: #ffffff;
}

.quiz-opt.is-wrong {
  background: #d2503f;
  border-color: #d2503f;
  color: #ffffff;
}

/* Ao responder, o badge vira um disco branco com ✓/✕ colorido (esconde a letra). */
.quiz-opt.is-correct .quiz-opt__badge,
.quiz-opt.is-wrong .quiz-opt__badge {
  background: #ffffff;
  border-color: #ffffff;
  border-radius: 50%;
}

.quiz-opt.is-correct .quiz-opt__letter,
.quiz-opt.is-wrong .quiz-opt__letter {
  visibility: hidden;
}

.quiz-opt.is-correct .quiz-opt__badge::after,
.quiz-opt.is-wrong .quiz-opt__badge::after {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.quiz-opt.is-correct .quiz-opt__badge::after {
  content: "\2713"; /* ✓ */
  color: #1f9d57;
}

.quiz-opt.is-wrong .quiz-opt__badge::after {
  content: "\2715"; /* ✕ */
  color: #d2503f;
}

/* Questão respondida: trava os cliques (sem hover/cursor de clique). */
.quiz-opt.is-locked {
  pointer-events: none;
}

.quiz-opt:focus-visible {
  outline: 2px solid rgba(20, 30, 45, 0.45);
  outline-offset: 2px;
}

/* ── Correção de redação: nota total + competências + feedback ──
   Layout inspirado em plataformas de correção (Imaginie, Letrus, Redação
   Online): medidor circular da nota + cor semântica por desempenho
   (verde = forte, âmbar = mediano, vermelho = fraco) para leitura instantânea. */
.redacao-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  --lvl-high: #1f9d57;
  --lvl-mid: #c98a1f;
  --lvl-low: #d2503f;
}

/* Hero: medidor circular + identificação da correção. */
.redacao-card__hero {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--hairline);
}

.redacao-card__hero-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

/* Medidor circular (conic-gradient guiado por --pct). */
.redacao-gauge {
  position: relative;
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  --gauge: var(--lvl-mid);
}

.redacao-gauge[data-lvl="high"] { --gauge: var(--lvl-high); }
.redacao-gauge[data-lvl="mid"] { --gauge: var(--lvl-mid); }
.redacao-gauge[data-lvl="low"] { --gauge: var(--lvl-low); }

.redacao-gauge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--gauge) calc(var(--pct, 0) * 1%), rgba(20, 20, 20, 0.1) 0);
}

.redacao-gauge::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: #ffffff;
}

.redacao-gauge__inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.redacao-gauge__inner b {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.redacao-gauge__inner span {
  margin-top: 0.16rem;
  font-size: 0.72rem;
  color: var(--text-muted-l);
}

.redacao-card__badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted-l);
}

.redacao-card__theme {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.redacao-card__theme span {
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted-l);
  margin-right: 0.45rem;
}

.redacao-card__comps {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.redacao-comp {
  display: flex;
  flex-direction: column;
  gap: 0.34rem;
}

.redacao-comp__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.redacao-comp__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.redacao-comp__pts {
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ink);
}

.redacao-comp__pts i {
  font-style: normal;
  font-weight: 500;
  color: var(--text-muted-l);
}

.redacao-comp__bar {
  position: relative;
  height: 7px;
  border-radius: var(--radius-pill);
  background: rgba(20, 20, 20, 0.08);
  overflow: hidden;
}

.redacao-comp__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--text-muted-l);
  transition: width 0.6s var(--ease-expo);
}

/* Cor semântica por desempenho (igual aos apps de correção). */
.redacao-comp__bar[data-lvl="high"] i { background: var(--lvl-high); }
.redacao-comp__bar[data-lvl="mid"] i { background: var(--lvl-mid); }
.redacao-comp__bar[data-lvl="low"] i { background: var(--lvl-low); }

.redacao-comp__comment {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-muted-l);
}

.redacao-card__head-l {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  min-width: 0;
}

.redacao-card__level {
  padding: 0.24rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  color: #ffffff;
  background: var(--lvl-mid);
  border: 1px solid transparent;
}

.redacao-card__level[data-lvl="high"] {
  background: var(--lvl-high);
}

.redacao-card__level[data-lvl="mid"] {
  background: var(--lvl-mid);
}

.redacao-card__level[data-lvl="low"] {
  background: var(--lvl-low);
}

.redacao-card__section {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.redacao-card__section-label,
.redacao-card__verdict span {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted-l);
}

.redacao-card__notes {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.redacao-note {
  padding: 0.8rem 0.9rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--hairline);
}

.redacao-note h4 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted-l);
}

.redacao-note h4::before {
  display: none;
}

.redacao-note--pos {
  border-left: 3px solid var(--lvl-high);
}
.redacao-note--pos h4 { color: var(--lvl-high); }
.redacao-note--pos li::marker { color: var(--lvl-high); }
.redacao-note--imp h4 { color: var(--text-muted-l); }

.redacao-note ul {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.redacao-note li {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.redacao-card__summary {
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Plano de ação numerado — sinaliza ordem de prioridade */
.redacao-note--plan {
  background: rgba(201, 138, 31, 0.06);
  border-left: 3px solid var(--lvl-mid);
}
.redacao-note--plan h4 { color: var(--lvl-mid); }

.redacao-note--plan ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: redacao-plan;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.redacao-note--plan li {
  counter-increment: redacao-plan;
  position: relative;
  padding-left: 2rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.redacao-note--plan li::before {
  content: counter(redacao-plan);
  position: absolute;
  left: 0;
  top: 0.05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #f3f3f3;
  background: var(--ink);
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
}

/* Veredito do corretor — fecho destacado, tom humano */
.redacao-card__verdict {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.05), rgba(20, 20, 20, 0.02));
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--ink);
}

.redacao-card__verdict p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
}

/* Reescrita sugerida — trecho fraco do aluno vs. versão nota máxima */
.redacao-card__rewrite {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.redacao-rewrite {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.redacao-rewrite__from,
.redacao-rewrite__to {
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.55;
}

.redacao-rewrite__from {
  background: rgba(184, 0, 73, 0.05);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--lvl-low);
  color: var(--ink-soft);
}

.redacao-rewrite__to {
  background: rgba(31, 138, 101, 0.06);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--lvl-high);
  color: var(--ink);
}

.redacao-rewrite__from span,
.redacao-rewrite__to span {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted-l);
}

/* Chip de evolução vs. última redação da mesma banca */
.redacao-card__evo {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--hairline);
}

.redacao-card__evo[data-dir="up"] {
  color: var(--lvl-high);
  background: rgba(31, 138, 101, 0.08);
}

.redacao-card__evo[data-dir="down"] {
  color: var(--lvl-low);
  background: rgba(184, 0, 73, 0.06);
}

/* ── Área de Redação dedicada (proposta → folha → correção) ── */
/* O atributo [hidden] precisa vencer o display:flex abaixo (senão a área fica
   sempre renderizada, invisível, cobrindo a tela e bloqueando todos os cliques). */
.redacao-area[hidden] {
  display: none !important;
}

.redacao-area {
  position: fixed;
  inset: 0;
  z-index: 1200;
  /* evita que o conteúdo "vaze" do container fixo e fique inacessível no mobile */
  overflow: hidden;
  display: flex;
  flex-direction: row;
  /* Mesma cor de fundo da página principal (body: var(--n-canvas)). */
  background-color: var(--n-canvas);
  color: var(--ink);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--ease-expo), transform 0.5s var(--ease-expo);

  /* ── Tokens do sistema "pílula" (modelo Uiverse cir-tabs) ──
     Usados para padronizar TODOS os botões e campos do estúdio. */
  --rd-edge: #e3e8ee;          /* contorno claro em repouso */
  --rd-ink: #0e1116;           /* preto do modelo (contorno/preenchido ativo) */
  --rd-mist: #5b6472;          /* texto/placeholder suave */
  --rd-cloud: #ffffff;         /* casca branca */
  --rd-radius: 999px;          /* pílula */
  --rd-radius-soft: 18px;      /* cantos de cards/menus */
  --rd-shadow: 0 1px 1px rgba(14, 17, 22, 0.04), 0 20px 40px -24px rgba(14, 17, 22, 0.18);
  --rd-shadow-ink: 0 1px 1px rgba(14, 17, 22, 0.06), 0 10px 22px -10px rgba(14, 17, 22, 0.5);
  --rd-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rd-font: "Inter", system-ui, -apple-system, sans-serif;
}

/* Fio de luar no topo — bioluminescência discreta, dá "presença" à tela */
.redacao-area::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(680px, 92%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(20, 20, 20, 0.22), transparent);
  pointer-events: none;
}

.redacao-area.is-open {
  opacity: 1;
  transform: none;
}

/* ════════════════════════════════════════════════════════════════════════
   Shell estúdio: barra lateral (paleta ink do site) + área principal
   ════════════════════════════════════════════════════════════════════════ */
.redacao-side {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 1.7rem;

  margin: clamp(0.9rem, 1.8vw, 1.5rem);
  padding: clamp(1.6rem, 2.4vw, 2.2rem) 1.35rem;

  color: rgba(255, 255, 255, 0.74);

  /* Cinza NEUTRO do site (paleta ink, sem azul) — night-rider → eerie-black → chinese-black. */
  background: linear-gradient(
    180deg,
    #2e2e2e 0%,
    #1f1f1f 55%,
    #141414 100%
  );

  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 26px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 40px rgba(0, 0, 0, 0.25);
}

/* Sonar da Orca — anéis concêntricos saindo do canto inferior esquerdo, no idioma
   do pulso de sonar do orb. Antes eu escalava a camada inteira (e a máscara junto),
   então no começo os anéis ficavam encolhidos no canto e a lateral ficava vazia —
   aquele início estranho. Agora os anéis FICAM sempre preenchendo a área e só
   DERIVAM para fora: animo o offset dos anéis (--sonar-r) de 0 até um período
   inteiro (92px), então o loop é perfeitamente contínuo, sem buraco e sem salto.
   A máscara (fade pra cima) é FIXA, nunca encolhe. */
@property --sonar-r {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.redacao-side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  /* Anéis um pouco mais grossos: banda com platô (11→15px) e fades suaves dos
     dois lados, repetida a cada 92px. */
  background: repeating-radial-gradient(
    circle at 0% 100%,
    rgba(255, 255, 255, 0) calc(var(--sonar-r) + 0px),
    rgba(255, 255, 255, 0) calc(var(--sonar-r) + 6px),
    rgba(255, 255, 255, 0.24) calc(var(--sonar-r) + 11px),
    rgba(255, 255, 255, 0.24) calc(var(--sonar-r) + 15px),
    rgba(255, 255, 255, 0) calc(var(--sonar-r) + 20px),
    rgba(255, 255, 255, 0) calc(var(--sonar-r) + 92px)
  );

  -webkit-mask: radial-gradient(circle at 0% 100%, #000 0%, rgba(0, 0, 0, 0.55) 34%, transparent 72%);
  mask: radial-gradient(circle at 0% 100%, #000 0%, rgba(0, 0, 0, 0.55) 34%, transparent 72%);

  animation: redacao-sonar 3s linear infinite;
}

/* Deriva os anéis exatamente um período (92px) → como o padrão se repete a cada
   92px, ao chegar em 92px ele fica idêntico ao 0px: loop contínuo e sem salto. */
@keyframes redacao-sonar {
  from { --sonar-r: 0px; }
  to { --sonar-r: 92px; }
}

/* Acessibilidade / aparelho fraco: sem animação, mantém os anéis estáticos. */
@media (prefers-reduced-motion: reduce) {
  .redacao-side::before {
    animation: none;
    transform: none;
    opacity: 1;
  }
}
.perf-lite .redacao-side::before {
  animation: none;
  transform: none;
  opacity: 1;
}

/* Canvas antigo (WebGL) — desativado. */
.redacao-side__waves {
  display: none;
}

/* Vídeo de fundo do sidebar (ocean depths). Fica clipado pelo overflow:hidden
   da .redacao-side, atrás do conteúdo. */
.redacao-side > .redacao-side__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* Camada escura sobre o vídeo para manter o texto/ícones legíveis. */
.redacao-side::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(16, 19, 24, 0.5) 0%, rgba(16, 19, 24, 0.78) 100%);
}

/* Conteúdo acima das ondas */
.redacao-side > * {
  position: relative;
  z-index: 1;
}

.redacao-side__brand {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.18s var(--ease-out), transform 0.12s ease;
}

.redacao-side__brand:hover { opacity: 0.85; }
.redacao-side__brand:active { transform: scale(0.97); }

.redacao-side__mark {
  width: 54px;
  height: 54px;
  object-fit: contain;
  /* logo é silhueta branca → mantém clara no fundo escuro */
  filter: brightness(0) invert(1);
  opacity: 0.96;
}

.redacao-side__nav {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  position: relative;
}

/* Glider: pílula que DESLIZA entre as etapas (mesma fluidez de mola do Uiverse,
   by Smit-Prajapati). A posição/tamanho são calculados em JS (offset do item
   ativo), então funciona igual na vertical (PC) e na horizontal (celular). */
.redacao-side__glider {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 14px;
  /* Pérola polida: pílula branca com gloss no topo e sombra interna na base —
     profundidade sem glow, a "cara" da Orca no escuro. */
  background: linear-gradient(180deg, #ffffff 0%, #f5f7f9 56%, #e9edf2 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 -12px 18px -12px rgba(20, 20, 20, 0.22) inset,
    0 12px 26px -10px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  will-change: transform, width, height;
  transition:
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    width 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.28s ease;
}

/* Barra de acento na borda — o marcador "você está aqui", limpo e sem glow. */
.redacao-side__glider::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  width: 3px;
  height: 44%;
  transform: translateY(-50%);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--biolume-bright), rgba(255, 255, 255, 0.55));
  pointer-events: none;
}

.redacao-side__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.9rem 1rem;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  text-align: left;
  color: rgba(255, 255, 255, 0.66);
  background: transparent;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease-in-out, opacity 0.18s ease;
}

.redacao-side__item svg {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  opacity: 0.85;
}

.redacao-side__item:not([data-state="active"]):hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* O realce do ativo é o glider (pílula branca que desliza); texto escuro p/ contraste. */
.redacao-side__item[data-state="active"] {
  color: var(--ink);
}

.redacao-side__item[data-state="active"] svg { opacity: 1; }
.redacao-side__item[data-state="done"] { color: rgba(255, 255, 255, 0.85); }

.redacao-side__item.is-locked {
  opacity: 0.38;
  cursor: default;
}
.redacao-side__item.is-locked:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.66);
}

/* Botão "Guia de gêneros" — fora do fluxo de etapas, mesmo idioma dos itens */
.redacao-side__guide {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.8rem 1rem;
  font: inherit;
  font-size: 0.96rem;
  font-weight: 600;
  text-align: left;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out);
}

.redacao-side__guide svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  opacity: 0.8;
}

.redacao-side__guide:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.redacao-side__tip {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1.1rem 1.15rem;
  /* Vidro escuro: semitransparente para deixar o fundo do sidebar aparecer,
     com blur para legibilidade — sem o glow branco neumórfico. */
  background: rgba(20, 20, 20, 0.42);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: none;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

/* Sem backdrop-filter: cai para um fundo escuro mais opaco (mantém legibilidade). */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .redacao-side__tip { background: rgba(20, 20, 20, 0.82); }
}

/* Badge do ícone: lâmpada amarela (raios + bulbo sólido) num quadrado tingido de
   amarelo, dando peso visual e combinando com o resto do app. */
.redacao-side__tip-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  margin-top: 1px;
  color: #fff;
}

.redacao-side__tip-ico svg { width: 22px; height: 22px; }

.redacao-side__tip-body { min-width: 0; }

.redacao-side__tip-h {
  display: block;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
}

.redacao-side__tip p {
  margin: 0.2rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.66);
}

.redacao-main {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  /* permite que o container de scroll interno encolha e role (flex aninhado) */
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Marca d'água da seção — mesma linguagem do wordmark "ORCA" da home: display
   gigante, monocromático bem sutil, dissolvendo na metade de baixo. Fica fixa
   atrás do conteúdo (não rola) e mostra o nome da seção ativa. */
.redacao-watermark {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  overflow: hidden;
}

.redacao-watermark span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4.5rem, 16vw, 16rem);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: rgba(20, 20, 20, 0.06);
  user-select: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 38%,
    rgba(0, 0, 0, 0.55) 64%,
    rgba(0, 0, 0, 0.18) 84%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 38%,
    rgba(0, 0, 0, 0.55) 64%,
    rgba(0, 0, 0, 0.18) 84%,
    rgba(0, 0, 0, 0) 100%
  );
}

.redacao-main__top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1rem clamp(1rem, 4vw, 2.4rem);
}

.redacao-user {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.5rem 0.4rem 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.redacao-user__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--text-muted-l);
  background: var(--n-canvas);
  border: 1px solid var(--hairline);
}

.redacao-user__avatar svg { width: 18px; height: 18px; }

/* Hero editorial com ilustração (caderno + caneta) */
.redacao-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.6rem, 4vw, 2.4rem);
}

.redacao-hero__copy { min-width: 0; }

.redacao-hero__art {
  flex: 0 0 auto;
  width: clamp(180px, 26vw, 280px);
  color: var(--ink);
}

.redacao-hero__art svg,
.redacao-hero__art img { width: 100%; height: auto; display: block; }

.redacao-hero__art img {
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(15, 23, 42, 0.12));
}

/* Caixa "Importante" */
.redacao-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-top: 1.6rem;
  padding: 1rem 1.2rem;
  background: rgba(20, 20, 20, 0.035);
  border: 1px solid var(--hairline);
  border-radius: 16px;
}

.redacao-notice svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 0.05rem;
  color: var(--ink-soft);
}

.redacao-notice b {
  display: block;
  font-size: 0.86rem;
  color: var(--ink);
}

.redacao-notice span {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-muted-l);
}

/* ── Responsivo: sidebar vira barra superior compacta ── */
@media (max-width: 860px) {
  .redacao-area { flex-direction: column; }
  .redacao-side {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    /* Header mais alto para os ícones não encostarem na onda. A onda em si tem
       ALTURA FIXA (faixa na base), então o "formato"/escala dela continua igual
       ao deploy — só ganha mais oceano sólido acima. */
    padding: 1.25rem 0.9rem 4rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Duas camadas de máscara:
       1) gradiente sólido cobrindo o topo (mantém o header visível mesmo alto);
       2) a onda do SVG ancorada na base, com ALTURA FIXA (--wave-h) → o formato
          da onda fica idêntico ao deploy, sem escalar com a altura do header.
       As camadas se sobrepõem um pouco para não deixar emenda. */
    --wave-h: 96px;
    -webkit-mask-image:
      linear-gradient(#000, #000),
      url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20320'%20preserveAspectRatio='none'%3E%3Cpath%20fill='black'%20d='M0,200%20C160,130%20560,130%20720,200%20C880,270%201280,270%201440,200%20L1440,0%20L0,0%20Z'/%3E%3C/svg%3E");
    mask-image:
      linear-gradient(#000, #000),
      url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20320'%20preserveAspectRatio='none'%3E%3Cpath%20fill='black'%20d='M0,200%20C160,130%20560,130%20720,200%20C880,270%201280,270%201440,200%20L1440,0%20L0,0%20Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat, repeat-x;
    mask-repeat: no-repeat, repeat-x;
    -webkit-mask-size: 100% calc(100% - var(--wave-h) + 16px), 100vw var(--wave-h);
    mask-size: 100% calc(100% - var(--wave-h) + 16px), 100vw var(--wave-h);
    -webkit-mask-position: left top, left bottom;
    mask-position: left top, left bottom;
    -webkit-mask-mode: alpha, alpha;
    mask-mode: alpha, alpha;
    animation: orcaSideMask 20s linear infinite;
  }
  /* Sem scrollbar visível na barra compacta. */
  .redacao-side::-webkit-scrollbar { width: 0; height: 0; display: none; }
  /* Remove o fio divisório do topo da área. */
  .redacao-area::before { display: none; }
  .redacao-side__brand { margin-right: auto; }
  .redacao-side__mark { width: 34px; height: 34px; }
  .redacao-side__nav { flex-direction: row; gap: 0.3rem; }
  .redacao-side__item { padding: 0.5rem 0.6rem; border-radius: 12px; }
  /* Só ícones na barra compacta — sem rótulos, nem no item ativo.
     O destaque do item ativo fica só na pílula de fundo. */
  .redacao-side__item span { display: none; }
  .redacao-side__item[data-state="active"] {
    background: rgba(255, 255, 255, 0.12);
  }
  /* Barra de acento é vertical: não faz sentido na nav horizontal compacta. */
  .redacao-side__glider::before { display: none; }
  .redacao-side__tip { display: none; }
  .redacao-main__top { padding-top: 0.6rem; padding-bottom: 0.2rem; }

  /* Sonar na barra compacta: os anéis saem do canto inferior esquerdo de uma faixa
     baixa e larga, ficando "achatados". Reancoramos a máscara mais ao centro-baixo
     e suavizamos para o fundo não competir com os ícones. */
  .redacao-side::before {
    -webkit-mask: radial-gradient(120% 240% at 8% 120%, #000 0%, rgba(0, 0, 0, 0.4) 38%, transparent 70%);
    mask: radial-gradient(120% 240% at 8% 120%, #000 0%, rgba(0, 0, 0, 0.4) 38%, transparent 70%);
    opacity: 0.7;
  }
}

/* Deslize da máscara ondulada do header (mobile). A máscara repete a cada 100vw
   (um ciclo), então mover 100vw cai num ponto idêntico → loop contínuo, com a
   borda da água "correndo" suavemente para a esquerda. */
@keyframes orcaSideMask {
  from {
    -webkit-mask-position: left top, 0 bottom;
    mask-position: left top, 0 bottom;
  }
  to {
    -webkit-mask-position: left top, 100vw bottom;
    mask-position: left top, 100vw bottom;
  }
}

/* Acessibilidade: quem pede menos movimento não vê a animação. */
@media (prefers-reduced-motion: reduce) {
  .redacao-side {
    animation: none !important;
  }
}

@media (max-width: 640px) {
  .redacao-hero { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .redacao-hero__art { display: none; }
  .redacao-banca-list { gap: 0.7rem; }
  .redacao-bcard { padding: 1rem 1rem 1.05rem; border-radius: 16px; gap: 0.35rem; }
  .redacao-bcard__logo { width: 60px; height: 36px; }
  .redacao-bcard__name { font-size: 1.08rem; }
  .redacao-bcard__desc { font-size: 0.8rem; }
  .redacao-bcard__meta { margin-top: 0.4rem; gap: 0.3rem; }
  .redacao-bcard__meta-i { font-size: 0.72rem; }
  .redacao-bcard__foot { flex-direction: column; align-items: stretch; gap: 0.5rem; padding-top: 0.8rem; }
  .redacao-bcard__select { width: 100%; padding: 0.55rem 0.9rem; font-size: 0.86rem; }
  .redacao-bcard__ref { text-align: left; }
  .redacao-bcard__go { display: none; }
}

@media (max-width: 380px) {
  .redacao-banca-list { grid-template-columns: 1fr; }
}

.redacao-area__bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.9rem;
  padding:
    var(--menu-margin)
    var(--menu-margin-x)
    var(--menu-margin)
    max(1.5rem, env(safe-area-inset-left, 0px));
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.redacao-area__home {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  text-decoration: none;
  cursor: pointer;
  color: var(--ink-soft);
  transition: opacity 0.18s var(--ease-out), transform 0.12s ease;
}

.redacao-area__home:hover { opacity: 0.85; }
.redacao-area__home:active { transform: scale(0.98); }

.redacao-area__mark {
  width: var(--nav-mark-size);
  height: var(--nav-mark-size);
  object-fit: contain;
  /* logo é silhueta branca → brightness(0.204) deixa no cinza do site */
  filter: brightness(0.204);
}

.redacao-area__wordmark {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.05;
  font-family: var(--font-display);
  font-weight: 500;
}

.redacao-area__name {
  font-size: var(--nav-name-size);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}

.redacao-area__tag {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(52, 52, 52, 0.42);
}

.redacao-area__step {
  display: none;
}

.redacao-area__scroll {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: clamp(0.5rem, 1.5vw, 1rem) clamp(1.2rem, 4vw, 2.6rem) 4rem;
}

.redacao-choose,
.redacao-write,
.redacao-result {
  width: min(1360px, 100%);
  margin: 0 auto;
}

/* Centraliza verticalmente o card "Escolha a proposta" (wizard do Treinar), no
   desktop e no mobile. Só ativa quando o wizard está presente (:has). Usa margens
   auto dentro de um flex column → centro real, mas continua rolável (sem cortar o
   topo) quando o card for mais alto que a área visível. */
.redacao-area__scroll:has(> .redacao-choose:not([hidden]) > .redacao-wiz) {
  display: flex;
  flex-direction: column;
  /* iguala o respiro inferior ao superior para o centro ser simétrico (o padding
     padrão tem 4rem embaixo, o que empurraria o card pra cima). */
  padding-bottom: clamp(0.5rem, 1.5vw, 1rem);
}
.redacao-choose:not([hidden]):has(> .redacao-wiz) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.redacao-choose:not([hidden]):has(> .redacao-wiz) > .redacao-wiz {
  margin-top: auto;
  margin-bottom: auto;
}
/* No mobile/tablet a centralização vertical deixa um vão grande no topo e empurra
   o conteúdo do card para baixo. Alinhamos ao topo para o usuário ver as opções
   imediatamente. */
@media (max-width: 768px) {
  .redacao-area__scroll:has(> .redacao-choose:not([hidden]) > .redacao-wiz) {
    justify-content: flex-start;
  }
  .redacao-choose:not([hidden]):has(> .redacao-wiz) {
    flex: 0 0 auto;
  }
  .redacao-choose:not([hidden]):has(> .redacao-wiz) > .redacao-wiz {
    margin-top: 0;
    margin-bottom: 0;
  }
}
/* O atributo [hidden] precisa vencer qualquer display: flex/grid das seções
   (senão o wizard "Escolha a proposta" fica sobreposto à escrita/correção). */
.redacao-choose[hidden],
.redacao-write[hidden],
.redacao-result[hidden] {
  display: none !important;
}

/* ── Indicador de etapas (Banca · Tema · Escrita · Correção) ── */
.redacao-steps {
  width: min(1360px, 100%);
  margin: 0 auto clamp(1.6rem, 3.5vw, 2.4rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.redacao-steps__item {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--text-muted-l);
  transition: color 0.25s var(--ease-out);
}

.redacao-steps__item i {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  border: 1.5px solid var(--hairline-strong);
  background: #fff;
  color: var(--text-muted-l);
  transition: all 0.25s var(--ease-out);
}

/* linha conectora entre os passos */
.redacao-steps__item:not(:last-child)::after {
  content: "";
  flex: 1 1 auto;
  height: 1.5px;
  margin-left: 0.25rem;
  border-radius: 2px;
  background: var(--hairline-strong);
  transition: background 0.25s var(--ease-out);
}

.redacao-steps__item[data-state="active"] { color: var(--ink); }
.redacao-steps__item[data-state="active"] i {
  border-color: var(--ink);
  background: var(--ink);
  color: #f3f3f3;
  box-shadow: 0 4px 12px rgba(20, 20, 20, 0.22);
}

.redacao-steps__item[data-state="done"] { color: var(--ink-soft); }
.redacao-steps__item[data-state="done"] i {
  border-color: var(--ink);
  background: #fff;
  color: var(--ink);
}
.redacao-steps__item[data-state="done"]::after { background: var(--ink-soft); }

@media (max-width: 560px) {
  .redacao-steps { gap: 0.3rem; }
  .redacao-steps__item { font-size: 0.7rem; gap: 0.35rem; }
  .redacao-steps__item i { width: 1.3rem; height: 1.3rem; font-size: 0.72rem; }
}

/* ── Escolha de banca / gênero ── */
.redacao-choose__back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1.4rem;
  padding: 0.45rem 0.8rem 0.45rem 0.6rem;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-muted-l);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
}

.redacao-choose__back:hover {
  background: #ffffff;
  border-color: var(--hairline-strong);
  color: var(--ink);
}

.redacao-choose__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted-l);
}

.redacao-choose__eyebrow::before {
  display: none;
}

.redacao-choose__h {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.redacao-choose__sub {
  max-width: 46ch;
  margin: 0 0 2rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--text-muted-l);
}

/* ── Home da redação: texto centralizado + escolha de banca ── */
.redacao-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: clamp(1.5rem, 6vh, 4rem);
}

/* landing: só o texto, centralizado vertical e horizontalmente */
.redacao-home--landing {
  min-height: min(70vh, 620px);
  justify-content: center;
  padding-top: 0;
}

/* PC: maior e mais centralizado */
@media (min-width: 901px) {
  .redacao-home--landing {
    min-height: min(82vh, 820px);
  }

  .redacao-home--landing .redacao-home__kicker {
    font-size: 0.82rem;
    margin-bottom: 1.1rem;
  }

  .redacao-home--landing .redacao-home__h {
    max-width: 18ch;
    font-size: clamp(3rem, 4.6vw, 4.4rem);
  }

  .redacao-home--landing .redacao-home__sub {
    max-width: 60ch;
    margin-top: 1.4rem;
    font-size: 1.3rem;
    line-height: 1.55;
  }
}

/* ── Revelação de entrada (alto desempenho: só transform/opacity) ── */
.redacao-home--landing .redacao-home__kicker {
  opacity: 0;
  transform: translateY(10px);
  animation: redacaoHomeFade 0.7s var(--ease-out) 0.08s forwards;
}

.redacao-home--landing .redacao-home__h {
  /* permite que a máscara das palavras corte sem clipar descendentes */
  margin-bottom: 0;
}

.redacao-home__word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  vertical-align: bottom;
}

.redacao-home__word > span {
  display: inline-block;
  transform: translateY(115%);
  will-change: transform;
  animation: redacaoHomeWord 0.92s var(--ease-expo) forwards;
  animation-delay: calc(0.22s + var(--i) * 0.075s);
}

.redacao-home--landing .redacao-home__sub {
  max-width: 52ch;
  opacity: 0;
  transform: translateY(14px);
  will-change: transform, opacity;
  animation: redacaoHomeFade 0.85s var(--ease-out) forwards;
  animation-delay: calc(0.22s + var(--words, 6) * 0.075s + 0.12s);
}

@keyframes redacaoHomeWord {
  to { transform: translateY(0); }
}

@keyframes redacaoHomeFade {
  to { opacity: 1; transform: translateY(0); }
}

/* HOME do estúdio já vista nesta sessão: não reanima as palavras/subtítulo ao
   voltar (gsap-anim.js adiciona .redacao-seen-home após a 1ª entrada). */
html.redacao-seen-home .redacao-home--landing .redacao-home__kicker,
html.redacao-seen-home .redacao-home--landing .redacao-home__sub,
html.redacao-seen-home .redacao-home__word > span {
  animation: none;
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .redacao-home--landing .redacao-home__kicker,
  .redacao-home--landing .redacao-home__sub,
  .redacao-home__word > span {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.redacao-home__kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted-l);
  margin-bottom: 0.8rem;
}

.redacao-home__h {
  margin: 0;
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.2vw, 3.2rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.redacao-home__sub {
  margin: 0.9rem 0 0;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--text-muted-l);
}

.redacao-home .redacao-banca-list {
  width: 100%;
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
  text-align: left;
}

.redacao-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.85rem;
}

.redacao-pick {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.15rem 1.2rem;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, var(--n-bright) 100%);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 8px 22px rgba(20, 20, 20, 0.04);
  transition: border-color 0.2s var(--ease-out), transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out);
  animation: redacaoRise 0.5s var(--ease-expo) both;
}

/* Acento de luar que cresce na borda esquerda no hover */
.redacao-pick::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  transform: translateY(-50%);
  background: var(--ink);
  border-radius: 0 3px 3px 0;
  transition: height 0.28s var(--ease-out);
}

.redacao-pick:hover {
  border-color: var(--hairline-strong);
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 40px rgba(20, 20, 20, 0.1);
}

.redacao-pick:hover::before { height: 56%; }

.redacao-pick:active { transform: translateY(-1px) scale(0.995); }

.redacao-pick:focus-visible {
  outline: none;
  border-color: var(--ink-soft);
  box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.12);
}

.redacao-pick__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.redacao-pick__desc {
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-muted-l);
}

@keyframes redacaoRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.redacao-grid .redacao-pick:nth-child(2) { animation-delay: 0.04s; }
.redacao-grid .redacao-pick:nth-child(3) { animation-delay: 0.08s; }
.redacao-grid .redacao-pick:nth-child(4) { animation-delay: 0.12s; }
.redacao-grid .redacao-pick:nth-child(5) { animation-delay: 0.16s; }
.redacao-grid .redacao-pick:nth-child(6) { animation-delay: 0.2s; }

/* ── Cards de banca expansíveis (acordeão, glassmorphism) ── */
/* Busca de banca */
.redacao-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 0 1.1rem;
}

.redacao-search svg {
  position: absolute;
  left: 1rem;
  width: 18px;
  height: 18px;
  color: var(--text-muted-l);
  pointer-events: none;
}

.redacao-search input {
  width: 100%;
  padding: 0.85rem 1rem 0.85rem 2.7rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 4px 14px rgba(20, 20, 20, 0.04);
  transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}

.redacao-search input::placeholder { color: var(--text-muted-l); }
.redacao-search input:focus {
  outline: none;
  border-color: var(--ink-soft);
  box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.07);
}

.redacao-banca-empty {
  margin: 0.4rem 0 0;
  font-size: 0.92rem;
  color: var(--text-muted-l);
}

.redacao-banca-list {
  display: grid;
  /* auto-fill: 2 colunas em telas médias, mais colunas no PC largo (fullscreen)
     em vez de 2 cards muito esticados. */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.95rem;
}

.redacao-bcard {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.3rem 1.35rem;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 6px 18px rgba(20, 20, 20, 0.04);
  cursor: pointer;
  transition: border-color 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), transform 0.18s var(--ease-out);
  animation: redacaoRise 0.5s var(--ease-expo) both;
}

.redacao-bcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.15rem;
}

.redacao-bcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 1rem;
}

.redacao-banca-list .redacao-bcard:nth-child(2) { animation-delay: 0.05s; }
.redacao-banca-list .redacao-bcard:nth-child(3) { animation-delay: 0.1s; }
.redacao-banca-list .redacao-bcard:nth-child(4) { animation-delay: 0.15s; }
.redacao-banca-list .redacao-bcard:nth-child(5) { animation-delay: 0.2s; }

.redacao-bcard:hover {
  border-color: var(--hairline-strong);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 14px 34px rgba(20, 20, 20, 0.09);
  transform: translateY(-1px);
}

.redacao-bcard:focus-visible {
  outline: none;
  border-color: var(--ink-soft);
  box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.08);
}

.redacao-bcard__logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 54px;
}

.redacao-bcard__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.redacao-bcard__logo--text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}

.redacao-bcard__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

/* Logo da banca selecionada na barra superior */
.redacao-area__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0;
  margin-right: 0.15rem;
  vertical-align: middle;
}

.redacao-area__logo img {
  max-height: 34px;
  max-width: 120px;
  object-fit: contain;
}

.redacao-area__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Logo no visualizador de referência */
.redacao-exemplar__bar-main { min-width: 0; }

.redacao-exemplar__logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 72px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.redacao-exemplar__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.redacao-bcard__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.redacao-bcard__desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-muted-l);
}

.redacao-bcard__meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.redacao-bcard__meta-i {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted-l);
}

.redacao-bcard__meta-i::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hairline-strong);
}

.redacao-bcard__sub { margin-top: 0.4rem; }

.redacao-bcard__ref {
  padding: 0;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted-l);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.15s var(--ease-out);
}

.redacao-bcard__ref:hover { color: var(--ink); }

.redacao-bcard__select {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.6rem 1.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #f3f3f3;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 12px;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), opacity 0.18s var(--ease-out);
}

.redacao-bcard:hover .redacao-bcard__select,
.redacao-bcard:focus-visible .redacao-bcard__select {
  box-shadow: 0 8px 18px rgba(20, 20, 20, 0.18);
}

.redacao-bcard__go {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--text-muted-l);
  transition: transform 0.25s var(--ease-out), color 0.2s ease;
}

.redacao-bcard:hover .redacao-bcard__go { transform: translateX(3px); color: var(--ink); }
.redacao-bcard:hover { border-color: var(--ink-soft); }

.redacao-btn--ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: transparent;
}

.redacao-btn--ghost svg { opacity: 0.7; }

.redacao-btn--primary svg { margin-left: 0.15rem; }

/* ── Visualizador de Redação de Referência (anotada) ── */
.redacao-exemplar {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.4rem);
  overflow-y: auto;
  background: rgba(18, 22, 28, 0.34);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.26s var(--ease-out);
}

.redacao-exemplar[hidden] { display: none; }
.redacao-exemplar.is-open { opacity: 1; }

.redacao-exemplar__panel {
  width: min(960px, 100%);
  margin: auto;
  padding: clamp(1.3rem, 3.5vw, 2.2rem);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
  backdrop-filter: blur(26px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(18, 22, 28, 0.3);
  transform: translateY(14px);
  transition: transform 0.32s var(--ease-expo);
}

.redacao-exemplar.is-open .redacao-exemplar__panel { transform: none; }

/* ════════════════════════════════════════════════════════════════════════
   TREINAR — wizard "Escolha a proposta" (dropdowns em cascata)
   Identidade do site: paleta neutra fria, tinta --ink, hairlines e kickers.
   ════════════════════════════════════════════════════════════════════════ */
.redacao-wiz {
  width: 100%;
  max-width: 680px;
  margin: clamp(1.5rem, 7vh, 5.5rem) auto 0;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(20, 20, 20, 0.08);
  /* overflow: visible para não recortar menus de dropdown que se abrem para fora do card.
     O recorte do header curvo é feito apenas no próprio header (abaixo). */
  overflow: visible;
}

.redacao-wiz__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.4rem;
  min-height: 188px;
  margin: 0;
  padding: 2.6rem 1.5rem 6rem;
  color: #f3f3f3;
  background: linear-gradient(170deg, #2e2e2e 0%, #1f1f1f 52%, #141414 100%);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  overflow: hidden;
}

/* Onda sólida única na base do header: preenchida com a cor do corpo (branco),
   ela "recorta" o header escuro numa curva suave e se funde sem emendas ao card
   branco logo abaixo. */
.redacao-wiz__waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 104px;
  z-index: 1;
  display: block;
  pointer-events: none;
}

.redacao-wiz__wave { fill: #fff; }

.redacao-wiz__head-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.redacao-wiz__kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 251, 252, 0.55);
}

.redacao-wiz__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 2.7rem);
  letter-spacing: -0.015em;
}

.redacao-wiz__body {
  padding: clamp(1.1rem, 3vw, 1.7rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Campo sem caixa própria: evita "contorno dentro de contorno" (o card já tem
   borda e o dropdown/input interno tem a sua). Só o rótulo + controle, alinhados
   às margens do corpo; o espaçamento entre campos vem do gap do __body. */
.redacao-wiz__field {
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.redacao-wiz__flabel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.redacao-wiz__badge { margin-left: auto; }

/* Selecionado: apenas uma bolinha com check (sem contorno reforçado, sem rótulo
   "Selecionado" e sem o ponto cinza antes do label). */
.redacao-wiz__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: #f3f3f3;
}

.redacao-wiz__check svg { display: block; }

/* ── Dropdown customizado (gatilho + painel flutuante) ── */
.redacao-dd { position: relative; }

.redacao-dd__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 0.95rem;
  font: inherit;
  font-size: 0.98rem;
  text-align: left;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 11px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.redacao-dd__trigger:hover { border-color: var(--hairline-strong); }

.redacao-dd.is-open .redacao-dd__trigger {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.1);
}

.redacao-dd__value {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.redacao-dd__value.is-placeholder { color: var(--text-muted-l); }

.redacao-dd__chev {
  flex: 0 0 auto;
  color: var(--ink-icon);
  transition: transform 0.25s var(--ease-out);
}

.redacao-dd.is-open .redacao-dd__chev { transform: rotate(180deg); }

.redacao-dd__menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 288px;
  overflow-y: auto;
  padding: 0.4rem;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(20, 20, 20, 0.16);
  opacity: 0;
  transform: translateY(-6px) scale(0.985);
  transform-origin: top center;
  transition: opacity 0.16s var(--ease-out), transform 0.16s var(--ease-out);
}

.redacao-dd.is-anim .redacao-dd__menu { opacity: 1; transform: none; }

.redacao-dd__opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.62rem 0.7rem;
  font: inherit;
  font-size: 0.94rem;
  text-align: left;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.redacao-dd__opt span { flex: 1 1 auto; }

.redacao-dd__opt:hover { background: rgba(20, 20, 20, 0.05); color: var(--ink); }

.redacao-dd__opt.is-active { color: var(--ink); font-weight: 600; }

.redacao-dd__check {
  flex: 0 0 auto;
  opacity: 0;
  color: var(--ink);
}

.redacao-dd__opt.is-active .redacao-dd__check { opacity: 1; }

.redacao-dd__menu::-webkit-scrollbar { width: 12px; }
.redacao-dd__menu::-webkit-scrollbar-thumb {
  background: rgba(20, 20, 20, 0.18);
  border-radius: 999px;
  border: 3px solid #fff;
}

.redacao-dd.is-disabled { opacity: 0.5; pointer-events: none; }

.redacao-wiz__own {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.7rem;
}

.redacao-wiz__own .redacao-input { flex: 1 1 auto; }

.redacao-wiz__prop {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  background: rgba(20, 20, 20, 0.025);
}

.redacao-wiz__plabel {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted-l);
  margin-bottom: 0.45rem;
}

.redacao-wiz__ptema {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.7rem;
}

.redacao-wiz__pcmd {
  margin: 0 0 0.7rem;
  padding: 0.75rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
  background: rgba(20, 20, 20, 0.04);
  border-left: 3px solid var(--ink);
  border-radius: 0 12px 12px 0;
}

.redacao-wiz__ptexts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.redacao-wiz__limit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.9rem;
  color: var(--ink);
}

.redacao-wiz__limit span { color: var(--text-muted-l); }

.redacao-wiz__ready {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted-l);
}

.redacao-wiz__ready svg { flex: 0 0 auto; color: var(--ink); }

.redacao-wiz__actions {
  display: flex;
  justify-content: flex-end;
}

/* Garante que elementos com [hidden] no wizard fiquem realmente ocultos
   (classes com display: flex/grid sobrepõem o display:none do [hidden]). */
.redacao-wiz [hidden] { display: none !important; }

.redacao-wiz__propor { min-width: 200px; }

/* Confirmação (Propor redação) — reaproveita o overlay .redacao-exemplar */
.redacao-confirm__panel { width: min(560px, 100%); }

.redacao-confirm__row { margin-top: 0.9rem; }

.redacao-confirm__k {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted-l);
  margin-bottom: 0.25rem;
}

.redacao-confirm__v {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

.redacao-confirm__actions {
  display: flex;
  gap: 0.8rem;
  justify-content: flex-end;
  margin-top: 1.4rem;
}

.redacao-confirm__cancel {
  background: #fff;
  color: var(--ink);
  border-color: var(--hairline-strong);
}

.redacao-confirm__cancel:hover {
  background: rgba(20, 20, 20, 0.04);
}

/* Wizard — Quantidade de palavras (Mínimo / Máximo) */
.redacao-wiz__words {
  display: flex;
  align-items: flex-end;
  gap: 0.7rem;
}

.redacao-wiz__word {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.redacao-wiz__word > span {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted-l);
}

.redacao-wiz__num { width: 100%; text-align: center; }

.redacao-wiz__wsep {
  flex: 0 0 auto;
  padding-bottom: 0.7rem;
  color: var(--text-muted-l);
  font-size: 1.05rem;
}

/* Wizard — prévia do Enunciado da proposta */
.redacao-wiz__enunbar,
.redacao-wiz__apoiobar {
  display: inline-block;
  margin: 0 0 0.5rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f3f3f3;
  background: var(--ink);
  border-radius: 8px;
}

.redacao-wiz__apoiobar { margin-top: 0.9rem; }

.redacao-wiz__enunh {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted-l);
}

.redacao-wiz__enuncmd,
.redacao-wiz__apoio {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-soft);
  white-space: pre-line;
}
.redacao-wiz__apoiotitle {
  margin: 0.15rem 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  text-align: center;
}
.redacao-wiz__apoio {
  text-align: justify;
}
.redacao-wiz__apoio--loading {
  font-style: italic;
  opacity: 0.7;
  text-align: left;
  animation: redacaoApoioPulse 1.2s ease-in-out infinite;
}
@keyframes redacaoApoioPulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.85; }
}

/* Confirmação — Limite de Palavras */
.redacao-confirm__words {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.redacao-confirm__word {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.7rem 0.5rem;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: rgba(20, 20, 20, 0.02);
}

.redacao-confirm__word small {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-muted-l);
}

.redacao-confirm__word b {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
}

.redacao-confirm__wsep { color: var(--text-muted-l); }

/* PROPOSTAS / HISTÓRICO — cards no MESMO estilo do Treinar (.redacao-wiz):
   casca branca arredondada + header escuro com ONDA + corpo branco.
   Lista CENTRALIZADA (flex): poucos cards ficam agrupados sob o título. */
.redacao-prop__list {
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1.1rem;
}

/* Card "treinar-style" reutilizável (propostas e histórico). */
.redacao-tcard {
  flex: 0 1 360px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 6px 18px rgba(20, 20, 20, 0.04);
  overflow: hidden;
  transition: border-color 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), transform 0.18s var(--ease-out);
}

.redacao-tcard:hover {
  border-color: var(--hairline-strong);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 14px 34px rgba(20, 20, 20, 0.09);
  transform: translateY(-2px);
}

.redacao-tcard__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 128px;
  padding: 1.4rem 1.3rem 2.6rem;
  text-align: center;
  color: #f3f3f3;
  background: linear-gradient(170deg, #2e2e2e 0%, #1f1f1f 52%, #141414 100%);
}

/* Onda branca na base do header (mesma curva do .redacao-wiz): funde no corpo. */
.redacao-tcard__waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 44px;
  z-index: 1;
  display: block;
  pointer-events: none;
}

.redacao-tcard__wave { fill: #fff; }

.redacao-tcard__kicker {
  position: relative;
  z-index: 2;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 251, 252, 0.55);
}

.redacao-tcard__title {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.redacao-tcard__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.05rem 1.15rem 1.2rem;
}

/* Card de AÇÃO (criar proposta): pontilhado, mesma altura/raio dos cards. */
.redacao-prop--new {
  flex: 0 1 360px;
  max-width: 400px;
  min-height: 232px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.4rem;
  text-align: center;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.5);
  border: 1px dashed var(--hairline-strong);
  border-radius: 18px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.redacao-prop--new:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  border-color: var(--ink);
  transform: translateY(-2px);
}

.redacao-prop--new__plus {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid currentColor;
}

.redacao-prop--new__title {
  font-size: 0.95rem;
  font-weight: 600;
}

.redacao-prop--new__sub {
  font-size: 0.78rem;
  color: var(--text-muted-l);
}

/* Estado vazio com ação (histórico): bloco centralizado e composto. */
.redacao-empty {
  margin: 1.6rem auto 0;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: 2rem 1.5rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.55);
  border: 1px dashed var(--hairline-strong);
  border-radius: 16px;
}

.redacao-empty__text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-muted-l);
}

.redacao-empty .redacao-btn {
  width: auto;
}

/* Corpo das PROPOSTAS: metadados + botão fixo embaixo. */
.redacao-prop__metas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.redacao-prop__meta {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.redacao-prop__k {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted-l);
}

.redacao-prop__meta b {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.redacao-prop__view {
  margin-top: auto;
  width: 100%;
}

/* Corpo do HISTÓRICO: nota grande + data. */
.redacao-hcard__body {
  align-items: flex-start;
  gap: 0.35rem;
}

.redacao-hcard__date {
  font-size: 0.8rem;
  color: var(--text-muted-l);
}

.redacao-exemplar__bar {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
}

.redacao-exemplar__close { margin-left: auto; }

.redacao-exemplar__kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted-l);
}

.redacao-exemplar__h {
  margin: 0.4rem 0 0.3rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.redacao-exemplar__meta {
  font-size: 0.82rem;
  color: var(--text-muted-l);
}

.redacao-exemplar__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
}

.redacao-exemplar__close:hover {
  background: #fff;
  border-color: var(--hairline-strong);
}

/* ── Guia de Gêneros Textuais (overlay de tutoriais) ── */
.redacao-tut__panel {
  width: min(980px, 100%);
}

.redacao-tut__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.3rem;
}

.redacao-tut__tab {
  padding: 0.45rem 0.95rem;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
}

.redacao-tut__tab:hover {
  border-color: var(--hairline-strong);
}

.redacao-tut__tab.is-active {
  color: #f3f3f3;
  background: var(--ink);
  border-color: var(--ink);
}

.redacao-tut__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
  margin-top: 1.3rem;
}

.redacao-tut__card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
}

.redacao-tut__card[hidden] { display: none; }

.redacao-tut__video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: #141414;
  cursor: pointer;
  overflow: hidden;
}

.redacao-tut__video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Zoom leve: recorta qualquer tarja/linha residual nas bordas da miniatura. */
  transform: scale(1.04);
  transition: transform 0.4s var(--ease-out), opacity 0.2s var(--ease-out);
}

.redacao-tut__video:hover img { transform: scale(1.08); }

.redacao-tut__video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.redacao-tut__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #141414;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(20, 20, 20, 0.35);
  transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.redacao-tut__play svg { width: 22px; height: 22px; margin-left: 2px; }
.redacao-tut__video:hover .redacao-tut__play { transform: scale(1.08); background: #fff; }
.redacao-tut__video.is-playing .redacao-tut__play { display: none; }

/* Estado "indisponível": miniatura/player do YouTube bloqueados (ex.: rede da
   escola). Mostra um placeholder e um aviso; o clique abre no YouTube. */
.redacao-tut__video.is-broken { background: linear-gradient(135deg, #2e2e2e, #141414); }
.redacao-tut__video.is-broken img { display: none; }
.redacao-tut__fallback {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.5rem 0.7rem 0.6rem;
  font-size: 0.72rem;
  line-height: 1.25;
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}

.redacao-tut__yt {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.2rem;
  width: max-content;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-soft, #51607a);
  text-decoration: none;
}
.redacao-tut__yt:hover { color: var(--ink); text-decoration: underline; }

.redacao-tut__info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem 0.95rem 1rem;
}

.redacao-tut__cat {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted-l);
}

.redacao-tut__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.redacao-tut__desc {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .redacao-tut__grid { grid-template-columns: 1fr; }
}

/* PC: 3 vídeos por linha (cards mais compactos). */
@media (min-width: 1024px) {
  .redacao-tut__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

/* Tutoriais, Histórico e Propostas como páginas (dentro de #redacaoChoose) */
.redacao-tut-page,
.redacao-hist-page,
.redacao-prop-page {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
}

.redacao-tut-page .redacao-tut__grid,
.redacao-prop-page .redacao-prop__list {
  width: 100%;
}

/* a pílula de abas encolhe até o último tópico e fica centralizada (o
   .redacao-home já alinha os filhos no centro com align-items: center) */
.redacao-tut-page .redacao-tut__tabs {
  width: auto;
  max-width: 100%;
}

.redacao-tut-page .redacao-tut__info { text-align: left; }

.redacao-hist-page .redacao-hist__list {
  width: 100%;
  text-align: left;
}

/* ── HISTÓRICO (lista) ── */
.redacao-hist__panel {
  width: min(620px, 100%);
}

.redacao-hist__list {
  display: flex;
  flex-direction: column;
  margin-top: 1.3rem;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04);
}

.redacao-hist__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1.1rem;
  border-top: 1px solid var(--hairline);
  transition: background 0.18s var(--ease-out);
}

.redacao-hist__row:first-child { border-top: 0; }
.redacao-hist__row:hover { background: rgba(20, 20, 20, 0.025); }

.redacao-hist__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.redacao-hist__main b {
  font-size: 0.95rem;
  color: var(--ink);
}

.redacao-hist__main span {
  font-size: 0.82rem;
  color: var(--text-muted-l);
}

.redacao-hist__score {
  flex: 0 0 auto;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a78b0;
  font-variant-numeric: tabular-nums;
}

.redacao-hist__score i {
  margin-left: 0.15rem;
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted-l);
}

.redacao-hist__empty {
  margin: 1.3rem 0 0;
  padding: 1.6rem 1.2rem;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-muted-l);
  background: rgba(255, 255, 255, 0.55);
  border: 1px dashed var(--hairline-strong);
  border-radius: 16px;
}

.redacao-exemplar__badge {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: rgba(20, 20, 20, 0.06);
  border: 1px solid var(--hairline);
  border-radius: 999px;
}

.redacao-exemplar__hint {
  margin: 0.9rem 0 1.4rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-muted-l);
}

.redacao-exemplar__hint b { color: var(--ink-soft); font-weight: 700; }

.redacao-exemplar__doc {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.redacao-annot {
  display: grid;
  grid-template-columns: 1fr 264px;
  gap: 1.4rem;
  align-items: start;
  padding-left: 1rem;
  border-left: 3px solid rgba(20, 20, 20, 0.55);
}

.redacao-annot[data-lvl="mid"] { border-left-color: rgba(20, 20, 20, 0.32); }
.redacao-annot[data-lvl="low"] { border-left-color: rgba(20, 20, 20, 0.16); }

.redacao-annot__role {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted-l);
}

.redacao-annot__text p {
  margin: 0 0 0.5rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ink);
}

.redacao-annot__text p:last-child { margin-bottom: 0; }

.redacao-annot__note {
  position: sticky;
  top: 0;
  padding: 0.8rem 0.9rem;
  background: rgba(20, 20, 20, 0.04);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}

.redacao-annot__tag {
  display: inline-block;
  margin-bottom: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.redacao-annot__note p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted-l);
}

@media (max-width: 720px) {
  .redacao-annot {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
  .redacao-annot__note { position: static; }
}

/* ── Guia (estrutura, comando, pegadinhas) ── */
.redacao-guide {
  margin: 0.2rem 0 1.6rem;
  padding: clamp(1.2rem, 3vw, 1.6rem);
  background: linear-gradient(180deg, #ffffff 0%, var(--n-bright) 100%);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 16px 44px rgba(20, 20, 20, 0.06);
}

.redacao-guide__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.3rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--hairline);
}

.redacao-guide__meta span {
  padding: 0.32rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: rgba(20, 20, 20, 0.05);
  border: 1px solid var(--hairline);
  border-radius: 999px;
}

.redacao-guide__sec {
  margin-top: 1.3rem;
}

.redacao-guide__sec:first-of-type {
  margin-top: 0;
}

.redacao-guide__sec h4 {
  margin: 0 0 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted-l);
}

.redacao-guide__sec ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.redacao-guide__sec li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.redacao-guide__sec li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.45;
}

.redacao-guide__cmd {
  margin: 0;
  padding: 0.85rem 1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--ink-soft);
  background: rgba(20, 20, 20, 0.04);
  border-left: 3px solid var(--ink);
  border-radius: 0 12px 12px 0;
}

.redacao-guide__sec--warn li::before {
  background: #c98a16;
  opacity: 0.95;
}

.redacao-guide__sec--warn h4 {
  color: #b07d18;
}

/* ── Setup (tema) ── */
.redacao-setup {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.redacao-setup .redacao-btn--primary {
  width: 100%;
}

.redacao-proposal__cmd {
  margin: 0 0 1rem;
  padding: 0.8rem 0.95rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
  background: rgba(20, 20, 20, 0.04);
  border-left: 3px solid var(--ink);
  border-radius: 0 12px 12px 0;
}

.redacao-proposal__cmd b {
  font-weight: 700;
  color: var(--text-muted-l);
}

/* Comando exibido na folha de escrita */
.redacao-write__cmd {
  display: block;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.84rem;
  line-height: 1.5;
  font-weight: 400;
  font-style: italic;
  color: var(--text-muted-l);
}

/* Detalhes do guia na fase de escrita */
.redacao-write__guide {
  margin-bottom: 1rem;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  overflow: hidden;
}

.redacao-write__guide > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background 0.15s var(--ease-out);
}

.redacao-write__guide > summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-muted-l);
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  transition: transform 0.2s var(--ease-out);
}

.redacao-write__guide[open] > summary::before {
  content: "\2212";
}

.redacao-write__guide > summary:hover { background: rgba(20, 20, 20, 0.03); }

.redacao-write__guide > summary::-webkit-details-marker {
  display: none;
}

.redacao-write__guide[open] > summary {
  border-bottom: 1px solid var(--hairline);
}

.redacao-write__guide #redacaoWriteGuideBody {
  padding: 0.9rem;
}

.redacao-write__guide #redacaoWriteGuideBody .redacao-guide__meta {
  margin-bottom: 0.8rem;
}

.redacao-prop__h {
  margin: 0 0 0.35rem;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.redacao-prop__sub {
  margin: 0 0 1.4rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(26, 35, 48, 0.62);
}

.redacao-prop__pick {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.redacao-prop__or {
  position: relative;
  text-align: center;
}

.redacao-prop__or::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--hairline);
}

.redacao-prop__or span {
  position: relative;
  padding: 0 0.8rem;
  background: var(--n-canvas);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--text-muted-l);
}

.redacao-prop__custom {
  display: flex;
  gap: 0.55rem;
}

.redacao-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.85rem 1rem;
  font: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}

.redacao-input::placeholder { color: var(--text-muted-l); }

.redacao-input:focus {
  outline: none;
  border-color: var(--ink-soft);
  box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.08);
}


.redacao-btn {
  flex: 0 0 auto;
  padding: 0.85rem 1.3rem;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.18s var(--ease-out), border-color 0.18s var(--ease-out), transform 0.12s ease, box-shadow 0.18s var(--ease-out), opacity 0.15s ease;
}

.redacao-btn:hover {
  background: var(--n-bright);
  border-color: var(--ink-soft);
}

.redacao-btn:active {
  transform: scale(0.985);
}

.redacao-btn--primary {
  color: #f3f3f3;
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 10px 26px rgba(20, 20, 20, 0.22);
}

.redacao-btn--primary:hover {
  background: #15181d;
  border-color: #15181d;
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(20, 20, 20, 0.28);
}

.redacao-btn--primary:active { transform: translateY(0) scale(0.99); }

.redacao-btn[disabled] {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

.redacao-proposal {
  margin-top: 0.4rem;
  padding: clamp(1.2rem, 3vw, 1.5rem);
  background: linear-gradient(180deg, #ffffff 0%, var(--n-bright) 100%);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 16px 44px rgba(20, 20, 20, 0.07);
  animation: redacaoRise 0.45s var(--ease-expo) both;
}

.redacao-proposal__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted-l);
}

.redacao-proposal__label::before {
  display: none;
}

.redacao-proposal__tema {
  margin: 0.5rem 0 0.9rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.55rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.redacao-proposal__texts {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}

.redacao-proposal__text {
  padding-left: 0.9rem;
  border-left: 2px solid var(--hairline-strong);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.redacao-proposal__text b {
  font-weight: 700;
  color: var(--text-muted-l);
}

/* ── Tela de escrita estilo Redação Paraná ──
 * Folha pautada à esquerda, proposta (tema + comando + textos de apoio) sempre
 * visível à direita para consulta enquanto escreve. */
.redacao-write {
  width: min(1360px, 100%);
}

.redacao-write__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(290px, 32%, 400px);
  gap: clamp(1rem, 2.4vw, 1.8rem);
  align-items: start;
}

.redacao-write__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.redacao-write__aside {
  position: sticky;
  top: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-height: calc(100vh - 5.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 0.4rem;
}

.redacao-write__aside .redacao-write__guide {
  margin: 0;
}

/* Cartão da proposta (lado direito) */
.redacao-prompt {
  padding: clamp(1.1rem, 2.2vw, 1.4rem);
  background: linear-gradient(180deg, #ffffff 0%, var(--n-bright) 100%);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 12px 34px rgba(20, 20, 20, 0.06);
}

.redacao-prompt__kicker {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted-l);
}

.redacao-prompt__tema {
  margin: 0.4rem 0 0.85rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.redacao-prompt__label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted-l);
}

.redacao-prompt__cmd {
  margin: 0 0 0.4rem;
  padding: 0.75rem 0.9rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-soft);
  background: rgba(20, 20, 20, 0.04);
  border-left: 3px solid var(--ink);
  border-radius: 0 12px 12px 0;
  white-space: pre-line;
}

.redacao-prompt__texts {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.redacao-prompt__text {
  margin: 0;
  padding-left: 0.85rem;
  border-left: 2px solid var(--hairline-strong);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.redacao-prompt__text b {
  font-weight: 700;
  color: var(--text-muted-l);
}

/* ── Proposta no formato Redação Paraná (Dados da proposta + Enunciado) ── */
.redacao-prompt__bar {
  padding: 0.5rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f3f3f3;
  background: var(--ink);
  border-radius: 8px;
}

.redacao-prompt__bar:not(:first-child) { margin-top: 1.2rem; }

.redacao-prompt__data {
  margin: 0.7rem 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.85rem;
}

.redacao-prompt__data dt {
  align-self: start;
  padding-top: 0.1rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted-l);
}

.redacao-prompt__data dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink);
}

.redacao-prompt__h {
  margin: 1rem 0 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted-l);
}

.redacao-prompt__bar + .redacao-prompt__h { margin-top: 0.7rem; }

.redacao-prompt__list {
  margin: 0 0 0.4rem;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}

.redacao-prompt__list li {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.redacao-prompt__apoio {
  margin: 0 0 0.55rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: justify;
}

.redacao-prompt__apoio b {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted-l);
}

/* Título de cada texto de apoio (estilo manchete, como no Redação Paraná). */
.redacao-prompt__apoiotitle {
  margin: 0.15rem 0 0.5rem;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  text-align: center;
}

/* Cabeçalho de cada painel (Desenvolva a redação / Proposta) */
.redacao-write__head {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted-l);
}

/* Campo de título do editor */
.redacao-sheet__title {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.7rem;
  padding: 0.75rem 1.3rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  outline: none;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.redacao-sheet__title:focus {
  border-color: var(--ink-soft);
  box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.07);
}

.redacao-sheet__title::placeholder {
  color: var(--text-muted-l);
  font-family: var(--font-sans);
  font-weight: 400;
}

.redacao-sheet {
  --line-h: 36px;
  position: relative;
  border: 1px solid var(--hairline-strong);
  border-radius: 18px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 48px rgba(20, 20, 20, 0.07);
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.redacao-sheet:focus-within {
  border-color: var(--ink-soft);
  box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.07), 0 18px 48px rgba(20, 20, 20, 0.09);
}

.redacao-sheet__text {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: calc(var(--line-h) * 15);
  padding: 0 1.3rem;
  font-family: var(--font-serif), Georgia, serif;
  font-size: 1.06rem;
  line-height: var(--line-h);
  color: var(--ink);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--line-h) - 1px),
    rgba(20, 20, 20, 0.08) calc(var(--line-h) - 1px),
    rgba(20, 20, 20, 0.08) var(--line-h)
  );
  background-attachment: local;
  border: 0;
  outline: none;
  resize: vertical;
}

.redacao-sheet__text::placeholder {
  color: var(--text-muted-l);
  font-family: var(--font-sans);
  font-style: italic;
}

.redacao-write__foot {
  margin-top: 1.1rem;
  padding: 0.9rem 0 0.4rem;
}

.redacao-write__progress {
  height: 5px;
  margin-bottom: 0.8rem;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.08);
  overflow: hidden;
}

.redacao-write__progress i {
  display: block;
  height: 100%;
  width: var(--p, 0%);
  border-radius: 999px;
  background: var(--ink);
  transition: width 0.3s var(--ease-out), background 0.2s ease;
}

.redacao-write__progress.is-over i { background: #d2503f; }

.redacao-write__foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.redacao-write__count {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-muted-l);
  font-variant-numeric: tabular-nums;
}

.redacao-write__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 560px) {
  .redacao-write__actions { flex: 1; justify-content: flex-end; }
  .redacao-write__actions .redacao-btn--ghost span { display: none; }
}

.redacao-write__count.is-over {
  color: #d2503f;
  font-weight: 700;
}

.redacao-result {
  animation: redacaoRise 0.5s var(--ease-expo) both;
}

.redacao-result .redacao-card {
  padding: clamp(1.4rem, 3.5vw, 1.9rem);
  background: linear-gradient(180deg, #ffffff 0%, var(--n-bright) 100%);
  border: 1px solid var(--hairline);
  border-radius: 22px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 24px 64px rgba(20, 20, 20, 0.1);
}

/* Cabeçalho de nota mais imponente dentro da área dedicada */
.redacao-result .redacao-card__head {
  align-items: flex-start;
  padding-bottom: 1.2rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--hairline);
}

.redacao-result .redacao-card__score {
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  padding: 0.5rem 0.95rem;
  border-radius: 16px;
  background: rgba(20, 20, 20, 0.05);
  border: 1px solid var(--hairline);
}

.redacao-result .redacao-card__score b {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.redacao-result__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.7rem;
  margin-top: 1.3rem;
}

.redacao-area__loading {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.2rem 0;
  font-size: 0.95rem;
  color: var(--text-muted-l);
}

.redacao-area__err {
  margin: 0;
  padding: 0.9rem 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #d2503f;
}

/* Empilha a tela de escrita: proposta em cima, folha embaixo (lê antes de escrever) */
@media (max-width: 900px) {
  .redacao-write { width: min(880px, 100%); }
  .redacao-write__grid { grid-template-columns: 1fr; }
  /* A proposta vai para cima como uma CAIXA DE CONSULTA compacta com rolagem
     interna, em vez de empurrar a folha de escrita para muito abaixo. */
  .redacao-write__aside {
    position: static;
    order: -1;
    max-height: min(42vh, 360px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* Dica visual de que o cartão rola (sombra suave na base). */
  .redacao-write__aside .redacao-prompt {
    position: relative;
  }
}

@media (max-width: 560px) {
  .redacao-prop__custom,
  .redacao-prop__custom.redacao-prop__custom { flex-direction: column; }
  .redacao-choose__h { font-size: clamp(1.7rem, 8vw, 2rem); }
  .redacao-grid { grid-template-columns: 1fr; }
  .redacao-result__actions { flex-direction: column-reverse; }
  .redacao-result__actions .redacao-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .redacao-area,
  .redacao-pick,
  .redacao-bcard,
  .redacao-proposal,
  .redacao-result,
  .redacao-exemplar__panel {
    animation: none !important;
    transition: opacity 0.2s ease !important;
  }
  .redacao-pick:hover,
  .redacao-exemplar__panel { transform: none; }
  .redacao-bcard__wrap { transition: none; }
}

/* Balão com código pode ocupar mais largura — código não fica espremido. */
/* Fórmulas KaTeX dentro das bolhas */
/* Título markdown (#, ##) dentro do balão — usado em resumos / "faça um PDF" */
.chat-head {
  display: block;
  margin: 0.9em 0 0.3em;
  font-size: 1.06em;
  font-weight: 700;
  line-height: 1.3;
}
.chat-head:first-child { margin-top: 0; }

/* Separador horizontal (---, ***) */
.chat-hr {
  border: 0;
  height: 1px;
  margin: 0.95em 0;
  background: rgba(255, 255, 255, 0.16);
}
.orca-menu__surface.is-open .chat-bubble--assistant .chat-hr {
  background: rgba(20, 20, 20, 0.14);
}

/* Tabela markdown (comparações) dentro do balão */
.chat-table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.7rem 0;
  font-size: 0.92em;
  display: block;
  overflow-x: auto;
}
.chat-table th,
.chat-table td {
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 0.45em 0.7em;
  text-align: left;
  vertical-align: top;
}
.chat-table thead th {
  background: rgba(255, 255, 255, 0.07);
  font-weight: 700;
}
.chat-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.03);
}
.orca-menu__surface.is-open .chat-bubble--assistant .chat-table th,
.orca-menu__surface.is-open .chat-bubble--assistant .chat-table td {
  border-color: rgba(20, 20, 20, 0.16);
}
.orca-menu__surface.is-open .chat-bubble--assistant .chat-table thead th {
  background: rgba(20, 20, 20, 0.06);
}
.orca-menu__surface.is-open .chat-bubble--assistant .chat-table tbody tr:nth-child(even) td {
  background: rgba(20, 20, 20, 0.03);
}
.chat-bubble--assistant:has(.chat-table) {
  max-width: min(96%, 780px);
  width: 100%;
}

.chat-math {
  color: rgba(244, 247, 251, 0.98);
}

/* inline: acompanha o texto, alinhado à linha de base (estilo ChatGPT) */
.chat-math:not(.chat-math--block) {
  white-space: normal;
}

.chat-math:not(.chat-math--block) .katex {
  font-size: 1.04em;
}

.chat-math--block {
  display: block;
  margin: 0.7rem 0;
  padding: 0.35rem 0.2rem;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
}

.chat-math--block .katex-display {
  margin: 0;
}

.chat-math--block .katex {
  font-size: 1.18em;
}

.chat-math .katex .katex-error {
  color: rgba(255, 170, 170, 0.92);
}

.chat-math--block::-webkit-scrollbar { height: 6px; }
.chat-math--block::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 8px;
}

.chat-bubble--assistant:has(.chat-code),
.chat-bubble--assistant:has(.chat-math--block) {
  max-width: min(96%, 780px);
  width: 100%;
}

.chat-code {
  margin: 0.7rem 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--ink-soft);
  white-space: normal;
}

.chat-code__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0.5rem 0.4rem 0.85rem;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.chat-code__lang {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: rgba(244, 247, 251, 0.55);
}

.chat-code__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(244, 247, 251, 0.7);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  padding: 0.24rem 0.56rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.chat-code__copy svg { width: 13px; height: 13px; }

.chat-code__copy:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.chat-code__copy.is-copied {
  color: rgba(150, 220, 160, 0.95);
  border-color: rgba(150, 220, 160, 0.4);
}

.chat-code__body {
  margin: 0;
  padding: 0.9rem 1rem;
  overflow: auto;
  max-height: 62vh;
  background: transparent;
}

.chat-code__body code {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(238, 243, 249, 0.94);
  white-space: pre;
  tab-size: 2;
}

.chat-code__body::-webkit-scrollbar { height: 8px; }
.chat-code__body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 8px;
}

/* ── Destaque de sintaxe (highlight.js) — paleta escura, estilo editor ── */
.chat-code__body code.hljs { color: rgba(238, 243, 249, 0.94); background: transparent; }
.chat-code__body .hljs-comment,
.chat-code__body .hljs-quote { color: #8b949e; font-style: italic; }
.chat-code__body .hljs-keyword,
.chat-code__body .hljs-selector-tag,
.chat-code__body .hljs-built_in,
.chat-code__body .hljs-doctag { color: #ff7b72; }
.chat-code__body .hljs-string,
.chat-code__body .hljs-regexp,
.chat-code__body .hljs-meta .hljs-string { color: #a5d6ff; }
.chat-code__body .hljs-number,
.chat-code__body .hljs-literal,
.chat-code__body .hljs-type,
.chat-code__body .hljs-class .hljs-title { color: #79c0ff; }
.chat-code__body .hljs-title,
.chat-code__body .hljs-title.function_,
.chat-code__body .hljs-section { color: #d2a8ff; }
.chat-code__body .hljs-attr,
.chat-code__body .hljs-attribute,
.chat-code__body .hljs-variable,
.chat-code__body .hljs-template-variable,
.chat-code__body .hljs-property { color: #79c0ff; }
.chat-code__body .hljs-name,
.chat-code__body .hljs-tag,
.chat-code__body .hljs-selector-id,
.chat-code__body .hljs-selector-class { color: #7ee787; }
.chat-code__body .hljs-meta,
.chat-code__body .hljs-symbol,
.chat-code__body .hljs-bullet,
.chat-code__body .hljs-link { color: #ffa657; }
.chat-code__body .hljs-emphasis { font-style: italic; }
.chat-code__body .hljs-strong { font-weight: 700; }
.chat-code__body .hljs-addition { color: #aff5b4; background: rgba(46, 160, 67, 0.15); }
.chat-code__body .hljs-deletion { color: #ffdcd7; background: rgba(248, 81, 73, 0.15); }

/* ── Resposta de PDF (estilo ChatGPT: balão branco normal + link clicável) ──
   Sem fundo/padding próprios: herda o balão assistente normal. As cores usam
   currentColor/opacidade para funcionar tanto no balão claro quanto no escuro. */
.chat-bubble--assistant.chat-resumo {
  max-width: min(96%, 560px);
  width: 100%;
}

.chat-resumo__intro {
  margin: 0 0 0.45rem;
}

/* Sugestões de versão mais completa (clicáveis) */
.chat-resumo__more {
  margin: 0.85rem 0 0.35rem;
  font-size: 0.9em;
  opacity: 0.72;
}
.chat-resumo__suggests {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.chat-resumo__suggest {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0.26rem 0.3rem;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.95em;
  color: inherit;
  cursor: pointer;
  transition: background 0.14s ease;
}
.chat-resumo__suggest:hover {
  background: rgba(128, 128, 128, 0.16);
}
.chat-resumo__suggest > span:last-child {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}
.chat-resumo__arrow {
  flex: none;
  opacity: 0.5;
}

/* Selo do arquivo (estilo anexo de PDF de sites grandes) */
.chat-resumo__filebadge {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(244, 247, 251, 0.92);
}
.chat-resumo__filebadge svg { width: 25px; height: 25px; }

.chat-resumo__meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.chat-resumo__title {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(244, 247, 251, 0.95);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-resumo__sub {
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(244, 247, 251, 0.52);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Download = texto clicável (estilo ChatGPT), não botão preenchido */
.chat-resumo__download {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: none;
  padding: 0.1rem 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.chat-resumo__fileicon {
  display: inline-flex;
  opacity: 0.85;
}
.chat-resumo__fileicon svg { width: 17px; height: 17px; }
.chat-resumo__dllabel {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}
.chat-resumo__download:hover .chat-resumo__dllabel { text-decoration-thickness: 2px; }
.chat-resumo__download:active { transform: translateY(1px); }

.chat-resumo__body {
  padding: 0.5rem 1.1rem 1rem;
  max-height: 60vh;
  overflow: auto;
  line-height: 1.62;
  color: rgba(238, 243, 249, 0.92);
}

.chat-resumo__body .chat-resumo__h {
  line-height: 1.3;
  font-weight: 700;
  color: #fff;
}
.chat-resumo__body .chat-resumo__h1 { font-size: 1.12rem; margin: 0.9rem 0 0.5rem; }
.chat-resumo__body .chat-resumo__h2 {
  font-size: 0.98rem;
  margin: 1rem 0 0.45rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.chat-resumo__body .chat-resumo__h3 { font-size: 0.9rem; margin: 0.7rem 0 0.35rem; color: rgba(244, 247, 251, 0.88); }
.chat-resumo__body .chat-resumo__h1:first-child,
.chat-resumo__body .chat-resumo__h2:first-child { margin-top: 0.3rem; border-top: none; padding-top: 0; }

.chat-resumo__body p { margin: 0.45rem 0; }

.chat-resumo__body .chat-resumo__ul,
.chat-resumo__body .chat-resumo__ol {
  margin: 0.4rem 0;
  padding-left: 1.25rem;
}
.chat-resumo__body .chat-resumo__ul { list-style: disc; }
.chat-resumo__body .chat-resumo__ol { list-style: decimal; }
.chat-resumo__body li { margin: 0.22rem 0; }
.chat-resumo__body strong { color: #fff; font-weight: 700; }

/* Tabela do material de estudo (genótipo×fenótipo etc.) */
.chat-resumo__body .chat-resumo__table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.6rem 0;
  font-size: 0.86rem;
  display: block;
  overflow-x: auto;
}
.chat-resumo__body .chat-resumo__table th,
.chat-resumo__body .chat-resumo__table td {
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.4em 0.6em;
  text-align: left;
  vertical-align: top;
}
.chat-resumo__body .chat-resumo__table thead th {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 700;
}
.chat-resumo__body .chat-resumo__table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.03);
}

/* Bloco de código/diagrama do material de estudo */
.chat-resumo__body .chat-resumo__pre {
  margin: 0.6rem 0;
  padding: 0.6rem 0.75rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow-x: auto;
  font-size: 0.82rem;
  line-height: 1.4;
  white-space: pre;
}

.chat-resumo__body::-webkit-scrollbar { width: 8px; }
.chat-resumo__body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 8px;
}

.chat-row--user { justify-content: flex-end; }
.chat-row--bot,
.chat-row--tool { justify-content: flex-start; }

.chat-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding:
    0.65rem
    max(2.75rem, env(safe-area-inset-right, 0px))
    max(1.25rem, env(safe-area-inset-bottom, 0px))
    max(2.75rem, env(safe-area-inset-left, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.28s ease,
    visibility 0.28s ease,
    transform 0.28s var(--ease-out);
}

.chat-footer.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.chat-footer__btn {
  border: none;
  background: none;
  padding: 0.35rem 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(244, 247, 251, 0.46);
  cursor: pointer;
  transition: color 0.2s ease;
}

.chat-footer__btn:hover {
  color: rgba(244, 247, 251, 0.88);
}

.chat-footer__status {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(180, 210, 255, 0.72);
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
}

.chat-toolbar__btn {
  height: auto;
  padding: 0;
  border: none;
  background: none;
  color: var(--menu-ink);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  position: relative;
}

.chat-toolbar__btn:hover {
  color: rgba(244, 247, 251, 0.95);
}

.chat-toolbar__btn::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.2s ease;
}

.chat-toolbar__btn:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.chat-toolbar__btn--icon {
  width: auto;
  padding: 0 0.25rem;
  font-size: 1rem;
}

.chat-toolbar__btn--icon::after { display: none; }

.chat-toolbar__check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--menu-muted);
  margin-left: auto;
}

.chat-toolbar__check input { accent-color: rgba(244, 247, 251, 0.85); }

.chat-advanced {
  border-top: none;
  padding-top: 0.15rem;
}

.chat-advanced__summary {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--menu-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 0.35rem 0;
}

.chat-advanced__summary::-webkit-details-marker { display: none; }

.chat-advanced__summary::before {
  content: '› ';
  display: inline-block;
  transition: transform 0.2s ease;
}

.chat-advanced[open] .chat-advanced__summary::before {
  transform: rotate(90deg);
}

.chat-advanced__body {
  padding: 0.5rem 0 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chat-advanced__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chat-advanced__label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--menu-muted);
  min-width: 3.5rem;
}

.chat-advanced__select {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--menu-ink);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  outline: none;
}

.hint {
  font-size: 0.72rem;
  color: rgba(244, 247, 251, 0.42);
  text-align: left;
  padding-top: 0.5rem;
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__brand,
  .hero-eyebrow,
  .hero-copy__title,
  .hero-copy__subtitle,
  .stage-bottom,
  .orca-card-hints {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .stage-bottom {
    transform: translateX(-50%);
  }

  .orca-card__status::before {
    animation: none;
  }

  .film-grain { display: none; }
}

.hint--ok { color: rgba(244, 247, 251, 0.48); }
.hint--warn { color: rgba(255, 180, 160, 0.78); }

@media (max-width: 1100px) {
  body.chat-open .hero-copy {
    opacity: 0.9;
    transform: none;
  }

  .hero-copy {
    left: max(1.25rem, env(safe-area-inset-left, 0px));
    top: calc(16vh + env(safe-area-inset-top, 0px));
    bottom: auto;
    transform: none;
    max-width: min(92vw, 540px);
    text-align: left;
    padding: 0 0.5rem;
  }

  .hero-eyebrow {
    font-size: clamp(0.68rem, 2.8vw, 0.78rem);
    margin-bottom: 1rem;
  }

  .hero-copy__title {
    font-size: clamp(2.4rem, 9.5vw, 3.4rem);
    line-height: 1.02;
  }

  .hero-copy__subtitle {
    font-size: clamp(0.9rem, 3.5vw, 1.05rem);
    margin-top: 1rem;
  }

  .orca-hit-zone {
    top: 58%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: clamp(140px, 42vw, 260px);
    height: clamp(96px, 30vw, 180px);
  }
}

@media (max-width: 900px) {
  :root {
    --menu-panel-w: calc(100vw - max(24px, env(safe-area-inset-left, 0px)) - max(24px, env(safe-area-inset-right, 0px)));
  }

  .orca-menu {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }

  .orca-menu:has(.orca-menu__surface.is-open) {
    top: 50%;
    left: max(16px, env(safe-area-inset-left, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    transform: translateY(-50%);
  }

  .orca-menu__surface.is-open {
    width: 100%;
    height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border-radius: 1.125rem;
  }

  /* No celular a folha desliza de baixo (bottom-sheet), em vez do zoom-do-canto. */
  .orca-menu__surface.is-opening {
    transform-origin: center bottom;
    animation: menu-sheet-open 0.46s var(--ease-spring) both;
  }

  .orca-menu__surface.is-closing {
    transform-origin: center bottom;
    animation: menu-sheet-close 0.3s cubic-bezier(0.4, 0, 1, 1) both;
  }

  /* Enquanto o dedo arrasta a folha, o transform é controlado via JS (inline):
     sem transição/animação concorrente para o movimento seguir o dedo a 60fps. */
  .orca-menu__surface.is-dragging {
    animation: none !important;
    transition: none !important;
    will-change: transform, opacity;
  }

  .transcript {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 4.5rem;
  }

  .stage-bottom {
    width: min(94vw, 520px);
    gap: 0.55rem;
  }

  .orca-card-hint {
    font-size: 0.74rem;
    padding: 0.38rem 0.72rem;
  }
}

@media (max-width: 520px) {
  /* No celular a marca encosta mais no canto superior esquerdo (menos recuo),
     respeitando o safe-area do notch/barra de status. */
  .site-nav {
    padding:
      max(10px, env(safe-area-inset-top, 0px))
      var(--menu-margin-x)
      0
      max(12px, env(safe-area-inset-left, 0px));
  }

  .site-nav__wordmark {
    display: flex;
  }

  .site-nav__name {
    font-size: 1.55rem;
    letter-spacing: 0.09em;
  }

  .site-nav__mark,
  .redacao-area__mark {
    width: var(--nav-mark-size-mobile);
    height: var(--nav-mark-size-mobile);
  }

  .nav-cta {
    width: clamp(120px, 34vw, 160px);
    height: clamp(120px, 34vw, 160px);
  }

  .nav-cta__glyph { width: 22px; height: 22px; }

  .orca-menu {
    left: auto;
    right: 0;
  }

  .orca-menu:has(.orca-menu__surface.is-open) {
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
  }

  .orca-menu__trigger-icon {
    width: var(--nav-mark-size-mobile);
    height: var(--nav-mark-size-mobile);
  }

  .orca-menu__surface:not(.is-open) {
    /* Aba do chat no mobile, calibrada para equilibrar com o ícone interno
       (altura = 2x largura para manter o semicírculo exato). */
    width: clamp(42px, 12vw, 56px);
    height: clamp(84px, 24vw, 112px);
    margin-left: auto;
    /* MESMO estilo neumórfico do composer (igual ao desktop) */
    background: #f3f3f3;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 999px 0 0 999px;
    border: none;
    box-shadow:
      -8px -4px 8px 0px #ffffff,
      8px 4px 12px 0px #e1e1e1,
      4px 4px 4px 0px #e1e1e1 inset,
      -4px -4px 4px 0px #ffffff inset;
  }

  /* ícone do chat no mobile, equilibrado com a aba menor. */
  .orca-menu__surface:not(.is-open) .orca-menu__trigger-icon {
    width: 21px;
    height: 21px;
    margin-left: clamp(6px, 1.6vw, 11px);
  }

  .ui-panel__canvas {
    width: 100%;
  }

  .orca-menu__surface.is-open {
    width: 100%;
    height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border-radius: 1.125rem;
    /* Mobile (tela cheia): fundo SÓLIDO, sem backdrop-filter — leitura máxima e
       scroll liso (o blur repinta a cada frame de scroll = maior custo de GPU). */
    background: #f7f8fb;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .orca-menu__trigger {
    font-size: 16px;
  }

  .transcript {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  .transcript__greeting {
    font-size: clamp(3.2rem, 13vw, 4.6rem);
    line-height: 1.02;
  }

  .transcript__lead {
    padding-left: 0;
    font-size: 0.92rem;
  }

  .transcript__lead::before {
    display: none;
  }

  .chat-brand__mark {
    width: var(--nav-mark-size-mobile);
    height: var(--nav-mark-size-mobile);
  }

  .chat-brand__name {
    font-size: 1rem;
    letter-spacing: 0.16em;
  }

  .nova-stage { gap: 1rem; padding-bottom: 11rem; }

  .orca-hit-zone {
    top: 56%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: clamp(130px, 44vw, 220px);
    height: clamp(90px, 30vw, 160px);
  }

  .orca-card:not(.orca-card--gpt) {
    padding: 0.35rem 0.4rem 0.35rem 0.45rem;
  }

  .orca-card__input,
  .orca-card__response {
    font-size: 0.9rem;
  }

  .orca-card__action {
    width: 1.875rem;
    height: 1.875rem;
  }

  .stage-bottom {
    width: min(92vw, 480px);
    /* No celular o input + disclaimer descem para perto da borda inferior (sem
       encostar): mínimo de 0.6rem do fundo, ou safe-area + 0.4rem em telas com
       notch/barra de gestos. */
    bottom: max(0.6rem, calc(env(safe-area-inset-bottom, 0px) + 0.4rem));
  }

  .hero-copy {
    top: calc(12vh + env(safe-area-inset-top, 0px));
    max-width: min(92vw, 460px);
  }

  .hero-copy__title {
    font-size: clamp(2.3rem, 10.5vw, 3.1rem);
  }

  .transcript__greeting {
    font-size: clamp(3rem, 14vw, 4.2rem);
  }
}

/* ── Telas muito pequenas (≤380px) ── */
@media (max-width: 380px) {
  .transcript {
    padding-left: 0.95rem;
    padding-right: 0.95rem;
  }

  .chat-bubble {
    font-size: 1rem;
    padding: 0.85rem 1.05rem;
  }

  .chat-bubble--user,
  .chat-bubble--assistant {
    max-width: 100%;
  }

  .stage-bottom {
    width: min(95vw, 460px);
  }

  .stage-disclaimer {
    font-size: 0.68rem;
  }

  .chat-brand__name,
  .site-nav__name {
    font-size: 1.35rem;
  }
}

/* ── Paisagem / telas baixas: reduz alturas e respiros verticais ── */
@media (max-height: 560px) and (orientation: landscape) {
  .orca-menu__surface.is-open {
    height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }

  .orca-menu:has(.orca-menu__surface.is-open) {
    top: max(8px, env(safe-area-inset-top, 0px));
    transform: none;
  }

  .transcript {
    padding-top: 3.5rem;
  }

  .chat-brand {
    top: max(12px, env(safe-area-inset-top, 0px));
  }

  .stage-bottom {
    bottom: max(0.75rem, calc(env(safe-area-inset-bottom, 0px) + 0.5rem));
  }

  .orca-hit-zone {
    top: 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }

  .orca-menu__surface.is-settled .ui-panel__canvas,
  .orca-menu__surface.is-settled .chat-brand,
  .orca-menu__surface.is-settled .menu-letter {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* elementos com reveal (entram em opacity:0): manter visíveis sem animação */
  .site-nav__brand,
  .stage-bottom,
  .stage-disclaimer,
  .chat-row,
  .transcript__hello,
  .transcript__greeting,
  .transcript__lead {
    opacity: 1 !important;
    filter: none !important;
  }

  .stage-bottom { transform: translateX(-50%) !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   Mobile / GPU fraca — backdrop-filter blur forte é o MAIOR custo de GPU em
   superfícies que rolam (o painel de chat repinta o blur a cada frame de
   scroll). Reduzimos o raio nas superfícies principais: a leitura continua
   ótima e o scroll fica liso. Escopado a perf-lite (ativo em celular) e ao
   tier low (celular + desktops fracos). Maior especificidade que as regras
   originais, então vence sem depender da ordem.
   ════════════════════════════════════════════════════════════════════════ */
.perf-lite .orca-menu__surface.is-open,
html[data-perf="low"] .orca-menu__surface.is-open {
  /* GPU fraca: fundo sólido, zero backdrop-filter. */
  background: #f7f8fb;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.perf-lite .redacao-exemplar__panel,
html[data-perf="low"] .redacao-exemplar__panel {
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
}

/* Teto de blur por VIEWPORT (independe do tier). Como o celular bom agora pode
   ficar em tier ≥2 (sem perf-lite), garantimos que superfícies que ROLAM (painel
   de chat e exemplar) usem um raio de blur menor em telas pequenas — o blur forte
   repinta a cada frame de scroll e é o maior custo de GPU móvel. Continua glassy,
   mas o scroll fica liso em qualquer celular. */
@media (max-width: 768px) {
  .orca-menu__surface.is-open {
    /* Híbrido: mobile é sólido (ver bloco ≤900px) — sem reintroduzir blur aqui. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .redacao-exemplar__panel {
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    backdrop-filter: blur(10px) saturate(1.3);
  }
}

/* ████████████████████████████████████████████████████████████████
   ESTÚDIO DE REDAÇÃO — SISTEMA UNIFICADO (modelo "pílula" Uiverse)
   Padroniza botões, seletores e campos: casca branca, borda clara
   (#e3e8ee) em repouso que vira PRETA no hover/foco, cantos em pílula
   e sombra em camadas. Vem por último para vencer as regras antigas.
   ████████████████████████████████████████████████████████████████ */

/* ── CAMPOS: texto, número e seletor (dropdown) ── */
.redacao-area .redacao-input,
.redacao-area .redacao-dd__trigger {
  font-family: var(--rd-font);
  font-weight: 500;
  color: var(--rd-ink);
  background: var(--rd-cloud);
  border: 1px solid var(--rd-edge);
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow);
  transition:
    border-color 0.2s var(--rd-ease),
    box-shadow 0.2s var(--rd-ease),
    color 0.2s var(--rd-ease);
}

.redacao-area .redacao-input::placeholder,
.redacao-area .redacao-dd__value.is-placeholder { color: var(--rd-mist); }

/* hover do seletor: mantém a casca e escurece texto/contorno */
.redacao-area .redacao-dd__trigger:hover {
  border-color: var(--rd-ink);
  color: var(--rd-ink);
}

/* clique/foco no campo ou seletor aberto: contorno anima p/ PRETO */
.redacao-area .redacao-input:focus,
.redacao-area .redacao-dd.is-open .redacao-dd__trigger {
  border-color: var(--rd-ink);
  box-shadow: var(--rd-shadow);
}

/* menu suspenso do seletor */
.redacao-area .redacao-dd__menu {
  border: 1px solid var(--rd-edge);
  border-radius: var(--rd-radius-soft);
  box-shadow: 0 1px 1px rgba(14, 17, 22, 0.04), 0 24px 48px -24px rgba(14, 17, 22, 0.28);
}

.redacao-area .redacao-dd__opt { border-radius: var(--rd-radius); }
.redacao-area .redacao-dd__opt:hover { background: rgba(14, 17, 22, 0.05); color: var(--rd-ink); }
.redacao-area .redacao-dd__opt.is-active { color: var(--rd-ink); }

/* ── BOTÕES: base (secundário) ── */
.redacao-area .redacao-btn {
  font-family: var(--rd-font);
  font-weight: 600;
  color: var(--rd-ink);
  background: var(--rd-cloud);
  border: 1px solid var(--rd-edge);
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow);
  transition:
    background 0.2s var(--rd-ease),
    color 0.2s var(--rd-ease),
    border-color 0.2s var(--rd-ease),
    box-shadow 0.2s var(--rd-ease),
    transform 0.12s ease;
}

.redacao-area .redacao-btn:hover {
  background: var(--rd-cloud);
  color: var(--rd-ink);
  border-color: var(--rd-ink);
}

.redacao-area .redacao-btn:active { transform: scale(0.985); }

.redacao-area .redacao-btn[disabled] {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* ── BOTÃO PRIMÁRIO: preenchido em preto ── */
.redacao-area .redacao-btn--primary {
  color: #ffffff;
  background: var(--rd-ink);
  border-color: var(--rd-ink);
  box-shadow: var(--rd-shadow-ink);
}

.redacao-area .redacao-btn--primary:hover {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
  transform: translateY(-1px);
  box-shadow: 0 1px 1px rgba(14, 17, 22, 0.06), 0 14px 28px -10px rgba(14, 17, 22, 0.55);
}

.redacao-area .redacao-btn--primary:active { transform: translateY(0) scale(0.99); }

/* ── BOTÃO GHOST: transparente, sem casca ── */
.redacao-area .redacao-btn--ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.redacao-area .redacao-btn--ghost:hover {
  background: rgba(14, 17, 22, 0.05);
  border-color: transparent;
}

/* ── PÍLULAS DE NAVEGAÇÃO: voltar + abas de tutorial ── */
.redacao-area .redacao-choose__back,
.redacao-area .redacao-tut__tab {
  font-family: var(--rd-font);
  font-weight: 600;
  color: var(--rd-mist);
  background: var(--rd-cloud);
  border: 1px solid var(--rd-edge);
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow);
  transition:
    background 0.2s var(--rd-ease),
    color 0.2s var(--rd-ease),
    border-color 0.2s var(--rd-ease),
    box-shadow 0.2s var(--rd-ease);
}

.redacao-area .redacao-choose__back:hover,
.redacao-area .redacao-tut__tab:hover {
  color: var(--rd-ink);
  border-color: var(--rd-ink);
}

.redacao-area .redacao-tut__tab.is-active {
  color: #ffffff;
  background: var(--rd-ink);
  border-color: var(--rd-ink);
  box-shadow: var(--rd-shadow-ink);
}

/* ── BOTÃO-ÍCONE (fechar visualizador) ── */
.redacao-area .redacao-exemplar__close {
  color: var(--rd-ink);
  background: var(--rd-cloud);
  border: 1px solid var(--rd-edge);
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow);
}

.redacao-area .redacao-exemplar__close:hover {
  background: var(--rd-cloud);
  border-color: var(--rd-ink);
}

/* ── CARDS DE SELEÇÃO (gêneros): alinha contorno ao mesmo padrão ── */
.redacao-area .redacao-pick { border-color: var(--rd-edge); }
.redacao-area .redacao-pick:hover { border-color: var(--rd-ink); }
.redacao-area .redacao-pick:focus-visible {
  border-color: var(--rd-ink);
  box-shadow: 0 0 0 3px rgba(14, 17, 22, 0.12);
}

/* ── BADGES do enunciado: pílula preta ── */
.redacao-area .redacao-wiz__enunbar,
.redacao-area .redacao-wiz__apoiobar {
  border-radius: var(--rd-radius);
  background: var(--rd-ink);
}

/* ════════════════════════════════════════════════════════════════
   GUIA DE GÊNEROS — abas no formato cir-tabs (Uiverse): UM contêiner-
   pílula branco segurando as abas; a aba ativa é uma pílula PRETA que
   DESLIZA (mesma mola do glider do sidebar).
   ════════════════════════════════════════════════════════════════ */
.redacao-area .redacao-tut__tabs {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  background: var(--rd-cloud);
  border: 1px solid var(--rd-edge);
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow);
  font-family: var(--rd-font);
}

.redacao-area .redacao-tut__tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 18px;
  font-family: var(--rd-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--rd-mist);
  background: transparent;
  border: 0;
  border-radius: var(--rd-radius);
  box-shadow: none;
  white-space: nowrap;
  transition: color 220ms var(--rd-ease);
}

/* o realce do ativo é o glider; só a cor do texto muda */
.redacao-area .redacao-tut__tab:hover {
  color: var(--rd-ink);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.redacao-area .redacao-tut__tab.is-active {
  color: var(--rd-cloud);
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* glider: pílula PRETA que desliza sob a aba ativa (mola idêntica ao sidebar) */
.redacao-area .redacao-tut__glider {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: var(--rd-radius);
  background: var(--rd-ink);
  box-shadow: var(--rd-shadow-ink);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  will-change: transform, width, height;
  transition:
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    width 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.28s ease;
}

/* No celular as abas viram UMA linha que rola por swipe (em vez de quebrar
   em várias linhas dentro da pílula). O glider continua alinhado porque é
   absoluto dentro do contêiner e acompanha o scroll do conteúdo. */
@media (max-width: 860px) {
  .redacao-area .redacao-tut__tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .redacao-area .redacao-tut__tabs::-webkit-scrollbar {
    display: none;
  }

  .redacao-area .redacao-tut__tab {
    flex: 0 0 auto;
    scroll-snap-align: center;
  }
}

/* ════════════════════════════════════════════════════════════════
   TOOLTIPS (estilo Uiverse, P&B) — balão fixo posicionado por JS
   (public/tooltip.js). Substitui o tooltip nativo dos botões de ícone.
   ════════════════════════════════════════════════════════════════ */
.orca-tooltip {
  --tx: 0px;
  --ty: 7px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  padding: 7px 11px;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #f4f6fa;
  background: #0e1116;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  box-shadow:
    0 1px 1px rgba(14, 17, 22, 0.10),
    0 14px 30px -12px rgba(14, 17, 22, 0.65);
  opacity: 0;
  transform: translate(var(--tx), var(--ty)) scale(0.92);
  pointer-events: none;
  transition:
    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* o balão desliza levemente a partir do lado oposto ao alvo */
.orca-tooltip[data-pos="top"]    { --tx: 0px;  --ty: 7px; }
.orca-tooltip[data-pos="bottom"] { --tx: 0px;  --ty: -7px; }
.orca-tooltip[data-pos="left"]   { --tx: 7px;  --ty: 0px; }
.orca-tooltip[data-pos="right"]  { --tx: -7px; --ty: 0px; }

.orca-tooltip.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* enquanto mede o tamanho (antes de posicionar) fica invisível e sem animar */
.orca-tooltip.is-measuring {
  opacity: 0 !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .orca-tooltip {
    transition: opacity 120ms linear;
    transform: none;
  }
  .orca-tooltip.is-visible { transform: none; }
}

/* ════════════════════════════════════════════════════════════════
   WEB SEARCH & CITATIONS (Modern UI)
   ════════════════════════════════════════════════════════════════ */
.chat-search-indicator {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  margin-bottom: 12px;
  font-family: var(--font-sans);
  color: var(--text-dim);
  font-size: 13.5px;
  animation: searchIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.chat-search-indicator.success {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text);
}

.chat-search-indicator.success svg {
  width: 16px;
  height: 16px;
  color: #10b981;
}

.chat-search-indicator.error {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

.chat-search-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--biolume-bright);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.chat-search-text strong {
  color: var(--text);
  font-weight: 500;
}

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

@keyframes searchIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Citations as Pills */
.chat-text a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  margin: 0 2px;
  font-size: 0.85em;
  font-weight: 500;
  text-decoration: none;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  vertical-align: middle;
  transition: all 0.2s;
}

.chat-text a:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.chat-text a::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.7;
}