/* فونت و تنظیمات پایه */
body {
  margin: 0; /* حذف حاشیه‌های پیش‌فرض اطراف صفحه */
  padding: 0; /* حذف فاصله داخلی پیش‌فرض داخل صفحه */
  font-family: "Vazirmatn", sans-serif; /* تنظیم فونت پیش‌فرض به فونت فارسی Vazirmatn */
  background-color: #f4f4f8d0; /* تنظیم رنگ پس‌زمینه صفحه به یک رنگ خاکستری روشن با مقداری شفافیت */
  direction: rtl; /* تنظیم جهت متن و چیدمان به راست به چپ برای پشتیبانی از زبان فارسی */
}

/* دکمه همبرگر برای موبایل */
#hamburger-btn {
  display: none; /* مخفی کردن دکمه همبرگر به صورت پیش‌فرض (در دسکتاپ) */
  position: fixed; /* ثابت نگه داشتن دکمه در موقعیت مشخص صفحه */
  top: 15px; /* فاصله 15 پیکسل از بالای صفحه */
  right: 15px; /* فاصله 15 پیکسل از سمت راست صفحه */
  z-index: 1001; /* تنظیم لایه دکمه برای قرار گرفتن بالاتر از اکثر عناصر */
  background: #4c8bf5; /* رنگ پس‌زمینه دکمه به آبی روشن */
  color: white; /* رنگ متن یا آیکون داخل دکمه به سفید */
  font-size: 22px; /* اندازه فونت یا آیکون دکمه 22 پیکسل */
  padding: 10px 15px; /* فاصله داخلی 10 پیکسل عمودی و 15 پیکسل افقی */
  border: none; /* حذف حاشیه دور دکمه */
  border-radius: 8px; /* گرد کردن گوشه‌های دکمه به شعاع 8 پیکسل */
  cursor: pointer; /* تغییر شکل ماوس به حالت اشاره‌گر برای نشان دادن کلیک‌پذیری */
}

/* لایه تار برای موبایل هنگام باز بودن سایدبار */
#overlay {
  display: none; /* مخفی کردن لایه تار به صورت پیش‌فرض */
  position: fixed; /* ثابت نگه داشتن لایه در کل صفحه */
  top: 0; /* شروع از بالای صفحه */
  right: 0; /* شروع از سمت راست صفحه */
  bottom: 0; /* ادامه تا پایین صفحه */
  left: 0; /* ادامه تا سمت چپ صفحه */
  background-color: rgba(0, 0, 0, 0.4); /* رنگ پس‌زمینه مشکی با شفافیت 40% برای اثر تار */
  z-index: 1000; /* تنظیم لایه برای قرار گرفتن زیر سایدبار و بالای سایر عناصر */
}
#overlay.show {
  display: block; /* نمایش لایه تار وقتی کلاس show به آن اضافه شود */
}

/* کانتینر اصلی شامل سایدبار و بخش چت */
.container {
  display: flex; /* استفاده از فلکس‌باکس برای چیدمان افقی سایدبار و چت */
  height: 100vh; /* تنظیم ارتفاع به اندازه کل ارتفاع صفحه */
  overflow: hidden; /* جلوگیری از اسکرول شدن کل کانتینر */
}

/* سایدبار (در سمت راست برای زبان فارسی) */
.sidebar {
  width: 260px; /* عرض سایدبار 260 پیکسل */
  background: #ffffff; /* رنگ پس‌زمینه سایدبار سفید */
  border-left: 1px solid #ddd; /* خط مرزی 1 پیکسلی خاکستری در سمت چپ */
  padding: 20px; /* فاصله داخلی 20 پیکسل از همه طرف */
  box-sizing: border-box; /* شامل کردن پدینگ و مرز در محاسبه عرض */
  display: flex; /* استفاده از فلکس‌باکس برای چیدمان داخلی */
  flex-direction: column; /* چیدمان عمودی عناصر داخل سایدبار */
  gap: 15px; /* فاصله 15 پیکسلی بین عناصر داخل سایدبار */
  overflow-y: auto; /* امکان اسکرول عمودی در صورت زیاد شدن محتوا */
  z-index: 1002; /* تنظیم لایه برای قرار گرفتن بالاتر از لایه تار */
}

/* عنوان یا لوگو در بالای سایدبار */
.logo {
  font-size: 20px; /* اندازه فونت لوگو 20 پیکسل */
  font-weight: bold; /* ضخیم کردن فونت برای برجسته شدن */
  color: #444; /* رنگ متن به خاکستری تیره */
  margin-bottom: 10px; /* فاصله 10 پیکسلی از پایین برای جداسازی */
}

/* دکمه افزودن مکالمه جدید */
#new-chat-btn {
  padding: 10px 15px; /* فاصله داخلی 10 پیکسل عمودی و 15 پیکسل افقی */
  background: #4c8bf5; /* رنگ پس‌زمینه دکمه به آبی روشن */
  color: white; /* رنگ متن دکمه به سفید */
  border: none; /* حذف حاشیه دور دکمه */
  border-radius: 8px; /* گرد کردن گوشه‌های دکمه به شعاع 8 پیکسل */
  font-size: 14px; /* اندازه فونت 14 پیکسل */
  cursor: pointer; /* تغییر شکل ماوس به حالت اشاره‌گر */
  transition: background 0.2s; /* انیمیشن تغییر رنگ پس‌زمینه در 0.2 ثانیه */
}
#new-chat-btn:hover {
  background: #357ae8; /* تغییر رنگ پس‌زمینه به آبی تیره‌تر هنگام هاور */
}

/* لیست مکالمات داخل سایدبار */
.history-list {
  flex: 1; /* اختصاص تمام فضای باقی‌مانده به لیست مکالمات */
  display: flex; /* استفاده از فلکس‌باکس برای چیدمان */
  flex-direction: column; /* چیدمان عمودی آیتم‌های مکالمه */
  gap: 10px; /* فاصله 10 پیکسلی بین آیتم‌های مکالمه */
}

/* هر آیتم مکالمه */
.history-item {
  background: #f0f0f0; /* رنگ پس‌زمینه خاکستری روشن برای هر آیتم */
  padding: 10px; /* فاصله داخلی 10 پیکسل از همه طرف */
  border-radius: 8px; /* گرد کردن گوشه‌ها به شعاع 8 پیکسل */
  display: flex; /* استفاده از فلکس‌باکس برای چیدمان داخلی */
  align-items: center; /* تراز عمودی عناصر داخلی در وسط */
  gap: 6px; /* فاصله 6 پیکسلی بین عناصر داخل آیتم */
  transition: background 0.2s; /* انیمیشن تغییر رنگ پس‌زمینه در 0.2 ثانیه */
}
.history-item:hover {
  background: #e0e0e0; /* تغییر رنگ پس‌زمینه به خاکستری تیره‌تر هنگام هاور */
}

/* عنوان مکالمه قابل کلیک */
.history-item div[style*="cursor: pointer"] {
  flex: 1; /* اختصاص حداکثر فضای ممکن به عنوان مکالمه */
  overflow: hidden; /* مخفی کردن محتوای اضافی */
  white-space: nowrap; /* جلوگیری از شکستن خط متن */
  text-overflow: ellipsis; /* نمایش سه‌نقطه برای متن طولانی */
}

/* دکمه‌های ویرایش و حذف */
.edit-btn,
.delete-btn {
  background: none; /* بدون رنگ پس‌زمینه */
  border: none; /* حذف حاشیه دور دکمه */
  cursor: pointer; /* تغییر شکل ماوس به حالت اشاره‌گر */
  font-size: 16px; /* اندازه فونت 16 پیکسل */
  padding: 2px 4px; /* فاصله داخلی 2 پیکسل عمودی و 4 پیکسل افقی */
  color: #888; /* رنگ خاکستری برای آیکون یا متن دکمه */
  transition: background 0.2s ease; /* انیمیشن تغییر رنگ پس‌زمینه در 0.2 ثانیه */
}
.edit-btn:hover,
.delete-btn:hover {
  background-color: #eee; /* رنگ پس‌زمینه خاکستری روشن هنگام هاور */
  border-radius: 4px; /* گرد کردن گوشه‌ها به شعاع 4 پیکسل */
}
.delete-btn:hover {
  color: red; /* تغییر رنگ به قرمز برای دکمه حذف هنگام هاور */
}

/* فیلد ویرایش عنوان مکالمه */
.edit-title-input {
  flex: 1; /* اختصاص حداکثر فضای ممکن به فیلد ورودی */
  font-size: 14px; /* اندازه فونت 14 پیکسل */
  padding: 6px; /* فاصله داخلی 6 پیکسل از همه طرف */
  border: 1px solid #aaa; /* حاشیه 1 پیکسلی خاکستری دور فیلد */
  border-radius: 6px; /* گرد کردن گوشه‌ها به شعاع 6 پیکسل */
}

/* ناحیه اصلی چت */
.chat-area {
  flex: 1; /* اختصاص تمام فضای باقی‌مانده به ناحیه چت */
  display: flex; /* استفاده از فلکس‌باکس برای چیدمان داخلی */
  flex-direction: column; /* چیدمان عمودی عناصر داخل ناحیه چت */
  background: #fefefe; /* رنگ پس‌زمینه سفید روشن */
}

/* بخش نمایش پیام‌ها */
.messages {
  flex: 1; /* اختصاص تمام فضای باقی‌مانده به بخش پیام‌ها */
  padding: 20px; /* فاصله داخلی 20 پیکسل از همه طرف */
  overflow-y: auto; /* امکان اسکرول عمودی برای پیام‌های زیاد */
  display: flex; /* استفاده از فلکس‌باکس برای چیدمان پیام‌ها */
  flex-direction: column; /* چیدمان عمودی پیام‌ها */
  gap: 10px; /* فاصله 10 پیکسلی بین پیام‌ها */
}

/* استایل کلی پیام */
.message {
  max-width: 70%; /* حداکثر عرض پیام 70 درصد ناحیه چت */
  padding: 12px 16px; /* فاصله داخلی 12 پیکسل عمودی و 16 پیکسل افقی */
  border-radius: 12px; /* گرد کردن گوشه‌ها به شعاع 12 پیکسل */
  font-size: 15px; /* اندازه فونت 15 پیکسل */
  line-height: 1.6; /* فاصله خطوط 1.6 برابر اندازه فونت */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* سایه ملایم برای پیام */
}

/* پیام کاربر */
.message.user {
  background: #d0ddd76c; /* رنگ پس‌زمینه سبز-خاکستری روشن با شفافیت */
  align-self: flex-end; /* تراز پیام کاربر به سمت راست */
  text-align: right; /* تراز متن به راست برای زبان فارسی */
}

/* پیام ربات */
.message.bot {
  background: #ffffff7c; /* رنگ پس‌زمینه سفید با مقداری شفافیت */
  border: 1px solid #ddd; /* حاشیه 1 پیکسلی خاکستری دور پیام */
  align-self: flex-start; /* تراز پیام ربات به سمت چپ */
  text-align: right; /* تراز متن به راست برای زبان فارسی */
}

/* ناحیه ورودی پیام */
.input-box {
  display: flex; /* استفاده از فلکس‌باکس برای چیدمان افقی */
  padding: 10px 15px; /* فاصله داخلی 10 پیکسل عمودی و 15 پیکسل افقی */
  border-top: 1px solid #ddd; /* خط مرزی 1 پیکسلی خاکستری در بالا */
  background: white; /* رنگ پس‌زمینه سفید */
}

/* فیلد نوشتن پیام */
.input-box input {
  flex: 1; /* اختصاص حداکثر فضای ممکن به فیلد ورودی */
  padding: 12px; /* فاصله داخلی 12 پیکسل از همه طرف */
  border-radius: 8px; /* گرد کردن گوشه‌ها به شعاع 8 پیکسل */
  border: 1px solid #ccc; /* حاشیه 1 پیکسلی خاکستری روشن دور فیلد */
  font-size: 15px; /* اندازه فونت 15 پیکسل */
}

/* دکمه ارسال پیام */
.input-box button {
  margin-right: 10px; /* فاصله 10 پیکسلی از سمت راست */
  padding: 12px 18px; /* فاصله داخلی 12 پیکسل عمودی و 18 پیکسل افقی */
  background: #4c8bf5; /* رنگ پس‌زمینه آبی روشن */
  color: white; /* رنگ متن دکمه به سفید */
  border: none; /* حذف حاشیه دور دکمه */
  border-radius: 8px; /* گرد کردن گوشه‌ها به شعاع 8 پیکسل */
  font-size: 14px; /* اندازه فونت 14 پیکسل */
  cursor: pointer; /* تغییر شکل ماوس به حالت اشاره‌گر */
  transition: background 0.2s; /* انیمیشن تغییر رنگ پس‌زمینه در 0.2 ثانیه */
}
.input-box button:hover {
  background: #357ae8; /* تغییر رنگ پس‌زمینه به آبی تیره‌تر هنگام هاور */
}

/* حالت واکنش‌گرا برای موبایل */
@media (max-width: 768px) {
  #hamburger-btn {
    display: block; /* نمایش دکمه همبرگر در صفحه‌نمایش‌های کوچک‌تر از 768 پیکسل */
  }

  .container {
    flex-direction: column-reverse; /* تغییر چیدمان به عمودی و قرار گرفتن سایدبار زیر چت */
  }

  .sidebar {
    position: fixed; /* ثابت کردن سایدبار برای حالت کشویی */
    top: 0; /* شروع از بالای صفحه */
    right: -100%; /* مخفی کردن سایدبار در سمت راست صفحه به صورت پیش‌فرض */
    width: 260px; /* عرض سایدبار 260 پیکسل */
    height: 100%; /* ارتفاع کامل صفحه */
    background: #fff; /* رنگ پس‌زمینه سفید */
    z-index: 1002; /* تنظیم لایه برای قرار گرفتن بالاتر از لایه تار */
    transition: right 0.3s ease; /* انیمیشن حرکت سایدبار در 0.3 ثانیه */
    border-left: none; /* حذف مرز چپ */
    border-right: 1px solid #ccc; /* اضافه کردن مرز 1 پیکسلی در سمت راست */
    padding: 20px; /* فاصله داخلی 20 پیکسل از همه طرف */
    flex-direction: column; /* چیدمان عمودی عناصر داخل سایدبار */
    overflow-y: auto; /* امکان اسکرول عمودی برای محتوای زیاد */
  }

  .sidebar.open {
    right: 0; /* نمایش سایدبار با حرکت به موقعیت صفر از سمت راست */
  }

  .history-item {
    min-width: 200px; /* حداقل عرض 200 پیکسل برای آیتم‌های مکالمه */
    flex-direction: row; /* چیدمان افقی عناصر داخل آیتم */
    flex-shrink: 0; /* جلوگیری از کوچک شدن آیتم */
    border: 1px solid #ddd; /* حاشیه 1 پیکسلی خاکستری دور آیتم */
  }

  .edit-title-input {
    font-size: 13px; /* اندازه فونت 13 پیکسل برای فیلد ویرایش */
    padding: 5px; /* فاصله داخلی 5 پیکسل از همه طرف */
  }

  .messages {
    padding: 15px; /* کاهش فاصله داخلی به 15 پیکسل در موبایل */
  }

  .input-box input {
    font-size: 14px; /* اندازه فونت 14 پیکسل برای فیلد ورودی */
  }

  .input-box button {
    font-size: 13px; /* اندازه فونت 13 پیکسل برای دکمه ارسال */
    padding: 10px 14px; /* فاصله داخلی 10 پیکسل عمودی و 14 پیکسل افقی */
  }

  #theme-btn-container {
    display: flex; /* استفاده از فلکس‌باکس برای چیدمان */
    justify-content: flex-end; /* تراز دکمه به سمت راست */
    margin-bottom: 10px; /* فاصله 10 پیکسلی از پایین */
  }
}

/* رفع مشکل اسکرول در موبایل */
.chat-area {
  height: 100%; /* ارتفاع کامل برای ناحیه چت */
  min-height: 0; /* اجازه کوچک شدن ارتفاع در صورت نیاز */
  display: flex; /* استفاده از فلکس‌باکس برای چیدمان */
  flex-direction: column; /* چیدمان عمودی عناصر داخلی */
}

.messages {
  flex: 1; /* اختصاص تمام فضای باقی‌مانده به بخش پیام‌ها */
  min-height: 0; /* اجازه کوچک شدن ارتفاع در صورت نیاز */
  overflow-y: auto; /* امکان اسکرول عمودی برای پیام‌ها */
  -webkit-overflow-scrolling: touch; /* بهبود اسکرول نرم در دستگاه‌های iOS */
}

body.dark-mode {
  background-color: #1a1a1a; /* رنگ پس‌زمینه تیره برای حالت دارک مود */
  color: #e0e0e0; /* رنگ متن روشن برای حالت دارک مود */
}

body.dark-mode .message {
  background-color: #1e1e1e; /* رنگ پس‌زمینه تیره برای پیام‌ها در حالت دارک مود */
  color: #ffffff; /* رنگ متن سفید برای پیام‌ها */
}

body.dark-mode .sidebar {
  background-color: #222222; /* رنگ پس‌زمینه تیره برای سایدبار */
  color: #070707; /* رنگ متن برای سایدبار (این رنگ خیلی تیره است، ممکن است نیاز به تغییر داشته باشد) */
}

body.dark-mode .chat-area {
  background-color: #2a2a2a; /* رنگ پس‌زمینه تیره برای ناحیه چت */
}

body.dark-mode #theme-toggle {
  background: #6b9cff; /* رنگ پس‌زمینه آبی روشن برای دکمه تغییر تم */
}

#theme-btn-container {
  display: flex; /* استفاده از فلکس‌باکس برای چیدمان */
  justify-content: flex-end; /* تراز دکمه به سمت راست */
  margin-bottom: 10px; /* فاصله 10 پیکسلی از پایین */
}

#theme-toggle {
  font-size: 14px; /* اندازه فونت 14 پیکسل برای دکمه تغییر تم */
  padding: 7px 10px; /* فاصله داخلی 7 پیکسل عمودی و 10 پیکسل افقی */
  border-radius: 10px; /* گرد کردن گوشه‌ها به شعاع 10 پیکسل */
  border: none; /* حذف حاشیه دور دکمه */
  background: #4c8bf5; /* رنگ پس‌زمینه آبی روشن */
  color: white; /* رنگ متن سفید */
  cursor: pointer; /* تغییر شکل ماوس به حالت اشاره‌گر */
  transition: background 0.2s; /* انیمیشن تغییر رنگ پس‌زمینه در 0.2 ثانیه */
}

#theme-toggle:hover {
  background: #357ae8; /* تغییر رنگ پس‌زمینه به آبی تیره‌تر هنگام هاور */
}