/* ---------------------------------------------------------------- */
/* PIXEL-PERFECT RESTORATION (SOFT LIGHT THEME)                     */
/* ---------------------------------------------------------------- */
:root {
  --lhp-bg-container: #efefef;
  --lhp-bg-body: #f5f5f5;
  --lhp-white: #ffffff;
  --lhp-text-dark: #1a1a1a;
  --lhp-text-muted: #666666;
  --lhp-border: rgba(0,0,0,0.06);
}

*, *::before, *::after { box-sizing: border-box; }

.widget-container {
  display: flex !important; flex-direction: column !important; width: 420px !important; height: 680px !important; 
  background: var(--lhp-bg-container) !important; border-radius: 30px !important; 
  box-shadow: 0 20px 80px rgba(0,0,0,0.15) !important;
  overflow: hidden !important; position: fixed !important; bottom: 90px !important; right: 24px !important; z-index: 9999 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Helvetica, Arial, sans-serif !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.widget-container.hidden { transform: scale(0.8) translateY(20px) !important; opacity: 0 !important; pointer-events: none !important; }
.widget-container.visible { transform: scale(1) translateY(0) !important; opacity: 1 !important; }

.chat-bubble-trigger {
  position: fixed !important; bottom: 24px !important; right: 24px !important; width: 64px !important; height: 64px !important;
  border-radius: 32px !important; background: var(--lhp-text-dark) !important; color: white !important;
  display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2) !important; z-index: 10000 !important;
}

.widget-header {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 16px 20px !important; background: var(--lhp-bg-container) !important; color: var(--lhp-text-dark) !important;
}
.header-avatar { 
  width: 36px !important; height: 36px !important; border-radius: 18px !important; 
  background: #c8c8c8 !important; display: flex !important; align-items: center !important; 
  justify-content: center !important; font-size: 11px !important; font-weight: 700 !important; color: #555 !important;
}
.header-title { font-size: 15px !important; font-weight: 600 !important; flex: 1 !important; text-align: center !important; }
.header-close { background: none !important; border: none !important; color: #999 !important; cursor: pointer !important; padding: 4px !important; }

.chat-messages {
  flex: 1 !important; overflow-y: auto !important; padding: 16px 20px !important; 
  display: flex !important; flex-direction: column !important; gap: 8px !important;
}

.empty-state { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 24px !important; padding: 40px 0 !important; }
.empty-state__heading { font-size: 26px !important; font-weight: 800 !important; color: var(--lhp-text-dark) !important; letter-spacing: -0.5px !important; }
.suggestions-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 0 4px !important; }
.suggestion-pill {
  background: var(--lhp-white) !important; border: none !important; border-radius: 18px !important; 
  padding: 16px !important; text-align: left !important; display: flex !important; flex-direction: column !important; 
  gap: 8px !important; cursor: pointer !important; transition: transform 0.2s !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
}
.suggestion-pill:hover { transform: translateY(-3px) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important; }
.suggestion-pill__icon { font-size: 20px !important; }
.suggestion-pill__text { font-size: 13px !important; font-weight: 600 !important; color: #333 !important; line-height: 1.4 !important; }

.message-row { display: flex !important; flex-direction: column !important; margin-bottom: 2px !important; }
.message-row.user { align-items: flex-end !important; }
.message-row.ai { align-items: flex-start !important; }
.message-bubble { 
  padding: 12px 16px !important; border-radius: 18px !important; font-size: 14px !important; line-height: 1.5 !important; 
  max-width: 88% !important; word-wrap: break-word !important; 
}
.message-bubble.user { background: #d1d1d1 !important; color: var(--lhp-text-dark) !important; border-bottom-right-radius: 4px !important; }
.message-bubble.ai { background: var(--lhp-white) !important; color: var(--lhp-text-dark) !important; border-bottom-left-radius: 4px !important; box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important; }

.chat-input-area { padding: 8px 16px 20px !important; background: var(--lhp-bg-container) !important; border: none !important; outline: none !important; }
.chat-form { border: none !important; outline: none !important; }
.input-wrapper, .input-wrapper * { border: none !important; outline: none !important; box-shadow: none !important; }
.input-wrapper { 
  background: var(--lhp-white) !important; border-radius: 24px !important; 
  padding: 6px 12px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.06) !important;
}
.chat-input { width: 100% !important; border: none !important; padding: 12px 8px !important; outline: none !important; font-size: 14px !important; color: #1a1a1a !important; background: transparent !important; }
.chat-input::placeholder { color: #999 !important; }

.input-toolbar { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 4px 0 !important; }
.input-toolbar__left { display: flex !important; align-items: center !important; gap: 8px !important; }
.toolbar-btn { background: none !important; border: none !important; color: #999 !important; cursor: pointer !important; display: flex !important; align-items: center !important; }
.escalate-pill { background: #f1f5f9 !important; color: #666 !important; font-size: 12px !important; font-weight: 600 !important; padding: 6px 14px !important; border-radius: 20px !important; cursor: pointer !important; border: none !important; }

.send-btn { 
  width: 36px !important; height: 36px !important; border-radius: 18px !important; 
  background: #ccc !important; color: white !important; border: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.send-btn.active { background: var(--lhp-text-dark) !important; cursor: pointer !important; }

/* Typing Dots Animation */
.typing-dots { display: flex !important; gap: 4px !important; align-items: center !important; height: 18px !important; width: 45px !important; justify-content: center !important; }
.typing-dots span { 
  width: 6px !important; height: 6px !important; background: #999 !important; border-radius: 50% !important; 
  animation: lhpBounce 1.4s infinite ease-in-out both !important; 
}
.typing-dots span:nth-child(1) { animation-delay: -0.32s !important; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s !important; }

@keyframes lhpBounce {
  0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
  40% { transform: scale(1); opacity: 1; }
}

/* Products Section */
.products-section { width: 100% !important; margin-top: 10px !important; }
.products-carousel { display: flex !important; gap: 10px !important; overflow-x: auto !important; padding-bottom: 8px !important; scrollbar-width: none !important; }
.product-card { flex: 0 0 135px !important; background: white !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; border: 1px solid rgba(0,0,0,0.04) !important; cursor: pointer !important; }
.product-card__thumb { width: 100% !important; height: 90px !important; background: #f8fafc !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.product-card__image { max-width: 90% !important; max-height: 90% !important; object-fit: contain !important; }
.product-card__body { padding: 10px !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }
.product-card__name { font-size: 11.5px !important; font-weight: 600 !important; color: #0f172a !important; line-height: 1.4 !important; }
.product-card__price { font-size: 13px !important; font-weight: 700 !important; color: #059669 !important; }

/* Modal Overlay Fix */
.lhp-modal-overlay { position: fixed !important; inset: 0 !important; background: rgba(0,0,0,0.4) !important; backdrop-filter: blur(4px) !important; z-index: 10001 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 20px !important; }
.lhp-modal-content { width: 100% !important; max-width: 380px !important; background: white !important; border-radius: 24px !important; padding: 24px !important; position: relative !important; animation: slideUp 0.3s ease-out !important; }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }