/* چت پرسش‌وپاسخ عمومی سایت (پایگاه دانش پرسش‌های متداول).
   رنگ‌ها از همان پالت برند تاریشا در tokens.css گرفته شده‌اند:
   سبزآبی عمیق #173B43، فیروزه‌ای #25B6A6، سنگ روشن #F3EFE7.
   استایل در فایل جدا نگه داشته شده تا ویجت مستقل از بیلد
   Tailwind کار کند. دکمه‌ی شناور پایینِ راست است؛ در موبایل
   پایینِ چپ است (قرص تماس در موبایل پنهان است) و در دسکتاپ
   قرص تماس پایینِ چپ است؛ این دو هم‌پوشانی ندارند. */

.faq-chat {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 50;
  font-family: inherit;
}

/* موبایل (زیر md): دکمه به سمت چپ می‌رود تا مزاحم محتوای
   سمت راست نباشد؛ قرص تماس در موبایل پنهان است پس سمت چپ آزاد است. */
@media (max-width: 767px) {
  .faq-chat {
    right: auto;
    left: 1rem;
  }
}

.faq-chat-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #173b43;
  color: #f3efe7;
  border: 1px solid rgba(243, 239, 231, 0.2);
  border-radius: 9999px;
  padding: 0.7rem 1.1rem;
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(23, 59, 67, 0.35);
}

.faq-chat-toggle:hover {
  color: #25b6a6;
}

.faq-chat-panel {
  display: none;
  flex-direction: column;
  width: min(92vw, 360px);
  height: min(70vh, 520px);
  background: #ffffff;
  border: 1px solid #e3ded2;
  border-radius: 1.25rem;
  box-shadow: 0 18px 50px rgba(23, 59, 67, 0.3);
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.faq-chat.open .faq-chat-panel {
  display: flex;
}

.faq-chat-head {
  background: #173b43;
  color: #f3efe7;
  padding: 0.9rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.faq-chat-head strong {
  font-size: 0.95rem;
}

.faq-chat-head small {
  display: block;
  color: rgba(243, 239, 231, 0.75);
  font-size: 0.75rem;
  margin-top: 0.15rem;
}

.faq-chat-close {
  background: transparent;
  border: 0;
  color: #f3efe7;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1;
}

.faq-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: #faf8f3;
}

.faq-chat-msg {
  max-width: 88%;
  padding: 0.6rem 0.8rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  line-height: 1.9;
  white-space: normal;
  overflow-wrap: anywhere;
}

.faq-chat-msg p {
  margin: 0 0 0.4rem;
}

.faq-chat-msg p:last-child {
  margin-bottom: 0;
}

.faq-chat-msg.user {
  align-self: flex-start;
  background: #173b43;
  color: #f3efe7;
  border-bottom-right-radius: 0.25rem;
}

.faq-chat-msg.bot {
  align-self: flex-end;
  background: #ffffff;
  border: 1px solid #e3ded2;
  border-bottom-left-radius: 0.25rem;
}

.faq-chat-msg a {
  color: #9c5a2c;
  font-weight: 700;
}

.faq-chat-links {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.faq-chat-links a {
  background: #173b43;
  color: #f3efe7 !important;
  border-radius: 0.6rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
  text-decoration: none;
}

.faq-chat-chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding: 0 1rem 0.6rem;
  background: #faf8f3;
}

.faq-chat-chip {
  border: 1px solid #25b6a6;
  color: #173b43;
  background: #ffffff;
  border-radius: 9999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  cursor: pointer;
}

.faq-chat-chip:hover {
  background: #e6f2ef;
}

.faq-chat-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid #e3ded2;
  background: #ffffff;
}

.faq-chat-form input {
  flex: 1;
  border: 1px solid #e3ded2;
  border-radius: 0.75rem;
  padding: 0.55rem 0.8rem;
  font-size: 0.875rem;
  font-family: inherit;
}

.faq-chat-form button {
  background: #25b6a6;
  color: #173b43;
  border: 0;
  border-radius: 0.75rem;
  padding: 0.55rem 1rem;
  font-weight: 800;
  cursor: pointer;
}

.faq-chat-form button:disabled {
  opacity: 0.6;
  cursor: wait;
}