p {
    margin: 0
}

div.song-wrapper {
  margin-top: -2em; 
  white-space: pre-line;
}
 
div.icons_row {
    align-items: center;
    position: absolute; 
    bottom: 16px;
    display: flex
}

@media (max-width: 767px) {
    #toggle-chords-btn, 
    .chords-icon-trigger, 
    .song-controls {
        display: none !important;
    }
}

/* Базовый стиль для иконки-триггера */
.chords-icon-trigger {
    margin-left: 8px;
    margin-bottom: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;  /* Задаем фиксированный размер активной зоны */
    height: 30px;
    font-size: 1.1rem; /* Размер самой иконки */
    color:#2e2e2e;    /* Серый цвет по умолчанию (скрыты аккорды) */
    cursor: pointer;
    user-select: none; /* Чтобы иконка не выделялась как текст */
}

/* Эффект при наведении (легкое осветление или тень) */
.chords-icon-trigger:hover {
    color: #ba2e5d; /* Цвет темы Future 2021 при наведении */
}

/* АКТИВНОЕ состояние иконки (когда аккорды включены) */
.chords-icon-trigger.active {
    color: #ba2e5d; /* Аккорды включены — иконка становится рыжей */
    font-weight: bold; /* Опционально: немного жирнее */
}

/* Стили для аккордов внутри текста */
.chord {
    display: none; /* По умолчанию скрыты */
    font-weight: bold;
    font-size: small;
    font-family: 'Courier New', monospace;
    margin-left: 10px;
}

.lyrics-container.show-chords .chord {
    position: absolute;
    left: 450px; /* Фиксированная координата от левого края контейнера */
}

.lyrics-container.show-chords .chord_short {
    left: 300px !important;
}

.lyrics-container {
    position: relative; /* Чтобы absolute работал внутри текста */
}

/* Магия выравнивания: превращаем строку в подобие таблицы */
.show-chords br + span.chord, 
.show-chords .chord {
    display: inline-flex;
    justify-content: flex-start; /* Выравнивание внутри колонки аккордов */
    
    /* ФИКСИРОВАННАЯ ШИРИНА КОЛОНКИ АККОРДОВ */  
    margin-left: 20px; 
    
    font-weight: bold;
    font-family: 'Courier New', monospace;
    vertical-align: top;
    
    /* Чтобы аккорд всегда был справа от текста */
    float: right; 
    text-align: left; /* Сами буквы аккорда ровняем по левому краю их колонки */
}

/* Очистка для корректного переноса строк */
.lyrics-container br {
    clear: both;
}

/* Выпадающий плеер */
.player-popup {
    display: none;
    position: absolute;
    top: 38px;
    left: 0;
    width: 300px; /* Оптимальная ширина для плеера */
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    border-radius: 8px;
    z-index: 100;
    overflow: hidden;
}

/* Базовая высота для всех устройств (десктоп) */
.player-popup iframe {
    height: 100px !important;
    transition: height 0.3s ease; /* Плавный переход при изменении размера */
}

/* Настройки для мобильной верстки (экраны до 767px) */
@media (max-width: 767px) {
    .player-popup iframe {
        height: 300px !important;
    }
    
    /* Если сам контейнер ограничивает высоту, его тоже расширяем */
    .player-popup {
        height: auto !important;
        max-height: 350px; 
    }
}

.player-popup.visible {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Стиль иконки Яндекса */
.player-icon-trigger {
    font-size: 1.3rem;
    color: #2e2e2e;
    cursor: pointer;
}

.player-icon-trigger:hover, .player-icon-trigger.active {
    color: #ba2e5d
}