/* ══════════════════════════════════════════════════════════════════════════
   CENTRAL DE CHAMADOS — FUNDAÇÃO (design system compartilhado, direção "Signal+")
   Módulo AUTOCONTIDO. Tokens --cht-* + componentes .cht-* usados pelas DUAS telas
   (colaborador e técnico). Derivado de tokens.css (Plus Jakarta Sans / DM Sans /
   IBM Plex Mono; --md-sys-color-*, --space-*, --radius-*, --shadow-1/2). Light-only.

   REGRAS DE OURO honradas aqui:
   • Tokens --cht-* declarados em :root (NÃO num wrapper) — evita o footgun de
     modal renderizado a body-level herdar vars indefinidas. Derivam de --md-sys-*.
   • Monocromático frio + 1 accent (brand real #45628f). Cor semântica QUARENTENADA
     em SLA/status-dot/prioridade — nunca preenchimento de bloco espalhado.
   • Botões custom SEMPRE declaram background+color no :hover (neutraliza o
     button:hover navy global de components.css).
   • SLA badge/countdown key-ados por classe de estado (is-ok/is-warn/is-breach/
     is-done/is-atendido — o que o updateSlaChips já emite) E por data-sla-state.
     O badge sobrevive a textContent-replacement (dot vem de ::before, não filho).
   • data-attributes como fonte da verdade: data-status, data-priority,
     data-sla-state resolvem cor via CSS. Classes utilitárias (s-*, p-*, is-*)
     também suportadas para casar com o markup do mockup e do JS existente.
   • Mobile-first embutido; prefers-reduced-motion respeitado; contraste AA.
   ══════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────────
   1 · TOKENS  (em :root, derivando de --md-sys-* com fallback à realidade do portal)
   ──────────────────────────────────────────────────────────────────────────── */
:root {
  /* superfícies frias */
  --cht-bg: #eef2fb;
  --cht-surface: var(--md-sys-color-surface, #ffffff);
  --cht-surface-2: #f5f8ff;
  --cht-surface-3: #eef2fb;
  /* tinta */
  --cht-ink: var(--md-sys-color-on-surface, #171c24);
  --cht-ink-2: var(--md-sys-color-on-surface-variant, #404752);
  --cht-ink-3: #5f6675; /* AA sobre surfaces tingidas (~4.6:1) — era #6a7280 */
  --cht-ink-4: #6c7488; /* AA texto normal (~4.5:1) — era #8b93a3 (reprovava ~3.1:1) */
  --cht-ink-5: #8b93a3; /* SÓ decorativo/hairline — NÃO usar em texto (falha AA) */
  /* linhas */
  --cht-line: #e4e9f4;
  --cht-line-2: #d4dbeb;
  --cht-line-3: var(--md-sys-color-outline-variant, #c1c7d3);
  /* ACCENT = brand real #45628f, elevado */
  --cht-accent: var(--md-sys-color-primary, #45628f);
  --cht-accent-ink: #31557f;
  --cht-accent-deep: #244563;
  --cht-accent-weak: #e9f0ff;
  --cht-accent-line: #c9d8f2;
  /* PREMIUM · brilho indigo discreto (mesma família fria) só p/ glow/realces */
  --cht-accent-glow: #4f6ae8;
  /* gradientes de marca (hero/CTA/cabeçalhos) — sempre na família do azul */
  --cht-grad-accent: linear-gradient(135deg, #4f6ae8 0%, var(--cht-accent) 46%, var(--cht-accent-deep) 100%);
  --cht-grad-accent-soft: linear-gradient(135deg, var(--cht-accent) 0%, var(--cht-accent-ink) 100%);
  /* véu de vidro frio p/ cabeçalhos sticky / overlays */
  --cht-glass: rgba(247, 249, 253, .78);
  --cht-glass-line: rgba(120, 140, 180, .22);

  /* SEMÂNTICAS DE STATUS (mapa contratual novo/em_atendimento/pendente/solucionado/fechado) */
  --cht-novo: #4f6ae8;   --cht-novo-weak: #e9edfd;
  --cht-atend: #0b7fa0;  --cht-atend-weak: #dcf3fa;
  --cht-pend: #8a6100;   --cht-pend-weak: #fdf1d7;
  --cht-soluc: #1c7f4d;  --cht-soluc-weak: #d9f2e4;
  --cht-fech: #5f6672;   --cht-fech-weak: #eceff5;

  /* SLA (mesmas famílias) */
  --cht-ok: var(--md-sys-color-success, #1c7f4d);     --cht-ok-weak: #e2f5ea;   --cht-ok-line: #a7ddc0;
  --cht-warn: var(--md-sys-color-warning, #8a6100);   --cht-warn-weak: #fdf1d7; --cht-warn-line: #eecf8c;
  --cht-breach: var(--md-sys-color-error, #b3261e);   --cht-breach-weak: #fde8e6; --cht-breach-line: #f0b3ad;

  /* PRIORIDADE (barra lateral) — baixa(2) normal(3) alta(5) crítica(1/6 GLPI) */
  --cht-prio-baixa: #5b8fb8;
  --cht-prio-normal: #6c7488; /* AA + distingue normal↔baixa — era #8b93a3 */
  --cht-prio-alta: #c8720f;
  --cht-prio-critica: #b3261e;

  /* PALETA DE AVATAR (tokenizada, determinística; av-warm reservada a técnico) */
  --cht-av-1: #45628f;
  --cht-av-2: #0b7fa0;
  --cht-av-3: #1c7f4d;
  --cht-av-4: #8a6100;
  --cht-av-5: #7c5cfc;
  --cht-av-6: #5b6672;
  --cht-av-warm: #c8720f;

  /* RAIO */
  --cht-r: 12px;
  --cht-r-lg: 16px;
  --cht-r-sm: 9px;
  --cht-r-pill: 999px;

  /* ELEVAÇÃO — rampa Signal PREMIUM, sombra multi-camada de TINT FRIO
     (azul-acinzentado #31557f, não cinza chapado) → dá profundidade sofisticada */
  --cht-sh-1: 0 1px 2px rgba(49, 85, 127, .07), 0 1px 1px rgba(36, 69, 99, .05);
  --cht-sh-2: 0 10px 24px -6px rgba(49, 85, 127, .18), 0 3px 8px -2px rgba(49, 85, 127, .12), 0 1px 2px rgba(36, 69, 99, .06);
  --cht-sh-3: 0 22px 48px -10px rgba(36, 69, 99, .26), 0 8px 18px -6px rgba(49, 85, 127, .16), 0 2px 4px rgba(36, 69, 99, .08);
  --cht-sh-drag: 0 26px 50px -8px rgba(36, 69, 99, .30), 0 8px 18px rgba(49, 85, 127, .20);
  /* glow frio (halo indigo discreto p/ realce ao vivo / foco de destaque) */
  --cht-glow: 0 0 0 4px rgba(79, 106, 232, .14);

  /* TIPOGRAFIA — famílias REAIS do portal (zero fontes novas) */
  --cht-fd: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --cht-fu: 'DM Sans', 'Segoe UI', sans-serif;
  --cht-fm: 'IBM Plex Mono', Consolas, monospace;

  /* MOTION — rampa de durações + easings premium (rápido, nunca brega) */
  --cht-dur: 150ms;
  --cht-dur-2: 240ms;
  --cht-dur-3: 340ms;
  --cht-ease: cubic-bezier(.2, 0, 0, 1);
  --cht-ease-out: cubic-bezier(.16, 1, .3, 1);   /* saída suave (entradas) */
  --cht-ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* leve overshoot p/ pop */
}

/* ────────────────────────────────────────────────────────────────────────────
   2 · ROOT DO MÓDULO + RESET LOCAL
   ──────────────────────────────────────────────────────────────────────────── */
.cht {
  font-family: var(--cht-fu);
  color: var(--cht-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-width: 0;
}
.cht *,
.cht *::before,
.cht *::after { box-sizing: border-box; }

.cht .cht-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;
}

/* ────────────────────────────────────────────────────────────────────────────
   3 · AVATAR  .cht-av  (paleta determinística tokenizada; av-warm p/ técnico)
   ──────────────────────────────────────────────────────────────────────────── */
.cht-av {
  border-radius: 50%;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  font-family: var(--cht-fu);
  font-weight: 700;
  font-size: 10.5px;
  color: #fff;
  background: var(--cht-av-6);
  flex: none;
  line-height: 1;
  overflow: hidden;
}
.cht-av img { width: 100%; height: 100%; object-fit: cover; }
.cht-av--1 { background: var(--cht-av-1); }
.cht-av--2 { background: var(--cht-av-2); }
.cht-av--3 { background: var(--cht-av-3); }
.cht-av--4 { background: var(--cht-av-4); }
.cht-av--5 { background: var(--cht-av-5); }
.cht-av--6 { background: var(--cht-av-6); }
.cht-av--warm { background: var(--cht-av-warm); }
.cht-av--xs { width: 20px; height: 20px; font-size: 9px; }
.cht-av--sm { width: 22px; height: 22px; font-size: 9px; }

/* ────────────────────────────────────────────────────────────────────────────
   4 · STATUS  .cht-status  (dot + label 600) — data-status OU classe s-*
   ──────────────────────────────────────────────────────────────────────────── */
.cht-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--cht-ink-4);
}
.cht-dot.s-novo,   [data-status="novo"] .cht-dot            { background: var(--cht-novo); }
.cht-dot.s-atend,  [data-status="em_atendimento"] .cht-dot  { background: var(--cht-atend); }
.cht-dot.s-pend,   [data-status="pendente"] .cht-dot        { background: var(--cht-pend); }
.cht-dot.s-soluc,  [data-status="solucionado"] .cht-dot     { background: var(--cht-soluc); }
.cht-dot.s-fech,   [data-status="fechado"] .cht-dot         { background: var(--cht-fech); }

.cht-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cht-fu);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cht-ink-2);
  white-space: nowrap;
}
.cht-status .cht-dot { width: 7px; height: 7px; }

/* ────────────────────────────────────────────────────────────────────────────
   5 · PRIORIDADE  .cht-prio  (barra 3px + label colorido só no texto)
   data-priority="baixa|normal|alta|critica" OU classe p-*
   ──────────────────────────────────────────────────────────────────────────── */
.cht-prio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cht-fu);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--cht-ink-2);
}
.cht-prio .cht-prio-bar {
  width: 3px; height: 12px;
  border-radius: 2px;
  flex: none;
  background: var(--cht-prio-normal);
}
.cht-prio.p-baixa,   [data-priority="baixa"].cht-prio   { color: #3f6c8c; }
.cht-prio.p-baixa   .cht-prio-bar,
[data-priority="baixa"].cht-prio   .cht-prio-bar   { background: var(--cht-prio-baixa); }
.cht-prio.p-normal  .cht-prio-bar,
[data-priority="normal"].cht-prio  .cht-prio-bar   { background: var(--cht-prio-normal); }
.cht-prio.p-alta,    [data-priority="alta"].cht-prio    { color: #a35d0c; }
.cht-prio.p-alta    .cht-prio-bar,
[data-priority="alta"].cht-prio    .cht-prio-bar   { background: var(--cht-prio-alta); }
.cht-prio.p-critica, [data-priority="critica"].cht-prio { color: #8e201a; }
.cht-prio.p-critica .cht-prio-bar,
[data-priority="critica"].cht-prio .cht-prio-bar   { background: var(--cht-prio-critica); }

/* ────────────────────────────────────────────────────────────────────────────
   6 · CHIP / TAG / PILL / NUM
   ──────────────────────────────────────────────────────────────────────────── */
.cht-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--cht-fu);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cht-ink-2);
  padding: 2px 9px;
  border-radius: var(--cht-r-pill);
  background: var(--cht-surface-2);
  border: 1px solid var(--cht-line-2);
  white-space: nowrap;
}
.cht-num {
  font-family: var(--cht-fm);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--cht-ink-3);
  font-variant-numeric: tabular-nums;
}
.cht-sep { color: var(--cht-line-3); }

/* Selo discreto "Origem: GLPI #NNNN" — so nos tickets importados do GLPI.
   Marca a proveniencia sem competir com o numero nativo do portal. */
.cht-origem-glpi {
  font-family: var(--cht-fm);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--cht-ink-3);
  background: var(--cht-surface-2, rgba(120, 130, 150, .1));
  border: 1px solid var(--cht-line-3);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* chip de filtro .cht-chip[.on] — contador mono .c */
.cht-chip {
  font-family: var(--cht-fu);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cht-ink-2);
  background: var(--cht-surface);
  border: 1px solid var(--cht-line-2);
  padding: 6px 13px;
  border-radius: var(--cht-r-pill);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--cht-dur) var(--cht-ease),
              color var(--cht-dur) var(--cht-ease),
              border-color var(--cht-dur) var(--cht-ease);
}
.cht-chip:hover { background: var(--cht-surface-2); color: var(--cht-ink); }
.cht-chip.on,
.cht-chip[aria-pressed="true"],
.cht-chip[aria-selected="true"] {
  background: var(--cht-accent-weak);
  color: var(--cht-accent-ink);
  border-color: var(--cht-accent-line);
}
.cht-chip .c {
  font-family: var(--cht-fm);
  font-size: 10.5px;
  color: var(--cht-ink-3);
  font-variant-numeric: tabular-nums;
}
.cht-chip.on .c,
.cht-chip[aria-pressed="true"] .c,
.cht-chip[aria-selected="true"] .c { color: var(--cht-accent-ink); }

/* ────────────────────────────────────────────────────────────────────────────
   Filtros avancados (popover compacto) — .cht-fbox / .cht-fbtn / .cht-fpanel
   Componente COMPARTILHADO por Atendimento (fila do tecnico) e Central (meus
   chamados): botao discreto "Filtros" com selo de filtros ativos que abre um
   painel flutuante (Status/Prioridade/Periodo). As pills reusam .cht-chip; tudo
   sai dos tokens --cht-*. Nasce fechado (hidden); o JS so alterna hidden/aria.
   ──────────────────────────────────────────────────────────────────────────── */
.cht-fbox { position: relative; display: inline-flex; flex: none; }
.cht-fbtn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--cht-fu); font-size: 12.5px; font-weight: 600;
  color: var(--cht-ink-2);
  background: var(--cht-surface);
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r-pill);
  padding: 6px 13px; cursor: pointer; white-space: nowrap;
  transition: background var(--cht-dur) var(--cht-ease),
              color var(--cht-dur) var(--cht-ease),
              border-color var(--cht-dur) var(--cht-ease);
}
.cht-fbtn svg { width: 15px; height: 15px; flex: none; }
.cht-fbtn:hover { background: var(--cht-surface-2); color: var(--cht-ink); }
.cht-fbtn[aria-expanded="true"] { border-color: var(--cht-accent-line); color: var(--cht-ink); }
/* Ativo (ha filtros) = mesmo fill tonal M3 dos chips — le como "ligado". */
.cht-fbtn.is-active {
  color: var(--cht-accent-ink); background: var(--cht-accent-weak); border-color: var(--cht-accent-line);
}
.cht-fbtn-count {
  font-family: var(--cht-fm); font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--cht-accent); color: #fff;
  border-radius: var(--cht-r-pill);
  min-width: 17px; height: 17px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cht-fbtn-count[hidden] { display: none; }

.cht-fpanel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: 300px; max-width: min(320px, calc(100vw - 28px));
  max-height: min(72vh, 460px); overflow-y: auto;
  display: grid; gap: 15px; padding: 15px;
  background: var(--cht-surface);
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r-lg);
  box-shadow: var(--cht-sh-2);
  animation: cht-fpanel-in 130ms var(--cht-ease) both;
}
.cht-fpanel[hidden] { display: none; }
@keyframes cht-fpanel-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.cht-fgrp { display: grid; gap: 8px; }
.cht-fgrp-h {
  font-family: var(--cht-fu); font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--cht-ink-4);
}
.cht-fpills { display: flex; flex-wrap: wrap; gap: 6px; }
.cht-fpills .cht-chip { padding: 5px 11px; font-size: 12px; }

.cht-fdates { display: flex; align-items: flex-end; gap: 8px; }
.cht-fdate {
  display: grid; gap: 4px; flex: 1 1 0; min-width: 0;
  font-family: var(--cht-fu); font-size: 11px; font-weight: 600; color: var(--cht-ink-3);
}
.cht-fdate input {
  font-family: var(--cht-fu); font-size: 12.5px; color: var(--cht-ink);
  background: var(--cht-surface-2);
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r-sm);
  padding: 6px 8px; width: 100%; min-width: 0; min-height: 0;
}
.cht-fdate input:focus-visible {
  outline: 2px solid var(--cht-accent-line); outline-offset: 1px;
  border-color: var(--cht-accent-line);
}

.cht-factions {
  display: flex; justify-content: flex-end;
  border-top: 1px solid var(--cht-line); padding-top: 12px;
}
.cht-fclear {
  font-family: var(--cht-fu); font-size: 12px; font-weight: 600;
  color: var(--cht-ink-3); background: none; border: none; cursor: pointer;
  padding: 5px 8px; border-radius: var(--cht-r-sm);
  transition: background var(--cht-dur) var(--cht-ease), color var(--cht-dur) var(--cht-ease);
}
.cht-fclear:hover:not(:disabled) { color: var(--cht-breach); background: var(--cht-breach-weak); }
.cht-fclear:disabled { opacity: .45; cursor: default; }

/* Mobile: ancora a esquerda + alvos de toque maiores. */
@media (max-width: 560px) {
  .cht-fbtn { min-height: 40px; }
  .cht-fpanel { right: auto; left: 0; width: min(320px, calc(100vw - 28px)); }
  .cht-fpills .cht-chip { min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .cht-fpanel { animation: none; }
}

/* ────────────────────────────────────────────────────────────────────────────
   7 · BADGE DE SLA  .cht-sla  (dot ::before + label do relógio + tempo mono)
   Estados via classe (is-ok/is-warn/is-breach/is-done/is-atendido — o que o
   updateSlaChips já emite) E via data-sla-state="ok|warn|breach|done".
   RESILIÊNCIA: o dot é ::before (não filho), então quando o ticker faz
   chip.textContent = "prefix tempo" o dot sobrevive. O rótulo do relógio pode
   vir no data-sla-prefix (renderizado pelo JS dentro do texto) OU num <span.lbl>.
   ──────────────────────────────────────────────────────────────────────────── */
.cht-sla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cht-fm);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px 3px 7px;
  border-radius: var(--cht-r-pill);
  border: 1px solid var(--cht-line-2);
  background: var(--cht-surface);
  color: var(--cht-ink-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* dot resiliente a textContent-replacement */
.cht-sla::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
  background: currentColor;
}
/* dot alternativo como filho (markup do mockup: <span class="d">) — some quando
   não existir; quando existir, herda a cor via currentColor. */
.cht-sla .d {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
  background: currentColor;
}
/* quando há filho .d explícito, esconde o ::before p/ não duplicar */
.cht-sla:has(.d)::before { display: none; }
.cht-sla .lbl {
  font-family: var(--cht-fu);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .02em;
  color: inherit;
  opacity: .8;
}
.cht-sla svg { width: 12px; height: 12px; flex: none; }
/* check inline do "resolvido" ocupa o lugar do dot */
.cht-sla svg + * { margin-left: -1px; }

.cht-sla.is-ok,       .cht-sla[data-sla-state="ok"]     { color: var(--cht-ok); border-color: var(--cht-ok-line); }
.cht-sla.is-warn,     .cht-sla[data-sla-state="warn"]   { color: var(--cht-warn); background: var(--cht-warn-weak); border-color: var(--cht-warn-line); }
.cht-sla.is-breach,   .cht-sla[data-sla-state="breach"] { color: var(--cht-breach); background: var(--cht-breach-weak); border-color: var(--cht-breach-line); }
.cht-sla.is-done,
.cht-sla.is-atendido, .cht-sla[data-sla-state="done"]   { color: var(--cht-ok); border-color: var(--cht-ok-line); }
/* quando resolvido, o ::before-dot vira check-verde discreto (mantém cor ok) */

/* ────────────────────────────────────────────────────────────────────────────
   8 · BOTÕES  .cht-btn (primary / ghost)
   SEMPRE declaram background+color no :hover (gotcha button:hover navy global).
   ──────────────────────────────────────────────────────────────────────────── */
.cht-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--cht-fu);
  font-size: 13px;
  font-weight: 600;
  /* neutraliza o button{min-height:44px} global (components.css) que incharia
     os botoes compactos da Central. */
  min-height: 0;
  padding: 9px 15px;
  border-radius: var(--cht-r-pill);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background var(--cht-dur) var(--cht-ease),
              color var(--cht-dur) var(--cht-ease),
              border-color var(--cht-dur) var(--cht-ease),
              box-shadow var(--cht-dur) var(--cht-ease);
}
.cht-btn svg { width: 15px; height: 15px; flex: none; }
.cht-btn:disabled,
.cht-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.cht-btn { transform: translateZ(0); }
.cht-btn:active { transform: translateY(1px) scale(.985); }
.cht-btn--primary {
  background: var(--cht-accent);
  background-image: var(--cht-grad-accent-soft);
  color: #fff;
  box-shadow: var(--cht-sh-1);
  transition: background var(--cht-dur) var(--cht-ease),
              box-shadow var(--cht-dur-2) var(--cht-ease-out),
              transform var(--cht-dur-2) var(--cht-ease-spring);
}
.cht-btn--primary:hover {
  /* re-declara background: neutraliza o button:hover{background:var(--brand-600)}
     global de components.css (0,1,1) que pintaria o botao de navy no hover. */
  background: var(--cht-accent-ink);
  background-image: var(--cht-grad-accent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--cht-sh-2), var(--cht-glow);
}
.cht-btn--primary:active { box-shadow: var(--cht-sh-1); }
.cht-btn--primary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cht-accent-weak), var(--cht-sh-1); }

.cht-btn--ghost {
  background: var(--cht-surface); color: var(--cht-ink-2); border-color: var(--cht-line-2);
  transition: background var(--cht-dur) var(--cht-ease), color var(--cht-dur) var(--cht-ease),
              border-color var(--cht-dur) var(--cht-ease), box-shadow var(--cht-dur-2) var(--cht-ease-out),
              transform var(--cht-dur-2) var(--cht-ease-spring);
}
.cht-btn--ghost:hover { background: var(--cht-surface-2); color: var(--cht-ink); border-color: var(--cht-line-3); transform: translateY(-1px); box-shadow: var(--cht-sh-1); }
.cht-btn--ghost:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cht-accent-weak); }

/* atalho de teclado dentro de botão primário */
.cht-kbd {
  font-family: var(--cht-fm);
  font-size: 10.5px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
/* kbd em botão ghost/claro */
.cht-btn--ghost .cht-kbd {
  border-color: var(--cht-line-2);
  background: var(--cht-surface-2);
  color: var(--cht-ink-3);
}

/* ────────────────────────────────────────────────────────────────────────────
   9 · SELO "AO VIVO"  .cht-live  (dot pulsante) — estados via classe
   ──────────────────────────────────────────────────────────────────────────── */
.cht-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cht-fu);
  font-weight: 600;
  font-size: 11.5px;
  color: var(--cht-ok);
}
.cht-live .cht-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cht-ok);
  position: relative;
  flex: none;
  /* núcleo "respira" + halo suave — sensação de sinal vivo */
  box-shadow: 0 0 0 0 rgba(28, 127, 77, .5);
  animation: cht-live-core 2.4s var(--cht-ease-out) infinite;
}
.cht-live .cht-pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--cht-ok);
  opacity: .45;
  animation: cht-ping 2s var(--cht-ease-out) infinite;
}
/* segundo anel defasado → onda dupla mais orgânica */
.cht-live .cht-pulse::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--cht-ok);
  opacity: 0;
  animation: cht-ping 2s var(--cht-ease-out) 1s infinite;
}
/* conectado explícito (técnico usa .is-open) = mesmo verde vivo do default */
.cht-live.is-open { color: var(--cht-ok); }
.cht-live.is-open .cht-pulse { background: var(--cht-ok); }
/* reconectando = âmbar; pausado = neutro (reflete estado SSE) */
.cht-live.is-connecting,
.cht-live.is-reconnecting { color: var(--cht-warn); }
.cht-live.is-connecting .cht-pulse,
.cht-live.is-reconnecting .cht-pulse { background: var(--cht-warn); }
.cht-live.is-connecting .cht-pulse::after,
.cht-live.is-reconnecting .cht-pulse::after { border-color: var(--cht-warn); }
.cht-live.is-paused { color: var(--cht-ink-4); }
.cht-live.is-paused .cht-pulse { background: var(--cht-ink-4); }
.cht-live.is-paused .cht-pulse::after { animation: none; opacity: 0; }

/* ────────────────────────────────────────────────────────────────────────────
   10 · INPUT / SELECT / FIELD / COMPOSER  .cht-field / .cht-input / .cht-select
   foco = accent-line + ring 3px accent-weak
   ──────────────────────────────────────────────────────────────────────────── */
.cht-input,
.cht-select,
.cht-textarea {
  font-family: var(--cht-fu);
  font-size: 13.5px;
  color: var(--cht-ink);
  background: var(--cht-surface);
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r);
  padding: 9px 12px;
  width: 100%;
  min-width: 0;
  transition: border-color var(--cht-dur), box-shadow var(--cht-dur);
}
.cht-textarea { border-radius: var(--cht-r-lg); resize: vertical; line-height: 1.5; }
.cht-input::placeholder,
.cht-textarea::placeholder { color: var(--cht-ink-4); }
.cht-input:focus,
.cht-select:focus,
.cht-textarea:focus {
  outline: none;
  border-color: var(--cht-accent-line);
  box-shadow: 0 0 0 3px var(--cht-accent-weak);
}
.cht-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  cursor: pointer;
}
.cht-label {
  font-family: var(--cht-fu);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cht-ink-2);
  display: block;
  margin-bottom: 6px;
}

/* barra de busca compacta (colaborador e board) */
.cht-search {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r-pill);
  color: var(--cht-ink-3);
  font-size: 12.5px;
  background: var(--cht-surface);
  white-space: nowrap;
  min-width: 0;
  transition: border-color var(--cht-dur), box-shadow var(--cht-dur);
}
.cht-search svg { width: 14px; height: 14px; flex: none; }
.cht-search input {
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--cht-fu);
  font-size: 12.5px;
  color: var(--cht-ink);
  min-width: 0;
  width: 100%;
}
.cht-search:focus-within {
  border-color: var(--cht-accent-line);
  box-shadow: 0 0 0 3px var(--cht-accent-weak);
}

/* ────────────────────────────────────────────────────────────────────────────
   11 · CARD GENÉRICO  .cht-card (board) — barra de prioridade ::before à esquerda
   ──────────────────────────────────────────────────────────────────────────── */
.cht-card {
  background: var(--cht-surface);
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r);
  padding: 11px 12px 10px;
  min-width: 0;
  position: relative;
  box-shadow: var(--cht-sh-1);
  transition: box-shadow var(--cht-dur-2) var(--cht-ease-out),
              border-color var(--cht-dur) var(--cht-ease),
              transform var(--cht-dur-2) var(--cht-ease-spring);
}
.cht-card::before {
  content: "";
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--cht-prio-normal);
}
.cht-card.pn::before, .cht-card[data-priority="normal"]::before  { background: var(--cht-prio-normal); }
.cht-card.pb::before, .cht-card[data-priority="baixa"]::before   { background: var(--cht-prio-baixa); }
.cht-card.pa::before, .cht-card[data-priority="alta"]::before    { background: var(--cht-prio-alta); }
.cht-card.pc::before, .cht-card[data-priority="critica"]::before { background: var(--cht-prio-critica); }
.cht-card:hover { border-color: var(--cht-accent-line); box-shadow: var(--cht-sh-2); transform: translateY(-2px); }
.cht-card:focus-visible { outline: none; border-color: var(--cht-accent-line); box-shadow: 0 0 0 3px var(--cht-accent-weak), var(--cht-sh-2); }

/* estados de drag (mapeiam ghost/chosen/drag do SortableJS OU DnD nativo) */
.cht-card.is-drag {
  transform: rotate(2.2deg) scale(1.02);
  box-shadow: var(--cht-sh-drag);
  border-color: var(--cht-accent-line);
  cursor: grabbing;
  opacity: .97;
}
.cht-card.is-ghost {
  background: repeating-linear-gradient(-45deg, var(--cht-surface-2), var(--cht-surface-2) 6px, transparent 6px, transparent 12px);
  border-style: dashed;
  border-color: var(--cht-line-3);
  box-shadow: none;
}
.cht-card.is-ghost * { opacity: 0; }

/* ────────────────────────────────────────────────────────────────────────────
   12 · KPI  .cht-kpi  (barra accent lateral 3px; .k-warn / .k-ok)
   ──────────────────────────────────────────────────────────────────────────── */
.cht-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}
.cht-kpi {
  position: relative;
  background: var(--cht-surface-2);
  border: 1px solid var(--cht-line);
  border-radius: var(--cht-r);
  padding: 11px 13px;
  min-width: 0;
  overflow: hidden;
  transition: box-shadow var(--cht-dur-2) var(--cht-ease-out),
              border-color var(--cht-dur) var(--cht-ease),
              transform var(--cht-dur-2) var(--cht-ease-spring);
}
.cht-kpi:hover { border-color: var(--cht-accent-line); box-shadow: var(--cht-sh-1); transform: translateY(-1px); }
.cht-kpi::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--cht-grad-accent);
}
.cht-kpi.k-warn::before { background: var(--cht-warn); }
.cht-kpi.k-ok::before { background: var(--cht-ok); }
.cht-kpi .n {
  font-family: var(--cht-fd);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--cht-ink);
  font-variant-numeric: tabular-nums;
}
.cht-kpi.k-warn .n { color: var(--cht-warn); }
.cht-kpi.k-ok .n { color: var(--cht-ok); }
.cht-kpi .l {
  margin-top: 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cht-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ────────────────────────────────────────────────────────────────────────────
   12b · RESUMO INLINE  .cht-summary  (faixa única, divisores hairline; nº por estado)
   Alternativa mais leve aos 4 cards .cht-kpi na Central do solicitante: uma peça só,
   número colorido pelo estado e o ZERO recuando (ink-4) em vez de gritar numa caixa.
   ──────────────────────────────────────────────────────────────────────────── */
.cht-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--cht-line);
  border-radius: var(--cht-r);
  background: var(--cht-surface);
  overflow: hidden;
  min-width: 0;
}
.cht-summary .cht-sum {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 16px;
  border-left: 1px solid var(--cht-line);
  min-width: 0;
}
.cht-summary .cht-sum:first-child { border-left: none; }
.cht-summary .n {
  font-family: var(--cht-fd);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--cht-ink);
  font-variant-numeric: tabular-nums;
}
.cht-summary .n.sum-novo  { color: var(--cht-novo); }
.cht-summary .n.sum-atend { color: var(--cht-atend); }
.cht-summary .n.sum-soluc { color: var(--cht-soluc); }
.cht-summary .n.sum-fech  { color: var(--cht-fech); }
.cht-summary .n.is-zero   { color: var(--cht-ink-4); }
.cht-summary .l {
  font-family: var(--cht-fu);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cht-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
@media (max-width: 560px) {
  .cht-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cht-summary .cht-sum:nth-child(3) { border-left: none; }
  .cht-summary .cht-sum:nth-child(3),
  .cht-summary .cht-sum:nth-child(4) { border-top: 1px solid var(--cht-line); }
}

/* ────────────────────────────────────────────────────────────────────────────
   13 · SUBNAV / SEGMENTED  .cht-subnav
   ──────────────────────────────────────────────────────────────────────────── */
.cht-subnav {
  display: inline-flex;
  background: var(--cht-surface-2);
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r-pill);
  padding: 3px;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.cht-subnav::-webkit-scrollbar { display: none; }
.cht-subnav a,
.cht-subnav button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--cht-fu);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--cht-ink-3);
  padding: 6px 14px;
  border-radius: var(--cht-r-pill);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--cht-dur), color var(--cht-dur);
}
.cht-subnav a:hover,
.cht-subnav button:hover { background: var(--cht-surface); color: var(--cht-ink); }
.cht-subnav a.is-active,
.cht-subnav button.is-active,
.cht-subnav a[aria-current="page"] {
  background: var(--cht-surface);
  color: var(--cht-accent-ink);
  box-shadow: var(--cht-sh-1);
}

/* Variante ABAS (sublinhado) — mesmo markup <nav class="cht-subnav cht-subnav--tabs">,
   mas troca a pílula segmentada pelo sublinhado calmo (direção issue-tracker). Usada
   nas seções da Central e no Fila|Indicadores do técnico. O ativo usa inset box-shadow
   (não ::after) p/ sobreviver ao overflow-x:auto herdado — seguro no mobile. */
.cht-subnav--tabs {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--cht-line);
  border-radius: 0;
  padding: 0;
  gap: 0;
}
.cht-subnav--tabs a,
.cht-subnav--tabs button {
  border-radius: 0;
  padding: 9px 4px 10px;
  margin: 0 12px;
  font-size: 13px;
  color: var(--cht-ink-3);
}
.cht-subnav--tabs a:first-child,
.cht-subnav--tabs button:first-child { margin-left: 2px; }
.cht-subnav--tabs a:hover,
.cht-subnav--tabs button:hover {
  background: transparent;
  color: var(--cht-ink);
}
.cht-subnav--tabs a.is-active,
.cht-subnav--tabs button.is-active,
.cht-subnav--tabs a[aria-current="page"],
.cht-subnav--tabs button[aria-current="page"] {
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--cht-accent);
  color: var(--cht-accent-ink);
}

/* ────────────────────────────────────────────────────────────────────────────
   14 · WIDGET / COUNTDOWN DE SLA EM DESTAQUE  .cht-slac
   Dois cards rotulados "1º atendimento (TTO)" / "Solução (TTR)"; estado via
   classe is-ok/is-warn/is-breach/is-done. Countdown mono 26px.
   ──────────────────────────────────────────────────────────────────────────── */
.cht-slac {
  border-radius: var(--cht-r-lg);
  border: 1px solid var(--cht-line-2);
  background: var(--cht-surface);
  padding: 13px 14px;
  margin-bottom: 10px;
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.cht-slac:last-child { margin-bottom: 0; }
.cht-slac .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cht-slac .kind {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cht-ink-3);
}
.cht-slac .st {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cht-ink-3);
}
.cht-slac .count {
  margin: 9px 0 3px;
  font-family: var(--cht-fm);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--cht-ink);
}
.cht-slac .prazo { font-size: 11px; color: var(--cht-ink-3); }
.cht-slac .bar {
  height: 5px;
  border-radius: var(--cht-r-pill);
  background: var(--cht-line);
  margin-top: 11px;
  overflow: hidden;
}
.cht-slac .bar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--cht-accent);
  background-image: var(--cht-grad-accent-soft);
  position: relative;
  /* a barra PREENCHE com transição viva quando o ticker atualiza o width inline */
  transition: width 900ms var(--cht-ease-out), background-color var(--cht-dur-2) var(--cht-ease);
}
/* brilho que percorre a barra preenchida (vida sutil, some sob reduced-motion) */
.cht-slac .bar > i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: translateX(-100%);
  animation: cht-bar-sheen 2.6s var(--cht-ease-out) infinite;
}
.cht-slac.is-ok .count, .cht-slac.is-ok .st, .cht-slac.is-atendido .count, .cht-slac.is-atendido .st { color: var(--cht-ok); }
.cht-slac.is-ok .bar > i { background: var(--cht-ok); }
.cht-slac.is-warn { background: var(--cht-warn-weak); border-color: var(--cht-warn-line); }
.cht-slac.is-warn .count, .cht-slac.is-warn .st { color: var(--cht-warn); }
.cht-slac.is-warn .bar > i { background: var(--cht-warn); background-image: none; }
.cht-slac.is-breach { background: var(--cht-breach-weak); border-color: var(--cht-breach-line); }
.cht-slac.is-breach .count, .cht-slac.is-breach .st { color: var(--cht-breach); }
.cht-slac.is-breach .bar > i { background: var(--cht-breach); background-image: none; }
/* breach = urgência viva: countdown pulsa e a moldura respira em vermelho */
.cht-slac.is-breach { animation: cht-breach-frame 1.8s var(--cht-ease-out) infinite; }
.cht-slac.is-breach .count { animation: cht-breach-beat 1.4s var(--cht-ease-out) infinite; }
.cht-slac.is-warn .bar > i::after, .cht-slac.is-breach .bar > i::after { animation-duration: 1.8s; }

/* ── ACOMPANHAMENTO do solicitante (etapas) — substitui o relógio de SLA no
   detalhe do colaborador. Sem prazo/estouro: só progresso amigável. ── */
.cht-track { display: flex; flex-direction: column; gap: 12px; }
.cht-track-steps { list-style: none; margin: 0; padding: 0; }
.cht-track-step {
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 10px;
  padding-bottom: 14px;
  position: relative;
}
.cht-track-step:last-child { padding-bottom: 0; }
.cht-track-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 9px; top: 20px; bottom: 0;
  width: 2px;
  background: var(--cht-line);
}
.cht-track-step.is-done:not(:last-child)::before { background: var(--cht-accent); }
.cht-track-step .dot {
  grid-row: 1; grid-column: 1;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cht-surface);
  border: 2px solid var(--cht-line);
  color: #fff;
  z-index: 1;
}
.cht-track-step.is-done .dot { background: var(--cht-accent); border-color: var(--cht-accent); }
.cht-track-step.is-current .dot { border-color: var(--cht-accent); box-shadow: 0 0 0 4px var(--cht-accent-weak); }
.cht-track-step .lb {
  grid-row: 1; grid-column: 2;
  align-self: center;
  font: 600 13px var(--cht-fd);
  color: var(--cht-ink-3);
}
.cht-track-step.is-done .lb, .cht-track-step.is-current .lb { color: var(--cht-ink); }
.cht-track-step .wh {
  grid-row: 2; grid-column: 2;
  margin-top: 1px;
  font: 500 11px var(--cht-fm);
  color: var(--cht-ink-4);
  font-variant-numeric: tabular-nums;
}
.cht-track-msg {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--cht-r);
  background: var(--cht-accent-weak);
  color: var(--cht-accent-ink);
  font: 500 12.5px var(--cht-fu);
  line-height: 1.4;
}
.cht-track.is-resolvido .cht-track-msg { background: var(--cht-ok-weak); color: var(--cht-ok); }
.cht-slac.is-done .count, .cht-slac.is-atendido .count { font-size: 15px; color: var(--cht-ok); }
.cht-slac.is-done .st { color: var(--cht-ok); }

/* ────────────────────────────────────────────────────────────────────────────
   15 · BOLHAS DE CHAT  .cht-msg  (colaborador / técnico / evento / nota interna)
   + timeline (daysep) + typing (digitando…)
   ──────────────────────────────────────────────────────────────────────────── */
.cht-daysep {
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--cht-ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  position: relative;
  margin: 2px 0;
}
.cht-daysep span {
  background: var(--cht-surface-2);
  padding: 0 12px;
  position: relative;
  z-index: 1;
}
.cht-daysep::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--cht-line-2);
}

.cht-msg {
  display: flex;
  gap: 9px;
  max-width: 84%;
  min-width: 0;
}
.cht-msg .cht-av {
  width: 30px; height: 30px;
  font-size: 10.5px;
  align-self: flex-end;
  margin-bottom: 16px;
}
.cht-bub {
  border-radius: var(--cht-r-lg);
  padding: 9px 13px 7px;
  position: relative;
  min-width: 0;
}
.cht-bub .nm {
  font-family: var(--cht-fu);
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.cht-bub .role {
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--cht-r-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cht-bub .role svg { width: 10px; height: 10px; flex: none; }
.cht-bub .bd { font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.cht-bub .tm {
  font-size: 10.5px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--cht-fm);
  font-variant-numeric: tabular-nums;
}
.cht-bub .selo {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 7px;
  border-radius: 5px;
  margin-bottom: 5px;
}

/* técnico ("eles"): esquerda, bolha clara com borda + avatar */
.cht-msg.them { align-self: flex-start; }
.cht-msg.them .cht-bub {
  background: var(--cht-surface);
  border: 1px solid var(--cht-line-2);
  border-bottom-left-radius: 5px;
  color: var(--cht-ink);
}
.cht-msg.them .nm { color: var(--cht-accent-ink); }
.cht-msg.them .role { background: var(--cht-accent-weak); color: var(--cht-accent-ink); }
.cht-msg.them .tm { color: var(--cht-ink-3); }

.cht-msg.them .cht-bub { box-shadow: var(--cht-sh-1); }

/* colaborador ("eu"): direita, bolha cheia accent (gradiente de marca), sem nome */
.cht-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.cht-msg.me .cht-bub { background: var(--cht-accent); background-image: var(--cht-grad-accent-soft); color: #fff; border-bottom-right-radius: 5px; box-shadow: var(--cht-sh-1); }
.cht-msg.me .bd { color: #fff; }
.cht-msg.me .tm { color: rgba(255, 255, 255, .82); justify-content: flex-end; }
.cht-msg.me .selo { background: rgba(255, 255, 255, .22); color: #fff; }

/* nota interna (visibilidade='interna'): post-it âmbar tracejado largura total */
.cht-msg.internal { align-self: stretch; max-width: 100%; }
.cht-msg.internal .cht-bub {
  background: var(--cht-warn-weak);
  border: 1px dashed var(--cht-warn-line);
  color: #5a3f0a;
  width: 100%;
  border-bottom-left-radius: 5px;
}
.cht-msg.internal .nm { color: #7a5600; }
.cht-msg.internal .role { background: #f6e2bb; color: #5a3f0a; }
.cht-msg.internal .bd { color: #5a3f0a; }
.cht-msg.internal .cht-av { background: #f6e2bb; color: #5a3f0a; }

/* evento de sistema (tipo:'evento'): pílula central discreta com ícone */
.cht-evt {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--cht-surface-3);
  color: var(--cht-ink-2);
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 13px;
  border-radius: var(--cht-r-pill);
  max-width: 90%;
  border: 1px solid var(--cht-line);
}
.cht-evt svg { width: 14px; height: 14px; color: var(--cht-accent); flex: none; }
.cht-evt b { font-weight: 700; color: var(--cht-ink); }

/* ── "DIGITANDO…" · indicador vivo (PRONTO P/ PRODUÇÃO) ──────────────────────
   CONTRATO P/ O JS (togglar visibilidade):
     Estrutura esperada (o JS injeta 1 nó destes no fim da timeline / .thread):
       <div class="cht-typing" data-cht-typing hidden>
         <span class="cht-av cht-av--2">TI</span>
         <div class="cht-bub"><i class="b"></i><i class="b"></i><i class="b"></i></div>
       </div>
     • MOSTRAR: remover o atributo [hidden] (ou setar el.hidden=false) → aparece
       com entrada suave (cht-typing-in) e os 3 pontos saltam em cascata.
     • ESCONDER: setar [hidden] (el.hidden=true) → some. (Só existir 1 por vez.)
     • Opcional: <span class="cap">Fulano está digitando…</span> após a bolha.
   É a MESMA classe/estrutura do mock demonstrativo — só ganhou vida + polimento.
   ──────────────────────────────────────────────────────────────────────────── */
.cht-typing {
  align-self: flex-start;
  display: flex;
  gap: 9px;
  align-items: flex-end;
  animation: cht-typing-in var(--cht-dur-2) var(--cht-ease-out) both;
}
.cht-typing[hidden] { display: none; }
.cht-typing .cht-av { width: 30px; height: 30px; font-size: 10.5px; align-self: flex-end; margin-bottom: 2px; }
.cht-typing .cht-bub {
  background: var(--cht-surface);
  border: 1px solid var(--cht-line-2);
  border-bottom-left-radius: 5px;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: var(--cht-sh-1);
}
.cht-typing .b {
  width: 7px; height: 7px;
  border-radius: 50%;
  /* pontos na cor da marca (frio), não cinza morto → parece "vivo" */
  background: var(--cht-accent);
  opacity: .55;
  animation: cht-typing-bounce 1.3s var(--cht-ease-out) infinite both;
}
.cht-typing .b:nth-child(1) { animation-delay: 0s; }
.cht-typing .b:nth-child(2) { animation-delay: .16s; }
.cht-typing .b:nth-child(3) { animation-delay: .32s; }
.cht-typing .cap {
  align-self: center;
  font-size: 11px;
  color: var(--cht-ink-2);
  font-weight: 500;
}

/* entrada de mensagem nova (aplicar só à última bolha inserida) — slide+fade+pop
   partindo do lado certo (them=esquerda, me=direita) */
.cht-msg.is-new { animation: cht-msg-in var(--cht-dur-3) var(--cht-ease-out) both; }
.cht-msg.me.is-new { animation-name: cht-msg-in-me; }
.cht-msg.internal.is-new { animation-name: cht-note-in; }

/* ────────────────────────────────────────────────────────────────────────────
   16 · EMPTY STATE  .cht-empty
   ──────────────────────────────────────────────────────────────────────────── */
.cht-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 40px 24px;
  min-width: 0;
}
.cht-empty .glyph {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--cht-r-lg);
  background: var(--cht-accent-weak);
  color: var(--cht-accent-ink);
  box-shadow: inset 0 0 0 1px var(--cht-accent-line), 0 6px 16px -6px rgba(79, 106, 232, .35);
  animation: cht-float 4.5s var(--cht-ease-out) infinite;
}
.cht-empty .glyph svg { width: 24px; height: 24px; }
.cht-empty .t {
  font-family: var(--cht-fd);
  font-size: 15px;
  font-weight: 700;
  color: var(--cht-ink);
  letter-spacing: -.005em;
}
.cht-empty .c {
  font-size: 12.5px;
  color: var(--cht-ink-3);
  max-width: 34ch;
  line-height: 1.5;
}
.cht-empty .cht-btn { margin-top: 4px; }
/* empty compacto dentro de coluna do board */
.cht-col-empty {
  padding: 18px 10px;
  text-align: center;
  font-size: 11.5px;
  color: var(--cht-ink-3);
  line-height: 1.5;
}

/* ────────────────────────────────────────────────────────────────────────────
   17 · SKELETON  .cht-skel  (shimmer 1.2s; desliga sob reduced-motion)
   ──────────────────────────────────────────────────────────────────────────── */
.cht-skel {
  position: relative;
  overflow: hidden;
  background: var(--cht-surface-3);
  border-radius: var(--cht-r-sm);
}
.cht-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  /* sheen frio (leve azul da marca no realce) → premium, não branco chapado */
  background: linear-gradient(90deg, transparent 0%, rgba(233, 240, 255, .35) 40%, rgba(255, 255, 255, .7) 50%, rgba(233, 240, 255, .35) 60%, transparent 100%);
  animation: cht-shimmer 1.4s var(--cht-ease-out) infinite;
}
.cht-skel-line { height: 11px; border-radius: 6px; }
.cht-skel-line.w-60 { width: 60%; }
.cht-skel-line.w-40 { width: 40%; }
.cht-skel-line.w-80 { width: 80%; }
/* linha de lista skeleton = 3 barras */
.cht-skel-row {
  display: grid;
  gap: 8px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--cht-line);
}
/* card skeleton = topo + título + rodapé */
.cht-skel-card {
  display: grid;
  gap: 9px;
  padding: 11px 12px;
  background: var(--cht-surface);
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r);
}

/* ────────────────────────────────────────────────────────────────────────────
   18 · TOAST  .cht-toast  (usado no fallback de PATCH do Kanban — reverte + toast)
   ──────────────────────────────────────────────────────────────────────────── */
.cht-toasts {
  position: fixed;
  left: 50%;
  bottom: calc(20px + var(--safe-area-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 1200;
  pointer-events: none;
  max-width: min(92vw, 460px);
}
.cht-toast {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--cht-fu);
  font-size: 13px;
  font-weight: 600;
  color: var(--cht-ink);
  background: var(--cht-surface);
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r-pill);
  padding: 10px 16px;
  box-shadow: var(--cht-sh-2);
  animation: cht-toast-in var(--cht-dur) var(--cht-ease) both;
}
.cht-toast svg { width: 16px; height: 16px; flex: none; }
.cht-toast.is-ok { border-color: var(--cht-ok-line); }
.cht-toast.is-ok svg { color: var(--cht-ok); }
.cht-toast.is-error { border-color: var(--cht-breach-line); }
.cht-toast.is-error svg { color: var(--cht-breach); }

/* ────────────────────────────────────────────────────────────────────────────
   19 · KEYFRAMES DE MOTION
   ──────────────────────────────────────────────────────────────────────────── */
@keyframes cht-ping {
  0%   { transform: scale(.55); opacity: .55; }
  100% { transform: scale(1.7); opacity: 0; }
}
/* núcleo do "ao vivo" respira (halo suave pulsa junto) */
@keyframes cht-live-core {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(28, 127, 77, .45); }
  50%      { transform: scale(1.18); box-shadow: 0 0 6px 1px rgba(28, 127, 77, .35); }
}
@keyframes cht-blink {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1; transform: translateY(-3px); }
}
/* pontos do "digitando…" saltam em cascata (bounce suave, cor da marca) */
@keyframes cht-typing-bounce {
  0%, 70%, 100% { transform: translateY(0) scale(.85); opacity: .45; }
  35%           { transform: translateY(-5px) scale(1); opacity: 1; }
}
@keyframes cht-typing-in {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* entradas de bolha — direcionais (them=esquerda, me=direita, nota=cima) */
@keyframes cht-msg-in {
  from { opacity: 0; transform: translate3d(-10px, 8px, 0) scale(.97); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes cht-msg-in-me {
  from { opacity: 0; transform: translate3d(10px, 8px, 0) scale(.97); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes cht-note-in {
  from { opacity: 0; transform: translateY(-6px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* entrada com stagger p/ listas/cards/colunas (fade + rise) */
@keyframes cht-rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cht-shimmer {
  100% { transform: translateX(100%); }
}
/* brilho que percorre a barra de SLA preenchida */
@keyframes cht-bar-sheen {
  0%       { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}
/* breach de SLA — moldura respira em vermelho + countdown bate */
@keyframes cht-breach-frame {
  0%, 100% { box-shadow: 0 0 0 0 rgba(179, 38, 30, 0); }
  50%      { box-shadow: 0 0 0 3px rgba(179, 38, 30, .14); }
}
@keyframes cht-breach-beat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
/* flutuar sutil (glyph de empty-state) */
@keyframes cht-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes cht-toast-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ────────────────────────────────────────────────────────────────────────────
   19b · UTILITÁRIO DE STAGGER (entrada escalonada SEM JS)
   Aplique .cht-stagger no CONTAINER; os filhos diretos sobem em cascata.
   Usado por listas (.cht-list), board de colunas, grades de KPI, etc.
   Escalona até o 12º filho; o resto entra junto (barato e suficiente).
   ──────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .cht-stagger > * {
    animation: cht-rise-in var(--cht-dur-3) var(--cht-ease-out) both;
  }
  .cht-stagger > *:nth-child(1) { animation-delay: 20ms; }
  .cht-stagger > *:nth-child(2) { animation-delay: 55ms; }
  .cht-stagger > *:nth-child(3) { animation-delay: 90ms; }
  .cht-stagger > *:nth-child(4) { animation-delay: 125ms; }
  .cht-stagger > *:nth-child(5) { animation-delay: 160ms; }
  .cht-stagger > *:nth-child(6) { animation-delay: 195ms; }
  .cht-stagger > *:nth-child(7) { animation-delay: 230ms; }
  .cht-stagger > *:nth-child(8) { animation-delay: 265ms; }
  .cht-stagger > *:nth-child(9) { animation-delay: 300ms; }
  .cht-stagger > *:nth-child(10) { animation-delay: 335ms; }
  .cht-stagger > *:nth-child(11) { animation-delay: 370ms; }
  .cht-stagger > *:nth-child(n+12) { animation-delay: 400ms; }
}

/* ────────────────────────────────────────────────────────────────────────────
   20 · MOBILE-FIRST — regra geral: filhos de grid/flex com min-width:0.
   As telas específicas afinam nos seus próprios arquivos; aqui vai o baseline
   compartilhado (KPIs 4→2 col).
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .cht-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cht-msg { max-width: 92%; }
}

/* ────────────────────────────────────────────────────────────────────────────
   21 · REDUCED MOTION — desliga ping/blink/shimmer/tilt e todas as transições.
   ──────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cht *,
  .cht *::before,
  .cht *::after {
    animation: none !important;
    transition: none !important;
  }
  /* garante que nada animado com fill:both fique preso invisível/deslocado */
  .cht .cht-stagger > *,
  .cht .cht-msg.is-new,
  .cht .cht-typing,
  .cht .cht-toast {
    opacity: 1 !important;
    transform: none !important;
  }
  /* barra de SLA some sem transição, mas mantém o width que o JS setou inline */
  .cht .cht-slac .bar > i { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVIDADE + A11Y — pass mobile→gigante (2026-07-07). ADITIVO (apêndice
   no fim = última-vence). Regras-base do desktop 1024-1440 NÃO são alteradas:
   caps de tela grande são gated ≥1500px; ajustes de toque em (pointer:coarse).
   ══════════════════════════════════════════════════════════════════════════ */

/* A11Y · FOCO sempre visível: outline accent sólido (~3.4:1) além do box-shadow
   fraco (accent-weak ~1.1:1) que já existe. outline não afeta layout e renderiza
   por cima — vale desktop E toque. */
.cht :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.chc :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--cht-accent);
  outline-offset: 2px;
}
/* lightbox mora em document.body (fora de .cht) → anel branco sobre o véu escuro */
.cht-lightbox :is(button, [tabindex]):focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* A11Y · piso tipográfico dos micro-rótulos + SLA lbl sem opacity (contraste sólido) */
.cht-sla .lbl { opacity: 1; }
.cht-bub .selo, .cht-bub .role { font-size: 10.5px; }

/* TELAS GIGANTES · KPIs/resumo PREENCHEM a largura (decisão do usuário 2026-07-07:
   o cap 300px + justify-content:start deixava espaço em branco à direita no 1920+).
   Sem cap aqui — as faixas enchem como no baseline. */

/* TABLET/estreito · resumo colapsa 4→2 no MESMO ponto dos KPIs (≤820), acabando
   com o "Em atendimento" reticenciado em 561-820px. ≥821px segue 4 colunas. */
@media (min-width: 561px) and (max-width: 820px) {
  .cht-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cht-summary .cht-sum:nth-child(3) { border-left: none; }
  .cht-summary .cht-sum:nth-child(3),
  .cht-summary .cht-sum:nth-child(4) { border-top: 1px solid var(--cht-line); }
}

/* MUITO ESTREITO (≤400px) · KPIs e resumo em 1 coluna (fim do aperto em 320-360). */
@media (max-width: 400px) {
  .cht-kpis, .cht-summary { grid-template-columns: 1fr; }
  .cht-summary .cht-sum { border-left: none; }
  .cht-summary .cht-sum + .cht-sum { border-top: 1px solid var(--cht-line); }
}

/* ══════════════════════════════════════════════════════════════════════════
   FUNDAÇÃO MOBILE-NATIVA (apêndice 2026-07-07 · camada acima do "Signal+")
   Primitivas COMPARTILHADAS: bottom-sheet, barra de ação fixa, FAB e o
   indicador de pull-to-refresh. Convivem com a bottom-nav do portal (fixed,
   z-index 100, ~57px): sheets/backdrops ficam ACIMA dela; barras/FAB ancoram
   ACIMA dela via --cht-navbar. Honram safe-area e reduced-motion. Só aparecem
   no mobile (display:none no desktop) → mouse-desktop 100% intacto.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --cht-navbar: 57px;                               /* altura da bottom-nav do portal */
  --cht-safe-b: env(safe-area-inset-bottom, 0px);   /* notch inferior */
  --cht-dock-b: calc(var(--cht-navbar) + var(--cht-safe-b)); /* piso p/ ancorar acima da nav */
}

@keyframes cht-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cht-spin { to { transform: rotate(360deg); } }

/* — BOTTOM SHEET (montado por openSheet em chamados/mobile.js) ————————————— */
.cht-sheet-backdrop {
  position: fixed; inset: 0; z-index: 10040;
  background: rgba(16, 26, 45, .46);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: cht-fade-in var(--cht-dur, 150ms) var(--cht-ease-out, ease) both;
}
.cht-sheet {
  position: fixed; z-index: 10041;
  left: 0; right: 0; bottom: 0;
  max-height: min(88dvh, 760px);
  display: flex; flex-direction: column;
  background: var(--cht-surface);
  border-top-left-radius: 22px; border-top-right-radius: 22px;
  box-shadow: 0 -20px 52px rgba(16, 26, 45, .24);
  padding-bottom: var(--cht-safe-b);
  transform: translateY(101%);
  transition: transform var(--cht-dur-2, 240ms) var(--cht-ease-out, cubic-bezier(.2,0,0,1));
  will-change: transform;
}
.cht-sheet.is-open { transform: translateY(0); }
.cht-sheet-grip {
  flex: none; align-self: center;
  width: 42px; height: 5px; margin: 10px 0 2px;
  border-radius: 999px; background: var(--cht-line-3);
  touch-action: none; cursor: grab;
}
.cht-sheet-hd {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 6px 16px 12px;
  border-bottom: 1px solid var(--cht-line);
}
.cht-sheet-hd .t {
  flex: 1; min-width: 0;
  font: 800 15.5px var(--cht-fd); letter-spacing: -.01em; color: var(--cht-ink);
}
.cht-sheet-close {
  flex: none; width: 36px; height: 36px; min-height: 0; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 999px; background: var(--cht-surface-3); color: var(--cht-ink-2);
  cursor: pointer;
}
.cht-sheet-close:hover { background: var(--cht-line); color: var(--cht-ink); }
.cht-sheet-close svg { width: 19px; height: 19px; }
.cht-sheet-bd {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}

/* — BARRA DE AÇÃO FIXA (rodapé, acima da nav) ————————————————————————————— */
/* genérica: consumidores mostram via @media mobile. Desktop = inerte. */
.cht-actionbar {
  display: none;
  position: fixed; left: 0; right: 0; z-index: 90;
  bottom: var(--cht-dock-b);
  align-items: center; gap: 10px;
  padding: 10px 14px calc(10px + var(--cht-safe-b));
  background: var(--cht-glass, rgba(247,249,253,.9));
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-top: 1px solid var(--cht-glass-line, var(--cht-line-2));
  box-shadow: 0 -8px 24px rgba(16, 26, 45, .08);
}
.cht-actionbar .cht-btn { min-height: 48px; }
@media (hover: none), (pointer: coarse) { .cht-actionbar { display: flex; } }

/* — FAB (botão de ação flutuante, canto inferior direito) ————————————————— */
.cht-fab {
  display: none;
  position: fixed; z-index: 95;
  right: 16px; bottom: calc(var(--cht-dock-b) + 14px);
  height: 52px; min-height: 0; padding: 0 20px 0 17px;
  align-items: center; gap: 9px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--cht-accent); color: #fff;
  background-image: var(--cht-grad-accent-soft);
  font: 700 14px var(--cht-fd); letter-spacing: -.01em;
  box-shadow: 0 10px 26px rgba(37, 69, 99, .34), 0 2px 6px rgba(16, 26, 45, .18);
  transition: transform var(--cht-dur, 150ms) var(--cht-ease, ease), box-shadow var(--cht-dur, 150ms) var(--cht-ease, ease);
}
.cht-fab:hover { background-image: var(--cht-grad-accent); color: #fff; box-shadow: 0 14px 30px rgba(37, 69, 99, .4); }
.cht-fab:active { transform: scale(.96); }
.cht-fab svg { width: 21px; height: 21px; flex: none; }
.cht-fab--round { padding: 0; width: 56px; justify-content: center; }
@media (hover: none), (pointer: coarse) { .cht-fab { display: inline-flex; } }

/* — PULL-TO-REFRESH (indicador injetado por pullToRefresh) ————————————————— */
.cht-ptr {
  position: absolute; top: 6px; left: 50%; z-index: 5;
  transform: translateX(-50%); opacity: 0;
  width: 34px; height: 34px; border-radius: 999px;
  display: grid; place-items: center; pointer-events: none;
  background: var(--cht-surface); color: var(--cht-accent);
  box-shadow: var(--cht-sh-2, 0 6px 18px rgba(16,26,45,.12));
  transition: opacity var(--cht-dur, 150ms) var(--cht-ease, ease);
}
.cht-ptr-spin svg { width: 18px; height: 18px; display: block; transition: transform var(--cht-dur, 150ms) var(--cht-ease, ease); }
.cht-ptr.is-ready .cht-ptr-spin svg { transform: rotate(180deg); }
.cht-ptr.is-busy .cht-ptr-spin svg { animation: cht-spin .7s linear infinite; }

/* Body-level (fora de .cht) → o reduced-motion escopado em .cht NÃO os cobre:
   desligar animações/transições explicitamente aqui. */
@media (prefers-reduced-motion: reduce) {
  .cht-sheet-backdrop { animation: none; }
  .cht-sheet { transition: none; }
  .cht-fab { transition: none; }
  .cht-fab:active { transform: none; }
  .cht-ptr, .cht-ptr-spin svg { transition: none; }
  .cht-ptr.is-busy .cht-ptr-spin svg { animation: none; }
}

/* Checkbox nativo não pode INCHAR: herda o `input{min-height:44px;padding:10px 12px}`
   global de toque e, dentro do flex do .cht-inline-toggle, esticava para 109×44
   ("Mostrar notas internas"). Volta ao tamanho normal; o alvo de toque vem do label.
   Não toca radios (type-cards/prioridade usam radios estilizados). */
.cht input[type="checkbox"]:not(.cht-sr-only),
.chc input[type="checkbox"]:not(.cht-sr-only) {
  min-height: 0; width: 18px; height: 18px; flex: none; padding: 0; margin: 0;
  accent-color: var(--cht-accent);
}
.cht-inline-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }

/* Botão "Filtros" recolhível (mini-menu mobile). Só aparece no celular; abre/fecha
   os chips/controles de filtro (evita filas de chips ocupando várias linhas). */
.cht-filterbtn {
  display: none;
  align-items: center; gap: 8px;
  width: 100%; min-height: 44px; padding: 9px 14px;
  border: 1px solid var(--cht-line-2); border-radius: var(--cht-r);
  background: var(--cht-surface); color: var(--cht-ink-2);
  font: 600 13.5px var(--cht-fu); cursor: pointer; text-align: left;
}
.cht-filterbtn:hover { background: var(--cht-surface-2); color: var(--cht-ink); }
.cht-filterbtn > svg:first-child { width: 17px; height: 17px; flex: none; color: var(--cht-ink-3); }
.cht-filterbtn .lb { flex: none; }
.cht-filterbtn .act { flex: 1; min-width: 0; color: var(--cht-accent-ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cht-filterbtn .chev { width: 16px; height: 16px; flex: none; color: var(--cht-ink-3); transition: transform var(--cht-dur, 150ms) var(--cht-ease, ease); }
.cht-filterbtn.is-open .chev { transform: rotate(180deg); }