/* ═══════════════════════════════════════════════════════════
   LIVE-FEED — живая лента дропов (компонент)
═══════════════════════════════════════════════════════════ */

.lf-root {
  display: flex;
  align-items: stretch;
  background: rgba(3,11,24,0.9);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(var(--accent-rgb),0.1);
  border-bottom: 1px solid rgba(var(--accent-rgb),0.1);
  height: 122px;
  overflow: hidden;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  /* Чтобы рейл (.gsb z-index:1500) не оказался под лентой из-за backdrop-filter */
  z-index: 1;
  /* Плавный сдвиг при открытии/закрытии левого игрового рейла. Транзишен общий
     с .main / .layout > main (см. topbar.css) — длительность совпадает. */
  transition:
    margin-left 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    width       0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* На время первичного применения shift-классов (init после загрузки чата)
   анимация margin-left'а должна быть выключена — иначе при каждом переходе
   между страницами видно «открытие» ленты. Подробнее — chat.js, initChat. */
body.panels-measuring .lf-root {
  transition: none !important;
}

/* Лента занимает всю ширину viewport (width:100vw + escape через margin-left).
   Рейл (.gsb) — fixed на 0..82px и всегда перекрывает левый край ленты,
   независимо от того, шире контента или нет. Поэтому сдвигаем ленту всякий
   раз когда рейл открыт (body.gsb-open). 98 = 82px (рейл) + 16px (зазор). */
@media (min-width: 901px) {
  body.gsb-open .lf-root {
    margin-left: calc(-50vw + 98px);
    width: calc(100vw - 98px);
  }
  /* Если дополнительно сработал shift контента (.main получает padding-left:98) —
     родитель ленты сам смещается на 49px, и базовая формула даёт overshoot.
     Корректируем margin-left на 49 вместо 98, чтобы итоговый левый край остался 98. */
  body.gsb-open.gsb-shifts .lf-root {
    margin-left: calc(-50vw + 49px);
  }

  /* Чат не должен сдвигать ленту. body.chat-shifts перезаписывает у .main
     padding-right с базовых 16px до 356px → дельта 340, поэтому компенсация = 170px
     (половина дельты, а не 178). Ширину не трогаем — правый край уходит под
     чат-панель (z-index 1500 > 1 у ленты), это ок. */
  body.chat-shifts .lf-root {
    margin-left: calc(-50vw + 170px);
  }
  body.chat-shifts.gsb-open .lf-root {
    margin-left: calc(-50vw + 268px);
  }
  body.chat-shifts.gsb-open.gsb-shifts .lf-root {
    margin-left: calc(-50vw + 219px);
  }
}

/* Игровой рейл теперь оверлей, ленту не сдвигаем. */

.lf-filters {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border-right: 1px solid rgba(var(--accent-rgb),0.1);
  flex-shrink: 0;
}

.lf-btn {
  width: 38px; height: 38px; border-radius: 9px;
  background: rgba(var(--accent-rgb),0.05);
  border: 1px solid rgba(var(--accent-rgb),0.12);
  cursor: pointer; color: var(--text-mute);
  display: grid; place-items: center;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.lf-btn:hover { color: var(--text-dim); background: rgba(var(--accent-rgb),0.1); }
.lf-btn.active {
  color: var(--accent); border-color: rgba(var(--accent-rgb),0.4);
  background: rgba(var(--accent-rgb),0.1);
}

.lf-strip-wrap {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

.lf-strip {
  display: flex;
  gap: 8px;
  padding: 0 16px;
  align-items: center;
}

/* ── Анимация нового дропа: слот открывается, карточки сдвигаются ── */
@keyframes lf-slot-open {
  0% {
    width: 0;
    min-width: 0;
    opacity: 0;
    padding-left: 0;
    padding-right: 0;
    border-left-width: 0;
    border-right-width: 0;
    border-top-width: 0;
  }
  45% {
    width: 132px;
    min-width: 132px;
    opacity: 0;
    padding-left: 6px;
    padding-right: 6px;
  }
  100% {
    width: 132px;
    min-width: 132px;
    opacity: 1;
  }
}

/* ── Карточка ── */
.lf-card {
  flex-shrink: 0;
  position: relative;
  width: 132px;
  height: 100px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.22));
  border: 1px solid color-mix(in srgb, var(--rc, #1a9fff) 26%, rgba(var(--accent-rgb),0.14));
  border-top: 2px solid var(--rc, #1a9fff);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 6px 6px;
  gap: 3px;
  cursor: default;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lf-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--rc, #1a9fff) 35%, transparent);
  z-index: 5;
}

.lf-card.new {
  animation: lf-slot-open 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── Время (верхний левый угол) ── */
.lf-card-time {
  position: absolute;
  top: 5px;
  left: 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--rc, #1a9fff);
  letter-spacing: 0.03em;
  line-height: 1;
}

/* ── Арт скина ── */
.lf-card-art {
  width: 72px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-top: 8px;
  flex-shrink: 0;
}

.lf-card-art img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--rc, #1a9fff) 65%, transparent));
  transition: transform 0.2s ease;
}

.lf-card:hover .lf-card-art img { transform: scale(1.08); }

/* ── Название скина ── */
.lf-card-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1;
}

/* ══════════════════════════════════
   Hover-оверлей
══════════════════════════════════ */
.lf-card-hover {
  position: absolute;
  inset: 0;
  background: rgba(3, 11, 24, 0.94);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
  border-radius: inherit;
}

.lf-card:hover .lf-card-hover {
  opacity: 1;
  visibility: visible;
}

/* Кейс — кликабельный блок с картинкой и названием */
.lf-hover-case {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.lf-hover-case:hover { opacity: 0.82; }

.lf-hover-case-img {
  width: 62px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--rc, #1a9fff) 70%, transparent));
  transition: transform 0.18s ease;
}

.lf-hover-case:hover .lf-hover-case-img { transform: scale(1.07); }

.lf-hover-case-name {
  font-size: 8px;
  font-weight: 700;
  color: var(--rc, #1a9fff);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 116px;
  line-height: 1;
}

/* Строка: аватарка + ник */
.lf-hover-user {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 0 2px;
  flex-shrink: 0;
}

a.lf-hover-user {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
a.lf-hover-user:hover .lf-hover-nick {
  color: var(--accent);
}
a.lf-hover-user:hover .lf-hover-avatar {
  border-color: rgba(232, 200, 74, 0.5);
}

.lf-hover-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.lf-hover-avatar--ini {
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.75);
}

.lf-hover-nick {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 88px;
  line-height: 1;
}