:root { --bg-body: #e5ddd5; --bg-sidebar: #ffffff; --bg-header: #f0f2f5; --bg-chat: transparent; --text-main: #333; --text-muted: #667781; --border-color: #ddd; --msg-mine: #d9fdd3; --msg-theirs: #ffffff; --input-bg: #fff; }
body.dark-mode { --bg-body: #111b21; --bg-sidebar: #111b21; --bg-header: #202c33; --bg-chat: #0b141a; --text-main: #e9edef; --text-muted: #8696a0; --border-color: #202c33; --msg-mine: #005c4b; --msg-theirs: #202c33; --input-bg: #2a3942; }
body { font-family: 'Segoe UI', Tahoma, sans-serif; margin: 0; background-color: var(--bg-body); color: var(--text-main); display: flex; height: 100vh; overflow: hidden; transition: 0.3s; }
.btn-green { width: 100%; padding: 12px; background: #00a884; color: white; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }
.btn-red { width: 100%; padding: 12px; background: #dc2626; color: white; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }
.btn-outline { width: 100%; padding: 12px; background: transparent; color: var(--text-main); border: 1px solid var(--border-color); border-radius: 6px; font-weight: bold; cursor: pointer; }

/* Modals */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1000; display: flex; justify-content: center; align-items: center; }
.modal-content { background: var(--bg-sidebar); padding: 25px; border-radius: 12px; width: 400px; max-width: 90%; color: var(--text-main); text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.agb-text { height: 200px; overflow-y: auto; text-align: left; font-size: 12px; background: var(--bg-header); padding: 15px; border-radius: 6px; margin-bottom: 15px; border: 1px solid var(--border-color); }
.modal-content input { width: 100%; padding: 10px; margin: 5px 0 15px; box-sizing: border-box; border-radius: 6px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-main); }

#login-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #2a2f32; display: flex; justify-content: center; align-items: center; z-index: 100; }
.login-box { background: var(--bg-sidebar); padding: 2.5rem; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); width: 300px; text-align: center; }
.login-box input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid var(--border-color); border-radius: 6px; box-sizing: border-box; background: var(--input-bg); color: var(--text-main); }

#app-screen { display: none; width: 100%; height: 100%; display: flex; }
#sidebar { width: 320px; background: var(--bg-sidebar); border-right: 1px solid var(--border-color); display: flex; flex-direction: column;}
#my-profile { background: var(--bg-header); padding: 15px; border-bottom: 1px solid var(--border-color); display: flex; flex-direction: column; position: relative;}
.my-name-header { font-weight: bold; font-size: 1.1em; display: flex; align-items: center; gap: 10px;}
#theme-toggle { position: absolute; right: 15px; top: 15px; cursor: pointer; background: none; border: none; font-size: 18px; color: var(--text-main);}
#search-area { padding: 10px; border-bottom: 1px solid var(--border-color); display: flex; gap: 5px; }
#search-area input { flex-grow: 1; padding: 8px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-main); border-radius: 4px; outline: none; }
#contact-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex-grow: 1; }
.contact-item { padding: 10px 15px; border-bottom: 1px solid var(--border-color); cursor: pointer; display: flex; align-items: center; }
.contact-item:hover, .contact-item.active { background: var(--bg-header); }
.avatar { width: 45px; height: 45px; background: #00a884; border-radius: 50%; margin-right: 15px; display: flex; justify-content: center; align-items: center; color: white; font-weight: bold; font-size: 18px; flex-shrink: 0; overflow: hidden;}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.contact-info { flex-grow: 1; overflow: hidden; }
.contact-name { font-weight: bold; font-size: 15px; margin-bottom: 3px;}
.contact-status { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.online-dot { width: 10px; height: 10px; background-color: var(--border-color); border-radius: 50%; margin-left: 10px; flex-shrink: 0;}
.online-dot.is-online { background-color: #25d366; box-shadow: 0 0 5px #25d366;}

#welcome-placeholder { flex-grow: 1; display: flex; justify-content: center; align-items: center; flex-direction: column; color: var(--text-muted); background: var(--bg-chat); }
#chat-area { flex-grow: 1; display: flex; flex-direction: column; background-image: url('https://www.transparenttextures.com/patterns/cubes.png'); background-color: var(--bg-chat); background-size: cover; background-position: center; display: none;}
#chat-header { background: var(--bg-header); padding: 10px 20px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; }
#typing-indicator { font-size: 12px; color: #00a884; font-weight: bold; display: none; margin-top: 2px;}
#messages-container { flex-grow: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }

.msg-bubble { max-width: 60%; padding: 10px 15px; border-radius: 12px; font-size: 15px; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); word-wrap: break-word; }
.msg-mine { background: var(--msg-mine); align-self: flex-end; border-top-right-radius: 0; }
.msg-theirs { background: var(--msg-theirs); align-self: flex-start; border-top-left-radius: 0; }
.quoted-box { background: rgba(0, 0, 0, 0.05); border-left: 4px solid #00a884; padding: 6px 10px; border-radius: 6px; margin-bottom: 6px; font-size: 13px; cursor: pointer; display: block; }
.dark-mode .quoted-box { background: rgba(255, 255, 255, 0.08); }
.quoted-sender { font-weight: bold; color: #00a884; font-size: 12px; margin-bottom: 2px; }
.quoted-text { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.msg-actions { display: none; position: absolute; top: -10px; right: 10px; gap: 8px; z-index: 10; background: var(--bg-header); padding: 6px 12px; border-radius: 16px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); border: 1px solid var(--border-color); }
.msg-theirs .msg-actions { right: 10px; }
.msg-bubble:hover .msg-actions { display: flex; }
.action-btn { cursor: pointer; background: none; border: none; font-size: 15px; padding: 0; color: var(--text-muted); transition: 0.1s; }
.action-btn:hover { transform: scale(1.2); }

.msg-text-content { word-break: break-word; }
.msg-meta { font-size: 10px; color: var(--text-muted); display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 4px; }
.status-ticks { font-size: 11px; font-weight: bold; }
.ticks-read { color: #53bdeb; }
.edited-label { font-size: 10px; color: var(--text-muted); font-style: italic; margin-right: 4px; }
.reaction-badge { position: absolute; bottom: -10px; right: 10px; background: var(--bg-header); border: 1px solid var(--border-color); border-radius: 12px; padding: 2px 6px; font-size: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); cursor: default;}

.msg-video { max-width: 100%; border-radius: 8px; margin-bottom: 5px; outline: none; border: 1px solid var(--border-color); }
.msg-file-download { display: inline-flex; align-items: center; background: rgba(0,0,0,0.05); padding: 10px; border-radius: 8px; text-decoration: none; color: var(--text-main); font-weight: bold; font-size: 14px; margin-bottom: 5px; border: 1px solid var(--border-color);}
.msg-image { max-width: 100%; border-radius: 8px; margin-bottom: 5px; cursor: pointer; border: 1px solid var(--border-color); transition: 0.2s;}
.msg-image:hover { opacity: 0.9; }

/* NEU: Der schicke Audio-Visualizer Player */
.custom-audio-player { display: flex; align-items: center; background: rgba(0,0,0,0.05); padding: 8px 12px; border-radius: 20px; gap: 10px; margin-bottom: 5px; width: 200px; cursor: pointer; }
.dark-mode .custom-audio-player { background: rgba(255,255,255,0.05); }
.play-btn { background: #00a884; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 12px; }
.visualizer { display: flex; gap: 2px; height: 20px; align-items: center; flex-grow: 1; }
.vis-bar { width: 4px; background: #00a884; border-radius: 2px; height: 4px; transition: 0.2s; }
.custom-audio-player.playing .vis-bar { animation: bounce 1s infinite alternate; }
.custom-audio-player.playing .vis-bar:nth-child(2) { animation-delay: 0.2s; }
.custom-audio-player.playing .vis-bar:nth-child(3) { animation-delay: 0.4s; }
.custom-audio-player.playing .vis-bar:nth-child(4) { animation-delay: 0.1s; }
.custom-audio-player.playing .vis-bar:nth-child(5) { animation-delay: 0.5s; }
@keyframes bounce { 0% { height: 4px; } 100% { height: 20px; } }

#input-area { background: var(--bg-header); padding: 15px; display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--border-color); }
.circle-btn { background: var(--input-bg); border: none; font-size: 20px; cursor: pointer; border-radius: 50%; width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; color: var(--text-main); flex-shrink: 0;}
#input-area input[type="text"] { flex-grow: 1; padding: 12px 20px; border: none; background: var(--input-bg); color: var(--text-main); border-radius: 24px; font-size: 16px; outline: none; }
#lightbox { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); justify-content: center; align-items: center; }
#lightbox-img { max-width: 90%; max-height: 90%; border-radius: 8px;}
#lightbox-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; cursor: pointer;}