/* Infinexo — base visual (sem framework). CSP: nada de style inline; tudo por classe. */
:root {
  --fundo: #f4f6f5;
  --superficie: #ffffff;
  --superficie-2: #eef2f1;
  --borda: #d9e0de;
  --texto: #1b2422;
  --texto-2: #5b6a66;
  --primaria: #0f766e;
  --primaria-forte: #0b5d57;
  --primaria-suave: #d8efec;
  --entrada: #ffffff;
  --saida: #dff3ef;
  --nota: #fff7e0;
  --nota-borda: #f1d88f;
  --perigo: #b42318;
  --perigo-suave: #fde2e1;
  --alerta: #92400e;
  --alerta-fundo: #fef3e2;
  --info: #1e40af;
  --info-fundo: #e7eefc;
  --roxo: #6b21a8;
  --roxo-fundo: #f3e8ff;
  --ok: #166534;
  --ok-fundo: #dcfce7;
  --sombra: 0 1px 2px rgba(16, 24, 22, .06), 0 4px 16px rgba(16, 24, 22, .06);
  --raio: 10px;
  --chat-fundo: #efe9df;
  --msg-bot: #eef3f2;
  --chat-padrao: url("/img/fundo-chat-claro.svg");
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Tema: segue o sistema; o botão no topo força claro (data-tema="claro") ou escuro (data-tema="escuro"). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #0f1413; --superficie: #171d1c; --superficie-2: #1f2725; --borda: #2c3634;
    --texto: #e6eceb; --texto-2: #9aa9a5; --primaria: #2bb3a5; --primaria-forte: #46c7ba; --primaria-suave: #16312e;
    --entrada: #1f2725; --saida: #173a35; --nota: #2e2610; --nota-borda: #5c4a14;
    --perigo: #f97066; --perigo-suave: #3a1513; --alerta: #fdb022; --alerta-fundo: #2e2210;
    --info: #93b4ff; --info-fundo: #17223d; --roxo: #d8b4fe; --roxo-fundo: #2a1840;
    --ok: #4ade80; --ok-fundo: #12301d; --sombra: 0 1px 2px rgba(0, 0, 0, .4);
    --chat-fundo: #0b1110; --chat-padrao: url("/img/fundo-chat-escuro.svg"); --msg-bot: #1b2a28;
  }
}
:root[data-tema="escuro"] {
    --fundo: #0f1413; --superficie: #171d1c; --superficie-2: #1f2725; --borda: #2c3634;
    --texto: #e6eceb; --texto-2: #9aa9a5; --primaria: #2bb3a5; --primaria-forte: #46c7ba; --primaria-suave: #16312e;
    --entrada: #1f2725; --saida: #173a35; --nota: #2e2610; --nota-borda: #5c4a14;
    --perigo: #f97066; --perigo-suave: #3a1513; --alerta: #fdb022; --alerta-fundo: #2e2210;
    --info: #93b4ff; --info-fundo: #17223d; --roxo: #d8b4fe; --roxo-fundo: #2a1840;
    --ok: #4ade80; --ok-fundo: #12301d; --sombra: 0 1px 2px rgba(0, 0, 0, .4);
  --chat-fundo: #0b1110; --chat-padrao: url("/img/fundo-chat-escuro.svg"); --msg-bot: #1b2a28; color-scheme: dark;
}
:root[data-tema="claro"] { color-scheme: light; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 14px/1.45 var(--fonte); color: var(--texto); background: var(--fundo); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
a { color: var(--primaria-forte); }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 16px; margin: 0; }
.muted { color: var(--texto-2); }
.pequeno { font-size: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- topo ---------- */
.marca { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: -.01em; }
.marca.grande { font-size: 22px; }
.marca-ponto { width: 12px; height: 12px; border-radius: 4px; background: var(--primaria); }
.topo { min-height: 52px; flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 0 16px;
  background: var(--superficie); border-bottom: 1px solid var(--borda); }
.topo-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.topo-nav a { color: var(--texto-2); text-decoration: none; padding: 6px 10px; border-radius: 8px; }
.topo-nav a:hover { background: var(--superficie-2); }
.topo-nav a.ativo { color: var(--primaria-forte); background: var(--primaria-suave); font-weight: 600; }
.topo-usuario { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--texto-2); }
.ws-status { width: 9px; height: 9px; border-radius: 50%; background: var(--texto-2); }
.ws-status.on { background: var(--ok); }
.ws-status.off { background: var(--perigo); }

/* ---------- botões / campos ---------- */
.btn { border: 1px solid var(--borda); background: var(--superficie); padding: 7px 12px; border-radius: 8px;
  cursor: pointer; white-space: nowrap; min-height: 36px; }
.btn:hover { background: var(--superficie-2); }
.btn.primario { background: var(--primaria); border-color: var(--primaria); color: #fff; font-weight: 600; }
.btn.primario:hover { background: var(--primaria-forte); }
.btn.perigo { color: var(--perigo); }
.btn.mini { padding: 3px 8px; min-height: 28px; font-size: 12px; }
.btn.tracejado { border-style: dashed; color: var(--primaria-forte); font-weight: 600; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-texto { border: 0; background: none; color: var(--primaria-forte); cursor: pointer; padding: 4px; }
input, select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--superficie); }
input[type=checkbox] { width: auto; }
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 2px solid var(--primaria); outline-offset: 1px; }

/* ---------- chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--superficie-2); color: var(--texto-2); white-space: nowrap; }
.chip.ok { background: var(--ok-fundo); color: var(--ok); }
.chip.alerta { background: var(--alerta-fundo); color: var(--alerta); }
.chip.perigo { background: var(--perigo-suave); color: var(--perigo); }
.chip.info { background: var(--info-fundo); color: var(--info); }
.chip.roxo { background: var(--roxo-fundo); color: var(--roxo); }
.chip.prim { background: var(--primaria-suave); color: var(--primaria-forte); }

/* ---------- login ---------- */
.pagina-login { display: grid; place-items: center; padding: 16px; min-height: 100%; box-sizing: border-box; }
#tela-login.pagina-login { min-height: 100vh; }
.login-caixa { width: 100%; max-width: 380px; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 14px; padding: 28px; box-shadow: var(--sombra); }
.login-caixa .sub { color: var(--texto-2); margin: 6px 0 22px; }
.login-caixa form { display: grid; gap: 14px; }
.login-caixa label { display: grid; gap: 6px; font-weight: 600; font-size: 13px; }
.login-caixa .btn { padding: 10px; }
.msg-erro { color: var(--perigo); min-height: 1.2em; margin: 0; }

/* ---------- páginas de conteúdo ---------- */
.pagina-app { display: flex; flex-direction: column; }
.conteudo { width: 100%; max-width: 1360px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.cabecalho { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.cabecalho .acoes { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.card { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 16px; }
.card.sem-pad { padding: 0; overflow: hidden; }
.card-titulo { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--borda); }
.card-titulo .acoes { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 14px 16px; }
.kpi b { display: block; font-size: 26px; line-height: 1.1; }
.kpi.perigo b { color: var(--perigo); }
.kpi.alerta b { color: var(--alerta); }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtros select, .filtros input[type=search] { width: auto; min-width: 160px; }
.filtros label.check, .card label.check { display: inline-flex; gap: 6px; align-items: center; }
.card label.check { margin-top: 10px; font-size: 13px; color: var(--texto-2); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--borda); }
.tabs button { border: 0; background: none; padding: 10px 12px; cursor: pointer; color: var(--texto-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button.ativo { color: var(--primaria-forte); border-bottom-color: var(--primaria); font-weight: 600; }
.tabela-box { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--superficie-2); vertical-align: top; }
.tabela th { font-size: 12px; color: var(--texto-2); font-weight: 600; background: var(--superficie); position: sticky; top: 0; }
.tabela tr.clicavel { cursor: pointer; }
.tabela tr.clicavel:hover, .tabela tr.sel { background: var(--primaria-suave); }
.tabela td.acoes { text-align: right; white-space: nowrap; }
.vazio-box { padding: 28px; text-align: center; color: var(--texto-2); }

/* ---------- divisão lista + detalhe ---------- */
.divide { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.divide > .principal { flex: 999 1 560px; min-width: 0; }
.divide > .lateral { flex: 1 1 380px; min-width: 0; }
.detalhe { display: flex; flex-direction: column; gap: 14px; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.dl dt { color: var(--texto-2); }
.dl dd { margin: 0; word-break: break-word; }
.linha-tempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.linha-tempo li { border-left: 2px solid var(--borda); padding: 2px 0 2px 12px; }
.linha-tempo li.comentario { border-left-color: var(--primaria); }
.linha-tempo .quando { font-size: 12px; color: var(--texto-2); }
.linha-tempo .texto { white-space: pre-wrap; }

/* ---------- inbox (0.12) ---------- */
.inbox { flex: 1; min-height: 0; display: grid; grid-template-columns: 330px minmax(0, 1fr) 340px; }
.inbox.sem-painel { grid-template-columns: 330px minmax(0, 1fr); }
.inbox.sem-painel .painel-cliente { display: none; }
.avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px;
  color: #0b1110; background: #2bb3a5; letter-spacing: .02em; }
.avatar.grande { width: 64px; height: 64px; font-size: 20px; }
.avatar.av0 { background: #2bb3a5; } .avatar.av1 { background: #f4a259; } .avatar.av2 { background: #8ab4f8; }
.avatar.av3 { background: #e78fb3; } .avatar.av4 { background: #b9a3f5; } .avatar.av5 { background: #7fd18b; }

.lista { border-right: 1px solid var(--borda); display: flex; flex-direction: column; min-height: 0; }
.lista-topo { padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 10px; }
.busca-caixa { display: flex; align-items: center; gap: 8px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 10px;
  padding: 0 10px; height: 40px; color: var(--texto-2); }
.busca-caixa:focus-within { border-color: var(--primaria); }
.busca-caixa svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.busca-caixa input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 0; height: 100%; }
.lista-filtros { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; background: #1a2220; border-radius: 10px; padding: 3px; }
.lista-filtros button { border: 0; background: none; padding: 6px 2px; border-radius: 8px; cursor: pointer; color: var(--texto-2);
  display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 11.5px; font-weight: 600; }
.lista-filtros button b { font-size: 15px; color: var(--texto); }
.lista-filtros button:hover { background: var(--superficie-2); }
.lista-filtros button.ativo { background: var(--primaria); color: #0b1110; }
.lista-filtros button.ativo b { color: #0b1110; }
.lista-fila { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--texto-2); }
.lista-fila select { flex: 1; height: 32px; padding: 0 8px; }
.conversas { list-style: none; margin: 0; padding: 0 8px 8px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.conversas li { padding: 10px; border-radius: 12px; cursor: pointer; display: flex; gap: 10px; }
.conversas li:hover { background: var(--superficie-2); }
.conversas li:focus-visible { outline: 2px solid var(--primaria); outline-offset: -2px; }
.conversas li.sel { background: #1d2c29; box-shadow: inset 3px 0 0 var(--primaria); }
.cv-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cv-linha { display: flex; gap: 8px; align-items: baseline; }
.cv-nome { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-hora { color: var(--texto-2); font-size: 11px; }
.cv-ultima { color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.conversas .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.lista-vazia { padding: 24px; color: var(--texto-2); text-align: center; cursor: default !important; }

.conversa { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--superficie); }
.vazio { display: grid; place-items: center; color: var(--texto-2); }
.conversa-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px;
  background: var(--superficie); border-bottom: 1px solid var(--borda); }
.conversa-topo .avatar { width: 42px; height: 42px; }
.conversa-id { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.conversa-nome { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.conversa-nome b { font-size: 16px; }
.conversa-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.conversa-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.btn-icone { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto);
  display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.btn-icone:hover, .btn-icone:focus-visible { border-color: var(--primaria); color: var(--primaria-forte); }
.btn-icone svg, .conversa-acoes .btn svg, .btn-enviar svg, .btn-ferr svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }
.conversa-acoes .btn { height: 38px; display: inline-flex; align-items: center; gap: 6px; }
.btn-voltar { display: none; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--texto-2); }

.mensagens { flex: 1; overflow-y: auto; padding: 18px 6%; display: flex; flex-direction: column; gap: 7px;
  background: var(--chat-fundo) var(--chat-padrao) repeat; background-size: 320px; }
.msg { max-width: min(64%, 620px); padding: 8px 12px 6px; border-radius: 14px; box-shadow: 0 1px 1.5px rgba(0, 0, 0, .10);
  word-wrap: break-word; white-space: pre-wrap; line-height: 1.45; }
.msg.entrada { align-self: flex-start; background: var(--entrada); border-top-left-radius: 4px; }
.msg.saida { align-self: flex-end; background: var(--saida); border-top-right-radius: 4px; }
.msg.saida.bot { background: var(--msg-bot); }
.msg.nota { align-self: flex-end; background: var(--nota); border: 1px solid var(--nota-borda); }
.msg.sistema { align-self: center; max-width: 80%; display: flex; gap: 8px; align-items: center; background: var(--superficie);
  border: 1px dashed var(--borda); box-shadow: none; color: var(--texto-2); font-size: 12px; border-radius: 10px; padding: 6px 12px; white-space: normal; }
.msg.sistema svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.msg-tag { font-size: 11px; font-weight: 700; color: var(--texto-2); margin-bottom: 2px; }
.msg-tag.autor { color: var(--primaria-forte); }
.msg.nota .msg-tag { color: var(--alerta); }
.msg-meta { display: flex; gap: 6px; justify-content: flex-end; font-size: 10.5px; color: var(--texto-2); margin-top: 2px; }
.msg-meta .falha { color: var(--perigo); font-weight: 600; }
.msg img, .msg video { max-width: 100%; max-height: 320px; border-radius: 8px; display: block; }
.msg audio { width: 260px; max-width: 100%; }
.msg .doc { display: inline-flex; gap: 6px; align-items: center; }
.msg .tipo-aviso { color: var(--texto-2); font-style: italic; }
.dia { align-self: center; font-size: 11.5px; color: var(--texto-2); background: var(--superficie); padding: 4px 12px; border-radius: 999px;
  margin: 6px 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.mais { align-self: center; }

.compositor { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 14px; background: var(--superficie);
  border-top: 1px solid var(--borda); }
.compositor.modo-nota { background: var(--nota); }
.compositor-modo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.segmento { display: inline-flex; background: var(--superficie-2); border-radius: 9px; padding: 3px; }
.segmento button { border: 0; background: none; border-radius: 7px; padding: 6px 12px; cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--texto-2); }
.segmento button.ativo { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.compositor.modo-nota .segmento button.ativo { background: var(--nota); color: var(--alerta); }
.compositor-linha { display: flex; gap: 8px; align-items: flex-end; }
.compositor-caixa { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--borda); border-radius: 12px;
  background: var(--superficie); padding: 8px 10px; }
.compositor-caixa:focus-within { border-color: var(--primaria); }
.compositor.modo-nota .compositor-caixa { border-color: var(--nota-borda); }
.compositor-caixa textarea { border: 0; outline: none; resize: none; background: transparent; padding: 0; max-height: 160px; min-height: 24px; box-shadow: none; }
.compositor-ferramentas { display: flex; gap: 4px; margin-top: 6px; }
.btn-ferr { height: 30px; min-width: 30px; padding: 0 9px; border-radius: 8px; border: 0; background: var(--superficie-2); color: var(--texto-2);
  cursor: pointer; font-weight: 700; display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; }
.btn-ferr.ia { background: var(--roxo-fundo); color: var(--roxo); font-weight: 600; }
.btn-ferr svg { width: 14px; height: 14px; }
.btn-enviar { height: 46px; padding: 0 18px; border-radius: 12px; display: inline-flex; gap: 8px; align-items: center; }
.compositor.modo-nota .btn-enviar { background: var(--nota-borda); border-color: var(--nota-borda); color: var(--texto); }
.aviso-janela { width: 100%; background: var(--alerta-fundo); color: var(--alerta); padding: 8px 10px; border-radius: 8px; font-size: 13px; }
.qr-lista { position: absolute; left: 16px; right: 16px; bottom: calc(100% + 4px); max-height: 260px; overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; box-shadow: var(--sombra);
  list-style: none; margin: 0; padding: 4px; z-index: 5; }
.qr-lista li button { width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.qr-lista li button:hover, .qr-lista li button.sel { background: var(--primaria-suave); }
.qr-lista b { color: var(--primaria-forte); margin-right: 6px; }

/* painel do cliente (sempre escuro, como a lista) */
.painel-cliente { border-left: 1px solid #232d2b; overflow-y: auto; display: flex; flex-direction: column; }
.pc-cab { padding: 18px 16px 14px; display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; border-bottom: 1px solid var(--borda); }
.pc-nome { font-size: 16px; }
.pc-chips, .pc-botoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pc-chips:empty { display: none; }
.pc-botoes { margin-top: 4px; }
.pc-abas { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; border-bottom: 1px solid var(--borda); }
.pc-abas button { white-space: nowrap; border: 0; background: none; padding: 11px 4px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.pc-abas button.ativo { color: var(--primaria-forte); box-shadow: inset 0 -2px 0 var(--primaria); }
.pc-abas .cont { font-size: 10.5px; background: var(--superficie-2); border-radius: 999px; padding: 1px 6px; }
.pc-corpo { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.pc-dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 14px; font-size: 13px; }
.pc-dl dt { color: var(--texto-2); }
.pc-dl dd { margin: 0; overflow-wrap: anywhere; }
.pc-aberto { border: 1px solid var(--borda); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 3px; background: var(--superficie-2); }
.pc-aberto b { font-size: 22px; }
.pc-titulo { border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.pc-titulo .linha, .sol-item .linha { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.pc-titulo .linha-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.pc-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pc-hist li { display: flex; flex-direction: column; padding-left: 14px; border-left: 2px solid var(--primaria); }
.sol-item { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 12px;
  text-decoration: none; color: inherit; }
.sol-item:hover { background: var(--superficie-2); }
.sol-item .linha { justify-content: flex-start; }

/* ---------- menu (admin) ---------- */
.arvore { list-style: none; margin: 0; padding: 0; }
.arvore li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--superficie-2); }
.arvore li.n2 { padding-left: 48px; }
.arvore li.n3 { padding-left: 84px; }
.arvore .cod { min-width: 30px; height: 28px; padding: 0 6px; border-radius: 8px; background: var(--superficie-2);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.arvore .op-info { flex: 1 1 220px; min-width: 0; }
.arvore .op-info b { display: block; }
.arvore .acoes { display: flex; gap: 4px; flex-wrap: wrap; }
.arvore .chip { flex: none; }
.previa-zap { background: #ece5dd; border-radius: 12px; padding: 12px; color: #1b2422; display: flex; flex-direction: column; gap: 6px; }
.previa-zap .bolha { background: #fff; border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; font-size: 13px; max-width: 92%; }
.previa-zap .botao { background: #fff; border-radius: 8px; padding: 7px; text-align: center; color: #0b7a70; font-weight: 600; font-size: 13px; max-width: 92%; }
.grade-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

/* ---------- diálogo ---------- */
dialog.dlg { border: 0; border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 24px)); box-shadow: 0 20px 60px rgba(0,0,0,.3);
  background: var(--superficie); color: var(--texto); }
dialog.dlg.largo { width: min(820px, calc(100vw - 24px)); }
dialog.dlg::backdrop { background: rgba(10, 16, 15, .45); }
.dlg form { display: flex; flex-direction: column; max-height: calc(100vh - 40px); }
.dlg-cab { padding: 16px 18px 6px; display: flex; align-items: center; gap: 8px; }
.dlg-cab h2 { flex: 1; }
.dlg-corpo { padding: 8px 18px 14px; overflow-y: auto; display: grid; gap: 12px; }
.dlg-corpo .campo { display: grid; gap: 5px; }
.dlg-corpo .campo > span { font-weight: 600; font-size: 13px; }
.dlg-corpo .ajuda { font-size: 12px; color: var(--texto-2); }
.dlg-corpo .multi { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.dlg-corpo .multi label, .dlg-corpo label.check { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; }
.dlg-corpo .info { background: var(--superficie-2); border-radius: 8px; padding: 8px 10px; font-size: 13px; white-space: pre-wrap; }
.dlg-erro { color: var(--perigo); padding: 0 18px; min-height: 0; }
.dlg-rodape { padding: 12px 18px 16px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--borda); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--texto); color: var(--fundo);
  padding: 9px 16px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 50; max-width: 90vw; }
.toast.vis { opacity: 1; }

@media (max-width: 1100px) {
  .inbox { grid-template-columns: 300px minmax(0, 1fr); }
  .painel-cliente { display: none; }
  .inbox.com-painel .painel-cliente { display: flex; position: fixed; right: 0; top: 52px; bottom: 0; width: min(340px, 92vw);
    z-index: 20; box-shadow: var(--sombra); }
}
@media (max-width: 820px) {
  .topo-usuario #topo-tenant { display: none; }
  .topo { padding: 6px 12px 0; gap: 4px 12px; }
  .topo-nav { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
  .topo-nav::-webkit-scrollbar { display: none; }
  .topo-nav a { white-space: nowrap; flex: none; }
  .inbox, .inbox.sem-painel { grid-template-columns: 1fr; }
  .inbox.com-conversa .lista { display: none; }
  .inbox:not(.com-conversa) .conversa, .vazio { display: none; }
  .btn-voltar { display: block; }
  .mensagens { padding: 12px; }
  .msg { max-width: 88%; }
  .conteudo { padding: 12px; }
}

/* ---- IA ---- */
.kpi-linha { font-size: 22px; margin: 4px 0 8px; }
.kpi-linha span { font-size: 14px; }
.barra { height: 8px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; margin-bottom: 12px; }
.barra span { display: block; height: 100%; width: 0; background: var(--primaria); }
.barra span.alerta { background: var(--alerta); }
.barra span.perigo { background: var(--perigo); }
.info-bloco { white-space: pre-wrap; background: var(--superficie-2); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.tabela.compacta td { padding: 6px 4px; font-size: 13px; }
.msg .transcricao { margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,.05); font-size: 13px; }
.msg .transcricao b { font-size: 11px; color: var(--texto-2); font-weight: 600; display: block; }
.ia-caixa { white-space: pre-wrap; background: var(--roxo-fundo); color: var(--texto); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.btn.ia { border-color: var(--roxo); color: var(--roxo); }
.lista-teste { list-style: none; padding: 0; margin: 10px 0 0; font-size: 14px; }
.lista-teste li { padding: 4px 0; }

/* ---- cadastro / empresas ---- */
.login-caixa.larga { max-width: 460px; }
.login-caixa fieldset { border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px 14px; margin: 0; display: grid; gap: 12px; }
.login-caixa legend { font-weight: 700; font-size: 13px; padding: 0 6px; }
.login-caixa label.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.login-caixa .ajuda { font-weight: 400; font-size: 12px; color: var(--texto-2); }
.login-rodape { text-align: center; margin: 16px 0 0; font-size: 14px; color: var(--texto-2); }
#topo-tenant.clicavel { cursor: pointer; }
#topo-tenant.clicavel::after { content: " ▾"; }
.passos-meta { margin: 0; padding-left: 18px; font-size: 13px; color: var(--texto-2); }
.passos-meta li { margin: 2px 0; }

/* ---- sessão de suporte (portal) ---- */
.faixa-suporte { background: #f5b301; color: #1b1300; font-size: 13px; font-weight: 600; text-align: center; padding: 6px 12px; }

/* ---- painel da plataforma ---- */
.plat-marca small { font-weight: 500; font-size: 12px; color: var(--texto-2); margin-left: 6px; }
.kpis-plat { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpis-plat .kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 14px 16px; }
.kpis-plat .kpi b { display: block; font-size: 24px; }
.kpis-plat .kpi span { font-size: 12px; color: var(--texto-2); }
.lista-alertas { list-style: none; margin: 0; padding: 0; }
.lista-alertas li { padding: 8px 4px; border-bottom: 1px solid var(--borda); font-size: 14px; display: flex; gap: 8px; align-items: center; }
.lista-alertas li:last-child { border-bottom: 0; }
.filtros-plat { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.filtros-plat input[type="search"] { flex: 1 1 260px; }
.linha-clicavel { cursor: pointer; }
.linha-clicavel:hover td { background: var(--superficie-2); }
.paginacao { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 10px 12px; font-size: 13px; color: var(--texto-2); }
.voltar { margin-bottom: 10px; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .grade-2 { grid-template-columns: 1fr; } }
.senha-temp { font-family: ui-monospace, monospace; font-size: 20px; letter-spacing: 1px; background: var(--superficie-2); padding: 10px 12px; border-radius: 8px; text-align: center; user-select: all; }
.json-pequeno { font-family: ui-monospace, monospace; font-size: 12px; color: var(--texto-2); max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clicavel { cursor: pointer; }
.btn-texto.voltar { display: block; margin: 0 0 10px; padding: 0; text-align: left; }

/* ---------- situação do número na Meta ---------- */
.meta-bloco { border: 1px solid var(--borda); border-left: 4px solid var(--borda); border-radius: 10px; padding: 12px 14px; margin-top: 12px; }
.meta-bloco.nivel-ok { border-left-color: var(--ok); }
.meta-bloco.nivel-alerta { border-left-color: var(--alerta); }
.meta-bloco.nivel-bloqueado { border-left-color: var(--perigo); }
.meta-topo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.meta-topo .acoes { display: flex; gap: 8px; align-items: center; }
.meta-resumo { margin: 8px 0 6px; font-weight: 600; }
.meta-lista { margin: 4px 0 8px; padding-left: 18px; }
.meta-lista.perigo { color: var(--perigo); }
.meta-lista.alerta { color: var(--alerta); }
.meta-itens { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 8px 0; font-size: 13px; }
.meta-itens dt { color: var(--texto-2); display: flex; align-items: center; gap: 6px; }
.meta-itens dd { margin: 0; overflow-wrap: anywhere; }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--texto-2); flex: none; }
.ponto.ok { background: var(--ok); } .ponto.alerta { background: var(--alerta); } .ponto.erro { background: var(--perigo); }
@media (max-width: 600px) { .meta-itens { grid-template-columns: 1fr; } .meta-itens dd { margin-bottom: 4px; } }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.aviso-faixa { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--alerta-fundo); border: 1px solid var(--alerta); font-size: 14px; }
.aviso-faixa.perigo { background: var(--perigo-suave, #fde8e7); border-color: var(--perigo); }
.aviso-faixa .btn-texto { padding: 0; font: inherit; text-decoration: underline; }
.campo-segredo { -webkit-text-security: disc; text-security: disc; font-family: ui-monospace, monospace; letter-spacing: .05em; }
.campo-segredo::placeholder { font-family: inherit; letter-spacing: normal; }

/* ---------- menu interativo recolhível ---------- */
.arvore li.sub-grupo { display: block; padding: 0; border-bottom: 0; }
.arvore li.sub-grupo[hidden] { display: none; }
.arvore li.tem-sub { background: color-mix(in srgb, var(--superficie-2) 35%, transparent); }
.arvore .op-abrir { flex: 1 1 220px; min-width: 0; display: grid; grid-template-columns: 18px 1fr; column-gap: 6px; text-align: left;
  background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.arvore .op-abrir .seta { grid-row: span 2; color: var(--texto-2); font-size: 14px; line-height: 1.4; }
.arvore .op-abrir b { display: block; }
.arvore .op-abrir:hover b, .arvore .op-abrir:focus-visible b { text-decoration: underline; }
.arvore .vazio-sub { padding: 10px 14px 10px 84px; }

/* ---------- regras de atendimento ---------- */
.regras { display: grid; gap: 16px; max-width: 980px; }
.regras h2 { margin-bottom: 10px; }
.regra-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 6px; }
.regra-sub { padding-left: 26px; border-left: 2px solid var(--borda); margin: 6px 0 10px; }
.regra-texto { display: grid; gap: 4px; margin: 8px 0 12px; }
.regra-texto > span:first-child { font-weight: 600; font-size: 13px; }
.regra-texto textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.num-curto { width: 76px; }
.dias { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0; }
.rodape-fixo { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(transparent, var(--fundo) 40%); display: flex; justify-content: flex-end; }

.ia-instrucoes { min-height: 320px; font-size: 14px; line-height: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Clientes e módulos (0.10.0) */
.dlg-grupo { margin: 6px 0 -4px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-2);
  border-top: 1px solid var(--borda); padding-top: 10px; }
.busca-larga { flex: 1 1 320px; min-width: 0; }
.paginacao { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 10px; }
.tabela th.num, .tabela td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela td.acoes-linha { white-space: nowrap; text-align: right; width: 1%; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
#cad-titulo .voltar { font-size: 14px; font-weight: 500; margin-right: 6px; vertical-align: middle; }
.ficha-topo { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.ficha-id { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ficha-num { display: grid; justify-items: end; gap: 2px; }
.ficha-num b { font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ficha-num b.perigo, .perigo { color: var(--perigo); }
.grade-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.grade-dados h3 { margin: 0 0 10px; font-size: 14px; }
#sub-painel { margin-top: 16px; display: grid; gap: 10px; }
.sub-cab { display: flex; gap: 6px; align-items: baseline; }
.grade-sub { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 520px) { .grade-sub, .grade-dados { grid-template-columns: minmax(0, 1fr); } .ficha-num { justify-items: start; } }
.tabs button .chip { margin-left: 4px; }
dialog.dlg.duas-col .dlg-corpo { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
dialog.dlg.duas-col .dlg-corpo > .dlg-grupo, dialog.dlg.duas-col .dlg-corpo > .info,
dialog.dlg.duas-col .dlg-corpo > .campo:has(textarea) { grid-column: 1 / -1; }
@media (max-width: 620px) { dialog.dlg.duas-col .dlg-corpo { grid-template-columns: minmax(0, 1fr); } }
.sub-tabs { padding: 0 8px; align-items: center; }
.sub-tabs .acoes { margin-left: auto; padding: 6px 4px; }
.mod-lista { display: grid; gap: 16px; }
.mod-card { display: grid; gap: 12px; }
.mod-card h2 { margin: 0 0 2px; }
.mod-ent { border: 1px solid var(--borda); border-radius: 10px; padding: 8px 12px; }
.mod-ent summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.mod-ent[open] summary { margin-bottom: 8px; }
.tabela.compacta th, .tabela.compacta td { padding: 6px 10px; }
.mini-select { width: auto; padding: 3px 8px; font-size: 12px; min-height: 28px; }
.alerta-txt { color: var(--alerta); }
.passos { margin: 0; padding-left: 20px; display: grid; gap: 8px; }

/* ---- Papéis e permissões (0.11.0) */
.perm-grade { display: grid; gap: 14px; }
.perm-grupo h3 { margin: 4px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-2); }
.perm-linha { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 8px 0; border-top: 1px solid var(--borda); }
.perm-rotina { font-weight: 600; font-size: 14px; }
.perm-acoes { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.perm-cel { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; border: 1px solid var(--borda); border-radius: 8px; padding: 4px 9px; }
.perm-cel.sim { border-color: color-mix(in srgb, var(--ok) 55%, var(--borda)); }
.perm-cel.nao { color: var(--texto-2); }
.perm-cel.exc { box-shadow: inset 0 0 0 1px var(--alerta); }
.perm-cel.bloqueada { opacity: .5; }
.perm-tri select { width: auto; min-height: 26px; padding: 1px 6px; font-size: 12px; }
.grade-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.grade-form .largo { grid-column: 1 / -1; }
.multi-linha { display: flex; flex-wrap: wrap; gap: 6px 16px; }
@media (max-width: 620px) { .perm-linha, .grade-form { grid-template-columns: minmax(0, 1fr); } }

/* ---- botão de tema */
.btn-tema { background: none; border: 1px solid var(--borda); border-radius: 8px; width: 32px; height: 30px; display: inline-grid; place-items: center;
  cursor: pointer; color: var(--texto-2); padding: 0; }
.btn-tema:hover, .btn-tema:focus-visible { color: var(--texto); border-color: var(--primaria); }
.btn-tema svg { width: 16px; height: 16px; }
#painel-vazio { background: var(--chat-fundo) var(--chat-padrao) repeat; background-size: 320px; }
#painel-vazio p { background: var(--superficie); padding: 8px 14px; border-radius: 999px; box-shadow: var(--sombra); }

/* ---- Barra do topo, lista lateral e painel do cliente sempre escuros (nos dois temas) */
.topo, .lista, .painel-cliente {
    --fundo: #0f1413; --superficie: #171d1c; --superficie-2: #1f2725; --borda: #2c3634;
    --texto: #e6eceb; --texto-2: #9aa9a5; --primaria: #2bb3a5; --primaria-forte: #46c7ba; --primaria-suave: #16312e;
    --entrada: #1f2725; --saida: #173a35; --nota: #2e2610; --nota-borda: #5c4a14;
    --perigo: #f97066; --perigo-suave: #3a1513; --alerta: #fdb022; --alerta-fundo: #2e2210;
    --info: #93b4ff; --info-fundo: #17223d; --roxo: #d8b4fe; --roxo-fundo: #2a1840;
    --ok: #4ade80; --ok-fundo: #12301d; --sombra: 0 1px 2px rgba(0, 0, 0, .4);
  color-scheme: dark; color: var(--texto);
}
.topo { background: #111816; border-bottom-color: #232d2b; }
.lista, .painel-cliente { background: #141b19; border-right-color: #232d2b; }
.marca-icone { width: 24px; height: 24px; flex: none; display: block; }
.marca.grande .marca-icone { width: 34px; height: 34px; }