:root{--fundo:#f4f6f8;--cartao:#fff;--texto:#1d2733;--suave:#5b6876;--linha:#dde3e9;--marca:#0f6b5c;--marca2:#0b5246;
--perigo:#b42318;--atencao:#b54708;--ok:#067647;--info:#175cd3;--raio:10px}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--fundo);color:var(--texto);font-size:15px;line-height:1.45}
a{color:var(--marca)}
h1{font-size:22px;margin:0 0 14px}h2{font-size:17px;margin:22px 0 10px}h3{font-size:15px;margin:14px 0 8px}
.topo{background:var(--marca2);color:#fff;display:flex;align-items:center;gap:18px;padding:10px 20px;flex-wrap:wrap}
.topo a{color:#fff;text-decoration:none;opacity:.9}.topo a:hover{opacity:1;text-decoration:underline}
.topo .marca{font-weight:700;font-size:16px;margin-right:10px}.topo .dir{margin-left:auto;display:flex;gap:12px;align-items:center}
.topo form{margin:0}.topo button{background:transparent;border:1px solid #ffffff80;color:#fff;border-radius:6px;padding:4px 10px;cursor:pointer}
main{max-width:1200px;margin:0 auto;padding:20px 16px 40px}
.cartao{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);padding:16px;margin-bottom:16px}
.grade{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.kpi{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);padding:12px 14px}
.kpi b{display:block;font-size:26px}.kpi span{color:var(--suave);font-size:13px}
.kpi.perigo b{color:var(--perigo)}
table{width:100%;border-collapse:collapse;background:var(--cartao)}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--linha);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--suave);background:#f9fafb}
tr.linha:hover{background:#f6fbfa;cursor:pointer}
.tabela{overflow-x:auto;border:1px solid var(--linha);border-radius:var(--raio)}
label{display:block;font-size:13px;color:var(--suave);margin:8px 0 4px}
input,select,textarea{width:100%;font:inherit;padding:8px 10px;border:1px solid #c7d0d9;border-radius:7px;background:#fff;color:var(--texto)}
textarea{min-height:90px;resize:vertical}
.linha-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}.linha-form>*{flex:1 1 150px}
.btn{display:inline-block;background:var(--marca);color:#fff;border:0;border-radius:7px;padding:9px 16px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--marca2)}.btn.sec{background:#fff;color:var(--marca);border:1px solid var(--marca)}
.btn.peq{padding:5px 10px;font-size:13px}.btn.perigo{background:var(--perigo)}
.selo{display:inline-block;border-radius:999px;padding:1px 9px;font-size:12px;font-weight:600;white-space:nowrap}
.s-aberto{background:#e0eaff;color:#1d3fa8}.s-em_atendimento{background:#fef0c7;color:#93370d}.s-aguardando_cliente{background:#f2f4f7;color:#344054}
.s-resolvido{background:#dcfae6;color:#085d3a}.s-fechado{background:#eaecf0;color:#475467}
.c-critico{background:#fee4e2;color:#912018}.c-normal{background:#f2f4f7;color:#344054}
.p-ok{color:var(--ok)}.p-atencao{color:var(--atencao);font-weight:600}.p-atrasado,.p-violado{color:var(--perigo);font-weight:700}.p-cumprido{color:var(--ok);font-weight:600}
.aviso{padding:10px 12px;border-radius:8px;background:#ecfdf3;border:1px solid #abefc6;margin-bottom:12px}
.aviso.erro{background:#fef3f2;border-color:#fecdca;color:#912018}
.suave{color:var(--suave);font-size:13px}
.duas{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px}
@media (max-width:900px){.duas{grid-template-columns:1fr}}
.chat{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto;padding:4px}
.msg{max-width:85%;padding:9px 12px;border-radius:12px;border:1px solid var(--linha);background:#fff;white-space:pre-wrap;word-wrap:break-word}
.msg.atendente{align-self:flex-end;background:#e7f5f2;border-color:#b9e2d9}
.msg.usuario{align-self:flex-start}
.msg.interna{align-self:flex-end;background:#fffaeb;border:1px dashed #fec84b}
.msg.sistema{align-self:center;background:transparent;border:0;color:var(--suave);font-size:12.5px;text-align:center}
.msg .cab{font-size:12px;color:var(--suave);margin-bottom:3px;white-space:normal}
.msg .anexos a{display:inline-block;margin-top:6px;margin-right:8px;font-size:13px}
.login{max-width:380px;margin:9vh auto;background:#fff;border:1px solid var(--linha);border-radius:14px;padding:26px}
dl.info{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:14px}dl.info dt{color:var(--suave)}dl.info dd{margin:0}
details summary{cursor:pointer;font-weight:600;margin:6px 0}
/* widget */
body.widget{background:#fff;font-size:14px}
.w-topo{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--marca2);color:#fff;position:sticky;top:0;z-index:2}
.w-topo b{flex:1}.w-topo button,.w-topo a{background:transparent;border:1px solid #ffffff80;color:#fff;border-radius:6px;padding:3px 9px;cursor:pointer;font:inherit;font-size:13px;text-decoration:none}
.w-corpo{padding:12px 14px}
.w-item{display:block;border:1px solid var(--linha);border-radius:9px;padding:9px 11px;margin-bottom:8px;text-decoration:none;color:inherit;cursor:pointer}
.w-item:hover{border-color:var(--marca)}
.w-chat{max-height:none}
/* menu do topo */
.topo .menu{display:flex;gap:4px;flex-wrap:wrap}
.topo .menu a{padding:6px 10px;border-radius:7px;opacity:.85}
.topo .menu a.ativo{background:#ffffff26;opacity:1;font-weight:600}
.topo .menu a:hover{text-decoration:none;background:#ffffff1a}
/* caixa de atendimento */
body.pagina-caixa{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
body.pagina-caixa .topo{flex:0 0 auto}
main.caixa-main{flex:1 1 auto;min-height:0;max-width:none;padding:0;margin:0;width:100%;display:flex;flex-direction:column}
main.caixa-main>.aviso{margin:8px 12px}
.caixa{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);background:var(--cartao)}
.cx-lateral{display:flex;flex-direction:column;min-height:0;min-width:0;border-right:1px solid var(--linha);background:var(--cartao)}
.cx-filtros{padding:10px 12px 6px;border-bottom:1px solid var(--linha);display:flex;flex-direction:column;gap:6px}
.cx-busca-linha{display:flex;gap:6px}
.cx-busca-linha input{min-width:0;flex:1;border-radius:999px;padding:7px 14px;background:var(--fundo)}
.cx-selects{display:flex;gap:6px}.cx-selects select{flex:1;min-width:0;padding:5px 8px;font-size:13px}
.cx-icone{background:transparent;border:0;cursor:pointer;font-size:18px;line-height:1;padding:6px 8px;border-radius:8px;color:var(--suave);text-decoration:none}
.cx-icone:hover{background:var(--fundo)}
.cx-lista{flex:1 1 auto;min-height:0;overflow-y:auto}
.cx-abas{display:flex;gap:6px;overflow-x:auto;padding:8px 12px;border-bottom:1px solid var(--linha);position:sticky;top:0;background:var(--cartao);z-index:1;scrollbar-width:none}
.cx-aba{flex:0 0 auto;border:1px solid var(--linha);background:#fff;border-radius:999px;padding:4px 11px;font:inherit;font-size:13px;cursor:pointer;color:var(--texto)}
.cx-aba.ativa{background:var(--marca);border-color:var(--marca);color:#fff}
.cx-cont{display:inline-block;min-width:18px;padding:0 5px;border-radius:999px;background:#0000001a;font-size:11.5px;text-align:center}
.cx-aba.ativa .cx-cont{background:#ffffff40}
.cx-item{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid #eef1f4;text-decoration:none;color:inherit;cursor:pointer}
.cx-item:hover{background:#f6faf9}
.cx-item.ativo{background:#e7f5f2}
.cx-avatar{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:#d6ebe6;color:var(--marca2);display:flex;align-items:center;justify-content:center;font-weight:700}
.cx-avatar.grande{flex-basis:44px;width:44px;height:44px;font-size:18px}
.cx-item-corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cx-item-l1,.cx-item-l3{display:flex;align-items:center;gap:8px}
.cx-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-hora{font-size:12px;color:var(--suave);flex:0 0 auto}.cx-hora.nova{color:var(--marca);font-weight:700}
.cx-item-l2{font-size:12px;color:var(--suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-previa{flex:1;min-width:0;font-size:13.5px;color:#3a4654;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-item.nova .cx-previa{color:var(--texto);font-weight:600}
.cx-naolidas{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--marca);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.cx-item-l4{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px;font-size:12px}
.cx-item-l4 .selo{font-size:11px;padding:0 7px}
.cx-prazo-pt{display:inline-block;width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.pt-ok{background:#12b76a}.pt-atencao{background:#f79009}.pt-atrasado,.pt-violado{background:#d92d20}.pt-cumprido{background:#98a2b3}
.cx-nada{padding:24px 16px;color:var(--suave);text-align:center}
.cx-conversa{display:flex;flex-direction:column;min-height:0;min-width:0;background:#eef2f1}
.cx-vazia{margin:auto;text-align:center;color:var(--suave);max-width:360px;padding:24px}
.cx-vazia h2{color:var(--texto)}.cx-vazia-icone{font-size:44px}
.cx-cab{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;background:var(--cartao);border-bottom:1px solid var(--linha)}
.cx-quem{flex:1;min-width:0;font-size:14px}.cx-quem .suave{font-size:12.5px}
.cx-assunto{margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.cx-origem{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-prazo{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:13px;text-align:right}
.cx-prazo .cx-prazo-pt{margin-bottom:2px}
.cx-voltar{display:none}
.cx-acoes{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;padding:6px 14px 8px;background:var(--cartao);border-bottom:1px solid var(--linha)}
.cx-acoes label{margin:0;font-size:12px;display:flex;flex-direction:column;gap:2px;flex:0 1 180px}
.cx-acoes select{padding:4px 8px;font-size:13px}
.cx-msgs{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:6px}
.cx-dia{align-self:center;margin:8px 0}
.cx-dia span{background:#fff;border:1px solid var(--linha);color:var(--suave);font-size:12px;padding:2px 10px;border-radius:999px}
.cx-reg{align-self:center;font-size:12px;color:var(--suave);background:#ffffffb3;padding:3px 10px;border-radius:8px;text-align:center;max-width:90%}
.cx-bolha{max-width:min(72%,640px);padding:7px 11px 5px;border-radius:12px;background:#fff;border:1px solid #dfe5ea;box-shadow:0 1px 1px #0000000d;word-wrap:break-word}
.cx-bolha.usuario{align-self:flex-start;border-top-left-radius:4px}
.cx-bolha.atendente{align-self:flex-end;background:#d7efe9;border-color:#b9e2d9;border-top-right-radius:4px}
.cx-bolha.interna{align-self:flex-end;background:#fff6d6;border:1px dashed #f0b429;border-top-right-radius:4px}
.cx-autor{font-size:12px;font-weight:600;color:var(--marca2);margin-bottom:2px}
.cx-bolha.interna .cx-autor{color:#8a5a00}
.cx-txt{white-space:pre-wrap}
.cx-quando{font-size:11px;color:var(--suave);text-align:right;margin-top:2px}
.cx-anexos{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.cx-thumb{display:block;max-width:220px;max-height:160px;border-radius:8px;border:1px solid var(--linha);object-fit:cover}
.cx-doc{display:inline-flex;gap:6px;align-items:center;background:#ffffffb3;border:1px solid var(--linha);border-radius:8px;padding:6px 10px;font-size:13px;text-decoration:none}
.cx-erro{margin:6px 14px 0}
.cx-fechado{padding:6px 14px;background:#f2f4f7;text-align:center}
.cx-compor{display:flex;align-items:flex-end;gap:8px;padding:8px 12px;background:var(--cartao);border-top:1px solid var(--linha)}
.cx-compor.nota{background:#fffbeb;border-top-color:#f0b429}
.cx-texto{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cx-texto textarea{min-height:40px;max-height:160px;resize:none;border-radius:20px;padding:9px 14px;line-height:1.35}
.cx-compor.nota textarea{background:#fffdf5;border-color:#f0b429}
.cx-arquivo{font-size:12px;background:var(--fundo);border-radius:999px;padding:2px 10px;align-self:flex-start}
.cx-nota{margin:0 0 9px;font-size:12.5px;white-space:nowrap;display:flex;align-items:center;gap:4px;color:var(--suave);cursor:pointer}
.cx-nota input{width:auto}
.cx-clipe{margin-bottom:4px}
.cx-compor .btn{border-radius:20px;margin-bottom:1px}
@media (max-width:760px){
  .topo{gap:8px;padding:8px 12px}.topo .marca{font-size:14px}.topo .quem{display:none}
  .topo .menu{flex-wrap:nowrap;overflow-x:auto;order:3;width:100%}
  .caixa{grid-template-columns:minmax(0,1fr)}
  .topo .menu a{padding:5px 8px;font-size:14px}
  .cx-quem>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cx-quem .cx-cat,.cx-quem .cx-email{display:none}
  .cx-prazo{font-size:12px;max-width:34%}
  .cx-compor{gap:4px;padding:6px 8px}
  .cx-texto textarea{padding:8px 12px}
  .cx-conversa{display:none}
  .caixa.com-conversa .cx-lateral{display:none}
  .caixa.com-conversa .cx-conversa{display:flex}
  .cx-voltar{display:inline-block}
  .cx-cab{padding:8px 10px}.cx-avatar.grande{display:none}
  .cx-origem{display:none}
  .cx-prazo small{display:none}
  .cx-acoes{padding:6px 10px;gap:6px}.cx-acoes label{flex:1 1 30%}
  .cx-msgs{padding:10px}
  .cx-bolha{max-width:86%}
  .cx-nota{font-size:0;gap:0;margin-bottom:11px}.cx-nota::after{content:"Nota";font-size:11.5px;margin-left:2px}
  .cx-compor .btn{padding:8px 12px}
}
/* Resumo da triagem feita pelo assistente de IA do sistema de origem */
.cx-triagem{flex:0 0 auto;max-height:30vh;overflow-y:auto;margin:8px 14px 0;padding:10px 14px;border:1px solid #c9d8f2;border-left:4px solid #2f6fd6;border-radius:var(--raio);background:#f3f7ff;font-size:13.5px}
.cx-triagem p{margin:4px 0}
.cx-triagem-selos{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.selo.ia{background:#dbe7fb;color:#1d4fa3}
.selo.bug{background:#fde2e1;color:#a52a24}