/* CRM SUDS: conversas no estilo WhatsApp, pipeline, leads, campanhas e templates (desktop e celular) */
:root{--wa-bg:#EFEAE2;--wa-out:#D9FDD3;--wa-in:#FFFFFF;--wa-green:#25D366;--wa-teal:#008069;--wa-tick:#53BDEB;--crm-h:100vh}
@supports (height:100dvh){:root{--crm-h:100dvh}}
.crm-ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.crm-ic.wa{fill:#25D366;stroke:none}
.crm-av{display:inline-grid;place-items:center;border-radius:50%;color:#fff;font-weight:700;flex:none;letter-spacing:.02em}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);font-weight:600;font-size:12px;cursor:pointer}
.linkbtn:hover{text-decoration:underline}
.nowrap{white-space:nowrap}
.crm-mini{width:auto;max-width:220px;padding:6px 10px;font-size:13px}
.crm-banner{border-radius:10px;padding:10px 12px;font-size:13px;margin:8px 12px;line-height:1.45}
.crm-banner.warn{background:var(--warn-soft);color:#7a5710}
.crm-banner.err{background:var(--err-soft);color:var(--err)}
.crm-err{color:var(--err);font-size:12px}
.crm-check{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.crm-check input{width:16px;height:16px}
.crm-class{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff)}
.crm-class::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
.crm-tags{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.crm-tag{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:6px;font-size:11.5px;font-weight:600;color:color-mix(in srgb,var(--c) 80%,#000);background:color-mix(in srgb,var(--c) 14%,#fff);white-space:nowrap}
.crm-tag button{border:0;background:none;padding:0 0 0 2px;font-size:14px;line-height:1;color:inherit;opacity:.6}
.crm-stdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:0}
.crm-unread{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--wa-green);color:#fff;font-size:11.5px;font-weight:700}
.crm-tick{font-size:11px;color:#8696a0;letter-spacing:-3px;margin-left:2px;padding-right:3px}
.crm-tick.read{color:var(--wa-tick)} .crm-tick.err{color:var(--err);letter-spacing:0} .crm-tick.q{letter-spacing:0;font-size:10px}

/* ---------- conversas ---------- */
.crm-chats{display:grid;grid-template-columns:minmax(300px,380px) 1fr;height:var(--crm-h);overflow:hidden;background:var(--surface)}
.crm-chats.with-info{grid-template-columns:minmax(300px,380px) 1fr 340px}
.crm-list{display:flex;flex-direction:column;border-right:1px solid var(--line);min-height:0;min-width:0;background:var(--surface)}
.crm-lhead{display:flex;align-items:center;gap:8px;padding:16px 16px 10px}
.crm-search{display:flex;align-items:center;gap:8px;background:var(--line-2);border-radius:9px;padding:0 10px;margin:0 12px 8px;color:var(--muted)}
.crm-search input{border:0;background:transparent;padding:8px 0;box-shadow:none!important}
.crm-boxes{display:flex;gap:6px;padding:0 12px 10px;overflow-x:auto;scrollbar-width:none}
.crm-boxes button{border:0;background:var(--line-2);color:var(--text-2);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600;white-space:nowrap}
.crm-boxes button em{font-style:normal;color:var(--muted);font-weight:500}
.crm-boxes button.on{background:#E7F8EF;color:var(--wa-teal)}
.crm-boxes button.on em{color:var(--wa-teal)}
.crm-threads{flex:1;overflow-y:auto;min-height:0}
.crm-thread{display:flex;gap:12px;align-items:center;width:100%;border:0;background:transparent;text-align:left;padding:10px 14px;position:relative;cursor:pointer}
.crm-thread::after{content:"";position:absolute;left:72px;right:0;bottom:0;border-bottom:1px solid var(--line-2)}
.crm-thread:hover{background:var(--surface-2)}
.crm-thread.on{background:#F0F2F5}
.crm-thread .tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.crm-thread .r1{display:flex;align-items:baseline;gap:8px}
.crm-thread .r1 strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:14.5px}
.crm-thread .r1 time{font-size:11.5px;color:var(--muted);flex:none}
.crm-thread.unread .r1 time{color:var(--wa-green);font-weight:600}
.crm-thread .r2{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:13px}
.crm-thread .r2 .pv{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-thread.unread .r2 .pv{color:var(--text);font-weight:500}
.crm-thread .r3{font-size:11.5px;color:var(--text-2);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}
.crm-thread .r3 .val{font-weight:700;color:var(--ok)}
.crm-pane{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--wa-bg)}
.crm-blank{flex:1;display:grid;place-items:center;text-align:center;background:#F7F8FA;border-bottom:6px solid var(--wa-green)}
.crm-blank-ic{display:inline-grid;place-items:center;width:72px;height:72px;border-radius:50%;background:#E7F8EF;color:var(--wa-teal);margin-bottom:10px}
.crm-blank-ic svg{width:32px;height:32px}
.crm-chat{display:flex;flex-direction:column;height:100%;min-height:0;min-width:0}
.crm-chead{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#F0F2F5;border-bottom:1px solid var(--line);min-height:60px}
.crm-chead .iconbtn.on{color:var(--wa-teal);background:#E7F8EF}
.crm-back{display:none}
.crm-who{display:flex;align-items:center;gap:10px;border:0;background:transparent;text-align:left;flex:1 1 auto;min-width:0;overflow:hidden;padding:2px 4px;border-radius:8px}
.crm-who>span{display:flex;flex-direction:column;min-width:0}
.crm-who strong{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-who em{font-style:normal;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-msgs{flex:1;overflow-y:auto;padding:14px 6% 10px;min-height:0;display:flex;flex-direction:column;gap:2px;
  background-color:var(--wa-bg);background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:18px 18px}
.crm-day{display:flex;justify-content:center;margin:10px 0 6px;position:sticky;top:0;z-index:2}
.crm-day span{background:#fff;color:#54656f;font-size:12px;padding:4px 12px;border-radius:8px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.crm-sys,.crm-older{align-self:center;background:#FFF5C4;color:#54656f;font-size:12.5px;padding:6px 12px;border-radius:8px;margin:8px 0;text-align:center;max-width:80%}
.crm-older{background:transparent}
.crm-b{display:flex;margin:1px 0}
.crm-b.out{justify-content:flex-end}
.crm-bb{position:relative;max-width:min(65%,560px);background:var(--wa-in);border-radius:8px;padding:6px 8px 4px 9px;box-shadow:0 1px .5px rgba(11,20,26,.13);font-size:14.2px;line-height:1.38;word-wrap:break-word;overflow-wrap:anywhere}
.crm-b.out .crm-bb{background:var(--wa-out)}
.crm-b.failed .crm-bb{background:#FDECEA}
.crm-b.sticker .crm-bb{background:transparent;box-shadow:none}
.crm-txt{white-space:pre-wrap}
.crm-txt a{color:#027EB5}
.crm-txt code{font-family:"Roboto Mono",monospace;font-size:13px}
.crm-txt mark{background:#FFF3B0;border-radius:3px}
.crm-meta{display:flex;justify-content:flex-end;align-items:center;gap:5px;font-size:11px;color:#667781;margin-top:1px;float:right;margin-left:12px;position:relative;top:4px}
.crm-meta+*{clear:both}
.crm-org{background:rgba(0,0,0,.05);border-radius:4px;padding:0 5px;font-size:10.5px}
.crm-img{display:block;margin:-2px -4px 4px;border-radius:6px;overflow:hidden;max-width:330px}
.crm-img img,.crm-fileprev{display:block;width:100%;max-height:360px;object-fit:cover;border-radius:6px}
.crm-fileprev{max-height:50vh;object-fit:contain;background:var(--line-2)}
.crm-sticker{width:140px;height:140px;object-fit:contain}
.crm-video{display:block;max-width:330px;width:100%;border-radius:6px;margin-bottom:4px;background:#000}
.crm-audio{display:block;width:260px;max-width:100%;height:40px;margin:2px 0 4px}
.crm-doc{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.04);border-radius:7px;padding:9px 10px;margin-bottom:4px;color:var(--text);text-decoration:none;min-width:200px}
.crm-doc svg{width:28px;height:28px;color:#c0453d}
.crm-doc span{display:flex;flex-direction:column;font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.crm-doc em{font-style:normal;font-size:11px;color:var(--muted);text-transform:uppercase}
.crm-doc.big{padding:18px}
.crm-loc{display:block;padding:6px 0;color:#027EB5}
.crm-quote{border-left:4px solid var(--wa-teal);background:rgba(0,0,0,.05);border-radius:6px;padding:4px 8px;margin:0 -2px 5px;font-size:12.5px;display:flex;flex-direction:column}
.crm-quote strong{color:var(--wa-teal);font-size:12px}
.crm-quote span{color:#54656f;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.crm-ref{display:flex;flex-direction:column;background:rgba(0,0,0,.05);border-radius:6px;padding:6px 8px;margin-bottom:5px;text-decoration:none;color:var(--text);font-size:12.5px}
.crm-ref em{font-style:normal;color:var(--wa-teal);font-weight:700;font-size:11px;text-transform:uppercase}
.crm-tplname{display:flex;align-items:center;gap:4px;font-size:11px;color:#667781;margin-bottom:3px}
.crm-react{position:absolute;bottom:-12px;right:8px;background:#fff;border-radius:999px;padding:0 5px;font-size:14px;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.crm-b.in .crm-react{right:auto;left:8px}
.crm-b:has(.crm-react){margin-bottom:12px}
.crm-rbtn{position:absolute;top:2px;right:-30px;border:0;background:#fff;border-radius:50%;width:24px;height:24px;font-size:13px;color:#54656f;opacity:0;box-shadow:0 1px 2px rgba(0,0,0,.15);transition:opacity .15s}
.crm-b.out .crm-rbtn{right:auto;left:-30px}
.crm-bb:hover .crm-rbtn{opacity:1}
.crm-err{display:block}
.crm-compose{background:#F0F2F5;padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.crm-compose .crm-banner{margin:0}
.crm-cbar{display:flex;align-items:flex-end;gap:4px}
.crm-cbar textarea{flex:1;min-height:42px;max-height:140px;resize:none;border:0;border-radius:10px;padding:10px 12px;line-height:1.4;box-shadow:none!important}
.crm-cbar .iconbtn{padding:10px}
.crm-send{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:var(--wa-teal);color:#fff;display:grid;place-items:center}
.crm-send:disabled{background:#B9C3C9}
.crm-send .spin{border-color:rgba(255,255,255,.35);border-top-color:#fff}
.crm-window{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--text-2);padding:4px 2px}
.crm-window>span:first-child{flex:1;min-width:220px}
.crm-left{font-size:11.5px;color:var(--warn);padding:0 4px 4px}
.crm-replying{display:flex;align-items:center;gap:8px;background:#fff;border-left:4px solid var(--wa-teal);border-radius:8px;padding:6px 8px;margin-bottom:6px}
.crm-replying div{flex:1;min-width:0;display:flex;flex-direction:column;font-size:12.5px}
.crm-replying strong{color:var(--wa-teal)}
.crm-replying span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}

/* painel de dados */
.crm-info{border-left:1px solid var(--line);min-height:0;background:var(--surface)}
.crm-infop{display:flex;flex-direction:column;height:100%}
.crm-ihead{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);min-height:60px;background:#F0F2F5}
.crm-iscroll{flex:1;overflow-y:auto;min-height:0}
.crm-ihero{display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px 16px 16px;text-align:center;border-bottom:8px solid #F0F2F5}
.crm-ihero h3{margin:8px 0 0}
.crm-isec{padding:16px;border-bottom:8px solid #F0F2F5}
.crm-isec h4{margin:0 0 12px;font-size:13px;color:var(--wa-teal);font-weight:700}
.crm-isec .field{margin-bottom:10px}
.crm-stagepick,.crm-classpick{display:flex;flex-wrap:wrap;gap:6px}
.crm-stagepick button,.crm-classpick button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 11px;font-size:12.5px;color:var(--text-2)}
.crm-stagepick button.on,.crm-classpick button.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,#fff);color:color-mix(in srgb,var(--c) 75%,#000);font-weight:700}
.crm-offpipe{display:flex;flex-direction:column;gap:6px;background:var(--surface-2);border:1px dashed var(--line);border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:13px}
.crm-offpipe span{color:var(--muted);font-size:12.5px}
.crm-offpipe .btn{align-self:flex-start}
.crm-closebox{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px}
.crm-log{list-style:none;padding:0;margin:8px 0 0;font-size:12.5px;max-height:220px;overflow:auto}
.crm-log li{padding:6px 0;border-bottom:1px solid var(--line-2);display:flex;flex-direction:column}
.crm-log em{font-style:normal;color:var(--muted);font-size:11px}
.crm-past{margin-top:12px;font-size:13px}
.crm-past summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:12.5px}
.crm-pastrow{display:flex;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid var(--line-2);flex-wrap:wrap}

/* modais */
.crm-modal{max-width:560px;display:flex;flex-direction:column;max-height:calc(100vh - 56px)}
.crm-modal.wide{max-width:920px}
.crm-mhead{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}
.crm-mhead h3{margin:0;flex:1}
.crm-mbody{padding:18px 20px;overflow-y:auto;min-height:0}
.crm-mfoot{display:flex;gap:8px;justify-content:flex-end;padding:12px 20px;border-top:1px solid var(--line);background:var(--surface-2);flex-wrap:wrap}
.crm-pick{display:flex;flex-direction:column;margin-top:10px;max-height:50vh;overflow:auto}
.crm-pick button{display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:8px;border-radius:8px;text-align:left}
.crm-pick button:hover{background:var(--surface-2)}
.crm-pick button span{display:flex;flex-direction:column}
.crm-pick em{font-style:normal;font-size:12px;color:var(--muted)}
.crm-pick .new{color:var(--wa-teal);font-weight:700}
.crm-taginput{position:relative}
.crm-taginput .crm-tags{border:1px solid var(--line);border-radius:8px;padding:5px 7px;min-height:38px;background:var(--surface)}
.crm-taginput input{border:0;padding:3px;flex:1;min-width:110px;box-shadow:none!important}
.crm-tagsug{display:flex;flex-wrap:wrap;gap:4px;padding:6px 0 0}
.crm-tagsug button{border:0;background:none;padding:0}
.crm-tagsug .new{font-size:12px;color:var(--accent);font-weight:600}

/* templates: previa estilo WhatsApp */
.crm-phone{background:var(--wa-bg);border-radius:12px;padding:14px;background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:18px 18px}
.crm-phone .crm-b{flex-direction:column;align-items:flex-start}
.crm-phone .crm-bb{max-width:100%;min-width:200px}
.crm-tplmedia{display:block;width:100%;max-height:180px;object-fit:cover;border-radius:6px;margin-bottom:6px}
.crm-tplmedia.ph{height:110px;background:#D1D7DB;display:grid;place-items:center;color:#54656f;font-size:13px}
.crm-foot{font-size:12.5px;color:#667781;margin-top:4px}
.crm-tplbtns{display:flex;flex-direction:column;gap:2px;margin-top:2px;width:100%;max-width:100%}
.crm-tplbtns span{background:#fff;border-radius:8px;text-align:center;color:#027EB5;font-size:13.5px;padding:7px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.crm-tplsend,.crm-tpledit{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.crm-tpledit{grid-template-columns:1.15fr 1fr}
.crm-tpledit>div:last-child{position:sticky;top:0}
.crm-varn{font-family:"Roboto Mono",monospace;font-size:12px;color:var(--muted);width:44px;flex:none}
.crm-btnrow{display:flex;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.crm-btnrow select{width:auto}
.crm-btnrow input{flex:1;min-width:120px}
.crm-slot{margin-bottom:12px}
.crm-tpls .toolbar.plain{flex-wrap:wrap}
.crm-tplgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.crm-tplcard{display:flex;flex-direction:column;gap:8px;margin:0;padding:16px}
.crm-tplnm{font-family:"Roboto Mono",monospace;font-size:13px;word-break:break-all}

/* mensagens prontas */
.crm-snips{background:#fff;border-radius:12px;box-shadow:var(--shadow-lg);padding:10px;margin-bottom:8px;max-height:46vh;display:flex;flex-direction:column;gap:8px}
.crm-sniplist{overflow-y:auto;display:flex;flex-direction:column}
.crm-sniplist button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:0;background:transparent;text-align:left;padding:8px 10px;border-radius:8px}
.crm-sniplist button:hover{background:var(--surface-2)}
.crm-sniplist span{font-size:12.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.crm-snipgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.crm-snipcard{margin:0;padding:14px;display:flex;flex-direction:column;gap:8px}
.crm-snipcard .crm-phone{padding:10px}
.crm-varchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.crm-varchips button{border:1px solid var(--line);background:var(--surface-2);border-radius:6px;padding:2px 7px;font-family:"Roboto Mono",monospace;font-size:11.5px;color:var(--text-2)}
.crm-varchips button:hover{border-color:var(--accent);color:var(--accent)}
.crm-qrbox{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.crm-qrimg{width:240px;height:240px;border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;padding:8px}
.crm-qrimg img{width:100%;height:100%;image-rendering:pixelated}
.crm-qrsteps{flex:1;min-width:220px;font-size:13px;line-height:1.6;padding-left:18px;margin:0}
.crm-type{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.crm-type .ic{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#E7F8EF;color:var(--wa-teal)}
.crm-type .ic.qr{background:var(--warn-soft);color:var(--warn)}
.crm-type h2{margin:0}
.crm-pros{font-size:12.5px;line-height:1.55;padding-left:18px;margin:8px 0 14px;color:var(--text-2)}

/* campanha por QR code: ritmo */
.crm-cap{font-size:12px;font-weight:700;color:var(--muted);background:var(--line-2);border-radius:999px;padding:1px 8px}
.crm-cap.full{color:#7a5710;background:var(--warn-soft)}
.crm-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.crm-presets button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px;text-align:left}
.crm-presets button span{font-size:12px;color:var(--muted)}
.crm-presets button.on{border-color:var(--wa-teal);background:#E7F8EF}
.crm-presets button.on strong{color:var(--wa-teal)}
.crm-estimate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:10px;padding:10px 12px}
.crm-estimate span{display:flex;flex-direction:column}
.crm-estimate em{font-style:normal;font-size:11px;color:var(--muted)}
.crm-estimate b{font-size:13.5px}
@media (max-width:520px){.crm-presets,.crm-estimate{grid-template-columns:1fr}}

/* filtro por classificacao na lista */
.crm-clsf{display:flex;gap:5px;padding:0 12px 10px;overflow-x:auto;scrollbar-width:none}
.crm-clsf::-webkit-scrollbar{display:none}
.crm-clsf button{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface);color:var(--text-2);border-radius:999px;padding:3px 10px;font-size:12px;white-space:nowrap}
.crm-clsf button i{width:7px;height:7px;border-radius:50%;background:var(--c,#999)}
.crm-clsf button em{font-style:normal;color:var(--muted)}
.crm-clsf button.on{border-color:var(--c,var(--text));background:color-mix(in srgb,var(--c,#141414) 12%,#fff);color:color-mix(in srgb,var(--c,#141414) 80%,#000);font-weight:700}
/* etapa clicavel (lista e topo) */
.crm-stmenu{display:inline-flex;min-width:0}
.crm-stbtn{display:inline-flex;align-items:center;gap:2px;border:0;background:transparent;padding:1px 6px 1px 0;border-radius:6px;font-size:11.5px;color:var(--text-2);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.crm-stbtn:hover{background:var(--line-2)}
.crm-chev{font-size:9px;color:var(--muted);margin-left:3px}
.crm-stpop{position:fixed;z-index:80;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);padding:5px;min-width:220px;display:flex;flex-direction:column}
.crm-stpop button{display:flex;align-items:center;gap:4px;border:0;background:transparent;text-align:left;padding:8px 10px;border-radius:7px;font-size:13px}
.crm-stpop button:hover{background:var(--surface-2)}
.crm-stpop button.on{font-weight:700}
.crm-stpop .ck{margin-left:auto;color:var(--wa-teal)}
.crm-stpop .sep{height:1px;background:var(--line-2);margin:4px 2px}
.crm-headstage{flex:none;max-width:42%}
.crm-headstage .crm-stbtn{font-size:12.5px;padding:5px 9px;background:#fff;border:1px solid var(--line);border-radius:999px}
/* gravacao de audio */
.crm-recbar{align-items:center}
.crm-rec{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border-radius:10px;padding:10px 12px;font-variant-numeric:tabular-nums;font-weight:600}
.crm-rec i{width:10px;height:10px;border-radius:50%;background:#e53935;animation:crmrec 1s ease-in-out infinite}
.crm-rec em{font-style:normal;font-weight:400;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes crmrec{50%{opacity:.25}}
/* menu suspenso com bolinha */
.crm-dd{position:relative;display:flex;align-items:center}
.crm-dd i{position:absolute;left:11px;width:9px;height:9px;border-radius:50%;background:var(--c);pointer-events:none}
.crm-dd select{padding-left:28px;font-weight:600;color:color-mix(in srgb,var(--c) 70%,#141414)}
/* importar CSV */
.crm-impmap{max-height:300px;margin:0}
.crm-impmap th{vertical-align:top;min-width:150px}
.crm-impmap th select{margin-top:4px;font-size:12.5px;padding:5px 8px}
.crm-impmap td{white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
.crm-implog{max-height:180px;overflow:auto;font-size:12.5px;padding-left:18px}

/* historico de campanhas */
.crm-camphist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.crm-camphist li{display:flex;align-items:center;gap:6px;padding:7px 0;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.crm-camphist li>div{flex:1;min-width:140px;display:flex;flex-direction:column;font-size:13px}
.crm-camphist em{font-style:normal;font-size:11.5px;color:var(--muted)}
.crm-replied{color:var(--ok);font-weight:600}

/* instagram */
.crm-ig{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#C13584;text-decoration:none;font-weight:600}
.crm-ig:hover{text-decoration:underline}
.crm-ig .crm-ic{width:14px;height:14px}
.crm-nm .crm-ig{font-weight:500}

/* ---------- pipeline ---------- */
.crm-pipe{display:flex;flex-direction:column;height:var(--crm-h);min-height:0}
.crm-pipe .toolbar{flex-wrap:wrap}
.crm-board{flex:1;display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:16px 20px;min-height:0;align-items:stretch;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.crm-col{flex:0 0 288px;display:flex;flex-direction:column;background:#EEF0EF;border-radius:12px;min-height:0;scroll-snap-align:start;transition:background .15s}
.crm-col.over{background:color-mix(in srgb,var(--c) 10%,#EEF0EF)}
.crm-colhead{display:flex;align-items:center;gap:7px;padding:12px 12px 8px;font-size:13px;flex-wrap:wrap}
.crm-colbar{width:4px;height:16px;border-radius:2px;background:var(--c)}
.crm-colhead em{font-style:normal;color:var(--muted);font-weight:600;background:#fff;border-radius:999px;padding:0 7px;font-size:12px}
.crm-kind{font-size:10.5px;text-transform:uppercase;font-weight:700;color:var(--c);letter-spacing:.03em}
.crm-coltot{font-size:12px;font-weight:700;color:var(--text-2)}
.crm-colbody{flex:1;overflow-y:auto;padding:4px 8px 12px;display:flex;flex-direction:column;gap:8px;min-height:60px}
.crm-colempty{color:var(--faint);font-size:12px;text-align:center;padding:18px 6px;border:1.5px dashed #D5D8D6;border-radius:10px}
.crm-card{background:#fff;border-radius:10px;padding:10px 12px;box-shadow:0 1px 2px rgba(20,20,20,.08);border-left:3px solid var(--c,#ccc);cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;display:flex;flex-direction:column;gap:4px;font-size:13px}
.crm-card:hover{box-shadow:0 2px 8px rgba(20,20,20,.1)}
.crm-card.closed{opacity:.7}
.crm-card.ph{background:rgba(255,255,255,.55);border:2px dashed color-mix(in srgb,var(--c) 50%,#fff);box-shadow:none}
.crm-card.ghost{position:fixed;z-index:90;pointer-events:none;transform:rotate(2deg);box-shadow:0 12px 30px rgba(20,20,20,.25);cursor:grabbing;border-left-color:var(--accent)}
.crm-card .r1{display:flex;align-items:center;gap:6px}
.crm-card .r1 strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-card .r2{display:flex;gap:8px;justify-content:space-between;color:var(--text-2);font-size:12.5px}
.crm-card .r2 .val{font-weight:700;color:var(--ok);white-space:nowrap}
.crm-card .r3{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.crm-card .r4{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted)}
.crm-stages .crm-strow,.crm-strow{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.crm-strow input[type=color]{flex:none}
.crm-strow select{width:auto;min-width:150px;flex:none}
.crm-strow input:not([type=color]){flex:1;min-width:0}

/* ---------- leads ---------- */
.crm-filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.crm-filters .crm-search{margin:0;flex:1;min-width:240px;background:var(--surface);border:1px solid var(--line)}
.crm-filters .seg em{font-style:normal;font-size:11px}
.crm-bulk{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--accent-soft);border-radius:10px;padding:8px 12px;margin-bottom:12px;font-size:13px}
.crm-bulk select{width:auto;padding:5px 8px;font-size:12.5px}
.crm-table{padding:0;overflow:auto}
.crm-table table{width:100%;border-collapse:collapse;font-size:13px}
.crm-table th{text-align:left;font-size:11.5px;color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface-2)}
.crm-table td{padding:8px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.crm-table tbody tr{cursor:pointer}
.crm-table tbody tr:hover,.crm-table tbody tr.on{background:var(--surface-2)}
.crm-table input[type=checkbox]{width:16px;height:16px}
.crm-nm{display:flex;align-items:center;gap:10px}
.crm-nm span{display:flex;flex-direction:column;min-width:0}
.crm-nm em{font-style:normal;font-size:11.5px;color:var(--muted);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-lcards{display:flex;flex-direction:column;gap:8px}
.crm-lcard{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.crm-lcard.on{border-color:var(--accent);background:var(--accent-soft)}
.crm-lcard input{width:18px;height:18px;flex:none}
.crm-lcard .tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.crm-lcard .tt>span{font-size:12.5px;color:var(--muted)}

/* ---------- campanhas ---------- */
.crm-campgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:start}
.crm-campgrid .card{margin:0}
.crm-ftoggle{display:none}
.crm-fbody{margin-top:12px}
.crm-inline{display:inline-block;width:auto;padding:1px 6px;font-size:12px;margin-left:4px}
.crm-saved{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.crm-sf{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-size:12.5px}
.crm-sf button{border:0;background:var(--surface);padding:4px 10px;color:var(--text-2)}
.crm-sf button:hover{background:var(--accent-soft);color:var(--accent)}
.crm-sf .x{padding:4px 8px;color:var(--muted);border-left:1px solid var(--line)}
.crm-reshead{display:flex;gap:12px;align-items:center;margin:14px 0 6px;padding-top:12px;border-top:1px solid var(--line)}
.crm-reslist{max-height:420px;overflow-y:auto;border:1px solid var(--line-2);border-radius:10px}
.crm-resrow{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line-2);cursor:pointer;font-size:13px}
.crm-resrow:last-child{border-bottom:0}
.crm-resrow.on{background:var(--accent-soft)}
.crm-resrow input{width:16px;height:16px}
.crm-resrow .tt{flex:1;min-width:0;display:flex;flex-direction:column}
.crm-resrow em{font-style:normal;font-size:12px;color:var(--muted)}
.crm-sendbox{position:sticky;top:16px}
.crm-go{width:100%;justify-content:center;padding:11px;margin-top:14px;background:var(--wa-teal)}
.crm-go:hover{background:#006e5a}
.crm-prog{height:8px;border-radius:999px;background:var(--line-2);overflow:hidden;margin:6px 0 10px}
.crm-prog div{height:100%;background:var(--wa-green);transition:width .3s}
.crm-camplist{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.crm-campcard{text-align:left;margin:0;padding:16px;display:flex;flex-direction:column;gap:4px;cursor:pointer;font:inherit;color:inherit}
.crm-campcard:hover{border-color:#cfd0cc}
.crm-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:10px}
.crm-stats span{display:flex;flex-direction:column;align-items:center;background:var(--surface-2);border-radius:8px;padding:6px 2px}
.crm-stats b{font-size:16px}
.crm-stats em{font-style:normal;font-size:10.5px;color:var(--muted)}
.crm-stats.big{margin:0 0 14px}
.crm-stats.big b{font-size:20px}

/* ---------- configuracoes ---------- */
.crm-connopts{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.crm-connopts .card{margin:0}
.crm-conn h3{margin:20px 0 6px;font-size:14px}
.crm-conndot{width:10px;height:10px;border-radius:50%;background:var(--faint)}
.crm-conndot.on{background:var(--wa-green);box-shadow:0 0 0 4px #E7F8EF}
.crm-kv{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.crm-kv span{display:flex;flex-direction:column;background:var(--surface-2);border:1px solid var(--line-2);border-radius:10px;padding:8px 12px;min-width:110px}
.crm-kv em{font-style:normal;font-size:11px;color:var(--muted)}
.crm-kv b{font-size:13.5px}
.crm-kv .q-GREEN{color:var(--ok)} .crm-kv .q-YELLOW{color:var(--warn)} .crm-kv .q-RED{color:var(--err)}
.crm-req{margin-top:16px;font-size:13px}
.crm-req summary{cursor:pointer;color:var(--accent);font-weight:600}
.crm-req ol{padding-left:18px;line-height:1.55}
.crm-sync{margin:6px 0 10px}

/* ---------- celular ---------- */
@media (max-width:1399px){
  .crm-chats.with-info{grid-template-columns:minmax(280px,360px) 1fr}
  .crm-chats.with-info .crm-info{position:fixed;top:0;right:0;bottom:0;width:min(380px,100vw);z-index:45;box-shadow:var(--shadow-lg)}
}
@media (max-width:1180px){
  .crm-campgrid,.crm-connopts{grid-template-columns:1fr}
  .crm-sendbox{position:static}
}
@media (max-width:860px){
  /* no celular a lista e o quadro rolam com a pagina (o topo do app tem altura variavel); a conversa abre em tela cheia */
  .crm-chats,.crm-chats.with-info{grid-template-columns:minmax(0,1fr);height:auto;overflow:visible}
  .crm-list{border-right:0}
  .crm-threads{overflow:visible}
  .crm-chats .crm-pane{display:none}
  .crm-chats.has-sel .crm-pane{display:flex;position:fixed;inset:0;z-index:40;height:100dvh}
  .crm-chats .crm-info{position:fixed!important;inset:0!important;width:100%!important;z-index:46}
  .crm-back{display:inline-grid}
  .crm-chead{padding:6px 6px;padding-top:calc(6px + env(safe-area-inset-top))}
  .crm-msgs{padding:10px 10px 8px}
  .crm-bb{max-width:85%}
  .crm-rbtn{display:none}
  .crm-cbar textarea{font-size:16px}        /* iOS nao da zoom em campo com 16px */
  .crm-search input,.crm-taginput input,.crm-mbody input,.crm-mbody textarea,.crm-mbody select,.crm-isec input,.crm-isec textarea{font-size:16px}
  .crm-thread{padding:10px 12px}
  .crm-pipe{height:auto}
  .crm-board{overflow-y:visible;align-items:flex-start}
  .crm-colbody{overflow:visible}
  .crm-pipe .toolbar{gap:6px}
  .crm-pipe .toolbar h1{width:100%}
  .crm-pipe .toolbar .crm-mini{flex:1;max-width:none}
  .crm-board{padding:12px;gap:10px;scroll-snap-type:x mandatory}
  .crm-col{flex-basis:84vw}
  .crm-tplsend,.crm-tpledit{grid-template-columns:1fr}
  .crm-tpledit>div:last-child{position:static}
  .crm-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .crm-ftoggle{display:inline}
  .crm-modal,.crm-modal.wide{max-width:none;max-height:none;min-height:100%;border-radius:0}
  .crm-ov{padding:0}
  .crm-mfoot{position:sticky;bottom:0;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .crm-strow{flex-wrap:wrap}
  .crm-strow input:not([type=color]){flex:1;min-width:140px}
  .crm-filters .crm-search{min-width:100%}
}