/*
 * توکن‌های مشترک Dara UI برای تیلویند ۴.
 *
 * 🔴 جانشین tailwind.preset.cjs است. تیلویند ۴ پیکربندی جاوااسکریپت
 *    را کنار گذاشته و توکن‌ها را از CSS می‌خواند، پس preset دیگر
 *    خوانده نمی‌شود. اگر فایل قدیمی می‌ماند، روزی کسی مقداری در آن
 *    عوض می‌کرد و هیچ اتفاقی نمی‌افتاد.
 *
 * 🔴 چرا `@theme inline` و نه `@theme`: مقدار این توکن‌ها خودش
 *    `var()` است و بسته به scope عوض می‌شود — `.dara-light-mode` یک
 *    مقدار دارد و `.dark` مقدار دیگر. `@theme` معمولی مقدار را در
 *    `:root` منجمد می‌کند و آن‌وقت حالت تیره بی‌اثر می‌شود.
 *    `inline` همان `var(--primary)` را در محل مصرف می‌گذارد، پس
 *    scope زنده می‌ماند.
 */

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);

  /*
   * مقیاس برند به‌صورت رنگ‌های نام‌دار.
   *
   * ⚠️ در تیلویند ۳ این پله‌ها *اجباری* بودند: `bg-primary/20` روی
   *    رنگی که مقدارش var() است بی‌صدا هیچ کلاسی تولید نمی‌کرد.
   *    تیلویند ۴ با color-mix این کار را می‌کند، پس از این به بعد
   *    `bg-primary/20` هم کار می‌کند.
   *
   *    پله‌ها عمداً نگه داشته شدند — ۱۴۵ جا مصرف می‌شوند و حذفشان
   *    کار این مهاجرت نیست. ولی برای کد تازه، مقیاس معنایی است نه
   *    الزام فنی: اگر پلهٔ نام‌دار معنا دارد از آن استفاده کن،
   *    وگرنه opacity هم درست است.
   */
  --color-primary-hover: var(--primary-hover);
  --color-primary-active: var(--primary-active);
  --color-primary-05: var(--primary-05);
  --color-primary-10: var(--primary-10);
  --color-primary-15: var(--primary-15);
  --color-primary-20: var(--primary-20);
  --color-primary-30: var(--primary-30);
  --color-primary-40: var(--primary-40);
  --color-primary-60: var(--primary-60);

  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  /* بوم صفحهٔ پروفایل — جانشین bg-gray-50 که ۲۲ بار تکرار شده بود */
  --color-canvas: var(--dara-color-canvas, #f8fafc);

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
}

#dara-shopping-assistant-root,
.dara-shopping-assistant {
  direction: rtl;
}

.dara-shopping-assistant {
  --dara-sa-primary: var(--primary, #c70036);
  --dara-sa-primary-foreground: var(--primary-foreground, #ffffff);
  --dara-sa-card: var(--card, #ffffff);
  --dara-sa-foreground: var(--foreground, #0f172a);
  --dara-sa-muted: var(--muted-foreground, #64748b);
  --dara-sa-border: var(--border, #e2e8f0);
  --dara-sa-muted-bg: var(--muted, #f8fafc);
  --dara-sa-radius: var(--radius, 16px);
  --dara-sa-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
  position: fixed;
  inset-inline-end: 22px;
  inset-block-end: 22px;
  z-index: 99999;
  color: var(--dara-sa-foreground);
  font-family: Peyda, IRANSans, Tahoma, sans-serif;
}

.dara-shopping-assistant *,
.dara-shopping-assistant *::before,
.dara-shopping-assistant *::after {
  box-sizing: border-box;
}

.dara-shopping-assistant__launcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  border: 0;
  border-radius: 999px;
  padding: 14px 18px;
  background: var(--dara-sa-primary);
  color: var(--dara-sa-primary-foreground);
  box-shadow: var(--dara-sa-shadow);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.dara-shopping-assistant__launcher svg {
  width: 20px;
  height: 20px;
}

.dara-shopping-assistant__panel {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 66px;
  width: min(392px, calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid var(--dara-sa-border);
  border-radius: 24px;
  background: var(--dara-sa-card);
  box-shadow: var(--dara-sa-shadow);
}

.dara-shopping-assistant__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--dara-sa-border);
}

.dara-shopping-assistant__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.dara-shopping-assistant__brand-icon,
.dara-shopping-assistant__icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--dara-sa-border);
  border-radius: 16px;
  background: var(--dara-sa-muted-bg);
  color: var(--dara-sa-foreground);
}

.dara-shopping-assistant__brand-icon svg,
.dara-shopping-assistant__icon-button svg {
  width: 20px;
  height: 20px;
}

.dara-shopping-assistant__icon-button {
  cursor: pointer;
}

.dara-shopping-assistant__header strong,
.dara-shopping-assistant__header small {
  display: block;
}

.dara-shopping-assistant__header strong {
  font-size: 15px;
}

.dara-shopping-assistant__header small {
  margin-top: 3px;
  color: var(--dara-sa-muted);
  font-size: 12px;
}

.dara-shopping-assistant__messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 370px;
  overflow: auto;
  padding: 16px;
}

.dara-shopping-assistant__message {
  max-width: 88%;
  border-radius: 18px;
  padding: 11px 13px;
  font-size: 14px;
  line-height: 1.85;
  white-space: pre-wrap;
}

.dara-shopping-assistant__message--assistant {
  align-self: flex-end;
  border: 1px solid var(--dara-sa-border);
  background: var(--dara-sa-muted-bg);
}

.dara-shopping-assistant__message--user {
  align-self: flex-start;
  background: color-mix(in srgb, var(--dara-sa-primary) 10%, #ffffff);
  color: var(--dara-sa-primary);
}

.dara-shopping-assistant__products {
  display: grid;
  gap: 8px;
}

.dara-shopping-assistant__products--assistant {
  align-self: flex-end;
  width: 88%;
}

.dara-shopping-assistant__product {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  border: 1px solid var(--dara-sa-border);
  border-radius: 16px;
  padding: 11px 12px;
  color: var(--dara-sa-foreground);
  text-decoration: none;
  background: var(--dara-sa-card);
}

.dara-shopping-assistant__product img {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 14px;
  object-fit: cover;
  background: var(--dara-sa-muted-bg);
}

.dara-shopping-assistant__product strong,
.dara-shopping-assistant__product small {
  display: block;
}

.dara-shopping-assistant__product strong {
  font-size: 13px;
}

.dara-shopping-assistant__product small {
  margin-top: 4px;
  color: var(--dara-sa-muted);
  font-size: 12px;
}

.dara-shopping-assistant__product svg {
  flex: 0 0 auto;
  margin-inline-start: auto;
  width: 17px;
  height: 17px;
  color: var(--dara-sa-primary);
}

.dara-shopping-assistant__prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 14px;
}

.dara-shopping-assistant__prompts button {
  border: 1px solid color-mix(in srgb, var(--dara-sa-primary) 18%, var(--dara-sa-border));
  border-radius: 999px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--dara-sa-primary) 7%, #ffffff);
  color: var(--dara-sa-primary);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

.dara-shopping-assistant__prompts button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.dara-shopping-assistant__form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--dara-sa-border);
}

.dara-shopping-assistant__form input {
  min-width: 0;
  flex: 1;
  border: 1px solid var(--dara-sa-border);
  border-radius: 16px;
  padding: 12px;
  background: var(--dara-sa-card);
  color: var(--dara-sa-foreground);
  font: inherit;
}

.dara-shopping-assistant__form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  border: 0;
  border-radius: 16px;
  background: var(--dara-sa-primary);
  color: var(--dara-sa-primary-foreground);
  cursor: pointer;
}

.dara-shopping-assistant__form button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.dara-shopping-assistant__form button svg {
  width: 19px;
  height: 19px;
}

@media (max-width: 640px) {
  .dara-shopping-assistant {
    inset-inline-end: 14px;
    inset-block-end: 14px;
  }

  .dara-shopping-assistant__launcher {
    width: 58px;
    height: 58px;
    padding: 0;
  }

  .dara-shopping-assistant__launcher span {
    display: none;
  }

  .dara-shopping-assistant__panel {
    inset-inline-end: -2px;
    width: calc(100vw - 24px);
  }
}