#wpaic-widget-root {
  --wpaic-accent: #4f46e5;
  --wpaic-icon-size: 96px;
  /* Sharp-corner design system: all radii driven from here so the whole
     widget (window, cards, chips, buttons) can be re-rounded in one place
     if a future theme ever wants curves again. Default = sharp/square. */
  --wpaic-radius-lg: 4px;
  --wpaic-radius-md: 3px;
  --wpaic-radius-sm: 2px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Bubble icon (no background circle, size configurable, animated) ---------- */
#wpaic-bubble {
  position: fixed;
  bottom: 24px;
  width: var(--wpaic-icon-size);
  height: var(--wpaic-icon-size);
  cursor: pointer;
  z-index: 999999;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.22));
}
#wpaic-bubble:hover img { transform: scale(1.08); }
#wpaic-bubble img { width: 100%; height: 100%; object-fit: contain; display: block; position: relative; z-index: 2; transition: transform .2s ease; }
/* Lottie player: transparent background, fills the bubble exactly like the img */
#wpaic-bubble dotlottie-player { width: 100%; height: 100%; position: relative; z-index: 2; background: transparent !important; }
#wpaic-bubble:hover.wpaic-lottie-icon dotlottie-player { transform: scale(1.08); transition: transform .2s ease; }
#wpaic-bubble.wpaic-right { right: 22px; }
#wpaic-bubble.wpaic-left { left: 22px; }
#wpaic-bubble .wpaic-ring { display: none; }

/* Style 1: pulsing glow rings expanding outward from the icon */
#wpaic-bubble.wpaic-anim-style1 img { animation: wpaic-float 3s ease-in-out infinite; }
#wpaic-bubble.wpaic-anim-style1 .wpaic-ring {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--wpaic-accent) 55%, transparent) 0%, transparent 70%);
  animation: wpaic-glow 2.6s ease-out infinite;
  z-index: 1;
}
#wpaic-bubble.wpaic-anim-style1 .wpaic-ring-2 { animation-delay: 1.3s; }

@keyframes wpaic-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes wpaic-glow {
  0% { transform: scale(0.7); opacity: .55; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Style 2: radar ping ring + breathing icon */
#wpaic-bubble.wpaic-anim-style2 img { animation: wpaic-breathe 1.8s ease-in-out infinite; }
#wpaic-bubble.wpaic-anim-style2 .wpaic-ring {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--wpaic-accent);
  opacity: 0;
  animation: wpaic-ping 2.2s cubic-bezier(0,.4,.6,1) infinite;
}
#wpaic-bubble.wpaic-anim-style2 .wpaic-ring-2 { animation-delay: 1.1s; }

@keyframes wpaic-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes wpaic-ping {
  0% { transform: scale(0.85); opacity: .6; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- Peek message bubble: swipes in and out ---------- */
#wpaic-peek {
  position: absolute;
  bottom: 10px;
  max-width: 190px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #222;
  padding: 10px 14px;
  border-radius: var(--wpaic-radius-lg);
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
#wpaic-peek.wpaic-right { right: 96px; transform: translateX(12px); }
#wpaic-peek.wpaic-left { left: 96px; transform: translateX(-12px); }
#wpaic-peek.show { opacity: 1; transform: translateX(0); }

/* ---------- Chat window: glassmorphism ---------- */
#wpaic-window {
  position: fixed;
  bottom: 128px;
  width: 400px;
  max-width: 92vw;
  height: 580px;
  max-height: 78vh;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--wpaic-radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 999999;
  font-family: inherit;
  transform-origin: bottom right;
}
#wpaic-window.wpaic-right { right: 22px; transform-origin: bottom right; }
#wpaic-window.wpaic-left { left: 22px; transform-origin: bottom left; }
#wpaic-window.open { display: flex; animation: wpaic-open .38s cubic-bezier(.2,.9,.3,1.2) forwards; }
#wpaic-window.wpaic-closing { animation: wpaic-close .26s ease forwards; }

@keyframes wpaic-open {
  0% { opacity: 0; transform: scale(.85) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes wpaic-close {
  0% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(.9) translateY(16px); }
}

#wpaic-header {
  background: linear-gradient(135deg, var(--wpaic-accent), color-mix(in srgb, var(--wpaic-accent) 70%, #000 15%));
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wpaic-header-icon { width: 38px; height: 38px; flex-shrink: 0; background: transparent; }
#wpaic-header img { width: 38px; height: 38px; object-fit: contain; border-radius: var(--wpaic-radius-sm); background: transparent; flex-shrink: 0; }
.wpaic-header-icon dotlottie-player, .wpaic-header-icon img { width: 100%; height: 100%; background: transparent !important; }
.wpaic-header-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
#wpaic-header .wpaic-title { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#wpaic-header .wpaic-subtitle { font-size: 11px; opacity: .85; }
#wpaic-header .wpaic-subtitle::before { content: "●"; color: #4ade80; margin-right: 4px; font-size: 9px; }
#wpaic-close { cursor: pointer; opacity: .9; font-size: 22px; line-height: 1; padding: 0 2px; flex-shrink: 0; }

#wpaic-whatsapp-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(37,211,102,0.95);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 9px;
  border-radius: var(--wpaic-radius-sm);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
#wpaic-whatsapp-btn:hover { background: #1ebe5b; }

@media (max-width: 360px) {
  #wpaic-whatsapp-btn span { display: none; }
  #wpaic-whatsapp-btn { padding: 6px; }
}

#wpaic-messages { flex: 1; overflow-y: auto; padding: 14px; }
.wpaic-msg { margin-bottom: 12px; display: flex; }
.wpaic-msg.user { justify-content: flex-end; }
.wpaic-msg-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: var(--wpaic-radius-md);
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.wpaic-msg.user .wpaic-msg-bubble { background: var(--wpaic-accent); color: #fff; }
.wpaic-msg.assistant .wpaic-msg-bubble { background: rgba(255,255,255,0.85); color: #222; }

/* ---------- Formatted assistant messages (bold labels, bullet lists) ---------- */
.wpaic-msg-bubble p { margin: 0 0 6px; }
.wpaic-msg-bubble p:last-child { margin-bottom: 0; }
.wpaic-msg-bubble strong { font-weight: 700; color: var(--wpaic-accent); }
.wpaic-msg.user .wpaic-msg-bubble strong { color: #fff; }
.wpaic-msg-bubble ul.wpaic-list { margin: 2px 0 6px; padding-left: 18px; }
.wpaic-msg-bubble ul.wpaic-list:last-child { margin-bottom: 0; }
.wpaic-msg-bubble ul.wpaic-list li { margin-bottom: 3px; }

/* ---------- Quick-reply suggestion chips ---------- */
.wpaic-chips-row { display: flex; flex-wrap: wrap; gap: 8px; max-width: 92%; }
.wpaic-chip {
  background: rgba(255,255,255,0.9);
  border: 1px solid color-mix(in srgb, var(--wpaic-accent) 40%, transparent);
  color: var(--wpaic-accent);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--wpaic-radius-md);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.wpaic-chip:hover { background: var(--wpaic-accent); color: #fff; }

/* ---------- Order placement CTA button ---------- */
.wpaic-order-btn { background: var(--wpaic-accent); }
.wpaic-order-btn:hover { background: color-mix(in srgb, var(--wpaic-accent) 80%, #000 15%); }

/* ---------- "Talk to a live agent" link under product cards ---------- */
.wpaic-live-agent-link {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  color: #25D366;
  text-decoration: none;
  padding: 4px 2px;
  margin-top: 2px;
}
.wpaic-live-agent-link:hover { text-decoration: underline; }

/* ---------- Typing indicator ---------- */
.wpaic-typing-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #666; padding: 2px 4px 8px; }
.wpaic-typing-dots { display: inline-flex; gap: 3px; }
.wpaic-typing-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--wpaic-accent);
  display: inline-block;
  animation: wpaic-blink 1.2s infinite ease-in-out;
}
.wpaic-typing-dots i:nth-child(2) { animation-delay: .2s; }
.wpaic-typing-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes wpaic-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ---------- Product cards ---------- */
.wpaic-products-row { display: flex; flex-direction: column; gap: 10px; max-width: 94%; }
.wpaic-product-card {
  display: flex;
  gap: 10px;
  background: rgba(255,255,255,0.9);
  border-radius: var(--wpaic-radius-md);
  padding: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.wpaic-product-card img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--wpaic-radius-sm); flex-shrink: 0; }
.wpaic-product-info { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.wpaic-product-title { font-size: 13px; font-weight: 600; color: #222; }
.wpaic-product-price { font-size: 12px; color: var(--wpaic-accent); font-weight: 600; }
.wpaic-product-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--wpaic-accent); letter-spacing: .03em; }
.wpaic-product-link { font-size: 12px; color: #fff; background: var(--wpaic-accent); padding: 4px 10px; border-radius: var(--wpaic-radius-sm); text-decoration: none; align-self: flex-start; margin-top: 2px; }

/* ---------- WhatsApp escalation CTA ---------- */
.wpaic-cta-bubble p { margin: 0 0 8px; }
.wpaic-cta-whatsapp {
  display: inline-block;
  background: #25D366;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--wpaic-radius-md);
  text-decoration: none;
}
.wpaic-cta-whatsapp:hover { background: #1ebe5b; }

#wpaic-inputbar { display: flex; border-top: 1px solid rgba(0,0,0,0.06); padding: 10px; gap: 8px; background: rgba(255,255,255,0.6); }
#wpaic-input { flex: 1; border: 1px solid rgba(0,0,0,0.1); background: rgba(255,255,255,0.9); border-radius: var(--wpaic-radius-sm); padding: 10px 15px; font-size: 14px; outline: none; }
#wpaic-input:focus { border-color: var(--wpaic-accent); }
#wpaic-send {
  background: var(--wpaic-accent);
  color: #fff; border: none; border-radius: var(--wpaic-radius-sm);
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: transform .15s ease;
}
#wpaic-send:hover { transform: scale(1.08); }
#wpaic-send:disabled { opacity: .6; cursor: default; transform: none; }

#wpaic-footer {
  text-align: center;
  font-size: 10.5px;
  color: #888;
  padding: 6px 0 8px;
  background: rgba(255,255,255,0.5);
}

/* ---------- Mobile-friendly: tablets/large phones ---------- */
@media (max-width: 640px) {
  #wpaic-window {
    width: 96vw;
    right: 2vw !important;
    left: 2vw !important;
  }
}

/* ---------- Mobile-friendly: phones ---------- */
@media (max-width: 480px) {
  #wpaic-window {
    width: 96vw;
    right: 2vw !important;
    left: 2vw !important;
    height: 78vh;
    max-height: 78vh;
    bottom: 100px;
    border-radius: var(--wpaic-radius-md);
  }
  #wpaic-bubble {
    width: clamp(52px, calc(var(--wpaic-icon-size) * 0.72), 120px);
    height: clamp(52px, calc(var(--wpaic-icon-size) * 0.72), 120px);
    bottom: 16px;
  }
  #wpaic-bubble.wpaic-right { right: 14px; }
  #wpaic-bubble.wpaic-left { left: 14px; }
  #wpaic-header { padding: 10px 12px; }
  #wpaic-header .wpaic-title { font-size: 14px; }
  #wpaic-inputbar { padding: 8px; position: sticky; bottom: 0; }
  #wpaic-input { font-size: 16px; /* prevents iOS auto-zoom on focus */ }
  #wpaic-messages { padding: 10px; -webkit-overflow-scrolling: touch; }
  .wpaic-msg-bubble { max-width: 88%; }
  .wpaic-product-card { flex-wrap: nowrap; }
}

/* ---------- Mobile-friendly: very small phones ---------- */
@media (max-width: 360px) {
  #wpaic-window { height: 82vh; max-height: 82vh; bottom: 92px; }
  #wpaic-product-card img, .wpaic-product-card img { width: 52px; height: 52px; }
}