:root { color-scheme: dark; --bg:#12100e; --fg:#efe7dd; --dim:#9c9086; --line:#2b2521; --me:#1d3a2e; --him:#241f1b; }
* { box-sizing: border-box; }
body { margin:0; height:100dvh; display:flex; flex-direction:column; background:var(--bg); color:var(--fg);
  font:16px/1.5 ui-sans-serif, system-ui, -apple-system, sans-serif; }
header { display:flex; align-items:baseline; gap:.75rem; padding:.75rem 1rem; border-bottom:1px solid var(--line); }
h1 { font-size:1.05rem; margin:0; letter-spacing:.02em; }
.state { font-size:.8rem; color:var(--dim); }
.state.on { color:#7fc99a; }
.state.off { color:#d98b7a; }
.hidden { display:none !important; }
main { flex:1; display:flex; flex-direction:column; min-height:0; }
#log { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.6rem; }
.b { max-width:min(70ch,90%); padding:.55rem .8rem; border-radius:.8rem; white-space:pre-wrap; overflow-wrap:anywhere; }
.b.me { align-self:flex-end; background:var(--me); }
.b.him { align-self:flex-start; background:var(--him); }
.b.err { align-self:flex-start; background:#3b201c; color:#ffbcae; }
.meta { font-size:.72rem; color:var(--dim); margin-top:.25rem; }
#progress { min-height:1.2rem; margin:0 1rem; font-size:.8rem; color:var(--dim); }
form#composer { display:flex; gap:.5rem; padding:.75rem 1rem 1rem; border-top:1px solid var(--line); }
textarea { flex:1; resize:none; background:#1b1613; color:var(--fg); border:1px solid var(--line); border-radius:.6rem; padding:.55rem .7rem; font:inherit; }
button { background:#2f6b4f; color:#fff; border:0; border-radius:.6rem; padding:.55rem 1rem; font:inherit; cursor:pointer; }
button:disabled { opacity:.5; cursor:default; }
form#login { padding:1.5rem; display:flex; flex-direction:column; gap:.6rem; max-width:22rem; }
form#login input { background:#1b1613; color:var(--fg); border:1px solid var(--line); border-radius:.6rem; padding:.5rem .7rem; font:inherit; }
.err { color:#ffbcae; font-size:.85rem; min-height:1.2rem; margin:0; }

/* --- voz --- */
#controls { display:flex; justify-content:center; padding:1rem 1rem 2rem; border-top:1px solid var(--line); }
button.mic { width:min(60vw,14rem); height:3.4rem; border-radius:2rem; font-size:1.05rem; letter-spacing:.02em;
  background:#2f6b4f; transition:background .15s, transform .1s; }
button.mic:active { transform:scale(.98); }
button.mic.on { background:#a33b2c; }
button.mic.wait { background:#4a4038; }
.b.sys { align-self:center; background:transparent; color:var(--dim); font-size:.8rem; padding:.2rem; }
.b.parcial { opacity:.6; font-style:italic; }

/* --- orbe --- */
#palco { flex:1 1 auto; min-height:38vh; position:relative; }
#orbe { position:absolute; inset:0; width:100%; height:100%; display:block; }
/* Com o orbe em cena o histórico vira rodapé: legenda do que foi dito, não o
   centro da tela. */
#log { flex:0 0 auto; max-height:32vh; }
@media (max-height: 620px) {
  #palco { min-height:30vh; }
  #log { max-height:26vh; }
}

/* --- tela larga ---
   No desktop o conteúdo espalhava de ponta a ponta (bolha do Nilton a 3800px
   da do Claudio) e o orbe tomava metade da altura. Coluna central resolve os
   dois, e o rodapé ganha um fade para o corte do scroll não ficar seco. */
#palco, #log, form#composer, #controls, #progress { width:min(100%, 940px); margin-inline:auto; }
#palco { max-height:46vh; }
#log {
  max-height:38vh;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2.2rem);
  mask-image: linear-gradient(to bottom, transparent 0, #000 2.2rem);
}
@media (min-width: 900px) {
  #palco { max-height:40vh; }
  #log { max-height:34vh; }
  .b { max-width:min(58ch, 78%); }
}