/* BS Atendimento — casa própria do atendimento (chat.belosanto.com.br)
   CARBON dark-first; shell TRAVADO no mobile (o fim do "vai-e-volta"). */
/* Cores OFICIAIS do WhatsApp Web (regra Julio 28/08: "a roda já foi inventada").
   Escuro = WhatsApp dark; claro = WhatsApp light, direto dos valores deles. */
:root{
  --bg:#0b141a;          /* papel de parede do chat */
  --surface:#202c33;     /* cabeçalhos, compositor, painéis */
  --card:#111b21;        /* fundo da lista e cards */
  --card-hover:#2a3942;
  --text:#e9edef; --text-2:#d1d7db; --muted:#8696a0;
  --primary:#00a884; --primary-glow:rgba(0,168,132,.18);
  --grad:linear-gradient(#00a884,#00a884);
  --badge-text:#111b21;
  --green:#06cf9c; --red:#f15c6d; --yellow:#ffab3d; --blue:#53bdeb;
  --border:rgba(134,150,160,.15); --border-sub:rgba(134,150,160,.08);
  --bolha-in:#202c33; --bolha-out:#005c4b;
  --wall-dot:rgba(134,150,160,.10);
  --font:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#efeae2;          /* papel de parede claro do WhatsApp */
    --surface:#f0f2f5;
    --card:#ffffff;
    --card-hover:#f5f6f6;
    --text:#111b21; --text-2:#3b4a54; --muted:#667781;
    --primary:#008069; --primary-glow:rgba(0,128,105,.14);
    --grad:linear-gradient(#008069,#008069);
    --badge-text:#ffffff;
    --green:#008069; --red:#dc2626; --yellow:#b45309; --blue:#0284c7;
    --border:rgba(17,27,33,.14); --border-sub:rgba(17,27,33,.07);
    --bolha-in:#ffffff; --bolha-out:#d9fdd3;
    --wall-dot:rgba(17,27,33,.08);
  }
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{height:100%}
body{
  position:fixed; inset:0; overflow:hidden; overscroll-behavior:none;
  background:var(--bg); color:var(--text); font-family:var(--font); font-size:14px;
  -webkit-font-smoothing:antialiased; touch-action:manipulation;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
button:focus-visible,.inp:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.inp{background:var(--card);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:9px 12px;font-size:14px;font-family:inherit;width:100%}
.inp:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
.ico{font-size:16px;padding:8px;border-radius:50%;line-height:1;flex-shrink:0}
.ico:hover{background:var(--card-hover)}
.ico.ok{color:var(--green)}
.ico.on{background:var(--primary-glow);box-shadow:inset 0 0 0 1px var(--primary)}

/* ══ login ══ */
.login-wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px;z-index:50}
.login-card{width:100%;max-width:340px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px 24px;display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.login-logo{width:52px;height:52px;border-radius:12px;margin:0 auto}
.login-card h1{font-size:19px;font-weight:800;letter-spacing:-.5px;text-align:center}
.login-card h1 span{color:var(--primary)}
.login-sub{font-size:12px;color:var(--muted);text-align:center;margin-top:-8px;margin-bottom:6px}
.btn-pri{background:var(--grad);color:#fff;font-weight:800;padding:11px;border-radius:8px;font-size:14px}
.btn-pri:disabled{opacity:.6}
.login-erro{color:var(--red);font-size:12.5px;text-align:center}

/* ══ shell: 3 colunas no desktop ══ */
#app{display:flex;height:100dvh;height:var(--vvh,100dvh)}
.pane{display:flex;flex-direction:column;min-height:0;min-width:0}
#paneLista{width:350px;flex-shrink:0;border-right:1px solid var(--border);background:var(--card)}
#paneChat{flex:1;background:var(--bg)}
#paneCli{width:330px;flex-shrink:0;border-left:1px solid var(--border);background:var(--surface);overflow-y:auto}

/* ══ lista ══ */
.lista-topo{display:flex;align-items:center;gap:10px;padding:12px 14px 8px}
.topo-logo{width:30px;height:30px;border-radius:8px}
.topo-tit{flex:1;font-weight:800;font-size:15px;letter-spacing:-.3px;min-width:0;overflow:hidden}
.topo-tit,.topo-tit span{white-space:nowrap;text-overflow:ellipsis}
.topo-tit span{display:block;font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:0;overflow:hidden}
#chipPres{flex-shrink:0}
.busca-wrap{padding:4px 12px 8px}
.busca{border-radius:20px;padding:8px 14px;font-size:13px;background:var(--surface);border-color:transparent}
.embed .topo-logo{display:none} /* embutido no caixa: ganha espaço pro título não cortar */
.tabs{display:flex;gap:2px;padding:0 12px;border-bottom:1px solid var(--border)}
.tabs button{flex:1;padding:9px 4px;font-size:12.5px;font-weight:700;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.tabs button.on{color:var(--primary);border-bottom-color:var(--primary)}
.tabs b{font-size:10px;background:var(--card-hover);border-radius:8px;padding:1px 6px;margin-left:2px;font-weight:800}
.tabs b:empty{display:none}
.tabs button.on b{background:var(--primary);color:var(--badge-text)}
.chips{display:flex;gap:6px;padding:8px 12px 0;flex-wrap:wrap}
.chips:empty{display:none}
.chip{font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--border);border-radius:16px;padding:4px 10px;white-space:nowrap}
.chip.on{color:var(--primary);border-color:var(--primary);background:var(--primary-glow)}
.chip b{font-weight:800}
.lista{flex:1;overflow-y:auto;overscroll-behavior:contain;margin-top:8px;min-height:0}
.vazio{padding:30px 16px;text-align:center;color:var(--muted);font-size:12.5px}
.conv{display:flex;gap:10px;padding:10px 14px;cursor:pointer;align-items:center;border-bottom:1px solid var(--border-sub)}
.conv:hover{background:var(--card-hover)}
.conv.sel{background:var(--card-hover)}
.av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:700;flex-shrink:0;letter-spacing:.5px;user-select:none;position:relative}
.av i{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--card)}
.conv-mid{flex:1;min-width:0}
.conv-l1{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.conv-nome{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-hora{font-size:10.5px;color:var(--muted);white-space:nowrap;font-weight:600}
.conv-l2{display:flex;gap:6px;align-items:center;margin-top:2px}
.conv-l3{display:flex;gap:4px;align-items:center;margin-top:4px;overflow:hidden}
.conv-l3 .mchip{font-size:9px;padding:1.5px 6px}
.conv-prev{flex:1;font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nao-lidas{background:var(--primary);color:var(--badge-text);font-size:10px;font-weight:800;border-radius:10px;padding:1px 6px}
.mchip{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:8px;white-space:nowrap;flex-shrink:0}
.mchip.sla-ok{background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green)}
.mchip.sla-warn{background:color-mix(in srgb,var(--yellow) 15%,transparent);color:var(--yellow)}
.mchip.sla-crit{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red)}
.mchip.atd{background:color-mix(in srgb,var(--blue) 15%,transparent);color:var(--blue)}
.mchip.conta{background:var(--card-hover);color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.mchip.conta i{width:7px;height:7px;border-radius:50%;display:inline-block}
.equipe-h{padding:10px 14px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;color:var(--muted);display:flex;justify-content:space-between}
.equipe-h b{color:var(--text)}

/* ══ chat ══ */
.chat-vazio{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:13px}
.chat-vazio div{font-size:42px;opacity:.5}
#chatBox{display:flex;flex-direction:column;height:100%;min-height:0}
.chat-topo{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}
.chat-idem{flex:1;min-width:0;cursor:pointer}
#chNome{font-weight:800;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#chSub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.janela-tag{font-size:10px;font-weight:700;white-space:nowrap}
.msgs{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:14px 6%;display:flex;flex-direction:column;gap:5px;min-height:0;background-color:var(--bg);background-image:radial-gradient(var(--wall-dot) 1px,transparent 1.3px);background-size:24px 24px}
.dia{align-self:center;margin:10px 0 4px;background:var(--surface);border:1px solid var(--border-sub);color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.6px;padding:4px 12px;border-radius:8px}
.msg{max-width:76%;padding:7px 11px 8px;border-radius:10px;font-size:13.5px;line-height:1.45;word-break:break-word;white-space:pre-wrap;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.msg.in{align-self:flex-start;background:var(--bolha-in);border:1px solid var(--border-sub)}
.msg.out{align-self:flex-end;background:var(--bolha-out);color:var(--text)}
.msg.first.in{border-top-left-radius:3px}
.msg.first.out{border-top-right-radius:3px}
.msg.nota{align-self:center;max-width:88%;background:color-mix(in srgb,var(--yellow) 12%,var(--card));border:1px dashed var(--yellow);font-size:12px}
.autor{display:block;font-size:9px;font-weight:800;opacity:.8;margin-bottom:2px;text-transform:uppercase;letter-spacing:.4px}
.meta{float:right;margin:9px 0 0 10px;font-size:9.5px;line-height:1;white-space:nowrap;color:var(--muted)}
.msg.out .meta{color:color-mix(in srgb,var(--text) 62%,transparent)}
.msg img.midia,.msg video.midia{max-width:min(260px,100%);max-height:300px;border-radius:8px;display:block;cursor:pointer}
.msg audio{height:36px;max-width:230px}
.transc{font-size:11px;color:var(--muted);margin-top:3px}
.falhou{color:var(--red);font-size:10px;display:block;white-space:normal;max-width:220px;text-align:left}

/* responder citando */
.quote{border-left:3px solid var(--primary);background:color-mix(in srgb,var(--bg) 45%,transparent);border-radius:6px;padding:5px 9px;font-size:11.5px;opacity:.9;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.msg.out .quote{border-left-color:var(--green);background:color-mix(in srgb,var(--bg) 30%,transparent)}
#quoteBar{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--primary);border-radius:8px;padding:6px 8px;margin-bottom:6px;font-size:12px}
#quoteBar[hidden]{display:none}
#quoteBar .q-linha{font-size:10px;color:var(--primary);font-weight:800}
#quoteBar .q-linha::before{content:'↩ Respondendo'}
#quoteTxt{flex:1;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg{touch-action:pan-y;will-change:transform}
@media (hover: hover){ .msg{cursor:pointer} }

/* composer */
.composer{flex-shrink:0;background:var(--surface);border-top:1px solid var(--border);padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))}
.quick{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px;background:var(--surface);border-top:1px solid var(--border);flex-shrink:0}
.qr{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:5px 12px;font-size:11.5px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qr:hover{border-color:var(--primary);color:var(--primary)}
.envio{display:flex;gap:4px;align-items:flex-end}
.envio textarea{flex:1;resize:none;background:var(--card);border:1px solid var(--border);border-radius:20px;color:var(--text);padding:9px 14px;font-size:14px;font-family:inherit;max-height:110px;min-width:0}
.envio textarea:focus{outline:none;border-color:var(--primary)}
.send{width:40px;height:40px;border-radius:50%;background:var(--grad);color:#fff;font-size:15px;flex-shrink:0;font-weight:800}
.btn-puxar{width:100%;background:var(--grad);color:#fff;font-weight:800;padding:12px;border-radius:10px;font-size:14px}

/* ══ painel cliente ══ */
.cli-h{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border);font-size:13px;font-weight:800;position:sticky;top:0;background:var(--surface);z-index:2}
.cli-b{padding:12px 14px}
.cli-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cli-grid>div{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px 10px}
.cli-grid span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600}
.cli-grid b{font-size:13.5px;font-variant-numeric:tabular-nums}
.cli-sec{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;margin:14px 0 6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cli-alerta{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red);font-size:11px;font-weight:700;padding:8px 10px;border-radius:8px;margin-bottom:10px}
.ped{display:flex;align-items:center;gap:6px;font-size:11.5px;padding:6px 0;border-bottom:1px solid var(--border-sub)}
.ped b{min-width:52px}
.ped .val{flex:1;text-align:right;font-variant-numeric:tabular-nums}
.ped .ico{font-size:13px;padding:5px}
.btn-sec{border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:12px;font-weight:600;color:var(--text-2);width:100%;margin-top:8px}
.btn-sec:hover{border-color:var(--primary);color:var(--primary)}
.tagchip{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:10px;background:var(--card-hover);border:1px solid var(--border)}

/* ══ modais ══ */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:90;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;max-width:420px;width:100%;max-height:88dvh;overflow-y:auto}
.modal h3{font-size:15px;font-weight:800;margin-bottom:10px}
.modal .linha{display:flex;gap:8px;margin-top:12px}
.modal .linha .btn-pri,.modal .linha .btn-sec{flex:1;margin:0}
.etq{border:1px solid var(--etq,#2A3AFF);color:var(--etq,#2A3AFF);border-radius:14px;padding:4px 11px;font-size:12px;font-weight:700}
.etq.on{background:var(--etq,#2A3AFF);color:#fff}

/* ══ ✉️ e-mail no balcão ══ */
.badge-mini{position:absolute;top:2px;right:0;background:var(--red);color:#fff;font-size:8.5px;font-weight:800;border-radius:8px;padding:0 4px;min-width:13px;text-align:center}
#btnEmail{position:relative}
body.modo-email .tabs, body.modo-email #chipsWa{display:none}
#emailView{display:flex;flex-direction:column;height:100%;min-height:0}
#emailView[hidden]{display:none}
.em-corpo{flex:1;border:0;width:100%;background:#fff}
.em-corpo-txt{flex:1;overflow:auto;padding:16px;font-size:13.5px;white-space:pre-wrap;font-family:var(--font);margin:0}
.em-anexos{display:flex;gap:8px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid var(--border);background:var(--surface);flex-shrink:0}
.em-anexo{font-size:12px;color:var(--text-2);border:1px solid var(--border);border-radius:14px;padding:4px 11px;text-decoration:none}
.em-anexo:hover{border-color:var(--primary);color:var(--primary)}

/* toast */
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(80px);background:var(--card);border:1px solid var(--border);color:var(--text);padding:10px 18px;border-radius:10px;font-size:13px;box-shadow:0 8px 28px rgba(0,0,0,.35);transition:transform .25s ease;z-index:99;max-width:92vw;text-align:center}
#toast.show{transform:translateX(-50%) translateY(0)}
#toast.err{border-color:var(--red)}
#toast.okk{border-color:var(--green)}

@media (prefers-reduced-motion: reduce){ *{transition:none !important;animation:none !important} }

/* ══ desktop médio (821–1150): TRÊS colunas de verdade — nada por cima de nada ══ */
@media (max-width:1150px) and (min-width:821px){
  #paneLista{width:290px}
  #paneCli{width:300px}
  .cli-grid{grid-template-columns:1fr 1fr}
  .msgs{padding:14px 3%}
}
/* ══ mobile: navegação em telas (lista ⇄ conversa), shell travado ══ */
@media (max-width:820px){
  #paneLista{width:100%;border-right:none}
  #paneChat{position:fixed;inset:0;z-index:30;background:var(--bg);transform:translateX(102%);transition:transform .22s ease;height:var(--vvh,100dvh)}
  body.conv-aberta #paneChat{transform:translateX(0)}
  #paneCli{position:fixed;right:0;top:0;bottom:0;z-index:40;box-shadow:-8px 0 30px rgba(0,0,0,.35);height:var(--vvh,100dvh);width:min(360px,94vw)}
  .msgs{padding:12px 10px}
  .msg{max-width:86%;font-size:14px}
  .conv-nome{font-size:14.5px}
  .conv-prev{font-size:12.5px}
  .ico{font-size:17px;padding:9px}
  .lista-topo{padding-top:calc(12px + env(safe-area-inset-top,0px))}
  /* cabeçalho da conversa em DUAS linhas: identidade em cima, ações embaixo —
     antes o chip da janela empurrava os botões ✔️↔️ pra fora da tela */
  .chat-topo{padding-top:calc(8px + env(safe-area-inset-top,0px));flex-wrap:wrap;row-gap:2px}
  .chat-topo::after{content:"";flex-basis:100%;order:9;height:0}
  .janela-tag{order:10;margin-right:auto}
  .chat-topo .ico{order:11;padding:7px;font-size:16px}
  .chat-topo .so-mobile{order:0}
  /* compositor: ícones compactos pra caber tudo com o campo de digitar */
  .envio .ico{padding:7px;font-size:16px}
  .envio{gap:2px}
}
.so-mobile{display:none}
@media (max-width:820px){ .so-mobile{display:inline-flex} }

/* ══ 📊 CRM de indicadores ══ */
#crm{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;height:var(--vvh,100dvh)}
.crm-topo{display:flex;align-items:center;gap:10px;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top,0px));background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}
.crm-per{padding:0;margin-left:auto;flex-wrap:nowrap}
.crm-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px;max-width:980px;margin:0 auto;width:100%}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:14px}
.tile{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.tile span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600;margin-bottom:4px}
.tile b{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.tile i{display:block;font-size:10.5px;color:var(--muted);font-style:normal;margin-top:3px}
.gcard{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.gduo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:720px){ .gduo{grid-template-columns:1fr} }
.gtit{font-size:12px;font-weight:800;margin-bottom:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gleg{font-size:10.5px;font-weight:600;color:var(--muted);display:inline-flex;gap:8px;align-items:center;margin-left:auto}
.gleg i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:3px}
.gwrap{position:relative}
.glin{width:100%;height:auto;display:block}
.glin .grid{stroke:var(--border-sub);stroke-width:1}
.glin .gtx{fill:var(--muted);font-size:9px;font-family:var(--font)}
.gtip{position:absolute;top:2px;transform:translateX(-50%);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:4px 10px;font-size:11px;pointer-events:none;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.gdet{margin-top:8px}
.gdet summary{font-size:11px;color:var(--muted);cursor:pointer}
.brs{display:flex;flex-direction:column;gap:7px}
.br{display:flex;align-items:center;gap:8px}
.br-rot{width:34%;min-width:90px;font-size:11.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-flex;align-items:center;gap:5px}
.br-track{flex:1;height:14px;background:var(--card-hover);border-radius:4px;overflow:hidden}
.br-fill{display:block;height:100%;background:var(--primary);border-radius:0 4px 4px 0;min-width:2px}
.br-n{font-size:11.5px;font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
.hrs{display:flex;align-items:flex-end;gap:3px;height:96px}
.hr-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;height:100%}
.hr-col span{width:100%;background:var(--primary);border-radius:3px 3px 0 0;opacity:.85}
.hr-col i{font-size:8.5px;color:var(--muted);font-style:normal;height:10px}
.ctb{border-collapse:collapse;width:100%;font-size:12px}
.ctb th{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);text-align:left;padding:6px 10px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--card)}
.ctb td{padding:7px 10px;border-bottom:1px solid var(--border-sub);font-variant-numeric:tabular-nums}
.pres-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px;flex-shrink:0}
/* CRM v2 — molde Chatwoot/Zendesk */
.crm-subnav{display:flex;gap:2px;margin-bottom:14px;border-bottom:1px solid var(--border)}
.crm-subnav button{padding:9px 16px;font-size:12.5px;font-weight:700;color:var(--muted);border-bottom:2px solid transparent}
.crm-subnav button.on{color:var(--primary);border-bottom-color:var(--primary)}
.agora{display:flex;gap:0;background:var(--card);border:1px solid var(--border);border-radius:12px;margin-bottom:12px;overflow-x:auto}
.agora>div{flex:1;min-width:110px;padding:12px 16px;border-right:1px solid var(--border-sub)}
.agora>div:last-child{border-right:none}
.agora span{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.agora b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.agora b.alerta{color:var(--red)}
.tile-rodape{display:flex;gap:8px;align-items:baseline;margin-top:4px;flex-wrap:wrap}
.tile-rodape i{font-size:10px;color:var(--muted);font-style:normal}
.delta{font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:9px;white-space:nowrap}
.delta.bom{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.delta.ruim{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red)}
.delta.neutro{background:var(--card-hover);color:var(--muted)}
.share{display:inline-block;width:64px;height:8px;background:var(--card-hover);border-radius:4px;overflow:hidden;vertical-align:middle;margin-right:4px}
.share span{display:block;height:100%;background:var(--primary)}
.heat{display:flex;flex-direction:column;gap:2px;overflow-x:auto}
.heat-linha{display:flex;gap:2px;align-items:center}
.heat-linha span{width:30px;font-size:9.5px;color:var(--muted);flex-shrink:0}
.heat-linha i{flex:1;min-width:8px;height:14px;border-radius:2px;font-style:normal}
.heat-cab i{background:none !important;font-size:8.5px;color:var(--muted);text-align:center;height:auto}
.gnota{font-size:10.5px;color:var(--muted);margin:8px 0 0}
.crm-dia{width:auto;padding:3px 8px;font-size:11.5px;display:inline-block}

.resumo-dia{border-top:1px solid var(--border-sub);padding:10px 0}
.resumo-dia:first-child{border-top:none;padding-top:2px}
.resumo-cab{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;align-items:baseline}
.resumo-cab span{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.resumo-dia p{font-size:12.5px;color:var(--text-2);margin:5px 0 0;line-height:1.55}
.resumo-pend{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
#chipPres{margin-right:2px}
/* ✨ copiloto (02/09): cartão de sugestão acima do composer */
.copiloto{margin:0 12px 6px;padding:10px 12px;border:1px solid var(--border);border-left:3px solid var(--primary);border-radius:12px;background:var(--card);font-size:13.5px;line-height:1.35}
.copiloto.alerta{border-left-color:var(--yellow);background:color-mix(in srgb,var(--yellow) 8%,var(--card))}
.copiloto .cop-cab{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--muted);margin-bottom:4px}
.copiloto .cop-cab b{color:var(--primary)}
.copiloto .cop-txt{white-space:pre-wrap;word-break:break-word}
.copiloto .cop-meta{font-size:11px;color:var(--muted);margin-top:4px}
.copiloto .cop-btns{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.copiloto .cop-btns .chip.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.copiloto .cop-motivos{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}