/* Cores do Site (fase 6): cada --kX-rrggbb é uma cor de hoje ligada a uma das 12 cores de marca. Estes são os valores padrão;
   quando o Daniel troca as cores na dash, a página traz os novos valores no próprio HTML (html:root, vence este bloco). */
:root{--kp-dc2626:220,38,38;--kp-fecaca:254,202,202;--kr-ef4444:239,68,68;--kr-fecaca:254,202,202}
/* ============================================================================
   Chat de suporte (atendimento) — complementos do widget.
   A base (.eg-sup-fab, .eg-sup, .eg-sup-h, .eg-bub, .eg-sup-quick, .eg-sup-f,
   .eg-typing) e a POSIÇÃO (canto inferior esquerdo) ficam em engage.css.
   ========================================================================== */
.eg-sup-hd { min-width: 0; }
.eg-sup-hd small span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; display: inline-block; }
.eg-sup-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eg-sup-load { flex: 1; display: grid; place-items: center; }
.eg-sup-fab[hidden], .eg-sup-fab .eg-dot[hidden] { display: none !important; }

/* deslogado */
.eg-sup-guest { align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 26px 22px; }
.eg-sup-guest .eg-ico { width: 56px; height: 56px; }
.eg-sup-guest b { font-size: 16px; line-height: 1.3; }
.eg-sup-guest p { margin: 0; font-size: 13px; color: var(--eg-muted); line-height: 1.5; max-width: 290px; }
.eg-sup-guest-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.eg-sup-guest-btns .eg-btn { min-width: 130px; }

/* bolhas: estados locais */
.eg-bub.pending { opacity: .7; }
.eg-bub.fail { box-shadow: 0 0 0 1px rgb(var(--kr-ef4444)); }
.eg-bub.fail small { color: rgb(var(--kr-fecaca)); opacity: 1; }
.eg-bub.sys.day { font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: 10.5px; }
.eg-bub.intro b { display: block; margin-bottom: 3px; }

/* área de botões (assuntos, falar com atendente, avaliação) */
.eg-sup-quick:empty { display: none; }
.eg-sup-quick { padding-top: 2px; }
.eg-sup-quick .eg-sup-hand { display: inline-flex; align-items: center; gap: 6px; border-color: var(--eg-gold); color: var(--eg-gold); }
.eg-sup-quick .eg-sup-hand img { width: 16px; height: 16px; }
.eg-sup-rate { width: 100%; background: var(--eg-s1); border: 1px solid var(--eg-line); border-radius: 12px; padding: 12px; text-align: center; }
.eg-sup-rate b { display: block; font-size: 13.5px; margin-bottom: 8px; }
.eg-sup-rate small { display: block; margin-top: 8px; font-size: 11.5px; color: var(--eg-muted); }
.eg-sup-stars { display: inline-flex; gap: 4px; }
.eg-sup-quick .eg-sup-stars button { border: 0; background: none; padding: 2px; border-radius: 8px; cursor: pointer; line-height: 0; }
.eg-sup-stars img { width: 32px; height: 32px; filter: grayscale(1) brightness(.6); transition: filter .12s, transform .12s; }
.eg-sup-stars button.on img { filter: none; transform: scale(1.06); }
.eg-sup-stars button:focus-visible { outline: 2px solid var(--eg-gold); }

/* aviso curto acima do campo (erro, limite, offline) */
.eg-sup-note { padding: 7px 14px; font-size: 12px; line-height: 1.4; color: rgb(var(--kp-fecaca)); background: rgba(var(--kp-dc2626),.12); border-top: 1px solid var(--eg-line); }
.eg-sup-note.info { color: var(--eg-muted); background: var(--eg-s1); }
.eg-sup-note[hidden] { display: none; }

/* campo de mensagem */
.eg-sup-f textarea { min-height: 44px; overflow-y: auto; }
.eg-sup-f textarea:disabled, .eg-sup-f .eg-btn:disabled { opacity: .5; cursor: not-allowed; }
.eg-sup-f .eg-btn svg { display: block; }

/* celular: painel em tela cheia (engage.css) + trava a rolagem da página */
@media (max-width: 768px) {
  .eg-sup-f { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .eg-sup-f textarea { font-size: 16px; } /* evita o zoom automático do iOS */
  .eg-sup-h { padding-top: calc(14px + env(safe-area-inset-top)); }
  html.eg-sup-lock, html.eg-sup-lock body { overflow: hidden !important; }
  html.eg-sup-lock .eg-sup-fab, html.eg-sup-lock .eg-sup-fabx { display: none !important; }
  .eg-sup-hd small span { max-width: 62vw; }
}
@media (prefers-reduced-motion: reduce) {
  .eg-sup-stars img { transition: none; }
}

/* ===== imagem no chat (zip 66) ===== */
.eg-sup-f .eg-sup-clip { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--eg-line); background: var(--eg-bg); color: var(--eg-muted); display: grid; place-items: center; cursor: pointer; padding: 0; transition: color .12s, border-color .12s; }
.eg-sup-f .eg-sup-clip:hover:not(:disabled), .eg-sup-f .eg-sup-clip:focus-visible { color: var(--eg-gold); border-color: var(--eg-gold); outline: none; }
.eg-sup-f .eg-sup-clip:disabled { opacity: .5; cursor: not-allowed; }
.eg-sup-f .eg-sup-clip svg { display: block; }
.eg-sup-pv { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--eg-line); background: var(--eg-s1); }
.eg-sup-pv[hidden] { display: none; }
.eg-sup-pv img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid var(--eg-line); flex-shrink: 0; }
.eg-sup-pv span { flex: 1; min-width: 0; font-size: 12px; line-height: 1.35; color: var(--eg-muted); }
.eg-sup-pv button { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--eg-line); background: var(--eg-bg); color: var(--eg-text); font-size: 20px; line-height: 1; cursor: pointer; }
.eg-bub .eg-sup-img { display: block; padding: 0; margin: 2px 0 4px; border: 0; background: none; cursor: zoom-in; border-radius: 10px; overflow: hidden; width: 220px; max-width: 100%; line-height: 0; }
.eg-bub .eg-sup-img img { display: block; width: 100%; height: auto; max-height: 280px; object-fit: cover; background: rgba(255, 255, 255, .06); }
.eg-bub .eg-sup-gone { display: block; font-style: italic; font-size: 12px; opacity: .8; margin-bottom: 2px; }
.eg-sup.eg-sup-drag { outline: 2px dashed var(--eg-gold); outline-offset: -6px; }
.eg-sup-lb { position: fixed; inset: 0; z-index: 99990; background: rgba(0, 0, 0, .9); display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out; }
.eg-sup-lb[hidden] { display: none; }
.eg-sup-lb img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; cursor: default; }
.eg-sup-lb button { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
@media (max-width: 768px) {
  .eg-sup-f .eg-sup-clip { width: 42px; }
  .eg-bub .eg-sup-img { width: 200px; }
}