/* Боковое меню помещается в невысокое окно (static/sidefit.js).
   Просьба 2026-11-07: в узком невысоком окне кнопка языка уходила за нижний край вместе с меню выбора.
   sidefit.js ставит меню ступени плотности, пока список разделов не влезет: fit-1, потом ещё fit-2.
   Не влезает и так — прокручивается только список разделов, с затуханием у обрезанного края,
   а открытая песня, аккаунт, «Написать нам» и язык внизу всегда на экране.
   Просьба 2026-11-09: в «Спектре» у каждого пункта всегда и значок, и подпись — в узком окне, в невысоком,
   у владельца с длинным меню. Ступени только уплотняют пункты (меньше значок, поля и шрифт), подписи не прячут.
   Подключается последним из стилей: правила с html впереди перебивают spectrum.css. */

/* меню колонкой слева: сжимается только список разделов, остальное — своей высоты */
@media (min-width: 701px) {
  .sidebar > nav { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .sidebar > nav::-webkit-scrollbar { display: none; }
  .sidebar > nav > *, .sidebar > :not(nav) { flex-shrink: 0; }
  .sidebar > nav.sf-down {
    -webkit-mask-image: linear-gradient(#000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 32px), transparent);
  }
  .sidebar > nav.sf-up {
    -webkit-mask-image: linear-gradient(transparent, #000 32px);
    mask-image: linear-gradient(transparent, #000 32px);
  }
  .sidebar > nav.sf-up.sf-down {
    -webkit-mask-image: linear-gradient(transparent, #000 32px, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(transparent, #000 32px, #000 calc(100% - 32px), transparent);
  }
}

/* ---------- «Спектр», узкое окно (701–1100 px): та же колонка «значок и подпись под ним», что в широком ----------
   Раньше здесь меню сворачивалось до значков шириной 60 px (style.css и правила max-width: 1100px у кнопок внизу):
   подписи в 44 px не влезали. Колонка — 88 px, как в широком окне (spectrum.css). */
@media (min-width: 701px) and (max-width: 1100px) {
  html.spectrum { --side: 88px; }
  html.spectrum .sidebar { padding: 16px 8px; gap: 10px; align-items: center; }
  html.spectrum .sidebar .brand { flex-direction: column; align-items: center; padding: 2px 0 6px; }
  html.spectrum .sidebar nav { width: 100%; align-items: center; gap: 2px; }
  html.spectrum .sidebar nav a {
    position: relative; width: 72px; height: auto; min-height: 56px; padding: 9px 2px 7px;
    flex-direction: column; justify-content: center; gap: 5px; border-radius: 16px;
    font-size: 11.5px; font-weight: 500; line-height: 1.15; text-align: center;
  }
  html.spectrum .sidebar nav a svg { width: 22px; height: 22px; }
  html.spectrum .sidebar nav a span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.spectrum .sidebar nav a.active { background: var(--surface-2); font-weight: 600; }
  /* замки «Песенников» и «Дублей» — в углу пункта, как в широком окне */
  html.spectrum body:not(.pro) .sidebar nav a.pro-only::after,
  html.spectrum body:not(.can-record) .sidebar nav a.studio-only::after {
    display: block; position: absolute; top: 7px; right: 12px; width: 10px; height: 10px; margin: 0;
  }
  html.spectrum .sidebar .ad-count,
  html.spectrum .sidebar .fb-count { position: absolute; top: 4px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }

  html.spectrum .side-account { width: 100%; justify-items: center; }
  html.spectrum .side-login {
    width: 72px; height: auto; min-height: 56px; padding: 8px 2px; flex-direction: column; gap: 4px;
    border-radius: 16px; font-size: 11.5px; line-height: 1.15;
  }
  html.spectrum .side-login svg { width: 20px; height: 20px; }
  html.spectrum .side-user { width: 72px; justify-content: center; padding: 6px 0; }

  html.spectrum .sidebar .fb-btn,
  html.spectrum .sidebar .inst-btn {
    width: 72px; height: auto; min-height: 52px; margin: 0; padding: 7px 2px;
    flex-direction: column; justify-content: center; gap: 4px; border-radius: 16px;
    font-size: 10.5px; line-height: 1.15; text-align: center;
  }
  html.spectrum .sidebar .fb-btn svg,
  html.spectrum .sidebar .inst-btn svg { width: 20px; height: 20px; }
  html.spectrum .sidebar .lang-box { width: 72px; margin: 0; }
  html.spectrum .sidebar .lang-btn {
    width: 72px; height: auto; min-height: 52px; padding: 7px 2px;
    flex-direction: column; justify-content: center; gap: 4px; border-radius: 16px; font-size: 10.5px; line-height: 1.15;
  }
  html.spectrum .sidebar .lang-btn svg { width: 20px; height: 20px; }
  html.spectrum .sidebar .lang-code { display: none; }

  html.spectrum .sidebar .gift-side { width: 72px; margin-bottom: 0; }
  html.spectrum .sidebar .side-now { width: 72px; padding: 0; }
  html.spectrum .sidebar .sn-cover { width: 44px; }
}

/* ---------- «Спектр», меню колонкой (от 701 px): подписи есть всегда ---------- */
@media (min-width: 701px) {
  html.spectrum .sidebar nav a span,
  html.spectrum .side-login span,
  html.spectrum .sidebar .lang-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* «Написать нам» и «Установить Spoy» в 72 px не влезают одной строкой — в две строки, а не с многоточием */
  html.spectrum .sidebar .fb-btn span,
  html.spectrum .sidebar .inst-btn span { display: block; max-width: 100%; white-space: normal; overflow-wrap: break-word; }
  /* без боковых полей «Написать нам» (70 px) встаёт в одну строку */
  html.spectrum .sidebar .fb-btn,
  html.spectrum .sidebar .inst-btn { padding-inline: 0; }
  /* подарок и аккаунт: под значком короткая подпись — «Подарок» и имя */
  html.spectrum .sidebar .gift-side { flex-direction: column; gap: 3px; padding: 7px 2px; }
  html.spectrum .sidebar .gift-side-text { display: block; max-width: 100%; text-align: center; }
  html.spectrum .sidebar .gift-side-text b {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; line-height: 1.15;
  }
  html.spectrum .sidebar .gift-side-text small { display: none; }
  html.spectrum .side-user { flex-direction: column; gap: 3px; }
  html.spectrum .side-user-text { display: block; max-width: 100%; text-align: center; }
  html.spectrum .side-user-text b {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; line-height: 1.15;
  }
  html.spectrum .side-user-text small { display: none; }
  /* открытая песня: под обложкой название */
  html.spectrum .sidebar .sn-song { flex-direction: column; gap: 3px; max-width: 100%; }
  html.spectrum .sidebar .sn-text { display: block; max-width: 100%; text-align: center; line-height: 1.15; }
  html.spectrum .sidebar .sn-text b { display: block; font-size: 10.5px; font-weight: 500; }
  html.spectrum .sidebar .sn-text > span { display: none; }
}

/* невысокий экран: пункты плотнее, подписи остаются (spectrum.css прятал их от 800 px высоты и ниже) */
@media (min-width: 701px) and (max-height: 960px) {
  html.spectrum .sidebar { gap: 6px; padding-block: 12px; }
  html.spectrum .sidebar nav a,
  html.spectrum .side-login,
  html.spectrum .sidebar .fb-btn,
  html.spectrum .sidebar .inst-btn,
  html.spectrum .sidebar .lang-btn { min-height: 46px; padding-block: 6px 5px; gap: 3px; }
  html.spectrum .sidebar nav a svg { width: 20px; height: 20px; }
}
@media (min-width: 701px) and (max-height: 800px) {
  html.spectrum .sidebar .brand .ver { display: none; }
  html.spectrum .sidebar nav a,
  html.spectrum .side-login,
  html.spectrum .sidebar .fb-btn,
  html.spectrum .sidebar .inst-btn,
  html.spectrum .sidebar .lang-btn { min-height: 42px; padding-block: 4px; gap: 2px; }
  html.spectrum .sidebar nav a svg { width: 19px; height: 19px; }
}

/* ступени sidefit.js: список разделов не влез — пункты ещё ниже, значки и шрифт мельче */
@media (min-width: 701px) {
  html.spectrum .sidebar.fit-1 { gap: 4px; padding-block: 10px; }
  html.spectrum .sidebar.fit-1 .brand { padding-block: 0 2px; }
  html.spectrum .sidebar.fit-1 .brand .ver { display: none; }
  html.spectrum .sidebar.fit-1 .brand::before { width: 32px; height: 32px; }
  html.spectrum .sidebar.fit-1 > nav { gap: 1px; }
  html.spectrum .sidebar.fit-1 > nav a,
  html.spectrum .sidebar.fit-1 .side-login,
  html.spectrum .sidebar.fit-1 .fb-btn,
  html.spectrum .sidebar.fit-1 .inst-btn,
  html.spectrum .sidebar.fit-1 .lang-btn,
  html.spectrum .sidebar.fit-1 .gift-side { min-height: 38px; padding-block: 3px; gap: 2px; font-size: 10.5px; }
  html.spectrum .sidebar.fit-1 > nav a svg,
  html.spectrum .sidebar.fit-1 .side-login svg,
  html.spectrum .sidebar.fit-1 .fb-btn svg,
  html.spectrum .sidebar.fit-1 .inst-btn svg,
  html.spectrum .sidebar.fit-1 .lang-btn svg { width: 18px; height: 18px; }
  html.spectrum .sidebar.fit-1 .gift-side-ic { width: 26px; height: 26px; border-radius: 8px; }
  html.spectrum .sidebar.fit-1 .sn-song { padding: 3px; }
  html.spectrum .sidebar.fit-1 .sn-cover { width: 36px; }
  html.spectrum .sidebar.fit-1 .side-user { padding-block: 3px; }

  html.spectrum .sidebar.fit-2 { gap: 2px; padding-block: 8px; }
  html.spectrum .sidebar.fit-2 .brand::before { width: 28px; height: 28px; }
  html.spectrum .sidebar.fit-2 > nav { gap: 0; }
  html.spectrum .sidebar.fit-2 > nav a,
  html.spectrum .sidebar.fit-2 .side-login,
  html.spectrum .sidebar.fit-2 .fb-btn,
  html.spectrum .sidebar.fit-2 .inst-btn,
  html.spectrum .sidebar.fit-2 .lang-btn,
  html.spectrum .sidebar.fit-2 .gift-side { min-height: 34px; padding-block: 2px; gap: 1px; font-size: 10px; }
  html.spectrum .sidebar.fit-2 > nav a svg,
  html.spectrum .sidebar.fit-2 .side-login svg,
  html.spectrum .sidebar.fit-2 .fb-btn svg,
  html.spectrum .sidebar.fit-2 .inst-btn svg,
  html.spectrum .sidebar.fit-2 .lang-btn svg { width: 16px; height: 16px; }
  html.spectrum .sidebar.fit-2 .gift-side-text b,
  html.spectrum .sidebar.fit-2 .side-user-text b,
  html.spectrum .sidebar.fit-2 .sn-text b { font-size: 10px; }
  html.spectrum .sidebar.fit-2 .sn-song { padding: 2px; gap: 1px; }
  html.spectrum .sidebar.fit-2 .gift-side-ic { width: 22px; height: 22px; border-radius: 7px; }
  html.spectrum .sidebar.fit-2 .gift-side-ic svg { width: 14px; height: 14px; }
  html.spectrum .sidebar.fit-2 .sn-cover { width: 30px; }
  html.spectrum .sidebar.fit-2 .side-user { padding-block: 2px; }
}

/* ---------- прежний вид (?skin=classic), узкое окно: меню значками ---------- */
@media (min-width: 701px) and (max-width: 1100px) {
  html:not(.spectrum) .sidebar.fit-1 { --sf-gap: 12px; gap: var(--sf-gap); padding-top: 14px; padding-bottom: 14px; }
  html:not(.spectrum) .sidebar.fit-1 > nav { gap: 2px; }
  html:not(.spectrum) .sidebar.fit-1 > nav a { height: 40px; }
  html:not(.spectrum) .sidebar.fit-1 .inst-btn, html:not(.spectrum) .sidebar.fit-1 .fb-btn { height: 36px; }
  html:not(.spectrum) .sidebar.fit-1 .lang-btn { height: 38px; }
  /* нижние служебные кнопки стоят плотно: промежуток меню за вычетом своего отступа */
  html:not(.spectrum) .sidebar.fit-1 > :is(.inst-btn, .fb-btn, .lang-box) { margin-top: calc(4px - var(--sf-gap)); }

  html:not(.spectrum) .sidebar.fit-2 { --sf-gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  html:not(.spectrum) .sidebar.fit-2 > nav { gap: 0; }
  html:not(.spectrum) .sidebar.fit-2 > nav a { height: 34px; }
  html:not(.spectrum) .sidebar.fit-2 .inst-btn, html:not(.spectrum) .sidebar.fit-2 .fb-btn, html:not(.spectrum) .sidebar.fit-2 .lang-btn { height: 32px; }
  html:not(.spectrum) .sidebar.fit-2 .sn-cover { width: 30px; }
}

/* ---------- прежний вид (?skin=classic), широкое окно: пункты с подписями ниже ---------- */
@media (min-width: 1101px) {
  html:not(.spectrum) .sidebar.fit-1 { --sf-gap: 12px; gap: var(--sf-gap); padding-top: 14px; padding-bottom: 14px; }
  html:not(.spectrum) .sidebar.fit-1 > nav { gap: 2px; }
  html:not(.spectrum) .sidebar.fit-1 > nav a { height: 38px; }
  html:not(.spectrum) .sidebar.fit-1 > :is(.inst-btn, .fb-btn, .lang-box) { margin-top: calc(4px - var(--sf-gap)); }

  html:not(.spectrum) .sidebar.fit-2 { --sf-gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  html:not(.spectrum) .sidebar.fit-2 > nav { gap: 0; }
  html:not(.spectrum) .sidebar.fit-2 > nav a { height: 32px; }
}