/* Painel GO TERNARY — identidade oficial: carbono, papel, verde-sinal; Inter + JetBrains Mono.
   O menu (carbono) é a marca do produto; --acc é a cor de cada empresa atendida. */
@font-face{font-family:Inter;src:url(/fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --carbon:#0a0a0b;--surface-dark:#141716;--line-dark:#262a28;--tx-dark:#eef1ea;--mu-dark:#9aa39b;--signal:#80f58a;
  --bg:#f3f5f0;--sf:#fff;--sf2:#f7f8f4;--ink:#122019;--mu:#4b574f;--ln:#d8ddd2;--lnui:#858f87;
  --acc:#23602e;--acctx:var(--acc);--accs:color-mix(in srgb,var(--acc) 9%,var(--sf));
  --warn:#9a4a08;--warns:#fbeedd;--err:#a82a20;--errs:#fbe7e4;--info:#2b5aa8;--infos:#e6edf9;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:10px;--ease:cubic-bezier(.22,.61,.36,1);color-scheme:light}
@media (prefers-color-scheme:dark){:root{
  --bg:#0a0a0b;--sf:#141716;--sf2:#101312;--ink:#eef1ea;--mu:#9aa39b;--ln:#262a28;--lnui:#646e67;
  --acctx:color-mix(in srgb,var(--acc) 45%,#fff);--accs:color-mix(in srgb,var(--acc) 22%,var(--sf));
  --warn:#f0a35a;--warns:#2a1c0f;--err:#f08379;--errs:#2c1613;--info:#8fb2ee;--infos:#131d30;color-scheme:dark}}

*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 14.5px/1.5 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--acctx)}
:focus-visible{outline:2px solid var(--acctx);outline-offset:2px;border-radius:4px}
#rail :focus-visible{outline-color:var(--signal)}
b,strong,h1,h2,h3{font-weight:700}
h1,h2,h3{margin:0;letter-spacing:-.015em}
h1{font-size:27px;line-height:1.15}h2{font-size:16px}h3{font-size:15px}
.num,.mono{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mu{color:var(--mu)}.sm{font-size:12.5px}.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- estrutura ---------- */
#app{display:grid;grid-template-columns:256px minmax(0,1fr);min-height:100vh}
#rail{background:var(--carbon);color:var(--mu-dark);padding:18px 14px 16px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh;overflow-y:auto;border-right:1px solid var(--line-dark)}
.marca{display:flex;align-items:center;gap:10px;padding:2px 6px}
.marca img{width:32px;height:31px;flex:none}
.marca b{display:block;color:var(--tx-dark);letter-spacing:.06em;font-size:14px;line-height:1.2}
.marca span{font-size:12px}
#rail select{background:var(--surface-dark);border:1px solid var(--line-dark);color:var(--tx-dark);border-radius:8px;padding:8px 10px;width:100%}

/* a atendente: a presença dela é o centro do menu */
.atendente{background:var(--surface-dark);border:1px solid var(--line-dark);border-radius:14px;padding:14px;display:grid;gap:12px}
.at-topo{display:flex;align-items:center;gap:12px;min-width:0}
.avatar{width:52px;height:52px;border-radius:50%;flex:none;position:relative;display:grid;place-items:center;background:var(--line-dark);color:var(--tx-dark);font-weight:700;font-size:20px;box-shadow:0 0 0 2px var(--carbon),0 0 0 4px var(--mu-dark)}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.atendente.ativa .avatar{box-shadow:0 0 0 2px var(--carbon),0 0 0 4px var(--signal)}
.atendente.pausada .avatar{box-shadow:0 0 0 2px var(--carbon),0 0 0 4px #f0a35a}
.atendente.pausada .avatar img{filter:grayscale(.85)}
.at-topo b{display:block;color:var(--tx-dark);font-size:16px;line-height:1.2}
.at-topo span{font-size:12.5px;display:block}
.atendente.ativa .at-topo span{color:var(--signal)}
.atendente.pausada .at-topo span{color:#f0a35a}
.chave{display:flex;align-items:center;justify-content:space-between;gap:8px;background:none;border:1px solid var(--line-dark);border-radius:9px;padding:8px 11px;font-size:13px;color:var(--tx-dark);width:100%}
.chave:hover{border-color:var(--mu-dark)}
.sw{width:36px;height:20px;border-radius:99px;background:#6b756f;position:relative;flex:none;transition:background .18s var(--ease)}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .18s var(--ease)}
.sw.on{background:var(--signal)}.sw.on::after{left:18px;background:var(--carbon)}

#rail nav{display:flex;flex-direction:column;gap:2px}
.nv{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:8px;color:var(--mu-dark);text-decoration:none;position:relative}
.nv:hover{color:var(--tx-dark);background:var(--surface-dark)}
.nv.on{color:var(--carbon);background:var(--signal);font-weight:700}
.nv svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bd{margin-left:auto;background:#f0a35a;color:var(--carbon);border-radius:99px;font:500 11px var(--mono);padding:1px 7px;font-style:normal}
.rodape{margin-top:auto;display:grid;gap:7px;padding:12px 6px 0;border-top:1px solid var(--line-dark)}
.status{display:flex;align-items:center;gap:8px;font-size:12.5px}
.dot{width:8px;height:8px;border-radius:50%;background:#5c6560;flex:none}
.dot.ok{background:var(--signal)}.dot.warn{background:#f0a35a}.dot.err{background:#f08379}

main{min-width:0;padding:30px 36px 64px;max-width:1240px;width:100%}
.topo{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.topo p{margin:6px 0 0;color:var(--mu);max-width:70ch}

/* ---------- componentes ---------- */
.painel{background:var(--sf);border:1px solid var(--ln);border-radius:var(--r)}
.painel>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px 10px}
.corpo{padding:4px 18px 18px}
.grade{display:grid;gap:14px}
.g2{grid-template-columns:1.6fr 1fr}
/* indicadores: uma faixa só, dividida por linhas finas */
.g4{grid-template-columns:repeat(4,1fr);gap:0;background:var(--sf);border:1px solid var(--ln);border-radius:var(--r);overflow:hidden}
.g4 .kpi{border:0;border-radius:0;background:none;padding:16px 18px}
.g4 .kpi+.kpi{border-left:1px solid var(--ln)}
.kpi span{color:var(--mu);font-size:13px;display:block}
.kpi b{display:block;font:500 28px/1.2 var(--mono);letter-spacing:-.04em;margin:6px 0 2px}

.btn{border:1px solid var(--ln);background:var(--sf);border-radius:8px;padding:8px 14px;font-weight:700;font-size:13.5px;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:6px;min-height:36px;transition:border-color .18s var(--ease),background .18s var(--ease)}
.btn:hover{border-color:var(--ink)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.pri:hover{background:color-mix(in srgb,var(--acc) 86%,#000);border-color:transparent}
.btn.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--ln))}
.btn.err{color:var(--err);border-color:color-mix(in srgb,var(--err) 35%,var(--ln))}
.btn.peq{padding:5px 11px;font-size:13px;min-height:30px}
.chip{border:1px solid var(--ln);background:var(--sf);border-radius:99px;padding:5px 13px;font-size:13px;min-height:30px}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:700}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.tag{display:inline-block;border-radius:5px;padding:1px 7px;font-size:12px;background:var(--sf2);border:1px solid var(--ln);color:var(--mu)}
.est{display:inline-block;border-radius:5px;padding:2px 8px;font-size:12px;font-weight:700}
.e-novo{background:var(--infos);color:var(--info)}.e-conversando{background:var(--accs);color:var(--acctx)}
.e-qualificado{background:color-mix(in srgb,#6d4bc2 12%,var(--sf));color:color-mix(in srgb,#6d4bc2 70%,var(--ink))}
.e-reuniao{background:var(--warns);color:var(--warn)}.e-cliente{background:var(--acc);color:#fff}
.e-perdido{background:var(--sf2);color:var(--mu);outline:1px solid var(--ln)}
input,select,textarea{background:var(--sf);border:1px solid var(--lnui);border-radius:8px;padding:9px 11px;width:100%}
::placeholder{color:var(--mu);opacity:1}
input[type=color]{width:56px;height:40px;padding:3px}
input[type=checkbox]{width:auto}
input:hover,select:hover,textarea:hover{border-color:var(--mu)}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--acctx);outline:2px solid var(--acctx);outline-offset:1px}
textarea{resize:vertical}
label{display:block;font-size:13px;color:var(--mu);margin-bottom:5px}
.campo{margin-bottom:13px}
.linha{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.vazio{padding:36px 18px;text-align:center;color:var(--mu)}
.vazio b{display:block;color:var(--ink);margin-bottom:4px;font-size:15px}
table{width:100%;border-collapse:collapse}
th{font-size:12.5px;color:var(--mu);font-weight:400;text-align:left;padding:10px 14px;border-bottom:1px solid var(--ln);white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid var(--ln);vertical-align:middle}
tr:last-child td{border-bottom:0}
tr.cl{cursor:pointer}tr.cl:hover td{background:var(--sf2)}
.rolavel{overflow-x:auto}

/* ---------- precisa de você ---------- */
.aten{display:flex;gap:14px;align-items:center;padding:13px 18px;border:0;border-top:1px solid var(--ln);cursor:pointer;width:100%;text-align:left;background:none}
.aten:hover{background:var(--sf2)}
.aten i{width:10px;height:10px;border-radius:50%;flex:none;background:var(--mu)}
.aten.t-rascunho i,.aten.t-aguardando i,.aten.t-semresposta i,.aten.t-desligada i{background:var(--warn)}
.aten.t-erro i,.aten.t-conexao i{background:var(--err)}
.aten div{flex:1;min-width:0}
.aten b{display:block}.aten span{color:var(--mu);font-size:13px}
.aten em{font-style:normal;font-weight:700;font-size:13px;color:var(--acctx);border:1px solid var(--ln);border-radius:8px;padding:5px 11px;flex:none;background:var(--sf)}
.aten:hover em{border-color:var(--acctx)}
.emdia{display:flex;align-items:center;gap:14px;padding:6px 18px 18px;color:var(--mu)}
.emdia .avatar{width:44px;height:44px;box-shadow:0 0 0 2px var(--sf),0 0 0 4px var(--acctx);font-size:17px}
.emdia b{display:block;color:var(--ink)}

/* ---------- gráficos ---------- */
.barras{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:6px}
.bcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;height:100%;justify-content:flex-end}
.bpar{display:flex;align-items:flex-end;gap:2px;width:100%;height:118px;justify-content:center}
.bpar i{display:block;width:42%;max-width:13px;border-radius:2px 2px 0 0;min-height:2px}
.b-in{background:color-mix(in srgb,var(--ink) 55%,var(--sf))}.b-out{background:var(--acctx)}
.bcol small{font:500 10.5px var(--mono);color:var(--mu)}
.leg{display:flex;gap:14px;font-size:12.5px;color:var(--mu)}.leg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
.funil{display:flex;height:10px;border-radius:3px;overflow:hidden;background:var(--sf2);gap:2px}
.funil i{display:block;height:100%}
.flist{display:grid;gap:2px;margin-top:12px}
.fl{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 8px;border-radius:7px;border:0;background:none;width:100%}
.fl:hover{background:var(--sf2)}

/* ---------- conversas ---------- */
.conv{display:grid;grid-template-columns:320px minmax(0,1fr) 300px;height:calc(100vh - 156px);min-height:480px;gap:0;overflow:hidden}
.conv>section{min-width:0;display:flex;flex-direction:column;min-height:0}
.conv>section+section{border-left:1px solid var(--ln)}
.lcab{padding:12px;display:grid;gap:9px;border-bottom:1px solid var(--ln)}
.lista{overflow:auto;flex:1}
.it{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--ln);background:none;padding:12px 14px;position:relative}
.it:hover{background:var(--sf2)}
.it.on{background:var(--accs)}.it.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acctx)}
.it .l1{display:flex;justify-content:space-between;gap:8px;font-weight:700}
.it .l1 .num{font-weight:500}
.it .l2{color:var(--mu);font-size:13px}
.pill{border-radius:5px;font-size:11.5px;padding:2px 8px;font-weight:700}
.p-w{background:var(--warns);color:var(--warn)}.p-g{background:var(--accs);color:var(--acctx)}
.chat-cab{padding:12px 16px;border-bottom:1px solid var(--ln);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chat-cab h3{flex:1;min-width:120px}
.msgs{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:7px;background:var(--sf2)}
.b{max-width:76%;padding:9px 13px;border-radius:12px;white-space:pre-wrap;word-break:break-word;border:1px solid var(--ln);background:var(--sf)}
.b small{display:block;color:var(--mu);font-size:11px;margin-top:4px}
.b.in{align-self:flex-start;border-top-left-radius:3px}
.b.out{align-self:flex-end;background:var(--accs);border-color:color-mix(in srgb,var(--acc) 22%,var(--ln));border-top-right-radius:3px}
.b.humano{align-self:flex-end;background:var(--ink);color:var(--bg);border-color:var(--ink);border-top-right-radius:3px}
.b.humano small{color:color-mix(in srgb,var(--bg) 70%,var(--ink))}
.b.rascunho{align-self:flex-end;background:var(--warns);border:1px dashed var(--warn);border-top-right-radius:3px}
.b.rascunho small{color:var(--warn)}
.b .copia{margin-top:8px}
.dia{align-self:center;font:500 11.5px var(--mono);color:var(--mu);padding:2px 10px;margin:8px 0}
.comp{display:flex;gap:8px;padding:12px;border-top:1px solid var(--ln);align-items:flex-end}.comp textarea{min-height:42px;max-height:120px}
.ficha{overflow:auto;padding:16px}
.tl{margin:0;padding:0;list-style:none;border-left:1px solid var(--ln);margin-left:5px}
.tl li{padding:0 0 12px 14px;position:relative;font-size:13px}
.tl li::before{content:"";position:absolute;left:-4px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--acctx)}

/* ---------- funil em colunas ---------- */
.kb{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:10px;overflow-x:auto;padding-bottom:6px}
.kc{background:var(--sf2);border:1px solid var(--ln);border-radius:var(--r);display:flex;flex-direction:column;min-height:220px}
.kc.alvo{outline:2px dashed var(--acctx)}
.kc header{padding:10px 12px;display:flex;justify-content:space-between;align-items:center}
.kcards{padding:0 8px 8px;display:grid;gap:6px;align-content:start}
.kcard{border:1px solid var(--ln);border-radius:8px;padding:9px 10px;background:var(--sf);cursor:grab}
.kcard:hover{border-color:var(--acctx)}

/* ---------- janelas e avisos ---------- */
.cortina{position:fixed;inset:0;background:rgba(10,10,11,.6);display:grid;place-items:center;padding:16px;z-index:30}
.modal{background:var(--sf);border-radius:14px;border:1px solid var(--ln);width:min(520px,100%);max-height:92vh;overflow:auto;padding:22px}
.modal.larg{width:min(760px,100%)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--carbon);color:var(--tx-dark);border:1px solid var(--line-dark);padding:11px 16px;border-radius:9px;opacity:0;pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease);z-index:40;max-width:90vw}
.toast.on{opacity:1;transform:translateX(-50%)}
.qr{background:#fff;border-radius:10px;padding:8px;display:inline-block;line-height:0}
.logo{width:38px;height:38px;border-radius:9px;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:700;font-size:16px;flex:none}

/* ---------- celular ---------- */
.so-mob{display:none}
@media (max-width:980px){
  #app{grid-template-columns:1fr}
  #rail{position:fixed;top:auto;bottom:0;left:0;right:0;height:auto;flex-direction:row;padding:6px 8px calc(6px + env(safe-area-inset-bottom));z-index:20;border-right:0;border-top:1px solid var(--line-dark);overflow:visible}
  #rail .marca,#rail select,#rail .rodape,#rail .atendente,.nv.so-desk{display:none}
  .nv.so-mais{display:flex}
  #rail nav{flex-direction:row;width:100%;justify-content:space-around}
  .nv{flex:1 1 0;flex-direction:column;gap:3px;padding:7px 4px;font-size:11px;align-items:center;justify-content:center;min-width:0;min-height:48px}
  .nv.on{background:none;color:var(--signal)}
  .bd{position:absolute;top:0;right:0;margin:0}
  .mob-topo{display:flex!important}
  main{padding:14px 14px 104px}
  #mobtopo{margin:12px 14px 0}
  .btn,.chip{min-height:40px}
  .col-x{display:none}
  .modo{width:100%}
  .toast{bottom:84px}
  html{scroll-padding-bottom:90px}
  h1{font-size:23px}
  .g2{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr 1fr}
  .g4 .kpi+.kpi{border-left:0}.g4 .kpi:nth-child(even){border-left:1px solid var(--ln)}.g4 .kpi:nth-child(n+3){border-top:1px solid var(--ln)}
  .conv{grid-template-columns:1fr;height:calc(100vh - 300px);min-height:420px}
  .conv>section+section{border-left:0}
  .conv.ver-lista .chat-s,.conv.ver-lista .ficha-s{display:none}
  .conv.ver-chat .lista-s,.conv.ver-chat .ficha-s{display:none}
  .conv.ver-ficha .lista-s,.conv.ver-ficha .chat-s{display:none}
  .so-mob{display:inline-flex!important}
  .kb{grid-template-columns:repeat(6,230px)}
  .aten em{font-size:0;border:0;padding:0;background:none}.aten em::after{content:"›";font-size:24px;line-height:1;color:var(--mu)}
}
/* faixa da atendente no topo, só no celular */
.mob-topo{display:none;align-items:center;gap:12px;background:var(--carbon);color:var(--mu-dark);border-radius:var(--r);padding:10px 12px;margin-bottom:16px}
.mob-topo .avatar{width:40px;height:40px;font-size:16px}
.mob-topo.ativa .avatar{box-shadow:0 0 0 2px var(--carbon),0 0 0 4px var(--signal)}
.mob-topo.pausada .avatar{box-shadow:0 0 0 2px var(--carbon),0 0 0 4px #f0a35a}
.mob-topo b{display:block;color:var(--tx-dark);line-height:1.2}.mob-topo span{font-size:12.5px}
.mob-topo.ativa span{color:var(--signal)}.mob-topo.pausada span{color:#f0a35a}
.mob-topo div{flex:1;min-width:0}
.mob-topo .chave{width:auto;border:0;padding:10px 6px;min-height:44px}
@media (prefers-reduced-motion:reduce){*,::before,::after{transition:none!important}}

/* ---------- peças das revisões ---------- */
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pular{position:absolute;left:8px;top:-60px;z-index:50;background:var(--carbon);color:var(--tx-dark);border:1px solid var(--signal);border-radius:8px;padding:8px 14px;font-weight:700}
.pular:focus{top:8px}
main:focus{outline:none}
#col{min-width:0}
.so-mais{display:none}
/* a foto da atendente fora do menu escuro: anel na cor da empresa */
main .avatar{box-shadow:0 0 0 2px var(--sf),0 0 0 4px var(--acctx)}
.pt{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}
.lk{background:none;border:0;padding:0;font-weight:700;text-align:left;color:var(--ink)}
.lk:hover{text-decoration:underline}
.instr{display:block;margin:8px 0;padding-top:8px;border-top:1px dashed var(--warn);font-size:13px}
.dica{margin:0;padding:0 12px 10px}
.modo{margin-left:auto}
a.aten{text-decoration:none;color:var(--ink)}
a.aten:first-child{border-top:0}
a.aten svg{flex:none;color:var(--mu)}
details.avanc>summary{padding:14px 18px;cursor:pointer;font-weight:700}
details.avanc[open]>summary{border-bottom:1px solid var(--ln);margin-bottom:8px}
.kcard:focus-visible{outline:2px solid var(--acctx);outline-offset:2px}
@media (prefers-color-scheme:dark){
  .b.humano{background:var(--sf);color:var(--ink);border-color:var(--acctx)}
  .b.humano small{color:var(--mu)}
}

/* ---------- tela de entrada (modo nuvem) ---------- */
body.entrar{background:var(--carbon);color:var(--tx-dark);display:grid;place-items:center;min-height:100vh;padding:20px;color-scheme:dark;
  --sf:#141716;--ink:#eef1ea;--mu:#9aa39b;--lnui:#646e67;--acc:#80f58a;--acctx:#80f58a;--err:#f08379}
.entrar-caixa{width:min(400px,100%);padding:0;max-width:none}
.entrar-marca{display:flex;align-items:center;gap:12px;margin-bottom:36px}
.entrar-marca b{display:block;letter-spacing:.06em}.entrar-marca span{font-size:13px;color:var(--mu-dark)}
.entrar-caixa h1{margin-bottom:6px}
.entrar-caixa form{margin:24px 0 18px}
.entrar-caixa input{background:var(--surface-dark);color:var(--tx-dark);min-height:46px;font-size:16px}
.entrar-caixa .btn.pri{width:100%;justify-content:center;min-height:46px;background:var(--signal);border-color:var(--signal);color:var(--carbon);font-size:15px}
.entrar-caixa .btn.pri:hover{background:#9bf8a3}
.entrar-caixa .btn:disabled{opacity:.6;cursor:default}
.entrar-erro{color:var(--err);margin:0 0 12px;font-size:14px}
#sair{margin-top:6px}