/* ==========================
   МОБИЛЬНАЯ ВЕРСИЯ
   ========================== */

@media (max-width: 600px) {

    html, body {
        width: 100%;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
    }

    body {
        display: block;
        padding: 8px;
    }

    .player-container {
        width: 100%;
        max-width: none;
        min-height: 100vh;
        border-radius: 0;
        padding: 10px;
        box-sizing: border-box;
    }

    .cover-art {
        width: 70vw;
        max-width: 200px;
        margin: 10px auto 15px;
    }

    .track-title {
        font-size: 20px;
        word-break: break-word;
    }

    .track-artist {
        font-size: 13px;
    }

  
    .ctrl-btn {
        width: 48px;
        height: 48px;
    }

    .play-pause {
        width: 60px;
        height: 60px;
    }

    .playlist-section {
        width: 100%;
        padding: 0 4px;
        box-sizing: border-box;
    }

    .playlist-items {
        max-height: 45vh;
        overflow-y: auto;
        padding-right: 4px;
    }

    .playlist-item {
        padding: 10px 12px;
        margin: 4px 0;
        gap: 10px;
    }

    .playlist-item .playlist-title {
        font-size: 0.9rem;
    }

    .playlist-item .playlist-subtitle {
        font-size: 0.7rem;
    }

    .progress-area {
        width: 100%;
        padding: 0 4px;
        box-sizing: border-box;
    }

    .time-labels {
        font-size: 0.65rem;
        padding: 0 2px;
    }

    .lyrics-box {
        height: 120px;
        font-size: 13px;
        padding: 10px;
    }

    .security-note {
        font-size: 0.55rem;
        padding: 8px;
    }
.player-core {
    padding-bottom: 4px !important;
}


    .messages-list{
        max-height:45vh;
        padding:8px 2px;
        gap:8px;
    }

    .message{
        max-width:88%;
        padding:9px 11px;
        font-size:14px;
    }

    #editMessageModal .modal-content,
    #deleteMessageModal .modal-content{
        width:calc(100% - 24px);
        max-width:none;
        box-sizing:border-box;
        padding:18px;
    }

    #editMessageInput{
        box-sizing:border-box;
        width:100%;
        min-height:110px;
    }

    

    #selectedFile{
        max-width:100%;
        box-sizing:border-box;
        overflow:hidden;
        word-break:break-word;
    }

    #emojiPicker{
        max-width:100%;
        box-sizing:border-box;
    }

    /* Окно сообщений на всю ширину */
    #messagesModal .modal-content{
        width:calc(100% - 12px)!important;
        max-width:none!important;
        box-sizing:border-box!important;
        margin:6px auto!important;
        padding:14px 10px!important;
        border-radius:16px!important;
    }

    #messagesContent{
        width:100%!important;
        box-sizing:border-box!important;
    }

    /* История сообщений */
    #messageHistory{
        width:100%!important;
        max-width:none!important;
        box-sizing:border-box!important;
        max-height:45vh!important;
        margin-bottom:12px!important;
    }

    /* Поле сообщения */
    #messageInput{
        width:100%!important;
        box-sizing:border-box!important;
        min-height:80px!important;
        border-radius:12px!important;
        padding:12px!important;
    }

    /* Строка кнопок */
    #messageInput + div{
        width:100%!important;
        box-sizing:border-box!important;
    }

    /* Круглые кнопки */
    #attachFileBtn,
    #emojiBtn,
    #sendMessageBtn{
        flex:0 0 auto!important;
        width:46px!important;
        height:46px!important;
        min-width:46px!important;
        padding:0!important;
        margin:0!important;
        border-radius:50%!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        box-sizing:border-box!important;
        font-size:20px!important;
    }

    #sendMessageBtn{
        width:50px!important;
        height:50px!important;
        min-width:50px!important;
        font-size:21px!important;
    }

    /* Кнопка "Пользователи" */
    #backToUsers{
        border-radius:10px!important;
        padding:9px 14px!important;
    }

    /* Выбранный файл */
    #selectedFile{
        width:100%!important;
        box-sizing:border-box!important;
        word-break:break-word!important;
    }

    /* Панель эмодзи */
    #emojiPicker{
        width:100%!important;
        box-sizing:border-box!important;
    }


    #currentUser{
        font-size:13px!important;
        white-space:nowrap;
    }

    #loginBtn,
    #accountBtn,
    #adminBtn{
        font-size:13px!important;
        white-space:nowrap;
    }

    #logoutBtn{
        width:auto!important;
        margin:0!important;
        padding:7px 10px!important;
        font-size:13px!important;
        white-space:nowrap;
    }


    /* Плеер */
    .player-container{
        width:100%;
        box-sizing:border-box;
    }

    .player-core{
        width:100%;
        box-sizing:border-box;
    }

    .cover-art{
        width:200px;
        height:200px;
        margin:0 auto 12px;
    }

    .track-info{
        width:100%;
        text-align:center;
        box-sizing:border-box;
    }

    .track-title{
        font-size:17px;
        line-height:1.3;
    }

    .track-artist{
        font-size:13px;
        margin-top:4px;
    }

    #lyricsToggle{
        margin:10px auto 0;
        width:auto!important;
        padding:7px 12px!important;
        font-size:12px;
    }

    .progress-area{
        width:100%;
        box-sizing:border-box;
    }

    
    /* Плейлист */
    .playlist-section{
        width:100%;
        box-sizing:border-box;
    }

    .playlist-header{
        font-size:18px;
    }

#favoritesBtn,
    #statsBtn,
    #messagesBtn{
        width:38px!important;
        height:38px!important;
        min-width:38px!important;
        padding:0!important;
        margin:3px 2px!important;
        border-radius:50%!important;
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        font-size:16px!important;
        box-sizing:border-box!important;
    }

    #searchInput{
        width:200px!important;
        max-width:58%;
        box-sizing:border-box;
    }


 

    .controls{
        display:flex!important;
        flex-direction:column!important;
        flex-wrap:nowrap!important;
        align-items:center!important;
        justify-content:center!important;
        gap:8px!important;
        width:100%!important;
    }

    .controls-main,
    .controls-extra{
        display:flex!important;
        flex-direction:row!important;
        flex-wrap:nowrap!important;
        align-items:center!important;
        justify-content:center!important;
        gap:10px!important;
        width:100%!important;
    }



    .controls-main .ctrl-btn{
        width:52px!important;
        height:52px!important;
        min-width:52px!important;
        font-size:20px!important;
    }

    .controls-main .play-pause{
        width:60px!important;
        height:60px!important;
        min-width:60px!important;
        font-size:23px!important;
    }

    .controls-extra .ctrl-btn{
        width:46px!important;
        height:46px!important;
        min-width:46px!important;
        font-size:18px!important;
    }



}