/* Новый интерфейс AlphaHit (v2) — раздел «Друзья» (templates/v2/friends.html) и окно «Отправить другу»
 * (FriendRecommend, static/js/v2/friends.js). Подключается в оболочке (templates/v2/base.html) — окно
 * «Отправить другу» открывается из меню «⋯» песни в любом разделе. Только токены app.css (--raise,
 * --ink, --ink-2, --accent, --on-accent, --line, --hover, --c), поэтому годится для обоих дизайнов
 * («Кассета» / «Стриминг») и обеих тем.
 */

/* Число на вкладке: новые заявки / непрочитанные рекомендации */
.fr-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lib__tab[aria-current="page"] .fr-badge { background: var(--panel); color: var(--ink); }
.fr .lib__tabs { margin-bottom: 4px; }

/* Число в заголовке секции */
.fr-count { margin-left: 6px; font: 700 15px/1 var(--f); color: var(--ink-2); font-variant-numeric: tabular-nums; vertical-align: middle; }
.fr-find .srch__box { margin-top: 0; }

/* Список людей: строки на подложке группой, как настройки профиля */
.fr-list { list-style: none; margin: 0; padding: 0; border-radius: calc(var(--r) + 4px); background: var(--raise); overflow: hidden; }
.fr-find .fr-list { margin-top: 12px; max-width: 720px; }
.fr-row { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 16px; border-top: 1px solid var(--line); }
.fr-row:first-child { border-top: 0; }
.fr-row--note { min-height: 56px; }
.fr-row__t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fr-row__t b { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-row__t small { color: var(--ink-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-row__t > a { display: block; min-width: 0; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .fr-row__t a:hover b { text-decoration: underline; } }
.fr-row__acts { flex: none; display: flex; align-items: center; gap: 8px; }

/* Кружок человека: фото поверх первой буквы на цветной подложке (цвет — data-c) */
.fr-av { flex: none; width: 48px; height: 48px; background: var(--c, var(--accent)); color: #fff; font-size: 18px; }
.fr-av--s { width: 24px; height: 24px; font-size: 11px; }
.frsend__row .fr-av { width: 40px; height: 40px; font-size: 16px; }

/* Состояние вместо кнопки: «В друзьях», «Заявка отправлена» */
.fr-state { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 4px; font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.fr-state .ic { width: 16px; height: 16px; }

/* Рекомендации */
.fr-recs { display: grid; gap: 10px; }
.fr-rec { padding: 10px 12px 6px; border-radius: calc(var(--r) + 4px); background: var(--raise); }
/* Новая (непрочитанная) рекомендация — лёгкий оттенок акцента вместо полосы сбоку (точка — .fr-dot в разметке) */
.fr-rec--new { background: color-mix(in srgb, var(--accent) 8%, var(--raise)); }
.fr-rec__from { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 2px 4px 6px; font-size: 13px; color: var(--ink-2); }
.fr-rec__from > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-rec__from a b { color: var(--ink); font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .fr-rec__from a:hover b { text-decoration: underline; } }
.fr-rec__from time { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; }
.fr-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.fr-rec__msg { margin: 0 4px 6px; font-style: italic; color: var(--ink-2); overflow-wrap: anywhere; }
.fr-rec__row .tr { padding-left: 4px; }
.fr-rec__kind { width: 18px; height: 18px; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .fr-rec__row .tr:hover .fr-rec__kind { display: none; } }
.fr-rec__row .tr[aria-pressed="true"] .fr-rec__kind { display: none; }
.fr-mini { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.fr-demo { font-style: normal; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); }

/* Присланный альбом — строка-ссылка */
.fr-album { display: flex; align-items: center; gap: 12px; padding: 8px 4px 10px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) { .fr-album:hover { background: var(--hover); } }
.fr-album__art { position: relative; flex: none; width: 56px; height: 56px; display: grid; place-items: center; overflow: hidden; border-radius: var(--r-cover); background: var(--hover); color: var(--ink-2); }
.fr-album__art .ic { width: 26px; height: 26px; }
.fr-album__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fr-album__go { flex: none; width: 18px; height: 18px; color: var(--ink-2); }

/* Окно «Отправить другу» */
.frsend { display: grid; gap: 12px; }
.frsend .sheet__text { margin: 0; }
.frsend .lib__search { max-width: none; }
.frsend__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 42vh; overflow-y: auto; overscroll-behavior: contain; }
.frsend__list .muted { padding: 12px 4px; }
.frsend__row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 8px; text-align: left; }
.frsend__row img, .frsend__row .tr__ph { flex: none; width: 40px; height: 40px; border-radius: 4px; object-fit: cover; }
.frsend__row .fr-av img { border-radius: 0; }
.frsend__row > span:not(.fr-av) { flex: 1; min-width: 0; display: grid; }
.frsend__row b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frsend__row small { color: var(--ink-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frsend__row em { flex: none; font-style: normal; font-size: 13px; font-weight: 800; color: var(--accent); }
.frsend__row[aria-pressed="true"] { background: var(--hover); box-shadow: inset 0 0 0 2px var(--accent); }
.frsend__row[aria-pressed="true"] em { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .frsend__row:hover { background: var(--raise); } }

/* Телефон: кнопки строки уходят на вторую строку под имя */
@media (max-width: 600px) {
  .fr-row { flex-wrap: wrap; gap: 10px 12px; padding: 12px; }
  .fr-row__t { flex-basis: calc(100% - 60px); }
  .fr-row__acts { width: 100%; padding-left: 60px; flex-wrap: wrap; }
  .fr-row__acts:has(> .icon-btn) { width: auto; padding-left: 0; margin-left: auto; }
  .fr-row:has(.fr-row__acts > .icon-btn) { flex-wrap: nowrap; }
  .fr-row:has(.fr-row__acts > .icon-btn) .fr-row__t { flex-basis: auto; }
  .fr-row:has(.fr-row__acts > .icon-btn) .fr-row__msg { display: none; }
}

/* Звёздочка «Лучший друг» в строке друга (FriendsPage.best): пустая — серая, отмеченная — золотая */
.fr-star { color: var(--ink-2); }
.fr-star .ic--on, .fr-star[aria-pressed="true"] .ic--off { display: none; }
.fr-star[aria-pressed="true"] .ic--on { display: block; }
.fr-star[aria-pressed="true"] { color: #f5b301; }
.fr-star:active { transform: scale(0.88); }
@media (hover: hover) and (pointer: fine) { .fr-star:hover { color: #f5b301; } }
.fr-hint { display: block; margin-top: 4px; font-size: 13px; }