/* style.css */

/* 1. VARIABLEN (Damit deine Farbschema-Buttons funktionieren) */
:root {
    --bg-main: #313338;
    --bg-sidebar: #2B2D31;
    --bg-userbar: #232428;
    --bg-header: #1E1F22;
    --bg-input: #1E1F22;
    --text-main: #DBDEE1;
    --text-muted: #949BA4;
    --accent-color: #5865F2;
    --success-color: #23A559;
    --danger-color: #DA373C;
}

/* 2. GRUND-DESIGN */
body { 
    margin: 0; 
    display: flex; 
    height: 100vh; 
    background-color: var(--bg-main); 
    color: var(--text-main); 
    font-family: 'Segoe UI', Tahoma, sans-serif; 
    overflow: hidden;
}

/* 3. LOGIN SCREEN */
#login-screen { 
    position: fixed; /* Liegt über allem */
    top: 0; left: 0;
    width: 100%; height: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background-color: var(--bg-main); 
    z-index: 20000;
}

.login-box { 
    background-color: var(--bg-sidebar); 
    padding: 32px; 
    border-radius: 8px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); 
    width: 300px; 
    text-align: center; 
}

.login-box h2 { color: white; margin-top: 0; font-size: 24px; margin-bottom: 8px; }
.login-box p { color: var(--text-muted); font-size: 14px; margin-bottom: 20px; }
.login-box input { 
    margin-bottom: 20px; 
    font-size: 16px; 
    padding: 10px; 
    width: 100%; 
    box-sizing: border-box; 
    background-color: var(--bg-input);
    border: none;
    color: white;
    border-radius: 4px;
}

#login-btn { 
    width: 100%; 
    background-color: var(--accent-color); 
    color: white; 
    border: none; 
    padding: 12px; 
    border-radius: 4px; 
    cursor: pointer; 
    font-weight: bold; 
    font-size: 16px; 
}

#login-btn:hover { background-color: #4752C4; }

/* 4. CHAT SCREEN / APP LAYOUT */
#app-screen { display: none; width: 100%; height: 100%; flex-direction: row; }

#sidebar {
    width: 240px; 
    background-color: var(--bg-sidebar); 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
    color: var(--text-main);
}

#chat-area { flex: 1; display: flex; flex-direction: column; background-color: var(--bg-main); }

#header { 
    height: 50px; 
    border-bottom: 1px solid var(--bg-header); 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 0 20px; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.2); 
}

#messages { 
    flex: 1; 
    padding: 20px; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}

#input-area { padding: 20px; }

/* Allgemeine Inputs (Nachrichtenfeld) */
input { 
    width: 100%; 
    box-sizing: border-box; 
    padding: 12px; 
    border-radius: 4px; 
    border: none; 
    background-color: var(--bg-input); 
    color: white; 
    outline: none; 
    font-size: 15px; 
}

/* Kanäle & User Liste */
.channel, .user { padding: 8px; border-radius: 4px; cursor: pointer; margin-bottom: 2px; }
.channel:hover, .user:hover { background-color: #3F4147; color: white; }
.channel.active { background-color: #404249; color: white; }

#channels, #users { overflow-y: auto; padding: 10px; }

/* 5. BUTTONS & SPEZIAL-ELEMENTE */
#voice-btn { 
    background-color: var(--success-color); 
    color: white; 
    border: none; 
    padding: 8px 16px; 
    border-radius: 4px; 
    cursor: pointer; 
    font-weight: bold; 
}

#voice-btn.active { background-color: var(--danger-color); }

h3 { font-size: 12px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; margin-top: 20px; padding: 0 10px; }

.msg-box { background: var(--bg-sidebar); padding: 10px 15px; border-radius: 8px; width: fit-content; max-width: 80%; }
.msg-name { font-size: 12px; color: var(--accent-color); font-weight: bold; margin-bottom: 4px; }

.spacer { flex-grow: 1; }

#user-settings-bar {
    background: var(--bg-userbar);
    padding: 10px;
    border-top: 1px solid #3f4147;
}

/* 6. SCROLLBARS */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--bg-header); border-radius: 10px; }

/* 7. THEME BUTTONS (In deinem Einstellungs-Fenster) */
.theme-btn {
    padding: 10px 15px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 5px;
}
/* wer spricht gerade.css */
.speaking {
    color: #23A559 !important; /* Discord-Grün */
    text-shadow: 0 0 8px rgba(35, 165, 89, 0.6);
    transition: all 0.2s ease;
}

.user-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 4px;
}
.mute-icon {
    margin-left: 5px;
    font-size: 14px;
    color: #DA373C; /* Discord-Rot */
    display: none; /* Standardmäßig unsichtbar */
}

/* Wenn diese Klasse gesetzt wird, zeigen wir das Icon */
.is-muted .mute-icon {
    display: inline;
}
.user-name-label {
    transition: all 0.2s ease;
}

/* Der Effekt, wenn jemand spricht */
.speaking {
    color: #23A559 !important; /* Discord-Grün */
    font-weight: bold;
    text-shadow: 0 0 10px rgba(35, 165, 89, 0.7);
}