/* AUSÊNCIA E TRANSFERÊNCIA + OBSERVAR/MONITOR (14/09/2026) — usado por public/atendimento.js.
   Densidade: nenhuma letra diminui (regra do dono); só espaço, quebra e rolagem.
   REVERTER: apagar o <link atendimento.css> e o <script atendimento.js> do index.html. */
.at-oculto{display:none!important;}
.at-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none;background:#9ca3af;}
.at-dot.at-ok{background:#16a34a;} .at-dot.at-pa{background:#f59e0b;} .at-dot.at-au{background:#9ca3af;}
.at-pill{display:inline-flex;align-items:center;gap:6px;border-radius:12px;padding:2px 9px;font-size:11.5px;font-weight:700;white-space:nowrap;vertical-align:middle;}
.at-pill.at-ok{background:var(--ok-bg);color:var(--ok-tx);} .at-pill.at-pa{background:var(--warn-bg);color:var(--warn-tx);} .at-pill.at-au{background:rgba(156,163,175,.2);color:var(--tx1);}
.at-warn{display:inline-block;background:var(--err-bg);color:var(--err-tx);border-radius:8px;padding:2px 8px;font-size:12px;font-weight:700;white-space:nowrap;}
.at-amb{display:inline-block;background:var(--warn-bg);color:var(--warn-tx);border-radius:8px;padding:2px 8px;font-size:12px;font-weight:700;white-space:nowrap;}
.at-sub{font-size:11.5px;color:var(--tx2);font-weight:400;}
.at-nowrap{white-space:nowrap;}

/* ---- COBRADOR OCIOSO +45M (dono 15/09) ---- */
/* Status "Ocioso +45M" em VERMELHO na coluna Status do painel (pedido do dono). */
.at-dot.at-oc{background:#be123c;}
.at-pill.at-oc{background:var(--err-bg);color:var(--err-tx);}
.oci-ult{font-variant-numeric:tabular-nums;}
/* aviso prévio na tela do cobrador (canto de baixo, não cobre a conversa) */
.oci-aviso{position:fixed;right:16px;bottom:16px;z-index:96;width:min(360px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--warn-tx);border-radius:12px;box-shadow:0 14px 40px rgba(10,10,40,.32);padding:12px 14px;display:grid;gap:7px;font-size:12.5px;color:var(--tx0);}
.oci-aviso b{color:var(--warn-tx);}
.oci-bt{display:flex;gap:8px;flex-wrap:wrap;}
/* tela de desconectado por inatividade (por cima do login) */
.oci-veu{position:fixed;inset:0;z-index:200;background:rgba(18,16,45,.62);display:flex;align-items:center;justify-content:center;padding:16px;}
.oci-card{background:var(--surface);border:1px solid var(--err-tx);border-radius:14px;box-shadow:0 22px 60px rgba(10,10,40,.45);width:min(400px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:20px;display:grid;gap:10px;}
.oci-card h3{margin:0;font-size:16px;color:var(--tx0);}
.oci-card p{margin:0;font-size:13px;color:var(--tx1);line-height:1.5;}
.oci-ic{width:40px;height:40px;border-radius:12px;background:var(--err-bg);color:var(--err-tx);display:grid;place-items:center;font-size:20px;}
.oci-fatos{background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12.5px;display:grid;gap:4px;color:var(--tx1);}
/* avisos do supervisor/dono: em qualquer tela, empilhados, "Ciente" fecha só para quem clicou */
.oci-sup{position:fixed;top:12px;right:12px;z-index:95;display:flex;flex-direction:column;gap:8px;align-items:flex-end;width:min(400px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow-y:auto;}
.oci-sup-item{position:relative;width:100%;background:var(--surface);border:1px solid var(--err-tx);border-radius:12px;box-shadow:0 14px 40px rgba(10,10,40,.3);padding:11px 30px 11px 12px;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;}
.oci-sup-ic{width:34px;height:34px;border-radius:10px;background:var(--err-bg);color:var(--err-tx);display:grid;place-items:center;}
.oci-sup-item h4{margin:0;font-size:13.5px;color:var(--tx0);}
.oci-sup-item p{margin:3px 0 8px;font-size:12.5px;color:var(--tx1);line-height:1.45;}
/* resumo da devolução automática ao cesto (lib/cestoauto.js) dentro do aviso de ocioso */
.oci-sup-item p.oci-cesto{margin:-4px 0 8px;font-size:12px;color:var(--tx0);background:var(--bg1,rgba(127,127,160,.1));border-radius:8px;padding:5px 8px;}
.oci-sup-item p.oci-cesto i{margin-right:4px;opacity:.8;}
/* AVISO DO CESTO AGRUPADO (mockup 28/09, chave `cestoAvisoAgrupado`, nasce desligada): as áreas
   ficam DENTRO do cartão, em vez de um cartão por área. Sem a chave nada disto é renderizado. */
.oci-areas{margin:0 0 8px;border-top:1px solid var(--bd,rgba(127,127,160,.25));padding-top:6px;}
.oci-ar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:9px;align-items:center;font-size:12.2px;padding:2px 0;}
.oci-ar b{font-weight:600;color:var(--tx0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.oci-ar .n{font-variant-numeric:tabular-nums;font-weight:700;color:var(--tx0);}
.oci-ar .t{color:var(--tx1);min-width:64px;text-align:right;}
.oci-ar.dim b,.oci-ar.dim .n{font-weight:400;color:var(--tx1);}
.oci-sup-item.oci-grave{border-color:var(--err-tx);border-width:2px;}
.oci-sup-item p.oci-nota{margin:7px 0 0;font-size:11.5px;color:var(--tx1);}
.oci-bt .btn.ruim{background:var(--err-bg);border-color:var(--err-tx);color:var(--err-tx);}
/* AVISO PASSAGEIRO (dono 29/09): entra deslizando e não fica grudado — quem o tira da tela
   é o relogio de `cestoAvisoSegundos`, no ociArmarSaida(). */
.oci-sup-item.oci-pass{animation:ociPassEntra .22s ease-out;}
@keyframes ociPassEntra{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.oci-sup-item.oci-pass{animation:none;}}
/* X no canto (dono 16/09): mesmo efeito do "Ciente" — fecha só para quem clicou */
.oci-x{position:absolute;top:6px;right:6px;width:24px;height:24px;line-height:1;border:0;border-radius:8px;background:transparent;color:var(--tx1);font-size:18px;cursor:pointer;display:grid;place-items:center;}
.oci-x:hover{background:var(--err-bg);color:var(--err-tx);}
.oci-x:focus-visible{outline:2px solid var(--err-tx);outline-offset:1px;}

/* ---- bolhas: "Enviado por" + nota de transferência ---- */
.bub-autor{font-size:11px;opacity:.82;text-align:right;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dia-sep{position:sticky;top:0;z-index:2;align-self:center;margin:6px 0 2px;pointer-events:none;}
.dia-sep span{display:inline-block;background:#fff;color:#4a5068;font-size:12px;font-weight:600;padding:4px 12px;border-radius:8px;box-shadow:0 1px 2px rgba(20,24,40,.14);}
.at-sys{align-self:center;text-align:center;max-width:92%;margin:4px 0;}
.at-sys.at-sys-acao span{background:var(--ok-bg)!important;border-color:rgba(22,163,74,.4)!important;color:var(--ok-tx)!important;}
/* tela Etiquetas: "Ao marcar esta etiqueta:" + ⚙ na etiqueta com ação (dono 15/09) */
.at-etq-acao{flex-basis:100%;display:flex;flex-direction:column;gap:3px;padding:6px 9px;margin:4px 0;border:1px dashed var(--line2);border-radius:10px;font-size:12.5px;color:var(--tx1);}
.at-etq-acao label{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.at-etq-acao select{width:auto;max-width:100%;padding:5px 8px;font-size:12.5px;}
.at-etq-acao small{color:var(--tx2);font-size:11.5px;line-height:1.35;}
.at-etq-acao-ic{font-size:12px;margin:0 2px;cursor:help;}
.at-sys span{display:inline-block;background:var(--warn-bg);border:1px solid rgba(245,158,11,.38);color:var(--warn-tx);border-radius:10px;padding:5px 10px;font-size:12px;line-height:1.45;overflow-wrap:anywhere;}

/* ---- cabeçalho da conversa: responsável, Transferir, Observar ---- */
#cresp{font-size:12px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
#cresp b{color:var(--tx0);font-weight:600;}
.at-sem{color:var(--warn-tx);font-weight:600;}
.at-head{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;}
.at-chip{border-color:rgba(245,158,11,.5)!important;color:var(--warn-tx)!important;}
.at-obs{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:8px 16px;background:rgba(59,130,246,.13);border-bottom:1px solid rgba(59,130,246,.38);font-size:13px;color:var(--tx0);}
.at-obs-txt{flex:1;min-width:min(240px,100%);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.at-obs-txt > .ti{font-size:17px;color:var(--info-tx,#93c5fd);}
.at-obs-bt{display:flex;gap:6px;flex-wrap:wrap;}
.at-obs-foot{color:var(--tx1);}
/* Atendida pelo PARCEIRO (23/09): mesma tarja do "Observando", em âmbar — é aviso, não bloqueio. */
.at-obs.at-parceiro{background:rgba(245,158,11,.14);border-bottom-color:rgba(245,158,11,.42);}
.at-obs.at-parceiro .at-obs-txt > .ti{color:var(--warn-tx,#fbbf24);}

/* ---- dropdown "Transferir ▾" ---- */
.at-dd{position:fixed;z-index:320;width:290px;max-width:calc(100vw - 16px);background:var(--surface);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--sh2);padding:8px;overflow:auto;}
.at-dd-lbl{font-size:11px;font-weight:700;color:var(--tx2);letter-spacing:.4px;text-transform:uppercase;padding:7px 8px 3px;}
.at-dd-mot{display:flex;flex-direction:column;gap:5px;padding:0 8px 4px;}
.at-dd-mot select,.at-dd-mot input{padding:6px 9px;font-size:13px;}
.at-dd-r{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:8px;border-radius:8px;border:0;background:transparent;color:var(--tx0);font-size:13px;cursor:pointer;text-align:left;}
.at-dd-r:hover:not(:disabled),.at-dd-r:focus-visible{background:var(--surface3);outline:none;}
.at-dd-r:disabled{opacity:.55;cursor:not-allowed;}
.at-dd-r small{color:var(--tx2);white-space:nowrap;flex:none;}
.at-dd-nome{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.at-dd-vazio{padding:8px;font-size:12.5px;color:var(--tx2);}
.at-dd-foot{border-top:1px solid var(--line);margin-top:6px;padding:8px 4px 2px;}
.at-dd-foot .btn{width:100%;justify-content:center;}
.at-dd .est-tela{padding:18px 10px;}

/* ---- rodapé do menu: status do cobrador / resumo da equipe ---- */
#meDisp{margin:6px 0 2px;}
.at-me-lbl{font-size:11px;color:#fff;opacity:.82;padding:0 2px;}
.at-me-st{display:flex;align-items:center;gap:7px;width:100%;margin-top:4px;border:0;border-radius:9px;padding:6px 9px;background:#fff;color:#1f2340;font-size:13px;font-weight:600;cursor:pointer;position:relative;}
.at-me-st .at-car{margin-left:auto;}
.at-me-st:focus-visible,.at-me-eq:focus-visible{outline:2px solid #fff;outline-offset:2px;}
#meDisp{position:relative;}
.at-me-menu{position:absolute;left:0;right:0;bottom:calc(100% - 14px);background:#fff;border-radius:10px;box-shadow:0 8px 24px rgba(10,10,40,.4);padding:5px;z-index:80;}
.at-me-menu button{display:flex;gap:7px;align-items:center;width:100%;border:0;background:transparent;padding:7px 8px;border-radius:7px;font-size:13px;font-weight:500;color:#1f2340;cursor:pointer;text-align:left;}
.at-me-menu button:hover,.at-me-menu button:focus-visible{background:#eef0fb;outline:none;}
.at-me-dica{font-size:11px;color:#fff;opacity:.78;margin-top:5px;line-height:1.35;padding:0 2px;}
.at-me-eq{display:flex;align-items:center;gap:7px;width:100%;border:0;border-radius:9px;padding:5px 8px;background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:#fff;font-size:12px;font-weight:600;cursor:pointer;text-align:left;}
.at-me-eq span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.at-me-eq:hover{background:rgba(255,255,255,.2);}

/* ---- tela Equipe em atendimento ---- */
.at-filtros{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.at-filtros select,.at-filtros input{width:auto;min-width:0;max-width:100%;padding:7px 10px;font-size:13px;}
.at-f{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tx1);}
.at-alert{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--warn-bg);border:1px solid rgba(245,158,11,.45);border-radius:12px;padding:12px 14px;margin-bottom:14px;}
.at-alert-ic{font-size:22px;color:var(--warn-tx);}
.at-alert-txt{flex:1;min-width:min(240px,100%);color:var(--tx0);}
.at-alert-txt .at-sub{color:var(--warn-tx);font-size:12.5px;margin-top:2px;}
.at-tab{overflow:auto;}
.at-tab td{vertical-align:middle;}
.at-acoes{white-space:nowrap;text-align:right;}
.at-acoes .btn{margin-left:6px;}
.at-stsel{width:auto!important;padding:5px 8px!important;font-size:12.5px!important;}
.at-link{border:0;background:transparent;color:var(--tx0);font-size:13.5px;font-weight:700;cursor:pointer;padding:0;text-align:left;}
.at-link:hover,.at-link:focus-visible{text-decoration:underline;outline:none;}
/* Carteira + Andamento do dia (dono 24/09) — no lugar de "Abertas"/"Não lidos".
   Nenhuma letra menor que o .at-sub que já existe (regra do dono). */
.at-cart{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;}
.at-andcel{min-width:196px;}
.at-and{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center;}
.at-tr{height:9px;min-width:54px;background:var(--surface3,rgba(127,127,160,.18));border-radius:5px;overflow:hidden;display:flex;}
.at-tr i{display:block;height:9px;}
.at-tr .at-i1{background:var(--ok,#10b981);}
.at-tr .at-i2{background:var(--warn,#f59e0b);}
.at-leg{font-size:11.5px;color:var(--tx2);white-space:nowrap;line-height:1.35;}
.at-leg b{font-variant-numeric:tabular-nums;color:var(--tx0);}
.at-leg b.at-leg-fora{color:var(--err-tx);}
.at-selo0{display:inline-block;margin-top:5px;background:var(--err-bg);color:var(--err-tx);border-radius:6px;padding:1px 8px;font-size:11.5px;font-weight:700;white-space:nowrap;}
tr.at-linha-fora td{background:rgba(245,158,11,.07);}
tr.at-linha-on td{box-shadow:inset 0 -2px 0 var(--brand);}
.at-nota{margin-top:12px;line-height:1.5;}
.at-hist-sub{margin:0 0 10px;}
/* ---- histórico de transferências: busca, páginas numeradas e cartões (29/09) ----
   Só vale quando o servidor devolve `paginado:true` (chave config.historicoPaginado). Com a
   chave desligada nada aqui é usado, fora a tarja .at-tg da coluna Tipo. */
.eh-q{min-width:min(260px,100%);}
/* Com rodapé, o painel deixa de ser o container de rolagem: quem rola de lado passa a ser o
   .eh-scroll, e só assim o position:sticky do rodapé vale contra a janela. */
.at-tab.eh-card-wrap{overflow:visible!important;position:relative;}
.at-tab.eh-ocupado{position:relative;}
.eh-scroll{overflow:auto;}
.eh-rod{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;background:var(--surface);border-top:1px solid var(--line);border-radius:0 0 var(--r) var(--r);padding:10px 12px;}
.eh-rod-tx{font-size:12.6px;color:var(--tx2);font-variant-numeric:tabular-nums;}
.eh-rod-tx b{color:var(--tx0);}
.eh-pag{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.eh-pg{min-width:33px;height:33px;padding:0 9px;border:1px solid var(--line);background:var(--surface);border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-variant-numeric:tabular-nums;color:var(--tx0);cursor:pointer;}
.eh-pg:hover:not(:disabled),.eh-pg:focus-visible{border-color:var(--brand);outline:none;}
.eh-pg.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700;}
.eh-pg:disabled{color:var(--tx2);opacity:.5;cursor:default;}
.eh-pg.eh-seta{font-weight:700;}
.eh-sep{border:0;background:transparent;color:var(--tx2);min-width:18px;padding:0;}
.eh-pp,.eh-ir{display:inline-flex;align-items:center;gap:6px;font-size:12.4px;color:var(--tx2);}
.eh-pp select{width:auto;padding:5px 8px;font-size:12.6px;}
.eh-ir input{width:62px;padding:5px 8px;font-size:12.6px;text-align:center;}
.eh-irbt{border:0;background:transparent;cursor:pointer;}
/* trocando de página: a tabela antiga fica no lugar, esmaecida, e a altura não pula */
.at-tab.eh-ocupado .eh-scroll,.at-tab.eh-ocupado .eh-cards{opacity:.45;pointer-events:none;}
.eh-load{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh);padding:9px 13px;font-size:13px;color:var(--tx1);}
.eh-spin{width:15px;height:15px;border:2px solid var(--line);border-top-color:var(--brand);border-radius:50%;display:inline-block;animation:ehgira .8s linear infinite;}
@keyframes ehgira{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.eh-spin{animation:none;}}
/* tarja da coluna Tipo (a mesma do mockup) */
.at-tg{display:inline-block;font-size:11px;font-weight:700;border-radius:6px;padding:2px 8px;background:var(--surface3,rgba(127,127,160,.16));color:var(--tx0);white-space:nowrap;}
.at-tg-massa{background:rgba(14,165,233,.16);color:#1d63b8;}
.at-tg-automatica{background:rgba(127,127,160,.18);color:var(--tx1);}
.at-tg-etiqueta{background:rgba(22,163,74,.16);color:#15803d;}
/* telefone (abaixo de 640 px): cada transferência vira cartão, a barra vira ‹ página X de Y › */
.eh-cards{display:flex;flex-direction:column;}
.eh-card{border-bottom:1px solid var(--line);padding:10px 12px;}
.eh-card:last-child{border-bottom:0;}
.eh-c1{display:flex;justify-content:space-between;gap:8px;align-items:baseline;}
.eh-c1 b{font-size:13.4px;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.eh-c1 span{font-size:11.6px;color:var(--tx2);white-space:nowrap;}
.eh-c2{font-size:12.4px;color:var(--tx2);margin-top:3px;}
.eh-c2 b{color:var(--tx0);font-weight:600;}
.eh-c3{margin-top:5px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:11.8px;color:var(--tx2);}
.eh-rod-fone{justify-content:space-between;}
@media (max-width:640px){
  .eh-q{width:100%;}
  .eh-rod{gap:8px;}
}
.at-mon{margin-top:14px;overflow:hidden;}
.at-mon-head{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);}
.at-mon-tit{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0;}
.at-mon-body{max-height:min(420px,55vh);overflow:auto;}
.at-mon-nome{font-weight:600;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.at-mon-msg{color:var(--tx1);max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---- modal "Transferir conversas" ---- */
.at-modal{width:560px!important;max-width:calc(100vw - 24px)!important;max-height:92vh;overflow-y:auto;padding:20px 22px!important;}
.at-modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.at-modal-head b{font-size:16px;}
.at-lbl{font-size:11.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--tx2);font-weight:700;margin:14px 0 4px;}
.at-opt{border:1px solid var(--line2);border-radius:11px;padding:10px 12px;margin:6px 0;display:flex;gap:10px;align-items:flex-start;cursor:pointer;}
.at-opt.sel{border-color:var(--brand);background:var(--brand-l);}
.at-opt input[type=radio],.at-chk input[type=checkbox],.at-radio input{width:auto;margin-top:3px;flex:none;accent-color:var(--brand);}
.at-opt-grow{flex:1;min-width:0;}
.at-opt-grow select{margin-top:6px;padding:7px 10px;font-size:13px;}
.at-prev{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 14px;background:var(--surface2);border-radius:10px;padding:10px 12px;font-size:13px;}
.at-prev span:first-child,.at-prev span:nth-child(3n+1){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.at-mais{color:var(--ok-tx);}
.at-prev-box .est-tela{padding:12px;}
.at-semdest{margin-top:6px;color:var(--warn-tx);}
.at-chk{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--tx1);}
.at-chk.at-chk-l{flex-wrap:nowrap;align-items:flex-start;cursor:pointer;}   /* caixinha + texto na mesma linha (o texto quebra, não desce) */
.at-chk .at-dd-mot{flex-direction:row;padding:0;flex:1;min-width:0;flex-wrap:wrap;}
.at-chk .at-dd-mot select,.at-chk .at-dd-mot input{width:auto;min-width:140px;}
.at-modal-bt{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;flex-wrap:wrap;}

/* ---- ETIQUETAR AO ENCERRAR (15/09): janela "Encerrar conversa" + painel do dono na tela Etiquetas ---- */
.ee-modal{width:460px!important;}
.ee-sub{margin:6px 0 10px;color:var(--tx2);font-size:13px;line-height:1.45;}
.ee-ops{display:flex;flex-direction:column;gap:6px;max-height:min(300px,40vh);overflow-y:auto;padding:2px;}
.ee-op{display:grid;grid-template-columns:auto 10px minmax(0,1fr) auto;gap:9px;align-items:center;padding:8px 10px;border:1px solid var(--line2);border-radius:10px;cursor:pointer;font-size:13.5px;color:var(--tx1);}
.ee-op input[type=radio]{width:auto;margin:0;accent-color:var(--brand);}
.ee-op.sel{border-color:var(--brand);background:var(--brand-l);box-shadow:inset 0 0 0 1px var(--brand);}
.ee-op:focus-within{outline:2px solid var(--brand);outline-offset:1px;}
.ee-cor{width:10px;height:10px;border-radius:50%;}
.ee-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
.ee-ef{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap;border:1px solid var(--line2);color:var(--tx2);}
.ee-ef-enc{color:var(--err-tx,#be123c);border-color:currentColor;}
.ee-ef-bko{color:var(--brand-tx);border-color:currentColor;}
.ee-aviso{margin-top:10px;padding:8px 10px;border-radius:10px;font-size:13px;line-height:1.45;background:var(--surface2);border:1px solid var(--line2);color:var(--tx1);}
.ee-aviso.ee-warn{border-color:var(--warn-tx);color:var(--warn-tx);}
.ee-aviso i{margin-right:4px;}
.ee-msg{margin-top:4px;padding:8px 10px;border-radius:10px;background:var(--surface2);border:1px dashed var(--line2);font-size:13px;line-height:1.45;color:var(--tx1);white-space:pre-wrap;overflow-wrap:anywhere;}
.ee-res{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;margin-top:10px;font-size:13.5px;color:var(--tx1);}
.ee-res b{text-align:right;}
.ee-modal .btn:focus-visible,.ee-cfg .btn:focus-visible,.ee-cfg select:focus-visible,.ee-cfg textarea:focus-visible,.ee-cfg input:focus-visible,.ee-cfg .at-sw:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.ee-cfg{margin-top:14px;overflow:hidden;}
.ee-cfg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px 14px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line);}
.ee-cfg-head small{display:block;color:var(--tx2);font-size:12px;margin-top:2px;line-height:1.45;max-width:70ch;}
.ee-cfg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 22px;padding:4px 16px 14px;}
@media (max-width:980px){.ee-cfg-grid{grid-template-columns:minmax(0,1fr);}}
.ee-cfg-grid select,.ee-cfg-grid textarea,.ee-cfg-grid input[type=text]{width:100%;}
.ee-lista{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:5px;}
.ee-lista li{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--line2);border-radius:9px;font-size:13px;}
.ee-lista .ee-bts{display:flex;gap:4px;}
.ee-lista .btn{padding:3px 8px;}
.ee-chk{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--tx1);margin:4px 0;}
.ee-chk input{width:auto;margin:0;accent-color:var(--brand);}
.ee-linha{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;}

/* ---- regras por área ---- */
.at-regras{overflow:hidden;}
.at-regra{display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line);}
.at-regra:last-child{border-bottom:0;}
.at-regra-t{flex:1;min-width:min(280px,100%);}
.at-regra-t small{display:block;color:var(--tx2);font-size:12px;margin-top:2px;line-height:1.4;}
.at-regra-c{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--tx1);font-size:13px;}
.at-regra.at-destaque{box-shadow:inset 0 0 0 2px rgba(245,158,11,.55);}
.at-num{width:72px!important;text-align:center;padding:6px!important;}
.at-hora{width:70px!important;text-align:center;padding:6px!important;}
.at-radio{display:inline-flex;align-items:center;gap:6px;cursor:pointer;}
.at-sw{width:42px;height:24px;border-radius:12px;background:#4b5563;position:relative;border:0;cursor:pointer;flex:none;padding:0;}
.at-sw::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s;}
.at-sw.on{background:var(--brand);} .at-sw.on::after{left:21px;}
.at-sw:disabled{opacity:.5;cursor:not-allowed;}
.at-sw:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.at-regras-bt{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;}

.at-nav-badge.at-nav-fora{background:var(--warn-bg);color:var(--warn-tx);}

/* ---- aba Produtividade (dono 15/09) — reaproveita .atd-kpis/.atd-area/.atd-col/.atd-bar/.atd-eixo do relatório de Atendimento ---- */
.pd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:12px;}
.pd-grid > .panel{min-width:0;margin:0;}
.pd-par{display:flex;align-items:flex-end;justify-content:center;gap:3px;width:100%;height:100%;}
.pd-bw{position:relative;flex:1 1 0;min-width:0;max-width:24px;height:100%;display:flex;align-items:flex-end;}
.pd-bw .atd-bar{width:100%;max-width:none;}
.pd-b-at{background:var(--brand)!important;}
.pd-b-fin{background:var(--ok)!important;}
.pd-eixo span{overflow:hidden;text-overflow:ellipsis;padding:0 2px;}
.pd-pilha-t{font-size:12px;font-weight:700;color:var(--tx1);margin:12px 0 5px;}
.pd-pilha-t:first-child{margin-top:4px;}
.pd-pilha{display:flex;height:16px;border-radius:6px;overflow:hidden;background:var(--surface2);}
.pd-pilha i{display:block;min-width:3px;}
.pd-pilha-leg{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:12px;color:var(--tx1);}
.pd-pilha-leg span{display:inline-flex;align-items:center;gap:5px;min-width:0;overflow-wrap:anywhere;}
.pd-pilha-leg i{width:10px;height:10px;border-radius:2px;flex:none;}
.pd-pilha-leg small{color:var(--tx2);}
.pd-est{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:8px;background:var(--warn-bg);color:var(--warn-tx);font-size:11px;font-weight:700;white-space:nowrap;vertical-align:middle;cursor:help;}
.pd-tab tfoot td{border-top:2px solid var(--line2);background:var(--surface);}
.pd-tab .atd-th{white-space:nowrap;}

/* ---- filtro "👤 Cobrador" da lista de conversas (dono 15/09) — atendimento.js seção 5 ----
   Campo com o mesmo desenho dos <select> da lista; texto longo QUEBRA linha (nada cortado). */
.fc-box{display:flex;flex-direction:column;gap:6px;margin-top:6px;min-width:0;}
.fc-linha{position:relative;min-width:0;}
.fc-campo{display:flex;align-items:center;gap:6px;width:100%;min-width:0;padding:10px 13px;border:1px solid var(--line2);border-radius:var(--rs);background:var(--surface1,#fff);box-shadow:inset 0 1px 2px rgba(23,26,43,.04);color:var(--tx0);font-size:12.5px;font-weight:400;line-height:1.3;text-align:left;cursor:pointer;}
.fc-campo:hover{border-color:rgba(23,26,43,.22);}
.fc-campo:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(79,70,229,.16);}
.fc-campo.fc-on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);background:var(--brand-l);font-weight:700;padding-right:36px;}
.fc-rot{flex:1;min-width:0;overflow-wrap:anywhere;}
.fc-car{flex:none;color:var(--tx2);}
.fc-campo.fc-on .fc-car{display:none;}
.fc-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:7px;background:transparent;color:var(--brand-tx);font-size:14px;font-weight:700;cursor:pointer;padding:0;}
.fc-x:hover,.fc-x:focus-visible{background:rgba(79,70,229,.14);outline:none;}
.fc-cesto{display:flex;flex-direction:column;gap:5px;padding:8px 9px;border:1px solid rgba(79,70,229,.28);border-radius:12px;background:var(--brand-l);min-width:0;}
.fc-c1{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:3px 6px;min-width:0;}
.fc-tit{font-size:13px;color:var(--tx0);min-width:0;overflow-wrap:anywhere;}
.fc-todos{margin-left:auto;padding:3px 7px!important;}
.fc-st{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--ok-tx);min-width:0;overflow-wrap:anywhere;}
.fc-st.at-pa{color:var(--warn-tx);} .fc-st.at-au{color:var(--err-tx);}
.fc-kp{display:flex;flex-wrap:wrap;gap:1px 10px;font-size:12px;line-height:1.4;color:var(--tx1);}
.fc-kp span{white-space:nowrap;}
.fc-kp b{font-size:14px;color:var(--tx0);font-variant-numeric:tabular-nums;}
.fc-kp .fc-al b{color:var(--err-tx);}
.fc-trf{width:100%;justify-content:center;padding:6px 9px!important;}
/* filtro ligado: a coluna da lista rola inteira e a lista nunca some (antes o cabeçalho comia tudo a 1093×614) */
.convwrap.fc-ativo{overflow-y:auto;overscroll-behavior:contain;}
.convwrap.fc-ativo > .convhead{flex:none;}
.convwrap.fc-ativo > .convlist{flex:1 0 auto;min-height:min(240px,45vh);overflow-y:visible;}
.fc-dd{display:flex;flex-direction:column;gap:4px;overflow:hidden;}
.fc-busca{position:relative;flex:none;}
.fc-busca .ti{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--tx2);font-size:15px;pointer-events:none;}
.fc-busca input{padding:7px 10px 7px 32px;font-size:13px;}
.fc-lista{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:1px;}
.fc-lista .est-tela{padding:18px 10px;}
.fc-op{display:flex;align-items:center;gap:8px;width:100%;flex:none;padding:7px 8px;border:0;border-radius:8px;background:transparent;color:var(--tx0);font-size:13px;text-align:left;cursor:pointer;}
.fc-op:hover,.fc-op:focus-visible{background:var(--surface3);outline:none;}
.fc-op.on{background:var(--brand-l);}
.fc-nm{flex:1;min-width:0;line-height:1.3;overflow-wrap:anywhere;}
.fc-nm small{display:block;font-size:11px;font-weight:400;color:var(--tx2);}
.fc-n{flex:none;font-size:11px;font-weight:700;line-height:16px;padding:1px 7px;border-radius:999px;background:var(--brand-l);color:var(--brand-tx);font-variant-numeric:tabular-nums;}
.fc-n.fc-esp{background:var(--err-bg);color:var(--err-tx);}
.fc-dot-sem{background:var(--brand)!important;}
.fc-grp{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tx2);padding:9px 8px 2px;overflow-wrap:anywhere;flex:none;}
.fc-leg{flex:none;border-top:1px solid var(--line);padding:6px 6px 0;font-size:11.5px;color:var(--tx2);}

@media (min-width: 901px) {
  /* filtro por cobrador: mesmo respiro dos <select> da lista na densidade compacta (só espaço, letra igual) */
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .convhead .fc-campo{padding-top:5px;padding-bottom:5px;}
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .fc-cesto{padding:6px 8px;gap:4px;}
  /* menu lateral: com o item novo, a 1366×768 (densidade mínima) o "Sair" passava do fim da tela para
     supervisor/dono. Mesma saída que o densidade.css já usa no modo manual: ROLAGEM interna, nada escondido. */
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .side{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent;}
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .at-alert{padding:9px 12px;margin-bottom:var(--d-mb,11px);}
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .at-regra{padding:9px 12px;}
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .at-obs{padding:6px 10px;}
  :is([data-densidade="compacto"],[data-densidade="minimo"]) #meDisp{margin:4px 0 1px;}
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .at-mon-body{max-height:min(360px,48vh);}
  :is([data-densidade="compacto"],[data-densidade="minimo"]) .at-nota{margin-top:8px;}
}
/* ✓✓ de lido (18/09) — colado na hora, dentro da linha "Fulano · hora" da bolha roxa */
.bub-ack{font-weight:700;letter-spacing:-3px;margin-left:5px;padding-right:3px;font-size:11.5px;opacity:1}
.bub-ack.ack-um,.bub-ack.ack-falhou{letter-spacing:0}
.bub-ack.ack-lido{color:#8fe3ff}
.bub-ack.ack-falhou{color:#ffd0d0}

/* ---- RESPONDER MENSAGEM (citação, igual ao WhatsApp — 18/09, mockup aprovado) — atendimento.js seção 8 ----
   Setinha na bolha (aparece no hover/foco), menu Responder/Copiar, bloco da citação no topo da
   bolha e a barra "Respondendo a …" em cima da caixa de texto. REVERTER: apagar este bloco. */
.bub.tem-resp{position:relative;}
.bub-seta{position:absolute;z-index:1;top:4px;right:-28px;width:24px;height:24px;border-radius:50%;border:1px solid var(--line2);background:var(--surface2);color:var(--tx1);display:grid;place-items:center;padding:0;cursor:pointer;opacity:0;transition:opacity .12s;font-size:14px;line-height:1;}
.bub.out .bub-seta{right:auto;left:-28px;}
.bub.tem-resp::after{content:'';position:absolute;top:0;bottom:0;width:30px;right:-30px;}   /* ponte do hover até a setinha */
.bub.out.tem-resp::after{right:auto;left:-30px;}
.bub:hover>.bub-seta,.bub-seta:focus-visible,.bub:focus-within>.bub-seta{opacity:1;}
.bub-seta:hover{color:var(--tx0);border-color:var(--brand-bd);}
/* sem compositor (observando, somente leitura, encerrada): setinha só onde dá para "Copiar" */
.chatcol:not(:has(#cinput)) .bub-seta.so-resp{display:none;}
.resp-menu{position:fixed;z-index:330;min-width:170px;background:var(--surface);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--sh2);padding:6px;display:grid;gap:2px;}
.resp-menu-it{display:flex;align-items:center;gap:6px;width:100%;padding:7px 10px;border:0;border-radius:8px;background:transparent;color:var(--tx0);font-size:13px;text-align:left;cursor:pointer;}
.resp-menu-it:hover,.resp-menu-it:focus-visible{background:var(--surface3);outline:none;}
.resp-menu-ic{width:16px;text-align:center;flex:none;color:var(--tx1);}
.bub-cit{display:block;border-left:3px solid rgba(255,255,255,.75);background:rgba(255,255,255,.16);border-radius:6px;padding:4px 8px;margin-bottom:5px;font-size:12px;line-height:1.4;cursor:pointer;white-space:normal;}
.bub.in .bub-cit{border-left-color:#16a34a;background:rgba(127,127,127,.13);}
.bub-cit:focus-visible{outline:2px solid var(--brand);outline-offset:1px;}
.bub-cit-nome{display:block;font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bub-cit-tx{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;opacity:.9;}
@keyframes bubPisca{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,0);}25%,65%{box-shadow:0 0 0 4px rgba(139,92,246,.75);}}
.bub.bub-pisca{animation:bubPisca 1.6s ease;}
#chatfoot.resp-on{flex-wrap:wrap;}
.resp-bar{flex:1 0 100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;border-left:3px solid var(--brand);background:var(--surface2);border-radius:8px;padding:6px 6px 6px 10px;font-size:12.5px;}
.resp-bar-tx{min-width:0;}
.resp-bar-tx b{display:block;font-size:11.5px;color:var(--brand-tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.resp-bar-tx span{display:block;color:var(--tx1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.resp-bar-tx .resp-bar-aviso{display:block;font-size:11px;color:var(--tx2);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.resp-bar-x{border:0;background:transparent;color:var(--tx1);width:28px;height:28px;border-radius:50%;cursor:pointer;display:grid;place-items:center;padding:0;font-size:15px;}
.resp-bar-x:hover,.resp-bar-x:focus-visible{background:var(--surface3);color:var(--tx0);outline:none;}

/* ===== TRANSFERIDOS (dono 22/09, mockup aprovado) — seção 10 do atendimento.js =====
   Faixa laranja no cartão, borda laranja à esquerda, sub-aba com contador e aviso no topo da conversa.
   A faixa é .conv-espera: a regra da tela enxuta (⚙ Tela) nunca esconde a 3ª linha que a tem.
   Fica ANTES do bloco "FUNÇÃO TELA" de propósito (a qa_tela trava que nada daquele bloco mire .conv-espera).
   REVERTER: apagar este bloco e a seção 10 do atendimento.js. */
.conv-espera.trf{background:#fff4e5;color:#9a3412;border-color:#fdba74;font-weight:600;}
.conv-item.trf-pend:not(.active){background:#fffaf2;box-shadow:inset 3px 0 0 #f59e0b;}
/* a lista tem ~200-290px: 4 botões numa linha só estouravam (pego no Chrome). Todos/Massivo/Backoffice
   ficam na 1ª linha e "↪ Transferidos" ocupa a 2ª inteira */
#atdTipo:has(.trf-aba){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:16px;}
#atdTipo:has(.trf-aba) button{justify-content:center;min-width:0;padding-left:6px;padding-right:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#atdTipo .trf-aba{grid-column:1 / -1;}
.trf-cont{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:#f59e0b;color:#fff;font-size:11px;font-weight:700;line-height:16px;text-align:center;}
.trf-cont.zero{background:var(--surface3);color:var(--tx1);}
.seg button.on .trf-cont{background:#fff;color:var(--brand);}
.trf-aviso{padding:8px 16px;background:#fff7ed;border-bottom:1px solid #fdba74;color:#7c2d12;font-size:13px;line-height:1.4;overflow-wrap:anywhere;}
:is([data-densidade="compacto"],[data-densidade="minimo"]) .trf-aviso{padding:6px 10px;}

/* ============================================================================
   FUNÇÃO TELA — preferências de visual por login (dono 19/09, mockup aprovado)
   ----------------------------------------------------------------------------
   Todo o "retrair" é CSS puro, comandado por classe no <body> (ver seção 9 do
   atendimento.js). Trocar uma chave NÃO redesenha a lista de conversas: com
   2000 conversas na tela, o navegador só reaplica estilo.

   Classes do <body>:
     .tela-menu-off         menu lateral vira faixa fina só com ícones
     .tela-ficha-off        ficha do contato vira a aba fina "Ficha ❯"
     .tela-etq-off          etiquetas somem dos cartões da lista
     .tela-canal-off        selo do canal some do cartão e do cabeçalho
     .tela-filtrocanal-off  seletor "Todos | Meta" some do topo

   REGRA DO DONO: retrair é ESPAÇO, não FONTE — nenhuma regra daqui diminui
   letra de nada. O que sai, sai inteiro; o que fica, fica do tamanho de sempre.

   O QUE NUNCA SOME: a faixa de espera do cartão (.conv-espera — "Novo",
   "Aguardando você", "Aguardando cliente") e o responsável no cabeçalho da
   conversa (#cresp). É o que evita o cobrador abrir conversa de colega.

   REVERTER: apague este bloco e a seção 9 do atendimento.js.
   ========================================================================== */

/* ---- botão "⚙ Tela" e a caixinha das 5 chaves ---- */
/* o .head é flex com space-between: o margin-left:auto encosta o botão no filtro de canal,
   em vez de deixá-lo solto no meio da faixa */
.tela-cx{position:relative;display:inline-flex;align-items:center;margin-left:auto;}
.tela-bt{gap:6px;}
.tela-painel{position:absolute;z-index:320;top:calc(100% + 8px);right:0;width:262px;max-width:calc(100vw - 32px);
  display:grid;gap:4px;padding:12px;border:1px solid var(--line2);border-radius:12px;
  background:var(--surface);box-shadow:var(--sh2);text-align:left;}
.tela-tit{font-size:13.5px;font-weight:700;color:var(--tx0);}
.tela-sub{font-size:12.5px;color:var(--tx2);margin-bottom:6px;line-height:1.35;}
.tela-sw{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px;
  padding:7px 9px;border-radius:9px;cursor:pointer;font-size:13px;color:var(--tx0);}
.tela-sw:hover{background:var(--surface3);}
.tela-sw input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer;margin:0;flex:none;}
.tela-sw-tx{min-width:0;}
.tela-sw-aviso{grid-column:2;color:var(--tx2);font-style:italic;}
.tela-sw-off{cursor:default;opacity:.62;}
.tela-sw-off:hover{background:transparent;}
.tela-sw-off input{cursor:default;}
.tela-pe{border-top:1px solid var(--line);margin-top:8px;padding-top:10px;}
.tela-voltar{width:100%;justify-content:center;}

/* ---- setinha ❮ dentro do próprio menu lateral ---- */
.tela-dobra{margin-left:auto;flex:none;border:0;background:transparent;color:var(--tx1);
  cursor:pointer;font-family:inherit;font-size:13px;line-height:1;padding:6px 5px;border-radius:8px;}
.tela-dobra:hover,.tela-dobra:focus-visible{background:rgba(255,255,255,.14);color:var(--tx0);outline:none;}

/* ---- aba fina "Ficha ❯" (fica por cima da faixa, não é 4ª coluna do grid) ---- */
.tela-aba-ficha{display:none;position:absolute;top:0;right:0;bottom:0;width:34px;z-index:4;
  align-items:center;justify-content:center;padding:0;border:0;border-left:1px solid var(--line);
  background:var(--surface2);color:var(--tx1);cursor:pointer;font-family:inherit;font-size:12.5px;
  letter-spacing:.04em;writing-mode:vertical-rl;}
.tela-aba-ficha:hover,.tela-aba-ficha:focus-visible{background:var(--surface3);color:var(--tx0);outline:none;}

/* ---- etiquetas e selo do canal no cartão da lista ----
   As duas linhas do cartão são montadas pelo renderConvs() do app.js:
     2ª linha  = prévia da última mensagem + ctag(t.canal)   -> selo do canal
     3ª linha  = badgeEspera(t) + as etiquetas (tagChip)     -> etiquetas
   Por isso o corte é pela POSIÇÃO da linha: o selo do canal de Instagram/Botsoluti
   não tem classe própria (só estilo embutido), então "todo .ctag" não serviria.
   A qa_tela/t1_regras.js trava esse formato — se o renderConvs mudar, o teste
   fica vermelho em vez de a preferência parar de funcionar em silêncio. */
body.tela-canal-off .conv-item > div:last-child > div:nth-child(2) > .ctag{display:none;}
body.tela-etq-off   .conv-item > div:last-child > div:nth-child(3) > .ctag{display:none;}
/* 3ª linha só com etiquetas escondidas vira faixa vazia: some junto (mas não quando tem espera) */
body.tela-etq-off .conv-item > div:last-child > div:nth-child(3):not(:has(.conv-espera)){display:none;}
/* selo do canal no cabeçalho da conversa */
body.tela-canal-off #ctag{display:none;}
/* filtro de canal do topo ("Todos | Meta") */
body.tela-filtrocanal-off #atdCanal{display:none;}

@media (min-width:901px){
  /* ---- menu lateral retraído: faixa fina só com ícones ---- */
  /* o !important acompanha o do densidade.css: em compacto/mínimo ele fixa a largura do menu com
     !important, e sem isto o menu retraía o texto mas continuava largo (pego no Chrome, 19/09) */
  html body.tela-menu-off .app{grid-template-columns:64px minmax(0,1fr)!important;}
  /* o densidade.css também fixa .side{width:var(--d-side-w)!important} em compacto/mínimo: sem este
     !important o grid virava 64px mas o menu continuava largo, por cima da tela (pego no Chrome, 19/09) */
  /* o padding também vai com !important: em compacto/mínimo o densidade.css usa o ATALHO
     `padding:var(--d-side-pad)!important`, que ganharia do padding-left/right sem !important */
  html body.tela-menu-off .side{width:64px!important;min-width:0;padding:20px 8px!important;overflow-x:hidden;}
  /* mesma coisa no item do menu: densidade.css usa `padding:var(--d-nav-pad)!important` */
  html body.tela-menu-off .side .nav{justify-content:center;gap:0;padding:10px 0!important;}
  html body.tela-menu-off .side .brand{justify-content:center;gap:0;padding:4px 0 16px;}
  html body.tela-menu-off .side .brand > div{display:none;}   /* o logo e o bloco do nome */
  html body.tela-menu-off .side .tela-dobra{margin-left:0;}
  html body.tela-menu-off .side .tela-nav-tx,
  html body.tela-menu-off .side .navlabel,
  html body.tela-menu-off .side .tg,
  html body.tela-menu-off .side .badge,
  html body.tela-menu-off .side .lgpd-badge,
  html body.tela-menu-off .side .dens-ctl,
  html body.tela-menu-off .side .disp-pilha,
  html body.tela-menu-off .side #meUser,
  html body.tela-menu-off .side #meVersao,
  html body.tela-menu-off .side #meDisp{display:none!important;}
  /* o sino de mensagem nova continua: vira uma bolinha sobre o ícone */
  html body.tela-menu-off .side .nav{position:relative;}
  html body.tela-menu-off .side #navAtdSino.on{position:absolute;top:3px;right:6px;}

  /* ---- ficha do contato retraída: faixa fina com a aba "Ficha ❯" ----
     o !important acompanha o do densidade.css (compacto/mínimo também usam !important aqui) */
  html body.tela-ficha-off .chatgrid{grid-template-columns:var(--d-lista-w,290px) minmax(0,1fr) 34px!important;position:relative;}
  html body.tela-ficha-off #leadpanel{padding:0;overflow:hidden;}
  html body.tela-ficha-off #leadpanel > *{display:none;}
  html body.tela-ficha-off .tela-aba-ficha{display:flex;}
}