/* GT Chat Bot — chat-feed widget styles v0.2.0
 * Hard isolation: every selector prefixed with .gtcb-root, button reset,
 * !important on critical layout properties so theme can't mangle.
 */

/* ── Reset everything inside the widget against theme cascade ──────────── */
.gtcb-root,
.gtcb-root *,
.gtcb-root *::before,
.gtcb-root *::after {
  box-sizing: border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  line-height: 1.4;
}

.gtcb-root button {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  font: inherit !important;
  color: inherit !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  outline: none !important;
  box-shadow: none;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto;
  height: auto;
  border-radius: 0;
}
.gtcb-root input {
  margin: 0 !important;
  border: 0;
  background: transparent;
  font: inherit !important;
  color: inherit !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.gtcb-root a { text-decoration: none !important; color: inherit !important; background: transparent !important; }
.gtcb-root a:hover, .gtcb-root a:focus { text-decoration: none !important; }
.gtcb-root img { max-width: none !important; height: auto; border: 0 !important; vertical-align: middle; }

/* ── Root container ─────────────────────────────────────────────────────── */
.gtcb-root {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  z-index: 999990 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Floating icon — circle, internal padding so PNG breathes, professional shadow ─ */
.gtcb-root .gtcb-icon {
  pointer-events: auto !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 3px solid #D9E4EC !important; /* soft cool grey-blue */
  box-shadow:
    0 12px 32px rgba(26, 53, 104, 0.18),
    0 6px 12px rgba(26, 53, 104, 0.10),
    0 1px 2px rgba(0, 0, 0, 0.04) !important;
  cursor: pointer !important;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  padding: 12px !important; /* internal breathing room around the cartoon characters */
}
.gtcb-root .gtcb-icon:hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow:
    0 18px 44px rgba(26, 53, 104, 0.28),
    0 8px 16px rgba(26, 53, 104, 0.14),
    0 2px 4px rgba(0, 0, 0, 0.06) !important;
  background: #ffffff !important;
}
.gtcb-root .gtcb-icon:active { transform: scale(0.97) !important; }
.gtcb-root .gtcb-icon img,
.gtcb-root .gtcb-icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important; /* don't crop — let padding give breathing room */
  border-radius: 0 !important;
  background: transparent !important;
}
/* IDLE: icon visible, bubble hidden, panel hidden — research-backed default */
.gtcb-root.gtcb-state-hidden .gtcb-icon,
.gtcb-root.gtcb-state-idle .gtcb-icon { transform: translateY(0) !important; opacity: 1 !important; pointer-events: auto !important; }
/* When user fully dismisses (X on bubble), still keep icon visible so they can re-open at will */
.gtcb-root.gtcb-state-dismissed .gtcb-icon { transform: translateY(0) !important; opacity: 1 !important; pointer-events: auto !important; }

/* ── Speech bubble (opener) ─────────────────────────────────────────────── */
.gtcb-root .gtcb-bubble {
  pointer-events: auto !important;
  position: absolute !important;
  bottom: 28px !important;
  right: 132px !important;
  width: max-content !important;
  min-width: 200px !important;
  max-width: 280px !important;
  padding: 14px 32px 14px 16px !important;
  margin: 0 !important;
  background: #fff !important;
  color: #1a3568 !important;
  border-radius: 16px 16px 4px 16px !important;
  box-shadow: 0 8px 24px rgba(26, 53, 104, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  transform-origin: bottom right;
  transition: opacity 240ms ease-out, transform 240ms ease-out;
  cursor: pointer;
  font-size: 14px !important;
  line-height: 1.4 !important;
  text-align: left !important;
}
.gtcb-root.gtcb-state-bubble .gtcb-bubble { opacity: 1 !important; transform: translateY(0) scale(1) !important; }
.gtcb-root.gtcb-state-hidden .gtcb-bubble,
.gtcb-root.gtcb-state-idle .gtcb-bubble,
.gtcb-root.gtcb-state-dismissed .gtcb-bubble,
.gtcb-root.gtcb-state-open .gtcb-bubble { opacity: 0 !important; transform: translateY(8px) scale(0.95) !important; pointer-events: none !important; }
.gtcb-root .gtcb-bubble::after {
  content: "" !important;
  position: absolute !important;
  right: -6px !important; bottom: 14px !important;
  width: 12px !important; height: 12px !important;
  background: #fff !important;
  transform: rotate(45deg) !important;
}
.gtcb-root .gtcb-bubble-text { margin: 0 !important; padding: 0 !important; font-weight: 600 !important; color: #1a3568 !important; font-size: 16px !important; line-height: 1.4 !important; }
.gtcb-root .gtcb-bubble-cta {
  margin-top: 8px !important;
  background: #f08a24 !important;
  color: #fff !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-block !important;
}
.gtcb-root .gtcb-bubble-cta:hover { background: #d97818 !important; }
.gtcb-root .gtcb-bubble-x {
  position: absolute !important;
  top: 4px !important; right: 6px !important;
  width: 24px !important; height: 24px !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #6b7c95 !important;
  font-size: 18px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.gtcb-root .gtcb-bubble-x:hover { background: #f0f3f8 !important; color: #1a3568 !important; }

/* ── Open chat panel ────────────────────────────────────────────────────── */
.gtcb-root .gtcb-panel {
  pointer-events: none;
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 380px !important;
  max-height: min(640px, calc(100vh - 60px)) !important;
  height: 600px !important;
  background: #fff !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 60px rgba(26, 53, 104, 0.25), 0 6px 18px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity 200ms ease-out, transform 200ms ease-out;
  overflow: hidden !important;
}
.gtcb-root.gtcb-state-open .gtcb-panel { opacity: 1 !important; transform: translateY(0) scale(1) !important; pointer-events: auto !important; }
.gtcb-root.gtcb-state-open .gtcb-icon { transform: scale(0.85) !important; opacity: 0.6 !important; }

/* Header with persona avatar + name + subtitle + close */
.gtcb-root .gtcb-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  background: #1a3568 !important;
  color: #fff !important;
  flex-shrink: 0 !important;
}
.gtcb-root .gtcb-avatar {
  width: 40px !important; height: 40px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  border: 2px solid rgba(255,255,255,0.2) !important;
  background: #fff !important;
}
.gtcb-root .gtcb-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.gtcb-root .gtcb-header-meta { flex: 1 !important; min-width: 0 !important; }
.gtcb-root .gtcb-header-name { font-size: 15px !important; font-weight: 600 !important; color: #fff !important; line-height: 1.2 !important; }
.gtcb-root .gtcb-header-sub  { font-size: 11px !important; color: rgba(255,255,255,0.75) !important; line-height: 1.3 !important; margin-top: 2px !important; }
.gtcb-root .gtcb-close {
  width: 30px !important; height: 30px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
  font-size: 18px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
.gtcb-root .gtcb-close:hover { background: rgba(255,255,255,0.28) !important; }

/* Feed scroll area */
.gtcb-root .gtcb-feed {
  padding: 16px 14px !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  -webkit-overflow-scrolling: touch !important;
  background: #f6f8fb !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Message rows */
.gtcb-root .gtcb-msg-row { display: flex !important; align-items: flex-end !important; gap: 8px !important; max-width: 100% !important; }
.gtcb-root .gtcb-msg-row.gtcb-msg-bot  { justify-content: flex-start !important; }
.gtcb-root .gtcb-msg-row.gtcb-msg-user { justify-content: flex-end !important; }

.gtcb-root .gtcb-msg-avatar {
  width: 28px !important; height: 28px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  background: #e1e7f0 !important;
}
.gtcb-root .gtcb-msg-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }

.gtcb-root .gtcb-msg-bubble {
  max-width: 78% !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: #1a3568 !important;
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
}
.gtcb-root .gtcb-msg-bot .gtcb-msg-bubble {
  border-top-left-radius: 4px !important;
  box-shadow: 0 1px 2px rgba(26, 53, 104, 0.06) !important;
}
.gtcb-root .gtcb-msg-user .gtcb-msg-bubble {
  background: #f08a24 !important;
  color: #fff !important;
  border-top-right-radius: 4px !important;
}

/* Typing indicator (3 bouncing dots) */
.gtcb-root .gtcb-typing { display: inline-flex !important; gap: 4px !important; padding: 12px 14px !important; }
.gtcb-root .gtcb-typing span {
  width: 6px !important; height: 6px !important; border-radius: 50% !important;
  background: #c0c8d4 !important;
  animation: gtcb-bounce 1.2s infinite ease-in-out;
}
.gtcb-root .gtcb-typing span:nth-child(2) { animation-delay: 0.15s; }
.gtcb-root .gtcb-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes gtcb-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Quick-pick chip row */
.gtcb-root .gtcb-chip-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 4px 0 4px 36px !important;
}
.gtcb-root .gtcb-chip {
  padding: 8px 14px !important;
  border: 1px solid #d3dae5 !important;
  border-radius: 999px !important;
  background: #fff !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1a3568 !important;
  min-height: 36px !important;
}
.gtcb-root .gtcb-chip:hover { border-color: #f08a24 !important; background: #fff8ef !important; }

/* Input bar (free text) */
.gtcb-root .gtcb-inputbar {
  flex-shrink: 0 !important;
  padding: 8px 10px !important;
  background: #fff !important;
  border-top: 1px solid #e1e7f0 !important;
}
.gtcb-root .gtcb-input-form {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}
.gtcb-root .gtcb-input {
  flex: 1 !important;
  padding: 10px 14px !important;
  border: 1px solid #d3dae5 !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  background: #fafbfc !important;
  color: #1a3568 !important;
  min-width: 0 !important;
}
.gtcb-root .gtcb-input:focus {
  outline: none !important;
  border-color: #f08a24 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(240, 138, 36, 0.15) !important;
}
.gtcb-root .gtcb-send {
  width: 40px !important; height: 40px !important;
  border-radius: 50% !important;
  background: #f08a24 !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
.gtcb-root .gtcb-send:hover { background: #d97818 !important; }
.gtcb-root .gtcb-send:disabled { opacity: 0.5 !important; cursor: not-allowed !important; }

/* Result cards (inside feed) */
.gtcb-root .gtcb-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 4px 0 4px 36px !important;
}
.gtcb-root .gtcb-card {
  display: block !important;
  border: 1px solid #e1e7f0 !important;
  border-radius: 14px !important;
  padding: 12px !important;
  background: #fff !important;
  text-decoration: none !important;
  color: inherit !important;
}
.gtcb-root .gtcb-card.gtcb-featured {
  border-color: #f6c89a !important;
  box-shadow: 0 0 0 3px rgba(240, 138, 36, 0.08) !important;
}
.gtcb-root .gtcb-card-head { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 8px !important; }
.gtcb-root .gtcb-card-logo { width: 36px !important; height: 36px !important; border-radius: 8px !important; object-fit: cover !important; background: #f0f3f8 !important; flex-shrink: 0 !important; display: block !important; }
.gtcb-root .gtcb-card-meta { flex: 1 !important; min-width: 0 !important; }
.gtcb-root .gtcb-card-title { font-weight: 600 !important; color: #1a3568 !important; font-size: 14px !important; line-height: 1.3 !important; }
.gtcb-root .gtcb-card-discount { font-size: 13px !important; color: #d97818 !important; font-weight: 600 !important; margin-top: 2px !important; }

.gtcb-root .gtcb-pill {
  font-size: 11px !important;
  font-weight: 700 !important;
  background: #f08a24 !important;
  color: #fff !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  flex-shrink: 0 !important;
}
.gtcb-root .gtcb-valid { font-size: 12px !important; color: #6b7c95 !important; margin: 0 0 8px !important; }

.gtcb-root .gtcb-cta {
  display: inline-block !important;
  padding: 8px 14px !important;
  background: #f08a24 !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.gtcb-root .gtcb-cta:hover { background: #d97818 !important; color: #fff !important; }
.gtcb-root .gtcb-cta-inline { color: #f08a24 !important; font-weight: 600 !important; font-size: 13px !important; }

.gtcb-root .gtcb-article-card { display: flex !important; gap: 10px !important; align-items: flex-start !important; padding: 10px !important; }
.gtcb-root .gtcb-article-thumb { width: 60px !important; height: 60px !important; border-radius: 8px !important; object-fit: cover !important; flex-shrink: 0 !important; background: #f0f3f8 !important; display: block !important; }
.gtcb-root .gtcb-article-body { flex: 1 !important; min-width: 0 !important; }
.gtcb-root .gtcb-article-excerpt { font-size: 12px !important; color: #6b7c95 !important; margin: 4px 0 6px !important; line-height: 1.4 !important; }

/* Email signup form (no-results path) */
.gtcb-root .gtcb-email-wrap { margin: 4px 0 4px 36px !important; }
.gtcb-root .gtcb-email-form {
  background: #fff !important;
  border: 1px solid #e1e7f0 !important;
  border-radius: 14px !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.gtcb-root .gtcb-email-form .gtcb-input { padding: 9px 12px !important; }
.gtcb-root .gtcb-skip-link {
  background: transparent !important;
  color: #6b7c95 !important;
  font-size: 12px !important;
  text-decoration: underline !important;
  padding: 4px 0 !important;
  align-self: flex-start !important;
  font-weight: 400 !important;
}
.gtcb-root .gtcb-skip-link:hover { color: #1a3568 !important; }

/* Result-card fade-in (used for staggered append) */
.gtcb-root .gtcb-card-fade-in {
  animation: gtcb-fade-in 240ms ease-out both;
}
@keyframes gtcb-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.gtcb-root .gtcb-form-btnrow { display: flex !important; gap: 8px !important; align-items: center !important; }
.gtcb-root .gtcb-send-pill {
  background: #f08a24 !important;
  color: #fff !important;
  padding: 9px 16px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.gtcb-root .gtcb-send-pill:hover { background: #d97818 !important; }
.gtcb-root .gtcb-skip-pill {
  background: transparent !important;
  color: #6b7c95 !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.gtcb-root .gtcb-skip-pill:hover { color: #1a3568 !important; }
.gtcb-root .gtcb-form-dismissed { opacity: 0.5 !important; }
.gtcb-root .gtcb-chip-row-used { opacity: 0.5 !important; }
.gtcb-root .gtcb-chip:disabled { cursor: default !important; }
.gtcb-root .gtcb-form-status { margin: 0 !important; font-size: 12px !important; color: #6b7c95 !important; }
.gtcb-root .gtcb-form-status.gtcb-ok  { color: #1a8754 !important; }
.gtcb-root .gtcb-form-status.gtcb-err { color: #b3251b !important; }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hug the bottom — small fixed margin + iOS safe-area for notched devices.
   * Browsers without the safe-area env var fall back to the first rule. */
  .gtcb-root {
    bottom: 8px !important;
    right: 10px !important;
    bottom: calc(6px + env(safe-area-inset-bottom)) !important;
  }
  /* Smaller, more thumb-friendly icon */
  .gtcb-root .gtcb-icon {
    width: 64px !important;
    height: 64px !important;
    padding: 6px !important;
    border-width: 2px !important;
  }
  /* Bubble: tighter max-width so it never overflows the viewport, smaller
   * font + padding so the whole element feels less imposing on a phone. */
  .gtcb-root .gtcb-bubble {
    bottom: 6px !important;
    right: 76px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 96px) !important;
    font-size: 13px !important;
    padding: 10px 28px 10px 12px !important;
    border-radius: 14px 14px 4px 14px !important;
  }
  .gtcb-root .gtcb-bubble-text {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  .gtcb-root .gtcb-bubble-cta {
    font-size: 12px !important;
    padding: 5px 11px !important;
    margin-top: 6px !important;
  }
  .gtcb-root .gtcb-bubble-x {
    width: 22px !important;
    height: 22px !important;
    font-size: 16px !important;
    top: 2px !important;
    right: 4px !important;
  }
  .gtcb-root.gtcb-state-open .gtcb-icon { transform: scale(0) translateY(20px) !important; opacity: 0 !important; pointer-events: none !important; }
  .gtcb-root .gtcb-panel {
    position: fixed !important;
    bottom: 0 !important; right: 0 !important; left: 0 !important;
    width: 100% !important;
    height: 75vh !important;
    max-height: 75vh !important;
    border-radius: 18px 18px 0 0 !important;
    transform: translateY(100%);
  }
  .gtcb-root.gtcb-state-open .gtcb-panel { transform: translateY(0) !important; }
  .gtcb-root .gtcb-msg-bubble { max-width: 82% !important; }
  .gtcb-root .gtcb-chip-row,
  .gtcb-root .gtcb-cards,
  .gtcb-root .gtcb-email-wrap { margin-left: 36px !important; }
  body.gtcb-body-locked { overflow: hidden !important; }
}

@media (prefers-reduced-motion: reduce) {
  .gtcb-root .gtcb-icon,
  .gtcb-root .gtcb-bubble,
  .gtcb-root .gtcb-panel,
  .gtcb-root .gtcb-typing span { transition: none !important; animation: none !important; }
}