/* ══════════════════════════════════════════════════════════════════════════
   Central de Chamados: modelos de resposta (caixa de resposta da ficha).
   Painel aberto por "/" no começo da linha ou pelo botão de raio
   (modelos-resposta.js). Mora no <body> com position: fixed sobre a caixa, por
   isso o prefixo próprio (.chmr-*) e só os tokens globais --cht-*.

   Duas colunas: a lista à esquerda e, à direita, a prévia do texto JÁ com os
   dados do chamado. As variáveis aparecem pintadas na prévia para o técnico ver
   o que foi trocado; na caixa entram como texto comum.
   ══════════════════════════════════════════════════════════════════════════ */

.chmr {
  position: fixed;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--cht-line-2);
  border-radius: var(--cht-r-lg);
  background: var(--cht-surface);
  box-shadow: var(--cht-sh-3);
  color: var(--cht-ink-2);
  font: 400 13px var(--cht-fu);
  transform-origin: 24px 100%;
}
.chmr.is-in { animation: chmrIn .17s var(--cht-ease-out, ease) both; }
@keyframes chmrIn {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* ── Topo: busca (botão) ou a "/" digitada (atalho) ───────────────────────── */
.chmr-topo { padding: 10px 12px 8px; border-bottom: 1px solid var(--cht-line); }
.chmr-busca {
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px; height: 34px;
  border: 1px solid var(--cht-line-2); border-radius: var(--cht-r-pill);
  background: var(--cht-surface-2);
  color: var(--cht-ink-4);
  transition: border-color var(--cht-dur), box-shadow var(--cht-dur);
}
.chmr-busca:focus-within { border-color: var(--cht-accent-line); box-shadow: 0 0 0 3px var(--cht-accent-weak); }
.chmr-busca svg { width: 15px; height: 15px; flex: none; }
.chmr .chmr-busca .chmr-busca-input {
  flex: 1; min-width: 0; height: 100%;
  border: none; outline: none; box-shadow: none; padding: 0;
  background: transparent; color: var(--cht-ink); font: 500 13px var(--cht-fu);
}
.chmr-barra { display: none; align-items: baseline; gap: 2px; min-height: 22px; font: 600 13px var(--cht-fm); color: var(--cht-ink); }
.chmr-barra-slash { color: var(--cht-accent); font-weight: 800; }
.chmr-barra-dica { margin-left: 10px; font: 400 11.5px var(--cht-fu); color: var(--cht-ink-4); }
.chmr.is-barra .chmr-busca { display: none; }
.chmr.is-barra .chmr-barra { display: flex; }

/* ── Meio: lista + prévia ─────────────────────────────────────────────────── */
.chmr-meio {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
.chmr-lista {
  list-style: none; margin: 0; padding: 6px;
  overflow-y: auto; overscroll-behavior: contain;
  border-right: 1px solid var(--cht-line);
}
.chmr-grupo {
  padding: 10px 10px 4px;
  font: 700 10.5px var(--cht-fu); letter-spacing: .05em; text-transform: uppercase;
  color: var(--cht-ink-4);
}
.chmr-grupo:first-child { padding-top: 4px; }
.chmr-item {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px;
  padding: 8px 8px 8px 12px;
  border-radius: var(--cht-r);
  cursor: pointer;
  transition: background var(--cht-dur);
}
.chmr-item::before {
  content: ''; position: absolute; left: 3px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 3px; background: var(--cht-accent);
  opacity: 0; transform: scaleY(.4); transition: opacity var(--cht-dur), transform var(--cht-dur) var(--cht-ease-out, ease);
}
.chmr-item.is-ativo { background: var(--cht-accent-weak); }
.chmr-item.is-ativo::before { opacity: 1; transform: none; }
.chmr-item-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chmr-item-linha { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chmr-item-titulo {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 650 13px var(--cht-fd); color: var(--cht-ink);
}
.chmr-item.is-ativo .chmr-item-titulo { color: var(--cht-accent-ink); }
.chmr-item-trecho {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11.5px; color: var(--cht-ink-3);
}
.chmr-origem, .chmr-usos { flex: none; font: 600 10.5px var(--cht-fu); color: var(--cht-ink-4); }
.chmr-usos { font-family: var(--cht-fm); }
.chmr-selo {
  flex: none; padding: 1px 7px; border-radius: var(--cht-r-pill);
  font: 700 10px var(--cht-fu); letter-spacing: .02em; border: 1px solid transparent;
}
.chmr-selo--solucionado { color: var(--cht-ok); background: var(--cht-ok-weak); border-color: var(--cht-ok-line); }
.chmr-selo--pendente { color: var(--cht-warn); background: var(--cht-warn-weak); border-color: var(--cht-warn-line); }

/* canto direito: contador de uso; no item ativo (teclado) ou no hover, editar/excluir */
.chmr-item-lado { position: relative; display: grid; place-items: center end; min-height: 24px; }
.chmr-item.is-editavel .chmr-item-lado { min-width: 50px; }
.chmr-acoes {
  position: absolute; inset: 0 0 0 auto;
  display: inline-flex; align-items: center; gap: 2px;
  opacity: 0; pointer-events: none; transition: opacity var(--cht-dur);
}
.chmr-item:hover .chmr-acoes, .chmr-item.is-ativo .chmr-acoes, .chmr-acoes:focus-within { opacity: 1; pointer-events: auto; }
.chmr-item.is-editavel:hover .chmr-usos, .chmr-item.is-editavel.is-ativo .chmr-usos { opacity: 0; }
.chmr-acao {
  display: grid; place-items: center; width: 24px; height: 24px;
  border: none; border-radius: var(--cht-r-sm); background: transparent;
  color: var(--cht-ink-3); cursor: pointer;
  transition: background var(--cht-dur), color var(--cht-dur);
}
.chmr-acao svg { width: 13px; height: 13px; }
.chmr-acao:hover { background: var(--cht-surface); color: var(--cht-accent-ink); }
.chmr-acao--perigo:hover { color: var(--cht-breach); }
.chmr-acao:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cht-accent-line); }
.chmr-vazio { padding: 18px 12px; font-size: 12.5px; line-height: 1.5; color: var(--cht-ink-3); }
.chmr-vazio b { display: block; margin-bottom: 2px; color: var(--cht-ink-2); }
.chmr-ocultos { padding: 10px 12px 6px; font-size: 11.5px; color: var(--cht-ink-4); }

/* prévia: o texto como vai sair, com as variáveis marcadas */
.chmr-previa {
  display: flex; flex-direction: column; min-height: 0;
  padding: 12px 16px 12px;
  background: var(--cht-surface-2);
  overflow-y: auto;
}
.chmr-previa-hd {
  margin-bottom: 8px;
  font: 700 10.5px var(--cht-fu); letter-spacing: .05em; text-transform: uppercase;
  color: var(--cht-ink-4);
}
.chmr-previa-txt {
  flex: 1 1 auto;
  padding: 11px 13px;
  border: 1px solid var(--cht-line);
  border-radius: var(--cht-r) var(--cht-r) var(--cht-r) 4px;
  background: var(--cht-surface);
  font-size: 13px; line-height: 1.55; color: var(--cht-ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.chmr-var {
  padding: 0 3px; margin: 0 -1px;
  border-radius: 4px;
  background: var(--cht-accent-weak);
  color: var(--cht-accent-ink);
  box-shadow: inset 0 -1.5px 0 var(--cht-accent-line);
}
.chmr-var.is-faltando {
  background: var(--cht-warn-weak); color: var(--cht-warn);
  box-shadow: inset 0 -1.5px 0 var(--cht-warn-line);
  font-family: var(--cht-fm); font-size: 12px;
}
.chmr-lacuna { border-bottom: 1.5px dashed var(--cht-ink-4); color: var(--cht-ink-3); }
.chmr-previa-pe {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin-top: 9px; font-size: 11px; color: var(--cht-ink-4);
}
.chmr-previa-sugere {
  padding: 2px 8px; border-radius: var(--cht-r-pill); border: 1px solid transparent;
  font: 600 10.5px var(--cht-fu);
}

/* ── Pé: salvar + teclas ──────────────────────────────────────────────────── */
.chmr-pe {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px 7px 8px;
  border-top: 1px solid var(--cht-line);
  background: var(--cht-surface);
}
.chmr-salvar {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border: 1px dashed var(--cht-line-2); border-radius: var(--cht-r-pill);
  background: transparent; cursor: pointer;
  font: 600 12px var(--cht-fu); color: var(--cht-ink-2);
  transition: background var(--cht-dur), border-color var(--cht-dur), color var(--cht-dur);
}
.chmr-salvar svg { width: 13px; height: 13px; }
.chmr-salvar:hover:not(:disabled) { border-style: solid; border-color: var(--cht-accent-line); background: var(--cht-accent-weak); color: var(--cht-accent-ink); }
.chmr-salvar:disabled { opacity: .5; cursor: default; }
.chmr-salvar:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cht-accent-weak); }
.chmr-teclas { font-size: 11px; color: var(--cht-ink-4); white-space: nowrap; }
.chmr-teclas kbd {
  display: inline-block; min-width: 18px; padding: 0 4px; margin: 0 1px;
  border: 1px solid var(--cht-line-2); border-bottom-width: 2px; border-radius: 4px;
  background: var(--cht-surface-2);
  font: 600 10px/16px var(--cht-fm); color: var(--cht-ink-3); text-align: center;
}

/* ── Na caixa de resposta ─────────────────────────────────────────────────── */
.cht-tec .cht-reply-attach.chmr-gatilho.is-on { background: var(--cht-accent-weak); color: var(--cht-accent-ink); }

/* botão que o modelo sugere: anel verde (solucionar) ou âmbar (pendente) */
.cht-tec .cht-send-alt.chmr-sugerido { box-shadow: 0 0 0 2px var(--cht-ok-line); }
.cht-tec .cht-send-alt.chmr-sugerido[data-cht-send-status="pendente"] {
  color: var(--cht-warn); background: var(--cht-warn-weak); border-color: var(--cht-warn-line);
  box-shadow: 0 0 0 2px var(--cht-warn-line);
}
.cht-tec .cht-send-alt.chmr-sugerido-in { animation: chmrPulso .9s var(--cht-ease-out, ease) 1; }
@keyframes chmrPulso {
  0% { transform: none; }
  30% { transform: translateY(-2px); }
  60% { transform: none; }
}

/* ── Modal de criar/editar (anexado ao <body>) ────────────────────────────── */
@media (min-width: 768px) {
  .modal-card.chmr-modal, .modal-card:has(.chmr-modal) { width: min(560px, 94vw); }
}

/* ── Celular: só a lista; a prévia vira o trecho de cada item ─────────────── */
@media (max-width: 639px) {
  .chmr-meio { grid-template-columns: 1fr; }
  .chmr-previa { display: none; }
  .chmr-lista { border-right: none; }
  .chmr-teclas { display: none; }
  .chmr-item-trecho { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .chmr-acoes { opacity: 1; pointer-events: auto; }
  .chmr-item.is-editavel .chmr-usos { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .chmr.is-in, .cht-tec .cht-send-alt.chmr-sugerido-in { animation: none; }
  .chmr-item::before { transition: none; }
}