/*
 *  پشتیبانی — دکمهٔ شناور و پنجرهٔ گفت‌وگو.
 *  ==========================================================
 *
 *  قرارِ صاحب مخزن: «وب نباید کُند شود». پس هیچ `backdrop-filter` اینجا
 *  نیست — همان قاعده‌ای که برای کارت‌ها هست. سایه‌ها ثابت‌اند و هیچ
 *  انیمیشنِ همیشگی‌ای در کار نیست؛ فقط باز و بسته شدن.
 *
 *  رنگ‌ها همه از متغیرهای `:root` می‌آیند، پس تمِ شب و روز خودبه‌خود
 *  درست است و اگر پالت در `Theme.kt` عوض شد، اینجا هم عوض می‌شود.
 */

#sup {
  position: fixed;
  inset-inline-end: 16px;
  /*  بالای نوارِ پایین می‌نشیند، نه رویش — وگرنه روی گوشی دکمهٔ
   *  «بیشتر» را می‌پوشاند
   */
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  /*
   *  بالاتر از صفحهٔ ورود (`.auth-screen` روی ۲۰۰).
   *
   *  ── چرا این عدد ────────────────────────────────────────────────
   *  با عددِ کوچک‌تر، دکمهٔ پشتیبانی زیرِ صفحهٔ ورود می‌ماند و اصلاً
   *  قابلِ زدن نیست — یعنی دقیقاً همان کسی که پشتِ همان صفحه گیر
   *  کرده و بیشتر از همه به پشتیبانی نیاز دارد، به آن نمی‌رسد.
   *  همان اشکالی که با آزمودنِ صفحه در مرورگر پیدا شد.
   */
  z-index: 210;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
#sup > * { pointer-events: auto; }

/* ------------------------------ دکمه ------------------------------ */

.sup-fab {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--primary, #7c5cff);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  transition: transform .16s ease;
}
.sup-fab:active { transform: scale(.94); }
.sup-fab svg { width: 22px; height: 22px; }

/*  نقطهٔ قرمز — عددِ پیام‌های خوانده‌نشده */
.sup-dot {
  position: absolute;
  top: -3px;
  inset-inline-end: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--danger, #d93b3b);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg, #f6f8fc);
}

/*  وقتی پنجره باز است، دکمه کوچک‌تر و کم‌رنگ‌تر می‌شود تا جا باز کند */
.sup-on .sup-fab { transform: scale(.86); opacity: .75; }

/* ------------------------------ پنجره ------------------------------ */

.sup-panel {
  display: flex;
  flex-direction: column;
  width: min(340px, calc(100vw - 32px));
  height: min(460px, calc(100vh - 190px));
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e6e9f2);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .24);
}
.sup-panel[hidden] { display: none; }

.sup-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--primary, #7c5cff);
  color: #fff;
}
.sup-head-txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sup-head-txt b { font-size: 14px; font-weight: 800; }
.sup-head-txt i { font-size: 11px; font-style: normal; opacity: .85; }

.sup-x {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border: 0; border-radius: 9px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 20px; line-height: 1;
  cursor: pointer;
}

/* ------------------------------ پیام‌ها ------------------------------ */

.sup-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg, #f6f8fc);
}

.sup-empty {
  margin: auto 0;
  padding: 20px 8px;
  text-align: center;
  font-size: 12.5px;
  line-height: 2;
  color: var(--muted, #7c8698);
}

/*
 *  گفت‌وگوی کوتاه از پایین شروع می‌شود، نه از بالا — مثل هر پیام‌رسانی.
 *  `margin-top:auto` روی اولین پیام این کار را می‌کند بی‌آنکه مثل
 *  `justify-content:flex-end` سرِ فهرستِ بلند را ببُرد.
 */
.sup-msg:first-child { margin-top: auto; }

.sup-msg {
  max-width: 82%;
  padding: 9px 12px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sup-msg p { margin: 0; font-size: 13px; line-height: 1.9; color: var(--text, #1a2233); }
.sup-msg b { font-size: 10.5px; font-weight: 800; }
.sup-msg time { font-size: 10px; color: var(--muted, #7c8698); }

/*  پیامِ خودم — سمتِ شروعِ خط (راست، چون صفحه راست‌به‌چپ است) */
.sup-mine {
  align-self: flex-start;
  background: var(--primary-tint, rgba(124, 92, 255, .16));
}
.sup-them {
  align-self: flex-end;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e6e9f2);
}
.sup-them b { color: var(--primary, #7c5cff); }

/*  خبرِ خودکار — «اشتراکت سه روز دیگر تمام می‌شود». عمداً رنگِ هشدار
 *  دارد تا با گفت‌وگوی آدم‌ها قاطی نشود.
 */
.sup-sys {
  align-self: stretch;
  max-width: 100%;
  background: var(--warning-tint, rgba(232, 161, 58, .16));
}
.sup-sys b { color: var(--warning, #e8a13a); }

.sup-note {
  align-self: center;
  font-size: 11px;
  color: var(--muted, #7c8698);
  padding: 4px 10px;
}
.sup-note-bad { color: var(--danger, #d93b3b); }

/* ------------------------------ نوشتن ------------------------------ */

.sup-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px;
  background: var(--surface, #fff);
  border-top: 1px solid var(--border, #e6e9f2);
}

#sup-input {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 110px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--border, #e6e9f2);
  background: var(--bg, #f6f8fc);
  color: var(--text, #1a2233);
  font: inherit;
  font-size: 13px;
  line-height: 1.8;
  resize: none;
}
#sup-input:focus { outline: none; border-color: var(--primary, #7c5cff); }

.sup-send {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 0; border-radius: 12px;
  background: var(--primary, #7c5cff);
  color: #fff;
  cursor: pointer;
}
.sup-send:disabled { opacity: .5; cursor: default; }
.sup-send svg { width: 18px; height: 18px; }

/*  روی صفحهٔ باریک، پنجره تمامِ عرض را می‌گیرد — پنجرهٔ ۳۴۰ نقطه‌ای
 *  کنارِ لبه، روی گوشیِ کوچک هم جا نمی‌شود هم بد می‌نشیند.
 */
@media (max-width: 420px) {
  #sup { inset-inline-start: 16px; }
  .sup-panel { width: 100%; height: min(70vh, calc(100vh - 170px)); }
}

/*
 *  روی صفحهٔ ورود، نوارِ پایینی در کار نیست — پس دکمه پایین‌تر می‌آید و
 *  فاصلهٔ الکی نمی‌گذارد.
 */
/*  ⚠️ فقط صفحهٔ ورودِ **پیدا**: صفحهٔ ثبت‌نام همیشه با `.auth-hidden` در DOM
 *  هست، پس `:has(.auth-screen)` همیشه می‌خواند و دکمه همیشه پایین می‌نشست —
 *  روی گوشی درست روی دکمهٔ «بیشتر»ِ نوارِ پایین. */
body:has(.auth-screen:not(.auth-hidden)) #sup { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }

/*  چاپ: دکمه و پنجره روی کاغذ معنی ندارند */
@media print { #sup { display: none !important; } }