:root{--bg:#eef1f6;--paper:#fff;--line:#e3e7ef;--ink:#242936;--muted:#606879;--blue:#315ca8;--ice:#edf4fb;--green:#28664e;--mint:#eef7f3;--amber:#775c27;--cream:#f7f4ec;--red:#a13f45;--rose:#fbedee;--logo-purple:#6b54bc;--logo-pink:#c83e84;--logo-orange:#bd651a;--logo-green:#538238;--radius:12px;--radius-lg:16px;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--menu:220px;--lista:320px;--ficha:300px;--fonte:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;--t:160ms ease}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--fonte);font-size:14px;line-height:1.45;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--blue)}
h1,h2,h3{margin:0;font-weight:600}
h1{font-size:20px}h2{font-size:16px}h3{font-size:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* logo */
.logo{font-weight:700;font-size:20px;letter-spacing:-.01em;display:flex;align-items:baseline}
.logo .l1{color:var(--logo-purple)}.logo .l2{color:var(--logo-pink)}.logo .l3{color:var(--logo-orange)}.logo .l4{color:var(--logo-green)}
.logo .sub{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:0;margin-left:var(--s2)}

/* casca */
.casca{display:grid;grid-template-columns:var(--menu) 1fr;height:100vh}
.menu{background:var(--paper);border-right:1px solid var(--line);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s4)}
.menu nav{display:flex;flex-direction:column;gap:var(--s1)}
.menu-item{display:flex;align-items:center;gap:var(--s3);min-height:44px;padding:0 var(--s3);border-radius:var(--radius);border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer;transition:background var(--t)}
.menu-item svg{width:18px;height:18px;flex:none;color:var(--muted)}
.menu-item:hover{background:var(--bg)}
.menu-item[aria-current="page"]{background:var(--ice);color:var(--blue);font-weight:600}
.menu-item[aria-current="page"] svg{color:var(--blue)}
.menu .rodape{margin-top:auto;display:flex;flex-direction:column;gap:var(--s2);font-size:12px;color:var(--muted)}
.menu .rodape .selo{white-space:normal;line-height:1.3;padding:var(--s1) var(--s2);min-height:0}
.conteudo{min-width:0;display:flex;flex-direction:column;overflow:hidden}
.topo{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) var(--s5);border-bottom:1px solid var(--line);background:var(--paper);min-height:56px}
.topo h1{flex:1}
.area{flex:1;min-height:0;overflow:auto;padding:var(--s5)}
.area.cheia{padding:0;overflow:hidden}

/* componentes */
.painel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg)}
.cartao{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4)}
.cartao .rotulo{font-size:12px;color:var(--muted);margin-bottom:var(--s1)}
.cartao .valor{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.grade{display:grid;gap:var(--s4)}
.grade>*{min-width:0}
.painel{min-width:0}
.rolavel{overflow-x:auto}
.grade.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grade.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.linha{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.espaco{flex:1}
.botao{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:0 var(--s4);border-radius:var(--radius);border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;transition:background var(--t),border-color var(--t)}
.botao:hover{background:var(--bg)}
.botao.primario{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.botao.primario:hover{filter:brightness(.95)}
.botao.perigo{color:var(--red);border-color:var(--red)}
.botao.perigo:hover{background:var(--rose)}
.botao.pequeno{min-height:36px;padding:0 var(--s3);font-size:13px}
.botao:disabled,.botao[aria-busy="true"]{opacity:.55;cursor:default}
.botao[aria-busy="true"]::after{content:"";width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.campo{display:flex;flex-direction:column;gap:var(--s1);font-size:13px;color:var(--muted)}
.campo input,.campo select,.campo textarea{min-height:40px;padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);transition:border-color var(--t)}
.campo textarea{min-height:96px;resize:vertical;line-height:1.4}
.campo input:hover,.campo textarea:hover,.campo select:hover{border-color:var(--muted)}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--ice)}
.campo input:disabled,.campo textarea:disabled{background:var(--bg)}
.campo .ajuda{font-size:12px;color:var(--muted)}
.chave{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;cursor:pointer}
.chave input{appearance:none;width:40px;height:22px;border-radius:11px;background:var(--line);position:relative;transition:background var(--t);margin:0;cursor:pointer}
.chave input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--paper);transition:transform var(--t)}
.chave input:checked{background:var(--green)}
.chave input:checked::after{transform:translateX(18px)}
.selo{display:inline-flex;align-items:center;min-height:22px;padding:0 var(--s2);border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap}
.selo.agente{background:var(--ice);color:var(--blue)}
.selo.humano{background:var(--cream);color:var(--amber)}
.selo.optout{background:var(--rose);color:var(--red)}
.selo.ok{background:var(--mint);color:var(--green)}
.selo.neutro{background:var(--bg);color:var(--muted)}
.selo.aviso{background:var(--cream);color:var(--amber)}
.selo.erro{background:var(--rose);color:var(--red)}
.abas{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--line);padding:0 var(--s2)}
.aba{min-height:44px;padding:0 var(--s2);border:0;background:transparent;color:var(--muted);border-bottom:2px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s2);transition:color var(--t)}
.aba:hover{color:var(--ink)}
.aba[aria-selected="true"]{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}
.aba .n{font-size:12px;background:var(--bg);color:var(--muted);border-radius:999px;padding:0 6px;min-width:20px;text-align:center}
.vazio{padding:var(--s6) var(--s5);text-align:center;color:var(--muted);font-size:13px;line-height:1.5}
.erro{padding:var(--s3) var(--s4);border-radius:var(--radius);background:var(--rose);color:var(--red);font-size:13px}
.aviso{padding:var(--s3) var(--s4);border-radius:var(--radius);background:var(--cream);color:var(--amber);font-size:13px}
.ok{padding:var(--s3) var(--s4);border-radius:var(--radius);background:var(--mint);color:var(--green);font-size:13px}
.tabela{width:100%;border-collapse:collapse;font-size:13px}
.tabela th,.tabela td{text-align:left;padding:0 var(--s3);height:36px;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.tabela th{font-weight:600;color:var(--muted);font-size:12px;position:sticky;top:0;background:var(--paper)}
.tabela tbody tr:hover{background:var(--bg)}
.tabela td.num{font-variant-numeric:tabular-nums}
.tabela td.situacao{max-width:none;overflow:visible}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.muted{color:var(--muted)}
.pequeno{font-size:12px}
dialog{border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s5);max-width:520px;width:calc(100% - 32px);background:var(--paper);color:var(--ink)}
dialog::backdrop{background:rgba(36,41,54,.35)}
dialog form{display:grid;gap:var(--s3)}

/* conversas */
.conversas{display:grid;grid-template-columns:var(--lista) 1fr var(--ficha);height:100%}
.col-lista{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--paper)}
.col-lista .busca{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.col-lista .busca input{width:100%;min-height:40px;padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--radius)}
.lista{overflow:auto;flex:1}
.item{display:grid;grid-template-columns:1fr auto;gap:var(--s1) var(--s3);width:100%;padding:var(--s3) var(--s4);border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;cursor:pointer;min-height:64px;transition:background var(--t)}
.item:hover{background:var(--bg)}
.item[aria-current="true"]{background:var(--ice)}
.item .nome{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .hora{font-size:12px;color:var(--muted)}
.item .previa{grid-column:1/-1;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .rodape-item{grid-column:1/-1;display:flex;gap:var(--s2);align-items:center;font-size:12px;color:var(--muted)}
.col-chat{display:flex;flex-direction:column;min-width:0;min-height:0}
.chat-topo{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s5);border-bottom:1px solid var(--line);background:var(--paper);min-height:56px}
.chat-topo .quem{flex:1;min-width:0}
.chat-topo .quem .nome{font-weight:600}
.chat-topo .quem .sub{font-size:12px;color:var(--muted)}
.resumo-ficha{display:none;padding:var(--s2) var(--s5);border-bottom:1px solid var(--line);background:var(--paper);font-size:12px;color:var(--muted)}
.baloes{flex:1;min-height:0;overflow:auto;padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.balao{max-width:72%;padding:var(--s2) var(--s3);border-radius:var(--radius);border:1px solid var(--line);background:var(--paper);white-space:pre-wrap;word-break:break-word}
.balao.saida{align-self:flex-end;background:var(--ice);border-color:var(--ice)}
.balao .meta{display:flex;gap:var(--s2);font-size:11px;color:var(--muted);margin-top:var(--s1);justify-content:flex-end}
.balao.sistema{align-self:center;background:transparent;border:0;color:var(--muted);font-size:12px}
.compositor{display:flex;gap:var(--s2);padding:var(--s3) var(--s5);border-top:1px solid var(--line);background:var(--paper);align-items:flex-end}
.compositor textarea{flex:1;min-height:44px;max-height:160px;padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--radius);resize:none}
.col-chat .nota{font-size:12px;color:var(--muted);padding:0 var(--s5) var(--s3);background:var(--paper);flex:none}
.col-ficha{border-left:1px solid var(--line);background:var(--paper);overflow:auto;padding:var(--s4);display:flex;flex-direction:column;gap:var(--s4)}
.col-ficha dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--s1) var(--s3);font-size:13px}
.col-ficha dt{color:var(--muted)}
.col-ficha dd{margin:0;word-break:break-word}
.col-ficha .bloco h3{margin-bottom:var(--s2)}
.col-ficha ul{margin:0;padding-left:var(--s4)}
.col-ficha .acoes{display:flex;flex-direction:column;gap:var(--s2)}

/* agenda */
.filtros{display:flex;gap:var(--s2);align-items:flex-end;flex-wrap:wrap;margin-bottom:var(--s4)}
.filtros .campo input,.filtros .campo select{min-height:40px}
.pag{display:flex;align-items:center;gap:var(--s3);justify-content:flex-end;padding:var(--s3) 0;font-size:13px;color:var(--muted)}
.importar{display:flex;gap:var(--s3);align-items:flex-end;flex-wrap:wrap}

/* memória */
.memoria{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,1fr);gap:var(--s5);align-items:start}
.form-memoria{display:grid;gap:var(--s4);padding:var(--s5)}
.bancada{display:flex;flex-direction:column;min-height:480px;max-height:calc(100vh - 200px)}
.bancada .baloes{padding:var(--s4)}
.bancada .compositor{padding:var(--s3) var(--s4)}
.flyer-previa{max-width:100%;max-height:240px;border:1px solid var(--line);border-radius:var(--radius)}

/* conexão */
.conexao{max-width:720px;display:grid;gap:var(--s4)}
.qr{width:260px;height:260px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;text-align:center;padding:var(--s4)}
.qr img{width:100%;height:100%;object-fit:contain}

/* eventos */
.eventos{font-size:12px}
.eventos td.tipo{font-weight:600}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:var(--s4)}
.login-form{width:360px;max-width:100%;padding:var(--s6);display:grid;gap:var(--s4)}

/* responsivo */
@media (max-width:1100px){.conversas{grid-template-columns:var(--lista) 1fr}.col-ficha{display:none}.resumo-ficha{display:block}.grade.c4{grid-template-columns:repeat(2,minmax(0,1fr))}.memoria{grid-template-columns:1fr}}
@media (max-width:820px){.casca{grid-template-columns:1fr;grid-template-rows:auto 1fr}.menu{flex-direction:row;align-items:center;border-right:0;border-bottom:1px solid var(--line);padding:var(--s2) var(--s4);overflow:auto}.menu nav{flex-direction:row}.menu-item span{display:none}.menu .rodape{display:none}.conversas{grid-template-columns:1fr;grid-template-rows:minmax(160px,40%) 1fr}.col-lista{border-right:0;border-bottom:1px solid var(--line)}.grade.c4,.grade.c2{grid-template-columns:1fr}.area{padding:var(--s4)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}