/* O assistente: a logo viva, o ">_" (docs/29; desde 22/10/2026, sem personagem humano).
   Usa --papel, --tinta, --chao, --apagado e --linha do layout; --canto-titulo para o título do balão.
   O símbolo tem as cores fixas da marca (docs/20) em qualquer tema de empresa. */

/* ---------- o ">_" e os estados (classe e-<estado> num elemento de fora) ---------- */
.sim { display: block; width: 100%; height: 100%; overflow: visible; }
.sim-sombra { fill: #F2C811; }
.sim-caixa { fill: #FFFFFF; stroke: #16191C; stroke-width: 2.5; }
.sim-seta { fill: none; stroke: #16191C; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.sim-cursor { fill: #F2C811; stroke: #16191C; stroke-width: 1; transition: opacity 0.15s; }
.sim-orbita { fill: none; stroke: #16191C; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 14 86; opacity: 0; transition: opacity 0.2s; }
.sim-onda rect {
  fill: #F2C811; stroke: #16191C; stroke-width: 0.7; opacity: 0; transition: opacity 0.15s;
  transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0.3);
}
.sim-certo { fill: none; stroke: #16191C; stroke-width: 2.9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 15; stroke-dashoffset: 15; opacity: 0; }
.sim-erro { fill: #B42318; opacity: 0; transition: opacity 0.15s; }
.sim-corpo { transform-box: fill-box; transform-origin: 50% 100%; }

.e-esperando .sim-cursor { animation: sim-pisca 1.1s steps(1) infinite; }
.e-esperando .sim-sombra { animation: sim-respira 4.2s ease-in-out infinite; }
.e-falando .sim-cursor { opacity: 0; }
.e-falando .sim-onda rect { opacity: 1; }
.e-pensando .sim-orbita { opacity: 1; animation: sim-orbita 1.05s linear infinite; }
.e-pensando .sim-cursor { animation: sim-pisca 0.5s steps(1) infinite; }
.e-comemorando .sim-cursor { opacity: 0; }
.e-comemorando .sim-certo { opacity: 1; animation: sim-risca 0.45s 0.08s ease-out forwards; }
.e-comemorando .sim-corpo { animation: sim-pulinho 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.e-erro .sim-cursor { opacity: 0; }
.e-erro .sim-erro { opacity: 1; }
.e-erro.treme .sim-corpo { animation: sim-treme 0.42s ease-in-out 2; }   /* só quando o erro aparece */
@keyframes sim-pisca { 50% { opacity: 0; } }
@keyframes sim-respira { 50% { transform: translate(1px, 1px); } }
@keyframes sim-orbita { to { stroke-dashoffset: -100; } }
@keyframes sim-risca { to { stroke-dashoffset: 0; } }
@keyframes sim-pulinho { 30% { transform: translateY(-7px) scale(1.05); } 60% { transform: translateY(0) scale(1); } 78% { transform: translateY(-2px); } }
@keyframes sim-treme { 25% { transform: translateX(-1.6px); } 75% { transform: translateX(1.6px); } }

/* ---------- o assistente no canto: o ">_" e o balão ---------- */
.canto {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 30;
  display: flex; align-items: flex-end; gap: 0.85rem; pointer-events: none;
}
.canto > * { pointer-events: auto; }
.balao {
  position: relative; width: min(360px, calc(100vw - 8.5rem)); margin-bottom: 1.4rem;
  background: var(--papel); color: var(--tinta); border: 1px solid var(--linha); border-radius: 14px;
  padding: 0.85rem 2.4rem 0.9rem 1rem;
  box-shadow: 0 1px 2px rgba(22, 25, 28, 0.06), 0 14px 34px rgba(22, 25, 28, 0.16);
  animation: balao-entra 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.balao::after {   /* rabicho apontando para o ">_" */
  content: ""; position: absolute; right: -7px; bottom: 20px; width: 12px; height: 12px;
  background: var(--papel); border-top: 1px solid var(--linha); border-right: 1px solid var(--linha);
  transform: rotate(45deg);
}
@keyframes balao-entra { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
/* o balão deixa o mouse passar para as linhas que estão embaixo dele; só os botões são clicáveis */
.balao { pointer-events: none; }
.balao-recolher { pointer-events: auto; }
.balao-titulo { display: block; color: var(--canto-titulo, #16191C); margin-bottom: 0.15rem; }
.balao-texto { margin: 0; font-size: 0.9375rem; line-height: 1.5; }
.balao-recolher {
  position: absolute; top: 0.3rem; right: 0.3rem; background: transparent; border: 0;
  color: var(--apagado); font-size: 1.35rem; font-weight: 400; line-height: 1; padding: 0.2rem 0.45rem; border-radius: 6px;
}
.balao-recolher:hover { background: var(--chao); color: var(--tinta); }
.cursor {   /* o cursor da legenda é o mesmo do ">_" */
  display: inline-block; width: 0.55em; height: 0.22em; margin-left: 3px; vertical-align: -0.05em; border-radius: 2px;
  background: #F2C811; box-shadow: 0 0 0 1px #16191C; animation: cursor-pisca 0.9s steps(1) infinite;
}
@keyframes cursor-pisca { 50% { opacity: 0; } }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.canto-botao {
  position: relative; display: block; flex: none; width: 66px; height: 66px; padding: 5px 7px 9px 5px;
  border: 0; border-radius: 16px; background: transparent; cursor: pointer; transition: transform 0.15s ease;
}
.canto-botao:hover { background: transparent; transform: translateY(-2px); }
.canto-botao:active { transform: translateY(1px); }
.canto-botao:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.canto.recolhido .balao { display: none; }
.canto.recolhido .canto-botao { width: 54px; height: 54px; padding: 4px 6px 8px 4px; }

@media (max-width: 860px) {
  .canto { right: 1rem; bottom: 1rem; }
  .balao { position: fixed; left: 1rem; right: 1rem; bottom: 5.6rem; width: auto; margin: 0; }
  .balao::after { right: 26px; bottom: -7px; transform: rotate(135deg); }
  .canto-botao, .canto.recolhido .canto-botao { width: 56px; height: 56px; padding: 4px 6px 8px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .sim *, .sim-corpo, .balao, .cursor, .canto-botao { animation: none !important; transition: none !important; }
  .e-comemorando .sim-certo { stroke-dashoffset: 0; }
}

/* ---------- narração: botão no balão, controles e tour ---------- */
.balao-acoes { margin-top: 0.7rem; }
.balao-acao, .balao-controles button { pointer-events: auto; }
.balao-acao {     /* o mesmo botão do site: amarelo, sem a sombra dura (22/10/2026) */
  display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 0.9rem; line-height: 1.2;
  background: #F2C811; color: #16191C; border: 1px solid #F2C811;
  border-radius: 999px; padding: 0.55rem 1rem;
  box-shadow: 0 1px 2px rgba(106, 80, 0, 0.16), 0 6px 16px -8px rgba(214, 170, 0, 0.75);
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.balao-acao:hover { background: #F6D43A; transform: translateY(-1px); }
.icone-play { width: 0; height: 0; border-style: solid; border-width: 0.38em 0 0.38em 0.62em; border-color: transparent transparent transparent currentColor; display: inline-block; }
.canto.narrando .balao-acoes { display: none; }
.canto.narrando .balao { width: min(420px, calc(100vw - 8.5rem)); }
.canto.narrando .balao-texto { font-size: 1.02rem; min-height: 3em; }
.balao-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.8rem; padding-top: 0.65rem; border-top: 1px solid var(--linha, #DCDCD4); }
.balao-controles[hidden] { display: none; }
.balao-controles button {
  font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; color: var(--tinta);
  background: transparent; border: 1px solid var(--linha, #DCDCD4); border-radius: 999px; padding: 0.2rem 0.7rem; line-height: 1.3;
}
.balao-controles button:hover { background: var(--chao); border-color: var(--tinta); }
.balao-controles button[data-acao="sair"] { margin-left: auto; border-color: transparent; text-decoration: underline; }
.balao-progresso { font-size: 0.82rem; font-weight: 700; color: var(--apagado); margin-right: 0.25rem; }
.balao-progresso:empty { display: none; }
.canto:not(.em-tour) .so-tour { display: none; }
.canto.narrando .balao-recolher { display: none; }
/* selo de "tocar" no ">_", nas páginas com narração */
.canto-play {
  position: absolute; left: -5px; bottom: 0; width: 26px; height: 26px; border-radius: 50%;
  background: #F2C811; border: 2px solid #16191C; display: grid; place-items: center;
}
.canto-play::before { content: ""; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #16191C; margin-left: 2px; }
.canto.narrando .canto-play { display: none; }
.canto.recolhido .canto-play { width: 22px; height: 22px; left: -6px; }
body.em-tour .canto { z-index: 60; }

@media (max-width: 860px) {
  .canto.narrando .balao { width: auto; }
  .canto.narrando .balao-texto { min-height: 2.6em; }
}

/* ---------- passeio por capítulos: exemplo no balão e o assistente no alto ---------- */
.balao-exemplo { margin-top: 0.7rem; padding: 0.6rem 0.7rem 0.5rem; background: #fff; border: 1.5px dashed var(--linha, #DCDCD4);
  border-radius: 8px; pointer-events: auto; }
.balao-exemplo[hidden] { display: none; }
.exemplo-cab { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; font-size: 0.85rem; }
.exemplo-selo { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.1rem 0.45rem;
  border-radius: 999px; background: var(--acento, #F2C811); color: var(--acento-texto, #16191C); border: 1px solid var(--tinta); }
.exemplo-tabela { overflow-x: auto; }
.balao-exemplo table { width: 100%; border-collapse: collapse; font-size: 0.78rem; line-height: 1.35; }
.balao-exemplo th { text-align: left; font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--apagado);
  border-bottom: 1.5px solid var(--tinta); padding: 0.2rem 0.4rem; white-space: nowrap; }
.balao-exemplo td { padding: 0.28rem 0.4rem; border-bottom: 1px solid var(--linha, #DCDCD4); vertical-align: middle; }
.balao-exemplo .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.exemplo-nota { margin: 0.45rem 0 0; font-size: 0.8rem; color: var(--apagado); }
.exemplo-badge { display: inline-block; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.12rem 0.45rem; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.exemplo-verde { background: #E3F0EC; color: #0B6E5A; border-color: #0B6E5A; }
.exemplo-amarelo { background: #FBF1D6; color: #7a4a08; border-color: #A8660C; }
.exemplo-azul { background: #E5F0FB; color: #1F6FB2; border-color: #1F6FB2; }
.exemplo-vermelho { background: #FBE9E7; color: #8E2B2B; border-color: #8E2B2B; }
.exemplo-cinza { background: #EDEEE9; color: #545A60; border-color: #DCDCD4; }
.exemplo-laranja { background: #dcfce7; color: #0B6E5A; border-color: #C2410C; box-shadow: inset 0 0 0 1px #C2410C; }
.canto.narrando.com-exemplo .balao { width: min(620px, calc(100vw - 8.5rem)); }
/* o destaque está na metade de baixo da tela: o assistente fica no alto */
.canto.no-alto { top: 1.5rem; bottom: auto; align-items: flex-start; }
.canto.no-alto .balao { margin-bottom: 0; margin-top: 1.4rem; }
.canto.no-alto .balao::after { bottom: auto; top: 20px; }
@media (max-width: 860px) {
  .canto.no-alto { top: auto; bottom: 1rem; }
  .canto.no-alto .balao { top: 1rem; bottom: auto; margin-top: 0; }
  .canto.no-alto .balao::after { display: none; }
  .canto.narrando.com-exemplo .balao { width: auto; max-height: calc(100vh - 9rem); overflow: auto; pointer-events: auto; }
}