/* Central de Agentes TMJ — sistema visual.
   Restrito: neutros levemente puxados para o azul da marca TMJ (o meio do
   degradê roxo → azul → turquesa da logo), um acento azul para ação e seleção,
   o roxo da marca para o agente de cobrança e o turquesa para informação. Cores
   semânticas só para estado. IBM Plex Sans na interface, Plex Mono para prompt
   e dados técnicos. */

@font-face { font-family: 'IBM Plex Sans'; src: url('fontes/plex-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('fontes/plex-sans-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('fontes/plex-sans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fontes/plex-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fontes/plex-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  color-scheme: light;
  --font: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-full: 999px;

  --z-sticky: 10; --z-dropdown: 20; --z-overlay: 30; --z-modal: 40; --z-toast: 50;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --t-fast: 150ms; --t-med: 220ms;

  --canvas: oklch(0.975 0.004 270);
  --rail: oklch(0.955 0.006 270);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.97 0.005 270);
  --surface-3: oklch(0.945 0.007 270);
  --line: oklch(0.905 0.008 270);
  --line-strong: oklch(0.83 0.012 270);
  --text: oklch(0.22 0.014 270);
  --text-2: oklch(0.41 0.014 270);
  --text-3: oklch(0.51 0.014 270);

  --brand: oklch(0.52 0.135 270);
  --brand-hover: oklch(0.46 0.13 270);
  --brand-press: oklch(0.41 0.12 270);
  --on-brand: oklch(0.99 0.005 270);
  --brand-soft: oklch(0.955 0.025 270);
  --brand-soft-line: oklch(0.86 0.06 270);
  --brand-ink: oklch(0.4 0.12 270);
  --brand-ring: oklch(0.62 0.13 270);
  --gradiente-marca: linear-gradient(90deg, oklch(0.64 0.23 309), oklch(0.67 0.126 270), oklch(0.8 0.12 203));

  --ok: oklch(0.46 0.11 152);   --ok-soft: oklch(0.955 0.035 152);
  --warn: oklch(0.49 0.11 68);  --warn-soft: oklch(0.96 0.05 85);
  --bad: oklch(0.5 0.165 27);   --bad-soft: oklch(0.955 0.03 27); --on-bad: oklch(0.99 0 0);
  --info: oklch(0.49 0.085 210); --info-soft: oklch(0.955 0.025 210);
  --violet: oklch(0.5 0.15 310); --violet-soft: oklch(0.955 0.03 310);
  /* FORSI Chat (provedor da linha oficial): azul-anil, distinto do RD e das cores das linhas. */
  --fc: oklch(0.47 0.17 268); --fc-soft: oklch(0.95 0.035 268);

  --shadow-sm: 0 1px 2px oklch(0.2 0.02 270 / 0.07);
  --shadow-pop: 0 6px 8px -2px oklch(0.2 0.02 270 / 0.12);
  --shadow-modal: 0 24px 64px -12px oklch(0.15 0.02 270 / 0.35);
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-ring);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --canvas: oklch(0.165 0.008 270);
    --rail: oklch(0.145 0.008 270);
    --surface: oklch(0.205 0.009 270);
    --surface-2: oklch(0.235 0.01 270);
    --surface-3: oklch(0.27 0.011 270);
    --line: oklch(0.3 0.01 270);
    --line-strong: oklch(0.38 0.012 270);
    --text: oklch(0.95 0.006 270);
    --text-2: oklch(0.8 0.01 270);
    --text-3: oklch(0.7 0.012 270);
    --brand: oklch(0.76 0.115 270);
    --brand-hover: oklch(0.82 0.1 270);
    --brand-press: oklch(0.7 0.11 270);
    --on-brand: oklch(0.2 0.03 270);
    --brand-soft: oklch(0.29 0.05 270);
    --brand-soft-line: oklch(0.42 0.08 270);
    --brand-ink: oklch(0.86 0.07 270);
    --brand-ring: oklch(0.76 0.115 270);
    --ok: oklch(0.8 0.11 152);    --ok-soft: oklch(0.28 0.045 152);
    --warn: oklch(0.83 0.11 80);  --warn-soft: oklch(0.3 0.05 80);
    --bad: oklch(0.78 0.13 27);   --bad-soft: oklch(0.29 0.06 27); --on-bad: oklch(0.2 0.04 27);
    --info: oklch(0.8 0.09 205);  --info-soft: oklch(0.28 0.045 205);
    --violet: oklch(0.78 0.12 310); --violet-soft: oklch(0.29 0.06 310);
    --fc: oklch(0.8 0.11 268); --fc-soft: oklch(0.3 0.07 268);
    --shadow-sm: none;
    --shadow-pop: 0 6px 8px -2px oklch(0 0 0 / 0.5);
    --shadow-modal: 0 24px 64px -12px oklch(0 0 0 / 0.7);
  }
}
/* Botão de tema (claro/escuro) escolhido pela pessoa vence o do sistema. */
:root[data-tema="escuro"] {
    color-scheme: dark;
    --canvas: oklch(0.165 0.008 270);
    --rail: oklch(0.145 0.008 270);
    --surface: oklch(0.205 0.009 270);
    --surface-2: oklch(0.235 0.01 270);
    --surface-3: oklch(0.27 0.011 270);
    --line: oklch(0.3 0.01 270);
    --line-strong: oklch(0.38 0.012 270);
    --text: oklch(0.95 0.006 270);
    --text-2: oklch(0.8 0.01 270);
    --text-3: oklch(0.7 0.012 270);
    --brand: oklch(0.76 0.115 270);
    --brand-hover: oklch(0.82 0.1 270);
    --brand-press: oklch(0.7 0.11 270);
    --on-brand: oklch(0.2 0.03 270);
    --brand-soft: oklch(0.29 0.05 270);
    --brand-soft-line: oklch(0.42 0.08 270);
    --brand-ink: oklch(0.86 0.07 270);
    --brand-ring: oklch(0.76 0.115 270);
    --ok: oklch(0.8 0.11 152);    --ok-soft: oklch(0.28 0.045 152);
    --warn: oklch(0.83 0.11 80);  --warn-soft: oklch(0.3 0.05 80);
    --bad: oklch(0.78 0.13 27);   --bad-soft: oklch(0.29 0.06 27); --on-bad: oklch(0.2 0.04 27);
    --info: oklch(0.8 0.09 205);  --info-soft: oklch(0.28 0.045 205);
    --violet: oklch(0.78 0.12 310); --violet-soft: oklch(0.29 0.06 310);
    --fc: oklch(0.8 0.11 268); --fc-soft: oklch(0.3 0.07 268);
    --shadow-sm: none;
    --shadow-pop: 0 6px 8px -2px oklch(0 0 0 / 0.5);
    --shadow-modal: 0 24px 64px -12px oklch(0 0 0 / 0.7);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: var(--fs-md); line-height: 1.5; color: var(--text); background: var(--canvas);
  font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.25; text-wrap: balance; font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
svg.icone { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
svg.icone.p { width: 16px; height: 16px; }
svg.icone.g { width: 22px; height: 22px; }
.mono { font-family: var(--mono); font-size: 0.92em; }
.num { font-variant-numeric: tabular-nums; }
.suave { color: var(--text-2); }
.fraco { color: var(--text-3); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }

/* ------------------------------------------------------------------ botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 36px; padding: 0 var(--s4); border-radius: var(--r-md); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); font-weight: 500; font-size: var(--fs-md); cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  text-decoration: none;
}
.btn:hover { background: var(--surface-2); border-color: var(--text-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn.primario { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.primario:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn.primario:active { background: var(--brand-press); }
.btn.fantasma { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.fantasma:hover { background: var(--surface-3); color: var(--text); }
.btn.perigo { color: var(--bad); }
.btn.perigo:hover { background: var(--bad-soft); border-color: var(--bad); }
.btn.pequeno { min-height: 30px; padding: 0 var(--s3); font-size: var(--fs-sm); gap: 6px; }
.btn.icone-so { width: 36px; padding: 0; }
.btn.pequeno.icone-so { width: 30px; }
.btn .girando { animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ campos */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > label, .rotulo { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.campo .ajuda { font-size: var(--fs-sm); color: var(--text-2); }
.campo .erro-campo { font-size: var(--fs-sm); color: var(--bad); }
.entrada, .selecao, .area {
  width: 100%; min-height: 38px; padding: 8px 12px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.entrada::placeholder, .area::placeholder { color: var(--text-3); }
.entrada:hover, .selecao:hover, .area:hover { border-color: var(--text-3); }
.entrada:focus, .selecao:focus, .area:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px oklch(from var(--brand-ring) l c h / 0.25); }
.entrada[aria-invalid='true'] { border-color: var(--bad); }
.com-unidade { position: relative; display: flex; align-items: center; }
.com-unidade .entrada { padding-right: 56px; }
.com-unidade .unidade { position: absolute; right: 12px; color: var(--text-2); font-size: var(--fs-sm); pointer-events: none; }
.com-unidade.prefixo .entrada { padding-left: 38px; padding-right: 12px; }
.com-unidade.prefixo .unidade { left: 12px; right: auto; }

.interruptor { display: inline-flex; align-items: center; gap: var(--s3); cursor: pointer; user-select: none; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor .trilho { position: relative; width: 36px; height: 20px; border-radius: var(--r-full); background: var(--line-strong); transition: background var(--t-fast) var(--ease); flex: none; }
.interruptor .trilho::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--t-med) var(--ease); }
.interruptor input:checked + .trilho { background: var(--brand); }
.interruptor input:checked + .trilho::after { transform: translateX(16px); }
.interruptor input:focus-visible + .trilho { box-shadow: var(--focus); }
.interruptor input:disabled + .trilho { opacity: 0.5; }

.segmentado { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-md); background: var(--surface-3); }
.segmentado button { border: 0; background: transparent; border-radius: 6px; padding: 5px 12px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.segmentado button:hover { color: var(--text); }
.segmentado button[aria-pressed='true'] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.segmentado button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ------------------------------------------------------------------ selos */
.selo { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; background: var(--surface-3); color: var(--text-2); }
.selo .ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.selo.marca { background: var(--brand-soft); color: var(--brand-ink); }
.selo.sucesso { background: var(--ok-soft); color: var(--ok); }
.selo.aviso { background: var(--warn-soft); color: var(--warn); }
.selo.perigo { background: var(--bad-soft); color: var(--bad); }
.selo.info { background: var(--info-soft); color: var(--info); }
.selo.violeta { background: var(--violet-soft); color: var(--violet); }
.selo.forsichat { background: var(--fc-soft); color: var(--fc); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc) 35%, transparent); }
.selo-fc { display: inline-flex; align-items: center; height: 16px; padding: 0 6px; border-radius: var(--r-full); font-size: 10px; font-weight: 600; letter-spacing: 0.01em; line-height: 16px; white-space: nowrap; background: var(--fc-soft); color: var(--fc); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc) 35%, transparent); }

.ficha { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: var(--r-full); border: 1px solid var(--line-strong); background: var(--surface); font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; transition: all var(--t-fast) var(--ease); }
.ficha:hover { color: var(--text); border-color: var(--text-3); }
.ficha[aria-pressed='true'] { background: var(--brand-soft); border-color: var(--brand-soft-line); color: var(--brand-ink); font-weight: 500; }
.ficha .contagem { font-variant-numeric: tabular-nums; color: inherit; opacity: 0.75; }

/* ------------------------------------------------------------------ estrutura */
.casca { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100dvh; }
.trilho-lateral { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: var(--s6); padding: var(--s5) var(--s3); background: var(--rail); border-right: 1px solid var(--line); }
.marca-app { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s2); }
.marca-app .simbolo { width: 34px; height: 34px; flex: none; display: block; }
.marca-app .nome { font-weight: 600; line-height: 1.2; }
.marca-app .sub { font-size: var(--fs-xs); color: var(--text-2); }
.navegacao { display: flex; flex-direction: column; gap: 2px; }
.navegacao a { display: flex; align-items: center; gap: var(--s3); min-height: 38px; padding: 0 var(--s3); border-radius: var(--r-md); color: var(--text-2); text-decoration: none; font-weight: 500; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.navegacao a:hover { background: var(--surface-3); color: var(--text); }
.navegacao a[aria-current='page'] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.navegacao a[aria-current='page'] svg { color: var(--brand); }
.navegacao .contador { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full); background: var(--bad); color: var(--on-bad); font-size: var(--fs-xs); font-weight: 600; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.rodape-trilho { margin-top: auto; display: flex; flex-direction: column; gap: var(--s3); }
.saude { display: flex; flex-direction: column; gap: 6px; padding: var(--s3); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-sm); }
.saude .linha { display: flex; align-items: center; gap: var(--s2); color: var(--text-2); }
.saude .luz { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }
.saude .luz.ok { background: var(--ok); }
.saude .luz.ruim { background: var(--bad); }
.saude .luz.neutra { background: var(--line-strong); }
.usuario { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s2); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text); font-weight: 600; font-size: var(--fs-sm); flex: none; }
.avatar.g { width: 48px; height: 48px; font-size: var(--fs-lg); }
.avatar.marca { background: var(--brand-soft); color: var(--brand-ink); }
.avatar.violeta { background: var(--violet-soft); color: var(--violet); }
.usuario .nome { font-weight: 500; font-size: var(--fs-sm); text-transform: capitalize; }

.barra-movel { display: none; }
.principal { min-width: 0; display: flex; flex-direction: column; }
.pagina { padding: var(--s8) var(--s8) var(--s12); max-width: 1320px; width: 100%; margin: 0 auto; }
.pagina.cheia { max-width: none; padding: 0; height: 100dvh; }
.cabecalho-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s6); }
.cabecalho-pagina h1 { font-size: var(--fs-2xl); letter-spacing: -0.01em; }
.cabecalho-pagina p { color: var(--text-2); margin-top: 6px; max-width: 70ch; }
.acoes { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }

.painel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.painel > header { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.painel > header h2 { font-size: var(--fs-base); }
.painel > header p { color: var(--text-2); font-size: var(--fs-sm); margin-top: 2px; }
.painel > .corpo { padding: var(--s5); }
.secao-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.secao-titulo h2 { font-size: var(--fs-lg); }
.secao-titulo h3 { font-size: var(--fs-base); }

.grade-inicio { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.pilha { display: flex; flex-direction: column; gap: var(--s6); }
.pilha.apertada { gap: var(--s3); }

/* ------------------------------------------------------------------ início */
.saudacao h1 { font-size: var(--fs-2xl); letter-spacing: -0.01em; }
.saudacao p { color: var(--text-2); margin-top: 6px; }
.numeros { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin-top: var(--s4); }
.numeros .n { display: flex; align-items: baseline; gap: 6px; color: var(--text-2); font-size: var(--fs-sm); }
.numeros .n b { color: var(--text); font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }

.roteiro { list-style: none; margin: 0; padding: 0; }
.roteiro li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s4) var(--s5); border-top: 1px solid var(--line); }
.roteiro li:first-child { border-top: 0; }
.roteiro .marcador { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-strong); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.roteiro li.feito .marcador { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.roteiro li.atual { background: var(--brand-soft); }
.roteiro li.atual .marcador { border-color: var(--brand); color: var(--brand-ink); }
.roteiro li.feito .titulo { color: var(--text-2); }
.roteiro .titulo { font-weight: 500; }
.roteiro .detalhe { color: var(--text-2); font-size: var(--fs-sm); }

.lista-atencao { list-style: none; margin: 0; padding: 0; }
.lista-atencao li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--s3); align-items: start; padding: var(--s4) var(--s5); border-top: 1px solid var(--line); }
.lista-atencao li:first-child { border-top: 0; }
.lista-atencao .ic { margin-top: 1px; }
.lista-atencao .ic.erro { color: var(--bad); }
.lista-atencao .ic.aviso { color: var(--warn); }
.lista-atencao .ic.info { color: var(--info); }
.lista-atencao .titulo { font-weight: 500; }
.lista-atencao .detalhe { color: var(--text-2); font-size: var(--fs-sm); }

.cenarios { display: flex; flex-direction: column; }
.cenario { display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; gap: var(--s3); align-items: center; width: 100%; text-align: left; padding: var(--s3) var(--s5); border: 0; border-top: 1px solid var(--line); background: transparent; cursor: pointer; transition: background var(--t-fast) var(--ease); }
.cenario:first-child { border-top: 0; }
.cenario:hover { background: var(--surface-2); }
.cenario:disabled { cursor: progress; opacity: 0.6; }
.cenario .ic { width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.cenario.triagem .ic { background: var(--brand-soft); color: var(--brand-ink); }
.cenario.cobranca .ic { background: var(--violet-soft); color: var(--violet); }
.cenario .titulo { font-weight: 500; }
.cenario .detalhe { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.4; }
.cenario > svg:last-child { color: var(--text-3); }

.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--s3); padding: var(--s3) var(--s5); border-top: 1px solid var(--line); align-items: start; }
.feed li:first-child { border-top: 0; }
.feed .ic { margin-top: 2px; color: var(--text-3); }
.feed .ic.sucesso { color: var(--ok); }
.feed .ic.aviso { color: var(--warn); }
.feed .ic.erro { color: var(--bad); }
.feed .titulo { font-size: var(--fs-sm); font-weight: 500; }
.feed .detalhe { font-size: var(--fs-sm); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.feed .quando { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.feed button.linha-link { all: unset; cursor: pointer; display: contents; }

/* ------------------------------------------------------------------ conversas */
.inbox { display: grid; grid-template-columns: 300px minmax(0, 1fr) 330px; height: 100dvh; background: var(--surface); }
.inbox.sem-contexto { grid-template-columns: 300px minmax(0, 1fr); }
.chat-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 64px; padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); }
.chat-cabecalho .quem { flex: 1; }
.chat-cabecalho .acoes { flex-wrap: nowrap; }
.coluna { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.coluna + .coluna { border-left: 1px solid var(--line); }
.coluna > header { display: flex; align-items: center; gap: var(--s3); min-height: 64px; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.coluna > header h1 { font-size: var(--fs-lg); }
.rolavel { overflow-y: auto; min-height: 0; flex: 1; overscroll-behavior: contain; }
.busca { position: relative; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.busca svg { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
.busca .entrada { padding-left: 36px; min-height: 36px; background: var(--surface-2); border-color: transparent; }
.item-conversa { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s3); width: 100%; padding: var(--s3) var(--s4); border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; transition: background var(--t-fast) var(--ease); }
.item-conversa:hover { background: var(--surface-2); }
.item-conversa[aria-current='true'] { background: var(--brand-soft); }
.item-conversa .avatar { width: 40px; height: 40px; }
.item-conversa .linha1 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.item-conversa .nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-conversa .quando { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.item-conversa .previa { color: var(--text-2); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-conversa .selos { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }

.chat-cabecalho { justify-content: space-between; flex-wrap: wrap; }
.chat-cabecalho .quem { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.chat-cabecalho .quem .nome { font-weight: 600; font-size: var(--fs-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-cabecalho .quem .meta { color: var(--text-2); font-size: var(--fs-sm); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fio { display: flex; flex-direction: column; gap: 6px; padding: var(--s6) var(--s6) var(--s4); background: var(--canvas); }
.dia-separador { align-self: center; margin: var(--s3) 0; font-size: var(--fs-xs); color: var(--text-2); background: var(--surface); border: 1px solid var(--line); padding: 2px 10px; border-radius: var(--r-full); }
.balao { max-width: min(72%, 560px); padding: 8px 12px 6px; border-radius: 14px; font-size: var(--fs-base); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; position: relative; }
.balao .rodape { display: flex; gap: 6px; justify-content: flex-end; align-items: center; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.balao.cliente { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.balao.agente { align-self: flex-end; background: var(--brand-soft); color: var(--text); border-bottom-right-radius: 4px; }
.balao.agente.cobranca { background: var(--violet-soft); }
.balao.atendente { align-self: flex-end; background: var(--info-soft); border-bottom-right-radius: 4px; }
.balao.falhou { background: var(--bad-soft); }
.balao .autor { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); margin-bottom: 2px; }
.balao.agrupado { margin-top: -2px; }
.aviso-envio { align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--bad); margin-top: -2px; max-width: 72%; text-align: right; }
.aviso-envio.t-aviso { color: var(--warn); }
.nota-sistema { align-self: center; max-width: min(88%, 620px); display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--fs-sm); color: var(--text-2); background: var(--surface-3); padding: 6px 12px; border-radius: var(--r-md); margin: var(--s2) 0; }
.nota-sistema svg { margin-top: 2px; flex: none; }
.acoes-agente { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: min(80%, 620px); margin: 2px 0 4px; }
.acao-agente { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-xs); color: var(--text-2); cursor: pointer; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.acao-agente:hover { color: var(--text); border-color: var(--line-strong); }
.acao-agente.erro { color: var(--warn); border-color: oklch(from var(--warn) l c h / 0.4); }
.acao-agente.trava { color: var(--bad); background: var(--bad-soft); border-color: transparent; font-weight: 500; }
.acao-agente[aria-expanded='true'] { color: var(--text); border-color: var(--line-strong); }
.detalhe-tecnico { width: min(620px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3); font-size: var(--fs-sm); }
.detalhe-tecnico .rotulo { font-size: var(--fs-xs); color: var(--text-2); font-weight: 500; margin-bottom: 4px; }
.codigo { margin: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); border-radius: var(--r-sm); padding: var(--s2) var(--s3); max-height: 260px; overflow: auto; color: var(--text); }
.digitando { align-self: flex-end; display: inline-flex; align-items: center; gap: var(--s2); padding: 8px 12px; border-radius: 14px; background: var(--brand-soft); color: var(--brand-ink); font-size: var(--fs-sm); }
.digitando.cobranca { background: var(--violet-soft); color: var(--violet); }
.digitando .pontos { display: inline-flex; gap: 3px; }
.digitando .pontos i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.35; animation: pulsar 1.2s infinite var(--ease); }
.digitando .pontos i:nth-child(2) { animation-delay: 0.15s; }
.digitando .pontos i:nth-child(3) { animation-delay: 0.3s; }
@keyframes pulsar { 30% { opacity: 1; transform: translateY(-2px); } 60% { opacity: 0.35; transform: none; } }

.compositor { border-top: 1px solid var(--line); padding: var(--s3) var(--s4) var(--s4); background: var(--surface); display: flex; flex-direction: column; gap: var(--s2); }
.compositor .linha { display: flex; gap: var(--s2); align-items: flex-end; }
.compositor textarea { flex: 1; resize: none; min-height: 44px; max-height: 180px; padding: 11px 14px; border-radius: 12px; font-size: var(--fs-base); line-height: 1.4; }
.compositor .topo { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.sugestoes { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.sugestoes button { flex: none; border: 1px dashed var(--line-strong); background: transparent; color: var(--text-2); border-radius: var(--r-full); padding: 4px 12px; font-size: var(--fs-sm); cursor: pointer; transition: all var(--t-fast) var(--ease); }
.sugestoes button:hover { border-style: solid; color: var(--text); background: var(--surface-2); }
.aviso-humano { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-md); background: var(--info-soft); color: var(--info); font-size: var(--fs-sm); }

.contexto .bloco { padding: var(--s5); border-bottom: 1px solid var(--line); }
.contexto .bloco:last-child { border-bottom: 0; }
.contexto .bloco h3 { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); margin-bottom: var(--s3); display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.cartao-cliente .topo { display: flex; gap: var(--s3); align-items: center; margin-bottom: var(--s4); }
.cartao-cliente .topo .nome { font-weight: 600; font-size: var(--fs-base); }

.passos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.passos .passo { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); min-width: 0; }
.passos .passo .barra { height: 4px; border-radius: var(--r-full); background: var(--line); }
.passos .passo.feito { color: var(--text-2); }
.passos .passo.feito .barra { background: var(--brand); }
.passos .passo.atual { color: var(--text); font-weight: 500; }
.passos .passo.atual .barra { background: linear-gradient(90deg, var(--brand) 50%, var(--line) 50%); }
.passos .passo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.passos.grandes .passo { font-size: var(--fs-sm); }
.passos.grandes .passo .barra { height: 6px; }

.proximo-passo { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s3); padding: var(--s4); border-radius: var(--r-lg); background: var(--brand-soft); margin-top: var(--s4); }
.proximo-passo > svg { color: var(--brand-ink); margin-top: 1px; }
.proximo-passo .titulo { font-weight: 600; }
.proximo-passo .detalhe { color: var(--text-2); font-size: var(--fs-sm); margin-top: 2px; }
.proximo-passo .acoes { margin-top: var(--s3); }
.proximo-passo.t-aviso { background: var(--warn-soft); }
.proximo-passo.t-aviso > svg { color: var(--warn); }
.proximo-passo.t-perigo { background: var(--bad-soft); }
.proximo-passo.t-perigo > svg { color: var(--bad); }
.proximo-passo.t-sucesso { background: var(--ok-soft); }
.proximo-passo.t-sucesso > svg { color: var(--ok); }

.pares { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--s4); margin: 0; font-size: var(--fs-sm); }
.pares dt { color: var(--text-2); }
.pares dd { margin: 0; overflow-wrap: anywhere; }
.pares dd.faltando { color: var(--warn); font-style: italic; }
.memoria { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.memoria li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: start; font-size: var(--fs-sm); padding: var(--s2) var(--s3); background: var(--surface-2); border-radius: var(--r-md); }
.memoria li .quando { font-size: var(--fs-xs); color: var(--text-3); }

/* ------------------------------------------------------------------ tabelas e listas */
.barra-ferramentas { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
.barra-ferramentas .busca-inline { position: relative; flex: 1 1 260px; max-width: 360px; }
.barra-ferramentas .busca-inline svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
.barra-ferramentas .busca-inline .entrada { padding-left: 36px; }
.tabela-envoltorio { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.tabela th { text-align: left; font-size: var(--fs-xs); font-weight: 500; color: var(--text-2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface); }
.tabela td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tr.clicavel { cursor: pointer; transition: background var(--t-fast) var(--ease); }
.tabela tr.clicavel:hover { background: var(--surface-2); }
.tabela .direita { text-align: right; }
.celula-pessoa { display: flex; align-items: center; gap: var(--s3); min-width: 200px; }
.celula-pessoa .nome { font-weight: 500; }
.celula-pessoa .sub { font-size: var(--fs-sm); color: var(--text-2); }
.progresso { display: flex; align-items: center; gap: var(--s2); min-width: 110px; font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.progresso .trilho { flex: 1; height: 6px; border-radius: var(--r-full); background: var(--line); overflow: hidden; max-width: 72px; }
.progresso .trilho i { display: block; height: 100%; background: var(--brand); border-radius: inherit; }

.vazio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); padding: var(--s12) var(--s6); color: var(--text-2); }
.vazio .ic { width: 48px; height: 48px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.vazio h3 { color: var(--text); font-size: var(--fs-base); }
.vazio p { max-width: 46ch; font-size: var(--fs-md); }

.esqueleto { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%); background-size: 200% 100%; animation: brilho 1.4s infinite linear; border-radius: var(--r-sm); }
@keyframes brilho { to { background-position: -200% 0; } }

/* ------------------------------------------------------------------ modal */
dialog.modal { padding: 0; border: 0; border-radius: 16px; background: var(--surface); color: var(--text); width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); box-shadow: var(--shadow-modal); overflow: hidden; }
dialog.modal.largo { width: min(1080px, calc(100vw - 32px)); }
dialog.modal.medio { width: min(760px, calc(100vw - 32px)); }
dialog.modal[open] { display: flex; flex-direction: column; animation: surgir var(--t-med) var(--ease); }
dialog.modal::backdrop { background: oklch(0.15 0.015 270 / 0.45); backdrop-filter: blur(2px); animation: esmaecer var(--t-med) var(--ease); }
@keyframes surgir { from { opacity: 0; transform: translateY(8px) scale(0.985); } }
@keyframes esmaecer { from { opacity: 0; } }
.modal-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); padding: var(--s5) var(--s6); border-bottom: 1px solid var(--line); }
.modal-cabecalho h2 { font-size: var(--fs-lg); }
.modal-cabecalho p { color: var(--text-2); font-size: var(--fs-sm); margin-top: 4px; }
.modal-corpo { padding: var(--s6); overflow-y: auto; min-height: 0; flex: 1; }
.modal-rodape { display: flex; justify-content: flex-end; gap: var(--s2); padding: var(--s4) var(--s6); border-top: 1px solid var(--line); background: var(--surface-2); flex-wrap: wrap; }

.perfil-topo { display: flex; gap: var(--s4); align-items: center; min-width: 0; }
.perfil-topo .nome { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.005em; }
.perfil-topo .meta { display: flex; flex-wrap: wrap; gap: 4px var(--s3); color: var(--text-2); font-size: var(--fs-sm); margin-top: 4px; align-items: center; }
.perfil-grade { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s8); margin-top: var(--s6); align-items: start; }
.grupo-dados { padding: var(--s4) 0; border-top: 1px solid var(--line); }
.grupo-dados:first-child { border-top: 0; padding-top: 0; }
.grupo-dados h4 { font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; margin-bottom: var(--s3); display: flex; align-items: center; gap: var(--s2); }
.cartao-item { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: 6px; }
.lista-simples { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.linha-tempo { list-style: none; margin: 0; padding: 0; position: relative; }
.linha-tempo li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s3); padding-bottom: var(--s4); }
.linha-tempo li::before { content: ''; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--line); }
.linha-tempo li:last-child::before { display: none; }
.linha-tempo .no { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.linha-tempo .titulo { font-size: var(--fs-sm); font-weight: 500; }
.linha-tempo .detalhe { font-size: var(--fs-sm); color: var(--text-2); }

/* ------------------------------------------------------------------ abas */
.abas { display: flex; gap: var(--s1); border-bottom: 1px solid var(--line); margin-bottom: var(--s6); overflow-x: auto; scrollbar-width: none; }
.abas button { position: relative; border: 0; background: transparent; padding: var(--s3) var(--s3); font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--s2); }
.abas button:hover { color: var(--text); }
.abas button[aria-selected='true'] { color: var(--text); }
.abas button[aria-selected='true']::after { content: ''; position: absolute; left: var(--s2); right: var(--s2); bottom: -1px; height: 2px; border-radius: 2px; background: var(--brand); }
.abas .ponto-mudanca { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }

/* ------------------------------------------------------------------ agentes */
.editor-grade { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s6); align-items: start; }
.editor { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.editor > header { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.editor .estado { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); }
.editor .estado.sujo { color: var(--warn); }
.editor textarea { border: 0; border-radius: 0; resize: vertical; min-height: 520px; padding: var(--s5); font-family: var(--mono); font-size: 13.5px; line-height: 1.65; background: var(--surface); color: var(--text); tab-size: 2; }
.editor textarea:focus { outline: none; box-shadow: inset 0 0 0 2px oklch(from var(--brand-ring) l c h / 0.35); }
.editor > footer { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) var(--s4); border-top: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-sm); color: var(--text-2); }
.variaveis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.variaveis button { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s2); text-align: left; border: 0; background: transparent; padding: var(--s2) var(--s4); cursor: pointer; border-radius: 0; }
.variaveis button:hover { background: var(--surface-2); }
.variaveis code { font-family: var(--mono); font-size: 12px; color: var(--brand-ink); }
.variaveis .valor { font-size: var(--fs-sm); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.variaveis .desc { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--text-2); }
.versoes { list-style: none; margin: 0; padding: 0; }
.versoes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: center; padding: var(--s2) var(--s4); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.versoes li:first-child { border-top: 0; }
.versoes .quem { font-weight: 500; text-transform: capitalize; }
.versoes .nota { color: var(--text-2); font-size: var(--fs-xs); }
.ferramentas-lista { list-style: none; margin: 0; padding: 0; }
.ferramentas-lista li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3) var(--s5); border-top: 1px solid var(--line); }
.ferramentas-lista li:first-child { border-top: 0; }
.ferramentas-lista .ic { color: var(--text-2); }
.ferramentas-lista .nome { font-weight: 500; }
.ferramentas-lista .desc { font-size: var(--fs-sm); color: var(--text-2); }
.formulario { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s5) var(--s6); }
.grupo-form + .grupo-form { margin-top: var(--s8); }
.grupo-form > h3 { font-size: var(--fs-base); margin-bottom: 4px; }
.grupo-form > p { color: var(--text-2); font-size: var(--fs-sm); margin-bottom: var(--s4); max-width: 70ch; }
.gravacoes-tmj { margin-top: var(--s6); }
.gravacoes-tmj h4 { font-size: var(--fs-base); margin-bottom: var(--s2); }
.gravacoes-tmj p { font-size: var(--fs-sm); margin-bottom: var(--s2); }
.gravacoes-tmj .detalhe-gravacoes { color: var(--text-2); }
.gravacoes-tmj .aviso-gravacoes { color: var(--bad); font-weight: 500; }
.gravacoes-tmj .acoes { margin-top: var(--s4); gap: var(--s3) var(--s5); }
.modelos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); }
.modelo { position: relative; display: flex; flex-direction: column; gap: 4px; padding: var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-lg); cursor: pointer; background: var(--surface); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.modelo:hover { border-color: var(--text-3); }
.modelo input { position: absolute; opacity: 0; }
.modelo:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.modelo:has(input:focus-visible) { box-shadow: var(--focus); }
.modelo .nome { font-weight: 600; }
.modelo .preco { font-size: var(--fs-xs); color: var(--text-2); font-variant-numeric: tabular-nums; }
.modelo .perfil { font-size: var(--fs-sm); color: var(--text-2); }
.barra-salvar { position: sticky; bottom: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); padding: var(--s3) var(--s4); border-radius: var(--r-lg); background: var(--text); color: var(--canvas); box-shadow: var(--shadow-pop); animation: surgir var(--t-med) var(--ease); }
.barra-salvar .btn { border-color: transparent; }
.barra-salvar .btn.fantasma { color: var(--canvas); }
.barra-salvar .btn.fantasma:hover { background: oklch(from var(--canvas) l c h / 0.12); }

/* ------------------------------------------------------------------ régua */
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendario .semana { font-size: var(--fs-xs); color: var(--text-2); text-align: center; padding: var(--s1) 0 var(--s2); font-weight: 500; }
.calendario .dia { min-height: 84px; border-radius: var(--r-md); border: 1px solid var(--line); padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); font-size: var(--fs-xs); min-width: 0; }
.calendario .dia .numero { font-size: var(--fs-sm); font-weight: 500; font-variant-numeric: tabular-nums; }
.calendario .dia.fora { border-color: transparent; background: transparent; }
.calendario .dia.nao-util { background: var(--surface-2); color: var(--text-3); }
.calendario .dia.hoje { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.calendario .dia.forte { background: var(--brand-soft); border-color: var(--brand-soft-line); }
.calendario .dia .marca-forte { font-weight: 600; color: var(--brand-ink); }
.calendario .dia .feriado { color: var(--warn); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendario .dia .vencs { margin-top: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.calendario .dia .vencs i { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }

/* ------------------------------------------------------------------ integrações */
.passos-config { list-style: none; margin: 0; padding: 0; counter-reset: passo; }
.passos-config > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s4); padding: var(--s5); border-top: 1px solid var(--line); }
.passos-config > li:first-child { border-top: 0; }
.passos-config .num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); font-weight: 600; font-size: var(--fs-sm); }
.passos-config .num.ok { background: var(--ok-soft); color: var(--ok); }
.passos-config h3 { font-size: var(--fs-base); }
.passos-config .desc { color: var(--text-2); font-size: var(--fs-sm); margin: 2px 0 var(--s3); max-width: 70ch; }
.linha-form { display: flex; gap: var(--s2); align-items: flex-end; flex-wrap: wrap; }
.linha-form .campo { flex: 1 1 260px; }
.copiavel { display: flex; align-items: center; gap: var(--s2); padding: 6px 6px 6px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.copiavel code { flex: 1; font-family: var(--mono); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compatibilidade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 4px var(--s4); list-style: none; margin: var(--s3) 0 0; padding: 0; }
.compatibilidade li { display: flex; align-items: center; gap: var(--s2); font-family: var(--mono); font-size: 12.5px; min-width: 0; overflow-wrap: anywhere; }
.compatibilidade li.ok svg { color: var(--ok); }
.compatibilidade li.falta { color: var(--bad); }
.compatibilidade li.extensao.falta { color: var(--warn); }

/* ------------------------------------------------------------------ avisos (toast) */
/* Compactos: uma linha só. Clique abre o detalhe; aberto não some sozinho. */
.avisos { position: fixed; right: var(--s4); bottom: var(--s4); z-index: var(--z-toast); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; width: min(340px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; width: 100%; border-radius: var(--r-md); background: var(--text); color: var(--canvas); box-shadow: var(--shadow-pop); animation: entrar-aviso var(--t-med) var(--ease); font-size: var(--fs-sm); overflow: hidden; }
.toast .linha { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: var(--s2); align-items: center; min-height: 36px; padding: 0 2px 0 var(--s3); }
.toast .resumo { all: unset; box-sizing: border-box; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 8px 0; }
.toast button.resumo { cursor: pointer; }
.toast button.resumo:focus-visible { box-shadow: var(--focus); border-radius: 4px; }
.toast .resumo svg { opacity: 0.65; }
.toast .titulo { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast.aberto .titulo { white-space: normal; }
.toast .detalhe { padding: 0 var(--s3) var(--s3) calc(var(--s3) + 24px); opacity: 0.85; }
.toast .acoes-toast { display: flex; gap: 6px; padding: 0 var(--s3) var(--s3) calc(var(--s3) + 24px); }
.toast .btn { min-height: 28px; padding: 0 10px; font-size: var(--fs-xs); background: transparent; color: var(--canvas); border-color: oklch(from var(--canvas) l c h / 0.35); }
.toast .btn.icone-so { width: 30px; border-color: transparent; }
.toast .btn:hover { background: oklch(from var(--canvas) l c h / 0.12); }
.toast .linha > svg:first-child { color: var(--brand-soft-line); }
.toast.sucesso .linha > svg:first-child { color: var(--ok-soft); }
.toast.erro .linha > svg:first-child { color: var(--bad-soft); }
.toast.aviso .linha > svg:first-child { color: var(--warn-soft); }
@keyframes entrar-aviso { from { opacity: 0; transform: translateY(8px); } }

/* ------------------------------------------------------------------ login */
.entrar { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--surface); }
.entrar .lado-marca { position: relative; overflow: hidden; background: oklch(0.24 0.045 272); color: oklch(0.97 0.01 270); padding: var(--s12); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s8); }
.entrar .lado-marca::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--gradiente-marca); }
.entrar .lado-marca .topo { display: flex; align-items: center; gap: var(--s4); font-weight: 600; }
.entrar .lado-marca .topo img { width: 132px; height: auto; display: block; }
.entrar .lado-marca .topo span { padding-left: var(--s4); border-left: 1px solid oklch(0.97 0.01 270 / 0.25); color: oklch(0.9 0.02 270); }
.entrar .lado-marca h1 { font-size: clamp(2rem, 3.2vw, 2.75rem); letter-spacing: -0.02em; line-height: 1.12; max-width: 16ch; font-weight: 600; }
.entrar .lado-marca ul { list-style: none; margin: var(--s8) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s4); max-width: 44ch; }
.entrar .lado-marca li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s3); color: oklch(0.9 0.02 270); }
.entrar .lado-marca li svg { color: oklch(0.8 0.12 203); margin-top: 2px; }
.entrar .lado-marca .rodape { font-size: var(--fs-sm); color: oklch(0.8 0.03 270); }
.entrar .logo-movel { display: none; }
.entrar .lado-form { display: grid; place-items: center; padding: var(--s8) var(--s6); }
.entrar form { width: min(380px, 100%); display: flex; flex-direction: column; gap: var(--s5); }
.entrar form h2 { font-size: var(--fs-xl); }
.entrar form .sub { color: var(--text-2); margin-top: 4px; }
.entrar .erro-login { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s3); border-radius: var(--r-md); background: var(--bad-soft); color: var(--bad); font-size: var(--fs-sm); }
.entrar .senha { position: relative; }
.entrar .senha .entrada { padding-right: 44px; }
.entrar .senha button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.entrar .btn.primario { min-height: 44px; font-size: var(--fs-base); }

/* ------------------------------------------------------------------ responsivo */
.so-gaveta, .so-movel { display: none !important; }
@media (max-width: 1360px) {
  .inbox { grid-template-columns: 300px minmax(0, 1fr); }
  .inbox .contexto { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); z-index: var(--z-overlay); background: var(--surface); box-shadow: var(--shadow-modal); transform: translateX(105%); visibility: hidden; transition: transform var(--t-med) var(--ease), visibility 0s linear var(--t-med); }
  .inbox .contexto.aberto { transform: none; visibility: visible; transition: transform var(--t-med) var(--ease); }
  .so-gaveta { display: inline-flex !important; }
  .fundo-menu.so-gaveta { display: block !important; }
}
@media (max-width: 1280px) {
  .editor-grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .casca { grid-template-columns: 72px minmax(0, 1fr); }
  .trilho-lateral { padding: var(--s4) var(--s2); align-items: center; }
  .marca-app > div, .navegacao a span, .navegacao .contador, .saude, .usuario .nome { display: none; }
  .navegacao a { width: 44px; justify-content: center; padding: 0; }
  .grade-inicio, .perfil-grade { grid-template-columns: minmax(0, 1fr); }
  .pagina { padding: var(--s6) var(--s5) var(--s10); }
}
@media (max-width: 760px) {
  .casca { grid-template-columns: minmax(0, 1fr); }
  .trilho-lateral { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: var(--z-overlay); transform: translateX(-105%); visibility: hidden; transition: transform var(--t-med) var(--ease), visibility 0s linear var(--t-med); align-items: stretch; padding: var(--s5) var(--s3); }
  .trilho-lateral.aberto { transform: none; visibility: visible; box-shadow: var(--shadow-modal); transition: transform var(--t-med) var(--ease); }
  .marca-app > div, .navegacao a span, .saude, .usuario .nome { display: revert; }
  .navegacao .contador { display: grid; }
  .navegacao a { width: auto; justify-content: flex-start; padding: 0 var(--s3); }
  .barra-movel { display: flex; align-items: center; gap: var(--s2); position: sticky; top: 0; z-index: var(--z-sticky); height: 56px; padding: 0 var(--s3); background: var(--surface); border-bottom: 1px solid var(--line); }
  .barra-movel .titulo { font-weight: 600; }
  .pagina { padding: var(--s5) var(--s4) var(--s10); }
  .pagina.cheia { height: calc(100dvh - 56px); }
  .inbox { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 56px); }
  .inbox .lista-coluna.oculta, .inbox .chat-coluna.oculta { display: none; }
  .inbox .coluna + .coluna { border-left: 0; }
  .fio { padding: var(--s4) var(--s3); }
  .balao { max-width: 88%; }
  .cabecalho-pagina h1, .saudacao h1 { font-size: var(--fs-xl); }
  .entrar { grid-template-columns: minmax(0, 1fr); }
  .entrar .lado-marca { padding: var(--s6) var(--s5); }
  .entrar .lado-marca h1 { font-size: 1.625rem; }
  .entrar .lado-marca ul, .entrar .lado-marca .rodape { display: none; }
  .calendario .dia { min-height: 56px; padding: 4px; }
  .calendario .dia .feriado, .calendario .dia .marca-forte { display: none; }
  .modal-corpo { padding: var(--s4); }
  .modal-cabecalho, .modal-rodape { padding-left: var(--s4); padding-right: var(--s4); }
  dialog.modal, dialog.modal.largo, dialog.modal.medio { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
  .roteiro li, .lista-atencao li { grid-template-columns: 28px minmax(0, 1fr); }
  .roteiro li > :last-child, .lista-atencao li > :last-child { grid-column: 2; justify-self: start; }
}
.fundo-menu { position: fixed; inset: 0; z-index: calc(var(--z-overlay) - 1); background: oklch(0.15 0.015 270 / 0.4); }

.menu-pop { position: fixed; inset: auto; margin: 0; min-width: 220px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop); }
.menu-pop:popover-open { display: flex; flex-direction: column; animation: surgir var(--t-fast) var(--ease); }
.menu-item { display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 34px; padding: 0 var(--s3); border: 0; border-radius: 6px; background: transparent; text-align: left; font-size: var(--fs-sm); cursor: pointer; color: var(--text); }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-3); }
.menu-item.perigo { color: var(--bad); }
.menu-item .icone { color: var(--text-2); }
.menu-item.perigo .icone { color: var(--bad); }
.menu-titulo { padding: 6px var(--s3) 4px; font-size: var(--fs-xs); color: var(--text-2); font-weight: 500; }

.nota-erro-turno { align-self: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2) var(--s3); max-width: min(92%, 620px); padding: var(--s2) var(--s3); border-radius: var(--r-md); background: var(--bad-soft); color: var(--bad); font-size: var(--fs-sm); margin: var(--s2) 0; text-align: center; }
.resultado-teste { margin-top: var(--s3); display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); }
.resultado-teste .linha { display: flex; align-items: center; gap: var(--s2); }
.resultado-teste .linha.ok svg { color: var(--ok); }
.resultado-teste .linha.falha svg { color: var(--bad); }
.legenda { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--fs-xs); color: var(--text-2); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
@media (max-width: 760px) { .so-movel { display: inline-flex !important; } .oculto-movel { display: none !important; } }
.grade-dupla { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s6); align-items: start; }
.titulo-dia { position: sticky; top: 0; z-index: 1; padding: var(--s2) var(--s5); font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-transform: capitalize; }
.titulo-dia:first-child { border-top: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.item-atividade { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--s3); padding: var(--s3) var(--s5); border-top: 1px solid var(--line); align-items: start; }
.item-atividade .ic { width: 32px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.item-atividade .ic.sucesso { background: var(--ok-soft); color: var(--ok); }
.item-atividade .ic.aviso { background: var(--warn-soft); color: var(--warn); }
.item-atividade .ic.erro { background: var(--bad-soft); color: var(--bad); }
.item-atividade .titulo { font-weight: 500; }
.item-atividade .detalhe { color: var(--text-2); font-size: var(--fs-sm); }
.item-atividade .quando { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.item-atividade .acoes { margin-top: 6px; }

/* ------------------------------------------------------------------ central de avisos (sino) */
.item-trilho { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 38px; padding: 0 var(--s3); border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-2); font-weight: 500; cursor: pointer; text-align: left; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.item-trilho:hover { background: var(--surface-3); color: var(--text); }
.item-trilho .contador { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full); background: var(--brand); color: var(--on-brand); font-size: var(--fs-xs); font-weight: 600; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.painel-avisos { position: fixed; inset: auto; margin: 0; width: min(380px, calc(100vw - 24px)); max-height: min(560px, calc(100dvh - 24px)); padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-modal); overflow: hidden; }
.painel-avisos:popover-open { display: flex; flex-direction: column; animation: surgir var(--t-fast) var(--ease); }
.painel-avisos > header { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s3) var(--s3) var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.painel-avisos > header h2 { font-size: var(--fs-base); }
.painel-avisos .silencio { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-sm); display: flex; flex-direction: column; gap: 4px; }
.painel-avisos .silencio .ajuda { color: var(--text-2); font-size: var(--fs-xs); }
.lista-avisos { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.lista-avisos li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 2px var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.lista-avisos li:last-child { border-bottom: 0; }
.lista-avisos .ic { margin-top: 2px; color: var(--brand); }
.lista-avisos .ic.sucesso { color: var(--ok); }
.lista-avisos .ic.erro { color: var(--bad); }
.lista-avisos .ic.aviso { color: var(--warn); }
.lista-avisos .titulo { font-size: var(--fs-sm); font-weight: 500; }
.lista-avisos .detalhe { grid-column: 2 / -1; font-size: var(--fs-sm); color: var(--text-2); }
.lista-avisos .quando { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lista-avisos .acoes { grid-column: 2 / -1; margin-top: 4px; }

/* ------------------------------------------------------------------ pausa geral */
.btn.perigo-solido { background: var(--bad); border-color: var(--bad); color: var(--on-bad); }
.btn.perigo-solido:hover { background: oklch(from var(--bad) calc(l - 0.05) c h); border-color: oklch(from var(--bad) calc(l - 0.05) c h); color: var(--on-bad); }
.rodape-trilho .btn-pausa { width: 100%; justify-content: flex-start; }
.casca.pausada { --altura-faixa: 40px; }
.faixa-pausa { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); height: 40px; padding: 0 var(--s3) 0 var(--s5); background: var(--bad); color: var(--on-bad); font-size: var(--fs-sm); font-weight: 500; }
.faixa-pausa > span { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faixa-pausa .btn { background: var(--surface); color: var(--text); border-color: transparent; min-height: 28px; }
.pagina.cheia { height: calc(100dvh - var(--altura-faixa, 0px)); }
.inbox { height: calc(100dvh - var(--altura-faixa, 0px)); }
.estado-pausa { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--s4); align-items: center; padding: var(--s5); }
.estado-pausa .ic { width: 44px; height: 44px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); }
.estado-pausa.pausado { background: var(--bad-soft); }
.estado-pausa.pausado .ic { background: var(--bad); color: var(--on-bad); }
.estado-pausa .titulo { font-weight: 600; }
.estado-pausa .detalhe { color: var(--text-2); font-size: var(--fs-sm); margin-top: 2px; max-width: 70ch; }

/* ------------------------------------------------------------------ números ao vivo */
.lista-numeros { list-style: none; margin: 0; padding: 0; }
.lista-numeros li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: var(--s3); align-items: center; padding: var(--s3) var(--s5); border-top: 1px solid var(--line); }
.lista-numeros li:first-child { border-top: 0; }
.lista-numeros li.inativo .avatar, .lista-numeros li.inativo .texto { opacity: 0.55; }
.lista-numeros .nome { font-weight: 500; display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.lista-numeros .sub { font-size: var(--fs-sm); color: var(--text-2); }
.riscos { list-style: none; margin: 0; padding: var(--s4); border-radius: var(--r-lg); background: var(--warn-soft); display: flex; flex-direction: column; gap: var(--s3); }
.riscos li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--s3); font-size: var(--fs-sm); }
.riscos li svg { color: var(--warn); margin-top: 2px; }
.caixa-marcar { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--fs-sm); cursor: pointer; }
.caixa-marcar input { margin: 3px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--brand); }
.entrada.digitos { max-width: 180px; font-size: var(--fs-xl); letter-spacing: 0.35em; text-align: center; font-variant-numeric: tabular-nums; }
.explica { padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-sm); color: var(--text-2); max-width: 76ch; }
.explica b { color: var(--text); font-weight: 600; }
.previa-modelo { margin-top: var(--s3); padding: var(--s3) var(--s4); border-left: 3px solid var(--brand); background: var(--surface-2); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: var(--fs-sm); white-space: pre-wrap; max-width: 70ch; }
.numeros-webhook { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--s3); }
.numeros-webhook b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ conversas: simulação × ao vivo */
.modos { padding: var(--s3) var(--s4) 0; }
.modos .segmentado { display: flex; width: 100%; }
.modos .segmentado button { flex: 1; justify-content: center; }
.contagem-modo { color: var(--text-3); font-variant-numeric: tabular-nums; }
.faixa-conversa { display: flex; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); flex-wrap: wrap; padding: var(--s2) var(--s4); font-size: var(--fs-sm); border-bottom: 1px solid var(--line); background: var(--ok-soft); color: var(--ok); }
.faixa-conversa > span { display: inline-flex; align-items: center; gap: 6px; }
.faixa-conversa.t-aviso { background: var(--warn-soft); color: var(--warn); }
.faixa-conversa.t-perigo { background: var(--bad-soft); color: var(--bad); }
.balao.modelo { border: 1px dashed var(--brand-soft-line); }
.balao.modelo .autor { display: flex; align-items: center; gap: 4px; color: var(--brand-ink); }

/* ------------------------------------------------------------------ modelos de IA e chaves */
.medidor { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.medidor .trilho { height: 8px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.medidor .trilho i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.medidor .trilho i.alto { background: var(--warn); }
.medidor .trilho i.cheio { background: var(--bad); }
.medidor .legenda-medidor { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.chaves-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s3); }
.cartao-chave { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); background: var(--surface); min-width: 0; }
.cartao-chave.carregada { border-color: var(--brand-soft-line); background: linear-gradient(var(--brand-soft), var(--surface) 70%); }
.cartao-chave > header { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.cartao-chave h4 { font-size: var(--fs-base); }
.cartao-chave .estado-chave { font-size: var(--fs-sm); color: var(--text-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cartao-chave .acoes { margin-top: auto; }
.modelo .topo-modelo { display: flex; justify-content: space-between; gap: var(--s2); align-items: center; }
.modelo .rota { font-size: var(--fs-xs); color: var(--text-2); display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.modelo.bloqueado { cursor: not-allowed; background: var(--surface-2); border-style: dashed; }
.modelo.bloqueado:hover { border-color: var(--line-strong); }
.modelo.bloqueado .nome, .modelo.bloqueado .perfil, .modelo.bloqueado .preco { color: var(--text-3); }
.modelo.bloqueado .rota { color: var(--warn); }
.outro-modelo { margin-top: var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); }
.outro-modelo > summary { cursor: pointer; padding: var(--s3) var(--s4); font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); }
.outro-modelo > div { padding: 0 var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.lista-modelos { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.lista-modelos label { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s2) var(--s3); border-top: 1px solid var(--line); cursor: pointer; font-size: var(--fs-sm); }
.lista-modelos li:first-child label { border-top: 0; }
.lista-modelos label:hover { background: var(--surface-2); }
.lista-modelos label:has(input:checked) { background: var(--brand-soft); }
.lista-modelos input { accent-color: var(--brand); margin: 0; }
.lista-modelos .id { display: block; font-family: var(--mono); font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-modelos .preco { font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ anexos do cliente */
.balao.anexo { display: flex; flex-direction: column; gap: 6px; min-width: min(240px, 100%); }
.balao.anexo audio { width: 270px; max-width: 100%; height: 38px; }
.midia-img { display: block; max-width: min(280px, 100%); max-height: 320px; width: auto; border-radius: 10px; object-fit: cover; }
.midia-img.figurinha { max-width: 140px; }
.midia-video { display: block; max-width: min(300px, 100%); border-radius: 10px; }
.cartao-arquivo { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); color: var(--text); text-decoration: none; white-space: normal; }
.cartao-arquivo > span { display: flex; flex-direction: column; min-width: 0; }
.cartao-arquivo b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-arquivo .fraco { font-size: var(--fs-xs); }
a.cartao-arquivo:hover { background: var(--surface-3); }
.leitura { font-size: var(--fs-sm); color: var(--text-2); border-left: 2px solid var(--line-strong); padding-left: 8px; white-space: normal; }
.leitura summary { cursor: pointer; font-size: var(--fs-xs); font-weight: 500; }
.leitura .texto-lido { margin-top: 4px; white-space: pre-wrap; max-height: 240px; overflow: auto; }
.leitura.lendo, .leitura.falha { display: flex; align-items: center; gap: 6px; }
.leitura.falha { color: var(--warn); border-color: var(--warn); }
.leitura .girando { animation: girar 0.9s linear infinite; }
.reacao-cliente { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 6px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-2); }
.reacao-cliente .emoji-reacao { font-size: 1.1rem; }
.reacao-cliente .rodape { font-size: var(--fs-xs); color: var(--text-3); margin-left: 4px; }
.gravando { flex: 1; display: flex; align-items: center; gap: var(--s3); min-height: 44px; padding: 0 4px 0 var(--s3); border-radius: 12px; background: var(--bad-soft); color: var(--bad); font-size: var(--fs-sm); font-weight: 500; font-variant-numeric: tabular-nums; }
.gravando .ponto-rec { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); animation: piscar 1s infinite; }
@keyframes piscar { 50% { opacity: 0.3; } }

/* ------------------------------------------------------------------ ficha do cliente (memória) */
.ficha { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.ficha li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: var(--s2) 64px var(--s2) var(--s3); background: var(--surface-2); border-radius: var(--r-md); border-left: 3px solid var(--line-strong); font-size: var(--fs-sm); }
.ficha li.imp-3 { border-left-color: var(--brand); }
.ficha li.imp-1 { border-left-color: var(--line); }
.ficha li.inativa { opacity: 0.75; }
.ficha li.editando { padding-right: var(--s3); }
.ficha .meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: var(--fs-xs); color: var(--text-3); }
.ficha .estrelas { color: var(--warn); letter-spacing: 1px; }
.ficha .acoes-item { position: absolute; top: 4px; right: 4px; display: flex; gap: 2px; }
.form-memoria { display: flex; flex-direction: column; gap: var(--s2); }
.form-memoria textarea { min-height: 64px; resize: vertical; }
.link-discreto { all: unset; cursor: pointer; display: inline-block; font-size: var(--fs-xs); color: var(--text-2); text-decoration: underline; margin-top: var(--s2); }
.link-discreto:focus-visible { box-shadow: var(--focus); }
.resumo-conversa { margin-top: var(--s3); font-size: var(--fs-sm); }
.resumo-conversa summary { cursor: pointer; font-weight: 500; color: var(--text-2); }
.resumo-conversa p { margin-top: 6px; color: var(--text-2); white-space: pre-wrap; }

@media (max-width: 1100px) {
  .item-trilho, .rodape-trilho .btn-pausa { width: 44px; justify-content: center; padding: 0; }
  .item-trilho { position: relative; }
  .item-trilho > span, .rodape-trilho .btn-pausa > span { display: none; }
  .item-trilho > .contador { display: grid; position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
  .rodape-trilho { align-items: center; }
  .usuario { flex-direction: column; padding: 0; gap: 4px; }
}
@media (max-width: 760px) {
  .item-trilho, .rodape-trilho .btn-pausa { width: 100%; justify-content: flex-start; padding: 0 var(--s3); }
  .item-trilho > span, .rodape-trilho .btn-pausa > span { display: revert; }
  .item-trilho .contador { display: grid !important; }
  .rodape-trilho { align-items: stretch; }
  .usuario { flex-direction: row; padding: 0 var(--s2); gap: var(--s2); }
  .pagina.cheia, .inbox { height: calc(100dvh - 56px - var(--altura-faixa, 0px)); }
  .inbox, .inbox.sem-contexto { grid-template-columns: minmax(0, 1fr); }
  .faixa-pausa { padding-left: var(--s3); }
  .estado-pausa { grid-template-columns: 44px minmax(0, 1fr); }
  .estado-pausa > :last-child { grid-column: 1 / -1; }
  .lista-numeros li { grid-template-columns: 40px minmax(0, 1fr); }
  .lista-numeros li > :nth-child(n + 3) { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .digitando .pontos i { animation: none; opacity: 0.7; }
  .esqueleto { animation: none; }
}

/* ------------------------------------------------------------------ linhas */
/* A ordem das linhas (prioridade da linha padrão do bot) se arrasta com a mão
   — e também com o teclado, pelo puxador. */
/* Dentro da pilha (flex), o painel cresceria com a tabela e a página inteira
   rolaria de lado no celular. Com min-width 0 quem rola é só a tabela. */
.painel:has(.tabela-linhas) { min-width: 0; }
/* Sem isto, o `.sr-only` (position: absolute) de um cabeçalho escapa do
   envoltório e faz a PÁGINA rolar de lado no celular, não a tabela. */
.tabela-envoltorio { position: relative; }
.tabela-linhas td { vertical-align: middle; }
.tabela-linhas tr.inativa td { opacity: 0.6; }
.tabela-linhas tr.arrastando { opacity: 0.4; }
.tabela-linhas tr.alvo td { box-shadow: inset 0 2px 0 var(--brand); }
.tabela-linhas td.pega { width: 56px; padding-right: 0; }
.tabela-linhas .puxador { display: inline-flex; align-items: center; gap: 2px; border: 0; background: transparent; color: var(--text-3); cursor: grab; padding: 4px; border-radius: var(--r-sm); font-variant-numeric: tabular-nums; }
.tabela-linhas .puxador:hover { color: var(--text-2); background: var(--surface-2); }
.tabela-linhas .puxador:focus-visible { box-shadow: var(--focus); color: var(--text); }
.tabela-linhas tr.arrastando .puxador { cursor: grabbing; }
/* Número, o "hoje" e as ações não quebram: "(31) 98888-" numa linha e "7777" na outra não se lê. */
.tabela-linhas td.num { white-space: nowrap; }
.tabela-linhas .celula-pessoa { min-width: 150px; }
.tabela-linhas th, .tabela-linhas td { padding-left: var(--s3); padding-right: var(--s3); }
.tabela-linhas td.celula-acoes .acoes { flex-wrap: nowrap; }
/* Botões de subir/descer: só aparecem onde a tabela vira cartão (celular, embed do portal). */
.tabela-linhas .mover-setas { display: none; }
.tabela-linhas .puxador .num { font-size: var(--fs-sm); color: var(--text-2); min-width: 14px; text-align: right; }
.codigo-linha { display: grid; place-items: center; min-width: 34px; height: 30px; padding: 0 6px; border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-2); font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; }
.situacao-linha { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); color: var(--text-2); }
.situacao-linha .luz { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }
.situacao-linha .luz.ok { background: var(--ok); }
.situacao-linha .luz.ruim { background: var(--bad); }
.situacao-linha .luz.neutra { background: var(--line-strong); }
.qr-linha { display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center; }
.qr-linha img { border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; padding: var(--s3); image-rendering: pixelated; width: 264px; height: 264px; }
.qr-linha p { font-size: var(--fs-sm); max-width: 44ch; }
.codigo-pareamento { align-self: center; font-family: var(--mono); font-size: 28px; font-weight: 600; letter-spacing: 0.22em; padding: var(--s3) var(--s5); border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand-ink); border: 1px solid var(--brand-soft-line); }
@media (max-width: 760px) {
  .qr-linha img { width: min(264px, 70vw); height: auto; }
  .codigo-pareamento { font-size: 22px; letter-spacing: 0.16em; }
}

/* ------------------------------------------------------------------ adapter Core TMJ */
.entrega { display: inline-flex; align-items: center; color: var(--text-3); }
.entrega.entregue { color: var(--text-2); }
.entrega.lida { color: var(--info); }
.entrega.falhou { color: var(--bad); }
.identidade-slot { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.historico-identidade { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); }
.historico-identidade h3 { font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; }
.lista-historico-identidade { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); max-height: 220px; overflow: auto; }
.lista-historico-identidade li { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--fs-sm); }
.lista-historico-identidade li svg { flex: none; margin-top: 2px; color: var(--text-2); }
.identidade-core { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.identidade-core .sub { font-size: var(--fs-xs); display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.identidade-core .situacao-linha { font-size: var(--fs-xs); }
.id-linha { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-xs); cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.id-linha .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.id-linha:hover { background: var(--brand-soft); border-color: var(--brand-soft-line); color: var(--brand-ink); }
.id-linha:focus-visible { box-shadow: var(--focus); outline: none; }
.bloco-core { display: flex; flex-direction: column; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--line); }
.bloco-core h3 { font-size: var(--fs-base); }
.core-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); }
.core-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.core-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: var(--r-full); background: var(--brand-soft); color: var(--brand-ink); font-size: var(--fs-sm); }
.core-chip button { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.core-chip button:hover { background: var(--brand-soft-line); }
.core-chip button:focus-visible { box-shadow: var(--focus); outline: none; }
.core-resposta { margin-top: var(--s3); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-sm); display: flex; flex-direction: column; gap: 6px; }
.core-resposta pre, .core-json { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-2); max-height: 320px; overflow: auto; }
.core-json { padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.core-lista { list-style: none; margin: 0; padding: 0; }
.core-lista > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3) var(--s5); border-top: 1px solid var(--line); }
.core-lista > li:first-child { border-top: 0; }
.core-lista .titulo { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; font-weight: 500; font-size: var(--fs-sm); }
.core-lista .sub { font-size: var(--fs-xs); color: var(--text-2); overflow-wrap: anywhere; margin-top: 2px; }
.core-lista .acoes { display: flex; gap: var(--s2); justify-content: flex-end; flex-wrap: wrap; }
.core-linha-canal { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-top: 6px; }
.core-linha-canal .entrada { max-width: 320px; }
.core-sugestoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.core-sugestoes button { border: 1px dashed var(--line-strong); background: var(--surface); color: var(--text-2); border-radius: var(--r-full); padding: 2px 10px; font-size: var(--fs-xs); cursor: pointer; font-family: var(--mono); }
.core-sugestoes button:hover { border-color: var(--brand); color: var(--brand-ink); }
.core-sugestoes button:focus-visible { box-shadow: var(--focus); outline: none; }
@media (max-width: 640px) {
  .core-lista > li { grid-template-columns: minmax(0, 1fr); padding: var(--s3) var(--s4); }
  .core-lista .acoes { justify-content: flex-start; }
}
.core-secao { border-top: 1px solid var(--line); }
.core-secao > .corpo { padding: var(--s5); }
.core-linha-canal .entrada::placeholder { font-family: var(--sans, inherit); color: var(--text-3); }
.core-filtro { margin-top: var(--s3); max-width: 100%; }
.core-filtro .segmentado { flex-wrap: wrap; max-width: 100%; }
.core-openapi { margin-top: var(--s2); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--fs-sm); }
.core-openapi .mono { overflow-wrap: anywhere; min-width: 0; }
/* Conversas: ferramentas na mesma linha e cartões com três linhas legíveis. */
.lista-coluna > header { min-height: 48px; padding: 6px 12px; }
.lista-ferramentas { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.lista-ferramentas .busca { flex: 1; min-width: 0; padding: 0; border: 0; }
.lista-ferramentas .busca svg { left: 11px; }
.lista-ferramentas .busca .entrada { min-height: 36px; padding-left: 34px; }
.lista-ferramentas > .botao, .lista-ferramentas > button { flex: none; }
.alternar-filtros, .botao-estrela { display: inline-grid; place-items: center; width: 38px; min-width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text-2); cursor: pointer; }
.alternar-filtros:hover, .botao-estrela:hover { color: var(--text); background: var(--surface-2); }
.alternar-filtros:focus-visible, .botao-estrela:focus-visible, .chip-conversa:focus-visible, .item-conversa-abrir:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.botao-estrela.marcada { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.botao-estrela.marcada svg { fill: currentColor; }
.lista-filtros { border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.lista-filtros .seletor-linha-wrap { padding: 5px 10px 0; }
.lista-filtros .seletor-linha { height: 30px; }
.lista-filtros .filtro-linhas { min-height: 34px; }
.lista-coluna .filtro-linhas { width: 100%; display: flex; align-items: center; gap: 9px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; }
.lista-coluna .filtro-linhas > span:nth-child(2) { flex: 1; }
.lista-coluna .filtro-linhas > .icone { color: var(--text-3); }
.lista-coluna .caixa-resumo, .lista-coluna .caixa-marcacao { position: relative; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--line-strong); border-radius: 5px; background: var(--surface); }
.lista-coluna .caixa-resumo.marcada, .lista-coluna .caixa-resumo.parcial, .lista-coluna .opcao-linha input:checked + .caixa-marcacao { border-color: var(--brand); background: var(--brand); }
.lista-coluna .caixa-resumo.marcada::after, .lista-coluna .opcao-linha input:checked + .caixa-marcacao::after { content: ''; position: absolute; width: 8px; height: 4px; left: 4px; top: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.lista-coluna .caixa-resumo.parcial::after { content: ''; position: absolute; width: 8px; height: 2px; left: 4px; top: 7px; background: #fff; }
.lista-coluna .filtro-linhas-pop { width: min(360px, calc(100vw - 16px)); max-height: min(70vh, 560px); overflow: auto; padding: 8px; }
.lista-coluna .opcoes-linhas { display: grid; gap: 2px; margin-top: 6px; }
.lista-coluna .opcao-linha { min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.lista-coluna .opcao-linha:hover { background: var(--surface-2); }
.lista-coluna .opcao-linha.todas { border-bottom: 1px solid var(--line); border-radius: 0; }
.lista-coluna .opcao-linha input { position: absolute; opacity: 0; pointer-events: none; }
.lista-coluna .opcao-linha .nome-op { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-coluna .opcao-linha small { margin-left: auto; color: var(--text-3); }
.lista-coluna .opcao-linha .ponto-linha { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--cor-linha); }
.lista-coluna .atalhos-linhas { display: flex; gap: 6px; padding: 8px 4px 2px; }
.lista-coluna .atalhos-linhas button { min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface-2); color: var(--text-2); font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; }
.lista-coluna .selo-linha { display: inline-flex; align-items: center; gap: 5px; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--cor-linha) 55%, transparent); border-radius: var(--r-full); background: color-mix(in srgb, var(--cor-linha) 16%, transparent); white-space: nowrap; }
.lista-coluna .selo-linha .ponto-linha { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--cor-linha); }
.lista-coluna .selo-linha b { color: var(--cor-linha); }
.chips-conversas { display: flex; gap: 5px; overflow-x: auto; padding: 6px 10px 1px; scrollbar-width: thin; }
.chip-conversa { flex: 0 0 auto; min-height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface); color: var(--text-2); font: inherit; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; cursor: pointer; }
.chip-conversa:hover { border-color: var(--line-strong); color: var(--text); }
.chip-conversa.ativo { background: var(--brand-soft); border-color: var(--brand-soft-line); color: var(--brand-ink); }
.item-conversa { position: relative; display: block; min-height: 68px; padding: 0; border-left: 3px solid var(--cor-linha, transparent); cursor: default; }
.item-conversa:has(.item-conversa-abrir[aria-current='true']) { background: var(--brand-soft); }
.item-conversa-abrir { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 9px; width: 100%; min-height: 67px; padding: 5px 49px 5px 10px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.item-conversa-abrir:hover { background: var(--surface-2); }
.item-conversa .avatar { width: 34px; height: 34px; }
.item-conversa .linha1 { min-width: 0; line-height: 17px; }
.item-conversa .nome { min-width: 0; font-size: var(--fs-sm); }
.item-conversa .quando { margin-left: auto; font-size: 10px; }
.item-conversa .previa { display: block; line-height: 16px; max-height: 16px; }
.item-conversa .selos { overflow: hidden; flex-wrap: nowrap; white-space: nowrap; margin-top: 4px; min-height: 17px; }
.item-conversa .selos .selo, .item-conversa .selos .selo-linha { flex: none; max-height: 18px; padding: 0 6px; font-size: 10px; line-height: 16px; }
.item-conversa .estrela-item { position: absolute; right: 5px; top: 14px; width: 40px; height: 44px; border-color: transparent; background: transparent; }
@media (max-width: 760px) {
  .item-conversa-abrir { min-height: 73px; }
  .chip-conversa { min-height: 34px; }
  .alternar-filtros { min-width: 40px; height: 40px; }
}
/* Celular: botão de rótulo comprido quebra a linha em vez de empurrar a página para o lado. */
@media (max-width: 760px) {
  .btn { white-space: normal; max-width: 100%; text-align: center; padding-block: 6px; }
/* ------------------------------------------------------------------ agentes › decisões (Jev) */
.pontos-jev { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.ponto-jev { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.ponto-jev.ativo { border-color: var(--ok-soft); box-shadow: inset 3px 0 0 var(--ok); }
.ponto-jev.sombra { box-shadow: inset 3px 0 0 var(--warn); }
.ponto-jev .cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.ponto-jev .nome { font-weight: 600; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.ponto-jev .desc { color: var(--text-2); font-size: var(--fs-sm); margin-top: 4px; max-width: 70ch; }
.ponto-jev .agora { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--fs-sm); color: var(--text); background: var(--surface-2); padding: 8px 12px; border-radius: var(--r-md); }
.ponto-jev .agora svg { flex: none; margin-top: 2px; color: var(--text-2); }
.ponto-jev .rodape-ponto { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.ponto-jev .limiar { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; }
.tabela-decisoes td { vertical-align: top; font-size: var(--fs-sm); }
.selos-decisao { display: flex; flex-wrap: wrap; gap: 4px; }
.selos-decisao .selo { height: auto; padding: 2px 8px; white-space: nowrap; }
@media (max-width: 760px) {
  .ponto-jev .cabeca { flex-direction: column; }
}
.selo-linha { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 12px; line-height: 18px; color: var(--text); background: color-mix(in srgb, var(--cor-linha) 16%, transparent); border: 1px solid color-mix(in srgb, var(--cor-linha) 55%, transparent); max-width: 100%; white-space: nowrap; }
.selo-linha b { color: var(--cor-linha); font-weight: 700; }
.selo-linha .ponto-linha { width: 8px; height: 8px; border-radius: 50%; background: var(--cor-linha); flex: none; }
.selo-linha .rotulo-linha { overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.item-conversa, .portal-item { border-left: 3px solid var(--cor-linha, transparent); }
.linhas-usadas { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.portal-filtro-linhas { display: flex; gap: 6px; padding: 10px 16px 2px; overflow-x: auto; scrollbar-width: none; }
.portal-filtro-linhas::-webkit-scrollbar { display: none; }
.portal-filtro-linhas .chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; appearance: none; -webkit-appearance: none; }
.portal-filtro-linhas .chip:hover { border-color: var(--line-strong); color: var(--text); }
.portal-filtro-linhas .chip.ativo { background: color-mix(in srgb, var(--cor-linha, var(--brand)) 18%, var(--surface)); border-color: var(--cor-linha, var(--brand)); color: var(--text); }
.portal-filtro-linhas .chip .contagem-modo { font-weight: 500; color: var(--text-3); }
.portal-filtro-linhas .ponto-linha { width: 8px; height: 8px; border-radius: 50%; background: var(--cor-linha); }
.seletor-linha-wrap { padding: 8px 16px 0; }
.seletor-linha { width: 100%; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: left; transition: border-color .15s; }
.seletor-linha:hover { border-color: var(--line-strong); }
.seletor-linha > b { color: var(--cor-linha, var(--text)); }
.seletor-linha .rotulo-linha, .seletor-linha > span:not(.ponto-linha):not(.contagem) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.seletor-linha .ponto-linha, .seletor-linha-pop .ponto-linha { width: 9px; height: 9px; border-radius: 50%; background: var(--cor-linha); flex: none; }
.seletor-linha .contagem, .seletor-linha-pop .contagem { margin-left: auto; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.seletor-linha-pop { max-height: 60vh; overflow-y: auto; }
.seletor-linha-pop .menu-item { display: flex; align-items: center; gap: 8px; width: 100%; }
.seletor-linha-pop .menu-item b { color: var(--cor-linha, var(--text)); min-width: 28px; }
.seletor-linha-pop .menu-item .nome-op { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }

.seletor-linha-pop .menu-item small { color: var(--text-3); }
.seletor-linha-pop .menu-item.ativo { background: var(--brand-soft); }
.id-tmj { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.marca-linha { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; font-size: 10px; font-weight: 600; color: var(--cor-linha); opacity: .9; } .marca-linha .ponto-linha { width: 6px; height: 6px; border-radius: 50%; background: var(--cor-linha); }
.midia-carregar { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; margin-bottom: 4px; border-radius: 8px; border: 1px dashed var(--line-strong); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.midia-carregar:hover:not(:disabled) { border-style: solid; }
.midia-carregar small { color: var(--text-3); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.midia-transcricao { display: flex; gap: 6px; align-items: flex-start; margin: 2px 0 4px; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); color: var(--text-2); font-size: 12.5px; line-height: 1.4; max-width: 320px; white-space: pre-wrap; }
.midia-transcricao.lendo { font-style: italic; }

/* Carga do dia por linha (seletor de linha) */
.carga-linha { margin-left: auto; min-width: 22px; padding: 0 6px; border-radius: 999px; font-size: var(--fs-xs, 12px); line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; background: var(--surface-3); color: var(--text-2); }
.carga-linha.media { background: var(--warn-soft); color: var(--warn); }
.carga-linha.alta { background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.seletor-linha .carga-linha { margin-left: 6px; }

.chat-linha-seletor.linha-invalida .seletor-linha { border-color: var(--warn); box-shadow: 0 0 0 2px var(--warn-soft); }
.aviso-linha-sugerida { display: inline-flex; align-items: center; min-height: 20px; padding: 1px 7px; border-radius: var(--r-full); background: var(--warn-soft); color: var(--warn); font-size: var(--fs-xs); font-weight: 600; }

.opcao-linha input:indeterminate + .caixa-marcacao { border-color: var(--brand); background: var(--brand); }
.opcao-linha input:indeterminate + .caixa-marcacao::after { content: ''; position: absolute; width: 8px; height: 2px; left: 4px; top: 7px; border-radius: 2px; background: #fff; }

/* Filtro múltiplo: o input nativo fica só para semântica e teclado. */
.filtro-linhas { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }.filtro-linhas:hover { border-color: var(--line-strong); }.filtro-linhas > span:nth-child(2) { flex: 1; }.filtro-linhas > .icone { color: var(--text-3); }.caixa-resumo, .caixa-marcacao { width: 18px; height: 18px; flex: none; border: 1.5px solid var(--line-strong); border-radius: 5px; background: var(--surface); position: relative; }.caixa-resumo.marcada, .caixa-resumo.parcial, .opcao-linha input:checked + .caixa-marcacao { border-color: var(--brand); background: var(--brand); }.caixa-resumo.marcada::after, .opcao-linha input:checked + .caixa-marcacao::after { content: ''; position: absolute; width: 8px; height: 4px; left: 4px; top: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }.caixa-resumo.parcial::after { content: ''; position: absolute; width: 8px; height: 2px; left: 4px; top: 7px; border-radius: 2px; background: #fff; }.filtro-linhas-pop { width: min(360px, calc(100vw - 16px)); max-height: min(70vh, 560px); overflow: auto; padding: 8px; }.opcoes-linhas { display: grid; gap: 2px; margin-top: 6px; }.opcao-linha { min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }.opcao-linha:hover { background: var(--surface-2); }.opcao-linha input { position: absolute; opacity: 0; pointer-events: none; }.opcao-linha input:focus-visible + .caixa-marcacao { outline: 2px solid var(--focus, var(--brand)); outline-offset: 2px; }.opcao-linha.todas { border-bottom: 1px solid var(--line); border-radius: 0; }.opcao-linha b { min-width: 28px; }.opcao-linha .nome-op { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.opcao-linha small { margin-left: auto; color: var(--text-3); }.opcao-linha .ponto-linha { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--cor-linha); }.atalhos-linhas { display: flex; gap: 6px; padding: 8px 4px 2px; }.atalhos-linhas button { min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--text-2); font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; }.atalhos-linhas button:hover { border-color: var(--line-strong); color: var(--text); }