/* Body class — выставляется JS при открытии чата. Скрывает host-page
   chrome (нижний таббар, верхний topbar) — иначе они «просвечивали»
   из-под overlay'а на сайте/мини-аппе и юзер видел свою основную нав
   снизу. Также залочить scroll и на body, и на html. */
html.sup-chat-open, body.sup-chat-open {
  overflow: hidden !important;
  /* Блок touch-pan на body чтоб iOS не дёргал страницу под overlay'ем */
  overscroll-behavior: none;
  touch-action: none;
}
body.sup-chat-open .tabbar,
body.sup-chat-open .topbar,
body.sup-chat-open .topnav,
body.sup-chat-open .toast,
body.sup-chat-open #__site_toast {
  display: none !important;
}

/* ── Чат поддержки — общий модуль для site и mini-app.
   Полноэкранный overlay (position:fixed) — независим от tab/screen
   систем хост-страницы. Открывается классом .show, закрывается ←. */
#screen-support {
  /* Explicit top/left/width/height вместо inset:0 — иначе на iOS Safari
     конфликт с height:100dvh (когда два констрейнта высоты, overlay
     получался короче layout-viewport и под ним светился body). */
  position: fixed; top: 0; left: 0; width: 100%;
  height: 100vh;          /* fallback для старых browsers */
  height: 100dvh;         /* dynamic viewport — корректно учитывает
                             моб. клавиатуру и iOS address-bar collapse */
  /* z-index 1000 — подстраховка чтоб никакой topbar/tabbar/toast не
     лез поверх (на сайте есть элементы с 9999 для модалок оплаты —
     они открываются только по действию юзера, тут не пересекаются). */
  z-index: 1000;
  display: none; flex-direction: column;
  background: linear-gradient(180deg, var(--bg-1, #0c0a14), var(--bg-0, #06060c));
  padding: 0 !important;
  margin: 0 !important;
  animation: none !important;
}
#screen-support.show { display: flex; }

/* На широких экранах — centered modal с dim-фоном вокруг, чтобы чат не
   растягивался на всю ширину десктопного браузера. Mini-app всегда узкий
   (Telegram WebApp), поэтому media-query применяется только на сайте. */
@media (min-width: 800px) {
  #screen-support.show {
    /* dim-фон + flex-центровка модального окна */
    background: rgba(0,0,0,.6);
    align-items: center; justify-content: center;
    padding: 24px !important;
    box-sizing: border-box;
  }
  #screen-support.show > * { flex-shrink: 0; }
  #screen-support.show {
    /* trick: сам контейнер служит и dim-фоном и центровщиком — а внутрь
       заворачиваем «окно» через ::before / стилизацию child'ов. Проще
       вынести содержимое в отдельный inner-wrap, но это требует HTML
       changes. Используем contents/grid: дочерние элементы оборачиваются
       в виртуальное окно через wrapper. */
  }
  /* Все children — head/thread/compose/tiles/etc — в едином окне */
  #screen-support.show .sup-head,
  #screen-support.show .sup-thread,
  #screen-support.show .sup-compose,
  #screen-support.show .sup-attach-tiles,
  #screen-support.show .sup-blocked-banner,
  #screen-support.show .sup-hint {
    width: 100%;
    max-width: 720px;
    background-color: var(--bg-1, #0c0a14);  /* непрозрачное окно */
  }
  #screen-support.show .sup-head {
    border-radius: 14px 14px 0 0;
    border: 1px solid var(--line, rgba(255,255,255,.06));
    border-bottom: 1px solid var(--line, rgba(255,255,255,.06));
    margin-top: auto;  /* прижимает к центру по вертикали */
  }
  #screen-support.show .sup-thread {
    flex: 1 1 auto; max-height: calc(100dvh - 48px - 130px);
    border-left: 1px solid var(--line, rgba(255,255,255,.06));
    border-right: 1px solid var(--line, rgba(255,255,255,.06));
  }
  #screen-support.show .sup-compose {
    border-radius: 0 0 14px 14px;
    border: 1px solid var(--line, rgba(255,255,255,.06));
    border-top: 1px solid var(--line, rgba(255,255,255,.06));
    margin-bottom: auto;
  }
  #screen-support.show .sup-hint { display: none; }  /* hint лишний на десктопе */
}

.sup-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  /* Solid background — backdrop-filter:blur на iOS WebView грел GPU. */
  background: var(--bg-1, #0c0a14);
  border-bottom: 1px solid var(--line, rgba(255,255,255,.06));
  /* Flex item — не сжимается. Sticky не имеет смысла внутри flex column
     без scroll-ancestor (тред скроллится сам, не виден из head/compose),
     поэтому просто фиксированный flex-row сверху. */
  flex-shrink: 0; z-index: 5;
}
.sup-back {
  appearance: none;
  background: var(--surface-1, rgba(255,255,255,.05));
  border: 1px solid var(--line-strong, rgba(255,255,255,.10));
  width: 36px; height: 36px; border-radius: 10px;
  color: var(--text, #f4f4f7); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.sup-back:hover { background: var(--surface-2, rgba(255,255,255,.10)); }
.sup-title { flex: 1; font-size: 16px; font-weight: 700; margin: 0; color: var(--text, #f4f4f7); }
.sup-status { font-size: 11px; color: var(--muted, #9b9ba6); }

.sup-thread {
  flex: 1 1 auto;
  /* CRITICAL: min-height:0 — без него flex-item не сжимается ниже content
     size, в результате на iOS Safari тред «выталкивает» composer ЗА край
     экрана и сам не overflow'ится (== не скроллится). С min-height:0
     flex отдаёт приоритет нашему overflow:auto. */
  min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  /* Доп. защита от iOS overscroll bounce, который дёргал sticky head. */
  overscroll-behavior: contain;
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.sup-empty {
  margin: auto; max-width: 280px; text-align: center;
  color: var(--muted, #9b9ba6);
  padding: 24px 12px;
}
.sup-empty-h { font-size: 16px; font-weight: 700; color: var(--text, #f4f4f7); margin-bottom: 6px; }
.sup-empty-sub { font-size: 13px; line-height: 1.5; }

.sup-msg {
  /* На мобиле 78% от узкого экрана = норм. На десктопе абсолютный cap
     460px, иначе bubble растягивается на полстраницы. */
  max-width: min(78%, 460px);
  padding: 9px 12px; border-radius: 16px;
  font-size: 14px; line-height: 1.4;
  word-wrap: break-word; overflow-wrap: anywhere;
  position: relative;
  animation: supMsgIn .18s ease-out;
}
@keyframes supMsgIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* На первой загрузке чата отключаем анимацию появления (N сообщений ×
   N animations = заметный CPU spike + лестница на iOS). После первого
   рендера JS убирает класс — новые сообщения уже анимируются. */
.sup-thread.sup-no-anim .sup-msg { animation: none !important; }
.sup-msg.user {
  align-self: flex-end;
  background: var(--gradient-accent);
  color: #fff; border-bottom-right-radius: 4px;
}
.sup-msg.admin {
  align-self: flex-start;
  background: var(--surface-1, rgba(255,255,255,.07));
  border: 1px solid var(--line, rgba(255,255,255,.06));
  color: var(--text, #f4f4f7); border-bottom-left-radius: 4px;
}
.sup-msg-time {
  font-size: 10px; opacity: .6; margin-top: 4px;
  text-align: right;
}
.sup-msg.admin .sup-msg-time { text-align: left; }
/* Обёртка с фиксированным aspect-ratio резервирует место под фото/видео
   ещё ДО загрузки — серый плейсхолдер виден сразу, чат не «прыгает»
   когда подгружаются картинки. Реальное фото cover-fit'ится внутрь. */
.sup-msg-attach-wrap {
  display: block;
  width: 240px; max-width: 100%;
  aspect-ratio: 4 / 3;
  margin-top: 4px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  position: relative;
  cursor: pointer;
}
.sup-msg-attach-wrap.video { cursor: default; }
.sup-msg-attach,
.sup-msg-attach-vid {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  background: rgba(0,0,0,.3);
  /* Плавный переход при появлении (после load image opacity:0→1). */
  opacity: 0;
  transition: opacity .2s ease-out;
}
.sup-msg-attach.loaded,
.sup-msg-attach-vid.loaded { opacity: 1; }
.sup-msg-attach-vid { background: #000; }
/* Маленький play-icon поверх видео-thumb (пока не нажат controls=true).
   На iOS WebView native controls появляются после первого тапа. */
.sup-msg-attach-wrap.video::after {
  content: "▶";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  background: rgba(0,0,0,.55);
  color: #fff; font-size: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: .8;
}
/* Документ-attach (pdf/zip/doc/xls/...) — pill с иконкой */
.sup-msg-attach-doc {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px;
  padding: 10px 12px;
  background: rgba(0,0,0,.20);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
.sup-msg-attach-doc:hover { background: rgba(0,0,0,.30); }
.sup-msg.admin .sup-msg-attach-doc {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
}
.sup-msg.admin .sup-msg-attach-doc:hover { background: rgba(255,255,255,.10); }
.sup-doc-icon { font-size: 22px; flex-shrink: 0; line-height: 1; }
.sup-doc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sup-doc-name {
  font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 200px;
}
.sup-doc-size { font-size: 11px; opacity: .7; }

/* ── Загрузка: прогресс-бар поверх attach-preview в bubble ── */
.sup-msg-uploading { opacity: .92; }
.sup-msg-uploading .sup-msg-attach,
.sup-msg-uploading .sup-msg-attach-vid {
  filter: brightness(.85) saturate(.9);
}
.sup-progress {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px;
}
.sup-progress-textonly { margin-top: 4px; }
.sup-progress-track {
  flex: 1; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.18); overflow: hidden;
}
.sup-progress-bar {
  height: 100%; width: 0%;
  background: rgba(255,255,255,.92);
  transition: width .15s linear;
}
.sup-progress-pct {
  font-size: 10px; opacity: .9; min-width: 32px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.sup-msg-finalizing .sup-progress-bar {
  animation: supBarPulse 1s ease-in-out infinite;
}
@keyframes supBarPulse {
  0%, 100% { opacity: .85; }
  50%      { opacity: .55; }
}
.sup-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--line-strong);
  border-top-color: rgba(255,255,255,.92);
  animation: supSpin .85s linear infinite;
}
@keyframes supSpin {
  to { transform: rotate(360deg); }
}
.sup-msg-failed {
  opacity: .75;
  outline: 1px solid rgba(255,80,80,.45);
}
.sup-blocked-banner {
  margin: auto 16px;
  padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,45,58,.10);
  border: 1px solid rgba(255,45,58,.35);
  border-radius: 14px;
  color: var(--text, #f4f4f7);
  flex-shrink: 0;
}
/* Когда чат закрыт админом — JS вешает на overlay класс .is-blocked.
   Скрывем композер/hint/тайлы атомарно через CSS (без race'а с inline
   style во время first paint). */
#screen-support.is-blocked .sup-compose,
#screen-support.is-blocked .sup-hint,
#screen-support.is-blocked .sup-attach-tiles { display: none !important; }
.sup-blocked-icon { font-size: 28px; flex-shrink: 0; line-height: 1; }
.sup-blocked-text { flex: 1; min-width: 0; }
.sup-blocked-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.sup-blocked-sub { font-size: 12px; color: var(--muted, #9b9ba6); line-height: 1.45; }

.sup-failed-label {
  font-size: 11px; color: #ffd2d2; opacity: .9;
}

.sup-compose {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px;
  /* Solid background — см. комментарий к .sup-head выше. */
  background: var(--bg-1, #0c0a14);
  border-top: 1px solid var(--line, rgba(255,255,255,.06));
  /* Flex item — не сжимается. Sticky убран (см. .sup-head: в flex column
     без scroll-контейнера sticky всё равно не отрабатывает). */
  flex-shrink: 0;
  /* iOS safe-area: чтоб composer не уходил под home-indicator. */
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
/* iOS WebView (TG WebApp) НЕ открывает file picker для input с
   display:none/hidden даже из обработчика клика на user-gesture.
   Прячем off-screen вместо hidden — picker открывается стабильно. */
.sup-attach-input {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important;
  left: -9999px;
}
.sup-attach, .sup-send {
  appearance: none; cursor: pointer; flex-shrink: 0;
  width: 40px; height: 40px;
  border: 1px solid var(--line-strong, rgba(255,255,255,.10));
  border-radius: 12px;
  background: var(--surface-1, rgba(255,255,255,.04));
  color: var(--muted-2, #c4c4cc);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.sup-attach:hover { background: var(--surface-2, rgba(255,255,255,.08)); color: #ffd34a; }
.sup-send {
  background: var(--gradient-accent);
  border-color: transparent; color: #fff;
}
.sup-send:hover { transform: translateY(-1px); }
.sup-send:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.sup-input {
  flex: 1; min-height: 40px; max-height: 120px; resize: none;
  padding: 10px 12px;
  background: var(--surface-1, rgba(255,255,255,.04));
  border: 1px solid var(--line-strong, rgba(255,255,255,.10));
  border-radius: 12px;
  color: var(--text, #f4f4f7); font-family: inherit; font-size: 14px;
  line-height: 1.4; outline: none;
  transition: border-color .15s;
}
.sup-input:focus { border-color: var(--accent); }
.sup-attach-preview {
  display: flex; align-items: center; gap: 10px;
  margin: 0 12px 8px;
  padding: 8px 12px;
  background: rgba(255,170,30,.08);
  border: 1px solid rgba(255,170,30,.25);
  border-radius: 10px;
  font-size: 12px; color: #ffd34a;
}
.sup-attach-meta { flex: 1; min-width: 0; overflow: hidden; }
.sup-attach-meta span { display: block; }
.sup-attach-meta span:first-child {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 600; color: var(--text, #f4f4f7);
}
.sup-attach-size { font-size: 11px; color: var(--muted, #9b9ba6); }
.sup-attach-remove {
  appearance: none; cursor: pointer; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,45,58,.15); color: #ff8b91;
  border: 1px solid rgba(255,45,58,.3);
  /* Глифу «×» без flex-центровки + явного font-size — у системного
     шрифта нижний sidebearing съедает 1-2px и крестик уезжает вниз/вбок.
     Закрепляем через flex и font-size:18px (визуально совпадает с
     padding кружка). padding:0 убирает баг кнопки на iOS. */
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  font-size: 18px; font-weight: 500;
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.sup-attach-remove:hover { background: rgba(255,45,58,.25); }
.sup-attach-remove:active { transform: scale(.92); }

/* ── Multi-attach: квадратики предпросмотра над composer ───── */
.sup-attach-tiles {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 12px 8px;
  padding: 8px;
  background: var(--surface-1, rgba(255,255,255,.04));
  border: 1px solid var(--line, rgba(255,255,255,.06));
  border-radius: 12px;
  max-height: 184px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}
.sup-tile {
  position: relative; flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: 8px; overflow: hidden;
  background: var(--surface-2, rgba(255,255,255,.08));
  border: 1px solid var(--line-strong, rgba(255,255,255,.10));
}
.sup-tile.doc {
  width: auto; min-width: 96px; max-width: 200px; height: 64px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 28px 0 10px;  /* справа место под × */
}
.sup-tile-img, .sup-tile-vid {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}
.sup-tile-vid-marker {
  position: absolute; bottom: 4px; right: 4px;
  background: rgba(0,0,0,.6); color: #fff;
  border-radius: 4px; padding: 2px 4px;
  font-size: 9px; font-weight: 700;
}
.sup-tile-doc-icon { font-size: 22px; flex-shrink: 0; line-height: 1; }
.sup-tile-doc-name {
  font-size: 11px; color: var(--text, #f4f4f7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.sup-tile-x {
  appearance: none; cursor: pointer;
  position: absolute; top: 2px; right: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,.7); color: #fff;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; font-size: 14px; line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.sup-tile-x:hover { background: rgba(255,45,58,.6); }

.sup-hint {
  font-size: 11px; color: var(--dim, #6e6e7a);
  text-align: center; padding: 0 12px 10px;
  flex-shrink: 0;
}

/* ── Контрастная кнопка-вход в чат для саммари аккаунта ─────── */
.acc-support-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; margin-top: 14px;
  padding: 13px 16px;
  background: var(--gradient-accent);
  border: none; border-radius: 14px;
  color: #fff; font-weight: 700; font-size: 14px;
  font-family: inherit; cursor: pointer;
  box-shadow: 0 8px 22px var(--accent-glow);
  transition: transform .15s, box-shadow .15s;
  text-align: left;
}
.acc-support-btn:hover  { transform: translateY(-1px); box-shadow: 0 12px 30px var(--accent-glow); }
.acc-support-btn:active { transform: translateY(0); }
.acc-support-btn svg { flex-shrink: 0; }
.acc-support-btn span:not(.acc-support-badge) { flex: 1; }
.acc-support-badge {
  display: inline-block; min-width: 18px; height: 18px;
  padding: 0 6px; border-radius: 999px;
  background: rgba(255,255,255,.22);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  color: #fff;
}
.acc-support-chev { opacity: .6; }

/* ── Lightbox для фото в чате ──────────────────────────────
   Замена window.open(url) → fullscreen overlay. URL не показывается
   в адресной строке — IP сервера (sitevps на app.193-...sslip.io)
   вообще нигде не светится. */
.sup-lightbox {
  position: fixed; inset: 0; z-index: 9001;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  cursor: zoom-out;
  opacity: 0;
  transition: opacity .15s ease-out;
}
.sup-lightbox.show { opacity: 1; }
.sup-lightbox img,
.sup-lightbox video {
  max-width: 100%; max-height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 6px;
  cursor: default;
}
.sup-lightbox-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; padding: 0;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}