/* Nina — Modo Jarvis (tela cheia, orb dourado). Paleta: preto #0b0b0c,
   superfície #151517, dourado #d9b56d / #f3e3bf, branco, cinza #8a8a8f. */
#nina-global {
  --nina-black: #0b0b0c; --nina-surface: #151517; --nina-gold: #d9b56d; --nina-gold-light: #f3e3bf;
  --nina-white: #fff; --nina-gray: #8a8a8f;
  --paper: var(--nina-surface); --ink: var(--nina-white); --hairline: #2a2a2e; --well: #1c1c1f;
  position: relative; z-index: 10020; font-family: 'Hanken Grotesk', sans-serif;
}
#nina-global [hidden], #nina-global[hidden] { display: none !important; }
#nina-global button:focus-visible { outline: 3px solid var(--nina-gold-light); outline-offset: 3px; }

/* ---------------------------- FAB ---------------------------- */
/* Orb flutuante sobre a ficha: sem pílula, sem borda, sem fundo — só o orb
   "vivo", centralizado embaixo, com um balanço lento e orgânico. */
#nina-global .nina-fab { position: fixed; z-index: 10022; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: 0; margin: 0; padding: 0; border: 0; background: transparent; color: var(--nina-gold); box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; animation: nina-float 6.5s ease-in-out infinite; }
#nina-global .nina-fab-orb { width: 104px; height: 104px; display: block; filter: drop-shadow(0 0 22px #d9b56d99) drop-shadow(0 0 6px #f3e3bf66); }
#nina-global .nina-fab-orb .nina-orb-img { display: block; width: 100%; height: 100%; object-fit: contain; }
#nina-global .nina-fab-caption { margin-top: -10px; font: 600 10px/1 'Hanken Grotesk', sans-serif; letter-spacing: .28em; text-transform: uppercase; color: var(--nina-gold); opacity: .75; }
#nina-global .nina-fab:hover .nina-fab-orb, #nina-global .nina-fab:focus-visible .nina-fab-orb { filter: drop-shadow(0 0 26px #d9b56d99); }
#nina-global .nina-fab.is-listening .nina-fab-orb { filter: drop-shadow(0 0 30px #d9b56dbb); }
#nina-global .nina-fab:focus-visible { outline: none; }
#nina-global .nina-fab:focus-visible .nina-fab-caption { opacity: 1; text-decoration: underline; }
@keyframes nina-float { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 30% { transform: translate(0, -7px) rotate(1.2deg); } 65% { transform: translate(0, -3px) rotate(-1deg); } }

/* Orb (WebP animado, render real do After Effects) — --nina-level (0–1) vem
   do áudio; a reatividade é aplicada por cima do loop via filter/transform,
   já que o próprio loop é um vídeo "assado" (não acelera em tempo real). */
#nina-global .nina-orb-host { --nina-level: 0; display: block; line-height: 0; }
#nina-global .nina-orb-img {
  display: block; width: 100%; height: 100%; object-fit: contain; user-select: none;
  filter: drop-shadow(0 0 26px #d9b56d55) brightness(calc(1 + var(--nina-level) * 0.22)) saturate(calc(1 + var(--nina-level) * 0.15));
  transform: scale(calc(1 + var(--nina-level) * 0.05));
  transition: transform .12s ease-out, filter .15s ease-out;
  animation: nina-breathe 7s ease-in-out infinite;
}
#nina-global .nina-orb-host[data-state="connecting"] .nina-orb-img { animation-duration: 1.8s; opacity: .82; }
#nina-global .nina-orb-host[data-state="speaking"] .nina-orb-img { filter: drop-shadow(0 0 34px #d9b56d80) brightness(calc(1.12 + var(--nina-level) * 0.28)) saturate(calc(1.05 + var(--nina-level) * 0.2)); }
#nina-global .nina-orb-host[data-state="paused"] .nina-orb-img { opacity: .55; animation-play-state: paused; filter: drop-shadow(0 0 14px #d9b56d33) grayscale(.15); }
#nina-global .nina-orb-host.is-static .nina-orb-img { animation: none !important; }
@keyframes nina-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* ---------------------------- Stage (tela cheia) ---------------------------- */
/* `overflow: clip` (não `hidden`): o foco inicial no botão mic (acessibilidade)
   faria o Chrome tentar rolar este contêiner para revelar o elemento focado
   mesmo sem barra de rolagem visível — "clip" impede qualquer rolagem
   programática, então o stage nunca se desloca ao ganhar foco. */
#nina-global .nina-stage { position: fixed; inset: 0; z-index: 10025; overflow: clip; background: radial-gradient(ellipse 120% 60% at 50% -8%, #241d10 0%, #0b0b0c 55%, #050505 100%); color: var(--nina-white); }
#nina-global .nina-stage::before, #nina-global .nina-stage::after { content: ''; position: absolute; border: 1px solid #d9b56d1f; border-radius: 50%; pointer-events: none; }
#nina-global .nina-stage::before { width: 340px; height: 340px; top: -90px; right: -110px; }
#nina-global .nina-stage::after { width: 220px; height: 220px; bottom: -70px; left: -80px; }
#nina-global .nina-stage-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; width: 100%; height: 100dvh; box-sizing: border-box; padding: calc(16px + env(safe-area-inset-top, 0px)) 20px calc(16px + env(safe-area-inset-bottom, 0px)); }

/* Header */
#nina-global .nina-stage-header { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 12px; }
#nina-global .nina-stage-icon { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 3px; color: var(--nina-gold); }
#nina-global .nina-stage-icon svg { width: 100%; height: 100%; }
#nina-global .nina-stage-heading { flex: 1 1 auto; min-width: 0; }
#nina-global .nina-stage-heading small { display: block; font-size: 11px; color: var(--nina-gray); letter-spacing: .02em; }
#nina-global .nina-stage-heading strong { display: block; margin-top: 2px; font-size: 19px; font-weight: 600; color: var(--nina-white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#nina-global .nina-stage-close, #nina-global .nina-stage-more { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #ffffff33; background: transparent; color: var(--nina-white); font-size: 18px; line-height: 1; cursor: pointer; }
#nina-global .nina-stage-close { font-size: 22px; }
#nina-global .nina-stage-menu { position: relative; flex: 0 0 auto; }
#nina-global .nina-stage-menu-list { position: absolute; top: calc(100% + 8px); right: 0; z-index: 2; display: flex; flex-direction: column; min-width: 190px; background: var(--nina-surface); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: 0 14px 40px #0008; overflow: hidden; }
#nina-global .nina-stage-menu-list button { padding: 12px 14px; text-align: left; border: 0; background: transparent; color: var(--nina-white); font: 500 13px 'Hanken Grotesk', sans-serif; cursor: pointer; }
#nina-global .nina-stage-menu-list button:hover { background: #1f1f22; }

/* Progresso */
#nina-global .nina-progress { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
#nina-global .nina-progress-track { flex: 1 1 auto; height: 3px; border-radius: 2px; background: #ffffff1a; overflow: hidden; }
#nina-global .nina-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--nina-gold), var(--nina-gold-light)); transition: width .4s ease; }
#nina-global [data-nina-count] { flex: 0 0 auto; font-size: 12px; color: var(--nina-gray); font-variant-numeric: tabular-nums; }

/* Orb */
#nina-global .nina-orb-wrap { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; margin: 8px 0 2px; }
#nina-global .nina-orb { width: min(260px, 42vh); height: min(260px, 42vh); max-width: 64vw; max-height: 64vw; cursor: pointer; outline: none; }
#nina-global .nina-orb:focus-visible .nina-orb-img { filter: drop-shadow(0 0 30px #d9b56dbb); }
#nina-global .nina-listening-indicator { flex: 0 0 auto; display: flex; justify-content: center; color: var(--nina-gold); opacity: .85; }
#nina-global .nina-listening-indicator svg { width: 22px; height: 16px; }

/* Status + falas */
#nina-global .nina-status { flex: 0 0 auto; margin: 0; display: block; width: 100%; text-align: center; justify-content: center; font-size: 13px; color: #c9c9cc; min-height: 18px; }
/* min-height:0 + overflow:hidden: permite que esta seção (a única com
   flex-grow) encolha de verdade quando o conteúdo total passar da tela,
   em vez de forçar o stage a "vazar" — combinado com overflow:clip acima,
   nunca aparece rolagem, nem por foco/acessibilidade. */
#nina-global .nina-lines { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 0 6px; text-align: center; }
#nina-global .nina-line-latest { margin: 0; font-size: clamp(20px, 6vw, 26px); line-height: 1.3; font-weight: 600; color: var(--nina-white); }
#nina-global .nina-line-prev { margin: 0; font-size: 14px; line-height: 1.4; color: var(--nina-gray); opacity: .75; }

/* Resumo inline (rascunho retomado / zerar / idle) */
#nina-global [data-nina-summary] { flex: 0 0 auto; display: grid; gap: 8px; }
#nina-global [data-nina-summary]:empty { display: none; }
#nina-global [data-nina-summary] p { margin: 0; font-size: 13px; color: #c9c9cc; text-align: center; }
#nina-global [data-nina-summary] button { min-height: 40px; padding: 9px 14px; border: 1px solid #d9b56d55; border-radius: 10px; background: transparent; color: var(--nina-gold-light); font: 600 12px/1.3 'Hanken Grotesk', sans-serif; cursor: pointer; }

/* Rodapé: pílula + botão mic */
#nina-global .nina-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
#nina-global .nina-bar-pill { flex: 1 1 auto; min-width: 0; border: 1px solid #d9b56d40; border-radius: 999px; padding: 14px 18px; color: var(--nina-gray); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#nina-global .nina-mic { position: relative; flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid var(--nina-gold); background: transparent; color: var(--nina-gold); display: flex; align-items: center; justify-content: center; cursor: pointer; }
#nina-global .nina-mic svg { width: 24px; height: 24px; }
#nina-global .nina-mic.is-live { background: var(--nina-gold); color: var(--nina-black); box-shadow: 0 0 24px #d9b56d80; }
#nina-global .nina-mic.is-connecting::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--nina-gold); animation: nina-spin .9s linear infinite; }
@keyframes nina-spin { to { transform: rotate(360deg); } }

/* Desktop: o backdrop ocupa a tela inteira; o conteúdo fica numa coluna central */
@media (min-width: 700px) {
  #nina-global .nina-stage-inner { max-width: 480px; margin: 0 auto; }
}

/* ---------------------------- Modal de revisão (tema escuro/dourado) ---------------------------- */
#nina-global .nina-modal-overlay { position: fixed; inset: 0; z-index: 10030; display: flex; align-items: center; justify-content: center; padding: 20px; background: #05050599; outline: none; }
#nina-global .nina-modal { width: 100%; max-width: 640px; max-height: 85vh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border: 1px solid var(--hairline); border-radius: 18px; box-shadow: 0 24px 80px #000a; overflow: hidden; }
#nina-global .nina-modal header { display: flex; align-items: center; gap: 12px; padding: 22px 24px 6px; }
#nina-global .nina-modal header h2 { margin: 0; font-size: 20px; font-family: 'Hanken Grotesk', sans-serif; }
#nina-global .nina-modal [data-nina-modal-close] { margin-left: auto; border: 0; background: transparent; font-size: 28px; line-height: 1; color: inherit; min-width: 36px; height: 36px; cursor: pointer; }
#nina-global .nina-modal-subtitle { margin: 0 24px 14px; font-size: 13px; opacity: .7; }
#nina-global .nina-modal-missing { margin: 0 24px 14px; padding: 12px 14px; border-radius: 10px; background: #2a1f10; color: var(--nina-gold-light); font-size: 12px; line-height: 1.5; }
#nina-global .nina-modal-list { margin: 0 24px; padding-top: 6px; border-top: 1px solid var(--hairline); overflow: auto; flex: 1 1 auto; }
#nina-global .nina-modal-list > div { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
#nina-global .nina-modal-list strong { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .6; }
#nina-global .nina-modal-list span { font-size: 14px; white-space: pre-wrap; }
#nina-global .nina-modal footer { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; padding: 16px 24px 24px; }
#nina-global .nina-modal-approve { min-width: 220px; padding: 14px 20px; font: 700 16px/1.2 'Hanken Grotesk', sans-serif; border: 0; border-radius: 10px; background: var(--nina-gold); color: var(--nina-black); cursor: pointer; }
#nina-global .nina-modal-approve:disabled { opacity: .5; cursor: default; }
#nina-global .nina-modal-secondary { padding: 14px 18px; font: 500 14px/1.2 'Hanken Grotesk', sans-serif; border: 1px solid var(--hairline); border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; }
@media (max-width: 680px) {
  #nina-global .nina-modal-overlay { padding: 10px; }
  #nina-global .nina-modal { max-height: 92vh; }
  #nina-global .nina-modal footer { justify-content: stretch; }
  #nina-global .nina-modal-approve, #nina-global .nina-modal-secondary { flex: 1 1 auto; }
}

/* Destaque do campo preenchido na ficha (inalterado) */
.nina-filled { outline: 2px solid #65a28e !important; outline-offset: 3px; transition: outline-color .2s; }

/* Histórico de entrevistas por voz na ficha do paciente (inalterado) */
.nina-history { margin: 24px 0; padding: 20px; border: 1px solid var(--hairline, #ddd); }
.nina-history details { padding: 12px 0; border-bottom: 1px solid var(--hairline, #ddd); }
.nina-history summary { cursor: pointer; font-size: 14px; }
.nina-history p { font-size: 13px; line-height: 1.6; margin-top: 8px; white-space: pre-wrap; }

@media (max-width: 680px) {
}

/* Enquanto o orb flutua sobre a ficha, reserva espaço no fim da página para
   ele não cobrir o último campo nem o botão de salvar. */
body:has(#nina-global:not([hidden])) #app { padding-bottom: 150px; }