/* ════════════════════════════════════════════════════════════════════
   Chat Atendimento Pro — Frontend CSS v2.8.0
   Visual redesign: amber accent · Plus Jakarta Sans · dark header
   Isolamento total via #cap-widget
   ════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Variáveis ── */
#cap-widget {
  --cap-accent:   #e8820c;
  --cap-accent2:  #f5a623;
  --cap-acbg:     rgba(232,130,12,0.12);
  --cap-acbr:     rgba(232,130,12,0.28);
  --cap-hdr-bg:   #13161e;
  --cap-green:    #10b981;
  --cap-gbg:      rgba(16,185,129,0.12);
  --cap-yellow:   #f59e0b;
  --cap-red:      #f43f5e;
  --cap-body-bg:  #f5f7fb;
  --cap-white:    #ffffff;
  --cap-text:     #1a1f2e;
  --cap-text2:    #5a6480;
  --cap-text3:    #9aa1b8;
  --cap-mono:     'JetBrains Mono', monospace;
  --cap-sans:     'Plus Jakarta Sans', -apple-system, sans-serif;
  --cap-radius:   18px;
}

/* ── Reset absoluto ── */
#cap-widget, #cap-widget *, #cap-widget *::before, #cap-widget *::after {
  box-sizing: border-box !important;
  font-family: var(--cap-sans) !important;
  -webkit-font-smoothing: antialiased;
}
#cap-widget button, #cap-widget input, #cap-widget textarea,
#cap-widget select, #cap-widget a {
  font-family: inherit !important; line-height: normal;
  -webkit-appearance: none; appearance: none;
}

/* ══ LAUNCHER ══ */
#cap-widget #cap-launcher {
  position: fixed !important; z-index: 2147483640 !important;
  display: flex !important; align-items: center !important;
  gap: 10px !important; bottom: 24px !important; right: 24px !important;
  transition: all 0.3s ease !important;
}
#cap-widget #cap-launcher.mode-horizontal { flex-direction: row !important; }
#cap-widget #cap-launcher.mode-horizontal #cap-float-label { order: 1 !important; }
#cap-widget #cap-launcher.mode-horizontal #cap-toggle-btn  { order: 2 !important; }
#cap-widget #cap-launcher.mode-vertical { flex-direction: column !important; align-items: flex-end !important; }
#cap-widget #cap-launcher.mode-vertical #cap-float-label  { order: 1 !important; align-self: flex-end !important; }
#cap-widget #cap-launcher.mode-vertical #cap-toggle-btn   { order: 2 !important; }
#cap-widget #cap-launcher.mode-vertical.side-left         { align-items: flex-start !important; }
#cap-widget #cap-launcher.mode-vertical.side-left #cap-float-label { align-self: flex-start !important; }

/* ── Botão flutuante ── */
#cap-widget #cap-toggle-btn {
  position: relative !important; flex-shrink: 0 !important;
  width: 62px !important; height: 62px !important;
  border-radius: 50% !important; border: none !important; cursor: pointer !important;
  background: var(--cap-accent) !important; color: #fff !important;
  padding: 0 !important; margin: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: 0 6px 20px rgba(232,130,12,.45), 0 2px 8px rgba(0,0,0,.15) !important;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s !important;
  animation: cap-fadescale .5s cubic-bezier(.34,1.56,.64,1) both !important;
  overflow: visible !important; outline: none !important;
}
#cap-widget #cap-toggle-btn:hover {
  transform: scale(1.07) !important;
  box-shadow: 0 10px 28px rgba(232,130,12,.55), 0 3px 10px rgba(0,0,0,.18) !important;
}
#cap-widget #cap-toggle-btn:active { transform: scale(.95) !important; }
@keyframes cap-fadescale { from{opacity:0;transform:scale(.5)} to{opacity:1;transform:scale(1)} }

#cap-widget #cap-icon-chat {
  pointer-events: none !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
  width: 24px !important; height: 24px !important;
}
#cap-widget #cap-icon-close {
  pointer-events: none !important; display: none !important;
  align-items: center !important; justify-content: center !important;
  width: 14px !important; height: 14px !important; opacity: .9 !important; margin-left: 2px !important;
}
#cap-widget #cap-toggle-btn.cap-open #cap-icon-chat  { display: flex !important; }
#cap-widget #cap-toggle-btn.cap-open #cap-icon-close { display: flex !important; }
#cap-widget #cap-toggle-btn:not(.cap-open) #cap-icon-close { display: none !important; }
#cap-widget #cap-icon-chat svg, #cap-widget #cap-icon-close svg { pointer-events: none !important; }

/* Indicador de status */
#cap-widget #cap-status-indicator {
  position: absolute !important; top: 2px !important; right: 2px !important;
  width: 14px !important; height: 14px !important; border-radius: 50% !important;
  border: 2.5px solid #fff !important; pointer-events: none !important;
  background: #94a3b8 !important; transition: background .3s !important;
}
#cap-widget #cap-status-indicator.cap-status-online  { background: var(--cap-green) !important; animation: cap-pulse-green 2s infinite !important; }
#cap-widget #cap-status-indicator.cap-status-ausente { background: var(--cap-yellow) !important; }
#cap-widget #cap-status-indicator.cap-status-offline { background: #94a3b8 !important; }
@keyframes cap-pulse-green {
  0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.55)} 60%{box-shadow:0 0 0 6px rgba(16,185,129,0)}
}

/* Badge não lido */
#cap-widget #cap-unread-badge {
  position: absolute !important; top: -4px !important; left: -4px !important;
  background: var(--cap-red) !important; color: #fff !important;
  width: 20px !important; height: 20px !important; border-radius: 50% !important;
  font-size: 11px !important; font-weight: 700 !important; pointer-events: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border: 2.5px solid #fff !important; animation: cap-badge-pop .3s cubic-bezier(.34,1.56,.64,1) both !important;
}
@keyframes cap-badge-pop { from{transform:scale(0)} to{transform:scale(1)} }

/* Float label pill */
#cap-widget #cap-float-label {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  padding: 7px 14px !important; background: var(--cap-white) !important;
  border: 1px solid rgba(232,130,12,.22) !important; border-radius: 9999px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.1), 0 1px 4px rgba(0,0,0,.06) !important;
  font-size: 13px !important; font-weight: 600 !important; color: var(--cap-accent) !important;
  white-space: nowrap !important; cursor: default !important; user-select: none !important;
  opacity: 1 !important; transform: translateY(0) scale(1) !important;
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease !important;
  visibility: visible !important; position: relative !important;
}
#cap-widget #cap-float-label.is-hidden {
  opacity: 0 !important; visibility: hidden !important;
  transform: translateY(8px) scale(.95) !important; pointer-events: none !important;
}
#cap-widget #cap-float-label-dot {
  width: 7px !important; height: 7px !important; border-radius: 50% !important;
  background: var(--cap-accent) !important; flex-shrink: 0 !important;
  animation: cap-dot-pulse 2s ease-in-out infinite !important;
}
@keyframes cap-dot-pulse {
  0%,100%{box-shadow:0 0 0 0 rgba(232,130,12,.5)} 50%{box-shadow:0 0 0 5px rgba(232,130,12,0)}
}
#cap-widget #cap-float-label-text { font-size: 13px !important; font-weight: 600 !important; color: var(--cap-accent) !important; }

/* ══ POPUP ══ */
#cap-widget #cap-popup {
  position: fixed !important; bottom: 96px !important; right: 24px !important;
  z-index: 2147483641 !important; width: 368px !important;
  max-width: calc(100vw - 32px) !important; background: var(--cap-white) !important;
  border-radius: var(--cap-radius) !important;
  box-shadow: 0 32px 72px rgba(0,0,0,.22), 0 6px 20px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.04) !important;
  overflow: hidden !important;
  /* display: NÃO usar !important aqui — o inline style="display:none" no HTML
     precisa ganhar. JS controla display via inline style (flex/none). */
  flex-direction: column !important;
  max-height: calc(100vh - 120px) !important;
  animation: cap-popupin .3s cubic-bezier(.34,1.56,.64,1) both !important;
}
/* Estado padrão: fechado. JS sobrescreve com inline style quando abre. */
#cap-widget #cap-popup:not([style*="flex"]) { display: none; }
@keyframes cap-popupin { from{opacity:0;transform:translateY(22px) scale(.93)} to{opacity:1;transform:translateY(0) scale(1)} }

/* ══ HEADER — dark ══ */
#cap-widget #cap-popup-header,
#cap-widget .cap-popup-header {
  padding: 20px 18px 18px !important; background: var(--cap-hdr-bg) !important;
  color: #fff !important; display: flex !important; align-items: center !important;
  gap: 13px !important; flex-shrink: 0 !important; position: relative !important;
  transition: background .4s ease !important;
}
#cap-widget #cap-popup.cap-status-ausente .cap-popup-header { background: #1a1510 !important; }
#cap-widget #cap-popup.cap-status-offline .cap-popup-header { background: #141418 !important; }

/* Avatar */
#cap-widget .cap-header-avatar-wrap { position: relative !important; flex-shrink: 0 !important; width: 52px !important; height: 52px !important; }
#cap-widget .cap-header-avatar-img {
  width: 52px !important; height: 52px !important; border-radius: 50% !important;
  object-fit: cover !important; border: 2px solid rgba(255,255,255,.2) !important; display: block !important;
}
#cap-widget .cap-header-avatar-fallback {
  width: 52px !important; height: 52px !important; border-radius: 50% !important;
  background: rgba(232,130,12,.18) !important; border: 2px solid rgba(232,130,12,.32) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: var(--cap-accent2) !important;
}
#cap-widget .cap-header-status-dot {
  position: absolute !important; bottom: 1px !important; right: 1px !important;
  width: 13px !important; height: 13px !important; border-radius: 50% !important;
  background: var(--cap-green) !important; border: 2.5px solid var(--cap-hdr-bg) !important;
  display: block !important; transition: background .3s !important;
}
#cap-widget #cap-popup.cap-status-ausente .cap-header-status-dot { background: var(--cap-yellow) !important; }
#cap-widget #cap-popup.cap-status-offline .cap-header-status-dot { background: #555 !important; }

/* Info */
#cap-widget .cap-header-info { flex: 1 !important; min-width: 0 !important; }
#cap-widget #cap-popup-title {
  font-size: 16px !important; font-weight: 700 !important; color: #fff !important;
  margin: 0 0 3px !important; padding: 0 !important; line-height: 1.25 !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  letter-spacing: -.01em !important;
}
#cap-widget #cap-popup-subtitle {
  font-size: 12px !important; color: rgba(255,255,255,.6) !important;
  margin: 0 0 9px !important; padding: 0 !important; line-height: 1.4 !important;
}

/* Status pill */
#cap-widget .cap-header-status-pill {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  padding: 4px 10px !important; background: rgba(16,185,129,.15) !important;
  border: 1px solid rgba(16,185,129,.28) !important; border-radius: 100px !important;
  font-size: 11px !important; font-weight: 600 !important; color: #34d399 !important;
  width: fit-content !important;
}
#cap-widget #cap-popup.cap-status-ausente .cap-header-status-pill {
  background: rgba(245,158,11,.15) !important; border-color: rgba(245,158,11,.28) !important; color: #fbbf24 !important;
}
#cap-widget #cap-popup.cap-status-offline .cap-header-status-pill {
  background: rgba(100,100,120,.18) !important; border-color: rgba(255,255,255,.1) !important; color: rgba(255,255,255,.4) !important;
}
#cap-widget .cap-online-dot {
  width: 6px !important; height: 6px !important; border-radius: 50% !important;
  background: currentColor !important; display: inline-block !important; flex-shrink: 0 !important;
  animation: cap-dot-breathe 2s ease-in-out infinite !important;
}
@keyframes cap-dot-breathe { 0%,100%{opacity:1} 50%{opacity:.4} }
#cap-widget #cap-popup.cap-status-offline .cap-online-dot { animation: none !important; }

/* Botão fechar */
#cap-widget .cap-popup-close {
  position: absolute !important; top: 13px !important; right: 13px !important;
  background: rgba(255,255,255,.1) !important; border: 1px solid rgba(255,255,255,.08) !important;
  width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important;
  max-width: 30px !important; max-height: 30px !important; border-radius: 50% !important;
  cursor: pointer !important; color: rgba(255,255,255,.75) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important; font-size: 0 !important; padding: 0 !important; margin: 0 !important;
  overflow: hidden !important; z-index: 2 !important;
  transition: background .15s, color .15s, transform .15s !important;
}
#cap-widget .cap-popup-close:hover {
  background: rgba(255,255,255,.22) !important; color: #fff !important; transform: scale(1.08) !important;
}
#cap-widget .cap-popup-close svg { pointer-events: none !important; }

/* ══ BODY ══ */
#cap-widget .cap-popup-body {
  flex: 1 !important; overflow-y: auto !important; padding: 16px !important;
  min-height: 200px !important; background: var(--cap-body-bg) !important;
  display: flex !important; flex-direction: column !important; gap: 10px !important;
}
#cap-widget .cap-popup-body::-webkit-scrollbar { width: 3px; }
#cap-widget .cap-popup-body::-webkit-scrollbar-track { background: transparent; }
#cap-widget .cap-popup-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 3px; }

/* ══ PRE-CHAT FORM ══ */
#cap-widget .cap-prechat {
  display: flex !important; flex-direction: column !important;
  gap: 10px !important; align-items: center !important; padding-top: 6px !important;
}
#cap-widget .cap-prechat-icon { font-size: 36px !important; line-height: 1 !important; }
#cap-widget .cap-prechat-msg { font-size: 13px !important; color: var(--cap-text2) !important; text-align: center !important; margin: 0 !important; line-height: 1.6 !important; }
#cap-widget .cap-form-field { width: 100% !important; }
#cap-widget .cap-form-field input,
#cap-widget .cap-form-field select,
#cap-widget .cap-form-field textarea {
  width: 100% !important; padding: 10px 14px !important;
  border: 1.5px solid rgba(0,0,0,.1) !important; border-radius: 10px !important;
  font-size: 14px !important; outline: none !important;
  background: var(--cap-white) !important; color: var(--cap-text) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05) !important; margin: 0 !important;
  transition: border-color .15s, box-shadow .15s !important;
}
#cap-widget .cap-form-field input:focus,
#cap-widget .cap-form-field select:focus,
#cap-widget .cap-form-field textarea:focus {
  border-color: var(--cap-accent) !important;
  box-shadow: 0 0 0 3px var(--cap-acbg) !important;
}
#cap-widget .cap-form-field input::placeholder,
#cap-widget .cap-form-field textarea::placeholder { color: var(--cap-text3) !important; }
#cap-widget .cap-form-field textarea { resize: vertical !important; }

#cap-widget .cap-popup-btn {
  width: 100% !important; padding: 12px !important;
  background: var(--cap-accent) !important; color: #fff !important;
  border: none !important; border-radius: 11px !important;
  font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important;
  letter-spacing: .02em !important;
  transition: background .15s, transform .1s !important;
}
#cap-widget .cap-popup-btn:hover  { background: var(--cap-accent2) !important; }
#cap-widget .cap-popup-btn:active { transform: scale(.98) !important; }
#cap-widget .cap-popup-btn:disabled { opacity: .5 !important; cursor: not-allowed !important; }

/* ══ MENSAGENS ══ */
#cap-widget .cap-messages { display: flex !important; flex-direction: column !important; gap: 8px !important; }

#cap-widget .cap-date-sep {
  text-align: center !important; font-size: 10.5px !important; font-weight: 600 !important;
  letter-spacing: .05em !important; text-transform: uppercase !important;
  color: var(--cap-text3) !important; font-family: var(--cap-mono) !important;
  background: rgba(0,0,0,.05) !important; border-radius: 100px !important;
  padding: 3px 12px !important; align-self: center !important; margin: 4px 0 !important;
}

#cap-widget .cap-bubble-wrap {
  display: flex !important; gap: 7px !important; max-width: 88% !important;
  animation: cap-msg-in .2s ease both !important;
}
#cap-widget .cap-bubble-wrap.visitor {
  align-self: flex-end !important; flex-direction: row-reverse !important;
  animation: cap-msg-in .15s ease both !important;
}
#cap-widget .cap-bubble-wrap.operator,
#cap-widget .cap-bubble-wrap.bot { align-self: flex-start !important; }

@keyframes cap-msg-in { from{opacity:0;transform:translateY(6px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }

#cap-widget .cap-bubble-avatar {
  width: 26px !important; height: 26px !important; border-radius: 50% !important;
  flex-shrink: 0 !important; display: flex !important; align-items: center !important;
  justify-content: center !important; font-size: 12px !important; font-weight: 700 !important;
  align-self: flex-end !important;
}
#cap-widget .cap-bubble-wrap.visitor  .cap-bubble-avatar { background: var(--cap-accent) !important; color: #fff !important; }
#cap-widget .cap-bubble-wrap.operator .cap-bubble-avatar { background: var(--cap-hdr-bg) !important; color: rgba(255,255,255,.85) !important; }
#cap-widget .cap-bubble-wrap.bot      .cap-bubble-avatar { background: var(--cap-body-bg) !important; color: var(--cap-text2) !important; border: 1px solid rgba(0,0,0,.08) !important; }

#cap-widget .cap-bubble {
  padding: 9px 13px !important; border-radius: 14px !important;
  font-size: 13.5px !important; line-height: 1.55 !important; word-break: break-word !important; margin: 0 !important;
}
#cap-widget .cap-bubble-wrap.visitor  .cap-bubble {
  background: var(--cap-accent) !important; color: #fff !important;
  border-bottom-right-radius: 3px !important;
  box-shadow: 0 2px 8px rgba(232,130,12,.3) !important;
}
#cap-widget .cap-bubble-wrap.operator .cap-bubble {
  background: var(--cap-white) !important; color: var(--cap-text) !important;
  border-bottom-left-radius: 3px !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}
#cap-widget .cap-bubble-wrap.bot .cap-bubble {
  background: #fff8f0 !important; color: var(--cap-text) !important;
  border-bottom-left-radius: 3px !important;
  border: 1px solid rgba(232,130,12,.12) !important;
}

#cap-widget .cap-bubble-time {
  font-size: 10px !important; color: var(--cap-text3) !important;
  font-family: var(--cap-mono) !important; margin-top: 3px !important;
  text-align: right !important; display: flex !important;
  align-items: center !important; justify-content: flex-end !important; gap: 3px !important;
}
#cap-widget .cap-bubble-wrap.visitor .cap-bubble-time { color: rgba(255,255,255,.55) !important; }
#cap-widget .cap-check { color: var(--cap-green) !important; font-size: 11px !important; }
#cap-widget .cap-chat-img { max-width: 200px !important; max-height: 180px !important; border-radius: 10px !important; display: block !important; cursor: pointer !important; object-fit: cover !important; }

/* Typing — hidden by default; JS sets display:flex via inline style to show */
#cap-widget .cap-typing,
#cap-widget .cap-typing-indicator {
  display: none;   /* NO !important — allows JS inline style to override */
  gap: 5px !important;
  padding: 4px 2px !important;
  align-self: flex-start !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* operator-typing wrapper — same rule */
#cap-widget #cap-operator-typing {
  display: none;   /* NO !important */
}
#cap-widget .cap-typing span,
#cap-widget .cap-typing-indicator span {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--cap-text3) !important;
  display: block !important;
  animation: cap-bounce .9s infinite !important;
}
#cap-widget .cap-typing span:nth-child(2),
#cap-widget .cap-typing-indicator span:nth-child(2) { animation-delay: .2s !important; }
#cap-widget .cap-typing span:nth-child(3),
#cap-widget .cap-typing-indicator span:nth-child(3) { animation-delay: .4s !important; }
@keyframes cap-bounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-6px)} }
#cap-widget .cap-typing-label {
  font-size: 11px !important; color: var(--cap-text3) !important;
  align-self: flex-end !important; margin-bottom: 2px !important;
}

/* WC badge */
#cap-widget .cap-wc-badge {
  background: #fff8f0 !important; color: var(--cap-accent) !important;
  border: 1px solid rgba(232,130,12,.2) !important; border-radius: 10px !important;
  padding: 10px 14px !important; font-size: 12px !important;
  display: flex !important; flex-direction: column !important; gap: 3px !important; align-self: flex-start !important;
}

/* ══ OFFLINE FORM ══ */
#cap-widget .cap-offline-msg { font-size: 13px !important; color: var(--cap-text2) !important; text-align: center !important; margin: 0 0 4px !important; line-height: 1.6 !important; }
#cap-widget .cap-offline-success {
  text-align: center !important; font-size: 13px !important; font-weight: 600 !important;
  color: var(--cap-green) !important; padding: 13px !important;
  background: var(--cap-gbg) !important; border: 1px solid rgba(16,185,129,.22) !important; border-radius: 10px !important;
}

/* ══ AVALIAÇÃO ══ */
#cap-widget .cap-rating-panel { text-align: center !important; padding: 8px 0 !important; }
#cap-widget .cap-rating-title { font-size: 14px !important; font-weight: 700 !important; margin-bottom: 12px !important; color: var(--cap-text) !important; }
#cap-widget .cap-stars { display: flex !important; justify-content: center !important; gap: 8px !important; }
#cap-widget .cap-star { font-size: 28px !important; cursor: pointer !important; color: rgba(0,0,0,.1) !important; transition: color .12s, transform .12s !important; line-height: 1 !important; }
#cap-widget .cap-star:hover, #cap-widget .cap-star.active { color: var(--cap-accent) !important; transform: scale(1.22) !important; }

/* ══ FOOTER INPUT ══ */
#cap-widget .cap-popup-footer {
  padding: 10px 12px 12px !important;
  border-top: 1px solid rgba(0,0,0,.06) !important;
  display: flex !important; align-items: flex-end !important; gap: 6px !important;
  background: var(--cap-white) !important; flex-shrink: 0 !important;
}
#cap-widget .cap-msg-input {
  flex: 1 !important; border: 1.5px solid rgba(0,0,0,.1) !important; border-radius: 11px !important;
  padding: 9px 12px !important; font-size: 13.5px !important; outline: none !important;
  resize: none !important; line-height: 1.5 !important; min-height: 40px !important; max-height: 100px !important;
  background: var(--cap-body-bg) !important; color: var(--cap-text) !important;
  box-shadow: none !important; margin: 0 !important; width: auto !important;
  transition: border-color .15s, background .15s !important;
}
#cap-widget .cap-msg-input:focus {
  border-color: var(--cap-accent) !important; background: var(--cap-white) !important;
  box-shadow: 0 0 0 3px var(--cap-acbg) !important;
}
#cap-widget .cap-msg-input::placeholder { color: var(--cap-text3) !important; }

#cap-widget .cap-send-btn,
#cap-widget .cap-attach-btn {
  width: 38px !important; height: 38px !important; border-radius: 10px !important;
  border: none !important; cursor: pointer !important; flex-shrink: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 0 !important; margin: 0 !important; transition: background .15s, transform .1s !important;
}
#cap-widget .cap-send-btn { background: var(--cap-accent) !important; color: #fff !important; }
#cap-widget .cap-send-btn:hover  { background: var(--cap-accent2) !important; }
#cap-widget .cap-send-btn:active { transform: scale(.95) !important; }
#cap-widget .cap-send-btn svg { pointer-events: none !important; }
#cap-widget .cap-attach-btn {
  background: var(--cap-body-bg) !important; color: var(--cap-text2) !important;
  border: 1px solid rgba(0,0,0,.08) !important; font-size: 15px !important;
}
#cap-widget .cap-attach-btn:hover { background: rgba(0,0,0,.06) !important; }

#cap-widget .cap-wa-btn {
  width: 38px !important; height: 38px !important; border-radius: 10px !important;
  background: #25d366 !important; color: #fff !important; text-decoration: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important; transition: background .15s !important;
}
#cap-widget .cap-wa-btn:hover { background: #128c7e !important; }

#cap-widget .cap-powered {
  text-align: center !important; font-size: 10px !important; color: var(--cap-text3) !important;
  padding: 5px 0 8px !important; flex-shrink: 0 !important;
  background: var(--cap-white) !important; margin: 0 !important;
}
#cap-widget .cap-powered strong { color: var(--cap-text2) !important; }

/* ══ PULSE COM MENSAGEM NÃO LIDA ══ */
#cap-widget #cap-toggle-btn.has-unread {
  animation: cap-btn-pulse 1.8s ease infinite !important;
}
@keyframes cap-btn-pulse {
  0%,100%{box-shadow:0 6px 20px rgba(232,130,12,.45),0 2px 8px rgba(0,0,0,.15) !important}
  50%    {box-shadow:0 8px 32px rgba(232,130,12,.75),0 2px 12px rgba(0,0,0,.18) !important}
}

/* ══ MOBILE ══ */
@media (max-width: 500px) {
  #cap-widget #cap-popup {
    position: fixed !important; top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
    width:100% !important; max-width:100% !important; height:100% !important; max-height:100% !important;
    border-radius:0 !important; z-index:2147483647 !important; animation:none !important;
    padding-top: env(safe-area-inset-top,0px) !important;
    padding-bottom: env(safe-area-inset-bottom,0px) !important;
  }
  #cap-widget #cap-launcher {
    bottom: calc(16px + env(safe-area-inset-bottom,0px)) !important; right:16px !important;
  }
  #cap-widget .cap-popup-close {
    width:38px !important; height:38px !important; min-width:38px !important; min-height:38px !important;
    top: calc(10px + env(safe-area-inset-top,0px)) !important; right:12px !important;
  }
  #cap-widget #cap-messages, #cap-widget .cap-messages-area {
    flex:1 !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch !important;
  }
  #cap-widget #cap-prechat { overflow-y:auto !important; -webkit-overflow-scrolling:touch !important; padding-bottom:20px !important; }
  #cap-widget #cap-footer { flex-shrink:0 !important; padding-bottom: calc(8px + env(safe-area-inset-bottom,0px)) !important; }
  #cap-widget #cap-msg-input { font-size:16px !important; }
  #cap-widget .cap-popup-header { padding:14px 14px 12px !important; }
  #cap-widget .cap-header-avatar-wrap,
  #cap-widget .cap-header-avatar-img,
  #cap-widget .cap-header-avatar-fallback { width:44px !important; height:44px !important; }
}
@media (max-width: 375px) {
  #cap-widget #cap-popup-title { font-size:14px !important; }
  #cap-widget .cap-header-status-pill { font-size:10px !important; padding:3px 8px !important; }
}

/* ══ MODO ESCURO ══ */
@media (prefers-color-scheme: dark) {
  #cap-widget {
    --cap-body-bg: #181b26;
    --cap-white:   #1e2233;
    --cap-text:    #e4e8f0;
    --cap-text2:   #7f8aa3;
    --cap-text3:   #444d63;
  }
  #cap-widget #cap-popup {
    background: #1e2233 !important;
    box-shadow: 0 32px 72px rgba(0,0,0,.55), 0 6px 20px rgba(0,0,0,.3) !important;
  }
  #cap-widget .cap-popup-body   { background: #181b26 !important; }
  #cap-widget .cap-popup-footer { background: #1e2233 !important; border-top-color: rgba(255,255,255,.06) !important; }
  #cap-widget .cap-powered       { background: #1e2233 !important; }
  #cap-widget .cap-bubble-wrap.operator .cap-bubble {
    background: #262b3d !important; color: #e4e8f0 !important; border-color: rgba(255,255,255,.06) !important;
  }
  #cap-widget .cap-bubble-wrap.bot .cap-bubble {
    background: #1f1a10 !important; color: #f0d9a0 !important; border-color: rgba(232,130,12,.15) !important;
  }
  #cap-widget .cap-date-sep { background: rgba(255,255,255,.06) !important; color: #444d63 !important; }
  #cap-widget .cap-msg-input {
    background: #262b3d !important; border-color: rgba(255,255,255,.09) !important; color: #e4e8f0 !important;
  }
  #cap-widget .cap-msg-input:focus { border-color: var(--cap-accent) !important; background: #1e2233 !important; }
  #cap-widget #cap-float-label {
    background: #1e2233 !important; border-color: rgba(232,130,12,.22) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.4) !important;
  }
  #cap-widget .cap-form-field input,
  #cap-widget .cap-form-field select,
  #cap-widget .cap-form-field textarea {
    background: #262b3d !important; border-color: rgba(255,255,255,.09) !important; color: #e4e8f0 !important;
  }
  /* typing is transparent in both modes — no dark override needed */
  #cap-widget .cap-attach-btn {
    background: #262b3d !important; border-color: rgba(255,255,255,.09) !important; color: #7f8aa3 !important;
  }
  #cap-widget .cap-attach-btn:hover { background: #2e3448 !important; }
  #cap-widget .cap-wc-badge { background: #1f1a10 !important; border-color: rgba(232,130,12,.2) !important; }
  #cap-widget .cap-bubble-wrap.bot .cap-bubble-avatar {
    background: #262b3d !important; border-color: rgba(255,255,255,.06) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   PREVIEW BUBBLE — bolha flutuante com prévia da última mensagem
   ════════════════════════════════════════════════════════════════════ */

/* Container da bolha — absolute dentro do launcher (fixed),
   posicionado acima do botão via bottom calc */
#cap-widget #cap-preview-bubble {
  position: absolute !important;
  bottom: calc(100% + 10px) !important;
  right: 0 !important;
  width: 280px !important;
  z-index: 2147483642 !important;
  background: var(--cap-white, #fff) !important;
  border-radius: 14px !important;
  border-bottom-right-radius: 4px !important;
  box-shadow:
    0 8px 30px rgba(0,0,0,.15),
    0 2px 8px rgba(0,0,0,.08),
    0 0 0 1px rgba(0,0,0,.04) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  animation: cap-bubble-in .35s cubic-bezier(.34,1.56,.64,1) both !important;
  transform-origin: bottom right !important;
}
/* Linha âmbar no topo */
#cap-widget #cap-preview-bubble::before {
  content: '' !important;
  display: block !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--cap-accent,#e8820c), var(--cap-accent2,#f5a623)) !important;
}

@keyframes cap-bubble-in {
  from { opacity: 0; transform: scale(.85) translateY(10px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
@keyframes cap-bubble-out {
  from { opacity: 1; transform: scale(1)   translateY(0); }
  to   { opacity: 0; transform: scale(.85) translateY(10px); }
}
#cap-widget #cap-preview-bubble.cap-closing {
  animation: cap-bubble-out .22s ease forwards !important;
}

/* Botão de fechar (×) */
#cap-widget #cap-preview-close {
  position: absolute !important;
  top: 8px !important; right: 8px !important;
  width: 20px !important; height: 20px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,.06) !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #888 !important;
  padding: 0 !important;
  transition: background .15s, color .15s !important;
  z-index: 2 !important;
}
#cap-widget #cap-preview-close:hover {
  background: rgba(0,0,0,.12) !important;
  color: #333 !important;
}
#cap-widget #cap-preview-close svg { pointer-events: none !important; }

/* Inner layout: avatar + conteúdo */
#cap-widget #cap-preview-inner {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 12px 14px 13px !important;
}

/* Avatar circular com inicial */
#cap-widget .cap-pv-avatar {
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--cap-accent,#e8820c), var(--cap-accent2,#f5a623)) !important;
  color: #fff !important;
  font-size: 14px !important; font-weight: 700 !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
/* Variante para bot */
#cap-widget .cap-pv-avatar.cap-pv-bot {
  background: rgba(0,0,0,.06) !important;
  font-size: 18px !important;
}
@media (prefers-color-scheme: dark) {
  #cap-widget .cap-pv-avatar.cap-pv-bot { background: rgba(255,255,255,.08) !important; }
}

/* Texto */
#cap-widget .cap-pv-content { flex: 1 !important; min-width: 0 !important; }
#cap-widget .cap-pv-sender {
  font-size: 11.5px !important; font-weight: 700 !important;
  color: var(--cap-text, #1a1f2e) !important;
  margin-bottom: 3px !important;
  padding-right: 22px !important; /* espaço para o × */
}
#cap-widget .cap-pv-text {
  font-size: 13px !important;
  color: var(--cap-text2, #5a6480) !important;
  line-height: 1.45 !important;
  /* Trunca em 2 linhas */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Badge de contagem melhorado */
#cap-widget #cap-unread-badge {
  min-width: 20px !important;
  padding: 0 5px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  #cap-widget #cap-preview-bubble {
    background: #1e2233 !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06) !important;
  }
  #cap-widget .cap-pv-sender { color: #e4e8f0 !important; }
  #cap-widget .cap-pv-text   { color: #7f8aa3 !important; }
  #cap-widget #cap-preview-close { background: rgba(255,255,255,.08) !important; color: #7f8aa3 !important; }
  #cap-widget #cap-preview-close:hover { background: rgba(255,255,255,.14) !important; color: #e4e8f0 !important; }
}

/* ════════════════════════════════════════════════════════════════════
   WooCommerce Cards — frontend widget
   ════════════════════════════════════════════════════════════════════ */

/* Produto */
#cap-widget .cap-fw-product {
  background: var(--cap-white,#fff) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 12px !important; overflow: hidden !important;
  max-width: 230px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
}
#cap-widget .cap-fw-product-img {
  width: 100% !important; height: 130px !important;
  object-fit: cover !important; display: block !important;
}
#cap-widget .cap-fw-product-body {
  padding: 10px 12px 12px !important;
}
#cap-widget .cap-fw-product-name {
  font-size: 13px !important; font-weight: 600 !important;
  color: var(--cap-text,#1a1f2e) !important;
  margin-bottom: 4px !important; line-height: 1.35 !important;
}
#cap-widget .cap-fw-product-price {
  font-size: 15px !important; font-weight: 700 !important;
  color: var(--cap-accent,#e8820c) !important; margin-bottom: 10px !important;
}
#cap-widget .cap-fw-product-btn {
  display: block !important; width: 100% !important; text-align: center !important;
  padding: 8px 0 !important; border-radius: 8px !important;
  background: var(--cap-accent,#e8820c) !important; color: #fff !important;
  text-decoration: none !important; font-size: 13px !important; font-weight: 600 !important;
  transition: background .15s !important;
}
#cap-widget .cap-fw-product-btn:hover { background: var(--cap-accent2,#f5a623) !important; }

/* Cupom */
#cap-widget .cap-fw-coupon {
  background: #fff8f0 !important;
  border: 1.5px dashed rgba(232,130,12,.4) !important;
  border-radius: 12px !important; padding: 14px !important;
  max-width: 220px !important; text-align: center !important;
}
#cap-widget .cap-fw-coupon-tag {
  font-size: 10px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .07em !important;
  color: var(--cap-accent,#e8820c) !important; margin-bottom: 5px !important;
}
#cap-widget .cap-fw-coupon-label {
  font-size: 14px !important; font-weight: 700 !important;
  color: var(--cap-text,#1a1f2e) !important; margin-bottom: 10px !important;
}
#cap-widget .cap-fw-coupon-code {
  font-size: 15px !important; font-weight: 800 !important;
  font-family: var(--cap-mono,'JetBrains Mono',monospace) !important;
  letter-spacing: .1em !important; color: var(--cap-accent,#e8820c) !important;
  background: rgba(232,130,12,.1) !important; border-radius: 6px !important;
  padding: 7px 10px !important; margin-bottom: 7px !important;
  cursor: pointer !important; user-select: all !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  transition: background .15s !important;
}
#cap-widget .cap-fw-coupon-code:hover { background: rgba(232,130,12,.18) !important; }
#cap-widget .cap-fw-coupon-copy {
  font-size: 11px !important; opacity: .7 !important; margin-left: 8px !important;
}
#cap-widget .cap-fw-coupon-exp {
  font-size: 10px !important; color: var(--cap-text3,#9aa1b8) !important;
}

/* Status de pedido */
#cap-widget .cap-fw-order {
  background: var(--cap-white,#fff) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 12px !important; padding: 12px 14px !important;
  max-width: 240px !important;
}
#cap-widget .cap-fw-order-title {
  font-size: 13px !important; font-weight: 700 !important;
  color: var(--cap-text,#1a1f2e) !important; margin-bottom: 2px !important;
}
#cap-widget .cap-fw-order-status {
  font-size: 12px !important; font-weight: 600 !important;
  color: #10b981 !important; margin-bottom: 8px !important;
  border-bottom: 1px solid rgba(0,0,0,.07) !important; padding-bottom: 8px !important;
}
#cap-widget .cap-fw-order-row {
  display: flex !important; justify-content: space-between !important;
  font-size: 12px !important; color: var(--cap-text2,#5a6480) !important;
  padding: 2px 0 !important;
}
#cap-widget .cap-fw-order-row strong { color: var(--cap-text,#1a1f2e) !important; }
#cap-widget .cap-fw-order-items {
  margin: 7px 0 0 !important; padding-left: 16px !important;
  font-size: 11px !important; color: var(--cap-text2,#5a6480) !important;
  border-top: 1px solid rgba(0,0,0,.06) !important; padding-top: 7px !important;
}

/* Dark mode para os cards do frontend */
@media (prefers-color-scheme: dark) {
  #cap-widget .cap-fw-product { background: #1e2233 !important; border-color: rgba(255,255,255,.08) !important; }
  #cap-widget .cap-fw-product-name { color: #e4e8f0 !important; }
  #cap-widget .cap-fw-coupon { background: #1f1a10 !important; border-color: rgba(232,130,12,.3) !important; }
  #cap-widget .cap-fw-coupon-label { color: #e4e8f0 !important; }
  #cap-widget .cap-fw-order { background: #1e2233 !important; border-color: rgba(255,255,255,.08) !important; }
  #cap-widget .cap-fw-order-title { color: #e4e8f0 !important; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE FULLSCREEN — widget responsivo ≤640px
   Estratégia: popup cobre toda a tela via position:fixed + inset:0.
   NÃO alteramos body.position (causa scroll-jump no iOS).
   O teclado é tratado via visualViewport API no JS.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ── Popup fullscreen ── */
  #cap-widget #cap-popup {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    width: 100% !important;
    /* dvh = dynamic viewport height — exclui teclado automaticamente no Chrome/Android */
    height: 100dvh !important;
    height: 100vh !important;     /* fallback */
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Header com safe-area para notch (iPhone) */
  #cap-widget #cap-popup-header,
  #cap-widget .cap-popup-header {
    padding-top: max(12px, env(safe-area-inset-top, 12px)) !important;
  }

  /* Input area com safe-area na base (iPhone home bar) */
  #cap-widget .cap-reply-row,
  #cap-widget .cap-input-row,
  #cap-widget #cap-popup-body > :last-child {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
  }

  /* font-size 16px evita zoom automático do iOS ao focar input */
  #cap-widget input[type="text"],
  #cap-widget input[type="email"],
  #cap-widget textarea {
    font-size: 16px !important;
  }

  /* Área de mensagens preenche o espaço disponível */
  #cap-widget #cap-messages {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Launcher fica visível mas menor; esconde quando popup aberto */
  #cap-widget #cap-launcher {
    bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
    right: 16px !important;
  }
  #cap-widget.cap-popup-open #cap-launcher {
    display: none !important;
  }

  /* Preview bubble não aparece quando popup está aberto */
  #cap-widget.cap-popup-open #cap-preview-bubble {
    display: none !important;
  }

  /* Botão toggle — tamanho confortável para toque */
  #cap-widget #cap-toggle-btn {
    width: 56px !important;
    height: 56px !important;
  }

}

/* Tablets: popup mais largo */
@media (min-width: 641px) and (max-width: 900px) {
  #cap-widget #cap-popup {
    width: min(420px, calc(100vw - 32px)) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   WooCommerce Cards — frontend widget
   ════════════════════════════════════════════════════════════════════ */

#cap-widget .cap-fw-product {
  background: var(--cap-white,#fff) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 12px !important; overflow: hidden !important;
  max-width: 230px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
}
#cap-widget .cap-fw-product-img {
  width: 100% !important; height: 130px !important;
  object-fit: cover !important; display: block !important;
}
#cap-widget .cap-fw-product-body { padding: 10px 12px 12px !important; }
#cap-widget .cap-fw-product-name { font-size: 13px !important; font-weight: 600 !important; color: var(--cap-text,#1a1f2e) !important; margin-bottom: 4px !important; }
#cap-widget .cap-fw-product-price { font-size: 15px !important; font-weight: 700 !important; color: var(--cap-accent,#e8820c) !important; margin-bottom: 10px !important; }
#cap-widget .cap-fw-product-btn { display: block !important; width: 100% !important; text-align: center !important; padding: 8px 0 !important; border-radius: 8px !important; background: var(--cap-accent,#e8820c) !important; color: #fff !important; text-decoration: none !important; font-size: 13px !important; font-weight: 600 !important; }

#cap-widget .cap-fw-coupon { background: #fff8f0 !important; border: 1.5px dashed rgba(232,130,12,.4) !important; border-radius: 12px !important; padding: 14px !important; max-width: 220px !important; text-align: center !important; }
#cap-widget .cap-fw-coupon-tag { font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; color: var(--cap-accent,#e8820c) !important; margin-bottom: 5px !important; }
#cap-widget .cap-fw-coupon-label { font-size: 14px !important; font-weight: 700 !important; color: var(--cap-text,#1a1f2e) !important; margin-bottom: 10px !important; }
#cap-widget .cap-fw-coupon-code { font-size: 15px !important; font-weight: 800 !important; font-family: monospace !important; letter-spacing: .1em !important; color: var(--cap-accent,#e8820c) !important; background: rgba(232,130,12,.1) !important; border-radius: 6px !important; padding: 7px 10px !important; margin-bottom: 7px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: space-between !important; }
#cap-widget .cap-fw-coupon-exp { font-size: 10px !important; color: var(--cap-text3,#9aa1b8) !important; }

#cap-widget .cap-fw-order { background: var(--cap-white,#fff) !important; border: 1px solid rgba(0,0,0,.08) !important; border-radius: 12px !important; padding: 12px 14px !important; max-width: 240px !important; }
#cap-widget .cap-fw-order-title { font-size: 13px !important; font-weight: 700 !important; color: var(--cap-text,#1a1f2e) !important; margin-bottom: 2px !important; }
#cap-widget .cap-fw-order-status { font-size: 12px !important; font-weight: 600 !important; color: #10b981 !important; margin-bottom: 8px !important; border-bottom: 1px solid rgba(0,0,0,.07) !important; padding-bottom: 8px !important; }
#cap-widget .cap-fw-order-row { display: flex !important; justify-content: space-between !important; font-size: 12px !important; color: var(--cap-text2,#5a6480) !important; padding: 2px 0 !important; }
#cap-widget .cap-fw-order-items { margin: 7px 0 0 !important; padding-left: 16px !important; font-size: 11px !important; color: var(--cap-text2,#5a6480) !important; }

@media (prefers-color-scheme: dark) {
  #cap-widget .cap-fw-product { background: #1e2233 !important; }
  #cap-widget .cap-fw-product-name { color: #e4e8f0 !important; }
  #cap-widget .cap-fw-coupon { background: #1f1a10 !important; }
  #cap-widget .cap-fw-coupon-label { color: #e4e8f0 !important; }
  #cap-widget .cap-fw-order { background: #1e2233 !important; }
  #cap-widget .cap-fw-order-title { color: #e4e8f0 !important; }
}