/**
 * KAI Assistant Pro — Widget CSS
 * Version: 9.0.0 — Black & Gold Premium Theme
 *
 * ─── ISOLATION STRATEGY (WoodMart conflict prevention) ───────────
 * Every selector is prefixed with #kai-pro-widget giving it a
 * specificity of (1,1,0) — beats virtually every theme rule.
 * Critical visual properties (background, color, font-family,
 * border, padding) carry !important as a second line of defence.
 * The widget runs in its own stacking context via isolation:isolate.
 *
 * ─── SPACING SYSTEM (8px grid) ───────────────────────────────────
 * 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 px
 *
 * ─── DESIGN LANGUAGE ─────────────────────────────────────────────
 * Premium · Dark / AMOLED Black · Gold Accent #c9a227
 * Single accent: gold gradient (launcher + header + CTA)
 * Reference: Claude.ai · ChatGPT · Perplexity spacing standards
 * ─────────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════
   FONT
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');


/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS  (scoped to widget — no global leakage)
   ═══════════════════════════════════════════════════════════ */
#kai-pro-widget {
  /* Brand — Gold */
  --kai-brand-600: #c9a227;
  --kai-brand-700: #a07d1a;

  /* Surfaces — Glassmorphism-compatible: semi-transparent so frosted panel shows through */
  --kai-bg:           rgba(8,8,8,0.45);       /* was #0d0d0d solid — now transparent */
  --kai-bg-2:         rgba(14,14,14,0.60);
  --kai-bot-bubble:   rgba(20,20,20,0.60);    /* was #161616 solid — translucent glass */
  --kai-user-bubble:  rgba(28,22,10,0.65);    /* warm gold-tinted translucent */

  /* Borders */
  --kai-border:       #2a2a2a;
  --kai-border-soft:  #1f1f1f;

  /* Text */
  --kai-text-1:  #f0f0f0;
  --kai-text-2:  #a0a0a0;
  --kai-text-3:  #606060;

  /* Status */
  --kai-green:   #22C55E;
  --kai-red:     #EF4444;
  --kai-amber:   #F59E0B;

  /* Typography */
  --kai-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radius */
  --kai-r-sm:   6px;
  --kai-r-md:   10px;
  --kai-r-lg:   16px;
  --kai-r-xl:   20px;
  --kai-r-pill: 9999px;

  /* Shadows */
  --kai-shadow-widget: 0 24px 72px rgba(0,0,0,0.60), 0 8px 24px rgba(0,0,0,0.40), 0 0 0 1px rgba(201,162,39,0.08);
  --kai-shadow-card:   0 1px 4px rgba(0,0,0,0.30), 0 0 0 1px rgba(0,0,0,0.20);

  /* Motion */
  --kai-spring:   cubic-bezier(0.34,1.56,0.64,1);
  --kai-ease:     cubic-bezier(0.22,1,0.36,1);

  /* Window dimensions */
  --kai-w: 400px;
  --kai-h: 660px;

  /* Internal reset */
  font-family: var(--kai-font) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  color: var(--kai-text-1) !important;
  text-align: left !important;
  direction: ltr !important;
  /* ── Root stacking context: must paint ABOVE the backdrop overlay (z-index: 2147483644)
     position+z-index create the stacking context. isolation:isolate is intentionally
     REMOVED — it created a compositing group that sandboxed the rendering, preventing
     backdrop-filter on .kai-window from seeing page content (causing solid black panel). ── */
  position: relative !important;
  z-index: 2147483645 !important;
}

/* ── Scoped box-model reset ── */
#kai-pro-widget *,
#kai-pro-widget *::before,
#kai-pro-widget *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Theme override guard: common WoodMart leaks ── */
#kai-pro-widget p   { margin: 0 !important; padding: 0 !important; line-height: inherit !important; }
#kai-pro-widget a   { color: inherit !important; text-decoration: none !important; }
#kai-pro-widget img { max-width: none !important; height: auto !important; }

/* ── SVG stretch protection: WoodMart/many themes do svg{width:100%;height:auto} ──
   This single rule defeats it for every SVG inside our widget. */
#kai-pro-widget svg {
  display: inline-block !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  max-width: unset !important;
}
/* Per-button explicit sizing so the icon attr values win */
#kai-pro-widget .kai-hbtn            svg { width: 15px !important; height: 15px !important; pointer-events: none !important; }
#kai-pro-widget .kai-btn-mic         svg { width: 16px !important; height: 16px !important; pointer-events: none !important; }
#kai-pro-widget .kai-composer-send   svg { width: 15px !important; height: 15px !important; pointer-events: none !important; }
#kai-pro-widget .kai-btn-heart       svg { width: 13px !important; height: 13px !important; pointer-events: none !important; }
#kai-pro-widget .kai-btn-compare     svg { width: 13px !important; height: 13px !important; pointer-events: none !important; }
#kai-pro-widget .kai-btn-buy         svg { width: 14px !important; height: 14px !important; pointer-events: none !important; }
#kai-pro-widget .kai-btn-view        svg { width: 13px !important; height: 13px !important; pointer-events: none !important; }
#kai-pro-widget .kai-voice-stop-btn  svg { width: 16px !important; height: 16px !important; pointer-events: none !important; }

#kai-pro-widget ul,
#kai-pro-widget ol  { list-style: none !important; margin: 0 !important; padding: 0 !important; }
#kai-pro-widget button {
  font-family: var(--kai-font) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  outline: none !important;
  line-height: 1 !important;
}


/* ═══════════════════════════════════════════════════════════
   LAUNCHER
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-launcher {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  left: auto !important;
  top: auto !important;
  z-index: 2147483646 !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 0 20px 0 14px !important;
  height: 48px !important;
  border-radius: var(--kai-r-pill) !important;

  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%) !important;
  color: #fff !important;
  border: 1.5px solid #c9a227 !important;
  outline: none !important;

  box-shadow:
    0 8px 28px rgba(201,162,39,0.35),
    0 4px 10px rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;

  transition: transform 260ms var(--kai-spring), box-shadow 260ms ease !important;
  font-family: var(--kai-font) !important;
  white-space: nowrap !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
}
#kai-pro-widget .kai-launcher:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow:
    0 14px 40px rgba(201,162,39,0.55),
    0 6px 14px rgba(0,0,0,0.60),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
#kai-pro-widget .kai-launcher:active {
  transform: scale(0.97) !important;
}

/* Launcher open state */
#kai-pro-widget .kai-launcher.open .kai-launcher-open {
  opacity: 0 !important;
  transform: scale(0.75) !important;
  pointer-events: none !important;
}
#kai-pro-widget .kai-launcher.open .kai-launcher-close-icon {
  opacity: 1 !important;
  transform: scale(1) !important;
}
#kai-pro-widget .kai-launcher.open .kai-pulse-ring {
  animation: none !important;
  opacity: 0 !important;
}

/* Pulse rings — gold */
#kai-pro-widget .kai-pulse-ring {
  position: absolute !important;
  inset: -6px !important;
  border-radius: var(--kai-r-pill) !important;
  border: 2px solid rgba(201,162,39,0.45) !important;
  pointer-events: none !important;
  animation: kaiPulse 3s ease-out infinite !important;
}
#kai-pro-widget .kai-pulse-ring--2 {
  animation-delay: 1.5s !important;
}
@keyframes kaiPulse {
  0%   { transform: scale(1);    opacity: 0.55; }
  75%  { transform: scale(1.24); opacity: 0;    }
  100% { transform: scale(1.24); opacity: 0;    }
}

/* Icon wrap */
#kai-pro-widget .kai-launcher-icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: rgba(201,162,39,0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Open-state inner content */
#kai-pro-widget .kai-launcher-open {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: opacity 180ms ease, transform 180ms ease !important;
}

#kai-pro-widget .kai-launcher-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #fff !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#kai-pro-widget .kai-dot-online {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #c9a227 !important;
  flex-shrink: 0 !important;
  animation: kaiGoldPulse 2.4s ease-in-out infinite !important;
  display: inline-block !important;
}
@keyframes kaiGoldPulse {
  0%, 100% { opacity: 1;    box-shadow: 0 0 0 0 rgba(201,162,39,0.50); }
  50%       { opacity: 0.70; box-shadow: 0 0 0 4px rgba(201,162,39,0);   }
}

#kai-pro-widget .kai-launcher-close-icon {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transform: scale(0.75) !important;
  transition: opacity 180ms ease, transform 180ms ease !important;
}


/* ═══════════════════════════════════════════════════════════
   NUDGE TOOLTIP
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-nudge {
  position: fixed !important;
  bottom: 88px !important;
  right: 28px !important;
  left: auto !important;
  z-index: 2147483645 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  border-radius: var(--kai-r-md) !important;
  background: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
  color: #fff !important;
  font-size: 12.5px !important;
  font-family: var(--kai-font) !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.50) !important;
  white-space: nowrap !important;
  max-width: 280px !important;
  opacity: 0 !important;
  transform: translateY(8px) !important;
  pointer-events: none !important;
  transition: opacity 260ms ease, transform 260ms ease !important;
}
#kai-pro-widget .kai-nudge.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
#kai-pro-widget .kai-nudge-emoji  { font-size: 17px !important; flex-shrink: 0 !important; }
#kai-pro-widget .kai-nudge-text   { flex: 1 !important; font-size: 12.5px !important; line-height: 1.4 !important; color: rgba(255,255,255,0.90) !important; }
#kai-pro-widget .kai-nudge-dismiss {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.60) !important;
  border-radius: 50% !important;
  width: 20px !important; height: 20px !important;
  font-size: 14px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background 150ms !important;
}
#kai-pro-widget .kai-nudge-dismiss:hover { background: rgba(255,255,255,0.16) !important; }
#kai-pro-widget .kai-nudge-arrow {
  position: absolute !important;
  bottom: -6px !important; right: 30px !important;
  width: 0 !important; height: 0 !important;
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-top: 7px solid #1a1a1a !important;
}


/* ═══════════════════════════════════════════════════════════
   CHAT WINDOW
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-window {
  position: fixed !important;
  bottom: 88px !important;
  right: 28px !important;
  left: auto !important;
  top: auto !important;
  z-index: 2147483645 !important;

  width: var(--kai-w) !important;
  height: var(--kai-h) !important;
  max-height: calc(100vh - 120px) !important;

  display: none !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 20px !important;

  /* ── GLASSMORPHISM: frosted dark panel ──────────────────────────────
     Layer 1: backdrop-filter blurs the page content behind the panel.
     Layer 2: semi-transparent base keeps the panel dark and readable.
     Layer 3: inner sheen gradient makes glass visible even on pure-black stores.
     Note: isolation:isolate was removed from #kai-pro-widget — it was the
     cause of the solid-black fallback (compositing group blocked the blur). */
  /* Panel glass: lighter base so the blur shows through dramatically */
  background-color: rgba(8, 8, 8, 0.52) !important;
  background-image:
    radial-gradient(ellipse at 20% 0%,   rgba(201,162,39,0.13) 0%, transparent 52%),
    radial-gradient(ellipse at 88% 100%, rgba(201,162,39,0.09) 0%, transparent 48%),
    linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.00) 40%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(0.88) !important;
          backdrop-filter: blur(32px) saturate(200%) brightness(0.88) !important;
  /* ────────────────────────────────────────────────────────────────── */

  border: 1px solid rgba(201,162,39,0.30) !important;
  box-shadow: var(--kai-shadow-widget),
              inset 0 1px 0 rgba(255,255,255,0.06),
              inset 0 -1px 0 rgba(0,0,0,0.30) !important;

  transform: translateY(18px) scale(0.97) !important;
  opacity: 0 !important;
  transition: transform 300ms var(--kai-spring), opacity 240ms ease !important;
}
#kai-pro-widget .kai-window.open {
  display: flex !important;
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
}


/* ═══════════════════════════════════════════════════════════
   HEADER  —  dark gradient with gold accent line
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-window-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 16px !important;
  height: 62px !important;
  min-height: 62px !important;
  flex-shrink: 0 !important;
  /* Glassmorphism header: slightly more opaque so the brand identity reads clearly */
  background: rgba(6, 6, 6, 0.92) !important;
  -webkit-backdrop-filter: blur(16px) !important;
          backdrop-filter: blur(16px) !important;
  border-radius: 20px 20px 0 0 !important;
  position: relative !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(201,162,39,0.22) !important;
}

/* Gold shimmer line at top */
#kai-pro-widget .kai-window-header::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,0.55), transparent) !important;
  pointer-events: none !important;
}

/* Brand block: avatar + name + status */
#kai-pro-widget .kai-header-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

#kai-pro-widget .kai-window-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(201,162,39,0.15) !important;
  border: 1px solid rgba(201,162,39,0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #c9a227 !important;
  flex-shrink: 0 !important;
}

#kai-pro-widget .kai-window-identity {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}

#kai-pro-widget .kai-window-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: -0.02em !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  line-height: 1 !important;
}

#kai-pro-widget .kai-engine-badge {
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  background: rgba(201,162,39,0.15) !important;
  color: #c9a227 !important;
  padding: 2px 6px !important;
  border-radius: var(--kai-r-pill) !important;
  border: 1px solid rgba(201,162,39,0.30) !important;
  line-height: 1.6 !important;
}

#kai-pro-widget .kai-beta-badge {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #ffffff !important;
  padding: 2px 8px !important;
  border-radius: var(--kai-r-pill) !important;
  border: none !important;
  line-height: 1.6 !important;
  box-shadow: 0 0 8px rgba(99,102,241,0.55), 0 0 2px rgba(139,92,246,0.40) !important;
  animation: kai-beta-glow 2.8s ease-in-out infinite !important;
}

@keyframes kai-beta-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(99,102,241,0.55), 0 0 2px rgba(139,92,246,0.40); }
  50%       { box-shadow: 0 0 14px rgba(99,102,241,0.85), 0 0 6px rgba(139,92,246,0.65); }
}

#kai-pro-widget .kai-window-status {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  color: rgba(255,255,255,0.45) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

#kai-pro-widget .kai-status-pulse {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #c9a227 !important;
  flex-shrink: 0 !important;
  animation: kaiGoldPulse 2.4s ease-in-out infinite !important;
}

/* Header controls — two clean icon buttons */
#kai-pro-widget .kai-header-controls {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
}

#kai-pro-widget .kai-hbtn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.06) !important;
  border: none !important;
  color: rgba(255,255,255,0.50) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease !important;
}
#kai-pro-widget .kai-hbtn:hover {
  background: rgba(201,162,39,0.16) !important;
  color: #c9a227 !important;
}
#kai-pro-widget .kai-hbtn:active {
  transform: scale(0.88) !important;
}
#kai-pro-widget .kai-hbtn--close:hover {
  background: rgba(239,68,68,0.25) !important;
  color: #FCA5A5 !important;
}

/* Thinking state badge */
#kai-pro-widget .kai-window--thinking .kai-status-label {
  color: #c9a227 !important;
}
#kai-pro-widget .kai-window--thinking .kai-status-pulse {
  background: #c9a227 !important;
}


/* ═══════════════════════════════════════════════════════════
   MESSAGES AREA
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-messages {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 24px 20px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  background: transparent !important;  /* was var(--kai-bg) — transparent lets frosted glass show */
  scroll-behavior: smooth !important;
  scrollbar-width: thin !important;
  scrollbar-color: #c9a227 transparent !important;
}
#kai-pro-widget .kai-messages::-webkit-scrollbar       { width: 3px !important; }
#kai-pro-widget .kai-messages::-webkit-scrollbar-track { background: transparent !important; }
#kai-pro-widget .kai-messages::-webkit-scrollbar-thumb { background: #c9a227 !important; border-radius: 99px !important; opacity: 0.6 !important; }

/* Spacer: pushes content to bottom until overflow kicks in */
#kai-pro-widget .kai-messages-spacer { flex: 1 !important; }


/* ═══════════════════════════════════════════════════════════
   WELCOME SCREEN
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-welcome {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 10px !important;
  padding: 8px 0 4px !important;
}

#kai-pro-widget .kai-welcome-logo {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%) !important;
  border: 1.5px solid rgba(201,162,39,0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #c9a227 !important;
  box-shadow: 0 6px 24px rgba(201,162,39,0.30) !important;
  margin-bottom: 4px !important;
}

#kai-pro-widget .kai-welcome-heading {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--kai-text-1) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
}

#kai-pro-widget .kai-welcome-sub {
  font-size: 13px !important;
  color: var(--kai-text-2) !important;
  line-height: 1.6 !important;
  max-width: 290px !important;
  font-weight: 400 !important;
}

#kai-pro-widget .kai-welcome-divider {
  width: 100% !important;
  height: 1px !important;
  background: var(--kai-border-soft) !important;
  margin: 8px 0 4px !important;
}

#kai-pro-widget .kai-welcome-prompt-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--kai-text-3) !important;
  align-self: flex-start !important;
}

/* 2×2 suggestion grid */
#kai-pro-widget .kai-suggestions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  width: 100% !important;
}

#kai-pro-widget .kai-suggestion-card {
  background: #161616 !important;
  border: 1px solid var(--kai-border) !important;
  border-radius: var(--kai-r-md) !important;
  padding: 14px 14px !important;
  cursor: pointer !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  transition: border-color 140ms, background 140ms, transform 150ms var(--kai-spring), box-shadow 150ms !important;
  font-family: var(--kai-font) !important;
  outline: none !important;
}
#kai-pro-widget .kai-suggestion-card:hover {
  border-color: rgba(201,162,39,0.50) !important;
  background: #1a1a00 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(201,162,39,0.12) !important;
}
#kai-pro-widget .kai-suggestion-card:active {
  transform: scale(0.97) !important;
}

#kai-pro-widget .kai-suggestion-icon  {
  font-size: 19px !important;
  line-height: 1 !important;
  margin-bottom: 1px !important;
}
#kai-pro-widget .kai-suggestion-title {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--kai-text-1) !important;
  line-height: 1.3 !important;
}
#kai-pro-widget .kai-suggestion-desc  {
  font-size: 10.5px !important;
  color: var(--kai-text-3) !important;
  line-height: 1.35 !important;
}

/* ═══════════════════════════════════════════════════════════
   WELCOME ACTIONS — two minimal pill chips
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-welcome-actions {
  display: flex !important;
  gap: 7px !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 4px 0 0 !important;
}
#kai-pro-widget .kai-welcome-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 14px !important;
  background: #141414 !important;
  border: 1px solid var(--kai-border) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  font-family: var(--kai-font) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--kai-text-2) !important;
  white-space: nowrap !important;
  outline: none !important;
  transition: border-color 130ms, background 130ms, color 130ms, box-shadow 130ms !important;
  -webkit-tap-highlight-color: transparent !important;
}
#kai-pro-widget .kai-welcome-action-btn:hover {
  border-color: rgba(201,162,39,0.55) !important;
  color: #c9a227 !important;
  background: rgba(201,162,39,0.06) !important;
  box-shadow: 0 0 10px rgba(201,162,39,0.10) !important;
}
#kai-pro-widget .kai-welcome-action-btn:active {
  transform: scale(0.96) !important;
}

/* Beta note on welcome panel */
#kai-pro-widget .kai-welcome-beta-note {
  margin-top: 12px !important;
  font-size: 10.5px !important;
  color: rgba(255,255,255,0.55) !important;
  background: rgba(99,102,241,0.08) !important;
  border: 1px solid rgba(99,102,241,0.22) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  text-align: center !important;
  line-height: 1.5 !important;
  max-width: 280px !important;
  font-family: var(--kai-font) !important;
}
#kai-pro-widget .kai-welcome-beta-pill {
  display: inline-block !important;
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #fff !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  padding: 1px 6px !important;
  border-radius: 99px !important;
  letter-spacing: 0.06em !important;
  vertical-align: middle !important;
  margin-right: 2px !important;
}


/* ═══════════════════════════════════════════════════════════
   MESSAGE ROWS
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-message {
  display: flex !important;
  align-items: flex-end !important;
  gap: 10px !important;
  animation: kaiMsgIn 200ms var(--kai-ease) both !important;
}
@keyframes kaiMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* User row: reverse */
#kai-pro-widget .kai-message.user {
  flex-direction: row-reverse !important;
  padding-left: 32px !important;
}

/* Bot row: leave room on right */
#kai-pro-widget .kai-message.bot {
  padding-right: 32px !important;
}

/* Avatar */
#kai-pro-widget .kai-message-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  color: #c9a227 !important;
}
#kai-pro-widget .kai-message.bot  .kai-message-avatar {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
  border: 1px solid rgba(201,162,39,0.30) !important;
}
#kai-pro-widget .kai-message.user .kai-message-avatar {
  display: none !important;   /* user bubbles: no avatar, cleaner */
}

/* Bubble wrapper */
#kai-pro-widget .kai-message-bubble {
  max-width: 80% !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  word-break: break-word !important;
  font-family: var(--kai-font) !important;
}

/* ── BOT bubble — glass card ─────────────────────── */
#kai-pro-widget .kai-message.bot .kai-message-bubble {
  background: var(--kai-bot-bubble) !important;  /* now rgba(20,20,20,0.60) */
  color: var(--kai-text-1) !important;
  padding: 12px 16px !important;
  border-radius: 4px 16px 16px 16px !important;
  border: 1px solid rgba(201,162,39,0.14) !important;
  -webkit-backdrop-filter: blur(8px) !important;
          backdrop-filter: blur(8px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* Bot prose formatting */
#kai-pro-widget .kai-message.bot .kai-message-bubble strong { font-weight: 600 !important; color: #fff !important; }
#kai-pro-widget .kai-message.bot .kai-message-bubble em     { font-style: italic !important; }
#kai-pro-widget .kai-message.bot .kai-message-bubble del    { text-decoration: line-through !important; opacity: 0.55 !important; }
#kai-pro-widget .kai-message.bot .kai-message-bubble ul {
  margin: 8px 0 4px 16px !important;
  padding: 0 !important;
  list-style: disc !important;
}
#kai-pro-widget .kai-message.bot .kai-message-bubble li {
  margin-bottom: 4px !important;
  line-height: 1.55 !important;
  list-style: disc !important;
}
#kai-pro-widget .kai-message.bot .kai-message-bubble a,
#kai-pro-widget .kai-product-link,
#kai-pro-widget .kai-url-link {
  color: #c9a227 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  font-weight: 500 !important;
  transition: color 140ms !important;
}
#kai-pro-widget .kai-message.bot .kai-message-bubble a:hover,
#kai-pro-widget .kai-product-link:hover,
#kai-pro-widget .kai-url-link:hover {
  color: #f0c040 !important;
}

/* ── USER bubble — warm gold-tinted glass card ──── */
#kai-pro-widget .kai-message.user .kai-message-bubble {
  background: var(--kai-user-bubble) !important;  /* now rgba(28,22,10,0.65) */
  color: #fff !important;
  padding: 12px 16px !important;
  border-radius: 16px 4px 16px 16px !important;
  border: 1px solid rgba(201,162,39,0.22) !important;
  border-left: 3px solid rgba(201,162,39,0.60) !important;
  -webkit-backdrop-filter: blur(8px) !important;
          backdrop-filter: blur(8px) !important;
}


/* ═══════════════════════════════════════════════════════════
   PRODUCT CARDS  —  WHITE (for clean product image display)
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-product-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 12px !important;
}

#kai-pro-widget .kai-product-card {
  display: flex !important;
  flex-direction: row !important;
  background: #FFFFFF !important;
  border: 1.5px solid rgba(201,162,39,0.25) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  min-height: 96px !important;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
  position: relative !important;
}
#kai-pro-widget .kai-product-card:hover {
  border-color: #c9a227 !important;
  box-shadow: 0 4px 20px rgba(201,162,39,0.20) !important;
  transform: translateY(-2px) !important;
}

/* ── Image column ── */
#kai-pro-widget .kai-product-img-area {
  width: 96px !important;
  min-width: 96px !important;
  background: #F7F7F7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  border-right: 1.5px solid #F0F0F0 !important;
  overflow: hidden !important;
  position: relative !important;
  flex-shrink: 0 !important;
}
#kai-pro-widget .kai-product-img-area img {
  width: 72px !important;
  height: 72px !important;
  object-fit: contain !important;
  transition: transform 300ms ease !important;
  display: block !important;
}
/* Image failed to load — onerror adds .kai-img-error, which beats display:block !important above */
#kai-pro-widget .kai-product-img-area img.kai-img-error {
  display: none !important;
}
#kai-pro-widget .kai-product-card:hover .kai-product-img-area img {
  transform: scale(1.08) !important;
}
#kai-pro-widget .kai-product-emoji-fallback {
  font-size: 36px !important;
  opacity: 0.55 !important;
  line-height: 1 !important;
}
#kai-pro-widget .kai-product-discount-badge {
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  background: #EF4444 !important;
  color: #fff !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 99px !important;
  letter-spacing: 0.03em !important;
  z-index: 1 !important;
  font-family: var(--kai-font) !important;
}

/* ── Content column ── */
#kai-pro-widget .kai-product-body {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 9px 12px 9px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  background: #FFFFFF !important;
}

/* Product name */
#kai-pro-widget .kai-product-name {
  font-size: 13px !important;
  font-weight: 650 !important;
  color: #111111 !important;
  line-height: 1.3 !important;
  margin: 0 0 2px !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  font-family: var(--kai-font) !important;
}

/* Price row */
#kai-pro-widget .kai-product-price-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
}
#kai-pro-widget .kai-product-price {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  letter-spacing: -0.025em !important;
  font-family: var(--kai-font) !important;
}
#kai-pro-widget .kai-product-price-was {
  font-size: 11.5px !important;
  color: #AAAAAA !important;
  text-decoration: line-through !important;
  font-family: var(--kai-font) !important;
}
#kai-pro-widget .kai-product-badge {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  background: rgba(201,162,39,0.12) !important;
  color: #a07d1a !important;
  padding: 2px 7px !important;
  border-radius: 99px !important;
  font-family: var(--kai-font) !important;
  border: 1px solid rgba(201,162,39,0.30) !important;
}

/* Meta row: stars + stock */
#kai-pro-widget .kai-product-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
}
#kai-pro-widget .kai-stars        { display: inline-flex !important; gap: 1px !important; align-items: center !important; }
#kai-pro-widget .kai-star         { font-size: 11px !important; line-height: 1 !important; }
#kai-pro-widget .kai-star--full   { color: #F59E0B !important; }
#kai-pro-widget .kai-star--half   { color: #F59E0B !important; opacity: 0.55 !important; }
#kai-pro-widget .kai-star--empty  { color: #DDDDDD !important; }
#kai-pro-widget .kai-rating-count {
  font-size: 10.5px !important;
  color: #888888 !important;
  font-family: var(--kai-font) !important;
}
#kai-pro-widget .kai-stock-in {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #16A34A !important;
  font-family: var(--kai-font) !important;
}
#kai-pro-widget .kai-stock-in::before {
  content: '' !important;
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #16A34A !important;
  flex-shrink: 0 !important;
}
#kai-pro-widget .kai-stock-out {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #EF4444 !important;
  font-family: var(--kai-font) !important;
}

/* ── CTA footer ── */
#kai-pro-widget .kai-product-footer {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-top: auto !important;
  padding-top: 8px !important;
}

/* Primary: View Product → gold gradient */
#kai-pro-widget .kai-btn-view {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  padding: 5px 10px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  border-radius: 7px !important;
  background: linear-gradient(135deg, #c9a227 0%, #f0c040 100%) !important;
  color: #000000 !important;
  cursor: pointer !important;
  text-align: center !important;
  text-decoration: none !important;
  gap: 4px !important;
  font-family: var(--kai-font) !important;
  border: none !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  transition: background 150ms, transform 150ms, box-shadow 150ms !important;
  box-shadow: 0 2px 8px rgba(201,162,39,0.35) !important;
}
#kai-pro-widget .kai-btn-view:hover {
  background: linear-gradient(135deg, #b8911f 0%, #d4a730 100%) !important;
  transform: translateY(-1px) !important;
  color: #000000 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(201,162,39,0.50) !important;
}

/* Secondary: cart icon square */
#kai-pro-widget .kai-btn-buy {
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  border-radius: 7px !important;
  background: #F0F0F0 !important;
  color: #333333 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-family: var(--kai-font) !important;
  border: 1.5px solid #E0E0E0 !important;
  transition: background 150ms, border-color 150ms !important;
  line-height: 1 !important;
}
#kai-pro-widget .kai-btn-buy:hover {
  background: rgba(201,162,39,0.15) !important;
  border-color: #c9a227 !important;
  color: #111111 !important;
  text-decoration: none !important;
}


/* ═══════════════════════════════════════════════════════════
   CROSS-SELL STRIP
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-crosssell-strip {
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--kai-border) !important;
}
#kai-pro-widget .kai-crosssell-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--kai-text-3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  margin-bottom: 8px !important;
}
#kai-pro-widget .kai-crosssell-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}
#kai-pro-widget .kai-crosssell-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 7px 13px !important;
  min-height: 32px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--kai-text-1) !important;
  background: #1a1a1a !important;
  border: 1px solid var(--kai-border) !important;
  border-radius: var(--kai-r-pill) !important;
  cursor: pointer !important;
  font-family: var(--kai-font) !important;
  white-space: nowrap !important;
  transition: all 140ms ease !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.20) !important;
}
#kai-pro-widget .kai-crosssell-chip:hover {
  border-color: rgba(201,162,39,0.60) !important;
  color: #c9a227 !important;
  background: #1a1a00 !important;
}


/* ═══════════════════════════════════════════════════════════
   QUIZ CARD
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-quiz-card {
  background: #161616 !important;
  border: 1px solid var(--kai-border) !important;
  border-left: 3px solid #c9a227 !important;
  border-radius: 2px var(--kai-r-md) var(--kai-r-md) var(--kai-r-md) !important;
  padding: 14px 16px !important;
  margin-top: 10px !important;
}
#kai-pro-widget .kai-quiz-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}
#kai-pro-widget .kai-quiz-icon  { font-size: 17px !important; line-height: 1 !important; }
#kai-pro-widget .kai-quiz-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--kai-text-1) !important;
  flex: 1 !important;
}
#kai-pro-widget .kai-quiz-step {
  font-size: 10px !important;
  color: #c9a227 !important;
  font-weight: 600 !important;
  background: rgba(201,162,39,0.10) !important;
  padding: 2px 8px !important;
  border-radius: var(--kai-r-pill) !important;
  border: 1px solid rgba(201,162,39,0.25) !important;
}
#kai-pro-widget .kai-quiz-question {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin-bottom: 10px !important;
  line-height: 1.4 !important;
}
#kai-pro-widget .kai-quiz-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}
#kai-pro-widget .kai-quiz-opt {
  padding: 7px 14px !important;
  border-radius: var(--kai-r-pill) !important;
  border: 1.5px solid var(--kai-border) !important;
  background: #1a1a1a !important;
  color: #c0c0c0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  font-family: var(--kai-font) !important;
  line-height: 1 !important;
  transition: all 150ms ease !important;
}
#kai-pro-widget .kai-quiz-opt:hover {
  background: #c9a227 !important;
  color: #000 !important;
  border-color: #c9a227 !important;
  transform: translateY(-1px) !important;
}
#kai-pro-widget .kai-quiz-opt.selected {
  background: #c9a227 !important;
  color: #000 !important;
  border-color: #c9a227 !important;
}
#kai-pro-widget .kai-quiz-progress {
  display: flex !important;
  gap: 5px !important;
  margin-top: 12px !important;
  justify-content: center !important;
}
#kai-pro-widget .kai-quiz-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #2a2a2a !important;
  transition: background 220ms ease, transform 220ms ease !important;
}
#kai-pro-widget .kai-quiz-dot.active {
  background: #c9a227 !important;
  transform: scale(1.5) !important;
}
#kai-pro-widget .kai-quiz-dot.done {
  background: #22C55E !important;
}


/* ═══════════════════════════════════════════════════════════
   MEMORY BANNER
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-memory-banner {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 13px !important;
  background: rgba(201,162,39,0.08) !important;
  border: 1px solid rgba(201,162,39,0.25) !important;
  border-radius: var(--kai-r-md) !important;
  font-size: 12px !important;
  color: #c9a227 !important;
  font-weight: 500 !important;
  animation: kaiMsgIn 220ms var(--kai-ease) both !important;
}
#kai-pro-widget .kai-memory-banner-icon { font-size: 13px !important; }
#kai-pro-widget .kai-memory-banner-text { flex: 1 !important; line-height: 1.4 !important; }
#kai-pro-widget .kai-memory-clear {
  font-size: 11px !important;
  color: #c9a227 !important;
  cursor: pointer !important;
  text-decoration: underline !important;
  background: none !important;
  border: none !important;
  font-family: var(--kai-font) !important;
  opacity: 0.75 !important;
}
#kai-pro-widget .kai-memory-clear:hover { opacity: 1 !important; }


/* ═══════════════════════════════════════════════════════════
   ACTION CHIPS
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-action-chips {
  display: none !important;
}
#kai-pro-widget .kai-action-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 7px 13px !important;
  min-height: 32px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--kai-text-1) !important;
  background: #1a1a1a !important;
  border: 1px solid var(--kai-border) !important;
  border-radius: var(--kai-r-pill) !important;
  cursor: pointer !important;
  font-family: var(--kai-font) !important;
  line-height: 1 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.30) !important;
  transition: all 140ms ease !important;
}
#kai-pro-widget .kai-action-chip:hover {
  border-color: rgba(201,162,39,0.60) !important;
  color: #c9a227 !important;
  background: #1a1a00 !important;
  box-shadow: 0 2px 8px rgba(201,162,39,0.15) !important;
}
#kai-pro-widget .kai-action-chip:active {
  transform: scale(0.96) !important;
}


/* ═══════════════════════════════════════════════════════════
   TYPING INDICATOR  —  3 bouncing gold dots
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-typing {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  /* Extra top padding gives the dots vertical room to bounce without being clipped */
  padding: 10px 4px 4px 4px !important;
  min-height: 28px !important;
  overflow: visible !important;
}
#kai-pro-widget .kai-typing-dot {
  display: inline-block !important;   /* Required for transform animation in all browsers */
  flex-shrink: 0 !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #c9a227 !important;
  opacity: 0.4 !important;
  /* 'both' fill-mode ensures the dot starts at its keyframe-0 state immediately */
  animation: kaiDotBounce 1.4s ease-in-out infinite both !important;
  will-change: transform, opacity !important;
}
#kai-pro-widget .kai-typing-dot:nth-child(1) { animation-delay: 0ms !important; }
#kai-pro-widget .kai-typing-dot:nth-child(2) { animation-delay: 220ms !important; }
#kai-pro-widget .kai-typing-dot:nth-child(3) { animation-delay: 440ms !important; }
/* Rolling wave: each dot rises 8px then falls back.
   Staggered delays (0 / 220 / 440 ms) produce the classic chat bounce. */
@keyframes kaiDotBounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.4; }
  30%            { transform: translateY(-8px); opacity: 1;   }
}

/* ═══════════════════════════════════════════════════════════
   CHUNK FADE-IN  —  smooth reveal of buffered token groups
   Each chunk of ~5 words fades + un-blurs in 200 ms.
   Replaces the jarring word-by-word flash.
   ═══════════════════════════════════════════════════════════ */
#kai-pro-widget .kai-stream-chunk {
  display: inline !important;
  animation: kaiChunkFadeIn 200ms ease-out both !important;
}
@keyframes kaiChunkFadeIn {
  from {
    opacity: 0;
    filter: blur(4px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}
/* Reduced-motion: skip the blur, just fade */
@media (prefers-reduced-motion: reduce) {
  @keyframes kaiChunkFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* Rate-limit countdown shown inside typing bubble */
#kai-pro-widget .kai-retry-countdown {
  font-size: 10.5px !important;
  color: #c9a227 !important;
  font-family: var(--kai-font) !important;
  font-weight: 500 !important;
  margin-top: 5px !important;
  white-space: nowrap !important;
}


/* ═══════════════════════════════════════════════════════════
   STREAMING  —  live token rendering + blinking cursor
   ═══════════════════════════════════════════════════════════ */

/* Blinking cursor — DISABLED.
   Replaced by the 3-dot bouncing indicator (_showTyping / kai-typing-dot).
   Class kept in CSS to prevent layout shifts if it appears from cached HTML. */
#kai-pro-widget .kai-stream-cursor {
  display: none !important;
}

/* Streaming bubble: gold left-border pulse while tokens arrive */
#kai-pro-widget .kai-message.kai-streaming .kai-message-bubble {
  border-left: 2px solid #c9a227 !important;
  padding-left: 10px !important;
  animation: kaiStreamPulse 2s ease-in-out infinite !important;
}
@keyframes kaiStreamPulse {
  0%, 100% { border-color: #c9a227; }
  50%       { border-color: transparent; }
}

/* "Loading product cards…" hint inside streaming bubble */
#kai-pro-widget .kai-stream-product-hint {
  display: block !important;
  font-size: 11px !important;
  color: #c9a227 !important;
  font-family: var(--kai-font) !important;
  font-weight: 500 !important;
  margin-top: 8px !important;
  opacity: 0.8 !important;
  letter-spacing: 0.01em !important;
}

/* ═══════════════════════════════════════════════════════════
   PROGRESSIVE DISCLOSURE  —  "Want to know more?" expand pill
   ═══════════════════════════════════════════════════════════ */

/* Row that holds the expand toggle, aligned with bot bubbles */
#kai-pro-widget .kai-expand-row {
  display: flex !important;
  justify-content: flex-start !important;
  padding: 4px 14px 2px 46px !important;
  margin: 0 !important;
}

/* The gold pill button itself */
#kai-pro-widget .kai-expand-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 13px !important;
  background: rgba(201,162,39,0.08) !important;
  border: 1px solid rgba(201,162,39,0.35) !important;
  border-radius: 999px !important;
  color: #c9a227 !important;
  font-size: 11.5px !important;
  font-family: var(--kai-font) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 180ms ease, border-color 180ms ease, transform 120ms ease !important;
  user-select: none !important;
}
#kai-pro-widget .kai-expand-toggle:hover {
  background: rgba(201,162,39,0.15) !important;
  border-color: rgba(201,162,39,0.6) !important;
  transform: translateY(-1px) !important;
}
#kai-pro-widget .kai-expand-chevron {
  font-size: 10px !important;
  transition: transform 300ms ease !important;
}

/* Collapsible details container */
#kai-pro-widget .kai-details-section {
  overflow: hidden !important;
  max-height: 0 !important;
  opacity: 0 !important;
  transition: max-height 360ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity    280ms ease !important;
}
#kai-pro-widget .kai-details-section.kai-details-open {
  opacity: 1 !important;
  /* max-height is set inline by JS; after animation we set it to 'none' */
}

/* ═══════════════════════════════════════════════════════════
   FLOATING "↓ New reply" STICKY PILL
   Appears when new content is below the fold so user knows
   there's more without having to scroll.
   ═══════════════════════════════════════════════════════════ */

/* Sticky wrapper inside the messages scroll container */
#kai-pro-widget .kai-new-reply-wrap {
  position: sticky !important;
  bottom: 8px !important;
  display: flex !important;
  justify-content: center !important;
  pointer-events: none !important;
  z-index: 10 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* The pill itself */
#kai-pro-widget .kai-new-reply-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 14px !important;
  background: #1a1a1a !important;
  border: 1px solid rgba(201,162,39,0.45) !important;
  border-radius: 999px !important;
  color: #c9a227 !important;
  font-size: 11.5px !important;
  font-family: var(--kai-font) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(8px) !important;
  transition: opacity 220ms ease, transform 220ms ease !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.45) !important;
  white-space: nowrap !important;
}
#kai-pro-widget .kai-new-reply-pill.kai-pill-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
#kai-pro-widget .kai-new-reply-pill:hover {
  background: #222 !important;
  border-color: rgba(201,162,39,0.7) !important;
}

/* ═══════════════════════════════════════════════════════════
   COMPOSER  —  dark input bar with gold focus
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-composer {
  padding: 7px 12px 8px !important;
  background: var(--kai-bg) !important;
  border-top: 1px solid var(--kai-border) !important;
  flex-shrink: 0 !important;
}

#kai-pro-widget .kai-composer-inner {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #1a1a1a !important;
  border: 1.5px solid #2a2a2a !important;
  border-radius: 12px !important;
  padding: 6px 8px 6px 14px !important;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
}
#kai-pro-widget .kai-composer-inner:focus-within {
  border-color: rgba(201,162,39,0.80) !important;
  box-shadow: 0 0 0 3px rgba(201,162,39,0.12) !important;
  background: #1a1a1a !important;
}

#kai-pro-widget .kai-composer-input {
  flex: 1 !important;
  font-family: var(--kai-font) !important;
  font-size: 13px !important;
  color: #f0f0f0 !important;
  background: transparent !important;
  min-height: 0 !important;
  height: auto !important;
  border: none !important;
  outline: none !important;
  resize: none !important;
  line-height: 1.45 !important;
  max-height: 56px !important;
  overflow-y: auto !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#kai-pro-widget .kai-composer-input::placeholder {
  color: #4a4a4a !important;
  font-weight: 400 !important;
}

#kai-pro-widget .kai-composer-send {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, #c9a227 0%, #f0c040 100%) !important;
  color: #000 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  flex-shrink: 0 !important;
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease !important;
  box-shadow: 0 2px 8px rgba(201,162,39,0.40) !important;
}
#kai-pro-widget .kai-composer-send:hover {
  background: linear-gradient(135deg, #b8911f 0%, #d4a730 100%) !important;
  transform: scale(1.07) !important;
  box-shadow: 0 4px 14px rgba(201,162,39,0.55) !important;
}
#kai-pro-widget .kai-composer-send:active {
  transform: scale(0.90) !important;
}
#kai-pro-widget .kai-composer-send:disabled {
  opacity: 0.30 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}


/* ═══════════════════════════════════════════════════════════
   VOICE INPUT  —  mic button + listening state
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-btn-mic {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1.5px solid #2a2a2a !important;
  color: #666666 !important;
  cursor: pointer !important;
  display: none !important;   /* hidden until JS confirms Web Speech API — use .kai-mic-enabled */
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: relative !important;
  transition: background 150ms, border-color 150ms, color 150ms, transform 150ms !important;
  padding: 0 !important;
}
/* Revealed by JS when browser supports Web Speech API */
#kai-pro-widget .kai-btn-mic.kai-mic-enabled {
  display: inline-flex !important;
}
#kai-pro-widget .kai-btn-mic:hover {
  background: #1f1f1f !important;
  border-color: #3a3a3a !important;
  color: #999999 !important;
}

/* ── Listening state — red pulsing ── */
#kai-pro-widget .kai-btn-mic.kai-mic--listening {
  background: #2a0000 !important;
  border-color: #EF4444 !important;
  color: #EF4444 !important;
  transform: scale(1.08) !important;
}

/* Ripple rings that expand outward while listening */
#kai-pro-widget .kai-btn-mic.kai-mic--listening::before,
#kai-pro-widget .kai-btn-mic.kai-mic--listening::after {
  content: '' !important;
  position: absolute !important;
  inset: -2px !important;
  border-radius: 50% !important;
  border: 2px solid #EF4444 !important;
  opacity: 0 !important;
  animation: kaiMicRipple 1.6s ease-out infinite !important;
  pointer-events: none !important;
}
#kai-pro-widget .kai-btn-mic.kai-mic--listening::after {
  animation-delay: 0.6s !important;
}
@keyframes kaiMicRipple {
  0%   { inset: -2px;  opacity: 0.55; }
  100% { inset: -14px; opacity: 0;    }
}

/* ── Waveform bars inside mic button (kept for fallback/animation) ── */
#kai-pro-widget .kai-mic-waves {
  display: none !important;
  gap: 2.5px !important;
  align-items: center !important;
  height: 16px !important;
}
#kai-pro-widget .kai-btn-mic.kai-mic--listening .kai-mic-icon  { display: none !important; }
#kai-pro-widget .kai-btn-mic.kai-mic--listening .kai-mic-waves { display: inline-flex !important; }

#kai-pro-widget .kai-mic-bar {
  width: 3px !important;
  border-radius: 99px !important;
  background: #EF4444 !important;
  animation: kaiMicBar 0.9s ease-in-out infinite !important;
}
#kai-pro-widget .kai-mic-bar:nth-child(1) { height: 5px !important;  animation-delay: 0.00s !important; }
#kai-pro-widget .kai-mic-bar:nth-child(2) { height: 10px !important; animation-delay: 0.15s !important; }
#kai-pro-widget .kai-mic-bar:nth-child(3) { height: 16px !important; animation-delay: 0.30s !important; }
#kai-pro-widget .kai-mic-bar:nth-child(4) { height: 10px !important; animation-delay: 0.45s !important; }
#kai-pro-widget .kai-mic-bar:nth-child(5) { height: 5px !important;  animation-delay: 0.60s !important; }
@keyframes kaiMicBar {
  0%, 100% { transform: scaleY(0.45); opacity: 0.55; }
  50%       { transform: scaleY(1);   opacity: 1;    }
}

/* ── Legacy hint overlay (kept for backward compat) ── */
#kai-pro-widget .kai-voice-hint { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   MODERN VOICE PANEL  —  floating card above composer
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-voice-panel {
  position: absolute !important;
  bottom: calc(100% + 6px) !important;  /* sit just above composer */
  left: 12px !important;
  right: 12px !important;
  background: #111111 !important;
  border-radius: 20px !important;
  padding: 24px 20px 20px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.60), 0 2px 12px rgba(0,0,0,0.40) !important;
  border: 1px solid rgba(239,68,68,0.20) !important;
  display: none !important;   /* hidden by default — JS adds .kai-vp-active to show */
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
  z-index: 20 !important;
}
/* JS-controlled visible state — class toggle beats the base display:none */
#kai-pro-widget .kai-voice-panel.kai-vp-active {
  display: flex !important;
  animation: kaiVoicePanelIn 220ms cubic-bezier(0.22,1,0.36,1) both !important;
}
@keyframes kaiVoicePanelIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Pulsing rings behind the mic orb */
#kai-pro-widget .kai-voice-rings {
  position: relative !important;
  width: 72px !important;
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#kai-pro-widget .kai-voice-ring {
  position: absolute !important;
  border-radius: 50% !important;
  background: rgba(239,68,68,0.12) !important;
  animation: kaiVoiceRing 2s ease-out infinite !important;
}
#kai-pro-widget .kai-voice-ring--1 { width: 72px; height: 72px; animation-delay: 0s; }
#kai-pro-widget .kai-voice-ring--2 { width: 72px; height: 72px; animation-delay: 0.6s; background: rgba(239,68,68,0.07) !important; }
#kai-pro-widget .kai-voice-ring--3 { width: 72px; height: 72px; animation-delay: 1.2s; background: rgba(239,68,68,0.04) !important; }
@keyframes kaiVoiceRing {
  0%   { transform: scale(1);   opacity: 0.9; }
  100% { transform: scale(1.9); opacity: 0;   }
}

/* Central mic orb */
#kai-pro-widget .kai-voice-orb {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  position: relative !important;
  z-index: 1 !important;
  box-shadow: 0 4px 16px rgba(239,68,68,0.40) !important;
  animation: kaiVoiceOrb 2s ease-in-out infinite !important;
}
@keyframes kaiVoiceOrb {
  0%, 100% { box-shadow: 0 4px 16px rgba(239,68,68,0.40); }
  50%       { box-shadow: 0 6px 28px rgba(239,68,68,0.65); }
}

/* Live transcript text */
#kai-pro-widget .kai-voice-transcript {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--kai-text-1) !important;
  font-family: var(--kai-font) !important;
  text-align: center !important;
  min-height: 20px !important;
  max-width: 100% !important;
  word-break: break-word !important;
  line-height: 1.4 !important;
  padding: 0 4px !important;
}
#kai-pro-widget .kai-voice-listening-label {
  font-size: 11px !important;
  color: var(--kai-text-3) !important;
  font-family: var(--kai-font) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* Stop button */
#kai-pro-widget .kai-voice-stop-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 20px !important;
  border-radius: 99px !important;
  border: 1.5px solid #2a2a2a !important;
  background: #1a1a1a !important;
  color: var(--kai-text-2) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  font-family: var(--kai-font) !important;
  cursor: pointer !important;
  transition: background 140ms, border-color 140ms, color 140ms !important;
  -webkit-tap-highlight-color: transparent !important;
}
#kai-pro-widget .kai-voice-stop-btn:hover,
#kai-pro-widget .kai-voice-stop-btn:active {
  background: #2a0000 !important;
  border-color: #EF4444 !important;
  color: #EF4444 !important;
}

/* Composer inner: set relative so voice panel can position against it */
#kai-pro-widget .kai-composer { position: relative !important; }

/* ── Real-time audio level bars (Web Audio API driven — JS sets scaleY) ── */
#kai-pro-widget .kai-voice-levels {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 32px !important;
}
#kai-pro-widget .kai-voice-level-bar {
  width: 4px !important;
  height: 32px !important;
  border-radius: 99px !important;
  background: linear-gradient(to top, #EF4444, #ff8a80) !important;
  transform: scaleY(0.15) !important;
  transform-origin: center bottom !important;
  transition: transform 80ms ease-out !important;
  display: block !important;
}


/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-window-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 6px 16px 9px !important;
  font-size: 10px !important;
  color: rgba(255,255,255,0.55) !important;
  font-weight: 400 !important;
  background: var(--kai-bg) !important;
  flex-shrink: 0 !important;
  letter-spacing: 0.01em !important;
  border-top: 1px solid var(--kai-border-soft) !important;
  font-family: var(--kai-font) !important;
}
#kai-pro-widget .kai-footer-main {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
#kai-pro-widget .kai-footer-disclaimer {
  font-size: 9.5px !important;
  color: rgba(255,255,255,0.60) !important;
  letter-spacing: 0.02em !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
}
#kai-pro-widget .kai-window-footer strong {
  font-weight: 600 !important;
  color: rgba(201,162,39,0.75) !important;
}
#kai-pro-widget .kai-footer-spark {
  color: #c9a227 !important;
  opacity: 0.65 !important;
}


/* ═══════════════════════════════════════════════════════════
   UTILITY
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ═══════════════════════════════════════════════════════════
   MESSAGE ACTIONS — copy · like · dislike
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-msg-actions {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  opacity: 0.55 !important;
  transition: opacity 180ms !important;
  padding: 2px 0 4px 36px !important;
}
#kai-pro-widget .kai-msg-actions:hover,
#kai-pro-widget .kai-msg-actions:focus-within {
  opacity: 1 !important;
}
#kai-pro-widget .kai-msg-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 13px !important;
  color: #666666 !important;
  transition: background 130ms, color 130ms !important;
  font-family: var(--kai-font) !important;
  padding: 0 !important;
  line-height: 1 !important;
}
#kai-pro-widget .kai-msg-action:hover    { background: #1f1f1f !important; color: #c0c0c0 !important; }
#kai-pro-widget .kai-msg-action.active   { color: #c9a227 !important; background: rgba(201,162,39,0.10) !important; }
#kai-pro-widget .kai-msg-action.disliked { color: #EF4444 !important; background: rgba(239,68,68,0.10) !important; }
#kai-pro-widget .kai-msg-action.copied   { color: #16A34A !important; background: rgba(22,163,74,0.10) !important; }

#kai-pro-widget .kai-msg-time {
  font-size: 9.5px !important;
  color: #505050 !important;
  padding: 0 4px !important;
  user-select: none !important;
  font-family: var(--kai-font) !important;
  align-self: center !important;
}

/* ── Error bubble with Retry button ── */
#kai-pro-widget .kai-error-msg {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
#kai-pro-widget .kai-error-icon  { font-size: 14px !important; flex-shrink: 0 !important; }
#kai-pro-widget .kai-error-text  { flex: 1 !important; min-width: 0 !important; font-size: 12.5px !important; color: #FCA5A5 !important; }
#kai-pro-widget .kai-btn-retry {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 13px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
  background: #EF4444 !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer !important;
  font-family: var(--kai-font) !important;
  transition: background 130ms !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
#kai-pro-widget .kai-btn-retry:hover { background: #DC2626 !important; color: #fff !important; }


/* ═══════════════════════════════════════════════════════════
   WISHLIST BADGE  (count on heart button in header)
   ═══════════════════════════════════════════════════════════ */

/* Ensure header buttons position badges correctly */
#kai-pro-widget .kai-hbtn { position: relative !important; }

#kai-pro-widget .kai-wishlist-badge {
  position: absolute !important;
  top: -5px !important;
  right: -5px !important;
  background: #EF4444 !important;
  color: #fff !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  min-width: 15px !important;
  height: 15px !important;
  border-radius: 99px !important;
  display: none !important;   /* hidden by default — JS adds .kai-badge-visible */
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--kai-font) !important;
  line-height: 1 !important;
  padding: 0 3px !important;
  pointer-events: none !important;
}
/* JS-controlled visible state */
#kai-pro-widget .kai-wishlist-badge.kai-badge-visible {
  display: inline-flex !important;
}

/* Heart fill animation when wishlist button is active */
#kai-pro-widget #kai-btn-wishlist.has-items svg {
  fill: rgba(239,68,68,0.20) !important;
  stroke: #EF4444 !important;
}


/* ═══════════════════════════════════════════════════════════
   PRODUCT CARD — HEART BUTTON  (save to wishlist)
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-btn-heart {
  position: absolute !important;
  top: 7px !important;
  right: 7px !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid #E4E4E4 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  color: #CCCCCC !important;
  transition: color 150ms, background 150ms, transform 150ms, border-color 150ms !important;
  z-index: 3 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-family: var(--kai-font) !important;
}
#kai-pro-widget .kai-btn-heart:hover {
  background: #fff !important;
  color: #EF4444 !important;
  transform: scale(1.12) !important;
  border-color: #FFCDD2 !important;
}
#kai-pro-widget .kai-btn-heart.wished {
  color: #EF4444 !important;
  border-color: #FFCDD2 !important;
  background: #FFF5F5 !important;
}
#kai-pro-widget .kai-btn-heart.wished:hover {
  transform: scale(1.12) !important;
}


/* ═══════════════════════════════════════════════════════════
   WISHLIST PANEL  (shown inside messages as a bot card)
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-wishlist-panel {
  background: #161616 !important;
  border-radius: 14px !important;
  border: 1.5px solid var(--kai-border) !important;
  padding: 14px !important;
  margin: 4px 0 8px !important;
  width: 100% !important;
}
#kai-pro-widget .kai-wishlist-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
}
#kai-pro-widget .kai-wishlist-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #4a4a4a !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-family: var(--kai-font) !important;
}
#kai-pro-widget .kai-wishlist-count-label {
  font-size: 11px !important;
  color: #3a3a3a !important;
  font-family: var(--kai-font) !important;
}
#kai-pro-widget .kai-wishlist-empty {
  text-align: center !important;
  padding: 16px 0 8px !important;
  color: #3a3a3a !important;
  font-size: 12.5px !important;
  font-family: var(--kai-font) !important;
}
#kai-pro-widget .kai-wishlist-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px !important;
  background: #1a1a1a !important;
  border-radius: 10px !important;
  border: 1.5px solid #2a2a2a !important;
  margin-bottom: 6px !important;
  transition: border-color 130ms !important;
}
#kai-pro-widget .kai-wishlist-item:last-child { margin-bottom: 0 !important; }
#kai-pro-widget .kai-wishlist-item:hover { border-color: rgba(201,162,39,0.45) !important; }
#kai-pro-widget .kai-wishlist-img {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
  border-radius: 7px !important;
  background: #F5F5F5 !important;
  flex-shrink: 0 !important;
  display: block !important;
}
#kai-pro-widget .kai-wishlist-img-placeholder {
  width: 42px !important;
  height: 42px !important;
  border-radius: 7px !important;
  background: #F5F5F5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}
#kai-pro-widget .kai-wishlist-body { flex: 1 !important; min-width: 0 !important; }
#kai-pro-widget .kai-wishlist-name {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--kai-text-1) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-family: var(--kai-font) !important;
  margin-bottom: 2px !important;
}
#kai-pro-widget .kai-wishlist-price {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #c9a227 !important;
  font-family: var(--kai-font) !important;
}
#kai-pro-widget .kai-wishlist-actions {
  display: flex !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
  align-items: center !important;
}
#kai-pro-widget .kai-wishlist-view {
  padding: 5px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, #c9a227 0%, #f0c040 100%) !important;
  color: #000 !important;
  text-decoration: none !important;
  font-family: var(--kai-font) !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  transition: background 130ms !important;
}
#kai-pro-widget .kai-wishlist-view:hover {
  background: linear-gradient(135deg, #b8911f 0%, #d4a730 100%) !important;
  color: #000 !important;
  text-decoration: none !important;
}
#kai-pro-widget .kai-wishlist-remove {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  background: #1f1f1f !important;
  border: 1px solid #2a2a2a !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  color: #4a4a4a !important;
  transition: background 130ms, color 130ms !important;
  padding: 0 !important;
  font-family: var(--kai-font) !important;
  line-height: 1 !important;
}
#kai-pro-widget .kai-wishlist-remove:hover {
  background: rgba(239,68,68,0.15) !important;
  color: #EF4444 !important;
  border-color: rgba(239,68,68,0.30) !important;
}


/* ═══════════════════════════════════════════════════════════
   QUICK PROMPTS  (contextual pills above composer)
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-quick-prompts {
  display: none !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  padding: 8px 14px 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  border-top: 1px solid var(--kai-border-soft) !important;
  background: var(--kai-bg-2) !important;
  max-height: 50px !important;
  opacity: 1 !important;
  transition: max-height 220ms ease, opacity 220ms ease, padding 220ms ease !important;
}
#kai-pro-widget .kai-quick-prompts::-webkit-scrollbar { display: none !important; }
#kai-pro-widget .kai-quick-prompts.kai-qp--hidden {
  max-height: 0 !important;
  opacity: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none !important;
  border-top-color: transparent !important;
}
#kai-pro-widget .kai-quick-prompt {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 12px !important;
  background: #1a1a1a !important;
  border: 1.5px solid #2a2a2a !important;
  border-radius: 99px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #888888 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  font-family: var(--kai-font) !important;
  transition: border-color 130ms, background 130ms, color 130ms !important;
}
#kai-pro-widget .kai-quick-prompt:hover {
  border-color: rgba(201,162,39,0.60) !important;
  background: #1a1a00 !important;
  color: #c9a227 !important;
}


/* ═══════════════════════════════════════════════════════════
   KAI STAR ANIMATIONS  —  always-on, elegant rotation + gold glow
   ═══════════════════════════════════════════════════════════ */

@keyframes kaiStarRotate {
  0%   { transform: rotate(0deg)   scale(1.00); }
  20%  { transform: rotate(72deg)  scale(1.10); }
  40%  { transform: rotate(144deg) scale(1.00); }
  60%  { transform: rotate(216deg) scale(1.08); }
  80%  { transform: rotate(288deg) scale(1.00); }
  100% { transform: rotate(360deg) scale(1.00); }
}

@keyframes kaiStarGlow {
  0%,100% { filter: brightness(1)    drop-shadow(0 0 0px  rgba(201,162,39,0));    }
  25%      { filter: brightness(1.40) drop-shadow(0 0 6px  rgba(201,162,39,0.70)); }
  75%      { filter: brightness(1.20) drop-shadow(0 0 4px  rgba(201,162,39,0.45)); }
}

#kai-pro-widget .kai-launcher-icon svg {
  animation:
    kaiStarRotate 9s cubic-bezier(0.4,0,0.6,1) infinite,
    kaiStarGlow   9s ease-in-out infinite !important;
  transform-origin: center !important;
  display: block !important;
}

#kai-pro-widget .kai-window-avatar svg {
  animation: kaiStarRotate 14s linear infinite !important;
  transform-origin: center !important;
  display: block !important;
  opacity: 0.95 !important;
}

#kai-pro-widget .kai-welcome-logo svg {
  animation: kaiStarRotate 11s linear infinite !important;
  transform-origin: center !important;
  display: block !important;
}

#kai-pro-widget .kai-footer-spark {
  animation: kaiStarRotate 7s linear infinite !important;
  transform-origin: center !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* ═══════════════════════════════════════════════════════════
   LAUNCHER NOTIFICATION BADGE
   Shows a pulsing red dot when a proactive message is waiting
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-launcher-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  width: 16px !important;
  height: 16px !important;
  background: #EF4444 !important;
  border: 2px solid #1a1a1a !important;
  border-radius: 50% !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #fff !important;
  display: none !important;   /* hidden by default — JS adds .kai-badge-visible to show */
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--kai-font) !important;
  animation: kaiBadgePulse 1.8s ease-in-out infinite !important;
  z-index: 10 !important;
  pointer-events: none !important;
}
/* JS-controlled visible state — class toggle triggers display:flex */
#kai-pro-widget .kai-launcher-badge.kai-badge-visible {
  display: flex !important;
}

@keyframes kaiBadgePulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0   rgba(239, 68, 68, 0.50); }
  50%       { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);    }
}

@keyframes kaiShake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-4px); }
  40%       { transform: translateX(4px); }
  60%       { transform: translateX(-3px); }
  80%       { transform: translateX(3px); }
}

#kai-pro-widget .kai-compare-bar.kai-compare-bar--shake {
  animation: kaiShake 0.45s ease !important;
}


/* ═══════════════════════════════════════════════════════════
   COMPARE BAR — floating strip above quick-prompts / composer
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-compare-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  background: linear-gradient(135deg, #1a1500 0%, #2a2000 100%) !important;
  border-top: 1px solid rgba(201,162,39,0.20) !important;
  color: #c9a227 !important;
  font-family: var(--kai-font) !important;
  max-height: 48px !important;
  overflow: hidden !important;
  opacity: 1 !important;
  transition: max-height 240ms ease, opacity 240ms ease, padding 240ms ease !important;
}

#kai-pro-widget .kai-compare-bar.kai-compare-bar--hidden {
  max-height: 0 !important;
  opacity: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none !important;
}

#kai-pro-widget .kai-compare-bar-icon { font-size: 14px !important; flex-shrink: 0 !important; }

#kai-pro-widget .kai-compare-bar-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#kai-pro-widget .kai-compare-go {
  flex-shrink: 0 !important;
  background: rgba(201,162,39,0.15) !important;
  border: 1px solid rgba(201,162,39,0.35) !important;
  border-radius: 8px !important;
  color: #c9a227 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  font-family: var(--kai-font) !important;
  padding: 4px 10px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 130ms !important;
}
#kai-pro-widget .kai-compare-go:hover { background: rgba(201,162,39,0.25) !important; }

#kai-pro-widget .kai-compare-clear {
  flex-shrink: 0 !important;
  background: transparent !important;
  border: none !important;
  color: rgba(201,162,39,0.50) !important;
  font-size: 14px !important;
  cursor: pointer !important;
  padding: 2px 4px !important;
  font-family: var(--kai-font) !important;
  line-height: 1 !important;
  transition: color 130ms !important;
}
#kai-pro-widget .kai-compare-clear:hover { color: #c9a227 !important; }


/* ═══════════════════════════════════════════════════════════
   COMPARE BUTTON on product cards  (sits left of heart)
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-btn-compare {
  position: absolute !important;
  top: 8px !important;
  right: 36px !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.92) !important;
  border: 1.5px solid #E0E0E0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: border-color 130ms, background 130ms, transform 130ms !important;
  z-index: 3 !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10) !important;
}
#kai-pro-widget .kai-btn-compare:hover {
  background: rgba(201,162,39,0.15) !important;
  border-color: #c9a227 !important;
  transform: scale(1.1) !important;
}
#kai-pro-widget .kai-btn-compare.in-compare {
  background: #c9a227 !important;
  border-color: #c9a227 !important;
  color: #000 !important;
}


/* ═══════════════════════════════════════════════════════════
   WISHLIST PANEL — rendered as bot message
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-wishlist-panel-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--kai-text-1) !important;
  margin-bottom: 10px !important;
  font-family: var(--kai-font) !important;
}

#kai-pro-widget .kai-wishlist-item-img {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  background: #F5F5F5 !important;
  flex-shrink: 0 !important;
}

#kai-pro-widget .kai-wishlist-item-emoji {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  background: #F5F5F5 !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
}

#kai-pro-widget .kai-wishlist-item-info {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 0 8px !important;
}

#kai-pro-widget .kai-wishlist-item-name {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--kai-text-1) !important;
  font-family: var(--kai-font) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 3px !important;
}

#kai-pro-widget .kai-wishlist-item-price {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #c9a227 !important;
  font-family: var(--kai-font) !important;
}

#kai-pro-widget .kai-wishlist-item-actions {
  display: flex !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
  align-items: center !important;
}

#kai-pro-widget .kai-wishlist-view-btn {
  padding: 5px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: linear-gradient(135deg, #c9a227 0%, #f0c040 100%) !important;
  color: #000 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-family: var(--kai-font) !important;
  white-space: nowrap !important;
  transition: background 130ms !important;
  display: inline-flex !important;
  align-items: center !important;
}

#kai-pro-widget .kai-wishlist-view-btn:hover {
  background: linear-gradient(135deg, #b8911f 0%, #d4a730 100%) !important;
  text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════
   PAGE CONTEXT CHIP  — product thumbnail in welcome screen
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-page-ctx-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(201,162,39,0.07) !important;
  border: 1.5px solid rgba(201,162,39,0.25) !important;
  border-radius: 12px !important;
  padding: 6px 12px 6px 8px !important;
  margin: 8px 0 0 !important;
  max-width: 100% !important;
}

#kai-pro-widget .kai-page-ctx-chip img {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
  border-radius: 6px !important;
  background: #fff !important;
  flex-shrink: 0 !important;
}

#kai-pro-widget .kai-page-ctx-chip span {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--kai-text-1) !important;
  font-family: var(--kai-font) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 !important;
  min-width: 0 !important;
}

#kai-pro-widget .kai-page-ctx-chip strong {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #c9a227 !important;
  font-family: var(--kai-font) !important;
  flex-shrink: 0 !important;
}


/* ═══════════════════════════════════════════════════════════
   GLOBAL TOUCH OPTIMISATION  (all screen sizes)
   ─ Eliminates tap flash, improves scroll, touch targets
   ═══════════════════════════════════════════════════════════ */

/* Suppress Android tap flash on all interactive elements */
#kai-pro-widget button,
#kai-pro-widget a,
#kai-pro-widget [role="button"] {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;   /* no 300ms delay */
}

/* Smooth momentum scroll in message area on iOS */
#kai-pro-widget .kai-messages {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* Action chips: horizontal scroll strip on mobile, no ugly wrap */
#kai-pro-widget .kai-action-chips {
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  scroll-snap-type: x mandatory !important;
}
#kai-pro-widget .kai-action-chips::-webkit-scrollbar { display: none !important; }
#kai-pro-widget .kai-action-chip { scroll-snap-align: start !important; flex-shrink: 0 !important; }

/* Quick prompts: same horizontal scroll treatment */
#kai-pro-widget .kai-quick-prompts {
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
#kai-pro-widget .kai-quick-prompts::-webkit-scrollbar { display: none !important; }
#kai-pro-widget .kai-quick-prompt { flex-shrink: 0 !important; }

/* Touch active states (finger-down visual feedback) */
#kai-pro-widget .kai-suggestion-card:active,
#kai-pro-widget .kai-quick-prompt:active,
#kai-pro-widget .kai-action-chip:active  { opacity: 0.72 !important; transform: scale(0.96) !important; }
#kai-pro-widget .kai-btn-send:active     { transform: scale(0.88) !important; }
#kai-pro-widget .kai-btn-mic:active      { transform: scale(0.88) !important; }
#kai-pro-widget .kai-launcher:active     { transform: scale(0.93) !important; }


/* ═══════════════════════════════════════════════════════════
   TABLET  641px – 900px  —  wider panel, floating window
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 641px) and (max-width: 900px) {

  #kai-pro-widget .kai-window {
    width: 380px !important;
    max-width: 380px !important;
    height: 580px !important;
  }

  /* Nudge tooltip: slightly wider */
  #kai-pro-widget #kai-nudge,
  #kai-pro-widget .kai-nudge {
    max-width: 260px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   MOBILE BACKDROP  — dim overlay behind the bottom sheet
   ═══════════════════════════════════════════════════════════ */

#kai-mobile-backdrop {
  display: none;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.55) !important;
  z-index: 2147483644 !important;   /* just below the widget */
  opacity: 0 !important;
  transition: opacity 300ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
#kai-mobile-backdrop.kai-backdrop-visible {
  opacity: 1 !important;
}


/* ═══════════════════════════════════════════════════════════
   MOBILE  ≤ 640px  — Full-height bottom-sheet above site nav
   Nav bar height: ~60px  |  Tested: iOS Safari + Android Chrome
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ── CSS variable for site bottom-nav height (easy to tune) ── */
  #kai-pro-widget { --kai-nav-h: 60px; }

  /* ── Launcher: floats above the nav bar ── */
  #kai-pro-widget .kai-launcher {
    bottom: calc(var(--kai-nav-h) + 14px) !important;  /* 74px from bottom */
    right: 16px !important;
    transition: opacity 220ms ease, transform 220ms ease, bottom 220ms ease !important;
  }

  /* ── Hide launcher while chat is open — header has its own close button ── */
  #kai-pro-widget .kai-launcher.open {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.7) !important;
  }

  /* ── Nudge tooltip: above the launcher ── */
  #kai-pro-widget #kai-nudge,
  #kai-pro-widget .kai-nudge {
    bottom: calc(var(--kai-nav-h) + 82px) !important;
    right: 16px !important;
    max-width: calc(100vw - 96px) !important;
  }

  /* ── Chat window: full height above the nav bar ── */
  #kai-pro-widget .kai-window {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    /* Sit flush on top of the nav bar */
    bottom: var(--kai-nav-h) !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Fill every pixel above the nav — dvh adjusts when keyboard opens */
    height: calc(100svh - var(--kai-nav-h)) !important;
    height: calc(100dvh - var(--kai-nav-h)) !important;
    max-height: calc(100dvh - var(--kai-nav-h)) !important;
    border-radius: 20px 20px 0 0 !important;
    transform: translateY(calc(100% + var(--kai-nav-h))) !important;
    opacity: 1 !important;
    box-shadow: 0 -4px 40px rgba(0,0,0,0.65), 0 -1px 0 rgba(201,162,39,0.12) !important;
    transition: transform 340ms cubic-bezier(0.32, 0.72, 0, 1) !important;
  }
  #kai-pro-widget .kai-window.open {
    transform: translateY(0) !important;
  }
  /* Swipe drag in-progress: no transition so it follows finger instantly */
  #kai-pro-widget .kai-window.kai-dragging {
    transition: none !important;
  }

  /* ── Header: matches sheet corners + drag handle ── */
  #kai-pro-widget .kai-window-header {
    border-radius: 20px 20px 0 0 !important;
    padding-top: 8px !important;
    cursor: grab !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }
  /* Drag pill handle */
  #kai-pro-widget .kai-window-header::before {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 4px !important;
    border-radius: 99px !important;
    background: rgba(201,162,39,0.40) !important;
    margin: 0 auto 10px !important;
    flex-shrink: 0 !important;
  }

  /* ── All header action buttons: 44px tap targets (Apple HIG) ── */
  #kai-pro-widget .kai-window-header button,
  #kai-pro-widget .kai-window-header [role="button"] {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── Messages area: fills available space cleanly ── */
  #kai-pro-widget .kai-messages {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    padding: 14px 14px 8px !important;
  }

  /* ── Message bubbles: word-wrap for long product names / URLs ── */
  #kai-pro-widget .kai-message-bubble {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* ── Composer: no extra padding needed (we're above the nav) ── */
  #kai-pro-widget .kai-composer {
    padding: 8px 12px !important;
    /* Still respect iOS home indicator if nav doesn't cover it */
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── Composer input: 16px prevents iOS auto-zoom on focus ── */
  #kai-pro-widget .kai-composer-input {
    font-size: 16px !important;
    max-height: 120px !important;  /* cap growth so messages stay visible */
  }

  /* ── Send + Mic: full 44px tap targets ── */
  #kai-pro-widget .kai-btn-send,
  #kai-pro-widget .kai-btn-mic {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
  }

  /* ── Action chips: edge breathing room ── */
  #kai-pro-widget .kai-action-chips {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* ── Product image: slightly smaller on phone ── */
  #kai-pro-widget .kai-product-img-area {
    width: 80px !important;
    min-width: 80px !important;
  }
  #kai-pro-widget .kai-product-img-area img {
    width: 60px !important;
    height: 60px !important;
  }

  /* ── Compare bar: wrap on narrow screens ── */
  #kai-pro-widget .kai-compare-bar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 12px !important;
  }
  #kai-pro-widget .kai-compare-bar-label {
    flex: 1 1 100% !important;
  }

  /* ── Welcome suggestions: pill-style, no grid needed ── */
  #kai-pro-widget .kai-suggestions {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  #kai-pro-widget .kai-suggestion-card {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
  }
  #kai-pro-widget .kai-suggestion-icon {
    font-size: 22px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }
  #kai-pro-widget .kai-suggestion-desc { display: none !important; }

  /* ── Wishlist panel: tighter spacing ── */
  #kai-pro-widget .kai-wishlist-item {
    padding: 8px 0 !important;
    gap: 8px !important;
  }
  #kai-pro-widget .kai-wishlist-item-img {
    width: 44px !important;
    height: 44px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   VERY SMALL SCREENS  ≤ 380px  —  e.g. iPhone SE, Moto G
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 380px) {

  /* Product cards: stack image above body */
  #kai-pro-widget .kai-product-card {
    flex-direction: column !important;
  }
  #kai-pro-widget .kai-product-img-area {
    width: 100% !important;
    min-width: 100% !important;
    height: 120px !important;
    border-radius: var(--kai-r-lg) var(--kai-r-lg) 0 0 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(201,162,39,0.15) !important;
  }
  #kai-pro-widget .kai-product-img-area img {
    width: 90px !important;
    height: 90px !important;
  }
  #kai-pro-widget .kai-product-body {
    padding: 8px 10px !important;
  }
  #kai-pro-widget .kai-product-price,
  #kai-pro-widget .kai-product-regular { font-size: 13px !important; }
  #kai-pro-widget .kai-product-name    { font-size: 12.5px !important; }

  /* Header: hide subtitle on tiny screens to save height */
  #kai-pro-widget .kai-header-sub { display: none !important; }

  /* Mic button: keep visible on small screens — tap target is 44px, fits fine */
  #kai-pro-widget .kai-btn-mic.kai-mic-enabled { display: inline-flex !important; }
}


@media (prefers-reduced-motion: reduce) {
  #kai-pro-widget .kai-launcher,
  #kai-pro-widget .kai-window,
  #kai-pro-widget .kai-message,
  #kai-pro-widget .kai-product-card,
  #kai-pro-widget .kai-suggestion-card {
    transition: none !important;
    animation: none !important;
  }
  #kai-pro-widget .kai-launcher-icon svg,
  #kai-pro-widget .kai-window-avatar svg,
  #kai-pro-widget .kai-welcome-logo svg,
  #kai-pro-widget .kai-footer-spark,
  #kai-pro-widget .kai-pulse-ring,
  #kai-pro-widget .kai-dot-online,
  #kai-pro-widget .kai-status-pulse,
  #kai-pro-widget .kai-typing-dot {
    animation: none !important;
  }
  /* Voice-specific reduced motion overrides */
  #kai-pro-widget .kai-voice-ring { animation: none !important; opacity: 0.15 !important; }
  #kai-pro-widget .kai-voice-orb { animation: none !important; box-shadow: 0 4px 16px rgba(239,68,68,0.40) !important; }
  #kai-pro-widget .kai-voice-panel.kai-vp-active { animation: none !important; }
  #kai-pro-widget .kai-btn-mic.kai-mic--listening::before,
  #kai-pro-widget .kai-btn-mic.kai-mic--listening::after { animation: none !important; }
  #kai-pro-widget .kai-mic-bar { animation: none !important; transform: scaleY(0.6) !important; }
  #kai-pro-widget .kai-voice-level-bar { transition: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   PRODUCT CAROUSEL  — premium horizontal swipeable shelf
   Better than Amazon: snap scrolling, gold accents, overlay
   actions, keyboard nav, dot indicators, drag + touch support
   ═══════════════════════════════════════════════════════════ */

#kai-pro-widget .kai-product-carousel {
  position: relative !important;
  margin-top: 12px !important;
  width: 100% !important;
  user-select: none !important;
}

/* ── Header row: label + count ── */
#kai-pro-widget .kai-carousel-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
  padding: 0 2px !important;
}
#kai-pro-widget .kai-carousel-title {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: #c9a227 !important;
  font-family: var(--kai-font) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
#kai-pro-widget .kai-carousel-count {
  font-size: 10.5px !important;
  color: #666666 !important;
  font-family: var(--kai-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* ── Track: the horizontal scrollable row ── */
#kai-pro-widget .kai-carousel-track {
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 4px 2px 14px 2px !important;
  cursor: grab !important;
  outline: none !important;
}
#kai-pro-widget .kai-carousel-track::-webkit-scrollbar { display: none !important; }
#kai-pro-widget .kai-carousel-track.kai-dragging {
  cursor: grabbing !important;
  scroll-snap-type: none !important;
}

/* ── Individual card ── */
#kai-pro-widget .kai-carousel-card {
  flex-shrink: 0 !important;
  width: 165px !important;
  min-width: 165px !important;
  scroll-snap-align: start !important;
  background: #FFFFFF !important;
  border-radius: 16px !important;
  border: 1.5px solid rgba(201,162,39,0.18) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition:
    border-color 180ms ease,
    box-shadow   200ms ease,
    transform    220ms var(--kai-spring) !important;
  position: relative !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.06),
    0 4px 16px rgba(0,0,0,0.12) !important;
}
#kai-pro-widget .kai-carousel-card:hover {
  border-color: #c9a227 !important;
  box-shadow:
    0 4px 8px rgba(0,0,0,0.10),
    0 12px 32px rgba(201,162,39,0.22),
    0 0 0 1px rgba(201,162,39,0.12) !important;
  transform: translateY(-5px) !important;
}

/* ── Card: image area ── */
#kai-pro-widget .kai-carousel-card-img {
  width: 100% !important;
  height: 145px !important;
  background: linear-gradient(160deg, #fafafa 0%, #f3f3f3 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  position: relative !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  flex-shrink: 0 !important;
}
#kai-pro-widget .kai-carousel-card-img img {
  width: 108px !important;
  height: 108px !important;
  object-fit: contain !important;
  transition: transform 340ms cubic-bezier(0.34,1.56,0.64,1) !important;
  display: block !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12)) !important;
}
#kai-pro-widget .kai-carousel-card:hover .kai-carousel-card-img img {
  transform: scale(1.12) translateY(-2px) !important;
}
#kai-pro-widget .kai-carousel-card-img img.kai-img-error {
  display: none !important;
}
#kai-pro-widget .kai-carousel-emoji-fallback {
  font-size: 52px !important;
  line-height: 1 !important;
  opacity: 0.50 !important;
  filter: grayscale(20%) !important;
}

/* Discount badge on image */
#kai-pro-widget .kai-carousel-discount-badge {
  position: absolute !important;
  top: 7px !important;
  left: 7px !important;
  background: #EF4444 !important;
  color: #fff !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 99px !important;
  letter-spacing: 0.04em !important;
  font-family: var(--kai-font) !important;
  z-index: 2 !important;
}

/* Overlay action buttons (heart + compare) slide in on hover */
#kai-pro-widget .kai-carousel-card-overlay {
  position: absolute !important;
  top: 7px !important;
  right: 7px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  opacity: 0 !important;
  transform: translateX(8px) !important;
  transition: opacity 160ms ease, transform 160ms ease !important;
  z-index: 3 !important;
}
#kai-pro-widget .kai-carousel-card:hover .kai-carousel-card-overlay {
  opacity: 1 !important;
  transform: translateX(0) !important;
}
/* Reset absolute positioning from the base .kai-btn-heart / .kai-btn-compare rules */
#kai-pro-widget .kai-carousel-card-overlay .kai-btn-heart,
#kai-pro-widget .kai-carousel-card-overlay .kai-btn-compare {
  position: static !important;
  top: auto !important;
  right: auto !important;
  width: 24px !important;
  height: 24px !important;
}

/* ── Card: content body ── */
#kai-pro-widget .kai-carousel-card-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 11px 12px 11px !important;
  gap: 5px !important;
  background: #FFFFFF !important;
}

#kai-pro-widget .kai-carousel-card-name {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-family: var(--kai-font) !important;
  min-height: 32px !important;  /* keep cards same height */
  letter-spacing: -0.01em !important;
}

#kai-pro-widget .kai-carousel-card-price-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}
#kai-pro-widget .kai-carousel-card-price {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #111111 !important;
  letter-spacing: -0.03em !important;
  font-family: var(--kai-font) !important;
  line-height: 1 !important;
}
#kai-pro-widget .kai-carousel-card-price-was {
  font-size: 10px !important;
  color: #AAAAAA !important;
  text-decoration: line-through !important;
  font-family: var(--kai-font) !important;
}
#kai-pro-widget .kai-carousel-sale-badge {
  font-size: 8px !important;
  font-weight: 700 !important;
  background: rgba(201,162,39,0.12) !important;
  color: #a07d1a !important;
  padding: 1px 5px !important;
  border-radius: 99px !important;
  border: 1px solid rgba(201,162,39,0.28) !important;
  font-family: var(--kai-font) !important;
}

#kai-pro-widget .kai-carousel-card-meta {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-top: 2px !important;
}
#kai-pro-widget .kai-carousel-stock-dot {
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #16A34A !important;
  flex-shrink: 0 !important;
}
#kai-pro-widget .kai-carousel-stock-dot.out {
  background: #EF4444 !important;
}

/* ── CTA row: View + Cart ── */
#kai-pro-widget .kai-carousel-card-cta {
  display: flex !important;
  gap: 6px !important;
  margin-top: auto !important;
  padding-top: 9px !important;
}
#kai-pro-widget .kai-carousel-btn-view {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 7px 6px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  background: #111111 !important;
  color: #f0c040 !important;
  text-decoration: none !important;
  font-family: var(--kai-font) !important;
  white-space: nowrap !important;
  letter-spacing: 0.02em !important;
  transition: background 150ms, transform 150ms, box-shadow 150ms, color 150ms !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35) !important;
  border: 1.5px solid rgba(201,162,39,0.40) !important;
}
#kai-pro-widget .kai-carousel-btn-view:hover {
  background: #1f1f1f !important;
  border-color: #c9a227 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45) !important;
  color: #f0c040 !important;
  text-decoration: none !important;
}
#kai-pro-widget .kai-carousel-btn-cart {
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0 !important;
  border-radius: 8px !important;
  background: rgba(240,192,64,0.10) !important;
  border: 1.5px solid rgba(201,162,39,0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #b8911f !important;
  transition: background 140ms, border-color 140ms, color 140ms !important;
  padding: 0 !important;
  text-decoration: none !important;
}
#kai-pro-widget .kai-carousel-btn-cart:hover {
  background: rgba(201,162,39,0.22) !important;
  border-color: #c9a227 !important;
  color: #8a6a10 !important;
  text-decoration: none !important;
}

/* ── Navigation arrows ── */
#kai-pro-widget .kai-carousel-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(calc(-50% - 12px)) !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #1a1a1a !important;
  border: 1.5px solid rgba(201,162,39,0.45) !important;
  color: #c9a227 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 5 !important;
  opacity: 0 !important;
  transition:
    opacity     180ms ease,
    background  140ms ease,
    border-color 140ms ease,
    transform   180ms var(--kai-spring) !important;
  box-shadow: 0 3px 14px rgba(0,0,0,0.50) !important;
  padding: 0 !important;
  font-family: var(--kai-font) !important;
}
#kai-pro-widget .kai-product-carousel:hover .kai-carousel-arrow:not(:disabled) {
  opacity: 1 !important;
}
#kai-pro-widget .kai-carousel-arrow:hover {
  background: rgba(201,162,39,0.22) !important;
  border-color: #c9a227 !important;
  transform: translateY(calc(-50% - 12px)) scale(1.12) !important;
}
#kai-pro-widget .kai-carousel-arrow:active {
  transform: translateY(calc(-50% - 12px)) scale(0.95) !important;
}
#kai-pro-widget .kai-carousel-arrow:disabled {
  opacity: 0 !important;
  pointer-events: none !important;
}
#kai-pro-widget .kai-carousel-prev { left: -12px !important; }
#kai-pro-widget .kai-carousel-next { right: -12px !important; }

/* ── Mobile: arrows always visible (no hover state on touch devices) ──
   On desktop arrows appear on hover. On mobile hover never fires so
   arrows are permanently invisible — users can't tell more cards exist.
   This media query forces arrows visible and enlarges tap targets. */
@media (hover: none) and (pointer: coarse) {
  #kai-pro-widget .kai-carousel-arrow:not(:disabled) {
    opacity: 1 !important;
    width: 32px !important;
    height: 32px !important;
  }
  /* Push prev/next inward so they don't clip the widget edge on small screens */
  #kai-pro-widget .kai-carousel-prev { left: -8px !important; }
  #kai-pro-widget .kai-carousel-next { right: -8px !important; }
  /* Enlarge dot tap targets for fingers */
  #kai-pro-widget .kai-carousel-dot {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    max-height: 8px !important;
  }
}

/* ── Dot indicators ── */
#kai-pro-widget .kai-carousel-dots {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 2px !important;
}
#kai-pro-widget .kai-carousel-dot {
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  min-width: 6px !important;
  min-height: 6px !important;
  max-height: 6px !important;
  border-radius: 99px !important;
  background: rgba(100,100,100,0.45) !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: background 220ms ease, width 240ms var(--kai-spring) !important;
  flex-shrink: 0 !important;
  box-sizing: content-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
#kai-pro-widget .kai-carousel-dot.active {
  background: #c9a227 !important;
  width: 20px !important;
  min-width: 20px !important;
}
#kai-pro-widget .kai-carousel-dot:hover:not(.active) {
  background: rgba(201,162,39,0.55) !important;
}

/* Touch devices: hide arrows (swipe is enough) */
@media (hover: none) {
  #kai-pro-widget .kai-carousel-arrow { display: none !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #kai-pro-widget .kai-carousel-card,
  #kai-pro-widget .kai-carousel-arrow,
  #kai-pro-widget .kai-carousel-dot {
    transition: none !important;
    animation: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   EXPAND BUTTON  —  dual-icon toggle (expand / compress)
   ═══════════════════════════════════════════════════════════ */

/* Compress icon hidden by default */
#kai-pro-widget #kai-btn-expand .kai-icon-compress {
  display: none !important;
}
/* In immersive mode: swap icons */
#kai-pro-widget #kai-btn-expand.kai-btn-expand--active .kai-icon-expand {
  display: none !important;
}
#kai-pro-widget #kai-btn-expand.kai-btn-expand--active .kai-icon-compress {
  display: inline-flex !important;
}
/* Gold tint when immersive is active */
#kai-pro-widget #kai-btn-expand.kai-btn-expand--active {
  background: rgba(201,162,39,0.18) !important;
  color: #c9a227 !important;
}
/* Hide expand button on mobile — widget is already full-screen there */
@media (max-width: 640px) {
  #kai-pro-widget #kai-btn-expand { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   IMMERSIVE MODE  —  full-width centered overlay panel
   ═══════════════════════════════════════════════════════════ */

/* Backdrop: dimmed + blurred page behind the immersive panel */
#kai-immersive-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.65) !important;
  -webkit-backdrop-filter: blur(4px) !important;
          backdrop-filter: blur(4px) !important;
  z-index: 2147483644 !important;
  display: none !important;
  opacity: 0 !important;
  transition: opacity 320ms ease !important;
}
#kai-immersive-backdrop.kai-ib-visible {
  opacity: 1 !important;
}

/* Immersive panel: centered, 80% wide, tall */
#kai-pro-widget .kai-window.kai-immersive.open {
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  top: 50% !important;
  transform: translateX(-50%) translateY(-50%) !important;

  width: min(82vw, 940px) !important;
  height: min(88vh, 860px) !important;
  max-height: min(88vh, 860px) !important;

  border-radius: 24px !important;
  border: 1px solid rgba(201,162,39,0.35) !important;
  box-shadow:
    0 40px 120px rgba(0,0,0,0.82),
    0 8px 32px rgba(0,0,0,0.50),
    0 0 0 1px rgba(201,162,39,0.12),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;

  /* Entry animation — scale+fade from center */
  animation: kaiImmersiveIn 380ms var(--kai-spring) forwards !important;
}
/* Exit: scale + fade out */
#kai-pro-widget .kai-window.kai-immersive-out {
  animation: kaiImmersiveOut 280ms var(--kai-ease) forwards !important;
  /* Keep the centered position during exit animation */
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  top: 50% !important;
}

@keyframes kaiImmersiveIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) scale(0.88);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
  }
}
@keyframes kaiImmersiveOut {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) scale(0.92);
  }
}

/* Wider border radius on header/footer in immersive mode */
#kai-pro-widget .kai-window.kai-immersive .kai-window-header {
  border-radius: 24px 24px 0 0 !important;
}
#kai-pro-widget .kai-window.kai-immersive .kai-composer {
  border-radius: 0 0 24px 24px !important;
}

/* Don't show immersive mode on tablets / narrow screens */
@media (max-width: 900px) {
  #kai-pro-widget .kai-window.kai-immersive.open {
    width: calc(100vw - 32px) !important;
    height: calc(100vh - 48px) !important;
    max-height: calc(100vh - 48px) !important;
    border-radius: 16px !important;
  }
}