@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url(vendor/fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url(vendor/fonts/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url(vendor/fonts/inter-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 500; font-display: swap; src: url(vendor/fonts/barlow-condensed-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(vendor/fonts/barlow-condensed-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url(vendor/fonts/barlow-condensed-latin-700-normal.woff2) format('woff2'); }

:root {
  --azul: #2E6BFF;
  --branco: #FFFFFF;
  --grafite: #0A0C10;
  --cinza: #6C7686;
  --claro: #E3E6EC;
  --vermelho: #FF3B4A;
  --verde: #34D399;
  --topo-h: 5.2rem;
  --esq-w: 17rem;
  --dir-w: 19rem;
  --painel: rgba(13, 16, 22, 0.86);
  --ceu-topo: #d8e4f6;
  --ceu-base: #f4f6fa;
}

/* tudo escala com a tela: 1920 px de largura = 16 px por rem */
html { font-size: calc(100vw / 120); }
@media (min-aspect-ratio: 16/9) { html { font-size: calc(100vh / 67.5); } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--branco);
  background: var(--grafite);
  -webkit-font-smoothing: antialiased;
}
body.sem-cursor, body.sem-cursor * { cursor: none !important; }

/* ---------- barra superior ---------- */
#topo {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topo-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 2rem; z-index: 3;
  background: var(--grafite);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.marca { display: flex; align-items: center; gap: 0.9rem; }
.logo { height: 2rem; width: auto; display: block; }
.hq { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 2rem; letter-spacing: 0.12em; color: var(--claro); }
.contadores { display: flex; gap: 0.6rem; }
.contador[hidden] { display: none; }
.contador {
  --c: var(--branco);
  display: flex; align-items: baseline; gap: 0.55rem;
  padding: 0.5rem 1rem 0.55rem; border-radius: 0.6rem;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  border-top: 3px solid var(--c);
}
.contador b { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 2.2rem; line-height: 1; min-width: 1.1em; text-align: right; color: var(--c); }
.contador span { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #aab2c0; }
.contador[data-tipo="trabalhando"] { --c: var(--azul); }
.contador[data-tipo="esperando"] { --c: var(--vermelho); }
.contador[data-tipo="dormindo"] { --c: #9aa4b2; }
.contador[data-tipo="ocioso"] { --c: #F5C451; }
.contador[data-tipo="finalizados"] { --c: var(--verde); }
#topo.alerta .contador[data-tipo="esperando"] { background: rgba(255,59,74,0.14); animation: alerta 1.6s infinite; }
.relogio { justify-self: end; text-align: right; }
.hora { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; line-height: 1; }
.hora b { font-size: 2.8rem; font-weight: 700; }
.hora span { font-size: 1.3rem; color: var(--cinza); margin-left: 0.25rem; }
.data { font-size: 0.82rem; color: #aab2c0; margin-top: 0.2rem; text-transform: capitalize; }

/* ---------- palco (cena em tela cheia; painéis flutuam por cima) ---------- */
#palco {
  position: fixed; top: var(--topo-h); left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, var(--ceu-topo), var(--ceu-base));
  transition: background 2s;
  overflow: hidden;
}
#palco canvas { position: absolute; top: 0; left: 0; display: block; }
#camada { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
#erro { position: absolute; left: 50%; bottom: 4rem; transform: translateX(-50%); color: #ff8a8a; font-weight: 600; }

#rodape {
  position: absolute; left: calc(var(--esq-w) + 2.2rem); right: calc(var(--dir-w) + 2.2rem); bottom: 1.1rem;
  display: flex; align-items: center; gap: 0.6rem; pointer-events: none; z-index: 2;
}
#modo, #tv {
  position: relative; flex: none;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.42rem 0.8rem 0.42rem 1.6rem; border-radius: 99rem;
  background: rgba(10,12,16,0.8); color: var(--claro);
}
#modo::before, #tv::before { content: ''; position: absolute; left: 0.7rem; top: 50%; width: 0.5rem; height: 0.5rem; margin-top: -0.25rem; border-radius: 50%; background: var(--cinza); }
#modo[data-modo="vivo"]::before { background: var(--verde); animation: pulsar 1.6s infinite; }
#modo[data-modo="erro"]::before { background: #ff6b6b; }
#tv::before { border-radius: 0.12rem; background: var(--azul); }
#tv[data-manual="1"]::before { background: #F5C451; }
#ticker {
  min-width: 0; flex: 1; display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; color: var(--grafite); font-weight: 600;
  padding: 0.42rem 0.9rem; border-radius: 99rem; background: rgba(255,255,255,0.82);
  white-space: nowrap; overflow: hidden;
}
#ticker:empty { display: none; }
#ticker span { overflow: hidden; text-overflow: ellipsis; }
#ticker time { color: var(--cinza); font-variant-numeric: tabular-nums; }
#ticker.novo { animation: entrar 0.6s ease-out; }
body.noite #ticker { background: rgba(10,12,16,0.8); color: var(--claro); }

/* ---------- painéis laterais ---------- */
.painel {
  position: fixed; top: calc(var(--topo-h) + 1rem); bottom: 1rem; z-index: 2;
  background: var(--painel); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.9rem;
  padding: 1.1rem 1.1rem 1rem; display: flex; flex-direction: column; gap: 1rem;
  box-shadow: 0 1rem 3rem rgba(10,12,16,0.25);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#esquerda { left: 1rem; width: var(--esq-w); }
#direita { right: 1rem; width: var(--dir-w); }
.painel h2 {
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 1.05rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: #aab2c0; margin-bottom: 0.55rem;
}
.painel h2 b { font-size: 1.15rem; color: var(--branco); background: rgba(255,255,255,0.08); border-radius: 0.4rem; padding: 0 0.45rem; letter-spacing: 0; }
.espera h2 b { background: var(--vermelho); }
.finais h2 b { background: rgba(52,211,153,0.2); color: var(--verde); }
.painel ul { list-style: none; }
.ponto { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--cor); flex: none; }
.vazio { font-size: 0.8rem; color: var(--cinza); padding: 0.4rem 0; }

#andares { overflow: hidden; display: flex; flex-direction: column; gap: 0.15rem; }
.andar { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cinza); margin: 0.5rem 0 0.15rem; }
.sala-item { --cor: var(--azul); border-radius: 0.5rem; padding: 0.38rem 0.5rem; cursor: pointer; transition: background 0.3s; }
.sala-item:hover { background: rgba(255,255,255,0.05); }
.sala-item.ativa { background: rgba(255,255,255,0.09); box-shadow: inset 3px 0 0 var(--cor); }
.sala-item.geral { display: flex; align-items: center; gap: 0.5rem; }
.sala-item.geral .chip { background: var(--branco); }
.sala-linha { display: flex; align-items: center; gap: 0.5rem; }
.chip { width: 0.7rem; height: 0.7rem; border-radius: 0.2rem; background: var(--cor); flex: none; }
.sala-item b { flex: 1; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 1.05rem; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conta { font-size: 0.7rem; font-weight: 600; color: var(--cinza); white-space: nowrap; }
.pontos { display: flex; gap: 0.2rem; }
.mini { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--st); }
.sala-agentes { margin: 0.25rem 0 0.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.25rem; }
.sala-agente { padding: 0.3rem 0.45rem; border-radius: 0.4rem; background: rgba(255,255,255,0.05); }
.sala-agente b { font-size: 0.95rem; }
.sala-agente .st { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--st); white-space: nowrap; }

.item-topo { display: flex; align-items: center; gap: 0.45rem; }
.item-topo b { flex: 1; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-topo time { font-size: 0.72rem; color: #aab2c0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item-tarefa { font-size: 0.78rem; color: #c3cad5; margin: 0.1rem 0 0 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-sala { font-size: 0.68rem; color: var(--cinza); margin: 0.05rem 0 0 0.95rem; }
.bloco { min-height: 0; display: flex; flex-direction: column; }
.espera { flex: none; max-height: 45%; }
.espera ul { overflow: hidden; display: flex; flex-direction: column; gap: 0.4rem; }
.item-espera {
  padding: 0.5rem 0.6rem; border-radius: 0.55rem; cursor: pointer;
  background: rgba(255,59,74,0.12); border: 1px solid rgba(255,59,74,0.45);
}
.item-espera time { color: #ff9aa2; }
.finais { flex: 1; }
.finais ul { overflow: hidden; display: flex; flex-direction: column; gap: 0.1rem; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); }
.item-final { padding: 0.35rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.item-final .item-topo::after { content: '✓'; font-size: 0.8rem; font-weight: 700; color: var(--verde); }
.item-final.novo { animation: entrar 0.6s ease-out; }

/* ---------- balões dos agentes (CSS2DRenderer) ---------- */
.ancora { width: 0; height: 0; }
.agente {
  position: absolute; left: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center;
  transform: translate(-50%, var(--dy, 0px));
}
.card {
  min-width: 8.5rem; max-width: 13rem;
  background: rgba(13,16,22,0.92); color: var(--branco);
  border-radius: 0.55rem; padding: 0.32rem 0.55rem 0.38rem;
  box-shadow: 0 0.35rem 1rem rgba(10,12,16,0.28);
  border-top: 3px solid var(--cor);
}
.card-cab { display: flex; align-items: center; gap: 0.35rem; }
.card-cab b { flex: 1; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 0.98rem; letter-spacing: 0.02em; white-space: nowrap; }
.card-st {
  font-size: 0.56rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  padding: 0.08rem 0.38rem; border-radius: 99rem; background: var(--st, var(--azul)); color: var(--branco);
}
.agente[data-status="ocioso"] .card-st,
.agente[data-status="conversa"] .card-st,
.agente[data-status="reuniao"] .card-st { color: var(--grafite); }
.card-funcao { display: none; font-size: 0.64rem; color: #aab2c0; white-space: nowrap; margin-top: 0.1rem; }
.card-funcao em { font-style: normal; color: var(--branco); background: rgba(255,255,255,0.1); border-radius: 0.25rem; padding: 0 0.3rem; margin-left: 0.35rem; }
.card-tarefa { font-size: 0.7rem; font-weight: 600; color: #e1e5eb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.12rem; }
.card-rodape { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.28rem; }
.barra { flex: 1; height: 0.3rem; border-radius: 99rem; background: rgba(255,255,255,0.12); overflow: hidden; }
.barra i { display: block; height: 100%; width: 0; border-radius: 99rem; background: var(--cor); transition: width 0.6s; }
.pct { font-size: 0.6rem; font-weight: 700; color: #aab2c0; font-variant-numeric: tabular-nums; min-width: 1.8rem; text-align: right; }
.card.sem-barra .card-rodape { display: none; }
.agente[data-status="esperando"] .card { border-top-color: var(--vermelho); box-shadow: 0 0 0 2px rgba(255,59,74,0.55), 0 0.35rem 1rem rgba(255,59,74,0.3); }
.agente[data-status="esperando"] .barra i { background: var(--vermelho); }
.agente[data-status="esperando"] .pct { color: #ff9aa2; text-transform: uppercase; }
.agente[data-status="esperando"] .card-st { animation: alerta 1.4s infinite; }
.agente[data-status="dormindo"] .card { opacity: 0.8; }
/* perto (zoom da câmera) ou em foco: balão completo com função e modelo/ferramenta */
.agente.detalhe .card { max-width: 16rem; padding: 0.42rem 0.7rem 0.48rem; }
.agente.detalhe .card-funcao { display: block; }
.agente.detalhe .card-cab b { font-size: 1.1rem; }
.agente.detalhe .card-tarefa { font-size: 0.78rem; }
.agente.foco .card { box-shadow: 0 0 0 2px var(--cor), 0 0.5rem 1.4rem rgba(10,12,16,0.35); }
.haste { width: 2px; height: 0.55rem; background: rgba(13,16,22,0.7); }

.fala {
  position: absolute; bottom: calc(100% + 0.45rem); left: 50%;
  max-width: 15rem; width: max-content;
  background: var(--branco); color: var(--grafite);
  font-size: 0.86rem; font-weight: 600; line-height: 1.25;
  padding: 0.45rem 0.7rem; border-radius: 0.7rem;
  box-shadow: 0 0.4rem 1.2rem rgba(10,12,16,0.25);
  border: 2px solid var(--cor);
  opacity: 0; transform: translate(-50%, 0.4rem) scale(0.9); transform-origin: 50% 100%;
  transition: opacity 0.25s, transform 0.25s;
}
.fala::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -0.4rem; border: 0.4rem solid transparent; border-top-color: var(--cor); }
.fala.visivel { opacity: 1; transform: translate(-50%, 0) scale(1); }

.zzz { position: absolute; bottom: 100%; left: 70%; height: 2rem; opacity: 0; transition: opacity 0.6s; }
.zzz.visivel { opacity: 1; }
.zzz span { position: absolute; bottom: 0; left: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; color: #4a5568; animation: zzz 3s infinite; opacity: 0; }
body.noite .zzz span { color: #c9d3e3; }
.zzz span:nth-child(1) { font-size: 0.9rem; }
.zzz span:nth-child(2) { font-size: 1.15rem; animation-delay: 1s; }
.zzz span:nth-child(3) { font-size: 1.4rem; animation-delay: 2s; }

/* nomes das salas, presos à cena */
.sala-nome { white-space: nowrap; }
.sala-nome b {
  display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grafite);
  border-left: 3px solid var(--cor); padding-left: 0.4rem;
}
.sala-nome span { display: block; font-size: 0.64rem; font-weight: 600; color: var(--cinza); padding-left: 0.55rem; }
.sala-nome b, .sala-nome span { text-shadow: 0 0 0.4rem rgba(255,255,255,0.95), 0 0 0.15rem rgba(255,255,255,0.95); }
.nucleo-nome b { color: var(--azul); font-size: 0.85rem; background: rgba(255,255,255,0.88); padding: 0.1rem 0.5rem; border-radius: 0.3rem; border: 0; text-shadow: none; }
body.noite .sala-nome b { color: var(--claro); }
body.noite .sala-nome span { color: #a7b0bf; }
body.noite .sala-nome b, body.noite .sala-nome span { text-shadow: 0 0 0.4rem rgba(10,12,16,0.95); }
body.noite .nucleo-nome b { background: rgba(10,12,16,0.8); color: #9fbaff; }

@keyframes pulsar { 50% { opacity: 0.35; } }
@keyframes alerta { 50% { filter: brightness(1.35); } }
@keyframes entrar { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
@keyframes zzz {
  0% { transform: translate(0, 0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(1.4rem, -2.6rem); opacity: 0; }
}

/* origem do status: ao vivo (hook/bot) × simulação (sem sinal há mais de 3 h) */
.card-fonte {
  display: flex; align-items: center; gap: 0.28rem; margin-top: 0.14rem;
  font-size: 0.56rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
.card-fonte::before { content: ''; width: 0.38rem; height: 0.38rem; border-radius: 50%; flex: none; }
.agente[data-fonte="real"] .card-fonte { color: var(--verde); }
.agente[data-fonte="real"] .card-fonte::before { background: var(--verde); animation: pulsar 1.6s infinite; }
.agente[data-fonte="sim"] .card-fonte { color: #c8ced8; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.1) 0 4px, rgba(255,255,255,0.03) 4px 8px); border-radius: 0.25rem; padding: 0.06rem 0.3rem; align-self: flex-start; width: fit-content; }
.agente[data-fonte="sim"] .card-fonte::before { border: 1.5px dashed #c8ced8; width: 0.3rem; height: 0.3rem; }
.agente[data-fonte="sim"] .card { border-top-style: dashed; background: rgba(13,16,22,0.8); }
.agente[data-fonte="sim"] .card-tarefa { font-style: italic; color: #b7bec9; }
.item-espera.simulado, .item-final.simulado { opacity: 0.62; }

/* HONESTO.md: sem sinal real = sem tarefa e sem barra; offline apagado; barra real sem % inventada */
.agente[data-fonte="sem-sinal"] .card-fonte { color: #8a93a3; }
.agente[data-fonte="sem-sinal"] .card-fonte::before { border: 1.5px solid #8a93a3; width: 0.3rem; height: 0.3rem; }
.agente[data-fonte="sem-sinal"] .card { border-top-color: #4A5160; background: rgba(13,16,22,0.78); }
.agente[data-status="offline"] .card { opacity: 0.7; }
.agente[data-status="offline"] .card-st { background: #4A5160; color: #c8ced8; }
.card.indeterminada .barra i { width: 35% !important; animation: andamento 1.8s ease-in-out infinite; }
.card.indeterminada .pct { min-width: auto; text-transform: uppercase; letter-spacing: 0.04em; }
@keyframes andamento { 0% { transform: translateX(-110%); } 100% { transform: translateX(300%); } }
#modo[data-modo="quieto"]::before { background: #8a93a3; }