/* modern_skin_v2_player_history_patch.css
   Цель:
   - уменьшить плеер (верхний #sc-player и нижний bottom_player)
   - сделать историю треков визуально крупнее/читабельнее
   Подключать ПОСЛЕ modern_skin_v2.css и всех ваших предыдущих патчей.
*/

:root{
  --__modern_skin_v2_player_history_patch__: "2026-01-22";

  /* настройки */
  --player-cover-size: 64px;
  --player-padding-y: 10px;
  --player-padding-x: 12px;

  --bottom-player-cover: 44px;

  --history-font: 1.06rem;
  --history-cover-size: 72px;
  --history-row-padding-y: 10px;
  --history-row-padding-x: 12px;
}

/* =========================
   1) Основной плеер (#sc-player)
   ========================= */
#sc-player.player-container{
  padding: var(--player-padding-y) var(--player-padding-x) !important;
}

/* обложка в основном плеере (варианты разметки) */
#sc-player .image-box img,
#sc-player img.player-image,
#sc-player .player-image{
  width: var(--player-cover-size) !important;
  height: var(--player-cover-size) !important;
  border-radius: 14px !important;
  object-fit: cover;
}

/* компактнее контролы/текст */
#sc-player .controls-holder{
  gap: 8px !important;
}
#sc-player #track-title-container{
  max-height: 2.6em;
}
#sc-player #track-title-container strong{
  font-size: 1.02rem !important;
  line-height: 1.25 !important;
}
#sc-player .progress-holder{
  margin-top: 8px !important;
}

/* кнопки чуть компактнее (не трогаем цвет/фон) */
#sc-player .v-btn{
  min-height: 34px !important;
}
#sc-player .v-btn--size-x-small{
  min-height: 28px !important;
}

/* =========================
   2) Нижний плеер (bottom_player)
   ========================= */
.bottom_player.player-wrapper{
  padding: 6px 10px !important;
}
.bottom_player .player-image{
  width: var(--bottom-player-cover) !important;
  height: var(--bottom-player-cover) !important;
  border-radius: 12px !important;
  object-fit: cover;
}
/* уменьшить высоту иконок внизу (не ломая цвета соцсетей — их мы не трогаем, т.к. это другой блок) */
.bottom_player .v-btn{
  min-width: 36px !important;
  min-height: 36px !important;
}

/* =========================
   3) История треков (увеличить)
   Используем #history-container + history-* классы, которые есть у вашего приложения.
   ========================= */
#history-container .history-table{
  font-size: var(--history-font) !important;
}
#history-container .history-row{
  padding: var(--history-row-padding-y) var(--history-row-padding-x) !important;
  align-items: center;
}

#history-container .history-col.title-col{
  font-size: 1.05em !important;
  font-weight: 600;
  line-height: 1.25;
}
#history-container .history-col.time-col{
  font-size: 0.92em !important;
  opacity: 0.78;
  white-space: nowrap;
}

/* обложки в истории */
#history-container .history-col.img-col img{
  width: var(--history-cover-size) !important;
  height: var(--history-cover-size) !important;
  border-radius: 16px !important;
  object-fit: cover;
  display: block;
}

/* На очень узких экранах — чуть меньше, чтобы не ломалась сетка */
@media (max-width: 480px){
  :root{
    --player-cover-size: 54px;
    --history-cover-size: 62px;
    --history-font: 1.00rem;
  }
  #history-container .history-row{
    padding: 8px 10px !important;
  }
}