/* Escritório 3D: tela inicial, com o chat em painel à direita (painel.js). Usa os tokens de estilo.css. */
.escritorio { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--fundo); }
.esc-topo { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--linha); }
.esc-marca { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.esc-marca strong { font: 700 17px/1 var(--titulo); }
.esc-marca .logo { width: 30px; height: 30px; }
.esc-online { font: 500 12px/1 var(--mono); color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esc-chat { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--linha); border-radius: 12px; background: var(--painel); font-weight: 600; cursor: pointer; }
.esc-chat:hover { background: var(--acento-suave); }
.esc-chat[aria-expanded="true"] { background: var(--acento); border-color: var(--acento); color: var(--no-acento); }
.esc-chat .bolinha { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ruim); color: #fff; font: 600 11px/20px var(--corpo); text-align: center; }
.esc-eu { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.esc-eu .foto { width: 38px; height: 38px; font-size: 14px; }
.esc-chat:focus-visible, .esc-eu:focus-visible, .fechar-chat:focus-visible, .divisor:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.fechar-chat { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--linha); border-radius: 10px; background: var(--painel); color: var(--suave); cursor: pointer; padding: 0; }
.fechar-chat:hover { color: var(--tinta); background: var(--acento-suave); }

/* divisor arrastável entre o escritório e o chat */
.divisor { position: relative; cursor: col-resize; background: var(--fundo); border-left: 1px solid var(--linha); touch-action: none; }
.divisor::after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 44px; margin: -22px 0 0 -2px; border-radius: 4px; background: var(--linha); transition: background .12s; }
.divisor:hover::after, .app.redimensionando .divisor::after { background: var(--acento); }
.app.redimensionando { cursor: col-resize; user-select: none; }
.app.redimensionando .mapa canvas { pointer-events: none; }

/* mapa (dentro de .esc-corpo, que também guarda a telinha da chamada; ver chamadas.css) */
.esc-corpo { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.mapa { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; outline: none; touch-action: none; cursor: grab;
  background: radial-gradient(120% 90% at 50% 40%, color-mix(in srgb, var(--acento-suave) 70%, var(--fundo)), var(--fundo)); }
.mapa.sobre-algo { cursor: pointer; }
.mapa.arrastando { cursor: grabbing; }
.mapa canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mapa-rotulos { position: absolute; inset: 0; pointer-events: none; }
.mapa-dica { position: absolute; left: 14px; bottom: 12px; margin: 0; padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--painel) 85%, transparent); color: var(--suave); font-size: 12.5px; pointer-events: none; }
/* primeira pessoa (escritorio.js): botão no canto do mapa, liga e desliga */
.mapa-visao { position: absolute; top: calc(12px + var(--sob-palco-lados, 0px)); right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px 0 11px;
  border: 1px solid var(--linha); border-radius: 999px; background: color-mix(in srgb, var(--painel) 92%, transparent); color: var(--tinta);
  font: 600 13px/1 var(--corpo); box-shadow: 0 2px 8px rgba(31, 27, 45, .1); cursor: pointer; }
.mapa-visao svg { width: 17px; height: 17px; flex: none; }
.mapa-visao:hover { background: var(--acento-suave); }
.mapa-visao[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--no-acento); }
.mapa-visao:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.mapa-tudo { top: calc(56px + var(--sob-palco-lados, 0px)); }
.mapa-tudo[hidden] { display: none; }
@media (max-width: 760px) { .mapa-visao span { display: none; } .mapa-visao { padding: 0 10px; } }
.mapa-erro { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; padding: 24px; text-align: center; color: var(--suave); }

/* nome sobre a cabeça: é botão, então dá para chegar na pessoa pelo teclado */
.rotulo { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 9px; max-width: 220px; padding: 4px 15px 4px 4px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--painel) 92%, transparent); color: var(--tinta); font: 600 15px/1.2 var(--corpo); box-shadow: 0 2px 8px rgba(31, 27, 45, .12);
  white-space: nowrap; pointer-events: auto; cursor: pointer; will-change: transform; }
.rotulo.ouvindo { max-width: 290px; border-radius: 24px; }
/* foto (imagem ou GIF animado); o aro verde marca quem está numa chamada */
.rot-foto { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--acento-suave) center / cover no-repeat;
  color: var(--acento); font: 700 13px/1 var(--corpo); letter-spacing: .02em; }
.rotulo.ouvindo .rot-foto { width: 40px; height: 40px; font-size: 14px; }
.rotulo[data-chamada] .rot-foto { box-shadow: 0 0 0 2px var(--painel), 0 0 0 4px var(--bom); }
.rotulo.eu .rot-foto { background-color: color-mix(in srgb, var(--no-acento) 25%, transparent); color: var(--no-acento); }
.rotulo.eu[data-chamada] .rot-foto { box-shadow: 0 0 0 2px var(--acento), 0 0 0 4px #7FF0B4; }
.rot-txt { display: grid; gap: 2px; min-width: 0; text-align: left; }
.rot-nome, .rot-som > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.rot-som { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--suave); font: 500 12.5px/1.15 var(--corpo); }
.rotulo.eu .rot-som { color: color-mix(in srgb, var(--no-acento) 80%, transparent); }
/* equalizador: três barrinhas que pulam enquanto toca */
.rot-eq { display: inline-flex; align-items: flex-end; gap: 2px; width: 11px; height: 11px; flex: none; color: var(--bom); }
.rotulo.eu .rot-eq { color: currentColor; }
.rot-eq i { width: 2.4px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: bottom; animation: rot-eq .9s ease-in-out infinite alternate; }
.rot-eq i:nth-child(2) { animation-duration: .65s; animation-delay: -.3s; }
.rot-eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -.6s; }
@keyframes rot-eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .rot-eq i { animation: none; transform: scaleY(.7); } }
.rotulo.eu { background: var(--acento); color: var(--no-acento); }
/* perfil: opção de mostrar a música */
.perfil-opcao { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.perfil-opcao input { margin: 2px 0 0; accent-color: var(--acento); width: 16px; height: 16px; flex: none; }
.perfil-opcao small { display: block; margin-top: 3px; color: var(--suave); font-size: 12.5px; }
.rotulo:focus-visible, .zona:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* sala de voz: no chão fica o tapete de som 3D (escritorio.js); esta etiqueta flutua logo acima dele com o nome e quantas
   pessoas estão na chamada. Aparece com gente na chamada, com o mouse no tapete, com zoom, na sua chamada (`aberta`) ou
   com o foco do teclado; aberta, o clique nela entra na chamada como o do tapete */
.zona { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--linha); border-radius: 10px;
  background: var(--painel); color: var(--tinta); font: 600 12.5px/1.2 var(--corpo); white-space: nowrap; pointer-events: none; cursor: pointer; will-change: transform; opacity: 0; }
.zona:focus-visible { opacity: 1; pointer-events: auto; }
.zona.aberta { opacity: 1; pointer-events: auto; box-shadow: 0 4px 14px -6px rgba(31, 27, 45, .35); }
.zona svg { width: 14px; height: 14px; color: var(--suave); }
.zona small { font: 500 11px/1 var(--mono); color: var(--suave); }
.zona:hover { border-color: var(--acento); }
.zona[aria-current="true"] { background: var(--bom); border-color: var(--bom); color: #fff; }
.zona[aria-current="true"] svg, .zona[aria-current="true"] small { color: #fff; }

/* celular: o chat abre por cima do escritório, em tela cheia */
@media (max-width: 760px) {
  .app, .app.chat-fechado { grid-template-columns: minmax(0, 1fr); }
  .divisor { display: none; }
  .chat { position: fixed; inset: 0; z-index: 30; }
  .esc-chat span:not(.bolinha) { display: none; }
  .mapa-dica { display: none; }
}
@media (prefers-reduced-motion: reduce) { .divisor::after { transition: none; } }

/* a planta mudou na área admin com algo aberto que um recarregar perderia (public/escritorio.js, plantaMudou) */
.planta-mudou { position: absolute; left: 50%; top: calc(14px + var(--sob-palco, 0px)); transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); padding: 8px 8px 8px 14px; border: 1px solid var(--linha); border-radius: 14px; background: var(--painel); color: var(--tinta); font-size: 13.5px; box-shadow: 0 6px 24px -8px rgba(31, 27, 45, .3); }
.planta-mudou .botao { flex: none; }

/* cartão que entra pelo canto de baixo à esquerda (logo acima da dica) ao entrar na área de uma sala de voz, nas duas
   vistas (escritorio.js, vigiarArea); fica no canto para não tapar o meio da tela (pedido do Carlos, 2026-11-02) */
.chegada { position: absolute; left: 14px; bottom: 50px; z-index: 3; display: flex; align-items: center; gap: 11px; width: max-content; max-width: min(380px, calc(100% - 28px));
  padding: 8px; border: 1px solid color-mix(in srgb, var(--cor-sala) 55%, var(--linha)); border-radius: 16px;
  background: color-mix(in srgb, var(--painel) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--tinta);
  box-shadow: 0 14px 36px -12px rgba(31, 27, 45, .35); }
.chegada[hidden] { display: none; }
.chegada-icone { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--cor-sala); color: #3B3A4A; }
.chegada-icone svg { width: 20px; height: 20px; }
.chegada.aqui .chegada-icone { background: var(--bom); color: #fff; }
.chegada-texto { display: grid; gap: 1px; min-width: 0; padding-right: 6px; }
.chegada-texto small { color: var(--suave); font-size: 11.5px; }
.chegada-texto strong { font: 700 16px/1.15 var(--titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chegada-texto span { color: var(--suave); font-size: 12px; }
.chegada.aqui .chegada-texto span { color: var(--bom); font-weight: 600; }
.chegada .botao { flex: none; padding: 7px 12px; font-size: 13px; }
.chegada.vindo { animation: chegada-vem .5s cubic-bezier(.2, 1.3, .4, 1) both; }
.chegada.vindo .chegada-icone { animation: chegada-pulo .5s .3s ease-out both; }
.chegada.indo { animation: chegada-vai .28s ease-in both; }
@keyframes chegada-vem { from { opacity: 0; transform: translateX(calc(-100% - 20px)); } 60% { opacity: 1; } to { transform: none; } }
@keyframes chegada-vai { to { opacity: 0; transform: translateX(calc(-100% - 20px)); } }
@keyframes chegada-pulo { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
/* celular: sem a dica embaixo, o cartão desce até o canto */
@media (max-width: 760px) { .chegada { left: 10px; bottom: 12px; max-width: calc(100% - 20px); } }
@media (max-width: 560px) { .chegada { flex-wrap: wrap; } .chegada .botao { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .chegada.vindo, .chegada.vindo .chegada-icone, .chegada.indo { animation: none; } }

/* "PÁÁ!" e "TUM!" de quem é tirada de uma sala (public/escritorio.js, estalar) */
.esc-estalo { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; font: 800 22px/1 var(--titulo, system-ui); color: #fff; letter-spacing: .02em;
  -webkit-text-stroke: 1px #1F1B2D; paint-order: stroke fill; text-shadow: 0 2px 0 #1F1B2D, 0 4px 14px rgba(31, 27, 45, .45); animation: esc-estalo .9s ease-out forwards; }
@keyframes esc-estalo { 0% { opacity: 0; scale: .5; } 18% { opacity: 1; scale: 1.25; } 70% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
@media (prefers-reduced-motion: reduce) { .esc-estalo { animation: none; } }