/* ---- Gather (/gather): barra de voz + "N online" no rodapé do menu (vinham do app.css até 19/10/2026; ficam no começo
   do arquivo para manter a mesma ordem da cascata de antes) ---- */
/* A barra é fixa e centralizada na base. Nas Conversas ela flutua; no mapa fica logo acima da barra navy (64 px). */
[data-escritorio="dentro"] .eb-barra { bottom: calc(var(--esc-barra, 64px) + 12px); }
.lateral__presenca { position: relative; margin-top: auto; padding: 8px 4px 0; }
.lateral__presenca:empty { display: none; }
.lateral__presenca + .lateral__rodape { margin-top: 0; }
[data-lateral="recolhida"] .lateral__presenca { display: none; }
[data-lateral="recolhida"] .lateral__presenca + .lateral__rodape { margin-top: auto; }
@media (max-width: 860px) {
  .eb-barra { bottom: 12px; max-width: calc(100vw - 24px); }
  .eb-barra .eb-aovivo { display: none; }
}
@media print { .eb-barra { display: none; } }

/* Barra de controles do Escritório (estilo Gather). Usa as variáveis de app.css. */
.eb-barra {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 900;
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  background: var(--preto, #0E0E10); color: var(--papel, #F1EFE8);
  border-radius: var(--r-pilula, 999px); box-shadow: var(--sombra, 0 8px 28px rgba(0,0,0,.28));
  font-family: var(--texto, 'Hanken Grotesk', sans-serif);
}
.eb-barra button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.eb-barra button:focus-visible { outline: 2px solid var(--amarelo, #FFD434); outline-offset: 2px; }
.eb-barra [aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.eb-pessoa { padding: 0 4px; }
.eb-avatar { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(241,239,232,.14); font-size: 12px; font-weight: 700; }
.eb-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.eb-ponto { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--preto, #0E0E10); background: var(--cinza, #8a8a8a); }
.eb-st-ativo { background: var(--ok, #2bb673); }
/* 'em outra aba' = ponto âmbar que pulsa devagar (a pessoa está no Hub); 'ausente' = anel vazio cinza (parou de mexer). Verde só para ativo. */
.eb-st-outra-aba { background: var(--aviso, #E0A21B); animation: eb-ponto 2.4s ease-in-out infinite; }
.eb-st-ausente { background: var(--preto, #0E0E10); box-shadow: inset 0 0 0 2px var(--cinza, #8a8a8a); }
@keyframes eb-ponto { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,162,27,.55); } 50% { box-shadow: 0 0 0 5px rgba(224,162,27,0); } }
.eb-st-offline { background: var(--cinza, #8a8a8a); }

.eb-grupo { display: flex; align-items: center; border-radius: var(--r-pilula, 999px); background: rgba(241,239,232,.08); }
.eb-bt { position: relative; display: grid; place-items: center; width: 44px; height: 40px; border-radius: var(--r-pilula, 999px); transition: background .15s; }
.eb-bt:hover, .eb-seta:hover { background: rgba(241,239,232,.14); }
.eb-mic { width: 52px; }
.eb-barra .eb-off { color: #EF7B72; }
.eb-barra .eb-on { color: var(--papel, #F1EFE8); }
.eb-seta { display: grid; place-items: center; width: 24px; height: 40px; border-radius: var(--r-pilula, 999px); opacity: .75; }
.eb-seta svg { width: 14px; height: 14px; }
.eb-barra .eb-sair { color: #EF7B72; }
.eb-barra .eb-tela { color: var(--amarelo, #FFD434); }

/* Microfone aberto e transmitindo: anel pulsante */
.eb-pulso { position: absolute; inset: 4px; border-radius: inherit; border: 2px solid var(--ok, #2bb673);
  animation: eb-pulsar 1.6s var(--ease, ease-out) infinite; pointer-events: none; }
.eb-falando .eb-pulso { animation-duration: .7s; }
@keyframes eb-pulsar { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }
.eb-aovivo { font-family: var(--dados, 'Chivo Mono', monospace); font-size: 11px; padding: 0 8px 0 4px; color: var(--ok, #2bb673); white-space: nowrap; }

.eb-menu { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); min-width: 240px; max-height: 50vh; overflow: auto;
  padding: 8px; background: var(--preto, #0E0E10); border-radius: var(--r-card, 14px); box-shadow: var(--sombra, 0 8px 28px rgba(0,0,0,.3)); }
.eb-menu ul { list-style: none; margin: 0; padding: 0; }
.eb-menu-tit { margin: 6px 8px 4px; font-size: 11px; opacity: .6; text-transform: uppercase; letter-spacing: .06em; }
.eb-menu li button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 13px; }
.eb-menu li button:hover { background: rgba(241,239,232,.1); }
.eb-menu li button[aria-checked="true"]::after { content: '✓'; margin-left: auto; color: var(--amarelo, #FFD434); }
.eb-menu-vazio { padding: 8px 10px; font-size: 13px; opacity: .6; }
.eb-menu-emoji { display: flex; gap: 2px; min-width: 0; }
.eb-menu-emoji button { font-size: 22px; width: 40px; height: 40px; border-radius: 10px; }
.eb-menu-emoji button:hover { background: rgba(241,239,232,.1); }

.eb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .eb-pulso, .eb-st-outra-aba { animation: none; } .eb-pulso { opacity: .9; } }

/* Celular: a barra completa não pode passar da tela */
@media (max-width: 600px) {
  .eb-barra { max-width: calc(100vw - 16px); bottom: 10px; padding: 4px 6px; gap: 2px; }
  .eb-bt { width: 38px; height: 38px; }
  .eb-mic { width: 44px; }
  .eb-seta { width: 20px; }
  .eb-aovivo { display: none; }
  .eb-menu { min-width: min(240px, calc(100vw - 32px)); }
}

/* Dentro do Escritório a barra de controles mora no rodapé navy do mapa (uma barra só): sem pílula preta flutuante.
   O avatar/status fica com o bloco "eu" do rodapé (.esc-eu). */
.eb-barra.eb-acoplada {
  position: relative; left: auto; bottom: auto; transform: none; z-index: 2;
  background: transparent; box-shadow: none; padding: 0; border-radius: 0;
}
.eb-barra.eb-acoplada .eb-pessoa { display: none; }
.eb-barra.eb-acoplada .eb-menu { background: var(--navy, #030C31); border: 1px solid rgba(241,239,232,.18); }
.esc-barra:has(.eb-acoplada) { display: flex; gap: 16px; }
.esc-barra:has(.eb-acoplada) .esc-eu { flex: 1 1 0; }
.esc-barra:has(.eb-acoplada) .esc-barra__dica { flex: 1 1 0; text-align: right; }
.esc-barra:has(.eb-acoplada) .esc-barra__botoes { flex: none; }