/* ============================================================
   DMW Tracker: CHAT KIT (fonte única do "chrome" das conversas)
   Usado por inbox.html · lead-detail.html · kanban.html
   Mudou aqui → reflete em todas as telas de chat.
   Usa os tokens do app.css (--azul, --gold, --hair, etc.) com fallback.
   ============================================================ */
:root{
  --ck-azul:var(--azul,#2F5096);
  --ck-azul-deep:var(--azul-deep,#21396C);
  --ck-gold:var(--gold,#C9A85C);
  --ck-ink:var(--ink,#161A23);
  --ck-muted:var(--muted,#5A6373);
  --ck-faint:var(--faint,#8A93A4);
  --ck-hair:var(--hair,#E6E9F0);
  --ck-hair2:var(--hair-2,#EEF1F7);
  --ck-surface:#fff;
  --ck-green:#1FA971;--ck-green-bg:#E5F6EE;--ck-green-ink:#0E7A4E;
  --ck-red:#D45B5B;--ck-red-bg:#FBE9E9;--ck-red-ink:#B5302E;
  /* --ck-amber-ink era #9A6A14 (4.21:1 contra --ck-amber-bg, abaixo do AA
     4.5:1). Corrigido no pacote de proteção (D4b) para o mesmo #7C632F já
     usado em .sc-risk/.lm-warn (5.09:1); os 5 consumidores da variável
     (.ck-tag.amber, .ck-fu-st.sent, .ck-ww__ic, .ck-attr__warn, .fu-note)
     ganham o contraste correto de graça, na fonte única. */
  --ck-amber:#E0A33D;--ck-amber-bg:#FBF1DD;--ck-amber-ink:#7C632F;
  --ck-ff:'Hanken Grotesk',system-ui,sans-serif;
  --ck-ff-d:'Outfit','Hanken Grotesk',sans-serif;
  --ck-ff-m:'JetBrains Mono',monospace;
}

/* M7 (histórico anterior no chat, revisão final): utilitário visualmente
   oculto, padrão da web (clip em vez de display:none/visibility:hidden, que
   tirariam o elemento da árvore de acessibilidade em vez de só escondê-lo da
   tela). Usado pela região aria-live que anuncia o resultado da carga de
   histórico anterior para leitor de tela (`#cp-anuncio`, lead-panel.js). */
.ck-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- header badges (window + assign) ---------- */
.ck-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px}
.ck-window,.ck-assign,.ck-origin{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:30px;font-size:11.5px;font-weight:600;font-family:var(--ck-ff)}
.ck-window svg,.ck-assign svg,.ck-origin svg{width:13px;height:13px}
/* M4/N3: origem do lead (hoje só `lead_form`). Sem cor nova: o azul do sistema
   (--azul, #2F5096), o mesmo par de `.ktag.form` no card do Kanban, para a
   MESMA origem ter a mesma cor nas duas telas. Não é o dourado do `.ktag.ctwa`
   de propósito: ali ele significa "clicou no anúncio", que é o outro caminho.
   Medido em headless: 5,8:1 sobre o cabeçalho do chat (o dourado dava 3,0:1). */
.ck-origin{background:rgba(47,80,150,.12);color:var(--ck-azul);border:1px solid rgba(47,80,150,.22)}
.ck-window{background:var(--ck-green-bg);color:var(--ck-green-ink);border:1px solid rgba(31,169,113,.25)}
.ck-window.closed{background:#F1F3F6;color:var(--ck-muted);border-color:var(--ck-hair)}
.ck-assign{background:rgba(47,80,150,.1);color:var(--ck-azul-deep);border:1px solid rgba(47,80,150,.18)}
/* O selo do responsavel leva o NOME de uma pessoa (L1.6, rodada 1): sem teto, um nome longo alargava
   o cabecalho (a 820 px um nome de 40 caracteres ja quebrava o selo para outra linha no detalhe do lead,
   +24 px, e um de 120 chegava a +31 px no Atendimento e no modal do Kanban). Teto de 180 px (~25
   caracteres) e reticencias; o nome inteiro vai no `title` (lead-panel.js). `inline-block` e nao
   `inline-flex` porque `text-overflow` nao age sobre o texto anonimo de um flex; `line-height:22px`
   (24 de altura menos as duas bordas) mantem o texto no meio, e `vertical-align:top` mantem o selo
   alinhado com o da janela no detalhe do lead (onde os dois ficam em linha, nao em flex). Teto em px e
   nao em %: um `max-width:100%` e cíclico na medida intrinseca do cabecalho (o selo ficava em 180, mas
   a caixa de info media o texto inteiro, 668 a 791 px com 120 caracteres). */
.ck-assign{max-width:180px;display:inline-block;vertical-align:top;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- header action buttons ---------- */
.ck-actions{display:flex;align-items:center;gap:3px}
.ck-ic{width:38px;height:38px;border-radius:11px;border:1px solid transparent;background:none;color:var(--ck-muted);display:grid;place-items:center;transition:.14s;position:relative;flex-shrink:0}
.ck-ic:hover{background:#F1F3F7;color:var(--ck-azul)}
.ck-ic.on{background:rgba(47,80,150,.12);color:var(--ck-azul)}
.ck-ic svg{width:20px;height:20px}
.ck-more{position:relative}

/* ---------- coachmark ---------- */
.ck-hint{position:absolute;top:46px;right:0;z-index:60;white-space:nowrap;
  background:linear-gradient(135deg,var(--ck-azul),var(--ck-azul-deep));color:#fff;
  font-size:12px;font-weight:600;padding:8px 12px;border-radius:11px;
  box-shadow:0 12px 26px -8px rgba(33,57,108,.55);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.25s;pointer-events:none}
.ck-hint.show{opacity:1;visibility:visible;transform:none;animation:ckPulse 1.8s ease-in-out infinite}
.ck-hint .sp{color:var(--ck-gold);margin-right:5px}
.ck-hint::before{content:"";position:absolute;top:-6px;right:14px;width:12px;height:12px;background:var(--ck-azul);transform:rotate(45deg);border-radius:2px}
@keyframes ckPulse{0%,100%{box-shadow:0 12px 26px -8px rgba(33,57,108,.55)}50%{box-shadow:0 12px 30px -6px rgba(47,80,150,.85)}}

/* ---------- generic popover ---------- */
.ck-pop{position:absolute;z-index:70;background:#fff;border:1px solid var(--ck-hair);border-radius:14px;box-shadow:0 18px 44px -14px rgba(20,33,61,.35);padding:6px;min-width:230px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.15s}
.ck-pop.open{opacity:1;visibility:visible;transform:none}
.ck-pop__t{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ck-faint);padding:8px 10px 5px}
.ck-pop__sep{border-top:1px solid var(--ck-hair2);margin:5px 4px}
.ck-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:none;border-radius:9px;font-family:var(--ck-ff);font-size:13.5px;color:var(--ck-ink);font-weight:500;text-align:left;cursor:pointer}
.ck-item:hover{background:rgba(47,80,150,.07)}
.ck-item .av{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;background:linear-gradient(135deg,var(--ck-azul),var(--ck-azul-deep))}
.ck-item .ck-ck{margin-left:auto;width:16px;height:16px;color:var(--ck-azul);opacity:0}
.ck-item.sel .ck-ck{opacity:1}
/* Transferir lead (Fase 19/bloco 5, D2): o popover mostra o NOME e, ao lado, o
   NIVEL de quem pode receber o lead. O nome encolhe com reticencias antes de
   empurrar o nivel para fora do popover. */
.ck-pop .ck-item .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-pop .ck-item .lv{flex:none;margin-left:auto;padding-left:10px;font-size:11.5px;font-weight:600;color:var(--ck-muted)}

/* ---------- in-conversation search bar ---------- */
.ck-search{display:none;flex-direction:column;background:#fff;border-bottom:1px solid var(--ck-hair)}
.ck-search.open{display:flex}
.ck-search input{flex:1;border:0;outline:none;background:#F1F3F7;border-radius:9px;padding:9px 12px;font-family:var(--ck-ff);font-size:13.5px}
.ck-search .cnt{font-size:12px;color:var(--ck-faint);font-family:var(--ck-ff-m)}
/* ⚠️ `:not(.ck-search-hit)`: esta regra e o ✕ da busca do PAINEL do lead, e
   alcancava tambem cada RESULTADO da busca na conversa, que tambem e um
   `<button>` dentro de `.ck-search`. Com especificidade maior que a de
   `.ck-search-hit`, ela espremia todo resultado num quadrado de 30x30: as
   linhas se sobrepunham e o texto virava um borrao ilegivel. Medido no
   headless (`.ck-search-hit` com 30x30 e `display:grid`), e vale para o
   `/app` tambem: o markup vem do mesmo parcial. */
.ck-search button:not(.ck-search-hit){width:30px;height:30px;border-radius:8px;border:0;background:none;color:var(--ck-muted);display:grid;place-items:center;cursor:pointer}
.ck-search button:hover{background:#F1F3F7;color:var(--ck-azul)}
.ck-search button svg{width:16px;height:16px}
/* search row (ícone + input + ✕) */
.ck-search-row{display:flex;align-items:center;gap:8px;padding:8px 14px}
.ck-search-row svg{width:18px;height:18px;color:var(--ck-faint);flex:none}
.ck-search-row input{flex:1;border:0;outline:none;background:#F1F3F7;border-radius:9px;padding:9px 12px;font-family:var(--ck-ff);font-size:13.5px}
/* search results list */
.ck-search-results{max-height:320px;overflow-y:auto;border-top:1px solid var(--ck-hair2)}
/* individual result hit */
.ck-search-hit{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;padding:8px 10px;border:0;background:transparent;cursor:pointer;border-bottom:1px solid var(--ck-hair2);font-family:var(--ck-ff)}
.ck-search-hit:last-child{border-bottom:0}
.ck-search-hit:hover{background:rgba(47,80,150,.05)}
/* snippet line */
.sr-snip{font-size:13px;color:var(--ck-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* meta line (who + date) */
.sr-meta{font-size:11.5px;color:var(--ck-faint);font-family:var(--ck-ff-m)}
/* empty state: also used by CRM panel for "Nenhuma etiqueta"/"Sem notas" */
.ck-empty{font-size:12.5px;color:var(--ck-faint);padding:12px 10px;text-align:center}

/* ---------- composer tools (quick replies = lightning) ---------- */
.ck-tools{display:flex;align-items:center;gap:2px;position:relative}
.ck-tool{width:36px;height:36px;border-radius:10px;border:0;background:none;color:var(--ck-faint);display:grid;place-items:center;cursor:pointer;transition:.14s}
.ck-tool:hover{background:#F1F3F7;color:var(--ck-azul)}
.ck-tool.lightning:hover{color:var(--ck-gold)}
.ck-tool svg{width:20px;height:20px}
.ck-qr{position:absolute;bottom:46px;left:0;z-index:75;width:330px;max-height:300px;overflow:auto;background:#fff;border:1px solid var(--ck-hair);border-radius:14px;box-shadow:0 22px 50px -16px rgba(20,33,61,.4);padding:6px;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.16s}
.ck-qr.open{opacity:1;visibility:visible;transform:none}
.ck-qr__t{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ck-faint);padding:8px 10px 6px}
.ck-qr__t svg{width:14px;height:14px;color:var(--ck-gold)}
.ck-qr-item{display:block;width:100%;text-align:left;border:0;background:none;border-radius:10px;padding:9px 11px;cursor:pointer}
.ck-qr-item:hover{background:rgba(47,80,150,.06)}
.ck-qr-item .sc{font-family:var(--ck-ff-m);font-size:11.5px;color:var(--ck-azul);font-weight:600}
.ck-qr-item .tx{display:block;font-size:12.5px;color:var(--ck-muted);margin-top:2px;line-height:1.4}

/* ---------- CRM drawer / inline panel ---------- */
.ck-ov{position:fixed;inset:0;z-index:140;background:rgba(18,24,42,.4);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.22s}
.ck-ov.open{opacity:1;visibility:visible}
.ck-crm{display:flex;flex-direction:column;background:#fff;min-height:0}
/* drawer mode */
.ck-crm.drawer{position:fixed;top:0;right:0;height:100vh;width:90vw;max-width:1320px;z-index:150;
  box-shadow:-24px 0 60px -24px rgba(20,33,61,.4);transform:translateX(100%);transition:transform .26s cubic-bezier(.22,.7,.3,1)}
.ck-crm.drawer.open{transform:none}
/* inline mode */
.ck-crm.inline{height:100%;border-left:1px solid var(--ck-hair)}

.ck-crm__hd{display:flex;align-items:center;gap:12px;padding:16px 18px;color:#fff;
  background:linear-gradient(125deg,var(--ck-azul-deep),var(--ck-azul));flex-shrink:0}
.ck-crm.inline .ck-crm__hd{background:#fff;color:var(--ck-ink);border-bottom:1px solid var(--ck-hair)}
.ck-crm__hd .ttl{font-family:var(--ck-ff-d);font-weight:600;font-size:15px}
.ck-crm__hd .x{margin-left:auto;width:32px;height:32px;border-radius:9px;border:0;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;cursor:pointer}
.ck-crm.inline .ck-crm__hd .x{display:none}
.ck-crm__hd .x:hover{background:rgba(255,255,255,.28)}
.ck-crm__hd .x svg{width:17px;height:17px}

/* contact summary */
.ck-contact{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--ck-hair2)}
.ck-contact .av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center}
.ck-contact .av:not(.chan){color:#fff;font-family:var(--ck-ff-d);font-weight:600;font-size:16px;background:linear-gradient(135deg,var(--ck-gold),#A8863F)}
.ck-contact b{font-family:var(--ck-ff-d);font-size:15px;font-weight:600;display:block}
.ck-contact .ph{font-family:var(--ck-ff-m);font-size:12px;color:var(--ck-faint)}

/* tabs */
.ck-tabs{display:flex;gap:2px;padding:8px 12px 0;border-bottom:1px solid var(--ck-hair);flex-shrink:0;background:#fff}
.ck-tab{position:relative;border:0;background:none;padding:9px 11px;font-family:var(--ck-ff);font-size:13px;font-weight:600;color:var(--ck-faint);cursor:pointer;white-space:nowrap}
.ck-tab:hover{color:var(--ck-ink)}
.ck-tab.on{color:var(--ck-azul-deep)}
.ck-tab.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--ck-azul),var(--ck-gold))}
.ck-panes{flex:1;min-height:0;overflow-y:auto;padding:16px 18px}
.ck-pane{display:flex;flex-direction:column;gap:18px}
.ck-pane[hidden]{display:none!important}
.ck-sec__t{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ck-faint);margin-bottom:9px;display:flex;align-items:center;justify-content:space-between}

/* assignment row in panel */
.ck-assignrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--ck-hair);border-radius:11px}
.ck-assignrow .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700;background:linear-gradient(135deg,var(--ck-azul),var(--ck-azul-deep))}
.ck-assignrow b{font-size:13.5px}
.ck-assignrow .re{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--ck-azul);background:none;border:0;cursor:pointer}

/* motivo do fechamento (Fase 19/bloco 7, D8): a linha sob o estágio, só na etapa de perda.
   O [hidden] da UA perde para o display:flex, então a regra de baixo é obrigatória. */
.ck-closing{display:flex;align-items:center;gap:10px;margin-top:10px;padding:9px 12px;border:1px solid var(--ck-hair);border-radius:11px}
.ck-closing .k{flex:none;font-size:12px;color:var(--ck-faint)}
.ck-closing .v{min-width:0;font-size:13.5px;overflow-wrap:anywhere}
.ck-closing .re{flex:none;margin-left:auto;min-height:32px;padding:0 4px;font-size:12.5px;font-weight:600;color:var(--ck-azul);background:none;border:0;cursor:pointer}
.ck-closing[hidden],.ck-closing .re[hidden]{display:none!important}
/* No toque o "Alterar" é alvo de dedo: 44px, o mesmo piso das opções da janela do motivo e dos
   botões do card das configurações (onda de correção 1, N-7). Visível no /m. */
@media (pointer: coarse){.ck-closing .re{min-height:44px;min-width:44px}}

/* etiquetas */
.ck-tags{display:flex;flex-wrap:wrap;gap:7px;position:relative}
.ck-tag{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 6px 0 10px;border-radius:30px;font-size:12px;font-weight:600}
.ck-tag .x{width:16px;height:16px;border-radius:50%;border:0;padding:0;background:rgba(0,0,0,.08);color:inherit;display:grid;place-items:center;cursor:pointer;font-size:0;opacity:0;transition:opacity .12s}
.ck-tag:hover .x{opacity:1}
.ck-tag .x svg{width:11px;height:11px}
.ck-tag.red{background:var(--ck-red-bg);color:var(--ck-red-ink)}
.ck-tag.gold{background:rgba(201,168,92,.2);color:#8a6d22}
.ck-tag.blue{background:rgba(47,80,150,.12);color:var(--ck-azul-deep)}
.ck-tag.amber{background:var(--ck-amber-bg);color:var(--ck-amber-ink)}
.ck-tag.gray{background:#EEF1F5;color:var(--ck-muted)}
.ck-addtag{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 11px;border:1px dashed var(--ck-hair);border-radius:30px;background:none;color:var(--ck-muted);font-size:12px;font-weight:600;cursor:pointer}
.ck-addtag:hover{border-color:var(--ck-azul);color:var(--ck-azul)}

/* stage stepper (vertical, in order) */
.ck-stage{position:relative;padding-left:6px}
/* linha vertical alinhada ao CENTRO dos dots: .ck-stage pad-left 6 + .ck-step pad-left 8 + meio do dot 7 = 21px (line width 2 → left 20) */
.ck-stage::before{content:"";position:absolute;left:20px;top:14px;bottom:14px;width:2px;background:var(--ck-hair)}
.ck-step{position:relative;display:flex;align-items:center;gap:11px;width:100%;padding:7px 8px;border:0;background:none;border-radius:9px;cursor:pointer;text-align:left;z-index:1}
.ck-step:hover{background:rgba(47,80,150,.05)}
.ck-step .dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;border:2px solid var(--ck-hair);background:#fff;box-shadow:0 0 0 3px #fff}
.ck-step .nm{font-size:13.5px;font-weight:500;color:var(--ck-muted)}
.ck-step.done .dot{border-color:var(--ck-azul);background:var(--ck-azul)}
.ck-step.cur .dot{border-color:var(--ck-azul);background:var(--ck-azul);box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(47,80,150,.18)}
.ck-step.cur .nm{color:var(--ck-azul-deep);font-weight:700}
.ck-step.lost .dot{border-color:var(--ck-red)}
/* etapa de venda bloqueada p/ Consultor (canRegisterSale=false: B2 T3, D9):
   mesmo padrão opacity+not-allowed de .fu-seg__opt:disabled, acima. */
.ck-step:disabled{cursor:not-allowed;opacity:.45}
.ck-step:disabled:hover{background:none}

/* attribution card */
.ck-attr{border:1px solid var(--ck-hair);border-radius:12px;overflow:hidden}
.ck-attr__t{display:flex;align-items:center;gap:8px;padding:10px 12px;background:linear-gradient(125deg,var(--ck-azul-deep),var(--ck-azul));color:#fff;font-size:12.5px;font-weight:600}
.ck-attr__t .tag{margin-left:auto;font-size:10.5px;font-weight:700;background:rgba(255,255,255,.2);padding:2px 8px;border-radius:20px}
.ck-attr__r{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;font-size:12px;border-bottom:1px solid var(--ck-hair2)}
.ck-attr__r:last-child{border-bottom:0}
.ck-attr__r .k{color:var(--ck-faint)}
.ck-attr__r .v{font-weight:600;text-align:right}
.ck-attr__r .v.mono{font-family:var(--ck-ff-m);font-size:11px}

/* follow-ups */
.ck-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:11px;border:1px solid transparent;font-family:var(--ck-ff);font-weight:600;font-size:13px;cursor:pointer;transition:.14s}
.ck-btn svg{width:16px;height:16px}
.ck-btn.primary{background:var(--ck-azul);color:#fff}
.ck-btn.primary:hover{background:var(--ck-azul-deep)}
.ck-btn.gold{background:linear-gradient(180deg,#DBC07A,var(--ck-gold));color:#3a2e10}
.ck-btn.gold:hover{filter:brightness(1.04)}
.ck-btn.ghost{background:#fff;border-color:var(--ck-hair);color:var(--ck-ink)}
.ck-btn.ghost:hover{border-color:#D6DCEA}
.ck-btn.block{width:100%}
.ck-fu{display:flex;flex-direction:column;gap:10px}
.ck-fu-item{display:flex;gap:11px;padding:11px;border:1px solid var(--ck-hair);border-radius:11px}
.ck-fu-item .ic{width:30px;height:30px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;background:rgba(47,80,150,.1);color:var(--ck-azul)}
.ck-fu-item .ic svg{width:16px;height:16px}
.ck-fu-item.done .ic{background:var(--ck-green-bg);color:var(--ck-green-ink)}
.ck-fu-body{flex:1;min-width:0}
.ck-fu-body .wh{font-size:13px;font-weight:600}
.ck-fu-body .ms{font-size:12px;color:var(--ck-muted);margin-top:2px}
.ck-fu-st{display:inline-flex;align-self:flex-start;margin-top:5px;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px}
.ck-fu-st.sched{background:rgba(47,80,150,.12);color:var(--ck-azul-deep)}
.ck-fu-st.sent{background:var(--ck-amber-bg);color:var(--ck-amber-ink)}
.ck-fu-st.done{background:var(--ck-green-bg);color:var(--ck-green-ink)}
.ck-fu-x{align-self:flex-start;width:24px;height:24px;border:0;background:none;color:var(--ck-faint);border-radius:7px;cursor:pointer;display:grid;place-items:center}
.ck-fu-x:hover{background:var(--ck-red-bg);color:var(--ck-red-ink)}
.ck-fu-x svg{width:14px;height:14px}

/* notes */
.ck-noteform textarea{width:100%;border:1px solid var(--ck-hair);border-radius:11px;padding:10px 12px;font-family:var(--ck-ff);font-size:13px;resize:vertical;min-height:62px;background:#FFFDF8}
.ck-noteform textarea:focus{outline:none;border-color:var(--ck-gold);box-shadow:0 0 0 3px rgba(201,168,92,.18)}
.ck-noteform .ck-btn{margin-top:9px}
.ck-notes{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.ck-note{background:rgba(201,168,92,.09);border:1px solid rgba(201,168,92,.28);border-radius:11px;padding:11px 12px}
.ck-note .hd{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.ck-note .hd .av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:700;background:linear-gradient(135deg,var(--ck-gold),#A8863F)}
.ck-note .hd b{font-size:12.5px}
.ck-note .hd .tm{margin-left:auto;font-size:11px;color:var(--ck-faint);font-family:var(--ck-ff-m)}
.ck-note p{font-size:13px;color:var(--ck-ink);margin:0}

/* timeline */
.ck-tl{position:relative;padding-left:22px}
.ck-tl::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--ck-hair)}
.ck-tl-item{position:relative;padding-bottom:18px}
.ck-tl-item:last-child{padding-bottom:0}
.ck-tl-item .dot{position:absolute;left:-22px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--ck-azul);box-shadow:0 0 0 3px #fff}
.ck-tl-item.gold .dot{border-color:var(--ck-gold)}
.ck-tl-item.green .dot{border-color:var(--ck-green)}
.ck-tl-item.gray .dot{border-color:var(--ck-faint)}
.ck-tl-item .t1{font-size:13px;font-weight:600}
.ck-tl-item .t2{font-size:12px;color:var(--ck-muted);margin-top:1px}
.ck-tl-item .tm{font-size:11px;color:var(--ck-faint);font-family:var(--ck-ff-m);margin-top:2px}

/* ---------- follow-up modal ---------- */
.ck-modal-ov{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(18,24,42,.42);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:.2s}
/* No Kanban o follow-up abre POR CIMA do chat modal (.modal-ov, z-index 200, mais
   tarde no DOM). Sem isto, o overlay do chat fica na frente: o follow-up some atrás
   e os cliques no "Agendar" caem no overlay do chat. Abaixo do #window-warn-modal (420).
   A MESMA regra vale para os outros modais do motor abertos de dentro do chat:
   a Etiqueta teve exatamente o mesmo defeito (achado do dono, 2026-09-04), e o
   Unificar abriria atrás pelo mesmo motivo na primeira vez que alguém tentasse. */
#fu-modal{z-index:300}
#tags-modal{z-index:300}
#lm-modal{z-index:300}
#sale-modal{z-index:300}
.ck-modal-ov.open{opacity:1;visibility:visible}
/* Fase 19, bloco 3 (D4): a caixa nunca passa da área VISÍVEL (dvh; o vh fica de reserva para o
   navegador sem dvh), e SÓ o corpo rola, com o cabeçalho e o rodapé parados. Antes a grade do
   overlay centrava uma caixa sem teto: numa tela baixa (celular deitado, teclado de pé) o topo e o
   botão de confirmar saíam da tela e a janela não rolava. As janelas #sc/#lm/#sale têm o mesmo teto
   mais abaixo, com id; o dvh delas vem junto das regras delas. */
.ck-modal{width:100%;max-width:430px;background:#fff;border-radius:18px;box-shadow:0 40px 90px -28px rgba(20,33,61,.5);transform:translateY(12px) scale(.98);transition:.24s;overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px)}
.ck-modal-ov.open .ck-modal{transform:none}
.ck-modal__hd{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--ck-hair2);flex:none}
.ck-modal__hd h3{font-family:var(--ck-ff-d);font-size:16px;font-weight:600;margin:0}
.ck-modal__hd .x{margin-left:auto;width:32px;height:32px;border:0;background:none;color:var(--ck-faint);border-radius:9px;cursor:pointer;display:grid;place-items:center}
.ck-modal__hd .x:hover{background:#F1F3F7;color:var(--ck-ink)}
.ck-modal__bd{padding:18px;display:flex;flex-direction:column;gap:14px;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.ck-modal__ft{display:flex;justify-content:flex-end;gap:10px;padding:14px 18px;border-top:1px solid var(--ck-hair2);flex:none}
.ck-field{display:flex;flex-direction:column;gap:6px}
.ck-field label{font-size:12px;font-weight:600;color:var(--ck-muted)}
.ck-field .row{display:flex;gap:10px}
.ck-input,.ck-select,.ck-modal textarea{width:100%;padding:10px 12px;border:1px solid var(--ck-hair);border-radius:10px;font-family:var(--ck-ff);font-size:13.5px;background:#F8FAFC;color:var(--ck-ink)}
.ck-modal textarea{resize:vertical;min-height:60px}
.ck-input:focus,.ck-select:focus,.ck-modal textarea:focus{outline:none;border-color:var(--ck-azul);background:#fff;box-shadow:0 0 0 3px rgba(47,80,150,.12)}

/* ---------- toast ---------- */
.ck-toast-wrap{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.ck-toast{background:var(--ck-azul-deep);color:#fff;font-size:13px;font-weight:600;padding:10px 16px;border-radius:11px;box-shadow:0 14px 30px -8px rgba(20,33,61,.5);animation:ckToast 2.6s ease forwards}
@keyframes ckToast{0%{opacity:0;transform:translateY(10px)}10%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}

/* ---------- fixes ---------- */
.ck-search>svg{width:18px;height:18px;color:var(--ck-faint);flex:none}
.ck-item>svg{width:16px;height:16px;flex:none}
.ck-note .hd{align-items:center}
.ck-note .hd .ck-note-x{width:24px;height:24px;border:0;background:none;color:var(--ck-faint);border-radius:7px;cursor:pointer;display:grid;place-items:center;margin-left:6px;flex:none}
.ck-note .hd .ck-note-x:hover{background:var(--ck-red-bg);color:var(--ck-red-ink)}
.ck-note .hd .ck-note-x svg{width:14px;height:14px}

/* ---------- drawer largo (~90% da tela, mais espaço p/ 1366×768) ---------- */
.ck-crm.drawer .ck-crm__hd{padding:16px 26px}
.ck-crm.drawer .ck-contact{padding:18px 26px}
.ck-crm.drawer .ck-tabs{padding:8px 26px 0}
.ck-crm.drawer .ck-panes{padding:24px 28px}
.ck-crm.drawer .ck-tab{font-size:14px;padding:11px 14px}
/* Detalhes: seções em colunas responsivas */
.ck-crm.drawer .ck-pane[data-crm-pane="det"]{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:24px 30px;align-items:start}
/* Follow-ups: lista em grade; botão alinhado à esquerda */
.ck-crm.drawer .ck-pane[data-crm-pane="fu"] .ck-fu{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.ck-crm.drawer .ck-pane[data-crm-pane="fu"]>.ck-btn{justify-self:start;min-width:240px}
/* Notas: forma legível + cartões em grade */
.ck-crm.drawer .ck-pane[data-crm-pane="notas"]{max-width:780px}
.ck-crm.drawer .ck-pane[data-crm-pane="notas"] .ck-notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
/* Histórico: largura confortável de leitura */
.ck-crm.drawer .ck-pane[data-crm-pane="hist"]{max-width:680px}
/* em telas estreitas o drawer ocupa tudo */
@media (max-width:900px){.ck-crm.drawer{width:100vw;max-width:none}}

/* ---------- multi-número: nome do operador (enviadas) + tag de fonte ---------- */
.ck-from{font-family:var(--ck-ff-d);font-weight:700;font-size:12.5px;color:var(--ck-azul-deep);line-height:1.2;margin-bottom:2px}
.ck-src{display:inline-flex;align-items:center;gap:3px;font-family:var(--ck-ff-m);font-size:9.5px;font-weight:600;color:#5b6b7a;background:rgba(11,20,26,.07);padding:1px 6px;border-radius:20px;letter-spacing:-.02em;vertical-align:middle;line-height:1.5}
.ck-src svg{width:9px;height:9px}
/* quando uma fonte única está selecionada, a tag por mensagem fica redundante */
[data-ck-single] .ck-src{display:none}

/* seletor de fonte (números da empresa): abas */
.ck-chsel{display:flex;align-items:center;gap:7px;padding:9px 16px;background:#fff;border-bottom:1px solid var(--ck-hair);overflow-x:auto}
.ck-chsel::-webkit-scrollbar{height:0}
.ck-chsel .lbl{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ck-faint);flex:none;margin-right:2px}
.ck-chtab{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:30px;border:1px solid var(--ck-hair);background:#fff;font-family:var(--ck-ff);font-size:12.5px;font-weight:600;color:var(--ck-muted);cursor:pointer;white-space:nowrap;flex:none}
.ck-chtab:hover{border-color:#cfd6e4;color:var(--ck-ink)}
.ck-chtab.on{background:var(--ck-azul);border-color:var(--ck-azul);color:#fff;box-shadow:0 6px 14px -6px rgba(47,80,150,.6)}
.ck-chtab .dot{width:7px;height:7px;border-radius:50%;background:var(--ck-green);flex:none}
.ck-chtab.on .dot{background:#fff}
.ck-chtab .mono{font-family:var(--ck-ff-m)}
.ck-chtab svg{width:14px;height:14px}

/* ---------- modal "fora da janela 24h" / forçar envio (DMW.windowWarn / C1) ---------- */
.ck-ww-ov{position:fixed;inset:0;z-index:410;display:grid;place-items:center;padding:20px;background:rgba(18,24,42,.42);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:.2s}
.ck-ww-ov.open{opacity:1;visibility:visible}
.ck-ww{width:100%;max-width:410px;background:#fff;border-radius:16px;box-shadow:0 40px 90px -28px rgba(20,33,61,.5);padding:26px 24px 20px;text-align:center;transform:translateY(12px) scale(.98);transition:.24s}
.ck-ww-ov.open .ck-ww{transform:none}
.ck-ww__ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin:0 auto 14px;background:var(--ck-amber-bg);color:var(--ck-amber-ink)}
.ck-ww__ic svg{width:27px;height:27px}
.ck-ww h3{font-family:var(--ck-ff-d);font-size:18px;font-weight:600;margin:0 0 6px;color:var(--ck-ink)}
.ck-ww p{font-size:13.5px;color:var(--ck-muted);margin:0 0 20px;line-height:1.55}
.ck-ww__ft{display:flex;gap:10px}
.dmw-btn.warn{background:linear-gradient(180deg,#E8A33D,#D08A1E);color:#3a2606}
.dmw-btn.warn:hover{filter:brightness(1.04)}

/* ============================================================
   B1: Gravação de voz (barra de gravação no lugar do composer)
   ============================================================ */
.ck-rec{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:4px 4px 4px 12px;border:1px solid var(--ck-hair);border-radius:14px;background:#FBF2F2;animation:ckRecIn .18s ease}
@keyframes ckRecIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ck-rec__dot{width:11px;height:11px;border-radius:50%;background:var(--ck-red);flex:none;animation:ckRecPulse 1.1s ease-in-out infinite;box-shadow:0 0 0 0 rgba(212,91,91,.5)}
@keyframes ckRecPulse{0%{box-shadow:0 0 0 0 rgba(212,91,91,.5)}70%{box-shadow:0 0 0 7px rgba(212,91,91,0)}100%{box-shadow:0 0 0 0 rgba(212,91,91,0)}}
.ck-rec__lbl{font-family:var(--ck-ff);font-size:13px;font-weight:600;color:var(--ck-red-ink);flex:none}
.ck-rec__time{font-family:var(--ck-ff-m);font-size:13px;font-weight:600;color:var(--ck-red-ink);flex:none;min-width:34px}
.ck-rec__wave{display:flex;align-items:center;gap:2px;flex:1;min-width:0;height:24px;overflow:hidden}
.ck-rec__wave i{display:block;width:3px;border-radius:2px;background:rgba(181,48,46,.55);flex:none;animation:ckRecWave 1s ease-in-out infinite}
@keyframes ckRecWave{0%,100%{height:5px}50%{height:20px}}
.ck-rec__cancel{width:36px;height:36px;border-radius:10px;border:0;background:none;color:var(--ck-muted);display:grid;place-items:center;cursor:pointer;flex:none;transition:.14s}
.ck-rec__cancel:hover{background:#fff;color:var(--ck-red-ink)}
.ck-rec__cancel svg{width:18px;height:18px}
.ck-rec__send{width:40px;height:40px;border-radius:50%;border:0;background:var(--ck-azul);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;transition:.14s;box-shadow:0 6px 14px -6px rgba(47,80,150,.6)}
.ck-rec__send:hover{background:var(--ck-azul-deep)}
.ck-rec__send svg{width:18px;height:18px;margin-left:1px}

/* ============================================================
   B12: Anexo de arquivo (chip acima do composer)
   ============================================================ */
.ck-att{display:flex;flex-direction:column;gap:6px;padding:2px 0 8px}
.ck-att__chip{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;max-width:100%;padding:8px 8px 8px 11px;border:1px solid var(--ck-hair);border-radius:11px;background:#F8FAFC}
.ck-att__chip .ic{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;background:rgba(47,80,150,.1);color:var(--ck-azul)}
.ck-att__chip .ic svg{width:16px;height:16px}
.ck-att__chip .meta{min-width:0}
.ck-att__chip .nm{font-size:13px;font-weight:600;color:var(--ck-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-att__chip .sz{font-size:11.5px;color:var(--ck-faint);font-family:var(--ck-ff-m)}
.ck-att__chip .x{width:24px;height:24px;border-radius:7px;border:0;background:none;color:var(--ck-faint);display:grid;place-items:center;cursor:pointer;flex:none}
.ck-att__chip .x:hover{background:var(--ck-red-bg);color:var(--ck-red-ink)}
.ck-att__chip .x svg{width:14px;height:14px}
.ck-att__note{font-size:11.5px;color:var(--ck-faint)}

/* ============================================================
   B3: Composer desabilitado (off-state)
   ============================================================ */
.ck-composer-off{display:flex;align-items:center;gap:11px;flex:1;min-width:0;padding:11px 14px;border:1px dashed var(--ck-hair);border-radius:14px;background:#F6F7FA}
.ck-composer-off .ic{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;background:#EDEFF4;color:var(--ck-faint)}
.ck-composer-off .ic svg{width:18px;height:18px}
.ck-composer-off .tx{font-size:13px;line-height:1.4;color:var(--ck-muted)}
.ck-composer-off .tx b{color:var(--ck-ink);font-weight:600}

/* ============================================================
   B13: Respostas rápidas: nova/excluir + atalho "/"
   ============================================================ */
.ck-qr-item{position:relative;display:flex;align-items:flex-start;gap:8px}
.ck-qr-item .qr-body{flex:1;min-width:0;text-align:left}
.ck-qr-item .qr-del{flex:none;width:24px;height:24px;border-radius:7px;border:0;background:none;color:var(--ck-faint);display:grid;place-items:center;cursor:pointer;opacity:0;transition:.12s}
.ck-qr-item:hover .qr-del{opacity:1}
.ck-qr-item .qr-del:hover{background:var(--ck-red-bg);color:var(--ck-red-ink)}
.ck-qr-item .qr-del svg{width:13px;height:13px}
.ck-qr-new{width:calc(100% - 8px);margin:4px 4px 2px;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px;border:1px dashed var(--ck-hair);border-radius:10px;background:none;color:var(--ck-azul);font-family:var(--ck-ff);font-size:12.5px;font-weight:600;cursor:pointer}
.ck-qr-new:hover{border-color:var(--ck-azul);background:rgba(47,80,150,.05)}
.ck-qr-new svg{width:14px;height:14px}
.ck-qr-form{display:none;flex-direction:column;gap:7px;padding:9px;margin:2px 4px 4px;border:1px solid var(--ck-hair);border-radius:11px;background:#F8FAFC}
.ck-qr-form.open{display:flex}
.ck-qr-form input,.ck-qr-form textarea{width:100%;padding:8px 10px;border:1px solid var(--ck-hair);border-radius:9px;font-family:var(--ck-ff);font-size:12.5px;background:#fff;color:var(--ck-ink)}
.ck-qr-form .sc-in{font-family:var(--ck-ff-m);color:var(--ck-azul);font-weight:600}
.ck-qr-form textarea{resize:vertical;min-height:46px}
.ck-qr-form input:focus,.ck-qr-form textarea:focus{outline:none;border-color:var(--ck-azul);box-shadow:0 0 0 3px rgba(47,80,150,.12)}
.ck-qr-form .ft{display:flex;justify-content:flex-end;gap:7px}
.ck-qr-form .ft button{padding:7px 12px;border-radius:9px;border:0;font-family:var(--ck-ff);font-size:12px;font-weight:600;cursor:pointer}
.ck-qr-form .ft .save{background:var(--ck-azul);color:#fff}
.ck-qr-form .ft .save:hover{background:var(--ck-azul-deep)}
.ck-qr-form .ft .cancel{background:none;color:var(--ck-muted)}
.ck-qr-empty{padding:14px 11px;text-align:center;font-size:12.5px;color:var(--ck-faint)}

/* ============================================================
   B14: Criar etiqueta com cor livre
   ============================================================ */
.ck-tagnew{padding:8px 10px 4px}
.ck-tagnew__t{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ck-faint);padding:0 0 7px}
.ck-tagnew__row{display:flex;align-items:center;gap:7px}
.ck-tagnew__row input[type="text"]{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--ck-hair);border-radius:9px;font-family:var(--ck-ff);font-size:12.5px;background:#fff;color:var(--ck-ink)}
.ck-tagnew__row input[type="text"]:focus{outline:none;border-color:var(--ck-azul);box-shadow:0 0 0 3px rgba(47,80,150,.12)}
.ck-tagnew__row input[type="color"]{width:34px;height:34px;flex:none;padding:0;border:1px solid var(--ck-hair);border-radius:9px;background:#fff;cursor:pointer}
.ck-tagnew__row input[type="color"]::-webkit-color-swatch-wrapper{padding:3px}
.ck-tagnew__row input[type="color"]::-webkit-color-swatch{border:0;border-radius:6px}
.ck-tagnew__add{flex:none;padding:8px 12px;border-radius:9px;border:0;background:var(--ck-azul);color:#fff;font-family:var(--ck-ff);font-size:12px;font-weight:600;cursor:pointer}
.ck-tagnew__add:hover{background:var(--ck-azul-deep)}
.ck-tag.custom .x{background:rgba(0,0,0,.12)}

/* ============================================================
   Modal de etiquetas (tags-modal)
   ============================================================ */
/* Fase 19, bloco 3: era `width:min(440px,94vw)`, e 94vw passa da área do overlay (100vw menos os
   20px de cada lado) em toda tela abaixo de 457px: a caixa saía colada na direita (20px à esquerda,
   3px à direita a 390px) e passava da borda a 320px. Com 100% ela cabe e fica centrada; no computador
   o teto de 430px do .ck-modal já valia (o 440 nunca chegou a aplicar), então nada muda lá. */
.ck-tags-modal{width:100%}
.ck-tagsearch{padding:0 0 4px}
.ck-tagsearch input{width:100%;padding:9px 12px;border:1px solid var(--ck-hair);border-radius:10px;font-family:var(--ck-ff);font-size:13.5px;background:#F8FAFC;color:var(--ck-ink)}
.ck-tagsearch input:focus{outline:none;border-color:var(--ck-azul);background:#fff;box-shadow:0 0 0 3px rgba(47,80,150,.12)}
.ck-taglist{max-height:46vh;overflow:auto;display:flex;flex-direction:column;gap:4px;margin:10px 0}
.ck-tagrow{display:flex;align-items:center;gap:6px}
.ck-tagrow__apply{flex:1;display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--ck-hair);border-radius:9px;padding:7px 10px;cursor:pointer;font-family:var(--ck-ff);font-size:13px;color:var(--ck-ink);text-align:left}
.ck-tagrow__apply:hover{background:rgba(47,80,150,.05);border-color:var(--ck-azul)}
.ck-tagrow__apply .dot{width:11px;height:11px;border-radius:4px;flex-shrink:0}
.ck-tagrow__apply .nm{flex:1}
.ck-tagrow__apply .on{display:none;font-size:13px;color:var(--ck-azul);font-weight:700}
.ck-tagrow.on .ck-tagrow__apply{background:rgba(47,80,150,.07);border-color:var(--ck-azul)}
.ck-tagrow.on .ck-tagrow__apply .on{display:inline}
.ck-ic-sm{width:28px;height:28px;flex:none;border:1px solid var(--ck-hair);border-radius:8px;background:none;cursor:pointer;font-size:14px;display:grid;place-items:center;color:var(--ck-muted)}
.ck-ic-sm:hover{border-color:var(--ck-azul);color:var(--ck-azul-deep);background:rgba(47,80,150,.06)}
/* Fase 19/bloco 8 (D4): quem não tem tags.manage só LÊ as etiquetas. O "+ Etiqueta" (inline-flex) e a linha de
   criar da janela somem pelo atributo hidden, e sem estas regras o display da classe venceria o hidden da UA
   (armadilha registrada do projeto: [hidden] contra classe com display). A etiqueta do lead sem o X perde o
   respiro da direita que o X ocupava, e a linha da janela fica desligada sem parecer um botão inerte. */
.ck-addtag[hidden]{display:none!important}
.ck-tagnew[hidden]{display:none!important}
.ck-tag.ro{padding:0 10px}
.ck-tagrow__apply:disabled{cursor:default;color:var(--ck-ink)}
.ck-tagrow__apply:disabled:hover{background:none;border-color:var(--ck-hair)}
.ck-tagrow.on .ck-tagrow__apply:disabled:hover{background:rgba(47,80,150,.07);border-color:var(--ck-azul)}
/* Rodada 2 (N-E): a janela de etiquetas que não conseguiu ler a lista oferece "Tentar de novo" (alvo de 44px no toque) */
.ck-empty .ck-btn[data-tags-retry]{margin-top:10px}
@media (pointer: coarse){.ck-empty .ck-btn[data-tags-retry]{min-height:44px}}

/* ============================================================
   B15: Atribuição: link "Ver anúncio" + avisos + cartões UTM/Orgânico
   ============================================================ */
.ck-attr+.ck-attr{margin-top:12px}
.ck-attr__foot{padding:9px 12px;border-top:1px solid var(--ck-hair2);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ck-attr__link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--ck-azul);text-decoration:none}
.ck-attr__link:hover{color:var(--ck-azul-deep);text-decoration:underline}
.ck-attr__link svg{width:13px;height:13px}
.ck-attr__warn{display:flex;align-items:center;gap:6px;padding:7px 12px;font-size:11.5px;color:var(--ck-amber-ink);background:var(--ck-amber-bg);border-top:1px solid var(--ck-hair2)}
.ck-attr__warn svg{width:13px;height:13px;flex:none}
.ck-attr.utm .ck-attr__t{background:linear-gradient(125deg,#3B7A5A,#2E8B57)}
.ck-attr.org .ck-attr__t{background:linear-gradient(125deg,#5A6373,#3C4350)}
.ck-attr__note{padding:9px 12px;font-size:12px;color:var(--ck-muted);line-height:1.5}

/* ============================================================
   B16: Venda na timeline + cancelar (estorno)
   ============================================================ */
.ck-tl-item .t1 .ck-tl-cancel{margin-left:8px;font-size:11.5px;font-weight:600;color:var(--ck-red-ink);background:none;border:0;cursor:pointer;padding:0;text-decoration:underline}
.ck-tl-item .t1 .ck-tl-cancel:hover{color:var(--ck-red)}
.ck-tl-item.canceled .t1 .amt{text-decoration:line-through;color:var(--ck-faint)}
.ck-tl-item.canceled .dot{border-color:var(--ck-faint)!important}
.ck-tl-est{display:none;font-size:11px;font-weight:700;color:var(--ck-red-ink);background:var(--ck-red-bg);padding:2px 8px;border-radius:20px;margin-left:8px;vertical-align:middle}
.ck-tl-item.canceled .ck-tl-est{display:inline-block}

/* ============================================================
   CRM: aba Roteiro (processo do funil): etapa atual em destaque
   ============================================================ */
.ck-rot-list{display:flex;flex-direction:column;gap:8px}
.ck-rot{border:1px solid var(--ck-hair);border-radius:11px}
.ck-rot.cur{border-color:var(--ck-gold)}
.ck-rot__hd{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;background:none;border:0;border-radius:11px;cursor:pointer;text-align:left;font-family:var(--ck-ff);font-size:13.5px;font-weight:500;color:var(--ck-muted)}
.ck-rot__hd:hover{background:rgba(47,80,150,.05)}
.ck-rot__hd .dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;border:2px solid var(--ck-hair);background:#fff}
.ck-rot.cur .ck-rot__hd .dot{border-color:var(--ck-gold);background:var(--ck-gold)}
.ck-rot.cur .ck-rot__hd .nm{color:var(--ck-azul-deep);font-weight:700}
.ck-rot__bd{padding:0 12px 12px;display:flex;flex-direction:column;gap:10px}
/* .ck-rot__bd usa display:flex → sobrepõe o [hidden] da UA; restaura o hide (mesmo padrão de .ck-pane[hidden]/.ck-field[hidden]). */
.ck-rot__bd[hidden]{display:none!important}
.ck-rot__sec .ck-sec__t{margin-bottom:4px}
.ck-rot__txt{white-space:pre-wrap;margin:0;font-size:13px;color:var(--ck-ink);line-height:1.5}
.ck-rot__none{color:var(--ck-faint)}
.ck-rot-empty{display:flex;flex-direction:column;gap:10px;padding:8px 0}
.ck-rot-empty__sub{font-size:12px;color:var(--ck-muted);margin:0}

/* "Nomear o lead" (v3.53.0): lápis + barra de edição de apelido/telefone. */
.ck-ic--edit{width:28px;height:28px;border-radius:8px}
.ck-ic--edit svg{width:15px;height:15px}
.rh-name #cp-edit-btn{flex:none}
/* flex:none é OBRIGATÓRIO: como .ck-edit tem overflow:hidden, seu min-height de
   flex resolve para 0 → dentro do flex-column do #chat-modal (onde o chat-body
   transborda muito) a barra era esmagada de ~60px p/ ~25px, cortando os campos.
   flex:none trava a altura no conteúdo. NÃO remover. */
.ck-edit{flex:none;max-height:0;overflow:hidden;transition:max-height .18s ease;background:#fff;border-bottom:1px solid var(--ck-hair)}
.ck-edit.open{max-height:140px}
.ck-edit-row{display:flex;align-items:center;gap:8px;padding:10px 16px}
.ck-edit-row .ck-input{flex:1;min-width:0}
@media (max-width:560px){.ck-edit-row{flex-wrap:wrap}.ck-edit-row .ck-input{flex:1 1 100%}.ck-edit.open{max-height:200px}}
.ck-tl-item.canceled .ck-tl-cancel{display:none}

/* ── Follow-up: segmentado de alvo + aviso Cloud API ─────────────── */
.fu-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#F1F3F7;border:1px solid var(--ck-hair);border-radius:11px;padding:4px}
.fu-seg__opt{border:0;background:none;padding:8px 10px;border-radius:8px;font-family:var(--ck-ff);font-weight:600;font-size:13px;color:var(--ck-muted);cursor:pointer;transition:.14s}
.fu-seg__opt:hover:not(:disabled):not(.is-on){color:var(--ck-ink)}
.fu-seg__opt.is-on{background:#fff;color:var(--ck-azul-deep);box-shadow:0 1px 3px rgba(20,33,61,.12)}
.fu-seg__opt:disabled{opacity:.4;cursor:not-allowed}
.fu-note{margin-top:8px;font-size:12px;line-height:1.4;color:var(--ck-amber-ink);background:var(--ck-amber-bg);border:1px solid rgba(224,163,61,.3);border-radius:9px;padding:8px 10px}
/* .ck-field usa display:flex, que sobrepõe o [hidden] da UA: restaura o hide. */
.ck-field[hidden]{display:none!important}
.ck-fu-st.direct{background:rgba(47,80,150,.1);color:var(--ck-azul-deep)}
.ck-fu-st.failed{background:var(--ck-red-bg);color:var(--ck-red-ink)}
.ck-fu-st + .ck-fu-st{margin-left:5px}
.ck-fu-item.failed .ic{background:var(--ck-red-bg);color:var(--ck-red-ink)}

/* ── Iniciar conversa (W1.3/D3): modal das duas portas ───────────── */
/* A caixa nunca passa da janela, e SÓ a área de campos rola: o aviso de risco
   e a linha do teto ficam parados no topo (são a informação com que a pessoa
   decide) e o rodapé fica parado embaixo. Medido headless: sem isto, numa
   janela de 720px o .ck-modal (overflow:hidden) cortava os botões, e o aviso
   caía abaixo da dobra do modal. */
#sc-modal .ck-modal{display:flex;flex-direction:column;max-height:calc(100vh - 40px)}
#sc-modal #sc-form,#sc-modal #sc-result{display:flex;flex-direction:column;min-height:0;flex:1}
#sc-modal .sc-body{flex:1;min-height:0;overflow-y:auto}
.sc-brief{display:flex;flex-direction:column;gap:9px;padding:14px 18px 0}
.sc-lead{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;font-size:13.5px;color:var(--ck-ink)}
.sc-lead span{font-family:var(--ck-ff-m);font-size:12px;color:var(--ck-faint)}
.sc-quota{margin:0;font-size:12.5px;line-height:1.45;color:var(--ck-muted)}
.sc-quota b{color:var(--ck-ink)}
.sc-quota.is-zero{color:var(--ck-red-ink)}
/* Histórico: o texto não usava --ck-amber-ink porque ela media 4.21:1 contra
   --ck-amber-bg, abaixo do AA 4.5, e este é o parágrafo que explica por que o
   número do cliente pode ser bloqueado. #7C632F é o mesmo dourado escuro já
   usado em .fchip.sortc (filters.css), e mede 5.09:1 sobre este fundo. A
   variável foi corrigida para o MESMO #7C632F no pacote de proteção (D4b);
   a cor literal aqui ficou, redundante mas inofensiva, para não trocar uma
   regra que já estava certa. */
.sc-risk{margin:0;font-size:12px;line-height:1.45;color:#7C632F;background:var(--ck-amber-bg);border:1px solid rgba(224,163,61,.3);border-radius:9px;padding:9px 11px}
.sc-error{margin:0 18px 14px;font-size:12.5px;line-height:1.45;color:var(--ck-red-ink);background:var(--ck-red-bg);border:1px solid rgba(212,91,91,.3);border-radius:9px;padding:9px 11px}
.sc-result__hd{margin:0;font-family:var(--ck-ff-d);font-size:14.5px;font-weight:600;line-height:1.4;color:var(--ck-ink)}
.sc-result__p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ck-muted)}
/* #sc-form e .ck-modal__bd são display:flex, que sobrepõe o [hidden] da UA.
   Sem estas linhas o resultado aparece EMPILHADO com o formulário em vez de
   substituí-lo (mesma armadilha já registrada em .ck-field/.ck-pane). */
#sc-form[hidden],#sc-result[hidden],.sc-error[hidden],
.sc-result__hd[hidden],.sc-result__p[hidden]{display:none!important}

/* ── Unificar leads (W1.4/H3): modal das duas portas ─────────────── */
/* Mesma disciplina do #sc-modal: a caixa nunca passa da janela e SÓ o miolo
   rola, senão o rodapé (onde ficam Unificar e Voltar) sai da tela numa janela
   de 720px, e a pessoa fica sem como confirmar nem desistir de uma ação
   irreversível. O modal é mais largo que o padrão de 430px porque o preview
   compara DOIS leads lado a lado, e a 430 os dois cartões da escolha ficavam
   com o telefone quebrando em duas linhas. Nenhuma cor nova: os avisos reusam
   o âmbar do #sc-risk e o vermelho do #sc-error. */
#lm-modal .ck-modal{display:flex;flex-direction:column;max-height:calc(100vh - 40px);max-width:520px}
#lm-modal #lm-pick,#lm-modal #lm-preview,#lm-modal #lm-done{display:flex;flex-direction:column;min-height:0;flex:1}
#lm-modal .lm-body{flex:1;min-height:0;overflow-y:auto}
.lm-list{display:flex;flex-direction:column;gap:6px}
.lm-cand{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;width:100%;text-align:left;padding:9px 11px;border:1px solid var(--ck-hair);border-radius:10px;background:#fff;cursor:pointer;font-family:var(--ck-ff);transition:.14s}
.lm-cand:hover{border-color:var(--ck-azul);background:#F8FAFC}
.lm-cand b{font-size:13.5px;color:var(--ck-ink)}
.lm-cand .ph{font-family:var(--ck-ff-m);font-size:12px;color:var(--ck-faint)}
.lm-cand .em,.lm-cand .st{font-size:11.5px;color:var(--ck-muted)}
.lm-cand .st{margin-left:auto}
.lm-empty,.lm-none{margin:0;font-size:12.5px;line-height:1.45;color:var(--ck-muted)}
.lm-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lm-opt{display:flex;flex-direction:column;gap:3px;text-align:left;padding:10px 12px;border:1px solid var(--ck-hair);border-radius:11px;background:#fff;cursor:pointer;font-family:var(--ck-ff);transition:.14s}
.lm-opt.on{border-color:var(--ck-azul);background:rgba(47,80,150,.06);box-shadow:0 0 0 3px rgba(47,80,150,.12)}
.lm-opt b{font-size:13.5px;color:var(--ck-ink)}
.lm-opt .ph{font-family:var(--ck-ff-m);font-size:12px;color:var(--ck-faint)}
.lm-opt .st,.lm-opt .ow{font-size:11.5px;color:var(--ck-muted)}
.lm-sec{display:flex;flex-direction:column;gap:7px}
.lm-counts{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px}
.lm-counts li{font-size:12.5px;color:var(--ck-muted)}
.lm-counts b{font-family:var(--ck-ff-m);color:var(--ck-ink)}
.lm-note{margin:0;font-size:12.5px;line-height:1.45;color:var(--ck-muted)}
/* Mesmo dourado escuro do .sc-risk: sobre --ck-amber-bg ele mede 5.09:1.
   --ck-amber-ink foi corrigida para o MESMO valor no pacote de proteção
   (D4b); a cor literal aqui ficou por já estar certa antes do fix. */
.lm-warn{margin:0;font-size:12px;line-height:1.45;color:#7C632F;background:var(--ck-amber-bg);border:1px solid rgba(224,163,61,.3);border-radius:9px;padding:9px 11px}
.lm-danger{margin:0 18px 14px;flex:none;font-size:12.5px;line-height:1.45;font-weight:600;color:var(--ck-red-ink);background:var(--ck-red-bg);border:1px solid rgba(212,91,91,.3);border-radius:9px;padding:9px 11px}
.lm-error{margin:0 18px 14px;flex:none;font-size:12.5px;line-height:1.45;color:var(--ck-red-ink);background:var(--ck-red-bg);border:1px solid rgba(212,91,91,.3);border-radius:9px;padding:9px 11px}
.lm-done__hd{margin:0;font-family:var(--ck-ff-d);font-size:14.5px;font-weight:600;line-height:1.4;color:var(--ck-ink)}
.lm-done__p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ck-muted)}
/* Os blocos de passo, a lista de contagens e a seção de campos são display:flex
   ou display:grid, que sobrepõem o [hidden] da UA. Sem estas linhas os três
   passos aparecem EMPILHADOS em vez de um substituir o outro (a mesma
   armadilha já registrada em .ck-field, .ck-pane e #sc-form). */
#lm-pick[hidden],#lm-preview[hidden],#lm-done[hidden],
.lm-sec[hidden],.lm-counts[hidden],.lm-list[hidden]{display:none!important}
.lm-note[hidden],.lm-warn[hidden],.lm-danger[hidden],.lm-error[hidden],
.lm-empty[hidden],.lm-none[hidden],.lm-done__p[hidden]{display:none!important}
@media (max-width:560px){.lm-choice{grid-template-columns:1fr}}

/* ── Motivo de fechamento (Fase 19/bloco 7, D3): a janela "Por que este lead foi
   perdido?" ──────────────────────────────────────────────────────────────────
   Abre POR CIMA do chat do Kanban e do modal Perdido (os dois são .modal-ov em
   z-index 200), pelo mesmo motivo do follow-up, da etiqueta e do unificar. A caixa
   segue a regra do bloco 3: nunca passa da área visível (dvh) e SÓ o miolo rola,
   com o cabeçalho e o botão de confirmar parados, senão no celular deitado ou com
   o teclado de pé a pessoa ficaria sem como confirmar. Nenhuma cor nova: o
   vermelho da recusa é o do .sc-error, o azul de seleção é o do .lm-opt. */
#cr-modal{z-index:300}
#cr-modal .ck-modal{max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);max-width:440px}
#cr-modal .cr-body{flex:1;min-height:0}
.cr-lede{margin:0;font-size:12.5px;line-height:1.45;color:var(--ck-muted)}
.cr-options{display:flex;flex-direction:column;gap:6px}
/* Cada opção é uma linha inteira clicável com 44px de altura mínima: alvo de toque. */
.cr-opt{display:flex;align-items:center;gap:11px;min-height:44px;padding:9px 12px;border:1px solid var(--ck-hair);border-radius:11px;background:#fff;cursor:pointer;font-family:var(--ck-ff);transition:.14s}
.cr-opt:hover{border-color:var(--ck-azul);background:#F8FAFC}
.cr-opt:has(input:checked){border-color:var(--ck-azul);background:rgba(47,80,150,.06);box-shadow:0 0 0 3px rgba(47,80,150,.12)}
.cr-opt:has(input:focus-visible){outline:2px solid var(--ck-azul);outline-offset:2px}
.cr-opt input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--ck-azul)}
.cr-opt__t{font-size:13.5px;font-weight:600;color:var(--ck-ink);line-height:1.3}
.cr-count{align-self:flex-end;font-family:var(--ck-ff-m);font-size:11.5px;color:var(--ck-muted)}
.cr-error{margin:0;font-size:12.5px;line-height:1.45;color:var(--ck-red-ink);background:var(--ck-red-bg);border:1px solid rgba(212,91,91,.3);border-radius:9px;padding:9px 11px}
/* .cr-lede e .cr-error são blocos simples, mas o [hidden] da UA perde para qualquer
   display que um dia lhes dermos: a regra fica escrita, como nos irmãos acima. */
.cr-lede[hidden],.cr-error[hidden]{display:none!important}

/* ── Assistente de venda (C1.3): cinco passos num modal ───────────────────
   Mesmo esqueleto do #lm-modal: o modal é uma coluna com teto de altura e
   quem rola é o CORPO de cada passo, nunca a página. Sem isto, no passo 3
   (um bloco por passageiro) o rodapé com "Voltar/Continuar" sai da janela e
   a pessoa fica presa no meio do fluxo, que e a mesma medicao que o Unificar
   pagou. Mais largo que os 430px padrão porque a grade de parcelas e a lista
   de revisão têm duas colunas; abaixo de 560px tudo cai para uma.
   Nenhuma cor nova: âmbar do aviso, vermelho do erro, dourado do confirmar. */
#sale-modal .ck-modal{display:flex;flex-direction:column;max-height:calc(100vh - 40px);max-width:560px}
/* Bloco 3 (D4): o teto das três janelas acima na área VISÍVEL (dvh). O vh delas fica de reserva: o
   navegador que não entende a unidade descarta esta linha e mantém a de cima. */
#sc-modal .ck-modal,#lm-modal .ck-modal,#sale-modal .ck-modal{max-height:calc(100dvh - 40px)}
#sale-modal #sw-p1,#sale-modal #sw-p2,#sale-modal #sw-p3,#sale-modal #sw-p4,
#sale-modal #sw-p5,#sale-modal #sw-done,#sale-modal #sw-fail{display:flex;flex-direction:column;min-height:0;flex:1}
#sale-modal .sw-body{flex:1;min-height:0;overflow-y:auto}
.sw-prog{margin-left:auto;font-family:var(--ck-ff-m);font-size:11.5px;color:var(--ck-muted);white-space:nowrap}
.sw-prog:empty{display:none}
.sw-list{display:flex;flex-direction:column;gap:6px}
.sw-cand{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;width:100%;text-align:left;padding:9px 11px;border:1px solid var(--ck-hair);border-radius:10px;background:#fff;cursor:pointer;font-family:var(--ck-ff);transition:.14s}
.sw-cand:hover{border-color:var(--ck-azul);background:#F8FAFC}
.sw-cand b{font-size:13.5px;color:var(--ck-ink)}
.sw-cand .dt,.sw-cand .ph{font-family:var(--ck-ff-m);font-size:12px;color:var(--ck-muted)}
.sw-cand .vl{font-family:var(--ck-ff-m);font-size:12.5px;color:var(--ck-ink);font-weight:600}
.sw-cand .vg,.sw-cand .dc{font-size:11.5px;color:var(--ck-muted);margin-left:auto}
.sw-sec{display:flex;flex-direction:column;gap:9px}
.sw-pick{margin:0;font-size:13.5px;font-weight:600;color:var(--ck-ink)}
.sw-empty{margin:0;font-size:12.5px;line-height:1.45;color:var(--ck-muted)}
.sw-note{margin:0;font-size:12.5px;line-height:1.45;color:var(--ck-muted)}
.sw-note--att{color:#7C632F}
.sw-tot{margin:0;font-family:var(--ck-ff-m);font-size:14px;font-weight:600;color:var(--ck-ink)}
.sw-grid{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.sw-grid li{display:flex;align-items:baseline;gap:10px;font-size:12.5px;color:var(--ck-muted);border-bottom:1px solid var(--ck-hair2);padding-bottom:4px}
.sw-grid .sq{font-family:var(--ck-ff-m);color:var(--ck-muted);min-width:18px}
.sw-grid .vl{margin-left:auto;font-family:var(--ck-ff-m);color:var(--ck-ink);font-weight:600}
.sw-rev{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.sw-rev li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:13px}
.sw-rev .k{color:var(--ck-muted);min-width:132px}
.sw-rev .v{color:var(--ck-ink);font-weight:600}
.sw-pax{display:flex;flex-direction:column;gap:12px}
.sw-pax__box{display:flex;flex-direction:column;gap:9px;border:1px solid var(--ck-hair);border-radius:12px;padding:11px 12px;background:#FCFDFE}
.sw-pax__t{margin:0}
.sw-warn{margin:0;font-size:12px;line-height:1.45;color:#7C632F;background:var(--ck-amber-bg);border:1px solid rgba(224,163,61,.3);border-radius:9px;padding:9px 11px}
/* FORA da área que rola, como o aviso de irreversível do Unificar: ele avisa
   que o clique reserva vaga no sistema do cliente, e um aviso abaixo da dobra
   é um aviso que ninguém leu. */
.sw-danger{margin:0 18px 14px;flex:none;font-size:12.5px;line-height:1.45;font-weight:600;color:var(--ck-red-ink);background:var(--ck-red-bg);border:1px solid rgba(212,91,91,.3);border-radius:9px;padding:9px 11px}
#sw-fail .sw-danger{margin:0}
.sw-error{margin:0 18px 14px;flex:none;font-size:12.5px;line-height:1.45;color:var(--ck-red-ink);background:var(--ck-red-bg);border:1px solid rgba(212,91,91,.3);border-radius:9px;padding:9px 11px}
.sw-done__hd,.sw-fail__hd{margin:0;font-family:var(--ck-ff-d);font-size:14.5px;font-weight:600;line-height:1.4;color:var(--ck-ink)}
.sw-done__p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ck-muted)}
.sw-avisos{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.sw-avisos li{font-size:12.5px;line-height:1.45;color:#7C632F}
/* A lista da aba "Venda", no painel (não no modal). */
.sw-vendas{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.sw-venda{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;border:1px solid var(--ck-hair);border-radius:11px;padding:10px 11px;background:#fff}
.sw-venda b{font-size:13px;color:var(--ck-ink);width:100%}
.sw-venda .vl{font-family:var(--ck-ff-m);font-size:13px;font-weight:600;color:var(--ck-ink)}
.sw-venda .px,.sw-venda .pg,.sw-venda .og{font-size:11.5px;color:var(--ck-muted)}
.sw-venda .od{font-family:var(--ck-ff-m);font-size:11.5px;color:var(--ck-muted)}
.sw-venda .st{font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--ck-hair2);color:var(--ck-muted)}
.sw-venda .st--confirmada{background:var(--ck-green-bg);color:var(--ck-green-ink)}
.sw-venda .st--falhou,.sw-venda .st--cancelada{background:var(--ck-red-bg);color:var(--ck-red-ink)}
.sw-venda .st--rascunho{background:var(--ck-amber-bg);color:#7C632F}
/* ⚠️ CONTRASTE, medido: tres classes COMPARTILHADAS (`.hint`, `.ck-sec__t` e
   o "x" do cabecalho) ficam em 3,09:1 contra o branco, abaixo do minimo de
   4,5:1. Elas vem de antes deste bloco e sao usadas por todos os modais do
   produto, entao a correcao aqui e ESCOPADA ao assistente: o id na frente
   ganha a especificidade sem mexer no follow-up, na etiqueta nem no
   unificar. Corrigir as classes na raiz e cartao separado, porque mexe em
   varias telas de uma vez (o mesmo recorte que o C1.1 fez com `.stbl`). */
#sale-modal .hint,
#sale-modal .ck-sec__t,
#sale-modal .ck-modal__hd .x,
.ck-pane[data-crm-pane="venda"] .hint{color:var(--ck-muted)}
/* Os sete blocos e tudo o que é flex/grid aqui sobrepõem o [hidden] da UA:
   sem estas duas linhas os cinco passos aparecem EMPILHADOS e o resultado
   nasce visível junto com o passo 1 (a armadilha já registrada em .ck-pane,
   .ck-field e #lm-pick). */
#sw-p1[hidden],#sw-p2[hidden],#sw-p3[hidden],#sw-p4[hidden],#sw-p5[hidden],
#sw-done[hidden],#sw-fail[hidden],
.sw-sec[hidden],.sw-list[hidden],.sw-grid[hidden],.sw-rev[hidden],
.sw-pax[hidden],.sw-pax__box[hidden],.sw-avisos[hidden],.sw-vendas[hidden]{display:none!important}
.sw-note[hidden],.sw-warn[hidden],.sw-danger[hidden],.sw-error[hidden],
.sw-empty[hidden],.sw-tot[hidden],.sw-pick[hidden],
.sw-done__p[hidden],.sw-done__hd[hidden],.sw-fail__hd[hidden]{display:none!important}
@media (max-width:560px){
  .sw-rev .k{min-width:0;width:100%}
  .sw-cand .vg,.sw-cand .dc{margin-left:0}
}

/* ── Aviso de janela de 24h: quatro textos, um botão que some (M1/D7) ──────
   #ww-confirm é `.btn` (display:inline-flex), que sobrepõe o [hidden] da UA:
   sem esta linha o "Enviar mesmo assim" continuaria clicável no aviso do
   Messenger, que é exatamente o botão que a Meta não honra. Os QUATRO blocos
   de texto são <div> (display:block) e ganham a mesma guarda para o conjunto
   ficar junto: quem mexer em um vê os outros (a armadilha já registrada em
   .ck-pane, .ck-field e #lm-pick). Bloco E (D8) acrescentou #ww-fallback (a
   queda no WhatsApp comum) e #ww-cloud (a recusa definitiva da API oficial):
   sem eles aqui, um modo deixaria o texto do outro na tela por cima do seu. */
#ww-confirm[hidden],#ww-wa[hidden],#ww-fallback[hidden],#ww-cloud[hidden],#ww-messenger[hidden]{display:none!important}


/* ---------- M4/N3: respostas do formulário de anúncio (decisão D7) ----------
   Seção da aba Detalhes do CRM. Nasce `hidden` no SSR e o lead-detail.js só a
   revela quando a rota devolve submissão: a maioria dos leads não veio de
   formulário. `display:block` sobrepõe o `[hidden]` do agente de usuário, então
   a regra de restauro é obrigatória (a mesma lição de `.ck-pane[hidden]`). */
/* Modal "Respostas do formulário" (v4.4.8): construída pelo motor e pendurada
   no <body>, como o DMW.confirm. Depende só desta folha, nunca de markup de
   host, e por isso é a MESMA nas quatro telas de chat, /m incluído. */
.ck-lfmodal{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.45);padding:18px}
.ck-lfmodal[hidden]{display:none!important}
.ck-lfmodal__box{background:#fff;border-radius:14px;width:min(480px,100%);max-height:min(80vh,640px);display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(15,23,42,.28)}
.ck-lfmodal__hd{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--ck-hair);font-size:13.5px;font-weight:700;color:var(--ck-azul-deep,#24407a)}
.ck-lfmodal__x{border:0;background:none;cursor:pointer;font-size:15px;color:var(--ck-faint,#8a93a6);padding:4px 6px;border-radius:6px}
.ck-lfmodal__x:hover{background:rgba(15,23,42,.06)}
.ck-lfmodal__bd{padding:12px 16px 16px;overflow-y:auto}
.ck-lfmodal__bd .ck-lfsub:first-child{margin-top:0}
/* Aviso "lead respondeu formulário" no topo do chat: aponta para as
   respostas, nunca as mostra (elas só saem pela rota auditada, no clique).
   A âncora tem ALTURA ZERO em fluxo (não abre faixa branca) e a pílula
   flutua absoluta dentro dela, 10px para dentro da área de mensagens. */
.ck-lfhint-anchor{position:relative;height:0;overflow:visible;z-index:6;flex:0 0 auto;width:100%}
.ck-lfhint{position:absolute;top:10px;left:12px;right:12px;display:flex;align-items:center;gap:8px;padding:9px 12px;background:rgba(255,255,255,.95);border:1px solid rgba(47,80,150,.22);border-radius:10px;font-size:12.5px;color:var(--ck-azul-deep,#24407a);box-shadow:0 2px 10px rgba(15,23,42,.12)}
.ck-lfhint .ic{flex:none;font-size:15px}
.ck-lfhint__btn{margin-left:auto;flex:none;border:1px solid rgba(47,80,150,.4);background:#fff;color:var(--ck-azul,#2F5096);border-radius:8px;padding:5px 10px;font-size:12px;font-weight:600;cursor:pointer;text-decoration:none;font-family:inherit}
.ck-lfhint__btn:hover{background:rgba(47,80,150,.06)}
/* M1 (histórico anterior no chat, revisão final): a pílula acima é absoluta
   dentro da âncora de altura zero, que `renderFormLeadHint` insere como
   IRMÃ imediatamente anterior a #cp-msgs (lead-panel.js). Sem folga, ela
   flutua por cima do primeiro filho de #cp-msgs: o `.cp-older` (botão
   "Carregar mensagens anteriores" ou o fim do histórico), cobrindo o botão.
   `#lf-chat-hint` só existe no DOM quando há aviso (removido, nunca
   escondido por atributo, ver renderFormLeadHint), então a presença do
   seletor de irmão já basta. */
#lf-chat-hint + #cp-msgs .cp-older{margin-top:48px}
.ck-lfsub{border:1px solid var(--ck-hair);border-radius:12px;overflow:hidden;margin-top:8px}
.ck-lfsub__hd{padding:8px 12px;background:var(--ck-bg2,#F7F8FA);font-size:12.5px;font-weight:600;color:var(--ck-azul-deep)}
.ck-lfsub__meta{padding:6px 12px;font-size:11px;color:var(--ck-faint);border-bottom:1px solid var(--ck-hair2)}
/* A resposta livre é texto da pessoa: quebra em qualquer lugar, para uma
   palavra longa não alargar a barra lateral inteira. */
.ck-lfsub .ck-attr{border:0;border-radius:0}
.ck-lfsub .ck-attr__r{align-items:flex-start}
.ck-lfsub .ck-attr__r .k{flex:0 0 38%;text-align:left;word-break:break-word}
.ck-lfsub .ck-attr__r .v{font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere}
.ck-lfnone{padding:10px 12px;font-size:12px;color:var(--ck-faint);margin:0}
/* Botão "Buscar de novo na Meta" do cartão fetch_failed (D3/P3, pacote de
   proteção). Mesma família visual do .ck-lfhint__btn (botão secundário azul),
   dentro do padding do próprio cartão .ck-lfsub. */
.ck-lfsub__retry{display:block;margin:0 12px 10px;border:1px solid rgba(47,80,150,.4);background:#fff;color:var(--ck-azul,#2F5096);border-radius:8px;padding:6px 10px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.ck-lfsub__retry:hover{background:rgba(47,80,150,.06)}
.ck-lfsub__retry:disabled{opacity:.6;cursor:default}

/* Resultado de busca cuja mensagem ainda nao foi carregada na tela. Antes o
   clique nao fazia NADA e quem clicava concluia que a busca estava quebrada:
   aqui ele diz por que nao levou a lugar nenhum. */
.ck-search-hit.sr-longe{background:rgba(201,168,92,.14)}
.ck-search-hit.sr-longe::after{content:"Mensagem antiga: role a conversa para carrega-la.";display:block;margin-top:4px;font-size:11.5px;color:var(--ck-gold,#C9A85C)}

/* ---------- passo de etapa (barra do cabecalho do chat) ---------- */
/* Faixa fina sob o nome: a etapa fica sempre visivel, e avancar e um clique.
   A seta SOME nas pontas em vez de ficar desabilitada: alvo que nao faz nada
   e pior que alvo ausente. A etapa de perda fica fora da sequencia de
   proposito (decisao do dono): dar perdido exige abrir os detalhes do lead,
   onde a decisao tem contexto. */
.ck-stagestep{display:flex;align-items:center;gap:6px;padding:7px 14px;background:var(--surface-2,#F7F9FC);border-bottom:1px solid var(--ck-hair)}
.ck-stagestep[hidden]{display:none}
.ck-stagestep__nome{flex:1 1 auto;min-width:0;text-align:center;font-family:var(--ck-ff);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ck-azul);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-stagestep__seta{flex:none;width:30px;height:26px;display:grid;place-items:center;border:1px solid var(--ck-hair);border-radius:8px;background:#fff;color:var(--ck-muted);cursor:pointer;transition:.14s}
.ck-stagestep__seta[hidden]{display:none}
.ck-stagestep__seta svg{width:15px;height:15px}
.ck-stagestep__seta:hover{border-color:var(--ck-azul);color:var(--ck-azul);background:#fff}

/* ═══ Avatar por CANAL de origem (v4.20.0) ═══════════════════════════════
   A bolinha do lead no Atendimento deixou de mostrar a INICIAL do nome e
   passou a mostrar o ícone da plataforma de onde ele veio. Medido na Walktur:
   9.968 dos 9.976 leads não têm nome, então a inicial era o fallback genérico
   em 99,9% das linhas e não distinguia ninguém.

   ⚠️ Uma classe por canal, e o ÍCONE VEM DO CSS, não do markup. São quatro
   pontos de renderização em duas linguagens (Eta no servidor, JS no cliente,
   no /app e no /m); com o SVG embutido no markup seriam quatro cópias de cada
   ícone para divergir. Aqui o Eta e o JS só escolhem a classe.

   ⚠️ Estas regras convivem com a pintura antiga por `:not(.chan)` nas regras
   base (.convo-avatar, .rh-avatar, .m-conv__av, .ck-contact .av): sem isso o
   gradiente delas cobriria o ícone, porque a especificidade é igual ou maior
   e algumas moram em arquivos carregados depois deste. */
.chan{
  background-repeat:no-repeat;
  background-position:center;
  background-size:58%;
  /* Rede: se algum caminho antigo ainda escrever a letra, ela não aparece
     por cima do ícone. */
  color:transparent;
}
.chan--whatsapp{background-color:#25D366;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/%3E%3C/svg%3E")}
.chan--messenger{background-color:#0084FF;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M15.12 5.32H17V2.14A26.11 26.11 0 0 0 14.26 2C11.54 2 9.68 3.66 9.68 6.7v2.62H6.61v3.56h3.07V22h3.68v-9.12h3.06l.46-3.56h-3.52V7.05c0-1.03.28-1.73 1.76-1.73Z'/%3E%3C/svg%3E")}
/* O Instagram é o único que não tem cor chapada: a marca é o degradê, e sem
   ele o ícone não é reconhecido. Duas camadas de fundo (ícone por cima,
   degradê por baixo) exigem redeclarar tamanho e repetição. */
.chan--instagram{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 1 0 0-12.324zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405a1.441 1.441 0 0 1-2.88 0 1.44 1.44 0 0 1 2.88 0z'/%3E%3C/svg%3E"),
    linear-gradient(45deg,#FEDA75 0%,#FA7E1E 26%,#D62976 50%,#962FBF 75%,#4F5BD5 100%);
  background-size:58%,cover;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
}
.chan--form{background-color:#1A1E29;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath fill-rule='evenodd' d='M6.75 2.5h10.5c.69 0 1.25.56 1.25 1.25v16.5c0 .69-.56 1.25-1.25 1.25H6.75c-.69 0-1.25-.56-1.25-1.25V3.75c0-.69.56-1.25 1.25-1.25ZM8.6 7.1h6.8v1.7H8.6zM8.6 11h6.8v1.7H8.6zM8.6 14.9h4.2v1.7H8.6z'/%3E%3C/svg%3E")}

/* ── Teclado do iPhone sobre o botão de confirmar (pendências L5.1) ─────────
   O teto em dvh (bloco 3, D4) acompanha o viewport de LAYOUT, e o teclado do iPhone
   encolhe só o viewport VISUAL: com o teclado de pé o rodapé da janela ("Agendar",
   "Continuar") ficava atrás dele. O viewport-visual.js grava a altura e o deslocamento
   do viewport visual em --vv-h e --vv-top na raiz; aqui o fundo escuro da janela passa
   a ocupar SÓ essa faixa e a caixa ganha o teto dentro dela. Cada teto de caixa que
   existe lá em cima (os de id também) tem aqui a irmã com o mesmo seletor: a de id
   vence a de classe, então repetir é obrigatório (o teste varre o texto das folhas).
   ⚠️ SÓ em pointer: coarse, e SÓ com dvh (@supports). No computador nada muda: as
   variáveis existem e ninguém as lê.
   ⚠️ var() com valor inválido não cai na declaração anterior: a propriedade inteira
   vira "inválida no tempo do valor computado" e volta ao inicial (max-height: none, a
   janela sem teto). Por isso toda var(--vv-h) leva uma reserva que vale sozinha
   (100dvh na caixa, 100% no fundo, o mesmo que o inset:0 de antes), e por isso o bloco
   inteiro mora em @supports (height: 100dvh): num navegador sem dvh a reserva da caixa
   seria inválida e, sem o script, a janela ficaria sem teto. Sem dvh vale o teto em vh
   de cima, como sempre valeu.
   ⚠️ A transição (.2s no fundo, .24s na caixa) deixa de valer para top, height e
   max-height: com ela a janela chegaria atrasada ao teclado e, na panorâmica do iOS,
   ficaria correndo atrás do dedo. Só a abertura (opacity, visibility, transform) anima.
   ⚠️ A conferência de verdade é no iPhone: o Chrome sem cabeça não tem teclado. */
@media (pointer: coarse){
  @supports (height: 100dvh){
    .ck-modal-ov{box-sizing:border-box;top:var(--vv-top,0px);bottom:auto;height:var(--vv-h,100%);transition:opacity .2s,visibility .2s}
    .ck-modal{max-height:calc(var(--vv-h,100dvh) - 40px);transition:transform .24s}
    #cr-modal .ck-modal{max-height:calc(var(--vv-h,100dvh) - 40px)}
    #sc-modal .ck-modal,#lm-modal .ck-modal,#sale-modal .ck-modal{max-height:calc(var(--vv-h,100dvh) - 40px)}
    /* O follow-up é o único com o rodapé DENTRO do corpo que rola (o <form class="ck-modal__bd">
       contém o .ck-modal__ft): com a caixa no teto da faixa visível o "Agendar" ficaria no fim da
       rolagem. Fixo no pé do corpo ele fica à vista. O preenchimento de baixo do corpo (18px) passa
       para o rodapé (14px + 18px), porque o sticky se mede pela borda de dentro do preenchimento e
       deixaria uma faixa por onde o texto aparece por baixo dele; assim a janela parada mede o mesmo
       de antes. O fundo branco e as duas sombras de 18px (branco sobre branco, invisíveis fora da
       rolagem) cobrem o texto que passa pelas faixas dos lados, e o scroll-padding deixa o campo
       focado fora de baixo do rodapé. */
    #fu-modal .ck-modal__bd{padding-bottom:0;scroll-padding-bottom:90px}
    #fu-modal .ck-modal__ft{position:sticky;bottom:0;z-index:1;padding-bottom:32px;background:#fff;box-shadow:-18px 0 0 #fff,18px 0 0 #fff}
  }
}