/* JuiceFly chat widget — v2.0 */
.jf-chat-root, .jf-chat-root * { box-sizing: border-box; }
.jf-chat-root {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2147483600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: #111;
}

/* Toggle bubble */
.jf-chat-toggle {
  width: 56px; height: 56px;
  border-radius: 50% !important;
  background: #2fa7ea;
  color: #fff;
  border: none !important;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(47,167,234,0.35);
  transition: transform 0.15s ease;
}
.jf-chat-toggle:hover { transform: scale(1.05); }
.jf-chat-toggle svg { width: 26px; height: 26px; }

/* Floating greeting peek (appears once per session) */
.jf-chat-peek {
  position: absolute;
  bottom: 70px;
  right: 0;
  background: #fff;
  color: #111;
  padding: 10px 32px 10px 14px;
  border-radius: 14px !important;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.jf-chat-peek.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.jf-chat-peek::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: 22px;
  width: 12px; height: 12px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: 3px 3px 6px rgba(0,0,0,0.06);
}
.jf-chat-peek-close {
  position: absolute;
  top: 4px; right: 6px;
  background: transparent;
  border: none !important;
  color: #9ca3af;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.jf-chat-peek-close:hover { color: #111; }
.jf-peek-text .jf-fs { color: #16a34a; }

/* Panel */
.jf-chat-panel {
  position: absolute;
  bottom: 72px; right: 0;
  width: 360px; max-width: calc(100vw - 40px);
  height: 520px; max-height: calc(100vh - 100px);
  background: #fff;
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.jf-chat-root.is-open .jf-chat-panel { display: flex; }

/* Header */
.jf-chat-header {
  padding: 14px 16px;
  background: linear-gradient(135deg, #4cb8f0 0%, #2fa7ea 55%, #1d8fc9 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: space-between;
}
.jf-chat-header-actions {
  display: flex; align-items: center; gap: 2px;
}
.jf-chat-header-left {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; flex: 1;
}
.jf-chat-logo {
  width: 34px; height: 34px;
  border-radius: 50% !important;
  object-fit: cover;
  flex-shrink: 0;
  background: #fff;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.4);
}
.jf-chat-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  height: 34px;
}
.jf-chat-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.jf-chat-subtitle {
  font-size: 10px;
  opacity: 0.85;
  font-weight: 400;
  line-height: 1.1;
}
.jf-chat-header strong { font-size: 15px; line-height: 1.1; font-weight: 600; }
.jf-chat-header small { font-size: 11px; opacity: 0.85; font-weight: 400; }
.jf-status {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  color: #16a34a;
  opacity: 1;
  font-weight: 700;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.3px;
  background: #fff;
  padding: 2px 6px 2px 5px;
  border-radius: 999px !important;
  width: fit-content;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.jf-status-dot {
  width: 5px; height: 5px;
  border-radius: 50% !important;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: jf-pulse 2s infinite;
  flex-shrink: 0;
}
@keyframes jf-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70%  { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.jf-chat-close,
.jf-chat-reset,
.jf-chat-mute {
  background: transparent; border: none !important; color: #fff;
  cursor: pointer; padding: 6px;
  display: flex; align-items: center;
  opacity: 0.75;
  border-radius: 6px !important;
  transition: opacity 0.15s, background 0.15s;
}
.jf-chat-close:hover,
.jf-chat-reset:hover,
.jf-chat-mute:hover { opacity: 1; background: rgba(255,255,255,0.12); }
/* Mute toggle: show the "speaker on" icon by default; flip to "speaker off"
   when muted. Both icons live inside the same button so the layout doesn't
   shift on toggle. */
.jf-chat-mute .jf-icon-sound-off { display: none; }
.jf-chat-mute.is-muted .jf-icon-sound-on { display: none; }
.jf-chat-mute.is-muted .jf-icon-sound-off { display: block; }
.jf-chat-mute.is-muted { opacity: 0.55; }

/* Messages */
.jf-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  background: #f7f8fa;
}
.jf-msg {
  max-width: 80%;
  padding: 9px 13px;
  border-radius: 14px !important;
  word-wrap: break-word;
  animation: jf-fade 0.18s ease;
}
@keyframes jf-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.jf-msg-user {
  align-self: flex-end;
  background: #2fa7ea;
  color: #fff;
  border-bottom-right-radius: 4px !important;
}
.jf-msg-bot {
  align-self: flex-start;
  background: #fff;
  color: #111;
  border: 1px solid #e5e7eb;
  border-bottom-left-radius: 4px !important;
  white-space: pre-wrap;        /* preserve newlines from the agent */
  word-break: break-word;
}
.jf-msg-bot a {
  color: #2fa7ea;
  text-decoration: underline;
  word-break: break-word;
}
.jf-msg-bot a:hover { color: #1d7fb8; }
.jf-msg-bot strong { font-weight: 600; }
.jf-msg-bot s { color: #9ca3af; text-decoration: line-through; }
.jf-msg-bot .jf-sale { color: #2fa7ea; font-weight: 700; }
/* Stock status badges in product cards — green for in-stock, red for OOS. */
.jf-msg-bot .jf-stock-in {
  color: #16a34a;
  font-weight: 700;
}
.jf-msg-bot .jf-stock-out {
  color: #b91c1c;
  font-weight: 700;
}
.jf-msg-img {
  display: block;
  width: 100%;
  max-width: 240px;
  height: 200px;
  object-fit: contain;        /* show the whole product, never crop */
  border-radius: 10px !important;
  margin: 8px 0 4px;
  border: 1px solid #e5e7eb;
  background: #fff;           /* clean letterbox bg when aspect doesn't match */
  padding: 4px;
}
/* Clickable product image — no hover treatment, just a link wrapper. */
.jf-msg-bot a.jf-msg-img-link,
.jf-msg-bot a.jf-msg-img-link:hover {
  text-decoration: none;
  color: inherit;
  display: block;
}
.jf-msg-bot a.jf-msg-img-link:hover .jf-msg-img { opacity: 1; }

/* Inline contact buttons — Claude mentions support@juicefly.com or +1 (310) 303-9769
   in a reply, the renderer wraps them in these elements. Email opens the
   handoff form; phone is a tel: link. Styled as pill chips to read as
   clearly interactive. */
.jf-msg-bot .jf-inline-contact {
  display: inline-block;
  background: #eef7fd;
  color: #1d7fb8;
  border: 1px solid #c7e4f6;
  border-radius: 12px !important;
  padding: 1px 9px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.jf-msg-bot .jf-inline-contact:hover {
  background: #2fa7ea;
  color: #fff;
  border-color: #2fa7ea;
  text-decoration: none;
}

/* "Shop Here" button rendered from [Shop Here](url) markdown. */
/* Primary CTA on parent product cards — full-width gradient pill that lines
   up with the picture above it. Matches the header gradient for brand
   consistency. Inside variant cards (where it pairs with Add to Cart) it
   reverts to an inline pill — see override below. */
.jf-msg-bot a.jf-shop-btn {
  display: block;
  width: 100%;
  max-width: 240px;             /* same as .jf-msg-img so it lines up under the picture */
  box-sizing: border-box;
  background: linear-gradient(135deg, #4cb8f0 0%, #2fa7ea 55%, #1d8fc9 100%);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 22px !important;
  margin: 6px 0 4px;
  box-shadow: 0 2px 8px rgba(47, 167, 234, 0.25);
  transition: box-shadow 0.15s, transform 0.05s, filter 0.15s;
}
.jf-msg-bot a.jf-shop-btn:hover {
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(47, 167, 234, 0.4);
  filter: brightness(1.04);
}
.jf-msg-bot a.jf-shop-btn:active {
  transform: scale(0.98);
}
/* Inside a variant card the Shop Now button pairs with Add to Cart, so we
   revert to the smaller inline pill style. */
.jf-msg-bot .jf-variant-card a.jf-shop-btn {
  display: inline-block;
  width: auto;
  max-width: none;
  background: #2fa7ea;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: 14px !important;
  box-shadow: none;
}
.jf-msg-bot .jf-variant-card a.jf-shop-btn:hover {
  background: #1d7fb8;
  filter: none;
  box-shadow: none;
}

/* Compact product card — wraps the linked-image + name/price + action button
   pattern that the AI emits as markdown. The post-render pass in JS bundles
   the three pieces into this flex container so they read as a small chat
   element instead of a full-width tile. */
.jf-msg-bot .jf-product-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  margin: 2px 0;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  max-width: 320px;
}
/* When two cards are adjacent siblings, share their borders to look like one tight stack. */
.jf-msg-bot .jf-product-card + .jf-product-card { margin-top: 4px; }
.jf-msg-bot .jf-product-card a.jf-msg-img-link {
  flex: 0 0 auto;
  display: block;
}
.jf-msg-bot .jf-product-card .jf-msg-img {
  width: 64px;
  height: 64px;
  max-width: none;
  margin: 0;
  padding: 2px;
  border-radius: 8px !important;
}
.jf-msg-bot .jf-product-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  white-space: normal;        /* override the bubble's pre-wrap */
}
.jf-msg-bot .jf-product-card-body br { display: none; }

/* Clean two-line text inside compact cards: name on line 1, price+stock on line 2. */
.jf-msg-bot .jf-card-name {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  color: #111827;
  text-decoration: none;
  white-space: normal;
}
.jf-msg-bot a.jf-card-name { color: #111827; }
.jf-msg-bot a.jf-card-name:hover { color: #2fa7ea; text-decoration: none; }
.jf-msg-bot .jf-card-meta {
  font-size: 12px;
  line-height: 1.3;
  color: #4b5563;
  white-space: normal;
}
.jf-msg-bot .jf-card-meta strong { color: #111827; font-weight: 700; }
.jf-msg-bot .jf-card-meta .jf-stock-in { color: #16a34a; font-weight: 600; }
.jf-msg-bot .jf-card-meta .jf-stock-out { color: #b91c1c; font-weight: 600; }

/* Parent product card: tiny inline Shop Here pill at the bottom of the body. */
.jf-msg-bot .jf-product-card:not(.jf-variant-card) a.jf-shop-btn {
  display: inline-block;
  width: auto;
  max-width: none;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 12px !important;
  margin: 2px 0 0;
  box-shadow: none;
  align-self: flex-start;
  background: #2fa7ea;
}
.jf-msg-bot .jf-product-card:not(.jf-variant-card) a.jf-shop-btn:hover {
  background: #1d7fb8;
  filter: none;
}
/* Variant card: cart row sits BELOW the image+body row, full width. Two
   stacked controls — qty stepper (full width, − [qty] +), then Add to Cart
   pill underneath. Enables flex-wrap on the variant card so the cart row
   wraps to its own line with `flex-basis: 100%`. */
.jf-msg-bot .jf-variant-card {
  flex-wrap: wrap;
  align-items: flex-start;
}
.jf-msg-bot .jf-variant-card .jf-cart-row {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
  max-width: none;
}
.jf-msg-bot .jf-variant-card .jf-qty-stepper {
  display: flex;
  width: 100%;
  border-radius: 14px !important;
}
.jf-msg-bot .jf-variant-card .jf-qty-stepper button.jf-qty-btn {
  width: 36px;
  font-size: 16px;
  flex: 0 0 36px;
}
.jf-msg-bot .jf-variant-card .jf-qty-stepper input.jf-qty-input {
  flex: 1 1 auto;
  width: auto;
  text-align: center;
  font-size: 14px;
}
.jf-msg-bot .jf-variant-card button.jf-add-cart-btn {
  width: 100%;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 18px !important;
}

/* Row holding the quantity stepper (left) and the Add to Cart button (right).
   Stacks the stepper next to the full-width button so the customer can pick
   a quantity inline without leaving the chat. */
.jf-cart-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  max-width: 240px;
  margin: 6px 0 4px;
}
.jf-qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #d4e4ef !important;
  border-radius: 22px !important;
  overflow: hidden;
  background: #fff;
  flex: 0 0 auto;
}
.jf-qty-stepper button.jf-qty-btn {
  background: transparent;
  border: none !important;
  color: #2fa7ea;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  width: 28px;
  padding: 0;
  cursor: pointer;
  line-height: 1;
}
.jf-qty-stepper button.jf-qty-btn:hover {
  background: #eef7fd;
  color: #1d8fc9;
}
.jf-qty-stepper button.jf-qty-btn:active {
  transform: scale(0.94);
}
.jf-qty-stepper input.jf-qty-input {
  width: 30px;
  border: none !important;
  outline: none;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  color: #111;
  background: transparent;
  -moz-appearance: textfield;
  padding: 0;
}
.jf-qty-stepper input.jf-qty-input::-webkit-outer-spin-button,
.jf-qty-stepper input.jf-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* "Add to Cart" button rendered from [Add to Cart](#cart:<id>) markdown.
   Same visual language as the Shop / Browse Flavors button on parent cards —
   gradient pill that flexes to fill the remaining space in .jf-cart-row. */
.jf-msg-bot button.jf-add-cart-btn {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  background: linear-gradient(135deg, #4cb8f0 0%, #2fa7ea 55%, #1d8fc9 100%);
  color: #fff;
  border: none !important;
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  padding: 10px 14px;
  border-radius: 22px !important;
  margin: 0;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(47, 167, 234, 0.25);
  transition: box-shadow 0.15s, transform 0.05s, filter 0.15s;
}
.jf-msg-bot button.jf-add-cart-btn:hover {
  color: #fff;
  box-shadow: 0 4px 14px rgba(47, 167, 234, 0.4);
  filter: brightness(1.04);
}
.jf-msg-bot button.jf-add-cart-btn:active {
  transform: scale(0.98);
}
.jf-msg-bot button.jf-add-cart-btn.is-added {
  background: #16a34a;
  color: #fff;
  cursor: default;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
  filter: none;
}
.jf-msg-bot button.jf-add-cart-btn.is-loading {
  opacity: 0.7;
  cursor: wait;
}
.jf-add-cart-error {
  display: block;
  font-size: 11px;
  color: #b91c1c;
  margin: 4px 0 0;
  max-width: 240px;
}

/* Sticky View Cart bar — appears above the input row after the customer
   adds their first item via the chat. Persists for the rest of the session
   (count is local — we don't sync the actual Woo cart count). */
.jf-cart-bar {
  background: linear-gradient(135deg, #eef7fd 0%, #dcefff 100%);
  border-top: 1px solid #c7e4f6;
  border-bottom: 1px solid #c7e4f6;
  padding: 8px 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}
.jf-cart-bar .jf-cart-status {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
  min-height: 0;
  line-height: 1.35;
}
.jf-cart-bar .jf-cart-status .jf-fs {
  color: #16a34a;
}

/* Horizontal progress bar shown beneath the cart status / nudge text.
   Used in both the in-chat cart bar (#jf-cart-bar) and the page-level peek
   bubble that pops on add-to-cart. Animates width as the subtotal grows. */
.jf-progress-bar {
  height: 5px;
  background: rgba(17, 24, 39, 0.08);
  border-radius: 3px;
  overflow: hidden;
  margin: 6px 0 0;
  width: 100%;
}
.jf-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ade80 0%, #22c55e 50%, #16a34a 100%);
  border-radius: 3px;
  transition: width 0.45s ease, box-shadow 0.45s ease;
}
/* Once the customer crosses the free-shipping line, ride a soft glow under the
   bar for a moment of celebration. Same gradient, just with a green halo. */
.jf-progress-fill.is-unlocked {
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.55);
}
.jf-cart-bar .jf-cart-status:empty {
  display: none;
}
.jf-cart-bar a.jf-cart-link {
  color: #1d7fb8;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.jf-cart-bar a.jf-cart-link:hover {
  color: #2fa7ea;
  text-decoration: underline;
}
.jf-msg-system {
  align-self: center;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px !important;
}

/* Quick action chips — stacked column, centered both axes in the chat area */
.jf-quick-actions {
  flex: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 14px 8px;
  animation: jf-fade 0.18s ease;
}
.jf-quick-btn {
  /* White fill + blue-gradient border via dual-layer background trick.
     Inner layer (padding-box) is the white fill; outer layer (border-box)
     is the gradient that shows through the transparent border. */
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #4cb8f0 0%, #2fa7ea 55%, #1d8fc9 100%) border-box;
  border: 1.5px solid transparent;
  color: #111;
  border-radius: 18px !important;
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  min-width: 200px;
  text-align: center;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.jf-quick-btn:hover {
  /* Fill the gradient on hover, flip text white. */
  background:
    linear-gradient(135deg, #4cb8f0 0%, #2fa7ea 55%, #1d8fc9 100%) padding-box,
    linear-gradient(135deg, #4cb8f0 0%, #2fa7ea 55%, #1d8fc9 100%) border-box;
  color: #fff;
}
.jf-quick-btn:active {
  transform: scale(0.97);
}

/* Subscribe form checkboxes — keep checkbox + label inline */
.jf-checkbox-row {
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #4b5563;
  font-weight: 500;
  cursor: pointer;
}
.jf-checkbox-row input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: #2fa7ea;
  margin: 0;
}
.jf-checkbox-row em {
  color: #111;
  font-style: normal;
}

/* "Notify me" CTA chip rendered after agent's subscribe offer */
.jf-subscribe-offer {
  align-self: flex-start;
  margin: 2px 0;
  animation: jf-fade 0.2s ease;
}
.jf-subscribe-btn {
  background: linear-gradient(135deg, #4cb8f0 0%, #2fa7ea 100%);
  color: #fff;
  border: none !important;
  border-radius: 16px !important;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(47,167,234,0.25);
  transition: transform 0.1s, box-shadow 0.15s;
}
.jf-subscribe-btn:hover {
  box-shadow: 0 4px 14px rgba(47,167,234,0.4);
}
.jf-subscribe-btn:active {
  transform: scale(0.97);
}

/* End-of-conversation rating prompt — appears when AI emits [RATE]. Five
   number buttons, an optional comment field, then a thank-you. Stays subtle
   so it feels like a soft ask, not a forced exit survey. */
.jf-rating {
  align-self: stretch;
  background: #f7fbff;
  border: 1px solid #d4e4ef;
  border-radius: 12px !important;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: jf-fade 0.25s ease;
}
.jf-rating-prompt {
  font-size: 13px;
  font-weight: 600;
  color: #1d7fb8;
  text-align: center;
}
.jf-rating-stars {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.jf-rating-star {
  flex: 1 1 auto;
  background: #fff;
  border: 1.5px solid #d4e4ef !important;
  border-radius: 999px !important;
  color: #6b7280;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  padding: 8px 0;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s, transform 0.05s;
}
.jf-rating-star:hover {
  border-color: #2fa7ea !important;
  color: #2fa7ea;
}
.jf-rating-star:active {
  transform: scale(0.96);
}
.jf-rating-star.is-selected {
  background: linear-gradient(135deg, #4cb8f0 0%, #2fa7ea 100%);
  border-color: transparent !important;
  color: #fff;
  box-shadow: 0 2px 6px rgba(47, 167, 234, 0.25);
}
.jf-rating-comment-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.jf-rating-comment {
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
  border: 1px solid #d4e4ef !important;
  border-radius: 8px !important;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  color: #111;
  outline: none;
}
.jf-rating-comment:focus {
  border-color: #2fa7ea !important;
}
.jf-rating-submit {
  background: linear-gradient(135deg, #4cb8f0 0%, #2fa7ea 100%);
  color: #fff;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.jf-rating-submit:hover { filter: brightness(1.05); }
.jf-rating-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.jf-rating-thanks {
  font-size: 13px;
  font-weight: 600;
  color: #1d7fb8;
  text-align: center;
  padding: 4px 0;
}

/* Smart follow-up chips (render below the last bot bubble) */
.jf-followups {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 4px;
  max-width: 90%;
  animation: jf-fade 0.2s ease;
}
.jf-followup-btn {
  background: transparent;
  border: 1px solid #d1d5db;
  color: #4b5563;
  border-radius: 14px !important;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.jf-followup-btn:hover {
  background: #2fa7ea;
  color: #fff;
  border-color: #2fa7ea;
}

/* Typing indicator */
.jf-typing {
  align-self: flex-start;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px !important;
  border-bottom-left-radius: 4px !important;
}
.jf-typing-dots { display: flex; gap: 4px; }
.jf-typing-dots span {
  width: 6px; height: 6px;
  background: #9ca3af;
  border-radius: 50% !important;
  animation: jf-typing 1.2s infinite ease-in-out both;
}
.jf-typing-dots span:nth-child(2) { animation-delay: -0.16s; }
.jf-typing-dots span:nth-child(3) { animation-delay: -0.32s; }
.jf-typing-label {
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
}
@keyframes jf-typing {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* Escalation button */
.jf-chat-escalate-row {
  padding: 6px 12px 4px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.jf-chat-escalate-btn {
  background: none;
  border: none;
  color: #111827;
  font-size: 15px;
  font-weight: 700;
  padding: 2px 0;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.01em;
  transition: color 0.15s;
}
.jf-chat-escalate-btn:hover { color: #2fa7ea; }
.jf-chat-escalate-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.jf-chat-escalate-dismiss {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 400;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s;
}
.jf-chat-escalate-dismiss:hover { color: #6b7280; }

/* Handoff channel chooser — two large option cards (Email vs Live chat)
   shown before the actual form. Email gets a "Recommended" badge because
   that's the channel the team can actually handle at volume. */
.jf-handoff-choice {
  align-self: stretch;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px !important;
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jf-handoff-choice .jf-handoff-title {
  margin-bottom: 2px;
}
.jf-handoff-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1.5px solid #d4e4ef !important;
  border-radius: 12px !important;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s;
}
.jf-handoff-option:hover {
  border-color: #2fa7ea !important;
  box-shadow: 0 2px 10px rgba(47, 167, 234, 0.15);
}
.jf-handoff-option:active {
  transform: scale(0.99);
}
.jf-handoff-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  background: #f7f9fc;
  border-color: #e5e9ef !important;
}
.jf-handoff-option.is-disabled:hover {
  border-color: #e5e9ef !important;
  box-shadow: none;
}
.jf-handoff-option.is-disabled:active {
  transform: none;
}
.jf-handoff-option-icon {
  font-size: 22px;
  line-height: 1;
  flex: 0 0 auto;
}
.jf-handoff-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.jf-handoff-option-text strong {
  font-size: 14px;
  color: #111;
  font-weight: 700;
}
.jf-handoff-option-sub {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.3;
}
.jf-handoff-badge {
  position: absolute;
  top: -8px;
  right: 12px;
  background: linear-gradient(135deg, #4cb8f0 0%, #2fa7ea 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(47, 167, 234, 0.3);
}
.jf-handoff-badge-soon {
  background: #9ca3af;
  box-shadow: 0 2px 6px rgba(107, 114, 128, 0.25);
}
.jf-handoff-back {
  background: transparent;
  border: none !important;
  color: #6b7280;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  padding: 6px;
  align-self: center;
}
.jf-handoff-back:hover {
  color: #111;
  text-decoration: underline;
}

/* Phone card — surfaced when customer picks the Phone handoff option */
.jf-handoff-phone {
  align-self: stretch;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px !important;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
  animation: jf-fade 0.18s ease;
}
.jf-handoff-call-btn {
  display: inline-block;
  margin-top: 4px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #4cb8f0 0%, #2fa7ea 100%);
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(47, 167, 234, 0.3);
  transition: transform 0.05s, box-shadow 0.15s;
}
.jf-handoff-call-btn:hover {
  box-shadow: 0 4px 12px rgba(47, 167, 234, 0.4);
}
.jf-handoff-call-btn:active {
  transform: scale(0.98);
}

/* LA same-day delivery ZIP checker card */
.jf-delivery-check {
  align-self: stretch;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px !important;
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  animation: jf-fade 0.18s ease;
}
.jf-delivery-title {
  font-size: 14px;
  font-weight: 600;
  color: #111;
}
.jf-delivery-sub {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}
.jf-delivery-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.jf-delivery-zip {
  flex: 1;
  padding: 10px 12px;
  border: 1.5px solid #d4e4ef;
  border-radius: 10px !important;
  font-size: 16px;
  font-family: inherit;
  letter-spacing: 2px;
  text-align: center;
  outline: none;
  transition: border-color 0.15s;
}
.jf-delivery-zip:focus {
  border-color: #2fa7ea;
}
.jf-delivery-zip.is-invalid {
  border-color: #ef4444;
  animation: jf-shake 0.3s;
}
@keyframes jf-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.jf-delivery-submit {
  padding: 10px 18px;
  background: linear-gradient(135deg, #4cb8f0 0%, #2fa7ea 100%);
  color: #fff;
  border: none !important;
  border-radius: 10px !important;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: box-shadow 0.15s, transform 0.05s;
}
.jf-delivery-submit:hover {
  box-shadow: 0 2px 8px rgba(47, 167, 234, 0.35);
}
.jf-delivery-submit:active {
  transform: scale(0.98);
}
.jf-delivery-back {
  background: transparent;
  border: none !important;
  color: #6b7280;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  padding: 4px;
  align-self: flex-start;
}
.jf-delivery-back:hover {
  color: #111;
  text-decoration: underline;
}
.jf-delivery-result {
  background: #f0f9ff;
  border: 1px solid #c7e4f6;
  border-radius: 10px !important;
  padding: 12px;
  margin-top: 4px;
}
.jf-delivery-zone-badge {
  display: inline-block;
  background: linear-gradient(135deg, #4cb8f0 0%, #2fa7ea 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 10px !important;
  margin-bottom: 8px;
}
.jf-delivery-stats {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.jf-delivery-stats li {
  font-size: 13px;
  color: #111;
  line-height: 1.4;
}
.jf-delivery-muted {
  color: #6b7280;
  font-weight: 400;
  font-size: 12px;
}
.jf-delivery-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  align-items: center;
}
.jf-delivery-cta {
  flex: 1;
  display: inline-block;
  padding: 10px 14px;
  background: linear-gradient(135deg, #4cb8f0 0%, #2fa7ea 100%);
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(47, 167, 234, 0.25);
}
.jf-delivery-cta:hover {
  box-shadow: 0 4px 12px rgba(47, 167, 234, 0.4);
}
.jf-delivery-retry {
  background: transparent;
  border: 1px solid #d4e4ef !important;
  color: #2fa7ea;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  padding: 9px 12px;
  border-radius: 10px !important;
  cursor: pointer;
}
.jf-delivery-retry:hover {
  border-color: #2fa7ea !important;
  background: #f0f9ff;
}

/* Handoff form (rendered inline in the messages area) */
.jf-handoff-form {
  align-self: stretch;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px !important;
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  animation: jf-fade 0.18s ease;
}
.jf-handoff-title {
  font-size: 14px;
  font-weight: 600;
  color: #111;
}
.jf-handoff-sub {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}
.jf-handoff-form label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12px;
  color: #4b5563;
  font-weight: 500;
}
.jf-handoff-optional {
  color: #9ca3af;
  font-weight: 400;
}
.jf-handoff-form input,
.jf-handoff-form textarea {
  padding: 8px 11px;
  border: 1px solid #d1d5db;
  border-radius: 8px !important;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: #f7f8fa;
  color: #111;
  resize: vertical;
}
.jf-handoff-form input:focus,
.jf-handoff-form textarea:focus { border-color: #2fa7ea; background: #fff; }
.jf-handoff-actions {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px;
}
.jf-handoff-cancel,
.jf-handoff-submit {
  padding: 7px 16px;
  border-radius: 8px !important;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
}
.jf-handoff-cancel {
  background: transparent;
  border-color: #d1d5db;
  color: #6b7280;
}
.jf-handoff-cancel:hover { color: #111; border-color: #9ca3af; }
.jf-handoff-submit {
  background: #2fa7ea;
  color: #fff;
}
.jf-handoff-submit:hover { background: #1d7fb8; }
.jf-handoff-submit:disabled,
.jf-handoff-cancel:disabled { opacity: 0.5; cursor: not-allowed; }
.jf-handoff-error {
  font-size: 12px;
  color: #b91c1c;
  background: #fee2e2;
  padding: 6px 10px;
  border-radius: 6px !important;
  margin-top: 4px;
}
.jf-file-input {
  font-size: 12px;
  padding: 6px 0;
  background: transparent;
  border: none !important;
  color: #4b5563;
}
.jf-file-input::file-selector-button {
  font-family: inherit;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px !important;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #2fa7ea;
  cursor: pointer;
  margin-right: 8px;
}
.jf-file-input::file-selector-button:hover {
  border-color: #2fa7ea;
  background: #f0f9ff;
}
.jf-file-preview {
  font-size: 12px;
  color: #4b5563;
  background: #f7f8fa;
  padding: 6px 10px;
  border-radius: 6px !important;
  margin-top: -4px;
}

/* Input */
.jf-chat-input-row {
  padding: 10px 12px;
  border-top: 1px solid #e5e7eb;
  background: #fff;
  display: flex; gap: 8px;
}
.jf-chat-input {
  flex: 1;
  padding: 9px 13px;
  border: 1px solid #d1d5db;
  border-radius: 18px !important;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  background: #f7f8fa;
}
.jf-chat-input:focus { border-color: #2fa7ea; background: #fff; }
.jf-chat-send {
  width: 38px; height: 38px;
  border-radius: 50% !important;
  background: #2fa7ea;
  color: #fff;
  border: none !important;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.jf-chat-send:disabled { opacity: 0.5; cursor: not-allowed; }
.jf-chat-send svg { width: 18px; height: 18px; }

/* Mobile */
@media (max-width: 480px) {
  /* Root becomes the fullscreen container — removes any offset from right/bottom */
  .jf-chat-root.is-open {
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
  }
  /* Panel fills root absolutely — avoids fixed-inside-fixed containing-block issues */
  .jf-chat-root.is-open .jf-chat-panel {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; max-width: 100%; height: 100%;
    max-height: none;
    border-radius: 0 !important;
  }
  /* Hide the floating toggle bubble while the panel is open (X in header handles close) */
  .jf-chat-root.is-open .jf-chat-toggle { display: none; }
  /* Keep toggle in its usual spot when closed */
  .jf-chat-root { bottom: 16px; right: 16px; }
  /* iOS Safari zooms into inputs with font-size < 16px — prevent that */
  .jf-chat-input { font-size: 16px !important; }
  /* Respect iPhone home indicator — push the bar up, not inside it */
  .jf-chat-root.is-open .jf-chat-panel {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}