/* ============================================
   AUDIO SYSTEM STYLES (VKify 2016 Reference)
   Полная реализация из ref/stylesheet.css
   ============================================ */

/* CSS Variables for Audio (из референса VKify 2016) */
:root {
    --audio-background-color: #edeff1;
    --audio-background-color-2: #f5f7fa;
    --audio-background-color-3: #e8edf4;
    --audio-slider-color: #e4e7ea;
    --audio-slider-color-2: #e1e8ee;
    --audio-slider-progress-color: #b8c7d7;
    --audio-count-color: #cfd9e0;
    --audio-count-text-color: #5e6a79;
    --accent-color: #5e81a8;
    --accent-color-2: #5181b8;
    --accent-color-3: #5181b8;
    --muted-text-color: #939393;
    --muted-text-color-2: #656565;
    --muted-text-color-3: #828a99;
    --border-color: #e7e8ec;
    --text-color: #000;
    --module-background-color: #fff;
    --module-header-background-color: #fafbfc;
    --module-border-radius: 2px;
    --button-border-radius: 2px;
}

/* ============================================
   TOOLTIPS (tippys.js)
   ============================================ */

.bigPlayer .tip_result {
    width: max-content !important;
    height: 11px !important;
    top: 12px !important;
    border: none !important;
    position: absolute !important;
}

.bigPlayer .additionalButtons .tip_result,
.bigPlayer .playButtons .tip_result {
    transform: translate(-55%, -45%) !important;
}

.bigPlayer .tip_result::after {
    content: "";
    position: absolute;
    bottom: -4px;
    width: 7px;
    height: 4px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAECAYAAABCxiV9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAoSURBVBhXYzx07tYzBhyAEURgU2BnpCYFlgQBZAUgCSgTAVBNYGAAAJMuDqQSKxBHAAAAAElFTkSuQmCC') no-repeat scroll transparent;
    margin-left: -45%;
}

/* ============================================
   BIG PLAYER (Main Audio Player)
   ============================================ */

.bigPlayer {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: var(--module-header-background-color) !important;
    border-color: var(--border-color) !important;
    border-radius: var(--module-border-radius, 2px) !important;
    overflow: hidden !important;
}

.bigPlayer.ctx_place {
    position: relative !important;
    cursor: default !important;
    transition: background-color 0.2s ease !important;
}

.bigPlayer.ctx_place:hover {
    background: var(--audio-background-color-2) !important;
}

.bigPlayer.ctx_place:active {
    background: var(--audio-background-color-3, #e8edf4) !important;
}

.bigPlayer .bigPlayerWrapper {
    padding: 0 15px;
    display: flex !important;
    align-items: center !important;
}

.bigPlayer .bigPlayerWrapper,
.bigPlayer,
.bigPlayer .playButtons .arrowsButtons {
    height: unset !important;
}

/* Play Buttons */
.bigPlayer .playButtons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: unset !important;
}

.musicIcon {
    background: url(/design/VK/img/audio_player_controls.png) no-repeat;
    height: 10px;
    width: 12px;
}

.bigPlayer .playButtons .playButton {
    width: 28px !important;
    height: 28px !important;
    background: var(--accent-color) !important;
    border-radius: 50% !important;
    margin: 15px 0 !important;
    cursor: pointer !important;
    transition: background-color 0.2s, transform 0.1s !important;
    position: relative !important;
}

.bigPlayer .playButtons .playButton:hover {
    background: var(--accent-color-2, #6888ad) !important;
    transform: scale(1.05) !important;
}

.bigPlayer .playButtons .playButton:active {
    transform: scale(0.95) !important;
}

.bigPlayer .playButtons .playButton .playIcon {
    width: 28px !important;
    height: 28px !important;
    background: url(/design/VK/img/audio_player_controls.png) no-repeat !important;
    background-position: left top !important;
    transition: none !important;
    display: block !important;
    opacity: 1 !important;
    filter: brightness(1) !important;
}

.bigPlayer .playButton.pause .playIcon,
.bigPlayer #bigPlayerPlay.pause .playIcon {
    background-position: 0px -56px !important;
}

.bigPlayer .playButton:not(.pause) .playIcon,
.bigPlayer #bigPlayerPlay:not(.pause) .playIcon {
    background-position: left top !important;
}

/* Улучшенное отображение состояния play/pause */
.bigPlayer #bigPlayerPlay.pause {
    background: var(--accent-color-2, #6888ad) !important;
}

.bigPlayer #bigPlayerPlay:not(.pause) {
    background: var(--accent-color) !important;
}

.bigPlayer .playButtons .playButton:hover .playIcon {
    filter: brightness(1.1) !important;
}

.bigPlayer .playButtons .arrowsButtons {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    margin-left: 4px !important;
}

.bigPlayer .playButtons .nextButton {
    background-position: 0px -88px;
}

.bigPlayer .playButtons .backButton {
    background-position: 0px -102px;
}

.bigPlayer .additionalButtons {
    padding: 0 0 0 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Track Panel */
.bigPlayer .trackPanel {
    margin-left: 10px !important;
    margin-right: 15px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    width: calc(var(--page-width) - 242px) !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.wide_column .bigPlayer .trackPanel {
    width: 288px !important;
    margin-right: 15px !important;
}

.bigPlayer .trackInfo {
    padding-top: 19px !important;
    overflow: hidden !important;
    height: unset !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: flex !important;
    align-items: baseline !important;
    min-height: 20px !important;
    gap: 8px !important;
    justify-content: space-between !important;
}

.bigPlayer .trackInfo>span {
    display: inline-block !important;
    max-width: 50% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.bigPlayer .trackInfo .trackPerformers {
    max-width: 45% !important;
}

.bigPlayer .trackInfo > span {
    display: inline !important;
}

.bigPlayer .trackInfo .trackPerformers {
    max-width: none !important;
}

.bigPlayer .trackInfo a {
    color: var(--text-color, #000);
    text-decoration: none;
}

.bigPlayer .trackInfo a:hover {
    text-decoration: underline;
}

.bigPlayer .trackInfo .timer {
    padding: 0 !important;
    flex-shrink: 0 !important;
    margin-left: 0 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    height: auto !important;
}

.bigPlayer .track .timer {
    display: none !important;
}

.bigPlayer .track .timer span[class], 
.bigPlayer .track .timer {
    letter-spacing: 0.02em !important;
    color: var(--muted-text-color) !important;
    display: inline-block !important;
    vertical-align: baseline !important;
    font-family: var(--font-family, Arial, sans-serif) !important;
    transition: color 0.2s ease !important;
}

.bigPlayer .track .timer .time {
    color: var(--text-color) !important;
    font-weight: 500 !important;
    min-width: 42px !important;
    text-align: right !important;
}

.bigPlayer .track .timer .elapsedTime {
    color: var(--muted-text-color) !important;
    font-weight: 400 !important;
    min-width: 48px !important;
    text-align: left !important;
}

.bigPlayer .track .timer span:not(.time):not(.elapsedTime) {
    color: var(--muted-text-color-2, #656565) !important;
    margin: 0 2px !important;
}

.bigPlayer .trackInfo .trackName {
    display: flex !important;
    align-items: baseline !important;
    gap: 5px !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.bigPlayer .trackInfo .trackName span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Track Progress (все transitions из референса) */
.bigPlayer .track *,
.audioEmbed .track *,
.bigPlayer .trackPanel,
.audioEntry,
.audioEntry .subTracks {
    transition: .2s !important;
}

/* Убираем общий transition для selectableTrack, чтобы избежать конфликтов */
/* Transition для selectableTrack задается индивидуально для прогресс-бара и volumePanel */

.bigPlayer .trackPanel .track {
    margin: 4px 0 0 !important;
    padding-bottom: 17px !important;
    /* Убрана transition для margin и padding, чтобы избежать дергания при hover */
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

/* Track Progress Wrapper - контейнер для прогресс-бара и volumePanel на одном уровне */
.bigPlayer .track .trackProgressWrapper {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 12px !important;
    position: relative !important;
    flex-wrap: nowrap !important;
}

/* Прогресс-бар - занимает доступное пространство, но не заходит на volumePanel */
.bigPlayer .track .trackProgressWrapper > .selectableTrack[data-seek="true"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    flex-shrink: 1 !important;
    overflow: hidden !important;
}

/* VolumePanel в trackProgressWrapper - фиксированная ширина справа */
.bigPlayer .track .trackProgressWrapper > .volumePanel {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
}

/* Убрано изменение margin-top и padding-bottom при hover, чтобы избежать дергания элементов */

/* Прогресс-бар в bigPlayer */
.bigPlayer .trackProgressWrapper > .selectableTrack[data-seek="true"],
.audioEmbed .track > .selectableTrack {
    --slider-height: 3px !important;
    margin-top: 0 !important;
    border: 0 !important;
    height: var(--slider-height) !important;
    background: var(--audio-slider-color) !important;
    border-radius: 4px !important;
    position: relative !important;
    cursor: pointer !important;
    /* Убрана transition для height, чтобы избежать дергания при hover */
    transition: background-color 0.2s ease !important;
}

.bigPlayer .trackProgressWrapper > .selectableTrack[data-seek="true"]:hover,
.audioEmbed .track > .selectableTrack:hover {
    /* Высота не изменяется при hover, чтобы избежать дергания элементов */
    background: var(--audio-slider-color-2, #e1e8ee) !important;
}

/* Слайдер прогресс-бара */
.bigPlayer .trackProgressWrapper > .selectableTrack[data-seek="true"] .slider,
.audioEmbed .track .slider {
    width: 0% !important;
    height: var(--slider-height) !important;
    background: var(--accent-color) !important;
    bottom: unset !important;
    top: 0 !important;
    left: 0 !important;
    position: absolute !important;
    z-index: 2 !important;
    border-radius: 4px !important;
    /* Убрана transition для height, чтобы избежать дергания при hover */
    transition: width 0.1s linear, background-color 0.2s ease !important;
    min-width: 3px !important;
    box-shadow: 0 0 2px rgba(94, 129, 168, 0.3) !important;
}

.bigPlayer .trackProgressWrapper > .selectableTrack[data-seek="true"]:hover .slider {
    background: var(--accent-color-2, #6888ad) !important;
    box-shadow: 0 0 4px rgba(94, 129, 168, 0.4) !important;
}

/* Load progress только для прогресс-бара (не для volumePanel) - общие стили для других элементов */
.audioEmbed .selectableTrack .selectableTrackLoadProgress,
.bigPlayer .trackProgressWrapper > .selectableTrack[data-seek="true"] .selectableTrackLoadProgress {
    top: 0 !important;
    left: 0 !important;
    height: var(--slider-height) !important;
    position: absolute !important;
    z-index: 1 !important;
    border-radius: 4px !important;
    width: 100% !important;
}

.audioEmbed .selectableTrack .selectableTrackLoadProgress .load_bar,
.bigPlayer .trackProgressWrapper > .selectableTrack[data-seek="true"] .selectableTrackLoadProgress .load_bar {
    background: var(--audio-slider-progress-color) !important;
    border-bottom: 0 !important;
    height: var(--slider-height) !important;
    position: absolute !important;
    border-radius: 4px !important;
    width: 0% !important;
    left: 0 !important;
    top: 0 !important;
    transition: width 0.3s ease !important;
    opacity: 0.6 !important;
}

/* Убираем load progress из volumePanel */
.bigPlayer .track .volumePanel .selectableTrackLoadProgress {
    display: none !important;
}

/* Стили для внутренних div только в прогресс-баре (не в volumePanel) */
.bigPlayer .trackPanel .track .trackProgressWrapper > .selectableTrack[data-seek="true"] > div {
    width: 100% !important;
    font-size: 0 !important;
    line-height: 0 !important;
    position: relative !important;
    height: 100% !important;
}

/* Стили для внутренних div в volumePanel */
.bigPlayer .trackPanel .track .volumePanel .selectableTrack > div {
    width: 100% !important;
    font-size: 0 !important;
    line-height: 0 !important;
    position: relative !important;
    height: 100% !important;
}

/* Volume Panel - горизонтальный после прогресс-бара */
.bigPlayer .track .volumePanel {
    padding: 0 !important;
    width: 52px !important;
    margin-left: 0 !important;
    transition: .2s !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 3px !important;
    min-height: 3px !important;
}

.bigPlayer .track .volumePanel:has(.selectableTrack:hover) {
    padding: 0 !important;
}

.bigPlayer .track .volumePanelTrack {
    position: relative !important;
    width: 100% !important;
    height: 3px !important;
}

.bigPlayer .track .volumePanel .selectableTrack {
    height: 3px !important;
    width: 100% !important;
    background: var(--audio-slider-color) !important;
    border-radius: 4px !important;
    position: relative !important;
    cursor: pointer !important;
    /* Убрана transition для height, чтобы избежать дергания при hover (как в прогресс-баре) */
    transition: background-color 0.2s ease !important;
}

.bigPlayer .track .volumePanel .selectableTrack:hover {
    /* Высота не изменяется при hover, чтобы избежать дергания элементов (как в прогресс-баре) */
    background: var(--audio-slider-color-2, #e1e8ee) !important;
}

.bigPlayer .track .volumePanel .slider {
    height: 3px !important;
    width: 0% !important;
    bottom: 0 !important;
    top: 0 !important;
    left: 0 !important;
    position: absolute !important;
    background: var(--accent-color) !important;
    border-radius: 4px !important;
    z-index: 2 !important;
    /* Убрана transition для height, чтобы избежать дергания при hover (как в прогресс-баре) */
    transition: width 0.1s linear, background-color 0.2s ease !important;
    min-width: 3px !important;
    box-shadow: 0 0 2px rgba(94, 129, 168, 0.3) !important;
}

.bigPlayer .track .volumePanel .selectableTrack:hover .slider {
    /* Высота не изменяется при hover, чтобы избежать дергания элементов (как в прогресс-баре) */
    background: var(--accent-color-2, #6888ad) !important;
    box-shadow: 0 0 4px rgba(94, 129, 168, 0.4) !important;
}

/* Additional Buttons */
.bigPlayer .additionalButtons {
    padding: 0 0 0 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.bigPlayer .additionalButtons .repeatButton {
    height: 14px;
    width: 18px;
    background-position: 0px -132px;
}

.bigPlayer .additionalButtons .shuffleButton {
    height: 15px;
    width: 16px;
    background-position: 0px -115px;
}

.bigPlayer .additionalButtons .deviceButton {
    height: 14px;
    width: 13px;
    background-position: 0px -148px;
}

.bigPlayer .additionalButtons .statusButton {
    height: 15px;
    width: 16px;
    background-position: 0px -165px;
}

.bigPlayer .additionalButtons .musicIcon {
    opacity: .7 !important;
    transition: opacity 0.2s ease, transform 0.15s ease !important;
    cursor: pointer !important;
}

.bigPlayer .additionalButtons .musicIcon:hover {
    opacity: 1 !important;
    transform: scale(1.1) !important;
}

.bigPlayer .additionalButtons .musicIcon:active {
    transform: scale(0.95) !important;
}

.bigPlayer .musicIcon.pressed {
    filter: none !important;
    opacity: 1 !important;
}

.bigPlayer .musicIcon.pressed:hover {
    opacity: 1 !important;
}

/* ============================================
   AUDIO ENTRY (Track in List)
   ============================================ */

.audioEmbed {
    position: relative !important;
}

.audioEntry {
    border-radius: 3px;
}

.vertical-attachment .audioEntry {
    max-height: unset;
}


.audioEntry:hover, .vertical-attachment .audioEntry:hover {
    background-color: var(--audio-background-color-2) !important;
}

.audioEntry.nowPlaying, .audioEntry.nowPlaying:hover {
    background: var(--audio-background-color);
    outline: 0;
}

.audioEntry.nowPlaying, .audioEntry.nowPlaying:hover, .vertical-attachment .audioEntry.nowPlaying:hover {
    background-color: var(--audio-background-color-3) !important;
}

.audioEntry.nowPlaying .status,
.audioEntry.nowPlaying .performer a,
.audioEntry.nowPlaying .title {
    color: unset;
}

.audioEntry.nowPlaying .explicitMark path {
    fill: var(--muted-text-color-3);
}

.audioEntry .audioEntryWrapper,
.vertical-attachment .audioEntry .audioEntryWrapper {
    cursor: default !important;
    padding: 6px 10px;
    gap: 10px !important;
    display: flex !important;
    align-items: center !important;
    user-select: none !important;
}

.audioEntry .audioEntryWrapper[data-draggable="true"] {
    cursor: default !important;
}

.audioEntry .audioEntryWrapper.dragging {
    cursor: grabbing !important;
}

.audioEntry .audioEntryWrapper.drag-over {
    border-top: 2px solid var(--accent-color) !important;
}

.drag-ghost {
    background: #fff !important;
    border-radius: 4px;
    will-change: transform;
    backface-visibility: hidden;
    display: block !important;
    visibility: visible !important;
    opacity: 0.9 !important;
    position: fixed !important;
}

.drag-ghost * {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Защита от случайного выделения во время перетаскивания */
body.dragging-active {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

.module_body .audioEntry, .attachments_m .audioEntry {
    margin: 0 -8px !important;
    width: calc(100% + 16px) !important;
}

.audioEntry .audioEntryWrapper {
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    cursor: default !important;
}

.audioEntry .audioEntryWrapper {
    height: auto;
    cursor: default !important;
}

/* Player Button */
.audioEntry .playerButton {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}

.audioEntry .playerButton .playIcon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: var(--accent-color-2) url(/design/VK/img/audio_playpause.png) no-repeat 8px 7px !important;
}

.audioEntry .playerButton {
    width: 24px;
    height: 24px;
}

.audioEntry.nowPlaying .playIcon {
    background-position-y: -15px !important;
}

/* Explicit Mark (18+ метка) */
.explicitMark {
    display: inline-block !important;
    margin-left: 4px !important;
    vertical-align: middle !important;
    fill: var(--muted-text-color) !important;
    opacity: 0.6 !important;
}

.audioEntry .status .title.withLyrics {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
}

.audioEntry .status .title.withLyrics:hover {
    text-decoration-style: solid;
}

/* Lyrics Display */
.audioEmbed .lyrics {
    display: none !important;
    padding: 12px 15px !important;
    margin: 0 10px 8px 44px !important;
    background: var(--audio-background-color-2) !important;
    border-radius: 4px !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    color: var(--muted-text-color-2) !important;
    white-space: pre-wrap !important;
}

.audioEmbed.showLyrics .lyrics {
    display: block !important;
}

/* Status (Track Info) */
.audioEntry .status,
.audioEntry .status:hover .mediaInfo {
    position: static !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    width: unset !important;
    height: unset !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.audioEntry .status .mediaInfo {
    line-height: inherit !important;
}

.audioEntry .status .performer {
    font-weight: 400;
}

.audioEntry .status .performer a {
    color: var(--text-color, #000);
    text-decoration: none;
}

.audioEntry .status .performer a:hover {
    text-decoration: underline;
}

.audioEntry .status .title {
    color: var(--text-color, #000);
}

.audioEntry.nowPlaying .status,
.audioEntry.nowPlaying .performer a,
.audioEntry.nowPlaying .title {
    color: unset;
}

.audioEntry.nowPlaying .performer a,
.audioEntry.nowPlaying .performer {
    color: var(--link-color) !important;
}

/* Mini Timer and Buttons */
.audioEntry .mini_timer {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    margin-left: auto !important;
}

.audioEntry:hover .buttons {
    background-color: var(--audio-background-color-2);
}

.nowPlaying:hover .buttons {
    background-color: var(--audio-background-color-3);
}

/* Позиционирование для меню относительно buttons */
.audioEntry .buttons {
    position: relative !important;
}

.audioEntry .mini_timer .nobold {
    font-size: 12px;
    color: var(--muted-text-color);
}

.audioEntry .mini_timer .hideOnHover {
    display: inline-block !important;
}

/* Убрано скрытие mini_timer при hover */
/* .audioEntry:hover .mini_timer .hideOnHover {
    display: none !important;
} */

.audioEntry .buttons .musicIcon {
    background: url(/design/VK/img/common.png) no-repeat !important;
    height: 13px !important;
    width: 13px !important;
    box-sizing: border-box !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s !important;
}

.audioEntry .buttons .musicIcon:hover {
    opacity: 1 !important;
}

.audioEntry .buttons .musicIcon.download-icon {
    background: url(/design/VK/img/download_icon.png) no-repeat !important;
}

.audioEntry .buttons .musicIcon.add-icon {
    background-position: 0px 1px !important;
}

.audioEntry .buttons .musicIcon.remove-icon {
    background-position: 0px -28px !important;
}

.audioEntry .buttons .edit-icon {
    background-position: 0px -44px !important;
}

.audioEntry .buttons .report-icon.musicIcon {
    background-position: 0 -129px !important;
    background-size: 29px;
}

/* Иконка троеточия для меню (три круглые точки) */
.audioEntry .buttons .menu-dots-icon {
    width: 20px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: var(--muted-text-color) !important;
    transition: color 0.2s ease !important;
    position: relative !important;
}

.audioEntry .buttons .menu-dots-icon::before {
    content: '' !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background-color: currentColor !important;
    display: block !important;
    box-shadow: 6px 0 0 currentColor, -6px 0 0 currentColor !important;
}

.audioEntry .buttons .menu-dots-icon:hover {
    color: var(--accent-color) !important;
}

/* Sub Tracks (Progress bars) - только для bigPlayer, не для треков в списке */
.audioEntry .subTracks {
    display: none !important;
}

.audioEntry .track {
    position: relative;
}

.audioEntry .track .selectableTrack {
    --slider-height: 2px;
    height: var(--slider-height);
    background: var(--audio-slider-color);
    border-radius: 4px;
    position: relative;
    cursor: pointer;
}

.audioEntry .track .selectableTrack:hover {
    --slider-height: 4px;
}

/* ============================================
   AUDIO LIST CONTAINER
   ============================================ */

.audiosDiv {
    margin: 0 !important;
    padding: 14px 9px !important;
    width: unset !important;
    /* display: block !important; - убрано, чтобы можно было скрывать через JS */
}

.audiosContainer .scroll_container {
    max-height: none !important;
}

/* ============================================
   AUDIO PAGE LAYOUT (wide_column/narrow_column)
   ============================================ */

.audio__page {
    display: flex;
    gap: 10px;
}

/* Wide Column (Main Content) - точные размеры из референса */
.wide_column {
    position: relative;
    width: 100%;
}

.narrow_column_wrap {
    position: relative !important;
    width: 230px !important;
}

.narrow_column {
    width: 230px !important;
}

.fixed {
    position: fixed !important;
}

.wide_column_left .wide_column_wrap {
    margin-right: 245px !important;
}

.wide_column_left .wide_column {
    float: left !important;
}

.wide_column_left .narrow_column_wrap {
    float: right !important;
}

.page_block {
    background: var(--module-background-color, #fff) !important;
    border-radius: var(--module-border-radius, 2px) !important;
    box-shadow: 0 1px 0 0 #d7d8db, 0 0 0 1px #e3e4e8 !important;
    margin-bottom: 10px !important;
}

/* ============================================
   AUDIO POPUP (Modal)
   ============================================ */

#audio_popup_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}

#audio_popup_overlay.show {
    display: flex;
}

#audio_popup {
    position: fixed;
    background: #fff;
    border-radius: 4px;
    width: 660px;
    height: 630px;
    overflow: hidden;
    display: none;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
    animation: popupAppear 0.2s ease;
    z-index: 9999;
}

#audio_popup.show {
    display: flex;
}

/* Стрелка вверх (скрыта, не нужна) */
.audio-tippy-arrow {
    display: none !important;
}

/* Стили для tippy.js popup музыки */
.tippy-box[data-theme~="audio"] {
    width: 660px !important;
    max-height: 630px !important;
    height: 630px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
}

.tippy-box[data-theme~="audio"] .tippy-content {
    padding: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.tippy-box[data-theme~="audio"] .audio_popup_content_wrap {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    padding: 15px !important;
}

@keyframes popupAppear {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

#audio_popup_header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color, #e7e8ec);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

#audio_popup_title {
    font-size: 15px;
    font-weight: 500;
    color: #000;
}

#audio_popup_close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--muted-text-color);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    line-height: 1;
}

#audio_popup_close:hover {
    color: #000;
}

#audio_popup_body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.audio_popup_content_wrap {
    display: flex;
    gap: 15px;
    padding: 15px;
    min-height: 400px;
}

.audio_popup_main {
    flex: 1;
    min-width: 0;
}

.audio_popup_sidebar {
    width: 220px;
    flex-shrink: 0;
}

.audio_popup_actions {
    background: #fff;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 10px;
    border: 1px solid var(--border-color, #e7e8ec);
}

.audio_popup_actions .button {
    margin-bottom: 8px;
}

.audio_popup_actions .button:last-child {
    margin-bottom: 0;
}

.audio_popup_friends_block {
    background: #fff;
    border-radius: 4px;
    border: 1px solid var(--border-color, #e7e8ec);
}

.audio_popup_friends_title {
    padding: 12px 15px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted-text-color-2);
    border-bottom: 1px solid var(--border-color, #e7e8ec);
}

.audio_popup_friends_block .friendsAudiosList {
    padding: 0;
    border-top: 0;
}

.audio_popup_friends_more_wrap {
    padding: 12px 15px;
    border-top: 1px solid var(--border-color, #e7e8ec);
}

.audio_popup_friends_more_btn {
    width: 100%;
    margin: 0;
}

.audio_popup_footer {
    padding: 15px 20px;
    border-top: 1px solid var(--border-color, #e7e8ec);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: #fafbfc;
}

.playingNow {
    flex: 1;
    font-size: 13px;
    color: var(--muted-text-color-2);
}

/* ============================================
   AUDIO FRIENDS
   ============================================ */

.audio__friends {
    padding: 8px 15px;
    max-height: 400px;
    overflow-y: auto;
}

.audio__friend {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 0 !important;
    color: #2a5885 !important;
    text-decoration: none !important;
    transition: opacity 0.15s !important;
    cursor: pointer !important;
}

.audio__friend:hover {
    opacity: 0.8 !important;
    text-decoration: none !important;
}

.audio__friend_avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

.audio__friend_info {
    flex: 1 !important;
    min-width: 0 !important;
}

.audio__friend_name {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #2a5885 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.audio__friend_count {
    font-size: 12px !important;
    color: var(--muted-text-color) !important;
}

/* ============================================
   VERTICAL TABS (Sidebar Menu)
   ============================================ */

.verticalGrayTabsWrapper {
    margin-bottom: 10px !important;
}

.verticalGrayTabs {
    background: #fff !important;
    border-radius: var(--module-border-radius, 2px) !important;
    box-shadow: 0 1px 0 0 #d7d8db, 0 0 0 1px #e3e4e8 !important;
}

.verticalGrayTabs .with_padding {
    padding: 6px 0 !important;
}

.verticalGrayTabs a {
    display: block !important;
    padding: 7px 5px 7px 18px !important;
    color: var(--accent-color, #5e81a8) !important;
    text-decoration: none !important;
    font-size: 12.5px !important;
    transition: background 0.1s !important;
    cursor: pointer !important;
    border-left: 2px solid transparent !important;
}

.verticalGrayTabs a:hover {
    text-decoration: none !important;
    background: var(--audio-background-color-2, #f5f7fa) !important;
}

.verticalGrayTabs #used {
    color: var(--text-color) !important;
    font-weight: 500 !important;
    padding: 7px 5px 7px 18px !important;
    border: 0 !important;
    border-left: solid 2px var(--accent-color-3) !important;
    background: var(--audio-background-color-2) !important;
}

.verticalGrayTabs hr {
    margin: 6px 0;
    border: 0;
    border-top: 1px solid var(--border-color, #e7e8ec);
}

/* My Audio Tab with Add Button */
.myaudiotab {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

.myaudiotab a:not(.addAudioSmall) {
    flex: 1 !important;
}

.addAudioSmall {
    width: 24px !important;
    height: 24px !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s !important;
}

.addAudioSmall:hover {
    opacity: 1 !important;
}

.addAudioSmall .addIcon {
    width: 16px;
    height: 16px;
    background: url(/design/VK/img/common.png) no-repeat;
    background-position: 0px 1px; /* Иконка загрузки (add icon) */
}

/* Friends Audio List */
.friendsAudiosList {
    padding: 6px 0 0 !important;
    border-top: 1px solid var(--border-color, #e7e8ec) !important;
}

.friendsAudiosList a {
    display: block;
    padding: 0 !important;
    border: 0 !important;
}

.friendsAudiosList a:hover {
    background: transparent !important;
}

.friendsAudiosList .elem {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 15px !important;
    transition: background 0.1s !important;
    cursor: pointer !important;
}

.friendsAudiosList .elem:hover {
    background: var(--audio-background-color-2, #f5f7fa);
}

.friendsAudiosList .elem img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.friendsAudiosList .additionalInfo {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.friendsAudiosList .additionalInfo .name {
    font-size: 13px;
    font-weight: 400;
    color: var(--accent-color, #5e81a8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.friendsAudiosList .additionalInfo .desc {
    font-size: 12px;
    color: var(--muted-text-color, #939393);
    display: block;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.audio__empty {
    padding: 40px 20px !important;
    text-align: center !important;
    color: var(--muted-text-color) !important;
    font-size: 14px !important;
}

.noOverflow {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

/* Hide "Add" button for own tracks */
.audioEmbed[data-owner="1"] .add-icon {
    display: none !important;
}

/* Show "Remove" button only for own tracks */
.audioEmbed[data-owner="0"] .remove-icon {
    display: none !important;
}

/* ============================================
   CONTEXT MENU (правая кнопка мыши)
   ============================================ */

.audio__context_menu {
    position: absolute !important;
    background: var(--module-background-color, #fff) !important;
    border: 1px solid var(--border-color-2, #e7e8ec) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1) !important;
    border-radius: var(--tooltip-border-radius, 4px) !important;
    z-index: 99 !important;
    min-width: 150px !important;
    max-width: 250px !important;
    padding: 0 !important;
    opacity: 0 !important;
    transform: scale(0.95) !important;
    transition: opacity 0.2s, transform 0.2s !important;
    pointer-events: none !important;
}

.audio__context_menu_show {
    pointer-events: auto !important;
    opacity: 1 !important;
    transform: scale(1) !important;
}

.audio__context_item {
    display: block !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    position: relative !important;
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 13px !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    color: var(--link-color, #2a5885) !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
    text-decoration: none !important;
}

.audio__context_item:hover {
    background: var(--button-background-color, #f5f7fa) !important;
    text-decoration: none !important;
}

.audio__context_item:first-child {
    border-radius: var(--tooltip-border-radius, 4px) var(--tooltip-border-radius, 4px) 0 0 !important;
}

.audio__context_item:last-child {
    border-radius: 0 0 var(--tooltip-border-radius, 4px) var(--tooltip-border-radius, 4px) !important;
}

/* ============================================
   DRAGGABLE (для перетаскивания треков)
   ============================================ */

.audioEntryWrapper[draggable="true"] {
    cursor: grab !important;
}

.audioEntryWrapper[draggable="true"]:active {
    cursor: grabbing !important;
}

/* ============================================
   AUDIO SEARCH
   ============================================ */

.audioSearchBlock {
    background: var(--module-background-color, #fff) !important;
    border-radius: var(--module-border-radius, 2px) !important;
    box-shadow: 0 1px 0 0 var(--shadow-bottom-color, #d7d8db), 0 0 0 1px var(--shadow-outline-color, #e3e4e8) !important;
    margin-bottom: 10px !important;
    padding: 10px 15px !important;
}

.audioSearchContainer {
    position: relative !important;
}

.audioSearchInputWrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.audioSearchInput {
    width: 100% !important;
    padding: 8px 35px 8px 12px !important;
    border: 1px solid var(--border-color, #e7e8ec) !important;
    border-radius: var(--button-border-radius, 2px) !important;
    font-size: 13px !important;
    color: var(--text-color, #000) !important;
    background: var(--module-background-color, #fff) !important;
    outline: none !important;
    transition: border-color 0.2s !important;
}

.audioSearchInput:focus {
    border-color: var(--accent-color, #5e81a8) !important;
}

.audioSearchInput::placeholder {
    color: var(--muted-text-color, #939393) !important;
}

.audioSearchIcon {
    position: absolute !important;
    right: 12px !important;
    width: 16px !important;
    height: 16px !important;
    background: url(/design/VK/img/common.png) no-repeat !important;
    background-position: -20px -40px !important;
    opacity: 0.6 !important;
    pointer-events: none !important;
    cursor: pointer !important;
}

.audioSearchIcon:hover {
    opacity: 0.8 !important;
}

/* .audioSearchResults - контейнер для секций поиска, стили применяются к дочерним элементам */

.audioSearchSection {
    background: var(--module-background-color, #fff) !important;
    border-radius: var(--module-border-radius, 2px) !important;
    box-shadow: 0 1px 0 0 var(--shadow-bottom-color, #d7d8db), 0 0 0 1px var(--shadow-outline-color, #e3e4e8) !important;
    margin-bottom: 10px !important;
    padding: 15px !important;
}

.audioSearchSectionTitle {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-color, #000) !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--border-color, #e7e8ec) !important;
}

.audioSearchSectionContent {
    min-height: 20px !important;
}

.audioSearchSectionContent .audio__empty {
    padding: 20px !important;
    text-align: center !important;
    color: var(--muted-text-color, #939393) !important;
    font-size: 13px !important;
}