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

*{
box-sizing:border-box;
}

body,html{
margin:0;
padding:0;
font-family:'Inter',sans-serif;
background:linear-gradient(180deg,#0f0f0f,#1a1a1a);
color:#e0e0e0;
min-height:100vh;
}


/* ================= HERO ================= */

.hero{
text-align:center;
padding:60px 20px;
background:linear-gradient(135deg,#1e1e1e,#2a2a2a);
border-bottom:1px solid #2c2c2c;
}

.hero h1{
margin:0;
font-size:38px;
font-weight:600;
}

.hero p{
margin-top:10px;
color:#9e9e9e;
font-size:18px;
}


/* ================= INFO CARDS ================= */

.info{
max-width:1100px;
margin:auto;
padding:40px 20px;

display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:20px;
}

.card{
background:#1b1b1b;
padding:25px;
border-radius:14px;
box-shadow:0 8px 25px rgba(0,0,0,0.4);
transition:all .2s;
}

.card:hover{
transform:translateY(-5px);
box-shadow:0 14px 35px rgba(0,0,0,0.6);
}

.card h2{
margin-top:0;
font-size:20px;
}

.card ul{
padding-left:18px;
line-height:1.6;
}


/* ================= APP LAYOUT ================= */

.app{
display:flex;
height:70vh;
margin:30px auto;
max-width:1200px;
border-radius:14px;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,0.6);
}


/* ================= SIDEBAR ================= */

.sidebar{
width:240px;
background:#161616;
padding:15px 10px;
overflow-y:auto;
border-right:1px solid #2c2c2c;
}

.sidebar h2{
color:#ffffff;
margin:0 0 15px 0;
font-weight:600;
font-size:1.2em;
border-bottom:1px solid #2c2c2c;
padding-bottom:5px;
}


/* USER */

.user{
padding:8px 12px;
margin-bottom:6px;
cursor:pointer;
border-radius:8px;
transition:all .2s;
white-space:nowrap;
}

.user:hover{
background:#2a2a2a;
transform:translateX(3px);
}

.user.unread{
background:#ff9800;
color:#fff;
font-weight:600;
}


/* ================= CHAT ================= */

.chat{
flex:1;
display:flex;
flex-direction:column;
padding:15px;
background:#141414;
overflow:hidden; /* wichtig */
}

/* HEADER */

#chat-header{
padding:10px 0;
font-weight:500;
color:#bdbdbd;
border-bottom:1px solid #2c2c2c;
font-size:16px;
}


/* ================= LOGIN ================= */

#login{
display:flex;
flex-direction:column;
gap:12px;
margin-top:40px;
max-width:300px;
}

#login input{
padding:11px 14px;
border-radius:20px;
border:none;
background:#2c2c2c;
color:white;
outline:none;
font-size:15px;
}

#login input:focus{
background:#3a3a3a;
}

#login button{
padding:11px 14px;
border:none;
border-radius:20px;
background:#2e7d32;
color:white;
cursor:pointer;
font-weight:600;
transition:all .2s;
}

#login button:hover{
background:#1b5e20;
transform:scale(1.05);
}


/* ================= CHATBOX ================= */

#chatbox{
display:flex;
flex-direction:column;
flex:1;
min-height:0; /* wichtig für scroll */
}


/* ================= TOPBAR ================= */

.topbar{
display:flex;
justify-content:flex-end;
margin-bottom:8px;
}

.topbar button{
padding:7px 14px;
border:none;
border-radius:14px;
background:#c62828;
color:white;
cursor:pointer;
margin-left:8px;
font-weight:600;
transition:.2s;
}

.topbar button:hover{
background:#8e0000;
transform:scale(1.05);
}


/* ================= MESSAGES ================= */

#messages{
flex:1;
background:#1a1a1a;
padding:15px;
overflow-y:auto;
min-height:0; /* wichtig für scroll */
white-space:pre-wrap;
border-radius:10px;
box-shadow:inset 0 0 10px rgba(0,0,0,0.5);
font-size:13px;
line-height:1.4;
}


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

.input-area{
display:flex;
margin-top:10px;
}

.input-area input{
flex:1;
padding:11px 15px;
border:none;
border-radius:20px;
background:#2c2c2c;
color:white;
outline:none;
font-size:14px;
}

.input-area input:focus{
background:#3a3a3a;
}

.input-area button{
padding:11px 18px;
margin-left:8px;
border:none;
border-radius:20px;
background:#2962ff;
color:white;
cursor:pointer;
font-weight:600;
transition:.2s;
}

.input-area button:hover{
background:#0039cb;
transform:scale(1.05);
}


/* ================= SCROLLBAR ================= */

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-track{
background:#1a1a1a;
}

::-webkit-scrollbar-thumb{
background:#444;
border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
background:#666;
}


/* ================= MOBILE ================= */

@media(max-width:800px){

.app{
flex-direction:column;
height:80vh;
}

.sidebar{
width:100%;
display:flex;
overflow-x:auto;
border-right:none;
border-bottom:1px solid #2c2c2c;
}

.sidebar h2{
display:none;
}

.sidebar .user{
margin-right:8px;
flex-shrink:0;
}

.chat{
flex:1;
}

#messages{
height:calc(100vh - 260px);
}

/* normale Nachrichten */
.chat-msg{
font-size:14px;
margin-bottom:3px;
}

/* Join Nachricht */
.join-msg{
color:#4caf50;
font-size:12px;
opacity:0.8;
margin:2px 0;
}

}