/* Exo 2, a tipografia da marca. Servida daqui e nao do Google: uma fonte a
   menos para carregar de terceiro, e funciona igual sem internet aberta.
   E variavel, por isso um arquivo por subconjunto cobre 400 a 700. */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonte/exo2-latin.woff2?v=7437c24c7298') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonte/exo2-latin-ext.woff2?v=55ea7d522dd6') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Paleta oficial: #2455A4 azul, #EFE9DA creme, #242424 escuro, #B7B0A3 cinza quente.
     O fundo azul-noite (#030D1D) e o do material da marca; os paineis usam a familia
     do #242424, como o proprio mockup da identidade faz. */
  --azul: #2455A4;
  --azul-forte: #1E4789;
  --azul-claro: #3A72CE;
  --azul-suave: #9EBEEC;
  --creme: #EFE9DA;
  --cinza-quente: #B7B0A3;

  --fundo-0: #030D1D;
  --fundo-1: #06101F;
  --painel: #1A1D22;
  --painel-2: #242424;
  --painel-3: #2E3038;
  --vidro: rgba(20, 24, 32, .74);
  --borda: #2A2D33;
  --borda-forte: #3B3F49;

  --texto: #EFE9DA;
  --texto-medio: var(--cinza-quente);
  --texto-fraco: #8A8478;

  --verde: #46C98A;
  --ambar: #E8A33D;
  --vermelho: #E06C5A;

  --raio: 14px;
  --raio-p: 10px;
  --sombra: 0 18px 44px rgba(0, 0, 0, .55);
  --transicao: 160ms cubic-bezier(.2, .7, .3, 1);

  --lateral-w: 248px;
  --chat-w: 320px;
  --trilho-aberto: 72px;
  --trilho-peek: 10px;
  --trilho-w: 72px;
}

* { box-sizing: border-box; }

/* Altura útil da tela. No aplicativo 1.40+ a barra de título própria
   (barra-janela.js) ocupa o topo, e tudo o que media 100dvh desconta ela. */
:root { --barra-h: 0px; --vh: 100dvh; }
html.casca-barra { --barra-h: 32px; --vh: calc(100dvh - var(--barra-h)); }
html.casca-barra body { padding-top: var(--barra-h); }
.barra-janela {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2147483000;
  height: 32px; display: flex; align-items: stretch;
  background: #020914; color: var(--cinza-quente);
  border-bottom: 1px solid rgba(239, 233, 218, .06);
  -webkit-app-region: drag; user-select: none;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.barra-janela-marca { display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.barra-janela-marca img { width: 16px; height: 16px; display: block; }
.barra-janela-arrastar { flex: 1 1 auto; }
.barra-janela-botao {
  -webkit-app-region: no-drag;
  width: 46px; height: 32px; padding: 0; margin: 0;
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  color: var(--cinza-quente); cursor: default;
}
.barra-janela-botao svg { width: 12px; height: 12px; }
.barra-janela-botao:hover { background: rgba(239, 233, 218, .08); color: var(--creme); }
.barra-janela-botao.fechar:hover { background: #C4503F; color: var(--creme); }
html.janela-sem-foco .barra-janela { color: rgba(183, 176, 163, .6); }

/* O atributo `hidden` vale pela regra [hidden]{display:none} da folha do
   navegador, que perde para qualquer classe nossa com `display`. Sem esta linha,
   .tela-entrada (grid), .app (grid), .aviso (flex), .controle (inline-flex),
   .grade-telas (grid) e .pilula (inline-block) continuariam aparecendo com
   hidden ligado, e a tela de entrada nunca sumia. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: linear-gradient(178deg, var(--fundo-0) 0%, var(--fundo-1) 100%);
  color: var(--texto);
  font-family: 'Exo 2', "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body { overflow: hidden; }

/* ----- Fundo ambiente: três manchas de cor desfocadas, atrás de tudo ----- */
.ambiente { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.orbe { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.orbe-a { width: 46vw; height: 46vw; left: -12vw; top: -16vw; background: radial-gradient(circle, #2455A4, transparent 70%); opacity: .46; }
.orbe-b { width: 40vw; height: 40vw; right: -10vw; top: 18vh; background: radial-gradient(circle, #1B3E78, transparent 70%); opacity: .5; }
.orbe-c { width: 38vw; height: 38vw; left: 26vw; bottom: -22vw; background: radial-gradient(circle, #3A72CE, transparent 70%); opacity: .2; }
html.aba-oculta .ambiente { visibility: hidden; }

/* ----- Base de formulário ----- */
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--borda-forte); background: var(--painel-2); color: var(--texto); border-radius: var(--raio-p); padding: 9px 14px; transition: background var(--transicao), border-color var(--transicao), color var(--transicao), transform var(--transicao); }
button:hover:not(:disabled):not(.trilho-item) { background: var(--painel-3); border-color: var(--azul-claro); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

.primario { background: linear-gradient(180deg, var(--azul) 0%, var(--azul-forte) 100%); border-color: transparent; color: var(--creme); font-weight: 600; box-shadow: 0 6px 18px rgba(36, 85, 164, .42); }
.primario:hover:not(:disabled) { background: linear-gradient(180deg, #3A72CE 0%, #1E4789 100%); border-color: transparent; }
.primario.grande { padding: 12px 18px; font-size: 16px; width: 100%; }
.primario.pequeno { padding: 5px 12px; font-size: 13px; }
.fantasma { background: transparent; border-color: transparent; color: var(--texto-medio); }
.fantasma:hover:not(:disabled) { background: var(--painel-2); color: var(--texto); border-color: transparent; }
.perigo { border-color: rgba(224, 108, 90, .45); color: #F0B7AA; }
.perigo:hover:not(:disabled) { background: rgba(224, 108, 90, .14); border-color: var(--vermelho); }

input[type="text"], input[type="password"], input[type="email"], select {
  width: 100%; padding: 11px 13px; background: #050F1F; border: 1px solid var(--borda);
  border-radius: var(--raio-p); transition: border-color var(--transicao), box-shadow var(--transicao);
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, select:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(58, 114, 206, .18); outline: none; }
input::placeholder { color: #79736A; }
label { display: block; margin: 14px 0 6px; font-size: 13px; color: var(--texto-medio); font-weight: 500; }

.titulo-secao { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-fraco); }
.erro { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--raio-p); background: rgba(224, 108, 90, .12); border: 1px solid rgba(224, 108, 90, .35); color: #F2C4B8; font-size: 14px; }
.dica { margin: 8px 0 0; font-size: 12.5px; color: var(--texto-fraco); line-height: 1.45; }
/* O que está saindo da sua tela agora. Quem compartilha é o único que não vê o
   próprio resultado, e era preciso adivinhar por que a imagem tinha piorado. */
.relato-tela { margin: 7px 2px 0; font-size: 11.5px; color: var(--texto-fraco); line-height: 1.4; }
.relato-tela b { color: var(--texto-medio); font-weight: 600; }
.relato-tela[data-apertado="sim"] b { color: var(--ambar); }
.pilula { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--azul); color: var(--creme); font-size: 11px; font-weight: 700; text-align: center; }
.pilula.mencao { background: #3A72CE; box-shadow: 0 0 0 2px rgba(58, 114, 206, .35); }

/* ----- Marca ----- */
.marca { display: flex; align-items: center; gap: 10px; }
.marca-icone { display: block; width: 34px; height: 34px; flex: none; }
.marca-icone img { width: 100%; height: 100%; object-fit: contain; display: block; }
.marca-texto { font-size: 17px; font-weight: 700; letter-spacing: -.005em; }
.marca-texto b { color: var(--azul-suave); font-weight: 700; }
.marca-grande { justify-content: center; }
.marca-grande { flex-direction: column; gap: 12px; }
.marca-grande .marca-icone { width: 78px; height: 78px; }
.marca-grande .marca-texto { font-size: 30px; }

/* ============ Tela de entrada ============ */
.tela-entrada { position: relative; z-index: 1; display: grid; place-items: center; min-height: var(--vh); padding: 24px; }
.cartao-entrada {
  width: 100%; max-width: 400px; padding: 34px 30px 26px;
  background: var(--vidro); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--borda-forte); border-radius: 22px; box-shadow: var(--sombra);
}
.assinatura { margin: 10px 0 22px; text-align: center; font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cinza-quente); }
.assinatura b { color: var(--azul-suave); font-weight: 700; }
.cartao-entrada .sub { margin: 14px 0 4px; text-align: center; color: var(--texto-fraco); font-size: 14px; }
.cartao-entrada #btn-entrar { margin-top: 22px; }
.modos-entrada { display: flex; gap: 6px; margin: 18px 0 16px; }
.modos-entrada .config-aba { flex: 1; }
.cartao-entrada label { display: block; margin: 12px 0 6px; font-size: 12.5px; color: var(--texto-medio); }
.ou { margin: 16px 0 10px; text-align: center; color: var(--texto-fraco); font-size: 12px; }
.botao-google {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px 14px; border-radius: var(--raio-p);
  background: var(--painel-2); border: 1px solid var(--borda-forte); color: var(--texto);
  font: inherit; font-weight: 600; text-decoration: none;
}
.botao-google:hover { border-color: var(--azul-claro); color: var(--creme); }
.cartao-comunidades { max-width: 440px; }
.titulo-comunidades { margin: 8px 0 0; text-align: center; font-size: 18px; }
.lista-comunidades { list-style: none; margin: 16px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-comunidades button {
  width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px;
  background: var(--painel-2); border: 1px solid var(--borda); color: var(--texto);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.lista-comunidades button:hover { border-color: var(--azul-claro); }
.lista-comunidades .cargo { font-size: 11.5px; color: var(--azul-suave); font-weight: 600; }
.nova-comunidade-rosto {
  display: flex; align-items: center; gap: 12px; margin: 10px 0 4px;
}
.nova-comunidade-rosto .previa-comunidade {
  width: 48px; height: 48px; border-radius: 16px; font-size: 15px;
  background: #2455A4;
}
.nova-comunidade-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.linha-acao { display: flex; gap: 8px; align-items: stretch; }
.linha-acao input, .linha-acao select { flex: 1; min-width: 0; }
.linha-acao.wrap { flex-wrap: wrap; }
.linha-acao button { flex: none; }
.cartao-comunidades form { margin-top: 16px; }
.btn-sair-conta { margin-top: 14px; width: 100%; }
.conta-dado { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 0; }
.conta-rotulo { font-size: 12px; color: var(--texto-fraco); flex: none; }
.conta-tag {
  flex: 1; min-width: 0; margin: 0; padding: 4px 8px; text-align: left;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--creme);
}
.form-senha { margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.form-senha[hidden] { display: none; pointer-events: none; }
.form-senha label { font-size: 13px; color: var(--texto-medio); }
.msg-lido { display: block; margin-top: 4px; font-size: 11px; color: var(--cinza-quente); }
.comunidade-cabeca { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 2px 4px 0; }
.comunidade-cabeca .titulo-secao {
  flex: 1; margin: 0; padding: 0;
  font-size: 15px; font-weight: 700; letter-spacing: 0;
  text-transform: none; color: var(--creme);
}
.comunidade-sair {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin: 0 0 14px; padding: 11px 14px;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-p);
  background: var(--painel-2); color: var(--creme);
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
}
.comunidade-sair:hover {
  background: rgba(58, 114, 206, .22); border-color: rgba(58, 114, 206, .55); color: #fff;
}
.comunidade-sair:active { transform: translateY(1px); }
.comunidade-sair-icone { font-size: 16px; line-height: 1; }
.comunidade-sair.lobby { max-width: 22rem; margin: 0 auto; }
#dlg-admin { width: min(560px, calc(100vw - 32px)); }
#dlg-admin .config-painel h3 { margin: 16px 0 8px; }
#dlg-admin .config-painel h3:first-child { margin-top: 4px; }
#dlg-admin .primario { margin: 0; }
#dlg-admin .admin-cor {
  display: flex; align-items: center; gap: 12px; margin: 6px 0 14px;
}
#dlg-admin .admin-cor input[type="color"] {
  width: 48px; height: 32px; padding: 2px; flex: none; border-radius: 8px;
}
#dlg-admin .admin-cor .dica { margin: 0; }
#dlg-admin .admin-linha {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
}
#dlg-admin .admin-linha > select,
#dlg-admin .admin-linha > input[type="text"] {
  flex: 1 1 auto; min-width: 7.5rem; width: auto;
}
#dlg-admin .admin-linha > input[type="color"] {
  flex: none; width: 44px; height: 32px; padding: 2px;
}
#dlg-admin .admin-grade { display: flex; flex-direction: column; gap: 8px; }
#dlg-admin .admin-grade-acoes {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
}
#dlg-admin .admin-grade-acoes select { flex: 1 1 auto; width: auto; min-width: 8rem; }
#dlg-admin select { max-width: 100%; }
.admin-rosto { display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; }
.admin-rosto .dica { margin: 0; }
.acoes-rosto { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#dlg-admin .admin-rosto .primario,
#dlg-config .admin-rosto .primario { margin: 0; }
.avatar.tem-foto, .trilho-item.tem-foto {
  background-repeat: no-repeat; background-position: center; background-size: cover; color: transparent;
}
/* O hover geral dos botões troca `background` inteiro e o cover voltava
   para o tamanho do arquivo (256 px num ícone de 48). A foto dava zoom. */
.trilho-item.tem-foto:hover,
.trilho-item.tem-foto:active {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.membro-rosto { position: relative; flex: none; display: inline-flex; }
.membro-rosto .amigo-status {
  position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px;
  border: 2px solid #06101f;
}
.comunidade-escolha { display: flex; align-items: center; gap: 10px; min-width: 0; }
.comunidade-escolha .avatar { width: 28px; height: 28px; font-size: 11px; }
#dlg-admin .config-painel { animation: admin-entra .18s ease; }
@keyframes admin-entra {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #dlg-admin .config-painel { animation: none; }
}
@media (max-width: 640px) {
  #dlg-admin .admin-linha { flex-wrap: wrap; }
  #dlg-admin .admin-linha > select,
  #dlg-admin .admin-linha > input[type="text"] { min-width: 0; flex: 1 1 100%; }
  #dlg-admin .admin-grade-acoes { flex-wrap: wrap; }
  #dlg-admin .admin-grade-acoes .primario { margin-left: auto; }
}
.lista-admin { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-admin li {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 12px; background: var(--painel-2); border: 1px solid var(--borda);
}
.lista-admin .meta { flex: 1; min-width: 0; }
.lista-admin code { font-size: 13px; color: var(--creme); }
.lista-admin .acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.lista-admin .acoes button { font-size: 12px; padding: 6px 10px; }
.baixar-app { margin: 14px 0 0; text-align: center; color: var(--texto-fraco); line-height: 1.45; }
.tela-entrada .baixar-app { font-size: 12.5px; }
.baixar-app a { color: var(--azul-suave); }
.baixar-app a.primario { color: var(--creme); display: inline-flex; justify-content: center; margin: 0 auto 8px; }
body.aplicativo .baixar-app { display: none !important; }

.topo-acoes {
  display: flex; align-items: center; justify-self: end; gap: 8px; min-width: 0;
}
.btn-baixar-app {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 10px;
  background: var(--azul); color: var(--creme);
  font-weight: 700; font-size: 13px; line-height: 1; text-decoration: none;
  white-space: nowrap; min-height: 36px;
}
.btn-baixar-app svg { width: 16px; height: 16px; flex: none; }
.btn-baixar-app:hover { background: var(--azul-claro); color: var(--creme); }
.cartao-baixar-app {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 16px 22px 0; padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(36, 85, 164, .45), rgba(30, 71, 137, .22));
  border: 1px solid rgba(158, 190, 236, .38);
  flex: none;
}
.cartao-baixar-texto { flex: 1 1 16rem; min-width: 0; }
.cartao-baixar-texto strong {
  display: block; font-size: 15px; font-weight: 700; color: var(--creme); margin: 0 0 4px;
}
.cartao-baixar-texto p {
  margin: 0; font-size: 13px; color: var(--cinza-quente); line-height: 1.4;
}
.cartao-baixar-app .primario { flex: none; padding: 10px 18px; font-weight: 700; }
#link-baixar-comunidades { display: flex; justify-content: center; width: 100%; margin-top: 16px; }
.baixar-app #link-baixar-config { display: inline-flex; margin-top: 8px; }
.rodape-entrada { margin: 18px 0 0; text-align: center; font-size: 11.5px; color: #79736A; }
.versao { opacity: .75; }

/* ============ Aplicação ============ */
/* Areas nomeadas para o painel do usuario ser UM elemento so: coluna da lateral
   no desktop, barra embaixo no celular, sem duplicar botao. */
.app {
  position: relative; z-index: 1; display: grid; height: var(--vh);
  grid-template-columns: var(--trilho-w) var(--lateral-w) 1fr var(--chat-w);
  grid-template-rows: 1fr auto;
  grid-template-areas: "trilho lateral palco chat" "trilho usuario palco chat";
}
.app.sem-chat, .app.modo-casa {
  grid-template-columns: var(--trilho-w) var(--lateral-w) 1fr;
  grid-template-areas: "trilho lateral palco" "trilho usuario palco";
}
.app.sem-chat .chat-area, .app.modo-casa .chat-area { display: none; }
.trilho { grid-area: trilho; }
/* Recolhido: a coluna da grade vira a faixa de 10 px; o nav continua
   72 px e o clip mostra só a ponta. Hover abre por cima da lateral
   (clip no compositor). Não mexe em --trilho-w no hover, senão o palco
   relayouta. Clique não prende: :focus-within ficava aberto até clicar
   fora. Teclado usa :focus-visible. */
.app.trilho-recolhido { --trilho-w: var(--trilho-peek); }
.app.trilho-recolhido .trilho {
  width: var(--trilho-aberto);
  justify-self: start;
  z-index: 32;
  clip-path: inset(0 calc(var(--trilho-aberto) - var(--trilho-peek)) 0 0);
  /* 220 ms: some suave. Não usar :focus-within: um clique no ícone da
     comunidade segura o foco e o trilho ficava aberto até clicar fora. */
  transition: clip-path 220ms cubic-bezier(.2, .7, .3, 1),
              box-shadow 220ms cubic-bezier(.2, .7, .3, 1);
}
.app.trilho-recolhido .trilho > * {
  opacity: .42;
  transition: opacity 220ms cubic-bezier(.2, .7, .3, 1);
}
.app.trilho-recolhido .trilho:hover,
.app.trilho-recolhido .trilho.arrastando-comunidade,
.app.trilho-recolhido .trilho:has(:focus-visible) {
  clip-path: inset(0 0 0 0);
  box-shadow: 12px 0 28px rgba(3, 13, 29, .55);
}
.app.trilho-recolhido .trilho:hover > *,
.app.trilho-recolhido .trilho.arrastando-comunidade > *,
.app.trilho-recolhido .trilho:has(:focus-visible) > * {
  opacity: 1;
}
.lateral { grid-area: lateral; }
.painel-usuario { grid-area: usuario; }
.palco-area { grid-area: palco; }
.chat-area { grid-area: chat; }

/* ----- Painel do usuario ----- */
.painel-usuario {
  display: flex; flex-direction: column; min-width: 0;
  background: rgba(6, 16, 31, .84); border-right: 1px solid var(--borda);
}
.controles-lateral {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px; padding: 8px 10px; border-top: 1px solid var(--borda);
  contain: layout;
}
.controles-lateral:has(#btn-tela-parar:not([hidden])) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.controles-lateral .controle {
  min-width: 0; min-height: 42px; padding: 8px 4px;
  justify-content: center;
}
.controles-lateral .relato-tela { grid-column: 1 / -1; margin: 2px 0 0; }

/* Só para leitor de tela: o rótulo existe sem ocupar espaço. */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.icone-so { padding: 7px 9px; font-size: 15px; line-height: 1; }
.perigo-texto { color: #F0B7AA; }
.perigo-texto:hover:not(:disabled) { background: rgba(224, 108, 90, .14); color: #F3CBC1; }

/* ----- Menus de dispositivo ----- */
.menu-disp {
  position: fixed; z-index: 60; min-width: 244px; max-width: min(340px, calc(100vw - 24px));
  padding: 8px; border: 1px solid var(--borda-forte); border-radius: var(--raio);
  background: var(--vidro); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--sombra);
}
.menu-titulo { margin: 2px 6px 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-fraco); }
.lista-disp { list-style: none; margin: 0; padding: 0; max-height: min(46vh, 320px); overflow-y: auto; }
.lista-disp button {
  width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  background: transparent; border: 1px solid transparent; border-radius: var(--raio-p);
  color: var(--texto-medio); text-align: left; font-size: 13.5px;
}
.lista-disp button:hover { background: var(--painel-2); color: var(--texto); border-color: transparent; }
.lista-disp button .marca-sel { width: 14px; flex: none; color: var(--azul-suave); font-weight: 700; }
.lista-disp button .rotulo-disp { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-disp li[aria-selected="true"] button { color: var(--texto); background: rgba(36, 85, 164, .16); }
.menu-vazio { margin: 6px; font-size: 12.5px; color: var(--texto-fraco); }

/* ----- Lateral ----- */
.lateral { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: rgba(6, 16, 31, .84); border-right: 1px solid var(--borda); }
.lateral > .marca { padding: 16px 18px; border-bottom: 1px solid var(--borda); }
.lateral > .marca .fantasma { margin-left: auto; font-size: 22px; padding: 0 8px; }
.canais { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 16px 22px; }
.canais .titulo-secao { padding: 18px 8px 8px; }
.canais .comunidade-cabeca + .comunidade-sair + .titulo-secao { padding-top: 6px; }
.lista-canais { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }

.canal-cabeca {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: transparent; border: 1px solid transparent; border-radius: var(--raio-p);
  color: var(--texto-medio); text-align: left; font-size: 14.5px;
}
.canal-cabeca:hover { background: var(--painel-2); border-color: transparent; color: var(--texto); }
.canal-cabeca .cerquilha { color: var(--texto-fraco); font-weight: 600; }
.canal-cabeca .rotulo { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canal-cabeca .contagem { font-size: 11.5px; color: var(--texto-fraco); background: var(--painel-2); border-radius: 999px; padding: 1px 8px; }
.canal-cabeca .canal-nao-lido {
  flex: none;
  background: #ed4245;
  color: #fff;
  min-width: 16px;
}
.canal.ativo > .canal-cabeca { background: linear-gradient(90deg, rgba(58, 114, 206, .2), rgba(58, 114, 206, .06)); border-color: rgba(58, 114, 206, .4); color: var(--creme); font-weight: 600; }
.canal.ativo > .canal-cabeca .cerquilha { color: var(--azul-suave); }
.canal.ativo > .canal-cabeca .contagem { background: rgba(58, 114, 206, .3); color: #DCE7F6; }

.canal-membros { list-style: none; margin: 4px 0 10px; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 2px; }
.canal.texto .canal-membros { display: none; }
.canal.na-voz > .canal-cabeca { box-shadow: inset 3px 0 0 var(--verde); }
.lista-membros-comunidade {
  list-style: none; margin: 0 0 8px; padding: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.membro-comunidade {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 7px 10px; border-radius: 8px; color: var(--texto-medio); font-size: 13.5px;
  width: 100%; background: transparent; border: 1px solid transparent; text-align: left;
}
.membro-comunidade:hover:not(:disabled) { background: var(--painel-2); color: var(--texto); border-color: transparent; }
.membro-comunidade.offline { opacity: .55; }
.membro-comunidade .nome {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.membro-comunidade .onde {
  font-size: 11.5px; font-weight: 400; color: var(--texto-fraco);
  flex: none; letter-spacing: 0; opacity: .92;
}
.membro-comunidade:not([data-canal]) { cursor: default; }
.chk-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-medio); white-space: nowrap; }
.chk-inline input { width: auto; }
.membro {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 4px 8px; border-radius: 4px; color: var(--texto-medio); font-size: 14px;
}
.membro:hover { background: var(--painel-2); }
.membro-icones, .pessoa-icones { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.membro-nome {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0; border: 0; background: transparent; color: inherit; font: inherit;
  text-align: left; border-radius: 4px; box-shadow: none;
}
.membro-nome:hover:not(:disabled) {
  background: transparent; border-color: transparent; color: var(--creme); text-decoration: underline;
}
/* A transmissão oferece uma ação visível; o HUD mantém seu selo compacto. */
button.btn-live-membro, button.btn-live-pessoa {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 24px; padding: 0 9px 0 8px; border: 1px solid rgba(232, 84, 98, .55); border-radius: 999px;
  background: rgba(196, 48, 63, .16); color: #ffd9dd; cursor: pointer;
  font: 700 11.5px/1 'Exo 2', "Segoe UI", sans-serif;
  letter-spacing: .01em; text-transform: none; white-space: nowrap; transform: none;
}
/* Ponto vermelho de "ao vivo" no lugar do triângulo de play. */
button.btn-live-membro::before, button.btn-live-pessoa::before {
  content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: #ff5a6a; box-shadow: 0 0 6px rgba(255, 90, 106, .8);
}
button.btn-live-membro:hover:not(:disabled),
button.btn-live-pessoa:hover:not(:disabled) {
  background: rgba(196, 48, 63, .32); border-color: #ff7a87; color: #fff; filter: none;
}
button.btn-live-membro[data-acao="sair"], button.btn-live-pessoa[data-acao="sair"] {
  background: rgba(57, 137, 104, .18); border-color: rgba(97, 201, 152, .6); color: #b8f5d5;
}
button.btn-live-membro[data-acao="sair"]::before,
button.btn-live-pessoa[data-acao="sair"]::before { border-radius: 1px; background: currentColor; box-shadow: none; }
button.btn-live-membro[data-acao="sair"]:hover:not(:disabled),
button.btn-live-pessoa[data-acao="sair"]:hover:not(:disabled) {
  background: rgba(57, 137, 104, .32); border-color: #61c998; color: #d8ffe9;
}
button.btn-live-membro:focus-visible, button.btn-live-pessoa:focus-visible {
  outline: 2px solid var(--creme); outline-offset: 2px;
}
button.btn-live-membro:active:not(:disabled),
button.btn-live-pessoa:active:not(:disabled) { transform: none; }
/* Ícones de estado: mesmos traços dos botões, tamanho e cor sob controle. */
.ic-estado { width: 15px; height: 15px; flex: none; display: block; }
.ic-estado.ic-mudo { color: var(--vermelho); }
.ic-estado.ic-tela { color: var(--azul-suave); }
.membro .ic-estado { width: 14px; height: 14px; }
.pessoa-tags .ic-estado { width: 16px; height: 16px; }
.membro.falando { color: var(--creme); }

/* Avatar com inicial; a cor vem do nome (ver corDoNome no app.js) */
.avatar { display: grid; place-items: center; border-radius: 50%; font-weight: 700; color: var(--creme); flex: none; background: var(--azul); text-transform: uppercase; user-select: none; letter-spacing: .02em; }
.avatar.pequeno { width: 32px; height: 32px; font-size: 12.5px; }
.avatar.medio { width: 34px; height: 34px; font-size: 14px; }
.avatar.grande { width: 76px; height: 76px; font-size: 28px; }

/* Anel de quem está falando. O pulso anima transform e opacity num
   pseudo-elemento, que são as duas únicas propriedades que ficam no compositor:
   animar box-shadow custaria pintura na thread principal a cada quadro, para
   cada pessoa falando ao mesmo tempo. */
.anel { position: relative; border-radius: 50%; padding: 2px; border: 2px solid transparent; transition: border-color var(--transicao); }
.anel::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(70, 201, 138, .35);
  opacity: 0; transform: scale(.92); pointer-events: none;
}
.falando > .anel, .anel.falando {
  border-color: #3dff9a;
  box-shadow: 0 0 0 2px rgba(61, 255, 154, .55), 0 0 14px rgba(61, 255, 154, .65);
}
.falando > .anel::after, .anel.falando::after { animation: pulso 1.5s ease-in-out infinite; }
.membro.falando .avatar, .pessoa.falando .avatar {
  box-shadow: 0 0 0 2px #3dff9a, 0 0 12px rgba(61, 255, 154, .7);
}
@keyframes pulso {
  0%, 100% { opacity: .85; transform: scale(1); }
  50% { opacity: .15; transform: scale(1.16); }
}
html.aba-oculta .falando > .anel::after,
html.aba-oculta .anel.falando::after { animation: none; opacity: .5; }

.eu {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  padding: 8px 10px 10px; border-top: 1px solid var(--borda);
  background: rgba(3, 13, 29, .62); min-width: 0; contain: layout;
}
.eu-topo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.eu-avatar-caixa { position: relative; flex: none; width: 32px; height: 32px; }
.eu-avatar-caixa .avatar { display: grid; }
.eu-ponto {
  position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px;
  border-radius: 50%; flex: none; pointer-events: none;
  background: #6b7280; border: 2px solid var(--fundo-1);
}
.eu[data-conexao="conectado"] .eu-ponto { background: var(--verde); }
.eu[data-conexao="conectando"] .eu-ponto,
.eu[data-conexao="reconectando"] .eu-ponto { background: var(--ambar); }
.eu[data-conexao="desconectado"] .eu-ponto { background: var(--vermelho); }
.eu-info { flex: 1; min-width: 0; cursor: pointer; line-height: 1.3; }
.eu-info:hover .eu-nome { color: var(--creme); }
.eu-nome { display: block; font-size: 15.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.eu-status-linha {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  padding-left: 40px;
}
.eu-estado { font-size: 12.5px; font-weight: 400; color: var(--texto-fraco); }
button.eu-estado {
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
  min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
button.eu-estado:hover { color: var(--creme); }
.eu-acoes {
  display: inline-flex; align-items: center; flex: none;
  gap: 0; min-width: 0; margin: 0; padding: 0;
}
.eu-acoes .icone-so { padding: 0 3px; }

/* Barrinhas de sinal */
.sinal { display: inline-flex; align-items: flex-end; gap: 2px; height: 15px; flex: none;
  padding: 3px 5px; background: transparent; border: 1px solid transparent; border-radius: 7px; cursor: default; }
.sinal:hover { background: var(--painel-2); border-color: transparent; }
.sinal i { width: 3px; border-radius: 2px; background: var(--borda-forte); display: block; }
.sinal i:nth-child(1) { height: 5px; } .sinal i:nth-child(2) { height: 9px; } .sinal i:nth-child(3) { height: 13px; }
.sinal[data-q="excellent"] i, .sinal[data-q="good"] i { background: var(--verde); }
.sinal[data-q="good"] i:nth-child(3) { background: var(--borda-forte); }
.sinal[data-q="poor"] i:nth-child(1) { background: var(--ambar); }
.sinal[data-q="poor"] i:nth-child(2), .sinal[data-q="poor"] i:nth-child(3) { background: var(--borda-forte); }
.sinal[data-q="lost"] i:nth-child(1) { background: var(--vermelho); }
.eu-status-linha .sinal { padding: 0; height: 13px; }
.eu-rtt {
  font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--texto-fraco);
  min-width: 0; text-align: left; flex: none; font-weight: 600;
}
.eu-rtt.ok { color: var(--verde); }
.eu-rtt.medio { color: var(--ambar); }
.eu-rtt.ruim { color: var(--vermelho); }


/* ----- Mapa: o mundo em tiles -----
   Um canvas só. O pixel art precisa de duas coisas do CSS:
   `image-rendering: pixelated`, para o navegador não interpolar e borrar, e
   nenhuma sombra ou filtro em cima, que forçaria uma camada extra por quadro. */
.palco-barra { display: none; }
.aba { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font: inherit;
  font-size: 13px; color: var(--texto-fraco); background: transparent; border: 1px solid transparent;
  border-radius: 8px; cursor: pointer; transition: color var(--transicao), background var(--transicao), border-color var(--transicao); }
.aba svg { width: 15px; height: 15px; }
.aba:hover { color: var(--creme); background: var(--painel-2); }
.aba[aria-pressed="true"] { color: #DCE7F6; background: rgba(58, 114, 206, .16); border-color: var(--azul); }

/* ⚠️ Altura EXPLÍCITA, não `flex: 1`. Com `flex: 1` o .mapa encolhia junto com
   o palco, mas o canvas tem `min-height` e não encolhe: os filhos
   transbordavam o pai e a grade de pessoas era pintada por cima da dica. Altura
   fixa resolve, e quem rola é o palco. */
.mapa { display: flex; flex-direction: column; gap: 8px; flex: none; position: relative; }
.mapa-pip {
  position: absolute; top: 10px; left: 10px; right: 10px; z-index: 3;
  display: flex; gap: 8px; overflow-x: auto; pointer-events: auto;
  padding-bottom: 2px;
}
.mapa-pip-item {
  position: relative; flex: none; width: 148px; height: 84px; padding: 0;
  border: 2px solid rgba(61, 255, 154, .85); border-radius: 8px; overflow: hidden;
  background: #000; cursor: pointer;
}
.mapa-pip-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mapa-pip-item .pip-nome {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px;
  font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75));
  text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lista-portas {
  display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px;
  padding: 8px 10px; border: 1px solid rgba(232, 184, 74, .45);
  border-radius: 8px; background: rgba(232, 184, 74, .08);
}
.pedido-porta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--creme);
}
.pedido-porta .acoes { margin-left: auto; display: flex; gap: 6px; }
.canal.trancada .canal-cabeca .rotulo::after {
  content: ' 🔒'; font-size: 11px; opacity: .85;
}
.canal.oculta .canal-cabeca .rotulo::before {
  content: '👁 '; font-size: 11px; opacity: .85;
}
.membro-comunidade .tag, .membro-nome.tag {
  font-weight: 700;
}
.mapa-tela {
  display: block; width: 100%; flex: none;
  height: min(58vh, 620px); min-height: 280px;
  border: 1px solid var(--borda); border-radius: 14px;
  background: var(--fundo-0); cursor: pointer;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  /* o canvas se redimensiona sozinho pelo ResizeObserver; sem isto ele
     empurraria o layout num laço de crescer-e-medir */
  contain: strict;
}
.mapa-tela:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
.mapa-dica { margin: 0; font-size: 11.5px; color: var(--texto-fraco); text-align: center; }
/* No toque não existe tecla: mostrar WASD ali seria instrução para um teclado
   que a pessoa não tem. */
.mapa-dica .so-desktop { display: inline; }
.mapa-dica .so-mobile { display: none; }
@media (max-width: 900px) {
  .mapa-dica .so-desktop { display: none; }
  .mapa-dica .so-mobile { display: inline; }
}
.mapa-dica kbd { display: inline-block; min-width: 17px; padding: 1px 4px; margin: 0 1px;
  font: inherit; font-size: 10.5px; text-align: center; color: var(--creme);
  background: var(--painel-2); border: 1px solid var(--borda-forte);
  border-bottom-width: 2px; border-radius: 4px; }

/* ----- Palco ----- */
.palco-area { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.topo {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto minmax(40px, 1fr);
  align-items: center; gap: 12px; padding: 8px 16px;
  border-bottom: 1px solid var(--borda); background: rgba(6, 16, 31, .66);
}
.topo-marca { display: flex; align-items: center; gap: 8px; min-width: 0; justify-self: start; }
.topo-espaco {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  min-width: 0; max-width: 100%; padding: 4px 8px 4px 2px;
  background: transparent; border: 0; border-radius: 10px; text-align: left;
  flex: 1;
}
.topo-espaco:hover { background: var(--painel-2); color: var(--creme); border-color: transparent; }
.topo-espaco-rotulo {
  font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-fraco); line-height: 1.2;
}
.topo-espaco-linha { display: flex; align-items: center; gap: 6px; min-width: 0; width: 100%; }
#nome-espaco { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--creme); flex: 1 1 auto; min-width: 4.5rem; }
.topo-espaco-caret { color: var(--texto-fraco); font-size: 11px; line-height: 1; flex: none; }
.topo-centro {
  display: flex; align-items: center; gap: 2px; justify-self: center;
  padding: 4px; background: var(--painel); border: 1px solid var(--borda);
  border-radius: 12px;
}
.topo-centro .fantasma { border-radius: 8px; padding: 6px 12px; }
.topo-centro .fantasma[aria-pressed="true"] {
  color: #DCE7F6; background: rgba(58, 114, 206, .16);
}
.app.modo-so-tela .lateral,
.app.modo-so-tela .trilho,
.app.modo-so-tela .chat-area,
.app.modo-so-tela .palco-barra,
.app.modo-so-tela #btn-palco-mapa,
.app.modo-so-tela #btn-palco-telas,
.app.modo-so-tela .grade-pessoas,
.app.modo-so-tela .mapa,
.app.modo-so-tela .convite-live { display: none !important; }
.app.modo-so-tela { grid-template-columns: 1fr; grid-template-rows: 1fr auto; grid-template-areas: "palco" "usuario"; }
.app.modo-so-tela .palco-area { grid-area: palco; }
.palco.so-tela .grade-telas { flex: 1; min-height: 0; }

.status { font-size: 11.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--borda-forte); color: var(--texto-fraco); }
.status[data-estado="conectado"] { color: var(--verde); border-color: rgba(70, 201, 138, .45); background: rgba(70, 201, 138, .08); }
.status[data-estado="conectando"], .status[data-estado="reconectando"] { color: var(--ambar); border-color: rgba(232, 163, 61, .45); background: rgba(232, 163, 61, .08); }
.status[data-estado="desconectado"] { color: var(--vermelho); border-color: rgba(224, 108, 90, .45); background: rgba(224, 108, 90, .08); }
.status[data-estado="ocioso"] { color: var(--texto-fraco); border-color: var(--borda); background: transparent; }

/* Faixa de atualizacao. Azul da marca, nao ambar: nao e defeito, e novidade.
   `fixed` porque ela vive fora do #app (aparece tambem na tela de entrada) e
   nao deve empurrar layout nenhum ao surgir: `position: fixed` sai do fluxo,
   entao mostrar a faixa nao relayouta a pagina inteira.
   Sem animacao CONTINUA (ver CLAUDE.md): a entrada e uma transicao unica em
   transform e opacity, que ficam no compositor, e acaba. */
.faixa-atualizacao {
  /* 70: acima do menu de dispositivos (60) e das gavetas do celular (30).
     O <dialog> de configuracoes usa a top layer nativa e continua na frente,
     o que esta certo: um modal aberto e o foco da pessoa naquele instante. */
  /* top: abaixo da barra de titulo da casca (--barra-h: 0 no navegador, 32px
     na casca); a barra fica em z-index maior e escondia a faixa (#115). */
  position: fixed; top: var(--barra-h); left: 0; right: 0; z-index: 70;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; padding-top: max(10px, env(safe-area-inset-top));
  background: #16346B; border-bottom: 1px solid rgba(58, 114, 206, .55);
  color: var(--creme); font-size: 14px;
  box-shadow: 0 6px 18px rgba(3, 13, 29, .45);
  animation: faixa-entra .22s ease-out;
}
/* Barra reserva (desenhada pela casca quando a pagina nao desenhou a dela):
   tambem tem 32px, mas nao liga --barra-h. */
html.pc-barra-reserva .faixa-atualizacao { top: 32px; }
/* Fundo opaco, nao translucido: por cima do mapa em canvas um fundo com alfa
   deixaria o texto ilegivel dependendo do que estivesse pintado atras. */
.faixa-atualizacao span { flex: 1; min-width: 0; }
.faixa-atualizacao button { flex: none; }
/* Barra do download no aplicativo. `appearance: none` porque o desenho nativo
   ignora a paleta; os dois seletores existem porque o pseudo-elemento do
   preenchimento tem nome diferente em cada motor, e um seletor invalido
   descartaria a regra inteira se estivessem juntos. */
.atualizacao-progresso {
  flex: none; width: 140px; height: 6px; appearance: none; border: none;
  border-radius: 3px; overflow: hidden; background: rgba(239, 233, 218, .18);
}
.atualizacao-progresso::-webkit-progress-bar { background: rgba(239, 233, 218, .18); }
.atualizacao-progresso::-webkit-progress-value { background: var(--creme); }
.atualizacao-progresso::-moz-progress-bar { background: var(--creme); }
@keyframes faixa-entra { from { opacity: 0; transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .faixa-atualizacao { animation: none; }
}

/* Caixa de aviso à esquerda (site e, no Windows, janela irmã no mesmo canto).
   Sem animação contínua: só a entrada. pointer-events none no container para
   não bloquear clique no que estiver atrás; cada cartão religa. */
.caixa-sinais {
  position: fixed; z-index: 80;
  /* À direita do trilho (72 px), senão a caixa fica debaixo dos ícones. */
  left: max(calc(var(--trilho-w, 72px) + 12px), env(safe-area-inset-left));
  top: max(72px, calc(env(safe-area-inset-top) + 56px));
  display: flex; flex-direction: column; gap: 8px;
  width: min(340px, calc(100vw - 32px));
  pointer-events: none;
}
.caixa-sinal {
  pointer-events: auto;
  padding: 12px 14px;
  border-radius: 12px;
  background: #1A2740;
  border: 1px solid var(--borda-forte);
  box-shadow: 0 10px 28px rgba(3, 13, 29, .55);
  color: var(--creme);
  animation: sinal-entra .18s ease-out;
}
.caixa-sinal.chamada { border-left: 3px solid var(--verde); }
.caixa-sinal.erro { border-left: 3px solid var(--vermelho); }
.caixa-sinal b { display: block; font-size: 14px; margin-bottom: 2px; }
.caixa-sinal p { margin: 0; color: var(--texto-medio); font-size: 13px; }
.caixa-sinal .acoes-sinal {
  display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap;
}
@keyframes sinal-entra { from { opacity: 0; transform: translateX(-12px); } }
@media (prefers-reduced-motion: reduce) {
  .caixa-sinal { animation: none; }
}
.lista-sons-eventos {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.lista-sons-eventos li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px; align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--borda);
  font-size: 13.5px; color: var(--creme);
}
.lista-sons-eventos li:last-child { border-bottom: 0; }
.lista-sons-eventos label {
  display: flex; align-items: center; gap: 6px;
  color: var(--texto-medio); font-size: 12.5px; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .faixa-atualizacao { animation: none; }
  .falando > .anel::after, .anel.falando::after { animation: none; opacity: .5; }
}
@media (max-width: 620px) {
  .faixa-atualizacao { flex-wrap: wrap; font-size: 13px; padding: 8px 12px; }
}

.aviso { display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: rgba(232, 163, 61, .12); border-bottom: 1px solid rgba(232, 163, 61, .35); color: #F2D7A9; font-size: 14px; }
.aviso span { flex: 1; }

.palco { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.palco.so-pessoas { justify-content: flex-start; }
/* No modo mapa o palco NAO rola: o canvas ocupa o espaco e a camera anda
   dentro do mundo. Rolagem e camera juntas dariam duas formas de mover a vista. */
.palco[data-modo="mapa"] { justify-content: flex-start; overflow-y: auto; }
.palco[data-modo="mapa"] .grade-pessoas { flex: none; }
.palco.so-pessoas .grade-pessoas { align-self: flex-start; width: min(100%, 320px); }

.palco[data-modo="telas"] { overflow: hidden; }
.palco[data-modo="telas"] .grade-telas { flex: 1; min-height: 0; }
.palco[data-modo="telas"] .grade-pessoas { flex: none; max-height: 26vh; overflow-y: auto; }
.convite-live {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; flex: none;
  background: rgba(58, 114, 206, .18); border: 1px solid var(--azul);
  border-radius: var(--raio); color: var(--creme);
}
.convite-live p { margin: 0; font-size: 14px; font-weight: 500; }
.grade-telas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.grade-telas.foco { grid-template-columns: 1fr; min-height: 0; }
.grade-telas.priorizada {
  display: grid;
  grid-template-columns: repeat(var(--outras, 2), minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) 148px;
  gap: 10px;
}
.grade-telas.priorizada .tela-remota.destaque {
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: 0;
  border-color: var(--azul-suave);
}
.grade-telas.priorizada .tela-remota.destaque video {
  aspect-ratio: auto;
  flex: 1;
  min-height: 0;
  height: auto;
  cursor: zoom-in;
}
.grade-telas.priorizada .tela-remota:not(.destaque) { cursor: pointer; }
.grade-telas.priorizada .tela-remota:not(.destaque) video {
  aspect-ratio: 16 / 9;
  max-height: 92px;
  cursor: pointer;
}
.grade-telas.priorizada .tela-remota:not(.destaque) .tela-audio { display: none; }
.tela-remota { margin: 0; background: #000; border: 1px solid var(--borda-forte); border-radius: var(--raio); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sombra); position: relative; min-height: 0; }
.tela-remota video { width: 100%; aspect-ratio: 16 / 9; background: #000; display: block; cursor: zoom-in; object-fit: contain; }
.tela-remota video:fullscreen { cursor: zoom-out; }
.tela-remota:fullscreen,
.tela-remota:-webkit-full-screen {
  width: 100%;
  height: 100%;
  max-height: none;
  border: 0;
  border-radius: 0;
  background: #030D1D;
}
.tela-remota:fullscreen video,
.tela-remota:-webkit-full-screen video {
  flex: 1;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  cursor: zoom-out;
}
.tela-remota:fullscreen figcaption,
.tela-remota:-webkit-full-screen figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: linear-gradient(transparent, rgba(10, 12, 16, .88));
}
.tela-remota figcaption { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; color: var(--texto-medio); background: var(--painel); flex-wrap: wrap; }
/* Uma tela (e o destaque com várias) enche o palco. O 16:9 do vídeo
   somado à figcaption era cortado pelo overflow do palco: o volume
   sumia. Overlay embaixo do vídeo deixa o controle sempre à vista. */
.grade-telas.foco > .tela-remota { height: 100%; }
.grade-telas.foco > .tela-remota video,
.grade-telas.priorizada > .tela-remota.destaque video {
  flex: 1;
  min-height: 0;
  aspect-ratio: auto;
  height: auto;
}
.grade-telas.foco > .tela-remota.camera,
.grade-telas.priorizada > .tela-remota.camera.destaque {
  height: auto;
  max-width: min(100%, 560px);
  justify-self: center;
  align-self: center;
}
.grade-telas.foco > .tela-remota.camera video,
.grade-telas.priorizada > .tela-remota.camera.destaque video {
  flex: none;
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: min(52vh, 420px);
  object-fit: contain;
}
.grade-telas.foco > .tela-remota figcaption,
.grade-telas.priorizada > .tela-remota.destaque figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  /* Fundo mais firme: texto e volume legíveis sobre qualquer imagem (#113). */
  background: linear-gradient(rgba(6, 9, 14, 0), rgba(6, 9, 14, .78) 35%, rgba(6, 9, 14, .94));
  padding-top: 18px;
  opacity: 0;
  pointer-events: none;   /* invisível não pode roubar clique da imagem */
  transition: opacity .18s ease;
}
/* Some com o mouse parado; volta ao mexer, com foco do teclado ou mouse na barra. */
.grade-telas.foco > .tela-remota.controles-visiveis figcaption,
.grade-telas.priorizada > .tela-remota.destaque.controles-visiveis figcaption,
.grade-telas.foco > .tela-remota figcaption:hover,
.grade-telas.priorizada > .tela-remota.destaque figcaption:hover,
.grade-telas.foco > .tela-remota:focus-within figcaption,
.grade-telas.priorizada > .tela-remota.destaque:focus-within figcaption { opacity: 1; pointer-events: auto; }
@media (hover: none) {
  .grade-telas.foco > .tela-remota figcaption,
  .grade-telas.priorizada > .tela-remota.destaque figcaption { opacity: 1; pointer-events: auto; }
}
.tela-titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tela-qualidade {
  font-size: 11px; color: var(--creme); background: rgba(10, 12, 16, .72);
  border-radius: 4px; padding: 1px 6px; margin-left: 6px; letter-spacing: .02em;
}
.tela-aviso-captura {
  width: 100%; font-size: 12px; color: #F2D7A9; margin-top: 4px;
}
.tela-acoes { display: flex; gap: 4px; margin-left: auto; flex: none; }
button.tela-pip, button.tela-so {
  padding: 4px 8px; font-size: 11.5px; font-weight: 600;
}
.tela-remota figcaption .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--azul-suave); box-shadow: 0 0 8px var(--azul-suave); flex: none; }
.tela-remota.tela-muda figcaption .ponto { background: var(--vermelho); box-shadow: 0 0 8px var(--vermelho); }
.tela-audio { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: min(100%, 220px); flex: 1 1 180px; }
.tela-audio-rotulo { font-size: 11px; color: var(--texto-fraco); white-space: nowrap; }
.tela-audio .tela-vol-faixa { flex: 1; min-width: 72px; }
.tela-audio-aviso { font-size: 11px; color: #F3CBC1; margin-left: 4px; }
.tela-remota:not(.tela-muda) .tela-audio-aviso { display: none; }

/* ----- PC-028/029/030: transmissão (quem assiste e quem compartilha) ----- */
.tela-estado {
  font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: rgba(158, 190, 236, .14); color: var(--azul-suave); white-space: nowrap;
}
.tela-estado[data-nivel="aviso"] { background: rgba(242, 215, 169, .16); color: #F2D7A9; }
.tela-vol-pct { font-size: 11px; min-width: 3.2em; text-align: right; color: var(--texto-medio); font-variant-numeric: tabular-nums; }
.tela-remota.tela-sem-som .tela-vol-faixa,
.tela-remota.tela-sem-som .tela-vol-pct { opacity: .45; }
/* Sem áudio compartilhado não há o que regular: o controle de volume some (o
   aviso "Sem áudio compartilhado" já diz o estado). Antes ficava "100%" ao lado. */
.tela-remota.tela-sem-som .tela-audio { display: none; }
.tela-remota .tela-acoes > * { flex: none; }
button.tela-acao.tela-parar-ver { display: inline-block; width: auto; height: 30px; padding: 0 10px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
button.tela-ativar-som { padding: 4px 10px; font-size: 12px; margin: 0; }
.tela-remota:focus-visible { outline: 2px solid var(--azul-suave); outline-offset: -2px; }
.tela-acao[aria-pressed="true"] { background: rgba(58, 114, 206, .22); color: var(--creme); }
@media (pointer: coarse) {
  .tela-remota .tela-acao, .tela-remota .tela-vol-mudo { min-width: 40px; min-height: 40px; }
  .tela-remota .tela-vol-faixa { min-height: 32px; }
}

.barra-transmissao {
  position: fixed; z-index: 70; left: 50%; transform: translateX(-50%); bottom: 14px;
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; justify-content: center;
  width: max-content; max-width: min(860px, calc(100vw - 24px)); padding: 10px 14px;
  background: var(--vidro); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--borda-forte); border-left: 3px solid var(--vermelho);
  border-radius: 14px; box-shadow: var(--sombra); color: var(--texto); font-size: 13px;
}
.barra-transmissao[hidden] { display: none; }
/* Compacta (no mapa): pílula no canto direito, só ponto, Opções e Parar. */
.barra-transmissao.compacta { transform: translateX(-100%); padding: 6px 8px 6px 12px; gap: 8px; flex-wrap: nowrap; }
.barra-transmissao.compacta .bt-fonte, .barra-transmissao.compacta .bt-audio,
.barra-transmissao.compacta .bt-acoes > button:not(.bt-so-compacta):not(#bt-parar) { display: none; }
.barra-transmissao.compacta strong { font-size: 12.5px; }
.barra-transmissao:not(.compacta) .bt-so-compacta { display: none; }
.barra-transmissao:not(.no-mapa) .bt-so-mapa-aberta, .barra-transmissao.compacta .bt-so-mapa-aberta { display: none; }
.bt-info { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; min-width: 0; }
.bt-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--vermelho); box-shadow: 0 0 8px var(--vermelho); flex: none; }
.bt-fonte, .bt-audio { color: var(--texto-medio); font-size: 12.5px; }
.bt-audio[data-ligado="1"] { color: #9FE0BC; }
.bt-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.bt-acoes button { padding: 6px 10px; font-size: 12.5px; margin: 0; }
@media (pointer: coarse) {
  .bt-acoes button { min-height: 40px; }
}
.dlg-transmissao { width: min(560px, calc(100vw - 24px)); }
.transm-corpo { padding: 0 24px 8px; overflow-y: auto; }
.transm-corpo label[for] { display: block; margin: 12px 0 4px; font-size: 13px; color: var(--azul-suave); }
.transm-corpo select { width: 100%; }
.transm-fonte-texto { margin: 0 0 8px; color: var(--texto-medio); font-size: 13.5px; line-height: 1.45; }
.transm-previa { margin: 8px 0; border: 1px solid var(--borda-forte); border-radius: 10px; overflow: hidden; background: #030D1D; }
.transm-previa video { display: block; width: 100%; max-height: 220px; object-fit: contain; }
.transm-audio { margin: 14px 0 0; padding: 0; border: 0; }
.transm-audio legend { padding: 0; font-size: 13px; color: var(--azul-suave); }
.transm-op small { display: block; color: var(--texto-fraco); font-size: 12px; line-height: 1.4; margin-top: 2px; }
.transm-resumo { margin: 12px 0 0; font-size: 12.5px; color: var(--texto-medio); min-height: 1.3em; }
.transm-botoes { margin-top: 12px; }
.dialogo .transm-botoes .primario { margin: 0; }
.transm-botoes { padding-bottom: 14px; }

.grade-pessoas {
  display: flex; flex-direction: column; gap: 1px;
  width: min(100%, 320px); align-self: flex-start;
}
.grade-pessoas.compacta {
  flex-direction: row; flex-wrap: wrap; gap: 2px 6px; width: 100%;
}
.pessoa {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  padding: 4px 8px; min-width: 0;
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  color: var(--texto-medio);
  transition: background var(--transicao), color var(--transicao);
  contain: layout paint;
}
.pessoa:hover { background: var(--painel-2); }
.pessoa.falando { border-color: transparent; background: var(--painel-2); color: var(--creme); }
.pessoa-cabeca {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  flex: 1; min-width: 0; flex-wrap: nowrap;
}
.pessoa .pessoa-nome {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 500; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0; border: 0; background: transparent; color: inherit;
  box-shadow: none; border-radius: 4px;
}
.pessoa .pessoa-nome:hover:not(:disabled) {
  background: transparent; border-color: transparent; color: var(--creme);
  text-decoration: underline;
}
.pessoa .pessoa-tags {
  display: flex; gap: 6px; align-items: center; flex: none;
  min-height: 0; font-size: 11.5px; color: var(--texto-fraco);
}
.etiqueta { padding: 1px 7px; border-radius: 999px; background: var(--painel-3); }
.etiqueta.voce { color: var(--azul-suave); background: rgba(58, 114, 206, .16); }
/* ⚠️ `opacity: 0` esconde mas NAO desarma: a faixa continuava recebendo clique.
   Como ela mora dentro do cartao e tem 4 px de altura, um clique perdido no
   cartao caia nela e silenciava aquela pessoa em segredo, sem nada na tela
   dizer o que tinha acontecido. Invisivel tem de vir com pointer-events: none. */
.pessoa .volume { width: 100%; display: flex; align-items: center; gap: 7px; opacity: 0;
  pointer-events: none; transition: opacity var(--transicao); }
.pessoa:hover .volume, .pessoa:focus-within .volume,
.pessoa.calado .volume, .pessoa .volume.fixo { opacity: 1; pointer-events: auto; }
@media (hover: none) { .pessoa .volume { opacity: 1; pointer-events: auto; } }
.pessoa .volume span { font-size: 12px; color: var(--texto-fraco); }

.painel-pessoa {
  position: fixed; z-index: 55; min-width: 240px; max-width: min(300px, calc(100vw - 24px));
  max-height: calc(var(--vh) - 24px); overflow-y: auto;
  padding: 12px 14px;
  background: var(--painel); border: 1px solid var(--borda-forte);
  border-radius: var(--raio); box-shadow: var(--sombra);
}
.painel-pessoa-nome {
  margin: 0 0 8px; font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
button.painel-pessoa-live {
  width: 100%; margin: 0 0 10px; padding: 7px 10px;
  font-size: 13px; font-weight: 600;
}
button.painel-pessoa-live[data-acao="assistir"] {
  background: linear-gradient(180deg, var(--azul) 0%, var(--azul-forte) 100%);
  border-color: transparent; color: var(--creme);
}
button.painel-pessoa-live[data-acao="assistir"]:hover:not(:disabled) {
  background: linear-gradient(180deg, #3A72CE 0%, #1E4789 100%);
  border-color: transparent; color: var(--creme);
}
button.painel-pessoa-live[data-acao="sair"] {
  background: var(--painel-3); border-color: var(--borda-forte); color: var(--texto);
}
button.painel-pessoa-live[data-acao="sair"]:hover:not(:disabled) {
  background: rgba(224, 108, 90, .14); border-color: var(--vermelho); color: #F0B7AA;
}
.painel-pessoa .volume { opacity: 1; pointer-events: auto; width: 100%; }
.painel-pessoa-dica {
  margin: 10px 0 0; font-size: 12px; color: var(--texto-fraco);
}
.painel-pessoa-admin {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--borda);
}
.painel-pessoa-admin button,
.painel-pessoa-admin select,
.painel-pessoa-admin input {
  width: 100%; text-align: left; font-size: 13px;
}
.membro.arrastavel, .pessoa.arrastavel { cursor: grab; }
body.arrastando-membro, body.arrastando-membro * { cursor: grabbing !important; user-select: none !important; }
.canal.soltar > .canal-cabeca {
  background: rgba(58, 114, 206, .28);
  border-color: rgba(58, 114, 206, .7);
  color: var(--creme);
}
.arrasto-ghost {
  position: fixed; z-index: 80; pointer-events: none;
  padding: 6px 10px; border-radius: 8px;
  background: var(--painel); border: 1px solid var(--borda-forte);
  box-shadow: var(--sombra); color: var(--creme); font-size: 13px; font-weight: 600;
}

.menu-ctx {
  position: fixed; z-index: 90; min-width: 208px; max-width: min(280px, calc(100vw - 16px));
  padding: 6px; margin: 0; list-style: none;
  background: var(--painel); border: 1px solid var(--borda-forte);
  border-radius: 8px; box-shadow: var(--sombra);
}
.menu-ctx button {
  display: block; width: 100%; text-align: left;
  margin: 0; padding: 7px 10px; border: 0; border-radius: 6px;
  background: transparent; color: var(--creme); font: inherit; font-size: 13px; cursor: pointer;
}
.menu-ctx button:hover:not(:disabled),
.menu-ctx button:focus-visible:not(:disabled) { background: rgba(58, 114, 206, .28); }
.menu-ctx button:disabled { opacity: .45; cursor: default; }
.menu-ctx button.perigo { color: #F0B7AA; }
.menu-ctx button.perigo:hover:not(:disabled) { background: rgba(224, 108, 90, .16); }
.menu-ctx .sep {
  height: 1px; margin: 5px 6px; background: var(--borda); pointer-events: none;
}
.menu-ctx .rotulo-grupo {
  padding: 6px 10px 2px; font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--texto-fraco);
}
/* Menu de pessoa (PC-001): faixa, marcas e submenu. Rola quando não cabe. */
.menu-ctx { overflow-y: auto; overscroll-behavior: contain; min-width: 240px; }
.menu-ctx button { display: flex; align-items: center; gap: 8px; }
.menu-ctx .menu-rotulo { flex: 1 1 auto; min-width: 0; }
.menu-ctx .menu-seta { color: var(--texto-fraco); font-size: 15px; line-height: 1; }
.menu-ctx .menu-sub[aria-expanded="true"] { background: rgba(58, 114, 206, .2); }
.menu-ctx .menu-marca::after {
  content: ''; flex: none; width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--borda-forte); box-sizing: border-box;
}
.menu-ctx .menu-marca[aria-checked="true"]::after {
  background: var(--azul-claro, #3A72CE) center / 12px 12px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EFE9DA' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  border-color: transparent;
}
.menu-faixa { padding: 6px 10px 8px; }
.menu-faixa-topo { display: flex; justify-content: space-between; font-size: 13px; color: var(--creme); }
.menu-faixa-valor { color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
.menu-faixa input[type="range"] { width: 100%; margin: 6px 0 0; accent-color: var(--azul-claro, #3A72CE); }
.menu-faixa input:disabled { opacity: .45; }

/* Perfil compacto (PC-002) */
.perfil-pessoa {
  position: fixed; z-index: 91; width: min(300px, calc(100vw - 16px));
  padding: 14px; box-sizing: border-box;
  background: var(--painel); border: 1px solid var(--borda-forte);
  border-radius: 12px; box-shadow: var(--sombra); color: var(--creme);
}
.perfil-pessoa[hidden] { display: none !important; }
.perfil-topo { display: flex; gap: 12px; align-items: center; }
.perfil-nomes { min-width: 0; }
.perfil-nomes h2 { margin: 0; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.perfil-sub, .perfil-status { margin: 2px 0 0; font-size: 12.5px; color: var(--texto-fraco); }
.perfil-atividade { margin: 10px 0 0; font-size: 13px; }
.perfil-linhas { margin: 10px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 12.5px; }
.perfil-linhas dt { color: var(--texto-fraco); }
.perfil-linhas dd { margin: 0; overflow-wrap: anywhere; }
.perfil-acoes { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.perfil-acoes button { flex: 1 1 auto; }

/* Mensagem de quem eu bloqueei (PC-007): recolhida até pedir para ver. */
.msg.de-bloqueado:not(.mostrar-bloqueada) > :not(.msg-bloqueada) { display: none; }
.msg-bloqueada { display: block; font-size: 12.5px; color: var(--texto-fraco); padding: 2px 6px; }

.menu-ctx-volume {
  display: flex; flex-direction: column; gap: 6px;
  padding: 2px 14px 8px;
}
.menu-ctx-volume span {
  font-size: 12px; color: var(--texto-fraco);
}
.menu-ctx-volume input[type="range"] { width: 100%; margin: 2px 0; cursor: pointer; }
.lista-sala-visiveis {
  list-style: none; margin: 8px 0 0; padding: 0; max-height: 180px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.lista-sala-visiveis label {
  display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer;
}

/* Silenciado por mim: estado visivel e reversivel num clique. */
.etiqueta.silenciado { color: #F3CBC1; background: rgba(224, 108, 90, .18); }
.pessoa.calado { border-color: transparent; }
.pessoa.calado .avatar { filter: saturate(.35) brightness(.75); }
.vol-mudo { display: grid; place-items: center; width: 22px; height: 22px; flex: none; padding: 0;
  border: 0; border-radius: 6px; background: transparent; color: var(--texto-fraco); cursor: pointer; }
.vol-mudo:hover { background: var(--painel-3); color: var(--creme); }
.vol-mudo svg { width: 15px; height: 15px; }
.vol-mudo .ic-som-off { display: none; }
.vol-mudo[aria-pressed="true"] { color: #E06C5A; }
.vol-mudo[aria-pressed="true"] .ic-som { display: none; }
.vol-mudo[aria-pressed="true"] .ic-som-off { display: block; }
.grade-pessoas.compacta .pessoa { padding: 3px 8px; min-width: min(100%, 168px); }
.grade-pessoas.compacta .volume { display: none; }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px; background: var(--painel-3); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--azul); border: 0; cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--azul); border: 0; cursor: pointer; }

.palco-vazio { display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; color: var(--texto-fraco); padding: 30px 10px; width: 100%; }
.palco-vazio img { width: 108px; height: auto; opacity: .92; }
.palco-vazio.convite { width: auto; max-width: 280px; align-self: center; padding: 18px 12px; font-size: 13.5px; }
.palco-vazio.convite img { width: 84px; }
.palco-vazio p { margin: 0; }
.chat-vazio img { width: 84px; height: auto; margin: 0 auto 10px; display: block; opacity: .85; }

/* ----- Barra de controles: aqui o vidro fosco cabe ----- */
.controle { display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius: 12px; }
/* Na lateral o rotulo alinha a esquerda e o estado encosta na direita. Vale
   para os botoes que AINDA tem rotulo (compartilhar/parar tela). */
.controles-lateral .controle { justify-content: center; }
.controles-lateral .controle .controle-texto { display: none; }

/* ⚠️ Microfone e silenciar sao SO ICONE, como no Discord: o icone centraliza e
   o botao nao estica com o rotulo de ninguem. Quem conta o estado e a COR
   (verde aberto, vermelho fechado, azul silenciado) mais o icone que troca por
   aria-pressed — e o `title`, escrito pelo app.js. Um <span class="sr"> guarda
   o nome para leitor de tela, que nao ve cor. */
#btn-mic, #btn-surdo { justify-content: center; padding: 8px; min-height: 42px; }

/* No fone o icone tambem muda, nao so a cor. */
.controle .ic-fone-off { display: none; }
.controle[aria-pressed="true"] .ic-fone { display: none; }
.controle[aria-pressed="true"] .ic-fone-off { display: inline; }
#btn-tela .ic-tela-trocar { display: none; }
#btn-tela[aria-pressed="true"] .ic-tela { display: none; }
#btn-tela[aria-pressed="true"] .ic-tela-trocar { display: inline; }
.icone-so svg { width: 17px; height: 17px; display: block; }
.controle-icone { display: inline-grid; place-items: center; width: 26px; height: 26px; font-size: 20px; line-height: 1; }
.controle-icone svg { width: 24px; height: 24px; }
.controle-texto { font-size: 14px; }

/* Microfone: o estado LIGADO é o que fica evidente, porque é o de risco.
   O padrão oposto (destacar só o mudo) é a origem clássica do "achei que
   estava mutado". Sem a palavra no botão, a redundância que sobra é cor +
   ícone + title; o ícone é o que salva quem não distingue verde de vermelho,
   por isso ele TEM de trocar junto com a cor, nunca só a cor. */
.controle.mic .ic-mic-off { display: none; }
.controle.mic[aria-pressed="true"] { background: linear-gradient(180deg, rgba(70, 201, 138, .22), rgba(70, 201, 138, .1)); border-color: var(--verde); color: #E4F7EE; box-shadow: 0 0 0 1px rgba(70, 201, 138, .2), 0 6px 18px rgba(70, 201, 138, .14); }
.controle.mic[aria-pressed="false"] { background: rgba(224, 108, 90, .1); border-color: rgba(224, 108, 90, .5); color: #F3CBC1; }
.controle.mic[aria-pressed="false"] .ic-mic { display: none; }
.controle.mic[aria-pressed="false"] .ic-mic-off { display: inline; }

.controle[aria-pressed="true"]:not(.mic) { background: rgba(58, 114, 206, .16); border-color: var(--azul); color: #DCE7F6; }
.controle.ptt-ativo { border-color: var(--azul-suave); box-shadow: 0 0 0 2px rgba(158, 190, 236, .25); }

/* ----- Chat ----- */
.chat-area { display: flex; flex-direction: column; min-height: 0; background: rgba(6, 16, 31, .84); border-left: 1px solid var(--borda); }
.chat-topo { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--borda); }
.chat-topo .titulo-secao { flex: 1; }
.chat-mensagens { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.chat-vazio { margin: auto; text-align: center; color: var(--texto-fraco); font-size: 13.5px; }
.msg { display: flex; align-items: flex-start; gap: 16px; position: relative; padding: 2px 8px; }
.msg-corpo { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.msg-cabeca { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.msg-autor { font-size: 15px; font-weight: 600; color: var(--azul-suave); }
.msg.propria .msg-autor { color: var(--verde); }
.msg-hora { font-size: 11px; color: var(--texto-fraco); }
.msg-texto { font-size: 15px; line-height: 1.375; color: var(--texto); overflow-wrap: anywhere; white-space: pre-wrap; margin: 2px 0 0; }
.msg-texto a { color: var(--azul-suave); }
.msg.mencao {
  background: rgba(36, 85, 164, .22);
  border-radius: 8px;
  padding: 4px 8px;
  margin-left: -8px;
}
.msg:hover { background: rgba(6, 16, 31, .45); }
.msg.seguida { margin-top: 0; padding-top: 0; padding-bottom: 2px; }
.msg.seguida .avatar { visibility: hidden; height: 0; }
.msg.seguida .msg-cabeca { display: none; }
.msg.seguida .msg-texto { padding-left: 0; }
.chat-sistema { text-align: center; font-size: 12px; color: var(--texto-fraco); font-style: italic; }

.chat-form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--borda); }
.chat-form input { flex: 1; }
.chat-form button { padding: 0 15px; }
.anexo-pendente {
  display: flex; align-items: center; gap: 10px; flex: none;
  margin: 0 12px 8px; padding: 8px 10px;
  background: var(--painel-2); border: 1px solid var(--borda); border-radius: 8px;
}
.anexo-pendente img {
  width: 72px; height: 54px; object-fit: cover; border-radius: 6px;
  background: #050F1F; flex: none;
}
.anexo-pendente-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.anexo-pendente-info strong {
  font-size: 13px; color: var(--creme); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.anexo-pendente-info span { font-size: 12px; color: var(--texto-fraco); }
.chat-digitando {
  margin: 0; padding: 0 16px 6px; font-size: 12px; color: var(--texto-fraco); font-style: italic;
}
.chat-resposta {
  display: flex; align-items: center; gap: 8px; margin: 0 12px;
  padding: 6px 10px; background: var(--painel-2); border-radius: 8px;
  border-left: 3px solid var(--azul);
}
.chat-resposta-texto {
  flex: 1; margin: 0; font-size: 12px; color: var(--texto-medio);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg-reply {
  margin: 0 0 4px; padding: 4px 8px; font-size: 12px; color: var(--texto-fraco);
  border-left: 2px solid var(--azul); background: var(--painel-2); border-radius: 0 6px 6px 0;
}
.msg-acoes {
  position: absolute; top: -14px; right: 10px; z-index: 2;
  display: none; align-items: center; gap: 2px;
  padding: 2px; background: var(--painel-2); border: 1px solid var(--borda-forte);
  border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}
.msg:hover .msg-acoes, .msg:focus-within .msg-acoes { display: flex; }
button.msg-responder {
  flex: none; padding: 4px 10px; font-size: 12px; background: transparent; border: 0; color: var(--texto-fraco);
}
button.msg-responder:hover:not(:disabled) { color: var(--creme); background: var(--painel-3); border-color: transparent; }
.chat-mencoes {
  position: relative; margin: 0 12px; max-height: 160px; overflow-y: auto;
  background: var(--painel); border: 1px solid var(--borda-forte); border-radius: 8px;
}
.chat-mencao-item {
  display: block; width: 100%; text-align: left; padding: 8px 12px;
  background: transparent; border: 0; border-radius: 0; color: var(--texto);
}
.chat-mencao-item:hover, .chat-mencao-item.ativa { background: var(--painel-2); border-color: transparent; }
.msg-texto .mencao-nome { color: var(--azul-suave); font-weight: 600; }

.sobreposicao-sala {
  position: absolute; z-index: 18; left: 12px; top: 58px;
  width: auto; max-width: min(220px, 46vw);
  background: transparent; border: 0; box-shadow: none; padding: 0;
  pointer-events: none;
}
.app.modo-so-tela .sobreposicao-sala { top: 58px; left: 12px; }
.hud-lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.hud-item {
  display: flex; align-items: center; gap: 8px;
  width: max-content; max-width: 220px;
  padding: 4px 10px 4px 4px; border-radius: 20px;
  background: rgba(10, 12, 16, .42); color: rgba(239, 233, 218, .72);
  font-size: 13px; font-weight: 600; opacity: .62;
  transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.hud-item.falando {
  opacity: 1; color: #fff; background: rgba(10, 12, 16, .78);
}
.hud-item.falando .avatar {
  box-shadow: 0 0 0 2px #23a559, 0 0 10px rgba(35, 165, 89, .55);
}
.hud-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-item .btn-live-pessoa {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  height: 16px; padding: 0 5px; border: 0; border-radius: 3px;
  background: #ed4245; color: #fff; font: 800 10px/1 sans-serif;
  pointer-events: none;
}
.excluir-comunidade {
  margin-top: 36px; max-width: 440px; padding: 16px 18px;
  border: 1px solid rgba(224, 108, 90, .4); border-radius: 12px;
  background: rgba(224, 108, 90, .07);
}
.excluir-comunidade .excluir-titulo {
  margin: 0 0 4px; font-size: 14px; font-weight: 700; color: #F0B7AA;
}
.excluir-comunidade .dica { margin: 0; }
.excluir-comunidade .erro { margin: 8px 0 0; }
.btn-excluir {
  margin-top: 12px; padding: 8px 14px; border: 0; border-radius: 8px;
  background: #E06C5A; color: #1C1210; font-weight: 700;
}
.btn-excluir:hover:not(:disabled) {
  background: #c95b4b; border-color: transparent; color: #1C1210;
}
.confirma-excluir { margin-top: 12px; }
.confirma-excluir p { margin: 0 0 10px; color: var(--creme); font-size: 14px; }
.confirma-excluir .btn-excluir { margin-top: 0; }
#dlg-sair-excluir .dialogo-corpo p { margin: 0 0 12px; color: var(--creme); }
#dlg-sair-excluir .btn-excluir { margin-top: 0; }
.confirma-excluir .fantasma { color: var(--creme); }
.admin-limite { width: 88px; padding: 6px 8px; font-size: 12px; }
.admin-apelido { width: min(140px, 40vw); padding: 6px 8px; font-size: 12px; }
.lista-admin .acoes { display: flex; flex-wrap: wrap; gap: 6px; }

/* ----- Diálogo de configurações ----- */
.dialogo { width: min(520px, calc(100vw - 32px)); max-height: min(88vh, 820px); padding: 0; border: 1px solid var(--borda-forte); border-radius: 18px; background: var(--vidro); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); color: var(--texto); box-shadow: var(--sombra); overflow: hidden; }
.dialogo[open] { display: flex; flex-direction: column; }
.dialogo::backdrop { background: rgba(3, 13, 29, .72); backdrop-filter: blur(3px); }
/* Cabeçalho e Pronto ficam parados: só o miolo das abas rola. Sem isso o
   único jeito de sair era descer até o botão do fim. */
.dialogo form {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  padding: 0; overflow: hidden; max-height: min(88vh, 820px);
}
.dialogo-topo {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 12px 8px 24px; flex: none;
}
.dialogo-topo h2 { flex: 1; margin: 0; }
.dialogo-fechar { font-size: 22px; line-height: 1; width: 36px; height: 36px; padding: 0; flex: none; }
.dialogo h2 { margin: 0 0 4px; font-size: 19px; }
.dialogo h3 { margin: 0 0 2px; font-size: 13px; color: var(--azul-suave); letter-spacing: .02em; }
.dialogo .sub { margin: 4px 0 0; color: var(--texto-fraco); font-size: 14px; }
.config-abas {
  display: flex; gap: 4px; margin: 4px 24px 8px; padding: 4px; flex: none;
  background: var(--painel); border: 1px solid var(--borda); border-radius: 12px;
}
.config-paineis { flex: 1; min-height: 0; overflow-y: auto; padding: 0 24px 8px; }
.config-aba {
  flex: 1; font: inherit; font-size: 13px; font-weight: 600; padding: 7px 10px;
  border: 0; border-radius: 9px; background: transparent; color: var(--texto-medio); cursor: pointer;
}
.config-aba:hover { color: var(--creme); background: var(--painel-2); }
.config-aba[aria-selected="true"] {
  color: #DCE7F6; background: rgba(58, 114, 206, .16);
}
.config-painel.grupo-config { margin: 8px 0 0; padding-top: 4px; border-top: 0; }
.config-painel h3 { margin-top: 18px; }
.config-painel h3:first-child { margin-top: 0; }
.grupo-config { margin: 20px 0; padding-top: 16px; border-top: 1px solid var(--borda); }
.grupo-config:first-of-type { border-top: 0; padding-top: 8px; }
.linha-config { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; font-size: 14px; color: var(--texto); cursor: pointer; }
.linha-config input { margin-top: 3px; accent-color: var(--azul); width: 16px; height: 16px; flex: none; }
.linha-config small { color: var(--texto-fraco); }
.faixa-config { display: flex; align-items: center; gap: 12px; }
.faixa-config input[type="range"] { flex: 1; }
.faixa-config span { flex: none; min-width: 3.2em; text-align: right; font-size: 13px; color: var(--texto-medio); font-variant-numeric: tabular-nums; }

/* Medidor de voz + marca de abertura, no mesmo eixo. A barra cresce com a
   sua voz; o ponteiro do range é o limite. Passou da marca, está saindo. */
.sensibilidade { position: relative; height: 22px; display: flex; align-items: center; }
.sensibilidade-trilha { position: absolute; inset: 9px 0; height: 4px; border-radius: 999px; background: var(--painel-3); overflow: hidden; pointer-events: none; }
.sensibilidade-nivel { height: 100%; width: 0; background: var(--azul-claro); border-radius: 999px; }
.sensibilidade-nivel.aberto { background: var(--verde); }
.sensibilidade input[type="range"] { position: relative; z-index: 1; background: transparent; }
.sensibilidade input[type="range"]:disabled { opacity: .55; }
.mic-porta-estado { margin: 6px 0 0; font-size: 12px; color: var(--texto-fraco); min-height: 1.2em; }
.caixa-sensibilidade[data-ptt="1"] { opacity: .45; }

.lista-atalhos { list-style: none; margin: 10px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.linha-atalho { display: grid; grid-template-columns: 1fr minmax(7.5em, auto) auto; gap: 8px; align-items: center; }
.atalho-nome { font-size: 14px; color: var(--texto); line-height: 1.25; }
.atalho-nome small { display: block; color: var(--texto-fraco); font-size: 12px; font-weight: 400; }
.atalho-tecla { font-variant-numeric: tabular-nums; min-width: 7.5em; padding: 7px 10px; font-size: 12.5px; }
.atalho-tecla[data-capturando="1"] { border-color: var(--azul); color: var(--azul-suave); box-shadow: 0 0 0 2px rgba(158, 190, 236, .28); }
.atalho-limpar { padding: 7px 8px; font-size: 12px; }
#btn-atalhos-padrao { margin: 4px 0 0; padding: 6px 10px; font-size: 13px; }
kbd { display: inline-block; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--borda-forte); background: var(--painel-2); font-family: inherit; font-size: 11.5px; color: var(--texto); }
@media (max-width: 520px) {
  .linha-atalho { grid-template-columns: 1fr auto; }
  .atalho-nome { grid-column: 1 / -1; }
}
.dialogo .primario { margin: 8px 24px 20px; flex: none; }

/* ----- Rolagem ----- */
* { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #36455F; background-clip: content-box; }

/* ----- Responsivo ----- */
.so-mobile { display: none; }
@media (max-width: 1080px) {
  :root { --chat-w: 280px; }
}
@media (max-width: 900px) {
  .so-mobile { display: inline-grid; }
  .so-desktop { display: none; }
  .app, .app.sem-chat, .app.modo-casa {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas: "palco" "usuario";
  }
  /* Mesma celula do palco: se ficarem com grid-area trilho/chat, a grade
     inventa coluna e o palco vira uma faixa. */
  .trilho, .lateral, .chat-area {
    grid-area: palco;
  }
  .trilho {
    position: fixed; z-index: 31; inset: 0 auto 0 0; width: var(--trilho-w);
    transform: translateX(-120%); transition: transform var(--transicao);
  }
  .app.trilho-recolhido { --trilho-w: var(--trilho-aberto); }
  .app.trilho-recolhido .trilho {
    width: var(--trilho-w);
    clip-path: none;
    box-shadow: none;
    z-index: 31;
  }
  .trilho-recolher { display: none; }
  .app.lateral-aberta .trilho { transform: none; }
  .lateral {
    position: fixed; z-index: 30; inset: 0 auto 0 0; width: min(84vw, var(--lateral-w));
    transform: translateX(-102%); transition: transform var(--transicao); box-shadow: var(--sombra);
    background: #050F1F; left: 0;
  }
  .app.lateral-aberta .lateral { transform: none; left: var(--trilho-w); }
  .chat-area { position: fixed; z-index: 30; inset: 0 0 0 auto; width: min(88vw, 380px); transform: translateX(102%); transition: transform var(--transicao); background: #050F1F; box-shadow: var(--sombra); }
  .app:not(.sem-chat) .chat-area { display: flex; transform: none; }
  .app.sem-chat .chat-area { display: flex; transform: translateX(102%); }

  /* Uma barra so: controles e identidade lado a lado, sempre alcancaveis. O
     microfone nao pode ficar atras da gaveta. */
  .painel-usuario {
    flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px;
    border-right: 0; border-top: 1px solid var(--borda);
    background: var(--vidro); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  }
  .controles-lateral { flex: 0 1 auto; min-width: 0; max-width: 58%; gap: 6px; padding: 0; border-top: 0; }
  .controles-lateral .controle { justify-content: center; padding: 10px 4px; min-height: 44px; width: 44px; }
  .controle-texto { display: none; }
  .eu { border-top: 0; background: transparent; padding: 0; gap: 1px; min-width: 0; flex: 1 1 auto; }
  .eu-info { flex: 1 1 auto; min-width: 0; }
  .eu-nome { font-size: 14px; }
  .eu-estado { font-size: 12px; }
  .eu-status-linha { padding-left: 40px; }
  .eu-acoes .icone-so { padding: 4px; }
  .topo {
    display: flex; grid-template-columns: none;
    padding: 8px 10px;
  }
  .topo-marca { flex: 1 1 auto; min-width: 8rem; overflow: hidden; }
  .topo-espaco { width: 100%; min-width: 8rem; padding-right: 4px; }
  .topo-espaco-rotulo { display: none; }
  .topo-centro {
    flex: none; padding: 0; background: transparent; border: 0; gap: 2px;
  }
  .topo-centro .fantasma, .topo-centro .aba { padding: 6px 8px; }
  .palco { padding: 12px; }
}
@media (max-width: 420px) {
  .grade-pessoas { width: 100%; }
}

.app.no-voz .controles-lateral { opacity: .42; pointer-events: none; }
.app.no-voz #btn-sair { display: none; }
.app.no-voz .eu-rtt { display: none !important; }
.app.no-voz .palco-barra,
.app.no-voz #btn-palco-mapa,
.app.no-voz #btn-palco-telas,
.app.no-voz #mapa,
.app.no-voz #grade-telas,
.app.no-voz #grade-pessoas,
.app.no-voz #convite-live { display: none !important; }
.lobby-voz {
  display: none; margin: auto; max-width: 28rem; text-align: center;
  color: var(--texto-medio); font-size: 15px; line-height: 1.45;
  padding: 28px 20px;
}
.lobby-voz p { margin: 0 0 16px; }
.app.no-voz .lobby-voz { display: block; }
.app.no-voz .palco { display: flex; align-items: center; justify-content: center; }

@media (min-width: 901px) {
  .chat-area { position: relative; }
}
.painel-emoji {
  position: absolute; left: 10px; right: 10px; bottom: 58px;
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 8px; background: var(--painel-2); border: 1px solid var(--borda);
  border-radius: 12px; max-height: 160px; overflow-y: auto; z-index: 4;
}
.painel-emoji button {
  width: 32px; height: 32px; padding: 0; border: 0; background: transparent;
  font-size: 18px; border-radius: 8px; cursor: pointer;
}
.painel-emoji button:hover { background: var(--painel); }

.msg-reacoes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.msg.seguida .msg-reacoes { padding-left: 0; }
.reacao {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 999px; border: 1px solid var(--borda);
  background: var(--painel-2); color: var(--texto-medio); font-size: 12px; cursor: pointer;
}
.reacao.eu { border-color: var(--azul); background: rgba(36, 85, 164, .22); color: var(--creme); }
.msg-reagir {
  margin-left: auto; border: 0; background: transparent; color: var(--texto-fraco);
  cursor: pointer; font-size: 13px; padding: 0 4px;
}
.msg-reagir:hover { color: var(--creme); }
.msg-mini-reacoes {
  display: flex; gap: 2px; flex-wrap: wrap; margin-top: 4px;
}
.msg-mini-reacoes button {
  border: 0; background: var(--painel-2); border-radius: 8px;
  font-size: 16px; padding: 2px 6px; cursor: pointer;
}

.dialogo-amigos { width: min(720px, 96vw); max-width: 720px; }
.amigos-corpo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-height: 320px; }
.amigos-lista-lado { min-width: 0; }
.amigos-dm {
  min-width: 0; display: flex; flex-direction: column;
  border-left: 1px solid var(--borda); padding-left: 16px;
}
.lista-amigos { list-style: none; margin: 0 0 12px; padding: 0; }
.lista-amigos li { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.amigo-nome {
  flex: 1; text-align: left; border: 0; background: none;
  color: var(--creme); cursor: pointer; font: inherit;
}
.amigo-status {
  width: 8px; height: 8px; border-radius: 50%; background: #6b7280; flex: none;
}
.amigo-status.online { background: var(--verde); }
.amigo-status.ausente { background: var(--ambar); }
.amigo-status.ocupado { background: var(--vermelho); }
#sel-meu-status { width: 100%; margin-bottom: 12px; }
#dm-mensagens { flex: 1; min-height: 180px; max-height: 280px; }
.tela-remota.camera {
  max-width: min(100%, 560px);
  justify-self: center;
}
.tela-remota.camera video {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}
.tela-remota.camera .tela-titulo { font-style: normal; }
#btn-amigos { position: relative; }
#amigos-nao-lidas { position: absolute; top: -4px; right: -4px; }

@media (max-width: 720px) {
  .amigos-corpo { grid-template-columns: 1fr; }
  .amigos-dm { border-left: 0; padding-left: 0; border-top: 1px solid var(--borda); padding-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ============ Casca nova: trilho, início, recados ============ */
.trilho {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 12px 0 14px;
  background: #01060e; border-right: 1px solid rgba(58, 114, 206, .16);
  overflow: visible;
}
@media (min-width: 901px) {
  .trilho { position: relative; }
}
.trilho-lista {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  align-items: center; gap: 10px; flex: 0 1 auto; min-height: 0; overflow-y: auto; overflow-x: visible; width: 100%;
}
.trilho-sep { width: 28px; height: 2px; border-radius: 2px; background: var(--borda-forte); flex: none; }
.trilho-item {
  position: relative; width: 48px; height: 48px; padding: 0; border: 0;
  border-radius: 16px; background: var(--painel-2); color: var(--creme);
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
  flex: none;
}
.trilho-item::before {
  content: ''; position: absolute; left: -12px; top: 50%;
  width: 4px; height: 8px; border-radius: 0 4px 4px 0;
  background: var(--creme); transform: translateY(-50%); opacity: 0;
  pointer-events: none;
}
.trilho-item:hover { border-radius: 14px; filter: brightness(1.1); }
.trilho-item:hover::before { opacity: .55; height: 12px; }
.trilho-item[aria-pressed="true"] { border-radius: 14px; }
.trilho-item[aria-pressed="true"]::before { opacity: 1; height: 22px; }
.trilho-item svg { width: 22px; height: 22px; }
.trilho-item.casa {
  background: linear-gradient(180deg, var(--azul-claro) 0%, var(--azul) 100%);
  box-shadow: 0 8px 18px rgba(36, 85, 164, .35);
}
.trilho-item.mais {
  background: rgba(70, 201, 138, .08); border: 1px dashed rgba(70, 201, 138, .45);
  color: var(--verde); font-size: 22px; border-radius: 16px;
}
.trilho-item.mais:hover { background: rgba(70, 201, 138, .18); }
.trilho-item.com { letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(239, 233, 218, .08); cursor: grab; }
.trilho-lista > li.arrastando { position: relative; z-index: 5; }
.trilho-lista > li.arrastando .trilho-item { cursor: grabbing; opacity: .72; border-radius: 14px; }
.trilho-pilula {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; background: #ed4245; color: #fff;
  font-size: 10px; font-weight: 800; line-height: 16px;
  pointer-events: none;
}
.lateral { background: rgba(5, 12, 24, .92); }
.lateral > .marca { display: none; }
@media (max-width: 900px) {
  .lateral > .marca { display: flex; }
}

.lista-categorias { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; }
.categoria { margin: 0 0 6px; }
.categoria-cabeca {
  width: 100%; display: flex; align-items: center; gap: 6px;
  padding: 10px 8px 4px; background: transparent; border: 0;
  color: var(--texto-fraco); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; text-align: left;
}
.categoria-seta { font-size: 10px; opacity: .8; }
.categoria.fechada .categoria-seta { transform: rotate(-90deg); }
.categoria-cabeca:hover { color: var(--creme); }
.categoria.fechada .lista-canais { display: none; }

.painel-conversas { padding: 0; min-height: 0; }
.conversas-topo {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 12px 12px;
  border-bottom: 1px solid var(--borda);
}
.casa-titulo {
  padding: 2px 4px 0 !important;
  font-size: 16px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--creme) !important;
  font-weight: 700 !important;
  line-height: 1.2;
}
.btn-novo-grupo {
  width: 100%;
  flex: none;
  margin: 0;
  padding: 8px 12px;
  border: 1px dashed rgba(58, 114, 206, .42);
  border-radius: var(--raio-p);
  background: rgba(36, 85, 164, .12);
  color: var(--creme);
  font-weight: 600;
  font-size: 13px;
}
.btn-novo-grupo:hover:not(:disabled) {
  background: rgba(36, 85, 164, .22);
  border-color: rgba(58, 114, 206, .7);
  color: var(--creme);
}
.lista-conversas {
  list-style: none;
  margin: 0;
  padding: 8px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.painel-conversas > .dica { padding: 4px 14px 16px; margin: 0; }
.conversa {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 0; border-radius: 10px; background: transparent;
  color: var(--texto-medio); text-align: left;
}
.conversa:hover { background: rgba(58, 114, 206, .14); color: var(--creme); }
.conversa.ativa { background: rgba(58, 114, 206, .22); color: var(--creme); }
.conversa .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.conversa .nome { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversa .sub { font-size: 11.5px; color: var(--texto-fraco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversa .nao-lida { flex: none; }
.conversa:has(.nao-lida) .nome { font-weight: 800; color: var(--creme); }

.app.modo-casa .painel-canais,
.app.modo-casa #lobby-voz,
.app.modo-casa #mapa,
.app.modo-casa #grade-telas,
.app.modo-casa #grade-pessoas,
.app.modo-casa #convite-live,
.app.modo-casa #btn-palco-mapa,
.app.modo-casa #btn-palco-telas { display: none !important; }
.app.modo-casa #painel-conversas {
  display: flex !important;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
.app.modo-casa #painel-casa { display: flex !important; flex-direction: column; min-height: 0; overflow: hidden; }
.app.modo-casa .palco { display: flex; align-items: stretch; padding: 0; overflow: hidden; background: linear-gradient(180deg, rgba(36,85,164,.08), transparent 28%); }
.app.modo-casa .topo-centro { display: none; }

.painel-casa {
  display: none; flex: 1; min-height: 0; min-width: 0;
  flex-direction: column; background: rgba(6, 16, 31, .28);
}
.casa-topo { padding: 14px 22px 0; border-bottom: 1px solid var(--borda); background: rgba(3, 13, 29, .35); }
.casa-abas { display: flex; gap: 4px; flex-wrap: wrap; padding-bottom: 12px; }
.casa-aba {
  padding: 8px 14px; border: 0; border-radius: 999px; background: transparent;
  color: var(--texto-medio); font-weight: 600; font-size: 13.5px;
}
.casa-aba:hover { background: var(--painel-2); color: var(--creme); }
.casa-aba[aria-pressed="true"] { background: var(--painel-3); color: var(--creme); box-shadow: inset 0 0 0 1px rgba(58,114,206,.35); }
.casa-aba.add { color: var(--verde); }
.casa-corpo { flex: 1; min-height: 0; overflow: auto; padding: 18px 22px 28px; }
.form-amigo-casa { max-width: 560px; margin-bottom: 18px; padding: 16px; border-radius: 14px; background: rgba(36,85,164,.1); border: 1px solid rgba(58,114,206,.22); }
.lista-casa { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.amigo-linha {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 12px; background: transparent; border: 1px solid transparent;
}
.amigo-linha:hover { background: rgba(36, 36, 36, .55); border-color: var(--borda); }
.amigo-linha .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.amigo-linha .nome { font-weight: 700; font-size: 14.5px; }
.amigo-linha .sub { font-size: 12px; color: var(--texto-fraco); }
.amigo-linha .acoes { display: flex; gap: 6px; flex: none; }
.amigo-linha .amigo-status {
  position: absolute; left: 36px; bottom: 12px; width: 12px; height: 12px;
  border: 2px solid #06101f; box-shadow: none;
}
.amigo-status {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: #6b7280; box-shadow: 0 0 0 3px rgba(107,114,128,.2);
}
.amigo-status.online { background: var(--verde); box-shadow: 0 0 0 3px rgba(70,201,138,.25); }
.amigo-status.ausente { background: var(--ambar); }
.amigo-status.ocupado { background: var(--vermelho); }
.casa-vazio {
  max-width: min(22rem, 100%);
  margin: 64px auto;
  padding: 0 24px;
  text-align: center;
  font-size: 15px;
  color: var(--texto-medio);
  white-space: normal;
}

.casa-dm {
  display: flex; flex-direction: column; min-height: 0; flex: 1;
  overflow: hidden; background: #06101F;
}
.casa-dm-topo {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--borda); background: #06101F; flex: none;
}
.casa-dm-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.casa-dm-info strong { font-size: 16px; font-weight: 700; color: var(--creme); }
.casa-dm-status { font-size: 12px; color: var(--texto-fraco); }
.casa-dm-msgs {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 16px 0 8px; gap: 0;
}
.casa-dm-msgs .msg { padding: 4px 16px; margin: 0; gap: 16px; }
.casa-dm-msgs .msg:first-child { margin-top: 8px; }
.casa-dm-inicio {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 16px 24px; margin: 0 0 8px; border-bottom: 1px solid var(--borda);
}
.casa-dm-inicio .avatar { width: 72px; height: 72px; font-size: 28px; }
.casa-dm-inicio h2 { margin: 8px 0 0; font-size: 28px; font-weight: 700; color: var(--creme); }
.casa-dm-inicio p { margin: 0; font-size: 14px; color: var(--texto-fraco); }
.casa-dm > .chat-digitando,
.casa-dm > .chat-resposta,
.casa-dm > .anexo-pendente { flex: none; }
.casa-dm > .anexo-pendente { margin: 0 16px 8px; }
.casa-dm .chat-form {
  flex: none; margin: 0 16px 16px; padding: 0 4px 0 8px;
  border: 1px solid var(--borda); border-radius: 8px;
  background: #0B1628; align-items: center;
}
.casa-dm .chat-form input {
  border: 0; background: transparent; box-shadow: none; padding: 12px 10px;
}
.casa-dm .chat-form input:focus { box-shadow: none; border-color: transparent; }
.casa-dm .chat-form button { border: 0; background: transparent; padding: 8px 10px; }
.casa-dm .chat-form button.primario {
  background: transparent; box-shadow: none; color: var(--azul-suave);
}
.casa-dm .chat-form button.primario:hover:not(:disabled) { color: var(--creme); }
.painel-casa.dm-aberto {
  display: flex !important;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
.painel-casa.dm-aberto .casa-topo,
.painel-casa.dm-aberto .casa-corpo {
  display: none !important;
}
.painel-casa.dm-aberto .casa-dm {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border: 0;
}

.chat-topo { display: flex; align-items: center; gap: 8px; }
#chat-busca {
  flex: 1; min-width: 0; max-width: 180px; padding: 6px 10px; font-size: 12.5px;
  margin: 0 0 0 auto; background: #050F1F;
}
.chat-fixadas, .chat-busca-resultados {
  max-height: 140px; overflow: auto; padding: 8px 12px;
  border-bottom: 1px solid var(--borda); background: rgba(36, 85, 164, .12);
}
.chat-fixadas button, .chat-busca-resultados button {
  display: block; width: 100%; text-align: left; background: transparent; border: 0;
  padding: 6px 4px; color: var(--texto-medio); font-size: 12.5px;
}
.chat-fixadas button:hover, .chat-busca-resultados button:hover { color: var(--creme); }
.msg-anexo {
  margin: 6px 0 0; max-width: min(400px, 100%); border-radius: 10px;
  display: block; cursor: zoom-in;
}
.lupa-anexo {
  width: 100vw; height: var(--vh); max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: rgba(3, 13, 29, .88);
}
.lupa-anexo[open] {
  display: flex; align-items: center; justify-content: center;
}
.lupa-anexo::backdrop { background: rgba(3, 13, 29, .88); }
.lupa-anexo img {
  display: block; max-width: none; max-height: none;
  border-radius: 8px; cursor: zoom-in; flex: none;
  transform-origin: center center;
}
.lupa-anexo.ampliada img {
  cursor: zoom-out;
  transform: scale(2.5);
}
.msg-fixar { font-size: 12px; padding: 2px 8px; }
.msg-reply { margin: 0 0 4px; padding: 4px 8px; border-left: 2px solid var(--azul); color: var(--texto-fraco); font-size: 12.5px; }

.toasts {
  position: fixed; z-index: 80; top: 18px; right: 18px;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
  max-width: min(360px, calc(100vw - 24px));
}
.toast {
  pointer-events: auto; padding: 12px 14px 12px 16px; border-radius: 12px;
  background: var(--painel-2); border: 1px solid var(--borda-forte);
  box-shadow: var(--sombra); color: var(--creme); font-size: 13.5px;
  border-left: 3px solid var(--azul-claro);
}
.toast b { display: block; margin-bottom: 2px; }
.toast button { margin-top: 8px; }

.app.modo-chamada #mapa,
.app.modo-chamada #lobby-voz,
.app.modo-chamada #painel-casa,
.app.modo-chamada #painel-conversas,
.app.modo-chamada .painel-canais .comunidade-sair { display: none !important; }
.app.modo-chamada #grade-pessoas { display: flex; }
.app.modo-chamada #btn-palco-mapa { display: none !important; }
.app.modo-chamada .palco { background: radial-gradient(ellipse at top, rgba(36,85,164,.18), transparent 55%); }

.btn-trilho-mais { margin-top: 4px; }
.trilho > .mais { margin-top: 4px; }
.trilho-recolher {
  margin-top: auto;
  background: transparent;
  color: var(--texto-fraco);
  width: 36px; height: 36px;
}
.trilho-recolher::before { content: none; }
.trilho-recolher:hover { color: var(--creme); background: var(--painel-2); }
.trilho-recolher svg { width: 18px; height: 18px; }
.trilho-recolher .ic-trilho-auto { display: none; }
.trilho-recolher[aria-pressed="true"] .ic-trilho-fixar { display: none; }
.trilho-recolher[aria-pressed="true"] .ic-trilho-auto { display: block; }

.app.modo-chamada .lateral { background: #050b16; }

/* ============ Design 4.14: organização dos botões e ritmo ============
   Uma régua de 4 px para espaçamento, alvos de 36 a 44 px, ícone SVG em
   vez de emoji e cada ação no lugar onde se espera encontrá-la:
   - comunidade: voltar e administrar no cabeçalho; sair lá embaixo, discreto;
   - chamada: microfone, fone, câmera, tela e DESLIGAR na mesma barra;
   - topo: o que muda o PALCO no centro (Mapa, Telas); o que muda a EXIBIÇÃO
     (só a tela, sobreposição, chat) à direita, só ícone com dica.
   Fica ANTES do bloco de celular do fim do arquivo, que continua vencendo. */
:root {
  --lateral-w: 264px;
  --alvo: 40px;
  --superficie: rgba(9, 18, 33, .9);
  --superficie-2: rgba(255, 255, 255, .04);
  --superficie-3: rgba(255, 255, 255, .07);
  --linha: rgba(239, 233, 218, .08);
}

/* ----- Lateral: cabeçalho da comunidade ----- */
.canais { padding: 10px 10px 16px; }
.comunidade-cabeca {
  position: sticky; top: -10px; z-index: 2;
  margin: -10px -10px 8px; padding: 10px 10px 10px 8px; gap: 4px;
  background: linear-gradient(180deg, rgba(6, 16, 31, .98) 70%, rgba(6, 16, 31, 0));
  border-bottom: 1px solid var(--linha);
}
.comunidade-cabeca .titulo-secao {
  font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.comunidade-voltar, #btn-admin-comunidade {
  flex: none; display: inline-grid; place-items: center;
  width: 32px; height: 32px; padding: 0; border-radius: 8px;
  background: transparent; border: 1px solid transparent; color: var(--texto-medio);
}
.comunidade-voltar svg, #btn-admin-comunidade svg { width: 18px; height: 18px; display: block; }
.comunidade-voltar:hover:not(:disabled), #btn-admin-comunidade:hover:not(:disabled) {
  background: var(--superficie-3); border-color: transparent; color: var(--creme);
}
.comunidade-sair {
  justify-content: flex-start; gap: 10px; width: 100%;
  margin: 18px 0 0; padding: 8px 10px; font-size: 13px; font-weight: 500;
  background: transparent; border: 1px solid transparent; color: var(--texto-fraco);
}
.comunidade-sair svg { width: 16px; height: 16px; flex: none; }
#btn-sair-comunidade:hover:not(:disabled) {
  background: rgba(224, 108, 90, .1); border-color: transparent; color: #F3CBC1;
}
.comunidade-sair.lobby {
  justify-content: center; font-size: 14px; font-weight: 600; color: var(--creme);
  background: var(--superficie-3); border-color: var(--borda-forte); padding: 11px 14px;
}

/* ----- Lateral: canais, categorias e membros ----- */
.lista-canais { gap: 1px; }
.canal-cabeca { padding: 7px 10px; gap: 8px; font-size: 14.5px; border-radius: 8px; min-height: 36px; }
.canal-cabeca:hover { background: var(--superficie-3); }
.canal.ativo > .canal-cabeca {
  background: rgba(58, 114, 206, .18); border-color: transparent;
  box-shadow: inset 3px 0 0 var(--azul-claro);
}
.canal.na-voz > .canal-cabeca { box-shadow: inset 3px 0 0 var(--verde); }
.canal-membros { margin: 2px 0 6px; padding-left: 22px; gap: 1px; }
.membro { padding: 3px 8px; border-radius: 6px; font-size: 13.5px; }
.categoria { margin: 0 0 4px; }
.categoria-cabeca { margin-top: 10px; }
.canais .titulo-secao:not(#nome-comunidade) { padding: 16px 10px 6px; font-size: 11px; }
.lista-membros-comunidade { gap: 1px; }
.membro-comunidade { padding: 5px 8px; gap: 10px; border-radius: 8px; }
.membro-comunidade .avatar.pequeno { width: 28px; height: 28px; font-size: 11px; }
.membro-comunidade:hover:not(:disabled) { background: var(--superficie-3); }

/* ----- Barra da chamada: cinco ações iguais, desligar em vermelho ----- */
.controles-lateral {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px;
  border-top: 1px solid var(--linha); background: rgba(3, 13, 29, .35);
}
.controles-lateral .controle {
  flex: 1 1 0; min-width: 0; min-height: var(--alvo); padding: 0;
  border-radius: 10px; background: var(--superficie-2); border-color: var(--linha);
}
.controles-lateral .controle:hover:not(:disabled) { background: var(--superficie-3); border-color: var(--borda-forte); }
.controles-lateral .controle-icone { width: 22px; height: 22px; }
.controles-lateral .controle-icone svg { width: 21px; height: 21px; }
.controles-lateral .relato-tela { flex: 1 1 100%; }
.controle.desligar { background: #C9403A; border-color: transparent; color: #fff; }
.controle.desligar:hover:not(:disabled) { background: #DA4C45; border-color: transparent; }
.controle.desligar:focus-visible { outline-color: #F3CBC1; }
.controle.perigo { background: rgba(224, 108, 90, .14); }

/* ----- Você: nome e estado à esquerda, ações fixas à direita ----- */
.eu { position: relative; padding: 10px 88px 10px 12px; border-top: 1px solid var(--linha); }
.eu-acoes {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); gap: 2px;
}
.eu-acoes .icone-so, .eu-acoes .icone-so:hover {
  display: inline-grid; place-items: center; position: relative;
  width: 34px; height: 34px; padding: 0; border-radius: 8px;
}
.eu-acoes .icone-so svg { width: 18px; height: 18px; }
.eu-acoes .icone-so:hover:not(:disabled) { background: var(--superficie-3); color: var(--creme); }
.eu-acoes .pilula { position: absolute; top: 1px; right: 1px; }
.eu-nome { font-size: 14.5px; }
.eu-status-linha { gap: 8px; }
button.eu-estado { font-size: 12.5px; color: var(--texto-medio); }
/* Categoria sem canal fica, mas não disputa atenção com as que têm. */
.categoria:has(> .lista-canais:empty) > .categoria-cabeca { opacity: .45; }

/* ----- Topo ----- */
.topo { min-height: 56px; padding: 8px 14px; background: rgba(6, 16, 31, .78); border-bottom-color: var(--linha); }
@media (min-width: 901px) {
  /* A coluna da direita nunca fica menor que o conteúdo: em 1100 px o grupo
     de ferramentas passava por cima das abas do centro. */
  .topo { grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr); }
}
.topo-direita { display: flex; align-items: center; justify-self: end; gap: 10px; min-width: 0; }
.topo-direita .topo-acoes { justify-self: auto; }
.topo-centro { padding: 3px; gap: 2px; border-radius: 10px; background: var(--superficie-2); border-color: var(--linha); }
.topo-centro:not(:has(> :not([hidden]))) { display: none; }
.topo-centro .aba {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px;
  background: transparent; border: 0; color: var(--texto-medio); font-size: 13.5px; font-weight: 600;
}
.topo-centro .aba svg { width: 16px; height: 16px; }
.topo-centro .aba:hover:not(:disabled) { background: var(--superficie-3); color: var(--creme); }
.topo-centro .aba[aria-pressed="true"] { background: var(--azul); color: var(--creme); box-shadow: 0 2px 10px rgba(36, 85, 164, .35); }
.topo-ferramentas { display: flex; align-items: center; gap: 2px; }
.ferramenta {
  position: relative; display: inline-grid; place-items: center;
  width: 36px; height: 36px; padding: 0; border-radius: 8px;
  background: transparent; border: 1px solid transparent; color: var(--texto-medio);
}
.ferramenta svg { width: 19px; height: 19px; display: block; }
.ferramenta:hover:not(:disabled) { background: var(--superficie-3); border-color: transparent; color: var(--creme); }
.ferramenta[aria-pressed="true"] { color: var(--azul-suave); background: rgba(58, 114, 206, .14); }
.ferramenta .pilula { position: absolute; top: 0; right: 0; transform: translate(25%, -25%); }
.btn-baixar-app { min-height: 36px; border-radius: 9px; }

/* ----- Chat ----- */
.chat-topo { min-height: 56px; padding: 8px 10px 8px 16px; gap: 8px; border-bottom-color: var(--linha); }
#chat-busca {
  max-width: 170px; height: 32px; padding: 0 10px; font-size: 12.5px;
  background: #050F1F; border: 1px solid var(--borda); border-radius: 8px; color: var(--texto);
  -webkit-appearance: none; appearance: none; outline: none;
}
#chat-busca:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(58, 114, 206, .18); }
#btn-fechar-chat { width: 32px; height: 32px; padding: 0; border-radius: 8px; flex: none; }
.chat-form { align-items: center; gap: 4px; padding: 10px 10px 12px; border-top-color: var(--linha); }
.chat-form input[type="text"] { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px; }
.chat-form .chat-ferramenta {
  flex: none; display: inline-grid; place-items: center;
  width: 36px; height: 40px; padding: 0; border-radius: 8px; color: var(--texto-medio);
}
.chat-form .chat-ferramenta svg { width: 19px; height: 19px; display: block; }
.chat-form .chat-ferramenta:hover:not(:disabled) { color: var(--creme); background: var(--superficie-3); }
.chat-form .chat-enviar {
  flex: none; display: inline-grid; place-items: center;
  width: 40px; height: 40px; padding: 0; border-radius: 10px; box-shadow: none;
}
.chat-form .chat-enviar svg { width: 18px; height: 18px; display: block; }

/* ----- Palco ----- */
.palco-area .mapa .mapa-tela, .palco-area .mapa canvas { border-radius: 12px; }

@media (max-width: 900px) {
  .painel-usuario .controles-lateral { display: flex; flex-wrap: nowrap; padding: 0; background: transparent; border: 0; }
  .controles-lateral .controle { flex: none; width: 44px; min-height: 44px; }
  .controles-lateral .relato-tela { display: none; }
  .painel-usuario .eu { padding: 0 80px 0 0; position: relative; }
  .eu-acoes { right: 0; }
  .topo-direita { flex: none; margin-left: auto; gap: 4px; }
  .topo-centro { flex: none; }
  .ferramenta { width: 40px; height: 40px; }
  .comunidade-cabeca { top: -10px; }
}

/* ----- 4.20: navegação ----- */
/* Voltar redundantes saíram: o Início fica no topo do trilho. */
#btn-comunidades, #btn-comunidades-lobby { display: none !important; }
.comunidade-cabeca { padding-left: 12px; }
/* No Início o nome no topo não abre menu. */
.topo-espaco.sem-menu { cursor: default; }
.topo-espaco.sem-menu .topo-espaco-caret { display: none; }
.topo-espaco.sem-menu:hover { background: transparent; }
.topo-espaco[aria-expanded="true"] { background: var(--superficie-3); }
/* Ferramentas de palco não fazem nada no Início; o cartão de download já está na tela. */
.app.modo-casa .topo-ferramentas,
.app.modo-casa .topo-acoes,
.app.modo-casa .topo-centro { display: none !important; }
/* Fora da voz (ou visitando) não há palco para trocar: a caixa das abas sumia vazia, sobrava um ponto. */
.app.no-voz .topo-centro, .app.visitando .topo-centro { display: none !important; }
.menu-comunidade { min-width: 248px; padding: 6px; }
.menu-comunidade .menu-titulo { margin: 4px 8px 6px; text-transform: none; letter-spacing: 0; font-size: 12px; }
.menu-item {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px;
  background: transparent; border: 0; color: var(--texto-medio); font-size: 13.5px;
}
.menu-item:hover:not(:disabled), .menu-item:focus-visible { background: var(--superficie-3); color: var(--creme); outline: none; }
.menu-item.perigo-texto { color: #F0B7AA; }
.menu-item.perigo-texto:hover:not(:disabled) { background: rgba(224, 108, 90, .14); color: #F3CBC1; }
#dlg-nova-comunidade { width: min(480px, calc(100vw - 32px)); }
#dlg-nova-comunidade form + form { margin-top: 8px; }

/* ----- 4.20: voz conectada e visita ----- */
.voz-conectada {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-top: 1px solid var(--linha); background: rgba(70, 201, 138, .06);
}
.voz-conectada[hidden] { display: none; }
.voz-sinal { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); flex: none; box-shadow: 0 0 0 3px rgba(70, 201, 138, .18); }
.voz-conectada[data-estado="reconectando"] .voz-sinal,
.voz-conectada[data-estado="conectando"] .voz-sinal { background: var(--ambar); box-shadow: 0 0 0 3px rgba(232, 163, 61, .18); }
.voz-info { min-width: 0; display: flex; flex-direction: column; }
.voz-rotulo { font-size: 12.5px; color: #BFEBD5; font-weight: 700; }
.voz-conectada[data-estado="reconectando"] .voz-rotulo { color: #F5D9A8; }
.voz-onde {
  padding: 0; border: 0; background: none; text-align: left; font-size: 12.5px; color: var(--texto-medio);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.voz-onde:hover:not(:disabled) { background: none; color: var(--creme); text-decoration: underline; }
/* Visitando outra comunidade com a voz ligada: palco de visão, controles ativos. */
.app.visitando .palco-barra, .app.visitando #btn-palco-mapa, .app.visitando #btn-palco-telas,
.app.visitando #mapa, .app.visitando #grade-telas, .app.visitando #grade-pessoas,
.app.visitando #convite-live, .app.visitando .topo-ferramentas #btn-so-tela { display: none !important; }
.app.visitando .lobby-voz { display: block; }
.app.visitando .palco { display: flex; align-items: center; justify-content: center; }
.lobby-visita { display: none; }
.app.visitando .lobby-visita { display: block; }
.app.visitando .lobby-fora { display: none; }
/* Indicadores no ícone da comunidade */
.trilho-item.com { position: relative; }
.trilho-voz {
  position: absolute; right: -4px; bottom: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--verde); color: #06101F; border: 2px solid var(--fundo-1);
  font: 700 10.5px/14px 'Exo 2', sans-serif; text-align: center;
}
.trilho-item.nao-lida::before {
  content: ""; position: absolute; left: -12px; top: 50%; width: 6px; height: 8px; margin-top: -4px;
  border-radius: 0 4px 4px 0; background: var(--creme);
}
.trilho-item.voce-aqui { box-shadow: 0 0 0 2px var(--verde); }
@media (max-width: 900px) {
  /* No celular a barra é uma linha: o indicador vira uma faixa própria acima dela. */
  .painel-usuario:has(.voz-conectada:not([hidden])) { flex-wrap: wrap; row-gap: 6px; }
  .voz-conectada { flex: 1 1 100%; order: -1; padding: 6px 4px; border-top: 0; background: transparent; }
  .painel-usuario:has(.voz-conectada:not([hidden])) .eu { flex: 1 1 0; min-width: 0; }
}

/* ----- 4.20: configurações em tela cheia (suas e da comunidade) ----- */
.dialogo.dialogo-cheio {
  width: 100vw; height: var(--vh); max-width: none; max-height: none; margin: 0; inset: 0;
  border: 0; border-radius: 0; background: var(--fundo-0); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.dialogo.dialogo-cheio form.config-cheia { max-height: none; height: 100%; }
#dlg-admin.dialogo-cheio, #dlg-config.dialogo-cheio { width: 100vw; max-width: none; }
/* Diálogos pequenos: o corpo fica fora do <form> e nascia sem margem. */
.dialogo > .dialogo-corpo { padding: 4px 24px 22px; overflow-y: auto; }
.dialogo-cheio #btn-abrir-senha { border: 1px solid var(--borda-forte); padding: 8px 14px; margin-top: 8px; }
.dialogo-cheio #btn-sair-conta-config {
  width: auto; margin-top: 28px; padding: 9px 16px; justify-content: flex-start;
  border: 1px solid rgba(224, 108, 90, .45);
}
#btn-status-conta { margin-top: 12px; }
.dialogo-cheio .config-topo {
  flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px 24px;
  border-bottom: 1px solid var(--linha); background: rgba(6, 16, 31, .9);
}
.dialogo-cheio .config-topo h2 { flex: 1; margin: 0; font-size: 17px; }
.dialogo-cheio .dialogo-fechar {
  width: 36px; height: 36px; padding: 0; border-radius: 50%; font-size: 20px; line-height: 1;
  border: 1px solid var(--borda-forte); color: var(--texto-medio);
}
.config-salvo {
  padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  color: #BFEBD5; background: rgba(70, 201, 138, .14); transition: opacity 400ms ease;
}
.config-salvo.some { opacity: 0; }
.config-corpo {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: 248px minmax(0, 760px); justify-content: center;
}
.dialogo-cheio .config-nav {
  display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 24px 12px;
  border: 0; border-right: 1px solid var(--linha); border-radius: 0; background: rgba(6, 16, 31, .55);
  overflow-y: auto;
}
.dialogo-cheio .config-nav .config-aba {
  flex: none; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px;
  background: transparent; border: 0; color: var(--texto-medio); font-size: 14.5px; font-weight: 500; box-shadow: none;
}
.dialogo-cheio .config-nav .config-aba:hover { background: var(--superficie-3); color: var(--creme); }
.dialogo-cheio .config-nav .config-aba[aria-selected="true"] { background: rgba(58, 114, 206, .18); color: var(--creme); font-weight: 700; }
.config-nav-titulo {
  margin: 4px 12px 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-fraco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.config-nav-rodape { margin-top: auto; padding-top: 16px; }
.config-nav-rodape .dica { margin: 0 12px; }
.dialogo-cheio .config-paineis { overflow-y: auto; padding: 28px 40px 64px; }
#sel-idioma { margin-top: 4px; }
.config-secao-titulo { margin: 0 0 4px; font-size: 21px; color: var(--creme); }
.config-secao-dica { margin: 0 0 12px; color: var(--texto-medio); font-size: 14px; }
.dialogo-cheio .config-painel h3 {
  margin: 28px 0 10px; padding-top: 20px; border-top: 1px solid var(--linha);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--azul-suave);
}
.dialogo-cheio .config-painel h2 + p + h3, .dialogo-cheio .config-painel h2 + h3 { border-top: 0; padding-top: 0; margin-top: 18px; }
.dialogo-cheio .config-painel select, .dialogo-cheio .config-painel input[type="text"],
.dialogo-cheio .config-painel input[type="password"] { max-width: 440px; }
.dialogo-cheio #erro-admin { grid-column: 2; margin: 0 40px 16px; }
@media (max-width: 760px) {
  .config-corpo { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .dialogo-cheio .config-nav {
    flex-direction: row; overflow-x: auto; padding: 8px; border-right: 0; border-bottom: 1px solid var(--linha);
  }
  .dialogo-cheio .config-nav .config-aba { width: auto; white-space: nowrap; }
  .config-nav-titulo, .config-nav-rodape { display: none; }
  .dialogo-cheio .config-paineis { padding: 20px 16px 48px; }
  .dialogo-cheio #erro-admin { grid-column: 1; margin: 0 16px 12px; }
}

/* ----- 4.20: Início (Amigos e Mensagens diretas) ----- */
.painel-conversas { padding: 10px 10px 16px; }
.casa-cabeca { margin: -10px -10px 8px; padding: 10px 12px; }
.casa-atalho {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px;
  border-radius: 8px; border: 0; background: transparent; color: var(--texto-medio); font-size: 14.5px; font-weight: 600; text-align: left;
}
.casa-atalho svg { width: 20px; height: 20px; flex: none; }
.casa-atalho .pilula { margin-left: auto; }
.casa-atalho:hover:not(:disabled) { background: var(--superficie-3); color: var(--creme); }
.casa-atalho[aria-current="page"] { background: rgba(58, 114, 206, .18); color: var(--creme); box-shadow: inset 3px 0 0 var(--azul-claro); }
.app.modo-casa #painel-conversas.painel-conversas { padding: 10px 10px 16px; overflow-y: auto; }
.painel-conversas .conversas-topo {
  flex-direction: row; align-items: center; gap: 8px; margin: 18px 0 6px; padding: 0 4px 0 10px; border-bottom: 0;
}
.painel-conversas .conversas-topo .casa-titulo {
  flex: 1; padding: 0 !important; font-size: 11px !important; letter-spacing: .1em !important;
  text-transform: uppercase !important; color: var(--texto-fraco) !important;
}
.canais .casa-cabeca #titulo-inicio { font-size: 15.5px; padding: 0; text-transform: none; letter-spacing: 0; color: var(--creme); font-weight: 700; }
.btn-novo-grupo.icone-so {
  display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 6px;
  background: transparent; border: 0; color: var(--texto-medio);
}
.btn-novo-grupo.icone-so svg { width: 16px; height: 16px; }
.btn-novo-grupo.icone-so:hover:not(:disabled) { background: var(--superficie-3); color: var(--creme); }
#vazio-conversas { margin: 6px 10px; }
.casa-vazio { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 56px auto; max-width: 30rem; text-align: center; }
.casa-vazio[hidden] { display: none; }
.casa-vazio p { margin: 0; color: var(--texto-medio); font-size: 15px; line-height: 1.5; }
.painel-casa.dm-aberto .cartao-baixar-app { display: none; }

/* ----- 4.20: mapa no palco inteiro e faixa de pessoas por cima ----- */
/* O mapa ocupa o palco. Altura por flex com mínimo zero no mapa E no canvas
   (o defeito antigo era o canvas com min-height transbordando o pai). */
.palco[data-modo="mapa"] { overflow: hidden; position: relative; padding: 12px; gap: 10px; }
.palco[data-modo="mapa"] .mapa { flex: 1 1 auto; min-height: 240px; }
.palco[data-modo="mapa"] .mapa-tela { flex: 1 1 auto; height: auto; min-height: 0; }
.palco[data-modo="mapa"] .grade-pessoas {
  position: absolute; left: 24px; right: 24px; bottom: 56px; z-index: 6;
  flex-direction: row; flex-wrap: wrap; gap: 4px 6px; width: auto; align-self: auto;
  pointer-events: none;
}
.palco[data-modo="mapa"] .grade-pessoas > * { pointer-events: auto; }
.palco[data-modo="mapa"] .grade-pessoas .pessoa {
  width: auto; min-width: 0; max-width: 220px; padding: 4px 10px 4px 4px; border-radius: 999px;
  background: rgba(3, 13, 29, .78); border: 1px solid var(--linha); backdrop-filter: blur(6px);
}
.palco[data-modo="mapa"] .grade-pessoas .pessoa .volume,
.palco[data-modo="mapa"] .grade-pessoas .palco-vazio { display: none; }
.palco[data-modo="mapa"] .mapa-dica { flex: none; }
/* Controles por tela: ícones iguais, só para você. */
.tela-acao {
  display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 8px;
  background: rgba(3, 13, 29, .55); border: 1px solid var(--linha); color: var(--creme);
}
.tela-acao svg { width: 16px; height: 16px; }
.tela-acao:hover:not(:disabled) { background: rgba(58, 114, 206, .35); border-color: transparent; }

/* ----- 4.20: carregamento sem piscar a tela de entrada ----- */
/* Até a conta ser conferida, nada de tela de entrada: quem já está logado via
   o formulário por um instante antes de cair na comunidade. */
.carregando {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; background: var(--fundo-0);
}
body[data-pc-pronto] .carregando { display: none; }
body:not([data-pc-pronto]) #tela-entrada { visibility: hidden; animation: pc-entrada-aparece .01s linear 8s forwards; }
/* Rede de segurança: se o app.js não subir, em 8 s a entrada aparece mesmo assim. */
.carregando { animation: pc-carregando-some .01s linear 8s forwards; }
@keyframes pc-entrada-aparece { to { visibility: visible; } }
@keyframes pc-carregando-some { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.carregando-marca { width: 56px; height: 56px; opacity: .92; }
.carregando-barra { position: relative; width: 120px; height: 3px; border-radius: 3px; background: var(--superficie-3); overflow: hidden; }
.carregando-barra::after {
  content: ""; position: absolute; inset: 0; width: 40%; border-radius: 3px; background: var(--azul-claro);
  animation: carregando 1.1s ease-in-out infinite;
}
@keyframes carregando { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { .carregando-barra::after { animation: none; width: 100%; opacity: .5; } }

/* Celular. Fica no FIM do arquivo de proposito: a casca nova punha
   `.trilho { position: relative }` e `.chat-area { position: relative }`
   DEPOIS do @media 900px, e as gavetas voltavam para a grade. Sem
   `grid-area: palco` o trilho e o chat criam faixa implicita e o palco
   vira uns 50 px de largura. */
.gaveta-fundo { display: none; grid-area: palco; }
@media (max-width: 900px) {
  html, body { overflow: hidden; overscroll-behavior: none; }
  input[type="text"], input[type="password"], input[type="email"], input[type="search"],
  select, textarea { font-size: 16px; }

  .tela-entrada {
    align-content: start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
    min-height: var(--vh);
    min-height: var(--vh);
  }
  .cartao-entrada { padding: 22px 18px 18px; border-radius: 18px; }
  .marca-grande .marca-icone { width: 64px; height: 64px; }
  .marca-grande .marca-texto { font-size: 26px; }

  .so-mobile { display: inline-grid; }
  .so-desktop { display: none; }

  .app,
  .app.sem-chat,
  .app.modo-casa,
  .app.modo-so-tela,
  .app.modo-chamada {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "palco" "usuario";
    height: var(--vh);
    height: var(--vh);
  }
  .app, .app.trilho-recolhido { --trilho-w: var(--trilho-aberto); }

  .palco-area, .painel-usuario { min-width: 0; }
  .palco-area { width: 100%; }

  .trilho, .lateral, .chat-area, .gaveta-fundo {
    grid-area: palco;
  }

  .app.lateral-aberta .gaveta-fundo,
  .app:not(.modo-casa):not(.sem-chat) .gaveta-fundo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 28;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(3, 13, 29, .55);
    cursor: pointer;
  }
  .app.lateral-aberta .gaveta-fundo:hover:not(:disabled),
  .app.lateral-aberta .gaveta-fundo:active:not(:disabled),
  .app:not(.modo-casa):not(.sem-chat) .gaveta-fundo:hover:not(:disabled),
  .app:not(.modo-casa):not(.sem-chat) .gaveta-fundo:active:not(:disabled) {
    background: rgba(3, 13, 29, .55);
    transform: none;
    border-color: transparent;
  }

  .trilho {
    position: fixed;
    z-index: 31;
    inset: 0 auto 0 0;
    width: var(--trilho-aberto);
    height: 100%;
    transform: translateX(-120%);
    transition: transform var(--transicao);
    clip-path: none;
    box-shadow: none;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .app.trilho-recolhido .trilho,
  .app.trilho-recolhido .trilho:hover,
  .app.trilho-recolhido .trilho:has(:focus-visible) {
    width: var(--trilho-aberto);
    clip-path: none;
    box-shadow: none;
    transform: translateX(-120%);
  }
  .trilho-recolher { display: none; }
  .app.lateral-aberta .trilho,
  .app.lateral-aberta.trilho-recolhido .trilho,
  .app.lateral-aberta.trilho-recolhido .trilho:hover,
  .app.lateral-aberta.trilho-recolhido .trilho:has(:focus-visible) {
    transform: none;
  }

  .lateral {
    position: fixed;
    z-index: 30;
    inset: 0 auto 0 0;
    width: min(84vw, var(--lateral-w));
    height: 100%;
    transform: translateX(-102%);
    transition: transform var(--transicao);
    box-shadow: var(--sombra);
    background: #050F1F;
    left: 0;
  }
  .lateral > .marca { display: flex; }
  .app.lateral-aberta .lateral {
    transform: none;
    left: var(--trilho-aberto);
  }

  .chat-area {
    position: fixed;
    z-index: 30;
    inset: 0 0 0 auto;
    width: min(92vw, 380px);
    height: 100%;
    max-height: var(--vh);
    max-height: var(--vh);
    transform: translateX(102%);
    transition: transform var(--transicao);
    background: #050F1F;
    box-shadow: var(--sombra);
    pointer-events: none;
  }
  .app:not(.modo-casa).sem-chat .chat-area {
    display: flex;
    transform: translateX(102%);
    pointer-events: none;
  }
  .app:not(.modo-casa):not(.sem-chat) .chat-area {
    display: flex;
    transform: none;
    pointer-events: auto;
  }
  .app.modo-casa .chat-area { display: none; }
  .chat-topo { flex-wrap: wrap; gap: 8px; padding: 12px 12px 10px; }
  .chat-topo .titulo-secao { flex: 1 1 auto; min-width: 0; }
  #chat-busca { flex: 1 1 100%; min-width: 0; }
  .chat-form { padding: 10px 10px max(10px, env(safe-area-inset-bottom)); }
  .casa-dm .chat-form {
    margin: 0 10px max(10px, env(safe-area-inset-bottom));
    padding: 0 4px 0 8px;
  }

  .painel-usuario {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 10px max(8px, env(safe-area-inset-bottom));
    border-right: 0;
    border-top: 1px solid var(--borda);
    background: var(--vidro);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    width: 100%;
  }
  .controles-lateral {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
    gap: 6px;
    padding: 0;
    border-top: 0;
    grid-template-columns: repeat(3, 44px);
  }
  .controles-lateral:has(#btn-tela:not([hidden])) {
    grid-template-columns: repeat(4, 44px);
  }
  .controles-lateral:has(#btn-tela-parar:not([hidden])) {
    grid-template-columns: repeat(5, 44px);
  }
  .controles-lateral .controle { justify-content: center; padding: 10px 4px; min-height: 44px; width: 44px; }
  .controle-texto { display: none; }
  .eu { border-top: 0; background: transparent; padding: 0; gap: 1px; min-width: 0; flex: 1 1 auto; }
  .eu-info { flex: 1 1 auto; min-width: 0; }
  .eu-nome { font-size: 14px; }
  .eu-estado { font-size: 12px; }
  .eu-status-linha { padding-left: 40px; }
  .eu-acoes .icone-so { padding: 4px; }

  .topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 6px 8px;
    padding-top: max(6px, env(safe-area-inset-top));
  }
  #btn-abrir-lateral {
    width: 44px; height: 44px; padding: 0; flex: none; font-size: 20px;
  }
  .topo-marca { flex: 1 1 7rem; min-width: 0; overflow: hidden; }
  .topo-espaco { width: 100%; min-width: 0; padding-right: 4px; }
  .topo-espaco-rotulo { display: none; }
  .topo-centro {
    flex: 1 1 auto;
    justify-content: flex-end;
    padding: 0;
    background: transparent;
    border: 0;
    gap: 2px;
    min-width: 0;
  }
  .topo-centro .fantasma, .topo-centro .aba { padding: 6px 8px; }
  .topo-centro .aba span { display: none; }
  .topo-centro .aba svg { width: 18px; height: 18px; display: block; }
  .topo-acoes { flex: none; margin-left: auto; }
  .btn-baixar-app { min-height: 44px; padding: 10px 12px; }
  .cartao-baixar-app { margin: 12px 14px 0; padding: 12px 14px; }

  .palco { padding: 12px; }
  .casa-topo { padding: 12px 14px 0; }
  .casa-corpo { padding: 14px 14px 20px; }
  .casa-vazio { margin: 32px auto; padding: 0 12px; }

  .caixa-sinais {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    width: auto;
    top: max(64px, calc(env(safe-area-inset-top) + 52px));
  }

  .dialogo { width: min(520px, calc(100vw - 20px)); max-height: min(92dvh, 820px); }
}



/* ---------- Aparência do boneco (aba Aparência das Configurações) ---------- */
/* A prévia fica do lado das tintas, não embaixo: trocar uma cor e ter de rolar
   a página para ver o efeito faz a pessoa desistir na segunda cor. */
.visual-caixa { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.visual-previa {
  width: 240px; height: 150px; flex: none;
  border: 1px solid var(--borda, #1D3356); border-radius: 12px;
  background: #0B1B33; image-rendering: pixelated;
}
.visual-tintas { display: flex; flex-direction: column; gap: 8px; min-width: 190px; flex: 1; }
.visual-tinta { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.visual-tinta > span { flex: 1; }
.visual-tinta input[type=color] {
  width: 40px; height: 26px; padding: 0; cursor: pointer;
  border: 1px solid var(--borda, #1D3356); border-radius: 6px; background: none;
}
.visual-peles { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.visual-peles button {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid transparent;
}
.visual-peles button[aria-pressed="true"] { border-color: #3A72CE; }
.visual-acoes { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .visual-previa { width: 100%; height: 170px; }
}

/* Editor de aparência (PC-058): prévia grande e fixa ao lado dos controles no
   desktop; no celular e no zoom de 200% ela vem antes dos controles. */
.visual-motor {
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 20px; align-items: start;
}
.visual-motor[hidden] { display: none !important; }
.visual-previa-caixa { position: sticky; top: 0; }
.visual-motor .visual-previa {
  width: 100%; height: auto; max-width: 340px; display: block;
  aspect-ratio: 240 / 150;
}
.visual-motor .visual-previa-pixi { aspect-ratio: 180 / 160; }
.visual-campos { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.visual-campos h3 { margin: 10px 0 2px; }
.visual-campos h3:first-child { margin-top: 0; }
.visual-campos select { width: 100%; max-width: 360px; min-height: 40px; }
.visual-campos .visual-tintas { min-width: 0; }
.visual-tinta input[type=color] { width: 44px; height: 32px; }
.visual-peles button { width: 36px; height: 36px; }
.visual-acoes button, .visual-rodape button { min-height: 40px; }
/* Mesmo fundo do rodapé do modal (config-modal.css): sem ele, a barra fixa
   ficava transparente por cima das cores no celular. */
.visual-rodape {
  position: sticky; bottom: 0; z-index: 1; padding: 10px 0 4px; margin-top: 8px;
  background: rgba(6, 16, 31, .96); border-top: 1px solid var(--linha, rgba(239, 233, 218, .08));
}
@media (max-width: 720px) {
  .visual-motor { grid-template-columns: minmax(0, 1fr); }
  .visual-previa-caixa { position: static; }
  .visual-motor .visual-previa { max-width: 100%; }
}

/* Mapa oculto pelo botão Mapa (PC-037), também sem a camada ui-espacial. */
.app.mapa-oculto .palco[data-modo="mapa"] { display: grid; place-items: center; }
.app.mapa-oculto .palco[data-modo="mapa"]::after {
  content: 'Mapa oculto. Clique em Mapa no topo para mostrar.';
  color: var(--texto-fraco); font-size: 14px; text-align: center; padding: 16px;
}

/* PC-031/032/033: Privacidade > Atividade (jogo, Spotify, audiência, prévia). */
.ativ-spotify { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; }
.ativ-spotify-estado { font-size: 13.5px; color: var(--texto-medio); }
.ativ-comunidades { margin: 10px 0 0; padding: 8px 12px 12px; border: 1px solid var(--borda, rgba(255, 255, 255, 0.12)); border-radius: 8px; }
.ativ-comunidades legend { padding: 0 6px; font-size: 13px; color: var(--texto-medio); }
.ativ-jogos { margin: 10px 0 0; }
.ativ-ocultos { list-style: none; margin: 6px 0 0; padding: 0; }
.ativ-ocultos li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 14px; }
.ativ-previa { margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--borda, rgba(255, 255, 255, 0.12)); }
.ativ-previa-titulo { margin: 0 0 6px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-fraco); }
.ativ-previa-nome { margin: 0; font-weight: 600; }
.ativ-previa-linha { margin: 2px 0 0; font-size: 14px; color: var(--texto-medio); overflow-wrap: anywhere; }
.ativ-ocultar { margin-top: 14px; }

/* Aviso dentro de diálogo modal (revisão de 01/10): o #aviso da página fica atrás. */
.aviso-dialogo {
  position: sticky; bottom: 8px; margin: 8px 16px; padding: 8px 12px;
  background: var(--painel); border: 1px solid var(--borda-forte); border-radius: 8px;
  color: var(--creme); font-size: 13px; z-index: 5;
}
.aviso-dialogo[hidden] { display: none; }

/* Barra da janela do .exe: minimizar, maximizar e fechar.
   A casca 1.38 pinta essa faixa na cor do app e os botoes ficam
   por cima da pagina. Aqui se reserva o espaco e se deixa arrastar.
   No navegador e na casca antiga o env vale 0 e nada se move. */
body.aplicativo::before {
  content: "PartyCall";
  position: fixed;
  z-index: 40;
  top: 0;
  left: env(titlebar-area-x, 0px);
  width: env(titlebar-area-width, 0px);
  height: env(titlebar-area-height, 0px);
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding-left: 14px;
  background: #070914;
  color: #EFE9DA;
  font: 600 13px/1 "Exo 2", "Segoe UI", system-ui, sans-serif;
  -webkit-app-region: drag;
}
html.ui-espacial body.aplicativo .app,
body.aplicativo .app {
  margin-top: env(titlebar-area-height, 0px);
  height: calc(var(--vh) - env(titlebar-area-height, 0px));
}
body.aplicativo .tela-entrada {
  margin-top: env(titlebar-area-height, 0px);
  min-height: calc(var(--vh) - env(titlebar-area-height, 0px));
}
body.aplicativo .faixa-atualizacao {
  /* A casca 1.40 desenha a barra na página (--barra-h = 32px) e não liga a
     overlay nativa, então titlebar-area-height cai em 0. Sem o max(), esta
     regra (mais específica e mais tarde que top: var(--barra-h)) punha a
     faixa em top: 0, por baixo de minimizar, maximizar e fechar. */
  top: max(env(titlebar-area-height, 0px), var(--barra-h));
}
html.pc-barra-reserva body.aplicativo .faixa-atualizacao {
  top: max(env(titlebar-area-height, 0px), 32px);
}
body.aplicativo .dialogo.dialogo-cheio {
  top: env(titlebar-area-height, 0px);
  height: calc(var(--vh) - env(titlebar-area-height, 0px));
}

/* Atividade (PC-064): jogo embaixo do nome e bloco no cartão, como no Discord. */
.membro-textos { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.2; }
.membro-textos .nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.membro-atividade {
  display: flex; align-items: center; gap: 4px; min-width: 0;
  font-size: 11.5px; font-weight: 500; color: var(--texto-fraco);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.membro-atividade-icone { width: 14px; height: 14px; flex: none; border-radius: 3px; }
.bloco-atividade { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(239, 233, 218, .05); }
.bloco-atividade-titulo { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-fraco); }
.bloco-atividade-linha { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bloco-atividade-icone {
  width: 48px; height: 48px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: var(--azul-forte); color: var(--creme);
}
.bloco-atividade-icone svg { width: 26px; height: 26px; }
.bloco-atividade-icone.com-imagem { background: transparent; }
.bloco-atividade-icone img { width: 48px; height: 48px; border-radius: 10px; display: block; object-fit: contain; }
.bloco-atividade-textos { display: grid; gap: 2px; min-width: 0; }
.bloco-atividade-textos strong { overflow-wrap: anywhere; font-size: 14px; }
.bloco-atividade-tempo { font-size: 12.5px; color: var(--verde, #43B581); font-variant-numeric: tabular-nums; }

/* Cronômetro da sala (PC-057): ao lado do nome, sem empurrar a contagem. */
.canal-cabeca .canal-tempo {
  flex: none; margin-left: auto; padding-right: 2px;
  font-size: 11px; font-weight: 600; color: var(--verde);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.canal-cabeca .canal-tempo + .canal-nao-lido, .canal-cabeca .canal-tempo ~ .contagem { margin-left: 6px; }

/* Prévia da transmissão (PC-061): cartão no hover de quem transmite. Fundo
   sólido: no tema espacial --painel é translúcido. Abaixo do .menu-ctx (90). */
.cartao-previa {
  position: fixed; z-index: 88; width: 300px; padding: 8px; box-sizing: border-box;
  display: grid; gap: 8px;
  background: var(--painel-2); color: var(--creme);
  border: 1px solid var(--borda-forte); border-radius: 12px; box-shadow: var(--sombra);
}
.cartao-previa[hidden] { display: none !important; }
/* Quadro 16:9 fixo: o cartão não pula de tamanho quando a imagem chega. */
.cartao-previa-quadro {
  position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
  background: #02070f; display: grid; place-items: center;
}
.cartao-previa-video, .cartao-previa-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.cartao-previa-video[hidden], .cartao-previa-img[hidden], .cartao-previa-aviso[hidden] { display: none; }
.cartao-previa-aviso { font-size: 12px; color: var(--texto-medio); padding: 0 12px; text-align: center; }
.cartao-previa-selo {
  position: absolute; top: 6px; left: 6px; padding: 2px 6px; border-radius: 4px;
  background: #c4303f; color: #fff; font: 700 10px/1.4 'Exo 2', "Segoe UI", sans-serif; letter-spacing: .06em;
}
.cartao-previa-rodape { display: flex; align-items: center; gap: 10px; padding: 0 2px 2px; }
.cartao-previa-info { display: grid; gap: 2px; min-width: 0; flex: 1; }
.cartao-previa-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-previa-estado { font-size: 12px; color: var(--verde); }
.cartao-previa-assistir { margin: 0; flex: none; padding: 7px 16px; font-size: 13px; }

/* O que ha de novo (PC-104): lista curta, so texto. */
.dialogo-novidades .novidades-corpo { padding: 4px 24px 8px; overflow-y: auto; }
.novidades-versao + .novidades-versao { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borda-forte); }
.novidades-versao h3 { margin: 0 0 6px; font-size: 15px; }
.novidades-versao h4 { margin: 10px 0 4px; font-size: 13px; color: var(--cinza-quente); text-transform: uppercase; letter-spacing: .04em; }
.novidades-versao ul { margin: 0; padding-left: 20px; }
.novidades-versao li + li { margin-top: 4px; }
.novidades-acoes { padding: 8px 24px 20px; justify-content: flex-end; }
#btn-novidades { margin-top: 6px; }

/* Caixa de texto propria (pedirTexto): window.prompt nao existe no aplicativo. */
.dialogo-pedir { width: min(420px, calc(100vw - 32px)); }
.dialogo-pedir .pedir-corpo { padding: 4px 24px 8px; }
.dialogo-pedir .pedir-corpo input { width: 100%; }
.dialogo-pedir .pedir-acoes { padding: 8px 24px 20px; justify-content: flex-end; gap: 8px; }