/* Shop AI Chat Widget Styles */

/* ============================================================================
   CSS ISOLATION: Reset inherited styles from Shopify themes

   This reset ensures the chat widget renders consistently across all Shopify
   themes by neutralizing common inherited styles that cause conflicts.

   Common theme patterns that cause issues:
   - button { all: unset; } or button { background: transparent !important; }
   - svg { width: 100% !important; }
   - input, textarea { border: 1px solid #ccc !important; }
   - * { box-sizing: border-box; } (usually fine but can conflict)
   ============================================================================ */

/* Reset for all elements inside our widget */
.shop-ai-chat-container,
.shop-ai-chat-container *,
.shop-ai-chat-container *::before,
.shop-ai-chat-container *::after {
  box-sizing: border-box !important;
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif) !important;
}

/* Reset button styles - themes often override these globally */
.shop-ai-chat-container button {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  text-align: center !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  background-image: none !important;
}

/* Reset SVG styles - many themes set svg { width: 100% } */
.shop-ai-chat-container svg {
  overflow: visible !important;
  vertical-align: middle !important;
}

/* Reset link styles inside widget */
.shop-ai-chat-container a {
  background-color: transparent !important;
}

.shop-ai-chat-container {
  /* CSS Variables for customization */
  --bubble-size: 60px;
  --bubble-color: #667eea;
  --window-width: 380px;
  --window-height: 600px;
  --border-radius: 16px;
  --header-color: #667eea;
  --header-text-color: #ffffff;
  --background-color: #f9fafb;
  --user-message-color: #667eea;
  --bot-message-color: #ffffff;
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  position: fixed !important;
  bottom: 20px;
  right: 20px;
  /* Very high z-index with !important to ensure chat widget appears above
     ALL third-party overlays including Pandectes GDPR, cookie banners, etc.
     Using 2147483647 (max 32-bit int) with !important to force precedence */
  z-index: 2147483647 !important;
  font-family: var(--font-family);
  pointer-events: none;
  /*
   * IMPORTANT: Font-smoothing removed to prevent affecting page-wide rendering
   * The high z-index creates a stacking context, and font-smoothing here
   * can cause images/text underneath to appear tinted or less crisp
   * Apply font-smoothing only to specific child elements if needed
   */
}

.shop-ai-chat-container * {
  pointer-events: auto;
}

.shop-ai-chat-container.position-bottom-left {
  right: auto;
  left: 20px;
}

/* Chat Bubble */
.shop-ai-chat-bubble {
  width: var(--bubble-size);
  height: var(--bubble-size);
  border-radius: calc(var(--bubble-size) / 2);
  background: var(--bubble-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Bubble shapes */
.shop-ai-chat-bubble[data-shape="circle"] {
  border-radius: 50%;
}

.shop-ai-chat-bubble[data-shape="rounded-square"] {
  border-radius: 20%;
}

.shop-ai-chat-bubble[data-shape="square"] {
  border-radius: 8px;
}

.shop-ai-chat-bubble:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);
}

.shop-ai-chat-bubble svg {
  width: calc(var(--bubble-size) * 0.47) !important;
  height: calc(var(--bubble-size) * 0.47) !important;
  min-width: calc(var(--bubble-size) * 0.47) !important;
  min-height: calc(var(--bubble-size) * 0.47) !important;
  max-width: calc(var(--bubble-size) * 0.47) !important;
  max-height: calc(var(--bubble-size) * 0.47) !important;
  color: white !important;
  stroke-width: 2 !important;
  fill: none !important;
  stroke: currentColor !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Greeting Card */
.shop-ai-greeting-card {
  position: fixed;
  bottom: 30px;
  right: calc(var(--bubble-size) + 30px);
  background: white;
  border-radius: 12px;
  padding: 14px 16px;
  padding-right: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-width: 280px;
  /* Slightly lower than main container but still very high with !important */
  z-index: 2147483646 !important;
  animation: shop-ai-greetingFadeIn 0.5s ease-out;
  cursor: pointer;
  transition: all 0.2s ease;
}

.shop-ai-chat-container.position-bottom-left .shop-ai-greeting-card {
  right: auto;
  left: calc(var(--bubble-size) + 30px);
}

.shop-ai-greeting-card.hiding {
  animation: shop-ai-greetingFadeOut 0.4s ease-in forwards;
}

.shop-ai-greeting-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.shop-ai-greeting-card:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.shop-ai-greeting-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  transition: all 0.2s ease;
  padding: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.shop-ai-greeting-dismiss:hover {
  background: #f3f4f6;
  color: #6b7280;
  transform: scale(1.1);
}

.shop-ai-greeting-dismiss:active {
  transform: scale(0.95);
}

.shop-ai-greeting-content {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-family);
}

.shop-ai-greeting-emoji {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.shop-ai-greeting-text {
  color: #1f2937;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}

@keyframes shop-ai-greetingFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes shop-ai-greetingFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Chat Window */
.shop-ai-chat-window {
  position: fixed;
  bottom: calc(var(--bubble-size) + 60px);
  right: 20px;
  width: var(--window-width);
  height: var(--window-height);
  max-height: calc(100vh - 140px);
  background: white;
  border-radius: var(--border-radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  display: none;
  flex-direction: column;
  overflow: hidden;
  /* Apply font-smoothing only to widget content, not the root container */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.shop-ai-chat-container.position-bottom-left .shop-ai-chat-window {
  right: auto;
  left: 20px;
}

.shop-ai-chat-window.open {
  display: flex;
}

/* Chat Header */
.shop-ai-chat-header {
  background: var(--header-color);
  color: var(--header-text-color);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Header sizes */
.shop-ai-chat-header[data-size="small"] {
  padding: 12px 16px;
}

.shop-ai-chat-header[data-size="small"] .shop-ai-header-text {
  font-size: 14px;
  font-weight: 500;
}

.shop-ai-chat-header[data-size="medium"] {
  padding: 16px 20px;
}

.shop-ai-chat-header[data-size="medium"] .shop-ai-header-text {
  font-size: 16px;
  font-weight: 600;
}

.shop-ai-chat-header[data-size="large"] {
  padding: 24px;
}

.shop-ai-chat-header[data-size="large"] .shop-ai-header-text {
  font-size: 18px;
  font-weight: 700;
}

.shop-ai-chat-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.shop-ai-chat-close,
.shop-ai-chat-clear {
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  color: var(--header-text-color) !important;
  cursor: pointer !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1 !important;
}

.shop-ai-chat-close {
  font-size: 24px !important;
}

.shop-ai-chat-clear:hover,
.shop-ai-chat-close:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  border: none !important;
}

.shop-ai-chat-clear:focus,
.shop-ai-chat-close:focus {
  outline: none !important;
  box-shadow: none !important;
}

.shop-ai-chat-clear svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  color: inherit !important;
  fill: none !important;
  stroke: currentColor !important;
}

/* Messages */
.shop-ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--background-color);
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  touch-action: pan-y;
}

.shop-ai-message {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: var(--border-radius);
  font-size: 14px;
}

.shop-ai-message.user {
  background: var(--user-message-color);
  color: white;
  align-self: flex-end;
  margin-bottom: 8px;
}

.shop-ai-message.assistant {
  background: var(--bot-message-color);
  color: #1f2937;
  align-self: flex-start;
  line-height: 1.6;
  display: block;
}

.shop-ai-message.assistant.shop-ai-typing {
  display: flex;
}

/* Message Content Styles */
.shop-ai-message p {
  margin: 0 0 4px 0;
}

.shop-ai-message p:last-child {
  margin-bottom: 0;
}

.shop-ai-message h1,
.shop-ai-message h2,
.shop-ai-message h3 {
  margin: 8px 0 4px 0;
  font-weight: 600;
  color: #111827;
}

.shop-ai-message h1 {
  font-size: 18px;
}

.shop-ai-message h2 {
  font-size: 16px;
}

.shop-ai-message h3 {
  font-size: 15px;
}

.shop-ai-message strong {
  font-weight: 600;
  color: #111827;
}

.shop-ai-message em {
  font-style: italic;
}

/* Exclude product cards and knowledge cards from generic link styling */
.shop-ai-message a:not(.product-card-inline):not(.knowledge-card-inline) {
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
  word-break: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  display: inline;
  max-width: 100%;
}

.shop-ai-message a:not(.product-card-inline):not(.knowledge-card-inline):hover {
  text-decoration: underline;
}

.shop-ai-message ul,
.shop-ai-message ol {
  margin: 8px 0;
  padding-left: 20px;
  line-height: 1.6;
}

.shop-ai-message ol {
  counter-reset: item;
}

.shop-ai-message li {
  margin: 4px 0;
  line-height: 1.5;
}

/* Nested lists */
.shop-ai-message li ul,
.shop-ai-message li ol {
  margin-top: 4px;
  margin-bottom: 4px;
}

/* Ensure images in lists display properly */
.shop-ai-message li img {
  margin-top: 4px;
  display: block;
}

/* Product Images - Force thumbnail size with third-party theme compatibility

   CSS SPECIFICITY & SHOPIFY THEME COMPATIBILITY:

   This section uses triple selectors and !important flags to ensure reliable styling
   across Shopify themes, as this widget runs as an embedded third-party script.

   Triple selector approach:
   1. .shop-ai-message img - Catches all images nested in messages
   2. .shop-ai-message .shop-ai-product-image - Specific product image elements within messages
   3. .shop-ai-product-image - Standalone product images outside messages

   Why !important flags are necessary:
   - Shopify theme CSS commonly uses !important on image styles (e.g., "width: 100% !important")
   - Without !important, theme styles override our dimensions, breaking the UI
   - Examples of conflicting theme patterns:
     * "img { width: 100% !important; height: auto !important; }"
     * "img { max-width: 100% !important; }"
     * "img { display: block !important; }"

   Tested compatibility:
   - Works with custom theme extensions (verified in e2e/tests/theme-customization.spec.js)
   - Compatible with various Shopify theme CSS reset patterns
   - Third-party widget isolation verified through multiple test cases

   Note for developers:
   - This aggressive specificity is required for third-party widget reliability
   - Only modify if you've tested against multiple Shopify themes
   - Changes to these selectors may break product image display in deployed stores
   - Keep all three selectors in sync to maintain consistency across different contexts
*/
/* Exclude product card images and knowledge base images from generic size limits */
.shop-ai-message img:not(.product-card-inline img):not(.product-card-inline *):not(.knowledge-card-inline img):not(.knowledge-card-inline *),
.shop-ai-message .shop-ai-product-image,
.shop-ai-product-image {
  display: block !important;
  max-width: 100px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 8px;
  margin: 6px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Images during streaming - no animation, visible immediately */
.shop-ai-message.streaming .shop-ai-product-image {
  opacity: 1;
  transform: none;
}

/* Images when finalized - animate in */
.shop-ai-message:not(.streaming) .shop-ai-product-image.animate-in {
  opacity: 0;
  animation: shop-ai-imageSlideIn 0.4s ease-out forwards;
}

/* Image animation - slides in and fades in */
@keyframes shop-ai-imageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Powered by Supportify Footer */
.shop-ai-powered-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  background: #fafafa;
  border-top: 1px solid #f0f0f0;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  font-size: 11px;
  color: #9ca3af;
  text-decoration: none;
  transition: all 0.2s ease;
}

.shop-ai-powered-by:hover {
  background: #f5f5f5;
  color: #6b7280;
}

.shop-ai-powered-by-logo {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  border-radius: 3px !important;
  flex-shrink: 0 !important;
  display: block !important;
  overflow: visible !important;
}

.shop-ai-powered-by-text {
  font-weight: 400;
}

.shop-ai-powered-by-brand {
  font-weight: 600;
  color: #95BF47;
}

.shop-ai-powered-by:hover .shop-ai-powered-by-brand {
  color: #7FA037;
}

/* Input */
.shop-ai-chat-input-container {
  padding: 16px;
  background: white !important;
  border-top: 1px solid #e5e7eb;
}

.shop-ai-chat-input {
  display: flex;
  gap: 8px;
  background: #f3f4f6 !important;
  border-radius: 24px;
  padding: 4px;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  align-items: center;
}

.shop-ai-chat-input:focus-within {
  border-color: rgba(102, 126, 234, 0.3);
  background: #ffffff !important;
}

.shop-ai-chat-input textarea {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  padding: 9px 12px !important;
  outline: none !important;
  font-family: var(--font-family) !important;
  font-size: 14px !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  resize: none !important;
  /* Height is controlled by JavaScript autoResizeTextarea() - DO NOT use !important */
  /* These are just defaults, JS will override with inline styles */
  height: 36px;
  min-height: 36px;
  max-height: 150px;
  line-height: 1.43 !important;
  overflow-y: hidden;
  transition: height 0.1s ease;
  display: block !important;
  box-sizing: border-box !important;
  color: #1f2937 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  text-indent: 0 !important;
  text-shadow: none !important;
  width: auto !important;
}

.shop-ai-chat-input textarea:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

/* Prevent autofill styling in Chrome, Safari, and other WebKit browsers */
.shop-ai-chat-input textarea:-webkit-autofill,
.shop-ai-chat-input textarea:-webkit-autofill:hover,
.shop-ai-chat-input textarea:-webkit-autofill:focus,
.shop-ai-chat-input textarea:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: #1f2937 !important;
  background-color: transparent !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

.shop-ai-chat-send {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  border-radius: 50% !important;
  background: var(--user-message-color) !important;
  border: none !important;
  color: white !important;
  cursor: pointer !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: 1 !important;
  font-size: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.shop-ai-chat-send:hover {
  background: var(--user-message-color) !important;
  border: none !important;
  opacity: 0.9;
}

.shop-ai-chat-send:focus {
  outline: none !important;
  box-shadow: none !important;
}

.shop-ai-chat-send:active {
  transform: scale(0.95);
  background: var(--user-message-color) !important;
}

.shop-ai-chat-send svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  color: white !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  flex-shrink: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.shop-ai-typing {
  gap: 4px;
  align-items: center;
  min-height: 40px;
  justify-content: flex-start;
}

.shop-ai-typing-dot {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  border-radius: 50% !important;
  background-color: #667eea !important;
  background: #667eea !important;
  animation: shop-ai-typing-wave 0.9s infinite ease-in-out !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

.shop-ai-typing-dot:nth-child(1) {
  animation-delay: 0s !important;
}

.shop-ai-typing-dot:nth-child(2) {
  animation-delay: 0.15s !important;
}

.shop-ai-typing-dot:nth-child(3) {
  animation-delay: 0.3s !important;
}

@keyframes shop-ai-typing-wave {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-5px);
  }
}

/* Restoring Conversation Indicator */
.shop-ai-message.restoring {
  opacity: 0.7;
  font-style: italic;
  color: #6b7280;
  font-size: 14px;
  animation: shop-ai-fade-in 0.3s ease-in;
}

@keyframes shop-ai-fade-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 0.7;
    transform: translateY(0);
  }
}

/* Tool Usage Indicator - Minimalistic Style */
.shop-ai-tool-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #f3f4f6;
  border-radius: 12px;
  font-size: 12px;
  color: #6b7280;
  margin: 4px 4px 4px 0;
  animation: shop-ai-fadeIn 0.2s ease-in;
  font-weight: 500;
}

.shop-ai-tool-indicator svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.7;
}

.shop-ai-tool-indicator.tool-success {
  background: #f3f4f6;
  color: #059669;
}

.shop-ai-tool-indicator.tool-success svg {
  opacity: 1;
}

/* Container for tool indicators */
.shop-ai-tools-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 2px 0 -2px 0;
}

@keyframes shop-ai-fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Streaming message cursor effect - using a smooth pulsing dot */
.shop-ai-message.streaming::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #667eea;
  margin-left: 4px;
  margin-bottom: 2px;
  animation: shop-ai-pulse 1.2s ease-in-out infinite;
  vertical-align: middle;
}

@keyframes shop-ai-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* ============================================
   MOBILE RESPONSIVE STYLES
   ============================================ */

/* Mobile devices (< 768px) */
@media (max-width: 767px) {
  /* Container positioning */
  .shop-ai-chat-container {
    bottom: 16px;
    right: 16px;
  }

  .shop-ai-chat-container.position-bottom-left {
    left: 16px;
    right: auto;
  }

  /* Bubble - slightly smaller on mobile */
  .shop-ai-chat-bubble {
    width: calc(var(--bubble-size) * 0.9);
    height: calc(var(--bubble-size) * 0.9);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  }

  .shop-ai-chat-bubble svg {
    width: calc(var(--bubble-size) * 0.4);
    height: calc(var(--bubble-size) * 0.4);
  }

  /* FULLSCREEN CHAT WINDOW for mobile */
  .shop-ai-chat-window {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw !important;
    /* Use dvh (dynamic viewport height) which accounts for mobile browser UI */
    /* Fallback to 100vh for browsers that don't support dvh */
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0 !important;
    box-shadow: none;
    /* Maximum z-index for mobile fullscreen with !important to ensure it's ALWAYS on top
       Critical for overlapping cookie banners, GDPR widgets, and gift cards on mobile */
    z-index: 2147483647 !important;
    /* Height will be dynamically adjusted by visualViewport API */
    /* Ensure content doesn't overflow */
    overflow: hidden !important;
  }

  /* Ensure proper positioning context for absolute input */
  .shop-ai-chat-window.open {
    position: fixed;
  }

  .shop-ai-chat-container.position-bottom-left .shop-ai-chat-window {
    left: 0;
  }

  /* Hide bubble when chat is open on mobile */
  .shop-ai-chat-window.open ~ .shop-ai-chat-bubble {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
  }

  /* Greeting card - hide when chat is open */
  .shop-ai-chat-window.open ~ .shop-ai-greeting-card {
    display: none !important;
  }

  /* Greeting card - mobile optimized */
  .shop-ai-greeting-card {
    max-width: calc(100vw - 100px);
    bottom: 24px;
    right: calc(var(--bubble-size) * 0.9 + 26px);
    padding: 12px 14px;
    padding-right: 30px;
  }

  .shop-ai-chat-container.position-bottom-left .shop-ai-greeting-card {
    left: calc(var(--bubble-size) * 0.9 + 26px);
  }

  .shop-ai-greeting-text {
    font-size: 13px;
  }

  .shop-ai-greeting-emoji {
    font-size: 20px;
  }

  .shop-ai-greeting-dismiss {
    width: 18px;
    height: 18px;
    font-size: 16px;
    top: 6px;
    right: 6px;
  }

  /* Header - optimized for mobile */
  .shop-ai-chat-header {
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .shop-ai-chat-header[data-size="small"] {
    padding: 10px 14px;
  }

  .shop-ai-chat-header[data-size="small"] .shop-ai-header-text {
    font-size: 15px;
  }

  .shop-ai-chat-header[data-size="medium"] {
    padding: 14px 16px;
  }

  .shop-ai-chat-header[data-size="medium"] .shop-ai-header-text {
    font-size: 16px;
  }

  .shop-ai-chat-header[data-size="large"] {
    padding: 16px 18px;
  }

  .shop-ai-chat-header[data-size="large"] .shop-ai-header-text {
    font-size: 17px;
  }

  /* Close button - larger tap target */
  .shop-ai-chat-close,
  .shop-ai-chat-clear {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
  }

  .shop-ai-chat-close {
    font-size: 26px !important;
  }

  /* Messages - optimized padding */
  .shop-ai-chat-messages {
    padding: 16px 14px;
    padding-bottom: env(safe-area-inset-bottom, 16px);
  }

  .shop-ai-message {
    max-width: 85%;
    font-size: 15px;
    line-height: 1.5;
  }

  /* Product images - smaller on mobile (see lines 397-408 for why triple selector is needed) */
  .shop-ai-message img,
  .shop-ai-message .shop-ai-product-image,
  .shop-ai-product-image {
    max-width: 80px !important;
  }

  /* Input container - absolute positioning on mobile for keyboard handling */
  /* Using !important on positioning to override aggressive Shopify theme styles */
  /* NOTE: bottom is set dynamically by JavaScript (36px + safe-area default, 0 when keyboard open) */
  .shop-ai-chat-input-container {
    position: absolute !important;
    /* bottom is controlled by JS for keyboard handling - do NOT use !important here */
    /* 36px = compact powered-by height, plus safe area inset */
    bottom: calc(36px + env(safe-area-inset-bottom, 0px));
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 14px !important;
    background: white !important;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    z-index: 10;
    box-sizing: border-box !important;
    margin: 0 !important;
    /* Prevent pull-to-refresh and overscroll on input area */
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
  }

  .shop-ai-chat-input {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px;
    align-items: center;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  .shop-ai-chat-input textarea {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important; /* Allow flex item to shrink below content size */
    padding: 10px 14px !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
    /* Height controlled by JavaScript autoResizeTextarea - don't use !important */
    min-height: 40px;
    max-height: 180px;
    background: transparent !important;
    color: #1f2937 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    overflow-y: hidden; /* JS will set to 'auto' when content exceeds max-height */
    resize: none !important; /* Disable manual resize handle */
    /* Improve iOS keyboard handling */
    -webkit-appearance: none !important;
    appearance: none !important;
    /* Prevent unwanted mobile behaviors */
    -webkit-user-select: text;
    user-select: text;
    touch-action: manipulation;
  }

  /* Messages container - account for absolute input at bottom */
  .shop-ai-chat-messages {
    /* Reserve space for input container at bottom */
    /* 36px powered-by + ~60px input height + 36px spacing = ~132px total */
    padding-bottom: 140px;
  }

  /* Powered by Supportify - fixed at bottom on mobile */
  .shop-ai-powered-by {
    position: absolute !important;
    /* Position above safe area for devices with home indicator */
    bottom: env(safe-area-inset-bottom, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 5;
    padding: 8px 16px !important;
    font-size: 10px !important;
    gap: 4px !important;
    background: #fafafa !important;
    /* Ensure visibility */
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Send button - larger tap target */
  .shop-ai-chat-send {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    flex-shrink: 0 !important;
  }

  .shop-ai-chat-send svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }

  /* Tool indicators - smaller on mobile */
  .shop-ai-tool-indicator {
    font-size: 11px;
    padding: 4px 8px;
  }

  .shop-ai-tool-indicator svg {
    width: 12px;
    height: 12px;
  }
}

/* Small phones (< 375px) */
@media (max-width: 374px) {
  .shop-ai-chat-header {
    padding: 12px 14px;
  }

  .shop-ai-chat-header[data-size="medium"] .shop-ai-header-text {
    font-size: 15px;
  }

  .shop-ai-chat-messages {
    padding: 14px 12px;
  }

  .shop-ai-message {
    font-size: 14px;
    padding: 7px 11px;
  }

  /* Product images on small phones (see lines 397-408 for why triple selector is needed) */
  .shop-ai-message img,
  .shop-ai-message .shop-ai-product-image,
  .shop-ai-product-image {
    max-width: 80px !important;
  }

  .shop-ai-chat-input textarea {
    font-size: 16px; /* Still 16px to prevent zoom */
    padding: 9px 12px;
  }
}

/* Tablet devices (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .shop-ai-chat-window {
    width: min(420px, 90vw);
    height: min(650px, 80vh);
  }

  .shop-ai-chat-bubble {
    width: calc(var(--bubble-size) * 0.95);
    height: calc(var(--bubble-size) * 0.95);
  }
}

/* Large screens (> 1024px) - use default styles */
@media (min-width: 1025px) {
  /* Desktop styles already defined above */
}

/* Landscape mode on phones */
@media (max-width: 767px) and (orientation: landscape) {
  .shop-ai-chat-window {
    height: 100vh !important;
  }

  .shop-ai-chat-header {
    padding: 10px 14px;
  }

  .shop-ai-chat-messages {
    padding: 12px 14px;
  }

  .shop-ai-chat-input-container {
    padding: 10px 14px;
  }
}

/* Safe area insets for notched devices (iPhone X+) */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 767px) {
    .shop-ai-chat-window {
      padding-top: env(safe-area-inset-top, 0);
    }

    .shop-ai-chat-input-container {
      padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
  }
}

/* Prevent body scroll when chat is open on mobile */
@media (max-width: 767px) {
  body.shop-ai-chat-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100vh;
  }
}

/* ====================================
   Rating Widget Styles
   ==================================== */

.shop-ai-rating-widget {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 8px 0;
  margin: 6px 0;
  box-shadow: none;
  animation: shop-ai-slideInUp 0.3s ease;
}

.shop-ai-rating-header {
  text-align: center;
  margin-bottom: 10px;
}

.shop-ai-rating-prompt {
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
  margin: 0;
  line-height: 1.4;
}

.shop-ai-rating-options {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 2px 0;
}

/* Emoji Rating Options */
.shop-ai-rating-options.emoji {
  gap: 6px;
}

.shop-ai-rating-options.emoji .shop-ai-rating-option.selected {
  opacity: 1 !important;
}

.shop-ai-rating-option {
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 48px;
  flex-shrink: 0;
}

.shop-ai-rating-option .emoji {
  font-size: 32px;
  line-height: 1;
}

.shop-ai-rating-option .label {
  display: none;
}

.shop-ai-rating-option:hover:not(:disabled) {
  transform: scale(1.15);
}

.shop-ai-rating-option:active:not(:disabled) {
  transform: scale(1.1);
}

.shop-ai-rating-option.selected {
  transform: scale(1.2);
  opacity: 1 !important;
}

.shop-ai-rating-option.dimmed,
.shop-ai-rating-star.dimmed {
  opacity: 0.3;
  transform: scale(0.9);
  cursor: default;
}

.shop-ai-rating-option:disabled,
.shop-ai-rating-star:disabled {
  cursor: default;
  pointer-events: none;
}

/* Ensure selected stars have full opacity */
.shop-ai-rating-star.selected {
  opacity: 1 !important;
}

/* Stars Rating Options */
.shop-ai-rating-options.stars {
  gap: 4px;
  justify-content: center;
}

.shop-ai-rating-star {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.shop-ai-rating-star svg {
  width: 28px;
  height: 28px;
  fill: #e8eaed;
  stroke: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
}

.shop-ai-rating-star.hover:not(:disabled) svg,
.shop-ai-rating-star:hover:not(:disabled) svg {
  fill: #fbbf24;
  transform: scale(1.08);
  filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.3));
}

.shop-ai-rating-star.selected svg {
  fill: #f59e0b;
  transform: scale(1.1);
  filter: drop-shadow(0 2px 6px rgba(245, 158, 11, 0.4));
  opacity: 1 !important;
}

.shop-ai-rating-star.dimmed svg {
  opacity: 0.25;
  transform: scale(0.92);
  filter: none;
}

/* Ensure hover state takes precedence over default */
.shop-ai-rating-star.hover svg {
  fill: #fbbf24 !important;
}

/* Thumbs Rating Options */
.shop-ai-rating-options.thumbs {
  gap: 16px;
}

.shop-ai-rating-options.thumbs .shop-ai-rating-option {
  min-width: auto;
  padding: 8px;
  flex: 0;
  max-width: none;
}

.shop-ai-rating-options.thumbs .shop-ai-rating-option svg {
  width: 32px;
  height: 32px;
  stroke: #9ca3af;
}

.shop-ai-rating-options.thumbs .shop-ai-rating-option:hover:not(:disabled) svg {
  stroke: #667eea;
}

.shop-ai-rating-options.thumbs .shop-ai-rating-option.selected {
  opacity: 1 !important;
}

.shop-ai-rating-options.thumbs .shop-ai-rating-option.selected svg {
  stroke: #667eea;
  opacity: 1 !important;
}

.shop-ai-rating-options.thumbs .label {
  display: none;
}

/* Feedback Section */
.shop-ai-rating-feedback {
  margin-top: 12px;
  animation: shop-ai-slideDown 0.3s ease;
}

.shop-ai-feedback-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  margin-bottom: 8px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.shop-ai-feedback-input:focus {
  outline: none;
  border-color: #667eea;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.shop-ai-feedback-buttons {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.shop-ai-feedback-submit,
.shop-ai-feedback-skip {
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  transition: all 0.2s ease;
}

.shop-ai-feedback-submit {
  background: #667eea;
  color: white;
}

.shop-ai-feedback-submit:hover {
  background: #5568d3;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.shop-ai-feedback-skip {
  background: #f3f4f6;
  color: #6b7280;
}

.shop-ai-feedback-skip:hover {
  background: #e5e7eb;
}

/* Animations */
@keyframes shop-ai-slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shop-ai-slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 200px;
  }
}

/* Mobile Responsive */
@media (max-width: 767px) {
  .shop-ai-rating-widget {
    padding: 6px 0;
    margin: 6px 0;
  }

  .shop-ai-rating-prompt {
    font-size: 12px;
  }

  .shop-ai-rating-options.emoji {
    gap: 4px;
  }

  .shop-ai-rating-option {
    min-width: 42px;
    padding: 4px;
  }

  .shop-ai-rating-option .emoji {
    font-size: 28px;
  }

  .shop-ai-rating-star {
    padding: 3px;
  }

  .shop-ai-rating-star svg {
    width: 26px;
    height: 26px;
  }

  .shop-ai-rating-options.thumbs {
    gap: 12px;
  }

  .shop-ai-rating-options.thumbs .shop-ai-rating-option {
    min-width: auto;
    padding: 6px;
  }

  .shop-ai-rating-options.thumbs .shop-ai-rating-option svg {
    width: 28px;
    height: 28px;
  }
}

/* ============================================================================
   WIDGET STYLES - Product & Knowledge Base Widgets
   ============================================================================ */

/* Widget Container */
.shop-ai-widgets-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0;
  max-width: 100%;
}

/* Base Widget Styles */
.shop-ai-widget {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, opacity 0.3s ease-in;
}

.shop-ai-widget:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Widget Header */
.shop-ai-widget .widget-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 600;
  font-size: 14px;
  color: #374151;
}

.shop-ai-widget .widget-icon {
  width: 20px;
  height: 20px;
  stroke-width: 2;
  color: #6b7280;
  flex-shrink: 0;
}

/* ============================================================================
   PRODUCT WIDGET
   ============================================================================ */

.shop-ai-widget .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 16px;
}

.shop-ai-widget .product-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  animation: shop-ai-fadeInUp 0.3s ease-out forwards;
  opacity: 0;
}

.shop-ai-widget .product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.shop-ai-widget .product-image-container,
.product-card-inline .product-image-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f3f4f6;
}

.shop-ai-widget .product-image-container img,
.product-card-inline .product-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.shop-ai-widget .product-card:hover .product-image-container img {
  transform: scale(1.05);
}

.shop-ai-widget .product-no-image,
.product-card-inline .product-no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #9ca3af;
}

.shop-ai-widget .product-no-image svg,
.product-card-inline .product-no-image svg {
  width: 48px;
  height: 48px;
}

.shop-ai-widget .product-info,
.product-card-inline .product-info {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shop-ai-widget .product-title,
.product-card-inline .product-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.shop-ai-widget .product-meta,
.product-card-inline .product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  gap: 8px;
}

.shop-ai-widget .product-price,
.product-card-inline .product-price {
  font-weight: 600;
  color: #059669;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-ai-widget .product-stock,
.product-card-inline .product-stock {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.shop-ai-widget .product-stock.in-stock,
.product-card-inline .product-stock.in-stock {
  background: #d1fae5;
  color: #065f46;
}

.shop-ai-widget .product-stock.out-of-stock,
.product-card-inline .product-stock.out-of-stock {
  background: #fee2e2;
  color: #991b1b;
}

/* ============================================================================
   INLINE PRODUCT WIDGET (for markdown-based widgets)
   ============================================================================ */

.product-card-inline {
  display: block;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  margin: 8px 0;
  max-width: 200px;
  clear: both;
  position: relative;
  line-height: normal;
  box-sizing: border-box;
}

.product-card-inline:hover {
  border-color: #667eea;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.12);
  transform: translateY(-1px);
}

.product-card-inline .product-image-container {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #f9fafb;
  position: relative;
  line-height: 0;
}

.product-card-inline .product-image-container img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.product-card-inline .product-no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
}

.product-card-inline .product-no-image svg {
  width: 48px;
  height: 48px;
  color: #d1d5db;
}

.product-card-inline .product-info {
  padding: 8px;
}

.product-card-inline .product-title {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 4px 0;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-card-inline .product-meta {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.product-card-inline .product-price {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
  white-space: nowrap;
}

.product-card-inline .product-stock {
  font-size: 11px;
  color: #059669;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.product-card-inline .product-stock.out-of-stock {
  color: #dc2626;
}

/* Safety override: Ensure product cards always display correctly even inside messages */
.shop-ai-message .product-card-inline {
  display: block !important;
  color: inherit !important;
  text-decoration: none !important;
  font-weight: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  -webkit-hyphens: none !important;
  hyphens: none !important;
  max-width: 200px !important;
}

.shop-ai-message .product-card-inline:hover {
  text-decoration: none !important;
}

/* ============================================================================
   INLINE KNOWLEDGE WIDGET (for markdown-based widgets)
   ============================================================================ */

.knowledge-card-inline {
  display: block;
  padding: 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin: 12px 0;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  clear: both;
  position: relative;
}

/* Clickable card (when wrapped in <a> tag) */
.knowledge-card-inline.knowledge-card-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.knowledge-card-inline:hover,
.knowledge-card-inline.knowledge-card-link:hover {
  background: #f3f4f6;
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.knowledge-card-inline:active,
.knowledge-card-inline.knowledge-card-link:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Knowledge card image */
.knowledge-card-inline .knowledge-image-container {
  width: calc(100% + 28px); /* 14px padding on each side = 28px total */
  height: 160px;
  margin: -14px -14px 12px -14px; /* Negative margins to extend beyond padding */
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  background: #e5e7eb;
}

.knowledge-card-inline .knowledge-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.knowledge-card-inline .knowledge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.knowledge-card-inline .knowledge-doc-link,
.knowledge-card-inline .knowledge-doc-title-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  flex: 1;
  min-width: 0;
}

.knowledge-card-inline .knowledge-doc-link:hover {
  color: #5568d3;
}

/* Title styling for clickable cards (entire card is a link) */
.knowledge-card-inline.knowledge-card-link .knowledge-doc-title-link {
  color: #667eea;
}

.knowledge-card-inline.knowledge-card-link:hover .knowledge-doc-title-link {
  color: #5568d3;
}

.knowledge-card-inline .knowledge-link-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.knowledge-card-inline .knowledge-doc-title {
  font-weight: 600;
  font-size: 13px;
  color: #111827;
}

.knowledge-card-inline .knowledge-score {
  font-size: 11px;
  padding: 2px 6px;
  background: #dbeafe;
  color: #1e40af;
  border-radius: 4px;
  font-weight: 500;
  flex-shrink: 0;
}

.knowledge-card-inline .knowledge-content {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}

/* ============================================================================
   KNOWLEDGE BASE WIDGET
   ============================================================================ */

.shop-ai-widget .knowledge-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.shop-ai-widget .knowledge-card {
  padding: 16px;
  border-bottom: 1px solid #e5e7eb;
  transition: background 0.2s ease;
  animation: shop-ai-fadeInUp 0.3s ease-out forwards;
  opacity: 0;
}

.shop-ai-widget .knowledge-card:last-child {
  border-bottom: none;
}

.shop-ai-widget .knowledge-card:hover {
  background: #f9fafb;
}

/* Knowledge card with image */
.shop-ai-widget .knowledge-card-link {
  display: flex;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}

.shop-ai-widget .knowledge-card-link:hover {
  opacity: 0.9;
}

.shop-ai-widget .knowledge-image-container {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #f3f4f6;
}

.shop-ai-widget .knowledge-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-ai-widget .knowledge-content-container {
  flex: 1;
  min-width: 0;
}

.shop-ai-widget .knowledge-header,
.knowledge-card-inline .knowledge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 12px;
}

.shop-ai-widget .knowledge-doc-title,
.knowledge-card-inline .knowledge-doc-title {
  font-weight: 600;
  font-size: 13px;
  color: #111827;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Knowledge base link styling */
.shop-ai-widget .knowledge-doc-link,
.knowledge-card-inline .knowledge-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
  color: #2563eb;
  text-decoration: none;
  transition: color 0.2s ease;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-ai-widget .knowledge-doc-link:hover,
.knowledge-card-inline .knowledge-doc-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

.shop-ai-widget .knowledge-link-icon,
.knowledge-card-inline .knowledge-link-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke-width: 2;
}

.shop-ai-widget .knowledge-score,
.knowledge-card-inline .knowledge-score {
  font-size: 12px;
  font-weight: 500;
  color: #059669;
  background: #d1fae5;
  padding: 2px 8px;
  border-radius: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.shop-ai-widget .knowledge-content,
.knowledge-card-inline .knowledge-content {
  font-size: 13px;
  line-height: 1.5;
  color: #4b5563;
  margin: 0 0 8px 0;
}

.shop-ai-widget .knowledge-page {
  font-size: 11px;
  color: #6b7280;
  font-style: italic;
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes shop-ai-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================================
   MOBILE RESPONSIVE (max-width: 767px)
   ============================================================================ */

@media (max-width: 767px) {
  .shop-ai-widgets-container {
    gap: 8px;
    margin: 8px 0;
  }

  .shop-ai-widget {
    border-radius: 8px;
  }

  .shop-ai-widget .widget-header {
    padding: 10px 12px;
    font-size: 13px;
  }

  .shop-ai-widget .widget-icon {
    width: 18px;
    height: 18px;
  }

  /* Product Widget Mobile */
  .shop-ai-widget .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 12px;
  }

  .shop-ai-widget .product-card {
    border-radius: 6px;
  }

  .shop-ai-widget .product-info,
  .product-card-inline .product-info {
    padding: 10px;
    gap: 4px;
  }

  .shop-ai-widget .product-title,
  .product-card-inline .product-title {
    font-size: 13px;
  }

  .shop-ai-widget .product-meta,
  .product-card-inline .product-meta {
    font-size: 11px;
  }

  .shop-ai-widget .product-price,
  .product-card-inline .product-price {
    font-size: 11px;
  }

  .shop-ai-widget .product-stock,
  .product-card-inline .product-stock {
    font-size: 10px;
    padding: 1px 4px;
  }

  .shop-ai-widget .product-no-image svg,
  .product-card-inline .product-no-image svg {
    width: 36px;
    height: 36px;
  }

  /* Knowledge Widget Mobile */
  .shop-ai-widget .knowledge-card {
    padding: 12px;
  }

  .shop-ai-widget .knowledge-card-link {
    flex-direction: column;
    gap: 10px;
  }

  .shop-ai-widget .knowledge-image-container {
    width: 100%;
    height: 120px;
  }

  .shop-ai-widget .knowledge-header,
  .knowledge-card-inline .knowledge-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .shop-ai-widget .knowledge-doc-title,
  .knowledge-card-inline .knowledge-doc-title {
    font-size: 12px;
    white-space: normal;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .shop-ai-widget .knowledge-doc-link,
  .knowledge-card-inline .knowledge-doc-link {
    font-size: 12px;
    white-space: normal;
  }

  .shop-ai-widget .knowledge-content,
  .knowledge-card-inline .knowledge-content {
    font-size: 12px;
  }

  .shop-ai-widget .knowledge-page {
    font-size: 10px;
  }
}

/* ============================================================================
   DARK MODE SUPPORT (prefers-color-scheme: dark)
   ============================================================================ */

/* DARK MODE TEMPORARILY DISABLED
   Dark mode styling has been disabled to maintain consistency across the chat interface.
   The chat widget doesn't have dark mode support yet, so widgets should match the light theme.

   To re-enable dark mode in the future:
   1. Uncomment the @media query below
   2. Add matching dark mode styles for the entire chat interface (messages, input, etc.)
   3. Test thoroughly across different devices and system preferences
*/

/*
@media (prefers-color-scheme: dark) {
  .shop-ai-widget {
    background: #1f2937;
    border-color: #374151;
  }

  .widget-header {
    background: #111827;
    border-color: #374151;
    color: #f3f4f6;
  }

  .widget-icon {
    color: #9ca3af;
  }

  .product-card {
    background: #1f2937;
  }

  .product-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }

  .product-image-container {
    background: #111827;
  }

  .product-no-image {
    color: #6b7280;
  }

  .product-title {
    color: #f9fafb;
  }

  .product-price {
    color: #34d399;
  }

  .product-stock.in-stock {
    background: #064e3b;
    color: #6ee7b7;
  }

  .product-stock.out-of-stock {
    background: #7f1d1d;
    color: #fca5a5;
  }

  .product-card-inline {
    background: #1f2937;
    border-color: #374151;
  }

  .product-card-inline:hover {
    border-color: #60a5fa;
    box-shadow: 0 2px 12px rgba(96, 165, 250, 0.2);
  }

  .product-card-inline .product-image-container {
    background: #111827;
  }

  .product-card-inline .product-no-image {
    background: #111827;
  }

  .product-card-inline .product-title {
    color: #f9fafb;
  }

  .product-card-inline .product-price {
    color: #f9fafb;
  }

  .product-card-inline .product-stock {
    color: #34d399;
  }

  .product-card-inline .product-stock.out-of-stock {
    color: #f87171;
  }

  .knowledge-card-inline {
    background: #1f2937;
    border-color: #374151;
  }

  .knowledge-card-inline:hover {
    background: #111827;
    border-color: #4b5563;
  }

  .knowledge-card-inline .knowledge-doc-title {
    color: #f9fafb;
  }

  .knowledge-card-inline .knowledge-doc-link {
    color: #60a5fa;
  }

  .knowledge-card-inline .knowledge-doc-link:hover {
    color: #93c5fd;
  }

  .knowledge-card-inline .knowledge-score {
    background: #064e3b;
    color: #6ee7b7;
  }

  .knowledge-card-inline .knowledge-content {
    color: #d1d5db;
  }

  .knowledge-card {
    border-color: #374151;
  }

  .knowledge-card:hover {
    background: #111827;
  }

  .knowledge-image-container {
    background: #111827;
  }

  .knowledge-doc-title {
    color: #f9fafb;
  }

  .knowledge-doc-link {
    color: #60a5fa;
  }

  .knowledge-doc-link:hover {
    color: #93c5fd;
  }

  .knowledge-score {
    color: #34d399;
    background: #064e3b;
  }

  .knowledge-content {
    color: #d1d5db;
  }

  .knowledge-page {
    color: #9ca3af;
  }
}
*/

/* ============================================================================
   ACCESSIBILITY: Reduced Motion Support
   ============================================================================ */

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Specifically disable widget animations */
  .product-card-inline,
  .knowledge-card-inline {
    transition: none !important;
    transform: none !important;
  }

  .product-card-inline:hover {
    transform: none !important;
  }

  /* Disable typing indicator animation */
  .shop-ai-typing-indicator span {
    animation: none !important;
  }

  /* Disable fade-in animations */
  .shop-ai-message,
  .shop-ai-product-widget,
  .shop-ai-knowledge-widget {
    opacity: 1 !important;
    animation: none !important;
  }
}