/* ============================
   LOGIN (NICHT ÄNDERN!)
============================ */

.login-card{
    width:350px;
    margin:100px auto;
    background:#111827;
    padding:30px;
    border-radius:20px;
    text-align:center;
}

.login-card input{
    width:100%;
    padding:10px;
    margin:10px 0;
    border-radius:10px;
    border:none;
}

.login-card button{
    padding:8px 16px;
    border:none;
    border-radius:8px;
    background:#2563eb;
    color:white;
    cursor:pointer;
}

/* ============================
   GLOBAL
============================ */

body{
    margin:0;
    font-family:Segoe UI, sans-serif;
    color:white;
    background:
        linear-gradient(rgba(15,23,42,0.92),rgba(30,41,59,0.92)),
        url("bg-radio.jpg");
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}

/* ============================
   CHAT (BREITER GEMACHT)
============================ */

.chat-wrapper{
    width:1200px;
    margin:10px auto;
    background:#111827;
    padding:20px;
    border-radius:20px;
    height:calc(100vh - 20px);
    box-sizing:border-box;
}
.chat-header{
    margin-bottom:10px;
    font-weight:bold;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.chat-layout{
    display:flex;
    gap:20px;
}

/* CHATBOX */
.chatbox{
    width:900px;
    height:calc(100vh - 240px);
    overflow:auto;
    background:#020617;
    padding:12px;
    border-radius:12px;
}
/* ============================
   SAMSUNG ONE UI CHAT BUBBLES
============================ */

.msg {
    display: block;
    clear: both;
    width: fit-content;
    max-width: 85%;
    padding: 10px 14px;
    margin: 8px 0;
    background: #1f2937;
    color: #e2e8f0;
    border-radius: 18px;
    line-height: 1.45;
    font-size: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.msg-system {
    background: transparent;
    color: #94a3b8;
    text-align: center;
    font-style: italic;
    box-shadow: none;
}

.msg-me {
    background: #2563eb;
    color: white;
    border-bottom-right-radius: 6px;
}

.msg-other {
    background: #1f2937;
    border-bottom-left-radius: 6px;
}

.msg small {
    display: block;
    margin-top: 4px;
    opacity: 0.6;
    font-size: 12px;
}

/* ============================
   INPUT
============================ */

.chat-input{
    margin-top:8px;
    display:flex;
    gap:8px;
    align-items:center;
}

.chat-input textarea{
    flex:1;
    height:38px;
    resize:none;
    padding:8px 10px;
    border-radius:10px;
    border:none;
    background:#1e293b;
    color:white;
    font-size:14px;
    display:flex;
    align-items:center;
}

.chat-input textarea:focus{
    outline:none;
    background:#263449;
}
.emoji-btn{
    width:42px;
    height:42px;
    border-radius:8px;
    background:#334155;
}

.btn-send{
    background:#2563eb;
    border-radius:8px;
    padding:0 20px;
}

/* SMILIES */
.smilie-box{
    display:none;
    background:#1e293b;
    padding:10px;
    border-radius:10px;
    margin-top:10px;
}

.smilie-box span{
    font-size:22px;
    margin:5px;
    cursor:pointer;
}

/* ============================
   USERLIST
============================ */

.userlist{
    width:260px;
    height:calc(100vh - 240px);
    overflow:auto;
}
.user-entry{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:rgba(255,255,255,0.05);
    padding:8px 10px;
    border-radius:8px;
    margin-bottom:6px;
}

.user-buttons button{
    margin-left:6px;
    padding:4px 10px;
    border-radius:6px;
}

.btn-kick{
    background:#f59e0b;
    color:black;
}

.btn-ban{
    background:#dc2626;
    color:white;
}

/* ============================
   RESPONSIVE
============================ */

@media(max-width:900px){

    .chat-wrapper{
    width:1200px;
    margin:10px auto;
    background:#111827;
    padding:15px;
    border-radius:20px;
    height:calc(100vh - 20px);
    box-sizing:border-box;
}

    .chat-layout{
        flex-direction:column;
    }

    .chatbox{
        width:100%;
        height:60vh;
    }

    .userlist{
        width:100%;
        height:auto;
    }
}

/* ============================================
   AUTOMATISCHE BENUTZERFARBEN
============================================ */

.msg-other {
    background-color: hsl(
        calc(var(--user-hash) * 1deg),
        65%,
        45%
    );
    color: white;
}

.msg-me {
    background:#2563eb;
    color:white;
}

/* ============================================
   ONE UI STREAM PLAYER
============================================ */

.stream-player{
    background:#1e293b;
    padding:14px 18px;
    border-radius:16px;
    margin-bottom:15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 4px 12px rgba(0,0,0,0.25);
}

.player-left{
    display:flex;
    align-items:center;
    gap:12px;
}

.player-btn{
    width:42px;
    height:42px;
    border-radius:50%;
    border:none;
    background:#2563eb;
    color:white;
    font-size:20px;
    cursor:pointer;
    box-shadow:0 3px 8px rgba(0,0,0,0.3);
}

.player-btn:active{
    transform:scale(0.95);
}

.player-title{
    font-size:15px;
    color:#e2e8f0;
    font-weight:500;
}

.player-right input[type=range]{
    width:140px;
    accent-color:#2563eb;
}

/* ============================================
   ONE UI WARNBOX (MODAL)
============================================ */

.modal-overlay{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.55);
    backdrop-filter:blur(4px);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.modal-box{
    background:#1e293b;
    padding:25px;
    border-radius:18px;
    width:360px;
    text-align:center;
    box-shadow:0 8px 20px rgba(0,0,0,0.35);
}

.modal-box h2{
    margin-top:0;
    margin-bottom:10px;
    font-size:20px;
}

.modal-buttons{
    margin-top:20px;
    display:flex;
    justify-content:space-between;
}

/* LOGO ANIMATION */

.logo{
animation:logoPulse 2.5s infinite;
}

@keyframes logoPulse{
0%{transform:scale(1)}
50%{transform:scale(1.05)}
100%{transform:scale(1)}
}

/* ONLINE USER COUNTER */

.online-counter{
background:#1e293b;
padding:10px;
border-radius:10px;
margin-bottom:18px;
font-size:14px;
color:#e2e8f0;
box-shadow:0 3px 10px rgba(0,0,0,0.3);
}

/* MOBILE APP STYLE */

@media(max-width:600px){

.login-card{
width:100%;
height:100vh;
border-radius:0;
padding:30px 20px;
display:flex;
flex-direction:column;
justify-content:center;
}

.login-card h1{
font-size:26px;
}

}