/* Atendimento Netfy — tema claro/escuro, layout em 3 colunas, responsivo */
/* ===== Design system Netfy Atendimento =====
   Cor primária única (azul Netfy, sóbrio), neutros frios e cores de estado só onde informam algo.
   Escala tipográfica: 11.5 / 12.5 / 14 / 15 / 17 / 20 · espaçamento: 4 8 12 16 20 24 · raio: 6 (controles) 8 (blocos) 12 (janelas) */
:root{
  --brand:#1d5fa8;--brand-ink:#fff;--brand-soft:#eaf1fa;--brand-strong:#174d89;
  --bg:#f3f4f6;--surface:#fff;--surface-2:#f8f9fb;--line:#e4e7ec;--line-2:#d0d5dd;
  --ink:#141c26;--ink-2:#475263;--ink-3:#6c7686;
  --in:#fff;--out:#e6eef9;--bot:#f0f2f5;--note:#fff5d9;--note-ink:#664b00;
  --good:#16794a;--good-bg:#e5f3eb;--warn:#985800;--warn-bg:#fff2d8;--bad:#b42318;--bad-bg:#fdecea;--mute-bg:#eff1f4;
  --s1:#1d5fa8;--s2:#d97a2b;--seq:#1d5fa8;--grid:#e8ebef;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.10);
  --r:8px;--fs:14px;color-scheme:light;
}
:root[data-theme="dark"]{
  --brand:#5d9fe6;--brand-ink:#0a1a2c;--brand-soft:#16283c;--brand-strong:#82b6ee;
  --bg:#0d1115;--surface:#141920;--surface-2:#1a2028;--line:#252c35;--line-2:#323b46;
  --ink:#e8ecf1;--ink-2:#b3bcc7;--ink-3:#818c99;
  --in:#1a2028;--out:#183150;--bot:#1d242c;--note:#33290f;--note-ink:#efd48a;
  --good:#4cc283;--good-bg:#12291d;--warn:#e8aa47;--warn-bg:#33260c;--bad:#f07a70;--bad-bg:#3a1916;--mute-bg:#1f262e;
  --s1:#5d9fe6;--s2:#e08a42;--seq:#5d9fe6;--grid:#222a33;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.45);color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --brand:#5d9fe6;--brand-ink:#0a1a2c;--brand-soft:#16283c;--brand-strong:#82b6ee;
  --bg:#0d1115;--surface:#141920;--surface-2:#1a2028;--line:#252c35;--line-2:#323b46;
  --ink:#e8ecf1;--ink-2:#b3bcc7;--ink-3:#818c99;
  --in:#1a2028;--out:#183150;--bot:#1d242c;--note:#33290f;--note-ink:#efd48a;
  --good:#4cc283;--good-bg:#12291d;--warn:#e8aa47;--warn-bg:#33260c;--bad:#f07a70;--bad-bg:#3a1916;--mute-bg:#1f262e;
  --s1:#5d9fe6;--s2:#e08a42;--seq:#5d9fe6;--grid:#222a33;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.45);color-scheme:dark}}

/* ========================================================= 1. BASE */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:var(--fs)/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow:hidden;font-feature-settings:"tnum" 0}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:20px;line-height:1.3}h2{font-size:17px}h3{font-size:15px}h4{font-size:12px}
a{color:var(--brand)}
button,input,select,textarea{font:inherit;color:inherit}
::placeholder{color:var(--ink-3);opacity:1}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
.ic.sm{width:15px;height:15px}.ic.lg{width:20px;height:20px}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3);background-clip:content-box;border:3px solid transparent}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* utilitários */
.hide{display:none!important}.grow{flex:1}.mut{color:var(--ink-3)}.mut2{color:var(--ink-2)}.small{font-size:12.5px}
.row{display:flex;gap:8px;align-items:center}.col{display:flex;flex-direction:column;gap:10px}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.only-m{display:none!important}
.tbw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.err{color:var(--bad);font-size:13px;min-height:18px}
.code{font:500 14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:8px 12px;user-select:all;display:inline-block;word-break:break-all}

/* ========================================================= 2. CONTROLES */
button{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:6px 12px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:6px;font-weight:500;line-height:20px;white-space:nowrap;transition:background .12s,border-color .12s,color .12s,box-shadow .12s}
button:hover{background:var(--surface-2);border-color:var(--ink-3)}
button:active{background:var(--mute-bg)}
button:disabled{opacity:.5;cursor:not-allowed}
button.pri{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:600}
button.pri:hover{background:var(--brand-strong);border-color:var(--brand-strong)}
button.ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
button.ghost:hover{background:var(--mute-bg);color:var(--ink)}
button.ghost.on{background:var(--brand-soft);color:var(--brand)}
button.danger{color:var(--bad)}button.danger:hover{background:var(--bad-bg);border-color:var(--bad)}
button.danger-t{color:var(--bad)}button.danger-t:hover{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 50%,transparent)}
button.ok{background:var(--good-bg);border-color:transparent;color:var(--good);font-weight:600}button.ok:hover{background:var(--good);color:#fff}
button.sm{min-height:28px;padding:3px 10px;font-size:12.5px}
button.icon{min-height:34px;min-width:34px;padding:0}
button.sm.icon{min-height:28px;min-width:28px}
input,select,textarea{width:100%;min-height:36px;padding:7px 10px;background:var(--surface);border:1px solid var(--line-2);border-radius:6px;transition:border-color .12s,box-shadow .12s}
textarea{min-height:auto;line-height:1.45}
input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)}
input[type=checkbox],input[type=radio]{width:16px;height:16px;min-height:0;padding:0;accent-color:var(--brand);flex:none}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23717b8a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
.field{display:grid;gap:5px;margin-bottom:14px}.field label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.field .small{color:var(--ink-3)}
.search{position:relative}.search .ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.search input{padding-left:34px}
.switch{position:relative;width:36px;min-width:36px;height:20px;min-height:20px;border-radius:10px;background:var(--line-2);border:0;padding:0}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.switch.on{background:var(--brand)}.switch.on::after{left:18px}.switch:hover{background:var(--ink-3)}.switch.on:hover{background:var(--brand-strong)}
.radio{width:18px;height:18px;border:2px solid var(--ink-3);border-radius:50%;flex:none}.radio.on{border-color:var(--brand);background:radial-gradient(var(--brand) 42%,transparent 48%)}

/* chips/etiquetas: retângulos discretos, cor só quando informa estado */
.chip{display:inline-flex;gap:4px;align-items:center;font-size:12px;font-weight:500;border-radius:4px;padding:1px 7px;background:var(--mute-bg);color:var(--ink-2);line-height:18px;white-space:nowrap}
.chip.good,.chip.human{background:var(--good-bg);color:var(--good)}.chip.warn,.chip.queue{background:var(--warn-bg);color:var(--warn)}
.chip.bad{background:var(--bad-bg);color:var(--bad)}.chip.bot{background:var(--brand-soft);color:var(--brand)}.chip.closed{background:var(--mute-bg);color:var(--ink-3)}
.chip.tag{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2)}
button.chip.lnk{min-height:0;border:0;font-weight:600}
.cnt{background:var(--brand);color:var(--brand-ink);border-radius:9px;padding:0 6px;font-size:11px;font-weight:700;min-width:18px;text-align:center;line-height:18px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:none}.dot.on{background:var(--good)}
.avatar{border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;flex:none;user-select:none;font-size:13px}
.skeleton{background:linear-gradient(90deg,var(--mute-bg),var(--surface-2),var(--mute-bg));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:6px;height:14px}
@keyframes sk{to{background-position:-200% 0}}
.spin{width:16px;height:16px;border:2px solid var(--line-2);border-top-color:var(--brand);border-radius:50%;animation:rot .7s linear infinite;display:inline-block}@keyframes rot{to{transform:rotate(360deg)}}
.empty,.lempty{display:grid;justify-items:center;text-align:center;padding:40px 20px;color:var(--ink-3);gap:4px;margin:auto}
.empty b,.lempty b{color:var(--ink-2);font-size:14px;font-weight:600}.empty .big,.lempty .em{display:none}

/* ========================================================= 3. LOGIN */
#login{position:fixed;inset:0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);background:var(--surface);z-index:50;overflow:auto}
#login .box{display:flex;align-items:center;justify-content:center;padding:32px 24px}
#login form{width:min(360px,100%);display:grid;gap:14px}
#login h1{font-size:20px}
#login label{font-size:12.5px;font-weight:600;color:var(--ink-2);display:grid;gap:5px}
#login .pw{position:relative;display:block}#login .pw input{padding-right:40px}#login .pw button{position:absolute;right:2px;top:1px;border:0;background:none;color:var(--ink-3)}
#login #lb{min-height:40px}
.brandmark{display:flex;align-items:center;gap:10px;font-weight:600;font-size:18px;color:#fff}
.brandmark img{width:32px;height:32px;border-radius:8px}

/* ========================================================= 4. ESTRUTURA DO APP */
#app{height:100dvh;display:grid;grid-template-columns:72px minmax(0,1fr)}
#rail{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:12px 0 14px;gap:4px;z-index:5}
#rail .logo{width:34px;height:34px;border-radius:8px;margin-bottom:12px}
.nav{position:relative;width:60px;min-height:52px;padding:6px 0 5px;border-radius:8px;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;color:var(--ink-3);border:0;background:none}
.nav:hover{background:var(--mute-bg);color:var(--ink)}.nav.on{background:var(--brand-soft);color:var(--brand)}
.nav .nl{font-size:11px;font-weight:500;line-height:1}
.nav .badge{position:absolute;top:3px;right:9px;min-width:17px;height:17px;border-radius:9px;padding:0 4px;background:var(--bad);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 2px var(--surface)}
#rail .sp{flex:1}
#themebtn{min-height:40px}
.avatar.me{width:34px;height:34px;min-height:0;padding:0;border:0;font-size:12.5px;cursor:pointer;margin-top:6px}
#views{min-width:0;min-height:0;height:100%;position:relative;overflow:hidden}
.view{position:absolute;inset:0;display:none}.view.on{display:flex}

/* ========================================================= 5. CONVERSAS */
#v-chat{--lw:320px;--rw:0px;grid-template-columns:var(--lw) minmax(0,1fr) var(--rw)}
#v-chat.on{display:grid}
#v-chat.lp-closed{--lw:0px}
#v-chat.info-open{--rw:360px}

/* lista */
#lp{min-width:0;overflow:hidden;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
#lp>*{min-width:320px}
#v-chat.lp-closed #lp{border-right:0}
#lp .head{position:relative;padding:14px 14px 8px}
#lp h2{display:flex;align-items:center;gap:8px;margin:2px 0 12px;font-size:17px}
#lp h2 .chip{font-size:11.5px}
#bhidelp{position:absolute;right:10px;top:10px;color:var(--ink-3)}
.srow{display:flex;gap:4px;align-items:center}.srow .search{flex:1;min-width:0}
.srow .search input{background:var(--surface-2);border-color:var(--line)}
.hbtns2{display:flex;gap:2px}.hbtns2 .icon{color:var(--ink-2)}.hbtns2 .icon.on{color:var(--brand);background:var(--brand-soft)}
.seg{display:flex;gap:0;padding:0 14px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:1;min-width:0;min-height:38px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;padding:0 6px;font-size:13px;font-weight:500;color:var(--ink-3);gap:6px}
.seg button:hover{background:none;color:var(--ink)}
.seg button.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
.seg button i{font-style:normal;background:var(--mute-bg);color:var(--ink-2);border-radius:9px;padding:0 6px;font-size:11px;font-weight:600;line-height:17px}
.seg button.on i{background:var(--brand);color:var(--brand-ink)}
#list{flex:1;overflow:auto;padding:4px 0 12px}
.item{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;padding:10px 14px;cursor:pointer;position:relative;border-left:3px solid transparent}
.item:hover{background:var(--surface-2)}
.item.on{background:var(--brand-soft);border-left-color:var(--brand)}
.item .av{position:relative;width:40px;height:40px}.item .avatar{width:40px;height:40px;font-size:13px}
.item .sd{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--surface)}
.item.on .sd{border-color:var(--brand-soft)}
.item .ib{min-width:0}
.item .r1{display:flex;align-items:baseline;gap:8px}
.item .nm{font-weight:500;font-size:14px;flex:1;min-width:0}.item.unread .nm{font-weight:650}
.item .tmt{font-size:11.5px;color:var(--ink-3);white-space:nowrap}.item.unread .tmt{color:var(--brand);font-weight:600}
.item .r2{display:flex;gap:4px;align-items:center;margin-top:1px;min-width:0}
.item .r2 .pv,.item .pv{display:block;flex:1;min-width:0;color:var(--ink-3);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item.unread .r2 .pv{color:var(--ink-2)}
.item .cnt{margin-left:auto;flex:none}
.item .r3{display:flex;gap:6px;align-items:center;margin-top:5px;flex-wrap:wrap}
.item .r3 .chip{font-size:11.5px}
#list>.empty{padding-top:60px}

/* conversa */
#cp{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg);position:relative}
#cp .none{margin:auto;text-align:center;color:var(--ink-3);display:grid;gap:6px;justify-items:center;padding:24px;max-width:340px}
#cp .none img{width:40px;height:40px;opacity:.55;filter:grayscale(1);border-radius:10px;margin-bottom:6px}
#cp .none h3{font-size:15px}
#chead{display:flex;align-items:center;gap:6px;min-height:60px;padding:8px 12px 8px 8px;background:var(--surface);border-bottom:1px solid var(--line)}
#chead .who{flex:1;min-width:0;display:flex;align-items:center;gap:10px;border:0;background:none;padding:4px 6px;min-height:0;text-align:left;justify-content:flex-start;border-radius:8px}
#chead .who:hover{background:var(--surface-2)}
#chead .who .avatar{width:36px;height:36px}
#chead .whot{display:grid;min-width:0;line-height:1.3}
#chead .whot b{font-size:15px;font-weight:600}
#chead .whos{font-size:12.5px;color:var(--ink-3);font-weight:400;display:flex;align-items:center;gap:5px}
#etimer{font-variant-numeric:tabular-nums}
.sdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex:none}
.sdot.s-human{background:var(--good)}.sdot.s-queue{background:var(--warn)}.sdot.s-bot{background:var(--brand)}.sdot.s-closed{background:var(--ink-3)}
#chead .acts{display:flex;gap:6px;align-items:center;flex:none}
#banner{padding:8px 16px;font-size:13px;display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--line)}
#banner.warn{background:var(--warn-bg);color:var(--warn)}#banner.info{background:var(--brand-soft);color:var(--brand-strong)}
#msgs{flex:1;overflow:auto;padding:20px max(20px,calc((100% - 820px)/2)) 12px;display:flex;flex-direction:column;gap:2px;background-color:var(--bg)}
.dsep{align-self:center;font-size:12px;font-weight:500;color:var(--ink-3);margin:14px 0 8px}
.m{max-width:min(600px,75%);padding:7px 11px 5px;border-radius:10px;background:var(--in);border:1px solid var(--line);white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;line-height:1.45;font-size:14px;animation:pop .14s ease-out;margin-top:2px}
@keyframes pop{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.m.in{align-self:flex-start;border-top-left-radius:4px}
.m.out{align-self:flex-end;background:var(--out);border-color:transparent;border-top-right-radius:4px}
.m.out.botm{background:var(--bot);border-color:transparent}
.m .snd{font-size:12px;font-weight:600;color:var(--brand);margin-bottom:1px}
.m.botm .snd{color:var(--ink-3)}
.m .meta{display:flex;gap:4px;justify-content:flex-end;align-items:center;font-size:11px;color:var(--ink-3);margin-top:1px;user-select:none}
.m .tick{display:inline-flex;color:var(--ink-3)}.m .tick.read{color:var(--brand)}.m .tick.fail{color:var(--bad)}
.m.fail{box-shadow:inset 0 0 0 1px var(--bad)}.m .ferr{color:var(--bad);font-size:12px;margin-top:3px}
.m.note{align-self:center;max-width:min(560px,90%);background:var(--note);color:var(--note-ink);border:1px solid color-mix(in srgb,var(--note-ink) 22%,transparent);font-size:13px;margin:6px 0}
.m.note .snd{color:var(--note-ink);display:flex;gap:5px;align-items:center}
.m.sys{align-self:center;background:transparent;border:0;color:var(--ink-3);font-size:12px;padding:2px 8px;text-align:center;max-width:90%}
.m img.pic{max-width:280px;max-height:280px;border-radius:6px;display:block;cursor:zoom-in;margin:2px 0}.m video{max-width:280px;border-radius:6px;display:block}.m audio{width:250px;max-width:100%;height:38px;margin:2px 0}
.m .doc{display:flex;gap:10px;align-items:center;padding:8px 10px;background:color-mix(in srgb,var(--ink) 5%,transparent);border-radius:6px;color:inherit;text-decoration:none;margin:2px 0}
.m .doc:hover{background:color-mix(in srgb,var(--brand) 12%,transparent)}
.m .opts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.m .opts span{border:1px solid var(--line-2);color:var(--ink-2);border-radius:4px;padding:1px 8px;font-size:12px;background:var(--surface)}
.botlog{align-self:stretch;background:var(--surface);border:1px solid var(--line);border-radius:8px;margin:4px 0 8px}
.botlog summary{cursor:pointer;list-style:none;display:flex;gap:8px;align-items:center;padding:9px 12px;font-size:13px;font-weight:500;color:var(--ink-2)}
.botlog summary::-webkit-details-marker{display:none}
.botlog summary::after{content:"Mostrar";margin-left:auto;color:var(--brand);font-weight:500;font-size:12.5px}
.botlog[open] summary::after{content:"Ocultar"}.botlog[open] summary{border-bottom:1px solid var(--line)}
.botlog-in{display:flex;flex-direction:column;gap:2px;padding:10px 12px}
.handoff{align-self:center;display:flex;gap:6px;align-items:center;font-size:12px;font-weight:500;padding:3px 10px;background:var(--warn-bg);color:var(--warn);border-radius:4px;margin:6px 0 10px}
.dropzone{position:absolute;inset:8px;background:color-mix(in srgb,var(--brand) 10%,transparent);border:2px dashed var(--brand);border-radius:10px;display:grid;place-items:center;font-weight:600;color:var(--brand);font-size:16px;z-index:15;pointer-events:none}

/* compositor: o ponto principal de interação */
#comp{background:var(--surface);border-top:1px solid var(--line);padding:10px max(16px,calc((100% - 820px)/2)) 12px;position:relative}
.cstrip{display:flex;gap:12px;align-items:center;padding:10px 12px;background:var(--brand-soft);border-radius:8px;color:var(--brand-strong);font-weight:500;font-size:13.5px}
.cstrip .pri{white-space:nowrap}
.cwarn{display:flex;gap:8px;align-items:flex-start;background:var(--warn-bg);color:var(--warn);border-radius:6px;padding:8px 10px;font-size:12.5px;margin-bottom:8px}
.m .transc{min-height:28px;padding:2px 10px;margin-top:4px;font-size:12.5px;color:var(--ink-2)}
.sugdlg{display:flex;flex-direction:column;gap:8px}
.suglbl{font-size:12px;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.03em;margin-top:6px}
.sugpills{display:flex;flex-wrap:wrap;gap:6px}.sugpills.hide,.sugaud.hide{display:none}
.sugpill{min-height:30px;padding:4px 12px;border-radius:999px;font-size:13px;background:var(--surface);color:var(--ink-2)}
.sugpill.on{background:color-mix(in srgb,var(--brand) 12%,var(--surface));border-color:var(--brand);color:var(--brand);font-weight:600}
.suginstr{gap:6px;align-items:flex-start}.suginstr textarea{resize:vertical;min-height:72px}
.sugaud{font-size:12.5px;color:var(--ink-2);display:inline-flex;align-items:center;gap:4px}
textarea.sugres{min-height:110px;resize:vertical;font-size:14.5px;line-height:1.5;border-left:3px solid var(--brand);background:var(--surface-2)}
.suginstr button.rec{color:var(--bad);border-color:currentColor}
@media (max-width:640px){.sugpill{font-size:12.5px;padding:4px 10px}textarea.sugres{min-height:130px}}
.cfield{display:flex;align-items:flex-end;gap:4px;border:1px solid var(--line-2);border-radius:10px;padding:4px;background:var(--surface);transition:border-color .12s,box-shadow .12s}
.cfield:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.cfield textarea{flex:1;border:0;box-shadow:none!important;background:transparent;resize:none;min-height:40px;max-height:180px;padding:9px 6px;font-size:14.5px;border-radius:0}
.ctools{display:flex;align-items:center;padding-bottom:3px}
.ctools button{color:var(--ink-3)}.ctools button:hover{color:var(--ink)}
.cfield .send{min-width:40px;min-height:40px;border-radius:8px}
#comp.note-mode .cfield{background:var(--note);border-color:color-mix(in srgb,var(--note-ink) 35%,transparent)}
.notetoggle{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;color:var(--ink-3);margin-top:8px;cursor:pointer;user-select:none}
#attprev{display:flex;gap:10px;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 8px;margin-bottom:8px}
#attprev img{width:40px;height:40px;object-fit:cover;border-radius:4px}
.ctabs{display:flex;gap:2px;margin-bottom:8px}.ctabs button{border:0;background:none;min-height:28px;padding:2px 10px;font-size:12.5px;color:var(--ink-3)}
.ctabs button.on{background:var(--brand-soft);color:var(--brand)}
.pop{position:absolute;bottom:calc(100% + 6px);left:max(16px,calc((100% - 820px)/2));background:var(--surface);border:1px solid var(--line-2);border-radius:8px;box-shadow:var(--shadow);z-index:20;min-width:280px;max-width:min(520px,92vw);max-height:320px;overflow:auto;padding:4px}
.pop .it{padding:7px 10px;border-radius:6px;cursor:pointer;display:grid;gap:1px}.pop .it:hover,.pop .it.sel{background:var(--surface-2)}
.pop .it b{font-size:13.5px;font-weight:500}.pop .it b em{font-style:normal;color:var(--brand);font-weight:600}
.pop .it span{font-size:12.5px;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pop.pm{bottom:auto;left:auto;position:fixed;min-width:220px}
.pop.pm .it{min-height:36px;align-items:center}
.pop.pm .it b{font-weight:500;font-size:13.5px}
.emojis{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;min-width:0;width:296px}.emojis button{border:0;background:none;font-size:20px;padding:4px;min-height:0;border-radius:6px}.emojis button:hover{background:var(--mute-bg)}

/* painel do cliente */
#ip{overflow:hidden;min-width:0;background:var(--surface);border-left:1px solid var(--line);min-height:0;position:relative}
#v-chat:not(.info-open) #ip{border-left:0}
.ipin{width:360px;height:100%;display:flex;flex-direction:column}
.itop{display:flex;align-items:center;gap:4px;padding:0 6px 0 12px;border-bottom:1px solid var(--line);flex:none}
.itabs{display:flex;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.itab{min-height:48px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;padding:0 10px;font-size:13px;font-weight:500;color:var(--ink-3)}
.itab:hover{background:none;color:var(--ink)}.itab.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
.ibody{flex:1;min-width:0;overflow:auto;position:relative}
.ibody>div{display:flex;flex-direction:column}
.isec,#ip .ihead{padding:14px 16px;border-bottom:1px solid var(--line)}
.isec:last-child{border-bottom:0}
.isec h4,.csub h4{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.ctog{cursor:pointer;user-select:none}.ctog .chev{margin-left:auto;display:inline-flex;color:var(--ink-3);transform:rotate(90deg);transition:transform .15s}
.isec.closed .chev,.csub.closed .chev{transform:rotate(0)}
.isec.closed .isb,.csub.closed .isb{display:none}.isec.closed h4,.csub.closed h4{margin-bottom:0}
#ip .ihead{display:grid;justify-items:center;gap:4px;text-align:center;padding:20px 16px 16px}
#ip .ihead .in{display:flex;align-items:center;gap:4px;justify-content:center;flex-wrap:wrap;font-weight:600;font-size:16px;word-break:break-word}
#ip .ip2{display:flex;align-items:center;gap:2px;color:var(--ink-3);font-size:13px}
#ip .ihead .csub{width:100%;text-align:left;border-top:1px solid var(--line);margin-top:12px;padding-top:12px;justify-self:stretch}
.csub .row input{flex:1;min-width:0}.csub .row button{flex:none}
.bigph{width:64px;height:64px;min-height:0;border-radius:50%;border:0;padding:0;display:grid;place-items:center;color:#fff;font-weight:600;font-size:22px;cursor:zoom-in;overflow:hidden}
.bigph:hover{box-shadow:0 0 0 3px var(--brand-soft)}.bigph img{width:100%;height:100%;object-fit:cover}
.ibody .irow,#ip .irow{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;font-size:13px;padding:5px 0}
.ibody .irow .il,#ip .irow .il{color:var(--ink-3);flex:none}.ibody .irow .iv,#ip .irow .iv{text-align:right;word-break:break-word;flex:1}
#ip .irow .ic{color:var(--ink-3);margin-top:2px}
.box{border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin-top:8px}
.box .t{display:flex;justify-content:space-between;gap:8px;align-items:center;font-weight:600;font-size:13.5px}
.fin{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:6px;font-weight:500}
.fin.ok,.fbanner.ok{background:var(--good-bg);color:var(--good)}.fin.pend,.fbanner.pend{background:var(--warn-bg);color:var(--warn)}.fin.late,.fbanner.late{background:var(--bad-bg);color:var(--bad)}
.fbanner{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:6px}.fbanner b{display:block;font-size:14px;font-weight:600}.fbanner span{font-size:12.5px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.stat{border:1px solid var(--line);border-radius:6px;padding:8px}.stat b{display:block;font-size:13px;white-space:nowrap}.stat b.bad{color:var(--bad)}.stat span{font-size:11.5px;color:var(--ink-3)}
.lrow{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}.lrow:last-child{border-bottom:0}
.tk{padding:9px 0;border-bottom:1px solid var(--line);display:grid;gap:2px}.tk:last-child{border-bottom:0}
.tkd{color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.invs{display:grid;gap:6px;margin-top:8px}
.inv{border:1px solid var(--line);border-radius:6px;padding:10px 12px;display:grid;gap:8px}
.ivt{display:flex;gap:8px;align-items:center}.ivt b{font-size:14px;margin-right:auto}
.tagrow{display:flex;gap:6px;flex-wrap:wrap}.tagrow .chip button{border:0;background:none;padding:0;min-height:0;line-height:0;color:inherit;opacity:.6}.tagrow .chip button:hover{opacity:1;background:none}
.hist{display:grid;gap:2px}.hist .h{display:flex;gap:8px;align-items:center;font-size:12.5px;padding:7px 8px;border-radius:6px;cursor:pointer}.hist .h:hover{background:var(--surface-2)}
textarea.notes{min-height:80px;resize:vertical;font-size:13px}
.hrow{display:flex;justify-content:space-between;align-items:center}.hrow button{text-transform:none;letter-spacing:0}
.sug{display:flex;gap:8px;align-items:center;width:100%;justify-content:flex-start;border:1px solid var(--line);border-radius:6px;padding:8px 10px;text-align:left;margin-top:6px;background:var(--surface)}
.sug:hover{border-color:var(--brand)}
.cf{background:var(--warn-bg);color:var(--warn);border-radius:6px;padding:8px 10px;margin-bottom:10px;font-weight:500}
.isec select,.isb select{margin-bottom:8px}
.promise{width:100%;min-height:38px;background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:600;margin-bottom:12px}
.promise:hover{background:var(--brand-strong);border-color:var(--brand-strong)}
.promise.on{background:var(--warn-bg);border-color:transparent;color:var(--warn)}
.fgrid{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:8px}
.fgrid>div{padding:8px 10px;display:grid;gap:2px;align-content:start;border-right:1px solid var(--line)}.fgrid>div:last-child{border-right:0}
.fgrid span{font-size:11.5px;color:var(--ink-3)}.fgrid b{font-size:13.5px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tile{position:relative;display:grid;justify-items:center;gap:4px;min-height:64px;padding:10px 4px;border:1px solid var(--line);border-radius:6px;font-size:12px;font-weight:500;background:var(--surface);white-space:normal;text-align:center}
.tile .ic{color:var(--brand)}.tile:hover:not(:disabled){border-color:var(--brand);background:var(--brand-soft)}.tile:disabled{opacity:.4}
.tile.busy{pointer-events:none}.tile.busy .ic{opacity:0}
.tile.busy::after{content:"";position:absolute;top:11px;left:50%;width:18px;height:18px;margin-left:-9px;border:2px solid var(--line-2);border-top-color:var(--brand);border-radius:50%;animation:rot .7s linear infinite}
.tile.done .ic{color:var(--good)}
.seg2{display:inline-flex;background:var(--mute-bg);border-radius:6px;padding:2px;gap:2px}
.seg2 button{border:0;background:none;min-height:24px;padding:2px 8px;font-size:12px;color:var(--ink-3)}
.seg2 button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.accs{padding:4px 16px 24px}.acc{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;gap:8px;align-items:center;padding:12px 2px;font-weight:600;font-size:13.5px}
.acc summary::-webkit-details-marker{display:none}
.acc summary i{font-style:normal;background:var(--mute-bg);color:var(--ink-2);border-radius:9px;padding:0 7px;font-size:11.5px;line-height:18px}
.acc summary .ic{margin-left:auto;color:var(--ink-3);transition:.15s}.acc[open] summary .ic{transform:rotate(90deg)}
.accb{padding:0 2px 14px}

/* fundos da conversa (opcional; padrão liso) */
.bggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.bgt{display:grid;gap:6px;justify-items:center;padding:8px;font-size:12.5px;white-space:normal}
.bgt.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.bgp{width:100%;height:56px;border-radius:6px;border:1px solid var(--line-2);background-color:var(--bg)}
[data-bg="liso"]{background-image:none}
[data-bg="doodle"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='%23808080' stroke-opacity='.12' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='22' r='6'/%3E%3Cpath d='M70 14l6 10h-12z'/%3E%3Cpath d='M98 30v10M93 35h10'/%3E%3Crect x='14' y='70' width='12' height='12' rx='3'/%3E%3Cpath d='M60 66q6-8 12 0t12 0'/%3E%3Ccircle cx='100' cy='88' r='4'/%3E%3Cpath d='M40 100l8 8M48 100l-8 8'/%3E%3Cpath d='M104 60l8 4-8 4z'/%3E%3C/svg%3E");background-size:120px 120px}
[data-bg="pontos"]{background-image:radial-gradient(color-mix(in srgb,var(--ink) 11%,transparent) 1.2px,transparent 1.2px);background-size:20px 20px}
[data-bg="grade"]{background-image:linear-gradient(color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px);background-size:28px 28px}
[data-bg="ondas"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='%23808080' stroke-opacity='.12' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 20q15-14 30 0t30 0t30 0t30 0'/%3E%3Cpath d='M0 60q15-14 30 0t30 0t30 0t30 0'/%3E%3Cpath d='M0 100q15-14 30 0t30 0t30 0t30 0'/%3E%3C/svg%3E");background-size:120px 120px}
[data-bg="oceano"]{background-image:linear-gradient(135deg,color-mix(in srgb,#2aa7ff 14%,var(--bg)),color-mix(in srgb,#2b5cff 10%,var(--bg)))}
[data-bg="aurora"]{background-image:linear-gradient(135deg,color-mix(in srgb,#7c5cff 12%,var(--bg)),color-mix(in srgb,#1fd0a3 12%,var(--bg)))}
[data-bg="floresta"]{background-image:linear-gradient(135deg,color-mix(in srgb,#1fb55a 12%,var(--bg)),color-mix(in srgb,#8bc34a 8%,var(--bg)))}
[data-bg="porsol"]{background-image:linear-gradient(135deg,color-mix(in srgb,#ff7a45 12%,var(--bg)),color-mix(in srgb,#ff3d81 9%,var(--bg)))}
[data-bg="noite"]{background-image:linear-gradient(160deg,color-mix(in srgb,#1b1f4b 60%,var(--bg)),color-mix(in srgb,#05060f 50%,var(--bg)))}

/* ========================================================= 6. PAINEL DE ATENDIMENTO (quadro ao vivo) */
.boardpage{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;padding:16px 20px 16px;gap:12px;overflow:hidden;background:var(--bg)}
.bhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.btitle h1{font-size:18px}.bhead .sub{color:var(--ink-3);font-size:12.5px;margin-top:2px;display:flex;align-items:center;gap:8px}
.btools{display:flex;gap:6px;align-items:center;margin-left:auto}
.live{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--good)}
.live i{width:6px;height:6px;border-radius:50%;background:currentColor}
.btabs{display:inline-flex;background:var(--mute-bg);border-radius:8px;padding:3px;gap:2px}
.btabs button{border:0;background:none;min-height:30px;padding:0 12px;font-weight:500;color:var(--ink-2);font-size:13px}
.btabs button.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(16,24,40,.1)}
.btabs button i{font-style:normal;color:var(--ink-3);font-size:12px;font-weight:600}
.bfilters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;width:100%}
.bfilters select,.bfilters .search input{font-size:13px;width:auto;min-width:160px;background-color:var(--surface)}
.bfilters .search{width:240px}.bfilters .search input{width:100%}
.bfilters .on-filter{border-color:var(--brand);color:var(--brand)}
.bbanner{display:flex;gap:8px;align-items:center;padding:8px 12px;border-radius:6px;font-size:13px}
.bbanner b{font-weight:600}
.bbanner.bad{background:var(--bad-bg);color:var(--bad)}.bbanner.warn{background:var(--warn-bg);color:var(--warn)}.bbanner.info{background:var(--brand-soft);color:var(--brand-strong)}
.bkpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.bk{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:flex;gap:10px;align-items:center;min-width:0}
.bk .ico{display:none}.bk .v{font-size:20px;font-weight:600;line-height:1.1}.bk .l{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk.alert{border-color:var(--bad)}
.bteam{display:flex;gap:6px;overflow-x:auto;padding:2px 0 4px;align-items:stretch}
.tm{display:flex;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:5px 10px 5px 6px;cursor:pointer;flex:none;position:relative}
.tm:hover{border-color:var(--ink-3)}.tm.on{background:var(--brand-soft);border-color:var(--brand)}
.tm .avatar{width:28px;height:28px;font-size:11px;position:relative;overflow:visible}.tm .avatar .dot{position:absolute;right:-2px;bottom:-2px;box-shadow:0 0 0 2px var(--surface)}
.tm .n{font-weight:500;font-size:13px;line-height:1.2}.tm .s{font-size:11.5px;color:var(--ink-3)}
.tm .wn{position:absolute;top:-6px;right:-6px;background:var(--bad);color:#fff;border-radius:9px;font-size:10.5px;font-weight:700;min-width:17px;height:17px;display:grid;place-items:center}
.lanes{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lane{display:flex;flex-direction:column;min-height:0;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.lane.q{--acc:var(--warn)}.lane.h{--acc:var(--good)}.lane.b{--acc:var(--brand)}
.lane.over{border-color:var(--brand);background:var(--brand-soft)}
.lh{display:flex;gap:8px;align-items:center;padding:10px 12px 8px}
.lh .t{font-weight:600;font-size:13.5px;display:flex;gap:7px;align-items:center}
.lh .t .ic{display:none}
.lh .t::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc)}
.lh .c{color:var(--ink-3);font-size:12.5px;font-weight:600}
.lh .grow{flex:1}.lh button{color:var(--ink-3)}
.lane .sub2{display:none}
.lb{flex:1;overflow:auto;padding:2px 8px 10px;display:flex;flex-direction:column;gap:6px}
.bcard{--sla:transparent;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;cursor:pointer;display:grid;gap:6px;position:relative;transition:border-color .12s,box-shadow .12s}
.bcard::before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--sla)}
.bcard:hover{border-color:var(--line-2);box-shadow:0 1px 3px rgba(16,24,40,.08)}
.bcard.mid{--sla:var(--warn)}.bcard.hot{--sla:var(--bad)}
.bcard.dragging{opacity:.45}.bcard.new{animation:pop .3s ease-out}
.bcard .r1{display:flex;gap:10px;align-items:center}
.bcard .ph{width:32px;height:32px;min-height:0;border-radius:50%;border:0;padding:0;display:grid;place-items:center;color:#fff;font-weight:600;font-size:12px;flex:none;position:relative;overflow:visible;cursor:zoom-in}
.bcard .ph img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.bcard .ph .u{position:absolute;right:-5px;top:-5px;background:var(--brand);color:var(--brand-ink);border-radius:9px;min-width:17px;height:17px;padding:0 4px;font-size:10.5px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 2px var(--surface)}
.bcard .nm{font-weight:600;font-size:13.5px;min-width:0;flex:1;line-height:1.3}.bcard .nm span{display:block;font-size:12px;font-weight:400;color:var(--ink-3)}
.bcard .ago{font-size:12px;color:var(--ink-3);white-space:nowrap;align-self:flex-start;font-variant-numeric:tabular-nums}
.bcard .pv{font-size:13px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
.bcard .pv .tick{vertical-align:-3px;margin-right:3px}
.bcard .foot{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--ink-3)}
.bcard .chan{display:inline-flex;gap:4px;align-items:center;min-width:0;max-width:140px}
.bcard .chico{display:inline-flex}.bcard .chn{font-size:12px;color:var(--ink-3)}
.bcard .who{font-size:12px;color:var(--ink-2);font-weight:500;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.bcard .who::before{content:"· ";color:var(--ink-3)}
.bcard .take{margin-left:4px}
.bclosed{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px;overflow:auto;flex:1;align-content:start;padding-bottom:12px}
.lanetabs{display:none}
body.tv #app{grid-template-columns:1fr!important}body.tv #rail{display:none}
body.tv .boardpage{padding:20px 28px;font-size:16px}body.tv .bhead h1{font-size:26px}body.tv .bfilters,body.tv .btabs,body.tv .btools,body.tv .bhide-tv{display:none!important}
body.tv .bcard .nm{font-size:16px}body.tv .bcard .pv{font-size:15px}

/* ========================================================= 7. PÁGINAS (gestão, relatórios, console) */
.page{flex:1;overflow:auto;padding:24px 28px 48px}.page .inner{max-width:1160px;margin:0 auto}
.page h1{font-size:20px}.page .sub{color:var(--ink-3);margin:3px 0 0;font-size:13px}
.pagehead{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.kpi .l{font-size:12.5px;color:var(--ink-3);display:flex;gap:6px;align-items:center}.kpi .l .ic{display:none}
.kpi .v{font-size:24px;font-weight:600;margin:4px 0 2px;line-height:1.15;font-variant-numeric:tabular-nums}
.kpi .s{font-size:12px;color:var(--ink-3)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:12px;margin-bottom:12px}
.grid2 label{display:grid;gap:6px;align-content:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px 18px;min-width:0}
.panel h3{font-size:14.5px;margin:0 0 2px}.panel .sub2{color:var(--ink-3);font-size:12.5px;margin-bottom:12px}
.panel .ph{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px}
.legend{display:flex;gap:14px;font-size:12.5px;color:var(--ink-2);margin:2px 0 8px}.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
svg.chart{width:100%;height:auto;display:block;overflow:visible}svg.chart text{fill:var(--ink-3);font-size:11px;font-family:inherit}
svg.chart .gl{stroke:var(--grid);stroke-width:1}svg.chart .bl{stroke:var(--line-2);stroke-width:1}
svg.chart .hit{fill:transparent}svg.chart .hit:hover+.hov,svg.chart g:hover>.hov{opacity:1}
.tip{position:fixed;z-index:60;background:var(--ink);color:var(--bg);padding:6px 9px;border-radius:6px;font-size:12.5px;pointer-events:none;box-shadow:var(--shadow);max-width:260px;line-height:1.35}
.tip b{display:block;margin-bottom:2px}
.hbar{display:grid;grid-template-columns:110px 1fr 40px;gap:10px;align-items:center;margin:8px 0;font-size:13px}.hbar .tr{height:8px;background:var(--mute-bg);border-radius:4px;overflow:hidden}.hbar .tr i{display:block;height:100%;background:var(--seq);border-radius:4px}.hbar .n{text-align:right;font-weight:600}
table.tb{width:100%;border-collapse:collapse;font-size:13.5px}
table.tb th{font-size:12px;color:var(--ink-3);text-align:left;font-weight:500;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
table.tb td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}table.tb tr:last-child td{border-bottom:0}
table.tb .r{text-align:right}
tr.clk{cursor:pointer}tr.clk:hover td{background:var(--surface-2)}
#rbody .tb td,#rbody .tb th{white-space:nowrap}
.rq{min-width:150px;max-width:260px;width:auto}.rrange input[type=date]{width:auto}
.rrange.on input{border-color:var(--brand)}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:10px}
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px 14px;display:grid;gap:6px;align-content:start}
.qcard .sc{font:500 12.5px ui-monospace,Menlo,monospace;color:var(--brand)}
.qcard p{margin:0;color:var(--ink-2);font-size:13px;white-space:pre-wrap}
.formrow{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line)}.formrow:last-child{border-bottom:0}
.formrow label{font-weight:600;font-size:13.5px}.formrow small{display:block;color:var(--ink-3);font-weight:400;margin-top:2px;font-size:12.5px}
.hrs{display:grid;gap:6px}.hrs .d{display:grid;grid-template-columns:90px 44px 110px 20px 110px;gap:8px;align-items:center}
.cnlist{padding:0;overflow:hidden}
.cnrow{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;border-top:1px solid var(--line)}
.cnrow:first-child{border-top:0}.cnrow:hover{background:var(--hover,rgba(127,127,127,.06))}
.cnrow .chico{flex:none}.cnrow .cngear{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;color:var(--ink-3)}.cnrow:hover .cngear{color:var(--brand);background:var(--surface-2)}
.cnempty{display:grid;justify-items:center;gap:8px;text-align:center;padding:34px 18px}
.cndl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}.cndl dt{color:var(--ink-3)}.cndl dd{margin:0;word-break:break-all}
.chgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:10px}
.chcard{display:grid;gap:6px;justify-items:start;text-align:left;padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);align-content:start;white-space:normal}
.chcard:hover{border-color:var(--ink-3);background:var(--surface)}
.chcard.on{border-color:color-mix(in srgb,var(--good) 45%,var(--line))}
.chcard b{font-size:14px}
.chico{display:inline-flex}
.chico.lg{width:36px;height:36px;border-radius:8px;background:color-mix(in srgb,currentColor 11%,transparent);align-items:center;justify-content:center}
.chico.lg .ic{width:20px;height:20px}
.hero h1{font-size:20px;margin:0 0 4px}.hero p{margin:0 0 16px}
.htiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.htile{display:grid;gap:2px;justify-items:start;text-align:left;padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink-2);white-space:normal;min-height:0}
.htile .ic{display:none}.htile b{font-size:24px;color:var(--ink);font-weight:600}.htile:hover{border-color:var(--ink-3);background:var(--surface)}
.fchips{display:flex;flex-wrap:wrap;gap:6px}.fchip{min-height:30px;padding:2px 12px;font-size:13px}.fchip.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand);font-weight:600}
.nres{display:grid;gap:6px;max-height:220px;overflow:auto}.nrow{display:grid;gap:5px;padding:9px 10px;border:1px solid var(--line);border-radius:6px}
.nchip{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2)}.nchip .ghost{margin-left:auto}
.ocard{display:flex;gap:12px;align-items:center;justify-content:flex-start;text-align:left;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);width:100%;white-space:normal}.ocard.on{border-color:var(--brand);background:var(--brand-soft)}.ocard div{display:grid;gap:2px;flex:1}
.tplprev{white-space:pre-wrap;padding:10px 12px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);font-size:13px}
.cform{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.cform .full{grid-column:1/-1}
.keybox{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2)}
.keybox code{font-size:16px;letter-spacing:.05em;font-weight:600;word-break:break-all}
.lnk{cursor:pointer}.lnk:hover{color:var(--brand)}
#cmain .irow,#mcontent .irow{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}#cmain .irow:last-child,#mcontent .irow:last-child{border-bottom:0}

/* editor de automação */
.wa{margin-top:14px;padding:12px;border-radius:8px;background:#0b141a;display:grid;gap:6px}.wab{background:#202c33;color:#e9edef;padding:8px 10px;border-radius:7px;font-size:13px;white-space:pre-wrap}
.wabtn{background:#202c33;color:#53bdeb;text-align:center;padding:7px;border-radius:7px;font-size:13px}

/* navegação da gestão e do console */
.mlayout{display:grid;grid-template-columns:240px minmax(0,1fr);height:100%;min-height:0;width:100%}
.mlayout.mcol{grid-template-columns:64px minmax(0,1fr)}
.mlayout .page{min-height:0;overflow:auto}
#mnav{border-right:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;overflow:hidden;min-height:0}
.mhead{display:flex;gap:10px;align-items:center;padding:14px 12px 12px}.mhead .logo{width:30px;height:30px;border-radius:7px}
.mhead .mtt{flex:1;min-width:0}.mhead b{display:block;font-size:14px;font-weight:600}.mhead .mtt span{display:block;font-size:12px;color:var(--ink-3)}
.mcolbtn{margin-left:auto;color:var(--ink-3)}
.muser{display:flex;gap:10px;align-items:center;padding:8px 14px 12px;border-bottom:1px solid var(--line)}.muser .mtt{min-width:0}.muser .mtt b{font-size:13.5px;font-weight:500;display:block}.muser .mtt span{display:block;font-size:12px}
.muser .avatar{width:30px;height:30px;font-size:11.5px}
.mscroll{flex:1;overflow:auto;padding:8px}
.mgrp{margin-bottom:4px}
.mgt{width:100%;display:flex;justify-content:space-between;align-items:center;min-height:28px;border:0;background:transparent;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);padding:8px 8px 4px;font-weight:600}
.mgt:hover{background:none;color:var(--ink-2)}
.mgt .ic{transition:transform .15s;transform:rotate(90deg);width:13px;height:13px}.mgrp.closed .mgt .ic{transform:rotate(0)}.mgrp.closed .mitems{display:none}
.mitems{display:grid;gap:1px}
.mi{display:flex;gap:10px;align-items:center;justify-content:flex-start;width:100%;min-height:34px;border:0;background:transparent;padding:6px 10px;border-radius:6px;font-size:13.5px;font-weight:500;text-align:left;color:var(--ink-2);text-decoration:none}
.mi:hover{background:var(--mute-bg);color:var(--ink)}.mi.on{background:var(--brand-soft);color:var(--brand)}
.mi .ic{width:17px;height:17px}
a.mi{color:var(--ink-2)}
.mfoot{padding:8px;border-top:1px solid var(--line);display:grid;gap:1px}
.mgo{margin-top:6px;width:100%}
.mlayout.mcol .mtt,.mlayout.mcol .mi span,.mlayout.mcol .mgo span,.mlayout.mcol .muser .mtt{display:none}
.mlayout.mcol .mgt{font-size:0;min-height:0;padding:4px 0;border-top:1px solid var(--line);border-radius:0;margin-top:4px}.mlayout.mcol .mgt .ic{display:none}.mlayout.mcol .mgrp:first-child .mgt{display:none}
.mlayout.mcol .mgrp.closed .mitems{display:grid}
.mlayout.mcol .mi,.mlayout.mcol .mgo{justify-content:center;padding:6px 0}
.mlayout.mcol .mhead{flex-direction:column;padding:12px 6px}.mlayout.mcol .mcolbtn{margin:6px 0 0}.mlayout.mcol .muser{justify-content:center;padding:8px 0}
#mbar{display:none}
#mscrim{display:none}
#capp{position:fixed;inset:0;background:var(--bg)}

/* ========================================================= 8. CAMADAS: diálogos, menus, avisos */
dialog{border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);padding:0;width:min(520px,94vw);box-shadow:0 20px 50px rgba(16,24,40,.22);max-height:90dvh;overflow:auto}
dialog::backdrop{background:rgba(16,24,40,.45)}
dialog .dh{display:flex;align-items:center;gap:10px;padding:16px 20px 4px;position:sticky;top:0;background:var(--surface);z-index:1}dialog .dh h3{font-size:16px;flex:1}
dialog .db{padding:10px 20px 4px}
dialog .df{display:flex;gap:8px;justify-content:flex-end;padding:12px 20px 18px;position:sticky;bottom:0;background:var(--surface);flex-wrap:wrap}
dialog.wide{width:min(760px,95vw)}
dialog.lightbox{background:transparent;border:0;box-shadow:none;width:auto;max-width:96vw}dialog.lightbox img{max-width:94vw;max-height:88dvh;border-radius:6px;display:block}
#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;display:grid;gap:8px;z-index:80;width:max-content;max-width:min(440px,92vw)}
.toast{background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:8px;box-shadow:var(--shadow);display:flex;gap:10px;align-items:center;animation:pop .18s;font-size:13.5px}
.toast.bad{background:var(--bad);color:#fff}.toast.ok{background:var(--ink)}.toast.ok .ic{color:var(--good)}.toast.msg{cursor:pointer}.toast b{display:block}
#licbar{position:fixed;top:0;left:0;right:0;height:34px;z-index:70;display:flex;gap:10px;align-items:center;justify-content:center;font-size:13px;font-weight:500;padding:0 12px}
#licbar.warn{background:var(--warn-bg);color:var(--warn);border-bottom:1px solid color-mix(in srgb,var(--warn) 30%,transparent)}#licbar.blocked{background:var(--bad);color:#fff}
#licbar button{min-height:26px;background:transparent;color:inherit;border-color:currentColor}
body.hasbar #app{height:calc(100dvh - 34px);margin-top:34px}body.hasbar #capp{top:34px}
#printarea{display:none}
@media print{body>*:not(#printarea){display:none!important}#printarea{display:block!important;padding:24px}#printarea pre{white-space:pre-wrap;font:13px/1.5 system-ui,sans-serif}body{overflow:visible!important}}

/* ========================================================= 9. RESPONSIVO */
/* telas médias: o painel do cliente passa a sobrepor a conversa */
@media (max-width:1280px){
  #v-chat.info-open{--rw:0px}
  #v-chat #ip{position:absolute;right:0;top:0;bottom:0;width:0;z-index:12;transition:width .2s ease}
  #v-chat.info-open #ip{width:min(380px,94vw);box-shadow:var(--shadow);border-left:1px solid var(--line)}
  .ipin{width:min(380px,94vw)}
  .bkpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1100px){

  #v-chat{--lw:300px}#lp>*{min-width:300px}
}
/* toque: alvos maiores */
@media (pointer:coarse){
  button{min-height:40px}button.icon{min-width:40px;min-height:40px}button.sm{min-height:34px}
  input,select{min-height:42px}
  .item{padding:11px 14px}
}
/* celular */
@media (max-width:860px){
  input,select,textarea{font-size:16px}
  .hide-m{display:none!important}.only-m{display:inline-flex!important}
  #login{grid-template-columns:1fr}#login .hero{display:none}#login .mbrand{display:flex}
  #app{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  #rail{grid-row:2;flex-direction:row;justify-content:space-around;align-items:stretch;border-right:0;border-top:1px solid var(--line);padding:4px 6px calc(4px + env(safe-area-inset-bottom));gap:0}
  #rail .logo,#rail .sp,#themebtn{display:none}
  .nav{flex:1;width:auto;min-height:52px}
  .avatar.me{width:30px;height:30px;align-self:center;margin:0 10px}
  .nav .badge{right:calc(50% - 22px)}
  body.in-conv #rail{display:none}
  body.in-conv #app{grid-template-rows:minmax(0,1fr)}

  #v-chat,#v-chat.info-open,#v-chat.lp-closed{grid-template-columns:minmax(0,1fr);--lw:100%;--rw:0px}
  #lp>*{min-width:0}#bhidelp{display:none}
  #lp .head{padding:12px 12px 8px}
  .seg{padding:0 8px}
  #v-chat #cp{position:absolute;inset:0;transform:translateX(100%);transition:transform .2s ease;z-index:6}
  #v-chat.show-chat #cp{transform:none}
  #v-chat #ip{position:fixed;inset:0;width:100%!important;z-index:30;transform:translateY(100%);transition:transform .22s ease;border:0;box-shadow:none}
  #v-chat.info-open #ip{transform:none}
  .ipin{width:100%}
  .itop{padding-top:env(safe-area-inset-top)}
  #chead{min-height:56px;padding:6px 6px 6px 2px;gap:2px}
  #chead .who{padding:4px}
  #chead .who .avatar{width:34px;height:34px}
  #msgs{padding:12px 10px 8px}
  .m{max-width:86%}.m img.pic,.m video{max-width:100%}
  #comp{padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
  .cstrip{flex-wrap:wrap}.cstrip .pri{width:100%}
  .pop{left:8px;right:8px;min-width:0;max-width:none}
  .pop.pm{left:8px!important;right:8px!important;top:auto!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;max-height:70dvh;border-radius:12px;padding:6px}
  .emojis{width:100%}

  .boardpage{padding:12px 12px 8px;gap:10px;overflow:auto}
  .bhead{gap:8px}.btitle{flex:1;min-width:0}
  .btabs{order:3;width:100%}.btabs button{flex:1}
  .bfilters{display:none}.bfilters.open{display:flex}
  .bfilters select,.bfilters .search{flex:1 1 140px;min-width:0;width:auto}
  .bkpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lanetabs{display:flex;gap:0;border-bottom:1px solid var(--line)}
  .lanetabs button{flex:1;min-width:0;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;font-size:13px;color:var(--ink-3);gap:5px;padding:0 4px}
  .lanetabs button .ic{display:none}
  .lanetabs button.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
  .lanetabs button i{font-style:normal;font-size:12px;color:inherit}
  .lanes{grid-template-columns:minmax(0,1fr);min-height:auto;flex:none}.lane{display:none;background:none;border:0}.lane.cur{display:flex}.lane .lh{display:none}
  .lb{padding:0;overflow:visible}
  .bclosed{grid-template-columns:1fr}

  .page{padding:16px 14px 40px}
  .pagehead{margin-bottom:14px}
  .formrow{grid-template-columns:1fr;gap:6px}
  .hrs .d{grid-template-columns:72px 44px 1fr 14px 1fr}
  .hbar{grid-template-columns:90px 1fr 34px}
  .grid2,.cform{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  dialog,dialog.wide{width:100%;max-width:100%;margin:auto 0 0;border-radius:14px 14px 0 0;max-height:92dvh;border-bottom:0}
  dialog .df{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  dialog .df button{flex:1}
  #toasts{bottom:calc(72px + env(safe-area-inset-bottom))}
  table.tb{font-size:13px}
  .rq{max-width:none;flex:1}

  /* gestão/console: menu vira gaveta */
  .mlayout,.mlayout.mcol{grid-template-columns:minmax(0,1fr)}
  #mnav{position:fixed;left:0;top:0;bottom:0;width:min(290px,86vw);z-index:40;transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--shadow)}
  #mnav.open{transform:none}
  .mlayout.mcol .mtt,.mlayout.mcol .mi span,.mlayout.mcol .mgo span,.mlayout.mcol .muser .mtt{display:revert}
  .mcolbtn{display:none!important}
  #mscrim.on{display:block;position:fixed;inset:0;background:rgba(16,24,40,.4);z-index:39}
  #mbar{display:flex;align-items:center;gap:6px;position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--line);padding:6px 8px;margin:-16px -14px 14px}
  #mbar b{font-size:15px;font-weight:600;flex:1;min-width:0}
}
@media (max-width:380px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}.fgrid>div:last-child{grid-column:1/-1;border-top:1px solid var(--line)}
  .seg button{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ========================================================= 10. AJUSTES FINOS */
body[data-area="ger"] #rail{display:none}
body[data-area="ger"] #app{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.seg button{flex:1 0 auto}
#login label input{font-weight:400}
.rrange{flex-wrap:wrap}
@media (max-width:860px){
  .mlayout .page{padding-top:0}
  #mbar{margin:0 -14px 14px}
  .mlayout .pagehead h1{display:none}
  .mlayout .pagehead{margin-top:2px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi .v{font-size:20px}
  .rrange{width:100%}.rrange input[type=date]{flex:1;min-width:0}
  /* tabelas de cadastro viram lista no celular (relatórios continuam com rolagem lateral) */
  #mcontent table.tb:not(#rbody table.tb),#cmain table.tb{display:block}
  #mcontent table.tb:not(#rbody table.tb) thead,#cmain table.tb thead{display:none}
  #mcontent table.tb:not(#rbody table.tb) tbody,#cmain table.tb tbody{display:block}
  #mcontent table.tb:not(#rbody table.tb) tr,#cmain table.tb tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:10px 0;border-bottom:1px solid var(--line)}
  #mcontent table.tb:not(#rbody table.tb) tr:last-child,#cmain table.tb tr:last-child{border-bottom:0}
  #mcontent table.tb:not(#rbody table.tb) td,#cmain table.tb td{border:0;padding:0;white-space:normal}
  #mcontent table.tb:not(#rbody table.tb) td:first-child,#cmain table.tb td:first-child{flex:1 1 100%}
  #mcontent table.tb:not(#rbody table.tb) td.r,#cmain table.tb td.r{margin-left:auto}
  .bcard .chn{display:none}
  .bbanner{font-size:12.5px}
  .panel{padding:14px}
  .panel .ph{flex-wrap:wrap}
}
#v-chat{--lw:340px}#lp>*{min-width:340px}
.seg button{padding:0 8px;font-size:13px}
#chead .whos{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chead .whos .sdot{margin-right:5px;vertical-align:1px}
@media (max-width:1100px){#v-chat{--lw:300px}#lp>*{min-width:300px}}
@media (max-width:860px){
  #v-chat,#v-chat.info-open,#v-chat.lp-closed{--lw:100%}#lp>*{min-width:0}
  .panel .row:has(> input){flex-wrap:wrap}.panel .row:has(> input) > input{flex:1 1 100%}.panel .row:has(> input) > button{flex:1}
}
.field{align-content:start}

/* logo da empresa */
.logorow{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.logobox{width:132px;height:88px;border:1px dashed var(--line-2);border-radius:8px;display:grid;place-items:center;background:var(--surface-2);padding:8px;flex:none}
.logobox img{max-width:100%;max-height:100%;object-fit:contain}
#rail .logo.custom,#mnav .mhead .logo.custom{object-fit:contain;background:#fff;padding:2px;border:1px solid var(--line)}
#llogo{max-height:56px;max-width:220px;object-fit:contain;justify-self:start}
.logobox{overflow:hidden}.logobox img{width:100%;height:100%;object-fit:contain}

/* central do cliente */
.nextpay{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.np-v{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.25}.np-late{color:var(--bad);font-weight:500}
.urow{display:flex;justify-content:space-between;font-size:13.5px;margin-top:8px}
.ubar{height:6px;background:var(--mute-bg);border-radius:3px;overflow:hidden;margin:6px 0 4px}.ubar i{display:block;height:100%;background:var(--brand);border-radius:3px}.ubar i.full{background:var(--warn)}
.feats{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px;font-size:13px;color:var(--ink-3)}.feats span{display:inline-flex;gap:5px;align-items:center}.feats span.on{color:var(--ink)}.feats span.on .ic{color:var(--good)}
.payqr{width:220px;height:220px;image-rendering:pixelated;border:1px solid var(--line);border-radius:8px;background:#fff;padding:6px}
.paycode{font-size:12px;max-width:100%;max-height:96px;overflow:auto;text-align:left}
a.btnlink{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 12px;border:1px solid var(--line-2);border-radius:6px;color:var(--ink);text-decoration:none;font-weight:500}a.btnlink:hover{background:var(--surface-2)}

/* ---- página de pagamento com cartão (/pagar/cartao) */
body.paypage{overflow:auto;min-height:100vh}
.pp{max-width:560px;margin:0 auto;padding:16px 16px 40px;display:flex;flex-direction:column;gap:12px}
.pp-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.pp-back{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);text-decoration:none;font-weight:500;min-height:36px}
.pp-back:hover{color:var(--ink)}
.pp-lock{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--good);font-weight:600}
.pp form,.pp #f{display:flex;flex-direction:column;gap:12px}
.pp .panel h3{margin-bottom:12px}
.pp-sum{text-align:center}
.pp-cn{position:relative}.pp-cn input{padding-right:120px}.pp-cn .chip{position:absolute;right:8px;top:50%;transform:translateY(-50%)}
.pp-3{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.pp-auto{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface-2);cursor:pointer;line-height:1.4}
.pp-auto input{margin-top:2px}
.pp-go{min-height:46px;font-size:15px;width:100%}
.pp-foot{text-align:center;margin:0}
.pp-ok{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 18px}
.pp-ok.hide{display:none}
.pp-okic{width:44px;height:44px;padding:10px;border-radius:50%;background:var(--good-bg);color:var(--good);stroke-width:2.5}
.pp-ok h2{margin:4px 0 0;font-size:18px}.pp-ok p{margin:0 0 8px}
/* forma de pagamento na central */
.paymeth{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.paymeth .pm-ic{width:36px;height:36px;border-radius:8px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex:none}
.pmopts{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:12px}
.pmopt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;white-space:normal;padding:12px 14px;min-height:0;height:auto;border-radius:8px}
.pmopt b{font-weight:600}.pmopt .small{font-weight:400}
@media (max-width:600px){.pmopts{grid-template-columns:1fr}}
a.btnlink.pri{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:600}a.btnlink.pri:hover{background:var(--brand-strong)}
.sech{font-size:15px;font-weight:600;margin:6px 0 10px;color:var(--ink)}
/* ---- minha conta (dashboard do cliente) */
.acc-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:12px;margin-bottom:12px;align-items:start}
.ap-top{display:flex;align-items:flex-start;gap:12px}
.ap-name{font-size:22px;font-weight:650;line-height:1.25;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ap-price{text-align:right;white-space:nowrap}.ap-price b{font-size:20px;font-weight:650;font-variant-numeric:tabular-nums}
.ap-use{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-bottom:6px}
.acc-pay h3{font-size:14.5px}
.ap-next{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:12px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);min-height:0;white-space:normal;font-weight:400}
.ap-next:hover{border-color:var(--brand)}
.ap-v{font-size:20px;font-weight:650;font-variant-numeric:tabular-nums;line-height:1.3}
.ap-ok{display:flex;align-items:center;gap:6px;padding:12px;border-radius:8px;background:var(--good-bg);color:var(--good);font-weight:600}
.ap-sep{height:1px;background:var(--line);margin:14px 0}
.faturas{display:flex;flex-direction:column}
.fatrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:10px 4px;min-height:0;white-space:normal;font-weight:400}
.fatrow:last-child{border-bottom:0}.fatrow:hover{background:var(--surface-2)}
.fatrow b{font-weight:600}.fat-v{font-variant-numeric:tabular-nums;font-weight:500;min-width:84px;text-align:right}
.acc-help{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.payopts{display:flex;flex-direction:column;gap:8px}.payopts button{width:100%;min-height:42px}
.planlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.plancard{display:flex;flex-direction:column;align-items:stretch;gap:4px;text-align:left;white-space:normal;padding:14px;border-radius:8px;min-height:0;font-weight:400}
.plancard.on{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 30%,transparent)}
.plancard.cur{opacity:1;background:var(--surface-2);cursor:default}
.plancard b{font-weight:650}.pc-price{font-size:18px;font-weight:650;font-variant-numeric:tabular-nums}
@media (max-width:860px){.acc-grid{grid-template-columns:1fr}.ap-use{grid-template-columns:1fr}.fatrow{gap:8px}.fatrow>.ic{display:none}.fat-v{min-width:0}}
.fatgrp+.fatgrp{margin-top:14px}
.fatlbl{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin:2px 4px 2px}
.fatrow.open b{color:var(--ink)}
.fat-go{font-size:12.5px;font-weight:600;color:var(--brand-ink);background:var(--brand);border-radius:6px;padding:4px 12px}
.fatrow:hover .fat-go{background:var(--brand-strong)}
@media (max-width:600px){.fatrow.open .chip.warn{display:none}}
.lickey{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 6px 6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);margin-bottom:14px;max-width:100%}
.lickey code{font:600 13px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;word-break:break-all}
.irow .lickey{margin:0}
.lickey{flex-wrap:nowrap}.lickey .ic,.lickey button{flex:none}
@media (max-width:600px){.lickey>.small{display:none}.lickey code{font-size:12px;letter-spacing:0;word-break:normal;white-space:nowrap}}
/* ---- 2ª etapa do login */
.l2fa form{display:flex;flex-direction:column;gap:14px}
.l2code{font:600 22px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.3em;text-align:center}
.l2qr{width:190px;height:190px;align-self:center;background:#fff;padding:8px;border-radius:8px;border:1px solid var(--line)}
.l2steps{margin:0;padding-left:20px;display:grid;gap:4px;color:var(--ink-2)}
.l2key{display:block;margin-top:6px;font-size:13px;word-break:break-all;user-select:all}
.l2links{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}.l2links button{font-size:12.5px}
.l2rec{display:grid;grid-template-columns:1fr 1fr;gap:6px}.l2rec code{font:600 14px/1.6 ui-monospace,Menlo,Consolas,monospace;text-align:center;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:4px}
/* ---- segurança e perfis */
.secline{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.secline .grow{min-width:180px}.secline b{font-weight:600}
.secic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none}
.secic.ok{background:var(--good-bg);color:var(--good)}.secic.no{background:var(--warn-bg);color:var(--warn)}
.deptchk{display:flex;flex-wrap:wrap;gap:6px 14px}.chkl{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;cursor:pointer}
.perfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:12px;align-items:start}
.perflist{display:grid;gap:4px;margin-top:8px}.perflist .ic{color:var(--good)}
.permgrp{margin-bottom:10px}.permrow{display:flex;gap:10px;align-items:flex-start;padding:7px 4px;border-radius:6px;cursor:pointer}
.permrow:hover{background:var(--surface-2)}.permrow input{margin-top:3px}.permrow b{font-weight:600;font-size:13.5px}
.acctb tr.bad td{background:color-mix(in srgb,var(--bad) 7%,transparent)}
.tb tr.off td{opacity:.55}

/* ---- tela de entrada: painel da marca (sempre escuro) + formulário */
#login .hero{position:relative;overflow:hidden;color:#dbe6f3;padding:40px 56px;display:flex;flex-direction:column;gap:28px;
  background:radial-gradient(1200px 600px at 110% -10%,#2b74c9 0%,transparent 55%),radial-gradient(900px 500px at -20% 120%,#0f8a7a 0%,transparent 50%),linear-gradient(160deg,#0b1d33 0%,#0a1424 60%,#08101c 100%)}
#login .hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,#000 0%,transparent 85%);pointer-events:none}
#login .hero>*{position:relative}
#login .brandmark,#login .mbrand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;color:#fff;letter-spacing:-.01em}
#login .brandmark img,#login .mbrand img{width:34px;height:34px;border-radius:9px}
#login .brandmark span{font-weight:400;color:#9fc3ea}
#login .mbrand{display:none;color:var(--ink);font-size:16px}#login .mbrand span{font-weight:400;color:var(--ink-3)}
#login .hmain{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;max-width:560px}
#login .hk{align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8fd3c7;background:rgba(143,211,199,.1);border:1px solid rgba(143,211,199,.25);padding:4px 10px;border-radius:999px}
#login .hero h2{font-size:clamp(26px,2.6vw,36px);line-height:1.15;margin:0;font-weight:700;color:#fff;letter-spacing:-.02em}
#login .hero h2 em{font-style:normal;background:linear-gradient(90deg,#7cc0ff,#7ee0cf);-webkit-background-clip:text;background-clip:text;color:transparent}
#login .hero p{margin:0;font-size:15px;line-height:1.6;color:#a9bbcf;max-width:500px}
/* demonstração de conversa */
.hdemo{position:relative;margin:10px 0 6px;max-width:400px;padding:14px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 60px -20px rgba(0,0,0,.6);backdrop-filter:blur(6px)}
.hd-top{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:10px}
.hd-top b{display:block;color:#fff;font-size:13.5px}.hd-top small{color:#8ea3ba;font-size:11.5px}
.hd-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;background:#c2557a;flex:none}
.hd-chip{margin-left:auto;font-size:11px;font-weight:600;color:#7ee0cf;background:rgba(126,224,207,.12);border-radius:999px;padding:2px 8px}
.hd-msgs{display:flex;flex-direction:column;gap:7px;min-height:226px}
.hd-msgs .m{max-width:82%;font-size:13px;line-height:1.4;padding:7px 10px;border-radius:12px;opacity:0;transform:translateY(8px);animation:hdIn .45s ease forwards;animation-delay:var(--d)}
.hd-msgs .in{align-self:flex-start;background:rgba(255,255,255,.1);color:#e7eef6;border-bottom-left-radius:4px}
.hd-msgs .out{align-self:flex-end;background:#1d5fa8;color:#fff;border-bottom-right-radius:4px}.hd-msgs .out b{color:#fff}
.hd-msgs .pix{display:flex;gap:9px;align-items:center;background:#174c88}.hd-msgs .pix .ic{width:22px;height:22px;color:#7ee0cf}
.hd-msgs .pix small{display:block;color:#a9c8ea;font-size:11px}
.hd-msgs .sys{align-self:center;max-width:100%;display:flex;gap:6px;align-items:center;font-size:11.5px;color:#7ee0cf;background:rgba(126,224,207,.1);border-radius:999px;padding:4px 10px}
.hd-msgs .sys .ic{width:14px;height:14px}
.hd-float{position:absolute;display:flex;gap:9px;align-items:center;padding:9px 12px;border-radius:12px;background:#0f2035;border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 30px -10px rgba(0,0,0,.6);font-size:12.5px;color:#dbe6f3;opacity:0;animation:hdIn .5s ease forwards,hdFloat 6s ease-in-out infinite}
.hd-float b{display:block;color:#fff}.hd-float small{color:#8ea3ba;font-size:11.5px}.hd-float .ic{width:20px;height:20px;color:#7cc0ff;flex:none}
.hd-float.f1{right:-252px;top:18px;animation-delay:1.4s,1.9s}
.hd-float.f2{right:-232px;bottom:30px;animation-delay:4.4s,4.9s}.hd-float.f2 .ic{color:#7ee0cf}
@keyframes hdIn{to{opacity:1;transform:none}}
@keyframes hdFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.hfeat{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;max-width:560px}
.hfeat li{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#a9bbcf;line-height:1.4}
.hfeat b{display:block;color:#fff;font-size:13.5px;font-weight:600}
.hfeat .ic{width:30px;height:30px;padding:6px;border-radius:8px;background:rgba(124,192,255,.12);color:#7cc0ff;flex:none}
#login .hfoot{font-size:12px;color:#6f8399}
#login .lsafe{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--ink-3)}
@media (max-width:1400px){.hd-float{display:none}}
@media (prefers-reduced-motion:reduce){.hd-msgs .m,.hd-float{animation:none;opacity:1;transform:none}}
@media (max-width:860px){#login .hero{display:none}#login .mbrand{display:flex}#login .box{align-items:flex-start;padding-top:40px}}
@media (max-width:1100px) and (min-width:861px){#login .hero{padding:32px}.hfeat{grid-template-columns:1fr}}
#login .box{border:0;border-radius:0;background:transparent}
.hd-msgs .m{border:0;box-shadow:none}
@media (max-height:960px){#login .hfoot{display:none}#login .hero{gap:20px}}
@media (max-height:780px){#login .hfeat{display:none}}
.l2trust{display:flex!important;flex-direction:row!important;gap:10px!important;align-items:flex-start;font-weight:400!important;cursor:pointer;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
.l2trust input{margin-top:2px}.l2trust span{display:grid;gap:2px;color:var(--ink);font-size:13.5px;font-weight:600}.l2trust small{font-weight:400;color:var(--ink-3);font-size:12px}
#login #lforgot{justify-self:center;font-size:12.5px;min-height:28px}
.cv{max-width:440px;padding-top:48px}.cvb{display:flex;margin-bottom:6px;font-size:17px;font-weight:700;gap:10px;align-items:center}.cvb img{width:32px;height:32px;border-radius:8px}.cvb span{font-weight:400;color:var(--ink-3)}
.cvh{font-size:20px;margin:0 0 6px}.cv form{display:flex;flex-direction:column;gap:6px}.cv .mut{margin:0 0 10px}
.devlist{display:grid;gap:4px;margin:-4px 0 6px 40px}.devrow{display:flex;align-items:center;gap:8px;font-size:13px}.devrow small{color:var(--ink-3)}
/* ---- editar atendente */
.ud{display:grid;gap:18px}.ud-sec{display:grid;gap:6px}.ud-sec>.fatlbl{margin:0 0 2px}
.df button.danger-t:first-child{margin-right:auto}
.dp{border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:var(--surface)}
.dp-q{border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important}
.dp-list{max-height:248px;overflow:auto;padding:4px}
.dp-row{display:flex;align-items:center;gap:8px;padding:2px 6px;border-radius:6px;min-height:38px}
.dp-row:hover{background:var(--surface-2)}.dp-row.on{background:color-mix(in srgb,var(--brand) 8%,transparent)}
.dp-chk{display:flex;align-items:center;gap:10px;flex:1;cursor:pointer;font-size:13.5px;padding:6px 0}
.dp-pri{min-height:26px;padding:2px 10px;font-size:12px;border-radius:999px;border-color:transparent;background:transparent;color:var(--ink-3)}
.dp-pri:hover{border-color:var(--line-2);color:var(--ink)}
.dp-pri.is{background:var(--brand);color:var(--brand-ink);border-color:var(--brand);font-weight:600;cursor:default}
.dp-sum{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid var(--line);background:var(--surface-2)}.dp-sum>span{flex:1}
/* ---- ajustes do atendimento */
.ajnav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;position:sticky;top:0;z-index:2;padding:6px 0;background:var(--bg)}
.ajnav .chip{cursor:pointer;min-height:28px;padding:3px 10px;font-size:12.5px}
.ajsec{margin-bottom:12px;scroll-margin-top:52px}.ajsec h3{margin-bottom:6px}
.ajrow{display:flex;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.ajrow:first-of-type{border-top:0}.ajrow b{font-weight:600;font-size:13.5px}.ajrow .grow{min-width:0}
.ajsel{width:auto;max-width:320px;min-width:200px}.ajtxt{max-width:380px}textarea.ajtxt{min-width:300px}
.ajnum{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.ajnum input{width:90px}
.ajsave{display:inline-flex;align-items:center;gap:4px;min-width:70px;justify-content:flex-end}.ajsave .ic{color:var(--good)}
.ajnote{display:flex;align-items:center;gap:4px;padding-top:10px;border-top:1px solid var(--line);flex-wrap:wrap}
.tagpick{display:flex;flex-wrap:wrap;gap:6px}.tagpick .chip{cursor:pointer;min-height:28px;padding:3px 10px}
#tolbar{margin:6px 8px;cursor:pointer}
.item.sla-mid{box-shadow:inset 3px 0 0 #f2a516}.item.sla-hot{box-shadow:inset 3px 0 0 var(--bad)}
.item.lc-in{background:color-mix(in srgb,var(--warn) 9%,transparent)}.item.lc-out{background:color-mix(in srgb,var(--brand) 7%,transparent)}
@media (max-width:860px){.ajrow{flex-wrap:wrap;gap:8px}.ajrow>.grow{flex-basis:100%}.ajsel,.ajtxt,textarea.ajtxt{min-width:0;max-width:none;width:100%}}
html{background:var(--bg)}
.ajtabs{overflow-x:auto;scrollbar-width:none}.ajtabs::-webkit-scrollbar{display:none}.ajtabs button{white-space:nowrap}
.qcard .row{min-width:0}.qcard .row>b{min-width:0}.qcard .row>button{flex:none}
.chsteps{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--ink-2)}.wqr .l2qr{align-self:center}
.cnauto .ic{vertical-align:-2px}
/* ---------- Automações ---------- */
.aulist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr));gap:14px}
.aucard{display:grid;gap:10px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.aucard:hover{border-color:var(--line-2);box-shadow:0 4px 16px rgba(0,0,0,.06)}.aucard.off{opacity:.72}
.auhead{display:flex;gap:12px;align-items:center}.auico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);flex:none}
.auico.main{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
.aurow{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--ink-2)}.aurow>.ic{margin-top:3px;color:var(--ink-3);flex:none}
.auchip{display:inline-flex;gap:5px;align-items:center;padding:2px 9px 2px 6px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;background:var(--surface-2)}
.aufoot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}.aufoot .ghost.icon{margin-left:auto}
.dotlive{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;margin-right:2px;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}
.auconf{display:grid;gap:4px}.auset{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line)}.auset:first-child{border-top:0;padding-top:2px}
.aunum{width:28px;height:28px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.auttl{display:block;font-size:14.5px;margin:3px 0 8px}
.aupick{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:8px}
.aupk{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);white-space:normal;min-height:52px}
.aupk.on{border-color:var(--brand);background:var(--brand-soft)}.aucheck{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-2);display:grid;place-items:center;flex:none}
.aupk.on .aucheck{background:var(--brand);border-color:var(--brand);color:#fff}
.auopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:8px}
.auopt{display:flex;gap:12px;align-items:center;text-align:left;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);white-space:normal}
.auopt.on{border-color:var(--brand);background:var(--brand-soft)}.auoi{font-size:22px}
.auweek{display:grid;gap:6px}.auday{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:8px}
.auday.off{background:var(--surface-2)}.audn{width:62px}.aufx{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.aupar{display:inline-flex;gap:6px;align-items:center}.autm{width:auto;padding:5px 7px}
/* editor (mapa) */
.flhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.fltip{display:flex;gap:6px;align-items:center;margin:0 0 8px;flex-wrap:wrap}
.fl{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}.fl.open{grid-template-columns:minmax(0,1fr) 380px}
.flcanvas{overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface);background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:18px 18px;height:calc(100dvh - 190px);min-height:340px}
.flin{position:relative}.flsvg{position:absolute;inset:0;pointer-events:none}.fle{fill:none;stroke-width:2.2;opacity:.75}
.flc{position:absolute;width:228px;height:50px}
.flcb{width:100%;height:100%;display:flex;gap:9px;align-items:center;text-align:left;padding:6px 10px 6px 8px;border:1px solid var(--line-2);border-left:4px solid var(--br);border-radius:10px;background:var(--surface);white-space:normal;min-height:0;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.flcb:hover{border-color:var(--br);border-left-width:4px}
.flcb b{font-weight:600;font-size:13px}.flc .ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flci{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--br) 14%,transparent);color:var(--br)}
.flc.t-handoff .flci{color:var(--warn);background:color-mix(in srgb,var(--warn) 15%,transparent)}.flc.t-close .flci{color:var(--bad);background:color-mix(in srgb,var(--bad) 13%,transparent)}
.flc.t-fatura .flci{color:var(--good);background:color-mix(in srgb,var(--good) 15%,transparent)}
.flc.ini .flcb{border-left-color:var(--brand);background:var(--brand-soft)}
.flc.ref .flcb{border-style:dashed;background:var(--surface-2)}.flc.sel .flcb{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}.flc.solto .flcb{border-color:var(--warn)}
.flc .via{position:absolute;top:-18px;left:4px;font-size:11px;font-weight:600;color:var(--br);max-width:220px;line-height:16px}
.fladd,.flfold{position:absolute;top:50%;transform:translateY(-50%);width:22px;height:22px;min-height:0;padding:0;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;border:1px solid var(--line-2);background:var(--surface)}
.fladd{right:-11px;opacity:0;color:var(--brand);border-color:var(--brand)}.flc:hover .fladd,.flc.sel .fladd{opacity:1}
.flfold{right:18px;top:auto;bottom:-11px;transform:none;color:var(--ink-3);width:auto;padding:0 6px;border-radius:999px;height:18px}.flc:not(:hover) .flfold:not(:empty){opacity:.7}
.flp{border:1px solid var(--line);border-radius:12px;background:var(--surface);position:sticky;top:0;height:calc(100dvh - 190px);min-height:340px;display:flex;flex-direction:column;overflow:hidden}
.flph{display:flex;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}.flpb{padding:14px;overflow:auto;display:grid;gap:12px;align-content:start}
.flpi{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.flpi.t-handoff{color:var(--warn)}.flpi.t-close{color:var(--bad)}.flpi.t-fatura{color:var(--good)}
.flsec{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);margin-top:4px}
.flopts{display:grid;gap:8px}.flopt{display:flex;gap:8px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.flnum{width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none;margin-top:6px}
.flsw{gap:10px;align-items:flex-start}.flsw .switch{margin-top:2px}
.flimgadd{display:grid;justify-items:center;gap:4px;width:100%;padding:16px;border:1.5px dashed var(--line-2);border-radius:10px;background:transparent;white-space:normal;color:var(--ink-2)}
.flimgadd:hover{border-color:var(--brand);color:var(--brand)}.flimgv{display:grid;gap:6px;justify-items:start}.flimgv img{max-width:100%;max-height:180px;border-radius:8px;border:1px solid var(--line)}
.waimg{max-width:100%;border-radius:8px;margin-bottom:6px;display:block}
.sim{display:flex;flex-direction:column;height:min(560px,70dvh);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.simtop{display:flex;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.simc{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:6px;background:var(--surface-2);background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:16px 16px}
.simb{max-width:82%;padding:8px 11px;border-radius:12px;white-space:pre-wrap;word-wrap:break-word;font-size:13.5px}
.simb.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:4px}
.simb.me{align-self:flex-end;background:#d9fdd3;color:#111;border-bottom-right-radius:4px}
.simb.sys{align-self:center;background:var(--brand-soft);color:var(--brand);font-size:12.5px;font-weight:600;border-radius:999px;padding:5px 12px}
.simimg{max-width:220px;border-radius:8px;display:block}
.simo{display:flex;gap:6px;flex-wrap:wrap;padding:10px;border-top:1px solid var(--line);background:var(--surface)}.simo:empty{display:none}
@media (max-width:900px){.fl.open{grid-template-columns:1fr}.flp{position:static;height:auto;max-height:none}.flcanvas{height:60dvh}.hidem{display:none}}
.tkchip{cursor:pointer;color:var(--brand);font-weight:600}.tkchip:hover{text-decoration:underline}
.tkchip.mut{color:inherit;font-weight:400}.tk.open{border-left:3px solid var(--warn);padding-left:8px}.tk.this{background:var(--brand-soft);border-radius:6px}
.recbar{display:flex;align-items:center;gap:12px;padding:6px 8px 6px 10px;border:1px solid var(--line);border-radius:28px;background:var(--surface)}
.recdot.off{animation:none;opacity:.35}.recwave{width:220px;height:32px;max-width:40vw}.recbar .recp,.recbar .recp:hover{color:var(--bad)!important}
.recsend{width:44px;height:44px;min-height:0;padding:0;border-radius:50%;border:0;background:#25d366;color:#fff;display:grid;place-items:center}.recsend:hover{background:#1ebe5a}.recsend .ic{width:20px;height:20px}
.recdot{width:10px;height:10px;border-radius:50%;background:var(--bad);animation:pulse 1s infinite}.rect{font-variant-numeric:tabular-nums}
.erphead{display:flex;gap:12px;align-items:center}.erprec{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:6px 14px;margin-top:8px}
.erprec span{display:flex;gap:6px;align-items:center;font-size:13px}.erprec .ic{color:var(--good);flex:none}
.ctlgrid{display:grid;gap:8px;margin-top:12px}.ctlrow{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:8px;align-items:center}
.ctlrow code{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:5px 8px;overflow-wrap:anywhere;font-size:12.5px}
.selbar{display:flex;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--line)}.selbar .sm.on{background:var(--brand-soft);color:var(--brand);border-color:var(--brand)}
.item{position:relative}.item.sel{background:var(--brand-soft)}
.selck{position:absolute;left:8px;top:50%;transform:translateY(-50%);z-index:2;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;background:var(--surface)}
#list.selmode .item{padding-left:36px}
.selck.on{background:var(--brand);border-color:var(--brand);color:#fff}
#cp .none.bulk{max-width:none;width:100%;display:grid;place-items:center;text-align:left}.bulkcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:0 8px 30px rgba(0,0,0,.08);width:min(620px,100%);display:grid;gap:6px;color:var(--ink);text-align:left}
.bulkt{font-size:17px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}.bulkn{background:var(--brand);color:#fff;border-radius:999px;min-width:24px;height:24px;display:inline-grid;place-items:center;font-size:13px;padding:0 6px}
.bulkacts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
@media (max-width:700px){.bulkacts{grid-template-columns:1fr 1fr}}
.bulkacts button{border:0;border-radius:10px;padding:11px 10px;font-weight:650;color:#fff;display:flex;gap:6px;align-items:center;justify-content:center}
.bulkacts button.bk-blue{background:#2f86d8;color:#fff}.bulkacts button.bk-red{background:#e5484d;color:#fff}.bulkacts button.bk-green{background:#1f9d4c;color:#fff}
.bulkacts button.bk-white{background:var(--surface);color:var(--ink);border:1px solid var(--line-2)}
.bulkacts button{transition:filter .15s,transform .15s,box-shadow .15s}
.bulkacts button:hover{filter:brightness(.92);box-shadow:0 4px 12px rgba(0,0,0,.12);transform:translateY(-1px)}
.bulkacts button.bk-blue:hover{background:#2f86d8;color:#fff}.bulkacts button.bk-red:hover{background:#e5484d;color:#fff}.bulkacts button.bk-green:hover{background:#1f9d4c;color:#fff}
.bulkacts button.bk-white:hover{background:var(--surface);color:var(--ink);filter:none;border-color:var(--brand)}
.bulkacts button:active{transform:none}
.bulkerr{margin:0;padding-left:18px;display:grid;gap:4px;font-size:13px}
.closetogs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.closetog{display:flex;gap:10px;align-items:center;padding:12px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line)}
@media (max-width:600px){.closetogs{grid-template-columns:1fr}}

/* etiquetas coloridas (Ajustes › Etiquetas) */
.chip.etq{background:color-mix(in srgb,var(--tc) 14%,transparent);color:color-mix(in srgb,var(--tc) 75%,var(--ink));border:1px solid color-mix(in srgb,var(--tc) 40%,transparent);font-weight:600}
.chip.etq.off{background:transparent;color:var(--ink-2);border-color:var(--line-2);font-weight:500}
.chip.etq.off::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tc);flex:none}
button.chip.etq{cursor:pointer;min-height:28px;padding:3px 10px}button.chip.etq:hover{border-color:var(--tc)}
.etqgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}@media (max-width:980px){.etqgrid{grid-template-columns:1fr}}
.etqsec{display:grid;gap:10px}.etqn{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:var(--surface-2);font-size:12px;color:var(--ink-2);vertical-align:2px}
.etqlist{display:grid;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.etqrow{display:flex;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid var(--line)}.etqrow:first-child{border-top:0}.etqrow:hover{background:var(--surface-2)}
.etqord{display:flex;flex-direction:column}.etqord button{height:15px!important;min-height:0!important;width:22px;font-size:9px;line-height:1;padding:0!important;color:var(--ink-3)}.etqord button:disabled{opacity:.25}
.etquso{white-space:nowrap;min-width:92px;text-align:right}
.etqcores{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.etqcor{width:28px;height:28px;border-radius:50%;border:2px solid transparent;padding:0;box-shadow:inset 0 0 0 2px var(--surface)}.etqcor.on{border-color:var(--ink)}
.etqcores input[type=color]{width:34px;height:30px;padding:0 2px;border-radius:8px;cursor:pointer}
@media (max-width:600px){.etquso{display:none}}

/* variáveis ({{nome}}…) */
.varbar{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:6px}
.varchip{font-size:12px;padding:2px 8px!important;min-height:0!important;border-radius:999px;border:1px dashed var(--line-2);background:transparent;color:var(--brand);font-weight:600;cursor:pointer}
.varchip:hover{border-style:solid;border-color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,transparent)}
.varprev{white-space:pre-wrap;font-size:13px;padding:8px 10px;border-radius:10px;background:var(--surface-2);color:var(--ink-2);margin-top:4px}
code.varcode{font-size:12.5px;padding:2px 6px;border-radius:6px;background:var(--surface-2);color:var(--brand);white-space:nowrap}
.ajtxtw{display:grid;min-width:min(420px,100%)}
.tplvar{display:grid;grid-template-columns:auto 1fr 1fr;gap:10px;align-items:end;padding:10px;border:1px solid var(--line);border-radius:10px}.tplvar code{align-self:center}.tplvar .field,.tplvar>div{margin:0}
@media (max-width:640px){.tplvar{grid-template-columns:1fr}}
/* novo modelo da Meta: formulário + prévia no estilo WhatsApp */
dialog.wide:has(.tplgrid){width:min(1060px,96vw)}
.tplgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
.tplside{position:sticky;top:0}
.wapv{border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.wapv-top{background:#1f7a62;color:#fff;display:flex;gap:8px;align-items:center;padding:10px 12px;font-size:14px}
.wapv-chat{background:#e9e1d6;min-height:180px;padding:14px 12px;background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:14px 14px}
.wapv-bal{background:#fff;color:#111b21;border-radius:0 10px 10px 10px;padding:8px 10px 18px;max-width:94%;position:relative;font-size:14px;line-height:1.4;white-space:pre-wrap;word-break:break-word;box-shadow:0 1px 1px rgba(0,0,0,.12)}
.wapv-bal .mut{color:#8696a0}
.wapv-foot{color:#8696a0;font-size:12.5px;margin-top:6px}
.wapv-hora{position:absolute;right:8px;bottom:3px;font-size:11px;color:#8696a0}
.tplcont{font-size:12px;color:var(--ink-3)}
.tplerr{color:var(--bad,#dc2626);font-size:12.5px;display:grid;gap:2px;margin-top:4px}.tplerr:empty{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .wapv-chat{background-color:#0b141a;background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px)}:root:not([data-theme=light]) .wapv-bal{background:#202c33;color:#e9edef}}
:root[data-theme=dark] .wapv-chat{background-color:#0b141a;background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px)}:root[data-theme=dark] .wapv-bal{background:#202c33;color:#e9edef}
@media (max-width:900px){.tplgrid{grid-template-columns:1fr}.tplside{position:static;order:-1}}
.tplinfo{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--brand) 9%,transparent);color:var(--ink-2);font-size:13px}
.hrsuso{margin:4px 0 0;padding-left:18px;display:grid;gap:2px}
/* aba Clientes */
.clipage{max-width:1180px;width:100%;box-sizing:border-box;margin:0 auto;padding:22px 22px 40px}
.clitop{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:4px 0 14px}.clitop .search{flex:1 1 280px;max-width:420px}
.clitop .fchip b{font-weight:700;opacity:.7;margin-left:2px}
.clilist{display:grid;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.clirow{display:grid;grid-template-columns:minmax(190px,1.2fr) minmax(170px,1.2fr) minmax(80px,.7fr) 100px 370px;gap:12px;align-items:center;padding:10px 14px;border-top:1px solid var(--line)}
.clirow:first-child{border-top:0}.clirow:hover{background:var(--surface-2)}
.cliwho{display:flex;gap:10px;align-items:center;min-width:0}.clisit{min-width:0}.clitags{display:flex;gap:4px;flex-wrap:wrap}
.cliacts{display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-wrap:nowrap}
.clicand{display:block;text-align:left;width:100%;padding:10px 12px}
@media (max-width:900px){.clirow{grid-template-columns:1fr auto;grid-template-areas:"who acts" "sit sit" "tags ult"}.cliwho{grid-area:who}.cliacts{grid-area:acts}.clisit{grid-area:sit}.clitags{grid-area:tags}.cliult{grid-area:ult;text-align:right}.clipage{padding:14px 12px 30px}}
/* ligação pelo WhatsApp tocando / em andamento */
.ligpop{display:flex;align-items:center;gap:12px;width:min(380px,calc(100vw - 24px));padding:12px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.22);animation:ligin .25s ease-out}
.ligpop.emcurso{border-color:#1f9d4c}
@keyframes ligin{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.ligava{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#1f9d4c;color:#fff;flex:none;animation:ligpulse 1.2s infinite}
.ligava.on{animation:none}
@keyframes ligpulse{0%{box-shadow:0 0 0 0 rgba(31,157,76,.55)}70%{box-shadow:0 0 0 14px rgba(31,157,76,0)}100%{box-shadow:0 0 0 0 rgba(31,157,76,0)}}
.ligbtn{width:42px;height:42px;min-height:0!important;padding:0!important;border-radius:50%!important;display:grid;place-items:center;border:0!important;color:#fff!important;flex:none}
.ligbtn.ok,.ligbtn.ok:hover{background:#1f9d4c!important}.ligbtn.fim,.ligbtn.fim:hover,.ligbtn.ign,.ligbtn.ign:hover{background:#e5484d!important}
.ligbtn.fim svg{transform:rotate(135deg)}.ligbtn.mute,.ligbtn.mute:hover{background:var(--surface-2)!important;color:var(--ink)!important}.ligbtn.mute.off{background:#e5484d!important;color:#fff!important}
.ligbtn:hover{filter:brightness(.92)}
@media (max-width:600px){.ligpop{right:12px;left:12px;bottom:12px;width:auto}}
button.ligar-t{color:#1f9d4c;border-color:color-mix(in srgb,#1f9d4c 45%,var(--line))}button.ligar-t:hover{background:color-mix(in srgb,#1f9d4c 10%,transparent);color:#1f9d4c}
/* custos da Meta */
.cstgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:6px}
.cstcard{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:2px}
.cstv{font-size:22px;font-weight:750;letter-spacing:-.01em}.cstv.big{font-size:20px}
.cstsim{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}@media (max-width:900px){.cstsim{grid-template-columns:1fr}}
.cstq{display:flex;justify-content:space-between;align-items:center;gap:10px}.cstq>span{font-size:14px}
.cstin{display:flex;align-items:center;gap:8px}.cstin input{width:120px;text-align:right}
.cstres{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface-2)}
.cstrow{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px dashed var(--line)}.cstrow.tot{border-bottom:0;padding-top:10px}
.ligrow{grid-template-columns:minmax(190px,1.3fr) minmax(170px,1.2fr) 100px 90px 280px}@media (max-width:900px){.ligrow{grid-template-columns:1fr auto}}
.ligbtn.rec,.ligbtn.rec:hover{background:var(--surface-2)!important}.recdot{width:12px;height:12px;border-radius:50%;background:#e5484d;opacity:.45}
.ligbtn.rec.on .recdot{opacity:1;animation:recpisca 1.2s infinite}@keyframes recpisca{50%{opacity:.25}}
.ligplay{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:4px 0 2px 34px}.ligplay audio{flex:1;max-width:520px;height:34px}
#ligpop{position:fixed;right:18px;bottom:18px;z-index:9999}
.ligfila{position:fixed;right:18px;bottom:18px;z-index:9998;display:flex;flex-direction:column-reverse;gap:10px;pointer-events:none}.ligfila>*{pointer-events:auto}
.ligmais{align-self:flex-end;padding:4px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:0 4px 14px rgba(0,0,0,.12)}
@media (max-width:600px){#ligpop,.ligfila{right:12px;left:12px;bottom:12px}}
.erprow{grid-template-columns:minmax(220px,1.6fr) 100px 130px minmax(150px,1fr) 260px}@media (max-width:900px){.erprow{grid-template-columns:1fr auto}}
.linkbtn{background:none!important;border:0!important;padding:0!important;min-height:0!important;color:inherit;cursor:pointer;text-align:left;font:inherit}.linkbtn:hover{text-decoration:underline}
.histlist{display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden;max-height:60vh;overflow-y:auto}
.histrow{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;background:var(--surface);width:100%;min-height:0!important}
.histrow:first-child{border-top:0!important}.histrow:hover{background:var(--surface-2)}
.cliico{width:34px;height:34px;min-height:0!important;padding:0!important;border-radius:50%!important;display:inline-grid;place-items:center;border:1px solid var(--line-2)}
.cliico.chat{color:#2f86d8}.cliico.lig{color:#1f9d4c}.cliico.chat:hover{background:color-mix(in srgb,#2f86d8 12%,transparent);color:#2f86d8}.cliico.lig:hover{background:color-mix(in srgb,#1f9d4c 12%,transparent);color:#1f9d4c}
.cliico:disabled{opacity:.35;cursor:not-allowed}
.erprow{grid-template-columns:minmax(220px,1.6fr) 100px 130px minmax(150px,1fr) 220px}
.cliico.hist{color:var(--ink-2)}.cliico.hist:hover{background:var(--surface-2)}
.clifilt{display:flex;align-items:center;gap:8px;margin:6px 10px;box-sizing:border-box;max-width:calc(100% - 20px);padding:7px 10px;border-radius:10px;background:color-mix(in srgb,var(--brand) 10%,transparent);color:var(--ink);font-size:13px}
.erprow{grid-template-columns:minmax(220px,1.6fr) 100px 130px minmax(150px,1fr) 210px}
.fdatas{display:grid;gap:6px;margin-top:2px}.fdlin{display:grid;grid-template-columns:30px 1fr 140px;gap:8px;align-items:center}
/* camada superior (popover): tira o visual padrão do navegador */
#toasts[popover],#ligpop[popover],#ligfila[popover]{inset:auto;margin:0;border:0;padding:0;background:transparent;overflow:visible;color:inherit}
#toasts[popover]{left:50%;bottom:20px;transform:translateX(-50%)}
/* Safari (iPhone) estica o popover até o topo da tela: posição e tamanho sempre explícitos, e cada aviso só do tamanho do texto */
#toasts,#toasts[popover],#toasts:popover-open{top:auto!important;right:auto!important;height:auto!important;min-height:0!important;max-height:none!important;width:max-content!important;max-width:min(440px,92vw)!important;align-content:end;grid-auto-rows:max-content}
#toasts .toast{height:auto;align-self:end}
#ligpop[popover],#ligfila[popover]{top:auto!important;height:auto!important;min-height:0!important;max-height:80vh}#ligpop[popover],#ligfila[popover]{right:18px;bottom:18px}
#ligpop[popover]{background:var(--surface);border:1px solid var(--line);padding:12px 14px}#ligpop.emcurso[popover]{border-color:#1f9d4c}
#toasts:empty{display:none}
@media (max-width:600px){#toasts[popover]{bottom:calc(72px + env(safe-area-inset-bottom))}#ligpop[popover],#ligfila[popover]{right:12px;left:12px;bottom:12px}}
/* cadastro de interessado (igual ao sistema de gestão: seções que abrem e fecham) */
.isec{border:1px solid var(--line);border-radius:10px;padding:0 12px 10px}.isec>summary{cursor:pointer;font-weight:700;font-size:13px;padding:9px 0;color:var(--ink-2);list-style:none;display:flex;align-items:center;gap:6px}
.isec>summary::before{content:"▸";transition:transform .15s}.isec[open]>summary::before{transform:rotate(90deg)}.isec>summary::-webkit-details-marker{display:none}
.igrid{display:grid;grid-template-columns:110px minmax(0,1fr) 100px minmax(0,1fr);gap:8px 10px;align-items:center}.iw{grid-column:2 / -1}
.icl{font-size:13px;color:var(--ink-2)}.icl .req{color:#e5484d}
.iplano{display:grid;grid-template-columns:130px minmax(0,1fr) 130px minmax(0,1fr);gap:6px 10px;font-size:13px}.iplano:empty{display:none}
@media (max-width:640px){.igrid,.iplano{grid-template-columns:100px minmax(0,1fr)}.iw{grid-column:2}}
/* seções que abrem e fecham (padrão das janelas com várias partes) */
details.auset.dob>summary{list-style:none;display:flex;align-items:center;gap:12px;cursor:pointer}details.auset.dob>summary::-webkit-details-marker{display:none}
details.auset.dob>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform .15s;margin-right:4px}
details.auset.dob:not([open])>summary::after{transform:rotate(-45deg)}details.auset.dob{display:block}.audob{padding:8px 0 0 44px;min-width:0}
@media (max-width:640px){.audob{padding-left:0}}
.aubusca{margin-bottom:8px}.aupick.compacto{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));max-height:300px;overflow-y:auto}.aupick.compacto .aupk{padding:8px 10px;min-height:0}
details.auset.dob>summary .auttl{margin:0}
/* ================= PADRÃO DAS TELAS ================= */
/* Secao: parte de janela que abre e fecha — título à esquerda, setinha à direita */
.secs{display:grid;gap:10px}
.sec{border:1px solid var(--line);border-radius:12px;background:var(--surface);min-width:0}
.sec>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;user-select:none;border-radius:12px}
.sec>summary::-webkit-details-marker{display:none}
.sec>summary:hover{background:var(--surface-2)}
.sec-t{flex:1;min-width:0;font-size:14px;font-weight:650;color:var(--ink)}
.sec>summary::after{content:"";width:7px;height:7px;flex:none;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);margin:-3px 4px 0 0;transition:transform .15s}
.sec:not([open])>summary::after{transform:rotate(-45deg);margin-top:0}
.sec-c{padding:2px 14px 14px;display:grid;gap:10px;min-width:0}
.sec-ajuda{font-size:12.5px;color:var(--ink-3);line-height:1.45;margin-top:-2px}
/* Liga: chave liga/desliga com texto */
.liga{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:14px;line-height:1.35}.liga .switch{flex:none;margin-top:1px}
/* ListaMulti: escolha de vários itens, compacta */
.lmulti{border:1px solid var(--line);border-radius:10px;overflow:hidden;min-width:0}
.lm-topo{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--surface-2);flex-wrap:wrap}
.lm-busca{flex:1 1 160px;min-width:0;height:32px;padding:4px 10px}
.lm-lista{max-height:264px;overflow-y:auto}
.lm-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line);cursor:pointer;font-size:13.5px;min-width:0}
.lm-item:first-child{border-top:0}.lm-item:hover{background:var(--surface-2)}.lm-item.dis{opacity:.55;cursor:not-allowed}
.lm-item input[type=checkbox]{width:16px;height:16px;flex:none;margin:0;accent-color:var(--brand)}
.lm-item .chico{flex:none}
/* nada vaza para fora de cartões e grades */
.aucard{min-width:0;overflow:hidden}.auhead{flex-wrap:wrap;row-gap:6px}.auhead>*{min-width:0}.auhead .chip{white-space:nowrap;flex:none}
.aucard .ell,.clirow .ell{max-width:100%}
.chip{max-width:100%;box-sizing:border-box}
.auhead>div:not(.auico){flex:1 1 0}.auhead b,.auhead .small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* padrão: campos lado a lado, variável compacta, chave travada */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media (max-width:600px){.grid2{grid-template-columns:1fr}}
.varbar{display:flex;justify-content:flex-end;margin-top:4px}.varbtn{font-size:12.5px;color:var(--brand)}
.liga.trav{opacity:.75;cursor:default}
.sec-c .field{margin:0}.sec-c textarea{width:100%}
.pm[popover]{margin:0;border:1px solid var(--line);background:var(--surface);color:inherit;overflow:auto;max-height:70vh;padding:6px}
/* abas das telas de Gestão: todas iguais, à esquerda, do tamanho do texto */
#mcontent > .seg{padding:0 0 0 !important;margin-bottom:14px}
#mcontent > .seg button{flex:0 0 auto;padding:0 14px}
.kpi-go{cursor:pointer;text-align:left}.kpi-go:hover{border-color:var(--ink-3)}.kpi-go:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
/* simulador de custos: rótulo | campo | unidade sempre na mesma coluna */
.cstq{display:grid;grid-template-columns:minmax(0,1fr) 110px 62px;gap:10px;align-items:center}
.cstq .cstin{display:contents}.cstq .cstin input{width:100%}.cstq .cstin>span,.cstq .cstin>small{white-space:nowrap;font-size:12.5px;color:var(--ink-3)}
.cstgrid .cstcard{align-content:start}.cstgrid .cstv{font-size:22px;color:var(--ink)}
.cncab{align-items:center;gap:10px;margin:0 0 8px;min-height:32px}.cncab .fatlbl{margin:0 4px}
.int-plain{background:none;border:0;padding:0;box-shadow:none;display:grid;gap:14px}.int-plain>*{margin:0!important}
.paircode{font:700 32px/1.2 ui-monospace,monospace;letter-spacing:.12em;text-align:center;padding:14px;border:1px dashed var(--line-2);border-radius:12px;background:var(--surface-2)}
/* Clientes e Ligações: a página rola (antes cortava e só dava para ver diminuindo o zoom) */
#v-clients.on,#v-calls.on{display:block;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* barra de páginas (como no ERP): primeira, anterior, página X de N, próxima, última, itens por página */
.pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 12px;border-top:1px solid var(--line);background:var(--surface-2);font-size:13px;color:var(--ink-2)}
.pager button{min-width:32px;min-height:30px;padding:0 6px}.pager input{width:52px;min-height:30px;text-align:center;padding:2px 4px}
.pager select{width:auto;min-height:30px;padding:2px 26px 2px 8px}.pager .pg-tot{margin-left:auto;font-weight:600;color:var(--ink)}
.clilist-wrap{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}.clilist-wrap>.clilist{border:0;border-radius:0}
.vlista{display:grid;gap:6px;max-height:300px;overflow-y:auto}
.vitem{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--surface)}
.vitem:hover{border-color:var(--ink-3)}.vitem:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}.vitem input{width:16px;height:16px;flex:none;margin:0}
@keyframes naoFecha{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
dialog.nao-fecha{animation:naoFecha .22s ease}
.ferchips{display:flex;flex-wrap:wrap;gap:6px}.ferchip{gap:4px;padding-right:2px}.ferchip button{width:22px;height:22px;min-height:0;padding:0}
.iasim{display:flex;flex-direction:column;gap:8px;height:320px;overflow-y:auto;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.iab{max-width:78%;padding:8px 12px;border-radius:12px;white-space:pre-wrap;font-size:14px;line-height:1.45}.iab.in{align-self:flex-start;background:var(--surface);border:1px solid var(--line)}
.iab.out{align-self:flex-end;background:var(--brand-soft);color:var(--ink)}.iab.nota{background:none;border:1px dashed var(--line-2);color:var(--ink-3);font-size:12.5px}
.iablh{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-top:6px}.iablocos{display:grid;gap:8px}
.iabloco{border:1px solid var(--line);border-radius:10px;background:var(--surface)}.iabloco>summary{list-style:none;display:flex;gap:10px;align-items:center;padding:10px 12px;cursor:pointer;font-weight:600}
.iabloco>summary::-webkit-details-marker{display:none}.iabloco>summary::after{content:"";width:6px;height:6px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);margin:-3px 4px 0 0;transition:transform .15s}
.iabloco[open]>summary::after{transform:rotate(-135deg);margin-top:3px}
.iabmenu{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.iabmenu button{min-height:30px;padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:13px;font-weight:500}
.iabmenu button:hover{border-color:var(--ink-3);color:var(--ink)}.iabmenu button.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.iabmenu .iabnovo{border-style:dashed;color:var(--ink-3)}.iabcorpo{padding-top:4px}
.iabar{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line)}.iabar>i{display:block;height:100%;width:0;background:var(--brand);border-radius:99px;transition:width .6s ease}
/* visual dos blocos da IA */
.bvis{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--surface);display:grid;gap:5px;font-size:14px;line-height:1.5;max-height:460px;overflow:auto}
.bv-li{display:grid;grid-template-columns:18px 1fr;gap:6px;align-items:start}.bv-li.sub{margin-left:22px}.bv-pt{color:var(--brand);font-weight:700;text-align:center}
.bv-n{background:var(--brand-soft);color:var(--brand);border-radius:99px;font-size:12px;font-weight:700;text-align:center;line-height:18px;height:18px;margin-top:2px}
.bv-p{color:var(--ink)}.bv-sp{height:6px}.bvis b{color:var(--ink)}
.bv-falta{background:#fff3c4;color:#7a5b00;border-radius:4px;padding:0 4px;font-weight:600}.bv-conf{background:#ffe2cc;color:#9a4300;border-radius:4px;padding:0 4px;font-size:12.5px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bv-falta{background:#4a3b00;color:#ffe08a}:root:not([data-theme="light"]) .bv-conf{background:#4a2600;color:#ffc08a}}
:root[data-theme="dark"] .bv-falta{background:#4a3b00;color:#ffe08a}:root[data-theme="dark"] .bv-conf{background:#4a2600;color:#ffc08a}
/* celular: nada cortado — abas quebram linha, datas e nomes de canal cabem, canal + atendente ficam juntos no cartão */
.bcard .foot .chanwho{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;min-width:0;max-width:100%}
@media (max-width:600px){
  .seg:not(#seg){flex-wrap:wrap;overflow-x:visible}
  .seg:not(#seg) button{flex:1 0 auto;min-height:34px}
  .rrange{width:100%}.rrange input[type=date]{flex:1;min-width:128px}
  .cnrow{flex-wrap:wrap}.cnrow>.grow{flex-basis:calc(100% - 60px)}
  .cnrow b.ell,.cnrow .ell{white-space:normal;overflow:visible}
}


/* marca do produto (logo oficial Netfy Atendimento — arquivos sem alteração; proporção mantida) */
#login .brandmark img.marca,#login .mbrand img.marca{width:auto;height:56px;border-radius:0}
#login .mbrand img.marca{height:44px}
.marca-escuro{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .marca-claro{display:none}:root:not([data-theme="light"]) .marca-escuro{display:inline}}
:root[data-theme="dark"] .marca-claro{display:none}:root[data-theme="dark"] .marca-escuro{display:inline}
#login .brandmark .marca-escuro,#login .brandmark img.marca{display:inline}
.marca-tag{font-size:13px;font-weight:600;padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.14);color:inherit;margin-left:4px}
#rail .logo:not(.custom),#mnav .mhead .logo:not(.custom){border-radius:50%}
.cwchip{color:var(--brand);font-weight:600}
/* barras de abas das telas: quando não cabem, quebram para a linha de baixo (nada fica escondido, nem precisa de rolagem lateral) */
.seg.abas{flex-wrap:wrap;overflow:visible;row-gap:2px;padding-left:0;padding-right:0}
.seg.abas button{flex:0 0 auto;padding:0 12px;white-space:nowrap}
.ajtabs{overflow:visible}
/* abas da lista de conversas: em telas menores, ocupam só o necessário e, se ainda não couber, quebram de linha (nada cortado) */
#seg{flex-wrap:wrap;overflow:visible;padding:0 8px;justify-content:space-around}
#seg button{flex:0 0 auto;padding:0 5px;white-space:nowrap;font-size:12.5px;gap:4px}
#seg button i{padding:0 5px}
/* janela de encerrar: compacta (etiquetas como no Chatmix, opções em cartões) */
.encform{display:flex;flex-direction:column;gap:14px;min-width:min(440px,80vw)}
.enclbl{font-weight:600;font-size:13px;margin-bottom:6px;color:var(--ink-2)}.encobr{color:var(--bad)}
.encopcoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.enccard{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface-2)}
.enccard .liga{margin:0}
.linkbtn{background:none;border:0;min-height:0;padding:0;color:var(--brand);font-size:13px;font-weight:500}
.tgescolha{position:relative}.tgcampo{position:relative}
.tgbtn{width:100%;justify-content:space-between;text-align:left;background:var(--surface);font-weight:500}
.tgbtn .grow{text-align:left}.tgbtn svg{transform:rotate(90deg)}
.tgpop{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.15);padding:6px}
.tgbuscaw{display:flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:8px;padding:0 8px;margin-bottom:6px}
.tgbuscaw input{border:0;box-shadow:none!important;padding:6px 0;min-height:32px}
.tgitens{max-height:220px;overflow:auto;display:flex;flex-direction:column;gap:4px}
.tgitem{cursor:pointer;border-radius:6px;padding:2px}.tgitem:hover{background:var(--surface-2)}
.tgitem .tgpill{display:flex;width:100%}
.tgpill{display:inline-flex;align-items:center;gap:6px;border-radius:6px;padding:4px 10px;font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.01em}
.tgx{background:none;border:0;min-height:0;padding:0 0 0 2px;color:inherit;font-size:11px;opacity:.85;line-height:1}
.tgchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
/* Clientes do cadastro: ações quebram linha quando não cabem; no celular, nome + situação em cima, telefones e conversas abaixo, botões numa linha própria */
.erprow .cliacts{flex-wrap:wrap}
@media (max-width:900px){
  .erprow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:none;row-gap:6px}
  .erprow>:nth-child(1){grid-area:1/1/2/2}
  .erprow>:nth-child(2){grid-area:1/2/2/3;align-self:start}
  .erprow>:nth-child(3),.erprow>:nth-child(4){grid-column:1/-1}
  .erprow>.cliacts{grid-area:auto/1/auto/-1;justify-content:flex-start}
}
@media (min-width:901px){.erprow .gravwa{width:34px;height:34px;min-height:0!important;padding:0!important;border-radius:50%!important;display:inline-grid;place-items:center}.erprow .gravtxt{display:none}}
/* Painel › Encerrados hoje em tabela: rola só dentro da caixa, cabeçalho fixo, colunas ordenáveis */
.bclosedtb{grid-column:1/-1;overflow:auto;max-height:100%;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.btb th{position:sticky;top:0;background:var(--surface);z-index:1}
.btb th.sortable{cursor:pointer;user-select:none}.btb th.sortable:hover,.btb th.on{color:var(--ink)}
.btb td{white-space:nowrap;padding:8px 10px}.btb tbody tr{cursor:pointer}.btb tbody tr:hover{background:var(--surface-2)}
.btb .bcli{max-width:260px}.btb .bcli b,.btb .bcli span{display:block;max-width:260px}
.btb .bult{max-width:280px}.btb .bult .ell{display:block;max-width:280px}
.btb .tagrow{flex-wrap:nowrap}
@media (max-width:700px){.btb .hm{display:none}.btb .bcli,.btb .bcli b,.btb .bcli span{max-width:150px}}
.btb .om{display:none}
@media (max-width:700px){.btb .om{display:flex;flex-wrap:wrap;margin-top:4px;max-width:170px}.btb .bcli,.btb .bcli b,.btb .bcli span{max-width:170px}}
@media (max-width:700px){.btb td,.btb th{padding:8px 6px}.btb .om,.btb .bcli,.btb .bcli b,.btb .bcli span{max-width:138px}}
.btb .sh{display:none}@media (max-width:700px){.btb .lg{display:none}.btb .sh{display:inline}}
/* sino "Avisos": clientes esperando resposta (no lugar das caixas vermelhas empilhadas) */
#navbell{color:var(--bad)}
.bellpop{width:330px;max-width:calc(100vw - 16px);max-height:min(70vh,460px);display:flex;flex-direction:column;padding:0;overflow:hidden;z-index:9999}
.bellpop .bellh{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.bellpop .belll{overflow:auto}.bellpop .it{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;cursor:pointer}
.bellpop .it:hover{background:var(--surface-2)}
@media (max-width:700px){.bellpop{width:auto}}
.sonota{display:flex;align-items:center;gap:8px;padding:6px 12px;margin:0 0 6px;border-radius:10px;background:color-mix(in srgb,#d97706 12%,transparent);color:var(--ink)}
/* SecAbas: seções de uma janela em abas no topo (no lugar da rolagem comprida) */
.secabas{padding:0 0 12px;flex-wrap:wrap}
.secabas-c .sec-aba>summary{display:none}
.secabas-c .sec-aba{border:0;background:none;padding:0}
.secabas-c .sec-aba>.sec-c{padding:4px 0 0}
/* mensagem nova: a conversa pisca na lista (no lugar do aviso por cima da tela) até alguém abrir */
@keyframes nfyPisca{0%,100%{background:transparent}50%{background:color-mix(in srgb,var(--brand) 22%,transparent)}}
#list .item.pisca{animation:nfyPisca 1.4s ease-in-out infinite;box-shadow:inset 3px 0 0 var(--brand)}
@media (prefers-reduced-motion:reduce){#list .item.pisca{animation:none;background:color-mix(in srgb,var(--brand) 16%,transparent)}}
/* responder citando uma mensagem (como no WhatsApp) */
.m .cita,#replybar .cita{display:block;border-left:3px solid var(--brand);background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:6px;padding:5px 8px;margin:0 0 6px;font-size:12.5px;cursor:pointer;max-width:100%}
.m .cita.cin,#replybar .cita.cin{border-left-color:#1f9d4c}
.m .cita b,#replybar .cita b{display:block;font-size:12px;color:var(--brand)}.m .cita.cin b,#replybar .cita.cin b{color:#1f9d4c}
.m .cita span,#replybar .cita span{display:block;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#replybar{display:flex;align-items:center;gap:8px;padding:6px 8px 0}#replybar.hide{display:none}#replybar .cita{margin:0}
#msgs .m.in,#msgs .m.out{cursor:pointer}
@keyframes nfyPisca1{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 45%,transparent)}}
#msgs .m.pisca1{animation:nfyPisca1 .8s ease-in-out 2}
#msgs .m .apagada{font-style:italic;color:var(--ink-3)}