/* Recursos experimentais por unidade (js/recursos/*). Só tokens (tokens.css e tema-hubmed.css), sem cor
 * fixa e sem estilo inline (CSP). Uma seção por módulo, cada uma com o seu comentário de cabeçalho.
 * Prefixos: rx- (botões, chamada e painel do composer), cfg-rx- (Configurações). */

/* botões */
.rx-bt, .rx-esc, .rx-ch, .rx-painel {
  --rx-link: var(--info); /* azul-petróleo do botão do WhatsApp; navy no visual HubMed */
  --rx-linha: color-mix(in srgb, var(--ink) 12%, transparent);
}

/* No balão do chat a ordem é a do WhatsApp: [resposta ao botão] texto, rodapé, hora, botões. O miolo
 * (.rx-bt) vira "contents" para o rodapé ficar sobre a hora e as linhas de botão abaixo dela. */
.at-bolha:has(.rx-bt, .rx-esc) { display: flex; flex-direction: column; }
.at-bolha:has(.rx-bt, .rx-esc) > :not(.at-rodape):not(.at-texto):not(.at-citacao):has(.rx-bt, .rx-esc) { display: contents; }
.at-bolha:has(.rx-bt) { min-width: min(232px, 100%); }
.at-bolha .rx-bt { display: contents; }
.at-bolha:has(.rx-bt) > .at-rodape { order: 1; }
.at-bolha .rx-bt-lista { order: 2; }
.at-bolha .rx-esc { order: -1; }

.rx-bt-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; margin-top: 3px; }
.rx-bt-rodape { font-size: var(--fs-1); line-height: 1.3; color: var(--ink-faint); }
.rx-selo {
  display: inline-flex; align-items: center; gap: 3px; height: 16px; padding: 0 6px;
  border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-hover); font-size: 11px; font-weight: var(--fw-2); line-height: 1; white-space: nowrap;
}

/* Botões empilhados como o cliente vê: linhas de largura total, separadas por um fio, sem clique no CRM. */
.rx-bt-lista { list-style: none; margin: 6px -9px -4px; padding: 0; }
.rx-bt-item {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 6px 30px; margin-top: 3px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--rx-link); font-size: var(--fs-2); font-weight: var(--fw-2); line-height: 1.25;
  text-align: center; cursor: default; user-select: none;
}
.rx-bt-ico { flex: none; }
.rx-bt-rotulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-bt-marca { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.rx-bt-item.is-escolhido { color: var(--ok); background: color-mix(in srgb, var(--ok) 11%, transparent); }
.rx-bt.is-respondida .rx-bt-item:not(.is-escolhido) { color: var(--ink-faint); }

/* Resposta do cliente: selo e citação curta da pergunta, no lugar da citação comum. */
.rx-esc {
  display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-bottom: 4px; padding: 4px 8px;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--rx-link) 12%, transparent); font-size: var(--fs-1); line-height: 1.3;
}
.rx-esc.is-sem-citacao { padding: 0; background: none; }
.rx-esc-selo { display: inline-flex; align-items: center; gap: 4px; color: var(--rx-link); font-weight: var(--fw-2); }
.rx-esc-cit { max-width: 100%; color: var(--ink-soft); }

/* chamada */
.at-sistema:has(.rx-ch) > span:not(:has(.rx-ch)) { display: none; }
.at-sistema > span:has(.rx-ch) { padding: 0; background: none; }
.rx-ch {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; max-width: min(100%, 440px);
  padding: 6px 10px 6px 6px; border-radius: var(--radius-sm); background: var(--surface);
  box-shadow: var(--shadow-sm); color: var(--ink); font-size: var(--fs-2); text-align: left;
}
.rx-ch-ico {
  flex: none; box-sizing: border-box; width: 28px; height: 28px; padding: 6px; border-radius: 50%;
  background: var(--surface-muted); color: var(--ink-soft);
}
.rx-ch.is-ok .rx-ch-ico { background: var(--ok-soft); color: var(--ok); }
.rx-ch.is-perigo .rx-ch-ico { background: var(--danger-soft); color: var(--danger); }
.rx-ch.is-alerta .rx-ch-ico { background: var(--warn-soft); color: var(--warn); }
.rx-ch.is-vivo .rx-ch-ico { background: var(--accent-soft); color: var(--accent); animation: rx-tocar 1.4s var(--ease) infinite; }
.rx-ch-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rx-ch-titulo { font-weight: var(--fw-2); white-space: nowrap; }
.rx-ch.is-perigo .rx-ch-titulo { color: var(--danger); }
.rx-ch-meta { display: flex; align-items: center; gap: 4px; font-size: var(--fs-1); color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rx-ch-sep { color: var(--ink-faint); }
.rx-ch-acoes { display: flex; gap: 6px; margin-left: auto; padding-left: 4px; }
.rx-ch-acao.is-ok { background: var(--ok); color: var(--surface); }
.rx-ch-acao.is-ok:hover { background: color-mix(in srgb, var(--ok) 86%, var(--ink)); }
.rx-ch-acao.is-perigo { background: var(--danger); color: var(--on-danger); }
.rx-ch-acao.is-perigo:hover { background: color-mix(in srgb, var(--danger) 86%, var(--ink)); }
@keyframes rx-tocar {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  100% { box-shadow: 0 0 0 8px transparent; }
}
@media (prefers-reduced-motion: reduce) { .rx-ch.is-vivo .rx-ch-ico { animation: none; } }
:root[data-motion="off"] .rx-ch.is-vivo .rx-ch-ico { animation: none; }

/* painel do composer (ação "Botões") */
.rx-painel {
  /* Ancorado à direita do composer; numa coluna de chat estreita cresce para a esquerda (sobre a lista)
   * até caber a prévia ao lado, sem passar da janela nem cobrir o topo. */
  position: absolute; z-index: 40; right: 8px; bottom: calc(100% + 6px);
  display: flex; flex-direction: column;
  width: min(720px, max(calc(100% - 16px), 600px)); max-width: calc(100vw - 16px);
  max-height: min(520px, calc(100dvh - var(--topbar-h) - 170px));
  overflow: hidden; container-type: inline-size;
  border: 0; border-radius: var(--radius); background: var(--surface-solida, var(--surface));
  box-shadow: var(--brilho), var(--elev-3); color: var(--ink);
}
.rx-painel-cab { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; background: var(--surface); box-shadow: var(--elev-1); }
.rx-painel-ico { flex: none; color: var(--accent); }
.rx-painel-titulo { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-3); font-weight: var(--fw-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-painel-alterna { display: none; }
.rx-painel-corpo {
  flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 12px; padding: 10px 12px; background: var(--surface-soft);
}
.rx-painel-form { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rx-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rx-campo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rx-campo-cab label, .rx-rotulo { font-size: var(--fs-1); font-weight: var(--fw-2); color: var(--ink-soft); }
.rx-opcional { font-weight: var(--fw-1); color: var(--ink-faint); }
.rx-cont { font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rx-cont.is-perto { color: var(--warn); }
.rx-cont.is-acima { color: var(--danger); font-weight: var(--fw-2); }
.rx-painel .input { height: var(--control-h-sm); min-height: 0; font-size: var(--fs-2); }
.rx-painel textarea.rx-texto { height: auto; min-height: 64px; max-height: 160px; padding: 6px 10px; line-height: 1.4; resize: vertical; }
.rx-painel .input[aria-invalid="true"] { box-shadow: 0 0 0 2px var(--danger-soft); }
.rx-painel .input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--danger-soft); }

.rx-bt-linhas { display: flex; flex-direction: column; gap: 6px; }
.rx-bt-linha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.rx-bt-valor { grid-column: 2 / 4; }
.rx-tipos { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-sm); background: var(--tonal); }
.rx-tipo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: calc(var(--control-h-sm) - 4px); padding: 0; border: 0;
  border-radius: calc(var(--radius-sm) - 2px); background: none; color: var(--ink-soft); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rx-tipo:hover { color: var(--ink); }
.rx-tipo[aria-checked="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--elev-1); }
.rx-tipo:focus-visible { outline: 0; box-shadow: var(--anel-foco); }
.rx-entrada { position: relative; min-width: 0; }
.rx-entrada .input { padding-right: 40px; }
/* Contador do botão dentro do campo: aparece ao editar ou perto do limite. */
.rx-entrada .rx-cont { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; opacity: 0; transition: opacity var(--dur) var(--ease); }
.rx-entrada:focus-within .rx-cont, .rx-entrada .rx-cont.is-perto, .rx-entrada .rx-cont.is-acima { opacity: 1; }
.rx-adicionar { align-self: flex-start; margin-top: 2px; }

.rx-painel-previa { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rx-previa-fundo {
  flex: 1; display: flex; align-items: flex-start; min-height: 120px; padding: 12px 10px;
  border-radius: var(--radius-sm); background: var(--thread-bg);
}
.rx-previa-bolha {
  width: 100%; max-width: 236px; padding: 6px 9px 4px; border-radius: var(--radius-xs) var(--radius) var(--radius) var(--radius);
  background: var(--bubble-in); box-shadow: var(--elev-1); color: var(--ink); overflow-wrap: anywhere;
}
:root[data-visual="hubmed"] .rx-previa-bolha { background: var(--surface); }
.rx-previa-texto { white-space: pre-wrap; font-size: var(--fs-3); line-height: 1.4; }
.rx-previa-texto.is-vazio { color: var(--ink-faint); }
.rx-previa-hora { display: block; margin-top: 2px; text-align: right; font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.rx-previa-nota { margin: 0; font-size: var(--fs-1); color: var(--ink-faint); }

/* Lado a lado quando cabe; estreito, a prévia vira a alternância "Prévia | Editar" (depois das regras base). */
@container (min-width: 520px) {
  .rx-painel-corpo { grid-template-columns: minmax(0, 1fr) 236px; }
}
@container (max-width: 519.98px) {
  .rx-painel-alterna { display: inline-flex; }
  .rx-painel-previa { display: none; }
  .rx-painel.is-previa .rx-painel-previa { display: flex; }
  .rx-painel.is-previa .rx-painel-form { display: none; }
}

.rx-painel-rodape { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--surface); box-shadow: var(--elev-2); }
.rx-erro { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-1); line-height: 1.3; color: var(--danger); }
@media (max-width: 767px) {
  .rx-painel { right: 4px; width: calc(100% - 8px); max-width: none; max-height: calc(100dvh - var(--topbar-h) - 130px); }
}

/* softphone */

/* config */
.cfg-rx-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px; align-items: stretch; }
.cfg-rx-cartao { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border: 0; border-radius: var(--radius); background: var(--textura); box-shadow: var(--brilho), var(--elev-1); transition: box-shadow var(--dur) var(--ease); }
.cfg-rx-cartao:hover { box-shadow: var(--brilho), var(--elev-2); }
/* Recurso ligado: faixa fina no topo (cor de estado), nunca borda lateral grossa. */
.cfg-rx-cartao[data-ligado="1"] { box-shadow: var(--brilho), var(--elev-1), inset 0 3px 0 var(--ok); }
.cfg-rx-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cfg-rx-topo .cfg-sec-titulo { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Ícone do topo em medalhão tonal (26 px), como o das seções de Ajustes. */
.cfg-rx-topo .cfg-sec-titulo > .ico, .cfg-rx-topo .cfg-sec-titulo > svg { box-sizing: content-box; flex: none; width: var(--ico); height: var(--ico); padding: 5px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); }
.cfg-rx-aviso { margin: 0; font-size: var(--fs-1); color: var(--warn); }
:root:not([data-visual]) .cfg-rx-aviso { color: var(--warn-ink); }
.cfg-rx-campo { margin: 0; gap: 2px; }
.cfg-rx-campo .input { height: var(--control-h-sm); }
:root:not([data-visual]) .cfg-rx-campo .input { height: var(--control-h); }
.cfg-rx-senha { display: flex; gap: 4px; align-items: center; }
.cfg-rx-senha .input { flex: 1; min-width: 0; }
.cfg-rx-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.cfg-rx-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.cfg-rx-qr { display: flex; align-items: flex-end; gap: 8px; }
.cfg-rx-qr img { width: 144px; height: 144px; border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--elev-1); }
.cfg-rx-webhook code { overflow-wrap: anywhere; }
.cfg-rx-limites { margin: 0; padding-left: 16px; }
.cfg-rx-medicao { margin: 0; font-size: var(--fs-1); }
.cfg-rx-rodape { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.cfg-rx-liga { display: inline-flex; align-items: center; gap: 8px; }
.cfg-rx-liga > span { font-size: var(--fs-1); color: var(--ink-soft); white-space: nowrap; }
.cfg-rx-status { margin: 0; font-size: var(--fs-1); color: var(--ink-soft); }
.cfg-rx-ok { color: var(--ok); }
.cfg-rx-erro { color: var(--danger); }
.cfg-rx-esqueleto { height: 220px; }

/* softphone */
.chamadas-pilha { position: fixed; right: var(--edge, 8px); bottom: var(--edge, 8px); z-index: 60; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; max-width: calc(100vw - 16px); }
.chamada-cartao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface-solida, var(--surface)); color: var(--ink); border: 0; border-radius: var(--radius); box-shadow: var(--brilho), var(--elev-3); min-width: 240px; max-width: 100%; }
.chamada-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.2; }
.chamada-titulo { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chamada-sub { color: var(--ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.chamada-sub:empty { display: none; }
.chamada-aviso { box-shadow: var(--brilho), var(--elev-3), inset 0 3px 0 var(--ok); }
.chamada-btn { display: inline-flex; align-items: center; gap: 4px; }
.chamada-atender { background: var(--ok); color: var(--accent-ink); }
.chamada-recusar, .chamada-desligar { background: var(--danger); color: var(--on-danger); }
.chamada-mudo.ativo, .chamada-mudo[aria-pressed="true"], .chamada-teclado-btn[aria-pressed="true"] { background: var(--warn-soft); color: var(--warn); }
.chamada-teclado { flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.chamada-teclado[hidden], .sf[hidden], .sf-painel[hidden] { display: none; }
.sf { position: relative; display: inline-flex; }
.sf-botao { position: relative; }
.sf-ponto { position: absolute; right: 2px; bottom: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); box-shadow: 0 0 0 2px var(--surface); }
.sf-ponto[data-estado="pronto"] { background: var(--ok); }
.sf-ponto[data-estado="registrando"] { background: var(--warn); }
.sf-ponto[data-estado="erro"] { background: var(--danger); }
.sf-painel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 61; width: 220px; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--surface-solida, var(--surface)); border: 0; border-radius: var(--radius); box-shadow: var(--brilho), var(--elev-3); }
.sf-numero { height: var(--control-h, 32px); padding: 0 8px; border: 0; border-radius: var(--radius-sm); background: var(--tonal); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; }
.sf-teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.sf-tecla { height: 36px; border: 0; border-radius: var(--radius-sm); background: var(--tonal); color: var(--ink); font: inherit; font-size: var(--fs-4); font-weight: var(--fw-2); cursor: pointer; transition: background var(--dur) var(--ease); }
.sf-tecla:hover { background: var(--tonal-hover); }
.sf-tecla:active { background: var(--accent-soft); }
.sf-ligar { justify-content: center; }
.sf-audio { display: none; }
@media (max-width: 480px) { .chamada-cartao { min-width: 0; width: calc(100vw - 16px); } }
.cfg-rx-dados { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: var(--fs-1); }
.cfg-rx-dados dt { color: var(--ink-soft); }
.cfg-rx-dados dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* HubMed: grade e cartões de Recursos como na main 0891fda (o visual Moderno é o de cima). */
:root[data-visual] .cfg-rx-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1280px) { :root[data-visual] .cfg-rx-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { :root[data-visual] .cfg-rx-grade { grid-template-columns: 1fr; } }
:root[data-visual] .cfg-rx-cartao { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: none; transition: none; }
:root[data-visual] .cfg-rx-cartao:hover, :root[data-visual] .cfg-rx-cartao[data-ligado="1"] { box-shadow: none; }
:root[data-visual] .cfg-rx-topo .cfg-sec-titulo { gap: 6px; }
:root[data-visual] .cfg-rx-topo .cfg-sec-titulo > .ico, :root[data-visual] .cfg-rx-topo .cfg-sec-titulo > svg { box-sizing: border-box; width: auto; height: auto; padding: 0; border-radius: 0; background: none; color: inherit; }
:root[data-visual] .cfg-rx-liga > span { font-size: inherit; color: inherit; }
:root[data-visual] .cfg-rx-qr img { background: #fff; box-shadow: none; }

/* Moderno ≥ 1200 px: Recursos numa grade de 4 colunas onde os dois cartões altos (WhatsApp por whatsmeow e Telefone)
   ocupam duas linhas; os cinco curtos se encaixam entre eles. Cabe sem rolagem em 1366×768. */
@media (min-width: 1200px) {
  :root:not([data-visual]) .cfg-rx-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 10px; }
  :root:not([data-visual]) .cfg-rx-cartao[data-cartao="whatsmeow"] { grid-column: 1; grid-row: 1 / span 2; }
  :root:not([data-visual]) .cfg-rx-cartao[data-cartao="telefonia_did"] { grid-column: 4; grid-row: 1 / span 2; }
  :root:not([data-visual]) .cfg-rx-cartao[data-cartao="espelho"] { grid-column: 1 / span 3; grid-row: 3; }
  :root:not([data-visual]) .cfg-rx-cartao[data-cartao="espelho"] .cfg-rx-dados { grid-template-columns: auto 1fr auto 1fr; gap: 2px 14px; }
  :root:not([data-visual]) .cfg-rx-cartao { padding: 10px 12px; gap: 6px; }
  :root:not([data-visual]) .cfg-rx-cartao .cfg-rx-campo { gap: 1px; }
  :root:not([data-visual]) .cfg-rx-cartao > p, :root:not([data-visual]) .cfg-rx-cartao > dl { margin: 0; }
  :root:not([data-visual]) .cfg-rx-cartao .cfg-rx-rodape { gap: 6px; }
  :root:not([data-visual]) .cfg-rx-cartao[data-cartao="espelho"] .cfg-rx-rodape { flex-wrap: wrap; }
}