/* ============================================================
   assistant.css — AI Shopping Assistant widget
   Launcher button + slide-up chat panel. Positioned above the
   existing floating WhatsApp button (bottom-6 right-6, z-90) so
   neither overlaps the other.
   ============================================================ */

#assistant-launcher {
  position: fixed;
  bottom: 96px;
  right: 24px;
  z-index: 91;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(79,70,229,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
  font-size: 24px;
}
#assistant-launcher:hover { transform: scale(1.08); box-shadow: 0 14px 34px rgba(79,70,229,0.5); }
#assistant-launcher:active { transform: scale(0.96); }
#assistant-launcher .assistant-launcher-badge {
  position: absolute; top: -2px; right: -2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #22c55e; border: 2px solid #fff;
}
@media (max-width: 639px) { #assistant-launcher { bottom: 88px; right: 16px; width: 52px; height: 52px; } }

#assistant-panel {
  position: fixed;
  bottom: 96px;
  right: 24px;
  z-index: 95;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 600px;
  max-height: calc(100vh - 140px);
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 24px 64px rgba(17,24,39,0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(.22,1,.36,1);
}
#assistant-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
@media (max-width: 639px) {
  #assistant-panel {
    bottom: 0; right: 0; left: 0; top: 0;
    width: 100%; max-width: 100%; height: 100%; max-height: 100%;
    border-radius: 0;
  }
}

.assistant-header {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  color: #fff;
  flex-shrink: 0;
}
.assistant-header-logo {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
  overflow: hidden;
}
.assistant-header-logo img { width: 100%; height: 100%; object-fit: cover; }
.assistant-header-title { font-weight: 700; font-size: 14.5px; line-height: 1.2; }
.assistant-header-subtitle { font-size: 11.5px; color: rgba(255,255,255,0.8); display: flex; align-items: center; gap: 4px; }
.assistant-header-subtitle::before { content:''; width:7px; height:7px; border-radius:50%; background:#4ade80; display:inline-block; }
.assistant-close-btn {
  margin-left: auto;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12);
  color: #fff; font-size: 18px; line-height: 1;
  transition: background 0.15s ease;
}
.assistant-close-btn:hover { background: rgba(255,255,255,0.22); }

#assistant-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f9fafb;
}

.assistant-msg {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-line;
  word-break: break-word;
}
.assistant-msg-bot {
  align-self: flex-start;
  background: #fff;
  color: #374151;
  border: 1px solid #f0eefe;
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 8px rgba(17,24,39,0.04);
}
.assistant-msg-user {
  align-self: flex-end;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.assistant-collection-link { padding: 0; background: transparent; border: none; box-shadow: none; max-width: 100%; }
.assistant-collection-link button {
  width: 100%; text-align: left;
  background: #fff; border: 1px solid #e0e7ff; color: #4f46e5;
  font-weight: 700; font-size: 13px;
  padding: 10px 14px; border-radius: 14px;
  transition: background 0.15s ease;
}
.assistant-collection-link button:hover { background: #eef2ff; }

.assistant-chip-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-self: flex-start;
  max-width: 92%;
}
.assistant-chip {
  font-size: 12px; font-weight: 600; color: #4f46e5;
  background: #eef2ff; border: 1px solid #e0e7ff; border-radius: 999px;
  padding: 7px 13px; transition: background 0.15s ease, transform 0.15s ease;
}
.assistant-chip:hover { background: #e0e7ff; transform: translateY(-1px); }

.assistant-product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-self: stretch;
}
.assistant-product-card {
  background: #fff;
  border: 1px solid #f0eefe;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(17,24,39,0.04);
}
.assistant-product-imgwrap { display: block; width: 100%; aspect-ratio: 1; background: #f3f4f6; overflow: hidden; }
.assistant-product-imgwrap img { width: 100%; height: 100%; object-fit: cover; }
.assistant-product-info { padding: 8px 9px 10px; }
.assistant-product-name { font-size: 11.5px; font-weight: 700; color: #1f2937; line-height: 1.25; margin-bottom: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.assistant-product-price { font-size: 12px; font-weight: 700; color: #4f46e5; margin-bottom: 2px; }
.assistant-product-stock { font-size: 10px; font-weight: 600; margin-bottom: 2px; }
.assistant-product-stock.in { color: #16a34a; }
.assistant-product-stock.out { color: #dc2626; }
.assistant-product-sizes { font-size: 10px; color: #9ca3af; margin-bottom: 6px; }
.assistant-product-actions { display: flex; gap: 5px; }
.assistant-product-actions button {
  flex: 1; font-size: 10.5px; font-weight: 700;
  padding: 6px 4px; border-radius: 8px;
  background: #f3f4f6; color: #4b5563;
  transition: background 0.15s ease;
}
.assistant-product-actions button.primary { background: #4f46e5; color: #fff; }
.assistant-product-actions button:hover { filter: brightness(0.96); }

.assistant-typing { display: flex; gap: 4px; align-self: flex-start; padding: 10px 14px; }
.assistant-typing span { width: 6px; height: 6px; border-radius: 50%; background: #c7d2fe; animation: assistantTypingBounce 1.1s infinite ease-in-out; }
.assistant-typing span:nth-child(2) { animation-delay: 0.15s; }
.assistant-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes assistantTypingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

#assistant-quickbar {
  display: flex; gap: 6px; overflow-x: auto;
  padding: 8px 12px;
  border-top: 1px solid #f1f0f5;
  flex-shrink: 0;
  scrollbar-width: none;
}
#assistant-quickbar::-webkit-scrollbar { display: none; }
#assistant-quickbar button {
  flex-shrink: 0;
  font-size: 11.5px; font-weight: 600; color: #4f46e5;
  background: #eef2ff; border-radius: 999px; padding: 6px 12px;
  white-space: nowrap;
}

.assistant-input-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid #f1f0f5;
  flex-shrink: 0;
  background: #fff;
}
.assistant-input-row input {
  flex: 1; border: 1px solid #e5e7eb; border-radius: 999px;
  padding: 10px 16px; font-size: 13.5px; outline: none;
  transition: border-color 0.15s ease;
}
.assistant-input-row input:focus { border-color: #a5b4fc; }
.assistant-input-row button[type="submit"] {
  width: 38px; height: 38px; border-radius: 50%;
  background: #4f46e5; color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 0.15s ease;
}
.assistant-input-row button[type="submit"]:hover { background: #4338ca; }