/* Claudinho: tela cheia no iPhone (PWA), letra grande e sem serifa, cores alegres. */
:root {
  --azul: #0B2A6F; --azul2: #1557D6; --laranja: #FF8A3D; --amarelo: #FFD84D; --verde: #22C55E; --texto: #13213F;
  --topo: env(safe-area-inset-top, 0px); --baixo: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, system-ui, "SF Pro Rounded", "Segoe UI", Roboto, sans-serif;
  color: #fff; background: radial-gradient(120% 80% at 50% 0%, #2C6BE0 0%, var(--azul) 60%, #071A47 100%);
  min-height: 100dvh; overflow: hidden; display: flex; flex-direction: column;
  padding-top: var(--topo); padding-bottom: var(--baixo);
  -webkit-user-select: none; user-select: none; overscroll-behavior: none;
}
.ceu { position: fixed; inset: 0; pointer-events: none; }
.ceu i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; opacity: .5; animation: piscar 3s infinite ease-in-out; }
.ceu i:nth-child(1) { left: 8%; top: 12%; } .ceu i:nth-child(2) { left: 82%; top: 9%; animation-delay: .6s; }
.ceu i:nth-child(3) { left: 18%; top: 34%; animation-delay: 1.2s; } .ceu i:nth-child(4) { left: 90%; top: 30%; animation-delay: 1.8s; }
.ceu i:nth-child(5) { left: 6%; top: 58%; animation-delay: .9s; } .ceu i:nth-child(6) { left: 94%; top: 55%; animation-delay: 2.1s; }
.ceu i:nth-child(7) { left: 30%; top: 6%; animation-delay: 1.5s; } .ceu i:nth-child(8) { left: 66%; top: 20%; animation-delay: .3s; }
@keyframes piscar { 50% { opacity: .1; transform: scale(.6); } }

.topo { text-align: center; padding: 10px 0 0; position: relative; z-index: 1; }
.marca { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: var(--amarelo); text-shadow: 0 2px 0 rgba(0,0,0,.25); }

.tela-app { flex: 1; display: flex; flex-direction: column; align-items: center; min-height: 0; position: relative; z-index: 1; padding: 0 16px; }
.tela-app[hidden], .tela-pin[hidden] { display: none; }

.personagem { background: none; border: 0; padding: 0; margin: 4px 0 0; width: min(58vw, 34dvh, 260px); aspect-ratio: 240 / 260; cursor: pointer; flex-shrink: 0; }
.personagem svg { width: 100%; height: 100%; overflow: visible; }
.corpo-todo { animation: flutuar 4s ease-in-out infinite; transform-origin: 120px 200px; }
@keyframes flutuar { 50% { transform: translateY(-6px); } }
.olho { animation: piscar-olho 5s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes piscar-olho { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }
.boca-falando { opacity: 0; transform-box: fill-box; transform-origin: center; }
.pensando { opacity: 0; }
.luz-antena { transition: fill .2s; }

/* ouvindo: antena verde pulsando, olhos maiores */
.estado-ouvindo .luz-antena { fill: var(--verde); animation: pulso .8s infinite; transform-box: fill-box; transform-origin: center; }
.estado-ouvindo .olho { transform: scale(1.12); animation: none; }
@keyframes pulso { 50% { transform: scale(1.35); } }
/* pensando: olhar para cima e balõezinhos */
.estado-pensando .olhos { transform: translate(6px, -6px); transition: transform .3s; }
.estado-pensando .pensando { opacity: 1; animation: pensar 1.2s infinite; }
@keyframes pensar { 50% { opacity: .35; } }
/* falando: boca mexendo */
.estado-falando .sorriso { opacity: 0; }
.estado-falando .boca-falando { opacity: 1; animation: falar .28s infinite alternate ease-in-out; }
@keyframes falar { from { transform: scaleY(.25); } to { transform: scaleY(1.1); } }

.status { margin: 6px 0 4px; font-size: 19px; font-weight: 700; text-align: center; min-height: 1.3em; }

.conversa { flex: 1; min-height: 0; width: 100%; max-width: 560px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 2px 8px; display: flex; flex-direction: column; gap: 8px; -webkit-user-select: text; user-select: text; }
.bolha { padding: 11px 14px; border-radius: 18px; font-size: 19px; line-height: 1.35; max-width: 86%; word-wrap: break-word; animation: entrar .25s ease-out; }
.bolha.tutu { align-self: flex-end; background: var(--amarelo); color: var(--texto); border-bottom-right-radius: 6px; }
.bolha.claudinho { align-self: flex-start; background: #fff; color: var(--texto); border-bottom-left-radius: 6px; }
.bolha.sistema { align-self: center; background: rgba(255,255,255,.15); font-size: 15px; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }

.controles { width: 100%; max-width: 560px; padding: 6px 0 4px; }
.botoes { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.espaco { width: 56px; }
.botao-falar {
  width: 112px; height: 112px; border-radius: 50%; border: 6px solid rgba(255,255,255,.9);
  background: radial-gradient(circle at 35% 30%, #FFB27A, var(--laranja) 60%, #E8641A); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 17px; font-weight: 800; box-shadow: 0 8px 22px rgba(0,0,0,.35); cursor: pointer; touch-action: manipulation;
}
.botao-falar svg { width: 44px; height: 44px; }
.botao-falar:active { transform: scale(.96); }
.estado-ouvindo .botao-falar { background: radial-gradient(circle at 35% 30%, #7CF0A4, var(--verde) 60%, #138A40); animation: respirar 1s infinite; }
@keyframes respirar { 50% { box-shadow: 0 0 0 16px rgba(34,197,94,.25), 0 8px 22px rgba(0,0,0,.35); } }
.estado-pensando .botao-falar, .estado-carregando .botao-falar { opacity: .6; }
.botao-teclado { width: 56px; height: 56px; border-radius: 50%; border: 3px solid rgba(255,255,255,.7); background: rgba(255,255,255,.12); color: #fff; font-size: 19px; font-weight: 800; }

.form-texto { display: flex; gap: 8px; margin-bottom: 10px; }
.form-texto[hidden] { display: none; }
.form-texto input { flex: 1; min-width: 0; font-size: 18px; padding: 13px 16px; border-radius: 26px; border: 0; color: var(--texto); }
.botao-enviar { width: 52px; border-radius: 50%; border: 0; background: var(--amarelo); color: var(--texto); font-size: 22px; }

.tela-pin { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; position: relative; z-index: 1; text-align: center; }
.pin-titulo { font-size: 21px; font-weight: 700; max-width: 320px; }
#form-pin { display: flex; flex-direction: column; gap: 12px; align-items: center; }
#pin { font-size: 34px; letter-spacing: 10px; width: 240px; text-align: center; padding: 12px; border-radius: 14px; border: 0; color: var(--texto); }
.botao-entrar { font-size: 20px; font-weight: 800; padding: 14px 40px; border-radius: 30px; border: 0; background: var(--laranja); color: #fff; }
.pin-erro { color: #FFD0C7; font-weight: 700; min-height: 1.2em; }

.rodape { text-align: center; font-size: 12px; opacity: .65; padding: 4px 0 6px; position: relative; z-index: 1; }

/* páginas simples (link inválido) */
body.simples main { margin: auto; text-align: center; padding: 24px; font-size: 20px; }

@media (prefers-reduced-motion: reduce) { .corpo-todo, .ceu i { animation: none; } }

/* Modelo escolhido pelo Tutu (personagens/, registro 415) no lugar do robô fixo */
.personagem { aspect-ratio: 1; }
.rosto-claudinho { width: 100%; height: 100%; border-radius: 26%; box-shadow: 0 6px 0 rgba(0,0,0,.18); }
.topo .bv-trocar { position: absolute; right: 12px; top: 8px; font-size: 13px; padding: 8px 12px; }