/* Tema: preto com neon (pedido do Angelo, 21/10/2026). Sempre escuro.
   --laranja / --laranja-forte guardam os nomes antigos, mas agora são o neon ciano;
   --neon-2 é o magenta dos detalhes. Texto em cima do neon é escuro (--sobre-neon). */
:root{
  color-scheme:dark;
  --laranja:#00e5ff; --laranja-forte:#00e5ff; --neon-2:#ff2bd6; --sobre-neon:#00151a;
  --fundo:#05060a; --superficie:#0b0e15; --superficie-2:#121724; --borda:#1d2638;
  --tinta:#e8f6ff; --tinta-2:#a8bfd6; --apagado:#6f84a0;
  --erro:#ff5c7a; --ok:#39ff9f;
  --brilho:0 0 0 1px rgba(0,229,255,.55),0 0 18px rgba(0,229,255,.35);
  --fonte:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SFMono-Regular",Consolas,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--tinta);font:15px/1.55 var(--fonte);background-color:var(--fundo);
  background-image:radial-gradient(900px 500px at 85% -10%,rgba(255,43,214,.10),transparent 60%),
    radial-gradient(800px 500px at -10% 110%,rgba(0,229,255,.10),transparent 60%),
    linear-gradient(rgba(0,229,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.035) 1px,transparent 1px);
  background-size:auto,auto,32px 32px,32px 32px;background-attachment:fixed}
::selection{background:rgba(0,229,255,.35)}
button,input,textarea,select{font:inherit;color:inherit}
[hidden]{display:none!important}
.link{background:none;border:0;padding:0;color:var(--laranja-forte);cursor:pointer;font-weight:600}

/* marca */
.marca{display:flex;align-items:center;gap:10px}
.marca img{width:36px;height:36px;border-radius:9px;object-fit:cover}
.marca b{display:block;font-size:16px}
.marca span{display:block;font-size:12px;color:var(--apagado)}

/* login */
.login{min-height:100%;display:grid;place-items:center;padding:16px}
.login-card{width:min(100%,400px);background:var(--superficie);border:1px solid var(--borda);border-radius:16px;padding:28px}
.login-card h1{font-size:20px;margin:22px 0 4px}
.login-card label{display:block;font-size:13px;font-weight:600;margin:14px 0 6px}
.login-card input{width:100%;height:42px;padding:8px 12px;border:1px solid var(--borda);border-radius:10px;background:var(--superficie)}
.login-card button{width:100%;height:44px;margin-top:20px;border:0;border-radius:10px;background:var(--laranja-forte);color:#fff;font-weight:650;cursor:pointer}
.erro{color:var(--erro);font-size:14px;min-height:1em;margin:10px 0 0}
input:focus,textarea:focus,select:focus{outline:2px solid var(--laranja);outline-offset:1px}

/* app */
.app{display:flex;height:100%}
.lateral{width:280px;flex:0 0 280px;display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--superficie);border-right:1px solid var(--borda);overflow:hidden}
.nova{height:40px;border:1px solid var(--borda);border-radius:10px;background:var(--superficie-2);font-weight:600;cursor:pointer}
.nova:hover{border-color:var(--laranja)}
.agentes{display:flex;flex-direction:column;gap:2px}
.agente{display:flex;align-items:center;gap:10px;padding:8px;border:0;border-radius:10px;background:none;text-align:left;cursor:pointer;width:100%}
.agente:hover{background:var(--superficie-2)}
.agente[aria-current="true"]{background:var(--superficie-2);box-shadow:inset 3px 0 0 var(--laranja)}
.agente img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 34px}
.agente b{display:block;font-size:14px}
.agente small{display:block;font-size:12px;color:var(--apagado)}
.agente.chefe{margin-bottom:6px;padding-bottom:12px;border-bottom:1px solid var(--borda);border-radius:10px 10px 0 0}
.hist-titulo{font-size:12px;font-weight:600;color:var(--apagado);text-transform:uppercase;letter-spacing:.04em}
.conversas{flex:1;overflow:auto;display:flex;flex-direction:column;gap:2px;min-height:0}
.conv{display:flex;align-items:center;gap:6px;border-radius:8px}
.conv button.abrir{flex:1;min-width:0;text-align:left;padding:7px 8px;border:0;background:none;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;border-radius:8px}
.conv:hover,.conv[aria-current="true"]{background:var(--superficie-2)}
.conv button.apagar{border:0;background:none;color:var(--apagado);cursor:pointer;padding:4px 8px;visibility:hidden}
.conv:hover button.apagar{visibility:visible}
.vazio{font-size:13px;color:var(--apagado);padding:4px 8px}
.rodape-lateral{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid var(--borda)}
.quem{display:flex;justify-content:space-between;font-size:14px}

.principal{flex:1;min-width:0;display:flex;flex-direction:column}
.topo{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--borda);background:var(--superficie)}
.menu{display:none;border:0;background:none;font-size:20px;cursor:pointer}
.topo-agente{display:flex;align-items:center;gap:10px;min-width:0}
.topo-agente img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.topo-agente b{display:block}
.topo-agente small{display:block;font-size:12px;color:var(--apagado)}
.selo{margin-left:auto;font-size:12px;font-weight:600;color:var(--laranja-forte);border:1px solid var(--laranja);border-radius:999px;padding:3px 10px}

.vista{flex:1;min-height:0;display:flex;flex-direction:column}
.mensagens{flex:1;overflow:auto;padding:24px 16px}
.mensagens>*{max-width:760px;margin-left:auto;margin-right:auto}
.boas-vindas{text-align:center;padding:12vh 16px 0}
.boas-vindas img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.boas-vindas h2{margin:14px 0 6px;font-size:22px}
.boas-vindas p{color:var(--tinta-2);margin:0}
.msg{display:flex;gap:12px;margin-bottom:22px}
.msg img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 30px}
.msg .corpo{min-width:0;overflow-wrap:anywhere}
.msg.pessoa{justify-content:flex-end}
.msg.pessoa .corpo{background:var(--superficie-2);padding:10px 14px;border-radius:16px 16px 4px 16px;max-width:85%;white-space:pre-wrap}
.msg .corpo p{margin:0 0 10px}
.msg .corpo p:last-child{margin-bottom:0}
.msg .corpo ul,.msg .corpo ol{margin:0 0 10px;padding-left:22px}
.msg .corpo code{background:var(--superficie-2);padding:1px 5px;border-radius:5px;font-size:13px}
.consultas{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.consultas span{font-size:12px;font-weight:600;color:var(--tinta-2);background:var(--superficie-2);border:1px solid var(--borda);border-radius:999px;padding:2px 10px}
.pensando{color:var(--apagado);font-style:italic}
.pensando::after{content:"";animation:pontos 1.4s steps(4,end) infinite}
@keyframes pontos{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@media (prefers-reduced-motion:reduce){.pensando::after{animation:none;content:"…"}}
.msg.erro-msg .corpo{color:var(--erro)}
.msg.ia .corpo{flex:1}
.acao{margin-top:12px;border:1px solid var(--laranja);border-radius:12px;padding:12px 14px;background:var(--superficie);display:flex;flex-direction:column;gap:6px}
.acao-titulo{font-weight:650}
.arg{display:flex;gap:10px;font-size:14px}
.arg span{color:var(--apagado);min-width:70px}
.arg b{font-weight:500;white-space:pre-wrap;overflow-wrap:anywhere}
.acao .linha{margin-top:6px}

.compor{display:flex;gap:8px;align-items:flex-end;max-width:760px;width:calc(100% - 32px);margin:0 auto;background:var(--superficie);border:1px solid var(--borda);border-radius:16px;padding:8px}
.compor textarea{flex:1;border:0;background:none;resize:none;max-height:200px;padding:8px;outline:none}
.compor button{width:40px;height:40px;border:0;border-radius:10px;background:var(--laranja-forte);color:#fff;cursor:pointer;font-size:16px}
.compor button:disabled{opacity:.5;cursor:not-allowed}
.compor button.voz{background:var(--superficie-2);color:var(--tinta);border:1px solid var(--borda)}
.compor button.voz[aria-pressed="true"]{background:var(--laranja);color:#fff;border-color:var(--laranja)}
.compor button#btMic[aria-pressed="true"]{animation:pulsa 1.2s ease-in-out infinite}
@keyframes pulsa{0%,100%{box-shadow:0 0 0 0 rgba(222,116,29,.5)}50%{box-shadow:0 0 0 8px rgba(222,116,29,0)}}
@media (prefers-reduced-motion:reduce){.compor button#btMic[aria-pressed="true"]{animation:none}}
/* bola da conversa por voz (estilo Siri): cores que giram, cresce com a voz */
#vistaChat{position:relative}
.orbe-tela{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 16px;background:color-mix(in srgb,var(--fundo) 84%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.orbe-fechar{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:1px solid var(--borda);
  background:var(--superficie);cursor:pointer;font-size:16px}
.orbe{--nivel:0;position:relative;width:190px;height:190px;padding:0;border:0;border-radius:50%;cursor:pointer;overflow:hidden;
  background:radial-gradient(circle,#1c1022 0%,#0a060d 72%);isolation:isolate;
  transform:scale(calc(1 + var(--nivel) * .2));
  box-shadow:0 0 calc(24px + var(--nivel) * 70px) rgba(255,110,60,.38),0 0 calc(10px + var(--nivel) * 30px) rgba(110,92,255,.3)}
.orbe:focus-visible{outline:3px solid var(--laranja);outline-offset:6px}
.orbe .miolo{position:absolute;inset:0;border-radius:50%}
.orbe .miolo span{position:absolute;inset:-25%;border-radius:50%;filter:blur(14px);mix-blend-mode:screen;opacity:.92;animation:gira 7s linear infinite}
.orbe .b1{background:radial-gradient(circle at 32% 36%,#ff7a1a 0 9%,transparent 36%)}
.orbe .b2{background:radial-gradient(circle at 74% 34%,#ff3d8b 0 8%,transparent 34%);animation-duration:9s!important;animation-direction:reverse!important}
.orbe .b3{background:radial-gradient(circle at 40% 76%,#6a5cff 0 10%,transparent 36%);animation-duration:11s!important}
.orbe .b4{background:radial-gradient(circle at 70% 66%,#2fd6ff 0 6%,transparent 28%);animation-duration:5.5s!important;animation-direction:reverse!important}
.orbe::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.5),transparent 30%),radial-gradient(circle,transparent 62%,rgba(255,255,255,.12) 71%,transparent 74%)}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes respira{0%,100%{transform:scale(.9)}50%{transform:scale(1.04)}}
.orbe.pensando .miolo{animation:respira 1.4s ease-in-out infinite}
.orbe.pensando .miolo span{animation-duration:1.8s!important}
.orbe.falando .miolo span{animation-duration:3.2s!important}
.orbe.parado .miolo{opacity:.6;animation:respira 3.6s ease-in-out infinite}
.orbe-nome{font-size:19px;font-weight:700;margin:26px 0 2px}
.orbe-estado{margin:0;color:var(--apagado);font-size:14px;min-height:1.4em}
.orbe-fala{margin:10px 0 0;max-width:540px;min-height:3.2em;text-align:center;color:var(--tinta-2);font-size:16px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (prefers-reduced-motion:reduce){.orbe .miolo,.orbe .miolo span{animation:none!important}}
.voz-status{text-align:center;font-size:13px;color:var(--laranja-forte);min-height:1.2em;margin:6px 16px 0}
.aviso-ia{text-align:center;font-size:12px;color:var(--apagado);margin:8px 16px 14px}

/* painel do gestor */
.vista.gestor{display:block;overflow:auto;padding:24px 16px}
.gestor>*{max-width:900px;margin-left:auto;margin-right:auto}
.gestor h2{font-size:20px;margin:0 0 4px}
.gestor h3{font-size:16px;margin:28px 0 10px}
.gestor .sub{color:var(--tinta-2);margin:0 0 8px}
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:16px}
.cartao{background:var(--superficie);border:1px solid var(--borda);border-radius:14px;padding:14px 16px}
.cartao span{display:block;font-size:12px;color:var(--apagado)}
.cartao b{display:block;font-size:22px;margin-top:2px}
.barra{height:8px;background:var(--superficie-2);border-radius:999px;margin-top:8px;overflow:hidden}
.barra i{display:block;height:100%;background:var(--laranja)}
.tabela{width:100%;border-collapse:collapse;background:var(--superficie);border:1px solid var(--borda);border-radius:14px;overflow:hidden}
.tabela th,.tabela td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--borda);font-size:14px;vertical-align:top}
.tabela th{font-size:12px;color:var(--apagado);font-weight:600}
.tabela tr:last-child td{border-bottom:0}
.rolar{overflow-x:auto}
.form-pessoa{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;background:var(--superficie);border:1px solid var(--borda);border-radius:14px;padding:16px}
.form-pessoa label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
.form-pessoa input,.form-pessoa select,.linha select{height:38px;padding:6px 10px;border:1px solid var(--borda);border-radius:9px;background:var(--superficie)}
.marcas{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;font-size:14px}
.marcas label{flex-direction:row;align-items:center;gap:6px;font-weight:400}
.botao{height:38px;padding:0 16px;border:0;border-radius:9px;background:var(--laranja-forte);color:#fff;font-weight:600;cursor:pointer}
.botao.sec{background:var(--superficie-2);color:var(--tinta);border:1px solid var(--borda)}
.linha{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.estado{font-size:12px;font-weight:600;border-radius:999px;padding:2px 10px;border:1px solid var(--borda);white-space:nowrap}
.estado.ok{color:var(--ok)}
.estado.breve{color:var(--apagado)}
.msg-gestor{font-size:14px;min-height:1.4em}
.app-cartao{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.app-cartao b{font-size:16px}
a.botao{display:inline-flex;align-items:center;text-decoration:none}

/* fixados (atalhos do agente), link do dashboard e anexos */
.bloco-fixados{display:flex;flex-direction:column;gap:6px}
.fixados{display:flex;flex-direction:column;gap:4px}
.fixado{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:1px solid var(--borda);border-radius:10px;
  background:transparent;color:var(--tinta);text-align:left;cursor:pointer;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:13px}
.fixado:hover{border-color:var(--laranja);box-shadow:0 0 12px rgba(0,229,255,.3)}
.fixado-icone{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;flex:0 0 24px;
  background:rgba(255,43,214,.14);color:var(--neon-2);font-size:13px;text-transform:none}
a.link.dashboard{text-decoration:none}
.lateral{overflow-y:auto}
.conversas{min-height:96px;flex:1 0 96px}
.rodape-lateral{align-items:flex-start}
.rodape-lateral .quem{align-self:stretch}
.fila-anexos{display:flex;flex-wrap:wrap;gap:6px;max-width:760px;width:calc(100% - 32px);margin:0 auto 8px}
.anexo-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;font-size:13px;padding:4px 6px 4px 10px;
  border:1px solid rgba(0,229,255,.4);border-radius:999px;background:rgba(0,229,255,.06)}
.anexo-chip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}
.anexo-chip.subindo{opacity:.65}
.anexo-chip button{border:0;background:none;color:var(--apagado);cursor:pointer;padding:0 4px}
.anexos-msg{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.msg img.anexo-foto{display:block;width:auto;height:auto;flex:none;max-width:220px;max-height:160px;border-radius:10px;
  border:1px solid var(--borda);object-fit:cover}
.anexo-arquivo{color:var(--laranja);text-decoration:none;font-size:14px;overflow-wrap:anywhere}

.tabela-msg{margin:4px 0 12px;font-size:14px}
.tabela-msg th,.tabela-msg td{padding:7px 10px}

/* ---------------------------------------------------------------- acabamento neon */
.lateral,.topo{background:rgba(9,12,19,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.topo{box-shadow:0 1px 0 rgba(0,229,255,.25)}
.lateral{box-shadow:1px 0 0 rgba(255,43,214,.18)}
.marca b{letter-spacing:.06em;text-transform:uppercase;
  background:linear-gradient(90deg,var(--laranja),var(--neon-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.marca span,.hist-titulo,.selo,.consultas span,.estado,.tabela th,.cartao span,.aviso-ia{font-family:var(--mono);letter-spacing:.03em}
.hist-titulo{color:var(--neon-2)}
.agente[aria-current="true"]{background:linear-gradient(90deg,rgba(0,229,255,.14),transparent);box-shadow:inset 3px 0 0 var(--laranja),inset 3px 0 12px rgba(0,229,255,.35)}
.agente[aria-current="true"] img,.topo-agente img{box-shadow:0 0 0 2px var(--laranja),0 0 14px rgba(0,229,255,.6)}
.agente:hover,.conv:hover,.conv[aria-current="true"]{background:rgba(0,229,255,.07)}
.nova{background:transparent;border-color:rgba(0,229,255,.45);color:var(--laranja)}
.nova:hover{box-shadow:var(--brilho)}
.selo{color:var(--neon-2);border-color:var(--neon-2);box-shadow:0 0 12px rgba(255,43,214,.35)}
.login-card,.cartao,.form-pessoa,.tabela,.acao{background:rgba(11,14,21,.88)}
.login-card{border-color:rgba(0,229,255,.35);box-shadow:0 0 40px rgba(0,229,255,.12),0 0 80px rgba(255,43,214,.06)}
.login-card button,.compor button,.botao{color:var(--sobre-neon);font-weight:700;background:var(--laranja);box-shadow:0 0 16px rgba(0,229,255,.45)}
.login-card button:hover,.compor button:hover:not(:disabled),.botao:hover{box-shadow:0 0 24px rgba(0,229,255,.75)}
.botao.sec,.compor button.voz{background:transparent;color:var(--tinta);border:1px solid var(--borda);box-shadow:none}
.compor button.voz[aria-pressed="true"]{background:var(--neon-2);border-color:var(--neon-2);color:#1a0016;box-shadow:0 0 16px rgba(255,43,214,.6)}
@keyframes pulsa{0%,100%{box-shadow:0 0 0 0 rgba(255,43,214,.6)}50%{box-shadow:0 0 0 8px rgba(255,43,214,0)}}
.compor{background:rgba(11,14,21,.92);border-color:rgba(0,229,255,.35);box-shadow:0 0 24px rgba(0,229,255,.12)}
.compor:focus-within{box-shadow:var(--brilho)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--laranja);outline-offset:1px;box-shadow:0 0 12px rgba(0,229,255,.35)}
.compor textarea:focus{box-shadow:none}
.msg.pessoa .corpo{background:linear-gradient(135deg,rgba(0,229,255,.16),rgba(255,43,214,.12));border:1px solid rgba(0,229,255,.3)}
.msg .corpo code{background:#000;color:var(--laranja);border:1px solid var(--borda)}
.consultas span{color:var(--laranja);border-color:rgba(0,229,255,.4);background:rgba(0,229,255,.06)}
.acao{border-color:var(--neon-2);box-shadow:0 0 18px rgba(255,43,214,.2)}
.boas-vindas img{box-shadow:0 0 0 2px var(--laranja),0 0 30px rgba(0,229,255,.5)}
.boas-vindas h2{text-shadow:0 0 18px rgba(0,229,255,.45)}
.barra i{background:linear-gradient(90deg,var(--laranja),var(--neon-2));box-shadow:0 0 10px rgba(0,229,255,.6)}
.cartao b{color:var(--laranja);text-shadow:0 0 12px rgba(0,229,255,.4)}
.link{color:var(--laranja)}
.orbe-tela{background:rgba(3,4,8,.86)}
.orbe-fechar{background:transparent;border-color:rgba(0,229,255,.4);color:var(--laranja)}
.voz-status{color:var(--neon-2)}
:focus-visible{outline-color:var(--laranja)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

@media (max-width:820px){
  .lateral{position:fixed;inset:0 auto 0 0;z-index:10;transform:translateX(-100%);transition:transform .2s}
  .lateral.aberta{transform:none;box-shadow:0 0 40px rgba(0,0,0,.25)}
  .menu{display:block}
  .topo{padding:10px 16px}
}