/* A sala. Mesma paleta do app, porque o convidado do cliente vê esta tela
   antes de ver qualquer outra coisa da NeuraSys — e ela é a primeira
   impressão da empresa, não uma página de serviço. */

:root {
  --fundo: #0A0612;
  --cartela: rgba(23, 15, 40, .72);
  --dentro: rgba(38, 25, 64, .66);
  --linha: rgba(178, 124, 255, .11);
  --linha-f: rgba(178, 124, 255, .26);
  --texto: #EDE7FA;
  --dim: #9A8FB8;
  --fraco: #635B7F;
  --roxo: #A11FFB;
  --indigo: #5C4BFB;
  --ciano: #22CDEA;
  --verde: #2EE6A8;
  --rosa: #FF5C7A;
  --grad: linear-gradient(96deg, #22CDEA, #5C4BFB 45%, #A11FFB);
}

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

body {
  background: var(--fundo); color: var(--texto); min-height: 100vh;
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px; -webkit-font-smoothing: antialiased;
}

/* Um brilho fraco atrás de tudo, para o preto não ficar chapado. */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 50% at 20% 0%, rgba(92, 75, 251, .16), transparent 70%),
    radial-gradient(50% 45% at 85% 100%, rgba(161, 31, 251, .13), transparent 70%);
}

.tela { position: relative; z-index: 1; min-height: 100vh }
.oculta { display: none !important }

/* ── antessala ───────────────────────────────────────────────────────────── */

#antessala { display: grid; place-items: center; padding: 24px }

.caixa {
  width: 100%; max-width: 430px; padding: 26px 26px 24px;
  background: var(--cartela); border: 1px solid var(--linha);
  border-radius: 20px; backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: 0 40px 90px -40px #000, inset 0 1px 0 rgba(255, 255, 255, .05);
}
.caixa.centro { text-align: center }

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

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

.previa {
  position: relative; margin: 18px 0 16px; aspect-ratio: 16 / 10;
  border-radius: 14px; overflow: hidden; background: #0D0818;
  border: 1px solid var(--linha);
}
.previa video {
  width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1);
}
.previa-vazia {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 12px; color: var(--fraco); text-align: center; padding: 20px;
  line-height: 1.5;
}

.campo { margin-bottom: 14px }
.campo label { display: block; font-size: 11px; color: var(--fraco); margin-bottom: 6px }
.campo input {
  width: 100%; height: 40px; padding: 0 12px; border-radius: 10px;
  background: var(--dentro); border: 1px solid var(--linha); color: var(--texto);
  font-family: inherit; font-size: 13px; outline: 0;
}
.campo input:focus { border-color: var(--roxo) }

.controles { display: flex; gap: 8px; margin-bottom: 15px }
.alt {
  flex: 1; height: 34px; border-radius: 9px; cursor: pointer; font-family: inherit;
  font-size: 12px; background: var(--dentro); border: 1px solid var(--linha);
  color: var(--fraco); transition: all .14s;
}
.alt.on { color: var(--texto); border-color: var(--linha-f) }
.alt:not(.on) { text-decoration: line-through }

/* O aviso de gravação. O estudo aponta o bot que entra oculto como problema
   jurídico, não detalhe de interface — então ele é visível, não é rodapé. */
.aviso {
  font-size: 11.5px; line-height: 1.5; padding: 11px 13px; border-radius: 11px;
  color: #FFD08A; background: rgba(255, 180, 61, .1);
  border: 1px solid rgba(255, 180, 61, .26); margin-bottom: 16px;
}
.aviso b { color: #FFB43D }

.entrar {
  width: 100%; height: 44px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--grad); color: #fff; font-family: inherit; font-size: 14px;
  font-weight: 600; box-shadow: 0 14px 34px -12px var(--roxo); transition: opacity .14s;
}
.entrar:disabled { opacity: .45; cursor: default }
.entrar:not(:disabled):hover { opacity: .92 }

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

/* ── a sala ──────────────────────────────────────────────────────────────── */

#sala { display: flex; flex-direction: column; height: 100vh }

.grade {
  flex: 1; min-height: 0; display: grid; gap: 10px; padding: 14px;
  grid-template-columns: repeat(var(--col, 1), minmax(0, 1fr));
  align-content: center;
}
.celula {
  position: relative; border-radius: 14px; overflow: hidden; background: #0D0818;
  border: 1px solid var(--linha); min-height: 0; aspect-ratio: 16 / 9;
}
.celula video { width: 100%; height: 100%; object-fit: cover; display: block }
/* Sem vídeo a célula não some: a pessoa continua na sala, e sumir com ela
   faria parecer que saiu. */
.celula.so-audio video { display: none }
.celula.so-audio::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(92, 75, 251, .22), transparent 60%);
}
.etiqueta {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px;
  background: rgba(10, 6, 18, .72); backdrop-filter: blur(8px);
  border: 1px solid var(--linha);
}

.barra {
  flex: none; display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-top: 1px solid var(--linha);
  background: rgba(13, 8, 24, .8); backdrop-filter: blur(20px);
}
.quem { font-size: 12px; color: var(--dim); flex: 1; min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.botoes { display: flex; gap: 9px }

.b {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer; flex: none;
  background: var(--dentro); border: 1px solid var(--linha); color: var(--texto);
  display: grid; place-items: center; transition: all .14s;
}
.b:hover { border-color: var(--linha-f) }
.b svg { width: 18px; height: 18px; stroke: currentColor; fill: none;
         stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
/* Desligado é VERMELHO e riscado, não cinza: cinza se confunde com inativo, e
   a pessoa fala dois minutos achando que está no ar. */
.b.off { background: rgba(255, 92, 122, .16); border-color: rgba(255, 92, 122, .4);
         color: var(--rosa) }
.b.off::after {
  content: ''; position: absolute; width: 26px; height: 1.6px; background: currentColor;
  transform: rotate(-45deg); border-radius: 2px;
}
.b { position: relative }
.b.on { background: rgba(46, 230, 168, .16); border-color: rgba(46, 230, 168, .4);
        color: var(--verde) }
.b.sair { background: rgba(255, 92, 122, .18); border-color: rgba(255, 92, 122, .42);
          color: var(--rosa) }
.b.sair:hover { background: rgba(255, 92, 122, .3) }

.grav { display: none; align-items: center; gap: 7px; font-size: 11.5px;
        color: var(--rosa); flex: none }
.grav .bolinha {
  width: 8px; height: 8px; border-radius: 50%; background: var(--rosa);
  animation: pulso 1.8s infinite;
}
@keyframes pulso { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

@media (max-width: 620px) {
  .grade { grid-template-columns: 1fr }
  .quem { display: none }
}