/* ── Поддержка: кнопка в правом нижнем углу и окно чата ──────────────────────
   Устроено как на первой версии сайта: круглая кнопка, по нажатию — веер
   способов связи, у кнопки — число непрочитанных ответов. Отличие: три
   подчата вместо одного — онлайн-чат, отзыв, неисправности. У каждого своя
   лента и свой счётчик.

   Цвета — только токенами: тёмная тема приложения подхватывается сама. */

.sup-root { position: fixed; right: 24px; bottom: 24px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-size: var(--fs-body); }

/* Главная кнопка */
.sup-fab {
  position: relative; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: var(--shadow-lg);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.sup-fab:hover { transform: translateY(-2px); }
.sup-fab .ic { width: 24px; height: 24px; }
.sup-count {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
}
.sup-count[hidden] { display: none; }

/* Подсказка у кнопки: появляется при наведении, гаснет через две секунды */
.sup-hint {
  position: absolute; right: 68px; bottom: 12px; white-space: nowrap;
  padding: 8px 14px; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow); opacity: 0; transform: translateX(6px); pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.sup-hint.is-on { opacity: 1; transform: none; }

/* Веер */
.sup-menu { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.sup-menu[hidden] { display: none; }
.sup-item {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 600; text-decoration: none;
  box-shadow: var(--shadow); animation: sup-in .22s var(--ease) both;
}
.sup-item:hover { border-color: var(--accent); }
.sup-item .ic { width: 18px; height: 18px; color: var(--accent-text); }
.sup-item .sup-count { position: static; box-shadow: none; }
.sup-menu .sup-item:nth-child(2) { animation-delay: .04s; }
.sup-menu .sup-item:nth-child(3) { animation-delay: .08s; }
.sup-menu .sup-item:nth-child(4) { animation-delay: .12s; }
@keyframes sup-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }

/* Окно */
.sup-panel {
  position: fixed; right: 24px; bottom: 92px; z-index: 901;
  width: 400px; height: min(620px, calc(100vh - 120px));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
  animation: sup-in .22s var(--ease) both;
}
.sup-panel[hidden] { display: none; }
.sup-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px 16px; }
.sup-head b { font-size: 16px; }
.sup-close {
  margin-left: auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 0; background: var(--surface3); color: var(--text-2); cursor: pointer;
}
.sup-close:hover { background: var(--surface-hover); color: var(--text); }
.sup-close .ic { width: 16px; height: 16px; }

.sup-tabs { display: flex; gap: 4px; padding: 0 12px 10px; border-bottom: 1px solid var(--border); }
.sup-tab {
  position: relative; flex: 1; padding: 7px 6px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid transparent; background: var(--surface2); color: var(--text-2);
  font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.sup-tab:hover { color: var(--text); }
.sup-tab[aria-selected="true"] { background: var(--accent-weak); color: var(--accent-text); border-color: var(--accent); }
.sup-tab .sup-count { top: -7px; right: -5px; }

.sup-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sup-feed { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.sup-msg { max-width: 82%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; }
.sup-msg-us { align-self: flex-start; background: var(--surface3); border-bottom-left-radius: 4px; }
.sup-msg-me { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }
.sup-msg-text { white-space: pre-wrap; word-break: break-word; }
.sup-msg-meta { margin-top: 3px; font-size: 11px; opacity: .75; }
.sup-msg-me .sup-msg-meta { text-align: right; }
.sup-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sup-img {
  display: block; padding: 0; border: 0; cursor: zoom-in; background: none;
  border-radius: 8px; overflow: hidden;
}
.sup-img img { display: block; width: 110px; height: 82px; object-fit: cover; }
.sup-note { padding: 10px 14px; font-size: 13px; color: var(--text-2); }
.sup-empty { margin: auto; padding: 24px; text-align: center; color: var(--text-3); font-size: 13px; }

/* Поле ответа */
.sup-compose { border-top: 1px solid var(--border); padding: 10px 12px; display: grid; gap: 8px; }
.sup-compose textarea, .sup-form textarea, .sup-form select {
  width: 100%; padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface2); color: var(--text);
  font: inherit; font-size: 14px; resize: none; outline: none;
}
.sup-compose textarea:focus, .sup-form textarea:focus, .sup-form select:focus { border-color: var(--accent); }
.sup-row { display: flex; align-items: center; gap: 8px; }
.sup-attach-btn {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text-2);
}
.sup-attach-btn:hover { color: var(--accent-text); border-color: var(--accent); }
.sup-attach-btn .ic { width: 18px; height: 18px; }
.sup-send {
  margin-left: auto; padding: 9px 18px; border-radius: 999px; cursor: pointer; border: 0;
  background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 14px; font-weight: 700;
}
.sup-send:disabled { opacity: .55; cursor: default; }
.sup-err { font-size: 12px; color: var(--red); }
.sup-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.sup-thumbs:empty { display: none; }
.sup-thumb { position: relative; }
.sup-thumb img { display: block; width: 56px; height: 42px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.sup-thumb-x {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  border: 0; background: var(--red); color: #fff; cursor: pointer; font-size: 13px; line-height: 20px; padding: 0;
}

/* Формы отзыва и неисправности */
.sup-form { flex: 1; overflow-y: auto; padding: 14px; display: grid; gap: 12px; align-content: start; }
.sup-form p { margin: 0; font-size: 13.5px; color: var(--text-2); }
.sup-label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
/* Поля внутри подписи не наследуют её жирность — иначе и ввод, и подсказка жирные. */
.sup-label textarea, .sup-label select { font-weight: 400; }
.sup-stars { display: flex; gap: 4px; }
.sup-star {
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer; font-size: 22px; line-height: 1;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text-3);
}
.sup-star.is-on { color: #f5a524; border-color: #f5a524; background: var(--yellow-weak); }

/* Картинка на весь экран */
.sup-lightbox {
  position: fixed; inset: 0; z-index: 950; display: grid; place-items: center;
  background: rgba(8, 12, 22, .82); cursor: zoom-out; padding: 24px;
}
.sup-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; }

@media (max-width: 560px) {
  .sup-root { right: 16px; bottom: 16px; }
  .sup-panel { right: 0; left: 0; bottom: 0; width: auto; height: 100dvh; border-radius: 0; border: 0; }
  .sup-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sup-item, .sup-panel { animation: none; }
  .sup-fab, .sup-hint { transition: none; }
}