* { margin:0; padding:0; box-sizing:border-box; user-select:none; }
        body {
            background: linear-gradient(145deg, #0b1a2e 0%, #0a111f 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Segoe UI', sans-serif;
            padding:20px;
        }
        .player-container {
            max-width:550px; width:100%;
            background: rgba(18,28,40,0.85);
            backdrop-filter:blur(10px);
            border-radius:2rem;
            box-shadow:0 25px 45px rgba(0,0,0,0.5);
            overflow:hidden;
        }
		
       .player-core {
    padding:1.8rem;
    border-bottom:1px solid rgba(255,255,255,0.08);
}
        .cover-art {
            width:100%; aspect-ratio:1/1; max-width:200px;
            margin:0 auto 1.5rem;
            background: radial-gradient(circle at 30% 20%, #2c3e4e, #0f1722);
            border-radius:1.5rem;
            display:flex; align-items:center; justify-content:center;
            overflow:hidden;
        }
        .cover-art img {
            width:100%; height:100%; object-fit:cover; border-radius:1.5rem;
        }
        .cover-art svg { width:70%; opacity:0.7; }
        .track-info { text-align:center; margin-bottom:1.5rem; }
        .track-title { font-size:1.6rem; font-weight:700; color:#f0f3fa; min-height:2.5rem; }
        .track-artist { font-size:0.9rem; color:#9aaec9; margin-top:6px; }
        .progress-area { margin:1rem 0; }		
        .progress-bar-bg { background:#2a3448; border-radius:100px; height:6px; cursor:pointer; }
        .progress-fill { background:linear-gradient(90deg, #3b82f6, #a855f7); width:0%; height:100%; border-radius:100px; transition:width 0.1s linear; }
        .time-labels { display:flex; justify-content:space-between; margin-top:8px; font-size:0.75rem; color:#8e9eb5; }
        .controls {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.8rem;
    margin-top:auto;
    padding-top:15px;
}
        .ctrl-btn { background:rgba(30,40,55,0.8); border:none; width:48px; height:48px; border-radius:50%; cursor:pointer; color:#eef2ff; font-size:1.3rem; transition:all 0.2s; }
        .ctrl-btn:hover { background:#3b4b6e; transform:scale(1.03); }
        .play-pause { background:linear-gradient(135deg, #3b82f6, #9333ea); width:62px; height:62px; font-size:1.7rem; box-shadow:0 8px 18px rgba(59,130,246,0.3); }
        .playlist-section { background:rgba(0,0,0,0.2); padding:0.5rem 0 1rem; }
        .playlist-header { padding:0 1.5rem 0.7rem 1.8rem; font-weight:600; color:#b9c7dd; font-size:0.9rem; }
        .playlist-items { max-height:280px; overflow-y:auto; height:580px; }
        .playlist-item { display:flex; align-items:center; gap:12px; padding:12px 18px; margin:4px 8px; border-radius:1.2rem; cursor:pointer; color:#ccd9f0; transition:all 0.15s; }
        .playlist-item:hover { background:rgba(59,130,246,0.15); }
        .playlist-item.active { background:rgba(59,130,246,0.2); border-left:4px solid #3b82f6; }
        .playlist-item .play-num { width:28px; font-size:0.85rem; color:#7c8fb0; }
        .playlist-item .playlist-title { font-weight:600; font-size:0.95rem; }
        .playlist-item .playlist-subtitle { font-size:0.75rem; color:#8e9eb5; margin-top:2px; }
        .security-note { text-align:center; font-size:0.65rem; color:#4e6188; padding:12px; background:rgba(0,0,0,0.2); border-top:1px solid rgba(255,255,255,0.03); }
        audio { display:none; }
	.lyrics-box {
    margin-top:20px;
    height:180px;
    overflow-y:auto;
    padding:15px;
    background:rgba(0,0,0,0.25);
    border-radius:15px;
    color:#dbe7ff;
    font-size:14px;
    line-height:1.6;
    white-space:pre-line;
    text-align:left;
}
#statsModal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.7);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}
#statsModal .modal-content{
    width:90%;
    max-width:420px;
    max-height:80vh;
    overflow:auto;
    background:#1d2330;
    color:#fff;
    border-radius:18px;
    padding:20px;
    box-sizing:border-box;
}
#statsModal h2{
    margin-top:0;
    text-align:center;
}
#closeStats{
    width:100%;
    margin-top:20px;
}
#messagesBadge{
    position:absolute;
    top:-7px;
    right:-7px;
    min-width:19px;
    height:19px;
    padding:0 5px;
    border-radius:10px;
    background:#ef4444;
    color:#fff;
    font-size:11px;
    font-weight:bold;
    align-items:center;
    justify-content:center;
    line-height:19px;
    box-shadow:0 2px 6px rgba(0,0,0,.5);
    display:none;
    pointer-events:none;
}
.messages-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    max-height:400px;
    overflow-y:auto;
    padding:10px 4px;
}
.message{
    max-width:80%;
    padding:10px 13px;
    border-radius:14px;
    color:#f8fafc;
    font-size:14px;
    line-height:1.45;
    word-break:break-word;
}
.message-in{
    align-self:flex-start;
    background:#334155;
    border:1px solid #475569;
}
.message-out{
    align-self:flex-end;
    background:#1d4ed8;
    border:1px solid #2563eb;
}
.message-name{
    font-size:12px;
    font-weight:bold;
    color:#cbd5e1;
    margin-bottom:4px;
}
.message-out .message-name{
    color:#bfdbfe;
}
.message-text{
    color:#f8fafc;
}
.message-time{
    margin-top:5px;
    font-size:10px;
    color:#94a3b8;
    text-align:right;
}
#editMessageModal .modal-content,
#deleteMessageModal .modal-content{
    border-radius:18px;
    padding:24px;
    background:#1e293b;
    border:1px solid rgba(148,163,184,.18);
    box-shadow:0 20px 50px rgba(0,0,0,.45);
}
#editMessageInput{
    width:100%;
    min-height:120px;
    margin:12px 0 18px;
    padding:14px 16px;
    border:1px solid rgba(148,163,184,.25);
    border-radius:14px;
    background:#0f172a;
    color:#f8fafc;
    font-size:15px;
    line-height:1.5;
    outline:none;
    resize:vertical;
}
#editMessageInput:focus{
    border-color:#3b82f6;
    box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
#editMessageModal button,
#deleteMessageModal button{
    width:auto;
    margin:0;
    padding:10px 18px;
    border:0;
    border-radius:12px;
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    transition:.2s;
}
#cancelEditMessage,
#cancelDeleteMessage{
    background:#334155!important;
    color:#e2e8f0!important;
}
#confirmEditMessage{
    background:#2563eb!important;
    color:#fff!important;
}
#confirmDeleteMessage{
    background:#dc2626!important;
    color:#fff!important;
}
#editMessageModal button:hover,
#deleteMessageModal button:hover{
    transform:translateY(-1px);
    filter:brightness(1.1);
}

    /* Окно сообщений на всю ширину */
    #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;