/* Magis Educação, 05/09/2026: transmissão ao vivo (sala, chat e painel de quem apresenta).
 *
 * Prefixo lv-. Só tokens --mg-* do app.css, para os dois temas; o que precisa
 * de cor literal (fundo escuro do vídeo) tem regra própria no bloco escuro no
 * fim. Vale para o portal do inscrito, o palco do palestrante e a gestão,
 * de 320 a 1920 px, no navegador e no aplicativo instalado. */

/* ---------- casca da sala ---------- */
.lv-sala { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lv-sala .voltar-linha { margin-bottom: 0; }
.lv-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* cabeçalho: logomarca, título, selo, presentes, ações */
.lv-cab { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: var(--r-md); padding: 10px 14px; box-shadow: var(--sombra-sm); min-width: 0; }
.lv-marca { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
/* A logomarca do cabecalho da live e um LINK para a plataforma: no toque ela
   tinha 22px de altura, metade do minimo. A area cresce sem mexer no desenho
   da imagem (medido em 06/09/2026 em /app/live e /admin/evento/../transmissao). */
@media (any-pointer: coarse), (max-width: 1024px) { .lv-marca { min-height: 48px; } }
.lv-logo { display: block; width: auto; }
.lv-logo-clara { height: 26px; }
/* Logomarca clara (fundo escuro): mesma ÁREA visual da horizontal, não a mesma altura. */
.lv-logo-escura { height: 39px; display: none; }
.lv-cab-titulo { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lv-cab-h { font-family: var(--ff-titulo); font-weight: 400; font-size: 1.05rem; line-height: 1.25; color: var(--mg-verde-900); margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
h1.lv-cab-h { font-size: 1.15rem; }
/* Sem caixa alta (12/09/2026): ela virava "01H03" e o símbolo da hora é minúsculo. */
.lv-cab-sub { font-size: 12.5px; color: var(--mg-tinta-2); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-cab-estado { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.lv-selo { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--mg-creme); color: var(--mg-tinta-2); white-space: nowrap; }
.lv-selo-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--mg-sage); flex: 0 0 auto; }
.lv-selo-ao-vivo { background: var(--mg-erro); color: #FFFFFF; }
.lv-selo-ao-vivo .lv-selo-ponto { background: #FFFFFF; box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); animation: lv-pulso 1.6s ease-out infinite; }
@keyframes lv-pulso { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.lv-presentes { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mg-tinta-2); white-space: nowrap; }
.lv-presentes .ic { width: 16px; height: 16px; color: var(--mg-verde-800); }
.lv-presentes strong { color: var(--mg-verde-900); font-variant-numeric: tabular-nums; }
.lv-cab-acoes { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.lv-bt-cheia { width: 40px; height: 40px; }
.lv-bt-cheia .ic { width: 18px; height: 18px; }
.lv-bt-cheia[aria-pressed="true"] { background: var(--mg-verde-800); color: var(--mg-creme); border-color: var(--mg-verde-800); }
.lv-bt-tela { min-height: 40px; padding: 8px 16px; }
.lv-bt-tela .ic { width: 16px; height: 16px; }
.lv-bt-ativo { background: var(--mg-verde-800); color: var(--mg-creme); }
@media (max-width: 480px) {
  .lv-cab { padding: 10px 12px; gap: 8px 10px; }
  .lv-logo-clara { height: 22px; }
  .lv-logo-escura { height: 33px; }
  .lv-cab-titulo { flex-basis: 100%; order: 3; }
  .lv-cab-estado { margin-left: auto; }
  .lv-cab-acoes { margin-left: 0; order: 4; flex-basis: 100%; justify-content: flex-end; }
  .lv-cab-sub { white-space: normal; }
  .lv-presentes-rotulo { display: none; }
}
@media (max-width: 360px) {
  .lv-bt-tela span { display: none; }
  .lv-bt-tela { width: 40px; padding: 8px; }
}

/* corpo: vídeo e painel */
.lv-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; }
.lv-video { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.lv-video .live-palco { margin-bottom: 0; }
.lv-video .live-aviso { margin: 0; }
.lv-dica { font-size: 12.5px; color: var(--mg-tinta-2); margin: 0; }
@media (min-width: 1100px) {
  .lv-corpo { grid-template-columns: minmax(0, 1fr) 360px; align-items: stretch; }
  .lv-painel { height: auto; max-height: none; min-height: 480px; }
  .lv-corpo .live-palco { min-height: 440px; }
}
@media (min-width: 1500px) { .lv-corpo { grid-template-columns: minmax(0, 1fr) 400px; } }
.lv-sala-app .live-palco-aberto, .lv-sala-palco .live-palco-aberto, .lv-sala-gestao .live-palco-aberto { height: min(72vh, 720px); }
.lv-sala .live-palco-palestrante, .lv-sala .live-palco-gestao { margin-top: 0; height: auto; aspect-ratio: 16 / 9; }
.lv-sala .live-espera { overflow: auto; }
.lv-sala .live-espera .etiqueta { margin-bottom: 8px; }
@media (max-width: 640px) {
  .lv-sala .live-palco:not(.live-palco-aberto) { aspect-ratio: 4 / 3; }
  .lv-sala .live-espera-form { padding: 16px; justify-content: flex-start; }
  .lv-sala .live-palco-palestrante:not(.live-palco-aberto) { aspect-ratio: auto; min-height: 320px; }
}
/* formulário do nome dentro do palco (fundo escuro do vídeo) */
.live-espera-form .palco-form { width: 100%; max-width: 380px; text-align: left; margin: 0; }
.live-espera-form .campo { margin-bottom: 12px; }
.live-espera-form .campo label { color: var(--mg-sage-suave); }
.live-espera-form .campo input { background: #FFFFFF; color: #22302A; border-color: transparent; }
.live-espera-form .btn { margin: 0; width: 100%; }

/* ---------- painel do chat ---------- */
.lv-painel { display: flex; flex-direction: column; min-width: 0; background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: var(--r-md); box-shadow: var(--sombra-sm); overflow: hidden; height: min(62vh, 560px); min-height: 360px; }
.lv-abas { display: flex; border-bottom: 1px solid var(--mg-borda); background: var(--mg-creme); flex: 0 0 auto; }
.lv-aba { flex: 1 1 0; min-width: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 4px; border: 0; border-bottom: 2px solid transparent; background: transparent; font-family: var(--ff-texto); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mg-tinta-2); cursor: pointer; transition: color var(--transicao), border-color var(--transicao); }
.lv-aba .ic { width: 15px; height: 15px; flex: 0 0 auto; }
.lv-aba[aria-selected="true"] { color: var(--mg-verde-800); border-bottom-color: var(--mg-verde-800); background: var(--mg-branco); }
.lv-aba:focus-visible { outline: 2px solid var(--mg-verde-800); outline-offset: -2px; }
.lv-conta { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--mg-verde-800); color: var(--mg-creme); font-size: 10.5px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.lv-conta-viva { background: var(--mg-sage); color: var(--mg-verde-950); }
/* O rotulo da aba e o unico pedaco que pode encolher: o contador tem largura
   propria e, sem isto, ele passava ate 10px para fora do botao em 320px
   ("Perguntas 3" e "Materiais 2" na tela de transmissao, medido em 06/09/2026). */
.lv-aba > span:not(.lv-conta) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-conta { flex: 0 0 auto; }
@media (max-width: 400px) {
  .lv-aba { font-size: 11px; letter-spacing: .03em; gap: 4px; padding: 8px 2px; }
  .lv-conta { min-width: 15px; height: 15px; padding: 0 3px; font-size: 9.5px; }
  .lv-aba .ic { display: none; }
}
/* O painel mede ~360px ao lado do vídeo em 1366-1440 e as três abas saíam
   "PERGUN..." e "MATERI..." (12/09/2026). A regra é pela largura do PAINEL, não
   da janela: abaixo de 430px de painel o ícone sai e o rótulo fecha inteiro. */
.lv-painel { container-type: inline-size; }
@container (max-width: 430px) {
  .lv-aba { font-size: 11px; letter-spacing: .03em; gap: 4px; padding: 8px 2px; }
  .lv-aba .ic { display: none; }
}
.lv-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 12px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.lv-lista:focus-visible { outline: 2px solid var(--mg-verde-800); outline-offset: -2px; }
.lv-vazio, .lv-nota { margin: auto 0; text-align: center; color: var(--mg-tinta-2); font-size: 13.5px; padding: 18px 12px; }
.lv-nota { background: var(--mg-aviso-bg); color: #6E6220; border-radius: var(--r-sm); }

/* mensagem */
.lv-msg { position: relative; background: var(--mg-creme); border: 1px solid transparent; border-radius: 12px; padding: 9px 12px; max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.lv-msg-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 3px; font-size: 12.5px; }
.lv-msg-autor { font-weight: 700; color: var(--mg-verde-900); }
.lv-msg-papel { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mg-verde-800); background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: 999px; padding: 1px 7px; }
.lv-msg-hora { color: var(--mg-tinta-2); font-variant-numeric: tabular-nums; margin-left: auto; }
.lv-msg-selos { display: inline-flex; flex-wrap: wrap; gap: 4px; flex-basis: 100%; }
.lv-msg-selos:empty { display: none; }
.lv-msg-selo { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--mg-branco); color: var(--mg-tinta-2); border: 1px solid var(--mg-borda); }
.lv-msg-selo .ic { width: 11px; height: 11px; }
.lv-selo-pergunta { color: var(--mg-verde-800); border-color: var(--mg-verde-800); }
.lv-selo-respondida { background: var(--mg-ok-bg); color: #2A5433; border-color: transparent; }
.lv-selo-destaque { background: var(--mg-amarelo); color: #6E6220; border-color: transparent; }
.lv-selo-oculta { background: var(--mg-erro-bg); color: var(--mg-erro); border-color: transparent; }
.lv-msg-texto { margin: 0; font-size: 14px; line-height: 1.45; white-space: pre-wrap; color: var(--mg-tinta); }
.lv-msg-propria { background: #E4EFE0; }
.lv-msg-pergunta { border-color: var(--mg-sage); }
.lv-msg-destacada { border-color: var(--mg-verde-800); background: var(--mg-amarelo); }
.lv-msg-respondida .lv-msg-texto { color: var(--mg-tinta-2); }
.lv-msg-oculta { opacity: .55; border-style: dashed; }
.lv-msg-sistema { background: transparent; border: 0; padding: 2px 8px; text-align: center; }
.lv-msg-sistema .lv-msg-texto { font-size: 12.5px; color: var(--mg-tinta-2); font-style: italic; }
.lv-msg-acoes { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 7px; }
.lv-acao { min-height: 30px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--mg-borda); background: var(--mg-branco); color: var(--mg-verde-800); font-family: var(--ff-texto); font-size: 12px; font-weight: 700; cursor: pointer; transition: background var(--transicao), color var(--transicao), border-color var(--transicao); }
.lv-acao:hover, .lv-acao:focus-visible { border-color: var(--mg-verde-800); }
.lv-acao[aria-pressed="true"] { background: var(--mg-verde-800); color: var(--mg-creme); border-color: var(--mg-verde-800); }
.lv-acao-apagar { color: var(--mg-erro); }
.lv-acao-apagar:hover { border-color: var(--mg-erro); }
@media (any-pointer: coarse), (max-width: 1024px) { .lv-acao { min-height: 48px; padding: 6px 14px; } }

/* anexo */
.lv-anexo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--mg-branco); border: 1px solid var(--mg-borda); color: var(--mg-tinta); text-decoration: none; transition: border-color var(--transicao), box-shadow var(--transicao); }
.lv-anexo:hover, .lv-anexo:focus-visible { border-color: var(--mg-verde-800); box-shadow: var(--sombra-sm); }
.lv-anexo-previa { grid-column: 1 / -1; width: 100%; max-height: 220px; object-fit: cover; border-radius: 8px; display: block; background: var(--mg-creme); }
.lv-anexo-icone { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 42px; height: 46px; border-radius: 8px; background: var(--mg-creme); color: var(--mg-verde-800); gap: 1px; }
.lv-anexo-icone .ic { width: 18px; height: 18px; }
.lv-anexo-icone small { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lv-anexo-pdf { color: var(--mg-erro); }
.lv-anexo-texto { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.lv-anexo-texto strong { font-size: 13.5px; overflow-wrap: anywhere; line-height: 1.3; }
.lv-anexo-texto small { font-size: 12px; color: var(--mg-tinta-2); }
.lv-anexo-baixar { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 6px 12px; border-radius: 999px; background: var(--mg-verde-800); color: var(--mg-creme); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.lv-anexo-baixar .ic { width: 14px; height: 14px; }
@media (max-width: 360px) {
  .lv-anexo { grid-template-columns: auto minmax(0, 1fr); }
  .lv-anexo-baixar { grid-column: 1 / -1; justify-content: center; }
}

/* formulário de envio */
.lv-form { flex: 0 0 auto; border-top: 1px solid var(--mg-borda); padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; background: var(--mg-branco); }
.lv-campo { width: 100%; box-sizing: border-box; resize: none; min-height: 44px; max-height: 120px; padding: 11px 12px; border: 1px solid var(--mg-borda); border-radius: 12px; background: var(--mg-base); color: var(--mg-tinta); font-family: var(--ff-texto); font-size: 16px; line-height: 1.35; }
.lv-campo:focus { outline: none; border-color: var(--mg-verde-800); box-shadow: 0 0 0 3px rgba(45, 89, 74, .15); }
.lv-campo:disabled { background: var(--mg-creme); color: var(--mg-tinta-2); cursor: not-allowed; }
.lv-form-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.lv-contador { margin-right: auto; font-size: 12px; color: var(--mg-tinta-2); font-variant-numeric: tabular-nums; }
.lv-contador-cheio { color: var(--mg-erro); font-weight: 700; }
.lv-form .btn-compacto { padding: 8px 14px; min-height: 40px; font-size: 13.5px; }
.lv-form .btn .ic { width: 15px; height: 15px; }
.lv-bt-enviar .ic { transform: rotate(180deg); }
.lv-form-bloqueado .btn { opacity: .55; }
@media (max-width: 360px) {
  .lv-form .btn-compacto span { display: none; }
  .lv-form .btn-compacto { padding: 8px 12px; }
}
.lv-progresso { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--mg-tinta-2); }
/* `[hidden]` do navegador perde para o display:flex acima (revisão de 11/09/2026): sem esta linha "Enviando..." com barra vazia ficava permanente sob o chat. */
.lv-progresso[hidden] { display: none !important; }
.lv-progresso-barra { display: block; height: 8px; border-radius: 999px; background: var(--mg-creme); border: 1px solid var(--mg-borda); overflow: hidden; }
.lv-progresso-barra span { display: block; height: 100%; width: 0; background: var(--mg-verde-800); transition: width .3s ease; }
.lv-progresso-erro .lv-progresso-barra span { background: var(--mg-erro); }
.lv-aviso { margin: 0; padding: 8px 12px; border-radius: var(--r-sm); background: var(--mg-ok-bg); color: #2A5433; font-size: 13px; }
.lv-aviso-erro { background: var(--mg-erro-bg); color: var(--mg-erro); }

/* pessoas ao vivo (quem apresenta) */
.lv-pessoas { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px; }
.lv-pessoas-resumo { margin: 0 0 10px; font-size: 13px; color: var(--mg-tinta-2); }
.lv-pessoas-resumo strong { color: var(--mg-verde-900); font-size: 1.1rem; }
.lv-pessoas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lv-pessoa { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--mg-creme); font-size: 13.5px; }
.lv-pessoa-presente { box-shadow: inset 3px 0 0 var(--mg-verde-500); }
.lv-pessoa-nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lv-pessoa-nome strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mg-tinta); }
.lv-pessoa-nome small { align-self: flex-start; }
.lv-pessoa-tempo { color: var(--mg-tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-pessoa .badge { white-space: nowrap; }
.lv-pessoa-vazia { display: block; text-align: center; color: var(--mg-tinta-2); }
@media (max-width: 360px) {
  .lv-pessoa { grid-template-columns: minmax(0, 1fr) auto; }
  .lv-pessoa .badge { grid-column: 1 / -1; justify-self: start; }
}

/* rodapé da sala do prescritor */
.lv-rodape { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
@media (min-width: 900px) { .lv-rodape { grid-template-columns: minmax(0, 1fr) auto; } .lv-sobre { grid-column: 1 / -1; } }
.lv-fatos { list-style: none; margin: 0; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 8px 22px; background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: var(--r-md); font-size: 13.5px; color: var(--mg-tinta-2); }
.lv-fatos li { display: flex; align-items: flex-start; gap: 7px; min-width: 0; flex: 1 1 240px; }
.lv-fatos .ic { width: 16px; height: 16px; flex: 0 0 auto; color: var(--mg-verde-800); margin-top: 2px; }
.lv-rodape-acoes { display: flex; align-items: center; }
.lv-rodape-acoes .btn { width: 100%; }
.lv-sobre { background: var(--mg-branco); border: 1px solid var(--mg-borda); border-radius: var(--r-md); padding: 12px 16px; }
.lv-sobre summary { cursor: pointer; font-family: var(--ff-titulo); font-size: 1.05rem; color: var(--mg-verde-900); min-height: 28px; display: flex; align-items: center; }
@media (any-pointer: coarse), (max-width: 1024px) { .lv-sobre summary { min-height: 48px; } }
.lv-sobre p { margin: 10px 0 0; color: var(--mg-tinta-2); max-width: 70em; }

/* ---------- tela cheia do conjunto (vídeo + chat) ---------- */
.lv-cheia { position: fixed; inset: 0; z-index: 400; margin: 0; padding: 8px; gap: 8px; background: var(--mg-verde-950); overflow: hidden; height: 100vh; height: 100dvh; box-sizing: border-box; border-radius: 0; }
.lv-cheia:fullscreen { padding: 8px; }
.lv-cheia .voltar-linha, .lv-cheia .lv-rodape, .lv-cheia .lv-dica { display: none; }
.lv-cheia .lv-cab { flex: 0 0 auto; padding: 6px 12px; border-radius: 10px; }
.lv-cheia .lv-corpo { flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.lv-cheia .lv-video { min-height: 0; height: 100%; }
.lv-cheia .lv-video .live-palco, .lv-cheia .lv-video .live-palco-aberto { flex: 1 1 auto; min-height: 0; height: auto; aspect-ratio: auto; margin: 0; }
.lv-cheia .lv-video .live-aviso { flex: 0 0 auto; }
.lv-cheia .lv-painel { height: auto; max-height: none; min-height: 0; }
.lv-cheia-sair { position: absolute; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 2; background: var(--mg-branco); }
.lv-cheia-sair .ic { width: 14px; height: 14px; }
html.lv-tela-cheia, html.lv-tela-cheia body { overflow: hidden; }
/* Telefone em pé: vídeo em cima, chat embaixo. Deitado: lado a lado. */
@media (orientation: portrait), (max-width: 700px) and (orientation: landscape) and (max-height: 380px) {
  .lv-cheia .lv-corpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .lv-cheia .lv-video .live-palco { aspect-ratio: 16 / 9; flex: 0 0 auto; height: auto; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .lv-cheia { padding: 4px; gap: 4px; }
  .lv-cheia .lv-cab { padding: 4px 10px; }
  .lv-cheia .lv-cab-sub, .lv-cheia .lv-presentes-rotulo, .lv-cheia .lv-cab-titulo { display: none; }
  .lv-cheia .lv-cab-estado { margin-left: auto; }
  .lv-cheia .lv-corpo { grid-template-columns: minmax(0, 1fr) minmax(240px, 38%); }
  .lv-cheia .lv-abas { display: none; }
  .lv-cheia .lv-form { padding: 6px 8px; }
  .lv-cheia-sair span { display: none; }
  .lv-cheia-sair { padding: 8px; width: 36px; }
}
@media (max-width: 480px) { .lv-cheia .lv-cab-titulo { order: 0; flex-basis: auto; flex: 1 1 100px; } .lv-cheia .lv-cab-acoes { flex-basis: auto; order: 0; } .lv-cheia .lv-cab-sub { display: none; } .lv-cheia .lv-logo-clara { height: 18px; } .lv-cheia .lv-logo-escura { height: 27px; } }

/* ---------- cascas ---------- */
/* palco: a casca de acesso é estreita por desenho; a sala precisa da largura toda */
.auth-cartao:has(.lv-sala-palco) { max-width: 1400px; padding: 18px 16px; }
.auth-conteudo:has(.lv-sala-palco) { padding: 16px 12px; justify-content: flex-start; }
.palco-ativo .auth-cartao { max-width: 1400px; }
@media (max-width: 640px) { .auth-cartao:has(.lv-sala-palco) { padding: 12px 10px; } }
/* gestão: a sala fica acima da grade de comandos e presença */
.adm-transmissao .lv-sala { margin-bottom: 26px; }
.adm-transmissao .lv-corpo .live-palco { margin-top: 0; }
/* aplicativo instalado: o chat cola na barra inferior sem ficar atrás dela */
html.app-instalado .lv-form { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }

/* ---------- tema escuro ---------- */
html[data-tema="escuro"] .lv-logo-clara { display: none; }
html[data-tema="escuro"] .lv-logo-escura { display: block; }
html[data-tema="escuro"] .lv-cab, html[data-tema="escuro"] .lv-painel, html[data-tema="escuro"] .lv-fatos, html[data-tema="escuro"] .lv-sobre { background: var(--mg-branco); border-color: var(--mg-borda); }
html[data-tema="escuro"] .lv-cab-h { color: var(--mg-verde-900); }
html[data-tema="escuro"] .lv-msg-propria { background: #2F5A3C; }
html[data-tema="escuro"] .lv-msg-destacada { background: #3A4F3A; }
html[data-tema="escuro"] .lv-selo-respondida { color: #A5D2AF; }
html[data-tema="escuro"] .lv-selo-destaque { color: #E7DD9A; }
html[data-tema="escuro"] .lv-aviso { color: #A5D2AF; }
html[data-tema="escuro"] .lv-nota { color: #E7DD9A; }
html[data-tema="escuro"] .lv-campo { background: #141F1A; }
html[data-tema="escuro"] .lv-campo:focus { box-shadow: 0 0 0 3px rgba(143, 194, 155, .2); }
html[data-tema="escuro"] .lv-conta { color: #0E1714; }
html[data-tema="escuro"] .lv-anexo-baixar, html[data-tema="escuro"] .lv-acao[aria-pressed="true"], html[data-tema="escuro"] .lv-bt-cheia[aria-pressed="true"], html[data-tema="escuro"] .lv-bt-ativo { color: #0E1714; }
html[data-tema="escuro"] .live-espera-form .campo input { background: #1C2A24; color: #E8ECE4; border-color: #33463C; }
html[data-tema="escuro"] .lv-cheia { background: #0E1714; }
html[data-tema="escuro"] .lv-cheia-sair { background: var(--mg-branco); }

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .lv-selo-ao-vivo .lv-selo-ponto { animation: none; }
  .lv-lista { scroll-behavior: auto; }
}

/* Painel lateral da gestao (coluna de ~370px): abas compactas, sem icone, para os quatro rotulos caberem. */
.adm-transmissao .lv-aba { font-size: 11px; letter-spacing: .02em; gap: 4px; padding: 8px 2px; }
.adm-transmissao .lv-aba .ic { display: none; }

/* A34 (10/09/2026): na sala da gestão as quatro abas do painel (Chat,
   Perguntas, Materiais, Pessoas) dividiam 360px em letra de 11px maiúscula,
   sem ícone, e "PERGUNTAS" e "MATERIAIS" saíam cortadas. Agora o painel é
   mais largo, a aba é ícone em cima e nome embaixo (sem caixa alta), e o
   contador vira um selo no canto da aba. */
.adm-transmissao .lv-painel { min-height: 520px; }
@media (min-width: 1200px) { .adm-transmissao .lv-corpo { grid-template-columns: minmax(0, 1fr) 420px; } }
@media (min-width: 1600px) { .adm-transmissao .lv-corpo { grid-template-columns: minmax(0, 1fr) 480px; } }
.adm-transmissao .lv-aba { position: relative; flex-direction: column; gap: 3px; padding: 9px 4px 7px; min-height: 58px; font-size: 12px; letter-spacing: 0; text-transform: none; }
.adm-transmissao .lv-aba .ic { display: block; width: 18px; height: 18px; }
.adm-transmissao .lv-aba > span:not(.lv-conta) { overflow: visible; white-space: nowrap; text-overflow: clip; }
.adm-transmissao .lv-conta { position: absolute; top: 5px; right: 6px; }
@media (max-width: 480px) {
  .adm-transmissao .lv-aba { font-size: 11px; }
}
/* Respiro geral da sala: os blocos estavam colados. */
.adm-transmissao .kpis { margin-bottom: 14px; }
.adm-transmissao .grade-2-colunas { gap: 18px; margin-top: 16px; }
.adm-transmissao .form-cartao .texto-apoio { margin-bottom: 12px; }
.adm-transmissao .form-acoes-empilha { gap: 10px; }
.adm-transmissao .lv-dica { margin-top: 10px; }
/* Cabeçalho da sala em 390px (10/09/2026): o estado ("Preparando" + quem
   assiste) não encolhia (`flex: 0 0 auto`) e passava 14px da borda direita,
   criando rolagem horizontal. Em telefone o estado toma a linha inteira. */
@media (max-width: 480px) {
  .lv-cab-estado { flex: 1 1 100%; order: 2; margin-left: 0; justify-content: space-between; min-width: 0; flex-wrap: wrap; gap: 6px 10px; }
}
/* O selo de situação ("Sala aberta, aguardando o palestrante") é uma frase,
   não um rótulo de uma palavra: em 320px o `nowrap` o fazia passar 44px da
   borda. Em telefone ele quebra dentro da pílula. */
@media (max-width: 480px) {
  .lv-selo { white-space: normal; line-height: 1.3; max-width: 100%; min-width: 0; }
}