/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
  --aicw-primary:   #2E7D32;
  --aicw-primary-l: #43a047;
  --aicw-bg:        #f5f5f5;
  --aicw-white:     #ffffff;
  --aicw-border:    #e0e0e0;
  --aicw-text:      #212121;
  --aicw-muted:     #757575;
  --aicw-success:   #388e3c;
  --aicw-error:     #d32f2f;
  --aicw-radius:    14px;
  --aicw-shadow:    0 8px 32px rgba(0,0,0,.18);
  --aicw-z:         99999;
}

/* ── FAB button ────────────────────────────────────────────────────────────── */
#aicw-fab {
  position: fixed !important;
  bottom: 124px !important;
  right: 24px !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 16px !important;
  background: var(--aicw-white) !important;
  box-shadow: var(--aicw-shadow) !important;
  cursor: pointer !important;
  z-index: var(--aicw-z) !important;
  overflow: hidden !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  display: block !important;
}
#aicw-fab:hover { transform: scale(1.08) !important; box-shadow: 0 12px 40px rgba(0,0,0,.24) !important; }
#aicw-fab img   { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }

/* ── Chat panel ────────────────────────────────────────────────────────────── */
#aicw-panel {
  position: fixed !important;
  bottom: 96px !important;
  right: 24px !important;
  width: 380px !important;
  max-width: calc(100vw - 32px) !important;
  height: 580px !important;
  max-height: calc(100vh - 120px) !important;
  background: var(--aicw-white) !important;
  border-radius: 20px !important;
  box-shadow: var(--aicw-shadow) !important;
  z-index: var(--aicw-z) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transform: scale(.92) translateY(16px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
#aicw-panel.aicw-open {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
  pointer-events: all !important;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
#aicw-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  background: var(--aicw-primary) !important;
  color: #fff !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
#aicw-panel .aicw-header-logo {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}
#aicw-header-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  flex: 1 !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  color: #fff !important;
}
#aicw-close {
  background: rgba(255,255,255,.2) !important;
  border: none !important;
  color: #fff !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}
#aicw-close:hover { background: rgba(255,255,255,.35) !important; }

/* ── Message list ──────────────────────────────────────────────────────────── */
#aicw-messages {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  background: var(--aicw-bg) !important;
  box-sizing: border-box !important;
}
#aicw-messages::-webkit-scrollbar { width: 4px !important; }
#aicw-messages::-webkit-scrollbar-thumb { background: #ccc !important; border-radius: 4px !important; }

/* ── Bubbles ────────────────────────────────────────────────────────────────── */
#aicw-panel .aicw-bubble-wrap { display: flex !important; width: 100% !important; box-sizing: border-box !important; }
#aicw-panel .aicw-bubble-wrap.aicw-user  { justify-content: flex-end !important; }
#aicw-panel .aicw-bubble-wrap.aicw-bot   { justify-content: flex-start !important; }

#aicw-panel .aicw-bubble {
  max-width: 78% !important;
  padding: 10px 13px !important;
  border-radius: var(--aicw-radius) !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  box-sizing: border-box !important;
}
#aicw-panel .aicw-bubble-wrap.aicw-user .aicw-bubble {
  background: var(--aicw-primary) !important;
  color: #fff !important;
  border-bottom-right-radius: 4px !important;
}
#aicw-panel .aicw-bubble-wrap.aicw-bot .aicw-bubble {
  background: var(--aicw-white) !important;
  color: var(--aicw-text) !important;
  border: 1px solid var(--aicw-border) !important;
  border-bottom-left-radius: 4px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
}
#aicw-panel .aicw-bubble-wrap.aicw-error .aicw-bubble {
  background: #fff3f3 !important;
  color: var(--aicw-error) !important;
  border: 1px solid #ffcdd2 !important;
  font-size: 13px !important;
}

/* ── Typing indicator ─────────────────────────────────────────────────────── */
#aicw-panel .aicw-typing { display: flex !important; gap: 4px !important; align-items: center !important; padding: 12px 14px !important; }
#aicw-panel .aicw-dot {
  width: 7px !important; height: 7px !important;
  border-radius: 50% !important;
  background: var(--aicw-primary) !important;
  animation: aicw-bounce .9s infinite !important;
  flex-shrink: 0 !important;
}
#aicw-panel .aicw-dot:nth-child(2) { animation-delay: .18s !important; }
#aicw-panel .aicw-dot:nth-child(3) { animation-delay: .36s !important; }
@keyframes aicw-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30%            { transform: translateY(-5px); opacity: 1; }
}

/* ── Quick-reply chips ──────────────────────────────────────────────────────── */
#aicw-panel .aicw-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 0 4px 6px !important;
}
#aicw-panel .aicw-chip {
  padding: 6px 12px !important;
  border: 1.5px solid var(--aicw-primary) !important;
  border-radius: 20px !important;
  background: #fff !important;
  color: var(--aicw-primary) !important;
  font-size: 12.5px !important;
  cursor: pointer !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  transition: background .15s, color .15s !important;
}
#aicw-panel .aicw-chip:hover { background: var(--aicw-primary) !important; color: #fff !important; }
#aicw-panel .aicw-chips.aicw-consumed { display: none !important; }

/* ── Recipe card ────────────────────────────────────────────────────────────── */
#aicw-panel .aicw-recipe-card {
  background: var(--aicw-white) !important;
  border: 1px solid var(--aicw-border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.07) !important;
  width: 100% !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  box-sizing: border-box !important;
}
#aicw-panel .aicw-recipe-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 14px !important;
  background: rgba(46,125,50,.08) !important;
  box-sizing: border-box !important;
}
#aicw-panel .aicw-recipe-header span.icon { font-size: 20px !important; }
#aicw-panel .aicw-recipe-name {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--aicw-primary) !important;
  flex: 1 !important;
}
#aicw-panel .aicw-recipe-desc {
  padding: 10px 14px 4px !important;
  font-size: 13px !important;
  color: var(--aicw-text) !important;
  line-height: 1.5 !important;
}

/* Steps toggle */
#aicw-panel .aicw-steps-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  color: var(--aicw-primary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  user-select: none !important;
  box-sizing: border-box !important;
}
#aicw-panel .aicw-steps-toggle svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; }
#aicw-panel .aicw-steps-toggle .aicw-spacer { flex: 1 !important; }
#aicw-panel .aicw-steps-list { padding: 4px 14px 8px !important; display: none !important; }
#aicw-panel .aicw-steps-list.open { display: block !important; }
#aicw-panel .aicw-step-item {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 7px !important;
  align-items: flex-start !important;
  font-size: 12.5px !important;
  color: var(--aicw-text) !important;
  line-height: 1.5 !important;
}
#aicw-panel .aicw-step-num {
  min-width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: var(--aicw-primary) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

/* Ingredients section */
#aicw-panel .aicw-ingredients-title {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  color: var(--aicw-primary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
#aicw-panel .aicw-ingredients-title svg { width: 16px !important; height: 16px !important; }

#aicw-panel .aicw-ingredient-row {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 4px 10px !important;
  padding: 8px 10px !important;
  background: #f9f9f9 !important;
  border-radius: 10px !important;
  border: 1px solid var(--aicw-border) !important;
  box-sizing: border-box !important;
  width: calc(100% - 20px) !important;
}
#aicw-panel .aicw-ingredient-row.matched { border-color: rgba(56,142,60,.3) !important; }

#aicw-panel .aicw-ing-img {
  width: 46px !important;
  height: 46px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  background: #eee !important;
  display: block !important;
}
#aicw-panel .aicw-ing-placeholder {
  width: 46px !important;
  height: 46px !important;
  border-radius: 8px !important;
  background: rgba(46,125,50,.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 20px !important;
}
#aicw-panel .aicw-ing-info { flex: 1 !important; min-width: 0 !important; display: block !important; }
#aicw-panel .aicw-ing-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--aicw-text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}
#aicw-panel .aicw-ing-qty { font-size: 11.5px !important; color: var(--aicw-muted) !important; display: block !important; }
#aicw-panel .aicw-ing-price { font-size: 12px !important; color: var(--aicw-primary) !important; font-weight: 600 !important; display: block !important; }
#aicw-panel .aicw-ing-debug { font-size: 10px !important; color: #9e9e9e !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
#aicw-panel .aicw-ing-badge {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}
#aicw-panel .aicw-badge-matched   { background: rgba(56,142,60,.12) !important; color: var(--aicw-success) !important; }
#aicw-panel .aicw-badge-searching { background: var(--aicw-border) !important; color: var(--aicw-muted) !important; }
#aicw-panel .aicw-badge-no-match  { background: var(--aicw-border) !important; color: var(--aicw-muted) !important; }

/* Add-to-cart button */
#aicw-panel .aicw-add-all-btn {
  margin: 8px 10px 12px !important;
  width: calc(100% - 20px) !important;
  padding: 11px !important;
  background: var(--aicw-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  transition: background .15s, opacity .15s !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  box-sizing: border-box !important;
}
#aicw-panel .aicw-add-all-btn:hover:not(:disabled) { background: var(--aicw-primary-l) !important; }
#aicw-panel .aicw-add-all-btn:disabled { background: #bdbdbd !important; cursor: not-allowed !important; opacity: .8 !important; }
#aicw-panel .aicw-add-all-btn svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; }

/* ── Input row ──────────────────────────────────────────────────────────────── */
#aicw-input-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  border-top: 1px solid var(--aicw-border) !important;
  background: var(--aicw-white) !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
#aicw-input {
  flex: 1 !important;
  border: 1.5px solid var(--aicw-border) !important;
  border-radius: 22px !important;
  padding: 9px 14px !important;
  font-size: 13.5px !important;
  outline: none !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  color: var(--aicw-text) !important;
  background: var(--aicw-bg) !important;
  transition: border-color .15s !important;
  box-sizing: border-box !important;
}
#aicw-input:focus  { border-color: var(--aicw-primary) !important; background: #fff !important; }
#aicw-send {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: none !important;
  background: var(--aicw-primary) !important;
  color: #fff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background .15s !important;
  padding: 0 !important;
}
#aicw-send:hover { background: var(--aicw-primary-l) !important; }

/* ── RTL support ────────────────────────────────────────────────────────────── */
[dir="rtl"] #aicw-panel,
[dir="rtl"] #aicw-fab    { right: auto !important; left: 24px !important; }
[dir="rtl"] #aicw-panel .aicw-bubble-wrap.aicw-user  { justify-content: flex-start !important; }
[dir="rtl"] #aicw-panel .aicw-bubble-wrap.aicw-bot   { justify-content: flex-end !important; }
[dir="rtl"] #aicw-panel .aicw-bubble-wrap.aicw-user .aicw-bubble {
  border-bottom-right-radius: var(--aicw-radius) !important;
  border-bottom-left-radius: 4px !important;
}
[dir="rtl"] #aicw-panel .aicw-bubble-wrap.aicw-bot .aicw-bubble {
  border-bottom-left-radius: var(--aicw-radius) !important;
  border-bottom-right-radius: 4px !important;
}

/* ── Mobile full-screen ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #aicw-panel {
    bottom: 0 !important; right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 92vh !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
  }
  #aicw-fab { bottom: 90px !important; right: 16px !important; }
}