/* =========================================================
   Conversa com o Pet — o "painel do herói" para crianças
   ---------------------------------------------------------
   Sempre escuro (é um holograma), por cima de qualquer tema.
   Variáveis vivas, escritas pelo JS a cada quadro:
     --talk-level  volume da voz (0–1): microfone ouvindo, ou a voz do pet
   Estados em [data-state]: idle | listening | thinking | speaking.
   `.is-beat` reinicia a cada palavra dita (o pulso da borda).
   ========================================================= */

.talk {
  --talk-level: 0;
  --talk-mint: 61, 220, 151;
  --talk-violet: 139, 92, 246;
  --talk-glow: var(--talk-mint);
  position: fixed;
  inset: 0;
  z-index: 950;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  color: #f4f6ff;
  font-family: var(--font-body, system-ui, sans-serif);
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.28s var(--ease-liquid, ease), transform 0.36s var(--ease-liquid, ease);
  padding: max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.talk.is-open { opacity: 1; transform: none; }
.talk.is-leaving { opacity: 0; transform: scale(0.98); }
.talk[data-state='speaking'] { --talk-glow: var(--talk-violet); }

.talk__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 45% at 50% 42%, rgba(var(--talk-glow), 0.22), transparent 70%),
    radial-gradient(40% 35% at 15% 85%, rgba(20, 184, 166, 0.18), transparent 70%),
    radial-gradient(45% 40% at 85% 15%, rgba(168, 85, 247, 0.2), transparent 70%),
    rgba(7, 10, 20, 0.9);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  transition: background 0.5s ease;
}

/* ---------------- topo ---------------- */

.talk__top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.talk__title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.talk__title strong { font-family: var(--font-display, inherit); font-size: 1.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.talk__badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  color: rgb(var(--talk-mint));
  border: 1px solid rgba(var(--talk-mint), 0.45);
  background: rgba(var(--talk-mint), 0.1);
}
.talk__remaining { font-size: 0.8rem; color: rgba(244, 246, 255, 0.62); white-space: nowrap; }
.talk__close {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}
.talk__close:focus-visible, .talk__mic:focus-visible, .talk__side:focus-visible, .talk__send:focus-visible {
  outline: 3px solid rgb(var(--talk-mint));
  outline-offset: 3px;
}

/* ---------------- palco: holograma + pet ---------------- */

.talk__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
}
.talk__hud, .talk__pet { grid-area: 1 / 1; }
.talk__hud {
  width: min(86vw, 52vh, 460px);
  aspect-ratio: 1;
  transform: scale(calc(1 + var(--talk-level) * 0.08));
  transition: transform 0.08s linear;
  filter: drop-shadow(0 0 calc(6px + var(--talk-level) * 18px) rgba(var(--talk-glow), 0.65));
}
.talk__hud svg { width: 100%; height: 100%; overflow: visible; }
.talk-ring { fill: none; stroke: rgb(var(--talk-glow)); transition: stroke 0.5s ease; }
.talk-ring--soft { stroke-width: 1; opacity: 0.25; }
.talk-ring--dash { stroke-width: 2; stroke-dasharray: 1 2.2; opacity: 0.5; }
.talk-ring--arc { stroke-width: 4; stroke-linecap: round; stroke-dasharray: 22 8 6 14 30 20; opacity: 0.85; }
.talk-ring--arc2 { stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 8 6 40 46; opacity: 0.6; stroke: rgb(var(--talk-violet)); }
.talk-ring--ticks { stroke-width: 8; stroke-dasharray: 0.6 5.4; opacity: 0.35; }
.talk-dot { fill: rgb(var(--talk-glow)); }
.talk-ring-spin, .talk-orbit { transform-origin: 0 0; transform-box: view-box; }
.talk-ring-spin--a { animation: talk-spin 18s linear infinite; }
.talk-ring-spin--b { animation: talk-spin 26s linear infinite reverse; }
.talk-ring-spin--c { animation: talk-spin 40s linear infinite; }
.talk-orbit { animation: talk-spin 6s linear infinite; opacity: 0; transition: opacity 0.3s; }
.talk[data-state='listening'] .talk-ring-spin--a { animation-duration: 5s; }
.talk[data-state='listening'] .talk-ring-spin--b { animation-duration: 7s; }
.talk[data-state='thinking'] .talk-orbit { opacity: 1; animation-duration: 1.4s; }
.talk[data-state='thinking'] .talk-ring-spin--a { animation-duration: 2.4s; }
.talk[data-state='thinking'] .talk-ring--arc2 { stroke: rgb(var(--talk-mint)); }
.talk.is-beat .talk__hud { animation: talk-hud-beat 0.32s ease-out; }

@keyframes talk-spin { to { transform: rotate(360deg); } }
@keyframes talk-hud-beat { 0% { scale: 1; } 35% { scale: 1.035; } 100% { scale: 1; } }

.talk__pet {
  width: min(62vw, 38vh, 330px);
  aspect-ratio: 344 / 412;
  display: grid;
  place-items: center;
  transition: transform 0.4s var(--ease-liquid, ease);
}
.talk__pet-art, .talk__pet-art svg { width: 100%; height: 100%; }
.talk__pet-art { animation: talk-breathe 3.6s ease-in-out infinite; }
.talk__pet .pet-mouth, .talk__pet .pet-eyes { transform-box: fill-box; transform-origin: center; }
.talk__pet .pet-eyes { animation: talk-blink 5s ease-in-out infinite; }
/* Boca no ritmo da voz. */
.talk__pet.is-speaking .pet-mouth { transform: scale(calc(1 + var(--talk-level) * 0.2), calc(0.75 + var(--talk-level) * 1.15)); transition: transform 0.06s linear; }
/* Ouvindo: chega perto e inclina a cabeça. */
.talk__pet.is-listening { transform: translateY(-6px) scale(1.05) rotate(-4deg); }
.talk__pet.is-listening .talk__pet-art { animation-duration: 2.2s; }

@keyframes talk-breathe { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-4px) scale(1.012, 0.99); } }
@keyframes talk-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.12); } }

/* Movimentos de cada expressão (src/talk/expressions.js). */
.talk__pet.is-talk-bounce .talk__pet-art { animation: talk-bounce 0.9s ease-in-out 3, talk-breathe 3.6s ease-in-out 2.7s infinite; }
.talk__pet.is-talk-hop .talk__pet-art { animation: talk-hop 0.6s cubic-bezier(.3,1.6,.6,1) 4; }
.talk__pet.is-talk-giggle .talk__pet-art { animation: talk-giggle 0.18s ease-in-out 14; }
.talk__pet.is-talk-tilt { transform: rotate(9deg); }
.talk__pet.is-talk-ponder { transform: rotate(-6deg) translateX(-4px); }
.talk__pet.is-talk-ponder .talk__pet-art { animation: talk-ponder 1.6s ease-in-out infinite; }
.talk__pet.is-talk-pop .talk__pet-art { animation: talk-pop 0.55s cubic-bezier(.3,1.8,.5,1) 1, talk-breathe 3.6s ease-in-out 0.6s infinite; }
.talk__pet.is-talk-snuggle .talk__pet-art { animation: talk-snuggle 1.6s ease-in-out infinite; }
.talk__pet.is-talk-droop { transform: translateY(10px) scale(0.97); }
.talk__pet.is-talk-droop .talk__pet-art { animation: talk-breathe 5s ease-in-out infinite; }
.talk__pet.is-talk-sway .talk__pet-art { animation: talk-sway 2.6s ease-in-out infinite; }
.talk__pet.is-talk-proud .talk__pet-art { animation: talk-proud 0.8s ease-out 2, talk-breathe 3.6s ease-in-out 1.6s infinite; }
.talk__pet.is-talk-doze .talk__pet-art { animation: talk-sway 4.4s ease-in-out infinite; opacity: 0.92; }
.talk__pet.is-talk-lean { transform: translateY(4px) scale(1.04); }
.talk__pet.is-talk-lean .talk__pet-art { animation: talk-breathe 4.2s ease-in-out infinite; }

@keyframes talk-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px) scale(1.02, 0.98); } 70% { transform: translateY(2px) scale(1.03, 0.96); } }
@keyframes talk-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(4px) scale(1.08, 0.9); } 50% { transform: translateY(-34px) scale(0.95, 1.06); } }
@keyframes talk-giggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3.5deg) translateY(-2px); } 75% { transform: rotate(3.5deg) translateY(-2px); } }
@keyframes talk-ponder { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes talk-pop { 0% { transform: scale(1); } 40% { transform: scale(1.14, 0.94); } 100% { transform: scale(1); } }
@keyframes talk-snuggle { 0%, 100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.03); } }
@keyframes talk-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes talk-proud { 0% { transform: scale(1); } 45% { transform: translateY(-12px) scale(1.08); } 100% { transform: scale(1); } }

/* ---------------- legenda (não é chat: só a fala da vez) ---------------- */

.talk__caption {
  text-align: center;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  min-height: 7.5em;
  display: grid;
  align-content: end;
  gap: 6px;
}
.talk__heard {
  margin: 0;
  font-size: 0.92rem;
  color: rgba(244, 246, 255, 0.6);
  min-height: 1.3em;
  overflow-wrap: anywhere;
}
.talk__heard:not(:empty)::before { content: '“'; }
.talk__heard:not(:empty)::after { content: '”'; }
.talk__reply {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: clamp(1.15rem, 4.6vw, 1.6rem);
  line-height: 1.3;
  min-height: 1.3em;
  overflow-wrap: anywhere;
}
.talk__word { color: rgba(244, 246, 255, 0.38); transition: color 0.15s ease, text-shadow 0.2s ease; }
.talk__word.is-said { color: rgba(244, 246, 255, 0.92); }
.talk__word.is-on { color: #fff; text-shadow: 0 0 14px rgba(var(--talk-glow), 0.95); }
.talk__hint { margin: 0; font-size: 0.85rem; color: rgba(244, 246, 255, 0.62); min-height: 1.2em; }
.talk__dots { display: inline-flex; gap: 6px; }
.talk__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--talk-mint)); animation: talk-dot 1s ease-in-out infinite; }
.talk__dots i:nth-child(2) { animation-delay: 0.15s; }
.talk__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes talk-dot { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-6px); } }

/* ---------------- controles ---------------- */

.talk__bottom { display: grid; gap: 12px; padding-top: 10px; }
.talk__controls {
  display: grid;
  grid-template-columns: 56px auto 56px;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 7vw, 44px);
}
.talk__side {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  color: inherit;
  font-size: 1.3rem;
  cursor: pointer;
}
.talk__side[aria-pressed='true'] { border-color: rgba(var(--talk-mint), 0.7); background: rgba(var(--talk-mint), 0.16); }
.talk__side:disabled { opacity: 0.35; cursor: default; }
.talk__mic-wrap { display: grid; justify-items: center; gap: 8px; }
.talk__mic-label { font-size: 0.82rem; color: rgba(244, 246, 255, 0.7); min-height: 1.2em; }
.talk__mic {
  position: relative;
  width: 92px; height: 92px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #7ff0c0, rgb(var(--talk-mint)) 45%, #14b8a6 100%);
  box-shadow: 0 0 0 6px rgba(var(--talk-mint), 0.16), 0 10px 30px rgba(var(--talk-mint), 0.35), inset 0 2px 6px rgba(255, 255, 255, 0.6);
  transition: transform 0.15s ease, box-shadow 0.3s ease, filter 0.2s;
  touch-action: none;
}
.talk__mic:active { transform: scale(0.95); }
.talk__mic:disabled { filter: grayscale(0.8) brightness(0.7); cursor: default; }
.talk__mic-core { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.2rem; }
.talk__mic-wave {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(var(--talk-mint), 0.7);
  opacity: 0;
  transform: scale(calc(1 + var(--talk-level) * 0.5));
  pointer-events: none;
}
.talk[data-state='listening'] .talk__mic {
  background: radial-gradient(circle at 35% 30%, #ffd6f0, #f472b6 45%, #a855f7 100%);
  box-shadow: 0 0 0 calc(6px + var(--talk-level) * 22px) rgba(244, 114, 182, 0.22), 0 10px 34px rgba(244, 114, 182, 0.45);
}
.talk[data-state='listening'] .talk__mic-wave { opacity: 1; border-color: rgba(244, 114, 182, 0.75); animation: talk-ripple 1.3s ease-out infinite; }
.talk[data-state='thinking'] .talk__mic { animation: talk-think 1.2s ease-in-out infinite; }
.talk[data-state='speaking'] .talk__mic { background: radial-gradient(circle at 35% 30%, #e9ddff, rgb(var(--talk-violet)) 50%, #6d28d9 100%); box-shadow: 0 0 0 calc(6px + var(--talk-level) * 14px) rgba(var(--talk-violet), 0.2); }
@keyframes talk-ripple { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.5); opacity: 0; } }
@keyframes talk-think { 0%, 100% { filter: brightness(0.9); } 50% { filter: brightness(1.15); } }

.talk__type {
  display: flex;
  gap: 8px;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}
.talk__type[hidden] { display: none; }
.talk__input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font: inherit;
  font-size: 1rem;
  user-select: text;
  -webkit-user-select: text;
}
.talk__input:focus { outline: 2px solid rgba(var(--talk-mint), 0.8); outline-offset: 1px; }
.talk__send {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  background: rgb(var(--talk-mint));
  color: #07110c;
  font-size: 1.2rem;
  cursor: pointer;
}

/* ---------------- bordas: ouvindo (desfoque) e falando (pulso) ---------------- */

.talk__edge {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(calc(6px + var(--talk-level) * 10px));
  -webkit-backdrop-filter: blur(10px);
  -webkit-mask: radial-gradient(ellipse 72% 66% at 50% 48%, transparent 58%, #000 100%);
          mask: radial-gradient(ellipse 72% 66% at 50% 48%, transparent 58%, #000 100%);
  box-shadow:
    inset 0 0 calc(40px + var(--talk-level) * 90px) rgba(var(--talk-glow), calc(0.35 + var(--talk-level) * 0.5)),
    inset 0 0 calc(8px + var(--talk-level) * 18px) rgba(255, 255, 255, calc(0.12 + var(--talk-level) * 0.25));
}
.talk[data-state='listening'] .talk__edge { opacity: 1; animation: talk-edge-breathe 2.4s ease-in-out infinite; }
.talk[data-state='thinking'] .talk__edge { opacity: 0.55; }
.talk[data-state='speaking'] .talk__edge { opacity: calc(0.45 + var(--talk-level) * 0.55); }
.talk[data-state='speaking'].is-beat .talk__edge { animation: talk-edge-beat 0.3s ease-out; }
@keyframes talk-edge-breathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
@keyframes talk-edge-beat { 0% { filter: brightness(1.6) saturate(1.3); } 100% { filter: brightness(1); } }

@media (prefers-reduced-motion: reduce) {
  .talk, .talk__pet { transition: none; }
  .talk-ring-spin, .talk-orbit, .talk__pet-art, .talk__pet .pet-eyes,
  .talk[data-state='listening'] .talk__edge, .talk.is-beat .talk__hud, .talk[data-state='speaking'].is-beat .talk__edge,
  .talk[data-state='listening'] .talk__mic-wave { animation: none !important; }
}

@media (max-height: 620px) {
  .talk__caption { min-height: 5.5em; }
  .talk__mic { width: 76px; height: 76px; }
}

/* ---------------- atalho no palco e modal de bloqueio ---------------- */

.pet-link--talk { --tone: #3ddc97; }
.pet-link--talk .pet-link__icon { position: relative; }
.pet-link--talk.is-ready .pet-link__icon::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid rgba(61, 220, 151, 0.7);
  animation: talk-ripple 2s ease-out infinite;
}
.pet-link--talk.is-locked .pet-link__meta::before { content: '🔒 '; }

.talk-lock { display: grid; gap: 12px; text-align: center; }
.talk-lock__orb {
  width: 72px; height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 2rem;
  background: radial-gradient(circle at 35% 30%, #7ff0c0, #3ddc97 45%, #14b8a6 100%);
  box-shadow: 0 0 0 6px rgba(61, 220, 151, 0.15);
}
.talk-lock p { margin: 0; }
.talk-lock__how { font-size: 0.9rem; opacity: 0.8; }
.talk-lock__code { display: grid; gap: 6px; padding: 12px; border-radius: 16px; background: rgba(61, 220, 151, 0.12); border: 1px dashed rgba(61, 220, 151, 0.6); }
.talk-lock__code[hidden] { display: none; }
.talk-lock__digits { font-family: var(--font-display, inherit); font-size: 1.8rem; letter-spacing: 0.12em; user-select: all; }

/* Conta → Responsáveis (o lado da criança). */
.family-panel__list { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.family-panel .gbtn--primary { text-decoration: none; justify-self: start; }