/* ═══════════════════════════════════════════════════════════════════════════
   CENTRAL DE CHAMADOS — SUPERFÍCIE DO COLABORADOR · direção final "Signal+"
   (issue-tracker calmo, cool + calor conversacional no chat)

   Este arquivo contém APENAS layout/tela-específico do colaborador. Os átomos
   e moléculas (avatar, status, prioridade, chip, sla, botão, slac, bolhas de
   chat, empty, skeleton, toast, kpi, subnav) vêm da FUNDAÇÃO em
   chamados-base.css (classes .cht-*). Aqui montamos:
     · Shell + subnav do módulo
     · Tela A  — Meus chamados (KPIs + toolbar + lista densa)
     · Abrir chamado (form guiado)
     · Tela B  — Detalhe + chat + widget de countdown de SLA
     · Histórico GLPI (read-only)

   REGRAS DE OURO honradas:
   - Tudo vive sob o wrapper raiz <div class="cht"> (reset + reduced-motion da base).
   - Botões custom SEMPRE declaram background+color no :hover (o button:hover
     navy global de components.css pinta por cima) — usamos .cht-btn da base;
     onde há botão bespoke, declaramos os dois.
   - Mobile ~360-390px: zero overflow-x; filhos de grid/flex com min-width:0;
     toolbars com scroll-x próprio; nada mais estoura.
   - prefers-reduced-motion respeitado pela base; contraste AA pelos pares
     tint/tom-escuro da própria família de cor.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────────
   0 · A aba #chamadosTab é um <section class="card">. Neutralizamos o padding/
   borda do card para o shell da Central pintar a superfície inteira.
   ──────────────────────────────────────────────────────────────────────────── */
#chamadosTab.card {
  padding: 0;
  overflow: hidden;
  background: var(--cht-surface);
}

/* wrapper raiz do módulo (herda tokens :root; ativa reset + reduced-motion) */
.cht {
  background: var(--cht-surface);
  border-radius: inherit;
}

/* ────────────────────────────────────────────────────────────────────────────
   1 · SHELL + SUBNAV
   ──────────────────────────────────────────────────────────────────────────── */
.cht-shell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cht-content,
.cht-lista { min-width: 0; }

.cht-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  padding: 20px 22px 14px;
  min-width: 0;
  /* cabeçalho gruda no topo com véu de vidro frio (premium, some se não suportar) */
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--cht-glass);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--cht-glass-line);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cht-header { background: var(--cht-surface); }
}
.cht-header .cht-titles { min-width: 0; flex: 1; }
.cht-header h1 {
  margin: 0;
  font-family: var(--cht-fd);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--cht-ink);
}
.cht-header .sub {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--cht-ink-3);
  max-width: 62ch;
}
.cht-header--abrir {
  align-items: center;
  padding: 12px 22px;
}
.cht-header--abrir h1 { font-size: 18px; }

/* Cabeçalho rico (ícone + eyebrow + título + sub) — mesmo padrão das outras telas
   do portal (ex.: Suprimentos › Compras). Usado no Novo colaborador. */
.cht-header .cht-titles--rich { display: flex; align-items: center; gap: 13px; }
.cht-head-icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--cht-r); display: grid; place-items: center; background: var(--cht-accent-weak); color: var(--cht-accent); }
.cht-head-icon svg { width: 21px; height: 21px; }
.cht-head-tt { min-width: 0; display: flex; flex-direction: column; }
.cht-head-eyebrow { font: 700 10px var(--cht-fu); letter-spacing: .09em; text-transform: uppercase; color: var(--cht-ink-4); }
.cht-header .cht-titles--rich h1 { font-size: 21px; line-height: 1.15; }
.cht-head-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--cht-ink-3); max-width: 70ch; }

.cht-subnav-row {
  padding: 0 22px 14px;
  min-width: 0;
}
/* header com as ABAS de seção embutidas (sem uma linha de sub-nav própria);
   pills + subtítulo na MESMA linha, à esquerda — mais enxuto */
.cht-header .cht-titles--nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px 16px;
  flex-wrap: wrap;
}
.cht-header .cht-titles--nav .sub { margin: 0; }
/* host-nav (Central | Atendimento) = TOGGLE de modo discreto (caixa fria, cantos
   suaves) à esquerda das abas de seção. NÃO é uma pílula-ilha: a forma (caixa
   fechada) difere do sublinhado das abas, então modo ≠ seção lê de imediato.
   Autocontida (não depende de .cht-subnav). Divisor sutil à direita separa das abas. */
.cht-hostnav {
  position: relative;
  display: inline-flex;
  background: var(--cht-surface-3);
  border-radius: var(--cht-r-sm);
  padding: 3px;
  gap: 2px;
  margin-right: 14px;
  min-width: 0;
}
.cht-hostnav::after {
  content: "";
  position: absolute;
  top: 50%; right: -8px;
  transform: translateY(-50%);
  width: 1px; height: 20px;
  background: var(--cht-line-2);
}
.cht-hostnav button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--cht-fu);
  font-weight: 600;
  font-size: 12px;
  color: var(--cht-ink-3);
  padding: 5px 12px;
  border-radius: 6px;
  white-space: nowrap;
  transition: background var(--cht-dur) var(--cht-ease), color var(--cht-dur) var(--cht-ease);
}
.cht-hostnav button:hover { background: var(--cht-surface); color: var(--cht-ink); }
.cht-hostnav button.is-active,
.cht-hostnav button[aria-current="page"] {
  background: var(--cht-surface);
  color: var(--cht-accent-ink);
  box-shadow: var(--cht-sh-1);
}
.cht-tec .cht-subnav-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }

/* ────────────────────────────────────────────────────────────────────────────
   2 · TELA A — Meus chamados
   ──────────────────────────────────────────────────────────────────────────── */
/* faixa de KPIs (usa .cht-kpis/.cht-kpi da base) */
.cht-kpis-row {
  padding: 2px 22px 14px;
  min-width: 0;
}

/* toolbar: chips (scroll-x silencioso) + busca à direita */
.cht-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 22px 14px;
  min-width: 0;
}
.cht-chips {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.cht-chips::-webkit-scrollbar { display: none; }
.cht-toolbar .cht-search { margin-left: auto; flex: none; max-width: 240px; }

/* lista densa — linhas com hairline */
.cht-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--cht-line);
  min-width: 0;
}
/* entrada com stagger das linhas (fade+rise, sem JS) — só na 1ª pintura */
@media (prefers-reduced-motion: no-preference) {
  .cht-list > .cht-row { animation: cht-rise-in var(--cht-dur-3) var(--cht-ease-out) both; }
  .cht-list > .cht-row:nth-child(1) { animation-delay: 20ms; }
  .cht-list > .cht-row:nth-child(2) { animation-delay: 55ms; }
  .cht-list > .cht-row:nth-child(3) { animation-delay: 90ms; }
  .cht-list > .cht-row:nth-child(4) { animation-delay: 125ms; }
  .cht-list > .cht-row:nth-child(5) { animation-delay: 160ms; }
  .cht-list > .cht-row:nth-child(6) { animation-delay: 195ms; }
  .cht-list > .cht-row:nth-child(7) { animation-delay: 230ms; }
  .cht-list > .cht-row:nth-child(8) { animation-delay: 265ms; }
  .cht-list > .cht-row:nth-child(n+9) { animation-delay: 300ms; }
}
.cht-row {
  display: grid;
  /* 5 colunas: status · título+meta · quem cuida · prazo · aberto-há.
     Larguras FIXAS nas 3 últimas para que as colunas ALINHEM entre as linhas
     (cada .cht-row é um grid próprio; larguras auto/fr desalinhariam). O título
     leva o espaço flexível (1fr); o meio deixa de ser vão vazio e vira info útil
     ao solicitante (status · quem cuida). Colunas em fr → ALINHAM entre linhas E
     espalham pela largura. Sem coluna de prazo (decisão: não expor prazo ao
     solicitante — backlog impede prometer data). */
  grid-template-columns: 14px minmax(0, 2fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 0.7fr);
  align-items: center;
  gap: 13px 18px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--cht-line);
  cursor: pointer;
  min-width: 0;
  text-align: left;
  background: transparent;
  position: relative;
  transition: background var(--cht-dur) var(--cht-ease), box-shadow var(--cht-dur-2) var(--cht-ease-out);
}
/* rail accent que desliza da esquerda no hover (premium, quarentena de cor fria) */
.cht-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--cht-grad-accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--cht-dur-2) var(--cht-ease-out);
}
.cht-row:hover { background: var(--cht-surface-2); }
.cht-row:hover::before { transform: scaleY(1); }
.cht-row .ttl { transition: color var(--cht-dur) var(--cht-ease); }
.cht-row:hover .ttl { color: var(--cht-accent-ink); }
.cht-row:focus-visible {
  outline: none;
  background: var(--cht-surface-2);
  box-shadow: inset 3px 0 0 var(--cht-accent);
}
.cht-row > .cht-dot { align-self: center; }
.cht-row .body { min-width: 0; }
.cht-row .l1 { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cht-row .ttl {
  font-family: var(--cht-fd);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--cht-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cht-row .l2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--cht-ink-3);
  min-width: 0;
  flex-wrap: wrap;
}
.cht-row .l2 .who { color: var(--cht-ink-2); }
.cht-row .l2 .who b { font-weight: 600; color: var(--cht-ink); }
.cht-row .trail {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}
.cht-row .unread {
  background: var(--cht-accent);
  color: #fff;
  font-family: var(--cht-fu);
  font-weight: 700;
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: var(--cht-r-pill);
  flex: none;
}
.cht-row .when {
  font-size: 11.5px;
  color: var(--cht-ink-4);
  white-space: nowrap;
}

/* ── Cabeçalho de colunas (legenda) — MESMO grid/gap/inset das linhas p/ alinhar ── */
.cht-list-head {
  display: grid;
  grid-template-columns: 14px minmax(0, 2fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 0.7fr);
  gap: 13px 18px;
  align-items: center;
  padding: 2px 22px 9px;
  font: 700 10px var(--cht-fu);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--cht-ink-4);
}
/* rótulos viram botões de ordenação — herdam o estilo do cabeçalho, com hover e
   realce quando ativos + seta (chevron) que gira asc/desc. */
.cht-list-head .cht-lh-sort {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  justify-self: start; min-width: 0;
  /* botões maiores/mais clicáveis: padding + hover; margin-left negativa mantém o
     rótulo alinhado à coluna (o realce sangra pro gap, não desalinha com a linha). */
  padding: 6px 10px; margin: 0 0 0 -10px; border-radius: 7px;
  transition: background var(--cht-dur) var(--cht-ease), color var(--cht-dur) var(--cht-ease);
}
.cht-list-head .cht-lh-sort.ra { justify-self: end; margin: 0 -10px 0 0; }
.cht-list-head .cht-lh-sort .lb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cht-list-head .cht-lh-sort:hover { background: var(--cht-surface-2); color: var(--cht-ink-2); }
.cht-list-head .cht-lh-sort.is-sorted { background: var(--cht-accent-weak); color: var(--cht-accent-ink); }
.cht-list-head .cht-lh-caret { display: inline-flex; flex: none; color: var(--cht-ink-5); }
.cht-list-head .cht-lh-sort:hover .cht-lh-caret { color: var(--cht-ink-3); }
.cht-list-head .cht-lh-sort.is-sorted .cht-lh-caret { color: var(--cht-accent-ink); }
@media (max-width: 820px) { .cht-list-head { display: none; } }

/* ── Colunas de enriquecimento da linha (desktop): status · quem cuida ──────── */
.cht-col { min-width: 0; display: flex; align-items: center; }
.cht-col-status .cht-status { min-width: 0; }
.cht-col-prazo { justify-content: flex-start; }
.cht-col-owner .cht-owner,
.cht-col-prazo .cht-sla { min-width: 0; }

/* "Quem está cuidando" — avatar + 1º nome (técnico) ou ícone + fila (equipe) */
.cht-owner {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 12.5px; color: var(--cht-ink-2);
}
.cht-owner .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cht-owner.is-queue { color: var(--cht-ink-3); }
.cht-owner.is-queue svg { width: 14px; height: 14px; flex: none; color: var(--cht-ink-4); }
/* prazo herda o átomo .cht-sla; sem quebra */
.cht-col-prazo .cht-sla { white-space: nowrap; }

/* paginação */
.cht-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 22px;
  min-width: 0;
}
.cht-page-info {
  font-family: var(--cht-fm);
  font-size: 12px;
  color: var(--cht-ink-3);
  font-variant-numeric: tabular-nums;
}

/* estados genéricos de carga/erro */
.cht-loading {
  padding: 40px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--cht-ink-3);
}
.cht-error-box {
  margin: 18px 22px;
  padding: 16px 18px;
  border: 1px solid var(--cht-breach-line);
  background: var(--cht-breach-weak);
  border-radius: var(--cht-r);
  color: #7d2019;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.cht-error-inline {
  color: var(--cht-breach);
  font-size: 12.5px;
  padding: 8px 0;
}

/* ────────────────────────────────────────────────────────────────────────────
   3 · ABRIR CHAMADO — form guiado
   ──────────────────────────────────────────────────────────────────────────── */
.cht-form-wrap { padding: 18px 22px 24px; min-width: 0; }
.cht-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
  min-width: 0;
}
.cht-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}
.cht-form-field { min-width: 0; }

/* seleção de tipo como cards-radio */
.cht-type-group {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.cht-type-legend {
  font-family: var(--cht-fu);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cht-ink-2);
  margin-bottom: 8px;
  padding: 0;
}
.cht-type-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}
.cht-type-card {
  position: relative;
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 15px 16px;
  border: 1.5px solid var(--cht-line-2);
  border-radius: var(--cht-r);
  background: var(--cht-surface);
  cursor: pointer;
  min-width: 0;
  transition: border-color var(--cht-dur) var(--cht-ease), background var(--cht-dur) var(--cht-ease), box-shadow var(--cht-dur-2) var(--cht-ease-out);
}
.cht-type-card:hover { border-color: var(--cht-accent-line); box-shadow: var(--cht-sh-1); }
.cht-type-card input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}
.cht-type-card .glyph {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--cht-surface-3);
  color: var(--cht-accent-ink);
  flex: none;
  transition: background var(--cht-dur) var(--cht-ease), color var(--cht-dur) var(--cht-ease);
}
.cht-type-card .glyph svg { width: 20px; height: 20px; }
.cht-type-card .txt { min-width: 0; }
.cht-type-card strong {
  display: block;
  font-family: var(--cht-fd);
  font-weight: 800;
  font-size: 14.5px;
  color: var(--cht-ink);
}
.cht-type-card small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--cht-ink-3);
  line-height: 1.45;
}
.cht-type-chk {
  position: absolute;
  top: 10px; right: 10px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--cht-accent);
  color: #fff;
  display: none;
  place-items: center;
}
.cht-type-chk svg { width: 12px; height: 12px; }
.cht-type-card:has(input:checked) {
  border-color: var(--cht-accent);
  background: var(--cht-accent-weak);
  box-shadow: 0 0 0 3px rgba(69, 98, 143, .10);
}
.cht-type-card:has(input:checked) .glyph {
  background: var(--cht-surface);
  color: var(--cht-accent);
}
.cht-type-card:has(input:checked) .cht-type-chk { display: grid; }
.cht-type-card:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--cht-accent-weak);
}

.cht-form-error {
  color: var(--cht-breach);
  background: var(--cht-breach-weak);
  border: 1px solid var(--cht-breach-line);
  border-radius: var(--cht-r-sm);
  padding: 9px 13px;
  font-size: 12.5px;
  font-weight: 500;
}
.cht-form-error.hidden { display: none; }

.cht-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--cht-line);
}
.cht-req-hint { font-size: 12px; color: var(--cht-ink-4); }
.cht-req-hint .cht-req { color: var(--cht-novo); }
.cht-actions-spacer { flex: 1 1 auto; }

/* ────────────────────────────────────────────────────────────────────────────
   4 · TELA B — Detalhe + chat + widget de SLA
   ──────────────────────────────────────────────────────────────────────────── */
.cht-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 288px;
  min-width: 0;
}
.cht-detail-main {
  min-width: 0;
  border-right: 1px solid var(--cht-line);
  display: flex;
  flex-direction: column;
}
.cht-detail-aside {
  min-width: 0;
  background: var(--cht-surface-2);
}

/* crumb: voltar + #nº + selo tempo-real */
.cht-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 13px 22px;
  border-bottom: 1px solid var(--cht-line);
  min-width: 0;
}
.cht-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--cht-fu);
  font-size: 13px;
  font-weight: 600;
  color: var(--cht-accent-ink);
  cursor: pointer;
  background: var(--cht-accent-weak);
  border: 1px solid var(--cht-accent-line, transparent);
  padding: 8px 15px;
  border-radius: var(--cht-r-pill);
  transition: background var(--cht-dur), color var(--cht-dur), box-shadow var(--cht-dur);
}
.cht-back:hover { background: var(--cht-accent); color: #fff; border-color: var(--cht-accent); box-shadow: var(--cht-sh-2); }
.cht-back svg { width: 16px; height: 16px; flex: none; }

/* Reabrir (requerente reprova a solução) no acompanhamento + destaque da reabertura */
.cht-reabrir-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cht-line); }
.cht-reabrir-q { font-size: 12.5px; color: var(--cht-ink-3); }
.cht-reabrir-btn { flex: none; }
.cht-msg.is-reabertura .cht-bub { border: 1.5px solid #e0908f; background: #fdecec; box-shadow: 0 0 0 3px rgba(180,35,24,.07); }
.cht-msg.is-reabertura .cht-bub,
.cht-msg.is-reabertura .cht-bub .bd,
.cht-msg.is-reabertura .cht-bub .nm { color: var(--cht-ink); }
.cht-msg.is-reabertura .cht-bub .tm { color: var(--cht-ink-3); }
.cht-msg.is-reabertura .cht-bub .role { background: rgba(180,35,24,.12); color: #b42318; }
.cht-reab-hd { display: flex; align-items: center; gap: 6px; font: 700 11px var(--cht-fu); text-transform: uppercase; letter-spacing: .04em; color: #b42318; margin-bottom: 5px; }
.cht-reab-hd svg { width: 14px; height: 14px; flex: none; }
.cht-crumb .cht-live { margin-left: auto; }

/* cabeçalho do chamado */
.cht-thead {
  padding: 17px 22px 15px;
  border-bottom: 1px solid var(--cht-line);
  min-width: 0;
}
.cht-thead .signals {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.cht-thead h2 {
  margin: 9px 0 0;
  font-family: var(--cht-fd);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--cht-ink);
  overflow-wrap: anywhere;
}
.cht-tmeta {
  display: flex;
  align-items: center;
  gap: 8px 16px;
  flex-wrap: wrap;
  margin-top: 12px;
  min-width: 0;
}
.cht-tmeta .m {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--cht-ink-2);
  min-width: 0;
}
.cht-tmeta .m svg { width: 14px; height: 14px; color: var(--cht-ink-3); flex: none; }

/* cabeçalho da conversa */
.cht-chat-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--cht-glass-line);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cht-ink-2);
  min-width: 0;
  /* barra da conversa gruda com vidro frio enquanto a trilha rola por baixo */
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--cht-glass);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cht-chat-hd { background: var(--cht-surface); }
}
.cht-chat-hd > svg { width: 15px; height: 15px; color: var(--cht-accent); flex: none; }
.cht-chat-hd .cht-live { margin-left: auto; font-size: 11px; }

/* trilha da conversa (fria) — usa bolhas .cht-msg da base */
.cht-thread {
  flex: 1;
  padding: 16px 22px;
  background: var(--cht-surface-2);
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: 0;
  overflow-y: auto;
  max-height: 560px;
}

/* barra do técnico (selects inline + Aplicar) */
.cht-tecnico-bar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 22px;
  border-bottom: 1px solid var(--cht-line);
  background: var(--cht-surface-2);
  min-width: 0;
}
.cht-tecnico-bar .lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cht-ink-3);
  align-self: center;
  margin-right: 2px;
}
.cht-tecnico-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cht-tecnico-field > span {
  font-size: 11px;
  font-weight: 600;
  color: var(--cht-ink-2);
}
.cht-tecnico-field .cht-select { min-width: 150px; }

/* composer */
.cht-composer {
  padding: 12px 22px 16px;
  border-top: 1px solid var(--cht-line);
  background: var(--cht-surface);
  min-width: 0;
  transition: background var(--cht-dur);
}
.cht-composer.is-internal { background: #fdf7ea; }
.cht-composer-modes {
  display: inline-flex;
  background: var(--cht-surface-2);
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r-pill);
  padding: 3px;
  margin-bottom: 9px;
}
.cht-composer-modes button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--cht-fu);
  font-weight: 600;
  font-size: 11.5px;
  color: var(--cht-ink-3);
  padding: 5px 13px;
  border-radius: var(--cht-r-pill);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background var(--cht-dur), color var(--cht-dur);
}
.cht-composer-modes button svg { width: 12px; height: 12px; flex: none; }
.cht-composer-modes button:hover { background: transparent; color: var(--cht-ink-2); }
.cht-composer-modes button.on-pub { background: var(--cht-accent); color: #fff; }
.cht-composer-modes button.on-pub:hover { background: var(--cht-accent); color: #fff; }
.cht-composer-modes button.on-int { background: #e0a83a; color: #4a3208; }
.cht-composer-modes button.on-int:hover { background: #e0a83a; color: #4a3208; }

.cht-composer-field {
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r-lg);
  background: var(--cht-surface);
  padding: 4px 4px 4px 6px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
  transition: border-color var(--cht-dur), box-shadow var(--cht-dur);
}
.cht-composer-field:focus-within {
  border-color: var(--cht-accent-line);
  box-shadow: 0 0 0 3px var(--cht-accent-weak);
}
.cht-composer.is-internal .cht-composer-field:focus-within {
  border-color: #e6c67a;
  box-shadow: 0 0 0 3px #f8eccf;
}
.cht-composer-field textarea {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  resize: none;
  font-family: var(--cht-fu);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cht-ink);
  padding: 9px 6px;
  max-height: 160px;
}
.cht-composer-field textarea::placeholder { color: var(--cht-ink-4); }
.cht-send {
  width: 40px; height: 40px;
  border-radius: 12px;
  border: none;
  background: var(--cht-accent);
  background-image: var(--cht-grad-accent-soft);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: var(--cht-sh-1);
  transition: background var(--cht-dur), box-shadow var(--cht-dur-2) var(--cht-ease-out),
              transform var(--cht-dur-2) var(--cht-ease-spring);
}
.cht-send:hover { background: var(--cht-accent-ink); color: #fff; transform: translateY(-1px) scale(1.04); box-shadow: var(--cht-sh-2), var(--cht-glow); }
.cht-send:active { transform: translateY(0) scale(.96); }
.cht-send svg { transition: transform var(--cht-dur) var(--cht-ease); }
.cht-send:hover svg { transform: translateX(1px); }
.cht-send:disabled { opacity: .55; cursor: not-allowed; }
.cht-send:disabled:hover { transform: none; box-shadow: var(--cht-sh-1); }
.cht-send svg { width: 17px; height: 17px; }
.cht-composer.is-internal .cht-send { background: #d99a2b; color: #3a2705; }
.cht-composer.is-internal .cht-send:hover { background: #c98b1f; color: #3a2705; }
.cht-composer-hint {
  font-size: 10.5px;
  color: var(--cht-ink-4);
  margin-top: 7px;
}
.cht-composer-fechado {
  margin: 12px 22px 16px;
  padding: 12px 15px;
  border: 1px dashed var(--cht-line-3);
  border-radius: var(--cht-r);
  background: var(--cht-surface-2);
  color: var(--cht-ink-3);
  font-size: 12.5px;
  text-align: center;
}

/* wrapper dos cards de SLA no aside (os .cht-slac já trazem margin-bottom) */
.cht-slac-cards { display: block; min-width: 0; }

/* aside: seções */
.cht-asec {
  padding: 16px 18px;
  border-bottom: 1px solid var(--cht-line);
  min-width: 0;
}
.cht-asec .lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cht-ink-3);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cht-asec .lbl svg { width: 14px; height: 14px; color: var(--cht-accent); flex: none; }

/* Timeline operacional persistida: separada do chat e recolhível no aside. */
.cht-eventlog {
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r-sm);
  background: var(--cht-surface);
  overflow: hidden;
}
.cht-eventlog > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  color: var(--cht-ink-2);
  font: 650 11.5px var(--cht-fu);
}
.cht-eventlog > summary::-webkit-details-marker { display: none; }
.cht-eventlog > summary::after { content: '›'; color: var(--cht-ink-4); transform: rotate(90deg); transition: transform .15s ease; }
.cht-eventlog:not([open]) > summary::after { transform: rotate(0deg); }
.cht-eventlog-count {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--cht-surface-2);
  color: var(--cht-ink-3);
  font: 600 10px var(--cht-fm);
  text-align: center;
}
.cht-eventlog-list { list-style: none; margin: 0; padding: 2px 10px 10px; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.cht-eventlog-item { position: relative; display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 8px; padding: 7px 0; }
.cht-eventlog-item:not(:last-child)::after { content: ''; position: absolute; left: 4px; top: 17px; bottom: -7px; width: 1px; background: var(--cht-line-2); }
.cht-eventlog-dot { width: 9px; height: 9px; margin-top: 3px; border: 2px solid var(--cht-accent); border-radius: 50%; background: var(--cht-surface); z-index: 1; }
.cht-eventlog-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cht-eventlog-label { color: var(--cht-ink-2); font-size: 11.5px; line-height: 1.35; overflow-wrap: anywhere; }
.cht-eventlog-meta { color: var(--cht-ink-4); font: 500 10px var(--cht-fm); line-height: 1.35; overflow-wrap: anywhere; }
.cht-eventlog-empty { padding: 8px 0; color: var(--cht-ink-4); font-size: 11.5px; }

/* propriedades chave/valor (usa .cht-slac da base p/ os cards SLA) */
.cht-props {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.cht-prop {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cht-prop .k {
  width: 82px;
  font-size: 11.5px;
  color: var(--cht-ink-3);
  flex: none;
}
.cht-prop .v {
  font-size: 12.5px;
  color: var(--cht-ink);
  min-width: 0;
  overflow-wrap: anywhere;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* card de ABERTURA (descrição) no topo da conversa — substitui a bolha pesada */
.cht-opening {
  align-self: stretch;
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r);
  background: var(--cht-surface);
  box-shadow: var(--cht-sh-1);
  overflow: hidden;
  min-width: 0;
  /* Nunca encolher: em thread flex-column curta o card de abertura era esmagado
     a ~0 (com overflow:hidden clipando a descrição), fazendo o chamado "chegar
     vazio" pro técnico. O conteúdo mantém a altura natural e a thread rola. */
  flex-shrink: 0;
}
.cht-opening-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--cht-line);
  background: var(--cht-surface-2);
  min-width: 0;
}
.cht-opening-hd .cht-av { width: 26px; height: 26px; font-size: 10px; flex: none; margin: 0; align-self: center; }
.cht-opening-hd .who { font: 700 13px var(--cht-fd); color: var(--cht-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cht-opening-hd .who small { font: 500 12px var(--cht-fu); color: var(--cht-ink-3); }
.cht-opening-hd .tag {
  margin-left: auto; flex: none;
  font: 700 10px var(--cht-fu); letter-spacing: .05em; text-transform: uppercase;
  color: var(--cht-accent-ink); background: var(--cht-accent-weak);
  border-radius: 6px; padding: 3px 9px;
}
.cht-opening-bd { padding: 13px 15px; font-size: 13.5px; color: var(--cht-ink); line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.cht-opening-ft { padding: 0 15px 12px; font: 500 11.5px var(--cht-fm); color: var(--cht-ink-4); }
/* Descrição DESTACADA no topo do detalhe do técnico (fora do chat): borda
   accent + sombra maior pra ler como o bloco-chave. */
.cht-opening--top { margin: 2px 0 6px; border-color: var(--cht-accent-line); box-shadow: var(--cht-sh-2); }

/* card "Gerenciar chamado" (técnico) no aside — selects verticais + Aplicar */
.cht-manage { display: flex; flex-direction: column; gap: 10px; }
.cht-manage-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cht-manage-field > span { font-size: 11.5px; font-weight: 600; color: var(--cht-ink-2); }
.cht-manage-field .cht-select { width: 100%; min-width: 0; }
.cht-manage-apply { width: 100%; justify-content: center; margin-top: 2px; }

/* nome/papel na bolha "eu" (aparece só p/ colegas de suporte no lado do técnico) —
   texto claro sobre o accent; a minha própria bolha continua sem nome */
.cht-msg.me .nm { color: rgba(255, 255, 255, .96); }
.cht-msg.me .role { background: rgba(255, 255, 255, .20); color: #fff; }

/* ────────────────────────────────────────────────────────────────────────────
   5 · HISTÓRICO GLPI — read-only
   ──────────────────────────────────────────────────────────────────────────── */
.cht-legacy-wrap { padding: 18px 22px 24px; min-width: 0; }
.cht-legacy-banner {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 15px;
  border: 1px solid var(--cht-warn-line);
  background: var(--cht-warn-weak);
  border-radius: var(--cht-r);
  color: #6f5108;
  margin-bottom: 16px;
  min-width: 0;
}
.cht-legacy-banner > svg { width: 18px; height: 18px; flex: none; color: var(--cht-warn); margin-top: 1px; }
.cht-legacy-banner > div { min-width: 0; flex: 1 1 auto; }
.cht-legacy-banner > div > strong { display: block; font-size: 13px; font-weight: 700; color: #5a4207; }
.cht-legacy-banner > div > span { display: block; font-size: 12px; margin-top: 2px; color: #7a5c12; }
.cht-legacy-snapshot {
  display: flex;
  align-items: baseline;
  gap: 4px 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(138, 97, 0, .18);
  color: #654b0d;
  font-size: 11.5px;
  line-height: 1.45;
}
.cht-legacy-snapshot time {
  font-family: var(--cht-fm);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.cht-legacy-snapshot.is-unavailable > strong { color: #744d00; font-size: 11.5px; }
.cht-legacy-snapshot .cht-legacy-snapshot-warning {
  display: block;
  flex: 1 0 100%;
  margin-top: 3px;
  color: #8a2f23;
  font-weight: 600;
}
.cht-legacy-toolbar { margin-bottom: 14px; min-width: 0; }
.cht-legacy-search { width: 100%; max-width: 420px; }

.cht-legacy-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.cht-legacy-card {
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r);
  background: var(--cht-surface);
  overflow: hidden;
  min-width: 0;
}
.cht-legacy-head {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "num status titulo chevron"
    "num status meta   chevron";
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  min-width: 0;
  transition: background var(--cht-dur);
}
.cht-legacy-head:hover { background: var(--cht-surface-2); }
.cht-legacy-head:focus-visible {
  outline: 2px solid var(--cht-accent);
  outline-offset: -2px;
}
.cht-legacy-head > .cht-num {
  grid-area: num;
  align-self: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--cht-ink-3);
  background: var(--cht-surface-2);
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
/* Histórico GLPI: status como pílula colorida (escaneável), sem o ponto. */
.cht-legacy-head > .cht-status {
  grid-area: status;
  align-self: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
  background: var(--cht-surface-2);
  color: var(--cht-ink-2);
}
.cht-legacy-head > .cht-status .cht-dot { display: none; }
.cht-legacy-head > .cht-status[data-status="novo"] { background: #eef3fb; color: var(--cht-accent-deep); }
.cht-legacy-head > .cht-status[data-status="em_atendimento"] { background: var(--cht-accent-weak); color: var(--cht-accent-deep); }
.cht-legacy-head > .cht-status[data-status="pendente"] { background: var(--cht-warn-weak); color: var(--cht-warn); }
.cht-legacy-head > .cht-status[data-status="solucionado"] { background: var(--cht-ok-weak); color: var(--cht-ok); }
.cht-legacy-head > .cht-status[data-status="fechado"] { background: #eceef1; color: var(--cht-ink-3); }
.cht-legacy-titulo {
  grid-area: titulo;
  font-family: var(--cht-fd);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cht-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cht-legacy-meta {
  grid-area: meta;
  font-size: 11.5px;
  color: var(--cht-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cht-legacy-chevron {
  grid-area: chevron;
  font-size: 18px;
  color: var(--cht-ink-4);
  transition: transform var(--cht-dur);
  justify-self: end;
  align-self: center;
}
.cht-legacy-head[aria-expanded="true"] .cht-legacy-chevron { transform: rotate(90deg); }

.cht-legacy-body {
  padding: 4px 16px 18px;
  border-top: 1px solid var(--cht-line);
  background: var(--cht-surface-2);
  min-width: 0;
}
.cht-legacy-body.hidden { display: none; }
.cht-legacy-descricao {
  padding: 11px 12px;
  border: 1px solid var(--cht-line);
  border-radius: var(--cht-r-sm);
  background: var(--cht-surface);
  font-size: 13px;
  color: var(--cht-ink-2);
  line-height: 1.55;
  margin: 12px 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.cht-legacy-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  padding: 0 2px;
  font-size: 12px;
  color: var(--cht-ink-3);
  margin-bottom: 16px;
}
.cht-legacy-detail-meta > span { min-width: 0; overflow-wrap: anywhere; }
.cht-legacy-detail-meta .cht-legacy-requesters { flex: 1 0 100%; }
.cht-legacy-detail-meta strong { color: var(--cht-ink-2); font-weight: 600; }
.cht-legacy-followups-title {
  font-family: var(--cht-fu);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cht-ink-3);
  margin: 0 0 11px;
}

.cht-legacy-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.cht-legacy-timeline::before {
  content: "";
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 16px;
  width: 1px;
  background: var(--cht-line-2);
}
.cht-legacy-event {
  position: relative;
  display: grid;
  grid-template-columns: 33px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
}
.cht-legacy-event-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border: 1px solid var(--cht-line-2);
  border-radius: 50%;
  background: var(--cht-surface);
  color: var(--cht-accent-ink);
}
.cht-legacy-event-icon svg { width: 15px; height: 15px; }
.cht-legacy-event.is-solution .cht-legacy-event-icon {
  border-color: rgba(28, 127, 77, .25);
  background: var(--cht-ok-weak);
  color: var(--cht-ok);
}
.cht-legacy-event.is-task .cht-legacy-event-icon {
  border-color: rgba(79, 106, 232, .22);
  background: var(--cht-accent-weak);
  color: var(--cht-accent-deep);
}
.cht-legacy-event.is-document .cht-legacy-event-icon {
  background: #f1f3f6;
  color: var(--cht-ink-3);
}
.cht-legacy-event.is-interna .cht-legacy-event-icon {
  border-color: var(--cht-warn-line);
  background: var(--cht-warn-weak);
  color: var(--cht-warn);
}
.cht-legacy-event-card {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--cht-line);
  border-radius: var(--cht-r-sm);
  background: var(--cht-surface);
}
.cht-legacy-event.is-interna .cht-legacy-event-card {
  border-color: var(--cht-warn-line);
  background: var(--cht-warn-weak);
}
.cht-legacy-event-title {
  display: flex;
  align-items: center;
  gap: 5px 8px;
  flex-wrap: wrap;
  min-width: 0;
  margin-bottom: 6px;
  font-size: 11.5px;
  color: var(--cht-ink-3);
}
.cht-legacy-event-title > span:first-child {
  color: var(--cht-ink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.cht-legacy-event-title strong {
  min-width: 0;
  color: var(--cht-ink-2);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.cht-legacy-event-title time,
.cht-legacy-date-missing {
  margin-left: auto;
  color: var(--cht-ink-4);
  font-family: var(--cht-fm);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.cht-legacy-date-missing { font-style: italic; }
.cht-legacy-actor-role {
  padding: 1px 6px;
  border-radius: var(--cht-r-pill);
  background: var(--cht-surface-2);
  color: var(--cht-ink-3);
  font-size: 9.5px;
  font-weight: 600;
}
.cht-legacy-event-content {
  margin: 0;
  color: var(--cht-ink-2);
  font-size: 12.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.cht-legacy-filename {
  color: var(--cht-ink);
  font-family: var(--cht-fm);
  font-size: 12px;
  font-weight: 600;
}
.cht-legacy-truncated {
  margin: 7px 0 0;
  color: var(--cht-ink-3);
  font-size: 10.75px;
  font-style: italic;
  line-height: 1.4;
}
.cht-legacy-event-details {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--cht-line);
  color: var(--cht-ink-3);
  font-size: 10.75px;
  line-height: 1.4;
}
.cht-legacy-event-details > span { overflow-wrap: anywhere; }
.cht-legacy-sem-followups {
  padding: 12px;
  border: 1px dashed var(--cht-line-2);
  border-radius: var(--cht-r-sm);
  background: var(--cht-surface);
  font-size: 12.5px;
  color: var(--cht-ink-3);
  font-style: italic;
}
/* Tag "Interna": só aparece quando a API técnica devolve evento privado. */
.cht-interna-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: var(--cht-r-pill);
  background: #f6e2bb;
  color: #5a3f0a;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (max-width: 560px) {
  .cht-legacy-wrap { padding: 15px 12px 22px; }
  .cht-legacy-banner { padding: 11px 12px; margin-bottom: 13px; }
  .cht-legacy-snapshot { align-items: flex-start; }
  .cht-legacy-search { max-width: none; }
  .cht-legacy-body { padding: 3px 11px 14px; }
  .cht-legacy-descricao { padding: 10px; margin: 10px 0 12px; }
  .cht-legacy-detail-meta { display: grid; grid-template-columns: 1fr; gap: 5px; margin-bottom: 14px; }
  .cht-legacy-detail-meta .cht-legacy-requesters { grid-column: auto; }
  .cht-legacy-timeline::before { left: 14px; }
  .cht-legacy-event { grid-template-columns: 29px minmax(0, 1fr); gap: 8px; }
  .cht-legacy-event-icon { width: 29px; height: 29px; }
  .cht-legacy-event-icon svg { width: 14px; height: 14px; }
  .cht-legacy-event-card { padding: 9px 10px; }
  .cht-legacy-event-title time,
  .cht-legacy-event-title .cht-legacy-date-missing { width: 100%; margin-left: 0; }
  .cht-legacy-event-details { display: grid; grid-template-columns: 1fr; gap: 3px; }
}

/* Indicadores: procedência/frescor do espelho histórico e legenda de vazão. */
.cht-tec .cht-ind-snapshot {
  display: flex;
  align-items: center;
  gap: 6px 9px;
  flex-wrap: wrap;
  margin: -3px 20px 13px;
  padding: 8px 10px;
  border: 1px solid var(--cht-line);
  border-radius: var(--cht-r-sm);
  background: var(--cht-surface-2);
  color: var(--cht-ink-3);
  font-size: 11.5px;
  line-height: 1.4;
}
.cht-tec .cht-ind-snapshot svg { width: 14px; height: 14px; flex: none; color: var(--cht-accent-ink); }
.cht-tec .cht-ind-snapshot time { color: var(--cht-ink-2); font: 600 11px var(--cht-fm); font-variant-numeric: tabular-nums; }
.cht-tec .cht-ind-snapshot.is-unavailable { border-color: var(--cht-warn-line); background: var(--cht-warn-weak); color: #6f5108; }
.cht-tec .cht-ind-snapshot .warn { flex: 1 0 100%; color: var(--cht-breach); font-weight: 600; }
.cht-tec .cht-ind-legend .sw-res { background: #dff4e8; border: 1px solid var(--cht-ok); }
.cht-tec .cht-ind-sparkmeta .r { color: var(--cht-ok); font: 600 11px var(--cht-fu); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .cht-tec .cht-ind-snapshot { margin-left: 15px; margin-right: 15px; }
}
/* ════════════════════════════════════════════════════════════════════════════
   FASE 2 — BASE DE CONHECIMENTO (KB) · CSAT · ANEXOS · SUGESTÕES
   Renderizam dentro de #chamadosTab (mesmo shell). Reusam tokens/componentes
   --cht-* da fundação. Botões custom sempre com background+color no :hover.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── KB: intro + toolbar + lista ─────────────────────────────────────────────── */
.cht-kb { min-width: 0; }
/* busca-herói: título + subtítulo + busca grande centralizada */
.cht-kb-hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 3px; padding: 26px 22px 20px;
  background: linear-gradient(180deg, var(--cht-surface-2), var(--cht-surface));
  border-bottom: 1px solid var(--cht-line);
  min-width: 0;
}
.cht-kb-hero-ic {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--cht-accent-weak); color: var(--cht-accent-ink);
  display: grid; place-items: center; margin-bottom: 6px;
}
.cht-kb-hero-ic svg { width: 21px; height: 21px; }
.cht-kb-hero h2 { margin: 0; font: 800 19px var(--cht-fd); letter-spacing: -.01em; color: var(--cht-ink); }
.cht-kb-hero p { margin: 0 0 13px; font-size: 13px; color: var(--cht-ink-3); }
.cht-kb-search { width: 100%; max-width: 440px; }
.cht-kb-hero .cht-kb-search { padding: 8px 14px; box-shadow: var(--cht-sh-1); }
.cht-kb-hero .cht-kb-search input { font-size: 13.5px; }

/* artigos em CARDS (não lista chapada) */
.cht-kb-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 22px;
  min-width: 0;
}
.cht-kb-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--cht-line);
  border-radius: var(--cht-r);
  cursor: pointer;
  text-align: left;
  background: var(--cht-surface);
  min-width: 0;
  transition: border-color var(--cht-dur) var(--cht-ease), box-shadow var(--cht-dur) var(--cht-ease);
}
.cht-kb-row:hover { border-color: var(--cht-accent-line); box-shadow: var(--cht-sh-1); }
.cht-kb-row:hover .cht-kb-ic { transform: scale(1.06); box-shadow: 0 4px 12px -4px rgba(79, 106, 232, .4); }
.cht-kb-row:hover .cht-kb-chevron { transform: translateX(2px); color: var(--cht-accent-ink); }
.cht-kb-row:focus-visible {
  outline: none;
  background: var(--cht-surface-2);
  box-shadow: inset 3px 0 0 var(--cht-accent);
}
.cht-kb-chevron { transition: transform var(--cht-dur) var(--cht-ease), color var(--cht-dur) var(--cht-ease); }
.cht-kb-ic {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--cht-r-sm);
  background: var(--cht-accent-weak);
  background-image: linear-gradient(135deg, var(--cht-accent-weak), #dbe6ff);
  color: var(--cht-accent-ink);
  flex: none;
  transition: transform var(--cht-dur-2) var(--cht-ease-spring), box-shadow var(--cht-dur-2) var(--cht-ease-out);
}
.cht-kb-ic svg { width: 18px; height: 18px; }
.cht-kb-row .body { min-width: 0; }
.cht-kb-row .ttl {
  margin: 0;
  font-family: var(--cht-fd);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--cht-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cht-kb-resumo {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--cht-ink-3);
  line-height: 1.45;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cht-kb-row .meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  min-width: 0;
  flex-wrap: wrap;
}
.cht-kb-cat,
.cht-kb-views {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--cht-ink-3);
}
.cht-kb-cat svg,
.cht-kb-views svg { width: 13px; height: 13px; flex: none; }
.cht-kb-views { font-family: var(--cht-fm); font-variant-numeric: tabular-nums; }
.cht-kb-chevron { color: var(--cht-ink-4); justify-self: end; flex: none; }
.cht-kb-chevron svg { width: 18px; height: 18px; }

/* ── KB: artigo (documento) ──────────────────────────────────────────────────── */
.cht-kb-artigo, .cht-kb .cht-crumb { min-width: 0; }
.cht-kb .cht-crumb {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px 4px;
}
.cht-kb .cht-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--cht-fu);
  font-weight: 600;
  font-size: 13px;
  color: var(--cht-ink-2);
  padding: 4px 6px;
  border-radius: var(--cht-r-sm);
  transition: background var(--cht-dur), color var(--cht-dur);
}
.cht-kb .cht-back:hover { background: var(--cht-surface-2); color: var(--cht-accent-ink); }
.cht-kb .cht-back svg { width: 16px; height: 16px; flex: none; }

.cht-kb-doc {
  padding: 12px 22px 20px;
  max-width: 780px;
  min-width: 0;
}
.cht-kb-doc h1 {
  margin: 8px 0 10px;
  font-family: var(--cht-fd);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--cht-ink);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.cht-kb-doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--cht-ink-3);
}
.cht-kb-doc-meta .m { display: inline-flex; align-items: center; gap: 5px; }
.cht-kb-doc-meta .m svg { width: 13px; height: 13px; flex: none; }
.cht-kb-doc-resumo {
  font-size: 14px;
  color: var(--cht-ink-2);
  line-height: 1.55;
  padding: 12px 14px;
  border-left: 3px solid var(--cht-accent-line);
  background: var(--cht-surface-2);
  border-radius: 0 var(--cht-r) var(--cht-r) 0;
  margin: 0 0 16px;
  overflow-wrap: anywhere;
}
.cht-kb-doc-body {
  font-size: 14px;
  color: var(--cht-ink);
  line-height: 1.65;
  overflow-wrap: anywhere;
}
/* Markdown renderizado (corpoHtml): títulos de seção, listas, citações. */
.cht-kb-doc-body > *:first-child { margin-top: 0; }
.cht-kb-doc-body p { margin: 0 0 12px; }
.cht-kb-doc-body .kb-h {
  margin: 22px 0 8px;
  font: 800 15px var(--cht-fd);
  letter-spacing: -.01em;
  color: var(--cht-ink);
}
.cht-kb-doc-body ul,
.cht-kb-doc-body ol { margin: 0 0 12px; padding-left: 20px; }
.cht-kb-doc-body li { margin: 0 0 6px; }
.cht-kb-doc-body li::marker { color: var(--cht-ink-3); }
.cht-kb-doc-body strong { font-weight: 700; color: var(--cht-ink); }
.cht-kb-doc-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--cht-surface-2);
  padding: 1px 5px;
  border-radius: 5px;
}
.cht-kb-doc-body blockquote {
  margin: 4px 0 12px;
  padding: 10px 14px;
  border-left: 3px solid var(--cht-accent-line);
  background: var(--cht-surface-2);
  border-radius: 0 var(--cht-r) var(--cht-r) 0;
  color: var(--cht-ink-2);
}
.cht-kb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
}

/* KB: barra de feedback util/nao-util */
.cht-kb-fb {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r);
  background: var(--cht-surface-2);
  min-width: 0;
}
.cht-kb-fb .q { font-size: 13px; font-weight: 600; color: var(--cht-ink-2); }
.cht-kb-fb .btns { display: flex; gap: 9px; }
.cht-kb-fb-btn {
  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: 7px 14px;
  cursor: pointer;
  transition: background var(--cht-dur), color var(--cht-dur), border-color var(--cht-dur);
}
.cht-kb-fb-btn:hover { background: var(--cht-accent-weak); color: var(--cht-accent-ink); border-color: var(--cht-accent-line); }
.cht-kb-fb-btn:disabled { opacity: .55; cursor: not-allowed; }
.cht-kb-fb-btn svg { width: 15px; height: 15px; flex: none; }
.cht-kb-fb-btn .c { font-family: var(--cht-fm); font-size: 11px; color: var(--cht-ink-3); font-variant-numeric: tabular-nums; }
.cht-kb-fb.is-done {
  color: var(--cht-ok);
  font-size: 13px;
  font-weight: 600;
  border-color: var(--cht-ok-line);
  background: var(--cht-ok-weak);
}
.cht-kb-fb.is-done svg { flex: none; }

/* KB: CTA "não resolveu?" */
.cht-kb-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 18px 22px 24px;
  padding: 15px 18px;
  border: 1px solid var(--cht-accent-line);
  background: var(--cht-accent-weak);
  border-radius: var(--cht-r);
  min-width: 0;
}
/* Artigo: coluna CENTRALIZADA e mais larga, ocupando bem a tela; o CTA volta
   pra baixo em largura cheia (o trilho lateral deixava vazio feio). Fonte um
   pouco maior pra dar cara de "feito pra esta tela". Escopo :has(> .cht-kb-doc)
   => só a tela de ARTIGO, não a lista. */
@media (min-width: 900px) {
  .cht-kb:has(> .cht-kb-doc) > .cht-kb-doc { max-width: none; }
  .cht-kb:has(> .cht-kb-doc) .cht-kb-doc h1 { font-size: 26px; }
  .cht-kb:has(> .cht-kb-doc) .cht-kb-doc-resumo { font-size: 15px; padding: 14px 16px; }
  .cht-kb:has(> .cht-kb-doc) .cht-kb-doc-body { font-size: 15px; line-height: 1.72; }
  .cht-kb:has(> .cht-kb-doc) .cht-kb-doc-body .kb-h { font-size: 16.5px; margin-top: 26px; }
}
.cht-kb-cta .txt { min-width: 0; flex: 1; }
.cht-kb-cta .txt strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--cht-accent-deep); }
.cht-kb-cta .txt span { display: block; font-size: 12.5px; color: var(--cht-accent-ink); margin-top: 2px; }
.cht-kb-cta .cht-btn { flex: none; }

/* ── Sugestões de KB no "abrir chamado" ──────────────────────────────────────── */
.cht-kb-suggest {
  border: 1px solid var(--cht-accent-line);
  border-radius: var(--cht-r);
  background: var(--cht-accent-weak);
  padding: 13px 15px;
  min-width: 0;
  /* Leve elevação p/ o callout se destacar do formulário sem virar "banner". */
  box-shadow: 0 1px 2px rgba(30, 45, 75, 0.05), 0 6px 16px -10px rgba(30, 45, 75, 0.22);
}
.cht-kb-suggest.hidden { display: none; }
.cht-kb-sg-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cht-accent-deep);
  margin-bottom: 10px;
}
.cht-kb-sg-hd svg { width: 16px; height: 16px; flex: none; color: var(--cht-accent-ink); }
.cht-kb-sg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cht-kb-sg-item {
  border: 1px solid var(--cht-accent-line);
  border-radius: var(--cht-r-sm);
  background: var(--cht-surface);
  overflow: hidden;
  min-width: 0;
}
.cht-kb-sg-head {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  min-width: 0;
  transition: background var(--cht-dur);
}
.cht-kb-sg-head:hover { background: var(--cht-surface-2); }
.cht-kb-sg-head .ic {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--cht-r-sm);
  background: var(--cht-accent-weak);
  color: var(--cht-accent-ink);
  flex: none;
}
.cht-kb-sg-head .ic svg { width: 16px; height: 16px; }
.cht-kb-sg-head .tx { min-width: 0; }
.cht-kb-sg-head .tt {
  display: block;
  font-family: var(--cht-fd);
  font-size: 13px;
  font-weight: 700;
  color: var(--cht-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cht-kb-sg-head .rs {
  display: block;
  font-size: 11.5px;
  color: var(--cht-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  margin-top: 1px;
}
.cht-kb-sg-head .chev { color: var(--cht-ink-4); justify-self: end; flex: none; }
.cht-kb-sg-head .chev svg { width: 16px; height: 16px; transition: transform var(--cht-dur); }
.cht-kb-sg-head[aria-expanded="true"] .chev svg { transform: rotate(90deg); }
.cht-kb-sg-body {
  padding: 4px 14px 14px;
  border-top: 1px solid var(--cht-line);
  min-width: 0;
}
.cht-kb-sg-body.hidden { display: none; }
.cht-kb-sg-body .rs { font-size: 12.5px; color: var(--cht-ink-2); margin: 10px 0 8px; overflow-wrap: anywhere; }
.cht-kb-sg-body .bd { font-size: 13px; color: var(--cht-ink); line-height: 1.6; overflow-wrap: anywhere; }
.cht-kb-sg-body .ft { margin-top: 10px; font-size: 11.5px; color: var(--cht-ink-3); font-style: italic; }
/* Markdown COMPACTO dentro do painel de sugestão (largura estreita). */
.cht-kb-sg-body .bd > *:first-child { margin-top: 0; }
.cht-kb-sg-body .bd p { margin: 0 0 8px; }
.cht-kb-sg-body .bd .kb-h { margin: 13px 0 5px; font: 700 12.5px var(--cht-fd); color: var(--cht-ink); }
.cht-kb-sg-body .bd ul,
.cht-kb-sg-body .bd ol { margin: 0 0 8px; padding-left: 18px; }
.cht-kb-sg-body .bd li { margin: 0 0 4px; }
.cht-kb-sg-body .bd strong { font-weight: 700; }
.cht-kb-sg-body .bd blockquote {
  margin: 4px 0 8px;
  padding: 7px 10px;
  border-left: 2px solid var(--cht-accent-line);
  background: var(--cht-surface-2);
  border-radius: 0 6px 6px 0;
  color: var(--cht-ink-2);
}
.cht-kb-sg-body .bd code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--cht-surface-2);
  padding: 1px 4px;
  border-radius: 4px;
}
.cht-kb-sg-loading { padding: 10px 0; font-size: 12.5px; color: var(--cht-ink-3); }
/* Estado "procurando artigos…" — pontos pulsando enquanto o fetch acontece. */
.cht-kb-sg-searching { display: flex; align-items: center; gap: 7px; padding: 2px 2px 4px; }
.cht-kb-sg-searching .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cht-accent-ink);
  opacity: 0.3;
  animation: chtKbPulse 1s ease-in-out infinite;
}
.cht-kb-sg-searching .dot:nth-child(2) { animation-delay: 0.15s; }
.cht-kb-sg-searching .dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes chtKbPulse {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 0.9; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .cht-kb-sg-searching .dot { animation: none; opacity: 0.6; }
}

/* ── CSAT (pesquisa de satisfação) ───────────────────────────────────────────── */
.cht-csat { min-width: 0; }
.cht-csat .cht-crumb { display: flex; align-items: center; gap: 12px; padding: 16px 22px 0; }
.cht-csat .cht-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--cht-fu);
  font-weight: 600;
  font-size: 13px;
  color: var(--cht-ink-2);
  padding: 4px 6px;
  border-radius: var(--cht-r-sm);
  transition: background var(--cht-dur), color var(--cht-dur);
}
.cht-csat .cht-back:hover { background: var(--cht-surface-2); color: var(--cht-accent-ink); }
.cht-csat .cht-back svg { width: 16px; height: 16px; flex: none; }

.cht-csat-card {
  margin: 16px auto 28px;
  max-width: 560px;
  padding: 26px 26px 24px;
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r-lg);
  background: var(--cht-surface);
  box-shadow: var(--cht-sh-1);
  min-width: 0;
}
.cht-csat-head { text-align: center; }
.cht-csat-badge {
  width: 52px; height: 52px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--cht-r-lg);
  background: var(--cht-accent-weak);
  color: var(--cht-accent-ink);
  margin-bottom: 12px;
}
.cht-csat-badge svg { width: 26px; height: 26px; }
.cht-csat-badge.is-error { background: var(--cht-breach-weak); color: var(--cht-breach); }
.cht-csat-card h1 {
  margin: 0;
  font-family: var(--cht-fd);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--cht-ink);
}
.cht-csat-head p { margin: 6px 0 0; font-size: 13px; color: var(--cht-ink-3); }

.cht-csat-ref {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 16px 0 4px;
  padding: 9px 12px;
  border-radius: var(--cht-r);
  background: var(--cht-surface-2);
  border: 1px solid var(--cht-line);
  min-width: 0;
}
.cht-csat-ref .tt { font-size: 12.5px; color: var(--cht-ink-2); overflow-wrap: anywhere; }

.cht-csat-faces {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 22px 0 18px;
  min-width: 0;
}
.cht-csat-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px 9px;
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r);
  background: var(--cht-surface);
  cursor: pointer;
  color: var(--cht-ink-4);
  min-width: 0;
  transition: background var(--cht-dur), color var(--cht-dur), border-color var(--cht-dur), box-shadow var(--cht-dur), transform var(--cht-dur);
}
.cht-csat-face:hover { background: var(--cht-surface-2); color: var(--cht-ink-2); border-color: var(--cht-line-3); }
.cht-csat-face:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cht-accent-weak); border-color: var(--cht-accent-line); }
.cht-csat-face .ic svg { width: 34px; height: 34px; }
.cht-csat-face .lb {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--cht-ink-3);
  text-align: center;
  line-height: 1.2;
}
.cht-csat-face.is-on {
  border-color: var(--cht-accent);
  background: var(--cht-accent-weak);
  color: var(--cht-accent);
  box-shadow: 0 0 0 1px var(--cht-accent) inset;
  transform: translateY(-2px);
}
.cht-csat-face.is-on .lb { color: var(--cht-accent-ink); }

.cht-csat-comment { display: block; margin-bottom: 16px; }
.cht-csat-comment .cht-label { margin-bottom: 6px; }
.cht-csat-actions { display: flex; justify-content: center; gap: 10px; margin-top: 4px; }
.cht-csat-actions .cht-btn--primary { min-width: 180px; justify-content: center; }
.cht-csat .cht-form-error {
  color: var(--cht-breach);
  font-size: 12.5px;
  text-align: center;
  margin: 0 0 12px;
}
.cht-csat .cht-form-error.hidden { display: none; }

/* CSAT: agradecimento / já respondido / erro */
.cht-csat-done, .cht-csat-error { text-align: center; }
.cht-csat-check {
  width: 56px; height: 56px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cht-ok-weak);
  color: var(--cht-ok);
  margin-bottom: 14px;
}
.cht-csat-check svg { width: 28px; height: 28px; }
.cht-csat-done p, .cht-csat-error p { margin: 8px 0 0; font-size: 13px; color: var(--cht-ink-3); }
.cht-csat-registered {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 16px 0 2px;
  padding: 8px 16px;
  border-radius: var(--cht-r-pill);
  background: var(--cht-surface-2);
  border: 1px solid var(--cht-line);
}
.cht-csat-registered .ic { color: var(--cht-accent); }
.cht-csat-registered .ic svg { width: 26px; height: 26px; display: block; }
.cht-csat-registered .lb { font-size: 13px; font-weight: 700; color: var(--cht-ink); }
.cht-csat-quote {
  margin: 14px auto 0;
  max-width: 440px;
  padding: 10px 14px;
  border-left: 3px solid var(--cht-line-3);
  background: var(--cht-surface-2);
  border-radius: 0 var(--cht-r) var(--cht-r) 0;
  font-size: 12.5px;
  color: var(--cht-ink-2);
  text-align: left;
  overflow-wrap: anywhere;
}

/* ── CSAT: banner no detalhe do ticket encerrado ─────────────────────────────── */
.cht-csat-banner {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  margin: 0 22px 4px;
  padding: 13px 16px;
  border: 1px solid var(--cht-accent-line);
  background: var(--cht-accent-weak);
  border-radius: var(--cht-r);
  min-width: 0;
}
.cht-csat-banner .ic {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--cht-r-sm);
  background: var(--cht-surface);
  color: var(--cht-accent);
  flex: none;
}
.cht-csat-banner .ic svg { width: 19px; height: 19px; }
.cht-csat-banner .tx { min-width: 0; flex: 1; }
.cht-csat-banner .tx strong { display: block; font-size: 13px; font-weight: 700; color: var(--cht-accent-deep); }
.cht-csat-banner .tx span { display: block; font-size: 12px; color: var(--cht-accent-ink); margin-top: 1px; }
.cht-csat-banner .hint { font-size: 12px; color: var(--cht-accent-ink); flex: none; }
.cht-csat-banner .cht-btn { flex: none; text-decoration: none; }

/* ── ANEXOS (lista na timeline + botão no composer) ──────────────────────────── */
.cht-anexos { min-width: 0; }
.cht-anexos.is-empty { display: none; }
.cht-anexos {
  padding: 12px 22px;
  border-top: 1px solid var(--cht-line);
  background: var(--cht-surface);
}
.cht-anexos-loading { font-size: 12.5px; color: var(--cht-ink-3); }
.cht-anexos-hd {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cht-ink-3);
  margin-bottom: 10px;
}
.cht-anexos-hd svg { width: 14px; height: 14px; flex: none; color: var(--cht-accent); }
.cht-anexos-hd .c { font-family: var(--cht-fm); font-variant-numeric: tabular-nums; color: var(--cht-ink-4); }
.cht-anexos-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.cht-anexo {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r-sm);
  background: var(--cht-surface-2);
  min-width: 0;
  max-width: 280px;
  overflow: hidden;
}
.cht-anexo-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  transition: background var(--cht-dur);
}
.cht-anexo-link:hover { background: var(--cht-surface-3); }
.cht-anexo-link .ic {
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--cht-r-sm);
  background: var(--cht-surface);
  border: 1px solid var(--cht-line);
  color: var(--cht-accent-ink);
  flex: none;
}
.cht-anexo-link .ic svg { width: 15px; height: 15px; }
.cht-anexo-link .tx { min-width: 0; }
.cht-anexo-link .nm {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cht-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cht-anexo-link .mt {
  display: block;
  font-size: 10.5px;
  color: var(--cht-ink-3);
  font-family: var(--cht-fm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cht-anexo-link .dl { color: var(--cht-ink-4); flex: none; }
.cht-anexo-link .dl svg { width: 15px; height: 15px; display: block; }
.cht-anexo-del {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--cht-ink-4);
  padding: 6px 8px;
  display: grid;
  place-items: center;
  flex: none;
  transition: color var(--cht-dur), background var(--cht-dur);
}
.cht-anexo-del:hover { color: var(--cht-breach); background: var(--cht-breach-weak); }
.cht-anexo-del svg { width: 15px; height: 15px; }

/* botão clipe no composer */
.cht-attach {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--cht-ink-3);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: none;
  align-self: flex-end;
  transition: background var(--cht-dur), color var(--cht-dur);
}
.cht-attach:hover { background: var(--cht-surface-2); color: var(--cht-accent-ink); }
.cht-attach:disabled { opacity: .5; cursor: not-allowed; }
.cht-attach svg { width: 18px; height: 18px; }

/* ────────────────────────────────────────────────────────────────────────────
   6 · MOBILE (~360-390px): zero overflow-x
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .cht-detail { grid-template-columns: 1fr; }
  .cht-detail-main { border-right: 0; }
  .cht-detail-aside { order: -1; border-bottom: 1px solid var(--cht-line); }
  .cht-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .cht-header { padding: 16px 15px 12px; }
  .cht-header h1 { font-size: 19px; }
  .cht-header--abrir { padding: 10px 15px; }
  .cht-header--abrir h1 { font-size: 17px; }
  .cht-subnav-row { padding: 0 15px 12px; }
  .cht-kpis-row { padding: 2px 15px 12px; }
  .cht-toolbar { padding: 4px 15px 12px; }
  .cht-toolbar .cht-search { max-width: 150px; }

  /* linha vira 2 colunas: trailing quebra para baixo do corpo; "há Xmin" some */
  .cht-row { padding: 13px 15px; grid-template-columns: 12px minmax(0, 1fr); }
  /* tablet: as colunas de enriquecimento descem pra baixo do corpo (col 2), empilhadas */
  .cht-row .body { grid-column: 2; }
  .cht-row .cht-col-owner,
  .cht-row .cht-col-status { grid-column: 2; justify-self: start; margin-top: 8px; }
  .cht-row .trail { grid-column: 2; justify-self: start; margin-top: 8px; flex-wrap: wrap; }
  .cht-row .when { display: none; }

  .cht-crumb,
  .cht-thead,
  .cht-chat-hd,
  .cht-thread,
  .cht-composer,
  .cht-tecnico-bar { padding-left: 15px; padding-right: 15px; }
  .cht-composer-fechado { margin-left: 15px; margin-right: 15px; }
  .cht-asec { padding: 14px 15px; }

  .cht-type-cards { grid-template-columns: 1fr; }
  .cht-form-wrap,
  .cht-legacy-wrap { padding: 16px 15px 22px; }

  .cht-legacy-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "num    titulo chevron"
      "status titulo chevron";
  }
  .cht-legacy-meta { display: none; }

  .cht-pagination { padding: 14px 15px; }
  .cht-error-box { margin: 16px 15px; }

  /* Fase 2 — KB */
  .cht-kb-intro { padding: 14px 15px 4px; }
  .cht-kb-toolbar { padding: 8px 15px 12px; }
  .cht-kb-row { padding: 13px 15px; gap: 11px; }
  .cht-kb .cht-crumb { padding: 14px 15px 0; }
  .cht-kb-doc { padding: 10px 15px 18px; }
  .cht-kb-doc h1 { font-size: 19px; }
  .cht-kb-cta { margin: 16px 15px 22px; }
  .cht-anexos { padding: 12px 15px; }
  .cht-anexo { max-width: 100%; width: 100%; }
  .cht-anexos-list { flex-direction: column; }

  /* Fase 2 — CSAT banner + sugestões seguem o padding do detalhe/form */
  .cht-csat-banner { margin: 0 15px 4px; }
  .cht-csat-banner .cht-btn,
  .cht-csat-banner .hint { width: 100%; justify-content: center; text-align: center; }

  /* Fase 2 — CSAT: card e carinhas em telas estreitas */
  .cht-csat .cht-crumb { padding: 14px 15px 0; }
  .cht-csat-card { margin: 14px 15px 24px; padding: 22px 16px 20px; }
  .cht-csat-faces { gap: 5px; }
  .cht-csat-face { padding: 10px 2px 8px; }
  .cht-csat-face .ic svg { width: 28px; height: 28px; }
  .cht-csat-face .lb { font-size: 9px; }
  .cht-csat-actions .cht-btn--primary { min-width: 0; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ABRIR CHAMADO — layout em 2 colunas (form + dicas) e SELETOR DE CATEGORIA
   em árvore (substitui o <select> indentado feio). 2026-07-02.
   ══════════════════════════════════════════════════════════════════════════ */
.cht-abrir-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px;
  align-items: start;
  min-width: 0;
}
/* na tela de abrir, o form preenche a coluna (largura cheia, sem ilha estreita) */
.cht-abrir-layout .cht-form { max-width: none; }

/* ══════════════════════════════════════════════════════════════════════════
   SUPORTE — o card ocupa a VIEWPORT inteira (edge-to-edge + altura cheia),
   sem número mágico: desconta só o padding vertical da .workspace.
   ══════════════════════════════════════════════════════════════════════════ */
#suporteTab.card {
  padding: 0;
  overflow: hidden;
  background: var(--cht-surface);
  min-height: calc(100dvh - var(--space-3) - var(--space-4));
  display: flex;
  flex-direction: column;
}
#suporteTab .cht-suporte,
#suporteTab .cht-suporte-pane:not(.hidden),
#suporteTab .cht-suporte-pane > .cht,
#suporteTab .cht-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
/* a sub-nav (Central | Atendimento) é o topo do card — ganha respiro próprio */
#suporteTab .cht-suporte-subnav:not(.hidden) { padding: 14px 20px 8px; }
/* área de conteúdo da Central cresce; empty-state centraliza no espaço livre */
#suporteTab [data-suporte-pane="central"] .cht-content,
#suporteTab [data-suporte-pane="central"] .cht-lista {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
#suporteTab [data-suporte-pane="central"] .cht-lista > .cht-list { flex: 1 1 auto; }

/* ── Meus chamados (solicitante): mesmo esquema de rolagem do técnico ──────────
   Coluna com altura ANCORADA no viewport (não cresce além dela) → rolagem ÚNICA
   na conversa + composer FIXO no rodapé, sempre visível. Antes o card crescia com
   o conteúdo e o composer caía abaixo da dobra. Só no desktop (o mobile já tem seu
   próprio modelo em @media max-width:560px). Offset 112px = chrome acima do card. */
@media (min-width: 561px) {
  #suporteTab [data-suporte-pane="central"] .cht-content > .cht-detail {
    height: clamp(520px, calc(100dvh - 34px), 1180px);
  }
  #suporteTab [data-suporte-pane="central"] .cht-detail-main { min-height: 0; }
  #suporteTab [data-suporte-pane="central"] .cht-detail-aside { min-height: 0; overflow-y: auto; }
  #suporteTab [data-suporte-pane="central"] .cht-thread { flex: 1 1 auto; min-height: 0; max-height: none; }
  /* Composer colapsado (igual ao técnico): por padrão só o campo; os modos
     Pública/Interna + a dica aparecem ao FOCAR. Sobra mais área pra leitura. */
  #suporteTab [data-suporte-pane="central"] .cht-composer:not(:focus-within) .cht-composer-modes,
  #suporteTab [data-suporte-pane="central"] .cht-composer:not(:focus-within) .cht-composer-hint { display: none; }
}

/* Descrição SEPARADA (solicitante): card DESTACADO como 1º item do scroller
   (borda accent + sombra, igual ao --top do atendimento), e "Conversa" vira uma
   divisória enxuta logo ABAIXO da descrição — não mais acima dela. Assim a
   descrição deixa de parecer "dentro" da conversa. Vale desktop e mobile. */
#suporteTab [data-suporte-pane="central"] .cht-thread > .cht-opening {
  border-color: var(--cht-accent-line);
  box-shadow: var(--cht-sh-2);
}
#suporteTab [data-suporte-pane="central"] .cht-thread > .cht-chat-hd--inline {
  margin: 4px 0 2px;
  padding: 0 0 10px;
  border-top: 0;
  border-bottom: 1px solid var(--cht-line);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
#suporteTab [data-suporte-pane="central"] .cht-lista > .cht-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* coluna direita: dicas + painel de sugestões de KB, empilhados e grudados no topo */
.cht-abrir-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 12px;
  min-width: 0;
}
.cht-abrir-tips {
  border: 1px solid var(--cht-line);
  border-radius: var(--cht-r-lg);
  background: var(--cht-surface-2);
  padding: 16px 16px 14px;
  min-width: 0;
}
.cht-abrir-tips-hd {
  display: flex; align-items: center; gap: 9px;
  font: 800 13.5px var(--cht-fd);
  color: var(--cht-ink);
  margin-bottom: 14px;
}
.cht-abrir-tips-hd .b {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--cht-accent-weak);
  color: var(--cht-accent-ink);
  display: grid; place-items: center;
  flex: none;
}
.cht-abrir-tips-hd .b svg { width: 16px; height: 16px; }
.cht-abrir-tips-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cht-abrir-tips-list li { display: flex; gap: 9px; font-size: 12.5px; line-height: 1.45; color: var(--cht-ink-2); }
.cht-abrir-tips-list li b { color: var(--cht-ink); font-weight: 700; }
.cht-abrir-tips-list .ck {
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--cht-ok);
  color: #fff;
  display: grid; place-items: center;
  flex: none;
  margin-top: 1px;
}
.cht-abrir-tips-list .ck svg { width: 11px; height: 11px; }
.cht-abrir-tips-foot {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--cht-line);
  font-size: 11.5px;
  color: var(--cht-ink-3);
}

/* ── Seletor de categoria em árvore (combobox) — visualização melhorada ── */
.cht-catpicker { position: relative; min-width: 0; }
.cht-catpicker-trigger {
  width: 100%;
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r-sm);
  background: var(--cht-surface);
  font: 500 13.5px var(--cht-fu);
  color: var(--cht-ink);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--cht-dur) var(--cht-ease), box-shadow var(--cht-dur) var(--cht-ease);
}
.cht-catpicker-trigger:hover { border-color: var(--cht-line-3); }
.cht-catpicker-trigger[aria-expanded="true"] { border-color: var(--cht-accent-line); box-shadow: 0 0 0 3px var(--cht-accent-weak); }
.cht-catpicker-fic { flex: none; display: grid; place-items: center; color: var(--cht-accent); }
.cht-catpicker-fic svg { width: 18px; height: 18px; }
.cht-catpicker-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cht-catpicker-val.is-placeholder { color: var(--cht-ink-4); }
.cht-catpicker-val .crumb { color: var(--cht-ink-4); }
.cht-catpicker-trigger .chev { flex: none; color: var(--cht-ink-3); display: grid; place-items: center; }
.cht-catpicker-trigger .chev svg { width: 16px; height: 16px; transform: rotate(90deg); transition: transform var(--cht-dur) var(--cht-ease); }
.cht-catpicker-trigger[aria-expanded="true"] .chev svg { transform: rotate(-90deg); }

.cht-catpicker-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  width: 440px;
  max-width: 96vw;
  background: var(--cht-surface);
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r);
  box-shadow: var(--cht-sh-3);
  overflow: hidden;
  max-height: 380px;
  display: flex; flex-direction: column;
}
.cht-catpicker-search {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--cht-line);
  flex: none;
}
.cht-catpicker-search svg { width: 15px; height: 15px; color: var(--cht-ink-4); flex: none; }
.cht-catpicker-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: 500 13.5px var(--cht-fu); color: var(--cht-ink);
}
.cht-catpicker-tree { overflow-y: auto; padding: 7px; min-width: 0; }

/* nós: pastas (têm .cht-cat-exp) x folhas (selecionáveis) + guias de nível */
.cht-cat-row {
  position: relative;
  display: flex; align-items: center; gap: 7px;
  padding: 8px 9px;
  border-radius: 8px;
  cursor: pointer;
  min-width: 0;
  transition: background var(--cht-dur) var(--cht-ease);
}
.cht-cat-row:hover { background: var(--cht-surface-2); }
.cht-cat-row:focus-visible { outline: none; background: var(--cht-accent-weak); box-shadow: inset 0 0 0 1px var(--cht-accent-line); }
.cht-cat-row .cht-cat-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 13px var(--cht-fu); color: var(--cht-ink);
}
/* folhas (sem botão de expandir): peso normal, tom secundário */
.cht-cat-row:not(:has(.cht-cat-exp)) .cht-cat-name { font-weight: 500; color: var(--cht-ink-2); }
.cht-cat-exp {
  flex: none; width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer;
  color: var(--cht-ink-3); border-radius: 6px;
}
.cht-cat-exp:hover { background: var(--cht-surface-3); color: var(--cht-accent-ink); }
.cht-cat-exp svg { width: 13px; height: 13px; transition: transform var(--cht-dur) var(--cht-ease); }
.cht-cat-exp.is-open svg { transform: rotate(90deg); }
.cht-cat-bullet { flex: none; width: 22px; display: grid; place-items: center; }
.cht-cat-bullet::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--cht-line-3); }
.cht-cat-ic { flex: none; color: var(--cht-accent); display: grid; place-items: center; }
.cht-cat-ic svg { width: 16px; height: 16px; }
.cht-cat-ic:empty { display: none; }
.cht-cat-row.lvl-0 { padding-left: 9px; }
.cht-cat-row.lvl-1 { padding-left: 31px; }
.cht-cat-row.lvl-2 { padding-left: 53px; }
/* trilhos verticais de hierarquia */
.cht-cat-children { position: relative; }
.cht-cat-children::before {
  content: ""; position: absolute;
  top: 0; bottom: 6px; left: 20px;
  width: 1px; background: var(--cht-line);
}
.cht-cat-children .cht-cat-children::before { left: 42px; }
.cht-cat-row.is-flat { padding-left: 9px; }
.cht-cat-row.is-flat .cht-cat-name { color: var(--cht-ink-2); font-weight: 500; }
.cht-cat-empty { padding: 20px 12px; text-align: center; font-size: 12.5px; color: var(--cht-ink-3); }

/* ── passos guiados (1·2·3) da tela Abrir chamado ── */
.cht-step { min-width: 0; }
.cht-step + .cht-step { margin-top: 4px; }
.cht-step-hd { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; min-width: 0; }
.cht-step-n {
  width: 23px; height: 23px; border-radius: 50%;
  background: var(--cht-accent-weak); color: var(--cht-accent-ink);
  font: 800 12px var(--cht-fd);
  display: grid; place-items: center; flex: none;
}
.cht-step-t { font: 800 15px var(--cht-fd); letter-spacing: -.01em; color: var(--cht-ink); min-width: 0; }
.cht-step-s { margin-left: auto; font-size: 12.5px; color: var(--cht-ink-4); white-space: nowrap; }
.cht-req { color: var(--cht-novo); font-weight: 700; }
.cht-opt { color: var(--cht-ink-4); font-weight: 600; font-size: 12.5px; }
.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;
}

/* rótulo do título com contador X/200 */
.cht-form-field .cht-label { display: flex; align-items: baseline; gap: 8px; }
.cht-label .cht-cnt {
  margin-left: auto;
  font-size: 11.5px; font-weight: 600;
  color: var(--cht-ink-4);
  font-variant-numeric: tabular-nums;
}

/* urgência (opcional): segmentado de radios */
.cht-urg-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.cht-prio-seg { display: inline-flex; background: var(--cht-surface-3); border-radius: var(--cht-r-sm); padding: 3px; gap: 2px; }
.cht-prio-opt { position: relative; cursor: pointer; }
.cht-prio-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.cht-prio-opt span {
  display: inline-flex; align-items: center;
  font: 600 12.5px var(--cht-fu); color: var(--cht-ink-3);
  padding: 6px 15px; border-radius: 6px; white-space: nowrap;
  transition: background var(--cht-dur) var(--cht-ease), color var(--cht-dur) var(--cht-ease);
}
.cht-prio-opt:hover span { color: var(--cht-ink); }
.cht-prio-opt:has(input:checked) span { background: var(--cht-surface); color: var(--cht-accent-ink); box-shadow: var(--cht-sh-1); }
.cht-prio-opt:has(input:focus-visible) span { box-shadow: 0 0 0 3px var(--cht-accent-weak); }
.cht-urg-help { font-size: 12px; color: var(--cht-ink-4); }

@media (max-width: 560px) {
  .cht-type-cards { grid-template-columns: 1fr; }
  .cht-form-actions { flex-wrap: wrap; }
  .cht-req-hint { order: 3; width: 100%; }
}

@media (max-width: 860px) {
  .cht-abrir-layout { grid-template-columns: 1fr; gap: 16px; }
  .cht-abrir-tips { position: static; }
  .cht-catpicker-panel { width: 100%; }
}

/* ────────────────────────────────────────────────────────────────────────────
   7 · ANEXOS DE IMAGEM — Fase 3
   Thumbnail + galeria da abertura + lightbox + dropzone (colar/arrastar/escolher).
   Compartilhado pelas visões colaborador e técnico (ambas carregam este CSS).
   Todo <button> custom aqui neutraliza o button{min-height:44px;padding} global.
   ──────────────────────────────────────────────────────────────────────────── */

/* Miniatura de imagem na LISTA de anexos (botão → abre o lightbox) */
.cht-anexo-thumb {
  flex: none;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0;
  min-height: 0;
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r-sm);
  background: var(--cht-surface-3);
  overflow: hidden;
  cursor: pointer;
  display: block;
  transition: box-shadow var(--cht-dur), transform var(--cht-dur);
}
.cht-anexo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cht-anexo-thumb:hover { box-shadow: var(--cht-sh-1); transform: translateY(-1px); }
.cht-anexo-thumb:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cht-accent-weak); }

/* Linha de anexo do colaborador: virou <button> (era <a>) — reset do botão */
.cht-anexo-link {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  min-height: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

/* Galeria de imagens da ABERTURA, dentro do card .cht-opening (nas duas visões) */
.cht-opening-imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 15px 12px;
}
.cht-opening-imgs.is-empty { display: none; }
.cht-opening-img {
  flex: none;
  box-sizing: border-box;
  width: 84px;
  height: 84px;
  padding: 0;
  min-height: 0;
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r-sm);
  background: var(--cht-surface-3);
  overflow: hidden;
  cursor: pointer;
  display: block;
  transition: box-shadow var(--cht-dur), transform var(--cht-dur);
}
.cht-opening-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cht-opening-img:hover { box-shadow: var(--cht-sh-1); transform: translateY(-1px); }
.cht-opening-img:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cht-accent-weak); }

/* Lightbox — montado em document.body (classe de topo, fora de .cht) */
.cht-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(9, 15, 26, .82);
  backdrop-filter: blur(2px);
}
.cht-lightbox-img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.cht-lightbox-close,
.cht-lightbox-download {
  position: absolute;
  top: 16px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(15, 23, 42, .6);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  transition: background var(--cht-dur), transform var(--cht-dur);
}
.cht-lightbox-close { right: 16px; font-size: 24px; }
.cht-lightbox-download { right: 64px; }
.cht-lightbox-download svg { width: 18px; height: 18px; }
.cht-lightbox-close:hover,
.cht-lightbox-download:hover { background: rgba(15, 23, 42, .9); transform: scale(1.08); }

/* Composer da descrição na ABERTURA: texto + imagens coladas/arrastadas na
   MESMA caixa (estilo chat). Substitui a antiga dropzone separada. */
.cht-abrir-composer {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r-md, 12px);
  background: var(--cht-surface);
  overflow: hidden;
  transition: border-color var(--cht-dur), box-shadow var(--cht-dur), background var(--cht-dur);
}
.cht-abrir-composer:focus-within { border-color: var(--cht-accent-line); box-shadow: 0 0 0 3px var(--cht-accent-weak); }
.cht-abrir-composer.is-drag { border-color: var(--cht-accent); background: var(--cht-accent-weak); }
/* textarea sem moldura propria — a moldura e o composer */
.cht-abrir-composer-input.cht-textarea {
  border: none; border-radius: 0; background: transparent; box-shadow: none;
  resize: vertical; min-height: 120px; width: 100%;
}
.cht-abrir-composer-input.cht-textarea:focus { border: none; box-shadow: none; outline: none; }
/* faixa de miniaturas coladas (topo do composer) */
.cht-abrir-composer-imgs { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 10px 2px; min-width: 0; }
.cht-abrir-composer-imgs.is-empty { display: none; }
.cht-abrir-composer-imgs .cht-abrir-thumb { width: 88px; flex: none; cursor: zoom-in; transition: box-shadow var(--cht-dur), transform var(--cht-dur); }
.cht-abrir-composer-imgs .cht-abrir-thumb:hover { box-shadow: var(--cht-sh-2, 0 4px 12px rgba(15,23,42,.12)); transform: translateY(-1px); }
.cht-abrir-composer-imgs .cht-abrir-thumb img { height: 62px; }
.cht-abrir-composer-imgs .cht-abrir-thumb-x { cursor: pointer; }
/* barra inferior com "Anexar imagem" */
.cht-abrir-composer-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 8px; border-top: 1px solid var(--cht-line); background: var(--cht-surface-2);
}
.cht-abrir-composer-attach {
  display: inline-flex; align-items: center; gap: 6px; min-height: 0; padding: 6px 11px;
  border: 1px solid var(--cht-line-2); border-radius: 999px; background: var(--cht-surface);
  font: inherit; font-size: 12px; font-weight: 600; color: var(--cht-ink-2); cursor: pointer;
  transition: color var(--cht-dur), border-color var(--cht-dur), background var(--cht-dur);
}
.cht-abrir-composer-attach svg { width: 15px; height: 15px; flex: none; }
.cht-abrir-composer-attach:hover { color: var(--cht-accent-ink); border-color: var(--cht-accent-line); background: var(--cht-accent-weak); }
.cht-abrir-composer-hint { font-size: 11px; color: var(--cht-ink-4); }
.cht-abrir-composer-attach:disabled { opacity: .6; cursor: default; }
.cht-abrir-composer-attach:disabled:hover { color: var(--cht-ink-2); border-color: var(--cht-line-2); background: var(--cht-surface); }
.cht-abrir-composer.is-busy { border-color: var(--cht-accent-line); }
.cht-abrir-thumb {
  position: relative;
  min-width: 0;
  border: 1px solid var(--cht-line);
  border-radius: var(--cht-r);
  overflow: hidden;
  background: var(--cht-surface-3);
}
.cht-abrir-thumb img { display: block; width: 100%; height: 78px; object-fit: cover; }
.cht-abrir-thumb-nm {
  display: block;
  padding: 4px 6px;
  font-size: 10.5px;
  color: var(--cht-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cht-abrir-thumb-x {
  position: absolute;
  top: 4px;
  right: 4px;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(9, 15, 26, .62);
  color: #fff;
  cursor: pointer;
  transition: background var(--cht-dur);
}
.cht-abrir-thumb-x svg { width: 13px; height: 13px; }
.cht-abrir-thumb-x:hover { background: var(--cht-breach); }

/* ── Fase 3: composer de RESPOSTA com imagens (colar/anexar) na conversa ─────── */
/* Faixa de miniaturas estagiadas (ainda não enviadas) — colaborador + técnico */
.cht-reply-imgs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 8px 2px; min-width: 0;
}
.cht-reply-thumb {
  position: relative; flex: none; box-sizing: border-box; width: 72px; height: 56px;
  border: 1px solid var(--cht-line-2); border-radius: var(--cht-r-sm);
  overflow: hidden; background: var(--cht-surface-3); cursor: zoom-in; padding: 0;
  transition: box-shadow var(--cht-dur), transform var(--cht-dur);
}
.cht-reply-thumb:hover { box-shadow: var(--cht-sh-2, 0 4px 12px rgba(15,23,42,.12)); transform: translateY(-1px); }
.cht-reply-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cht-reply-thumb-x {
  position: absolute; top: 3px; right: 3px; box-sizing: border-box;
  width: 20px; height: 20px; min-height: 0; padding: 0;
  display: grid; place-items: center; border: none; border-radius: 50%;
  background: rgba(9, 15, 26, .62); color: #fff; cursor: pointer;
  transition: background var(--cht-dur);
}
.cht-reply-thumb-x svg { width: 12px; height: 12px; }
.cht-reply-thumb-x:hover { background: var(--cht-breach); }
.cht-reply-busy { font-size: 11px; font-weight: 600; color: var(--cht-ink-3); padding: 0 4px; }

/* Botão "anexar imagem" do composer do TÉCNICO (o colaborador reusa .cht-attach) */
.cht-reply-attach {
  box-sizing: border-box; flex: none; width: 34px; height: 34px; min-height: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 8px; background: transparent; color: var(--cht-ink-3);
  cursor: pointer; transition: color var(--cht-dur), background var(--cht-dur);
}
.cht-reply-attach:hover { background: var(--cht-surface-2); color: var(--cht-accent-ink); }
.cht-reply-attach svg { width: 18px; height: 18px; }

/* Imagens DENTRO da bolha de mensagem (anexos vinculados à mensagem via id) */
.cht-msg-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cht-msg-thumb {
  flex: none; box-sizing: border-box; width: 148px; max-width: 100%; height: 108px;
  padding: 0; min-height: 0; border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r-sm); background: var(--cht-surface-3);
  overflow: hidden; cursor: zoom-in; display: block;
  transition: box-shadow var(--cht-dur), transform var(--cht-dur);
}
.cht-msg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cht-msg-thumb:hover { box-shadow: var(--cht-sh-1); transform: translateY(-1px); }
.cht-msg-thumb:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cht-accent-weak); }

/* Mobile (~360-390px): galeria/staging quebram; sem overflow-x */
@media (max-width: 560px) {
  .cht-opening-img { width: 72px; height: 72px; }
  .cht-abrir-composer-imgs .cht-abrir-thumb { width: 76px; }
  .cht-abrir-composer-hint { display: none; }
  .cht-msg-thumb { width: 132px; height: 98px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVIDADE + A11Y (apêndice, 2026-07-07) — colaborador + compartilhado.
   Aditivo: toque em (pointer:coarse), safe-area/tablet em @media, caps ≥1600px.
   ══════════════════════════════════════════════════════════════════════════ */

/* A11Y · botão que envolve a miniatura (preview) — bare button (neutraliza o
   button{min-height:44px;padding} global) que preenche o thumb. Evita interativo
   aninhado: o × é IRMÃO, não filho. */
.cht-abrir-thumb-view,
.cht-reply-thumb-view {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  border-radius: inherit;
}
.cht-abrir-thumb-view { height: auto; }

/* TOQUE · alvos ≥40-44px só em ponteiro grosso (mouse-desktop intacto). */
@media (hover: none), (pointer: coarse) {
  .cht-send { width: 44px; height: 44px; }
  .cht-attach, .cht-reply-attach { width: 44px; height: 44px; }
  .cht-back { min-height: 44px; }
  .cht-hostnav button { min-height: 40px; }
  .cht-composer-modes button { min-height: 38px; padding-top: 8px; padding-bottom: 8px; }
  .cht-prio-opt span { min-height: 44px; }
  .cht-cat-exp { width: 40px; height: 40px; }
  .cht-anexo-del, .cht-anexo .ax-btn { width: 40px; height: 40px; }
  .cht-abrir-thumb-x, .cht-reply-thumb-x { width: 30px; height: 30px; }
  .cht-catpicker-trigger { min-height: 46px; }
  .cht-lightbox-close, .cht-lightbox-download { width: 46px; height: 46px; }
  .cht-lightbox-download { right: 70px; }
}

/* MOBILE (≤560px) · safe-area do composer + segmentado de prioridade rolável + CSAT */
@media (max-width: 560px) {
  .cht-composer { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .cht-prio-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .cht-prio-seg::-webkit-scrollbar { display: none; }
  .cht-csat-face .lb { overflow-wrap: anywhere; hyphens: auto; }
}

/* TABLET colaborador (≤900px) · colapsa o detalhe no MESMO ponto do técnico e
   relaxa a altura da thread p/ o composer caber (svh acompanha a barra do browser). */
@media (max-width: 900px) {
  .cht-detail { grid-template-columns: 1fr; }
  .cht-detail-main { border-right: 0; }
  .cht-detail-aside { order: -1; border-bottom: 1px solid var(--cht-line); }
  .cht-thread { max-height: 60vh; max-height: 60svh; }
}

/* LIGHTBOX (body-level) · safe-area nas 4 bordas + dvh na imagem + reduced-motion.
   env() resolve a 0 no desktop → nenhum efeito fora de mobile com notch. */
.cht-lightbox {
  padding: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
}
.cht-lightbox-img { max-height: 88vh; max-height: 88dvh; }
.cht-lightbox-close, .cht-lightbox-download { top: calc(16px + env(safe-area-inset-top, 0px)); }
@media (prefers-reduced-motion: reduce) {
  .cht-lightbox-close, .cht-lightbox-download { transition: none; }
  .cht-lightbox-close:hover, .cht-lightbox-download:hover { transform: none; }
}

/* TELAS GIGANTES · o conteúdo PREENCHE a largura (decisão do usuário 2026-07-07:
   caps de max-width/centralização deixavam muito espaço em branco nas laterais no
   1920+). Sem @media aqui — o layout enche a tela como no baseline. */

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE-NATIVA · "ABRIR CHAMADO" (apêndice 2026-07-07)
   • CTA sempre no polegar (barra de ação FIXA acima da nav do portal).
   • Categoria vira BOTTOM-SHEET de tela cheia com busca (era popover apertado).
   • Deflexão de KB no FLUXO (logo após a descrição, não afundada no rodapé).
   • Campos 16px (mata o auto-zoom do iOS). Gated em ≤560 → desktop intacto.
   ══════════════════════════════════════════════════════════════════════════ */

/* Deflexão de KB agora vive dentro do form (após a descrição) — respiro. */
.cht-abrir-form .cht-kb-suggest:not(.hidden) { margin: 2px 0 6px; }

/* Cabeçalho do bottom-sheet de categoria: existe no DOM mas só aparece no mobile. */
.cht-catpicker-sheethd { display: none; }

@media (max-width: 560px) {
  /* — CATEGORIA COMO BOTTOM-SHEET ———————————————————————————————————————— */
  .cht-catpicker-sheethd { display: flex; flex-direction: column; flex: none; }
  .cht-catpicker-sheethd-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 2px 14px 10px;
  }
  .cht-catpicker-sheethd-bar .t {
    flex: 1; min-width: 0;
    font: 800 15.5px var(--cht-fd); letter-spacing: -.01em; color: var(--cht-ink);
  }
  .cht-catpicker-panel {
    position: fixed; z-index: 10041;
    left: 0; right: 0; top: auto; bottom: 0;
    width: auto; max-width: none;
    max-height: 82dvh;
    border: 0; border-top: 1px solid var(--cht-line-2);
    border-radius: 22px 22px 0 0;
    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) var(--cht-ease-out);
  }
  .cht-catpicker-panel.is-open { transform: translateY(0); }
  .cht-catpicker-search { padding: 12px 16px; }
  .cht-catpicker-search input { font-size: 16px; }
  .cht-catpicker-tree { flex: 1 1 auto; min-height: 0; padding: 6px 8px calc(10px + var(--cht-safe-b)); }
  .cht-cat-row { min-height: 46px; gap: 9px; }
  .cht-cat-row .cht-cat-name { font-size: 15px; }

  /* — BARRA DE AÇÃO FIXA (CTA sempre acessível, ancorada acima da nav) ——— */
  .cht-abrir-layout:not(.cht-intake-layout) { padding-bottom: calc(80px + var(--cht-dock-b)); }
  .cht-abrir-form > .cht-form-actions {
    position: fixed; left: 0; right: 0; z-index: 90;
    bottom: var(--cht-dock-b);
    margin: 0; padding: 10px 14px calc(10px + var(--cht-safe-b));
    border-top: 1px solid var(--cht-glass-line, var(--cht-line-2));
    background: var(--cht-glass, rgba(247, 249, 253, .92));
    -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
    box-shadow: 0 -8px 24px rgba(16, 26, 45, .08);
    gap: 10px;
  }
  .cht-abrir-form > .cht-form-actions .cht-req-hint,
  .cht-abrir-form > .cht-form-actions .cht-actions-spacer { display: none; }
  .cht-abrir-form > .cht-form-actions .cht-btn { min-height: 50px; font-size: 15px; }
  .cht-abrir-form > .cht-form-actions .cht-btn--primary { flex: 1 1 auto; }
  .cht-abrir-form > .cht-form-actions .cht-btn--ghost { flex: 0 0 auto; padding-left: 16px; padding-right: 16px; }

  /* — CAMPOS 16px (mata o auto-zoom do iOS ao focar) ————————————————————— */
  .cht-input, .cht-textarea, .cht-abrir-composer-input, .cht-catpicker-trigger { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE-NATIVA · SOLICITANTE (apêndice 2026-07-07 — última-vence)
   Detalhe/chat · Lista · KB · CSAT elevados ao padrão mobile-nativo do "Abrir
   chamado". Tudo escopado em .cht-detail/.cht-lista/.cht-kb/.cht-csat (NÃO vaza
   pro técnico .cht-tec). Elementos novos são display:none por padrão (inertes no
   desktop) e só acendem em ≤560 / (pointer:coarse). Nenhuma regra-base do desktop
   1024–1440 é alterada.
   ══════════════════════════════════════════════════════════════════════════ */

/* Elementos só-mobile: invisíveis (inertes) no desktop. */
.cht-dstrip-wrap,
.cht-detail-sheethd,
.cht-newmsg,
.cht-when-rel { display: none; }
/* Corpo do sheet "Detalhes": transparente no desktop → os .cht-asec continuam
   sendo filhos diretos do aside (layout do desktop 100% preservado). */
.cht-detail-sheetbd { display: contents; }

@media (max-width: 560px) {
  /* ═══ B · DETALHE = CHAT NATIVO ═════════════════════════════════════════ */
  /* Coluna flex preenchendo a área central; a CONVERSA é o único scroller. */
  #suporteTab [data-suporte-pane="central"] .cht-content > .cht-detail { flex: 1 1 auto; min-height: 0; }
  .cht-detail { display: flex; flex-direction: column; min-height: 0; }
  .cht-detail-main { flex: 1 1 auto; min-height: 0; border-right: 0; }

  /* Cabeçalho compacto: a conversa ganha o máximo de tela. */
  .cht-crumb, .cht-thead, .cht-detail-main > [data-csat-banner], .cht-dstrip-wrap { flex: none; }
  .cht-thead { padding-top: 12px; padding-bottom: 11px; }
  .cht-thead h2 { font-size: 17px; margin-top: 7px; }
  .cht-tmeta { margin-top: 9px; gap: 6px 12px; }
  /* A barra "Conversa" some no telefone: a faixa Detalhes já dá o contexto. */
  .cht-detail-main > .cht-chat-hd { display: none; }

  /* Faixa fina sticky "Detalhes": sinais do chamado + atalho p/ o bottom-sheet. */
  .cht-dstrip-wrap { display: block; }
  .cht-dstrip {
    width: 100%; min-height: 0;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 15px;
    border: 0; border-top: 1px solid var(--cht-line); border-bottom: 1px solid var(--cht-line);
    background: var(--cht-surface-2);
    cursor: pointer; text-align: left;
  }
  .cht-dstrip:hover { background: var(--cht-surface-3); color: inherit; }
  .cht-dstrip:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--cht-accent-line); }
  .cht-dstrip-sig { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; flex-wrap: wrap; }
  .cht-dstrip-cta {
    flex: none; display: inline-flex; align-items: center; gap: 3px;
    font: 700 12px var(--cht-fu); color: var(--cht-accent-ink);
  }
  .cht-dstrip-cta svg { width: 15px; height: 15px; }

  /* A CONVERSA: único scroller (o JS rola [data-chat-timeline], não a página).
     padding-bottom generoso p/ a última bolha subir acima do composer FIXO. */
  .cht-thread {
    flex: 1 1 auto; min-height: 0; max-height: none;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding-top: 14px;
    padding-bottom: calc(100px + var(--cht-dock-b));
  }

  /* Composer FIXO no rodapé, acima da nav do portal. O card do Suporte é mais
     alto que a viewport (min-height:100dvh sob header sticky → a página rola);
     fixar garante que o campo NUNCA suma atrás da nav — padrão provado no "Abrir
     chamado". Escopado em .cht-detail (não vaza p/ o composer do técnico). */
  .cht-detail .cht-composer {
    position: fixed; left: 0; right: 0; bottom: var(--cht-dock-b); z-index: 90;
    margin: 0;
    border-top: 1px solid var(--cht-glass-line, var(--cht-line-2));
    background: var(--cht-glass, rgba(247, 249, 253, .92));
    -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
    box-shadow: 0 -8px 24px rgba(16, 26, 45, .08);
    padding: 10px 15px calc(10px + var(--cht-safe-b));
  }
  .cht-detail .cht-composer-field textarea { font-size: 16px; }
  /* Estado read-only (fechado) também docado no rodapé. */
  .cht-detail .cht-composer-fechado {
    position: fixed; left: 0; right: 0; bottom: var(--cht-dock-b); z-index: 90;
    margin: 0; border-radius: 0; text-align: center;
    padding: 12px 15px calc(12px + var(--cht-safe-b));
    background: var(--cht-glass, rgba(247, 249, 253, .92));
    -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));
  }
  /* Anexos (docs) no telefone vivem no sheet "Detalhes" (o JS os renderiza lá);
     qualquer resquício no main some do fluxo do chat. */
  .cht-detail-main > .cht-anexos { display: none; }

  /* FAB "↓ novas mensagens" flutua acima do composer, ancorado à viewport. */
  .cht-newmsg {
    display: inline-flex; align-items: center; gap: 6px;
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--cht-dock-b) + 74px); z-index: 94;
    min-height: 0; padding: 8px 15px;
    border: 0; border-radius: 999px;
    background: var(--cht-accent); color: #fff;
    background-image: var(--cht-grad-accent-soft);
    font: 700 12.5px var(--cht-fu);
    box-shadow: 0 8px 22px rgba(37, 69, 99, .34);
    cursor: pointer;
  }
  .cht-newmsg[hidden] { display: none; }
  .cht-newmsg:hover { background: var(--cht-accent-ink); color: #fff; }
  .cht-newmsg svg { width: 15px; height: 15px; flex: none; }

  /* ASIDE → BOTTOM-SHEET "Detalhes" (retrofit; padrão provado no abrir). */
  .cht-detail-aside {
    position: fixed; z-index: 10041;
    left: 0; right: 0; bottom: 0; top: auto;
    width: auto; max-width: none; max-height: 84dvh;
    display: flex; flex-direction: column;
    background: var(--cht-surface);
    border: 0; border-top: 1px solid var(--cht-line-2);
    border-radius: 22px 22px 0 0;
    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) var(--cht-ease-out);
    will-change: transform;
    overflow: hidden;
  }
  .cht-detail-aside.is-open { transform: translateY(0); }
  .cht-detail-aside:not(.is-open) { pointer-events: none; }
  .cht-detail-sheethd { display: flex; flex-direction: column; flex: none; }
  .cht-detail-sheethd-bar { display: flex; align-items: center; gap: 10px; padding: 2px 14px 10px; }
  .cht-detail-sheethd-bar .t {
    flex: 1; min-width: 0;
    font: 800 15.5px var(--cht-fd); letter-spacing: -.01em; color: var(--cht-ink);
  }
  .cht-detail-sheetbd {
    display: block; flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding-bottom: calc(14px + var(--cht-safe-b));
  }

  /* ═══ A · LISTA "MEUS CHAMADOS" ═════════════════════════════════════════ */
  /* .cht-lista vira o scroller (pull-to-refresh + FAB) e limpa a nav atrás. */
  #suporteTab [data-suporte-pane="central"] .cht-lista {
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    position: relative;
    padding-bottom: calc(48px + var(--cht-dock-b));
  }
  /* KPIs decorativos saem da dobra; os chips com contador viram o filtro herói. */
  .cht-lista .cht-kpis-row { display: none; }
  /* Busca em linha própria (largura cheia), acima dos chips. */
  .cht-lista .cht-toolbar { flex-wrap: wrap; padding-top: 10px; }
  .cht-lista .cht-toolbar .cht-search {
    order: -1; width: 100%; max-width: none; margin-left: 0; margin-bottom: 9px;
  }
  .cht-lista .cht-toolbar .cht-search input { font-size: 16px; }
  .cht-lista .cht-chips { width: 100%; gap: 8px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent); }
  .cht-lista .cht-chip { min-height: 40px; }
  /* Cards touch-first: faixa de status colorida SEMPRE visível + relativo. */
  .cht-lista .cht-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px; padding: 15px 16px 15px 19px; align-items: center;
  }
  .cht-lista .cht-row > .cht-dot { display: none; }
  .cht-lista .cht-row::before { transform: scaleY(1); width: 4px; background: var(--cht-line-3); }
  .cht-lista .cht-row[data-status="novo"]::before { background: var(--cht-novo); }
  .cht-lista .cht-row[data-status="em_atendimento"]::before { background: var(--cht-atend); }
  .cht-lista .cht-row[data-status="pendente"]::before { background: var(--cht-pend); }
  .cht-lista .cht-row[data-status="solucionado"]::before { background: var(--cht-soluc); }
  .cht-lista .cht-row[data-status="fechado"]::before { background: var(--cht-fech); }
  .cht-lista .cht-row .ttl { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cht-lista .cht-row .trail { grid-column: 1; justify-self: start; margin-top: 6px; flex-wrap: wrap; gap: 8px 10px; }
  /* enriquecimento no card mobile: quem cuida + prazo empilhados, compactos */
  .cht-lista .cht-row .cht-col-owner,
  .cht-lista .cht-row .cht-col-status { grid-column: 1; justify-self: start; margin-top: 6px; }
  .cht-when-rel {
    display: inline-flex; align-items: center;
    font: 500 11.5px var(--cht-fm); color: var(--cht-ink-3);
    font-variant-numeric: tabular-nums;
  }

  /* ═══ D · BASE DE CONHECIMENTO ══════════════════════════════════════════ */
  .cht-kb { padding-bottom: calc(20px + var(--cht-dock-b)); }
  .cht-kb-hero { padding: 16px 15px 6px; }
  .cht-kb-hero h2 { font-size: 20px; }
  .cht-kb-hero .cht-kb-search { width: 100%; max-width: none; }
  .cht-kb-hero .cht-kb-search input { font-size: 16px; }
  .cht-kb-cats { margin-top: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .cht-kb-cats::-webkit-scrollbar { display: none; }
  .cht-kb-row { min-height: 64px; }
  /* Back sticky no topo do artigo (fácil de achar com o polegar). */
  .cht-kb .cht-crumb {
    position: sticky; top: 0; z-index: 4;
    background: var(--cht-glass);
    -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  }
  .cht-kb-doc-body { font-size: 15px; line-height: 1.7; }

  /* ═══ C · CSAT ══════════════════════════════════════════════════════════ */
  .cht-csat-card { margin: 12px 12px 24px; padding: 20px 16px calc(18px + var(--cht-dock-b)); }
  .cht-csat-faces { gap: 6px; }
  .cht-csat-face {
    padding: 12px 4px 10px; border-radius: 14px;
    transition: transform var(--cht-dur-2) var(--cht-ease-spring),
                background var(--cht-dur) var(--cht-ease),
                border-color var(--cht-dur) var(--cht-ease),
                color var(--cht-dur) var(--cht-ease);
  }
  .cht-csat-face .ic svg { width: 40px; height: 40px; }
  .cht-csat-face .lb { font-size: 10px; }
  .cht-csat-face.is-on { transform: scale(1.08); }
  /* Auto-revelar comentário + enviar ao escolher a nota (sensação de conversa). */
  .cht-csat-comment, .cht-csat-actions {
    overflow: hidden; opacity: 1; max-height: 360px;
    transition: opacity var(--cht-dur-2) var(--cht-ease), max-height var(--cht-dur-3) var(--cht-ease);
  }
  .cht-csat-card:not(.is-picked) .cht-csat-comment,
  .cht-csat-card:not(.is-picked) .cht-csat-actions {
    opacity: 0; max-height: 0; margin: 0; pointer-events: none;
  }
  .cht-csat-actions .cht-btn--primary { width: 100%; min-width: 0; min-height: 52px; }
}

/* Alvos de toque ≥44px nos controles novos (só ponteiro grosso). */
@media (hover: none), (pointer: coarse) {
  .cht-dstrip { min-height: 48px; }
  .cht-detail-sheethd .cht-sheet-close { width: 40px; height: 40px; }
  .cht-lista .cht-chip, .cht-kb-cats .cht-chip { min-height: 44px; }
  .cht-newmsg { min-height: 40px; }
}

/* ── AJUSTES DE FEEDBACK (2026-07-07) — busca inchada + CTA sobreposto no header ── */
@media (max-width: 560px) {
  /* Busca não pode inchar: o input herda o `input{min-height:44px;padding:10px 12px}`
     global de toque → o pill virava ~58px. Zera no input; o pill dá a altura. */
  .cht-lista .cht-toolbar .cht-search { padding: 11px 14px; }
  .cht-lista .cht-toolbar .cht-search input { min-height: 0; padding: 0; }

  /* Header no celular: o CTA "Abrir chamado" vai para uma LINHA PRÓPRIA (largura
     cheia) ABAIXO das abas — não cobre mais o host-nav (Central | Atendimento) e
     fica sempre visível/clicável. (O FAB não aparecia em todo aparelho.) */
  .cht-header { flex-wrap: wrap; }
  .cht-header .cht-titles--nav { flex: 1 1 100%; }
  .cht-header .cht-btn--primary[data-chamados-nav="abrir"] { order: 5; width: 100%; justify-content: center; }
  /* FAB redundante com o CTA do header → oculto (evita dois botões da mesma ação). */
  .cht-lista .cht-fab { display: none; }
  /* Filtros RECOLHÍVEIS: os chips de status vivem atrás do botão "Filtros" (mini-menu),
     escondidos por padrão — sem fila de chips ocupando várias linhas. Abrem ao tocar. */
  .cht-lista .cht-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .cht-lista .cht-search { order: 0; }
  .cht-lista .cht-filterbtn { display: flex; order: 1; }
  .cht-lista .cht-chips { order: 2; display: none; flex-wrap: wrap; overflow: visible; }
  .cht-lista .cht-chips.is-open { display: flex; }
}

/* Reduced-motion: os elementos novos vivem em .cht (o guard scoped já os cobre),
   mas reforçamos aqui — sem motion nos sheets/FAB/pop de carinha. */
@media (prefers-reduced-motion: reduce) {
  .cht-detail-aside, .cht-newmsg, .cht-csat-face,
  .cht-csat-comment, .cht-csat-actions { transition: none; }
  .cht-csat-face.is-on { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   6b · ABRIR CHAMADO — INTAKE IA (campo único inteligente) · 2026-07
   Campo herói de texto livre → deflexão de KB → desdobramento em chips
   editáveis (tipo · assunto · time · urgência) → follow-up MD3 → enviar.
   Reaproveita .cht-btn / .cht-input / .cht-select / .cht-prio-seg / .cht-kb-sg-*
   / anexos .cht-abrir-thumb da base + seções acima. Apêndice ao fim do arquivo
   (seletores namespaced; nada sobrescreve regras anteriores por ordem).
   ════════════════════════════════════════════════════════════════════════════ */
.cht-intake-card {
  border: 1px solid var(--cht-line);
  border-radius: var(--cht-r-lg);
  background: var(--cht-surface);
  box-shadow: var(--cht-sh-1);
  padding: 24px 24px 20px;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.cht-intake-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--cht-grad-accent);
  opacity: .9;
}
.cht-intake-kicker {
  display: flex; align-items: center; gap: 10px;
  font: 700 11.5px var(--cht-fu);
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--cht-accent-ink);
}
.cht-intake-title {
  margin: 12px 0 4px;
  font: 800 22px/1.15 var(--cht-fd); letter-spacing: -.02em;
  color: var(--cht-ink);
}
.cht-intake-sub { margin: 0 0 16px; font-size: 13.5px; color: var(--cht-ink-3); }

/* ── CAMPO HERÓI ── */
.cht-hero {
  position: relative;
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r-lg);
  background: var(--cht-surface);
  transition: border-color var(--cht-dur) var(--cht-ease),
              box-shadow var(--cht-dur) var(--cht-ease);
  min-width: 0;
}
.cht-hero:focus-within {
  border-color: var(--cht-accent);
  box-shadow: 0 0 0 3px var(--cht-accent-weak);
}
.cht-hero.is-drag { border-color: var(--cht-accent); background: var(--cht-accent-weak); }
.cht-hero-imgs { padding: 12px 12px 0; }
.cht-hero-imgs .cht-abrir-thumb { width: 88px; flex: none; cursor: zoom-in; }
.cht-hero-imgs .cht-abrir-thumb img { height: 62px; }
.cht-hero-input {
  display: block; width: 100%;
  border: 0; outline: 0; box-shadow: none; background: transparent; resize: vertical;
  min-height: 108px;
  padding: 16px 16px 8px;
  font: 400 16px/1.55 var(--cht-fu);
  color: var(--cht-ink);
}
/* O foco vive SÓ na caixa .cht-hero (:focus-within). Sem isto, a textarea
   ganha anel/borda/outline próprios no foco — a `textarea:focus` do
   components.css (box-shadow) e, sobretudo, o outline de acessibilidade de
   chamados-base.css (`.cht :is(...textarea...):focus-visible { outline: 2px }`,
   especificidade 0,3,0). Esse outline desenha uma linha cheia-largura logo
   abaixo do anexo: é a "borda dupla" e o nome do arquivo flutuando acima dela.
   Prefixamos `.cht ` para empatar em (0,3,0) e vencer por ordem (chamados.css
   carrega depois de chamados-base.css). O anel externo da .cht-hero segue
   sinalizando o foco por teclado, então a acessibilidade continua ok. */
.cht .cht-hero-input:focus,
.cht .cht-hero-input:focus-visible { border-color: transparent; box-shadow: none; outline: none; }
.cht-hero-input::placeholder { color: var(--cht-ink-5); opacity: 1; }
.cht-hero-tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 4px 12px 12px;
}
.cht-hero-attach {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 0; padding: 7px 13px;
  border: 1px solid var(--cht-line-2); border-radius: var(--cht-r-pill);
  background: var(--cht-surface); color: var(--cht-ink-2);
  font: 600 12.5px var(--cht-fu); cursor: pointer;
  transition: color var(--cht-dur), border-color var(--cht-dur), background var(--cht-dur);
}
.cht-hero-attach svg { width: 15px; height: 15px; flex: none; }
.cht-hero-attach:hover { color: var(--cht-accent-ink); border-color: var(--cht-accent-line); background: var(--cht-accent-weak); }
.cht-hero-attach:disabled { opacity: .6; cursor: default; }
/* ── exemplos inline (logo abaixo do herói; somem quando o usuário escreve) ── */
.cht-hero-examples { margin: 15px 0 2px; }
.cht-hero-examples[hidden] { display: none; }
.cht-hero-examples-lbl {
  display: block; margin-bottom: 9px;
  font: 500 12px var(--cht-fu); color: var(--cht-ink-3);
}
.cht-hero-examples-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cht-ex {
  min-height: 0; padding: 6px 13px;
  border: 1px dashed var(--cht-line-2); border-radius: var(--cht-r-pill);
  background: transparent; color: var(--cht-accent-ink);
  font: 600 12.5px var(--cht-fu); cursor: pointer;
  transition: background var(--cht-dur), border-color var(--cht-dur), color var(--cht-dur);
}
.cht-ex:hover { background: var(--cht-accent-weak); border-style: solid; border-color: var(--cht-accent-line); }
.cht-ex:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cht-accent-weak); }

/* ── DESDOBRAMENTO (chips + confiança + follow-up) ── */
.cht-unfold {
  margin-top: 18px;
  border-top: 1px solid var(--cht-line);
  padding-top: 16px;
  animation: chtUnfold var(--cht-dur-3) var(--cht-ease-out);
}
.cht-unfold.hidden { display: none; }
@keyframes chtUnfold { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cht-unfold-hd { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 13px; }
.cht-ai-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--cht-accent-weak); color: var(--cht-accent-ink);
  font: 700 11.5px var(--cht-fu); padding: 4px 11px; border-radius: var(--cht-r-pill);
}
.cht-ai-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--cht-accent-glow); animation: chtPulse 1.6s infinite; }
@keyframes chtPulse { 0%, 100% { opacity: .4; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.cht-unfold-hint { font-size: 12.5px; color: var(--cht-ink-3); }

.cht-ai-chips { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.cht-ai-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 0; padding: 8px 10px 8px 14px;
  border: 1.5px solid var(--cht-accent-line); border-radius: var(--cht-r-pill);
  background: var(--cht-surface); cursor: pointer; text-align: left;
  font: 600 13.5px var(--cht-fu); color: var(--cht-ink);
  transition: border-color var(--cht-dur), box-shadow var(--cht-dur), background var(--cht-dur);
}
.cht-ai-chip:hover { border-color: var(--cht-accent); box-shadow: var(--cht-sh-1); }
.cht-ai-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cht-accent-weak); }
.cht-ai-chip .lbl { color: var(--cht-ink-4); font-weight: 500; font-size: 11.5px; }
.cht-ai-chip .val { color: var(--cht-accent-ink); }
.cht-ai-chip .ai { display: inline-grid; place-items: center; color: var(--cht-accent-glow); }
.cht-ai-chip .ai svg { width: 12px; height: 12px; }
.cht-ai-chip .chk {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--cht-ok-weak); color: var(--cht-ok);
}
.cht-ai-chip .chk svg { width: 10px; height: 10px; }
.cht-ai-chip .ed {
  font: 700 10px var(--cht-fu); text-transform: uppercase; letter-spacing: .03em;
  color: var(--cht-ink-4); background: var(--cht-surface-3);
  padding: 2px 6px; border-radius: var(--cht-r-pill);
}
.cht-ai-chip .edit-ic {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--cht-surface-3); color: var(--cht-ink-3);
  transition: background var(--cht-dur), color var(--cht-dur);
}
.cht-ai-chip .edit-ic svg { width: 13px; height: 13px; }
.cht-ai-chip:hover .edit-ic { background: var(--cht-accent); color: #fff; }
.cht-ai-chip[aria-expanded="true"] { border-color: var(--cht-accent); background: var(--cht-accent-weak); }
.cht-ai-chip[aria-expanded="true"] .edit-ic { background: var(--cht-accent); color: #fff; }
.cht-ai-chip.is-empty { border-style: dashed; border-color: var(--cht-warn-line); }
.cht-ai-chip.is-empty .val { color: var(--cht-warn); }
.cht-ai-chip.is-high { border-color: var(--cht-ok-line); }

.cht-ai-conf { margin: 12px 0 0; font-size: 12.5px; color: var(--cht-ink-3); }
.cht-ai-conf.is-high {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--cht-ok); font-weight: 600;
}
.cht-ai-conf.is-high .ic {
  display: inline-grid; place-items: center; width: 16px; height: 16px;
  border-radius: 50%; background: var(--cht-ok-weak);
}
.cht-ai-conf.is-high .ic svg { width: 10px; height: 10px; }

/* follow-up MD3 (nunca chat) */
.cht-followups { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.cht-followup {
  border: 1px solid var(--cht-line-2); border-radius: var(--cht-r);
  background: var(--cht-surface-2); padding: 14px 15px;
}
.cht-followup-q { display: block; font: 600 14px var(--cht-fd); color: var(--cht-ink); margin-bottom: 3px; }
.cht-followup-why { margin: 0 0 10px; font-size: 12px; color: var(--cht-ink-3); }
.cht-followup .cht-input { background: var(--cht-surface); }

.cht-intake-actions { margin-top: 20px; }

@media (max-width: 560px) {
  .cht-intake-card { padding: 18px 16px 16px; }
  .cht-intake-title { font-size: 20px; }
  .cht-hero-input { font-size: 15px; }
  .cht-ai-chips { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .cht-ai-pulse { animation: none; }
  .cht-unfold { animation: none; }
}


/* ════════════════════════════════════════════════════════════════════════════
   6c · ABRIR CHAMADO — INTAKE IA: REDIMENSIONAMENTO + HIERARQUIA (2026-07)
   Refina a tela do SOLICITANTE: campo herói protagonista + resposta da IA na
   coluna principal; aside contextual mais leve (Como funciona/exemplos → KB).
   + popover ancorado de edição de chip + modal padrão para artigo de KB.
   Apêndice ao fim do arquivo: mesma especificidade, ordem posterior → vence as
   regras equivalentes acima sem !important.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── UM cartão coeso "você | Central", CENTRADO na tela — mata o vazio lateral e
   o box solto flutuando: as duas colunas são painéis do MESMO cartão, com um
   divisor entre elas. Ocupa a LARGURA TOTAL disponível — sem cap nem centralização
   (aproveita a tela toda, sem desperdício lateral). ── */
.cht-intake-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  grid-template-areas:
    "form    side"
    "actions side";
  grid-template-rows: auto auto;
  gap: 0;
  align-items: start;
  align-content: start;
  width: 100%;                     /* largura total — sem desperdício lateral */
  flex: 0 0 auto;
  min-height: 0;
  border: 1px solid var(--cht-line);
  border-radius: 20px;
  background: var(--cht-surface);
  box-shadow: var(--cht-sh-2);
  /* overflow visible: o overflow:hidden anulava o position:sticky da coluna direita.
     Os cantos são preservados arredondando o bg do aside (regra abaixo). */
  overflow: visible;
}
/* aside acompanha os cantos direitos arredondados do card (evita "nariz" quadrado). */
.cht-intake-layout > .cht-copilot { border-radius: 0 19px 19px 0; }
/* Diagnóstico + KB agora vivem NA coluna esquerda, abaixo do campo (coluna única).
   Espaçamento p/ separá-los do campo herói e entre si. */
.cht-intake-card .cht-unfold--inline { margin-top: 18px; }

/* ── "Chamado perfeito" — checklist VIVA de completude (esquerda, sob o campo).
   Acende ✓ conforme a pessoa escreve; misto = crítico trava (tag "obrigatório"). ── */
.cht-perfect {
  margin-top: 16px;
  border: 1px solid var(--cht-line);
  border-radius: var(--cht-r-lg);
  background: var(--cht-surface-2);
  padding: 13px 15px 14px;
  --cht-perfect-pct: 0%;
}
.cht-perfect.hidden { display: none; }
.cht-perfect-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cht-perfect-ttl {
  display: inline-flex; align-items: center; gap: 7px;
  font: 800 12.5px var(--cht-fd); color: var(--cht-ink);
}
.cht-perfect-ttl svg { width: 15px; height: 15px; color: var(--cht-accent); }
.cht-perfect-prog { font: 700 11.5px var(--cht-fu); color: var(--cht-ink-3); }
.cht-perfect-bar {
  margin: 10px 0 12px; height: 4px; border-radius: 999px;
  background: var(--cht-line); overflow: hidden;
}
.cht-perfect-bar > span {
  display: block; height: 100%; width: var(--cht-perfect-pct, 0%);
  background: var(--cht-accent); border-radius: 999px;
  transition: width .35s var(--cht-ease-out);
}
.cht-perfect.is-complete .cht-perfect-bar > span { background: #1c7f4d; }
.cht-perfect-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cht-perfect-item { display: flex; align-items: flex-start; gap: 10px; }
.cht-perfect-ic {
  flex: none; width: 18px; height: 18px; margin-top: 1px;
  border-radius: 50%; border: 1.5px solid var(--cht-line-2);
  display: grid; place-items: center; color: #fff; background: transparent;
  transition: background .2s, border-color .2s;
}
.cht-perfect-ic svg { width: 11px; height: 11px; }
.cht-perfect-item.is-done .cht-perfect-ic { background: #1c7f4d; border-color: #1c7f4d; }
.cht-perfect-tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cht-perfect-tx .l { font: 600 12.5px var(--cht-fd); color: var(--cht-ink-2); }
.cht-perfect-item.is-done .cht-perfect-tx .l { color: var(--cht-ink); }
.cht-perfect-tx .h { font-size: 11px; color: var(--cht-ink-4); line-height: 1.35; }
.cht-perfect-req {
  margin-left: auto; flex: none; align-self: center;
  font: 700 10px var(--cht-fu); text-transform: uppercase; letter-spacing: .04em;
  color: var(--cht-warn); background: var(--cht-warn-weak);
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
/* "recomendado" — sugestão forte que NÃO trava (mais suave que "obrigatório"). */
.cht-perfect-rec {
  margin-left: auto; flex: none; align-self: center;
  font: 700 10px var(--cht-fu); text-transform: uppercase; letter-spacing: .04em;
  color: var(--cht-accent-ink); background: var(--cht-accent-weak);
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.cht-perfect.is-nudge {
  border-color: var(--cht-warn-line);
  box-shadow: 0 0 0 3px var(--cht-warn-weak);
  animation: chtNudge .4s ease;
}
@keyframes chtNudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .cht-perfect-bar > span { transition: none; }
  .cht-perfect.is-nudge { animation: none; }
}
.cht-intake-card .cht-aside-kb--inline { margin-top: 14px; }
.cht-intake-card .cht-aside-kb--inline:not(.hidden) + .cht-form-error { margin-top: 14px; }

/* painel ESQUERDO (você): sem cartão próprio — é um painel do cartão maior */
.cht-intake-form {
  grid-area: form;
  display: flex; flex-direction: column;
  align-self: start;
  width: 100%; min-width: 0;
}
.cht-intake-card {
  flex: 0 0 auto;
  border: 0; box-shadow: none; border-radius: 0; background: transparent;
  padding: 22px 24px 18px;
  display: flex; flex-direction: column;
}

/* campo herói: protagonista, altura confortável (nem caixinha, nem vazião) */
.cht-intake-title { font-size: 24px; margin: 8px 0 5px; }
.cht-intake-sub { margin: 0 0 16px; }
/* O campo tem sua própria altura: conteúdo auxiliar nunca deve fazê-lo crescer. */
.cht-hero { border-radius: var(--cht-r-lg); flex: 0 0 auto; display: flex; flex-direction: column; min-height: 0; }
.cht-hero-imgs { flex: 0 0 auto; }
.cht-hero-input {
  flex: 0 0 auto;
  height: clamp(150px, 20dvh, 208px);
  min-height: 150px;
  max-height: 280px;
  padding: 16px 16px 10px;
  font-size: 16px;
  resize: vertical;
}
.cht-hero-tools { flex: 0 0 auto; }
.cht-hero-help {
  margin-left: auto;
  font-size: 11.5px; line-height: 1.35;
  color: var(--cht-ink-3);
}

/* Abertura é uma tarefa compacta; não força altura artificial do viewport. */
.cht-form-wrap {
  display: flex; flex-direction: column; justify-content: flex-start;
  min-height: 0;
}
#suporteTab [data-suporte-pane="central"] .cht-content > .cht-form-wrap {
  flex: 1 1 auto; min-height: 0;
}

/* ═══════ CO-PILOTO (direita): assimetria "você escreve × Central pensa" ═══════
   3 estados: REPOUSO (prevê os campos) → LENDO (.is-thinking) → ENTENDIDO
   (os chips .cht-unfold + a KB assumem o lugar do repouso). */
/* painel DIREITO (Central): divisor + fundo levemente distinto do painel esquerdo.
   Herda display:flex column de .cht-abrir-side. */
.cht-copilot {
  grid-area: side;
  display: flex; flex-direction: column;
  gap: 16px; position: static;
  justify-content: flex-start;      /* conteúdo ancorado no topo do painel */
  align-self: stretch;
  max-height: none;
  overflow: visible;
  border-left: 1px solid var(--cht-line);
  background:
    radial-gradient(130% 60% at 100% 0%, var(--cht-accent-weak), transparent 55%),
    var(--cht-surface-2);
  padding: 26px 24px;
}
/* Conteúdo da direita FIXO (sticky) — igual à ficha. O aside ocupa a altura toda
   (align-self:stretch) e o wrapper interno gruda no topo ao rolar. O overflow do
   #suporteTab.card é destravado (regra acima) pra o sticky funcionar. */
.cht-copilot-sticky { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
/* "Soluções que podem ajudar" agora abaixo do texto (coluna esquerda) — dá respiro. */
.cht-intake-kb { margin-top: 14px; }

/* Rodapé único: no DOM vem depois da revisão, preservando ordem de leitura/teclado. */
.cht-intake-actions {
  grid-area: actions;
  align-self: start;
  margin: 0;
  padding: 16px 24px 18px;
  background: var(--cht-surface);
}

/* REPOUSO — achatado (sem cartão dentro de cartão) */
.cht-copilot-rest[hidden] { display: none; }
.cht-copilot-head { display: flex; align-items: center; gap: 10px; }
.cht-copilot-orb {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--cht-accent-glow), var(--cht-accent) 72%);
  box-shadow: 0 0 0 4px var(--cht-accent-weak);
}
.cht-copilot-title { font: 800 13.5px var(--cht-fd); color: var(--cht-ink); }
.cht-copilot-desc { margin: 13px 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--cht-ink-3); }
.cht-copilot-preview { display: flex; flex-wrap: wrap; gap: 8px; }
.cht-copilot-pill {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: var(--cht-r-pill);
  border: 1px dashed var(--cht-line-2); background: var(--cht-surface);
}
.cht-copilot-pill .k { font: 600 12px var(--cht-fu); color: var(--cht-ink-4); }

/* LENDO — o orb pulsa e as pills "respiram" (o momento vivo, dentro do M3) */
.cht-copilot-rest.is-thinking .cht-copilot-orb { animation: chtOrb 1.5s infinite ease-in-out; }
.cht-copilot-rest.is-thinking .cht-copilot-title { color: var(--cht-accent-ink); }
.cht-copilot-rest.is-thinking .cht-copilot-pill { animation: chtPreview 1.4s infinite ease-in-out; }
.cht-copilot-rest.is-thinking .cht-copilot-pill:nth-child(2) { animation-delay: .18s; }
.cht-copilot-rest.is-thinking .cht-copilot-pill:nth-child(3) { animation-delay: .36s; }
@keyframes chtOrb {
  0%, 100% { box-shadow: 0 0 0 4px var(--cht-accent-weak); transform: scale(1); }
  50% { box-shadow: 0 0 0 8px var(--cht-accent-weak); transform: scale(1.08); }
}
@keyframes chtPreview {
  0%, 100% { opacity: .55; border-color: var(--cht-line-2); }
  50% { opacity: 1; border-color: var(--cht-accent-line); }
}

/* ENTENDIDO — chips/KB moram no aside; sem divisória de topo (é o 1º conteúdo) */
.cht-copilot .cht-unfold { margin-top: 0; border-top: 0; padding-top: 0; }
.cht-copilot .cht-unfold + .cht-aside-kb { margin-top: 16px; }

/* "Depois que você enviar" — bloco estático no REPOUSO: dá propósito ao espaço
   da direita antes de classificar (reusa os estilos de lista de .cht-copilot-next). */
.cht-copilot-flow { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--cht-line); }

/* "O que acontece agora" — enche o painel com info útil (fila/prioridade/acompanhar) */
.cht-copilot-next { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--cht-line); }
.cht-copilot-next:empty { display: none; }
.cht-copilot-next-hd {
  display: block; margin-bottom: 11px;
  font: 700 11px var(--cht-fu); text-transform: uppercase; letter-spacing: .06em;
  color: var(--cht-ink-3);
}
.cht-copilot-next-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.cht-copilot-next-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.4; color: var(--cht-ink-2); }
.cht-copilot-next-list li svg { width: 16px; height: 16px; flex: none; color: var(--cht-accent-ink); margin-top: 1px; }
.cht-copilot-next-list b { font-weight: 700; color: var(--cht-ink); }

/* ── KB sugerida no aside (deflexão) — abre no MODAL ── */
.cht-aside-kb {
  border: 1px solid var(--cht-warn-line);
  border-radius: var(--cht-r-lg);
  background: linear-gradient(180deg, var(--cht-warn-weak), var(--cht-surface) 130%);
  padding: 15px 15px 13px;
  animation: chtUnfold var(--cht-dur-2) var(--cht-ease-out);
}
.cht-aside-kb.hidden { display: none; }
.cht-aside-kb-hd {
  display: flex; align-items: center; gap: 8px;
  font: 800 13px var(--cht-fd); color: var(--cht-ink);
}
.cht-aside-kb-hd .ic { display: inline-grid; place-items: center; color: var(--cht-warn); flex: none; }
.cht-aside-kb-hd .ic svg { width: 17px; height: 17px; }
.cht-aside-kb-sub { margin: 4px 0 11px; font-size: 12px; color: var(--cht-ink-3); }
.cht-aside-kb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cht-aside-kb-btn {
  width: 100%; min-height: 0; text-align: left;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--cht-line-2); border-radius: var(--cht-r);
  background: var(--cht-surface); cursor: pointer;
  transition: border-color var(--cht-dur), box-shadow var(--cht-dur), transform var(--cht-dur);
}
.cht-aside-kb-btn:hover { border-color: var(--cht-accent-line); box-shadow: var(--cht-sh-1); transform: translateY(-1px); }
.cht-aside-kb-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cht-accent-weak); }
.cht-aside-kb-btn .ic {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--cht-accent-weak); color: var(--cht-accent-ink);
}
.cht-aside-kb-btn .ic svg { width: 16px; height: 16px; }
.cht-aside-kb-btn .tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cht-aside-kb-btn .tt {
  font: 700 13px var(--cht-fd); color: var(--cht-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cht-aside-kb-btn .rs {
  font-size: 11.5px; color: var(--cht-ink-3); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cht-aside-kb-btn .go { flex: none; color: var(--cht-ink-4); display: grid; place-items: center; }
.cht-aside-kb-btn .go svg { width: 16px; height: 16px; }
.cht-aside-kb-btn:hover .go { color: var(--cht-accent-ink); }

/* ── POPOVER ancorado de edição de chip (montado em document.body) ── */
.cht-pop {
  position: fixed; z-index: 1000;
  width: 300px; max-width: calc(100vw - 16px);
  background: var(--cht-surface);
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r);
  box-shadow: var(--cht-sh-3);
  padding: 6px;
  opacity: 0; transform: translateY(-4px) scale(.98);
  transform-origin: top left;
  transition: opacity var(--cht-dur) var(--cht-ease-out), transform var(--cht-dur) var(--cht-ease-out);
}
.cht-pop.is-open { opacity: 1; transform: none; }
.cht-pop--categoria { width: 360px; }
.cht-pop-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 8px 6px;
  font: 800 12.5px var(--cht-fd); color: var(--cht-ink);
}
.cht-pop-x {
  flex: none; width: 36px; height: 36px; min-height: 36px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--cht-ink-3); cursor: pointer;
  transition: background var(--cht-dur), color var(--cht-dur);
}
.cht-pop-x svg { width: 15px; height: 15px; }
.cht-pop-x:hover { background: var(--cht-surface-2); color: var(--cht-ink); }
.cht-pop-opts { display: flex; flex-direction: column; gap: 3px; padding: 0 2px 4px; }
.cht-pop-opts--scroll { max-height: 280px; overflow-y: auto; }
.cht-pop-opt {
  width: 100%; min-height: 42px; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--cht-ink);
  transition: background var(--cht-dur), border-color var(--cht-dur);
}
.cht-pop-opt:hover { background: var(--cht-surface-2); }
.cht-pop-opt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cht-accent-weak); }
.cht-pop-opt.is-sel { background: var(--cht-accent-weak); border-color: var(--cht-accent-line); }
.cht-pop-opt-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cht-pop-opt-tx .t { font: 700 13px var(--cht-fu); color: var(--cht-ink); }
.cht-pop-opt-tx .d { font-size: 11.5px; color: var(--cht-ink-3); line-height: 1.35; }
.cht-pop-opt.is-sel .t { color: var(--cht-accent-ink); }
.cht-pop-opt-ck {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cht-accent); color: #fff;
  opacity: 0; transform: scale(.6); transition: opacity var(--cht-dur), transform var(--cht-dur);
}
.cht-pop-opt-ck svg { width: 11px; height: 11px; }
.cht-pop-opt.is-sel .cht-pop-opt-ck { opacity: 1; transform: none; }
.cht-pop-search {
  display: flex; align-items: center; gap: 8px;
  margin: 0 2px 4px; padding: 9px 11px;
  border: 1px solid var(--cht-line-2); border-radius: 9px;
  background: var(--cht-surface-2);
}
.cht-pop-search svg { width: 15px; height: 15px; color: var(--cht-ink-4); flex: none; }
.cht-pop-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: 500 13.5px var(--cht-fu); color: var(--cht-ink);
}
.cht-pop-tree { max-height: 300px; overflow-y: auto; padding: 2px; min-width: 0; }

/* ── MODAL PADRÃO para artigo de KB (opt-in via dialogClass) ── */
.cht-kb-modal .modal-content { gap: var(--space-2); }
.cht-kbm { font-family: var(--cht-fu); }
.cht-kbm-resumo {
  margin: 0 0 14px; padding: 12px 14px;
  border-left: 3px solid var(--cht-accent-line);
  border-radius: 0 var(--cht-r-sm) var(--cht-r-sm) 0;
  background: var(--cht-surface-2);
  font-size: 13.5px; color: var(--cht-ink-2); line-height: 1.5;
}
.cht-kbm-body { font-size: 14px; color: var(--cht-ink); line-height: 1.62; overflow-wrap: anywhere; }
.cht-kbm-body > *:first-child { margin-top: 0; }
.cht-kbm-body p { margin: 0 0 11px; }
.cht-kbm-body .kb-h { margin: 18px 0 7px; font: 800 15px var(--cht-fd); color: var(--cht-ink); }
.cht-kbm-body ul, .cht-kbm-body ol { margin: 0 0 11px; padding-left: 22px; }
.cht-kbm-body li { margin: 0 0 6px; }
.cht-kbm-body strong { font-weight: 700; }
.cht-kbm-body code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .9em; padding: 1px 5px; border-radius: 5px;
  background: var(--cht-surface-3); color: var(--cht-accent-ink);
}
.cht-kbm-body blockquote {
  margin: 0 0 11px; padding: 10px 14px;
  border-left: 3px solid var(--cht-warn-line);
  background: var(--cht-warn-weak); border-radius: 0 var(--cht-r-sm) var(--cht-r-sm) 0;
  color: var(--cht-ink-2);
}

/* ── responsivo: colapsa para 1 coluna; desliga sticky do aside ── */
@media (max-width: 900px) {
  .cht-intake-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "form"
      "side"
      "actions";
    grid-template-rows: auto;
    padding-bottom: 0;
  }
  /* Empilhado: descrição → revisão da Central → ações. */
  .cht-copilot {
    border-left: 0;
    border-top: 1px solid var(--cht-line);
    justify-content: flex-start;
    align-self: start;
    width: 100%;
    max-height: none;
    overflow: visible;
  }
  .cht-intake-actions {
    position: static;
    left: auto; right: auto; bottom: auto;
    z-index: auto;
    width: 100%;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: 1px solid var(--cht-line);
  }
  .cht-form-wrap { justify-content: flex-start; min-height: 0; }
}
.cht-pop-search:focus-within {
  border-color: var(--cht-accent);
  box-shadow: 0 0 0 3px var(--cht-accent-weak);
}
.cht-pop :focus-visible {
  outline: 2px solid var(--cht-accent);
  outline-offset: 2px;
}
@media (max-width: 560px) {
  .cht-intake-title { font-size: 21px; }
  .cht-intake-card { padding: 18px 16px 16px; }
  .cht-copilot { padding: 18px 16px; }
  .cht-hero-input {
    height: 144px;
    min-height: 132px;
    max-height: 220px;
    font-size: 16px;
  }
  .cht-hero-tools { align-items: flex-start; }
  .cht-hero-attach, .cht-ex { min-height: 44px; }
  .cht-hero-help { width: 100%; margin-left: 0; }
  .cht-hero-examples-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 2px 2px 7px;
    margin: 0 -2px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .cht-hero-examples-list::-webkit-scrollbar { display: none; }
  .cht-ex { flex: 0 0 auto; scroll-snap-align: start; }
  .cht-intake-actions {
    padding: 14px 16px calc(14px + var(--cht-safe-b));
  }
  .cht-intake-actions .cht-btn { min-height: 48px; font-size: 14.5px; }
  .cht-intake-actions .cht-btn--primary { flex: 1 1 auto; }
  .cht-intake-actions .cht-btn--ghost { flex: 0 0 auto; }
  .cht-pop, .cht-pop--categoria { width: calc(100vw - 16px); }
}
@media (prefers-reduced-motion: reduce) {
  .cht-pop { transition: none; }
  .cht-aside-kb { animation: none; }
  .cht-aside-kb-btn:hover { transform: none; }
  .cht-pop-opt-ck { transition: none; }
  .cht-copilot-rest.is-thinking .cht-copilot-orb,
  .cht-copilot-rest.is-thinking .cht-copilot-pill { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MEUS CHAMADOS — leitura de SOLICITANTE (não de operador). Topo = faixa ÚNICA e
   compacta: filtros de acesso rápido (chips com contagem viva que TAMBÉM filtram)
   à esquerda + busca compacta à direita. Sem hero em prosa: a aba já nomeia a tela,
   e o solicitante pensa em "o que preciso agir?" (Aguardando você) e "ainda rola ou
   acabou?". A lista abaixo agrupa (Em andamento / Encerrados) quando em "Todos".
   ════════════════════════════════════════════════════════════════════════════ */
.cht-lista-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 16px;
  /* inset 22px = alinha chips/busca com o conteúdo das linhas (dot em 22px);
     top 12px dá respiro às pílulas (estavam coladas nas abas acima). */
  padding: 12px 22px 14px; margin: 0 0 14px;
  /* mesmo motivo do toolbar do Atendimento: eleva o cabeçalho (e o popover de
     Filtros) acima da lista, escapando do contexto de empilhamento do stage-pane. */
  position: relative; z-index: 100;
  border-bottom: 1px solid var(--cht-line);
}
.cht-filters {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; min-width: 0;
}
/* "Aguardando você" = o ACIONÁVEL: realce âmbar (chama sem alarmar). Só é renderizado
   quando há algo a fazer (JS esconde no zero). Ativo → aprofunda no próprio âmbar em
   vez do accent frio dos demais chips, pra continuar lendo "atenção". */
.cht-chip--foco {
  color: var(--cht-warn); background: var(--cht-warn-weak); border-color: var(--cht-warn-line);
}
.cht-chip--foco .c { color: var(--cht-warn); }
.cht-chip--foco:hover { background: var(--cht-warn-weak); color: var(--cht-warn); }
.cht-chip--foco.on {
  background: var(--cht-warn); color: #fff; border-color: var(--cht-warn);
}
.cht-chip--foco.on .c { color: rgba(255, 255, 255, .82); }
/* Pílulas da Central com o MESMO destaque do Atendimento (.cht-savedview): ativo
   SÓLIDO (accent + texto branco) + contador em badge, no lugar do fill tonal suave.
   Exclui o --foco ("Aguardando você"), que mantém o realce âmbar próprio. */
.cht-filters .cht-chip:not(.cht-chip--foco) .c {
  background: var(--cht-surface-3); color: var(--cht-ink-4);
  border-radius: var(--cht-r-pill); padding: 1px 7px; min-width: 18px; text-align: center;
}
.cht-filters .cht-chip.on:not(.cht-chip--foco) {
  background: var(--cht-accent); color: #fff; border-color: var(--cht-accent);
}
.cht-filters .cht-chip.on:not(.cht-chip--foco) .c { background: rgba(255, 255, 255, .24); color: #fff; }
/* busca compacta no header: largura controlada, sem margin. O input zera o padding
   herdado do estilo global de <input> do portal (era ele que inflava a busca ~58px);
   a altura passa a ser só line-height + padding do contêiner. */
.cht-search--sm { padding: 7px 12px; }
.cht-search--sm input { font-size: 12.5px; padding: 0; min-height: 0; line-height: 1.3; }
/* margin-left:auto empurra a busca pro canto direito (mesma linha quando cabe; desce
   alinhada à direita quando a linha aperta). */
.cht-lista-head .cht-search { flex: 0 1 210px; margin: 0 0 0 auto; max-width: 100%; }
/* Filtros avancados: agrupa o botao junto da busca, no canto direito do header. */
.cht-lista-head .cht-fbox { margin-left: auto; }
.cht-lista-head .cht-fbox + .cht-search { margin-left: 8px; }
@media (max-width: 620px) {
  .cht-lista-head .cht-fbox { margin-left: 0; }
  .cht-lista-head .cht-fbox + .cht-search { margin-left: 0; }
}

@media (max-width: 620px) {
  /* no mobile as linhas usam inset 15px — cabeçalho e grupos acompanham */
  .cht-lista-head { align-items: stretch; gap: 10px; padding-left: 15px; padding-right: 15px; }
  .cht-listgroup-hd { padding-left: 15px; padding-right: 15px; }
  /* chips rolam na horizontal em vez de empilhar e empurrar a lista pra baixo */
  .cht-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .cht-filters::-webkit-scrollbar { display: none; }
  .cht-lista-head .cht-search { flex-basis: 100%; }
}

/* grupos da lista: cabeçalho discreto + contagem; "Encerrados" recua um tom */
.cht-listgroup { margin-top: 4px; }
.cht-listgroup + .cht-listgroup { margin-top: 22px; }
.cht-listgroup-hd {
  display: flex; align-items: center; gap: 8px;
  /* inset 22px alinha o rótulo de seção com o conteúdo das linhas (era 2px → colado/cortado) */
  margin: 0 0 9px; padding: 0 22px;
  font: 700 11.5px var(--cht-fu); text-transform: uppercase; letter-spacing: .06em;
  color: var(--cht-ink-3);
}
.cht-listgroup-hd .c {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-grid; place-items: center; border-radius: 999px;
  background: var(--cht-surface-2); color: var(--cht-ink-3);
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.cht-listgroup + .cht-listgroup .cht-listgroup-hd { color: var(--cht-ink-4); }

/* ══════════════════════════════════════════════════════════════════════════
   PEDIDOS GUIADOS (Novo colaborador) — atalhos, on-ramp, colega, chips, card
   que se materializa. Estende o Signal+ (tokens --cht-*); a ousadia está na
   interação, não em cor nova. Motion atrás de prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════════ */

/* Atalhos de pedido no Abrir chamado (repouso; somem ao começar a escrever). */
.cht-atalhos { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.cht-atalhos[hidden] { display: none; }
.cht-atalhos-lbl { font: 600 12px var(--cht-fu); color: var(--cht-ink-3); }
.cht-atalho {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border: 1px solid var(--cht-line-2); border-radius: var(--cht-r);
  background: var(--cht-surface); cursor: pointer;
  transition: border-color var(--cht-dur) var(--cht-ease), box-shadow var(--cht-dur) var(--cht-ease);
}
.cht-atalho:hover { border-color: var(--cht-accent-line); box-shadow: var(--cht-sh-1); }
.cht-atalho-ic {
  flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 10px; background: var(--cht-accent-weak); color: var(--cht-accent);
}
.cht-atalho-ic svg { width: 20px; height: 20px; }
.cht-atalho-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cht-atalho-tx b { font: 600 14px var(--cht-fu); color: var(--cht-ink); }
.cht-atalho-tx small { font-size: 12px; color: var(--cht-ink-3); }
.cht-atalho-go { flex: 0 0 auto; display: grid; place-items: center; color: var(--cht-ink-4); }
.cht-atalho-go svg { width: 18px; height: 18px; }
.cht-atalho:hover .cht-atalho-go { color: var(--cht-accent); }

/* On-ramp no co-piloto: "parece um novo colaborador → formulário guiado". */
.cht-onramp { margin-bottom: 14px; }
.cht-onramp-in {
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 6px 10px;
  padding: 14px; border: 1px solid var(--cht-accent-line); border-radius: var(--cht-r);
  background: var(--cht-accent-weak);
}
.cht-onramp-ic { grid-column: 1; grid-row: 1; color: var(--cht-accent); display: grid; place-items: center; }
.cht-onramp-ic svg { width: 18px; height: 18px; }
.cht-onramp-tx { grid-column: 2; display: flex; flex-direction: column; gap: 2px; }
.cht-onramp-tx b { font: 600 13.5px var(--cht-fu); color: var(--cht-accent-deep); }
.cht-onramp-tx span { font-size: 12.5px; color: var(--cht-ink-2); line-height: 1.5; }
.cht-onramp-btn { grid-column: 2; justify-self: start; margin-top: 4px; }

/* Seções do pedido guiado. */
.cht-ped-sec { margin-top: 22px; }
.cht-ped-sec-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cht-ped-sec-ttl {
  font: 600 12px var(--cht-fu); text-transform: uppercase; letter-spacing: .05em;
  color: var(--cht-ink-3);
}
.cht-ped-sec-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px var(--cht-fu); color: var(--cht-accent-deep);
  background: var(--cht-accent-weak); border: 1px solid var(--cht-accent-line);
  padding: 3px 9px; border-radius: var(--cht-r-pill);
}
/* A seção "perfil do colega" é o card que se materializa (visual de destaque). */
.cht-ped-sec--auto {
  border: 1px solid var(--cht-accent-line); border-radius: var(--cht-r);
  background: var(--cht-surface-2); padding: 16px 16px 18px;
}
.cht-ped-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cht-ped-field--wide { grid-column: 1 / -1; }
.cht-ped-hint { font-size: 12px; color: var(--cht-ink-3); margin-top: 4px; line-height: 1.45; }
.cht-ped-aviso {
  margin-top: 8px; padding: 8px 11px; border-radius: var(--cht-r-sm);
  background: var(--cht-warn-weak); border: 1px solid var(--cht-warn-line);
  font-size: 12px; color: var(--cht-ink-2); line-height: 1.45;
}
.cht-ped-aviso.hidden { display: none; }

/* Nota de segurança no co-piloto (acessos = sugestão revisável). */
.cht-ped-note {
  display: flex; gap: 9px; margin-top: 16px; padding: 12px;
  border-radius: var(--cht-r-sm); background: var(--cht-surface-2);
  border: 1px solid var(--cht-line); font-size: 12px; color: var(--cht-ink-2); line-height: 1.5;
}
.cht-ped-note .ic { flex: 0 0 auto; color: var(--cht-accent); }
.cht-ped-note .ic svg { width: 16px; height: 16px; }

/* Sim/Não segmentado. */
.cht-seg { display: inline-flex; gap: 6px; }
.cht-seg-opt {
  padding: 8px 18px; border: 1px solid var(--cht-line-2); border-radius: var(--cht-r-pill);
  background: var(--cht-surface); font: 600 13px var(--cht-fu); color: var(--cht-ink-2);
  cursor: pointer; transition: border-color var(--cht-dur), background var(--cht-dur), color var(--cht-dur);
}
.cht-seg-opt:hover:not(.is-on) { border-color: var(--cht-accent-line); background: var(--cht-accent-weak); }
.cht-seg-opt.is-on { background: var(--cht-accent); border-color: var(--cht-accent); color: #fff; }
.cht-seg-opt.is-on:hover { background: var(--cht-accent-deep); border-color: var(--cht-accent-deep); }

/* Colega de referência — autocomplete + card "usando o perfil de X". */
.cht-colega-box { position: relative; display: flex; align-items: center; }
.cht-colega-ic { position: absolute; left: 12px; display: grid; place-items: center; color: var(--cht-ink-4); pointer-events: none; }
.cht-colega-ic svg { width: 18px; height: 18px; }
.cht-colega-box .cht-input { padding-left: 38px; width: 100%; }
.cht-colega-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: var(--cht-surface); border: 1px solid var(--cht-line-2); border-radius: var(--cht-r);
  box-shadow: var(--cht-sh-2); max-height: 264px; overflow: auto; padding: 6px;
}
.cht-colega-opt {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  padding: 9px 12px; border: 0; border-radius: var(--cht-r-sm); background: transparent; cursor: pointer;
}
.cht-colega-opt:hover, .cht-colega-opt:focus-visible { background: var(--cht-accent-weak); outline: none; }
.cht-colega-opt-nm { font: 600 13.5px var(--cht-fu); color: var(--cht-ink); }
.cht-colega-opt-em { font-size: 12px; color: var(--cht-ink-3); }
.cht-colega-picked {
  display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 12px;
  border-radius: var(--cht-r-sm); background: var(--cht-ok-weak); border: 1px solid var(--cht-ok-line);
  font-size: 12.5px; color: var(--cht-ink-2);
}
.cht-colega-picked .ic { display: grid; place-items: center; color: var(--cht-ok); }
.cht-colega-picked .ic svg { width: 15px; height: 15px; }
.cht-colega-picked b { color: var(--cht-ink); }
.cht-colega-swap {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px; border: 0;
  background: transparent; color: var(--cht-accent); font: 600 12px var(--cht-fu); cursor: pointer;
}
.cht-colega-swap svg { width: 13px; height: 13px; }

/* Chips do catálogo de sistemas (marcáveis; sugeridos ganham um ponto). */
.cht-syschips { display: flex; flex-wrap: wrap; gap: 8px; }
.cht-syschip {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1.5px solid var(--cht-line-2); border-radius: var(--cht-r-pill);
  background: var(--cht-surface); font: 600 13px var(--cht-fu); color: var(--cht-ink-2);
  cursor: pointer; transition: border-color var(--cht-dur), background var(--cht-dur), color var(--cht-dur);
}
.cht-syschip:hover:not(.is-on) { border-color: var(--cht-accent-line); background: var(--cht-accent-weak); }
.cht-syschip-ck { width: 0; overflow: hidden; display: inline-flex; align-items: center; transition: width var(--cht-dur) var(--cht-ease); }
.cht-syschip-ck svg { width: 14px; height: 14px; }
.cht-syschip.is-on { border-color: var(--cht-accent); background: var(--cht-accent); color: #fff; }
.cht-syschip.is-on .cht-syschip-ck { width: 14px; }
.cht-syschip.is-on:hover { background: var(--cht-accent-deep); border-color: var(--cht-accent-deep); }
.cht-syschip.is-sug:not(.is-on)::after {
  content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--cht-accent); border: 2px solid var(--cht-surface-2);
}

@media (max-width: 720px) {
  .cht-ped-grid { grid-template-columns: 1fr; }
}

/* O momento-uau: o card do colega materializa e os campos entram em cascata. */
@media (prefers-reduced-motion: no-preference) {
  .cht-ped-sec--auto.is-materialize { animation: cht-ped-card-in 360ms var(--cht-ease-out) both; }
  .cht-ped-sec--auto.is-materialize .cht-ped-grid > * { animation: cht-ped-rise 440ms var(--cht-ease-out) both; }
  .cht-ped-sec--auto.is-materialize .cht-ped-grid > *:nth-child(1) { animation-delay: 80ms; }
  .cht-ped-sec--auto.is-materialize .cht-ped-grid > *:nth-child(2) { animation-delay: 150ms; }
  .cht-ped-sec--auto.is-materialize .cht-ped-grid > *:nth-child(3) { animation-delay: 220ms; }
}
@keyframes cht-ped-card-in { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes cht-ped-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* ── Refino de hierarquia (2026-07-13): passos numerados, herói, detalhes quietos ── */
.cht-ped-headline { margin-top: 2px; }
.cht-pedido-layout .cht-ped-sec:first-of-type { margin-top: 20px; }

/* Passo "auto" (perfil puxado do colega): marcador ✦ accent no lugar do número. */
.cht-step-n--auto { background: var(--cht-accent); color: #fff; }
.cht-step-n--auto svg { width: 13px; height: 13px; }

/* Colega de referência = ação-herói do passo 1 (realce suave, vira o foco). */
.cht-ped-field--hero { padding: 13px 14px; background: var(--cht-accent-weak); border: 1px solid var(--cht-accent-line); border-radius: var(--cht-r); }
.cht-ped-field--hero > .cht-label { color: var(--cht-accent-deep); }

/* Detalhes = secundário: Sim/Não em linhas compactas (rótulo à esq · controle à dir). */
.cht-ped-sec--quiet .cht-ped-grid { grid-template-columns: 1fr; gap: 0; }
.cht-ped-field--bool { flex-flow: row wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 12px 2px; border-bottom: 1px solid var(--cht-line); }
.cht-ped-field--bool > .cht-label { margin: 0; font: 500 13.5px var(--cht-fu); color: var(--cht-ink); }
.cht-ped-field--bool > .cht-seg { flex: 0 0 auto; }
.cht-ped-field--bool > .cht-ped-aviso { flex-basis: 100%; margin-top: 0; }
.cht-ped-sec--quiet .cht-ped-field:not(.cht-ped-field--bool) { padding: 12px 2px 6px; }

/* ── Layout largo (2026-07-13): aproveita a horizontal, menos empilhamento ── */
.cht-nc {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--cht-line); border-radius: 20px;
  background: var(--cht-surface); box-shadow: var(--cht-sh-2);
  padding: 24px 26px 20px; display: flex; flex-direction: column; gap: 22px;
}
.cht-nc .cht-ped-sec { margin: 0; }
.cht-nc-head { display: flex; flex-direction: column; gap: 4px; }
/* Passo 1: nome + colega numa linha; o colega (herói) ganha mais largura. */
.cht-ped-sec[data-sec="quem"] .cht-ped-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
/* Perfil: identidade compacta à esquerda, sistemas preenchem a direita. */
.cht-ped-sec--auto .cht-ped-grid { grid-template-columns: minmax(150px, 220px) minmax(150px, 220px) minmax(0, 1fr); align-items: start; }
.cht-ped-sec--auto .cht-ped-field--wide { grid-column: 3; }
/* Faixa inferior: Detalhes | co-piloto lado a lado (fim da coluna alta à direita). */
.cht-nc-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 24px; align-items: start; }
.cht-nc-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cht-nc-side .cht-perfect { margin: 0; }
.cht-nc-actions { margin: 0; }
@media (max-width: 960px) {
  .cht-ped-sec[data-sec="quem"] .cht-ped-grid,
  .cht-ped-sec--auto .cht-ped-grid { grid-template-columns: 1fr; }
  .cht-ped-sec--auto .cht-ped-field--wide { grid-column: auto; }
  .cht-nc-band { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FICHA "CANVAS DO COLEGA" (2026-07-13) — o cartão do colega é o palco fixo:
   nunca escondido; no load é convite (esqueleto que ensina o gesto); ao apontar
   o colega, floresce no mesmo lugar. Checklist vira faixa horizontal no topo.
   ══════════════════════════════════════════════════════════════════════════ */

/* Topbar: promessa (esq) + faixa da checklist (dir) — mata o rail vertical alto. */
.cht-ficha-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 24px; align-items: start; }
.cht-ficha-eyebrow { font: 600 11.5px var(--cht-fu); text-transform: uppercase; letter-spacing: .06em; color: var(--cht-ink-3); margin-bottom: 6px; }

/* Checklist como FAIXA horizontal (pills que acendem), não lista alta. */
.cht-perfect--strip { margin: 0; padding: 14px 16px; border: 1px solid var(--cht-line); border-radius: var(--cht-r); background: var(--cht-surface-2); }
.cht-perfect--strip .cht-perfect-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cht-perfect--strip .cht-perfect-item {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  border: 1px solid var(--cht-line-2); border-radius: var(--cht-r-pill);
  font: 500 12px var(--cht-fu); color: var(--cht-ink-3); background: var(--cht-surface);
}
.cht-perfect--strip .cht-perfect-item.is-done { color: var(--cht-ok); border-color: var(--cht-ok-line); background: var(--cht-ok-weak); }
.cht-perfect--strip .cht-perfect-ic { width: 13px; height: 13px; display: inline-grid; place-items: center; }
.cht-perfect--strip .cht-perfect-ic svg { width: 12px; height: 12px; }
.cht-perfect--strip .cht-perfect-item .h { display: none; }
.cht-perfect--strip .cht-perfect-req { display: none; }

/* Linha do sujeito: nome como título + preview vivo do e-mail. */
.cht-ficha-subject { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 300px); gap: 20px; align-items: end; }
.cht-ficha-name-input { font: 500 18px var(--cht-fd); }
.cht-ficha-email { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: var(--cht-r-sm); background: var(--cht-accent-weak); border: 1px solid var(--cht-accent-line); }
.cht-ficha-email.hidden { display: none; }
.cht-ficha-email-lbl { font: 600 10px var(--cht-fu); text-transform: uppercase; letter-spacing: .05em; color: var(--cht-accent-deep); }
.cht-ficha-email-val { font: 500 13.5px var(--cht-fm); color: var(--cht-accent-deep); word-break: break-all; }

/* CARTÃO DO COLEGA (herói, sempre presente). */
.cht-idcard { border: 1px solid var(--cht-accent-line); border-radius: var(--cht-r-lg); background: var(--cht-surface-2); padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.cht-idcard.is-skeleton { border-style: dashed; background: var(--cht-surface); }
.cht-idcard-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.cht-idcard-avatar { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--cht-accent); color: #fff; font: 700 18px var(--cht-fd); }
.cht-idcard.is-skeleton .cht-idcard-avatar { background: transparent; color: var(--cht-accent); border: 2px dashed var(--cht-accent-line); }
.cht-idcard-avatar svg { width: 22px; height: 22px; }
.cht-idcard-headmain { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cht-idcard-kicker { font: 600 12px var(--cht-fu); color: var(--cht-ink-2); }
.cht-idcard-hint { font-size: 12px; color: var(--cht-ink-3); line-height: 1.4; }
.cht-idcard-identity { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.cht-idcard-identity.hidden { display: none; }
.cht-idcard-identity-nm { font: 600 16px var(--cht-fd); color: var(--cht-ink); }
.cht-idcard-identity-meta { font: 500 13px var(--cht-fu); color: var(--cht-ink-3); }
.cht-idcard-identity .cht-colega-swap { margin-left: auto; }
/* Alterna esqueleto (busca) ⇄ preenchido (identidade). */
.cht-idcard:not(.is-skeleton) .cht-idcard-kicker,
.cht-idcard:not(.is-skeleton) [data-colega-search],
.cht-idcard:not(.is-skeleton) .cht-idcard-hint { display: none; }

/* Convite (no load) ⇄ fatos (após escolher) — mesmo assento. */
.cht-idcard-invite { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cht-idcard:not(.is-skeleton) .cht-idcard-invite { display: none; }
.cht-idcard.is-skeleton .cht-idcard-facts { display: none; }
.cht-idcard-step { display: flex; flex-direction: column; gap: 2px; padding: 13px 15px; border-radius: var(--cht-r); background: var(--cht-surface-2); border: 1px solid var(--cht-line); }
.cht-idcard.is-skeleton .cht-idcard-step { background: var(--cht-surface); }
.cht-idcard-step-ic { width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center; background: var(--cht-accent-weak); color: var(--cht-accent); margin-bottom: 5px; }
.cht-idcard-step-ic svg { width: 15px; height: 15px; }
.cht-idcard-step b { font: 600 13.5px var(--cht-fu); color: var(--cht-ink); }
.cht-idcard-step span { font-size: 12px; color: var(--cht-ink-3); line-height: 1.4; }

/* Fatos: lotação (CC/setor) compacta à esq · sistemas preenchem a direita. */
.cht-idcard-facts { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: 16px 22px; align-items: start; }
.cht-idcard-lot { display: flex; flex-direction: column; gap: 12px; }

/* Marca "do colega" (proveniência) — cai quando o fato é editado à mão. */
.cht-ped-field.is-fromcolega .cht-label::after {
  content: 'do colega'; margin-left: 8px; font: 600 9.5px var(--cht-fu);
  text-transform: uppercase; letter-spacing: .04em; color: var(--cht-accent);
  background: var(--cht-accent-weak); padding: 2px 6px; border-radius: var(--cht-r-pill); vertical-align: middle;
}

/* Atalho do colega de referência (opcional, compacto) — busca vira chip ao escolher. */
.cht-cref { margin: 0 0 14px; }
.cht-cref-search { position: relative; display: flex; align-items: center; }
.cht-cref-search.hidden, .cht-cref-chip.hidden { display: none; }
.cht-cref-ic { position: absolute; left: 12px; display: grid; place-items: center; color: var(--cht-ink-4); pointer-events: none; }
.cht-cref-ic svg { width: 17px; height: 17px; }
.cht-cref-search .cht-input { padding-left: 38px; width: 100%; }
.cht-cref-chip {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px;
  border: 1px solid var(--cht-accent-line); border-radius: var(--cht-r); background: var(--cht-accent-weak);
}
.cht-cref-av {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--cht-accent); color: #fff; font: 700 12px var(--cht-fd);
}
.cht-cref-tx { min-width: 0; font: 500 13px var(--cht-fu); color: var(--cht-accent-deep); }
.cht-cref-tx b { font-weight: 700; }
.cht-cref-chip .cht-colega-swap { margin-left: auto; flex: 0 0 auto; }

@media (prefers-reduced-motion: no-preference) {
  .cht-idcard-facts.is-materialize { animation: cht-ped-card-in 320ms var(--cht-ease-out) both; }
  .cht-idcard-facts.is-materialize > * { animation: cht-ped-rise 420ms var(--cht-ease-out) both; }
  .cht-idcard-facts.is-materialize > *:nth-child(2) { animation-delay: 90ms; }
}

/* Layout content|rail (correção do vão): manchete cheia · conteúdo esq · rail dir. */
.cht-ficha-header { display: flex; flex-direction: column; gap: 4px; }
.cht-ficha-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); gap: 26px; align-items: start; }
.cht-ficha-content { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.cht-ficha-rail { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cht-ficha-rail .cht-perfect { margin: 0; }
.cht-ficha-rail .cht-perfect-req { display: none; }

@media (max-width: 960px) {
  .cht-ficha-main { grid-template-columns: 1fr; }
  .cht-ficha-top, .cht-ficha-subject, .cht-idcard-facts { grid-template-columns: 1fr; }
  .cht-idcard-invite { grid-template-columns: 1fr; }
  .cht-idcard-head { grid-template-columns: 1fr; }
}

/* ============================================================================
   NOVO COLABORADOR — "Bancada" (mockup 1C do Claude Design)
   Tela única densa: barra "Herdar de" + form denso + painel sticky. Fonte
   Plus Jakarta Sans + JetBrains Mono, azul #3b5ea3 — tudo escopado em .cht-bnc.
   ============================================================================ */
.cht-bnc {
  --bnc-accent: #3b5ea3;
  --bnc-accent-deep: #345699;
  --bnc-accent-ink: #2b4778;
  --bnc-accent-weak: rgba(59, 94, 163, .09);
  --bnc-accent-line: rgba(59, 94, 163, .40);
  --bnc-ink: #0f172a;
  --bnc-muted: #667085;
  --bnc-faint: #98a2b3;
  --bnc-line: rgba(15, 23, 42, .09);
  --bnc-line-2: rgba(15, 23, 42, .14);
  --bnc-surface: #fff;
  --bnc-radius: 14px;
  --bnc-display: 'Plus Jakarta Sans', 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --bnc-mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;
  width: 100%;
  font-family: var(--bnc-display);
  color: var(--bnc-ink);
}

/* Barra "Herdar de um colega" */
.cht-bnc-herdar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px;
  background: var(--bnc-surface); border: 1px solid var(--bnc-line);
  border-radius: var(--bnc-radius); box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  padding: 14px 18px; margin-bottom: 16px;
}
.cht-bnc-herdar-lbl { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; }
.cht-bnc-herdar-ic { display: inline-grid; place-items: center; color: var(--bnc-accent); }
.cht-bnc-herdar-ic svg { width: 18px; height: 18px; }
.cht-bnc-herdar-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; }
.cht-bnc-herdar-search { position: relative; display: flex; align-items: center; flex: 1; min-width: 240px; max-width: 420px; }
.cht-bnc-herdar-search.hidden, .cht-bnc-herdar-chip.hidden { display: none; }
.cht-bnc-herdar-sic { position: absolute; left: 12px; display: grid; place-items: center; color: var(--bnc-faint); pointer-events: none; }
.cht-bnc-herdar-sic svg { width: 16px; height: 16px; }
.cht-bnc .cht-colega-input {
  width: 100%; padding: 9px 12px 9px 36px; border: 1px solid var(--bnc-line-2); border-radius: 10px;
  background: var(--bnc-surface); color: var(--bnc-ink); font: 400 14px var(--bnc-display); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.cht-bnc .cht-colega-input:focus { border-color: var(--bnc-accent); box-shadow: 0 0 0 3px var(--bnc-accent-weak); }
.cht-bnc .cht-colega-input::placeholder { color: var(--bnc-faint); }
.cht-bnc-herdar-search .cht-colega-results { position: absolute; top: calc(100% + 6px); left: 0; right: auto; width: min(340px, 90vw); z-index: 30; }
.cht-bnc-herdar-chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px 7px 7px;
  border: 1px solid var(--bnc-accent-line); border-radius: var(--bnc-radius); background: var(--bnc-accent-weak);
}
.cht-bnc-herdar-av { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--bnc-accent); color: #fff; font: 700 11px var(--bnc-display); }
.cht-bnc-herdar-tx { min-width: 0; font: 400 13px var(--bnc-display); color: var(--bnc-accent-ink); }
.cht-bnc-herdar-tx b { font-weight: 700; }
.cht-bnc .cht-colega-swap { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--bnc-accent); font: 600 12px var(--bnc-display); cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.cht-bnc .cht-colega-swap svg { width: 13px; height: 13px; }
.cht-bnc .cht-colega-swap:hover { background: rgba(59, 94, 163, .12); }
.cht-bnc-herdar-zero { border: 0; background: transparent; color: var(--bnc-muted); font: 600 13px var(--bnc-display); cursor: pointer; padding: 8px 10px; border-radius: 9px; }
.cht-bnc-herdar-zero:hover { background: var(--cht-surface-2); color: var(--bnc-ink); }

/* Grade principal: form + painel */
.cht-bnc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.cht-bnc-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Cards */
.cht-bnc-card { background: var(--bnc-surface); border: 1px solid var(--bnc-line); border-radius: var(--bnc-radius); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); padding: 18px 20px; }
.cht-bnc-card-hd { font: 800 12px var(--bnc-display); letter-spacing: .06em; text-transform: uppercase; color: var(--bnc-muted); margin-bottom: 14px; }
.cht-bnc-card-hd--row { display: flex; align-items: center; justify-content: space-between; }
.cht-bnc-syscount { font: 700 12px var(--bnc-mono); letter-spacing: normal; text-transform: none; color: var(--bnc-accent); }
.cht-bnc-hint { margin: 0 0 12px; font: 400 12px var(--bnc-display); color: var(--bnc-faint); }

/* Campos */
.cht-bnc-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.cht-bnc-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cht-bnc-f--wide { grid-column: span 2; }
.cht-bnc-flbl { display: flex; align-items: center; gap: 6px; font: 700 11px var(--bnc-display); color: var(--bnc-muted); }
.cht-bnc-flbl .cht-req { color: var(--cht-breach); }
.cht-bnc-f.is-fromcolega .cht-bnc-flbl::after { content: 'do colega'; font: 700 9px var(--bnc-mono); color: var(--bnc-accent); background: var(--bnc-accent-weak); padding: 2px 6px; border-radius: 999px; }
.cht-bnc-in { width: 100%; padding: 9px 11px; border: 1px solid var(--bnc-line-2); border-radius: 9px; background: var(--bnc-surface); color: var(--bnc-ink); font: 400 14px var(--bnc-display); outline: none; transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }
.cht-bnc-in:focus { border-color: var(--bnc-accent); box-shadow: 0 0 0 3px var(--bnc-accent-weak); }
.cht-bnc-in::placeholder { color: var(--bnc-faint); }
.cht-bnc-in--mono { font-family: var(--bnc-mono); letter-spacing: .02em; }
.cht-bnc-cond { margin-top: 10px; }
.cht-bnc-cond.hidden { display: none; }
.cht-bnc-subst { margin-top: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.cht-bnc-subst .cht-bnc-cond { flex: 1; min-width: 180px; margin-top: 0; }
.cht-bnc-card--split { display: flex; gap: 26px; flex-wrap: wrap; }
.cht-bnc-split-col { flex: 1; min-width: 200px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.cht-bnc-split-col .cht-bnc-cond, .cht-bnc-split-col .cht-bnc-in { width: 100%; }
.cht-bnc-aviso { font: 600 11.5px var(--bnc-display); color: #b45309; }
.cht-bnc-aviso.hidden { display: none; }

/* Sim/Não → segmented control */
.cht-bnc .cht-seg { display: inline-flex; gap: 0; padding: 3px; background: var(--cht-surface-2); border: 1px solid var(--bnc-line-2); border-radius: 999px; }
.cht-bnc .cht-seg-opt { min-width: 58px; justify-content: center; border: 0; background: transparent; border-radius: 999px; padding: 6px 18px; font: 600 13px var(--bnc-display); color: var(--bnc-muted); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.cht-bnc .cht-seg-opt:hover:not(.is-on) { color: var(--bnc-ink); }
.cht-bnc .cht-seg-opt.is-on { background: var(--bnc-accent); color: #fff; box-shadow: 0 1px 2px rgba(59, 94, 163, .3); }
.cht-bnc .cht-seg-opt.is-on:hover { background: var(--bnc-accent-deep); }

/* Chips de sistema (reusa .cht-syschip; recolore pro azul do mockup + realce do herdado) */
.cht-bnc .cht-syschip { border: 1px solid var(--bnc-line-2); background: #fff; color: #475569; font-family: var(--bnc-display); }
.cht-bnc .cht-syschip.is-on { border-color: var(--bnc-accent-line); background: var(--bnc-accent-weak); color: var(--bnc-accent-ink); }
.cht-bnc .cht-syschip.is-sug { box-shadow: inset 0 0 0 1px var(--bnc-accent-line); }
.cht-bnc .cht-syschip--none { border-style: dashed; color: var(--bnc-faint); }
.cht-bnc .cht-syschip--none.is-on { background: var(--cht-ink-3); border-color: var(--cht-ink-3); color: #fff; }

/* chip "Nenhum" — global (outras telas). */
.cht-syschip--none { border-style: dashed; }
.cht-syschip--none.is-on { background: var(--cht-ink-3); border-color: var(--cht-ink-3); color: #fff; }
.cht-syschip--none.is-on:hover { background: var(--cht-ink-2); border-color: var(--cht-ink-2); }

/* Painel direito (sticky). #suporteTab.card (chamados.css:1923) tem overflow:hidden
   que anula o sticky — destravamos só quando a Bancada (ou o intake) está na tela,
   escopado via :has pra não afetar as outras telas da Central. */
#suporteTab.card:has(.cht-bnc), #suporteTab.card:has(.cht-intake-layout) { overflow: visible; }
.cht-bnc-aside { min-width: 0; align-self: stretch; }
.cht-bnc-panel { position: sticky; top: 96px; background: var(--bnc-surface); border: 1px solid var(--bnc-line); border-radius: var(--bnc-radius); box-shadow: 0 8px 30px rgba(15, 23, 42, .08); overflow: hidden; }
.cht-bnc-panel.hidden { display: none; }
.cht-bnc-phd { padding: 16px 18px; background: linear-gradient(180deg, var(--bnc-accent), var(--bnc-accent-deep)); color: #fff; }
.cht-bnc-phd-top { display: flex; align-items: center; justify-content: space-between; font: 700 10.5px var(--bnc-display); letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.cht-bnc-pct { font-family: var(--bnc-mono); letter-spacing: normal; }
.cht-bnc-phd-id { display: flex; align-items: center; gap: 11px; margin-top: 11px; }
.cht-bnc-pav { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font: 700 14px var(--bnc-display); background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); }
.cht-bnc-pid { min-width: 0; line-height: 1.25; display: flex; flex-direction: column; }
.cht-bnc-pid b { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cht-bnc-pid span { font: 400 11.5px var(--bnc-mono); opacity: .82; }
.cht-bnc-pbar { margin-top: 12px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.cht-bnc-pbar > span { display: block; height: 100%; background: #fff; border-radius: 999px; transition: width .35s var(--cht-ease, ease); }
.cht-bnc-resumo { margin: 0; padding: 12px 18px; }
.cht-bnc-resumo > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(15, 23, 42, .06); font-size: 12.5px; }
.cht-bnc-resumo > div:last-child { border-bottom: 0; }
.cht-bnc-resumo dt { color: var(--bnc-faint); flex: none; }
.cht-bnc-resumo dd { margin: 0; text-align: right; color: var(--bnc-ink); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.cht-bnc-pact { padding: 6px 18px 18px; }
.cht-bnc-open { width: 100%; padding: 12px; border-radius: 11px; border: none; background: linear-gradient(180deg, var(--bnc-accent), var(--bnc-accent-deep)); color: #fff; font: 700 14.5px var(--bnc-display); cursor: pointer; box-shadow: 0 4px 14px rgba(59, 94, 163, .3); transition: filter .15s; }
.cht-bnc-open:hover:not(:disabled) { filter: brightness(1.06); }
.cht-bnc-open:disabled { background: #f1f4f8; color: var(--bnc-faint); box-shadow: none; cursor: not-allowed; }

/* Sucesso inline */
.cht-bnc-success { border-radius: var(--bnc-radius); border: 1px solid rgba(5, 150, 105, .28); background: #fff; box-shadow: 0 12px 40px rgba(5, 150, 105, .13); padding: 24px 20px 18px; text-align: center; }
.cht-bnc-success.hidden { display: none; }
.cht-bnc-success-ic { width: 50px; height: 50px; border-radius: 999px; background: #059669; color: #fff; display: grid; place-items: center; margin: 0 auto 11px; }
.cht-bnc-success-ic svg { width: 24px; height: 24px; }
.cht-bnc-success-num { font: 500 13.5px var(--bnc-mono); color: #047857; }
.cht-bnc-success-t { font-weight: 800; font-size: 18px; margin-top: 6px; }
.cht-bnc-success-p { font-size: 12.5px; color: var(--bnc-muted); margin: 7px 0 14px; }
.cht-bnc-success-acts { display: flex; flex-direction: column; gap: 8px; }
.cht-bnc-outro { width: 100%; padding: 11px; border-radius: 11px; border: 1px solid var(--bnc-line-2); background: #fff; color: var(--bnc-ink); font: 700 14px var(--bnc-display); cursor: pointer; }
.cht-bnc-outro:hover { background: var(--cht-surface-2); }

/* Congela o form após enviar (o painel vira sucesso). */
.cht-bnc.is-sent .cht-bnc-form { opacity: .55; pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  .cht-bnc-card, .cht-bnc-herdar { animation: cht-ped-rise 460ms var(--cht-ease-out) both; }
  .cht-bnc-form .cht-bnc-card:nth-child(2) { animation-delay: 70ms; }
  .cht-bnc-form .cht-bnc-card:nth-child(3) { animation-delay: 140ms; }
}

@media (max-width: 900px) {
  .cht-bnc-grid { grid-template-columns: 1fr; }
  .cht-bnc-panel { position: static; }
  .cht-bnc-card--split { flex-direction: column; gap: 16px; }
  .cht-bnc-fgrid { grid-template-columns: 1fr; }
  .cht-bnc-f--wide { grid-column: auto; }
  .cht-bnc-fspacer { display: none; }
}

@media (max-width: 600px) {
  /* A barra de herança não pode comprimir o container flex a poucos pixels e
     deixar o chip do colega escapar pela direita. No mobile, cada ação ocupa
     sua própria linha dentro da largura disponível. */
  .cht-bnc-herdar { align-items: stretch; padding: 14px; }
  .cht-bnc-herdar-lbl { width: 100%; }
  .cht-bnc-herdar-pick {
    flex: 1 1 100%;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .cht-bnc-herdar-search { width: 100%; min-width: 0; max-width: none; }
  .cht-bnc-herdar-chip { width: 100%; max-width: 100%; box-sizing: border-box; }
  .cht-bnc-herdar-tx { flex: 1 1 auto; overflow-wrap: anywhere; }
  .cht-bnc-herdar-zero { align-self: flex-start; }
}