/* Painel Prime Agents — menu lateral escuro, área clara, cartões, gráficos e escritório virtual.
   Cores da marca Prime: azul (#1f5eff) e laranja (#f2711c, sinal/destaque pontual). */
:root {
  --fundo: #f4f6fa; --superficie: #ffffff; --superficie-2: #f8fafc; --borda: #e3e8f0;
  --tinta: #0e1726; --tinta-2: #475467; --tinta-3: #64748b;
  --destaque: #1f5eff; --destaque-forte: #1747c7; --destaque-fundo: #e8efff;
  --laranja: #f2711c; --laranja-fundo: #fff1e6;
  --lateral: #0b1324; --lateral-2: #15203a; --lateral-borda: #26355a; --lateral-tinta: #c7d0e0; --lateral-tinta-3: #8c9ab3; --lateral-ativo: #1a2742;
  --cliente: #ffffff; --agente: #eef4ff; --equipe: #ecf8ef; --sistema: #f1f3f7;
  --bom: #15803d; --bom-fundo: #e7f7ee; --aviso: #8a5a00; --aviso-fundo: #fff4e5; --serio: #b4530f; --critico: #b42318; --roxo: #6d28d9; --roxo-fundo: #f1ebff;
  --raio: 14px; --sombra: 0 1px 2px rgba(16, 24, 40, .05);
  --fonte: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --fonte-titulo: "Space Grotesk", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0d121c; --superficie: #151c2b; --superficie-2: #111827; --borda: #263149;
    --tinta: #e8edf6; --tinta-2: #b6c0d2; --tinta-3: #8c99b0;
    --destaque: #6f9bff; --destaque-forte: #9ab8ff; --destaque-fundo: #1b2a4d;
    --laranja: #ff9a55; --laranja-fundo: #33200f;
    --lateral: #070c17; --lateral-2: #111a2e; --lateral-ativo: #17233d;
    --cliente: #1a2233; --agente: #1a2742; --equipe: #16291f; --sistema: #1c2333;
    --bom: #5ad48a; --bom-fundo: #12291c; --aviso: #f3c04f; --aviso-fundo: #2e2410; --serio: #ff9a55; --critico: #f17b72; --roxo: #b794f6; --roxo-fundo: #261b3d;
    --sombra: none;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 15px/1.5 var(--fonte); }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--destaque); }
:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
.carregando { padding: 40px; color: var(--tinta-3); }

/* Estrutura: menu lateral + conteúdo */
.casca { display: flex; flex-wrap: wrap; min-height: 100vh; }
.lateral-menu { flex: 1 1 240px; max-width: 264px; background: var(--lateral); color: var(--lateral-tinta); padding: 22px 14px; display: flex; flex-direction: column; gap: 20px; }
.marca { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.marca .logo { width: 34px; height: 34px; border-radius: 9px; background: var(--destaque); display: grid; place-items: center; color: #fff; font: 700 17px var(--fonte-titulo); flex: none; }
.marca .nome { display: flex; flex-direction: column; line-height: 1.2; }
.marca strong { color: #fff; font: 700 16px var(--fonte-titulo); }
.marca small { color: var(--lateral-tinta-3); font-size: 12px; }
.empresa-atual { margin: 0 8px; padding: 9px 12px; border-radius: 10px; background: var(--lateral-2); border: 1px solid var(--lateral-borda); color: #fff; font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.empresa-atual span { color: var(--lateral-tinta-3); font-weight: 400; font-size: 12px; }
.lateral-menu nav { display: flex; flex-direction: column; gap: 2px; }
.lateral-menu .grupo { color: var(--lateral-tinta-3); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 14px 12px 6px; }
.lateral-menu nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--lateral-tinta); text-decoration: none; font-size: 14px; font-weight: 500; }
.lateral-menu nav a:hover { background: var(--lateral-2); color: #fff; }
.lateral-menu nav a.ativo { background: var(--lateral-ativo); color: #fff; box-shadow: inset 3px 0 0 var(--laranja); }
.lateral-menu nav svg { flex: none; }
.lateral-menu .sair { margin-top: auto; background: none; border: 1px solid var(--lateral-borda); border-radius: 8px; padding: 9px 12px; cursor: pointer; color: var(--lateral-tinta); text-align: left; }
.lateral-menu .sair:hover { color: #fff; }
main { flex: 999 1 560px; min-width: 0; padding: 28px 32px 48px; max-width: 1320px; }
@media (max-width: 820px) {
  .lateral-menu { max-width: none; min-width: 0; flex-basis: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; }
  .lateral-menu .marca small, .empresa-atual span, .lateral-menu .grupo { display: none; }
  .empresa-atual { margin: 0; padding: 6px 10px; }
  .lateral-menu nav { order: 3; flex-basis: 100%; min-width: 0; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .lateral-menu nav a { white-space: nowrap; flex: none; }
  .lateral-menu .sair { order: 2; margin: 0 0 0 auto; padding: 6px 10px; }
  .sala .relogio { display: none; }
  main { padding: 20px 16px 40px; }
}
h1 { font: 700 26px/1.2 var(--fonte-titulo); letter-spacing: -.01em; margin: 2px 0 16px; }
h2 { font: 600 17px/1.3 var(--fonte-titulo); margin: 26px 0 12px; }
h3 { font-family: var(--fonte-titulo); }
.sub { color: var(--tinta-3); font-size: 13px; }
.cabecalho-tela { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.cabecalho-tela h1 { margin: 2px 0 0; }

/* Cartões e números */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px; min-width: 0; }
.cartao > h2:first-child, .cartao > .titulo-cartao:first-child { margin-top: 0; }
.titulo-cartao { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.titulo-cartao h2 { margin: 0; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.grade.kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.numero { display: flex; flex-direction: column; gap: 4px; }
.numero .rotulo { color: var(--tinta-2); font-size: 13px; font-weight: 500; }
.numero .valor { font: 600 30px/1.15 var(--fonte-titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.numero .valor small { font-size: 15px; font-weight: 500; color: var(--tinta-3); }
.numero .detalhe { color: var(--tinta-3); font-size: 13px; }
.duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.painel-graficos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 14px; margin-top: 14px; }
@media (max-width: 1000px) { .painel-graficos { grid-template-columns: minmax(0, 1fr); } }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borda); }
th { color: var(--tinta-3); font-weight: 600; font-size: 12px; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover td { background: var(--superficie-2); }
.tabela-rolagem { overflow-x: auto; }
.vazio { color: var(--tinta-3); font-size: 14px; }

/* Gráficos */
.grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafico .grade-linha { stroke: var(--borda); }
.grafico .eixo { stroke: var(--tinta-3); opacity: .5; }
.grafico text { fill: var(--tinta-3); font: 11px var(--fonte); }
.grafico .serie-agente { stroke: var(--destaque); }
.grafico .area-agente { fill: var(--destaque); opacity: .08; }
.grafico .serie-equipe { stroke: var(--laranja); }
.grafico .ponto { fill: var(--destaque); stroke: var(--superficie); }
.legenda { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--tinta-2); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.barras { display: flex; flex-direction: column; gap: 14px; }
.barras .linha-barra { display: flex; flex-direction: column; gap: 6px; }
.barras .cab { display: flex; justify-content: space-between; font-size: 14px; }
.barras .cab span:last-child { color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.trilho { height: 10px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 999px; overflow: hidden; }
.trilho span { display: block; height: 100%; border-radius: 999px; background: var(--destaque); }
.funil { display: flex; flex-direction: column; gap: 10px; }
.funil .etapa { display: grid; grid-template-columns: 110px minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: 14px; }
.funil .etapa > span:first-child { color: var(--tinta-2); }
.funil .etapa > span:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.funil .faixa { height: 24px; background: var(--superficie-2); border-radius: 6px; overflow: hidden; }
.funil .faixa span { display: block; height: 100%; background: var(--destaque); border-radius: 6px; }
.funil .faixa span.fim { background: var(--laranja); }
.rodape-cartao { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--borda); padding-top: 12px; margin-top: 14px; font-size: 13px; color: var(--tinta-2); }
.rodape-cartao strong { color: var(--tinta); }

/* Agentes agora (lista) */
.agentes-agora { display: flex; flex-direction: column; }
.agente-linha { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--borda); }
.agente-linha:last-child { border-bottom: 0; }
.avatar { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 700; flex: none; }
.agente-linha .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.agente-linha .info strong { font-size: 14px; }
.agente-linha .info span { font-size: 13px; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Filtros e botões */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.seg { display: inline-flex; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; background: var(--superficie); padding: 3px; gap: 2px; }
.seg button, .seg a { border: 0; background: none; padding: 7px 13px; cursor: pointer; color: var(--tinta-2); border-radius: 8px; font-size: 14px; text-decoration: none; }
.seg button.ativo, .seg a.ativo { background: var(--tinta); color: var(--superficie); font-weight: 600; }
input[type=search], input[type=email], input[type=password], input[type=tel], textarea, select {
  border: 1px solid var(--borda); background: var(--superficie); border-radius: 10px; padding: 9px 11px; }
input[type=search] { min-width: 260px; flex: 1; }
.botao { border: 1px solid var(--destaque); background: var(--destaque); color: #fff; border-radius: 10px; padding: 9px 15px; cursor: pointer; font-weight: 600; font-size: 14px; }
.botao:hover { background: var(--destaque-forte); border-color: var(--destaque-forte); }
.botao.leve { background: var(--superficie); color: var(--tinta); border-color: var(--borda); }
.botao.leve:hover { border-color: var(--destaque); color: var(--destaque); }
.botao:disabled { opacity: .6; cursor: default; }
a.botao { text-decoration: none; display: inline-block; }

/* Listas e selos */
.lista { display: flex; flex-direction: column; gap: 8px; }
.item { display: block; text-decoration: none; color: inherit; }
.item:hover { border-color: var(--destaque); }
.item .linha1 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.item .quem { font-weight: 600; }
.item .quando { margin-left: auto; color: var(--tinta-3); font-size: 13px; }
.item .ultima { color: var(--tinta-2); font-size: 14px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selo { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid transparent; color: var(--tinta-2); background: var(--sistema); white-space: nowrap; }
.selo.bom { color: var(--bom); background: var(--bom-fundo); }
.selo.aviso { color: var(--aviso); background: var(--aviso-fundo); }
.selo.serio { color: var(--serio); background: var(--laranja-fundo); }
.selo.critico { color: var(--critico); background: var(--laranja-fundo); }
.selo.roxo { color: var(--roxo); background: var(--roxo-fundo); }
.selo.azul { color: var(--destaque); background: var(--destaque-fundo); }

/* Conversa */
.cabeca { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.fio { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.msg { max-width: 78%; padding: 9px 13px; border-radius: 12px; border: 1px solid var(--borda); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg .autor { font-size: 12px; color: var(--tinta-3); margin-bottom: 2px; }
.msg.cliente { align-self: flex-start; background: var(--cliente); }
.msg.agente { align-self: flex-end; background: var(--agente); }
.msg.humano { align-self: flex-end; background: var(--equipe); }
.msg.sistema, .msg.evento { align-self: center; background: var(--sistema); font-size: 13px; color: var(--tinta-2); max-width: 90%; }
.msg.equipe-aviso { align-self: center; background: var(--sistema); border-style: dashed; font-size: 13px; max-width: 90%; }
.msg .marcas { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.msg img { max-width: 260px; max-height: 260px; border-radius: 8px; display: block; margin: 4px 0; }
.msg audio { display: block; margin: 4px 0; max-width: 100%; }

/* Testar o agente */
.teste { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 860px) { .teste { grid-template-columns: 1fr; } .msg { max-width: 92%; } input[type=search] { min-width: 0; } }
.janela { min-height: 380px; max-height: 62vh; overflow-y: auto; }
.envio { display: flex; gap: 8px; margin-top: 10px; }
.envio textarea { flex: 1; resize: vertical; min-height: 44px; }
.lateral .cartao + .cartao { margin-top: 12px; }
.lateral textarea { width: 100%; min-height: 64px; margin: 6px 0; }

/* Base de conhecimento */
.doc { white-space: pre-wrap; font-size: 14px; max-height: 70vh; overflow: auto; }

/* Login */
.tela-login { min-height: 100vh; display: grid; place-items: center; background: var(--lateral); padding: 16px; }
.login { width: 100%; max-width: 380px; }
.login h1 { margin-bottom: 4px; }
.login label { display: block; font-size: 13px; color: var(--tinta-2); margin-top: 14px; }
.login input { width: 100%; margin-top: 4px; }
.login .botao { width: 100%; margin-top: 20px; padding: 11px; }
.equipe-form { display: flex; flex-direction: column; gap: 14px; }
.agente-equipe { display: flex; flex-direction: column; gap: 14px; }
.agente-equipe .cab { display: flex; gap: 12px; align-items: center; }
.agente-equipe .cab > div { display: flex; flex-direction: column; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo .rotulo-campo { font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.campo input { width: 100%; }
input[type=text] { border: 1px solid var(--borda); background: var(--superficie); border-radius: 10px; padding: 9px 11px; }
.cracha small { font-size: 11px; color: #475467; padding: 0 8px; }
.equipe { max-width: 520px; }
.equipe label { display: grid; gap: 2px; margin-bottom: 14px; }
.equipe input { margin-top: 4px; }
.ok { color: var(--bom); font-size: 14px; margin-top: 10px; }
.erro { color: var(--critico); font-size: 14px; margin-top: 10px; }
.sem-topo { margin-top: 0; }
.bloco { margin-bottom: 10px; }
.link { background: none; border: 0; padding: 0; margin-top: 6px; color: var(--destaque); cursor: pointer; font-size: 13px; text-decoration: underline; }
.correcao textarea, .sugestao textarea { width: 100%; min-height: 90px; margin: 8px 0; }
.sugestao input[type=search] { width: 100%; margin-top: 8px; font-weight: 600; }
.sugestao .linha1 { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sugestao .quando { margin-left: auto; color: var(--tinta-3); font-size: 13px; }
ul { margin: 0; padding-left: 18px; }
@media print {
  .lateral-menu, .nao-imprimir { display: none !important; }
  body { background: #fff; color: #000; }
  main { max-width: none; padding: 0; }
  .cartao { box-shadow: none; break-inside: avoid; }
}

/* Reuniões */
.reuniao-fio .msg.gerente { align-self: center; background: var(--sistema); max-width: 86%; }
.reuniao-fio .msg.comercial { align-self: flex-start; background: var(--cliente); }
.reuniao-fio .msg.suporte { align-self: flex-end; background: var(--agente); }
.reuniao-fio .msg.financeiro { align-self: flex-start; background: var(--equipe); }
.reuniao-fio .msg.mercado { align-self: flex-end; background: var(--roxo-fundo); }
.proxima { box-shadow: inset 4px 0 0 var(--laranja); }
.agente-card h3 { margin: 0 0 6px; font-size: 16px; }
.agente-card h4 { margin: 10px 0 2px; font-size: 13px; color: var(--tinta-2); font-weight: 600; }
.agente-card ul { margin: 0; padding-left: 18px; }

/* Setores e analista de mercado */
.pasta h3 { margin: 0 0 4px; font-size: 16px; }
.pasta .filtros { margin: 12px 0 0; }
.abas { margin-bottom: 16px; flex-wrap: wrap; }
.barra { height: 6px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borda); overflow: hidden; margin-top: 8px; }
.barra span { display: block; height: 100%; background: var(--laranja); }
.barra span.bom { background: var(--bom); }
.linha1 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.linha1 .quando { margin-left: auto; color: var(--tinta-3); font-size: 13px; }
.cartao h4 { margin: 10px 0 4px; font-size: 13px; color: var(--tinta-2); }
.cartao ul { margin: 0; padding-left: 20px; }
.marcas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* Marketing: peças com arte, legenda e decisão */
.peca { display: grid; grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); gap: 20px; align-items: start; }
.peca:not(:has(.peca-arte)) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 820px) { .peca { grid-template-columns: minmax(0, 1fr); } }
.peca-arte { display: flex; flex-direction: column; gap: 8px; }
.arte-quadro svg.arte { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--borda); }
.nav-slides { justify-content: center; margin: 0; }
.peca-texto { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.peca-texto h3 { margin: 0; font-size: 18px; }
.legenda { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 10px; padding: 12px; max-height: 260px; overflow: auto; }
.hashtags { margin: 0; color: var(--destaque); font-size: 13px; }
.ajuste-pedido { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--laranja-fundo); color: var(--serio); font-size: 14px; }
.peca textarea { width: 100%; min-height: 80px; }
.acoes-peca { margin: 4px 0 0; }
.botao.perigo { color: var(--critico); }
.peca details summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.mesa.produzindo .braco-e { animation: tecla .34s steps(1) infinite; }
.mesa.produzindo .braco-d { animation: tecla .34s steps(1) infinite .17s; }
.mesa.produzindo .linha { animation: escrever 2.8s steps(7) infinite; fill: #f9a8d4; }
.mesa.produzindo .balao { border-color: #f472b6; } .mesa.produzindo .balao::after { border-top-color: #f472b6; } .mesa.produzindo .cracha-status { color: #be185d; }

/* Escritório virtual (estilo pixel, arte própria) */
.escritorio { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .escritorio { grid-template-columns: minmax(0, 1fr); } }
.sala { position: relative; min-height: 640px; border-radius: 14px; overflow: hidden; border: 4px solid #1e2a44;
  background-color: #2a3550; background-image: repeating-conic-gradient(#2f3b58 0% 25%, #283350 0% 50%); background-size: 48px 48px; }
.sala .parede { position: absolute; inset: 0 0 auto 0; height: 92px; background: #1a2440; border-bottom: 6px solid #141c33; }
.sala .placar { position: absolute; top: 20px; left: 28px; padding: 10px 14px; background: #0f172a; border: 4px solid #3a4a6e; color: #7fe3a8; font: 700 13px ui-monospace, Consolas, monospace; letter-spacing: .04em; }
.sala .relogio { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); padding: 10px 14px; background: #e6ecf7; border: 4px solid #3a4a6e; color: #0b1324; font: 700 13px ui-monospace, Consolas, monospace; }
.sala .placa-sala { position: absolute; top: 20px; right: 28px; padding: 10px 14px; background: #24304d; border: 4px solid #3a4a6e; color: #f2a65a; font: 700 12px ui-monospace, Consolas, monospace; letter-spacing: .04em; }
.sala .planta { position: absolute; bottom: 20px; width: 40px; height: 54px; background: #2f7d4f; border-radius: 50% 50% 8px 8px; border: 4px solid #1f5a37; }
.sala .mesas { position: relative; align-items: end; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 34px 24px; padding: 130px 28px 90px; }
.mesa { background: none; border: 0; padding: 0; cursor: pointer; color: #e6ecf7; text-align: center; display: flex; flex-direction: column; align-items: center; font: inherit; }
.mesa.selecionada { filter: drop-shadow(0 0 12px rgba(127, 166, 255, .85)); }
.mesa .balao { display: block; position: relative; max-width: 230px; min-height: 40px; background: #fff; color: #0b1324; font-size: 12px; font-weight: 600; line-height: 1.3; padding: 7px 10px; border-radius: 8px; border: 3px solid #8a97ad; margin-bottom: 6px; }
.mesa .balao::after { content: ""; position: absolute; left: 50%; bottom: -9px; margin-left: -6px; border: 6px solid transparent; border-top-color: #8a97ad; border-bottom: 0; }
.mesa.atendendo .balao::after { border-top-color: #3ddc84; } .mesa.pesquisando .balao::after { border-top-color: #b794f6; } .mesa.reuniao .balao::after { border-top-color: #f2a65a; }
.mesa .cena { display: block; image-rendering: pixelated; }
/* Digitando: mãos alternadas no teclado, linhas surgindo no monitor */
.cena .braco-e, .cena .braco-d, .cena .linha, .cena .olhos { transform-box: fill-box; }
.mesa.atendendo .braco-e, .mesa.pesquisando .braco-e { animation: tecla .34s steps(1) infinite; }
.mesa.atendendo .braco-d, .mesa.pesquisando .braco-d { animation: tecla .34s steps(1) infinite .17s; }
@keyframes tecla { 0% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
.cena .linha { transform-origin: left center; }
.mesa.atendendo .linha, .mesa.pesquisando .linha { animation: escrever 2.8s steps(7) infinite; }
.mesa .l2 { animation-delay: .7s !important; } .mesa .l3 { animation-delay: 1.4s !important; } .mesa .l4 { animation-delay: 2.1s !important; }
@keyframes escrever { 0% { transform: scaleX(0); } 80%, 100% { transform: scaleX(1); } }
.mesa.livre .linha { opacity: .25; }
.mesa.livre .tela { fill: #111827; }
.mesa.pesquisando .linha { fill: #c4a7ff; }
.mesa.reuniao .linha { fill: #f2a65a; }
.cena .olhos { transform-origin: center; animation: piscar 4.5s infinite; }
@keyframes piscar { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.15); } }
/* Crachá Prime Agents */
.cracha { margin-top: -6px; min-width: 150px; background: #f8fafc; color: #0b1324; border-radius: 6px; border: 2px solid #cbd5e1; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.cracha-topo { background: #1f5eff; color: #fff; font: 700 9px ui-monospace, Consolas, monospace; letter-spacing: .12em; padding: 3px 8px; }
.cracha strong { font: 700 12px var(--fonte); padding: 4px 8px 0; }
.cracha-status { font: 700 10px ui-monospace, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; padding: 1px 8px 5px; color: #64748b; }
.mesa.atendendo .balao { border-color: #3ddc84; } .mesa.atendendo .cracha-status { color: #15803d; }
.mesa.pesquisando .balao { border-color: #b794f6; } .mesa.pesquisando .cracha-status { color: #6d28d9; }
.mesa.reuniao .balao { border-color: #f2a65a; } .mesa.reuniao .cracha-status { color: #b4530f; }
@media (prefers-reduced-motion: reduce) { .mesa .cena * { animation: none !important; } }
.detalhe-agente { display: flex; flex-direction: column; gap: 12px; }
.detalhe-agente .cab { display: flex; align-items: center; gap: 12px; }
.detalhe-agente .cab strong { font: 600 18px var(--fonte-titulo); display: block; }
.mini-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mini-numeros div { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; }
.mini-numeros span { font-size: 12px; color: var(--tinta-3); }
.mini-numeros strong { font: 600 22px var(--fonte-titulo); }
.feed { display: flex; flex-direction: column; }
.feed div { display: flex; gap: 10px; font-size: 13px; line-height: 1.45; padding: 8px 0; border-bottom: 1px solid var(--borda); }
.feed div:last-child { border-bottom: 0; }
.feed time { font: 600 11px ui-monospace, Consolas, monospace; color: var(--tinta-3); flex: none; padding-top: 2px; }
.ao-vivo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--bom); letter-spacing: .04em; }
.ao-vivo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bom); animation: pulsar 1.6s infinite; }
@keyframes pulsar { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .ao-vivo::before { animation: none; } }
.conversa-aberta { font-size: 13px; padding: 8px 10px; border-radius: 8px; background: var(--superficie-2); border: 1px solid var(--borda); display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
.conversa-aberta:hover { border-color: var(--destaque); }