/*
  Веб-слой поверх стилей мини-приложения. Применяется на любой ширине, в отличие
  от desktop.css: это правки для браузера как такового, а не для широкого экрана.

  Разметка приходит из hhtgbot без изменений, поэтому всё здесь опирается на её
  существующие классы и идентификаторы.
*/

/*
  Кнопка входа одна на всё приложение: и под кругом на главной, и на экране
  подключения. Логотип Telegram делает её узнаваемой с одного взгляда.
*/
#reopenInTelegramButton,
#webLoginButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  /* Фирменный синий Telegram: кнопка ведёт на его страницу, и цвет об этом
     говорит раньше подписи. Белый здесь и у текста, и у иконки — она красится
     currentColor через маску. */
  background: #27a7e7;
  color: #fff;
}

#reopenInTelegramButton::before,
#webLoginButton::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("/icons/telegram-logo.svg") no-repeat center / contain;
  mask: url("/icons/telegram-logo.svg") no-repeat center / contain;
}

/*
  Подсказка у кнопки закрытия рисуется над ней, а кнопка стоит первой строкой
  шторки — подсказка уходила за край и срезалась прокруткой. В шапке шторки
  разворачиваем её вниз, где место есть всегда.
*/
.sheet-head .mini-icon-button[data-tooltip]::after {
  top: calc(100% + 8px);
  bottom: auto;
}

.sheet-head .mini-icon-button[data-tooltip]::before {
  top: calc(100% + 2px);
  bottom: auto;
  transform: rotate(180deg);
}

/* Под кругом кнопка не должна растягиваться на всю ширину экрана. */
#webLoginButton {
  justify-self: center;
  min-width: min(280px, 100%);
}

/*
  Полоса с предложением установить приложение. Живёт там же, где тост: над
  нижней панелью и по её ширине — это единственное свободное место, которое не
  спорит ни с шапкой, ни с навигацией. На широком экране нижней панели нет, зато
  слева стоит рельс, поэтому отступ считается от него.
*/
.install-bar {
  position: fixed;
  left: calc(var(--rail, 0px) + var(--gutter));
  right: var(--gutter);
  bottom: calc(var(--nav-clearance) + env(safe-area-inset-bottom) +
    var(--space-3));
  z-index: 19;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  max-width: 720px;
  margin: 0 auto;
  padding: var(--pad-inset) var(--pad-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  animation: install-bar-in 0.22s ease both;
}

@keyframes install-bar-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.install-bar-text {
  display: grid;
  gap: var(--gap-micro);
  min-width: 0;
  flex: 1 1 auto;
}

.install-bar-text strong {
  font-size: 15px;
  font-weight: 600;
}

.install-bar-text span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

/*
  Кнопка второстепенная, как в приложении. Установка — предложение, а не то, за
  чем сюда пришли: рядом с ней на экране стоит «Связать Telegram», и две сплошные
  синие кнопки спорили бы за то, какую нажать первой.
*/
.install-bar-action {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 var(--space-6);
  border: 1px solid color-mix(in srgb, var(--button) 26%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--button) 12%, var(--surface));
  color: var(--link);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.install-bar-action:active {
  transform: translateY(1px);
}

.install-bar-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/*
  Полоса не накрывает приложение, а раздвигает его. Экран у приложения ровно
  один — он и на телефоне, и на рабочем столе занимает вьюпорт целиком, — и
  фиксированная полоса внизу закрыла бы собой карточку аккаунта, то есть ровно
  то, ради чего экран открыли.

  Место просят там же, где его просит нижняя панель: у отступа .scroll-root.
  Высоту полосы знает только браузер, поэтому её измеряет скрипт и кладёт в
  --install-bar-space.
*/
:root.hh-install-offer .scroll-root {
  padding-bottom: calc(
    var(--nav-clearance) + env(safe-area-inset-bottom) +
    var(--install-bar-space, 0px)
  );
}

@media (min-width: 1024px) {
  /* На широком экране высота приложения задана явно, и одного отступа мало:
     без этого низ карточки уехал бы под обрез .scroll-root. */
  :root.hh-install-offer .app {
    height: calc(
      var(--app-height, 100vh) - var(--gutter) * 2 - var(--install-bar-space,
      0px) - var(--site-footer-h, 0px)
    );
  }

  /* Выдвижная панель прижата к обоим краям вьюпорта, а не к содержимому, и
     отступ до неё не доходит. */
  :root.hh-install-offer .view:not([data-view="home"]):not([data-view="connect"]) {
    bottom: var(--install-bar-space, 0px);
  }
}

/*
  На узком экране кнопка уходит под текст: в строку они помещаются только за
  счёт переносов в подписи, а она объясняет смысл установки. Раскладка сеткой,
  а не переносом строк: крестику место в углу над кнопкой, и flex-wrap ставил
  его отдельной строкой посередине.
*/
@media (max-width: 420px) {
  .install-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--gap-list);
  }

  .install-bar-text {
    grid-column: 1;
    grid-row: 1;
  }

  .install-bar-close {
    grid-column: 2;
    grid-row: 1;
  }

  .install-bar-action {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/*
  Подвал сайта — сплошная полоса под приложением, как на fragment.com: ряд
  приглушённых ссылок по центру, без рамки и подписи. Веб-версия — единственная
  точка входа поискового робота на headhack.ru, а само приложение своих ссылок
  не содержит: без этих трёх разделы /ai, /blog и /download остаются для Google
  недостижимыми. Живёт внутри .scroll-root — долистывается, но не мешает.
*/
.site-footer {
  /* Полоса шире колонки приложения: вытягиваем её на всю ширину прокрутки. */
  margin: 40px calc(-1 * var(--gutter)) 0;
  padding: 26px var(--gutter) calc(26px + env(safe-area-inset-bottom));
  /* Затемняем прозрачным слоем, а не своим цветом: у мини-аппы несколько тем,
     и подобранный вручную оттенок разошёлся бы с фоном в одной из них. */
  background: rgba(0, 0, 0, 0.28);
}

.site-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  justify-content: center;
}

.site-footer-nav a {
  color: var(--hint, #8a8a8e);
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-footer-nav a:hover,
.site-footer-nav a:focus-visible {
  color: var(--link, #0a74ff);
}

/* Переключатель языка. Стоит в общем ряду разделов и выглядит такой же
   ссылкой: отдельная полоска с кнопками читалась как чужой элемент. Список
   раскрывается наведением и фокусом — без JS, внутри обычные ссылки. */
.site-footer-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.site-footer-lang-trigger {
  color: var(--hint, #8a8a8e);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 20px;
  transition: color 0.15s ease;
}

.site-footer-lang:hover .site-footer-lang-trigger,
.site-footer-lang:focus-within .site-footer-lang-trigger {
  color: var(--link, #0a74ff);
}

.site-footer-lang-trigger:focus-visible {
  outline: 2px solid var(--link, #0a74ff);
  outline-offset: 3px;
  border-radius: 4px;
}

.site-footer-lang-bubble {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  z-index: 40;
  display: flex;
  min-width: 172px;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--border, rgba(127, 127, 127, 0.24));
  border-radius: 12px;
  background: var(--surface, #1b222b);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  visibility: hidden;
}

/* Хвостик подсказки — повёрнутый квадрат под пузырём. */
.site-footer-lang-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-right: 1px solid var(--border, rgba(127, 127, 127, 0.24));
  border-bottom: 1px solid var(--border, rgba(127, 127, 127, 0.24));
  background: var(--surface, #1b222b);
  transform: rotate(45deg);
}

.site-footer-lang:hover .site-footer-lang-bubble,
.site-footer-lang:focus-within .site-footer-lang-bubble {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

.site-footer-lang-hint {
  padding: 2px 8px 6px;
  color: var(--hint, #8a8a8e);
  font-size: 12px;
  line-height: 16px;
}

.site-footer-nav .site-footer-lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--text, #e7edf4);
  font-size: 14px;
  line-height: 18px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.site-footer-nav .site-footer-lang-option:hover,
.site-footer-nav .site-footer-lang-option:focus-visible {
  background: rgba(127, 127, 127, 0.16);
  color: var(--text, #e7edf4);
}

.site-footer-nav .site-footer-lang-option.is-active {
  background: color-mix(in srgb, var(--link, #0a74ff) 16%, transparent);
}

.site-footer-lang-code {
  min-width: 26px;
  color: var(--hint, #8a8a8e);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.site-footer-nav .site-footer-lang-option.is-active .site-footer-lang-code {
  color: var(--link, #0a74ff);
}

@media (prefers-reduced-motion: reduce) {
  .site-footer-lang-bubble {
    transition: none;
  }
}

/* На светлой теме тот же слой читается грязью — хватает лёгкой тени. */
html:not(.theme-dark) .site-footer {
  background: rgba(0, 0, 0, 0.04);
}