/* [hidden] precisa vencer display:grid/flex das classes (ex.: .modal), senão o modal vazio fica sempre na tela. */
[hidden] { display: none !important; }

/* _losaccochat — folha de estilo única. Sem framework, sem CDN. */

/* ---------- tokens ----------
   Paleta oficial do losacco-painel (src/lib/constants.js). Tema padrão ESCURO,
   igual ao painel. O claro é derivado com o mesmo dourado; nele o dourado de
   texto escurece para manter contraste sobre branco. */
:root {
  --fundo: #1a1d21;          /* bg */
  --fundo-2: #23272b;        /* bgCard */
  --fundo-3: #2a2f34;        /* bgHover */
  --input: #2e3338;          /* bgInput */
  --borda: #3a3f45;          /* border */
  --borda-forte: #4a4f55;
  --texto: #fdfdfd;          /* text */
  --texto-2: #9ca3af;        /* textMuted */
  --texto-3: #6b7280;        /* textDim */
  --ouro: #caa461;           /* gold: destaque principal */
  --ouro-claro: #d5ae6b;     /* goldLight */
  --ouro-suave: #ecc685;     /* goldSoft */
  --ouro-quente: #e0ba77;    /* goldWarm */
  --sobre-ouro: #1a1d21;     /* onGold: texto sobre botão dourado */
  --cinza: #485158;          /* gray */
  --marca: #caa461;          /* dourado usado como TEXTO */
  --marca-clara: #d5ae6b;
  --marca-fundo: rgba(202,164,97,.14);
  --ok: #22c55e;             /* success */
  --alerta: #f59e0b;         /* prioridade média */
  --laranja: #f97316;        /* prioridade alta */
  --erro: #ef4444;           /* danger / urgente */
  --info: #3b82f6;           /* prioridade baixa */
  --bolha-entrada: #2a2f34;
  --bolha-saida: #3a3326;
  --bolha-nota: #33301f;     /* anotação interna: âmbar escuro, só a equipe vê */
  --sombra: 0 1px 2px rgba(0,0,0,.35);
  --raio: 10px;
  --topo-altura: 56px;
  /* marca d'água da conversa: véu da cor do fundo por cima da logo (94% = logo a ~6%) */
  --marca-agua-veu: rgba(26, 29, 33, .94);
  color-scheme: dark;
}
html[data-tema="claro"] {
  --fundo: #f5f3ee;
  --fundo-2: #ffffff;
  --fundo-3: #efebe2;
  --input: #fbfaf7;
  --borda: #e3ddd0;
  --borda-forte: #cfc7b6;
  --texto: #1a1d21;
  --texto-2: #4b5563;
  --texto-3: #6b7280;
  --marca: #8f6c2f;
  --marca-clara: #a8843f;
  --marca-fundo: rgba(202,164,97,.18);
  --bolha-entrada: #ffffff;
  --bolha-saida: #f5ecd9;
  --bolha-nota: #fff7dc;     /* anotação interna: amarelo suave */
  --sombra: 0 1px 2px rgba(26,29,33,.06), 0 4px 14px rgba(26,29,33,.05);
  --marca-agua-veu: rgba(245, 243, 238, .95);   /* claro: logo dourada a ~5% */
  color-scheme: light;
}

/* scrollbar fina, igual ao painel */
* { scrollbar-width: thin; scrollbar-color: #3a3f45 #1a1d21; }
html[data-tema="claro"] * { scrollbar-color: #cfc7b6 #f5f3ee; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #1a1d21; }
::-webkit-scrollbar-thumb { background: #3a3f45; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4a4f55; }
html[data-tema="claro"] ::-webkit-scrollbar-track { background: #f5f3ee; }
html[data-tema="claro"] ::-webkit-scrollbar-thumb { background: #cfc7b6; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body { overflow: hidden; }   /* só as colunas internas rolam; o documento nunca (20/09) */
body {
  margin: 0;
  font-family: 'Outfit', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
b, strong { font-weight: 600; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .92em; }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; border-radius: 4px; }

/* ---------- peças comuns ---------- */
.botao {
  border: 1px solid var(--borda-forte); background: var(--fundo-2); color: var(--texto);
  padding: 7px 13px; border-radius: 8px; cursor: pointer; transition: background .12s, border-color .12s;
}
.botao:hover { background: var(--fundo-3); }
.botao-primario { background: var(--ouro); border-color: var(--ouro); color: var(--sobre-ouro); font-weight: 600; }
.botao-primario:hover { background: var(--ouro-claro); border-color: var(--ouro-claro); }
.botao-primario:disabled { opacity: .45; cursor: not-allowed; }
.botao-discreto { background: transparent; border-color: transparent; color: var(--texto-2); }
.botao-largo { width: 100%; padding: 10px; margin-top: 6px; }
.botao-pequeno { padding: 4px 9px; font-size: 12.5px; border-radius: 7px; }
.link { background: none; border: 0; color: var(--marca); cursor: pointer; padding: 0; font-size: 12.5px; text-decoration: underline; }
.icone {
  width: 34px; height: 34px; border: 1px solid transparent; background: transparent;
  border-radius: 8px; cursor: pointer; font-size: 17px; color: var(--texto-2); line-height: 1;
}
.icone:hover { background: var(--fundo-3); color: var(--texto); }

.selo {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
  background: var(--fundo-3); color: var(--texto-2); border: 1px solid var(--borda); white-space: nowrap;
}
.selo-ok { background: rgba(22,163,74,.12); color: var(--ok); border-color: rgba(22,163,74,.3); }
.selo-aviso { background: rgba(217,119,6,.12); color: var(--alerta); border-color: rgba(217,119,6,.3); }
.selo-erro { background: rgba(220,38,38,.12); color: var(--erro); border-color: rgba(220,38,38,.3); }

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--marca-fundo); color: var(--marca);
  font-size: 11.5px; font-weight: 600; flex: none; letter-spacing: .3px;
}
.avatar-grande { width: 40px; height: 40px; font-size: 14px; }
/* anéis do avatar na lista (20/09): prioridade colado; estado do fluxo com folga, estilo Story */
.avatar-prio { box-shadow: 0 0 0 2px var(--cor-prio); }
.avatar-story { box-shadow: 0 0 0 2px var(--fundo), 0 0 0 4px var(--cor-estado); }
.avatar-prio.avatar-story { box-shadow: 0 0 0 2px var(--cor-prio), 0 0 0 3.5px var(--fundo), 0 0 0 5.5px var(--cor-estado); }
.item:hover .avatar-story, .item.ativa .avatar-story { box-shadow: 0 0 0 2px var(--fundo-3), 0 0 0 4px var(--cor-estado); }
.item:hover .avatar-prio.avatar-story, .item.ativa .avatar-prio.avatar-story { box-shadow: 0 0 0 2px var(--cor-prio), 0 0 0 3.5px var(--fundo-3), 0 0 0 5.5px var(--cor-estado); }

.vazio { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--texto-3); }
.vazio-icone { font-size: 34px; opacity: .5; }
.vazio-logo { width: 96px; height: auto; opacity: .35; margin-bottom: 6px; }

/* ---------- login ---------- */
.tela-login {
  min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px;
  background: radial-gradient(1000px 500px at 50% -10%, var(--marca-fundo), var(--fundo));
}
.login-caixa { width: 100%; max-width: 380px; background: var(--fundo-2); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra); padding: 26px; }
.login-marca { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; }
.login-logo { width: 54px; height: auto; flex: none; }
.login-marca h1 { margin: 0; font-size: 18px; }
.login-marca p { margin: 2px 0 0; font-size: 12px; color: var(--texto-2); }
#form-login label { display: block; font-size: 12.5px; color: var(--texto-2); margin: 12px 0 4px; }
#form-login input { width: 100%; padding: 9px 11px; border: 1px solid var(--borda); border-radius: 8px; background: var(--input); }
.login-erro { margin: 12px 0 0; font-size: 12.5px; color: var(--erro); background: rgba(220,38,38,.1); padding: 7px 10px; border-radius: 7px; }
.login-demo { margin-top: 22px; border-top: 1px dashed var(--borda); padding-top: 14px; }
.login-demo-titulo { margin: 0 0 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--texto-3); }
.login-atalhos { display: flex; flex-wrap: wrap; gap: 6px; }
.login-dica { margin: 10px 0 0; font-size: 12px; color: var(--texto-3); }
.login-rodape { font-size: 12px; color: var(--texto-3); }

/* ---------- app ---------- */
.app { height: 100%; display: flex; flex-direction: column; }

.topo {
  height: var(--topo-altura); flex: none; display: flex; align-items: center; gap: 14px; padding: 0 14px;
  background: #1a1d21; border-bottom: 1px solid #3a3f45; color: #fdfdfd;
}
.topo-marca { display: flex; align-items: center; gap: 9px; }
.topo-logo { height: 24px; width: auto; display: block; }
.topo-produto { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: #caa461; border-left: 1px solid #3a3f45; padding-left: 9px; }
.topo-abas { display: flex; gap: 4px; margin-left: 12px; }
.aba { border: 0; background: transparent; color: #9ca3af; padding: 7px 14px; border-radius: 8px; cursor: pointer; }
.aba:hover { background: #2a2f34; color: #fdfdfd; }
.aba.ativa { background: rgba(202,164,97,.14); color: #caa461; font-weight: 600; }
.topo .icone { color: #9ca3af; }
.topo .icone:hover { background: #2a2f34; color: #fdfdfd; }
.topo .botao-discreto { color: #9ca3af; }
.topo-direita { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.canal-seg { display: inline-flex; background: #2e3338; border: 1px solid #3a3f45; border-radius: 9px; padding: 2px; }
.canal-seg-opcao { border: 0; background: transparent; color: #9ca3af; padding: 5px 11px; border-radius: 7px; font: inherit; font-size: 12.5px; cursor: pointer; }
/* ativo discreto (20/09, Daniel): dourado só como texto e um fundo leve, em vez do botão cheio */
.canal-seg-opcao.ativo { background: var(--marca-fundo); color: var(--marca); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ouro) 45%, transparent); }
.usuario { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.usuario-rotulo { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: .6px; }
.usuario select { background: #2e3338; color: #fdfdfd; border: 1px solid #3a3f45; border-radius: 7px; padding: 4px 7px; font-size: 13px; }
.usuario-nome-btn { background: #2e3338; color: #fdfdfd; border: 1px solid #3a3f45; border-radius: 7px; padding: 4px 7px; font-size: 13px; cursor: pointer; }
.usuario-nome-btn:hover { border-color: var(--marca, #9a7b3a); }

/* ---------- inbox, 3 colunas ---------- */
.inbox { flex: 1; min-height: 0; display: grid; grid-template-columns: 360px minmax(0,1fr) 320px; }
.inbox.sem-ficha { grid-template-columns: 360px minmax(0,1fr); }
.inbox.sem-ficha .coluna-ficha { display: none; }
.coluna { min-height: 0; display: flex; flex-direction: column; background: var(--fundo-2); }
.coluna-lista { border-right: 1px solid var(--borda); }
.coluna-conversa { background: var(--fundo); }
.coluna-ficha { border-left: 1px solid var(--borda); overflow-y: auto; }

/* lista */
.lista-topo { flex: none; padding: 10px; border-bottom: 1px solid var(--borda); display: flex; flex-direction: column; gap: 8px; }
/* abas das etapas do funil: o filtro principal, bem à vista */
/* "Todas" numa linha própria; as etapas em mini-cartões de 3 colunas (6 → 3×2):
   em cima bolinha + rótulo curto (uma palavra, cabe inteiro em ~100px), embaixo o
   número. Nome completo vai no title/aria-label. */
.abas-etapa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.aba-etapa {
  display: grid; grid-template-columns: 8px minmax(0, 1fr); grid-template-areas: "cor nome" "num num";
  align-items: center; column-gap: 6px; row-gap: 3px; min-width: 0;
  padding: 6px 8px; border-radius: 8px; cursor: pointer; text-align: left;
  background: var(--input); color: var(--texto-2); font-size: 12px; line-height: 1.15;
  border: 1px solid var(--borda); transition: border-color .12s, background .12s;
}
.aba-etapa-todas {
  grid-column: 1 / -1; grid-template-columns: 8px minmax(0, 1fr) auto; grid-template-areas: "cor nome num";
  padding: 5px 8px;
}
.aba-etapa:hover { border-color: color-mix(in srgb, var(--cor-etapa) 70%, var(--borda)); color: var(--texto); }
.aba-etapa.ativa { background: color-mix(in srgb, var(--cor-etapa) 18%, var(--fundo-2)); border-color: var(--cor-etapa); color: var(--texto); font-weight: 600; }
.aba-etapa-cor { grid-area: cor; width: 8px; height: 8px; border-radius: 50%; background: var(--cor-etapa); }
.aba-etapa-nome { grid-area: nome; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aba-etapa-num { grid-area: num; font-size: 15px; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.aba-etapa-todas .aba-etapa-num { font-size: 13px; }
.aba-etapa.ativa .aba-etapa-num { color: color-mix(in srgb, var(--cor-etapa) 55%, var(--texto)); }
.busca { position: relative; }
.busca-lupa { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--texto-3); font-size: 15px; }
#busca { width: 100%; padding: 8px 10px 8px 28px; border: 1px solid var(--borda); border-radius: 8px; background: var(--input); }
.filtros-rapidos { display: flex; gap: 5px; flex-wrap: wrap; }
.chip { border: 1px solid var(--borda); background: var(--input); color: var(--texto-2); padding: 3px 10px; border-radius: 999px; font-size: 12.5px; cursor: pointer; }
.chip:hover { border-color: var(--borda-forte); }
.chip.ativa { background: var(--marca-fundo); border-color: var(--marca-fundo); color: var(--marca); font-weight: 600; }
.chip .conta { font-size: 11px; opacity: .8; margin-left: 3px; }
.filtros-selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.filtros-selects select { width: 100%; padding: 5px 7px; font-size: 12.5px; border: 1px solid var(--borda); border-radius: 7px; background: var(--input); }
.lista-resumo { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--texto-3); }

.lista { flex: 1; overflow-y: auto; }
/* Card da lista (20/09, Daniel): esqueleto fixo — cada informação sempre no mesmo lugar, slots
   reservados para o que é opcional (bolinha da etapa, estrela, tipo de caso, ⚠/chips de SLA,
   contador, próxima ação, selos). Linhas com altura fixa + ellipsis: o card não cresce nem encolhe. */
.item {
  display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 3px 9px; align-items: start;
  padding: 9px 11px 7px; border-bottom: 1px solid var(--borda); cursor: pointer; position: relative;
}
.item:hover { background: var(--fundo-3); }
.item.ativa { background: var(--marca-fundo); }
.item.ativa::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ouro); }
.item-corpo { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* linha 1: ● etapa · nome · [★] — bolinha e estrela têm largura fixa mesmo vazias */
.item-linha1 { display: flex; align-items: center; gap: 6px; min-width: 0; height: 18px; }
.item-ponto-etapa { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--cor-etapa, var(--texto-3)); }
.item-ponto-vazio { visibility: hidden; }
.item-nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.item-promissor { flex: none; width: 12px; text-align: center; line-height: 1; }
/* linha 2: prévia, uma linha sempre (vazia ocupa a altura) */
.item-previa { color: var(--texto-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 17px; line-height: 17px; }
/* linha 3: tipo de caso (metade esquerda) | nome da etapa · caso (metade direita) — colunas fixas */
.item-dados {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 6px; align-items: center;
  height: 18px; font-size: 11.5px; color: var(--texto-3);
}
.item-tipo { display: flex; align-items: center; gap: 4px; min-width: 0; }
.item-tipo .tag { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-tipo .tag-mais { flex: none; color: var(--texto-3); border-color: var(--borda); background: transparent; }
.tag-vazia { visibility: hidden; }
.item-etapa-nome { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* etapa sempre na cor dela (a bolinha fica na linha 1) */
.item-etapa { color: var(--cor-etapa); font-weight: 600; }
/* coluna da direita: hora em cima; embaixo o slot fixo de ⚠/chip de SLA + contador (+ ⏰ agendado) */
.item-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; min-width: 34px; }
.item-hora { font-size: 11px; color: var(--texto-3); white-space: nowrap; height: 14px; line-height: 14px; }
.item-meta-slot { display: flex; align-items: center; justify-content: flex-end; gap: 4px; height: 19px; min-width: 19px; white-space: nowrap; }
.contador { background: var(--ouro); color: var(--sobre-ouro); font-size: 11px; font-weight: 600; min-width: 19px; height: 19px; border-radius: 999px; display: grid; place-items: center; padding: 0 5px; }
.sla-vencido { color: var(--erro); border-color: color-mix(in srgb, var(--erro) 55%, transparent); }
.sla-icone { font-size: 14px; line-height: 1; font-weight: 700; }
.item-meta-slot .selo { font-size: 10.5px; padding: 1px 6px; }
.sla-critico { color: var(--alerta); border-color: color-mix(in srgb, var(--alerta) 55%, transparent); }
.sla-atencao { color: var(--info); border-color: color-mix(in srgb, var(--info) 55%, transparent); }
.sla-pausado { color: var(--texto-3); }
.sla-icone.sla-pausado { font-size: 11px; letter-spacing: -2px; }
/* rodapé (largura toda): responsável · ↪ próxima ação · selos (fechada, parada + encerrou) */
.item-rodape { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-width: 0; height: 20px; }
/* responsável na mesma linha dos dados (20/09, Daniel): só as iniciais, num círculo à direita;
   sem dono = "!" em âmbar */
.item-dono {
  justify-self: end; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font-size: 9.5px; font-weight: 600; letter-spacing: .2px; color: var(--texto-2);
  background: var(--fundo-3); border: 1px solid var(--borda); white-space: nowrap;
}
.item-sem-dono { color: var(--alerta); border-color: color-mix(in srgb, var(--alerta) 60%, transparent); background: color-mix(in srgb, var(--alerta) 12%, transparent); font-size: 12px; font-weight: 700; }
.item-proxima { flex: 1 1 auto; min-width: 0; color: var(--info); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-selos { flex: none; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.item-selos .selo { font-size: 10.5px; padding: 1px 6px; }
.mensagens-anteriores { align-self: center; border: 1px solid var(--borda); background: var(--fundo-2); color: var(--texto-2); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.mensagens-anteriores:hover { border-color: var(--ouro); color: var(--texto); }
.mensagens-anteriores:disabled { opacity: .55; cursor: wait; }
.tag { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; border: 1px solid; line-height: 1.5; }
.ponto-fonte { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.f-api { background: var(--ok); }
.f-app { background: var(--info); }
.f-historico { background: var(--texto-3); }
.f-evolution { background: var(--alerta); }

/* conversa */
.conversa { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.conversa-topo { flex: none; display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--fundo-2); border-bottom: 1px solid var(--borda); transition: background .25s; }
/* esfumaçado da cor da etapa atual, da esquerda para a direita (etapa-topo.js define --cor-etapa) */
.conversa-topo.conversa-topo-etapa {
  background: linear-gradient(90deg, color-mix(in srgb, var(--cor-etapa) 22%, var(--fundo-2)) 0%,
    color-mix(in srgb, var(--cor-etapa) 9%, var(--fundo-2)) 55%, var(--fundo-2) 100%);
  border-bottom-color: color-mix(in srgb, var(--cor-etapa) 35%, var(--borda));
}
.conversa-topo-texto { min-width: 0; display: flex; flex-direction: column; }
.conversa-topo-texto b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversa-topo-texto small { color: var(--texto-2); font-size: 12px; }
.conversa-topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.aviso-espelho, .trava-aviso {
  flex: none; margin: 10px 14px 0; padding: 9px 12px; border-radius: 9px; font-size: 12.5px;
  background: rgba(217,119,6,.1); border: 1px solid rgba(217,119,6,.35); color: var(--texto);
}
.trava-aviso { background: rgba(37,99,235,.1); border-color: rgba(37,99,235,.35); display: flex; align-items: center; gap: 10px; }
.trava-aviso .botao { margin-left: auto; }

.mensagens {
  flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px;
}
/* Logo no FUNDO da própria área que rola: background-attachment padrão (scroll) fica
   parado na caixa do elemento e não sobe com as mensagens. Um ::before absoluto dentro do
   scroll subiria junto. Transparência = véu da cor do fundo por cima da logo. */
.mensagens {
  background-color: var(--fundo);
  background-image: linear-gradient(var(--marca-agua-veu), var(--marca-agua-veu)), url(../img/logo-circle.png);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 100% 100%, min(360px, 60%);
}
.dia-sep { align-self: center; font-size: 11.5px; color: var(--texto-2); background: var(--fundo-3); border: 1px solid var(--borda); padding: 2px 11px; border-radius: 999px; margin: 8px 0 4px; }
.bolha {
  max-width: min(620px, 78%); padding: 8px 11px 6px; border-radius: 12px; box-shadow: var(--sombra);
  background: var(--bolha-entrada); border: 1px solid var(--borda); align-self: flex-start; word-wrap: break-word;
}
.bolha.saida { background: var(--bolha-saida); align-self: flex-end; border-color: transparent; }
.bolha-autor { font-size: 11.5px; font-weight: 600; color: var(--marca); margin-bottom: 2px; }
/* anotação interna (20/09): balão à direita, âmbar, borda tracejada dourada e cadeado.
   Só existe no painel: nunca vai para o WhatsApp. */
.bolha.bolha-nota { background: var(--bolha-nota); border: 1px dashed var(--ouro); align-self: flex-end; }
.bolha-nota-cabecalho { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--marca); margin-bottom: 3px; }
.bolha-nota-cabecalho svg { width: 13px; height: 13px; flex: none; }
.bolha-nota .bolha-rodape { justify-content: space-between; }
.bolha-texto { white-space: pre-wrap; }
.bolha-rodape { display: flex; align-items: center; gap: 6px; justify-content: flex-end; margin-top: 3px; font-size: 10.5px; color: var(--texto-3); }
.bolha-rodape .fonte-rotulo { opacity: .85; }
.tique-lido { color: var(--info); }
.tique-falha { color: var(--erro); }
/* envio otimista (envio-otimista.js): bolha já na tela, POST ainda em voo — relógio discreto */
.tique-enviando { opacity: .55; }
.bolha.saida.bolha-enviando { opacity: .82; }
.bolha-falha {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 7px;
  padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--erro) 35%, transparent);
  color: var(--erro); font-size: 11.5px;
}
.bolha-falha span { flex: 1 1 180px; }
.bolha-falha small { color: var(--texto-3); }
.bolha-reenviar { color: var(--erro); font-size: inherit; font-weight: 600; }
.bolha-reenviar:disabled { opacity: .55; cursor: wait; }

.midia-img { display: block; max-width: 260px; max-height: 300px; border-radius: 8px; cursor: zoom-in; background: var(--fundo-3); margin-bottom: 4px; }
.midia-video { display: block; width: min(360px, 100%); max-height: 360px; border-radius: 8px; background: #000; margin-bottom: 4px; }
.midia-sticker { display: block; max-width: 180px; max-height: 180px; object-fit: contain; cursor: zoom-in; margin-bottom: 4px; }
.midia-doc { display: flex; align-items: center; gap: 9px; padding: 8px; border: 1px solid var(--borda); border-radius: 9px; background: var(--fundo-3); text-decoration: none; color: inherit; margin-bottom: 4px; }
.midia-doc-icone { width: 32px; height: 32px; border-radius: 6px; background: var(--erro); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.midia-doc small { color: var(--texto-2); display: block; font-size: 11.5px; }
.audio { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.audio audio { height: 34px; max-width: 230px; }
.transcricao { margin-top: 5px; padding: 6px 9px; border-left: 3px solid var(--ouro); background: var(--fundo-3); border-radius: 0 7px 7px 0; font-size: 12.5px; color: var(--texto-2); }
.transcricao b { color: var(--texto-2); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; display: block; margin-bottom: 2px; }

/* composer */
.composer { flex: none; border-top: 1px solid var(--borda); background: var(--fundo-2); padding: 10px 14px; }
.composer-linha { display: flex; gap: 8px; align-items: flex-end; }
.botao-anexar { flex: none; width: 36px; height: 36px; color: var(--texto-2); }
.botao-anexar svg { width: 18px; height: 18px; }
/* ícones da linha (clipe, reloginho, template, IA, microfone, enviar-do-celular):
   mesma altura do campo, colados à direita dele */
.composer-linha .botao-icone { width: 36px; height: 36px; flex: none; }
.composer-linha .botao-icone svg { width: 18px; height: 18px; }
.composer-linha .botao-template, .composer-linha .botao-ia, .composer-linha .botao-nota { color: var(--texto-2); }
.composer-linha .botao-nota.ativo { color: var(--ouro); border-color: var(--ouro); }
/* painel "Anotação interna" (cadeado): campo próprio, fora do caminho de envio */
.composer-nota { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--ouro); border-radius: 10px; background: var(--bolha-nota); }
.composer-nota[hidden] { display: none; }
#texto-nota { width: 100%; resize: vertical; min-height: 52px; max-height: 150px; padding: 7px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--input); font-family: inherit; }
#texto-nota:focus { border-color: var(--ouro); outline: none; }
.composer-nota-acoes { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.composer-nota-aviso { display: inline-flex; align-items: center; gap: 4px; flex: 1; font-size: 11.5px; color: var(--marca); }
.composer-nota-aviso svg { width: 13px; height: 13px; }
.composer-bloqueado .botao-nota-abrir { margin-left: 8px; display: inline-flex; align-items: center; gap: 6px; }
.composer-bloqueado .botao-nota-abrir svg { width: 15px; height: 15px; }
.composer-linha .botao-ia.carregando { color: var(--ouro); animation: composer-ia-pulso 1s ease-in-out infinite; cursor: wait; }
@keyframes composer-ia-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .composer-linha .botao-ia.carregando { animation: none; opacity: .6; } }
.composer-linha .botao-enviar-movel { display: none; flex: none; font-size: 16px; color: var(--ouro); }
@media (max-width: 760px) { .composer-linha .botao-enviar-movel { display: inline-flex; } }
#texto-msg {
  flex: 1; resize: none; min-height: 36px; max-height: 150px; padding: 7px 10px;
  border: 1px solid var(--borda); border-radius: 10px; background: var(--input); font-family: inherit;
}
#texto-msg:focus, #busca:focus { border-color: var(--ouro); outline: none; }
.composer-bloqueado { border: 1px dashed var(--borda-forte); border-radius: 10px; padding: 12px; background: var(--fundo-3); }
.composer-bloqueado h4 { margin: 0 0 4px; font-size: 13px; }
.composer-bloqueado p { margin: 0 0 9px; font-size: 12.5px; color: var(--texto-2); }

/* ficha */
.ficha-bloco { padding: 13px 14px; border-bottom: 1px solid var(--borda); }
.ficha-bloco h3 { margin: 0 0 9px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--texto-3); }
/* topo compacto: avatar | nome + telefone copiável | fechar (só no estreito) */
.ficha-topo { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 11px;
  padding: 14px; border-bottom: 1px solid var(--borda); }
.ficha-fechar { display: none; align-self: start; font-size: 20px; }
.ficha-topo .avatar { width: 42px; height: 42px; font-size: 15px; }
.ficha-identidade { min-width: 0; display: grid; justify-items: start; gap: 1px; }
.ficha-nome { font-size: 15px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.ficha-topo .ficha-caso { color: var(--texto-3); font-size: 11.5px; }
.ficha-copiavel { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 1px 4px; margin: 0 -4px;
  border: 0; border-radius: 5px; background: none; color: var(--texto-2); font: inherit; font-size: 12.5px;
  text-align: left; cursor: copy; overflow-wrap: anywhere; }
.ficha-copiavel:hover { background: var(--fundo-3); color: var(--texto); }
.ficha-copiavel .icone-copiar { flex: none; opacity: .55; }
.ficha-copiavel:hover .icone-copiar, .ficha-copiavel:focus-visible .icone-copiar { opacity: 1; }
.campo .ficha-copiavel { color: var(--texto); font-size: 13px; font-weight: 500; }
/* bloco "Atendimento": rótulo em cima, controle em largura total, mesmo ritmo */
.ficha-controle + .ficha-controle { margin-top: 10px; }
.ficha-controle > .ficha-rotulo { margin-top: 0; }
.ficha-linha-controle { display: flex; align-items: center; gap: 6px; }
.ficha-linha-controle select { flex: 1; min-width: 0; }
.ficha-linha-controle .botao { flex: none; margin: 0; padding: 6px 11px; }
.ficha-selo { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--marca-fundo); color: var(--marca);
  font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.campo { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 6px; padding: 3px 0; font-size: 13px; align-items: baseline; }
.campo span { color: var(--texto-3); font-size: 12.5px; }
.campo b { font-weight: 500; word-break: break-word; }
.campo b.campo-vazio { font-weight: 400; color: var(--texto-3); font-style: italic; }
.campo-vazios { margin: 6px 0 0; font-size: 11.5px; color: var(--texto-3); }
/* dados do contato: recolhível, no fim */
.ficha-contato > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; border-radius: 6px; }
.ficha-contato > summary::-webkit-details-marker { display: none; }
.ficha-contato > summary h3 { margin: 0; flex: 1; }
.ficha-contato > summary::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid var(--texto-3);
  border-bottom: 1.5px solid var(--texto-3); transform: rotate(-45deg); transition: transform .15s; margin-right: 3px; }
.ficha-contato[open] > summary::after { transform: rotate(45deg); }
.ficha-contato > summary:hover h3 { color: var(--texto-2); }
.ficha-contagem { font-size: 11px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.ficha-contato-corpo { margin-top: 9px; }
/* foco visível em tudo que é clicável na ficha */
.coluna-ficha :is(button, select, input, textarea, summary):focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
.ficha-bloco select, .ficha-bloco input[type=text], .ficha-bloco input[type=datetime-local], .ficha-bloco textarea {
  width: 100%; padding: 7px 9px; border: 1px solid var(--borda); border-radius: 8px; background: var(--input); font-family: inherit;
}
.ficha-bloco textarea { resize: vertical; min-height: 58px; }
.tags-editor { display: flex; flex-wrap: wrap; gap: 5px; }
.tag-botao { cursor: pointer; border: 1px solid; background: transparent; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; opacity: .45; }
.tag-botao.ativa { opacity: 1; font-weight: 600; }
.nota { background: var(--fundo-3); border-radius: 8px; padding: 8px 10px; margin-bottom: 7px; font-size: 12.5px; }
.nota-meta { font-size: 11px; color: var(--texto-3); margin-top: 4px; }
.ia-resumo { font-size: 13px; color: var(--texto); background: var(--marca-fundo); border-radius: 8px; padding: 9px 11px; }
.ia-campo { display: flex; align-items: center; gap: 7px; padding: 4px 0; font-size: 12.5px; border-bottom: 1px dotted var(--borda); }
.ia-campo .rotulo { color: var(--texto-3); min-width: 88px; }
.ia-campo .valor { flex: 1; }
.barra-conf { width: 34px; height: 5px; border-radius: 3px; background: var(--borda); overflow: hidden; flex: none; }
.barra-conf i { display: block; height: 100%; background: var(--ok); }
.lista-pend { margin: 6px 0 0; padding-left: 17px; font-size: 12.5px; color: var(--texto-2); }
.ficha-rotulo { display: block; margin: 8px 0 4px; font-size: 12px; color: var(--texto-2); }
.botao-perigo { color: var(--erro); border-color: color-mix(in srgb, var(--erro) 45%, var(--borda)); margin-top: 8px; }
.nova-acao { display: grid; gap: 6px; margin-top: 8px; }
.fluxo-encerrado, .proxima-acao { display: grid; gap: 3px; background: var(--fundo-3); border-radius: 8px; padding: 9px 10px; margin-bottom: 8px; }
.fluxo-encerrado span, .proxima-acao span { font-size: 12px; color: var(--texto-2); }
.fluxo-encerrado small { color: var(--texto-3); }
.proxima-acao .botao { justify-self: start; margin-top: 5px; }
.ficha-vazio { font-size: 12.5px; color: var(--texto-3); margin: 0 0 8px; }
.ficha-bloco h3 label { cursor: inherit; }

/* ---------- gestão ---------- */
.gestao { flex: 1; min-height: 0; overflow-y: auto; padding: 0 18px 18px; }   /* sem padding em cima: a barra de atalhos (sticky) começa exatamente no topo */
#tela-templates.gestao { padding-top: 18px; }   /* Templates não tem a barra */   /* min-height: 0 — sem isso a tela crescia além da janela e o documento inteiro rolava (barra de atalhos e cabeçalho fugiam) */
.gestao-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.gestao-topo h2 { margin: 0; font-size: 18px; }
.gestao-topo select { padding: 6px 9px; border: 1px solid var(--borda); border-radius: 8px; background: var(--input); }
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cartao { background: var(--fundo-2); border: 1px solid var(--borda); border-radius: var(--raio); padding: 13px 15px; box-shadow: var(--sombra); }
.cartao .rotulo { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--texto-3); }
.cartao .numero { font-size: 27px; font-weight: 600; margin-top: 3px; line-height: 1.1; }
.cartao .nota-pe { font-size: 12px; color: var(--texto-2); margin-top: 2px; }
.operacao-painel { margin-bottom: 14px; }
.saude-painel { margin-bottom: 14px; }
.saude-painel h3 { margin: 0 0 3px; font-size: 14px; }
.saude-painel .sub { margin: 0; }
.saude-painel.saude-ok { border-left: 3px solid var(--ok); }
.saude-painel.saude-aviso { border-left: 3px solid var(--alerta); }
.saude-painel.saude-critico { border-left: 3px solid var(--erro); }
.saude-topo { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.saude-quando { font-size: 11.5px; color: var(--texto-3); white-space: nowrap; }
.saude-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px; }
.saude-item { display: flex; gap: 9px; align-items: start; background: var(--fundo-3); border-radius: 8px; padding: 9px 11px; --cor-saude: var(--ok); }
.saude-item.saude-aviso { --cor-saude: var(--alerta); }
.saude-item.saude-critico { --cor-saude: var(--erro); }
.saude-item.saude-indefinido { --cor-saude: var(--texto-3); }
.saude-farol { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--cor-saude); margin-top: 4px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-saude) 22%, transparent); }
.saude-corpo { min-width: 0; }
.saude-nome { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.saude-estado { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; color: var(--cor-saude); }
.saude-texto { font-size: 12.5px; color: var(--texto); margin-top: 2px; }
.saude-item.saude-ok .saude-texto { color: var(--texto-2); }
.saude-detalhe { font-size: 11.5px; color: var(--texto-3); margin-top: 3px; }
.saude-historico { margin: 10px 0 0; font-size: 12px; color: var(--texto-2); }
.operacao-topo { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.operacao-topo h3, .operacao-painel h4 { margin: 0 0 4px; }
.operacao-cartoes { margin: 12px 0; }
.operacao-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.operacao-erro { color: var(--erro); }
.operacao-alerta { color: var(--alerta); }
.presenca-lista { font-size: 11px; text-transform: uppercase; color: var(--texto-3); }
.presenca-lista.online { color: var(--ok); }
.presenca-lista.ocupado { color: var(--erro); }
.presenca-lista.ausente { color: var(--alerta); }
@media (max-width: 760px) { .operacao-grade { grid-template-columns: 1fr; } }
.paineis { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.painel { background: var(--fundo-2); border: 1px solid var(--borda); border-radius: var(--raio); padding: 15px; box-shadow: var(--sombra); }
.painel h3 { margin: 0 0 3px; font-size: 14px; }
.painel .sub { margin: 0 0 12px; font-size: 12px; color: var(--texto-3); }
.painel svg { width: 100%; height: auto; display: block; overflow: visible; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-3); font-weight: 500; padding: 5px 6px; border-bottom: 1px solid var(--borda); }
.tabela td { padding: 7px 6px; border-bottom: 1px solid var(--borda); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--texto-2); margin-top: 9px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; }
.barra-etapa { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13px; }
.barra-etapa .nome { width: 130px; flex: none; color: var(--texto-2); }
.barra-etapa .trilho { flex: 1; height: 16px; background: var(--fundo-3); border-radius: 5px; overflow: hidden; }
.barra-etapa .trilho i { display: block; height: 100%; border-radius: 5px; }
.barra-etapa .valor { width: 26px; text-align: right; font-variant-numeric: tabular-nums; }
.barra-etapa .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* funil por etapa + por tipo de caso: ocupam a linha inteira da grade e ficam lado a lado; no celular empilham */
.funil-par { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.funil-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 3px; }
.funil-topo h3 { margin: 0; }
@media (max-width: 760px) { .funil-par { grid-template-columns: 1fr; } }

/* ---------- modal e avisos ---------- */
.modal { position: fixed; inset: 0; background: rgba(8,12,18,.55); display: grid; place-items: center; padding: 20px; z-index: 50; }
.modal-caixa { background: var(--fundo-2); border-radius: 13px; padding: 20px; max-width: 520px; width: 100%; max-height: 88vh; overflow: auto; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.modal-caixa h3 { margin: 0 0 12px; font-size: 16px; }
.modal-caixa img { max-width: 100%; border-radius: 8px; }
.modal-acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 15px; }
.modal-campo { margin-bottom: 10px; }
.modal-campo label { display: block; font-size: 12.5px; color: var(--texto-2); margin-bottom: 4px; }
.modal-campo input, .modal-campo select, .modal-campo textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--input); font-family: inherit; }
.previa-template { background: var(--fundo-3); border-left: 3px solid var(--ouro); padding: 9px 11px; border-radius: 0 8px 8px 0; font-size: 13px; white-space: pre-wrap; margin-top: 4px; }

.avisos { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.aviso { background: var(--fundo-3); color: var(--texto); border: 1px solid var(--borda); border-left: 3px solid var(--ouro); padding: 9px 14px; border-radius: 9px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.25); animation: entra .18s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

/* ---------- responsivo ---------- */
.so-estreito { display: none; }
@media (max-width: 1180px) {
  .inbox { grid-template-columns: 340px minmax(0,1fr); }
  .coluna-ficha { position: fixed; top: var(--topo-altura); right: 0; bottom: 0; width: 320px; z-index: 30; box-shadow: -10px 0 30px rgba(0,0,0,.18); }
  .coluna-ficha:not(.aberta) { display: none; }
}
@media (max-width: 760px) {
  .inbox, .inbox.sem-ficha { grid-template-columns: 1fr; }
  .coluna-lista { border-right: 0; }
  .inbox[data-modo="conversa"] .coluna-lista { display: none; }
  .inbox[data-modo="lista"] .coluna-conversa { display: none; }
  .coluna-ficha { width: 100%; }
  .so-estreito { display: inline-block; }
  .so-largo { display: none; }
  .inbox[data-modo="lista"] #btn-voltar { visibility: hidden; }
  .topo { gap: 8px; padding: 0 8px; }
  .topo-produto, .usuario-rotulo { display: none; }
  .topo-logo { height: 18px; }
  .aba { padding: 7px 10px; font-size: 13px; }
  .filtros-selects { grid-template-columns: 1fr 1fr; }
  .aba-etapa { padding-top: 8px; padding-bottom: 8px; }   /* toque: continua 3×2, só mais alto */
  .bolha { max-width: 88%; }
  .gestao { padding: 0 12px 12px; }
  .mensagens { background-size: 100% 100%, min(220px, 70%); }
  /* cabeçalho da conversa (20/09 noite, print do Daniel): o texto encolhe com reticências e as
     ações, se não couberem ao lado, descem inteiras para uma segunda linha — nada vaza para fora
     da coluna nem empilha o subtítulo palavra por palavra. */
  .conversa-topo { flex-wrap: wrap; gap: 6px 8px; padding: 8px 10px; }
  .conversa-topo-texto { flex: 1 1 80px; min-width: 0; }
  .conversa-topo-texto small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .conversa-topo-acoes { flex: 0 0 auto; min-width: 0; max-width: 100%; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .conversa-topo .botao-promissor { padding: 4px 8px; gap: 0; }
  /* compositor: o campo é quem encolhe (nunca os ícones, que têm largura fixa) */
  .composer { padding: 8px 10px; }
  .composer-linha { gap: 6px; }
  #texto-msg { flex: 1 1 0; min-width: 0; }
}
/* celular estreito: relógio, template, IA e cadeado saem da linha e voltam pelo "⋯"
   (.composer-linha.mais-aberto, web/js/inbox.js); clipe, campo, microfone e enviar ficam. */
.composer-linha .botao-mais { display: none; }
@media (max-width: 480px) {
  .composer-linha .botao-mais { display: inline-flex; color: var(--texto-2); font-size: 18px; line-height: 1; }
  .composer-linha .botao-mais[aria-expanded="true"] { color: var(--ouro); border-color: var(--ouro); }
  .composer-linha .ag-menu-wrap, .composer-linha .botao-template, .composer-linha .botao-ia, .composer-linha .botao-nota { display: none; }
  .composer-linha.mais-aberto { flex-wrap: wrap; }
  .composer-linha.mais-aberto .ag-menu-wrap, .composer-linha.mais-aberto .botao-template,
  .composer-linha.mais-aberto .botao-ia, .composer-linha.mais-aberto .botao-nota { display: inline-flex; order: 10; }
  .composer-linha.mais-aberto::after { content: ""; flex-basis: 100%; height: 0; order: 9; }
}
/* tela muito estreita: etapas em 2 colunas (6 → 2×3), "Todas" segue na linha própria */
@media (max-width: 300px) { .abas-etapa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- kanban da gestão ---------- */
.painel-kanban { grid-column: 1 / -1; margin-bottom: 16px; }
.kb-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kb-topo h3 { margin: 0 6px 0 0; }
.kb-seg { display: inline-flex; background: var(--fundo-3); border: 1px solid var(--borda); border-radius: 9px; padding: 2px; }
.kb-seg button { border: 0; background: transparent; color: var(--texto-2); padding: 5px 11px; border-radius: 7px; font: inherit; font-size: 12.5px; cursor: pointer; }
.kb-seg button.ativo { background: var(--ouro); color: var(--sobre-ouro, #1a1d21); font-weight: 600; }
#kb-filtro, #kb-mes { padding: 5px 8px; border-radius: 8px; border: 1px solid var(--borda); background: var(--input); color: var(--texto); font: inherit; font-size: 12.5px; }
.kb-total { margin-left: auto; font-size: 12.5px; color: var(--texto-3); }
.kb-colunas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.kb-colunas.carregando, #gestao-resto.carregando { opacity: .5; pointer-events: none; }
.kb-coluna { background: var(--fundo-3); border-radius: 10px; border-top: 3px solid var(--cor); display: flex; flex-direction: column; min-height: 160px; max-height: 70vh; }
.kb-coluna.alvo { outline: 2px dashed var(--cor); outline-offset: -2px; }
.kb-coluna-topo { display: flex; justify-content: space-between; align-items: center; padding: 9px 11px; font-size: 13px; font-weight: 600; }
.kb-num { background: var(--fundo-2); border-radius: 10px; padding: 1px 8px; font-size: 12px; color: var(--texto-2); }
.kb-lista { overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 7px; }
.kb-vazio { color: var(--texto-3); text-align: center; padding: 14px 0; font-size: 12px; }
.kb-cartao { background: var(--fundo-2); border: 1px solid var(--borda); border-radius: 9px; padding: 9px 10px; cursor: grab; font-size: 12.5px; }
.kb-cartao:hover { border-color: var(--ouro); }
.kb-cartao.arrastando { opacity: .45; }
.kb-nome { font-weight: 600; font-size: 13px; display: flex; justify-content: space-between; gap: 6px; }
.kb-naolidas { background: var(--ouro); color: var(--sobre-ouro, #1a1d21); border-radius: 9px; padding: 0 7px; font-size: 11px; }
.kb-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.kb-chip { font-size: 11px; padding: 1px 7px; border-radius: 9px; border: 1px solid var(--cor); color: var(--cor); }
.kb-chip-etapa { background: color-mix(in srgb, var(--cor) 16%, transparent); }
.kb-chip-vazio { --cor: var(--texto-3); }
.kb-previa { color: var(--texto-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 6px; }
.kb-pe { display: flex; justify-content: space-between; color: var(--texto-3); font-size: 11.5px; }
@media (max-width: 700px) { .kb-total { margin-left: 0; width: 100%; } }

@media (max-width: 1180px) { .ficha-fechar { display: inline-grid; } }

/* Busca por cima dos filtros (19/09): faixa acima da lista e filtros atenuados. */
.faixa-busca {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
  flex: none; margin: 6px 10px; padding: 5px 10px; border-radius: 8px; font-size: 12px;
  background: var(--fundo-3); color: var(--texto-2); border: 1px solid var(--borda);
}
.faixa-busca[hidden] { display: none; }
.busca-em-tudo .abas-etapa, .busca-em-tudo .filtros-rapidos, .busca-em-tudo .filtros-selects { opacity: .45; transition: opacity .15s; }
.busca-em-tudo .abas-etapa:hover, .busca-em-tudo .filtros-rapidos:hover, .busca-em-tudo .filtros-selects:hover { opacity: .75; }

/* prévia do anexo escolhido/colado (Ctrl+V de print), acima da linha do compositor */
.anexo-previa { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin: 0 0 6px; background: var(--fundo-3); border: 1px solid var(--borda); border-radius: 10px; font-size: 12px; }
.anexo-previa img { height: 44px; width: auto; max-width: 96px; border-radius: 6px; object-fit: cover; }
.anexo-previa-icone { font-size: 18px; }
.anexo-previa-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.anexo-previa-nome small { color: var(--texto-3); margin-left: 4px; }
.anexo-previa-tirar { border: 0; background: transparent; color: var(--texto-3); font-size: 16px; cursor: pointer; padding: 0 4px; }
.anexo-previa-tirar:hover { color: var(--erro); }

/* arrastar arquivo para a conversa: a coluna inteira vira área de soltar */
.coluna-conversa { position: relative; }
.coluna-conversa[data-arrastando="1"]::after {
  content: "Solte para anexar"; position: absolute; inset: 8px; z-index: 30; display: grid; place-items: center;
  border: 2px dashed var(--ouro); border-radius: 14px; background: color-mix(in srgb, var(--fundo) 80%, transparent);
  color: var(--ouro); font-weight: 600; font-size: 15px; pointer-events: none;
}