/* Виджет поддержки для САЙТА — перенос из кабинета (`dashboard-outreach/frontend`,
 * секция SUPPORT WIDGET). Поведение и разметка те же, чтобы человек, пришедший с
 * сайта в кабинет, видел одну и ту же кнопку на одном и том же месте.
 *
 * Токены у сайта и у кабинета РАЗНЫЕ (`--ink` против `--c-ink`), поэтому здесь
 * заведён свой короткий набор переменных с запасными значениями: файл обязан
 * работать и на странице, где переменных сайта нет вовсе (юридические страницы,
 * 404), иначе виджет там выйдет бесцветным.
 */

.support-widget {
  --sw-ink: var(--ink, #141619);
  --sw-snow: var(--snow, #fff);
  --sw-paper: var(--paper, #f5f3ee);
  --sw-line: var(--line-dark, #dad5cc);
  --sw-fog: var(--fog, #a6a29b);
  --sw-smoke: var(--smoke, #6c6f76);
  --sw-graphite: var(--graphite, #484b52);
  --sw-ember: var(--ember, #ff5a1f);
  --sw-body: var(--body, Inter, system-ui, sans-serif);
  --sw-display: var(--display, Unbounded, system-ui, sans-serif);
  --sw-ease: var(--ease, cubic-bezier(.22,.8,.25,1));

  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9000;
  font-family: var(--sw-body);
}

/* Баннер согласия на cookie (`.rcc.is-open`) на узком экране занимает низ
   страницы и НАКРЫВАЕТ кнопку: замер на 375px — баннер 10…365 по ширине и
   496…802 по высоте, кнопка 305…359 и 742…796, то есть она целиком под ним и
   нажать её нельзя. Поднимать кнопку выше баннера некуда — он высокий, — а
   спорить z-index'ом бессмысленно: у баннера он предельный, и это правильно,
   решение о cookie человек обязан принять первым.
   Поэтому на узких экранах кнопка ждёт ответа и возвращается сразу после него.
   На широком экране они не пересекаются, и прятать нечего. */
@media (max-width: 700px) {
  body:has(.rcc.is-open) .support-widget {
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s var(--sw-ease, ease);
  }
}

/* ---- Кнопка ---- */

.support-fab {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: var(--sw-ink);
  color: var(--sw-snow);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(21,23,26,.28), 0 2px 6px rgba(21,23,26,.18);
  transition: transform .2s var(--sw-ease), box-shadow .2s var(--sw-ease);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .support-fab:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(21,23,26,.32), 0 3px 8px rgba(21,23,26,.2);
  }
}
.support-fab:active { transform: translateY(-1px); }
.support-fab:focus-visible { outline: 2px solid var(--sw-ember); outline-offset: 3px; }

/* Значок чата ↔ крестик с перекрёстным затуханием */
.support-fab__chat,
.support-fab__close {
  position: absolute;
  transition: opacity .2s var(--sw-ease), transform .2s var(--sw-ease);
}
.support-fab__chat  { opacity: 1; transform: rotate(0) scale(1); }
.support-fab__close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.support-widget.is-open .support-fab__chat  { opacity: 0; transform: rotate(90deg) scale(.6); }
.support-widget.is-open .support-fab__close { opacity: 1; transform: rotate(0) scale(1); }

/* ---- Попап ---- */

.support-popup {
  position: absolute;
  right: 0;
  bottom: 74px;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--sw-snow);
  border: 1px solid var(--sw-line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(20,22,25,.05), 0 20px 44px rgba(20,22,25,.16);
  padding: 18px 18px 16px;
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(8px) scale(.96);
  pointer-events: none;
  /* Закрытый попап убираем из порядка обхода: без этого клавиша Tab на любой
     странице проваливалась внутрь невидимого окна и фокус исчезал с экрана.
     `visibility` снимается вместе с прозрачностью, поэтому анимация цела. */
  visibility: hidden;
  transition: opacity .2s var(--sw-ease), transform .2s var(--sw-ease),
              visibility 0s linear .2s;
}
.support-widget.is-open .support-popup {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
  transition: opacity .2s var(--sw-ease), transform .2s var(--sw-ease),
              visibility 0s linear 0s;
}

.support-popup__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 28px; height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--sw-fog);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color .15s var(--sw-ease), color .15s var(--sw-ease);
}
@media (hover: hover) { .support-popup__close:hover { background: var(--sw-paper); color: var(--sw-ink); } }
.support-popup__close:focus-visible { outline: 2px solid var(--sw-ink); outline-offset: 2px; }

.support-popup__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 28px;
  margin-bottom: 16px;
}
.support-avatar { position: relative; flex: 0 0 auto; width: 48px; height: 48px; }
.support-avatar img {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--sw-paper);
}
.support-avatar__dot {
  position: absolute;
  right: 0; bottom: 0;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #2ecf6f;
  border: 2.5px solid var(--sw-snow);
  box-shadow: 0 0 0 1px rgba(46,207,111,.25);
}
.support-popup__heading { min-width: 0; }
.support-popup__title {
  font-family: var(--sw-display);
  font: 600 16px/1.2 var(--sw-display);
  color: var(--sw-ink);
  margin: 0 0 3px;
}
.support-popup__subtitle { font: 400 12.5px/1.35 var(--sw-body); color: var(--sw-smoke); margin: 0; }

/* ---- Способы связи ---- */

.support-popup__rows { display: flex; flex-direction: column; gap: 8px; }
.support-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--line, #e6e2da);
  border-radius: 12px;
  background: var(--sw-snow);
  text-decoration: none;
  transition: border-color .15s var(--sw-ease), box-shadow .15s var(--sw-ease), transform .15s var(--sw-ease);
}
@media (hover: hover) {
  .support-row:hover {
    border-color: var(--sw-fog);
    box-shadow: 0 4px 12px rgba(21,23,26,.1);
    transform: translateY(-1px);
  }
}
.support-row:active { transform: scale(.99); }
.support-row:focus-visible { outline: 2px solid var(--sw-ink); outline-offset: 2px; }

.support-row__icon {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 9px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.support-row__icon--tg { background: #e7f2fb; color: #2aabee; }
/* Значок MAX — цельная картинка со своим скруглением: увеличение больше единицы
   гарантирует, что её углы уходят за границу обрезки и не дают прозрачных
   уголков. */
.support-row__icon--max { background: transparent; }
.support-row__icon--max img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.15); }
@media (hover: hover) {
  .support-row:hover .support-row__icon--tg { background: #dceefb; }
  .support-row:hover .support-row__icon--max img { transform: scale(1.2); transition: transform .15s var(--sw-ease); }
}

.support-row__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.support-row__name { font: 600 14px/1.25 var(--sw-body); color: var(--sw-ink); }
.support-row__sub {
  font: 400 12px/1.25 var(--sw-body);
  color: var(--sw-smoke);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.support-row__chev { flex: 0 0 auto; color: var(--sw-fog); transition: transform .15s var(--sw-ease), color .15s var(--sw-ease); }
@media (hover: hover) {
  .support-row:hover .support-row__chev { color: var(--sw-graphite); transform: translateX(2px); }
}

.support-popup__note {
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--line, #e6e2da);
  font: 400 11.5px/1.45 var(--sw-body);
  color: var(--sw-smoke);
}

/* ---- Узкий экран ---- */

@media (max-width: 480px) {
  .support-widget { right: 16px; bottom: 16px; }
  .support-fab { width: 54px; height: 54px; }
  .support-popup { width: calc(100vw - 32px); bottom: 70px; padding: 16px 16px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .support-fab,
  .support-fab__chat,
  .support-fab__close,
  .support-popup,
  .support-row,
  .support-row__chev { transition: opacity .15s linear !important; }
}