/* Support Chat — parity با SupportChat.tsx */

html.ic-support-lock,
html:has(body.ic-support-chat),
body.ic-support-chat {
  height: 100%;
  height: 100dvh;
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body.ic-support-chat .ic-header,
body.ic-support-chat .ic-footer,
body.ic-support-chat .ic-tabbar,
body.ic-support-chat .ic-tabbar-dock {
  display: none !important;
}

body.ic-support-chat {
  padding-bottom: 0 !important;
}

body.ic-support-chat .ic-site {
  margin: 0;
  padding: 0;
}

.ic-sup {
  --ic-sup-blue: #418bff;
  --ic-sup-blue-soft: #4e91e6;
  --ic-sup-bubble-user: #418bff;
  --ic-sup-bubble-admin: #f3f8fe;
  --ic-sup-text: #2d3a4a;
  --ic-sup-muted: #919aaf;
  --ic-sup-admin-text: #3e4d5b;
  --ic-sup-border: #e5e5ea;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  background: #fff;
  direction: rtl;
  overflow: hidden;
}

/* ── Header ── */
.ic-sup-head {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px 16px;
  background: #fff;
  border-bottom: 1px solid var(--ic-sup-border);
  flex-shrink: 0;
  z-index: 25;
}

.ic-sup-title {
  margin: 0;
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  color: var(--ic-sup-text);
}

.ic-sup-head-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  text-decoration: none;
}

.ic-sup-head-icon {
  background-color: var(--ic-sup-text);
}

.ic-sup-close-icon {
  background-color: var(--ic-sup-blue-soft);
}

/* ── Overlay load / error — فقط روی ناحیه پیام‌ها */
.ic-sup-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  z-index: 12;
  pointer-events: auto;
}

.ic-sup-overlay[hidden],
.ic-sup-overlay.is-hidden {
  display: none !important;
  pointer-events: none;
}

.ic-sup-overlay-inner {
  text-align: center;
}

.ic-sup-spinner,
.ic-sup-load-spinner,
.ic-sup-send-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e5e9f2;
  border-top-color: var(--ic-sup-blue);
  border-radius: 50%;
  animation: ic-sup-spin 0.7s linear infinite;
  margin: 0 auto 12px;
}

.ic-sup-load-spinner {
  width: 18px;
  height: 18px;
  border-width: 2px;
  margin: 0 0 0 8px;
}

.ic-sup-send-spinner {
  width: 18px;
  height: 18px;
  border-width: 2px;
  margin: 0;
}

@keyframes ic-sup-spin {
  to { transform: rotate(360deg); }
}

.ic-sup-err[hidden] { display: none; }

.ic-sup-err-text {
  margin: 0 0 12px;
  font-size: 13px;
  color: #6b7a94;
}

.ic-sup-retry {
  border: 0;
  border-radius: 12px;
  background: var(--ic-sup-blue);
  color: #fff;
  padding: 8px 20px;
  font-size: 12px;
  cursor: pointer;
}

/* ── Body / messages ── */
.ic-sup-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 8px 16px calc(120px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ic-sup-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.ic-sup-messages {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: flex-end;
  gap: 0;
  padding-bottom: 12px;
}

.ic-sup-messages.is-empty {
  display: none;
}

.ic-sup-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 5px 15px 12px;
  font-size: 12px;
  color: var(--ic-sup-blue-soft);
  order: -1;
}

.ic-sup-load-more[hidden] { display: none; }

/* Welcome */
.ic-sup-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 20px;
  text-align: center;
}

.ic-sup-welcome[hidden] { display: none; }

.ic-sup-welcome-title {
  margin: 0 0 12px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ic-sup-text);
}

.ic-sup-welcome-text {
  margin: 0 0 5px;
  font-size: 12px;
  color: var(--ic-sup-text);
  line-height: 24px;
}

.ic-sup-welcome-link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--ic-sup-blue-soft);
  font: inherit;
  cursor: pointer;
}

/* Day separator */
.ic-sup-day {
  align-self: center;
  background: #f4f7fc;
  padding: 5px 12px 8px;
  border-radius: 12px;
  margin: 16px 0 12px;
  font-size: 10px;
  color: #4c5662;
  text-align: center;
}

.ic-sup-day.is-first {
  margin-top: 0;
}

/* Message row */
.ic-sup-msg {
  display: flex;
  max-width: 85%;
  margin-top: 5px;
}

.ic-sup-msg.is-gap {
  margin-top: 20px;
}

/* کاربر (آبی) راست — ادمین چپ */
.ic-sup-msg--user {
  align-self: flex-start;
}

.ic-sup-msg--admin {
  align-self: flex-end;
}

.ic-sup-bubble {
  position: relative;
  padding: 11px 13px;
  border-radius: 16px;
  max-width: 100%;
}

.ic-sup-msg--user .ic-sup-bubble {
  background: var(--ic-sup-bubble-user);
  color: #fff;
}

.ic-sup-msg--admin .ic-sup-bubble {
  background: var(--ic-sup-bubble-admin);
  color: var(--ic-sup-admin-text);
}

.ic-sup-bubble--image {
  padding: 5px;
  border-radius: 18px;
  overflow: hidden;
}

.ic-sup-msg--admin .ic-sup-bubble--image {
  padding: 2px;
}

.ic-sup-msg-text {
  margin: 0;
  font-size: 12px;
  line-height: 28px;
  text-align: right;
  direction: rtl;
  white-space: pre-wrap;
  word-break: break-word;
}

.ic-sup-msg--user .ic-sup-msg-text {
  color: #fff;
}

.ic-sup-msg--admin .ic-sup-msg-text {
  color: var(--ic-sup-admin-text);
  user-select: text;
}

.ic-sup-msg-text a {
  text-decoration: underline;
}

.ic-sup-msg--user .ic-sup-msg-text a {
  color: #cce4ff;
}

.ic-sup-msg--admin .ic-sup-msg-text a {
  color: var(--ic-sup-blue-soft);
}

.ic-sup-caption {
  margin-top: 10px;
  padding: 0 10px;
}

.ic-sup-img-wrap {
  display: block;
  width: min(240px, 72vw);
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: #eceff3;
  position: relative;
  cursor: pointer;
  border: 0;
  padding: 0;
}

.ic-sup-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 0;
}

.ic-sup-img-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eceff3;
  z-index: 1;
  pointer-events: none;
}

.ic-sup-img-loading[hidden],
.ic-sup-img-loading.is-hidden,
.ic-sup-img-wrap.is-loaded .ic-sup-img-loading {
  display: none !important;
}

.ic-sup-img-loading .ic-sup-spinner {
  width: 22px;
  height: 22px;
  border-width: 2px;
  margin: 0;
}

.ic-sup-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  margin-top: 5px;
  padding-left: 5px;
  gap: 4px;
}

.ic-sup-bubble--image .ic-sup-meta:not(.ic-sup-meta--overlay) {
  padding-left: 12px;
  padding-bottom: 6.5px;
}

.ic-sup-meta--overlay {
  position: absolute;
  bottom: 4px;
  right: 4px;
  margin: 0;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
}

.ic-sup-time {
  font-size: 10px;
  line-height: 1.4;
}

.ic-sup-msg--user .ic-sup-time {
  color: rgba(255, 255, 255, 0.7);
}

.ic-sup-msg--admin .ic-sup-time {
  color: var(--ic-sup-muted);
}

.ic-sup-meta--overlay .ic-sup-time {
  color: #fff;
}

.ic-sup-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.ic-sup-status img {
  width: 10.5px;
  height: 10.5px;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

.ic-sup-status svg {
  display: block;
}

.ic-sup-msg.is-failed .ic-sup-bubble {
  cursor: pointer;
}

/* ── Composer — مثل صفحه پروژه: fixed پایین + safe-area ── */
.ic-sup-composer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  flex-shrink: 0;
  z-index: 45;
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--ic-sup-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  touch-action: manipulation;
}

@media (min-width: 801px) {
  body.ic-support-chat .ic-sup-composer {
    left: 50%;
    right: auto;
    width: 100%;
    max-width: var(--ic-phone-width, 430px);
    transform: translateX(-50%);
  }
}

.ic-sup-preview {
  border-bottom: 1px solid #f0f0f0;
}

.ic-sup-preview[hidden] { display: none; }

.ic-sup-preview-head {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  padding: 8px 15px 8px 8px;
  position: relative;
}

.ic-sup-preview-img {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  object-fit: cover;
  margin-left: 10px;
}

.ic-sup-preview-cancel {
  position: absolute;
  top: 2px;
  right: 5px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
}

.ic-sup-preview-cancel-icon {
  background-color: #fff;
}

/* LTR: پیوست چپ، ارسال راست */
.ic-sup-input-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  direction: ltr;
  padding: 8px;
  gap: 0;
}

.ic-sup-attach {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.ic-sup-attach[hidden] { display: none; }

.ic-sup-attach-icon {
  background-color: #919aaf;
  width: 20px;
  height: 20px;
}

.ic-sup-input {
  flex: 1;
  min-height: 38px;
  max-height: 17vh;
  margin: 0 4px;
  padding: 8px 5px;
  border: 0;
  outline: none;
  resize: none;
  background: #fff;
  border-radius: 20px;
  font-size: 12px;
  font-family: inherit;
  color: var(--ic-sup-text);
  text-align: right;
  direction: rtl;
  line-height: 1.6;
  overflow-y: auto;
  box-sizing: border-box;
}

.ic-sup-input::placeholder {
  color: var(--ic-sup-muted);
}

.ic-sup-send {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  padding: 0;
}

.ic-sup-send-icon {
  background-color: var(--ic-sup-blue);
}

.ic-sup-send:disabled .ic-sup-send-icon,
.ic-sup-send.is-empty .ic-sup-send-icon {
  background-color: #bfccd4;
}

.ic-sup-send.is-sending .ic-sup-send-icon {
  display: none;
}

.ic-sup-send-spinner[hidden] { display: none; }

/* ── Toast ── */
.ic-sup-toast {
  position: absolute;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  z-index: 30;
  max-width: 86%;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(45, 58, 74, 0.92);
  color: #fff;
  font-size: 12px;
  text-align: center;
  line-height: 1.6;
  pointer-events: none;
}

.ic-sup-toast[hidden] { display: none; }

/* ── Guide panel ── */
.ic-sup-guide {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.ic-sup.is-guide-open .ic-sup-composer {
  display: none !important;
}

.ic-sup-guide[hidden] { display: none; }

.ic-sup-guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px 16px;
  border-bottom: 1px solid var(--ic-sup-border);
  flex-shrink: 0;
}

.ic-sup-guide-title {
  margin: 0;
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  color: var(--ic-sup-text);
}

.ic-sup-guide-space {
  width: 32px;
  flex: 0 0 32px;
}

.ic-sup-guide-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px 32px;
  -webkit-overflow-scrolling: touch;
}

.ic-sup-guide-intro {
  margin: 0 0 20px;
  font-size: 12px;
  color: var(--ic-sup-text);
  line-height: 1.9;
}

.ic-sup-guide-list {
  margin: 0;
  padding: 0 18px 0 0;
  list-style: decimal;
}

.ic-sup-guide-list li {
  margin: 0 0 16px;
  font-size: 11.5px;
  color: var(--ic-sup-text);
  line-height: 1.9;
}

.ic-sup-guide-list a {
  color: var(--ic-sup-blue-soft);
}

/* ── Lightbox ── */
.ic-sup-lightbox {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ic-sup-lightbox[hidden] { display: none; }

.ic-sup-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ic-sup-lightbox-close {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ic-sup-lightbox-close .ic-icon {
  background-color: #fff;
}

@media (min-width: 768px) {
  .ic-sup {
    left: 50%;
    right: auto;
    width: 100%;
    max-width: 480px;
    transform: translateX(-50%);
    border-left: 1px solid #eef2f7;
    border-right: 1px solid #eef2f7;
  }
}