/* sala.css — a sala da reunião no cânone da babel-os (frontend/nova/canone/tokens.css, 12/10/2026: as cores copiadas, porque a
   sala é servida pelo serviço de reunião, noutro endereço). Computador: palco à esquerda, painel à direita, comandos embaixo.
   Celular (até 760 px): o palco rola inteiro, o painel vira folha que sobe de baixo, os comandos só com ícone.
   O PALCO LIVRE (17/10/2026, o desenho aprovado: theus/2026-10-17-1742-reuniao-palco-livre-design.md): nada fica por cima de câmera
   nem de tela. Nome, microfone, mão e "Organiza" vão na legenda, embaixo do quadro; a câmera e a tela aparecem inteiras (contain); cada
   objeto tem a sua faixa: em cima quem e onde, embaixo à esquerda os avisos, no meio os comandos, à direita a conexão, na lateral o
   painel. "Você" é um quadro da grade. Enquete e oferta moram no painel Palco (no celular, no fluxo, embaixo das câmeras). */
:root {
  --bg-0: #08071a; --bg-1: #110e26; --bg-2: #181438; --bg-3: #221c48;
  --glass: rgba(255,255,255,.035); --glass-2: rgba(255,255,255,.065); --glass-3: rgba(255,255,255,.11);
  --line: rgba(200,190,255,.10); --line-2: rgba(200,190,255,.22); --line-3: rgba(200,190,255,.42);
  --ink: #efecff; --ink-2: #bdb6e3; --ink-3: #9992c6;
  --brand: #ab97ff; --brand-2: #cdbfff; --brand-deep: #6a52e0; --brand-ink: #160f33; --glow: #e6aaff;
  --brand-tint: rgba(171,151,255,.14); --brand-tint-2: rgba(171,151,255,.26);
  --ok: #72e3c3; --warn: #f5d27d; --bad: #ff90a6; --info: #80c6ff;
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);
  --lado: 340px; --legenda: 26px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 15px/1.4 var(--font); background: radial-gradient(1200px 700px at 70% -10%, #1d1650 0%, var(--bg-0) 60%) fixed, var(--bg-0); color: var(--ink); -webkit-font-smoothing: antialiased; overflow: hidden; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
svg { display: block; }
figure { margin: 0; }

.app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.app > * { flex: none; }
.conhecer-babel { align-self: flex-end; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; color: var(--ink-2); font-size: 12px; text-decoration: none; }
.conhecer-babel:hover { color: var(--brand-2); text-decoration: underline; }
.conhecer-babel:focus-visible { outline: 2px solid var(--brand); outline-offset: -4px; border-radius: var(--r-sm); }

/* ---------- antes de entrar ---------- */
.app > .portal { flex: 1 1 auto; display: grid; place-items: center; padding: 24px; overflow: auto; }
.cartao-portal { width: min(440px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 34px 28px; border-radius: var(--r-lg); background: linear-gradient(180deg, var(--glass-2), var(--glass)); border: 1px solid var(--line-2); box-shadow: 0 24px 60px -28px rgba(0,0,0,.7); }
.marca { width: 52px; height: 52px; border-radius: var(--r-md); display: grid; place-items: center; font-weight: 700; font-size: 26px; color: var(--brand-ink); background: linear-gradient(135deg, var(--brand-2), var(--brand) 55%, var(--brand-deep)); box-shadow: 0 0 40px -6px rgba(171,151,255,.6); }
.portal-titulo { margin: 4px 0 0; font-size: 19px; font-weight: 600; }
.portal-sub { margin: 0; color: var(--ink-2); }
.portal-nota { margin: 2px 0 0; color: var(--ink-3); font-size: 13px; }
.cartao-portal input { width: 100%; font: inherit; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--bg-1); color: var(--ink); outline: none; }
.cartao-portal input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.cartao-portal input, .bt.largo { min-height: 48px; font-size: 16px; }
.teste { gap: 14px; }
.previa { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(160deg, var(--bg-3), var(--bg-1)); border: 1px solid var(--line-2); display: grid; place-items: center; }
.previa video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: scaleX(-1); }
.previa-sem .avatar-circulo { width: 88px; font-size: 32px; }
.nivel { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 6px; border-radius: var(--r-pill); background: rgba(255,255,255,.14); overflow: hidden; }
.nivel i { display: block; height: 100%; width: 0; background: var(--ok); border-radius: var(--r-pill); transition: width .08s linear; }
.alternar { display: flex; gap: 10px; width: 100%; }
.cmd.grande { flex: 1; width: auto; height: 52px; flex-direction: row; gap: 8px; border-radius: var(--r-pill); }
.cmd.grande .rot { display: inline !important; font-size: 14px; color: inherit; }
#testeMic[aria-pressed="false"], #testeCam[aria-pressed="false"] { background: rgba(255,144,166,.10); border-color: rgba(255,144,166,.28); }
#testeMic[aria-pressed="false"] .ic, #testeCam[aria-pressed="false"] .ic { color: var(--bad); }
.giro { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--brand); animation: giro 1s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

/* ---------- botões ---------- */
.bt { padding: 10px 16px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--glass-2); cursor: pointer; transition: background .15s, border-color .15s; }
.bt:hover { background: var(--glass-3); }
.bt.primario { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
.bt.primario:hover { background: var(--brand-2); }
.bt.perigo { background: rgba(255,144,166,.14); border-color: rgba(255,144,166,.45); color: var(--bad); }
.bt.pequeno { padding: 6px 12px; font-size: 13px; }
.bt.largo { width: 100%; padding: 14px 16px; }
.bt:disabled { opacity: .5; cursor: default; }
.bt-icone { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }
.bt-icone:hover { background: var(--glass-2); color: var(--ink); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- a faixa de cima: quem e onde ---------- */
.topo { display: flex; align-items: center; gap: 12px; padding: 12px 18px; min-height: 60px; }
.topo-titulo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; min-width: 0; }
.topo-titulo span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ponto-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(114,227,195,.15); flex: none; }
.contagem { color: var(--ink-2); font-size: 13px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--glass-2); white-space: nowrap; }
.selo { background: rgba(255,144,166,.16); color: var(--bad); border: 1px solid rgba(255,144,166,.4); padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; }
.chip-apresenta { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--brand-tint); border: 1px solid var(--line-2); color: var(--brand-2); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chip-apresenta svg { width: 16px; height: 16px; flex: none; }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.modos { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--glass-2); }
.modo { border: 0; background: transparent; color: var(--ink-2); padding: 5px 12px; border-radius: var(--r-pill); font-size: 12.5px; cursor: pointer; }
.modo[aria-pressed="true"] { background: var(--brand-tint-2); color: var(--ink); font-weight: 600; }
.bt-topo { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--glass-2); color: var(--ink); font-size: 13px; cursor: pointer; white-space: nowrap; }
.bt-topo:hover { background: var(--glass-3); }
.bt-topo[aria-pressed="true"] { background: var(--brand-tint-2); border-color: var(--brand); }
.bt-topo .ic svg { width: 17px; height: 17px; }

/* ---------- o corpo: o palco e o painel ---------- */
.app > .corpo { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0 18px; min-height: 0; }
.corpo.com-lado { grid-template-columns: minmax(0, 1fr) var(--lado); }
/* min-width 0: a faixa de miniaturas (rola de lado) não alarga o palco nem empurra o painel para fora da tela (33 pessoas, 1440 px) */
.palco { position: relative; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.palco > section { flex: 1; min-height: 0; min-width: 0; display: flex; }
.voce-apresenta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; }

/* o quadro de uma pessoa: a imagem inteira em cima, a legenda embaixo; nada por cima do rosto */
.pessoa { display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0; }
.pessoa .quadro { position: relative; flex: 1 1 auto; min-height: 0; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(160deg, var(--bg-2), var(--bg-0)); border: 1px solid var(--line); transition: box-shadow .2s var(--ease), border-color .2s; }
.pessoa canvas, .pessoa video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pessoa.eu video { transform: scaleX(-1); }
.pessoa .avatar { position: absolute; inset: 0; display: grid; place-items: center; }
.avatar-circulo { width: clamp(44px, 28%, 96px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: clamp(16px, 2.2vw, 30px); color: var(--brand-ink); }
.pessoa.com-video .avatar { display: none; }
.pessoa.falando .quadro { border: 2px solid var(--brand); box-shadow: 0 0 0 4px var(--brand-tint), 0 0 32px -6px rgba(171,151,255,.8); }
.legenda { flex: none; display: flex; align-items: center; gap: 6px; min-height: 20px; min-width: 0; font-size: 13px; line-height: 20px; color: var(--ink); white-space: nowrap; overflow: hidden; }
.legenda .nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.legenda svg { width: 16px; height: 16px; flex: none; }
.legenda .mudo { color: var(--bad); }
.legenda .quieto { color: var(--ink-3); }
.legenda .fala { color: var(--brand-2); }
.legenda .nota { color: var(--ink-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.chip { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 0 8px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; line-height: 20px; }
.chip svg { width: 13px; height: 13px; }
.chip.organiza { background: var(--brand-tint); color: var(--brand-2); }
.chip.mao { background: rgba(245,210,125,.16); color: var(--warn); }

/* a grade: o tamanho de cada quadro vem do arrumarGrade (sala.js), com a legenda somada à altura */
.grade { flex: 1; min-width: 0; display: grid; gap: 14px 10px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); grid-auto-rows: var(--altura, 1fr); align-content: center; justify-content: center; min-height: 0; }
.grade > .mais { align-self: start; height: calc(100% - var(--legenda)); min-height: 44px; border-radius: var(--r-md); border: 1px dashed var(--line-2); background: var(--glass); color: var(--ink-2); font-weight: 600; font-size: 16px; cursor: pointer; }
.grade > .mais:hover { background: var(--bg-3); color: var(--ink); }

/* só você: o seu quadro e o aviso de que quem entrar aparece aqui */
.vazio { flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.vazio > .pessoa.eu { flex: none; width: min(560px, 100%); }
.vazio > .pessoa.eu .quadro { flex: none; aspect-ratio: 16 / 9; }
.vazio-texto { display: grid; gap: 4px; }

/* «Quem fala»: quem fala grande; os outros e você numa faixa embaixo */
.destaque { flex: 1 1 auto; min-height: 0; display: flex; }
.destaque > .pessoa { flex: 1 1 auto; }
.destaque .legenda { font-size: 14px; }
.destaque .avatar-circulo { width: clamp(72px, 16%, 150px); font-size: clamp(24px, 3.6vw, 52px); }
.palco.em-destaque > #cheio { flex: 0 0 auto; }
.palco.em-destaque .grade { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 180px; grid-auto-rows: calc(101px + var(--legenda)); overflow-x: auto; justify-content: start; }
.palco.em-destaque .vazio { display: none !important; }

/* a apresentação: a tela inteira, na proporção dela; as câmeras numa coluna ao lado ("Ver só a tela" esconde a coluna) */
.palco.apresentando { flex-direction: row; }
.apresentacao { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.apresentacao-quadro { position: relative; flex: 1 1 auto; min-height: 0; border-radius: var(--r-lg); overflow: hidden; background: #000; border: 1px solid var(--line-2); display: grid; place-items: center; }
.apresentacao-quadro canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.apresentacao .legenda { color: var(--ink-2); }
.apresentacao .ampliar { display: none; margin-left: auto; }
.palco.apresentando > #cheio { flex: 0 0 232px; min-height: 0; }
.palco.apresentando .grade { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-auto-rows: calc(130px + var(--legenda)); align-content: start; overflow-y: auto; gap: 12px; }
.palco.apresentando .grade .quadro { flex: none; aspect-ratio: 16 / 9; }
.palco.apresentando .grade > .mais { height: auto; padding: 10px; font-size: 13px; }
.palco.apresentando .vazio { display: none !important; }
.palco.apresentando.so-tela > #cheio { display: none !important; }
:is(.palco.em-destaque, .palco.apresentando) .grade .chip .txt { display: none; }

/* cartões do palco: a enquete e a oferta (no computador, dentro do painel Palco; no celular, no fluxo, embaixo das câmeras) */
.cartoes { display: none; }
.cartao svg, .comprar svg, .bloco svg { width: 16px; height: 16px; flex: none; }
.cartao { border-radius: var(--r-md); padding: 14px 14px 12px; background: var(--bg-1); border: 1px solid var(--line-2); animation: entra .35s var(--ease); }
@keyframes entra { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.cartao-cabeca { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--brand-2); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.cartao-cabeca .bt-icone { margin-left: auto; width: 28px; height: 28px; }
.cartao h3 { margin: 0 0 10px; font-size: 16px; line-height: 1.3; }
.opcoes { display: flex; flex-direction: column; gap: 8px; }
.opcao { position: relative; display: flex; justify-content: space-between; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--glass); cursor: pointer; overflow: hidden; }
.opcao:hover:not(:disabled) { border-color: var(--brand); }
.opcao:disabled { cursor: default; }
.opcao .barra { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--brand-tint-2); transition: width .5s var(--ease); }
.opcao .txt, .opcao .pct { position: relative; }
.opcao .pct { color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: 13px; }
.opcao.minha { border-color: var(--brand); }
.opcao.minha .txt::after { content: ' · seu voto'; color: var(--brand-2); font-size: 12px; }
.cartao-pe { margin-top: 8px; color: var(--ink-3); font-size: 12px; display: flex; justify-content: space-between; gap: 8px; }
.oferta-preco { font-size: 22px; font-weight: 700; color: var(--ok); margin: -4px 0 10px; }
.oferta-onde { color: var(--ink-3); font-size: 12px; margin-top: 8px; }
.comprar { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 16px; border-radius: var(--r-pill); background: var(--ok); color: #062b22; font-weight: 700; text-decoration: none; }
.comprar:hover { filter: brightness(1.08); }
.titulo-palco { margin: 0 2px; font-size: 12.5px; color: var(--ink-3); }

/* ---------- painel lateral ---------- */
.lado { min-height: 0; display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.lado-cabeca { display: flex; align-items: center; gap: 6px; padding: 10px 10px 8px 12px; border-bottom: 1px solid var(--line); }
.abas { display: flex; gap: 4px; flex: 1; min-width: 0; }
.aba { flex: 1; padding: 8px 6px; border-radius: var(--r-pill); border: 0; background: transparent; color: var(--ink-2); cursor: pointer; font-size: 13.5px; white-space: nowrap; }
.aba[aria-selected="true"] { background: var(--brand-tint-2); color: var(--ink); font-weight: 600; }
.lado-corpo { flex: 1; min-height: 0; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.lado-lista { display: flex; flex-direction: column; gap: 10px; }
#painelConversa { padding: 0; }
.busca { width: 100%; font: inherit; font-size: 14px; padding: 9px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--bg-1); color: var(--ink); outline: none; }
.busca:focus { border-color: var(--brand); }
.titulo-lista { margin: 4px 2px 0; font-size: 12px; color: var(--ink-3); letter-spacing: .02em; }
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.linha-pessoa { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: var(--r-sm); }
.linha-pessoa:hover { background: var(--glass-2); }
.linha-pessoa .avatar-circulo { width: 32px; font-size: 13px; flex: none; }
.linha-pessoa .quem { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.linha-pessoa .quem b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-pessoa .quem small { color: var(--ink-3); font-size: 11.5px; }
.linha-pessoa .sinais { display: flex; gap: 6px; color: var(--ink-3); }
.linha-pessoa .sinais svg { width: 16px; height: 16px; }
.linha-pessoa .sinais .alto { color: var(--warn); }
.linha-pessoa .sinais .ativo { color: var(--brand-2); }
.linha-pessoa .sinais .mudo { color: var(--ink-3); opacity: .7; }
.acoes-pessoa { display: flex; gap: 4px; }
.acoes-pessoa .bt-icone { width: 30px; height: 30px; }
.acoes-pessoa .bt-icone svg { width: 16px; height: 16px; }

/* pedidos de entrada: no alto do painel Pessoas (o painel abre sozinho para quem organiza) */
.pedidos { flex: none; padding: 10px 12px; border-radius: var(--r-md); background: var(--brand-tint); border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 8px; }
.pedidos .linha-topo { display: flex; align-items: center; gap: 8px; justify-content: space-between; color: var(--ink-2); font-size: 13px; }
.pedido { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pedido span { flex: 1 1 160px; }

.mensagens { list-style: none; margin: 0; padding: 12px; flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.msg { display: flex; flex-direction: column; gap: 2px; max-width: 92%; }
.msg .de { font-size: 12px; color: var(--ink-3); }
.msg .de b { color: var(--brand-2); font-weight: 600; }
.msg .txt { padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--glass-2); white-space: pre-wrap; word-break: break-word; }
.msg.minha { align-self: flex-end; align-items: flex-end; }
.msg.minha .txt { background: var(--brand-tint-2); border-radius: 14px 14px 4px 14px; }
.msg a { color: var(--brand-2); }
.msg-vazia { color: var(--ink-3); font-size: 13px; text-align: center; margin: auto; padding: 24px 12px; }
.escrever { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.escrever input { flex: 1; min-width: 0; font: inherit; padding: 11px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--bg-1); color: var(--ink); outline: none; }
.escrever input:focus { border-color: var(--brand); }
.escrever .bt { padding: 0; width: 44px; height: 44px; display: grid; place-items: center; flex: none; }
.escrever .bt svg { width: 18px; height: 18px; }

/* o painel do palco (quem organiza monta a enquete e a oferta) */
.bloco { border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-1); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.bloco h4 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.bloco h4 svg { width: 16px; height: 16px; color: var(--brand-2); }
.bloco p { margin: 0; color: var(--ink-3); font-size: 12.5px; }
.campo { width: 100%; font: inherit; font-size: 14px; padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--bg-0); color: var(--ink); outline: none; }
.campo:focus { border-color: var(--brand); }
.linha-campo { display: flex; gap: 6px; align-items: center; }
.linha-campo .campo { flex: 1; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.erro-campo { color: var(--bad); font-size: 12.5px; margin: 0; }

/* ---------- avisos: a faixa de baixo à esquerda (no celular, logo abaixo do título) ---------- */
.aviso { margin: 8px 18px 0; padding: 9px 14px; border-radius: var(--r-md); background: rgba(245,210,125,.12); border: 1px solid rgba(245,210,125,.35); color: var(--warn); font-size: 13.5px; }
.som { display: flex; justify-content: center; padding: 10px 18px 0; }
.som .bt { font-size: 15px; padding: 12px 22px; box-shadow: 0 0 40px -10px rgba(171,151,255,.8); }
.faixa-avisos { margin: 0; min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13.5px; }
.faixa-avisos svg { width: 16px; height: 16px; flex: none; color: var(--warn); }
.faixa-avisos .rapido { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: entra .3s var(--ease); }
.faixa-avisos.alto { display: none; }

/* ---------- comandos: no meio; a conexão à direita ---------- */
.comandos { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px; padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); }
.comandos-meio { display: flex; align-items: center; justify-content: center; gap: 18px; }
.conexao { margin: 0; justify-self: end; display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.conexao svg { width: 16px; height: 16px; color: var(--ok); }
.conexao[data-estado="caiu"] svg { color: var(--warn); }
.grupo { display: flex; gap: 8px; }
.cmd { position: relative; min-width: 64px; height: 58px; padding: 6px 10px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--glass-2); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: background .15s, border-color .15s, transform .1s; }
.cmd:hover { background: var(--glass-3); }
.cmd:active { transform: scale(.97); }
.cmd .ic svg { width: 20px; height: 20px; }
.cmd .rot { font-size: 11.5px; color: var(--ink-2); }
.cmd[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.cmd[aria-pressed="true"] .rot { color: var(--brand-ink); }
#mic[aria-pressed="false"], #cam[aria-pressed="false"] { background: rgba(255,144,166,.10); border-color: rgba(255,144,166,.28); }
#mic[aria-pressed="false"] .ic, #cam[aria-pressed="false"] .ic { color: var(--bad); }
#mao[aria-pressed="true"] { background: var(--warn); border-color: var(--warn); }
.cmd:disabled { opacity: .45; cursor: default; }
.cmd.sair { background: #d9506f; border-color: #d9506f; color: #fff; min-width: 72px; }
.cmd.sair .rot { color: #fff; }
.cmd.sair:hover { background: #e8607f; }
.bolinha { position: absolute; top: 6px; right: 10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--bad); color: #2b0611; font-size: 11px; font-weight: 700; display: grid; place-items: center; }

/* 13/10 (auditoria, R18): o rótulo do microfone e da câmera desligados quebra a linha em vez de alargar a barra */
#mic .rot, #cam .rot { max-width: 84px; white-space: normal; text-align: center; line-height: 1.1; }
/* 13/10 (auditoria, R11): quem organiza escolhe ao tocar em Sair: sair (a reunião continua) ou encerrar para todos */
.menu-sair { position: fixed; right: 18px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 40; width: min(320px, calc(100% - 24px)); display: grid; gap: 8px; padding: 14px; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: 0 24px 60px -28px rgba(0,0,0,.7); }
.menu-sair-titulo { margin: 0 0 2px; font-size: 13px; color: var(--ink-2); }
.menu-sair .bt { width: 100%; min-height: 44px; font-size: 14px; }
.menu-sair .bt.discreto { background: transparent; border-color: transparent; color: var(--ink-2); }
.menu-sair .bt:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- dentro da babel-os (a moldura do app Reunião): a janela do app tem o cabeçalho e o painel; aqui fica o palco ---------- */
body.embutida { background: transparent; }   /* a sala aparece sobre o vidro da janela do app */
.app.embutida > .topo { display: none !important; }
.app.embutida > .corpo { padding-top: 4px; }
@media (min-width: 761px) { .app.embutida .grupo-paineis { display: none; } }

/* ---------- celular ---------- */
@media (max-width: 760px) {
  :root { --lado: 100%; --legenda: 24px; }
  .topo { padding: 10px 12px; gap: 8px; min-height: 48px; flex-wrap: wrap; }
  .topo-titulo { font-size: 15px; }
  .topo-acoes, .chip-apresenta { display: none; }
  .faixa-avisos.alto { display: flex; padding: 0 12px 8px; font-size: 13px; }
  .comandos > .faixa-avisos, .comandos > .conexao { display: none; }
  .app > .corpo, .app > .corpo.com-lado { grid-template-columns: minmax(0, 1fr); padding: 0 10px; }
  .palco { overflow-y: auto; overscroll-behavior: contain; gap: 10px; padding-bottom: 6px; }
  .grade { gap: 10px 6px; }
  .palco.em-destaque, .palco.apresentando { flex-direction: column; }
  .destaque { flex: none; }
  .destaque > .pessoa .quadro { flex: none; aspect-ratio: 16 / 9; }
  .palco.em-destaque > #cheio, .palco.apresentando > #cheio { flex: none; }
  .palco.em-destaque .grade, .palco.apresentando .grade { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; grid-auto-rows: auto; overflow: visible; }
  .palco.em-destaque .grade .quadro, .palco.apresentando .grade .quadro { flex: none; aspect-ratio: 16 / 9; }
  :is(.palco.em-destaque, .palco.apresentando) .grade > .mais { grid-column: 1 / -1; height: auto; padding: 10px; font-size: 13px; }
  .apresentacao { flex: none; }
  .apresentacao-quadro { flex: none; aspect-ratio: 16 / 9; border-radius: var(--r-md); }
  .apresentacao .ampliar { display: inline-flex; }
  .cartoes { display: flex; flex-direction: column; gap: 10px; flex: none; }
  .cartao { padding: 10px 12px; } .cartao h3 { font-size: 15px; margin-bottom: 8px; } .cartao-cabeca { margin-bottom: 4px; }
  .oferta-preco { font-size: 18px; margin: -2px 0 8px; } .oferta-onde { display: none; } .opcao { padding: 8px 10px; } .comprar { padding: 11px 14px; }
  .opcoes { gap: 6px; } .cartao-pe { margin-top: 6px; }
  .lado { position: fixed; left: 0; right: 0; bottom: 0; height: 78dvh; z-index: 25; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; box-shadow: 0 -30px 80px -20px rgba(0,0,0,.9); animation: sobe .3s var(--ease); padding-bottom: env(safe-area-inset-bottom); }
  @keyframes sobe { from { transform: translateY(40%); opacity: .4; } }
  .comandos { display: flex; gap: 6px; padding: 8px 6px calc(10px + env(safe-area-inset-bottom)); }
  .comandos-meio { flex: 1; justify-content: space-between; gap: 6px; }
  .grupo { gap: 4px; }
  .cmd { min-width: 0; width: 48px; height: 48px; border-radius: 50%; padding: 0; }
  .cmd .rot { display: none; }
  .cmd.sair { min-width: 0; width: 52px; border-radius: var(--r-pill); }
  .bolinha { top: -2px; right: -2px; }
  #tela { display: none; }
  .previa { aspect-ratio: 3 / 4; max-height: 46vh; }
}
@media (max-width: 440px) { .alternar { flex-direction: column; } .alternar .cmd.grande { flex: none; width: 100%; height: 52px; } }
@media (max-width: 380px) { .grupo { gap: 2px; } .cmd { width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }