:root {
  --fundo: #101217;
  --fundo2: #181b22;
  --borda: #2a2f3a;
  --texto: #e9ecf1;
  --fraco: #9aa3b2;
  --azul: #3b82f6;
  --vermelho: #e5484d;
  --verde: #30a46c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  min-height: 100vh;
}

h1 { font-size: 22px; margin: 0 0 4px; }
.sub { color: var(--fraco); margin: 0 0 20px; }
.rodape { color: var(--fraco); font-size: 13px; margin: 14px 0 0; }

/* ---------- lobby / entrada ---------- */
.lobby { display: grid; place-items: center; padding: 24px; }

.cartao {
  background: var(--fundo2);
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: 28px;
  width: min(420px, 100%);
}

.campo { display: block; margin: 0 0 14px; }
.campo span { display: block; font-size: 13px; color: var(--fraco); margin-bottom: 6px; }
.campo input {
  width: 100%; padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--borda); background: #0d0f14; color: var(--texto); font-size: 15px;
}
.campo input:focus { outline: 2px solid var(--azul); outline-offset: 1px; }

.botao {
  width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--borda);
  background: #232833; color: var(--texto); font-size: 15px; font-weight: 500; cursor: pointer;
}
.botao:hover { background: #2b313e; }
.botao.principal { background: var(--azul); border-color: var(--azul); color: #fff; }
.botao.principal:hover { filter: brightness(1.1); }

.divisor { text-align: center; color: var(--fraco); font-size: 13px; margin: 18px 0; position: relative; }
.divisor::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--borda); }
.divisor span { background: var(--fundo2); padding: 0 10px; position: relative; }

.cobertura {
  position: fixed; inset: 0; z-index: 30;
  background: var(--fundo); display: grid; place-items: center; padding: 24px;
}
#previa {
  width: 100%; aspect-ratio: 16/9; border-radius: 12px; background: #000;
  object-fit: cover; margin-bottom: 16px; transform: scaleX(-1);
}

/* ---------- sala ---------- */
.sala { display: flex; flex-direction: column; height: 100vh; }

.topo {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--borda); flex-wrap: wrap;
}
.marca { font-weight: 600; }

.chip {
  background: #232833; border: 1px solid var(--borda); color: var(--texto);
  border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.chip.fraco { color: var(--fraco); cursor: default; }

/* palco + chat lado a lado */
.area { flex: 1; display: flex; min-height: 0; }

.palco {
  flex: 1; display: grid; gap: 10px; padding: 12px; overflow: auto;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-content: center;
}
/* Quando alguem compartilha a tela, ela vai grande em cima e as pessoas ficam
   em miniatura embaixo, como no Meet. */
.palco.com-tela { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-content: start; }
.palco.com-tela .quadro.tela {
  grid-column: 1 / -1;
  order: -1;
  max-height: 62vh;
  aspect-ratio: auto;
  min-height: 300px;
}

.quadro {
  position: relative; background: #000; border-radius: 12px; overflow: hidden;
  aspect-ratio: 16/9; border: 1px solid var(--borda); min-height: 140px;
}
.quadro video { width: 100%; height: 100%; object-fit: cover; display: block; }
.quadro.espelho video { transform: scaleX(-1); }
.quadro.tela video { object-fit: contain; background: #000; }
.quadro.sem-video video { visibility: hidden; }

.quadro .inicial {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 34px; font-weight: 600; color: var(--fraco); background: #1a1d24;
}
.quadro:not(.sem-video) .inicial { display: none; }

.quadro .etiqueta {
  position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.6);
  padding: 3px 9px; border-radius: 6px; font-size: 13px; max-width: 80%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.quadro .mudo { position: absolute; right: 8px; bottom: 8px; font-size: 15px; }

/* Botao de tela cheia: discreto, aparece quando o mouse passa por cima. */
.quadro .expandir {
  position: absolute; top: 8px; right: 8px;
  width: 34px; height: 34px; border-radius: 8px; font-size: 16px; line-height: 1;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.18);
  color: #fff; cursor: pointer; opacity: 0; transition: opacity .15s;
}
.quadro:hover .expandir, .quadro .expandir:focus { opacity: 1; }
@media (hover: none) { .quadro .expandir { opacity: .85; } }

/* Em tela cheia o video ocupa tudo, sem cortar a imagem. */
.quadro:fullscreen { aspect-ratio: auto; max-height: none; border: 0; border-radius: 0; }
.quadro:fullscreen video { object-fit: contain; }

.barra {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px; border-top: 1px solid var(--borda); flex-wrap: wrap;
}
.botao-redondo {
  width: 52px; height: 52px; border-radius: 999px; font-size: 20px; cursor: pointer;
  background: #232833; border: 1px solid var(--borda); color: var(--texto);
}
.botao-redondo:hover { background: #2b313e; }
.botao-redondo.desligado { background: var(--vermelho); border-color: var(--vermelho); }
.botao-redondo.ativo { background: var(--verde); border-color: var(--verde); }
.botao-redondo.gravando { background: var(--vermelho); border-color: var(--vermelho); animation: pisca 1.4s infinite; }
.botao-redondo.sair { background: var(--vermelho); border-color: var(--vermelho); transform: rotate(135deg); }
@keyframes pisca { 50% { opacity: .55; } }

.recado {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  background: #232833; border: 1px solid var(--borda); padding: 10px 16px;
  border-radius: 10px; z-index: 40; max-width: 90vw; text-align: center;
}

@media (max-width: 640px) {
  .palco, .palco.com-tela { grid-template-columns: 1fr; }
  .botao-redondo { width: 46px; height: 46px; font-size: 18px; }
}


/* ---------- conversa ---------- */
.chat {
  width: 330px; flex-shrink: 0; display: flex; flex-direction: column;
  border-left: 1px solid var(--borda); background: var(--fundo2); min-height: 0;
}
.chat-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--borda); font-weight: 600;
}
.chat-x { background: none; border: 0; color: var(--fraco); font-size: 16px; cursor: pointer; }
.chat-aviso {
  font-size: 12px; color: var(--fraco); padding: 10px 14px;
  border-bottom: 1px solid var(--borda); line-height: 1.45;
}
.chat-lista { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }

.msg { max-width: 92%; }
.msg .quem { font-size: 12px; color: var(--fraco); margin-bottom: 3px; }
.msg .balao {
  background: #232833; border: 1px solid var(--borda); border-radius: 10px;
  padding: 8px 11px; word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap;
}
.msg.minha { align-self: flex-end; }
.msg.minha .balao { background: #1e3a5f; border-color: #2c5282; }
.msg.minha .quem { text-align: right; }
.msg.sistema { align-self: center; max-width: 100%; }
.msg.sistema .balao {
  background: none; border: 0; color: var(--fraco); font-size: 12px; text-align: center; padding: 2px;
}

.msg img, .msg video {
  max-width: 100%; border-radius: 8px; display: block; margin-top: 4px; cursor: pointer;
}
.msg .arquivo {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
  color: var(--texto); text-decoration: none; font-size: 13px;
}
.msg .arquivo:hover { text-decoration: underline; }
.msg .tamanho { color: var(--fraco); font-size: 12px; }

.chat-envios:empty { display: none; }
.chat-envios { padding: 0 14px 8px; display: flex; flex-direction: column; gap: 6px; }
.envio { font-size: 12px; color: var(--fraco); }
.envio progress { width: 100%; height: 5px; }

.chat-form { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--borda); }
.chat-form input[type=text] {
  flex: 1; min-width: 0; padding: 9px 11px; border-radius: 999px;
  border: 1px solid var(--borda); background: #0d0f14; color: var(--texto); font-size: 14px;
}
.chat-anexo, .chat-enviar {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 999px; cursor: pointer;
  background: #232833; border: 1px solid var(--borda); color: var(--texto); font-size: 15px;
}
.chat-enviar { background: var(--azul); border-color: var(--azul); color: #fff; }

#btn-chat { position: relative; }
.badge {
  position: absolute; top: -2px; right: -2px; min-width: 19px; height: 19px;
  border-radius: 999px; background: var(--vermelho); color: #fff;
  font-size: 11px; line-height: 19px; text-align: center; padding: 0 4px;
}

@media (max-width: 760px) {
  .area { flex-direction: column; }
  .chat { width: auto; border-left: 0; border-top: 1px solid var(--borda); max-height: 55vh; }
}