/* p3group v3, seção 03: prévia do sistema (CRM). Dono: agente SISTEMA.
   Janela de app em vidro com funil, conversa, KPIs e automações. Estados: automático (padrão),
   .sis-manual na seção (caos) e .organizando (volta ao automático). Raios: 14px janela, 8px cards e chips, pill no que é clicável. */

.sis{overflow-x:clip;isolation:isolate}

/* ---------- fundo: luz laranja vazando atrás do vidro ---------- */
.sis-fundo{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sis-luz{position:absolute;border-radius:50%}
.sis-luz-1{width:min(78vw,980px);height:min(56vw,640px);left:-14%;top:46%;background:radial-gradient(closest-side,rgba(255,77,36,.30),rgba(255,77,36,.10) 55%,transparent)}
.sis-luz-2{width:min(60vw,760px);height:min(44vw,520px);right:-12%;top:30%;background:radial-gradient(closest-side,rgba(255,122,77,.16),transparent)}
.sis-grade{position:absolute;inset:0;background-image:radial-gradient(rgba(236,234,228,.075) 1px,transparent 1.3px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 66%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 70% 55% at 50% 66%,#000 15%,transparent 72%)}

/* ---------- cabeçalho ---------- */
.sis-cab .sis-l1{display:block}
.sis-cab .neon{display:inline-block}
.sis-apoio{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;max-width:none}

/* ---------- barra com a chave Manual / Automático ---------- */
.sis-barra{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-bottom:22px}
.sis-modo{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;align-items:center;height:54px;padding:5px;border-radius:var(--pill);border:1px solid var(--linha-2);background:rgba(255,255,255,.035);cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 30px -16px rgba(0,0,0,.9);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.sm-op{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;font:500 15px/1 var(--sans);letter-spacing:-.01em;color:var(--osso-3);white-space:nowrap;transition:color .4s var(--ease)}
.sm-op .ic{font-size:17px}
.sm-bola{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:var(--pill);background:rgba(236,234,228,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);transition:transform .55s var(--ease),background-color .45s var(--ease),box-shadow .45s var(--ease)}
.sis-modo[aria-pressed="true"] .sm-bola{transform:translateX(100%);background-color:var(--tang);box-shadow:inset 0 1px 0 rgba(255,220,205,.6),0 0 0 1px rgba(255,77,36,.55),0 6px 26px -4px rgba(255,77,36,.75)}
.sis-modo[aria-pressed="true"] .sm-auto{color:#160500}
.sis-modo[aria-pressed="false"] .sm-manual{color:var(--osso)}
@media (hover:hover){
  .sis-modo:hover{border-color:var(--tang-borda)}
  .sis-modo[aria-pressed="true"]:hover .sm-manual,.sis-modo[aria-pressed="false"]:hover .sm-auto{color:var(--osso-2)}
}
.sis-modo:focus-visible{outline-offset:4px;border-radius:var(--pill)}
.sis-legenda{display:inline-flex;align-items:center;gap:10px;font:500 13px/1.4 var(--mono);color:var(--osso-2);min-width:0}
.sl-ponto{flex:none;width:7px;height:7px;border-radius:50%;background:var(--tang);box-shadow:var(--brilho);animation:sis-pisca 1.6s ease-in-out infinite}
.sis-manual .sl-ponto{background:var(--osso-3);box-shadow:none;animation:none}
.sj-ex-f{display:none}

/* ---------- janela ---------- */
.sis-palco{position:relative;perspective:1600px;perspective-origin:50% 0%}
.sis-janela{
  position:relative;overflow:hidden;border-radius:var(--raio);
  background:linear-gradient(180deg,rgba(24,24,28,.80),rgba(10,10,12,.88) 30%,rgba(8,8,10,.92));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 60px 120px -50px rgba(0,0,0,.95),0 0 140px -40px rgba(255,77,36,.32);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  transform-origin:50% 100%;
  font-size:14px;line-height:1.4;user-select:none;-webkit-user-select:none;
}
/* borda neon do vidro */
.sis-janela::before{content:"";position:absolute;inset:0;z-index:40;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(165deg,rgba(255,196,174,.6),rgba(255,77,36,.32) 16%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 72%,rgba(255,77,36,.34) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.sis-janela.parado *,.sis-janela.parado *::before,.sis-janela.parado *::after{animation-play-state:paused!important}

/* barra de título */
.sj-topo{display:flex;align-items:center;gap:14px;height:48px;padding:0 16px;border-bottom:1px solid var(--linha);background:rgba(255,255,255,.022)}
.sj-pontos{display:flex;gap:7px;flex:none}
.sj-pontos i{width:10px;height:10px;border-radius:50%;background:rgba(236,234,228,.16)}
.sj-nome{font:500 12.5px var(--mono);color:var(--osso-2);white-space:nowrap}
.sj-busca{display:inline-flex;align-items:center;gap:9px;height:30px;width:min(330px,30%);margin-left:auto;padding:0 14px;border-radius:var(--pill);border:1px solid var(--linha);background:rgba(255,255,255,.025);font:400 12.5px var(--sans);color:var(--osso-3);white-space:nowrap;overflow:hidden}
.sj-busca .ic{font-size:14px;flex:none}
.sj-dir{display:flex;align-items:center;gap:14px;margin-left:auto;min-width:0}
.sj-agentes{display:inline-flex;align-items:center;gap:8px;font:500 12px var(--mono);color:var(--osso-2);white-space:nowrap}
.sj-pt{width:7px;height:7px;border-radius:50%;background:var(--tang);box-shadow:var(--brilho);animation:sis-pisca 1.6s ease-in-out infinite}
.sj-hora{display:inline-flex;align-items:center;gap:6px;font:500 12.5px var(--mono);color:var(--osso-2);white-space:nowrap;transition:color .3s}
.sj-hora .ic{font-size:14px;color:var(--osso-3)}
.sj-ex{padding:4px 9px;font-size:10px}

/* corpo: barra lateral + área principal */
.sj-corpo{display:grid;grid-template-columns:60px minmax(0,1fr)}
.sj-lado{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0;border-right:1px solid var(--linha);background:rgba(255,255,255,.012)}
.sj-ic{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--raio-p);color:var(--osso-3);font-size:20px}
.sj-ic small{display:none}
.sj-ic.on{color:var(--tang-brilho);background:var(--tang-fundo);box-shadow:inset 0 0 0 1px var(--tang-borda)}
.sj-badge{position:absolute;top:-3px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:var(--pill);background:var(--tang);color:#160500;font:600 10.5px/19px var(--mono);text-align:center;box-shadow:0 0 12px rgba(255,77,36,.7);transform:scale(0);transition:transform .35s var(--ease)}
.sj-badge.on{transform:scale(1)}
.sj-eu{margin-top:auto;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--linha-2);font:600 10.5px var(--mono);color:var(--osso-2)}

.sj-main{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,24vw,340px);grid-template-areas:"kpis kpis" "funil chat" "auto chat";min-width:0}

/* cabeçalho de cada região */
.sj-ph{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:24px;margin-bottom:12px;min-width:0}
.sj-tit{display:inline-flex;align-items:center;gap:8px;font:500 14px/1 var(--sans);letter-spacing:-.01em;color:var(--osso);white-space:nowrap}
.sj-tit .ic{font-size:16px;color:var(--tang)}
.sj-sub{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--osso-3);white-space:nowrap}

/* ---------- KPIs ---------- */
.sj-kpis{grid-area:kpis;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--linha)}
.kpi{position:relative;display:grid;gap:12px;min-width:0;padding:16px 20px 16px;border-left:1px solid var(--linha);container-type:inline-size}
.kpi:first-child{border-left:0}
.kpi-l1{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;height:22px}
.kpi-rot{display:inline-flex;align-items:center;gap:7px;min-width:0;font:500 10.5px var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--osso-3);white-space:nowrap}
.kpi-rot .ic{font-size:14px;color:var(--osso-3)}
.kpi-delta{flex:none;padding:3px 8px;border-radius:var(--pill);border:1px solid var(--tang-borda);background:var(--tang-fundo);font:600 11px var(--mono);color:var(--tang-brilho);opacity:0;white-space:nowrap}
.kpi-delta.on{animation:sis-delta 2.6s var(--ease) forwards}
.kpi-delta.fixo{opacity:1;animation:none}
.kpi-trava{display:none;flex:none;align-items:center;gap:5px;font:500 10.5px var(--mono);color:var(--osso-3);white-space:nowrap}
.kpi-trava .ic{font-size:12px}
.kpi-l2{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;min-width:0}
.kpi-num{font:500 30px/1 var(--mono);letter-spacing:-.04em;color:var(--osso);font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .4s,text-shadow .4s}
.kpi.sobe .kpi-num{animation:sis-sobe 1.1s var(--ease)}
.kpi-barras{display:flex;align-items:flex-end;gap:3px;height:30px;flex:none}
.kpi-barras i{width:4px;height:30%;border-radius:2px;background:rgba(236,234,228,.17);transition:height .7s var(--ease),background-color .4s}
.kpi-barras i:last-child{background:var(--tang);box-shadow:0 0 8px rgba(255,77,36,.75)}
@container (max-width:236px){.kpi-num{font-size:26px}.kpi-barras{display:none}}
@container (max-width:180px){.kpi-num{font-size:22px}}

/* ---------- funil (kanban) ---------- */
.sj-funil{grid-area:funil;min-width:0;padding:16px 16px 18px}
.kb{position:relative;min-width:0}
.kb-trilho{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;height:284px}
.kb-col{display:flex;flex-direction:column;min-width:0;border-radius:var(--raio-p);border:1px solid var(--linha);background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012));container-type:inline-size}
.kb-cab{display:flex;align-items:center;gap:8px;height:36px;flex:none;padding:0 10px 0 12px;font:500 12.5px/1 var(--sans);color:var(--osso-2);white-space:nowrap}
.kb-cab::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--osso-3)}
.kb-col[data-col="conversa"] .kb-cab::before{background:var(--tang-claro)}
.kb-col[data-col="proposta"] .kb-cab::before{background:var(--tang);box-shadow:0 0 8px rgba(255,77,36,.8)}
.kb-col[data-col="fechado"] .kb-cab::before{background:var(--tang-brilho);box-shadow:0 0 10px rgba(255,196,174,.8)}
.kb-cab b{margin-left:auto;min-width:22px;height:20px;padding:0 6px;border-radius:var(--pill);background:rgba(255,255,255,.05);font:500 11px/20px var(--mono);color:var(--osso-2);text-align:center}
.kb-lista{display:flex;flex-direction:column;gap:6px;padding:0 5px}
.kb-mais{flex:none;display:flex;align-items:center;justify-content:center;height:26px;margin:auto 5px 5px;border:1px dashed var(--linha-2);border-radius:var(--raio-p);font:500 11px var(--mono);color:var(--osso-3);opacity:0;transition:opacity .4s}
.kb-mais.on{opacity:1}
.sis-manual .kb-col[data-col="novo"] .kb-mais.on{color:var(--tang-brilho);border-color:var(--tang-borda)}

/* card */
.kc{position:relative;display:grid;gap:8px;padding:9px 10px 10px;border-radius:var(--raio-p);border:1px solid rgba(255,255,255,.075);background:linear-gradient(180deg,#18181c,#121215);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 16px -10px rgba(0,0,0,.9);transition:border-color .35s,box-shadow .35s}
.kc-l1{display:flex;align-items:center;gap:7px;min-width:0;height:18px}
.kc-o{font-size:14px;color:var(--osso-3)}
.kc-o-whats{color:var(--tang-claro)}
.kc-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 13.5px/1 var(--sans);letter-spacing:-.01em;color:var(--osso)}
.kc-t{margin-left:auto;display:inline-flex;align-items:center;gap:4px;flex:none;font:500 10.5px var(--mono);color:var(--osso-3);white-space:nowrap}
.kc-t svg{width:12px;height:12px}
.kc-t.alerta{color:var(--tang-claro)}
.kc-t.luz{color:var(--tang-brilho)}
.kc-t.luz svg{color:var(--tang);filter:drop-shadow(0 0 4px rgba(255,77,36,.8))}
.kc-l2{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;height:20px}
.kc-v{font:500 12.5px var(--mono);color:var(--osso-2);white-space:nowrap;letter-spacing:-.02em}
.kc-v.vazio{color:var(--osso-3)}
.kc-tag{display:inline-flex;align-items:center;gap:4px;min-width:0;height:20px;padding:0 7px;border-radius:var(--raio-p);border:1px solid var(--tang-borda);background:var(--tang-fundo);font:500 10.5px var(--mono);color:var(--tang-brilho);white-space:nowrap;overflow:hidden}
.kc-tag .ic{font-size:11px;flex:none}
.kc-tag span{overflow:hidden;text-overflow:ellipsis}
.kc-tag.vazia{border:1px dashed var(--linha-2);background:transparent;color:var(--osso-3)}
.kc-tag.vazia .ic{display:none}
.kc.voando{z-index:12;border-color:var(--tang-borda);box-shadow:inset 0 1px 0 rgba(255,220,205,.18),0 0 0 1px rgba(255,77,36,.25),0 18px 34px -12px rgba(0,0,0,.95),0 0 26px -6px rgba(255,77,36,.55)}
.kc.chegou::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 1px var(--tang),0 0 22px rgba(255,77,36,.7);animation:sis-chegou 1.2s var(--ease) forwards}
.kc .carimbo{animation:sis-carimbo .55s var(--ease)}
.kc.fantasma{pointer-events:none}
@container (max-width:178px){
  .kc-tag{padding:0 6px}
  .kc-tag .ic{display:none}
  .kc-v{font-size:12px}
}

/* pilha do modo manual */
.kb-col.pilha .kb-lista{gap:0}
.kb-col.pilha .kc+.kc{margin-top:-37px}
.kb-col.pilha .kc:nth-child(2n){rotate:.9deg;translate:3px 0}
.kb-col.pilha .kc:nth-child(3n){rotate:-1deg;translate:-2px 0}
.kb-col.pilha .kc{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 -8px 16px -8px rgba(0,0,0,.95)}

/* cursor do agente */
.kb-cursor{position:absolute;left:0;top:0;z-index:30;pointer-events:none;transition:opacity .35s var(--ease)}
.kb-cursor>.ic{position:absolute;left:-3px;top:-2px;font-size:22px;color:var(--tang);filter:drop-shadow(0 0 6px rgba(255,77,36,.85)) drop-shadow(0 2px 3px rgba(0,0,0,.8));transition:transform .2s var(--ease)}
.kb-cursor-rot{position:absolute;left:15px;top:17px;padding:4px 9px;border-radius:var(--pill);background:var(--tang);color:#160500;font:600 10.5px/1.2 var(--mono);white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,220,205,.55),0 6px 16px -6px rgba(255,77,36,.9)}
.kb-cursor.fora{opacity:0}
.kb-cursor.pega>.ic{transform:scale(.84) translate(1px,2px)}

/* ---------- conversa ---------- */
.sj-chat{grid-area:chat;position:relative;min-width:0;border-left:1px solid var(--linha);background:rgba(255,255,255,.012)}
.ch-in{position:absolute;inset:16px 16px 16px;display:flex;flex-direction:column;min-height:0}
.ch-nao{display:inline-flex;align-items:center;gap:6px;font:500 11px var(--mono);color:var(--osso-3);white-space:nowrap;transition:color .3s}
.ch-nao .ic{font-size:13px;color:var(--tang)}
.ch-nao.alerta{color:var(--tang-brilho)}
.ch-nao.alerta .ic{display:none}
.ch-lista{flex:none;display:flex;flex-direction:column;gap:4px;height:136px;overflow:hidden;padding-bottom:8px;border-bottom:1px solid var(--linha)}
.ib{flex:none;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;height:42px;padding:0 10px 0 7px;border-radius:var(--raio-p);border:1px solid transparent;transition:background-color .35s,border-color .35s}
.ib.on{background:rgba(255,77,36,.08);border-color:var(--tang-borda)}
.ib-av{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--linha-2);background:var(--preto-4);font:600 12px/1 var(--sans);color:var(--osso-2)}
.ib.on .ib-av{border-color:var(--tang);color:var(--tang-brilho)}
.ib-txt{display:grid;gap:3px;min-width:0}
.ib-txt b{display:flex;align-items:center;gap:6px;font:500 13px/1.1 var(--sans);color:var(--osso);white-space:nowrap}
.ib-txt b svg{width:12px;height:12px;flex:none;color:var(--osso-3)}
.ib-txt span{font:400 12px/1.2 var(--sans);color:var(--osso-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib.nova .ib-txt span{color:var(--osso)}
.ib-dir{display:grid;justify-items:end;gap:4px}
.ib-dir small{font:500 10px var(--mono);color:var(--osso-3);white-space:nowrap}
.ib-nao{min-width:17px;height:17px;padding:0 5px;border-radius:var(--pill);background:var(--tang);color:#160500;font:600 10px/17px var(--mono);text-align:center;box-shadow:0 0 10px rgba(255,77,36,.6)}
.ib-ok{display:block;width:14px;height:14px;color:var(--tang)}
.ib-ok svg{width:14px;height:14px}
.ib-vazio{height:17px}
.ch-av{position:relative;flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--linha-2);background:var(--preto-4);font:600 12px/1 var(--sans);color:var(--osso-2)}
.ch-av.on{border-color:var(--tang);color:var(--tang-brilho);box-shadow:0 0 0 3px rgba(255,77,36,.14),0 0 14px -2px rgba(255,77,36,.6)}
.ch-av b{position:absolute;top:-5px;right:-7px;min-width:17px;height:17px;padding:0 4px;border-radius:var(--pill);background:var(--tang);color:#160500;font:600 10px/17px var(--mono);text-align:center}
.ch-av svg{width:17px;height:17px}
.ch-cab{display:flex;align-items:center;gap:10px;flex:none;padding:12px 0 8px;min-width:0}
.ch-cab .ch-av{width:34px;height:34px;font-size:13px}
.ch-quem{flex:1;display:grid;gap:3px;min-width:0}
.ch-nome{font:500 14px/1.1 var(--sans);color:var(--osso);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-origem{display:block;font:500 11px var(--mono);color:var(--osso-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-origem svg{display:inline-block;width:12px;height:12px;margin-right:5px;vertical-align:-2px}
.ch-estado{flex:none;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--pill);border:1px solid var(--tang-borda);background:var(--tang-fundo);font:500 10.5px var(--mono);color:var(--tang-brilho);white-space:nowrap}
.ch-estado b{width:6px;height:6px;border-radius:50%;background:var(--tang);box-shadow:0 0 8px var(--tang);animation:sis-pisca 1.4s ease-in-out infinite}
.ch-msgs{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;overflow:hidden;padding-top:6px;-webkit-mask-image:linear-gradient(transparent,#000 14%);mask-image:linear-gradient(transparent,#000 14%)}
.msg{flex:none;max-width:88%;padding:8px 12px 7px;border-radius:var(--raio);font:400 13px/1.36 var(--sans);color:var(--osso);overflow-wrap:anywhere}
.msg p{margin:0}
.msg small{display:block;margin-top:4px;font:500 10px var(--mono);color:var(--osso-3)}
.msg.cli{align-self:flex-start;background:rgba(255,255,255,.06);border:1px solid var(--linha);border-bottom-left-radius:var(--raio-p);transform-origin:0 100%}
.msg.ag{align-self:flex-end;background:linear-gradient(180deg,rgba(255,77,36,.22),rgba(255,77,36,.11));border:1px solid var(--tang-borda);border-bottom-right-radius:var(--raio-p);color:#FFEDE6;transform-origin:100% 100%;box-shadow:0 0 22px -12px rgba(255,77,36,.8)}
.msg.ag small{text-align:right;color:var(--tang-brilho);opacity:.85}
.msg.dig{display:flex;gap:4px;align-items:center;height:34px;padding:0 14px}
.msg.dig i{width:6px;height:6px;border-radius:50%;background:var(--tang-brilho);animation:sis-digita 1s ease-in-out infinite}
.msg.dig i:nth-child(2){animation-delay:.15s}
.msg.dig i:nth-child(3){animation-delay:.3s}
.msg.sis-m{align-self:center;max-width:100%;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:var(--pill);border:1px solid var(--tang-borda);background:var(--tang-fundo);font:500 11.5px/1.3 var(--mono);color:var(--tang-brilho);text-align:center}
.msg.sis-m svg{width:15px;height:15px;flex:none}
.msg.data{align-self:center;padding:0;border:0;background:none;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--osso-3)}
.msg-nome{display:block;margin-bottom:3px;font:600 11.5px/1.2 var(--sans);color:var(--tang-brilho)}
.msg.pend small{color:var(--tang-claro)}
.msg.pend.ok{border-color:var(--tang-borda)}
.msg.pend.ok small{color:var(--tang-brilho)}
.ch-campo{display:flex;align-items:center;gap:10px;flex:none;height:42px;margin-top:12px;padding:0 6px 0 14px;border-radius:var(--pill);border:1px solid var(--linha-2);background:rgba(255,255,255,.03);font:400 12.5px var(--sans);color:var(--osso-3);min-width:0}
.ch-campo-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-campo>.ic{margin-left:auto;flex:none;display:grid;place-items:center;width:30px;height:30px;padding:7px;border-radius:50%;background:var(--tang);color:#160500;box-shadow:0 0 14px -2px rgba(255,77,36,.7)}
.ch-campo.cursor .ch-campo-txt::after{content:"";display:inline-block;width:1px;height:14px;margin-left:3px;vertical-align:-2px;background:var(--osso-2);animation:sis-pisca 1s steps(1) infinite}

/* ---------- automações ---------- */
.sj-auto{grid-area:auto;min-width:0;padding:14px 18px 18px;border-top:1px solid var(--linha);container-type:inline-size}
.au-lista{display:grid;gap:6px}
.au-regra{display:flex;align-items:center;gap:12px;min-width:0;height:44px;padding:0 12px;border-radius:var(--raio-p);border:1px solid var(--linha);background:rgba(255,255,255,.015);transition:border-color .45s var(--ease),background-color .45s var(--ease),opacity .45s}
.au-regra.ativa{border-color:var(--tang-borda);background:var(--tang-fundo)}
.au-chave{position:relative;flex:none;width:30px;height:18px;border-radius:var(--pill);background:var(--tang);box-shadow:0 0 10px -1px rgba(255,77,36,.65);transition:background-color .4s,box-shadow .4s}
.au-chave b{position:absolute;top:2px;left:14px;width:14px;height:14px;border-radius:50%;background:#FFF1EB;transition:left .4s var(--ease),background-color .4s}
.au-fluxo{display:flex;align-items:center;flex:1;min-width:0}
.au-no{position:relative;display:inline-flex;align-items:center;gap:7px;flex:none;height:30px;padding:0 11px;border-radius:var(--raio-p);border:1px solid var(--linha-2);background:rgba(255,255,255,.03);font:400 13px/1 var(--sans);color:var(--osso-2);white-space:nowrap;transition:border-color .35s,color .35s,box-shadow .35s,background-color .35s}
.au-no .ic{font-size:15px;color:var(--osso-3);transition:color .35s}
.au-no.aceso{border-color:var(--tang);background:rgba(255,77,36,.12);color:var(--osso);box-shadow:0 0 0 3px rgba(255,77,36,.10),0 0 18px -4px rgba(255,77,36,.75)}
.au-no.aceso .ic{color:var(--tang)}
.au-fio{position:relative;flex:1 1 24px;min-width:16px;max-width:96px;height:1px;margin:0 6px;background:rgba(236,234,228,.18)}
.au-fio::after{content:"";position:absolute;right:-2px;top:-2px;width:5px;height:5px;border-radius:50%;background:rgba(236,234,228,.3)}
.au-fio b{position:absolute;left:0;top:-1.5px;width:28px;height:4px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--tang-brilho),transparent);box-shadow:0 0 10px var(--tang);opacity:0}
.au-cont{margin-left:auto;display:inline-flex;align-items:baseline;gap:6px;flex:none;font:500 11px var(--mono);color:var(--osso-3);white-space:nowrap}
.au-cont b{display:inline-block;font:500 15px var(--mono);color:var(--osso)}
.au-cont b.bate{animation:sis-sobe .9s var(--ease)}
.au-txt{display:none}
@container (max-width:600px){
  .au-regra{flex-wrap:wrap;height:auto;row-gap:8px;padding:10px 12px}
  .au-no{width:30px;padding:0;justify-content:center}
  .au-no span{display:none}
  .au-fio{max-width:none}
  .au-txt{display:block;width:100%;font:500 11.5px/1.35 var(--mono);color:var(--osso-2)}
}

/* ---------- estado manual (caos) ---------- */
.sis-manual .sj-pt{background:var(--osso-3);box-shadow:none;animation:none}
.sis-manual .sj-hora{color:var(--tang-brilho)}
.sis-manual .sj-hora .ic{color:var(--tang);animation:sis-gira 1.2s linear infinite}
.sis-manual .sj-kpis .kpi-num{color:var(--osso-3)}
.sis-manual .sj-kpis .kpi-delta{display:none}
.sis-manual .sj-kpis .kpi-trava{display:inline-flex}
.sis-manual .sj-kpis .kpi-barras i{background:rgba(236,234,228,.10);box-shadow:none}
.sis-manual .au-regra{opacity:.5;border-color:var(--linha);background:transparent}
.sis-manual .au-chave{background:rgba(236,234,228,.16);box-shadow:none}
.sis-manual .au-chave b{left:2px;background:var(--osso-3)}
.sis-manual .au-no{border-style:dashed}
.sis-manual .au-ativas{color:var(--tang-claro)}
.sis-manual .au-cont b{display:none}
.sis-manual .ch-estado{display:none}
.sis-manual .ch-cab .ch-av{border-color:var(--tang-borda);color:var(--tang)}
.sis-manual .ch-origem{color:var(--tang-claro)}
.sis-manual .ch-campo>.ic{background:rgba(236,234,228,.12);color:var(--osso-3);box-shadow:none}
.sis-manual .kc-t.espera{color:var(--tang-claro)}
.sis-manual .sis-janela::before{opacity:.5}

/* ---------- animações ---------- */
@keyframes sis-pisca{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes sis-gira{to{transform:rotate(360deg)}}
@keyframes sis-delta{0%{opacity:0;transform:translateY(5px)}12%{opacity:1;transform:none}78%{opacity:1}100%{opacity:0}}
@keyframes sis-sobe{0%{color:var(--osso)}20%{color:var(--tang-brilho);text-shadow:0 0 16px rgba(255,77,36,.7)}100%{color:var(--osso);text-shadow:none}}
@keyframes sis-chegou{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
@keyframes sis-carimbo{0%{transform:scale(1.5);opacity:0}55%{transform:scale(.94);opacity:1}100%{transform:none}}
@keyframes sis-digita{0%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-4px);opacity:1}}

/* ---------- larguras intermediárias: conversa e automações lado a lado embaixo ---------- */
@media (max-width:1240px) and (min-width:901px){
  .sj-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"kpis kpis" "funil funil" "chat auto"}
  .sj-chat{border-left:0;border-top:1px solid var(--linha);height:400px}
  .sj-auto{border-left:1px solid var(--linha)}
  .sj-busca{display:none}
}

/* ---------- celular ---------- */
@media (max-width:900px){
  .sis-barra{gap:12px;margin-bottom:16px}
  .sis-modo{height:52px}
  .sm-op{height:40px;padding:0 18px;font-size:15px}
  .sis-legenda{font-size:12px;align-items:flex-start}
  .sl-ponto{margin-top:5px}
  .sj-hoje{display:none}
  .sj-ex-f{display:inline-flex;padding:4px 9px;font-size:10px}
  .sis-palco{perspective:none}
  .sis-janela{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(180deg,rgba(22,22,26,.96),rgba(9,9,11,.97) 30%,rgba(8,8,10,.98))}
  .sj-topo{height:44px;padding:0 14px;gap:10px}
  .sj-busca,.sj-agentes-txt,.sj-ex{display:none}
  .sj-nome{font-size:12px;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .sj-dir{gap:10px}
  .sj-corpo{grid-template-columns:minmax(0,1fr)}
  .sj-lado{order:2;flex-direction:row;justify-content:space-around;gap:0;padding:8px 4px 10px;border-right:0;border-top:1px solid var(--linha)}
  .sj-ic{width:auto;min-width:56px;height:auto;padding:6px 4px 4px;gap:4px;font-size:19px;background:none}
  .sj-ic.on{background:none;box-shadow:none}
  .sj-ic small{display:block;font:500 9.5px/1 var(--sans);letter-spacing:.01em;color:inherit;white-space:nowrap}
  .sj-badge{top:0;right:6px}
  .sj-eu{display:none}
  .sj-main{grid-template-columns:minmax(0,1fr);grid-template-areas:"kpis" "funil" "chat" "auto"}
  .sj-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{padding:14px 14px 14px;gap:10px}
  .kpi:nth-child(odd){border-left:0}
  .kpi:nth-child(-n+2){border-bottom:1px solid var(--linha)}
  .kpi-rot{font-size:10px;letter-spacing:.06em;gap:5px}
  .kpi-rot .ic{display:none}
  .kpi-delta{padding:2px 5px;font-size:9.5px}
  .kpi-trava{font-size:0;gap:0}
  .kpi-trava .ic{font-size:13px}
  .sj-funil{padding:14px 0 16px}
  .sj-funil>.sj-ph{padding:0 14px}
  .kb{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:0 14px 8px;scroll-padding:0 14px;scrollbar-width:thin;scrollbar-color:rgba(255,77,36,.45) transparent}
  .kb::-webkit-scrollbar{height:3px}
  .kb::-webkit-scrollbar-thumb{background:rgba(255,77,36,.45);border-radius:3px}
  .kb-trilho{grid-template-columns:repeat(4,206px);width:max-content}
  .kb-trilho::after{content:"";position:absolute;right:-14px;top:0;width:14px;height:1px}
  .sj-chat{border-left:0;border-top:1px solid var(--linha);height:420px}
  .ch-lista{height:90px;padding-bottom:2px}
  .ch-in{inset:14px 14px 14px}
  /* celular: degradê mais longo no topo da conversa, para o balão que sobe sumir sem corte seco sob o cabeçalho */
  .ch-msgs{-webkit-mask-image:linear-gradient(transparent 0,transparent 10px,#000 48px);mask-image:linear-gradient(transparent 0,transparent 10px,#000 48px)}
  .sj-auto{padding:14px 14px 16px}
}
@media (max-width:380px){
  .sm-op{padding:0 14px;font-size:14px}
  .sj-ic{min-width:50px}
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  .sis-janela{transform:none!important}
  .kpi-delta.on{opacity:1}
}