/* ══════════════════════════════════════════════════════════════════════════
   CENTRAL DE CHAMADOS — SUPERFICIE DO TECNICO (direcao "Signal+")
   Fila KANBAN BESPOKE (tela C do mockup) + painel de DETALHE (tela B adaptada
   ao tecnico). Consome os atomos/moleculas de chamados-base.css (.cht-*) e
   adiciona SO o layout especifico destas telas. Escopo: sob .cht (wrapper do
   modulo, montado por index.js/fila.js/detalhe.js) e ancorado no host da aba
   (#chamadosTecnicoTab) apenas onde precisa vencer o .card global.

   REGRAS DE OURO honradas:
   • Botoes custom (.cht-btn) ja declaram background+color no :hover na base;
     os botoes locais (.send, .modes button, .back, .add) tambem declaram ambos.
   • Cor semantica quarentenada (SLA/status/prioridade). Monocromatico frio.
   • Mobile ~360-390px: board com scroll-x proprio (colunas min-width); detalhe
     vira tela cheia; zero overflow horizontal (filhos com min-width:0).
   • prefers-reduced-motion herdado da base (desliga animacoes/transicoes .cht).
   ══════════════════════════════════════════════════════════════════════════ */

/* O host da aba e um .card global; neutraliza o padding/box para o modulo
   preencher e comandar o proprio respiro. */
#chamadosTecnicoTab.card,
#chamadosTecnicoTab {
  padding: 0;
  overflow: visible;
  min-width: 0;
}
#chamadosTecnicoTab .cht {
  background: var(--cht-surface);
  border-radius: var(--cht-r-lg);
  overflow: hidden;
  min-width: 0;
}

/* Shell de rotas (index.js) */
#chamadosTecnicoTab .cht-view { display: block; }
#chamadosTecnicoTab .cht-pane { min-width: 0; }
#chamadosTecnicoTab .cht-pane.hidden { display: none; }

.cht-tec .cht-error {
  margin: 0;
  padding: 10px 20px 0;
  color: var(--cht-breach);
  font: 600 12.5px var(--cht-fu);
}
.cht-tec .cht-error.hidden { display: none; }
.cht-tec .cht-inline-error {
  margin: 16px 20px;
  padding: 14px 16px;
  border: 1px solid var(--cht-breach-line);
  border-radius: var(--cht-r);
  background: var(--cht-breach-weak);
  color: var(--cht-breach);
  font-size: 13px;
}
.cht-tec .hint {
  color: var(--cht-ink-3);
  font-size: 12.5px;
}
.cht-tec .cht-loading,
.cht-tec .cht-board-loading { padding: 28px 20px; }

/* ══════════════════════════════════════════════════════════════════════════
   A · FILA KANBAN (bespoke) — board-head + board + colunas + cards
   ══════════════════════════════════════════════════════════════════════════ */
.cht-tec .cht-board-host { min-width: 0; }

.cht-tec .cht-board-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-bottom: 1px solid var(--cht-glass-line);
  min-width: 0;
  /* cabeçalho do board gruda no topo com vidro frio */
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--cht-glass);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cht-tec .cht-board-head { background: var(--cht-surface); }
}
.cht-tec .cht-board-head .titles { min-width: 0; }
.cht-tec .cht-board-head h1 {
  margin: 0;
  font: 800 18px/1.1 var(--cht-fd);
  letter-spacing: -.01em;
  color: var(--cht-ink);
}
.cht-tec .cht-board-head .grow { flex: 1 1 auto; min-width: 0; }

.cht-tec .cht-stats {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cht-tec .cht-stats .stat { display: flex; flex-direction: column; line-height: 1.1; }
.cht-tec .cht-stats .stat .n {
  font: 800 16px var(--cht-fd);
  letter-spacing: -.01em;
  color: var(--cht-ink);
  font-variant-numeric: tabular-nums;
}
.cht-tec .cht-stats .stat .n.warn { color: var(--cht-warn); }
.cht-tec .cht-stats .stat .n.breach { color: var(--cht-breach); }
.cht-tec .cht-stats .stat .l {
  font: 600 9.5px var(--cht-fu);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cht-ink-3);
}

.cht-tec .cht-board-head .cht-search { width: min(220px, 100%); }
.cht-tec .cht-board-head .cht-search input { width: 100%; }

/* toggle Kanban | Lista */
.cht-tec .cht-viewtoggle {
  display: inline-flex; flex: none;
  background: var(--cht-surface-3);
  border-radius: var(--cht-r-sm);
  padding: 3px; gap: 2px;
}
.cht-tec .cht-viewtoggle button {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 12.5px var(--cht-fu); color: var(--cht-ink-3);
  background: transparent; border: none; border-radius: 6px;
  padding: 6px 12px; cursor: pointer; white-space: nowrap;
  transition: background var(--cht-dur) var(--cht-ease), color var(--cht-dur) var(--cht-ease);
}
.cht-tec .cht-viewtoggle button svg { width: 15px; height: 15px; flex: none; }
.cht-tec .cht-viewtoggle button:hover { color: var(--cht-ink); }
.cht-tec .cht-viewtoggle button.is-on { background: var(--cht-surface); color: var(--cht-accent-ink); box-shadow: var(--cht-sh-1); }

/* visão em LISTA — tabela densa p/ volume alto (200+ chamados) */
.cht-tec .cht-list-wrap { overflow-x: auto; padding: 4px 20px 20px; min-width: 0; }
.cht-tec .cht-list-empty {
  margin: 8px 20px 20px; padding: 22px 16px; text-align: center;
  font-size: 12.5px; color: var(--cht-ink-3);
  border: 1px dashed var(--cht-line-2); border-radius: var(--cht-r); background: var(--cht-surface-2);
}
.cht-tec .cht-list-tbl { width: 100%; border-collapse: collapse; min-width: 860px; font-size: 12.5px; }
.cht-tec .cht-list-tbl thead th {
  position: sticky; top: 0; z-index: 1; text-align: left;
  background: var(--cht-surface-2);
  font: 700 10.5px var(--cht-fu); letter-spacing: .04em; text-transform: uppercase;
  color: var(--cht-ink-4); padding: 10px 14px; white-space: nowrap;
  border-bottom: 1px solid var(--cht-line-2);
}
.cht-tec .cht-lst-row { border-bottom: 1px solid var(--cht-line); cursor: pointer; }
.cht-tec .cht-lst-row:hover { background: var(--cht-surface-2); }
.cht-tec .cht-lst-row:focus-visible { outline: none; background: var(--cht-accent-weak); box-shadow: inset 3px 0 0 var(--cht-accent); }
.cht-tec .cht-list-tbl td { padding: 11px 14px; vertical-align: middle; white-space: nowrap; color: var(--cht-ink-2); }
.cht-tec .cht-list-tbl td.ti { white-space: normal; font: 700 13px var(--cht-fd); color: var(--cht-ink); max-width: 340px; }
.cht-tec .cht-list-tbl td.nm { font-family: var(--cht-fm); font-size: 11px; color: var(--cht-ink-4); }
.cht-tec .cht-list-tbl td.pr { font-weight: 600; color: var(--cht-ink-2); }
.cht-tec .cht-lst-pdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; background: var(--cht-prio-normal); }
.cht-tec .cht-lst-pdot.p-critica { background: var(--cht-prio-critica); }
.cht-tec .cht-lst-pdot.p-alta { background: var(--cht-prio-alta); }
.cht-tec .cht-lst-pdot.p-normal { background: var(--cht-prio-normal); }
.cht-tec .cht-lst-pdot.p-baixa { background: var(--cht-prio-baixa); }
.cht-tec .cht-lst-st {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 11.5px var(--cht-fu); padding: 3px 10px; border-radius: var(--cht-r-pill);
  background: var(--cht-fech-weak); color: var(--cht-fech);
}
.cht-tec .cht-lst-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cht-tec .cht-lst-st.s-novo { background: var(--cht-novo-weak); color: #2f3fb0; }
.cht-tec .cht-lst-st.s-em_atendimento { background: var(--cht-atend-weak); color: #075a72; }
.cht-tec .cht-lst-st.s-pendente { background: var(--cht-pend-weak); color: #6f4e00; }
.cht-tec .cht-lst-st.s-solucionado { background: var(--cht-soluc-weak); color: var(--cht-soluc); }
.cht-tec .cht-lst-st.s-fechado { background: var(--cht-fech-weak); color: var(--cht-fech); }
.cht-tec .cht-list-tbl td.ab { font-family: var(--cht-fm); font-size: 11px; color: var(--cht-ink-3); }

/* Board: scroll-x proprio, colunas de largura fixa + scroll-snap (mockup C). */
.cht-tec .cht-board {
  display: grid;
  grid-auto-flow: column;
  /* colunas CRESCEM p/ preencher a largura (1fr) quando cabem — some o vazio à
     direita e os cards ficam maiores; piso 250px força o scroll-x quando há
     muitas colunas (n×250 > largura). */
  grid-auto-columns: minmax(250px, 1fr);
  gap: 12px;
  padding: 16px;
  overflow-x: auto;
  min-width: 0;
  scroll-snap-type: x proximity;
  align-items: start;
}
.cht-tec .cht-board::-webkit-scrollbar { height: 9px; }
.cht-tec .cht-board::-webkit-scrollbar-thumb {
  background: var(--cht-line-3);
  border-radius: 9px;
  border: 2px solid var(--cht-bg);
}

.cht-tec .cht-col {
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--cht-surface-2);
  border: 1px solid var(--cht-line);
  border-radius: var(--cht-r-lg);
  box-shadow: var(--cht-sh-1);
}
/* colunas entram em cascata (fade+rise) na 1ª pintura do board */
@media (prefers-reduced-motion: no-preference) {
  .cht-tec .cht-board > .cht-col { animation: cht-rise-in var(--cht-dur-3) var(--cht-ease-out) both; }
  .cht-tec .cht-board > .cht-col:nth-child(1) { animation-delay: 40ms; }
  .cht-tec .cht-board > .cht-col:nth-child(2) { animation-delay: 100ms; }
  .cht-tec .cht-board > .cht-col:nth-child(3) { animation-delay: 160ms; }
  .cht-tec .cht-board > .cht-col:nth-child(4) { animation-delay: 220ms; }
  .cht-tec .cht-board > .cht-col:nth-child(n+5) { animation-delay: 280ms; }
}
.cht-tec .cht-col-h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px 10px;
  border-bottom: 1px solid var(--cht-line);
  border-radius: var(--cht-r-lg) var(--cht-r-lg) 0 0;
  position: relative;
  min-width: 0;
}
/* barra de topo colorida por estado da coluna */
.cht-tec .cht-col-h::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--cht-fech);
}
.cht-tec .cht-col.c-novo  .cht-col-h::before { background: var(--cht-novo); }
.cht-tec .cht-col.c-atend .cht-col-h::before { background: var(--cht-atend); }
.cht-tec .cht-col.c-pend  .cht-col-h::before { background: var(--cht-pend); }
.cht-tec .cht-col.c-soluc .cht-col-h::before { background: var(--cht-soluc); }
.cht-tec .cht-col.c-fech  .cht-col-h::before { background: var(--cht-fech); }
.cht-tec .cht-col-h .name {
  font: 700 13px var(--cht-fd);
  color: var(--cht-ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cht-tec .cht-col-h .cnt {
  font: 500 11px var(--cht-fm);
  color: var(--cht-ink-2);
  background: var(--cht-surface);
  border: 1px solid var(--cht-line-2);
  padding: 1px 8px;
  border-radius: var(--cht-r-pill);
  min-width: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cht-tec .cht-col-h .add {
  margin-left: auto;
  color: var(--cht-ink-3);
  background: transparent;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: var(--cht-r-sm);
  transition: background var(--cht-dur), color var(--cht-dur);
}
.cht-tec .cht-col-h .add:hover { background: var(--cht-surface); color: var(--cht-accent-ink); }
.cht-tec .cht-col-h .add:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cht-accent-weak); }
.cht-tec .cht-col-h .add svg { width: 15px; height: 15px; }

.cht-tec .cht-col-risk {
  padding: 8px 12px 0;
  font: 600 11px var(--cht-fu);
  color: var(--cht-warn);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cht-tec .cht-col-risk svg { width: 13px; height: 13px; flex: none; }

.cht-tec .cht-col-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 10px;
  min-height: 64px;
  /* a coluna NÃO cresce além da viewport: com muitos cards (ex.: 35 solucionados),
     o CORPO da coluna rola internamente (cabeçalho fica fixo). Colunas curtas não
     ganham scrollbar (max-height só limita). overscroll-behavior evita rolar a
     página por trás. */
  max-height: calc(100dvh - 300px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 0 0 var(--cht-r-lg) var(--cht-r-lg);
  transition: background var(--cht-dur) var(--cht-ease);
  scrollbar-width: thin;
  scrollbar-color: var(--cht-line-3) transparent;
}
.cht-tec .cht-col-body::-webkit-scrollbar { width: 8px; }
.cht-tec .cht-col-body::-webkit-scrollbar-thumb {
  background: var(--cht-line-3);
  border-radius: 8px;
  border: 2px solid var(--cht-surface-2);
}
/* dropzone (mapeada no onMove do Sortable / dragover do fallback) */
.cht-tec .cht-col-body.is-drop {
  background: var(--cht-accent-weak);
  outline: 2px dashed var(--cht-accent);
  outline-offset: -4px;
  box-shadow: inset 0 0 0 100vmax rgba(79, 106, 232, .04);
  animation: cht-drop-glow 1.2s var(--cht-ease-out) infinite;
}
@keyframes cht-drop-glow {
  0%, 100% { outline-color: var(--cht-accent-line); }
  50%      { outline-color: var(--cht-accent); }
}
/* cards do board entram em cascata dentro da coluna (1ª pintura) */
@media (prefers-reduced-motion: no-preference) {
  .cht-tec .cht-col-body > .cht-card { animation: cht-rise-in var(--cht-dur-2) var(--cht-ease-out) both; }
  .cht-tec .cht-col-body > .cht-card:nth-child(1) { animation-delay: 60ms; }
  .cht-tec .cht-col-body > .cht-card:nth-child(2) { animation-delay: 110ms; }
  .cht-tec .cht-col-body > .cht-card:nth-child(3) { animation-delay: 160ms; }
  .cht-tec .cht-col-body > .cht-card:nth-child(4) { animation-delay: 210ms; }
  .cht-tec .cht-col-body > .cht-card:nth-child(n+5) { animation-delay: 250ms; }
  /* enquanto arrasta, NÃO reanima (evita flicker durante o drop) */
  .cht-tec .cht-col-body.is-drop > .cht-card,
  .cht-tec .cht-card.is-drag,
  .cht-tec .cht-card.is-ghost { animation: none; }
}

/* Card do board: usa .cht-card da base (barra prioridade ::before, hover,
   drag). Aqui so o conteudo interno (topo/titulo/rodape). */
.cht-tec .cht-card { cursor: grab; }
.cht-tec .cht-card:active { cursor: grabbing; }
.cht-tec .cht-card .c-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.cht-tec .cht-card .c-top .push { margin-left: auto; }
.cht-tec .cht-card .c-top .cht-prio { font-size: 11px; }
.cht-tec .cht-card .c-title {
  font: 700 13px/1.35 var(--cht-fd);
  letter-spacing: -.005em;
  color: var(--cht-ink);
  margin: 8px 0 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cht-tec .cht-card .c-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--cht-line);
  min-width: 0;
}
.cht-tec .cht-card .c-who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.cht-tec .cht-card .c-who .n {
  font-size: 11.5px;
  color: var(--cht-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cht-tec .cht-card .c-foot .cht-sla,
.cht-tec .cht-card .c-foot .unread { margin-left: auto; flex: none; }
.cht-tec .cht-card .c-foot .unread {
  background: var(--cht-accent);
  color: #fff;
  font: 700 10px var(--cht-fu);
  padding: 2px 7px;
  border-radius: var(--cht-r-pill);
}
/* SLA compacto no card (sem prefixo): o dot ::before ja carrega a cor. */
.cht-tec .cht-card .c-foot .cht-sla { padding: 2px 8px 2px 6px; }

/* ══════════════════════════════════════════════════════════════════════════
   B · DETALHE DO TECNICO — grid 2col (thread + aside SLA/props)
   ══════════════════════════════════════════════════════════════════════════ */
.cht-tec.cht-detalhe,
.cht-tec .cht-detalhe { min-width: 0; }

.cht-tec .cht-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  min-width: 0;
}
.cht-tec .d-main {
  min-width: 0;
  border-right: 1px solid var(--cht-line);
  display: flex;
  flex-direction: column;
}
.cht-tec .d-aside {
  min-width: 0;
  background: var(--cht-surface-2);
}

.cht-tec .cht-detail-error {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  padding: 20px;
}

/* crumb */
.cht-tec .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-tec .crumb .back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 13px var(--cht-fu);
  color: var(--cht-accent-ink);
  background: var(--cht-accent-weak);
  border: 1px solid var(--cht-accent-line, transparent);
  cursor: pointer;
  padding: 8px 15px;
  border-radius: var(--cht-r-pill);
  transition: background var(--cht-dur), color var(--cht-dur), box-shadow var(--cht-dur);
}
.cht-tec .crumb .back:hover { background: var(--cht-accent); color: #fff; border-color: var(--cht-accent); box-shadow: var(--cht-sh-2); }
.cht-tec .crumb .back:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cht-accent-weak); }
.cht-tec .crumb .back svg { width: 16px; height: 16px; }
.cht-tec .crumb .cht-live { margin-left: auto; }
/* reflete estado SSE via classes que setLiveState aplica no .cht-live */
.cht-tec .cht-live.is-closed { color: var(--cht-ink-4); }
.cht-tec .cht-live.is-closed .cht-pulse { background: var(--cht-ink-4); }
.cht-tec .cht-live.is-closed .cht-pulse::after { animation: none; opacity: 0; }

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

/* barra do chat */
.cht-tec .chat-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--cht-line);
  font: 700 12.5px var(--cht-fu);
  color: var(--cht-ink-2);
}
.cht-tec .chat-hd svg { width: 15px; height: 15px; color: var(--cht-accent); flex: none; }
.cht-tec .cht-inline-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 11.5px var(--cht-fu);
  color: var(--cht-ink-3);
  cursor: pointer;
  user-select: none;
}
.cht-tec .cht-inline-toggle input { accent-color: var(--cht-accent); }

/* thread (timeline) — sobre trilha fria; bolhas .cht-msg vem da base */
.cht-tec .thread {
  flex: 1;
  padding: 16px 22px;
  background: var(--cht-surface-2);
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: 0;
  max-height: 56vh;
  max-height: 56dvh; /* dvh: acompanha a barra do browser (mobile/tablet) */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cht-tec .thread.cht-hide-internas .cht-msg.internal { display: none; }
.cht-tec .thread .cht-evt time { font-family: var(--cht-fm); }
/* Detalhe do técnico em 3 zonas: cabeçalho fixo · CORPO rolável · composer fixo.
   O corpo (.cht-tec-body) é o ÚNICO scroller e tem fundo neutro (não a trilha do
   chat) — a descrição lê como card próprio, não como mensagem. Base:
   display:contents (transparente) pra o mobile manter o modelo antigo (a thread
   rola); o comportamento de scroll do corpo entra só no desktop (@media abaixo). */
.cht-tec .cht-tec-body { display: contents; }
.cht-tec .cht-chatwrap { display: flex; flex-direction: column; min-width: 0; }
/* Sem conversa: em vez de sumir (deixando um vazio mudo entre descrição e
   composer), o wrap fica visível só com a dica; cabeçalho e thread ocultos. */
.cht-tec .cht-chatwrap .cht-chat-hint { display: none; }
.cht-tec .cht-chatwrap.is-empty .chat-hd,
.cht-tec .cht-chatwrap.is-empty .thread { display: none; }
.cht-tec .cht-chatwrap.is-empty .cht-chat-hint {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 22px; margin: 4px 0 0;
  color: var(--cht-ink-soft, #6b7480); font-size: 13.5px;
}
.cht-tec .cht-chatwrap.is-empty .cht-chat-hint svg { width: 16px; height: 16px; opacity: .7; flex: none; }
/* Descrição = card branco próprio no topo do corpo, altura NATURAL: quem rola é o
   CORPO, não o card (sem scrollbar interno espremendo o texto). */

/* composer — Publica/Interna (ambar no modo interno) */
.cht-tec .cht-composer {
  padding: 12px 22px 16px;
  border-top: 1px solid var(--cht-line);
  background: var(--cht-surface);
  transition: background var(--cht-dur);
}
.cht-tec .cht-composer.is-interna { background: #fffaf0; }
.cht-tec .cht-composer.is-readonly { padding: 16px 22px; }
.cht-tec .cht-readonly-note {
  margin: 0;
  padding: 11px 14px;
  border: 1px dashed var(--cht-line-2);
  border-radius: var(--cht-r);
  background: var(--cht-surface-2);
  color: var(--cht-ink-3);
  font-size: 12.5px;
}
.cht-tec .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-tec .cht-composer .modes button {
  border: none;
  background: transparent;
  cursor: pointer;
  font: 600 11.5px var(--cht-fu);
  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-tec .cht-composer .modes button svg { width: 12px; height: 12px; }
.cht-tec .cht-composer .modes button:hover { background: var(--cht-surface); color: var(--cht-ink-2); }
/* estado ativo — SEMPRE declara background+color */
.cht-tec .cht-composer .modes button.on-pub { background: var(--cht-accent); color: #fff; }
.cht-tec .cht-composer .modes button.on-pub:hover { background: var(--cht-accent-ink); color: #fff; }
.cht-tec .cht-composer .modes button.on-int { background: #e0a83a; color: #4a3208; }
.cht-tec .cht-composer .modes button.on-int:hover { background: #d59a26; color: #4a3208; }

.cht-tec .cht-composer .field {
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r-lg);
  background: var(--cht-surface);
  padding: 4px 4px 4px 4px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
  transition: border-color var(--cht-dur), box-shadow var(--cht-dur);
}
.cht-tec .cht-composer.is-interna .field { border-color: #eecf8c; }
.cht-tec .cht-composer .field:focus-within {
  border-color: var(--cht-accent-line);
  box-shadow: 0 0 0 3px var(--cht-accent-weak);
}
.cht-tec .cht-composer.is-interna .field:focus-within {
  border-color: #e0a83a;
  box-shadow: 0 0 0 3px #fdf1d7;
}
/* textarea (base .cht-textarea) sem borda propria dentro do field */
.cht-tec .cht-composer .field .cht-textarea {
  flex: 1;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 9px 10px;
  min-height: 40px;
  resize: none;
}
.cht-tec .cht-composer .field .cht-textarea:focus {
  outline: none;
  box-shadow: none;
}
.cht-tec .cht-composer .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-tec .cht-composer .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-tec .cht-composer .send:active { transform: translateY(0) scale(.96); }
.cht-tec .cht-composer .send svg { transition: transform var(--cht-dur) var(--cht-ease); }
.cht-tec .cht-composer .send:hover svg { transform: translateX(1px); }
.cht-tec .cht-composer.is-interna .send { background: #e0a83a; color: #4a3208; }
.cht-tec .cht-composer.is-interna .send:hover { background: #d59a26; color: #4a3208; }
.cht-tec .cht-composer .send:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cht-accent-weak); }
.cht-tec .cht-composer .send svg { width: 17px; height: 17px; }
.cht-tec .cht-composer .hint { margin-top: 7px; font-size: 10.5px; color: var(--cht-ink-4); }

/* Faixa de envio — primaria "Responder" (= Enter) sempre visivel; as variantes
   de transicao (pendente/solucionar) so aparecem com texto (.has-text). Fechar
   exige clicar num botao NOMEADO — nunca por acidente (substitui o "Resolver"). */
.cht-tec .cht-send-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  flex-wrap: wrap;
}
.cht-tec .cht-send-row .hint { margin: 0; flex: 1 1 auto; min-width: 0; }
.cht-tec .cht-send-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.cht-tec .cht-send-row .hint { text-align: right; }
.cht-tec .cht-send-main {
  display: inline-flex; align-items: center; gap: 7px;
  border: none; cursor: pointer;
  font: 600 12.5px var(--cht-fu);
  padding: 9px 16px; border-radius: var(--cht-r-pill);
  background: var(--cht-accent); background-image: var(--cht-grad-accent-soft);
  color: #fff; 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), opacity var(--cht-dur);
}
.cht-tec .cht-send-main svg { width: 15px; height: 15px; }
.cht-tec .cht-send-main:hover { background: var(--cht-accent-ink); box-shadow: var(--cht-sh-2), var(--cht-glow); transform: translateY(-1px); }
.cht-tec .cht-send-main:active { transform: translateY(0) scale(.98); }
.cht-tec .cht-send-main:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cht-accent-weak); }
.cht-tec .cht-composer:not(.has-text) .cht-send-main { opacity: .6; }
.cht-tec .cht-composer.is-interna .cht-send-main { background: #e0a83a; background-image: none; color: #4a3208; }
.cht-tec .cht-composer.is-interna .cht-send-main:hover { background: #d59a26; }
/* variantes de transicao — reveladas so com texto/imagem */
.cht-tec .cht-send-alt {
  display: none;
  align-items: center; gap: 6px;
  cursor: pointer;
  font: 600 12px var(--cht-fu);
  padding: 8px 13px; border-radius: var(--cht-r-pill);
  border: 1px solid var(--cht-line-2);
  background: var(--cht-surface);
  color: var(--cht-ink-2);
  transition: background var(--cht-dur), border-color var(--cht-dur), color var(--cht-dur);
}
.cht-tec .cht-send-alt svg { width: 14px; height: 14px; }
.cht-tec .cht-composer.has-text .cht-send-alt { display: inline-flex; animation: chtSendIn .18s var(--cht-ease-out, ease); }
.cht-tec .cht-send-alt:hover { background: var(--cht-surface-2); border-color: var(--cht-line); color: var(--cht-ink-2); }
.cht-tec .cht-send-alt--solve { color: #15803d; border-color: #bfe3cb; background: #f0f9f3; }
.cht-tec .cht-send-alt--solve:hover { background: #e2f4e8; border-color: #a6d7b7; color: #106a31; }
@keyframes chtSendIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
/* estado fechado — nota + Reabrir contextual lado a lado */
.cht-tec .cht-readonly-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cht-tec .cht-reopen-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  cursor: pointer; font: 600 12px var(--cht-fu);
  padding: 7px 14px; border-radius: var(--cht-r-pill);
  border: 1px solid var(--cht-line-2); background: var(--cht-surface); color: var(--cht-ink-2);
  transition: background var(--cht-dur), border-color var(--cht-dur);
}
.cht-tec .cht-reopen-btn svg { width: 14px; height: 14px; }
.cht-tec .cht-reopen-btn:hover { background: var(--cht-surface-2); border-color: var(--cht-line); }

/* Bloco "quem" (aside) — Solicitante + Técnico empilhados; rotulo em cima, valor
   embaixo. Quando sem técnico, a linha do Técnico vira o botao "Atribuir a mim". */
.cht-tec .cht-whoblock { display: flex; flex-direction: column; gap: 13px; }
.cht-tec .cht-whorow { display: flex; flex-direction: column; gap: 5px; }
.cht-tec .cht-wholbl { font: 600 10.5px var(--cht-fu); letter-spacing: .04em; text-transform: uppercase; color: var(--cht-ink-4); }
.cht-tec .cht-whoval { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cht-ink-2); min-width: 0; }
.cht-tec .cht-whoval b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cht-tec .cht-whoyou { flex: none; font: 600 9.5px var(--cht-fu); letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--cht-accent); padding: 2px 7px; border-radius: var(--cht-r-pill); }
/* "Assumir também" — variante pequena/discreta (multi-técnico). Sem técnico, a
   "Atribuir a mim" segue como o botao grande (CTA principal). */
.cht-tec .cht-atrib-btn--sm { width: auto; align-self: flex-start; padding: 6px 12px; font-size: 12px; background: var(--cht-surface); background-image: none; color: var(--cht-accent); border: 1px solid var(--cht-line-2); box-shadow: none; }
.cht-tec .cht-atrib-btn--sm:hover { background: var(--cht-accent-weak); border-color: var(--cht-accent-line, var(--cht-accent)); filter: none; transform: none; box-shadow: none; }

/* Status em DESTAQUE no cabeçalho — badge grande, colorido por status (GLPI-like:
   verde solucionado, laranja pendente, azul novo, etc.). Sempre visível. */
.cht-tec .cht-status-hero { display: inline-flex; align-items: center; gap: 8px; padding: 6px 15px; border-radius: var(--cht-r-pill); font: 700 13.5px var(--cht-fu); letter-spacing: .01em; }
.cht-tec .cht-status-hero .cht-dot { width: 10px; height: 10px; }
.cht-tec .cht-status-hero[data-status="novo"] { background: var(--cht-novo-weak); color: var(--cht-novo); }
.cht-tec .cht-status-hero[data-status="em_atendimento"] { background: var(--cht-atend-weak); color: var(--cht-atend); }
.cht-tec .cht-status-hero[data-status="pendente"] { background: var(--cht-pend-weak); color: var(--cht-pend); }
.cht-tec .cht-status-hero[data-status="solucionado"] { background: var(--cht-soluc-weak); color: var(--cht-soluc); }
.cht-tec .cht-status-hero[data-status="fechado"] { background: var(--cht-fech-weak); color: var(--cht-fech); }

/* Solução destacada na conversa — moldura verde + cabeçalho "✓ Solução". */
.cht-tec .cht-msg.is-solucao .cht-bub { border: 1.5px solid var(--cht-soluc); background: var(--cht-soluc-weak); box-shadow: 0 0 0 3px rgba(28,127,77,.08); }
/* A bolha destacada é a última resposta do SUPORTE → lado .me (texto branco sobre
   azul). O realce troca só o FUNDO (verde-claro); sem resetar a cor, corpo, nome e
   timestamp ficavam brancos e sumiam. Reset para tinta escura legível no fundo claro. */
.cht-tec .cht-msg.is-solucao .cht-bub,
.cht-tec .cht-msg.is-solucao .cht-bub .bd,
.cht-tec .cht-msg.is-solucao .cht-bub .nm { color: var(--cht-ink); }
.cht-tec .cht-msg.is-solucao .cht-bub .tm { color: var(--cht-ink-3); }
.cht-tec .cht-msg.is-solucao .cht-bub .role { background: rgba(28,127,77,.12); color: var(--cht-soluc); }
.cht-tec .cht-sol-hd { display: flex; align-items: center; gap: 6px; font: 700 11px var(--cht-fu); text-transform: uppercase; letter-spacing: .04em; color: var(--cht-soluc); margin-bottom: 5px; }
.cht-tec .cht-sol-hd svg { width: 14px; height: 14px; }

/* Reabertura/reprovação destacada na conversa (vermelho) — espelho da solução. */
.cht-tec .cht-msg.is-reabertura .cht-bub { border: 1.5px solid #e0908f; background: #fdecec; box-shadow: 0 0 0 3px rgba(180,35,24,.07); }
/* Mesmo reset da solução: se o realce cair numa bolha .me (texto branco), o fundo
   rosa-claro engoliria o texto. Tinta escura legível. */
.cht-tec .cht-msg.is-reabertura .cht-bub,
.cht-tec .cht-msg.is-reabertura .cht-bub .bd,
.cht-tec .cht-msg.is-reabertura .cht-bub .nm { color: var(--cht-ink); }
.cht-tec .cht-msg.is-reabertura .cht-bub .tm { color: var(--cht-ink-3); }
.cht-tec .cht-msg.is-reabertura .cht-bub .role { background: rgba(180,35,24,.12); color: #b42318; }
.cht-tec .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-tec .cht-reab-hd svg { width: 14px; height: 14px; }

/* aside — secoes, SLA heroi (.cht-slac da base), propriedades */
.cht-tec .asec {
  padding: 16px 18px;
  border-bottom: 1px solid var(--cht-line);
  min-width: 0;
}
.cht-tec .asec:last-child { border-bottom: none; }

/* "Atribuir a mim" — CTA do técnico no topo do aside */
.cht-tec .asec.cht-atrib { display: flex; flex-direction: column; gap: 6px; }
.cht-tec .cht-atrib-btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  font: 700 13px var(--cht-fd); letter-spacing: -.005em;
  color: #fff; background: var(--cht-accent); background-image: var(--cht-grad-accent-soft);
  border: 1px solid var(--cht-accent-ink);
  border-radius: var(--cht-r); padding: 10px 14px;
  box-shadow: var(--cht-sh-1);
  transition: filter var(--cht-dur) var(--cht-ease), box-shadow var(--cht-dur) var(--cht-ease), transform var(--cht-dur) var(--cht-ease);
}
.cht-tec .cht-atrib-btn svg { width: 16px; height: 16px; }
.cht-tec .cht-atrib-btn:hover { filter: brightness(1.05); box-shadow: var(--cht-sh-2); transform: translateY(-1px); }
.cht-tec .cht-atrib-btn:disabled { opacity: .6; cursor: default; transform: none; box-shadow: var(--cht-sh-1); }
.cht-tec .cht-atrib-hint { margin: 0; font: 500 11.5px var(--cht-fu); color: var(--cht-ink-4); text-align: center; }
.cht-tec .cht-atrib-ok {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 12.5px var(--cht-fu); color: var(--cht-ok);
  background: var(--cht-ok-weak); border: 1px solid var(--cht-ok);
  border-radius: var(--cht-r-sm); padding: 8px 12px;
}
.cht-tec .cht-atrib-ok svg { width: 15px; height: 15px; flex: none; }
.cht-tec .asec .lbl {
  font: 700 10.5px var(--cht-fu);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cht-ink-3);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cht-tec .asec .lbl svg { width: 14px; height: 14px; color: var(--cht-accent); }

/* propaga o estado do SLA (o ticker poe is-* no .count) para o card .cht-slac */
.cht-tec .cht-slac:has(.count.is-warn) { background: var(--cht-warn-weak); border-color: var(--cht-warn-line); }
.cht-tec .cht-slac:has(.count.is-warn) .count,
.cht-tec .cht-slac:has(.count.is-warn) [data-cht-slac-st] { color: var(--cht-warn); }
.cht-tec .cht-slac:has(.count.is-warn) .bar > i { background: var(--cht-warn); }
.cht-tec .cht-slac:has(.count.is-breach) { background: var(--cht-breach-weak); border-color: var(--cht-breach-line); }
.cht-tec .cht-slac:has(.count.is-breach) .count,
.cht-tec .cht-slac:has(.count.is-breach) [data-cht-slac-st] { color: var(--cht-breach); }
.cht-tec .cht-slac:has(.count.is-breach) .bar > i { background: var(--cht-breach); }
.cht-tec .cht-slac:has(.count.is-ok) .count,
.cht-tec .cht-slac:has(.count.is-ok) [data-cht-slac-st] { color: var(--cht-ok); }
.cht-tec .cht-slac:has(.count.is-ok) .bar > i { background: var(--cht-ok); }
.cht-tec .cht-slac:has(.count.is-atendido) .count { font-size: 15px; color: var(--cht-ok); }
.cht-tec .cht-slac:has(.count.is-atendido) [data-cht-slac-st] { color: var(--cht-ok); }

/* propriedades — chave/valor; status/prioridade viram selects inline */
.cht-tec .props {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.cht-tec .props .prop {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cht-tec .props .prop .k {
  width: 82px;
  font-size: 11.5px;
  color: var(--cht-ink-3);
  flex: none;
}
.cht-tec .props .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: 1 1 auto;
}
/* select inline com o mesmo visual dos campos da base, compacto */
.cht-tec .cht-prop-select {
  padding: 6px 28px 6px 10px;
  border-radius: var(--cht-r-sm);
  font-size: 12.5px;
  background-position: right 8px center;
}
.cht-tec .cht-descricao {
  margin: 0;
  font-size: 12.5px;
  color: var(--cht-ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

/* ══════════════════════════════════════════════════════════════════════════
   B2 · FASE 2 — RESOLUCAO / CAUSA-RAIZ + ANEXOS (no aside do detalhe)
   ══════════════════════════════════════════════════════════════════════════ */
.cht-tec .cht-res-hint {
  margin: 0 0 11px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--cht-ink-3);
}
.cht-tec .cht-res-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 11px;
  min-width: 0;
}
.cht-tec .cht-res-field:last-child { margin-bottom: 0; }
.cht-tec .cht-res-field .rk {
  font: 600 11.5px var(--cht-fu);
  color: var(--cht-ink-2);
}
.cht-tec .cht-res-field .cht-prop-select { width: 100%; min-width: 0; }
.cht-tec .cht-res-note {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed var(--cht-line-2);
  border-radius: var(--cht-r);
  background: var(--cht-surface-2);
  color: var(--cht-ink-3);
  font-size: 11.5px;
  line-height: 1.45;
}

/* Anexos — lista + botao de upload (input escondido dentro do label) */
.cht-tec .cht-anexos-note {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--cht-ink-3);
}
.cht-tec .cht-anexos-note.is-err { color: var(--cht-breach); }
.cht-tec .cht-anexos-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.cht-tec .cht-anexo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid var(--cht-line);
  border-radius: var(--cht-r-sm);
  background: var(--cht-surface);
  min-width: 0;
}
.cht-tec .cht-anexo .ax-ic {
  flex: none;
  color: var(--cht-ink-3);
  display: grid;
  place-items: center;
}
.cht-tec .cht-anexo .ax-ic svg { width: 15px; height: 15px; }
.cht-tec .cht-anexo .ax-info {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cht-tec .cht-anexo .ax-nm {
  font: 600 12px var(--cht-fu);
  color: var(--cht-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cht-tec .cht-anexo .ax-meta {
  font: 500 10.5px var(--cht-fm);
  color: var(--cht-ink-4);
  font-variant-numeric: tabular-nums;
}
.cht-tec .cht-anexo .ax-btn {
  flex: none;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--cht-r-sm);
  background: transparent;
  color: var(--cht-ink-3);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--cht-dur), color var(--cht-dur);
}
.cht-tec .cht-anexo .ax-btn:hover { background: var(--cht-surface-2); color: var(--cht-accent-ink); }
.cht-tec .cht-anexo .ax-btn.ax-del:hover { background: var(--cht-breach-weak); color: var(--cht-breach); }
.cht-tec .cht-anexo .ax-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cht-accent-weak); }
.cht-tec .cht-anexo .ax-btn svg { width: 15px; height: 15px; }

.cht-tec .cht-anexos-actions { min-width: 0; }
.cht-tec .cht-anexo-add {
  cursor: pointer;
  width: 100%;
  justify-content: center;
}
.cht-tec .cht-anexo-add.is-busy { opacity: .7; cursor: progress; }
.cht-tec .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;
}

/* ══════════════════════════════════════════════════════════════════════════
   D · FASE 2 — DASHBOARD DE INDICADORES (.cht-ind) — leading vs lagging,
   KPIs, Pareto/tendencia em SVG proprio, tabelas densas, CSAT. Monocromatico
   frio + cor semantica quarentenada (k-ok/k-warn/k-breach). Mobile: empilha.
   ══════════════════════════════════════════════════════════════════════════ */
.cht-tec .cht-ind { min-width: 0; }

.cht-tec .cht-ind-head {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--cht-line);
  min-width: 0;
}
.cht-tec .cht-ind-head h1 {
  margin: 0;
  font: 800 20px/1.1 var(--cht-fd);
  letter-spacing: -.01em;
  color: var(--cht-ink);
}
.cht-tec .cht-ind-head .sub {
  margin: 5px 0 0;
  font-size: 12.5px;
  color: var(--cht-ink-3);
  max-width: 68ch;
  line-height: 1.45;
}

/* toolbar — chips de periodo + select de categoria + janela */
.cht-tec .cht-ind-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-bottom: 1px solid var(--cht-line);
  min-width: 0;
}
.cht-tec .cht-ind-chips {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.cht-tec .cht-ind-tb-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.cht-tec .cht-ind-cat {
  width: min(230px, 100%);
  padding: 6px 28px 6px 10px;
  font-size: 12px;
}
.cht-tec .cht-ind-janela {
  font: 500 11px var(--cht-fm);
  color: var(--cht-ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cht-tec .cht-ind-body {
  padding: 16px 20px 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start; /* cada card do tamanho do seu conteudo — sem vazio interno */
  gap: 14px;
  min-width: 0;
}
/* secoes que precisam de largura total (graficos e tabelas largas) */
.cht-tec .cht-ind-sec.span-2 { grid-column: 1 / -1; }

.cht-tec .cht-ind-sec {
  border: 1px solid var(--cht-line);
  border-radius: var(--cht-r-lg);
  background: var(--cht-surface);
  padding: 14px 15px 15px;
  min-width: 0;
  box-shadow: var(--cht-sh-1);
  transition: box-shadow var(--cht-dur-2) var(--cht-ease-out), border-color var(--cht-dur) var(--cht-ease);
}
.cht-tec .cht-ind-sec:hover { box-shadow: var(--cht-sh-2); border-color: var(--cht-line-2); }
/* seções do dashboard entram em cascata (fade+rise, 1ª pintura) */
@media (prefers-reduced-motion: no-preference) {
  .cht-tec .cht-ind-body > .cht-ind-sec { animation: cht-rise-in var(--cht-dur-3) var(--cht-ease-out) both; }
  .cht-tec .cht-ind-body > .cht-ind-sec:nth-child(1) { animation-delay: 30ms; }
  .cht-tec .cht-ind-body > .cht-ind-sec:nth-child(2) { animation-delay: 80ms; }
  .cht-tec .cht-ind-body > .cht-ind-sec:nth-child(3) { animation-delay: 130ms; }
  .cht-tec .cht-ind-body > .cht-ind-sec:nth-child(4) { animation-delay: 180ms; }
  .cht-tec .cht-ind-body > .cht-ind-sec:nth-child(5) { animation-delay: 230ms; }
  .cht-tec .cht-ind-body > .cht-ind-sec:nth-child(n+6) { animation-delay: 270ms; }
}
.cht-tec .cht-ind-sec-h {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  min-width: 0;
}
.cht-tec .cht-ind-sec-h .ic {
  flex: none;
  color: var(--cht-accent);
  display: grid;
  place-items: center;
}
.cht-tec .cht-ind-sec-h .ic svg { width: 16px; height: 16px; }
.cht-tec .cht-ind-sec-h h3 {
  margin: 0;
  font: 700 13.5px var(--cht-fd);
  letter-spacing: -.005em;
  color: var(--cht-ink);
  min-width: 0;
}
.cht-tec .cht-ind-sec-h .hint {
  flex-basis: 100%;
  font-size: 11px;
  color: var(--cht-ink-3);
  line-height: 1.4;
}
/* selo leading (preditivo) x lagging (historico) */
.cht-tec .cht-ind-lead {
  font: 700 9.5px var(--cht-fu);
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--cht-r-pill);
  flex: none;
}
.cht-tec .cht-ind-lead.lead-a { background: var(--cht-accent-weak); color: var(--cht-accent-ink); }
.cht-tec .cht-ind-lead.lead-b { background: var(--cht-surface-3); color: var(--cht-ink-3); }

/* KPIs internos da secao (reusa .cht-kpi da base; ajustes de grid + badge) */
.cht-tec .cht-ind-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cht-tec .cht-ind-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cht-tec .cht-ind-kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cht-tec .cht-ind-kpi { background: var(--cht-surface-2); }
.cht-tec .cht-ind-kpi.k-breach::before { background: var(--cht-breach); }
.cht-tec .cht-ind-kpi.k-breach .n { color: var(--cht-breach); }
.cht-tec .cht-ind-kpi .sub {
  margin-top: 4px;
  font: 500 10.5px var(--cht-fu);
  color: var(--cht-ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cht-tec .cht-ind-kpi { position: relative; }
.cht-tec .cht-ind-badge {
  position: absolute;
  top: 8px; right: 9px;
  font: 700 9px var(--cht-fm);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cht-ink-4);
  background: var(--cht-surface);
  border: 1px solid var(--cht-line-2);
  padding: 1px 5px;
  border-radius: var(--cht-r-pill);
}

/* linha de contadores por status (backlog) */
.cht-tec .cht-ind-statusrow {
  display: flex;
  gap: 8px 14px;
  flex-wrap: wrap;
  margin-top: 12px;
  min-width: 0;
}
.cht-tec .cht-ind-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.cht-tec .cht-ind-stat .cht-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cht-fech);
  flex: none;
}
.cht-tec .cht-ind-stat[data-status="novo"] .cht-dot { background: var(--cht-novo); }
.cht-tec .cht-ind-stat[data-status="em_atendimento"] .cht-dot { background: var(--cht-atend); }
.cht-tec .cht-ind-stat[data-status="pendente"] .cht-dot { background: var(--cht-pend); }
.cht-tec .cht-ind-stat[data-status="solucionado"] .cht-dot { background: var(--cht-soluc); }
.cht-tec .cht-ind-stat[data-status="fechado"] .cht-dot { background: var(--cht-fech); }
.cht-tec .cht-ind-stat .sl { font: 500 11.5px var(--cht-fu); color: var(--cht-ink-2); }
.cht-tec .cht-ind-stat .sv {
  font: 600 12px var(--cht-fm);
  color: var(--cht-ink);
  font-variant-numeric: tabular-nums;
}

/* tabelas densas (MTTA por prioridade, dwell, aging, SLA, reincidencia) */
.cht-tec .cht-ind-table {
  margin-top: 12px;
  border: 1px solid var(--cht-line);
  border-radius: var(--cht-r);
  overflow: hidden;
  min-width: 0;
}
.cht-tec .cht-ind-table .tr {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border-top: 1px solid var(--cht-line);
  min-width: 0;
}
.cht-tec .cht-ind-table .tr.tr-4 { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
.cht-tec .cht-ind-table .tr.tr-5 { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); }
.cht-tec .cht-ind-table .tr:first-child { border-top: none; }
.cht-tec .cht-ind-table .tr.th {
  background: var(--cht-surface-2);
  font: 600 10px var(--cht-fu);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cht-ink-3);
}
/* cabeçalhos das colunas numéricas alinham à direita p/ baterem com os valores */
.cht-tec .cht-ind-table .tr.th > span:not(:first-child) { text-align: right; }
.cht-tec .cht-ind-table .tr:not(.th) {
  font-size: 12px;
  color: var(--cht-ink);
}
.cht-tec .cht-ind-table .tr:not(.th) > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.cht-tec .cht-ind-table .tr .cht-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cht-fech);
  flex: none;
}
.cht-tec .cht-ind-table .tr[data-status="novo"] .cht-dot { background: var(--cht-novo); }
.cht-tec .cht-ind-table .tr[data-status="em_atendimento"] .cht-dot { background: var(--cht-atend); }
.cht-tec .cht-ind-table .tr[data-status="pendente"] .cht-dot { background: var(--cht-pend); }
.cht-tec .cht-ind-table .tr[data-status="solucionado"] .cht-dot { background: var(--cht-soluc); }
.cht-tec .cht-ind-table .tr[data-status="fechado"] .cht-dot { background: var(--cht-fech); }
.cht-tec .cht-ind-table .num {
  text-align: right;
  font-family: var(--cht-fm);
  font-variant-numeric: tabular-nums;
  color: var(--cht-ink-2);
}
.cht-tec .cht-ind-table .ell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cht-tec .cht-ind-aging .num.a-warn { color: var(--cht-warn); }
.cht-tec .cht-ind-aging .num.a-breach { color: var(--cht-breach); }

/* tag semantica compacta (%, taxa) */
.cht-tec .cht-ind-tag {
  display: inline-block;
  font: 600 11px var(--cht-fm);
  padding: 1px 7px;
  border-radius: var(--cht-r-pill);
  font-variant-numeric: tabular-nums;
  background: var(--cht-surface-3);
  color: var(--cht-ink-2);
}
.cht-tec .cht-ind-tag.t-ok { background: var(--cht-ok-weak); color: var(--cht-ok); }
.cht-tec .cht-ind-tag.t-warn { background: var(--cht-warn-weak); color: var(--cht-warn); }
.cht-tec .cht-ind-tag.t-breach { background: var(--cht-breach-weak); color: var(--cht-breach); }

/* mini-stats (reatribuicoes, frt, sem tecnico) */
.cht-tec .cht-ind-mini {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 9px;
  margin-top: 12px;
  min-width: 0;
}
.cht-tec .cht-ind-ministat {
  border: 1px solid var(--cht-line);
  border-radius: var(--cht-r);
  padding: 9px 11px;
  background: var(--cht-surface-2);
  min-width: 0;
}
.cht-tec .cht-ind-ministat .mv {
  display: block;
  font: 800 17px var(--cht-fd);
  letter-spacing: -.01em;
  color: var(--cht-ink);
  font-variant-numeric: tabular-nums;
}
.cht-tec .cht-ind-ministat .ml {
  display: block;
  margin-top: 2px;
  font: 500 10.5px var(--cht-fu);
  color: var(--cht-ink-3);
}
.cht-tec .cht-ind-ministat.t-warn .mv { color: var(--cht-warn); }
.cht-tec .cht-ind-ministat.t-breach .mv { color: var(--cht-breach); }

/* graficos SVG (Pareto, tendencia) */
.cht-tec .cht-ind-chart {
  margin-top: 6px;
  border-radius: var(--cht-r);
  background: var(--cht-surface-2);
  border: 1px solid var(--cht-line);
  padding: 8px 6px 4px;
  min-width: 0;
  overflow: hidden;
}
/* SVG largo/baixo; teto de altura como cinto-de-seguranca em telas ultra-largas */
.cht-tec .cht-ind-svg { display: block; width: 100%; height: auto; max-height: 240px; margin: 0 auto; }
.cht-tec .cht-ind-legends {
  display: flex;
  gap: 8px 14px;
  flex-wrap: wrap;
  margin-top: 8px;
  min-width: 0;
}
.cht-tec .cht-ind-legend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--cht-ink-3);
  min-width: 0;
}
.cht-tec .cht-ind-legend b { color: var(--cht-ink); font-weight: 700; }
.cht-tec .cht-ind-legend .sw {
  width: 12px; height: 8px;
  border-radius: 2px;
  flex: none;
}
.cht-tec .cht-ind-legend .sw-vol { background: var(--cht-accent-weak); border: 1px solid var(--cht-accent); }
.cht-tec .cht-ind-legend .sw-mttr { background: #4f6ae8; height: 3px; align-self: center; }

/* barra de legenda do dashboard — clareza de leitura (preditivo/historico/cores) */
.cht-tec .cht-ind-legendbar {
  display: flex;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
  padding: 10px 20px;
  border-bottom: 1px solid var(--cht-line);
  background: var(--cht-surface-2);
  min-width: 0;
}
.cht-tec .cht-ind-legendbar .lg-grp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.cht-tec .cht-ind-legendbar .lg-hint {
  font-size: 11px;
  color: var(--cht-ink-3);
  line-height: 1.3;
}
.cht-tec .cht-ind-legendbar .lg-hint b {
  color: var(--cht-ink-2);
  font-weight: 700;
  font-family: var(--cht-fm);
}
.cht-tec .cht-ind-legendbar .lg-sep {
  width: 1px;
  align-self: stretch;
  min-height: 16px;
  background: var(--cht-line-2);
}
.cht-tec .cht-ind-legendbar .lg-sem { gap: 6px 10px; }
.cht-tec .cht-ind-legendbar .lg-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: none;
}
.cht-tec .cht-ind-legendbar .lg-dot.d-ok { background: var(--cht-ok); }
.cht-tec .cht-ind-legendbar .lg-dot.d-warn { background: var(--cht-warn); }
.cht-tec .cht-ind-legendbar .lg-dot.d-breach { background: var(--cht-breach); }

/* CSAT — barras horizontais 1..5 */
.cht-tec .cht-ind-csat {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cht-tec .cht-ind-csbar {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.cht-tec .cht-ind-csbar .lbl {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font: 600 12px var(--cht-fm);
  color: var(--cht-ink-2);
}
.cht-tec .cht-ind-csbar .lbl svg { color: var(--cht-warn); }
.cht-tec .cht-ind-csbar .track {
  height: 9px;
  border-radius: var(--cht-r-pill);
  background: var(--cht-surface-3);
  overflow: hidden;
  min-width: 0;
}
.cht-tec .cht-ind-csbar .fill {
  display: block;
  height: 100%;
  border-radius: var(--cht-r-pill);
  background: var(--cht-ink-4);
  /* preenche com transição viva quando pintado */
  transition: width 800ms var(--cht-ease-out), background-color var(--cht-dur) var(--cht-ease);
}
.cht-tec .cht-ind-csbar .fill.f-ok { background: var(--cht-ok); }
.cht-tec .cht-ind-csbar .fill.f-warn { background: var(--cht-warn); }
.cht-tec .cht-ind-csbar .fill.f-breach { background: var(--cht-breach); }
.cht-tec .cht-ind-csbar .v {
  text-align: right;
  font: 600 11px var(--cht-fm);
  color: var(--cht-ink-2);
  font-variant-numeric: tabular-nums;
}

/* breaches de SLA */
.cht-tec .cht-ind-breaches {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
  min-width: 0;
}
.cht-tec .cht-ind-breaches .bl {
  font: 600 11px var(--cht-fu);
  color: var(--cht-ink-3);
}

/* empty inline dentro de secao */
.cht-tec .cht-ind-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  color: var(--cht-ink-3);
  font-size: 12px;
  border: 1px dashed var(--cht-line-2);
  border-radius: var(--cht-r);
  background: var(--cht-surface-2);
  margin-top: 10px;
}
.cht-tec .cht-ind-empty svg { width: 18px; height: 18px; flex: none; color: var(--cht-ink-4); }

/* estados de carga/erro */
.cht-tec .cht-ind-loading { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.cht-tec .cht-ind-skel-head,
.cht-tec .cht-ind-skel-chart,
.cht-tec .cht-ind-skel-kpis > i {
  background: var(--cht-surface-3);
  border-radius: var(--cht-r);
  animation: chtShimmer 1.2s var(--cht-ease) infinite;
}
.cht-tec .cht-ind-skel-head { height: 46px; }
.cht-tec .cht-ind-skel-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cht-tec .cht-ind-skel-kpis > i { height: 66px; display: block; }
.cht-tec .cht-ind-skel-chart { height: 190px; }
@keyframes chtShimmer { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.cht-tec .cht-ind-errbox {
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  color: var(--cht-ink-3);
}
.cht-tec .cht-ind-errbox svg { width: 30px; height: 30px; color: var(--cht-breach); }
.cht-tec .cht-ind-errbox p { margin: 0; font-size: 13px; }

/* ══════════════════════════════════════════════════════════════════════════
   D2 · REDESIGN DIDÁTICO (2026-07-02) — perguntas em PT, 3 camadas (abas),
   filtros Período+Fonte+Sistema+Prioridade. Cor semântica QUARENTENADA
   (c-ok/c-warn/c-breach só onde o estado exige). Sobrepõe regras antigas.
   ══════════════════════════════════════════════════════════════════════════ */

/* cores semânticas — texto (quarentenadas) */
.cht-tec .cht-ind .c-ok { color: var(--cht-ok); }
.cht-tec .cht-ind .c-warn { color: var(--cht-warn); }
.cht-tec .cht-ind .c-breach { color: var(--cht-breach); }

/* toolbar (override: coluna com 2 linhas) */
.cht-tec .cht-ind-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--cht-line);
  background: var(--cht-surface);
}
.cht-tec .cht-ind-tbrow {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  min-width: 0;
}
/* período agora é SEGMENTADO (igual ao escopo) — controles coesos, não pílulas soltas */
.cht-tec .cht-ind-chips {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--cht-surface-3);
  border: 1px solid var(--cht-line);
  border-radius: var(--cht-r-pill);
  min-width: 0; max-width: 100%;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.cht-tec .cht-ind-chips::-webkit-scrollbar { display: none; }

/* segmentado de FONTE — o controle mais consequente do projeto */
.cht-tec .cht-ind-seggrp {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--cht-surface-3);
  border: 1px solid var(--cht-line);
  border-radius: var(--cht-r-pill);
  margin-left: auto;
}
.cht-tec .cht-ind-seg {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--cht-ink-2);
  font: 600 12px var(--cht-fu);
  padding: 5px 12px;
  border-radius: var(--cht-r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--cht-dur) var(--cht-ease), color var(--cht-dur) var(--cht-ease);
}
.cht-tec .cht-ind-seg:hover { color: var(--cht-ink); }
.cht-tec .cht-ind-seg.on {
  background: var(--cht-surface);
  color: var(--cht-accent-ink);
  box-shadow: var(--cht-sh-1);
}
.cht-tec .cht-ind-sel {
  width: min(240px, 100%);
  padding: 6px 28px 6px 11px;
  font-size: 12.5px;
}
.cht-tec .cht-ind-fchips { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cht-tec .cht-ind-fchip {
  appearance: none; cursor: pointer;
  background: var(--cht-accent-weak);
  color: var(--cht-accent-ink);
  border: 1px solid var(--cht-accent-line, #c7d5f2);
  border-radius: var(--cht-r-pill);
  font: 600 11.5px var(--cht-fu);
  padding: 3px 9px;
}
.cht-tec .cht-ind-fclear {
  appearance: none; cursor: pointer;
  background: transparent; border: 0;
  color: var(--cht-ink-3);
  font: 600 11.5px var(--cht-fu);
  text-decoration: underline;
  padding: 3px 4px;
}
.cht-tec .cht-ind-resumo {
  margin: 0;
  padding: 9px 20px;
  font-size: 12px;
  color: var(--cht-ink-3);
  border-bottom: 1px solid var(--cht-line);
}
.cht-tec .cht-ind-resumo b { color: var(--cht-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* abas (camadas) */
.cht-tec .cht-ind-abas {
  display: flex;
  gap: 2px;
  padding: 10px 20px 0;
  border-bottom: 1px solid var(--cht-line);
  overflow-x: auto;
}
.cht-tec .cht-ind-aba {
  appearance: none; cursor: pointer;
  background: transparent; border: 0;
  border-bottom: 2px solid transparent;
  color: var(--cht-ink-3);
  font: 700 13px var(--cht-fd);
  letter-spacing: -.005em;
  padding: 8px 12px 10px;
  white-space: nowrap;
  transition: color var(--cht-dur) var(--cht-ease), border-color var(--cht-dur) var(--cht-ease);
}
.cht-tec .cht-ind-aba:hover { color: var(--cht-ink); }
.cht-tec .cht-ind-aba.on { color: var(--cht-accent-ink); border-bottom-color: var(--cht-accent); }

.cht-tec .cht-ind-painel { padding: 18px 20px 24px; min-width: 0; }
.cht-tec .cht-ind-painel.is-loading { opacity: .5; pointer-events: none; }

/* selo de fonte (nota fina do topo do cartão/seção) */
.cht-tec .cht-ind-src {
  flex: none;
  font: 700 9.5px var(--cht-fu);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cht-ink-3);
  background: var(--cht-surface-3);
  border-radius: var(--cht-r-pill);
  padding: 2px 8px;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   Nova linguagem dos Indicadores (2026-07-03): tiles temáticos (cor por
   significado) + cards-âncora largos + estados vazios intencionais. As três
   abas (Visão geral / Tendências / Diagnóstico) compartilham o mesmo léxico.
   ══════════════════════════════════════════════════════════════════════════ */
.cht-tec .cht-ind-flow { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cht-tec .cht-ind-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.cht-tec .cht-ind-tiles.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cht-tec .cht-ind-wide { display: grid; grid-template-columns: 1.55fr 1fr; gap: 12px; min-width: 0; }

/* tile temático — número grande e vivo, cor por significado */
.cht-tec .cht-ind-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--cht-surface);
  border: 1px solid var(--cht-line);
  border-radius: var(--cht-r);
  box-shadow: var(--cht-sh-1);
  padding: 14px 15px;
  transition: box-shadow var(--cht-dur-2) var(--cht-ease-out), transform var(--cht-dur-2) var(--cht-ease-out);
}
.cht-tec .cht-ind-tile:hover { box-shadow: var(--cht-sh-2); transform: translateY(-1px); }
@media (prefers-reduced-motion: no-preference) {
  .cht-tec .cht-ind-tiles > .cht-ind-tile { animation: cht-rise-in var(--cht-dur-3) var(--cht-ease-out) both; }
  .cht-tec .cht-ind-tiles > .cht-ind-tile:nth-child(2) { animation-delay: 55ms; }
  .cht-tec .cht-ind-tiles > .cht-ind-tile:nth-child(3) { animation-delay: 100ms; }
  .cht-tec .cht-ind-tiles > .cht-ind-tile:nth-child(4) { animation-delay: 145ms; }
  .cht-tec .cht-ind-flow > .cht-ind-card,
  .cht-tec .cht-ind-wide > .cht-ind-card { animation: cht-rise-in var(--cht-dur-3) var(--cht-ease-out) both; animation-delay: 120ms; }
}
.cht-tec .cht-ind-tile .top { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; min-width: 0; }
.cht-tec .cht-ind-tile .ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; }
.cht-tec .cht-ind-tile .ic svg { width: 17px; height: 17px; }
.cht-tec .cht-ind-tile .lb { font: 600 12px/1.2 var(--cht-fu); color: var(--cht-ink-3); min-width: 0; }
.cht-tec .cht-ind-tile .tag {
  flex: none; margin-left: auto;
  font: 700 9px var(--cht-fu); letter-spacing: .05em; text-transform: uppercase;
  color: var(--cht-ink-4); background: var(--cht-surface-3);
  border-radius: 5px; padding: 2px 6px;
}
.cht-tec .cht-ind-tile .n { font: 800 32px/1 var(--cht-fd); letter-spacing: -.02em; color: var(--cht-ink); font-variant-numeric: tabular-nums; }
.cht-tec .cht-ind-tile .n .u { font: 700 16px var(--cht-fd); color: var(--cht-ink-4); margin-left: 3px; }
.cht-tec .cht-ind-tile .ctx { margin-top: 9px; font-size: 12px; line-height: 1.4; color: var(--cht-ink-3); }
.cht-tec .cht-ind-tile .ctx b { color: var(--cht-ink); font-weight: 700; }
.cht-tec .cht-ind-tile .ctx i { font-style: normal; color: var(--cht-ink-4); }
/* temas — caixa do ícone tingida + número colorido */
.cht-tec .cht-ind-tile.t-acc .ic { background: var(--cht-accent-weak); color: var(--cht-accent-ink); }
.cht-tec .cht-ind-tile.t-acc .n { color: var(--cht-novo); }
.cht-tec .cht-ind-tile.t-warn .ic { background: var(--cht-warn-weak); color: var(--cht-warn); }
.cht-tec .cht-ind-tile.t-warn .n { color: var(--cht-warn); }
.cht-tec .cht-ind-tile.t-breach .ic { background: var(--cht-breach-weak); color: var(--cht-breach); }
.cht-tec .cht-ind-tile.t-breach .n { color: var(--cht-breach); }
.cht-tec .cht-ind-tile.t-ok .ic { background: var(--cht-ok-weak); color: var(--cht-ok); }
.cht-tec .cht-ind-tile.t-ok .n { color: var(--cht-ok); }
.cht-tec .cht-ind-tile.t-mut .ic { background: var(--cht-surface-3); color: var(--cht-ink-3); }
.cht-tec .cht-ind-tile.t-mut .n { color: var(--cht-ink); }
/* estado vazio dentro do tile — intencional, não oco */
.cht-tec .cht-ind-tile.empty { align-items: flex-start; }
.cht-tec .cht-ind-tile .none {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font-size: 12.5px; color: var(--cht-ink-4);
  background: var(--cht-surface-2); border: 1px dashed var(--cht-line-2);
  border-radius: var(--cht-r-sm); padding: 10px 12px;
}
.cht-tec .cht-ind-tile .none svg { flex: none; width: 16px; height: 16px; }

/* card-âncora — largura total, reusa .cht-ind-card + .cht-ind-card-h */
.cht-tec .cht-ind-card.full { width: 100%; }
.cht-tec .cht-ind-subhint { margin: 2px 0 12px 39px; font-size: 11.5px; color: var(--cht-ink-4); line-height: 1.4; }

/* medidores de prazo lado a lado (SLA) */
.cht-tec .cht-ind-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cht-tec .cht-ind-gauges .cht-ind-medidor .mp { font-size: 16px; }

/* dwell — onde o tempo se perde (tabela-âncora com gargalo realçado) */
.cht-tec .cht-ind-dwell { border: 1px solid var(--cht-line); border-radius: var(--cht-r); overflow: hidden; }
.cht-tec .cht-ind-dwell .tr { display: grid; grid-template-columns: minmax(0, 1.5fr) .7fr .8fr .8fr; align-items: center; padding: 9px 13px; font-size: 12.5px; }
.cht-tec .cht-ind-dwell .tr + .tr { border-top: 1px solid var(--cht-line); }
.cht-tec .cht-ind-dwell .th { background: var(--cht-surface-2); color: var(--cht-ink-4); font: 700 10.5px var(--cht-fu); letter-spacing: .04em; text-transform: uppercase; }
.cht-tec .cht-ind-dwell .st { display: inline-flex; align-items: center; gap: 8px; color: var(--cht-ink-2); font-weight: 600; min-width: 0; }
.cht-tec .cht-ind-dwell .st .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cht-ink-4); }
.cht-tec .cht-ind-dwell .st.s-novo .dot { background: var(--cht-novo); }
.cht-tec .cht-ind-dwell .st.s-atd .dot { background: var(--cht-atend); }
.cht-tec .cht-ind-dwell .st.s-pend .dot { background: var(--cht-pend); }
.cht-tec .cht-ind-dwell .st.s-sol .dot { background: var(--cht-soluc); }
.cht-tec .cht-ind-dwell .st.s-fech .dot { background: var(--cht-fech); }
.cht-tec .cht-ind-dwell .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--cht-ink-2); }
.cht-tec .cht-ind-dwell .num.hot { color: var(--cht-warn); font-weight: 700; }

.cht-tec .cht-ind-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cht-line);
  border-radius: var(--cht-r-lg);
  background: var(--cht-surface);
  padding: 15px 16px 16px;
  min-width: 0;
  box-shadow: var(--cht-sh-1);
  transition: box-shadow var(--cht-dur-2) var(--cht-ease-out), border-color var(--cht-dur) var(--cht-ease), transform var(--cht-dur-2) var(--cht-ease-out);
}
/* sem barra lateral: o tom agora vive na caixa do ícone + na cor do número */
.cht-tec .cht-ind-card::before { content: none; }
.cht-tec .cht-ind-card:hover { box-shadow: var(--cht-sh-2); border-color: var(--cht-line-2); }
@media (prefers-reduced-motion: no-preference) {
  .cht-tec .cht-ind-geral > .cht-ind-card { animation: cht-rise-in var(--cht-dur-3) var(--cht-ease-out) both; }
  .cht-tec .cht-ind-geral > .cht-ind-card:nth-child(1) { animation-delay: 30ms; }
  .cht-tec .cht-ind-geral > .cht-ind-card:nth-child(2) { animation-delay: 75ms; }
  .cht-tec .cht-ind-geral > .cht-ind-card:nth-child(3) { animation-delay: 120ms; }
  .cht-tec .cht-ind-geral > .cht-ind-card:nth-child(4) { animation-delay: 165ms; }
  .cht-tec .cht-ind-geral > .cht-ind-card:nth-child(5) { animation-delay: 210ms; }
}
.cht-tec .cht-ind-card-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  min-width: 0;
}
.cht-tec .cht-ind-card-h .ic {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  background: var(--cht-accent-weak); color: var(--cht-accent-ink);
  display: grid; place-items: center;
}
.cht-tec .cht-ind-card.t-warn .cht-ind-card-h .ic { background: var(--cht-warn-weak); color: var(--cht-warn); }
.cht-tec .cht-ind-card.t-breach .cht-ind-card-h .ic { background: var(--cht-breach-weak); color: var(--cht-breach); }
.cht-tec .cht-ind-card-h .ic svg { width: 16px; height: 16px; }
.cht-tec .cht-ind-card-h h3 {
  margin: 0;
  font: 700 13px var(--cht-fd);
  color: var(--cht-ink);
  letter-spacing: -.005em;
  min-width: 0;
}
.cht-tec .cht-ind-card-h .cht-ind-src { margin-left: auto; }

.cht-tec .cht-ind-num { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cht-tec .cht-ind-num .v {
  font: 800 30px/1 var(--cht-fd);
  letter-spacing: -.02em;
  color: var(--cht-ink);
  font-variant-numeric: tabular-nums;
}
.cht-tec .cht-ind-card.is-big .cht-ind-num .v { font-size: 34px; }
.cht-tec .cht-ind-num .v-sec { color: var(--cht-ink-3); }
.cht-tec .cht-ind-num .v-muted { color: var(--cht-ink-4); }
.cht-tec .cht-ind-num .v-of { font: 600 13px var(--cht-fu); color: var(--cht-ink-3); }

.cht-tec .cht-ind-frase {
  margin: 9px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--cht-ink-2);
}
.cht-tec .cht-ind-frase b { color: var(--cht-ink); font-weight: 700; }
.cht-tec .cht-ind-nota {
  margin: 8px 0 0;
  font: 500 10.5px var(--cht-fu);
  color: var(--cht-ink-4);
  line-height: 1.35;
}

/* par típico → pior caso (cartão-professor) */
.cht-tec .cht-ind-par { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cht-tec .cht-ind-par .pcol { display: inline-flex; flex-direction: column; gap: 2px; }
.cht-tec .cht-ind-par .pk {
  font: 600 10px var(--cht-fu);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cht-ink-3);
}
.cht-tec .cht-ind-par .psep { color: var(--cht-ink-4); font-size: 18px; align-self: center; }

/* selo "tudo dentro do prazo" */
.cht-tec .cht-ind-selo {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 13px var(--cht-fd);
  padding: 5px 4px;
}
.cht-tec .cht-ind-selo.t-ok { color: var(--cht-ok); }
.cht-tec .cht-ind-selo svg { width: 18px; height: 18px; }

/* aging — barra empilhada + legenda */
.cht-tec .cht-ind-aging { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.cht-tec .cht-ind-agingbar {
  display: flex; height: 14px; gap: 2px;
  border-radius: var(--cht-r-pill); overflow: hidden;
  background: var(--cht-surface-3);
}
.cht-tec .cht-ind-agingbar .s { display: block; min-width: 3px; }
.cht-tec .cht-ind-agingbar .s.a-ok { background: var(--cht-ok); }
.cht-tec .cht-ind-agingbar .s.a-mid { background: var(--cht-accent); }
.cht-tec .cht-ind-agingbar .s.a-warn { background: var(--cht-warn); }
.cht-tec .cht-ind-agingbar .s.a-breach { background: var(--cht-breach); }
.cht-tec .cht-ind-aginglg { display: flex; gap: 6px 12px; flex-wrap: wrap; }
.cht-tec .cht-ind-aginglg span {
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 11px var(--cht-fu); color: var(--cht-ink-3);
  font-variant-numeric: tabular-nums;
}
.cht-tec .cht-ind-aginglg .d { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.cht-tec .cht-ind-aginglg .d.a-ok { background: var(--cht-ok); }
.cht-tec .cht-ind-aginglg .d.a-mid { background: var(--cht-accent); }
.cht-tec .cht-ind-aginglg .d.a-warn { background: var(--cht-warn); }
.cht-tec .cht-ind-aginglg .d.a-breach { background: var(--cht-breach); }

/* ── CAMADAS 2 e 3 — pilha / grade de seções ── */
.cht-tec .cht-ind-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cht-tec .cht-ind-diag {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; align-items: stretch; min-width: 0;
}
/* seções em coluna flex: o estado-vazio cresce e centraliza — cards da mesma
   linha ficam da mesma altura, sem degrau/branco entre eles */
.cht-tec .cht-ind-diag > .cht-ind-sec { display: flex; flex-direction: column; }
.cht-tec .cht-ind-diag > .cht-ind-sec > .cht-ind-empty { flex: 1; justify-content: center; }
.cht-tec .cht-ind-sec-h .cht-ind-src { margin-left: auto; }

/* vazão (entradas x resoluções) */
.cht-tec .cht-ind-vazao { display: flex; gap: 22px; flex-wrap: wrap; }
.cht-tec .cht-ind-vazao .vbox { display: flex; flex-direction: column; gap: 2px; }
.cht-tec .cht-ind-vazao .vv {
  font: 800 24px/1 var(--cht-fd); color: var(--cht-ink);
  letter-spacing: -.015em; font-variant-numeric: tabular-nums;
}
.cht-tec .cht-ind-vazao .vk { font: 500 11px var(--cht-fu); color: var(--cht-ink-3); }

/* medidores de prazo (SLA attainment) */
.cht-tec .cht-ind-medidores { display: flex; flex-direction: column; gap: 12px; }
.cht-tec .cht-ind-medidor { min-width: 0; }
.cht-tec .cht-ind-medidor .mtop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.cht-tec .cht-ind-medidor .ml { font: 600 12px var(--cht-fu); color: var(--cht-ink-2); }
.cht-tec .cht-ind-medidor .mp { font: 700 14px var(--cht-fm); font-variant-numeric: tabular-nums; color: var(--cht-ink); }
.cht-tec .cht-ind-medidor .mp.c-ok { color: var(--cht-ok); }
.cht-tec .cht-ind-medidor .mp.c-warn { color: var(--cht-warn); }
.cht-tec .cht-ind-medidor .mp.c-breach { color: var(--cht-breach); }
.cht-tec .cht-ind-medidor .mtrack { height: 8px; border-radius: var(--cht-r-pill); background: var(--cht-surface-3); overflow: hidden; }
.cht-tec .cht-ind-medidor .mfill { display: block; height: 100%; border-radius: var(--cht-r-pill); background: var(--cht-ink-4); transition: width 800ms var(--cht-ease-out); }
.cht-tec .cht-ind-medidor .mfill.c-ok { background: var(--cht-ok); }
.cht-tec .cht-ind-medidor .mfill.c-warn { background: var(--cht-warn); }
.cht-tec .cht-ind-medidor .mfill.c-breach { background: var(--cht-breach); }

/* skeleton (5 KPIs) */
.cht-tec .cht-ind-skel-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }

/* mobile do redesign didático */
@media (max-width: 1040px) {
  .cht-tec .cht-ind-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cht-tec .cht-ind-wide { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cht-tec .cht-ind-toolbar,
  .cht-tec .cht-ind-abas,
  .cht-tec .cht-ind-resumo { padding-left: 15px; padding-right: 15px; }
  .cht-tec .cht-ind-painel { padding: 14px 15px 20px; }
  .cht-tec .cht-ind-chips { width: 100%; }
  .cht-tec .cht-ind-seggrp { margin-left: 0; width: 100%; justify-content: space-between; }
  .cht-tec .cht-ind-sel { width: 100%; }
  .cht-tec .cht-ind-tiles,
  .cht-tec .cht-ind-tiles.c3 { grid-template-columns: 1fr; }
  .cht-tec .cht-ind-gauges { grid-template-columns: 1fr; }
  .cht-tec .cht-ind-skel-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════════
   C · MOBILE (~360-390px) — board scroll-x proprio; detalhe tela cheia
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .cht-tec .cht-detail { grid-template-columns: 1fr; }
  .cht-tec .d-main { border-right: 0; }
  /* aside sobe: SLA aparece primeiro (design bible §6-B) */
  .cht-tec .d-aside { order: -1; border-bottom: 1px solid var(--cht-line); }
  .cht-tec .thread { max-height: 48vh; max-height: 48dvh; }

  /* Indicadores: 2 colunas -> 1; KPIs de 4 -> 2 */
  .cht-tec .cht-ind-body { grid-template-columns: 1fr; }
  .cht-tec .cht-ind-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .cht-tec .cht-board-head { padding: 12px 15px; }
  .cht-tec .cht-board-head .grow { display: none; }
  .cht-tec .cht-board-head .cht-search { width: 100%; order: 3; }
  .cht-tec .cht-board {
    grid-auto-columns: 85%;
    padding: 12px;
    gap: 10px;
    scroll-snap-type: x mandatory;
  }
  .cht-tec .crumb,
  .cht-tec .thead,
  .cht-tec .chat-hd,
  .cht-tec .cht-composer { padding-left: 15px; padding-right: 15px; }
  .cht-tec .thread { padding: 14px 15px; }
  .cht-tec .asec { padding: 14px 15px; }
  .cht-tec .cht-msg { max-width: 92%; }

  /* Painel de detalhe vira tela cheia (o host garante o scroll). */
  #chamadosTecnicoTab .cht-workspace[data-active="detalhe"] .cht-pane--detail {
    position: fixed;
    inset: 0;
    z-index: 10005;
    overflow-y: auto;
    background: var(--cht-surface);
    -webkit-overflow-scrolling: touch;
  }
  #chamadosTecnicoTab .cht-workspace[data-active="detalhe"] .cht-pane--detail .cht {
    border-radius: 0;
    min-height: 100%;
  }
  .cht-tec .thread { max-height: none; }

  /* Indicadores mobile: paddings menores; KPIs de 4/3 -> 1 col; toolbar quebra */
  .cht-tec .cht-ind-head,
  .cht-tec .cht-ind-toolbar { padding-left: 15px; padding-right: 15px; }
  .cht-tec .cht-ind-body { padding: 14px 15px 20px; }
  .cht-tec .cht-ind-kpis,
  .cht-tec .cht-ind-kpis--3,
  .cht-tec .cht-ind-kpis--2 { grid-template-columns: 1fr; }
  .cht-tec .cht-ind-tb-right { margin-left: 0; width: 100%; }
  .cht-tec .cht-ind-cat { width: 100%; }
  .cht-tec .cht-ind-skel-kpis { grid-template-columns: repeat(2, 1fr); }
  /* DWELL ("onde o tempo se perde") — o alvo REAL é .cht-ind-dwell (o
     .cht-ind-table é classe órfã). A 360px o grid 4-col fica ilegível → cada
     linha vira um bloco empilhado: etapa em cima, métricas numa faixa embaixo. */
  .cht-tec .cht-ind-dwell .tr { grid-template-columns: 1fr; gap: 2px 10px; padding: 10px 12px; }
  .cht-tec .cht-ind-dwell .tr.th { display: none; }
  .cht-tec .cht-ind-dwell .st { grid-column: 1 / -1; font-size: 13px; }
  /* as 3 métricas (nº · típico · pior) descem para uma faixa com rótulo próprio */
  .cht-tec .cht-ind-dwell .num {
    display: inline-flex; align-items: baseline; gap: 5px; text-align: left; margin-right: 14px; font-size: 12.5px;
  }
  .cht-tec .cht-ind-dwell .num::before {
    font: 700 9.5px var(--cht-fu); letter-spacing: .04em; text-transform: uppercase; color: var(--cht-ink-4);
  }
  /* a 1ª <span> da linha é a etapa (.st); as métricas são as spans 2, 3 e 4 */
  .cht-tec .cht-ind-dwell .tr > .num:nth-of-type(2)::before { content: "chamados"; }
  .cht-tec .cht-ind-dwell .tr > .num:nth-of-type(3)::before { content: "típico"; }
  .cht-tec .cht-ind-dwell .tr > .num:nth-of-type(4)::before { content: "pior"; }
}

/* ── Engrenagem de parametrização (admin) ─────────────────────────────────── */
/* Só uma ENGRENAGEM no canto direito extremo da sub-nav (não uma aba). */
.cht-subnav-row { display: flex; align-items: center; padding-top: 16px; }
.cht-subnav-row .cht-gear {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 16px;
  border: 1px solid var(--cht-line-2); border-radius: var(--cht-r-pill);
  background: var(--cht-surface); color: var(--cht-ink-2); cursor: pointer;
  font: 600 12.5px var(--cht-fu);
  box-shadow: var(--cht-sh-1);
  transition: color var(--cht-dur), background var(--cht-dur), border-color var(--cht-dur), box-shadow var(--cht-dur);
}
.cht-subnav-row .cht-gear .cht-gear-lb { line-height: 1; }
.cht-subnav-row .cht-gear svg { width: 17px; height: 17px; transition: transform .5s var(--cht-ease-out); }
.cht-subnav-row .cht-gear:hover { color: var(--cht-accent-ink); border-color: var(--cht-accent-line); background: var(--cht-accent-weak); box-shadow: var(--cht-sh-2); }
.cht-subnav-row .cht-gear:hover svg { transform: rotate(90deg); }
.cht-subnav-row .cht-gear.is-active { color: var(--cht-accent-deep); background: var(--cht-accent-weak); border-color: var(--cht-accent-line); box-shadow: inset 0 0 0 1px var(--cht-accent-line); }
.cht-subnav-row .cht-gear.is-active svg { transform: rotate(90deg); }
.cht-subnav-row .cht-gear:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cht-accent-weak); }
@media (prefers-reduced-motion: reduce) { .cht-subnav-row .cht-gear svg { transition: none; } }

/* ── Tela de configuração (admin) ─────────────────────────────────────────── */
.chc { display: flex; flex-direction: column; gap: 20px; padding: 16px 32px 48px; min-width: 0; max-width: 1440px; margin: 0 auto; }
.chc-hd h1 { margin: 0 0 3px; font-family: var(--cht-fd); font-size: 21px; font-weight: 800; letter-spacing: -.015em; color: var(--cht-ink); }
.chc-hd p { margin: 0; font-size: 13px; color: var(--cht-ink-3); }
.chc-card {
  border: 1px solid var(--cht-line); border-radius: var(--cht-r-lg); background: var(--cht-surface);
  padding: 20px 22px 22px; min-width: 0; box-shadow: var(--cht-sh-1);
}
.chc-card-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.chc-card-hd h2 { margin: 0 0 4px; font-family: var(--cht-fd); font-size: 15.5px; font-weight: 700; color: var(--cht-ink); }
.chc-card-hd p { margin: 0; font-size: 12.5px; color: var(--cht-ink-3); line-height: 1.55; max-width: 66ch; }
.chc-card-hd p strong { color: var(--cht-ink-2); font-weight: 600; }
.chc-inl-ic { display: inline-flex; vertical-align: -3px; }
.chc-inl-ic svg { width: 14px; height: 14px; color: var(--cht-accent-ink); }
.chc-count { flex: none; font-size: 11.5px; font-weight: 700; color: var(--cht-accent-deep); background: var(--cht-accent-weak); border: 1px solid var(--cht-accent-line); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }

/* Equipe técnica */
.chc-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; margin-bottom: 14px; border: 1px solid var(--cht-line-2); border-radius: var(--cht-r-sm); background: var(--cht-surface-2); transition: border-color var(--cht-dur), box-shadow var(--cht-dur); }
.chc-search:focus-within { border-color: var(--cht-accent-line); box-shadow: 0 0 0 3px var(--cht-accent-weak); }
.chc-search svg { width: 16px; height: 16px; color: var(--cht-ink-4); flex: none; }
.chc-search input { flex: 1; border: none; background: none; padding: 10px 0; font: inherit; font-size: 13px; color: var(--cht-ink); outline: none; }
/* Lista rola DENTRO do card a partir de ~5 pessoas (senão a seção fica alta demais). */
.chc-tec-list { display: flex; flex-direction: column; gap: 7px; max-height: 300px; overflow-y: auto; padding-right: 2px; }
.chc-tec { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border: 1px solid var(--cht-line); border-radius: var(--cht-r); background: var(--cht-surface-2); transition: border-color var(--cht-dur), background var(--cht-dur); }
.chc-tec:hover { border-color: var(--cht-line-2); background: var(--cht-surface); }
.chc-ava { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.chc-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chc-who .nm { font-size: 13px; font-weight: 600; color: var(--cht-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chc-who .em { font-size: 11px; color: var(--cht-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chc-grps { display: flex; gap: 6px; flex: none; }
.chc-pill { display: inline-flex; align-items: center; gap: 0; min-height: 0; padding: 5px 12px; border: 1px solid var(--cht-line-2); border-radius: 999px; background: var(--cht-surface); font-family: var(--cht-fu); font-size: 12px; font-weight: 600; color: var(--cht-ink-3); cursor: pointer; transition: all var(--cht-dur); }
.chc-pill .ck { display: inline-flex; width: 0; overflow: hidden; opacity: 0; transition: width var(--cht-dur), opacity var(--cht-dur), margin var(--cht-dur); }
.chc-pill .ck svg { width: 12px; height: 12px; }
.chc-pill:hover { border-color: var(--cht-ink-4); color: var(--cht-ink-2); }
.chc-pill.is-on { color: #fff; }
.chc-pill.is-on .ck { width: 12px; opacity: 1; margin-right: 5px; }
.chc-pill.is-on.infra { background: var(--cht-accent); border-color: var(--cht-accent); }
.chc-pill.is-on.sistemas { background: #2f6b45; border-color: #2f6b45; }
.chc-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cht-accent-weak); }

/* Board Times & sistemas — seção "flush": as colunas é que são os cards (padrão
   Trello). Sem card externo, colunas de alturas diferentes não deixam vão branco. */
.chc-card--board { background: transparent; border: none; box-shadow: none; padding: 0; }
.chc-board { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.chc-col { display: flex; flex-direction: column; border: 1px solid var(--cht-line); border-radius: var(--cht-r); background: var(--cht-surface-2); overflow: hidden; box-shadow: var(--cht-sh-1); }
.chc-col.infra { --g: var(--cht-accent); --g-weak: var(--cht-accent-weak); --g-ink: var(--cht-accent-deep); }
.chc-col.sistemas { --g: #2f6b45; --g-weak: #e2f0e7; --g-ink: #215033; }
.chc-col-hd { display: flex; align-items: center; gap: 8px; padding: 11px 13px; background: var(--cht-surface); border-bottom: 1px solid var(--cht-line); border-top: 3px solid var(--g); }
.chc-col-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--g); }
.chc-col-hd h3 { margin: 0; font-family: var(--cht-fd); font-size: 13.5px; font-weight: 700; color: var(--cht-ink); }
.chc-col-n { margin-left: auto; font-family: var(--cht-fu); font-size: 11px; font-weight: 700; color: var(--g-ink); background: var(--g-weak); border-radius: 999px; padding: 2px 9px; }
/* Rola DENTRO do card a partir de ~10 linhas (senão a página fica alta demais). */
.chc-col-body { display: flex; flex-direction: column; gap: 6px; padding: 12px; min-height: 96px; max-height: 460px; overflow-y: auto; flex: 1; transition: background var(--cht-dur); }
.chc-col-body::-webkit-scrollbar, .chc-tec-list::-webkit-scrollbar { width: 8px; }
.chc-col-body::-webkit-scrollbar-thumb, .chc-tec-list::-webkit-scrollbar-thumb { background: var(--cht-line-3); border-radius: 999px; }
.chc-col-body::-webkit-scrollbar-thumb:hover, .chc-tec-list::-webkit-scrollbar-thumb:hover { background: var(--cht-ink-4); }
.chc-col-body::-webkit-scrollbar-track, .chc-tec-list::-webkit-scrollbar-track { background: transparent; }
.chc.is-dragging .chc-col-body { background: var(--g-weak); outline: 2px dashed var(--g); outline-offset: -6px; border-radius: var(--cht-r-sm); }
.chc-col-empty { margin: auto; padding: 8px; font-size: 11.5px; color: var(--cht-ink-4); text-align: center; }
/* botão "+" no cabeçalho abre o campo (expandível, colapsado por padrão) */
.chc-col-add-btn { flex: none; width: 26px; height: 26px; min-height: 0; padding: 0; display: grid; place-items: center; border: 1px solid var(--cht-line-2); border-radius: 8px; background: var(--cht-surface); color: var(--cht-ink-3); cursor: pointer; transition: all var(--cht-dur); }
.chc-col-add-btn svg { width: 15px; height: 15px; transition: transform var(--cht-dur) var(--cht-ease); }
.chc-col-add-btn:hover { color: var(--g); border-color: var(--g); background: var(--g-weak); }
.chc-col-add-btn.is-open { color: #fff; background: var(--g); border-color: var(--g); }
.chc-col-add-btn.is-open svg { transform: rotate(135deg); }
.chc-col-add-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--g-weak); }
.chc-col-add { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--cht-line); background: var(--cht-surface); }
.chc-col-add.hidden { display: none; }
.chc-col-add input { flex: 1; min-width: 0; box-sizing: border-box; padding: 8px 11px; border: 1px solid var(--cht-line-2); border-radius: var(--cht-r-sm); background: var(--cht-surface-2); font: inherit; font-size: 12.5px; color: var(--cht-ink); transition: border-color var(--cht-dur), background var(--cht-dur); }
.chc-col-add input::placeholder { color: var(--cht-ink-4); }
.chc-col-add input:focus { outline: none; border-color: var(--g); background: var(--cht-surface); }
.chc-col-add-go { flex: none; padding: 8px 14px; border: none; border-radius: var(--cht-r-sm); background: var(--g); color: #fff; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: filter var(--cht-dur); }
.chc-col-add-go:hover { filter: brightness(1.07); }

/* Chip = um sistema */
.chc-chip { display: flex; align-items: center; gap: 8px; min-height: 36px; box-sizing: border-box; padding: 5px 9px 5px 8px; background: var(--cht-surface); border: 1px solid var(--cht-line-2); border-left: 3px solid var(--g, var(--cht-line-3)); border-radius: var(--cht-r-sm); box-shadow: var(--cht-sh-1); cursor: grab; transition: box-shadow var(--cht-dur), border-color var(--cht-dur), transform var(--cht-dur); }
.chc-chip:hover { border-color: var(--cht-line-3); box-shadow: var(--cht-sh-2); }
.chc-chip:active { cursor: grabbing; }
.chc-chip.is-off { opacity: .6; }
.chc-chip-grip { flex: none; display: flex; color: var(--cht-ink-4); }
.chc-chip-nm { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--cht-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chc-chip-off { flex: none; font-family: var(--cht-fu); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--cht-ink-4); background: var(--cht-surface-3); border-radius: 999px; padding: 2px 7px; }
.chc-chip-acts { flex: none; display: flex; gap: 4px; opacity: 0; transition: opacity var(--cht-dur); }
.chc-chip:hover .chc-chip-acts, .chc-chip:focus-within .chc-chip-acts { opacity: 1; }
.chc-ico { flex: none; width: 26px; height: 26px; min-height: 0; padding: 0; display: grid; place-items: center; border: 1px solid var(--cht-line-2); border-radius: 7px; background: var(--cht-surface); color: var(--cht-ink-3); cursor: pointer; transition: all var(--cht-dur); }
.chc-ico svg { display: block; width: 15px; height: 15px; }
.chc-ico:hover { color: var(--cht-accent-ink); border-color: var(--cht-accent-line); background: var(--cht-accent-weak); }
.chc-ico.is-off { color: var(--cht-ink-4); }
.chc-ico:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cht-accent-weak); }
.chc-mini { flex: none; min-height: 0; font-family: var(--cht-fu); font-size: 11px; font-weight: 600; padding: 5px 9px; border: 1px solid var(--cht-line-2); border-radius: 7px; background: var(--cht-surface); color: var(--cht-ink-2); cursor: pointer; transition: all var(--cht-dur); }
.chc-mini:hover { color: var(--cht-accent-ink); border-color: var(--cht-accent-line); background: var(--cht-accent-weak); }
.chc-chip-ghost { opacity: .45; background: var(--cht-accent-weak); border-style: dashed; box-shadow: none; }
.chc-chip-drag { box-shadow: var(--cht-sh-drag); transform: rotate(1.5deg); cursor: grabbing; }

/* Bandeja "Sem time" (órfãos) */
.chc-tray { margin-top: 14px; border: 1px solid var(--cht-warn-line); background: var(--cht-warn-weak); border-radius: var(--cht-r); padding: 12px 14px; }
.chc-tray-hd { display: flex; align-items: center; gap: 7px; font-size: 12px; line-height: 1.4; color: #6b4e00; margin-bottom: 10px; }
.chc-tray-hd svg { flex: none; width: 15px; height: 15px; }
.chc-tray-body { --g: var(--cht-ink-4); display: flex; flex-wrap: wrap; gap: 7px; }
.chc-tray-body .chc-chip { flex: 0 1 auto; }

.chc-empty { padding: 18px; font-size: 12.5px; color: var(--cht-ink-3); text-align: center; }
.chc.is-busy { pointer-events: none; opacity: .7; }
@media (max-width: 720px) { .chc-board { grid-template-columns: 1fr; } }

/* ── Anexos — Fase 3 (preview de imagem na visão técnico) ─────────────────────
   O botão de baixar deixou de ser <a> e virou <button.ax-btn>; e a linha ganhou
   miniatura clicável p/ imagens. Neutraliza o button{min-height:44px;padding}
   global nos .ax-btn (ícones 28×28 grid-centrados) e encaixa a thumbnail. */
.cht-tec .cht-anexo .ax-btn { min-height: 0; padding: 0; }
.cht-tec .cht-anexo .cht-anexo-thumb { width: 36px; height: 36px; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVIDADE + A11Y (apêndice, 2026-07-07) — técnico + config.
   Aditivo: toque em (pointer:coarse), roster/config em @media, caps ≥1600px.
   ══════════════════════════════════════════════════════════════════════════ */

/* TOQUE · alvos ≥40-44px + REVELA as ações do chip de config (CRÍTICO: no :hover
   eram 100% inacessíveis ao toque). A restrição do arrasto ao .chc-chip-grip é
   feita no JS (config.js: Sortable handle) p/ tocar as ações não iniciar drag. */
@media (hover: none), (pointer: coarse) {
  .cht-subnav-row .cht-gear { height: 42px; padding: 0 15px; }
  .cht-tec .cht-viewtoggle button { min-height: 40px; }
  .cht-tec .cht-ind-fchip { min-height: 40px; }
  .cht-tec .cht-anexo .ax-btn { width: 40px; height: 40px; }
  .chc-ico { width: 40px; height: 40px; }
  .chc-col-add-btn { width: 40px; height: 40px; }
  .chc-pill { min-height: 40px; padding: 8px 14px; }
  .chc-chip { min-height: 44px; }
  .chc-chip-acts { opacity: 1; gap: 8px; }
}

/* ROSTER Equipe técnica (≤480px) · as pills Infra/Sistemas descem p/ a 2ª linha
   sob avatar+nome — fim do overflow horizontal da página em 320px. */
@media (max-width: 480px) {
  .chc-tec { flex-wrap: wrap; row-gap: 8px; }
  .chc-grps { width: 100%; justify-content: flex-end; }
}

/* CONFIG (≤560px) · padding lateral alinhado ao 15px do resto do mobile (era 32px)
   + safe-area no composer técnico (Enviar/segmentado não ficam sob a home-bar). */
@media (max-width: 560px) {
  .chc { padding: 16px 15px 32px; }
  .cht-tec .cht-composer { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* INDICADORES tablet (641-1023px) · tiles c3 com auto-fit → some o 3º tile órfão.
   Faixa estreitada p/ não tocar o desktop (≥1024) nem o colapso 1-col (≤640). */
@media (min-width: 641px) and (max-width: 1023px) {
  .cht-tec .cht-ind-tiles.c3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

/* TELAS GIGANTES · o técnico PREENCHE a largura (decisão do usuário 2026-07-07:
   os caps max-width/centralização + tiles capados deixavam muito espaço em branco
   nas laterais no 1920+). Detalhe/indicadores/tiles/kanban enchem como no baseline. */

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE-NATIVA · TÉCNICO (apêndice 2026-07-07 · última-vence)
   Detalhe = chat nativo (thread com scroll próprio + faixa de SLA sticky +
   barra de ação e composer ancorados no rodapé); Status/Detalhes em bottom-
   sheet. Tudo escopado em .cht-tec e gated ≤560/coarse → desktop intacto.
   ══════════════════════════════════════════════════════════════════════════ */

/* Elementos só-mobile: inertes no desktop (não alteram o layout 1024-1440). */
.cht-tec .cht-slaband,
.cht-tec .cht-actionbar.cht-tec-actionbar { display: none; }

/* — Bottom-sheets do técnico (body-level; só existem quando isNarrow()) ——— */
.cht-tec-sheet .cht-sheet-bd { padding-bottom: calc(12px + var(--cht-safe-b)); }
.cht-tec-sheet .cht-optgrp {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px; border-bottom: 1px solid var(--cht-line);
}
.cht-tec-sheet .cht-optgrp:last-child { border-bottom: 0; }
.cht-tec-sheet .cht-optgrp-h {
  font: 700 10.5px var(--cht-fu); letter-spacing: .07em; text-transform: uppercase;
  color: var(--cht-ink-3); margin-bottom: 2px;
}
.cht-tec-sheet .cht-optbtn {
  display: flex; align-items: center; gap: 11px; width: 100%;
  min-height: 52px; padding: 11px 14px;
  border: 1px solid var(--cht-line-2); border-radius: var(--cht-r);
  background: var(--cht-surface); color: var(--cht-ink);
  font: 600 15px var(--cht-fu); text-align: left; cursor: pointer;
  transition: background var(--cht-dur) var(--cht-ease), border-color var(--cht-dur) var(--cht-ease);
}
.cht-tec-sheet .cht-optbtn .ol { flex: 1 1 auto; min-width: 0; }
.cht-tec-sheet .cht-optbtn .cht-dot { flex: none; }
.cht-tec-sheet .cht-optbtn .cht-prio { flex: none; }
.cht-tec-sheet .cht-optbtn .ck { flex: none; margin-left: auto; display: inline-flex; color: var(--cht-accent-ink); }
.cht-tec-sheet .cht-optbtn .ck svg { width: 19px; height: 19px; }
.cht-tec-sheet .cht-optbtn:hover { background: var(--cht-surface-2); color: var(--cht-ink); border-color: var(--cht-line-3); }
.cht-tec-sheet .cht-optbtn.is-on { background: var(--cht-accent-weak); color: var(--cht-accent-deep); border-color: var(--cht-accent-line); }
.cht-tec-sheet .cht-optbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cht-accent-weak); }
/* dentro do sheet o aside recompõe suas seções com respiro maior */
.cht-tec-sheet .asec { padding: 15px 16px; }
.cht-tec-sheet .cht-sheet-internas { border-bottom: 0; }
.cht-tec-sheet .cht-select { font-size: 16px; }

@media (max-width: 560px) {
  /* ── DETALHE: pane vira coluna flex ancorada acima da bottom-nav do portal ── */
  #chamadosTecnicoTab .cht-workspace[data-active="detalhe"] .cht-pane--detail,
  .cht-view .cht-workspace[data-active="detalhe"] .cht-pane--detail {
    position: fixed; inset: 0 0 var(--cht-dock-b) 0; z-index: 10005;
    overflow: hidden; background: var(--cht-surface);
  }
  #chamadosTecnicoTab .cht-workspace[data-active="detalhe"] .cht-pane--detail > .cht,
  .cht-view .cht-workspace[data-active="detalhe"] .cht-pane--detail > .cht {
    height: 100%; min-height: 0; border-radius: 0;
    display: flex; flex-direction: column;
  }
  .cht-tec .cht-detail {
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-height: 0; height: auto;
  }
  .cht-tec .d-main { flex: 1 1 auto; min-height: 0; border-right: 0; }
  /* aside sai do fluxo: seu conteúdo é reaproveitado no sheet "Detalhes" */
  .cht-tec .d-aside { display: none; }
  /* a barra "Conversa e eventos" some (toggle de internas migrou p/ o sheet) */
  .cht-tec .chat-hd { display: none; }
  /* thread ocupa o meio com SCROLL PRÓPRIO */
  .cht-tec .thread {
    flex: 1 1 auto; min-height: 0; max-height: none;
    -webkit-overflow-scrolling: touch;
  }

  /* header recolhível: crumb+thead fixos no topo; ao rolar a thread, encolhe */
  .cht-tec .crumb { padding-top: 11px; padding-bottom: 11px; }
  .cht-tec .thead { transition: padding var(--cht-dur) var(--cht-ease); }
  .cht-tec .cht-detalhe.hd-min .thead { padding-top: 8px; padding-bottom: 8px; }
  .cht-tec .cht-detalhe.hd-min .thead .tmeta { display: none; }
  .cht-tec .cht-detalhe.hd-min .thead h2 { font-size: 15.5px; margin-top: 5px; }

  /* faixa de SLA sticky (tap → sheet "Detalhes") */
  .cht-tec .cht-slaband {
    display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 46px; margin: 0; padding: 8px 15px;
    border: 0; border-bottom: 1px solid var(--cht-line);
    background: var(--cht-surface-2); color: var(--cht-ink-2);
    cursor: pointer; text-align: left;
  }
  .cht-tec .cht-slaband:hover { background: var(--cht-surface-3); color: var(--cht-ink-2); }
  .cht-tec .cht-slaband:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--cht-accent-line); }
  .cht-tec .cht-slaband .sb-main { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
  .cht-tec .cht-slaband .sb-main .lbl {
    font: 700 11px var(--cht-fu); letter-spacing: .04em; text-transform: uppercase;
    color: var(--cht-ink-3); white-space: nowrap;
  }
  .cht-tec .cht-slaband .sb-more {
    display: inline-flex; align-items: center; gap: 2px; margin-left: auto; flex: none;
    font: 600 12px var(--cht-fu); color: var(--cht-accent-ink);
  }
  .cht-tec .cht-slaband .sb-more svg { width: 15px; height: 15px; }

  /* barra de ação em fluxo, ACIMA do composer (reusa a primitiva .cht-actionbar,
     mas static: composer + ação empilham no rodapé do flex column) */
  .cht-tec .cht-actionbar.cht-tec-actionbar {
    display: flex; position: static; inset: auto; bottom: auto; z-index: auto;
    gap: 8px; padding: 8px 12px;
    background: var(--cht-surface);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-top: 1px solid var(--cht-line); border-bottom: 0;
    box-shadow: none;
  }
  .cht-tec .cht-tec-actionbar .cht-btn { flex: 1 1 0; min-height: 46px; padding: 8px 6px; font-size: 13px; }
  .cht-tec .cht-tec-actionbar .cht-btn svg { width: 16px; height: 16px; }
  .cht-tec .cht-tec-actionbar .is-mine {
    flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 46px; font: 600 12.5px var(--cht-fu); color: var(--cht-ok);
    background: var(--cht-ok-weak); border: 1px solid var(--cht-ok-line); border-radius: var(--cht-r);
  }
  .cht-tec .cht-tec-actionbar .is-mine svg { width: 16px; height: 16px; }

  /* composer compacto no rodapé (16px mata o zoom do iOS; sem hint p/ ganhar altura).
     position:static reseta o VAZAMENTO da regra `.cht-detail .cht-composer{position:fixed}`
     do solicitante — o técnico empilha composer ABAIXO da actionbar no flex column
     (senão o composer fixo cobre a barra [Assumir·Status·Resolver] e a base da thread). */
  .cht-tec .cht-composer { position: static; inset: auto; bottom: auto; z-index: auto; padding: 10px 12px calc(10px + var(--cht-safe-b)); }
  .cht-tec .cht-composer .hint { display: none; }
  .cht-tec .cht-composer .field .cht-textarea { font-size: 16px; }
  .cht-tec .cht-composer.is-readonly { padding: 14px 15px calc(14px + var(--cht-safe-b)); }
}

/* Reduced-motion: desliga as transições introduzidas aqui (band/optbtn/header). */
@media (prefers-reduced-motion: reduce) {
  .cht-tec .thead,
  .cht-tec .cht-slaband,
  .cht-tec-sheet .cht-optbtn { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE-NATIVA · TÉCNICO — FILA / INDICADORES / CONFIG (apêndice · última-vence)
   Dá forma às classes NOVAS: fila (coluna única + chips de status + triagem no
   card), indicadores (barras horizontais + sparkline no lugar dos SVG largos) e
   config (segmentado "mover para time" por toque). Vários elementos novos viraram
   <button> → NEUTRALIZA o button{min-height:44px;padding;background:brand}+:hover
   global de components.css. As mini-stats aparecem TAMBÉM no desktop, então a
   neutralização delas roda em todos os tamanhos (desktop fica idêntico ao estático
   anterior). Fila/indicadores gated ≤560 (casa com isNarrow do JS); config em
   (pointer:coarse) (casa com isCoarse do JS). Escopo .cht-tec / .chc.
   ══════════════════════════════════════════════════════════════════════════ */

/* — DESKTOP + MOBILE · mini-stats agora são <button> (antes estáticas). O
     .cht-stats .stat só define flex-column → sem isto herdaria 44px/navy/hover.
     Zera o vazamento em TODOS os tamanhos p/ o desktop ficar byte-idêntico. — */
.cht-tec .cht-stats .stat {
  min-height: 0; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0;
  color: inherit; text-align: left; cursor: default; font: inherit;
  -webkit-appearance: none; appearance: none;
}
.cht-tec .cht-stats .stat:hover { background: none; box-shadow: none; transform: none; }

/* — Elementos só-mobile/toque: ocultos no desktop (layout 1024-1440 intacto) — */
.cht-tec .cht-colchips,
.cht-tec .cht-card-tri,
.cht-tec .cht-ind-bars,
.cht-tec .cht-ind-go { display: none; }
.chc-chip-seg { display: none; }

/* ═══════════════════ FILA + INDICADORES (≤560, casa com isNarrow) ═══════════ */
@media (max-width: 560px) {
  /* — mini-stats viram FILTROS tocáveis (grid 3, estado is-on) — */
  .cht-tec .cht-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
  .cht-tec .cht-stats .stat {
    align-items: center; text-align: center; gap: 2px; cursor: pointer;
    padding: 8px 6px; border: 1px solid var(--cht-line-2); border-radius: var(--cht-r-sm);
    background: var(--cht-surface);
    transition: background var(--cht-dur) var(--cht-ease), border-color var(--cht-dur) var(--cht-ease);
  }
  .cht-tec .cht-stats .stat:hover { background: var(--cht-surface-2); }
  .cht-tec .cht-stats .stat.is-on { background: var(--cht-accent-weak); border-color: var(--cht-accent-line); }

  /* — barra de chips de status: sticky no topo, rolável na horizontal — */
  .cht-tec .cht-colchips {
    display: flex; gap: 8px; align-items: center;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    position: sticky; top: 0; z-index: 4;
    margin: 0 -15px 2px; padding: 10px 15px;
    background: var(--cht-glass, rgba(247, 249, 253, .92));
    -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--cht-line);
  }
  .cht-tec .cht-colchips::-webkit-scrollbar { display: none; }
  .cht-tec .cht-colchip {
    flex: none; display: inline-flex; align-items: center; gap: 7px;
    min-height: 40px; 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 13px var(--cht-fu); white-space: nowrap; cursor: pointer;
  }
  .cht-tec .cht-colchip:hover { background: var(--cht-surface-2); color: var(--cht-ink); }
  .cht-tec .cht-colchip .c { font: 600 12px var(--cht-fm); color: var(--cht-ink-3); font-variant-numeric: tabular-nums; }
  .cht-tec .cht-colchip.is-active-col { background: var(--cht-accent-weak); color: var(--cht-accent-deep); border-color: var(--cht-accent-line); }
  .cht-tec .cht-colchip.is-active-col .c { color: var(--cht-accent-ink); }
  .cht-tec .cht-colchip.has-risk::after { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--cht-warn); }

  /* — board = COLUNA ÚNICA (só a coluna ativa aparece); desfaz o carrossel — */
  .cht-tec .cht-board {
    display: block; overflow: visible; gap: 0;
    grid-auto-flow: initial; grid-auto-columns: initial; scroll-snap-type: none;
  }
  .cht-tec .cht-col { display: none; }
  .cht-tec .cht-col.is-active-col { display: flex; width: auto; scroll-snap-align: none; }
  .cht-tec .cht-col-body { max-height: none; padding-bottom: calc(20px + var(--cht-dock-b)); }
  .cht-tec .cht-viewtoggle { display: none; }

  /* — triagem no card: ação primária por toque (abre o sheet de status) — */
  .cht-tec .cht-card-tri {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 0; width: 100%; margin-top: 8px; padding: 9px 12px;
    border: 1px solid var(--cht-line-2); border-radius: var(--cht-r-sm);
    background: var(--cht-surface-2); color: var(--cht-accent-ink);
    font: 600 12.5px var(--cht-fu); cursor: pointer;
  }
  .cht-tec .cht-card-tri:hover { background: var(--cht-accent-weak); color: var(--cht-accent-deep); }
  .cht-tec .cht-card-tri svg { width: 15px; height: 15px; }
  .cht-tec .cht-card .c-foot .cht-sla { font-size: 12px; padding: 3px 9px; }

  /* — INDICADORES: troca os SVG largos por barras horizontais + sparkline — */
  .cht-tec .cht-ind-chart, .cht-tec .cht-ind-legends { display: none; }
  .cht-tec .cht-ind-bars { display: block; }
  .cht-tec .cht-ind-hbars { display: flex; flex-direction: column; gap: 12px; }
  .cht-tec .cht-ind-hbars .hb-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
  .cht-tec .cht-ind-hbars .hb-lb { flex: 1 1 auto; min-width: 0; font: 600 13px var(--cht-fu); color: var(--cht-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cht-tec .cht-ind-hbars .hb-n { flex: none; font: 700 13px var(--cht-fm); color: var(--cht-ink); font-variant-numeric: tabular-nums; }
  .cht-tec .cht-ind-hbars .hb-track { height: 10px; border-radius: 999px; background: var(--cht-surface-3); overflow: hidden; }
  .cht-tec .cht-ind-hbars .hb-fill { height: 100%; border-radius: 999px; background: var(--cht-accent); }
  .cht-tec .cht-ind-hbars .hb-cum { margin-top: 4px; font: 500 11.5px var(--cht-fm); color: var(--cht-ink-3); font-variant-numeric: tabular-nums; }

  .cht-tec .cht-ind-spark { display: flex; align-items: center; gap: 14px; }
  .cht-tec .cht-ind-sparksvg { flex: 1 1 auto; min-width: 0; height: 56px; }
  .cht-tec .cht-ind-sparkmeta { flex: none; display: flex; flex-direction: column; align-items: flex-end; }
  .cht-tec .cht-ind-sparkmeta .v { font: 800 22px var(--cht-fd); color: var(--cht-ink); font-variant-numeric: tabular-nums; }
  .cht-tec .cht-ind-sparkmeta .d { font: 600 12.5px var(--cht-fm); }
  .cht-tec .cht-ind-sparkmeta .d.c-ok { color: var(--cht-ok); }
  .cht-tec .cht-ind-sparkmeta .d.c-breach { color: var(--cht-breach); }
  .cht-tec .cht-ind-sparkmeta .l { font: 500 11px var(--cht-fu); color: var(--cht-ink-3); }

  /* — tiles 1-up (2-up espremia rótulo + tag, quebrando feio "Chamados em [AGORA]
       aberto"); hero "precisa de atenção" tocável → fila — */
  .cht-tec .cht-ind-tiles, .cht-tec .cht-ind-tiles.c3 { grid-template-columns: 1fr; }
  .cht-tec .cht-ind-wide { grid-template-columns: 1fr; }
  /* rótulo ocupa o espaço e a tag alinha à direita, SEM partir o texto no meio */
  .cht-tec .cht-ind-tile .top { align-items: flex-start; flex-wrap: wrap; }
  .cht-tec .cht-ind-tile .lb { flex: 1 1 auto; min-width: 0; }
  .cht-tec .cht-ind-tile .tag { flex: none; margin-left: auto; }
  .cht-tec .cht-ind-tile.is-link { cursor: pointer; }
  .cht-tec .cht-ind-go {
    display: inline-flex; align-items: center; gap: 5px; min-height: 0; margin-top: 10px; padding: 0;
    background: none; border: 0; color: var(--cht-accent-ink); font: 700 12.5px var(--cht-fu); cursor: pointer;
  }
  .cht-tec .cht-ind-go:hover { background: none; color: var(--cht-accent-deep); }
  .cht-tec .cht-ind-go svg { width: 15px; height: 15px; }
}

/* ═══════════════════ CONFIG · segmentado por toque (casa com isCoarse) ═══════ */
@media (hover: none), (pointer: coarse) {
  .chc-chip-seg { display: inline-flex; gap: 4px; margin-left: auto; }
  .chc-seg {
    min-height: 40px; 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: background var(--cht-dur) var(--cht-ease), border-color var(--cht-dur) var(--cht-ease);
  }
  .chc-seg:hover { background: var(--cht-surface-2); color: var(--cht-ink); }
  .chc-seg.is-on { background: var(--cht-accent-weak); color: var(--cht-accent-deep); border-color: var(--cht-accent-line); }
  .chc-chip-grip, .chc-ico-move { display: none; }
  .chc-chip { flex-wrap: wrap; row-gap: 8px; }
}

/* Reduced-motion: desliga as transições novas (stats/colchip/seg). */
@media (prefers-reduced-motion: reduce) {
  .cht-tec .cht-stats .stat,
  .chc-seg { transition: none; }
}

/* ── FILA no mobile = LISTA PLANA de cards (feedback: "melhor de visualizar") ──
   Substitui o kanban em colunas por uma pilha de cards (todos os status), com o
   status em cada card. A busca do técnico também não pode inchar (mesmo motivo
   do solicitante: o input herda o min-height:44px global de toque). ≤560 casa
   com o `mobile: isNarrow()` do fila.js. */
@media (max-width: 560px) {
  .cht-tec .cht-mobilelist { display: flex; flex-direction: column; gap: 10px; padding: 12px 0 calc(20px + var(--cht-dock-b)); }
  .cht-tec .cht-mobilelist--empty { display: block; padding: 44px 16px; text-align: center; color: var(--cht-ink-3); font-size: 13px; }
  .cht-tec .cht-mobilelist .cht-card { width: auto; }
  .cht-tec .cht-mobilelist .cht-card .c-top { flex-wrap: wrap; }
  .cht-tec .cht-mobilelist .c-status { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--cht-fu); color: var(--cht-ink-2); }
  .cht-tec .cht-board-head .cht-search { padding: 11px 14px; }
  .cht-tec .cht-board-head .cht-search input { min-height: 0; padding: 0; font-size: 16px; }
  /* Filtros dos indicadores RECOLHÍVEIS atrás do botão "Filtros" (mini-menu) — sem
     fila de chips na tela por padrão. Quando abertos, os chips quebram em linha e
     cabem (nada transborda). No desktop os filtros ficam sempre visíveis (botão oculto). */
  .cht-tec .cht-filterbtn { display: flex; }
  .cht-tec .cht-ind-toolbar { overflow: visible; }
  .cht-tec .cht-ind-filters { display: none; }
  .cht-tec .cht-ind-filters.is-open { display: block; }
  .cht-tec .cht-ind-tbrow { width: 100%; max-width: 100%; min-width: 0; }
  .cht-tec .cht-ind-chips, .cht-tec .cht-ind-seggrp {
    flex-wrap: wrap; overflow-x: visible; max-width: 100%; min-width: 0; row-gap: 6px;
  }
  .cht-tec .cht-ind-sel, .cht-tec .cht-ind-toolbar select { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
}

/* ══════════════════════════════════════════════════════════════════════════
   D · WORKSPACE 3 PAINEIS (redesenho "Atendente")
   rail (fila, ESQUERDA) | conversa (detalhe .d-main, CENTRO) | contexto
   (detalhe .d-aside, DIREITA). No desktop as 3 colunas coexistem; no mobile
   colapsa em 1 coluna e alterna fila<->conversa via [data-active].
   ══════════════════════════════════════════════════════════════════════════ */
.cht-tec .cht-workspace { min-width: 0; }
.cht-tec .cht-workspace.hidden { display: none; }
.cht-tec .cht-pane--rail,
.cht-tec .cht-pane--detail { min-width: 0; }

@media (min-width: 901px) {
  .cht-tec .cht-workspace {
    display: grid;
    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
    /* altura ancorada na viewport: cada painel rola por conta propria (feel de
       app, como o prototipo). O offset e aproximado (nav+subnav do portal); a
       verificacao final e no portal real. */
    height: clamp(520px, calc(100dvh - 168px), 1180px);
  }
  .cht-tec .cht-pane--rail {
    display: flex; flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--cht-line);
    background: var(--cht-surface-2);
    overflow: hidden;
  }
  .cht-tec .cht-pane--rail > .cht {
    display: flex; flex-direction: column;
    height: 100%; min-height: 0;
    background: transparent; border-radius: 0;
  }
  .cht-tec .cht-pane--rail .cht-board-host {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
  }
  .cht-tec .cht-pane--detail { min-height: 0; overflow: hidden; }
  .cht-tec .cht-pane--detail > .cht { height: 100%; }
  .cht-tec .cht-workspace .cht-detalhe { height: 100%; }
  .cht-tec .cht-workspace .cht-detail { height: 100%; }
  .cht-tec .cht-workspace .d-main { min-height: 0; height: 100%; }
  .cht-tec .cht-workspace .d-aside { min-height: 0; overflow-y: auto; }
  /* conversa preenche a altura; composer ancorado embaixo (fluxo flex do d-main) */
  .cht-tec .cht-workspace .thread { flex: 1 1 auto; min-height: 0; max-height: none; }

  /* visao KANBAN: a fila ocupa o workspace inteiro; conversa/contexto somem */
  .cht-tec .cht-workspace.cht-workspace--board { grid-template-columns: 1fr; height: auto; }
  .cht-tec .cht-workspace.cht-workspace--board .cht-pane--rail {
    border-right: 0; background: transparent; overflow: visible;
  }
  .cht-tec .cht-workspace.cht-workspace--board .cht-pane--rail > .cht { height: auto; }
  .cht-tec .cht-workspace.cht-workspace--board .cht-pane--detail { display: none; }
}

/* Empty-state do CENTRO (nenhum chamado aberto) */
.cht-tec .cht-detalhe--empty { height: 100%; }
.cht-tec .cht-detail-empty {
  height: 100%;
  min-height: 320px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; text-align: center;
  padding: 40px 32px; color: var(--cht-ink-3);
}
.cht-tec .cht-detail-empty svg { width: 42px; height: 42px; color: var(--cht-line-3); }
.cht-tec .cht-detail-empty h2 { margin: 6px 0 0; font: 800 18px var(--cht-fd); color: var(--cht-ink-2); letter-spacing: -.01em; }
.cht-tec .cht-detail-empty p { margin: 0; max-width: 34ch; font-size: 13px; line-height: 1.5; }

/* ── TRILHO DENSO (renderQueueRail) ─────────────────────────────────────────── */
.cht-tec .cht-queue { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
@media (min-width: 901px) { .cht-tec .cht-queue { flex: 1 1 auto; height: 100%; } }
.cht-tec .cht-queue-top {
  flex: none;
  position: sticky; top: 0; z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 14px 10px;
  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-tec .cht-queue-top { background: var(--cht-surface-2); }
}
.cht-tec .cht-queue-search { flex: 1 1 150px; min-width: 0; }
.cht-tec .cht-queue-search input { width: 100%; }
.cht-tec .cht-queue .cht-viewtoggle { flex: none; }

/* barra de "visoes salvas" — VISUAL por ora (persistencia = fase posterior) */
.cht-tec .cht-views { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
/* Alinhado ao filter chip da Central (.cht-chip da fundação): mesma tipografia,
   e ATIVO = fill tonal suave + texto accent-ink (M3), em vez do slate sólido com
   texto branco de antes — pra Atendimento e Central lerem como o mesmo controle. */
.cht-tec .cht-savedview {
  font: 600 12.5px var(--cht-fu);
  color: var(--cht-ink-2);
  background: var(--cht-surface);
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r-pill);
  padding: 6px 13px; cursor: pointer; white-space: nowrap;
  transition: background var(--cht-dur) var(--cht-ease), color var(--cht-dur) var(--cht-ease), border-color var(--cht-dur) var(--cht-ease);
}
.cht-tec .cht-savedview:hover { color: var(--cht-ink); background: var(--cht-surface-2); }
.cht-tec .cht-savedview.is-on { color: #fff; background: var(--cht-accent); border-color: var(--cht-accent); }
.cht-tec .cht-savedview.is-on:hover { color: #fff; background: var(--cht-accent-ink); border-color: var(--cht-accent-ink); }

.cht-tec .cht-queue-head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 15px 6px;
  font: 700 10.5px var(--cht-fu); letter-spacing: .05em; text-transform: uppercase;
  color: var(--cht-ink-4);
}
.cht-tec .cht-qlist { min-height: 0; }
@media (min-width: 901px) { .cht-tec .cht-qlist { flex: 1 1 auto; overflow-y: auto; } }
.cht-tec .cht-qlist::-webkit-scrollbar { width: 8px; }
.cht-tec .cht-qlist::-webkit-scrollbar-thumb { background: var(--cht-line-3); border-radius: 8px; border: 2px solid var(--cht-surface-2); }
.cht-tec .cht-qempty { padding: 24px 16px; text-align: center; font-size: 12.5px; color: var(--cht-ink-3); }

/* item do trilho */
.cht-tec .cht-qitem {
  position: relative;
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0;
  border-bottom: 1px solid var(--cht-line);
  padding: 11px 15px 11px 18px;
  cursor: pointer;
  transition: background var(--cht-dur) var(--cht-ease);
}
.cht-tec .cht-qitem:hover { background: var(--cht-surface-2); }
.cht-tec .cht-qitem:focus-visible { outline: none; background: var(--cht-accent-weak); box-shadow: inset 0 0 0 2px var(--cht-accent-line); }
.cht-tec .cht-qitem.is-sel { background: var(--cht-accent-weak); }
.cht-tec .qi-prio-edge { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cht-prio-normal); }
.cht-tec .cht-qitem[data-priority="baixa"]   .qi-prio-edge { background: var(--cht-prio-baixa); }
.cht-tec .cht-qitem[data-priority="normal"]  .qi-prio-edge { background: var(--cht-prio-normal); }
.cht-tec .cht-qitem[data-priority="alta"]    .qi-prio-edge { background: var(--cht-prio-alta); }
.cht-tec .cht-qitem[data-priority="critica"] .qi-prio-edge { background: var(--cht-prio-critica); }
.cht-tec .cht-qitem.is-sel .qi-prio-edge { width: 4px; }

.cht-tec .qi-r1 { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; min-width: 0; }
.cht-tec .qi-r1 .cht-num { font-family: var(--cht-fm); font-size: 11px; color: var(--cht-ink-4); }
.cht-tec .qi-r1 .cht-sla { margin-left: auto; }
.cht-tec .qi-title {
  font: 600 13.5px/1.35 var(--cht-fd); color: var(--cht-ink);
  margin-bottom: 6px;
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cht-tec .cht-qitem.is-sel .qi-title { color: var(--cht-accent-deep); }
.cht-tec .qi-r2 { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; color: var(--cht-ink-3); }
.cht-tec .qi-team { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cht-tec .qi-team .qi-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--cht-ink-4); }
.cht-tec .qi-tech { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cht-tec .qi-team--none, .cht-tec .qi-tech--none { color: var(--cht-ink-4); font-style: italic; }
.cht-tec .qi-sep { color: var(--cht-line-3); flex: none; }
.cht-tec .qi-age { margin-left: auto; flex: none; font-family: var(--cht-fm); font-size: 10.5px; color: var(--cht-ink-4); }
/* Solicitante (quem pediu) — avatar + nome, mesmo padrão do técnico. */
.cht-tec .qi-sol { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cht-tec .qi-sol--none { color: var(--cht-ink-4); font-style: italic; }
/* #nº embutido no título — mono discreto, some da proeminência de coluna própria. */
.cht-tec .qi-title .cht-num { font-family: var(--cht-fm); font-weight: 500; color: var(--cht-ink-4); font-size: .9em; margin-right: 3px; }
/* "Aberto em": data de criação do chamado (mono discreto). */
.cht-tec .qi-aberto { flex: none; font-family: var(--cht-fm); font-size: 10.5px; color: var(--cht-ink-4); white-space: nowrap; }
/* Status na fila (dot + rótulo). */
.cht-tec .qi-qstatus { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--cht-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cht-tec .qi-qstatus .cht-dot { flex: none; }
/* Atribuído: técnico (avatar) em cima, grupo embaixo — 2 linhas numa coluna só. */
.cht-tec .qi-atrib { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cht-tec .qi-atrib-tec { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 12px; color: var(--cht-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cht-tec .qi-atrib-grp { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 11px; color: var(--cht-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cht-tec .qi-atrib-grp .qi-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cht-tec .qi-atrib--none { color: var(--cht-ink-4); font-style: italic; }
/* Atividade: última atualização em cima (recência), aberto embaixo. */
.cht-tec .qi-datas { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cht-tec .qi-datas-1 { font-family: var(--cht-fm); font-size: 11.5px; color: var(--cht-ink-2); white-space: nowrap; }
.cht-tec .qi-datas-2 { font-family: var(--cht-fm); font-size: 10px; color: var(--cht-ink-4); white-space: nowrap; }
.cht-tec .cht-qsla-none { margin-left: auto; font: 600 10px var(--cht-fu); color: var(--cht-ink-4); text-transform: uppercase; letter-spacing: .03em; }

/* badge de TIPO (incidente / requisicao) — usado no rail */
.cht-tec .cht-tbadge {
  font: 700 10px var(--cht-fu); letter-spacing: .03em; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--cht-r-pill); flex: none; white-space: nowrap;
}
.cht-tec .cht-tbadge.b-inc { background: var(--cht-breach-weak); color: var(--cht-breach); }
.cht-tec .cht-tbadge.b-req { background: var(--cht-accent-weak); color: var(--cht-accent-ink); }

/* ── DIREITA (contexto): presenca de agentes + solicitante + KB ─────────────── */
.cht-tec .cht-presence {
  display: flex; align-items: center; gap: 9px;
  margin: 14px 18px 4px; padding: 9px 12px;
  border: 1px solid var(--cht-line-2); border-radius: var(--cht-r);
  background: var(--cht-surface); color: var(--cht-ink-3);
  font-size: 12px;
}
.cht-tec .cht-presence svg { width: 15px; height: 15px; flex: none; color: var(--cht-ink-4); }
.cht-tec .cht-presence.is-collision { background: var(--cht-warn-weak); border-color: var(--cht-warn-line); color: var(--cht-warn); }
.cht-tec .cht-presence.is-collision svg { color: var(--cht-warn); }
.cht-tec .cht-whocard { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cht-tec .cht-whocard-txt { min-width: 0; }
.cht-tec .cht-whocard-txt b { display: block; font: 700 14px var(--cht-fd); color: var(--cht-ink); overflow: hidden; text-overflow: ellipsis; }
.cht-tec .cht-whocard-txt span { font-size: 12px; color: var(--cht-ink-3); }
.cht-tec .cht-ctx-kb-hint { margin: 0; font-size: 12px; line-height: 1.5; color: var(--cht-ink-3); }

/* ── MOBILE do workspace (<= 900px): 1 coluna, alterna fila<->conversa ──────── */
@media (max-width: 900px) {
  .cht-tec .cht-workspace { display: block; height: auto; }
  .cht-tec .cht-workspace[data-active="fila"] .cht-pane--detail { display: none; }
  .cht-tec .cht-workspace[data-active="detalhe"] .cht-pane--rail { display: none; }
  .cht-tec .cht-pane--rail { border-right: 0; background: transparent; }
}


/* ==========================================================================
   E - PALCO (fila full-width <-> ficha dedicada)  [redesenho "Ficha"]
   Substitui o split de 3 paineis (rejeitado, "cara de Outlook"). A fila e a
   FICHA sao dois ESTADOS do mesmo palco (.cht-stage[data-mode]): nunca lado a
   lado. Clicar troca fila->ficha no lugar (feel Linear/GitHub Issues). Regras
   novas vencem por virem depois (o bloco D antigo, .cht-workspace, fica inerte
   por nao existir mais no markup).
   ========================================================================== */
.cht-tec .cht-stage { min-width: 0; }
.cht-tec .cht-stage.hidden { display: none; }

/* Troca de estado: so o pane do modo ativo aparece (swap, nao split). */
.cht-tec .cht-stage-pane { display: none; min-width: 0; }
.cht-tec .cht-stage[data-mode="fila"]  .cht-stage-pane--fila,
.cht-tec .cht-stage[data-mode="ficha"] .cht-stage-pane--ficha {
  display: flex; flex-direction: column;
}

/* Transicao suave ao entrar (o pane so ganha a animacao quando passa de
   display:none -> flex, i.e. na troca fila<->ficha; prev/next nao re-dispara). */
@keyframes cht-stage-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cht-tec .cht-stage[data-mode="fila"]  .cht-stage-pane--fila,
.cht-tec .cht-stage[data-mode="ficha"] .cht-stage-pane--ficha {
  animation: cht-stage-in 200ms var(--cht-ease) both;
}
@media (prefers-reduced-motion: reduce) {
  .cht-tec .cht-stage-pane { animation: none !important; }
}

@media (min-width: 901px) {
  /* Altura ancorada na viewport (feel de app): cada estado rola por conta
     propria. Offset aproximado do nav+subnav do portal (verificacao final no
     portal real). */
  /* Altura ancorada no viewport. O offset (chrome acima do stage: margem do card
     ~13px + subnav ~80px ≈ 93px) estava em 168px — exagerado, deixava ~60-139px de
     espaço morto abaixo do card. Corrigido p/ 112px (93 + folga) → o composer desce
     pro fundo real e a área de leitura fica bem maior, sem estourar o viewport. */
  .cht-tec .cht-stage { height: clamp(520px, calc(100dvh - 112px), 1180px); }
  .cht-tec .cht-stage-pane { min-height: 0; height: 100%; }

  /* --- FILA (largura cheia) --- */
  .cht-tec .cht-stage-pane--fila > .cht {
    display: flex; flex-direction: column; height: 100%; min-height: 0;
    background: transparent; border-radius: 0;
  }
  .cht-tec .cht-stage-pane--fila .cht-board-host {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  }
  /* Lista densa centrada numa medida confortavel (evita esticar demais); o
     Kanban (que nao usa .cht-queue) segue em largura cheia. */
  .cht-tec .cht-stage-pane--fila .cht-queue {
    width: 100%; max-width: 1200px; margin: 0 auto;
  }

  /* Lista densa full-width vira LINHA horizontal (estilo lista de issues do
     Linear/GitHub): [# tipo SLA] | titulo (cresce) | time . tecnico . idade. */
  .cht-tec .cht-stage-pane--fila .cht-qitem {
    display: flex; align-items: center; gap: 18px;
    padding: 11px 18px 11px 22px;
  }
  .cht-tec .cht-stage-pane--fila .qi-r1 {
    flex: none; width: 176px; margin: 0; gap: 9px;
  }
  .cht-tec .cht-stage-pane--fila .qi-r1 .cht-sla { margin-left: auto; }
  .cht-tec .cht-stage-pane--fila .qi-title {
    flex: 1 1 auto; min-width: 0; margin: 0; display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cht-tec .cht-stage-pane--fila .qi-r2 {
    flex: none; margin: 0; justify-content: flex-end; gap: 14px;
  }
  .cht-tec .cht-stage-pane--fila .qi-r2 .qi-age { margin-left: 0; }
  .cht-tec .cht-stage-pane--fila .qi-team { max-width: 170px; }
  .cht-tec .cht-stage-pane--fila .qi-tech { max-width: 190px; }

  /* --- FICHA (largura cheia) --- conversa como estrela + contexto lateral
     ESTREITO DENTRO da ficha (300px), nunca a fila ao lado. */
  .cht-tec .cht-stage-pane--ficha > .cht { height: 100%; min-height: 0; }
  .cht-tec .cht-stage-pane--ficha .cht-detalhe { height: 100%; }
  .cht-tec .cht-stage-pane--ficha .cht-detail { height: 100%; }
  .cht-tec .cht-stage-pane--ficha .d-main { min-height: 0; height: 100%; }
  .cht-tec .cht-stage-pane--ficha .d-aside { min-height: 0; overflow-y: auto; }
  /* UMA rolagem única na coluna principal: o corpo (.cht-tec-body) é o ÚNICO
     scroller e contém a descrição (card branco, altura NATURAL) + a conversa
     (trilha própria). Rolando o corpo vê-se a descrição INTEIRA e o chat INTEIRO
     — nenhum dos dois fica preso num quadradinho. Continuam visualmente distintos
     (card branco vs. cabeçalho "Conversa e eventos" + trilha cinza). */
  .cht-tec .cht-stage-pane--ficha .cht-tec-body {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
  }
  /* Gutter horizontal na descrição (igual ao solicitante): o card recua 22px das
     laterais, alinhado ao crumb/thead/conversa/mensagens — antes ia rente à borda
     por ser filho direto do corpo (sem padding), destoando do resto. */
  .cht-tec .cht-stage-pane--ficha .cht-opening--top { flex: none; margin-left: 22px; margin-right: 22px; }
  .cht-tec .cht-stage-pane--ficha .cht-chatwrap { flex: none; }
  .cht-tec .cht-stage-pane--ficha .thread { flex: none; min-height: 0; max-height: none; overflow: visible; }

  /* Composer COLAPSADO (ideia do GLPI): por padrão mostra só o campo como gatilho
     de 1 linha; ao FOCAR expande com Publica/Interna + ações de envio. Assim o
     "post de abertura" (a descrição) fica com a maior parte da coluna — o chamado
     é o protagonista, o composer só cresce quando você vai responder. */
  .cht-tec .cht-stage-pane--ficha .cht-composer:not(:focus-within) .modes,
  .cht-tec .cht-stage-pane--ficha .cht-composer:not(:focus-within) .cht-send-row { display: none; }
  .cht-tec .cht-stage-pane--ficha .cht-composer:not(:focus-within) .field .cht-textarea { min-height: 24px; }

  /* COMPACTAÇÃO do topo (estilo GLPI, enxuto): o cabeçalho devolve altura real
     pras duas regiões (descrição + conversa) caberem sem rolagens minúsculas.
     "Aberto por" sai — é redundante com o painel SOLICITANTE à direita. */
  .cht-tec .cht-stage-pane--ficha .crumb { padding-top: 8px; padding-bottom: 8px; }
  .cht-tec .cht-stage-pane--ficha .thead { padding-top: 10px; padding-bottom: 9px; }
  .cht-tec .cht-stage-pane--ficha .thead h2 { margin-top: 5px; font-size: 17.5px; }
  .cht-tec .cht-stage-pane--ficha .thead .tmeta { display: none; }
  .cht-tec .cht-stage-pane--ficha .chat-hd { padding-top: 9px; padding-bottom: 9px; }

/* --- Cabecalho da ficha (toolbar Linear-like): voltar | anterior/proximo |
   #num | (direita) acoes principais + status conexao. --- */
.cht-tec .crumb-r {
  display: inline-flex; align-items: center; gap: 12px;
  margin-left: auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end;
}
.cht-tec .crumb-r .cht-live { margin-left: 0; }

.cht-tec .d-nav { display: inline-flex; align-items: center; gap: 4px; }
.cht-tec .d-navbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--cht-line-3, var(--cht-line-2)); border-radius: var(--cht-r-sm);
  background: var(--cht-surface); color: var(--cht-ink-2); cursor: pointer;
  box-shadow: var(--cht-sh-1);
  transition: background var(--cht-dur) var(--cht-ease), color var(--cht-dur) var(--cht-ease), border-color var(--cht-dur) var(--cht-ease);
}
.cht-tec .d-navbtn svg { width: 18px; height: 18px; }
.cht-tec .d-navbtn:hover { background: var(--cht-surface-2); color: var(--cht-ink); border-color: var(--cht-line-3); }
.cht-tec .d-navbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cht-accent-weak); }
.cht-tec .d-navbtn[disabled] { opacity: .38; cursor: default; }
.cht-tec .d-navbtn[disabled]:hover { background: var(--cht-surface); color: var(--cht-ink-2); border-color: var(--cht-line-2); }
.cht-tec .d-pos {
  font: 600 11.5px var(--cht-fm); color: var(--cht-ink-4);
  white-space: nowrap; margin-left: 2px; font-variant-numeric: tabular-nums;
}

.cht-tec .d-actions { display: inline-flex; align-items: center; gap: 8px; }
.cht-tec .d-act-btn { min-height: 34px; padding: 7px 12px; font-size: 12.5px; white-space: nowrap; }
.cht-tec .d-act-btn svg { width: 15px; height: 15px; }
.cht-tec .d-act-status { display: inline-flex; align-items: center; }
.cht-tec .d-act-select {
  font: 600 12.5px var(--cht-fu); padding: 7px 30px 7px 11px; min-height: 34px;
  border-radius: var(--cht-r-sm);
}
.cht-tec .d-act-mine {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 12px var(--cht-fu); color: var(--cht-ok);
  background: var(--cht-ok-weak); border: 1px solid var(--cht-ok-line);
  border-radius: var(--cht-r); padding: 7px 11px; white-space: nowrap;
}
.cht-tec .d-act-mine svg { width: 15px; height: 15px; }

/* chip de SLA com countdown no cabecalho (desktop; no mobile a faixa sticky
   .cht-slaband cobre isso -> escondido abaixo). */
.cht-tec .thead .r1 .d-sla-inline { margin-left: 2px; }

/* Empty-state da ficha (nenhum chamado aberto) — palco em largura cheia. */
.cht-tec .cht-stage-pane--ficha .cht-detalhe--empty { height: 100%; }

@media (max-width: 900px) {
  /* Mobile usa a barra de acao no rodape + faixa de SLA sticky: o cluster de
     acoes e o chip inline do cabecalho saem para nao duplicar. */
  .cht-tec .d-actions { display: none; }
  .cht-tec .thead .r1 .d-sla-inline { display: none; }
}

@media (max-width: 560px) {
  /* A FICHA vira tela cheia ancorada acima da bottom-nav do portal (migra o
     comportamento antigo do .cht-pane--detail para o novo pane da ficha). */
  #chamadosTecnicoTab .cht-stage[data-mode="ficha"] .cht-stage-pane--ficha,
  .cht-view .cht-stage[data-mode="ficha"] .cht-stage-pane--ficha {
    position: fixed; inset: 0 0 var(--cht-dock-b) 0; z-index: 10005;
    overflow: hidden; background: var(--cht-surface);
    animation: none;
  }
  #chamadosTecnicoTab .cht-stage[data-mode="ficha"] .cht-stage-pane--ficha > .cht,
  .cht-view .cht-stage[data-mode="ficha"] .cht-stage-pane--ficha > .cht {
    height: 100%; min-height: 0; border-radius: 0;
    display: flex; flex-direction: column;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   F · REFINO "ATENDIMENTO" (ajustes de gestor) — toolbar persistente, lista
   em grid com cabecalho de colunas ORDENAVEIS, SLA em coluna propria (fim do
   overlap com o titulo) e hierarquia M3 (Linear/Height). Bloco APENDICE: vence
   por vir depois (sobrescreve o layout flex antigo de .cht-qitem no palco).
   ══════════════════════════════════════════════════════════════════════════ */

/* --- Toolbar persistente (busca + pills + selo ao vivo + toggle) ------------
   Renderizada UMA vez (fila.js); ao alternar Lista<->Kanban so o miolo troca,
   a toolbar fica FIXA (sem re-render/pulo). Vidro frio como o resto do modulo. */
.cht-tec .cht-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  padding: 12px 22px; min-width: 0;
  /* Lança a toolbar (e o popover de Filtros dentro dela) acima da fila: um
     ancestral .cht-stage-pane usa transform → cria contexto de empilhamento que
     prendia o .cht-fpanel ATRÁS do header/linhas (z-index só no painel não escapa;
     é preciso elevar a barra inteira). */
  position: relative; z-index: 100;
  border-bottom: 1px solid var(--cht-glass-line);
  background: var(--cht-glass);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cht-tec .cht-toolbar { background: var(--cht-surface); }
}
.cht-tec .cht-tb-tools {
  display: inline-flex; align-items: center; gap: 10px;
  margin-left: auto; flex: none; min-width: 0;
}
.cht-tec .cht-toolbar-search { width: min(230px, 42vw); }
.cht-tec .cht-toolbar-search input { width: 100%; }
.cht-tec .cht-toolbar .cht-live { flex: none; }
/* Botao de filtros avancados: encaixa junto da busca, sem encolher. */
.cht-tec .cht-toolbar .cht-fbox { flex: none; align-self: center; }

/* Pills de visao como filter chips M3 — ativa destacada + contador discreto. */
.cht-tec .cht-toolbar .cht-views {
  flex: 0 1 auto; margin-top: 0; gap: 7px; min-width: 0;
}
.cht-tec .cht-toolbar .cht-savedview {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; font: 600 12.5px var(--cht-fu);
}
.cht-tec .cht-savedview .sv-count {
  font: 700 11px var(--cht-fm); font-variant-numeric: tabular-nums;
  color: var(--cht-ink-4); background: var(--cht-surface-3);
  border-radius: var(--cht-r-pill); padding: 1px 7px; min-width: 18px; text-align: center;
  transition: background var(--cht-dur) var(--cht-ease), color var(--cht-dur) var(--cht-ease);
}
.cht-tec .cht-savedview .sv-count:empty { display: none; }
.cht-tec .cht-savedview.is-on .sv-count { background: var(--cht-surface); color: var(--cht-accent-ink); }

/* Toggle segmentado coeso — reforca a base .cht-viewtoggle no contexto da barra. */
.cht-tec .cht-toolbar .cht-viewtoggle { flex: none; align-self: center; }

/* --- Cabecalho de colunas ORDENAVEIS (so desktop; alinha com a linha) -------- */
.cht-tec .cht-qhead { display: none; }
.cht-tec .cht-qh {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0; min-height: 0;
  margin: 0; padding: 0; background: none; border: 0; cursor: pointer; text-align: left;
  font: 700 10.5px var(--cht-fu); letter-spacing: .05em; text-transform: uppercase;
  color: var(--cht-ink-4); white-space: nowrap; -webkit-appearance: none; appearance: none;
  transition: color var(--cht-dur) var(--cht-ease);
}
.cht-tec .cht-qh:hover { background: none; color: var(--cht-ink-2); box-shadow: none; transform: none; }
.cht-tec .cht-qh.is-active { color: var(--cht-accent-ink); }
.cht-tec .cht-qh:focus-visible { outline: none; border-radius: var(--cht-r-sm); box-shadow: 0 0 0 3px var(--cht-accent-weak); }
.cht-tec .cht-qh--title, .cht-tec .cht-qh--title:hover { cursor: default; color: var(--cht-ink-4); }
.cht-tec .cht-qh .qh-lb { overflow: hidden; text-overflow: ellipsis; }
.cht-tec .cht-qh .qh-caret {
  width: 12px; height: 12px; flex: none; opacity: 0;
  transition: opacity var(--cht-dur) var(--cht-ease), transform var(--cht-dur) var(--cht-ease);
}
.cht-tec .cht-qh:hover .qh-caret { opacity: .45; }
.cht-tec .cht-qh.is-active .qh-caret { opacity: 1; }
.cht-tec .cht-qh.is-desc .qh-caret { transform: rotate(180deg); }
.cht-tec .cht-qh--title .qh-caret { display: none; }

/* Coluna de prioridade (rotulo + dot) e coluna de categoria da linha do trilho.
   Priority-label so entra no grid desktop; abaixo disso a barra-edge basta. */
.cht-tec .qi-prio-lb { display: none; }
.cht-tec .qi-prio-lb { align-items: center; gap: 6px; min-width: 0; font: 600 11px var(--cht-fu); color: var(--cht-ink-3); }
.cht-tec .qi-prio-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--cht-prio-normal); }
.cht-tec .qi-prio-lb[data-priority="baixa"]   .qi-prio-dot { background: var(--cht-prio-baixa); }
.cht-tec .qi-prio-lb[data-priority="normal"]  .qi-prio-dot { background: var(--cht-prio-normal); }
.cht-tec .qi-prio-lb[data-priority="alta"]    .qi-prio-dot { background: var(--cht-prio-alta); }
.cht-tec .qi-prio-lb[data-priority="critica"] .qi-prio-dot { background: var(--cht-prio-critica); }
.cht-tec .qi-prio-tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cht-tec .qi-cat { display: inline-flex; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--cht-ink-3); }
.cht-tec .qi-cat--none { color: var(--cht-ink-4); }

/* ── DESKTOP (>=901): lista em GRID alinhada ao cabecalho ────────────────────
   Uma unica fonte de verdade p/ as colunas (--cht-qgrid) usada por cabecalho E
   linha -> alinhamento perfeito. SLA ganha coluna propria: fim do overlap com o
   titulo (ajuste 2). qi-r1/qi-r2 viram display:contents p/ seus filhos cairem
   direto no grid da linha. */
@media (min-width: 901px) {
  .cht-tec .cht-stage-pane--fila {
    /* 7 colunas: urgência · título(+#nº=ID) · status · requerente ·
       atribuído(técnico+grupo) · atualizado(+aberto) · SLA. */
    --cht-qgrid:
      92px
      minmax(160px, 1fr)
      minmax(104px, 132px)
      minmax(120px, 160px)
      minmax(130px, 180px)
      minmax(96px, 140px)
      86px;
  }

  .cht-tec .cht-stage-pane--fila .cht-toolbar { flex: none; }
  .cht-tec .cht-stage-pane--fila .cht-queue { width: 100%; max-width: none; margin: 0; }

  .cht-tec .cht-stage-pane--fila .cht-qhead {
    display: grid; grid-template-columns: var(--cht-qgrid);
    align-items: center; gap: 0 14px;
    padding: 9px 18px 9px 22px;
    position: sticky; top: 0; z-index: 3;
    background: var(--cht-surface-2);
    border-bottom: 1px solid var(--cht-line-2);
  }
  .cht-tec .cht-stage-pane--fila .cht-qlist { scrollbar-gutter: stable; }

  .cht-tec .cht-stage-pane--fila .cht-qitem {
    display: grid; grid-template-columns: var(--cht-qgrid);
    align-items: center; gap: 0 14px;
    padding: 12px 18px 12px 22px;
  }
  .cht-tec .cht-stage-pane--fila .qi-r1,
  .cht-tec .cht-stage-pane--fila .qi-r2 { display: contents; }
  .cht-tec .cht-stage-pane--fila .qi-sep { display: none; }
  .cht-tec .cht-stage-pane--fila .qi-prio-lb { display: inline-flex; }

  .cht-tec .cht-stage-pane--fila .qi-prio-lb,
  .cht-tec .cht-stage-pane--fila .qi-qstatus,
  .cht-tec .cht-stage-pane--fila .qi-sol,
  .cht-tec .cht-stage-pane--fila .qi-atrib,
  .cht-tec .cht-stage-pane--fila .qi-datas { min-width: 0; max-width: none; }
  .cht-tec .cht-stage-pane--fila .qi-title {
    flex: initial; min-width: 0; margin: 0; display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cht-tec .cht-stage-pane--fila .qi-r1 .cht-sla,
  .cht-tec .cht-stage-pane--fila .qi-r1 .cht-qsla-none { margin-left: 0; justify-self: start; min-width: 0; }
  .cht-tec .cht-stage-pane--fila .qi-r2 .cht-sla { margin-left: 0; justify-self: end; }
  .cht-tec .cht-stage-pane--fila .cht-num { justify-self: start; }
}

/* ── TABLET/estreito 561-900: mantem o card empilhado; expoe categoria no r2 e
   esconde o cabecalho de colunas (nao ha grid pra alinhar). ──────────────── */
@media (max-width: 900px) {
  .cht-tec .cht-qhead { display: none; }
  .cht-tec .qi-r2 .qi-cat { max-width: 40%; }
}

/* ── MOBILE (<=560): pills recolhem, mini-stats viram filtros (grid 3), busca
   ocupa a linha, toggle oculto (fila = lista plana). ─────────────────────── */
@media (max-width: 560px) {
  .cht-tec .cht-toolbar { padding: 10px 14px; gap: 10px; }
  .cht-tec .cht-toolbar .cht-views { display: none; }
  .cht-tec .cht-tb-tools { order: 1; width: 100%; gap: 8px; margin-left: 0; }
  .cht-tec .cht-toolbar-search { flex: 1 1 auto; width: auto; }
  .cht-tec .cht-toolbar .cht-viewtoggle { display: none; }
  .cht-tec .cht-toolbar .cht-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; order: 2; }
}
/* Desktop: as mini-stats nao aparecem (as pills, com contador, cobrem). */
@media (min-width: 561px) {
  .cht-tec .cht-toolbar .cht-stats { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cht-tec .cht-qh, .cht-tec .cht-qh .qh-caret, .cht-tec .cht-savedview .sv-count { transition: none; }
}