/**
 * تم وردپرس اغلب استایل chat-ui-kit را override می‌کند — این فایل بعد از باندل ویجت لود می‌شود.
 */

/* هدر: راست‌چین واقعی فارسی (تم‌هایی که text-align یا direction روی فرزندان می‌گذارند) */
.kndpi-widget .kndpi-widget-glass-header {
  direction: rtl !important;
}

.kndpi-widget .kndpi-header-titles,
.kndpi-widget .kndpi-header-titles * {
  text-align: right !important;
  unicode-bidi: plaintext;
}

.kndpi-widget .kndpi-header-titles .inline-flex {
  text-align: center !important;
}

/* فیلد نوشتن پیام: پس‌زمینه سفید + بوردر نازک کم‌رنگ (تم وردپرس اغلب آبی/خاکستری می‌گذارد) */
.kndpi-widget .kndpi-widget-chat-input .cs-message-input__content-editor-wrapper,
.kndpi-widget .kndpi-widget-chat-input .cs-message-input__content-editor {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #1e293b !important;
}

.kndpi-widget .kndpi-widget-chat-input .cs-message-input__content-editor-wrapper {
  border: 1px solid rgba(0, 0, 0, 0.09) !important;
  box-shadow: none !important;
}

.kndpi-widget .kndpi-widget-chat-input .cs-message-input__content-editor-wrapper:focus-within {
  border-color: rgba(0, 0, 0, 0.14) !important;
}

/* دکمه ارسال chat-ui-kit: متن پیش‌فرض / &nbsp در RTL گاهی به صورت «nbsp&» دیده می‌شود — فقط آیکن بماند */
.kndpi-widget .kndpi-widget-chat-input .cs-button--send {
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
}
.kndpi-widget .kndpi-widget-chat-input .cs-button--send svg {
  font-size: 1rem !important;
  line-height: 1 !important;
}
.kndpi-widget .kndpi-msg--visitor .cs-message__content {
  background-color: #fafafa !important;
  color: #171717 !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: none !important;
}

.kndpi-widget .kndpi-msg--bot .cs-message__content,
.kndpi-widget .kndpi-msg--operator .cs-message__content {
  background-color: #ffffff !important;
  color: #171717 !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: none !important;
}

/**
 * chat-ui-kit پیام‌لیست را position:absolute و bottom:0 برای .cs-typing-indicator می‌گذارد؛
 * وقتی تایپینگ داخل اسکرول است باید جریان عادی اسکرول باشد.
 */
.kndpi-widget .cs-message-list__scroll-wrapper .cs-typing-indicator {
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  height: auto !important;
  line-height: inherit !important;
  background-color: #ffffff !important;
}

.kndpi-widget .kndpi-typing-row .cs-typing-indicator__indicator {
  background-color: transparent !important;
}

.kndpi-widget .kndpi-typing-row .cs-typing-indicator__dot,
.kndpi-widget .kndpi-typing-bubble .cs-typing-indicator__dot {
  background-color: #404040 !important;
}

.kndpi-widget .kndpi-typing-row .cs-typing-indicator,
.kndpi-widget .kndpi-typing-bubble.cs-typing-indicator {
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: none !important;
  /* فاصله بین سه‌نقطه و متن (در RTL با gap درست عمل می‌کند) */
  gap: 0.65rem !important;
  column-gap: 0.65rem !important;
}

.kndpi-widget .kndpi-typing-row .cs-typing-indicator__text,
.kndpi-widget .kndpi-typing-bubble .cs-typing-indicator__text {
  color: #525252 !important;
  margin: 0 !important;
  margin-inline-start: 0.15rem !important;
}