/* ══════════════════════════════════════════════════════════════════════════
   CHAMADOS · MOVIMENTO (fundação) — Central do solicitante + Atendimento do técnico.
   Carregado POR ÚLTIMO entre os chamados-*.css (index.html), então o que está
   aqui vence os empates dos outros arquivos. Pareia com public/js/chamados/motion.js.

   Regras de ouro:
   • O DOM e o estado mudam NA HORA; aqui só há decoração. Nada atrasa clique,
     navegação ou foco, e nada usa pointer-events:none prolongado (só os ~120 ms
     da saída de uma sobreposição).
   • Pressionar usa a propriedade individual `scale` (não `transform`): não briga
     com translate(-50%) de posicionamento, translateY de hover nem com o Kanban.
     A volta com mola na soltura vem do motion.js (instalarPressionar).
   • Animação por CSS em elemento que o innerHTML RECRIA só entra por classe que o
     JS aplica quando o render foi pedido pelo usuário (cht-mo-in-*, via
     mov.classe()); render ao vivo nunca ganha a classe, então nunca re-anima.
   • Só transform/opacity (translate/scale/rotate), exceto a altura do recolher.
   • prefers-reduced-motion: reduce desliga tudo (bloco no fim).

   ESCOPO: .cht (raiz da Central e do Atendimento), .cht-suporte (host das duas
   telas) e as sobreposições montadas em document.body (.cht-lightbox, .cht-sheet,
   .cht-tec-sheet e as janelas do Abrir chamado: .cht-kb-modal-backdrop "Passo a
   passo" e .cht-sla-modal-backdrop "Prazos por impacto"). Nada vaza para o resto
   do portal.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --cht-mo-press: .97;            /* controles pequenos */
  --cht-mo-press-card: .985;      /* cards e blocos */
  --cht-mo-dur-pop: 160ms;        /* entrada de sobreposição */
  --cht-mo-dur-pop-out: 120ms;    /* saída de sobreposição */
  --cht-mo-dur-rise: 180ms;       /* troca de conteúdo */
  --cht-mo-dur-slide: 220ms;      /* lista → ficha */
  --cht-mo-dur-sobe: 240ms;       /* barra de lote */
  --cht-mo-dur-altura: 200ms;     /* expandir/recolher */
  --cht-mo-stagger: 15ms;         /* degrau da entrada em cascata (máx. 8 itens) */
  --cht-mo-row-active: light-dark(#e6edf9, #212834);   /* linha clicável pressionada: só escurece o fundo */
}

/* ────────────────────────────────────────────────────────────────────────────
   1 · PRESSIONAR — todo clicável responde ao toque
   Controles pequenos .97 · cards/blocos/acordeões (summary) .985 · linha (e
   cabeçalho de grupo da fila) só escurece o fundo.
   Fora: [disabled], alças de arrastar e cards do Kanban (Sortable marca
   .is-chosen/.is-drag/.is-ghost já no pressionar), .chc-chip (arrastável) e os
   botões que já têm retorno por transform próprio (.cht-fab, .cht-send, .send,
   .cht-send-main). O alvo principal da linha da fila ([data-chq-open]) também
   não encolhe: quem escurece é a linha. Opt-out por elemento: data-motion="off".

   Em TOQUE o :active só liga depois de ~150 ms (e num toque rápido nem liga; no
   iOS, em elemento que não é link/botão, nem sempre), então o motion.js marca o
   alvo e os ancestrais com [data-cht-pressionado] já no pointerdown e o tira no
   pointerup/pointercancel. Cada :active abaixo vale também para o atributo.
   ──────────────────────────────────────────────────────────────────────────── */

/* controles pequenos (cuidado: nada de quebra de linha entre :is() e :not() —
   espaço em seletor é combinador descendente) */
:is(.cht, .cht-suporte, .cht-lightbox, .cht-sheet, .cht-tec-sheet, .cht-kb-modal-backdrop, .cht-sla-modal-backdrop) :is(
  button, [role="button"], [role="tab"], [role="menuitem"], [role="menuitemradio"],
  [role="menuitemcheckbox"], [role="option"], [role="switch"], a[href]
):not(
  :disabled, [aria-disabled="true"], [data-motion="off"], [draggable="true"],
  .is-chosen, .is-drag, .is-ghost, .chc-chip, [class*="grip"], [class*="handle"],
  .cht-btn, .cht-fab, .cht-send, .send, .cht-send-main, [data-chq-open],
  .cht-card, .chq-card, .chq-tile, .cht-video-card, .cht-criticality-card, .cht-type-opt,
  .cht-prio-opt, .cht-cat-opt, .cht-ind-tile, .chq-row, .cht-row, .cht-lst-row, .cht-kb-row,
  .chq-grp-btn, summary
):is(:active, [data-cht-pressionado]) {
  scale: var(--cht-mo-press);
}

/* .cht-btn já tinha retorno (translateY + scale(.985) em transform): passa a
   usar `scale` como os demais, sem somar os dois encolhimentos. */
:is(.cht, .cht-suporte, .cht-lightbox, .cht-sheet, .cht-tec-sheet, .cht-kb-modal-backdrop, .cht-sla-modal-backdrop)
  .cht-btn:not(:disabled, [aria-disabled="true"], [data-motion="off"]):is(:active, [data-cht-pressionado]) {
  transform: translateY(1px);
  scale: var(--cht-mo-press);
}

/* cards e blocos clicáveis: .985. A pressão em um botão dentro do card não
   encolhe o card inteiro (:active sobe pela árvore). */
:is(.cht, .cht-suporte, .cht-lightbox, .cht-sheet, .cht-tec-sheet, .cht-kb-modal-backdrop, .cht-sla-modal-backdrop) :is(
  .chq-tile, .cht-video-card, .cht-criticality-card, .cht-type-opt, .cht-prio-opt,
  .cht-cat-opt, .cht-ind-tile.is-link, summary
):not(
  :disabled, [aria-disabled="true"], [data-motion="off"], .is-chosen, .is-drag, .is-ghost
):not(:has(
  :is(button, a[href], select, textarea, summary, [role="button"],
      input:not([type="radio"], [type="checkbox"])):is(:active, [data-cht-pressionado])
)):is(:active, [data-cht-pressionado]) {
  scale: var(--cht-mo-press-card);
}

/* linhas clicáveis (Central, fila, base de conhecimento): só escurece o fundo */
:is(.cht, .cht-suporte) :is(.cht-row, .chq-row, .cht-lst-row, .cht-kb-row):not(
  .is-chosen, .is-drag, .is-ghost
):not(:has(
  :is(button:not([data-chq-open]), a[href], select, textarea, summary, [role="button"], input):is(:active, [data-cht-pressionado])
)):is(:active, [data-cht-pressionado]) {
  background-color: var(--cht-mo-row-active);
}

/* cabeçalho de grupo da fila: é uma linha larga, então também só escurece */
:is(.cht, .cht-suporte) .chq-grp-btn:not(:disabled):is(:active, [data-cht-pressionado]) {
  background-color: var(--cht-mo-row-active);
}

/* checkbox/radio: afunda no clique e volta com a mola (o pop da marcação) */
:is(.cht, .cht-suporte, .cht-lightbox, .cht-sheet, .cht-tec-sheet, .cht-kb-modal-backdrop, .cht-sla-modal-backdrop) input[type="checkbox"]:not(:disabled):is(:active, [data-cht-pressionado]) { scale: .8; }
:is(.cht, .cht-suporte, .cht-lightbox, .cht-sheet, .cht-tec-sheet, .cht-kb-modal-backdrop, .cht-sla-modal-backdrop) input[type="radio"]:not(:disabled):is(:active, [data-cht-pressionado]) { scale: .85; }

/* o flash cinza do toque disputaria com o retorno acima */
:is(.cht, .cht-suporte, .cht-lightbox, .cht-sheet, .cht-tec-sheet, .cht-kb-modal-backdrop, .cht-sla-modal-backdrop)
  :is(button, [role="button"], [role="tab"], [role="menuitem"], [role="option"], summary, label,
      .cht-row, .chq-row, .cht-lst-row, .cht-kb-row) {
  -webkit-tap-highlight-color: transparent;
}

/* ────────────────────────────────────────────────────────────────────────────
   2 · HOVER / FOCO — preenche o que faltava
   :where() zera a especificidade: só vale onde nenhum outro CSS já declarou
   `transition`, então não troca o ajuste fino de ninguém. Cobre fundo, cor,
   borda, sombra (anel de foco) e opacidade, ~150 ms.
   ──────────────────────────────────────────────────────────────────────────── */
:where(.cht, .cht-suporte, .cht-lightbox, .cht-sheet, .cht-tec-sheet, .cht-kb-modal-backdrop, .cht-sla-modal-backdrop)
  :where(button, [role="button"], [role="tab"], [role="menuitem"], [role="menuitemradio"],
         [role="option"], summary, a[href], select, textarea, input) {
  transition-property: background-color, color, border-color, box-shadow, opacity;
  transition-duration: var(--cht-dur, 150ms);
  transition-timing-function: var(--cht-ease, cubic-bezier(.2, 0, 0, 1));
}

/* ────────────────────────────────────────────────────────────────────────────
   3 · SOBREPOSIÇÕES — menus, popovers, pickers, painéis de filtro, dropdowns
   Entram com fade + translateY(-4px) + scale(.98) a partir do lado ancorado
   (~160 ms) e saem rápido (~120 ms).

   (a) .cht-mo-pop — elemento que PERSISTE no DOM e abre/fecha por [hidden] (ou
       data-state="closed"). Transição + @starting-style + allow-discrete: anima
       só a mudança fechado→aberto. NÃO use em elemento que o innerHTML recria já
       aberto (o @starting-style roda também na inserção): para esses, (b).
   (b) .cht-mo-in-pop — animação por classe, aplicada pelo JS só quando o render
       foi pedido pelo usuário (mov.classe('pop')).
   Variantes de lado: --cima, --direita, --esquerda (de onde a caixa "cresce");
   --sobe é a barra de lote (sobe do rodapé, 240 ms).
   ──────────────────────────────────────────────────────────────────────────── */
.cht-mo-pop {
  --cht-mo-x: 0px;
  --cht-mo-y: -4px;
  transform-origin: var(--cht-mo-origem, 50% 0%);
  transition: opacity var(--cht-mo-dur-pop) var(--cht-ease-out, ease-out),
              translate var(--cht-mo-dur-pop) var(--cht-ease-out, ease-out),
              scale var(--cht-mo-dur-pop) var(--cht-ease-out, ease-out);
}
.cht-mo-pop--cima { --cht-mo-y: 4px; --cht-mo-origem: 50% 100%; }
.cht-mo-pop--direita { --cht-mo-x: -4px; --cht-mo-y: 0px; --cht-mo-origem: 0% 50%; }
.cht-mo-pop--esquerda { --cht-mo-x: 4px; --cht-mo-y: 0px; --cht-mo-origem: 100% 50%; }
.cht-mo-pop--sobe {
  --cht-mo-x: 0px;
  --cht-mo-y: 16px;
  --cht-mo-origem: 50% 100%;
  --cht-mo-dur-pop: var(--cht-mo-dur-sobe);
  --cht-mo-dur-pop-out: 200ms;
}
.cht-mo-pop[hidden],
.cht-mo-pop[data-state="closed"] {
  display: none;
  opacity: 0;
  translate: var(--cht-mo-x) var(--cht-mo-y);
  scale: .98;
  pointer-events: none;
  transition-duration: var(--cht-mo-dur-pop-out);
}
@supports (transition-behavior: allow-discrete) {
  .cht-mo-pop {
    transition: opacity var(--cht-mo-dur-pop) var(--cht-ease-out, ease-out),
                translate var(--cht-mo-dur-pop) var(--cht-ease-out, ease-out),
                scale var(--cht-mo-dur-pop) var(--cht-ease-out, ease-out),
                display var(--cht-mo-dur-pop) allow-discrete;
  }
  @starting-style {
    .cht-mo-pop:not([hidden], [data-state="closed"]) {
      opacity: 0;
      translate: var(--cht-mo-x) var(--cht-mo-y);
      scale: .98;
    }
  }
}

@keyframes cht-mo-pop {
  from { opacity: 0; translate: var(--cht-mo-x, 0px) var(--cht-mo-y, -4px); scale: .98; }
  to { opacity: 1; translate: 0px 0px; scale: 1; }
}
.cht-mo-in-pop {
  transform-origin: var(--cht-mo-origem, 50% 0%);
  animation: cht-mo-pop var(--cht-mo-dur-pop) var(--cht-ease-out, ease-out) backwards;
}

/* ────────────────────────────────────────────────────────────────────────────
   4 · TROCA DE CONTEÚDO pedida pelo usuário (aba, filtro, página, Lista↔Kanban,
   ordenar/agrupar, busca): o conteúdo novo entra com fade + translateY(4px→0).
   Aplique SÓ por mov.classe('rise' | 'slide' | 'fade' | 'sobe' | 'stagger').
   • rise    — conteúdo (180 ms)
   • slide   — lista → ficha entra da direita (220 ms); a volta usa 'fade'
   • stagger — filhos diretos sobem em cascata de 15 ms, no máximo 8
   • sobe    — barra de lote subindo do rodapé (240 ms)
   backwards (não both): terminada a animação o elemento volta ao seu estilo.
   ──────────────────────────────────────────────────────────────────────────── */
@keyframes cht-mo-rise {
  from { opacity: 0; translate: 0px 4px; }
  to { opacity: 1; translate: 0px 0px; }
}
@keyframes cht-mo-slide {
  from { opacity: 0; translate: 12px 0px; }
  to { opacity: 1; translate: 0px 0px; }
}
@keyframes cht-mo-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes cht-mo-sobe {
  from { opacity: 0; translate: 0px 16px; }
  to { opacity: 1; translate: 0px 0px; }
}
.cht-mo-in-rise { animation: cht-mo-rise var(--cht-mo-dur-rise) var(--cht-ease-out, ease-out) backwards; }
.cht-mo-in-slide { animation: cht-mo-slide var(--cht-mo-dur-slide) var(--cht-ease-out, ease-out) backwards; }
.cht-mo-in-fade { animation: cht-mo-fade var(--cht-mo-dur-rise) var(--cht-ease-out, ease-out) backwards; }
.cht-mo-in-sobe { animation: cht-mo-sobe var(--cht-mo-dur-sobe) var(--cht-ease-out, ease-out) backwards; }
.cht-mo-in-stagger > * { animation: cht-mo-rise var(--cht-mo-dur-rise) var(--cht-ease-out, ease-out) backwards; }
.cht-mo-in-stagger > :nth-child(2) { animation-delay: calc(var(--cht-mo-stagger) * 1); }
.cht-mo-in-stagger > :nth-child(3) { animation-delay: calc(var(--cht-mo-stagger) * 2); }
.cht-mo-in-stagger > :nth-child(4) { animation-delay: calc(var(--cht-mo-stagger) * 3); }
.cht-mo-in-stagger > :nth-child(5) { animation-delay: calc(var(--cht-mo-stagger) * 4); }
.cht-mo-in-stagger > :nth-child(6) { animation-delay: calc(var(--cht-mo-stagger) * 5); }
.cht-mo-in-stagger > :nth-child(7) { animation-delay: calc(var(--cht-mo-stagger) * 6); }
.cht-mo-in-stagger > :nth-child(8) { animation-delay: calc(var(--cht-mo-stagger) * 7); }
.cht-mo-in-stagger > :nth-child(n + 9) { animation: none; }

/* ────────────────────────────────────────────────────────────────────────────
   5 · EXPANDIR / RECOLHER — chevron que gira + altura animada
   .cht-mo-collapse é um wrapper de UMA coluna com o conteúdo como único filho:
   alterne .is-open (ou data-open="true") e a altura vai de 0 a auto (grid
   0fr → 1fr, sem medir nada em JS), enquanto o que está abaixo desliza junto.
   Elemento que o innerHTML recria já no estado final não anima (nasce pronto).
   Para altura medida em JS (sem mexer no markup) use animarAltura() do motion.js.
   .cht-mo-chev: chevron que gira 90° quando o pai está expandido.
   ──────────────────────────────────────────────────────────────────────────── */
.cht-mo-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--cht-mo-dur-altura) var(--cht-ease, ease);
}
.cht-mo-collapse.is-open,
.cht-mo-collapse[data-open="true"] { grid-template-rows: 1fr; }
.cht-mo-collapse > * {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear var(--cht-mo-dur-altura);
}
.cht-mo-collapse.is-open > *,
.cht-mo-collapse[data-open="true"] > * {
  visibility: visible;
  transition-delay: 0s;
}

.cht-mo-chev {
  display: inline-flex;
  transition: rotate var(--cht-mo-dur-rise) var(--cht-ease-out, ease-out);
}
[aria-expanded="true"] > .cht-mo-chev,
[aria-expanded="true"] .cht-mo-chev,
.is-open > .cht-mo-chev,
.is-open .cht-mo-chev { rotate: var(--cht-mo-chev-aberto, 90deg); }

/* ────────────────────────────────────────────────────────────────────────────
   6 · CONFIRMAÇÃO E SELEÇÃO
   .cht-mo-flash: realce suave (~600 ms) numa linha/campo recriado pelo render
   (aplique por mov.classe('flash')); para nó que persiste use destacar().
   .cht-mo-ghost: clone de item removido que esmaece (fantasmas do FLIP).
   ──────────────────────────────────────────────────────────────────────────── */
@keyframes cht-mo-flash {
  from { box-shadow: inset 0 0 0 100vmax rgba(79, 106, 232, .16); }
  to { box-shadow: inset 0 0 0 100vmax rgba(79, 106, 232, 0); }
}
.cht-mo-flash {
  animation: cht-mo-flash 600ms ease-out;
  animation-composition: add;
}
.cht-mo-ghost {
  pointer-events: none !important;
  user-select: none;
  margin: 0 !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   7 · FICHA, INDICADORES E CONFIG
   Atendimento (ficha do chamado), Indicadores, Config e Config de SLA. Só aqui
   mora o CSS de movimento dessas telas; os chamados-tecnico/-copias/-transferir
   .css guardam o visual e o movimento que já tinham. Pareia com
   chamados-tecnico/ficha-motion.js e detalhe/indicadores/config*.js.
   Onde a regra original tem a mesma especificidade, esta vence por vir depois.
   ──────────────────────────────────────────────────────────────────────────── */

/* 7.1 · COMPOSER — as variantes "Responder e solucionar / e marcar pendente"
   aparecem com .has-text. A animação original (chtSendIn) estava na própria regra
   do .has-text e reiniciava a cada render ao vivo e a cada foco no desktop. Agora
   o estado nasce sem animação; o JS acende .cht-mo-send-in por ~300 ms SÓ quando
   o usuário começa a digitar ou anexa uma imagem. */
.cht-tec .cht-composer.has-text .cht-send-alt { animation: none; }
.cht-tec .cht-composer.has-text.cht-mo-send-in .cht-send-alt {
  animation: cht-mo-rise var(--cht-mo-dur-rise) var(--cht-ease-out, ease-out) backwards;
}

/* 7.2 · PRESSIONAR em blocos largos — faixa de SLA e opções da folha de situação
   afundam como card (.985), não como botão pequeno (.97). Especificidade igual à
   do 1 · (por isso as classes repetidas) e vem depois. */
:is(.cht, .cht-suporte, .cht-sheet, .cht-tec-sheet, .cht-kb-modal-backdrop, .cht-sla-modal-backdrop)
  button:is(.cht-slaband, .cht-optbtn):is(.cht-slaband, .cht-optbtn):not(:disabled):is(:active, [data-cht-pressionado]) {
  scale: var(--cht-mo-press-card);
}

/* 7.3 · SLA — a troca de estado (ok → em risco → estourado) deixa de ser um salto
   de cor. O ticker só troca a classe do mesmo nó; a transition faz o resto. A
   barra de progresso (.bar > i) já tem a dela: não é tocada aqui. */
.cht .cht-sla {
  transition: background-color var(--cht-dur, 150ms) var(--cht-ease, ease),
              color var(--cht-dur, 150ms) var(--cht-ease, ease),
              border-color var(--cht-dur, 150ms) var(--cht-ease, ease);
}
.cht .cht-slac {
  transition: background-color var(--cht-dur-2, 240ms) var(--cht-ease, ease),
              border-color var(--cht-dur-2, 240ms) var(--cht-ease, ease);
}
.cht .cht-slac .count,
.cht .cht-slac [data-cht-slac-st] {
  transition: color var(--cht-dur-2, 240ms) var(--cht-ease, ease);
}

/* 7.4 · INDICADORES
   • Painel recarregando (troca de filtro): o esmaecer do is-loading deixa de ser
     um salto.
   • Entrada dos cartões: a original (cht-rise-in, 340 ms + atrasos de até 145 ms,
     fill both) passava de 340 ms e, com fill both, anulava o translateY(-1px) do
     :hover. Agora é cht-mo-rise (propriedade `translate`, 4 px) em 220 ms com
     atrasos de até 90 ms (≤ 310 ms no total) e fill backwards. O JS só recria
     esses nós em render pedido pelo usuário (Indicadores não tem timer nem SSE).
   • Abas: o sublinhado ativo passa a ser o ::after da aba (a borda fica
     transparente), para o JS deslizá-lo da aba antiga (deslizarSublinhado). */
.cht-tec .cht-ind-painel { transition: opacity var(--cht-dur, 150ms) var(--cht-ease, ease); }

@media (prefers-reduced-motion: no-preference) {
  .cht-tec .cht-ind-tiles > .cht-ind-tile {
    animation: cht-mo-rise 220ms var(--cht-ease-out, ease-out) backwards;
  }
  .cht-tec .cht-ind-tiles > .cht-ind-tile:nth-child(2) { animation-delay: 30ms; }
  .cht-tec .cht-ind-tiles > .cht-ind-tile:nth-child(3) { animation-delay: 60ms; }
  .cht-tec .cht-ind-tiles > .cht-ind-tile:nth-child(4) { animation-delay: 90ms; }
  .cht-tec .cht-ind-flow > .cht-ind-card,
  .cht-tec .cht-ind-wide > .cht-ind-card {
    animation: cht-mo-rise 220ms var(--cht-ease-out, ease-out) backwards;
    animation-delay: 40ms;
  }
  .cht-tec .cht-ind-geral > .cht-ind-card {
    animation: cht-mo-rise 220ms var(--cht-ease-out, ease-out) backwards;
  }
  .cht-tec .cht-ind-geral > .cht-ind-card:nth-child(1) { animation-delay: 0ms; }
  .cht-tec .cht-ind-geral > .cht-ind-card:nth-child(2) { animation-delay: 20ms; }
  .cht-tec .cht-ind-geral > .cht-ind-card:nth-child(3) { animation-delay: 40ms; }
  .cht-tec .cht-ind-geral > .cht-ind-card:nth-child(4) { animation-delay: 60ms; }
  .cht-tec .cht-ind-geral > .cht-ind-card:nth-child(5) { animation-delay: 80ms; }
}

.cht-tec .cht-ind-aba { position: relative; }
.cht-tec .cht-ind-aba.on { border-bottom-color: transparent; }
.cht-tec .cht-ind-aba::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--cht-accent);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cht-dur, 150ms) var(--cht-ease, ease);
}
.cht-tec .cht-ind-aba.on::after { opacity: 1; }

/* 7.5 · MODAIS da ficha (Transferir, Motivo da pendência): o ui.dialog.form monta
   o modal no body, então o JS passa dialogClass: 'cht-mo-modal'. Entram como as
   demais sobreposições (fade + 4 px + scale .98, ~160 ms) e o fundo escuro faz
   fade. Só no desktop: no celular o modal já é a folha com bottom-sheet-enter. A
   saída é imediata (ui/dialog.js remove o nó). */
@media (min-width: 768px) {
  .modal-card.cht-mo-modal {
    transform-origin: 50% 40%;
    animation: cht-mo-pop var(--cht-mo-dur-pop) var(--cht-ease-out, ease-out) backwards;
  }
  .modal-overlay:has(.cht-mo-modal) {
    animation: cht-mo-fade var(--cht-mo-dur-pop) var(--cht-ease-out, ease-out) backwards;
  }
}

/* 7.6 · INDICADOR DESLIZANTE — fundo temporário (motion.js: tocarIndicador).
   Abas, filtros, segmentados e chips das telas da Central e da ficha: na troca, o
   fundo (cor, borda, raio, sombra) do novo ativo desliza da posição antiga até a nova
   por trás do rótulo, que fica parado. O JS cria a pílula (.cht-mo-ind, o estilo dela
   é todo em linha: absoluta, z-index -1, inerte) e marca o item com data-cht-ind:
   • "medir"  — corta a transition do FUNDO, da sombra e da borda do item, para ler o
                estilo final (e para devolver o fundo próprio sem fade quando a pílula
                some). Também vai no ativo que saiu, para o fundo dele não desvanecer
                por cima da pílula;
   • "oculto" — o item perde o fundo/borda/sombra enquanto a pílula desliza. Só o
                desenho some: o layout (largura de borda, padding) não muda.
   A COR do rótulo segue em transição (150 ms) nos dois estados: o novo ativo passa a
   branco (Não/Sim, Pública) e, na hora, ficaria branco sobre o trilho claro até a
   pílula chegar. */
[data-cht-ind] {
  transition-property: color !important;
  transition-duration: var(--cht-dur, 150ms) !important;
  transition-delay: 0s !important;
  transition-timing-function: var(--cht-ease, ease) !important;
}
[data-cht-ind="oculto"] {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
  .cht-tec .cht-composer.has-text.cht-mo-send-in .cht-send-alt,
  .modal-card.cht-mo-modal,
  .modal-overlay:has(.cht-mo-modal) { animation: none !important; }
  .cht-tec .cht-ind-aba::after,
  .cht-tec .cht-ind-painel,
  .cht .cht-sla, .cht .cht-slac, .cht .cht-slac .count,
  .cht .cht-slac [data-cht-slac-st] { transition: none !important; }
}

/* ────────────────────────────────────────────────────────────────────────────
   REDUCED MOTION — desliga o movimento (nenhum fade acima de 120 ms sobrevive).
   O bloco "21 · REDUCED MOTION" de chamados-base.css continua valendo dentro de
   .cht; este cobre também as sobreposições montadas em document.body e os
   estados estáticos de :active (que o outro bloco não zera).
   ──────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :is(.cht, .cht-suporte, .cht-lightbox, .cht-sheet, .cht-tec-sheet, .cht-kb-modal-backdrop, .cht-sla-modal-backdrop) :is(:active, [data-cht-pressionado]) { scale: none !important; }
  .cht-mo-pop, .cht-mo-collapse, .cht-mo-collapse > *, .cht-mo-chev { transition: none !important; }
  .cht-mo-in-pop, .cht-mo-in-rise, .cht-mo-in-slide, .cht-mo-in-fade, .cht-mo-in-sobe,
  .cht-mo-in-stagger > *, .cht-mo-flash { animation: none !important; }
}