/* Divar Plus – Chat UI v2 */
.dp-chat {
  --dp-accent: #a62626;
  --dp-accent-soft: #fbeaea;
  --dp-blue: #5b8def;
  --dp-border: #e6e6e6;
  --dp-muted: #7e7e7e;
  --dp-text: #1c1c1c;
  --dp-gray: #f2f2f2;
  --dp-notice-bg: #fdeadd;
  --dp-notice-text: #5a3a22;
  display: flex;
  flex-direction: row;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  color: var(--dp-text);
  border: 1px solid var(--dp-border);
  border-radius: 8px;
  overflow: hidden;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  direction: rtl;
  text-align: right;
  position: relative;
}
.dp-chat *, .dp-chat *::before, .dp-chat *::after { box-sizing: border-box; }
.dp-chat[data-mode="page"] { height: calc(100vh - 160px); min-height: 520px; max-height: 860px; }
.dp-chat[data-mode="modal"] { height: 100%; border: 0; border-radius: 0; }
.dp-chat button { font-family: inherit; cursor: pointer; }
.dp-chat [hidden] { display: none !important; }

/* ---------- side ---------- */
.dp-chat__side {
  flex: 0 0 360px;
  width: 360px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--dp-border);
  min-width: 0;
  background: #fff;
}
.dp-chat__side-head {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 20px; flex: 0 0 auto;
  border-bottom: 1px solid var(--dp-border);
}
.dp-chat__side-title { font-size: 15px; font-weight: 700; }
.dp-chat__tabs { display: flex; border-bottom: 1px solid var(--dp-border); flex: 0 0 auto; }
.dp-chat__tab {
  flex: 1; text-align: center; padding: 14px 8px; color: var(--dp-muted); font-size: 14px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.dp-chat__tab.is-active { color: var(--dp-accent); border-bottom-color: var(--dp-accent); font-weight: 600; }
.dp-chat__filters {
  display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto; flex: 0 0 auto;
  border-bottom: 1px solid var(--dp-border); scrollbar-width: none;
}
.dp-chat__filters::-webkit-scrollbar { display: none; }
.dp-chat__pill {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border: 1px solid #cfcfcf; border-radius: 999px;
  background: #fff; color: #444; font-size: 13px; line-height: 1.6; transition: .15s;
}
.dp-chat__pill:hover { border-color: #999; }
.dp-chat__pill.is-on { border-color: var(--dp-accent); color: var(--dp-accent); background: var(--dp-accent-soft); }
.dp-chat__pill-n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--dp-accent); color: #fff;
  font-size: 11px; display: inline-flex; align-items: center; justify-content: center;
}

.dp-chat__list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.dp-chat__list-empty { padding: 40px 20px; text-align: center; color: var(--dp-muted); }
.dp-chat__item {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin: 0;
  border-bottom: 1px solid var(--dp-border); cursor: pointer; transition: background .15s; outline: none;
}
.dp-chat__item:hover, .dp-chat__item:focus-visible { background: #fafafa; }
.dp-chat__item.is-active { background: var(--dp-gray); }
.dp-chat__thumb {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 6px; object-fit: cover; background: var(--dp-gray);
  display: inline-flex; align-items: center; justify-content: center; color: #b5b5b5;
}
.dp-chat__item-body { flex: 1 1 auto; min-width: 0; }
.dp-chat__item-title {
  font-weight: 700; font-size: 14px; color: var(--dp-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dp-chat__item-user { display: flex; align-items: center; gap: 4px; color: var(--dp-muted); font-size: 12px; margin-top: 2px; }
.dp-chat__ico { display: inline-flex; align-items: center; }
.dp-chat__item-last {
  margin-top: 4px; font-size: 13px; color: #444;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dp-chat__item-you { color: var(--dp-muted); }
.dp-chat__item.is-unread .dp-chat__item-last { font-weight: 700; color: var(--dp-text); }
.dp-chat__item-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 44px; padding-top: 2px; }
.dp-chat__item-date { font-size: 12px; color: var(--dp-muted); white-space: nowrap; }
.dp-chat__badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--dp-accent); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- main ---------- */
.dp-chat__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; position: relative; background: #fff; }
.dp-chat__empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: #b0b0b0; text-align: center; padding: 24px;
}
.dp-chat__empty p { margin: 0; color: var(--dp-muted); }

.dp-chat__head {
  position: relative; display: flex; align-items: center; gap: 12px;
  height: 64px; padding: 0 16px; flex: 0 0 auto; border-bottom: 1px solid var(--dp-border); background: #fff;
}
.dp-chat__back { display: none; }
.dp-chat__avatar {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-size: 18px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.dp-chat__head-info { flex: 1 1 auto; min-width: 0; }
.dp-chat__head-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-chat__status { font-size: 12px; color: var(--dp-muted); min-height: 18px; }
.dp-chat__status.is-online { color: #1c9a54; }
.dp-chat__status.is-online::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #1c9a54; margin-left: 5px;
}
.dp-chat__head-actions { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.dp-chat__iconbtn {
  width: 36px; height: 36px; border: 0; background: transparent; color: #555; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background .15s;
}
.dp-chat__iconbtn:hover { background: var(--dp-gray); }
.dp-chat__close--head { display: none; }
.dp-chat__close--float { position: absolute; top: 14px; left: 14px; }

.dp-chat__menu {
  position: absolute; top: 56px; left: 12px; z-index: 5; min-width: 170px; padding: 6px;
  background: #fff; border: 1px solid var(--dp-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  display: flex; flex-direction: column;
}
.dp-chat__menu-item {
  display: block; width: 100%; text-align: right; padding: 9px 12px; border: 0; background: transparent;
  color: var(--dp-text); border-radius: 6px; font-size: 13px; text-decoration: none;
}
.dp-chat__menu-item:hover { background: var(--dp-gray); color: var(--dp-text); }
.dp-chat__menu-item.is-danger { color: #c62828; }

.dp-chat__ad {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex: 0 0 auto;
  padding: 8px 16px; background: var(--dp-gray); border-bottom: 1px solid var(--dp-border);
  text-decoration: none; color: var(--dp-text);
}
.dp-chat__ad:hover { color: var(--dp-text); background: #ececec; }
.dp-chat__ad-img { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 4px; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; color: #b5b5b5; background: #e2e2e2; order: 2; }
.dp-chat__ad-text { display: flex; flex-direction: column; min-width: 0; order: 1; flex: 1 1 auto; }
.dp-chat__ad-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-chat__ad-price { font-size: 12px; color: var(--dp-muted); }

.dp-chat__scroll { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px 8px; overscroll-behavior: contain; background: #fff; }
.dp-chat__notice {
  background: var(--dp-notice-bg); color: var(--dp-notice-text); border-radius: 6px;
  padding: 12px 16px; font-size: 12.5px; line-height: 1.9; margin-bottom: 16px;
}
.dp-chat__notice:empty { display: none; }
.dp-chat__nomsg { text-align: center; color: var(--dp-muted); margin: 32px 0; font-size: 13px; }
.dp-chat__day { text-align: center; margin: 14px 0 10px; }
.dp-chat__day span { display: inline-block; background: var(--dp-gray); color: var(--dp-muted); font-size: 12px; padding: 2px 12px; border-radius: 999px; }

.dp-chat__row { display: flex; flex-direction: column; margin-bottom: 6px; }
.dp-chat__row.is-own { align-items: flex-start; }   /* RTL: شروع = راست */
.dp-chat__row.is-peer { align-items: flex-end; }
.dp-chat__bubble {
  max-width: min(75%, 520px); padding: 8px 12px 6px; border-radius: 12px; word-break: break-word;
}
.is-own .dp-chat__bubble { background: var(--dp-accent-soft); border-top-right-radius: 4px; }
.is-peer .dp-chat__bubble { background: var(--dp-gray); border-top-left-radius: 4px; }
.is-pending .dp-chat__bubble { opacity: .6; }
.is-failed .dp-chat__bubble { background: #fde7e7; outline: 1px solid #e57373; }
.dp-chat__text { white-space: pre-wrap; font-size: 14px; }
.dp-chat__meta { display: flex; align-items: center; gap: 4px; justify-content: flex-start; margin-top: 2px; color: var(--dp-muted); font-size: 11px; direction: rtl; }
.dp-chat__tick { display: inline-flex; color: #9a9a9a; }
.dp-chat__tick.is-read { color: var(--dp-blue); }
.dp-chat__retry { border: 0; background: transparent; color: #c62828; font-size: 12px; padding: 2px 4px; text-decoration: underline; }

/* quick replies */
.dp-chat__quick {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; padding: 8px 16px 10px; flex: 0 0 auto; position: relative;
  border-top: 1px solid transparent;
}
.dp-chat__qr {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px;
  border: 1px solid #bdbdbd; background: #fff; color: #444; font-size: 13px; line-height: 1.6; transition: .15s;
}
.dp-chat__qr:hover { border-color: var(--dp-accent); color: var(--dp-accent); }
.dp-chat__qr--more { background: var(--dp-gray); border-color: var(--dp-gray); }
.dp-chat__morewrap { position: relative; }
.dp-chat__morepop {
  position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 6; min-width: 220px; padding: 6px;
  background: #fff; border: 1px solid var(--dp-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14);
  display: flex; flex-direction: column;
}
.dp-chat__more-item { border: 0; background: transparent; text-align: right; padding: 9px 12px; border-radius: 6px; font-size: 13px; color: var(--dp-text); }
.dp-chat__more-item:hover { background: var(--dp-gray); }

/* composer */
.dp-chat__composer { display: flex; align-items: flex-end; gap: 8px; padding: 8px 16px 12px; border-top: 1px solid var(--dp-border); flex: 0 0 auto; background: #fff; }
.dp-chat__field { position: relative; flex: 1 1 auto; }
.dp-chat__input {
  display: block; width: 100%; max-height: 120px; resize: none; margin: 0; padding: 9px 4px; border: 0; outline: 0; box-shadow: none;
  background: transparent; font: inherit; font-size: 14px; line-height: 1.7; color: var(--dp-text); direction: rtl; text-align: right;
}
.dp-chat__input::placeholder { color: #9a9a9a; }
.dp-chat__counter { position: absolute; left: 0; bottom: -2px; font-size: 11px; color: var(--dp-muted); }
.dp-chat__send {
  flex: 0 0 40px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #b8b8b8;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: .15s;
}
.dp-chat__send svg { transform: scaleX(-1); }   /* جهت فلش در RTL */
.dp-chat__send.is-ready { background: var(--dp-accent); color: #fff; }
.dp-chat__send:disabled { cursor: default; }
.dp-chat__blocked { margin: 8px 16px 14px; padding: 12px 16px; background: #fde7e7; color: #8a1c1c; border-radius: 6px; font-size: 13px; }

/* ---------- modal ---------- */
html.dp-chat-lock, html.dp-chat-lock body { overflow: hidden !important; }
.dp-chat-overlay {
  position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: dpChatFade .18s ease-out;
}
.dp-chat-dialog {
  width: min(1040px, 100%); height: min(680px, 100%); background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.3); animation: dpChatPop .2s ease-out;
}
.dp-chat-root-modal { height: 100%; }
@keyframes dpChatFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dpChatPop { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .dp-chat__side { flex-basis: 300px; width: 300px; }
}
@media (max-width: 768px) {
  .dp-chat[data-mode="page"] { height: calc(100vh - 120px); min-height: 480px; border-radius: 0; border-left: 0; border-right: 0; }
  .dp-chat__side { flex: 1 1 100%; width: 100%; border-left: 0; }
  .dp-chat__main { display: none; flex: 1 1 100%; }
  .dp-chat--thread .dp-chat__side { display: none; }
  .dp-chat--thread .dp-chat__main { display: flex; }
  .dp-chat__back { display: inline-flex; margin-right: -8px; }
  .dp-chat__bubble { max-width: 85%; }
  .dp-chat-overlay { padding: 0; }
  .dp-chat-dialog { width: 100%; height: 100%; border-radius: 0; }
  .dp-chat__close--head { display: inline-flex; }
  .dp-chat__close--float { top: 12px; }
  .dp-chat__morepop { right: auto; left: 0; }
}