/* Camada visual do mapa em tela cheia. Carrega depois de style.css.
   Reverter: tirar a classe ui-espacial do <html> e estes dois arquivos.
   Sem animação contínua nova: o brilho de quem fala é estado, não laço. */

@font-face {
  font-family: 'PartyPixel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonte/press-start-2p.ttf') format('truetype');
}

html.ui-espacial {
  --azul: #2a4fbf;
  --azul-forte: #16225a;
  --azul-claro: #49e1ff;
  --azul-suave: #9ae7ff;
  --creme: #f3ead4;
  --cinza-quente: #b7b3c9;
  --fundo-0: #070914;
  --fundo-1: #101433;
  --painel: rgba(12, 16, 40, .78);
  --painel-2: #161a38;
  --painel-3: #222652;
  --vidro: rgba(10, 14, 32, .72);
  --borda: rgba(90, 120, 210, .35);
  --borda-forte: rgba(73, 225, 255, .45);
  --texto: #f3ead4;
  --texto-fraco: #8d8aab;
  --verde: #3ee0a2;
  --ambar: #f0b429;
  --vermelho: #ff6b6b;
  --neon: #49e1ff;
  --safira: #1a2370;
  --obsidiana: #070914;
}

html.ui-espacial body {
  background:
    radial-gradient(1200px 600px at 50% 30%, rgba(42, 79, 191, .28), transparent 60%),
    var(--obsidiana);
}

html.ui-espacial .ambiente { opacity: .22; }
html.ui-espacial .orbe-a { background: radial-gradient(circle, #2a4fbf, transparent 70%); }
html.ui-espacial .orbe-b { background: radial-gradient(circle, #f0b429, transparent 70%); opacity: .18; }
html.ui-espacial .orbe-c { background: radial-gradient(circle, #49e1ff, transparent 70%); opacity: .12; }

html.ui-espacial .marca-texto b { color: var(--neon); }

html.ui-espacial .cartao-entrada {
  background: rgba(10, 14, 32, .88);
  border: 2px solid rgba(73, 225, 255, .4);
  border-radius: 18px;
  box-shadow: 0 0 0 4px rgba(8, 10, 24, .8), 0 24px 60px rgba(0, 0, 0, .45);
}
html.ui-espacial .primario {
  background: linear-gradient(180deg, #3a6bff 0%, #1a2370 100%);
  color: var(--creme);
  box-shadow: 0 0 0 1px rgba(73, 225, 255, .35), 0 8px 20px rgba(42, 79, 191, .4);
}
html.ui-espacial .primario:hover:not(:disabled) {
  background: linear-gradient(180deg, #49e1ff 0%, #2a4fbf 100%);
  color: #071018;
}

/* ----- Aplicação: o mapa é o fundo, o resto flutua ----- */
html.ui-espacial .app {
  display: block;
  position: relative;
  height: 100dvh;
  overflow: hidden;
  background: var(--obsidiana);
}

html.ui-espacial .palco-area {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-width: 0;
  min-height: 0;
}
html.ui-espacial .palco {
  position: absolute;
  inset: 0;
  background: transparent;
}
html.ui-espacial .mapa {
  position: absolute;
  inset: 0;
  display: block;
  height: auto;
  gap: 0;
}
html.ui-espacial .mapa-tela,
html.ui-espacial .mapa-tela-pixi {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: #070914;
}
html.ui-espacial .mapa-dica {
  position: absolute;
  z-index: 3;
  left: calc(114px + var(--lat-w, 286px));
  right: 360px;
  bottom: 18px;
  transform: none;
  margin: 0;
  max-width: none;
  padding: 8px 12px;
  text-align: center;
  color: var(--creme);
  background: rgba(7, 9, 20, .88);
  border: 1px solid rgba(73, 225, 255, .28);
  border-radius: 10px;
  pointer-events: none;
}

html.ui-espacial .topo {
  position: absolute;
  z-index: 6;
  top: 14px;
  left: calc(106px + var(--lat-w, 286px));
  right: 368px;
  width: auto;
  padding: 8px 12px;
  border: 1px solid rgba(90, 120, 210, .45);
  border-radius: 14px;
  background: rgba(8, 12, 28, .94);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}
html.ui-espacial .app.canais-recolhidos:not(.modo-so-tela) .topo {
  left: 96px;
}
html.ui-espacial .app.sem-chat:not(.modo-casa):not(.modo-so-tela) .topo {
  right: 16px;
}
html.ui-espacial .sobreposicao-sala {
  left: calc(106px + var(--lat-w, 286px));
  top: 78px;
  z-index: 20;
}
html.ui-espacial .app.canais-recolhidos .sobreposicao-sala {
  left: 96px;
}
html.ui-espacial .topo-centro {
  background: rgba(7, 9, 20, .55);
  border-color: rgba(73, 225, 255, .25);
}
html.ui-espacial .aba[aria-pressed="true"] {
  color: #071018;
  background: var(--ambar);
  border-color: var(--ambar);
}

html.ui-espacial .trilho {
  position: absolute;
  z-index: 24;
  top: 14px;
  bottom: 14px;
  left: 12px;
  width: 68px;
  height: auto;
  border-radius: 16px;
  background: rgba(8, 12, 28, .94);
  border: 1px solid rgba(90, 120, 210, .45);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .32);
  clip-path: none;
}
html.ui-espacial .app.trilho-recolhido .trilho,
html.ui-espacial .app.trilho-recolhido .trilho:hover,
html.ui-espacial .app.trilho-recolhido .trilho:has(:focus-visible) {
  width: 68px;
  clip-path: none;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .32);
  transform: none;
}
html.ui-espacial .app.trilho-recolhido .trilho > * { opacity: 1; }

html.ui-espacial .lateral {
  position: absolute;
  z-index: 23;
  top: 14px;
  bottom: auto;
  left: 90px;
  width: var(--lat-w, 286px);
  height: auto;
  max-height: calc(100dvh - 248px);
  display: flex;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(8, 12, 28, .94);
  border: 1px solid rgba(90, 120, 210, .45);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .34);
  transition: transform 180ms cubic-bezier(.2, .7, .3, 1);
}
html.ui-espacial .app.canais-recolhidos .lateral {
  transform: translateX(calc(-100% - 110px));
  pointer-events: none;
}
html.ui-espacial .lateral .marca {
  padding: 12px 12px 8px;
  align-items: flex-start;
}
html.ui-espacial .comunidade-cabeca .ui-recolher { flex: none; }
html.ui-espacial .comunidade-cabeca .titulo-secao,
html.ui-espacial #nome-comunidade {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-family: 'Exo 2', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--creme);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.ui-espacial #painel-canais .comunidade-cabeca::before,
html.ui-espacial #titulo-canais-voz::before,
html.ui-espacial #titulo-canais-texto::before,
html.ui-espacial #titulo-membros::before {
  content: none;
}
html.ui-espacial .canais > .titulo-secao {
  font-family: 'Exo 2', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ambar);
}
html.ui-espacial .lista-canais,
html.ui-espacial .lista-membros-comunidade {
  font-family: 'Exo 2', system-ui, sans-serif;
  text-transform: none;
  letter-spacing: 0;
}

html.ui-espacial .chat-area {
  position: absolute;
  z-index: 23;
  top: 14px;
  right: 12px;
  bottom: 14px;
  left: auto;
  width: 340px;
  height: auto;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(8, 12, 28, .94);
  border: 1px solid rgba(90, 120, 210, .4);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .34);
}
html.ui-espacial .app.sem-chat .chat-area,
html.ui-espacial .app.modo-casa .chat-area { display: none; }
html.ui-espacial .chat-topo {
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border-bottom-color: rgba(73, 225, 255, .2);
}
html.ui-espacial .chat-topo .titulo-secao {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: 'Exo 2', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--creme);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.ui-espacial #chat-busca {
  flex: 0 1 148px;
  width: 148px;
  max-width: 46%;
  margin-left: 0;
}
html.ui-espacial .chat-mensagens {
  font-family: 'Exo 2', system-ui, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
}
html.ui-espacial .chat-form input,
html.ui-espacial #chat-busca {
  background: rgba(7, 9, 20, .72);
  border-color: rgba(73, 225, 255, .25);
}

html.ui-espacial .painel-usuario {
  position: absolute;
  z-index: 25;
  left: 90px;
  bottom: 14px;
  width: var(--lat-w, 286px);
  border: 1px solid rgba(240, 180, 41, .45);
  border-radius: 14px;
  background: rgba(8, 12, 28, .96);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .35);
}
html.ui-espacial .app.canais-recolhidos .painel-usuario {
  left: 90px;
}
html.ui-espacial .eu {
  margin: 4px;
  padding: 8px 8px 6px;
  border-radius: 12px;
  background: rgba(16, 22, 48, .72);
}
html.ui-espacial .eu-nome {
  font-family: 'Exo 2', system-ui, sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
}

html.ui-espacial .ui-recolher,
html.ui-espacial .ui-janela button {
  font-family: 'Exo 2', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  min-width: 28px;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(16, 22, 48, .9);
  color: var(--creme);
  border: 1px solid rgba(90, 120, 210, .45);
  box-shadow: none;
}
html.ui-espacial .ui-janela {
  display: flex;
  gap: 4px;
  justify-self: end;
}
html.ui-espacial .aba-canais {
  position: absolute;
  z-index: 26;
  top: 82px;
  left: 96px;
  display: none;
  min-width: 92px;
  min-height: 42px;
  padding: 8px 14px;
  font-size: 15px;
  border-radius: 12px;
  background: rgba(8, 12, 28, .96);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .4);
}
html.ui-espacial .app.canais-recolhidos .aba-canais { display: inline-flex; }
html.ui-espacial .aba-chat {
  position: absolute;
  z-index: 26;
  top: 18px;
  right: 12px;
  display: none;
}
html.ui-espacial .app.sem-chat:not(.modo-casa) .aba-chat { display: inline-flex; }
html.ui-espacial .app.modo-casa .aba-chat { display: none !important; }

html.ui-espacial body.ui-limpo .lateral,
html.ui-espacial body.ui-limpo .chat-area,
html.ui-espacial body.ui-limpo .trilho,
html.ui-espacial body.ui-limpo .painel-usuario,
html.ui-espacial body.ui-limpo .aba-canais,
html.ui-espacial body.ui-limpo .aba-chat,
html.ui-espacial body.ui-limpo .mapa-dica,
html.ui-espacial body.ui-limpo .lobby-voz,
html.ui-espacial body.ui-limpo .painel-casa {
  opacity: 0;
  pointer-events: none;
}
html.ui-espacial body.ui-limpo .topo-marca,
html.ui-espacial body.ui-limpo .topo-centro,
html.ui-espacial body.ui-limpo .topo-ferramentas,
html.ui-espacial body.ui-limpo .topo-acoes > :not(.ui-janela) {
  display: none;
}
html.ui-espacial body.ui-limpo .topo {
  left: auto;
  right: 12px;
  width: auto;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html.ui-espacial #btn-config,
html.ui-espacial #btn-sair { position: relative; }

html.ui-espacial .avatar {
  border-radius: 50%;
  color: transparent;
  position: relative;
  overflow: hidden;
}
html.ui-espacial .avatar .ui-retrato {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}
html.ui-espacial .avatar.tem-foto {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
html.ui-espacial .avatar.tem-foto .ui-retrato { display: none; }
html.ui-espacial .membro.falando .avatar,
html.ui-espacial .pessoa.falando .avatar,
html.ui-espacial .hud-item.falando .avatar {
  box-shadow: 0 0 0 2px #101428, 0 0 0 3px var(--neon), 0 0 12px rgba(73, 225, 255, .65);
}
html.ui-espacial .falando > .anel::after,
html.ui-espacial .anel.falando::after {
  animation: none;
  opacity: .9;
  box-shadow: 0 0 0 2px var(--neon), 0 0 10px rgba(240, 180, 41, .8);
}

/* O recado aberto força display no style.css. Fora do Início ele não pode
   continuar por cima da comunidade. */
html.ui-espacial .app:not(.modo-casa) .painel-casa,
html.ui-espacial .app:not(.modo-casa) .painel-casa.dm-aberto {
  display: none !important;
}
/* No mapa as pessoas já são os bonecos e a lista da esquerda. As pílulas
   embaixo dos controles ficavam fora do lugar. */
html.ui-espacial .palco[data-modo="mapa"] .grade-pessoas {
  display: none;
}
html.ui-espacial .painel-casa,
html.ui-espacial .lobby-voz {
  position: absolute;
  z-index: 4;
  left: calc(106px + var(--lat-w, 286px));
  right: 368px;
  top: 78px;
  bottom: 24px;
  margin: 0;
  overflow: auto;
  border-radius: 16px;
  border: 2px solid rgba(73, 225, 255, .28);
  background: rgba(8, 12, 28, .84);
  padding: 12px;
}
html.ui-espacial .lobby-voz {
  height: auto;
  max-height: 240px;
  bottom: auto;
}

/* Fora da voz o palco é um vazio. A marca fica no meio, suave, sem
   animação e sem pegar clique. Some no Início, na ligação e na voz. */
html.ui-espacial .marca-fundo { display: none; }
html.ui-espacial .app.no-voz:not(.modo-casa):not(.modo-chamada) .marca-fundo {
  display: grid;
  place-items: center;
  position: absolute;
  z-index: 1;
  left: calc(106px + var(--lat-w, 286px));
  right: 16px;
  top: 78px;
  bottom: 16px;
  margin: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 46%, rgba(36, 85, 164, .22), rgba(3, 13, 29, 0) 58%);
}
html.ui-espacial .app.no-voz.canais-recolhidos:not(.modo-casa):not(.modo-chamada) .marca-fundo {
  left: 96px;
}
html.ui-espacial .app.no-voz:not(.modo-casa):not(.modo-chamada):not(.sem-chat) .marca-fundo {
  right: 368px;
}
/* Fora da voz não há mapa. O limpo esconde os painéis e deixa a marca
   na tela inteira. Esconder a marca aqui deixava o clique num vazio. */
html.ui-espacial body.ui-limpo .app.no-voz:not(.modo-casa):not(.modo-chamada) .marca-fundo,
html.ui-espacial body.ui-limpo .app.no-voz.canais-recolhidos:not(.modo-casa):not(.modo-chamada) .marca-fundo,
html.ui-espacial body.ui-limpo .app.no-voz:not(.modo-casa):not(.modo-chamada):not(.sem-chat) .marca-fundo {
  display: grid;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
html.ui-espacial .marca-fundo-miolo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: .42;
}
html.ui-espacial .marca-fundo-miolo img {
  width: min(240px, 36%);
  height: auto;
  display: block;
}
html.ui-espacial .marca-fundo .marca-texto {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #EFE9DA;
}
html.ui-espacial .marca-fundo .marca-texto b { color: #9EBEEC; }

html.ui-espacial .ui-jogo {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(7, 9, 20, .62);
}
html.ui-espacial .ui-jogo[hidden] { display: none !important; }
html.ui-espacial .ui-jogo-caixa {
  width: min(440px, calc(100% - 32px));
  padding: 16px;
  background: #101433;
  border: 2px solid var(--ambar);
  box-shadow: 0 0 0 4px #070914, 0 20px 50px rgba(0, 0, 0, .45);
  color: var(--creme);
}
html.ui-espacial .ui-jogo-caixa h2 {
  margin: 0 0 8px;
  font-family: 'PartyPixel', monospace;
  font-size: 11px;
  font-weight: 400;
  color: var(--ambar);
}
html.ui-espacial .ui-jogo-caixa p { margin: 0 0 10px; color: var(--cinza-quente); font-size: 13px; }
html.ui-espacial .ui-jogo-canvas {
  display: block;
  width: 100%;
  height: 200px;
  background: #070914;
  image-rendering: pixelated;
  margin-bottom: 10px;
}
html.ui-espacial .ui-jogo-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

html.ui-espacial .canal,
html.ui-espacial .membro,
html.ui-espacial .membro-comunidade {
  border-radius: 8px;
}

/* Assistindo uma tela: o vídeo fica na área livre, sem ir para trás
   dos painéis. object-fit contain mostra o quadro inteiro. */
html.ui-espacial .palco[data-modo="telas"] {
  top: 86px;
  left: calc(106px + var(--lat-w, 286px));
  right: 16px;
  bottom: 16px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  padding: 8px;
  overflow: hidden;
  border-radius: 12px;
  background: #070914;
  box-sizing: border-box;
}
html.ui-espacial .app.canais-recolhidos .palco[data-modo="telas"] {
  left: 88px;
  bottom: 168px;
}
html.ui-espacial .app:not(.sem-chat):not(.modo-casa) .palco[data-modo="telas"] {
  right: 368px;
}
html.ui-espacial .palco[data-modo="telas"] .grade-telas {
  flex: 1 1 auto;
  min-height: 0;
  align-content: stretch;
}
html.ui-espacial .palco[data-modo="telas"] .tela-remota,
html.ui-espacial .palco[data-modo="telas"] .grade-telas.foco > .tela-remota {
  height: 100%;
  min-height: 0;
}
html.ui-espacial .palco[data-modo="telas"] .tela-remota video {
  object-fit: contain;
  width: 100%;
  height: 100%;
  max-height: none;
  background: #070914;
}
html.ui-espacial .app.modo-so-tela .palco-area {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
html.ui-espacial .app.modo-so-tela .topo {
  position: relative;
  z-index: 2;
  left: auto;
  right: auto;
  top: auto;
  width: auto;
  flex: none;
}
html.ui-espacial .app.modo-so-tela .palco[data-modo="telas"],
html.ui-espacial .app.modo-so-tela.canais-recolhidos .palco[data-modo="telas"],
html.ui-espacial .app.modo-so-tela:not(.sem-chat):not(.modo-casa) .palco[data-modo="telas"] {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  flex: 1 1 auto;
  width: auto;
  height: auto;
  min-height: 0;
  border-radius: 0;
}

/* Início: o recado ocupa a área livre, à direita da lista.
   Largura explícita: um flex absoluto encolhe no conteúdo e gruda
   na direita depois de maximizar e restaurar a janela. */
html.ui-espacial .app.modo-casa .topo {
  right: 16px;
}
html.ui-espacial .app.modo-casa.canais-recolhidos .topo {
  left: 96px;
}
html.ui-espacial .app.modo-casa #painel-casa {
  left: calc(106px + var(--lat-w, 286px));
  right: auto;
  top: 78px;
  bottom: 16px;
  width: calc(100% - 408px);
  min-width: 0;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
}
html.ui-espacial .app.modo-casa.canais-recolhidos #painel-casa {
  left: 96px;
  width: calc(100% - 112px);
  bottom: 210px;
}
html.ui-espacial .app.modo-casa #painel-casa .casa-dm,
html.ui-espacial .app.modo-casa #painel-casa .casa-dm-msgs,
html.ui-espacial .app.modo-casa #painel-casa .casa-dm-topo,
html.ui-espacial .app.modo-casa #painel-casa .msg,
html.ui-espacial .app.modo-casa #painel-casa .msg-corpo,
html.ui-espacial .app.modo-casa #painel-casa .chat-form {
  min-width: 0;
  max-width: none;
  align-self: stretch;
  box-sizing: border-box;
}

/* Só a tela compartilhada: volta a ser grade, o mapa some pelo CSS antigo. */
html.ui-espacial .app.modo-so-tela {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "palco" "usuario";
}
html.ui-espacial .app.modo-so-tela .palco-area,
html.ui-espacial .app.modo-so-tela .painel-usuario {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: auto;
}
html.ui-espacial .app.modo-so-tela .palco-area { grid-area: palco; }
html.ui-espacial .app.modo-so-tela .painel-usuario { grid-area: usuario; border-radius: 0; }

/* Área livre do palco (30/09/2026): mapa e telas ficam no espaço que os
   painéis deixam, medido em ui-espacial.js (encaixarPalco). Antes o mapa ia
   em inset: 0, atrás de tudo, e o painel de voz cortava a parte de baixo.
   Os valores padrão são os da camada com tudo aberto. */
@media (min-width: 901px) {
  html.ui-espacial .app:not(.modo-casa):not(.modo-so-tela) .palco[data-modo="mapa"],
  html.ui-espacial .app:not(.modo-casa):not(.modo-so-tela) .palco[data-modo="telas"] {
    inset: auto;
    left: var(--livre-esq, 392px);
    top: var(--livre-topo, 86px);
    right: var(--livre-dir, 368px);
    bottom: var(--livre-base, 16px);
    border-radius: 12px;
    overflow: hidden;
  }
  html.ui-espacial .app:not(.modo-casa):not(.modo-so-tela) .palco[data-modo="mapa"] .mapa-dica {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
}
/* ⚠️ O canvas tem de ter altura explícita. A regra
   `.palco[data-modo="mapa"] .mapa-tela { height: auto }` do style.css é mais
   específica que a desta camada, e canvas com altura automática segue a
   proporção dos próprios pixels (5:3): no desktop sobrava uma faixa vazia e
   no celular o mapa ficava com 219 px de 548. Vale em qualquer largura. */
html.ui-espacial .palco[data-modo="mapa"] .mapa .mapa-tela,
html.ui-espacial .palco[data-modo="mapa"] .mapa .mapa-tela-pixi {
  width: 100%;
  height: 100%;
}

/* Mapa oculto pelo botão Mapa: o palco fica vazio com a dica de voltar. */
html.ui-espacial .app.mapa-oculto .palco[data-modo="mapa"] {
  display: grid;
  place-items: center;
  background: rgba(7, 9, 20, .55);
  border: 1px dashed rgba(73, 225, 255, .25);
}
html.ui-espacial .app.mapa-oculto .palco[data-modo="mapa"]::after {
  content: 'Mapa oculto. Clique em Mapa no topo para mostrar.';
  color: var(--cinza-quente);
  font-size: 14px;
  text-align: center;
  padding: 16px;
}

/* Celular: gavetas. Este bloco fica no fim de propósito, como no style.css. */
@media (max-width: 900px) {
  html.ui-espacial .app,
  html.ui-espacial .app.sem-chat,
  html.ui-espacial .app.modo-casa,
  html.ui-espacial .app.modo-chamada,
  html.ui-espacial .app.modo-so-tela {
    display: grid;
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "palco" "usuario";
    height: 100dvh;
    height: 100svh;
    overflow: hidden;
  }
  html.ui-espacial .palco-area {
    position: relative;
    inset: auto;
    grid-area: palco;
    width: 100%;
    height: 100%;
  }
  html.ui-espacial .palco { position: relative; inset: auto; height: 100%; }
  html.ui-espacial .mapa {
    position: relative;
    inset: auto;
    height: 100%;
    min-height: 0;
  }
  html.ui-espacial .mapa-tela,
  html.ui-espacial .mapa-tela-pixi {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 0;
  }
  html.ui-espacial .mapa-dica {
    left: 8px;
    right: 8px;
    bottom: 8px;
    transform: none;
    max-width: none;
  }
  html.ui-espacial .topo,
  html.ui-espacial .app.modo-casa .topo,
  html.ui-espacial .app.modo-casa.canais-recolhidos .topo {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
    border-radius: 0;
  }
  html.ui-espacial .trilho,
  html.ui-espacial .lateral,
  html.ui-espacial .chat-area,
  html.ui-espacial .gaveta-fundo {
    grid-area: palco;
  }
  html.ui-espacial .trilho,
  html.ui-espacial .app.trilho-recolhido .trilho,
  html.ui-espacial .app.trilho-recolhido .trilho:hover {
    position: fixed;
    z-index: 31;
    inset: 0 auto 0 0;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--trilho-aberto);
    height: 100%;
    transform: translateX(-120%);
    clip-path: none;
    border-radius: 0;
  }
  html.ui-espacial .app.lateral-aberta .trilho,
  html.ui-espacial .app.lateral-aberta.trilho-recolhido .trilho {
    transform: none;
  }
  html.ui-espacial .lateral,
  html.ui-espacial .app.canais-recolhidos .lateral {
    position: fixed;
    z-index: 30;
    inset: 0 auto 0 0;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(84vw, 320px);
    height: 100%;
    transform: translateX(-102%);
    pointer-events: none;
    border-radius: 0;
  }
  html.ui-espacial .app.lateral-aberta .lateral {
    transform: none;
    left: var(--trilho-aberto);
    pointer-events: auto;
  }
  html.ui-espacial .chat-area {
    position: fixed;
    z-index: 30;
    inset: 0 0 0 auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(92vw, 380px);
    height: 100%;
    transform: translateX(102%);
    pointer-events: none;
    border-radius: 0;
  }
  html.ui-espacial .app.sem-chat .chat-area,
  html.ui-espacial .app.modo-casa .chat-area { display: none; }
  html.ui-espacial .app:not(.modo-casa):not(.sem-chat) .chat-area {
    display: flex;
    transform: none;
    pointer-events: auto;
  }
  html.ui-espacial .painel-usuario,
  html.ui-espacial .app.canais-recolhidos .painel-usuario {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    grid-area: usuario;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  html.ui-espacial .painel-casa,
  html.ui-espacial .app.modo-casa #painel-casa,
  html.ui-espacial .app.modo-casa.canais-recolhidos #painel-casa,
  html.ui-espacial .lobby-voz {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    max-height: none;
  }
  html.ui-espacial .lateral,
  html.ui-espacial .app.canais-recolhidos .lateral {
    max-height: none;
  }
  html.ui-espacial .aba-canais,
  html.ui-espacial .aba-chat { display: none !important; }
  html.ui-espacial .ui-janela { display: none; }
  html.ui-espacial body.ui-limpo .topo {
    position: relative;
    right: auto;
  }
  html.ui-espacial .palco[data-modo="telas"],
  html.ui-espacial .app.canais-recolhidos .palco[data-modo="telas"],
  html.ui-espacial .app:not(.sem-chat):not(.modo-casa) .palco[data-modo="telas"],
  html.ui-espacial .app.modo-so-tela .palco[data-modo="telas"] {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    height: 100%;
    border-radius: 0;
  }
  html.ui-espacial .app.no-voz:not(.modo-casa):not(.modo-chamada) .marca-fundo,
  html.ui-espacial .app.no-voz.canais-recolhidos:not(.modo-casa):not(.modo-chamada) .marca-fundo,
  html.ui-espacial .app.no-voz:not(.modo-casa):not(.modo-chamada):not(.sem-chat) .marca-fundo {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
  }
}

/* ===== Comunidade: lateral com cabeçalho, lista rolável e rodapé fixos (PC-011..013, 019, 020) =====
   Antes a lista inteira (cabeçalho, canais, membros e "sair") rolava junto e,
   com muitos canais, os membros ficavam fora de alcance. Agora a coluna é:
   trilho | cabeçalho fixo | busca | canais (rolam) | membros (recolhíveis, rolam
   à parte) | painel de voz e conta fixo embaixo. O fundo é quase opaco: o mapa
   passa por trás, mas o texto não depende dele. */
html.ui-espacial .lateral,
html.ui-espacial .trilho,
html.ui-espacial .painel-usuario {
  background: rgba(8, 12, 28, .985);
}
html.ui-espacial .lateral {
  width: var(--lat-w, 286px);
  max-height: calc(100dvh - var(--usuario-h, 150px) - 38px);
  flex-direction: column;
}
html.ui-espacial #painel-canais {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
html.ui-espacial #painel-canais[hidden] { display: none; }
html.ui-espacial #painel-canais .comunidade-cabeca {
  position: static;
  flex: none;
  margin: 0;
  padding: 10px 10px 8px 8px;
  background: transparent;
  border-bottom: 1px solid rgba(90, 120, 210, .28);
}
html.ui-espacial .comunidade-titulo { flex: 1; min-width: 0; margin: 0; padding: 0; }
html.ui-espacial .comunidade-nome-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--creme);
  font: 700 15px/1.3 'Exo 2', system-ui, sans-serif;
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.ui-espacial .comunidade-nome-btn::after {
  content: '▾';
  flex: none;
  margin-left: auto;
  font-size: 13px;
  opacity: .85;
}
html.ui-espacial .comunidade-nome-btn:hover,
html.ui-espacial .comunidade-nome-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, .07);
  border-color: transparent;
}
html.ui-espacial .busca-lateral { flex: none; padding: 8px 10px 4px; }
html.ui-espacial .busca-lateral-campo {
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  font: 400 13.5px 'Exo 2', system-ui, sans-serif;
  background: rgba(7, 9, 20, .8);
  border: 1px solid rgba(73, 225, 255, .22);
  color: var(--creme);
}
html.ui-espacial .busca-resultados {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 10px 10px;
  font-family: 'Exo 2', system-ui, sans-serif;
}
html.ui-espacial .busca-resultados[hidden] { display: none; }
html.ui-espacial .busca-grupo {
  margin: 8px 0 3px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ambar);
}
html.ui-espacial .busca-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--creme);
  font-size: 14px;
  text-align: left;
}
html.ui-espacial .busca-item:hover,
html.ui-espacial .busca-item[aria-selected="true"] {
  background: rgba(58, 114, 206, .22);
  border-color: rgba(58, 114, 206, .5);
}
html.ui-espacial .busca-item .busca-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.ui-espacial .busca-item .busca-dica { flex: none; font-size: 12px; color: var(--cinza-quente); }
html.ui-espacial .busca-item mark { background: none; color: var(--ambar); font-weight: 700; }
html.ui-espacial .busca-vazio { margin: 12px 6px; font-size: 13px; color: var(--cinza-quente); }
html.ui-espacial .canais-rolagem {
  flex: 1 1 auto;
  min-height: 96px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 10px 10px;
}
html.ui-espacial #painel-canais.buscando .canais-rolagem,
html.ui-espacial #painel-canais.buscando .membros-bloco { display: none; }
html.ui-espacial .membros-bloco {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-top: 1px solid rgba(90, 120, 210, .28);
  padding: 0 10px;
}
html.ui-espacial .membros-cabeca {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 4px 6px;
  background: transparent;
  border: 0;
  color: var(--ambar);
  font: 700 11px/1.3 'Exo 2', system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
}
html.ui-espacial .membros-cabeca:hover { color: var(--creme); background: transparent; }
html.ui-espacial .membros-contagem { margin-left: auto; font-weight: 600; color: var(--cinza-quente); letter-spacing: 0; }
html.ui-espacial .membros-bloco.recolhido .categoria-seta { transform: rotate(-90deg); }
html.ui-espacial .membros-bloco.recolhido .lista-membros-comunidade,
html.ui-espacial .membros-bloco.recolhido #vazio-membros-comunidade { display: none; }
html.ui-espacial .membros-bloco .lista-membros-comunidade {
  min-height: min(72px, 12dvh);
  max-height: min(220px, 28dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 0 8px;
}
html.ui-espacial .membro-comunidade .nome,
html.ui-espacial .canal-cabeca .rotulo { color: var(--creme); }
html.ui-espacial .membro-comunidade { color: var(--creme); }
html.ui-espacial .membro-comunidade .onde { color: var(--cinza-quente); }
html.ui-espacial .categoria-cabeca { color: var(--cinza-quente); }
html.ui-espacial .canal-cabeca { color: #d7d1c2; }
html.ui-espacial .canal.ativo > .canal-cabeca { color: var(--creme); }

/* Ícones de canal: texto "#" e voz (alto-falante). */
html.ui-espacial .canal-cabeca .cerquilha {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 18px;
  color: var(--cinza-quente);
}
html.ui-espacial .canal-cabeca .ic-voz { width: 16px; height: 16px; display: block; }
html.ui-espacial .canal.texto .ic-voz,
html.ui-espacial .canal:not(.texto) .ic-txt { display: none; }
html.ui-espacial .canal-cabeca .canal-lim { font-size: 11.5px; color: var(--cinza-quente); }
html.ui-espacial .canal.na-voz > .canal-cabeca .cerquilha { color: var(--verde); }
html.ui-espacial .canal.ativo:not(.na-voz) > .canal-cabeca {
  box-shadow: inset 3px 0 0 var(--azul-claro);
}
html.ui-espacial .canal.nao-lido > .canal-cabeca .rotulo { font-weight: 700; color: #fff; }
html.ui-espacial .canal.silenciado-notif > .canal-cabeca .canal-nao-lido { background: #6b6f7b; }
html.ui-espacial .canal.trancada .canal-cabeca .rotulo::after,
html.ui-espacial .canal.oculta .canal-cabeca .rotulo::before { content: none; }
html.ui-espacial .canal-selo {
  flex: none;
  display: none;
  align-items: center;
  font-size: 11px;
  color: var(--cinza-quente);
}
html.ui-espacial .canal.trancada .canal-selo-tranca,
html.ui-espacial .canal.oculta .canal-selo-oculta { display: inline-flex; }
html.ui-espacial .canal-selo svg { width: 13px; height: 13px; }
html.ui-espacial .categoria-cabeca .categoria-resumo {
  margin-left: auto;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  font-size: 11.5px;
}
html.ui-espacial .categoria.fechada .categoria-cabeca { color: var(--creme); }
html.ui-espacial .categoria[hidden] { display: none; }

/* Alça de largura (só no desktop). */
html.ui-espacial .lateral-alca { display: none; }
@media (min-width: 901px) {
  html.ui-espacial .lateral-alca {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    touch-action: none;
    z-index: 5;
  }
  html.ui-espacial .lateral-alca::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 2px;
    width: 3px;
    height: 36px;
    margin-top: -18px;
    border-radius: 2px;
    background: rgba(239, 233, 218, .22);
  }
  html.ui-espacial .lateral-alca:hover::after,
  html.ui-espacial .lateral-alca:focus-visible::after,
  html.ui-espacial .lateral-alca.arrastando::after { background: var(--ambar); }
  html.ui-espacial .lateral-alca:focus-visible { outline: 2px solid var(--ambar); outline-offset: -2px; }
  html.ui-espacial .app.canais-recolhidos .lateral-alca { display: none; }
  html.ui-espacial .app.modo-casa .lateral-alca { display: block; }
  body.lateral-redimensionando { cursor: col-resize; user-select: none; }
}

/* Menu do nome da comunidade: separador e itens de preferência. */
.menu-comunidade .menu-sep { height: 1px; margin: 4px 6px; background: rgba(239, 233, 218, .12); }
.menu-comunidade .menu-sub {
  padding: 6px 12px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cinza-quente);
}
.menu-comunidade .menu-item[aria-checked="true"]::before { content: '✓ '; color: var(--verde); }
.menu-comunidade .menu-item[role="menuitemradio"],
.menu-comunidade .menu-item[role="menuitemcheckbox"] { padding-left: 24px; position: relative; }
.menu-comunidade .menu-item[aria-checked="true"]::before { position: absolute; left: 8px; }

/* Aviso de onde a voz segue conectada, no cabeçalho da comunidade visitada. */
html.ui-espacial .voz-em-outra {
  flex: none;
  margin: 8px 10px 0;
  padding: 6px 10px;
  border: 1px solid rgba(70, 201, 138, .5);
  border-radius: 8px;
  background: rgba(70, 201, 138, .12);
  color: var(--creme);
  font: 600 12.5px/1.3 'Exo 2', system-ui, sans-serif;
  text-align: left;
  width: calc(100% - 20px);
}
html.ui-espacial .voz-em-outra:hover { background: rgba(70, 201, 138, .22); }
html.ui-espacial .voz-em-outra[hidden] { display: none; }

@media (max-width: 900px) {
  html.ui-espacial .lateral { max-height: none; }
  html.ui-espacial .busca-lateral-campo { font-size: 16px; }
  html.ui-espacial .canais-rolagem { min-height: 0; }
}

/* O aviso "fora da voz" mora dentro do palco, que já começa na área livre
   (PC-037). Com left/right herdados da camada antiga ele ganhava 28 px de largura. */
@media (min-width: 901px) {
  html.ui-espacial .palco > .lobby-voz,
  html.ui-espacial .palco .lobby-voz {
    left: 12px;
    right: 12px;
    top: 12px;
  }
}

/* Comunidade com notificações silenciadas: o ponto de não lida fica apagado. */
.trilho-item.nao-lida.silenciada::before { opacity: .45; background: var(--cinza-quente); }

.menu-comunidade { max-height: calc(100dvh - 24px); overflow-y: auto; }

/* Revisão de 01/10: janela de desktop estreita (901 a 1180 px) com chat e
   lateral abertos deixava o topo com 240 px e o botão Mapa por cima do
   "Baixar o app". O rótulo pequeno sai e os itens podem quebrar linha. */
@media (min-width: 901px) and (max-width: 1180px) {
  html.ui-espacial .topo { flex-wrap: wrap; row-gap: 6px; }
  html.ui-espacial .topo .topo-espaco-rotulo { display: none; }
}
/* Celular: nome da conta não passa por cima dos botões do painel de voz. */
@media (max-width: 900px) {
  html.ui-espacial .eu-topo { min-width: 0; }
  /* style.css reserva 80 px à direita para .eu-acoes no celular; a regra de
     .eu desta camada zerava a reserva e o nome passava por baixo dos botões. */
  html.ui-espacial .painel-usuario .eu { padding-right: 80px; }
  html.ui-espacial .eu-nome { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 420px) {
  html.ui-espacial #eu-rtt { display: none; }
  /* Cartão estreito: o avatar identifica; nome e status ocupariam o lugar dos botões. */
  html.ui-espacial .painel-usuario .eu-info { display: none; }
}