/* A sala — a pele.

   A paleta é a MESMA de `src/app.css`, token por token, e isso é regra e não
   coincidência: o convidado do cliente muitas vezes vê esta tela antes de ver
   qualquer outra coisa da NeuraSys. Uma sala com cara de página de serviço
   entrega uma empresa diferente da que o app entrega.

   Duas decisões estruturais desta folha:

   · TAMANHO FIXO, NÃO ELÁSTICO. As células não esticam para preencher a
     janela — elas têm largura e altura em pixel, calculadas em `sala.js` a
     partir de quantas pessoas há, e o que sobra vira margem. Uma pessoa
     sozinha numa tela grande não precisa do próprio rosto em tamanho de
     outdoor, e um vídeo esticado até o rodapé é o que fazia esta tela parecer
     um retângulo preto vazio.

   · O EIXO É O CENTRO. Topo, palco e doca são centrados. Contagem e aviso de
     gravação saem dos cantos e sobem para o topo; os controles ficam no meio
     da doca. Informação espalhada em quatro cantos obriga a varrer a tela
     inteira para saber o estado de uma chamada.
*/

:root {
  /* ── a logo ─────────────────────────────────────────────────────────── */
  --roxo:      #A11FFB;
  --roxo-cl:   #C77DFF;
  --indigo:    #5C4BFB;
  --azul:      #2C7BFF;
  --ciano:     #22CDEA;
  --grad:      linear-gradient(96deg, #22CDEA, #5C4BFB 46%, #A11FFB);

  /* ── estado ─────────────────────────────────────────────────────────── */
  --verde:     #2EE6A8;
  --ambar:     #FFB43D;
  --rosa:      #FF5C7A;

  /* ── superfícies: preto com véu de roxo ─────────────────────────────── */
  --fundo:     #09060F;
  --painel:    rgba(19,12,32,.72);
  --cartela:   rgba(26,16,44,.58);
  --cartela-f: rgba(30,19,52,.74);
  --dentro:    rgba(38,25,64,.66);
  --linha:     rgba(178,124,255,.11);
  --linha-f:   rgba(178,124,255,.26);
  --vidro:     #0C0716;

  --texto:     #F1EAFC;
  --dim:       #9A8FB8;
  --fraco:     #635B7F;

  --fonte: 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* ── medidas fixas ──────────────────────────────────────────────────── */
  --topo:    56px;   /* faixa de cima */
  --doca:    96px;   /* faixa de baixo */
  --bot:     52px;   /* botão redondo da doca */
  --cartao: 452px;   /* antessala e tela de saída */
  --vao:     12px;   /* entre células */
  --raio:    18px;
  --raio-in: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0 }

html, body { width: 100%; height: 100% }

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 14px;
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

/* O véu. Preto puro dá contraste mas não dá calor — a cor fica pousada em
   cima em vez de sair de dentro. O ponteado é a lembrança da rede neural do
   app: aqui ele é ESTÁTICO de propósito, porque animar um fundo durante uma
   chamada é gastar quadro de vídeo com decoração. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 44% at 18% 0%,   rgba(92,75,251,.17),  transparent 68%),
    radial-gradient(52% 40% at 86% 104%, rgba(161,31,251,.15), transparent 70%),
    radial-gradient(40% 32% at 96% 4%,   rgba(34,205,234,.08), transparent 72%);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(rgba(178,124,255,.075) 1px, transparent 1px);
  background-size: 26px 26px;
}

.cena { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column }
.cena.meio { display: grid; place-items: center; padding: 20px; overflow: auto }
.oculta { display: none !important }

/* ═══ antessala e tela de saída ═══════════════════════════════════════════ */

.cartao {
  width: var(--cartao); max-width: 100%;
  padding: 28px 28px 24px;
  background: var(--cartela);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  backdrop-filter: blur(26px) saturate(1.2);
  box-shadow: 0 44px 100px -46px #000, inset 0 1px 0 rgba(255,255,255,.05);
}
.cartao.centro { text-align: center; width: 400px }

.marca { display: flex; align-items: center; gap: 9px; margin-bottom: 18px }
.marca.meio-h { justify-content: center }
.marca span:last-child {
  font-size: 10.5px; letter-spacing: .2em; color: var(--dim); font-weight: 600;
}
.pt {
  width: 9px; height: 9px; border-radius: 50%; background: var(--grad);
  box-shadow: 0 0 14px rgba(161,31,251,.85); flex: none;
}

h1 { font-size: 21px; font-weight: 600; letter-spacing: -.01em; line-height: 1.28 }
.sub { font-size: 12.5px; color: var(--dim); margin-top: 7px; line-height: 1.55 }

/* A prévia tem altura FIXA. Uma prévia que muda de tamanho conforme a janela
   não é prévia de nada — não é assim que a pessoa vai aparecer. */
.previa {
  position: relative;
  width: 100%; height: 223px;
  margin: 18px 0 16px;
  border-radius: var(--raio-in); overflow: hidden;
  background: var(--vidro); border: 1px solid var(--linha);
}
.previa video {
  width: 100%; height: 100%; object-fit: cover; display: none;
  transform: scaleX(-1);
}
.previa.com-video video { display: block }
.previa.com-video .rosto { display: none }

.rosto {
  position: absolute; inset: 0; display: grid; place-content: center;
  justify-items: center; gap: 12px; text-align: center; padding: 16px;
  background: radial-gradient(circle at 50% 42%, rgba(92,75,251,.16), transparent 62%);
}
.rosto-x { font-size: 11.5px; color: var(--fraco); line-height: 1.5 }

.av {
  width: var(--av, 78px); height: var(--av, 78px); border-radius: 50%;
  display: grid; place-items: center;
  font-size: calc(var(--av, 78px) * .34); font-weight: 600; letter-spacing: .01em;
  color: #fff; background: var(--cor, linear-gradient(140deg, #5C4BFB, #A11FFB));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 20px 44px -20px #000;
}

/* O nível do microfone. Fica na prévia porque é ali que a pessoa olha — e com
   a câmera desligada por padrão, o microfone é a única coisa que sobrou para
   conferir antes de entrar. */
.nivel {
  position: absolute; left: 14px; right: 14px; bottom: 12px; height: 4px;
  border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; z-index: 2;
}
.nivel i {
  display: block; height: 100%; width: 0%; border-radius: 3px;
  background: var(--grad); transition: width .09s linear;
}
.nivel.mudo i { background: var(--rosa); opacity: .5 }

.campo { margin-bottom: 14px }
.campo label {
  display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fraco); margin-bottom: 7px;
}
.campo input {
  width: 100%; height: 42px; padding: 0 13px; border-radius: var(--raio-in);
  background: var(--dentro); border: 1px solid var(--linha); color: var(--texto);
  font-family: inherit; font-size: 13.5px; outline: 0; user-select: text;
  transition: border-color .14s, box-shadow .14s;
}
.campo input::placeholder { color: var(--fraco) }
.campo input:focus { border-color: var(--linha-f); box-shadow: 0 0 0 3px rgba(161,31,251,.13) }

.controles { display: flex; gap: 9px; margin-bottom: 16px }
.alt {
  flex: 1; height: 42px; border-radius: var(--raio-in); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 12.5px;
  background: var(--dentro); border: 1px solid var(--linha); color: var(--fraco);
  transition: color .14s, border-color .14s, background .14s;
}
.alt svg {
  width: 16px; height: 16px; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none;
}
/* Ligado é a cor da marca; desligado é vermelho e riscado, nunca cinza — cinza
   se confunde com inativo, e a pessoa fala dois minutos achando que está no
   ar. Câmera desligada é o PADRÃO aqui, e mesmo assim aparece desligada de
   verdade: um padrão que se disfarça de neutro engana igual. */
.alt.on { color: var(--texto); border-color: var(--linha-f); background: rgba(161,31,251,.12) }
.alt:not(.on) { color: var(--rosa); border-color: rgba(255,92,122,.28); background: rgba(255,92,122,.08) }
.alt:not(.on) span { text-decoration: line-through; text-decoration-thickness: 1px }
.alt:disabled { opacity: .5; cursor: default }

/* O aviso de gravação: visível, e não rodapé. */
.aviso {
  font-size: 11.5px; line-height: 1.55; padding: 11px 13px; border-radius: var(--raio-in);
  color: #FFD08A; background: rgba(255,180,61,.1);
  border: 1px solid rgba(255,180,61,.26); margin-bottom: 16px;
}
.aviso b { color: var(--ambar) }

.acao {
  width: 100%; height: 46px; border-radius: var(--raio-in); border: 0; cursor: pointer;
  background: var(--grad); color: #fff; font-family: inherit; font-size: 14px;
  font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 16px 38px -14px rgba(161,31,251,.9);
  transition: opacity .14s, transform .1s;
}
.acao:disabled { opacity: .38; cursor: default; box-shadow: none }
.acao:not(:disabled):hover { opacity: .93 }
.acao:not(:disabled):active { transform: translateY(1px) }
.cartao.centro .acao { margin-top: 20px }

.erro { font-size: 12px; color: var(--rosa); margin-top: 13px; line-height: 1.5 }
.erro:empty { display: none }

/* ═══ a sala ══════════════════════════════════════════════════════════════ */

/* ── topo: o estado da chamada, no eixo central ───────────────────────── */
.topo {
  flex: none; height: var(--topo);
  display: flex; align-items: center; justify-content: center;
  padding: 0 16px;
  background: var(--painel); border-bottom: 1px solid var(--linha);
  backdrop-filter: blur(22px) saturate(1.15);
}
.topo-meio { display: flex; align-items: center; gap: 11px; min-width: 0 }
.marca-min { display: flex; align-items: center }
#tituloSala {
  font-size: 13px; font-weight: 600; max-width: 44vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sep { width: 1px; height: 16px; background: var(--linha); flex: none }

.chip {
  height: 26px; padding: 0 11px; border-radius: 999px; flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--dim);
  background: var(--dentro); border: 1px solid var(--linha);
}
.chip.grav { color: var(--rosa); background: rgba(255,92,122,.12); border-color: rgba(255,92,122,.3) }
.chip.grav i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--rosa);
  animation: pulso 1.9s infinite;
}
@keyframes pulso { 0%, 100% { opacity: 1 } 50% { opacity: .22 } }

/* Dentro do app a moldura já diz de que reunião se trata e já tem o botão de
   sair. Repetir o título aqui seria dois cabeçalhos empilhados dizendo a mesma
   coisa e comendo altura de vídeo. */
body.embutido .marca-min,
body.embutido #tituloSala,
body.embutido .sep { display: none }
/* E a faixa perde a superfície: com a barra do app logo acima, duas faixas
   opacas empilhadas viram um bloco de 104px de nada em cima do vídeo. Sem
   fundo e sem risco, o que sobra são as duas etiquetas de estado pousadas
   sobre o palco. */
body.embutido .topo {
  height: 44px; background: none; border-bottom: 0; backdrop-filter: none;
}

/* ── palco: células de tamanho FIXO, centradas ────────────────────────── */
.palco {
  flex: 1; min-height: 0; overflow: hidden; padding: var(--vao);
  display: flex; align-items: center; justify-content: center;
}
/* A grade tem a largura EXATA de N colunas (`--gl`, escrita pelo `sala.js`).
   É o que faz a última fila incompleta — três pessoas em duas colunas —
   ficar centrada, e não encostada à esquerda com um buraco ao lado. */
.grade {
  display: flex; flex-wrap: wrap; gap: var(--vao);
  justify-content: center; align-content: center;
  width: var(--gl, 100%); max-width: 100%;
}

.cel {
  position: relative; flex: none;
  width: var(--tw, 420px); height: var(--th, 236px);
  border-radius: var(--raio); overflow: hidden;
  background: var(--vidro); border: 1px solid var(--linha);
  box-shadow: 0 26px 56px -34px #000;
  transition: box-shadow .16s, border-color .16s;
}
.cel video { width: 100%; height: 100%; object-fit: cover; display: none }
.cel.com-video video { display: block }
/* O próprio vídeo espelhado: é o que a pessoa espera ver de si mesma. Sem
   espelhar, ela levanta a mão direita e vê a esquerda subir. */
.cel.eu video { transform: scaleX(-1) }

/* Tela partilhada não é rosto: cortar as bordas para preencher é justamente
   perder a planilha que a pessoa abriu para mostrar. */
.cel.tela { background: #07040D }
.cel.tela video { object-fit: contain; transform: none }

/* Sem vídeo a célula NÃO some: a pessoa continua na sala, e sumir com ela
   faria parecer que saiu. Ela ganha rosto — inicial e cor próprias — porque
   com a câmera desligada por padrão o retângulo preto seria a regra, e não a
   exceção. */
.cel .rosto { background: radial-gradient(circle at 50% 44%, rgba(92,75,251,.2), transparent 60%) }
.cel.com-video .rosto { display: none }

/* Quem está falando ganha um anel. Numa sala em que quase ninguém liga a
   câmera, é o único jeito de saber de quem é a voz. */
.cel.falando {
  border-color: rgba(34,205,234,.55);
  box-shadow: 0 0 0 2px rgba(34,205,234,.55), 0 0 30px -6px rgba(34,205,234,.5);
}

.etiqueta {
  position: absolute; left: 10px; bottom: 10px; z-index: 2; max-width: calc(100% - 60px);
  padding: 5px 11px; border-radius: 999px; font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: rgba(9,6,15,.74); backdrop-filter: blur(10px);
  border: 1px solid var(--linha);
}
.selo {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%; display: none; place-items: center;
  background: rgba(255,92,122,.18); border: 1px solid rgba(255,92,122,.4); color: var(--rosa);
}
.cel.mudo .selo { display: grid }
.selo svg {
  width: 14px; height: 14px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ── recado: o que a sala precisa dizer sem virar diálogo ─────────────── */
.recado {
  position: absolute; left: 50%; bottom: calc(var(--doca) + 16px); transform: translateX(-50%);
  z-index: 5; max-width: min(420px, calc(100vw - 32px));
  padding: 10px 15px; border-radius: 999px; text-align: center;
  font-size: 12px; line-height: 1.45; color: var(--texto);
  background: var(--cartela-f); border: 1px solid var(--linha-f);
  backdrop-filter: blur(18px); box-shadow: 0 20px 46px -22px #000;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.recado.viva { opacity: 1 }

/* ── doca: os controles, no meio ──────────────────────────────────────── */
.doca {
  flex: none;
  height: calc(var(--doca) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex; align-items: center; justify-content: center;
  background: var(--painel); border-top: 1px solid var(--linha);
  backdrop-filter: blur(22px) saturate(1.15);
}
.doca-meio { display: flex; align-items: center; gap: 6px }

.ctl { width: 78px; display: flex; flex-direction: column; align-items: center; gap: 7px }
.rot { font-size: 10.5px; color: var(--fraco); letter-spacing: .02em }

.b {
  position: relative;
  width: var(--bot); height: var(--bot); border-radius: 50%; cursor: pointer; flex: none;
  display: grid; place-items: center;
  background: var(--dentro); border: 1px solid var(--linha); color: var(--texto);
  transition: background .14s, border-color .14s, color .14s;
}
.b:hover { border-color: var(--linha-f) }
.b svg {
  width: 20px; height: 20px; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
/* Desligado é VERMELHO e riscado, não cinza. */
.b.off {
  background: rgba(255,92,122,.16); border-color: rgba(255,92,122,.4); color: var(--rosa);
}
.b.off::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 28px; height: 1.7px; background: currentColor; border-radius: 2px;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.b.on {
  background: rgba(34,205,234,.16); border-color: rgba(34,205,234,.44); color: var(--ciano);
}

/* A doca alinha pelo CENTRO dos botões redondos, e os rótulos ficam abaixo
   deles. O divisor e o botão de sair sobem os mesmos 22px para não flutuarem
   no vão do rótulo. */
.divisor { width: 1px; height: 34px; background: var(--linha); margin: 0 10px 22px }

.sair {
  height: var(--bot); padding: 0 20px; margin-bottom: 22px; border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; gap: 9px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  background: rgba(255,92,122,.15); border: 1px solid rgba(255,92,122,.36); color: var(--rosa);
  transition: background .14s;
}
.sair svg {
  width: 18px; height: 18px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.sair:hover { background: rgba(255,92,122,.28) }

/* ═══ telas estreitas e baixas ════════════════════════════════════════════ */

@media (max-width: 640px) {
  :root { --topo: 48px; --doca: 82px; --bot: 48px; --vao: 8px }
  .cartao { padding: 22px 20px 20px }
  .cartao.centro { width: 100% }
  .previa { height: 190px }
  .ctl { width: 64px }
  .rot { display: none }
  .divisor, .sair { margin-bottom: 0 }
  .sair { padding: 0 16px }
  #tituloSala { max-width: 38vw }
}

/* Janela baixa. O cartão da antessala inteiro tem de caber sem rolar: um
   "Entrar na sala" abaixo da dobra é um botão que não existe. A prévia é a
   única peça que pode encolher sem custo — ela some por inteiro quando a
   câmera está desligada, que é o padrão. */
@media (max-height: 640px) {
  .previa { height: 148px }
  .cartao { padding: 22px 24px 20px }
  .aviso { margin-bottom: 14px }
  .cena.meio { padding: 14px }
}
@media (max-height: 560px) {
  /* E a doca encolhe junto, para o vídeo não virar uma tira. */
  :root { --topo: 46px; --doca: 74px; --bot: 46px }
  .rot { display: none }
  .divisor, .sair { margin-bottom: 0 }
  .previa { height: 92px; --av: 48px; margin: 14px 0 12px }
  .cartao { padding: 16px 20px 16px }
  .cena.meio { padding: 10px }
  h1 { font-size: 19px }
  .rosto { gap: 7px }
  .campo, .controles, .aviso { margin-bottom: 11px }
}