:root {
  /* Identidade "Sapingu" — papel quente + tinta + latão. Funde-se no cartão claro. */
  --bg:#EFE9DB; --panel:#F6F2E9; --line:#DBD1BF;
  --ink:#18130E; --ink-soft:#4C443A; --ink-muted:#8A8072;
  --brass:#B0813A; --brass-deep:#876026; --brass-soft:#E7D8B6; --pine:#163A33; --ok:#2F6B4F;
  --paper-on-dark:#F1EADB;
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}

html,body{height:100%}
body{margin:0; overflow:hidden; font-family:var(--font-body); color:var(--ink); background:var(--bg)}

/* O palco preenche TODA a caixa do iframe, em coluna */
.stage{height:100%; width:100%; display:flex; flex-direction:column; gap:9px; padding:12px}

/* Vídeo (avatar) em cima — caixa QUADRADA e centrada (a cara é quadrada) -> nunca corta a cabeça */
.video-wrap{
  position:relative; flex:1 1 auto; min-height:0; width:100%;   /* preenche a caixa (sem espaço morto) */
  border-radius:12px; overflow:hidden; background:var(--ink); border:1px solid var(--line);
}
#avatar{width:100%; height:100%; object-fit:contain; display:block; background:var(--ink)}

/* Cartaz antes de ligar = imagem do avatar (mesma cara do realtime) a PREENCHER a caixa
   quadrada (cover, sem barras pretas — a foto é quase quadrada, não corta a cabeça) */
.poster{position:absolute; inset:0; z-index:1;
  background:url("/avatar/static/avatar.png") center / cover no-repeat}

/* Estado (canto do vídeo) */
.status{position:absolute; left:10px; bottom:10px; z-index:3; display:inline-flex; align-items:center; gap:7px;
  font-size:.78rem; color:var(--paper-on-dark); background:rgba(24,19,14,.6); backdrop-filter:blur(6px);
  padding:4px 10px; border-radius:999px}
.dot{width:8px; height:8px; border-radius:50%; background:#cdbfa6; flex:none}
.dot.listening{background:var(--ok); animation:pulse 1.4s infinite}
.dot.thinking{background:var(--brass); animation:blink 1s infinite}
.dot.speaking{background:var(--brass); animation:pulse 1s infinite}
.dot.error{background:#9B3B2E}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(176,129,58,.5)}70%{box-shadow:0 0 0 7px rgba(176,129,58,0)}100%{box-shadow:0 0 0 0 rgba(176,129,58,0)}}
@keyframes blink{50%{opacity:.3}}

/* Barra de volume — fina */
.vu{flex:none; height:5px; background:#e2d8c2; border-radius:999px; overflow:hidden; border:1px solid var(--line)}
.vu-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--brass),var(--brass-deep)); transition:width .05s linear}

/* ===== CHAT / TRANSCRIÇÃO — painel próprio, FORA da imagem, estilo ChatGPT ===== */
.captions{
  flex:0 1 auto; min-height:0; max-height:44%; overflow-y:auto;   /* durante a chamada; vídeo mantém o resto */
  display:flex; flex-direction:column; gap:7px;        /* mensagens empilham; a + recente fica EM BAIXO */
  padding:12px; background:var(--panel); border:1px solid var(--line); border-radius:10px;
  scrollbar-width:thin; scrollbar-color:var(--brass) transparent;   /* scrollbar integrada (Firefox) */
}
/* espaçador flexível no topo: poucas msgs -> encostadas ao fundo; muitas -> scroll normal p/ cima */
.captions::before{content:""; margin-top:auto}
.captions:empty{display:none}
/* scrollbar integrada (WebKit/Chromium) */
.captions::-webkit-scrollbar{width:8px}
.captions::-webkit-scrollbar-track{background:transparent; margin:6px 0}
.captions::-webkit-scrollbar-thumb{background:var(--line); border-radius:999px; border:2px solid var(--panel)}
.captions::-webkit-scrollbar-thumb:hover{background:var(--brass)}

.cap-line{max-width:88%; padding:8px 12px; border-radius:14px; font-size:.86rem; line-height:1.4;
  word-wrap:break-word; flex:none}
.cap-agent{align-self:flex-start; background:var(--bg); border:1px solid var(--line); color:var(--ink); border-bottom-left-radius:5px}
.cap-user{align-self:flex-end; background:var(--brass-soft); color:#2a2010; border-bottom-right-radius:5px}
.cap-who{display:none}   /* sem etiqueta "Tu:/Assistente:" — as bolhas já indicam o lado */

/* Botão principal — latão (CTA), fixo no fundo */
.btn{flex:none; appearance:none; border:0; cursor:pointer; background:var(--brass); color:#1c1408;
  font-family:var(--font-body); font-weight:600; font-size:1rem; padding:13px 18px; border-radius:9px; width:100%; transition:.16s ease}
.btn:hover{background:var(--brass-deep); color:var(--panel); transform:translateY(-1px)}

/* Controlo (durante a chamada) */
.controls{flex:none; display:flex; flex-direction:column; gap:8px}
.seg{display:inline-flex; align-self:center; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:3px}
.seg-btn{appearance:none; border:0; cursor:pointer; background:transparent; color:var(--ink-muted); font-size:.88rem; font-weight:600; padding:7px 16px; border-radius:999px; transition:.15s}
.seg-btn.is-active{background:var(--ink); color:var(--panel)}
.ctrl-row{display:flex; gap:8px}
.pill{appearance:none; cursor:pointer; background:var(--panel); color:var(--ink); border:1px solid var(--line); font-size:.88rem; font-weight:600; padding:10px 14px; border-radius:9px; flex:1; transition:.15s}
.pill:hover{border-color:var(--ink)}
.pill.is-off{background:#f0dcd6; color:#9B3B2E; border-color:#e0c3bb}
.pill-stop{background:var(--bg)}
.pill-send{flex:none; background:var(--brass); color:#1c1408; border:0}
.text-form{display:flex; gap:8px}
#text-input{flex:1; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--ink); padding:10px 12px; font-size:.95rem; outline:none; font-family:var(--font-body)}
#text-input:focus{border-color:var(--brass)}

.media-panel{display:none}