/* ============================================================================
   Zauberchat Theme - Adaption des alten ETChat-Styles "etchat_white"
   Dunkles mystisches Design mit Türkis-Akzenten (#81F7F3) und hexe.jpg
   Wird NACH style.css geladen und überschreibt die hartcodierten Farben.
   ============================================================================ */

:root {
    /* Standard-Textfarben für Chat-Nachrichten (werden in app.js per var() genutzt) */
    --chat-text-default: #000000;
    --chat-name-default: #16303a;
    --chat-text-action: #333333;

    /* Zauberchat-Palette */
    --zc-accent: #81F7F3;
    --zc-accent-dark: #3ba8a5;
    --zc-panel: rgba(9, 17, 26, 0.86);
    --zc-panel-soft: rgba(13, 24, 34, 0.78);
    --zc-input: #0a141d;
    --zc-text: #d8f4f4;
    --zc-text-dim: #8fb8bd;
    --zc-border: rgba(129, 247, 243, 0.55);
    --zc-border-soft: rgba(129, 247, 243, 0.28);
}

/* Hintergrundbild-Varianten: hexe-bright.jpg wird beim Build aus hexe.jpg
   generiert (heller + schärfer, siehe scratch/make-bright-bg.js) */
:root {
    --zc-bg-chat: url('/etchat/hexe-bright.jpg');
}

/* ---------- Global / Hintergrund ---------- */
body {
    background-color: #060d14 !important;
    color: var(--zc-text) !important;
}

/* Login-/Landing-Screen: alter Login-Hintergrund (magisch.jpg) statt heller Fläche */
#auth-screen {
    background-color: transparent !important;
    background-image: url('/etchat/magisch.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}

/* Admin-Hintergrund dunkel */
.admin-body {
    background: #060d14 url('/etchat/hexe.jpg') repeat !important;
}

/* ---------- Glaspanele dunkel mit Türkis-Rahmen ---------- */
.glass-panel {
    background: var(--zc-panel) !important;
    border: 2px solid var(--zc-border) !important;
    box-shadow: 0 0 18px rgba(129, 247, 243, 0.18), 0 10px 40px rgba(0, 0, 0, 0.55) !important;
    color: var(--zc-text) !important;
}

/* ---------- Login / Landing ---------- */
.auth-navbar {
    background: rgba(9, 17, 26, 0.9) !important;
    border: 1px solid var(--zc-border-soft) !important;
    box-shadow: 0 0 18px rgba(129, 247, 243, 0.15), 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.logo-badge-b1 {
    background: linear-gradient(135deg, #81F7F3, #3ba8a5) !important;
    color: #06222b !important;
    box-shadow: 0 4px 15px rgba(129, 247, 243, 0.4) !important;
    text-shadow: none !important;
}
.logo-badge-b1 span { opacity: 0.75; }

.auth-nav-logo .logo-text,
.auth-logo-big,
.auth-logo-small {
    background: linear-gradient(135deg, #b5fbff, #81F7F3 55%, #3ba8a5) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.nav-link { color: #a8ccd2 !important; }
.nav-link:hover { color: #06222b !important; background: rgba(129, 247, 243, 0.75) !important; }
.nav-link.active {
    color: #06222b !important;
    background: var(--zc-accent) !important;
    border: 1px solid var(--zc-accent-dark) !important;
}

.nav-btn-reg {
    border: 2px solid var(--zc-border) !important;
    color: #06222b !important;
    background: linear-gradient(135deg, #81F7F3, #3ba8a5) !important;
}

.auth-promo-headline { color: #eafafa !important; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65); }
.auth-promo-headline span { color: var(--zc-accent) !important; }
.auth-promo-sub { color: #b8dde2 !important; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }
.promo-watermark-b1 { color: transparent !important; -webkit-text-stroke: 2px rgba(129, 247, 243, 0.14) !important; }
.auth-promo-live {
    background: rgba(9, 17, 26, 0.85) !important;
    border: 1px solid var(--zc-border-soft) !important;
    color: #b8dde2 !important;
}
.live-dot { background: var(--zc-accent) !important; box-shadow: 0 0 10px var(--zc-accent) !important; }

.auth-feature-card {
    background: var(--zc-panel-soft) !important;
    border: 1px solid var(--zc-border-soft) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
}
.auth-feature-card .fc-title { color: var(--zc-accent) !important; }
.auth-feature-card .fc-desc { color: #a8ccd2 !important; }

.auth-card {
    background: var(--zc-panel) !important;
    border: 2px solid var(--zc-border) !important;
    box-shadow: 0 0 25px rgba(129, 247, 243, 0.2), 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}
.auth-form-title { color: #eafafa !important; }
.auth-form-sub { color: #8fb8bd !important; }

.auth-input-field input,
.auth-guest-row input {
    background: var(--zc-input) !important;
    border: 1px solid var(--zc-border-soft) !important;
    color: #eafafa !important;
}
.auth-input-field input:focus,
.auth-guest-row input:focus {
    border-color: var(--zc-accent) !important;
    background: #0d1b26 !important;
    box-shadow: 0 0 0 3px rgba(129, 247, 243, 0.22) !important;
}
.auth-input-field input::placeholder,
.auth-guest-row input::placeholder { color: #5d868c !important; }

.auth-btn-primary {
    background: linear-gradient(135deg, #81F7F3 0%, #3ba8a5 100%) !important;
    color: #06222b !important;
    box-shadow: 0 6px 20px rgba(129, 247, 243, 0.35) !important;
    text-shadow: none !important;
}
.auth-btn-primary:hover {
    background: linear-gradient(135deg, #3ba8a5 0%, #81F7F3 100%) !important;
    box-shadow: 0 10px 28px rgba(129, 247, 243, 0.5) !important;
}

.auth-divider { color: #5d868c !important; }
.auth-divider::before, .auth-divider::after { background: var(--zc-border-soft) !important; }

.auth-btn-ghost {
    background: rgba(129, 247, 243, 0.12) !important;
    border: 1px solid var(--zc-border) !important;
    color: var(--zc-accent) !important;
}
.auth-btn-ghost:hover { background: rgba(129, 247, 243, 0.28) !important; border-color: var(--zc-accent) !important; }

.auth-switch-link { color: #8fb8bd !important; }
.auth-switch-link span {
    background: linear-gradient(135deg, #81F7F3, #3ba8a5) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* SEO-Section auf dunklem Grund lesbar */
#seo-section { color: #a8ccd2 !important; }
#seo-section h1, #seo-section h2, #seo-section h3 { color: #81F7F3 !important; }
#seo-section p { color: #b8dde2 !important; }
#seo-section .glass-panel { background: var(--zc-panel) !important; }

/* ---------- Chat-Grundgerüst ---------- */
.chat-header {
    background: var(--zc-panel) !important;
    border: 2px solid var(--zc-border) !important;
    color: var(--zc-text) !important;
}
.chat-header * { color: inherit; }

.chat-main { background: transparent !important; }

/* ---------- Räume-Liste (wie alte .rooms-Buttons mit Türkis-Glow) ---------- */
.rooms-area {
    background: var(--zc-panel-soft) !important;
    border-right: 2px solid var(--zc-border) !important;
}
.rooms-area h3 { color: var(--zc-accent) !important; border-bottom-color: var(--zc-border-soft) !important; }

#rooms-list li {
    background: #101c28 !important;
    color: var(--zc-accent) !important;
    border: 1px solid var(--zc-border-soft) !important;
    border-radius: 14px 2px 14px 2px !important;
    box-shadow: 4px 2px 6px rgba(129, 247, 243, 0.35) !important;
}
#rooms-list li:hover {
    background: #1a2c3c !important;
    color: #ffffff !important;
}
#rooms-list li.active {
    background: #16303a !important;
    color: #ffffff !important;
    border: 1px solid var(--zc-accent) !important;
    box-shadow: 0 0 12px rgba(129, 247, 243, 0.55) !important;
}
#rooms-list li::-webkit-scrollbar-thumb { background: var(--zc-border-soft) !important; }

/* ---------- Chat-Verlauf: hexe.jpg wie im alten Chat direkt im Chat ---------- */
/* Bild liegt auf .chat-messages (dem eigentlichen Chatfenster) und wird dort
   deutlich gezeigt; #chat-interface bleibt dunkel als Fallback. */
#chat-interface {
    background-color: #060d14 !important;
    background-image: none !important;
}
#chat-interface .chat-messages {
    background-color: #060d14 !important;
    background-image: var(--zc-bg-chat) !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}
/* Achtung: design.js hängt dynamische !important-Regeln für .glass-panel/.chat-main
   ans Ende des <head> – daher hier mit #chat-interface-Präfix höhere Spezifität erzwingen */
#chat-interface .chat-main { background: transparent !important; }
#chat-interface .chat-area,
#chat-interface .chat-area.glass-panel {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Seitenpanels & Kopfzeile: dunkler Hintergrund (Bild soll hier NICHT durchscheinen) */
#chat-interface .rooms-area,
#chat-interface .rooms-area.glass-panel {
    background: rgba(9, 17, 26, 0.92) !important;
    border-right: 2px solid var(--zc-border) !important;
    box-shadow: none !important;
}
#chat-interface .user-list-area,
#chat-interface .user-list-area.glass-panel {
    background: rgba(9, 17, 26, 0.92) !important;
    border-left: 2px solid var(--zc-border) !important;
    box-shadow: none !important;
}
#chat-interface .chat-header,
#chat-interface .chat-header.glass-panel {
    background: rgba(9, 17, 26, 0.92) !important;
    border-bottom: 2px solid var(--zc-border) !important;
    box-shadow: none !important;
}
.chat-watermark-b1 {
    -webkit-text-stroke-color: rgba(129, 247, 243, 0.12) !important;
    text-shadow: 0 0 50px rgba(129, 247, 243, 0.1) !important;
}

.chat-messages {
    color: var(--chat-text-default) !important;
}

/* ---------- Sprechblasen 1:1 aus dem alten ETChat (.mess_back) ---------- */
.chat-messages .message {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid #66CCFF !important;
    border-radius: 10px !important;
    padding: 2px 8px 2px 5px !important;
    margin-bottom: 3px !important;
    box-shadow: 6px 4px 9px rgba(0, 0, 0, 0.5) !important;
    color: #000000 !important;
    align-self: flex-start !important;
    max-width: 96% !important;
    width: auto !important;
}
.chat-messages .message .meta,
.chat-messages .message .meta .time { color: #666666 !important; }
.chat-messages .message .text { color: var(--chat-text-default); }
.message:hover { background: #f0faff !important; }

/* System-Nachrichten: blasenartig, aber dezent */
.message.system {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px dashed #66CCFF !important;
    color: #555555 !important;
}

/* Erwähnungen: gelbe Blase */
.message.mentioned {
    background: #fff9c4 !important;
    border: 1px solid #e0c040 !important;
    color: #000000 !important;
}

/* Flüstern/Whisper: wie alte Privat-Blasen (privat_ausg_an = weiß, von mir = blau) */
.message.whisper {
    background: #ffffff !important;
    border: 1px solid #66CCFF !important;
    color: #000000 !important;
}

.chat-messages::-webkit-scrollbar-thumb { background: rgba(129, 247, 243, 0.35) !important; }
.chat-messages::-webkit-scrollbar-track { background: rgba(9, 17, 26, 0.5) !important; }

/* Raum- / Ankündigungs-Banner */
.room-banner {
    background: rgba(13, 42, 48, 0.9) !important;
    border-bottom: 2px solid var(--zc-border) !important;
    color: #d8f4f4 !important;
}
.room-banner strong { color: var(--zc-accent) !important; }
#pinned-banner {
    background: rgba(13, 42, 48, 0.9) !important;
    border-bottom: 2px solid var(--zc-border) !important;
    color: #d8f4f4 !important;
}
#pinned-banner strong { color: var(--zc-accent) !important; }
.typing-indicator {
    background: rgba(13, 42, 48, 0.6) !important;
    color: #8fb8bd !important;
    border-bottom-color: var(--zc-border-soft) !important;
}

/* ---------- Eingabezeile (wie altes #form: fast schwarz + Türkis) ---------- */
.chat-input-area {
    background: rgba(5, 10, 15, 0.92) !important;
    border-top: 2px solid var(--zc-border) !important;
}
.chat-input-area input,
.chat-input-area textarea {
    background: var(--zc-input) !important;
    border: 1px solid var(--zc-border-soft) !important;
    color: #81F7F3 !important;
}
.chat-input-area input:focus,
.chat-input-area textarea:focus {
    border-color: var(--zc-accent) !important;
    background: #0d1b26 !important;
    box-shadow: 0 0 0 3px rgba(129, 247, 243, 0.2) !important;
}
.chat-input-area input::placeholder { color: #4d767c !important; }

#send-btn {
    background: linear-gradient(135deg, #81F7F3, #3ba8a5) !important;
    color: #06222b !important;
    border: none !important;
    text-shadow: none !important;
}

/* ---------- Buttons ---------- */
.secondary-btn, .icon-btn {
    background: rgba(129, 247, 243, 0.1) !important;
    border: 1px solid var(--zc-border-soft) !important;
    color: var(--zc-accent) !important;
}
.secondary-btn:hover, .icon-btn:hover {
    background: rgba(129, 247, 243, 0.25) !important;
    border-color: var(--zc-accent) !important;
    color: #ffffff !important;
}
.secondary-btn:hover *, .icon-btn:hover * { color: #ffffff !important; }

.primary-btn {
    background: linear-gradient(135deg, #81F7F3, #3ba8a5) !important;
    color: #06222b !important;
    text-shadow: none !important;
}
.primary-btn:hover { box-shadow: 0 6px 20px rgba(129, 247, 243, 0.45) !important; }

.danger-btn {
    background: rgba(198, 40, 40, 0.25) !important;
    border: 1px solid rgba(255, 92, 92, 0.6) !important;
    color: #ff8a8a !important;
}
.danger-btn:hover { background: rgba(198, 40, 40, 0.45) !important; color: #ffffff !important; }

/* ---------- User-Liste (wie alte #onlinelist: dunkel + Türkis) ---------- */
.user-list-area {
    background: var(--zc-panel-soft) !important;
    border-left: 2px solid var(--zc-border) !important;
}
.user-list-area h3 { color: var(--zc-accent) !important; border-bottom-color: var(--zc-border-soft) !important; }
.user-list-item { color: #eafafa !important; }
.user-list-item:hover { background: rgba(129, 247, 243, 0.15) !important; color: #ffffff !important; }
#users-list::-webkit-scrollbar-thumb, .user-list-area ::-webkit-scrollbar-thumb { background: rgba(129, 247, 243, 0.35) !important; }

/* Freunde-Button in der Userliste */
#show-friends-btn {
    background: rgba(129, 247, 243, 0.12) !important;
    border: 1px solid var(--zc-border-soft) !important;
    color: var(--zc-accent) !important;
}

/* ---------- Smilie-Picker ---------- */
#smilie-picker-popover, #pm-smilie-picker-popover {
    background: var(--zc-panel) !important;
    border: 2px solid var(--zc-border) !important;
}
#smilie-picker-popover .smilie-drag-handle, #pm-smilie-picker-popover .smilie-drag-handle {
    background: rgba(13, 42, 48, 0.95) !important;
    border-bottom-color: var(--zc-border) !important;
}
#smilie-picker-popover .smilie-drag-handle span,
#pm-smilie-picker-popover .smilie-drag-handle span { color: var(--zc-accent) !important; }
#smilie-picker-popover .smilie-drag-handle i,
#pm-smilie-picker-popover .smilie-drag-handle i { color: var(--zc-accent) !important; }
#smilie-category-tabs, #pm-smilie-category-tabs { border-bottom-color: var(--zc-border-soft) !important; }

.smilie-category-tab {
    background: rgba(129, 247, 243, 0.1) !important;
    border: 1px solid var(--zc-border-soft) !important;
    color: var(--zc-accent) !important;
}
.smilie-category-tab:hover { background: rgba(129, 247, 243, 0.25) !important; }
.smilie-category-tab.active {
    background: var(--zc-accent) !important;
    color: #06222b !important;
    border-color: var(--zc-accent-dark) !important;
}
.smilie-pick-item { border: 1px solid transparent !important; }
.smilie-pick-item:hover { background: rgba(129, 247, 243, 0.15) !important; border-color: var(--zc-border-soft) !important; }

/* ---------- Modals (die Light-Theme-Regeln aus style.css überschreiben) ---------- */
div[id$="-modal"]:not(#admin-cam-modal):not(#image-zoom-modal) .glass-panel :is(h1,h2,h3,h4) { color: #81F7F3 !important; }
div[id$="-modal"]:not(#admin-cam-modal):not(#image-zoom-modal) .glass-panel :is(label,p,span,small,li,div):not(button *):not(.primary-btn):not(.secondary-btn):not(.danger-btn) { color: #b8dde2; }
div[id$="-modal"]:not(#admin-cam-modal):not(#image-zoom-modal) .glass-panel :is(label,small) { color: #8fb8bd !important; }
div[id$="-modal"]:not(#admin-cam-modal):not(#image-zoom-modal) .glass-panel :is(input,select,textarea) {
    background: var(--zc-input) !important;
    color: #eafafa !important;
    border: 1px solid var(--zc-border-soft) !important;
}
div[id$="-modal"]:not(#admin-cam-modal):not(#image-zoom-modal) .glass-panel select option { background: #0d1b26; color: #eafafa; }
div[id$="-modal"]:not(#admin-cam-modal):not(#image-zoom-modal) .glass-panel ::placeholder { color: #4d767c; }
div[id$="-modal"]:not(#admin-cam-modal):not(#image-zoom-modal) .glass-panel :is([style*="#94a3b8"],[style*="#cbd5e1"],[style*="#f8fafc"],[style*="#e2e8f0"]):not(button):not(.primary-btn):not(.secondary-btn) { color: #b8dde2 !important; }

#my-profile-modal h3 { color: #81F7F3 !important; }
#my-profile-modal button[onclick] { color: #81F7F3 !important; }
#my-profile-modal select, #my-profile-modal input[type="text"], #my-profile-modal textarea {
    background: var(--zc-input) !important;
    color: #eafafa !important;
    border: 1px solid var(--zc-border-soft) !important;
}
#my-profile-modal label { color: #8fb8bd !important; }

/* ---------- Einstellungs-Menü ---------- */
#settings-menu {
    background: var(--zc-panel) !important;
    border: 2px solid var(--zc-border) !important;
    color: var(--zc-text) !important;
}
#settings-menu .settings-label { color: #8fb8bd !important; }
#settings-menu select, #settings-menu input {
    background: var(--zc-input) !important;
    color: #eafafa !important;
    border: 1px solid var(--zc-border-soft) !important;
}

/* ---------- Radio-Player in der Header-Leiste ---------- */
#radio-header-player #radio-play-btn {
    background: rgba(129, 247, 243, 0.12) !important;
    border: 1px solid var(--zc-border-soft) !important;
    color: var(--zc-accent) !important;
}
#radio-header-player #radio-play-btn:hover {
    background: rgba(129, 247, 243, 0.28) !important;
    color: #ffffff !important;
}
#radio-header-player #radio-title-display { color: var(--zc-accent) !important; }

/* ---------- Cookie-Banner ---------- */
.cookie-consent-banner {
    background: var(--zc-panel) !important;
    border: 1px solid var(--zc-border) !important;
    color: var(--zc-text) !important;
}
.cookie-consent-banner h2 { color: var(--zc-accent) !important; }
.cookie-consent-banner p, .cookie-consent-banner label { color: #b8dde2 !important; }
.cookie-settings-fab {
    background: var(--zc-panel) !important;
    border: 1px solid var(--zc-border) !important;
    color: var(--zc-accent) !important;
}

/* ---------- Footer-Navigation im Chat ---------- */
.chat-footer-nav {
    background: rgba(5, 10, 15, 0.92) !important;
    border-top: 1px solid var(--zc-border-soft) !important;
    color: #7fa8ad !important;
}
.chat-footer-nav a { color: var(--zc-accent) !important; }
.chat-footer-nav a:hover { color: #ffffff !important; }

/* Seitenboxen (Info/Regeln) auf dunklem Panel */
#left-sidebox, #left-sidebox *, #right-sidebox, #right-sidebox *, .sidebar-legal, .sidebar-legal * {
    color: #b8dde2 !important;
}
#left-sidebox h3, #right-sidebox h3, #left-sidebox-title, #right-sidebox-title { color: var(--zc-accent) !important; }
#left-sidebox, #right-sidebox { border-top-color: var(--zc-border-soft) !important; }

/* ---------- Globale Inputs/Selects ---------- */
input:not(.auth-input-field input):not(.auth-guest-row input) {
    background: var(--zc-input) !important;
    border: 1px solid var(--zc-border-soft) !important;
    color: #eafafa !important;
}
input:not(.auth-input-field input):not(.auth-guest-row input):focus {
    border-color: var(--zc-accent) !important;
    background: #0d1b26 !important;
    box-shadow: 0 0 0 3px rgba(129, 247, 243, 0.2) !important;
}
input::placeholder { color: #4d767c !important; }
select {
    background: var(--zc-input) !important;
    border: 1px solid var(--zc-border-soft) !important;
    color: #eafafa !important;
}

/* ---------- Scrollbars global ---------- */
::-webkit-scrollbar-thumb { background: rgba(129, 247, 243, 0.35) !important; }
::-webkit-scrollbar-track { background: rgba(9, 17, 26, 0.5) !important; }

/* ---------- Links ---------- */
a { color: var(--zc-accent); }
a:hover { color: #ffffff; }

/* ---------- PM-Fenster (schwebende Privat-Chats) ---------- */
.pm-window-instance {
    background: var(--zc-panel) !important;
    border: 2px solid var(--zc-border) !important;
    color: var(--zc-text) !important;
    box-shadow: 0 0 18px rgba(129, 247, 243, 0.2), 0 8px 30px rgba(0, 0, 0, 0.6) !important;
}
.pm-window-instance .pm-header {
    background: rgba(13, 42, 48, 0.95) !important;
    border-bottom: 2px solid var(--zc-border) !important;
    color: var(--zc-accent) !important;
}
.pm-window-instance .pm-content-area {
    background-color: rgba(7, 14, 21, 0.9) !important;
    background-image: none !important;
    color: var(--zc-text) !important;
}
.pm-window-instance .pm-messages-list { background: transparent !important; color: var(--zc-text) !important; }
.pm-window-instance .pm-chat-input {
    background-color: var(--zc-input) !important;
    border: 1px solid var(--zc-border-soft) !important;
    color: #81F7F3 !important;
}
.pm-window-instance .pm-chat-input::placeholder { color: #4d767c !important; }
.pm-window-instance .pm-minimize-btn, .pm-window-instance .pm-close-btn,
.pm-window-instance .pm-emoji-btn, .pm-window-instance .pm-upload-btn {
    background: rgba(129, 247, 243, 0.12) !important;
    border: 1px solid var(--zc-border-soft) !important;
    color: var(--zc-accent) !important;
}
.pm-window-instance .pm-minimize-btn:hover { background: rgba(129, 247, 243, 0.3) !important; }
.pm-window-instance .pm-close-btn:hover { background: #c53030 !important; color: #fff !important; }
.pm-window-instance .pm-send-btn {
    background: linear-gradient(135deg, #81F7F3, #3ba8a5) !important;
    color: #06222b !important;
}
/* PM-Kopfzeilen-Elemente mit Inline-Farben */
.pm-window-instance .pm-target-username { color: var(--zc-accent) !important; }
.pm-window-instance .pm-header span[style*="Privat"], .pm-window-instance .pm-header span {
    color: var(--zc-accent) !important;
    border-color: var(--zc-border-soft) !important;
    background: rgba(129, 247, 243, 0.1) !important;
}
.pm-window-instance .pm-cam-btn {
    background: linear-gradient(135deg, #81F7F3, #3ba8a5) !important;
    color: #06222b !important;
}
.pm-window-instance .pm-minimize-btn, .pm-window-instance .pm-close-btn { color: var(--zc-accent) !important; }
.pm-window-instance .pm-input-area {
    background: rgba(5, 10, 15, 0.92) !important;
    border-top: 2px solid var(--zc-border) !important;
}
.pm-window-instance .pm-typing-indicator {
    background: rgba(13, 42, 48, 0.6) !important;
    color: #8fb8bd !important;
}
.pm-window-instance .pm-cam-area {
    background: rgba(9, 17, 26, 0.9) !important;
    border-bottom-color: var(--zc-border-soft) !important;
}
#pm-smilie-picker-popover {
    background: var(--zc-panel) !important;
    border: 2px solid var(--zc-border) !important;
    color: var(--zc-text) !important;
}
#pm-smilie-picker-popover .pm-smilie-drag-handle {
    background: rgba(13, 42, 48, 0.95) !important;
    border-bottom: 2px solid var(--zc-border) !important;
    color: var(--zc-accent) !important;
}

/* PM-Nachrichtenblasen hell lesbar machen */
.pm-window-instance .pm-msg, .pm-window-instance .pm-message,
.pm-window-instance [class*="pm-msg"] { color: var(--zc-text) !important; }

/* ---------- Rechtliche Modals: helle Schrift auf dunklem Panel ---------- */
#impressum-modal h3, #datenschutz-modal h3, #agb-modal h3 { color: #81F7F3 !important; }
#impressum-modal .glass-panel > div, #datenschutz-modal .glass-panel > div, #agb-modal .glass-panel > div { color: #d8f4f4 !important; }
#impressum-modal .glass-panel a, #datenschutz-modal .glass-panel a, #agb-modal .glass-panel a { color: #81F7F3 !important; }

/* ---------- Cams ---------- */
.cam-box { border: 1px solid var(--zc-border-soft) !important; }
.cam-header { background: rgba(9, 17, 26, 0.85) !important; }

/* ============================================================================
   Verbleibende helle Inline-Styles in index.html (Sprechblasen-Theme)
   ============================================================================ */

/* Raum-Banner & Ankündigungs-Banner (hellgrün -> dunkel-türkis) */
#room-banner {
    background: rgba(13, 42, 48, 0.92) !important;
    border-bottom: 2px solid var(--zc-border) !important;
    color: #d8f4f4 !important;
}
#room-banner strong { color: var(--zc-accent) !important; }
#pinned-banner {
    background: rgba(13, 42, 48, 0.92) !important;
    border-bottom: 2px solid var(--zc-border) !important;
    color: #d8f4f4 !important;
}
#pinned-banner strong { color: var(--zc-accent) !important; }
#typing-indicator {
    background: rgba(13, 42, 48, 0.6) !important;
    color: #8fb8bd !important;
    border-bottom-color: var(--zc-border-soft) !important;
}

/* Smilie-Picker Drag-Handle (hellgrün -> dunkel) */
#smilie-picker-popover .smilie-drag-handle {
    background: rgba(13, 42, 48, 0.95) !important;
    border-bottom-color: var(--zc-border) !important;
}
#smilie-picker-popover .smilie-drag-handle span { color: var(--zc-accent) !important; }
#smilie-picker-popover .smilie-drag-handle i { color: var(--zc-accent) !important; }
#smilie-picker-popover .smilie-drag-handle i:hover { color: #ff8a8a !important; }

/* Freunde-/Online-Buttons in der Userliste (hellgrün -> dunkel) */
#show-friends-btn, #show-online-btn, #friends-add-btn {
    background: rgba(129, 247, 243, 0.12) !important;
    border: 1px solid var(--zc-border-soft) !important;
    color: var(--zc-accent) !important;
}
#show-friends-btn:hover, #show-online-btn:hover, #friends-add-btn:hover {
    background: rgba(129, 247, 243, 0.28) !important;
    color: #ffffff !important;
}

/* Unsichtbar-Dialog (hellgrün -> dunkel) */
#invisible-prompt-modal .glass-panel {
    background: var(--zc-panel) !important;
    border: 2px solid var(--zc-border) !important;
    box-shadow: 0 0 25px rgba(129, 247, 243, 0.25), 0 20px 50px rgba(0, 0, 0, 0.7) !important;
}
#invisible-prompt-modal h3 { color: var(--zc-accent) !important; }
#invisible-prompt-modal p { color: #b8dde2 !important; }
#invisible-yes-btn {
    background: linear-gradient(135deg, #81F7F3, #3ba8a5) !important;
    color: #06222b !important;
}
#invisible-no-btn {
    background: rgba(129, 247, 243, 0.1) !important;
    border: 1px solid var(--zc-border-soft) !important;
    color: var(--zc-accent) !important;
}

/* PM-Fenster: verbleibende helle Inline-Styles */
.pm-window-instance .pm-target-username { color: var(--zc-accent) !important; }
.pm-window-instance .pm-header span[style*="Privat"] {
    color: var(--zc-accent) !important;
    background: rgba(129, 247, 243, 0.12) !important;
    border-color: var(--zc-border-soft) !important;
}
.pm-window-instance .pm-minimize-btn, .pm-window-instance .pm-close-btn { color: var(--zc-accent) !important; }
.pm-window-instance .pm-cam-area > div {
    background: rgba(13, 42, 48, 0.8) !important;
    border-color: var(--zc-border-soft) !important;
}
.pm-window-instance .pm-typing-indicator {
    background: rgba(13, 42, 48, 0.6) !important;
    color: #8fb8bd !important;
}

/* PM-Smilie-Picker Drag-Handle */
#pm-smilie-picker-popover .pm-smilie-drag-handle {
    background: rgba(13, 42, 48, 0.95) !important;
    border-bottom-color: var(--zc-border) !important;
}
#pm-smilie-picker-popover .pm-smilie-drag-handle span { color: var(--zc-accent) !important; }
#pm-smilie-picker-popover .pm-smilie-drag-handle i { color: var(--zc-accent) !important; }
#pm-smilie-picker-popover .pm-smilie-drag-handle i:hover { color: #ff8a8a !important; }

/* ============================================================================
   Verbleibende helle Inline-Styles in index.html (per CSS überschreiben)
   ============================================================================ */

/* Meta theme-color */
/* (wird per JS nicht geändert, aber der Browser-Tab ist dunkel) */

/* SEO-Section Überschriften */
#seo-section h2[style*="#2F6F2E"] { color: #81F7F3 !important; }

/* Raum-Banner & Ankündigungs-Banner (hellgrün -> dunkel) */
#room-banner, #pinned-banner {
    background: rgba(13, 42, 48, 0.92) !important;
    border-bottom: 2px solid var(--zc-border) !important;
    color: #d8f4f4 !important;
}
#room-banner strong, #pinned-banner strong { color: var(--zc-accent) !important; }
#typing-indicator {
    background: rgba(13, 42, 48, 0.6) !important;
    color: #8fb8bd !important;
    border-bottom-color: var(--zc-border-soft) !important;
}

/* Smilie-Picker Drag-Handle */
#smilie-picker-popover .smilie-drag-handle {
    background: rgba(13, 42, 48, 0.95) !important;
    border-bottom-color: var(--zc-border) !important;
}
#smilie-picker-popover .smilie-drag-handle span { color: var(--zc-accent) !important; }
#smilie-picker-popover .smilie-drag-handle i { color: var(--zc-accent) !important; }
#smilie-picker-popover .smilie-drag-handle i:hover { color: #ff8a8a !important; }

/* Freunde-/Online-Buttons */
#show-friends-btn, #show-online-btn, #friends-add-btn {
    background: rgba(129, 247, 243, 0.12) !important;
    border: 1px solid var(--zc-border-soft) !important;
    color: var(--zc-accent) !important;
}
#show-friends-btn:hover, #show-online-btn:hover, #friends-add-btn:hover {
    background: rgba(129, 247, 243, 0.28) !important;
    color: #ffffff !important;
}

/* User-Profil-Modal: verbleibende helle Inline-Styles */
#user-profile-modal button[style*="#d7f3d1"] {
    background: rgba(129, 247, 243, 0.12) !important;
    border-color: var(--zc-border-soft) !important;
    color: var(--zc-accent) !important;
}
#user-profile-modal img[style*="#d7f3d1"] { background: rgba(129, 247, 243, 0.1) !important; }
#user-profile-modal h2 { color: var(--zc-accent) !important; }
#user-profile-modal p { color: #b8dde2 !important; }
#user-profile-modal div[style*="#f3ffe3"] {
    background: rgba(13, 42, 48, 0.6) !important;
    border-color: var(--zc-border-soft) !important;
    color: #d8f4f4 !important;
}

/* Gästebuch: verbleibende helle Inline-Styles */
#guestbook-modal div[style*="#2F6F2E"] { color: #81F7F3 !important; }
#guestbook-modal textarea { background: var(--zc-input) !important; color: #eafafa !important; }
#guestbook-modal span[style*="#2F6F2E"] { color: #8fb8bd !important; }
#guestbook-modal button[style*="#2F6F2E"] {
    background: linear-gradient(135deg, #81F7F3, #3ba8a5) !important;
    color: #06222b !important;
}

/* Unsichtbar-Dialog */
#invisible-prompt-modal h3 { color: var(--zc-accent) !important; }
#invisible-prompt-modal p { color: #b8dde2 !important; }

/* PM-Fenster: verbleibende helle Inline-Styles */
.pm-window-instance .pm-target-username { color: var(--zc-accent) !important; }
.pm-window-instance .pm-header span[style*="Privat"] {
    color: var(--zc-accent) !important;
    background: rgba(129, 247, 243, 0.12) !important;
    border-color: var(--zc-border-soft) !important;
}
.pm-window-instance .pm-minimize-btn, .pm-window-instance .pm-close-btn { color: var(--zc-accent) !important; }
.pm-window-instance .pm-cam-area > div {
    background: rgba(13, 42, 48, 0.8) !important;
    border-color: var(--zc-border-soft) !important;
}
.pm-window-instance .pm-typing-indicator {
    background: rgba(13, 42, 48, 0.6) !important;
    color: #8fb8bd !important;
}
.pm-window-instance .pm-input-area {
    background: rgba(5, 10, 15, 0.92) !important;
    border-top-color: var(--zc-border) !important;
}
.pm-window-instance .pm-chat-input {
    background: var(--zc-input) !important;
    color: #81F7F3 !important;
    border-color: var(--zc-border-soft) !important;
}

/* PM-Smilie-Picker (komplett) */
#pm-smilie-picker-popover {
    background: var(--zc-panel) !important;
    border-color: var(--zc-border) !important;
}
#pm-smilie-picker-popover .pm-smilie-drag-handle {
    background: rgba(13, 42, 48, 0.95) !important;
    border-bottom-color: var(--zc-border) !important;
}
#pm-smilie-picker-popover .pm-smilie-drag-handle span { color: var(--zc-accent) !important; }
#pm-smilie-picker-popover .pm-smilie-drag-handle i { color: var(--zc-accent) !important; }

/* ---------- Verbleibende Komponenten ---------- */
/* Cam-Viewer-Liste */
.viewer-item {
    background: rgba(13, 42, 48, 0.8) !important;
    color: #d8f4f4 !important;
    border: 1px solid var(--zc-border-soft) !important;
}
.kick-viewer-btn {
    background: rgba(239, 68, 68, 0.25) !important;
    color: #ff8a8a !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}

/* Whisper-Reply-Button */
.whisper-reply-btn {
    background: rgba(129, 247, 243, 0.12) !important;
    border-color: var(--zc-border-soft) !important;
    color: var(--zc-accent) !important;
}
.whisper-reply-btn:hover { background: rgba(129, 247, 243, 0.28) !important; }

/* Smilie-Picker Hover */
.smilie-pick-item:hover { background: rgba(129, 247, 243, 0.15) !important; }

/* Whisper-Nachrichten (hellgrün -> dunkel-türkis) */
.message.whisper {
    background: rgba(13, 42, 48, 0.85) !important;
    border: 1px solid var(--zc-border) !important;
    color: #d8f4f4 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* ---------- Pagination & Filter (Admin) ---------- */
.pagination-select, .filter-select {
    background: var(--zc-input) !important;
    border: 1px solid var(--zc-border-soft) !important;
    color: #eafafa !important;
}
.pagination-select:hover, .filter-select:hover { border-color: var(--zc-accent) !important; }
.pagination-buttons {
    background: rgba(13, 42, 48, 0.8) !important;
    border: 1px solid var(--zc-border-soft) !important;
}
.page-btn { color: var(--zc-accent) !important; }
.page-btn:hover { background: rgba(129, 247, 243, 0.15) !important; }
.page-btn.active { background: var(--zc-accent) !important; color: #06222b !important; }

/* ---------- Mobile-Menü-Panel ---------- */
#mobile-menu-panel {
    background: var(--zc-panel) !important;
    border: 2px solid var(--zc-border) !important;
    color: var(--zc-text) !important;
}
#mobile-menu-panel button { color: var(--zc-accent) !important; }
#mobile-menu-panel button:hover { background: rgba(129, 247, 243, 0.15) !important; }

/* ---------- Admin-Panel ---------- */
.admin-sidebar {
    background: var(--zc-panel-soft) !important;
    border-right: 2px solid var(--zc-border) !important;
}
.admin-main { background: rgba(7, 14, 21, 0.74) !important; }

/* Admin-Tabellen (glass-table) komplett dunkel */
.glass-table-container {
    background: var(--zc-panel) !important;
    border: 2px solid var(--zc-border) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}
.glass-table { color: #d8f4f4 !important; }
.glass-table th {
    background: rgba(13, 42, 48, 0.95) !important;
    color: #81F7F3 !important;
    border-bottom: 2px solid var(--zc-border) !important;
}
.glass-table td {
    color: #d8f4f4 !important;
    border-bottom: 1px solid var(--zc-border-soft) !important;
}
.glass-table tbody tr:nth-child(even) { background: rgba(13, 42, 48, 0.5) !important; }
.glass-table tbody tr:nth-child(odd) { background: rgba(9, 17, 26, 0.6) !important; }
.glass-table tbody tr:hover { background: rgba(129, 247, 243, 0.12) !important; }
.glass-table input[type="text"], .glass-table input[type="number"], .glass-table select {
    background: var(--zc-input) !important;
    color: #eafafa !important;
    border: 1px solid var(--zc-border-soft) !important;
}
.glass-table input:focus, .glass-table select:focus {
    border-color: var(--zc-accent) !important;
    box-shadow: 0 0 0 3px rgba(129, 247, 243, 0.2) !important;
}

/* Toggle-Switches (Slider) dunkel */
.slider {
    background-color: #1a2c3c !important;
    border: 1px solid var(--zc-border-soft) !important;
}
.slider:before { background-color: #81F7F3 !important; }
input:checked+.slider {
    background: linear-gradient(135deg, #81F7F3, #3ba8a5) !important;
    border-color: #3ba8a5 !important;
}
input:checked+.slider:before { background-color: #ffffff !important; }

/* Admin-Badges (Status, Gruppen) */
.badge-status {
    background: rgba(129, 247, 243, 0.12) !important;
    color: var(--zc-accent) !important;
    border: 1px solid var(--zc-border-soft) !important;
}
.badge-status[style*="#64748b"] {
    color: #8fb8bd !important;
    background: rgba(129, 247, 243, 0.08) !important;
}

/* Admin-Buttons in Tabellen */
.admin-main .btn-sm, .admin-main button[style*="padding"] {
    background: rgba(129, 247, 243, 0.12) !important;
    border: 1px solid var(--zc-border-soft) !important;
    color: var(--zc-accent) !important;
}
.admin-main .btn-sm:hover, .admin-main button[style*="padding"]:hover {
    background: rgba(129, 247, 243, 0.28) !important;
    color: #ffffff !important;
}

.admin-brand h1 {
    background: linear-gradient(135deg, #b5fbff, #81F7F3 55%, #3ba8a5) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.admin-brand .version-tag {
    background: rgba(129, 247, 243, 0.12) !important;
    color: var(--zc-accent) !important;
    border-color: var(--zc-border-soft) !important;
}

.tab-btn { color: #a8ccd2 !important; }
.tab-btn:hover {
    background: rgba(129, 247, 243, 0.15) !important;
    color: #ffffff !important;
    border-color: var(--zc-border-soft) !important;
}
.tab-btn.active {
    background: rgba(129, 247, 243, 0.22) !important;
    color: var(--zc-accent) !important;
    border: 1px solid var(--zc-border) !important;
    box-shadow: 0 2px 8px rgba(129, 247, 243, 0.25) !important;
}

.admin-header h2 { color: var(--zc-accent) !important; }

.stat-card {
    background: var(--zc-panel) !important;
    border: 2px solid var(--zc-border-soft) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}
.stat-card:hover { border-color: var(--zc-accent) !important; }
.stat-icon {
    background: linear-gradient(135deg, rgba(129, 247, 243, 0.2), rgba(59, 168, 165, 0.2)) !important;
    border-color: var(--zc-border-soft) !important;
}

/* Admin-Main: erzwungene Light-Theme-Farben aus style.css auf dunkel umstellen */
.admin-main [style*="#f8fafc"]:not(button):not(.badge-status),
.admin-main [style*="#e2e8f0"]:not(button):not(.badge-status),
.admin-main [style*="#fff;"]:not(button):not(.badge-status) { color: #eafafa !important; }
.admin-main [style*="#cbd5e1"]:not(button):not(.badge-status) { color: #b8dde2 !important; }
.admin-main [style*="#94a3b8"]:not(button):not(.badge-status) { color: #8fb8bd !important; }
.admin-main [style*="#64748b"]:not(.badge-status) { color: #8fb8bd !important; }
.admin-main .pagination-info, .admin-main .pagination-bar span { color: #b8dde2 !important; }
.admin-main table td, .admin-main table td strong { color: #d8f4f4 !important; }
.admin-main table td strong[style] { color: #81F7F3 !important; }
.admin-main input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.admin-main textarea,
.admin-main select {
    background: var(--zc-input) !important;
    color: #eafafa !important;
    border: 1px solid var(--zc-border-soft) !important;
}
.admin-main input::placeholder, .admin-main textarea::placeholder { color: #4d767c !important; }
.admin-main table th { color: #81F7F3 !important; }
.admin-main table { border-color: var(--zc-border-soft) !important; }
.admin-main div[style*="background: rgba(0,0,0,0.3)"],
.admin-main div[style*="background:rgba(0,0,0,0.3)"],
.admin-main div[style*="background: rgba(0,0,0,0.4)"],
.admin-main div[style*="background:rgba(0,0,0,0.4)"] { background: rgba(9, 17, 26, 0.85) !important; }
.admin-main h2, .admin-main h3, .admin-main h4 { color: #81F7F3 !important; }
.admin-main p, .admin-main label, .admin-main small { color: #b8dde2; }
.admin-main code[style] {
    background: rgba(129, 247, 243, 0.12) !important;
    color: #81F7F3 !important;
    border: 1px solid var(--zc-border-soft) !important;
}
.admin-main .badge-status[style*="#64748b"] {
    color: #8fb8bd !important;
    background: rgba(129, 247, 243, 0.12) !important;
}
.admin-main [style*="rgba(255,255,255,0.05)"]:not(button),
.admin-main [style*="rgba(255,255,255,0.1)"]:not(button) { border-color: var(--zc-border-soft) !important; }

/* ============================================================================
   Übergreifende Komponenten: Kontextmenüs, Popovers, Modals, Listen
   ============================================================================ */

/* ---------- User-Kontextmenü (Rechtsklick/Klick auf User) ---------- */
.user-context-menu {
    background: var(--zc-panel) !important;
    border: 2px solid var(--zc-border) !important;
    box-shadow: 0 0 18px rgba(129, 247, 243, 0.25), 0 15px 35px rgba(0, 0, 0, 0.6) !important;
}
.user-context-menu .ctx-header, .user-context-menu div, .user-context-menu span { color: var(--zc-accent) !important; }
.context-menu-btn { color: #d8f4f4 !important; }
.context-menu-btn:hover {
    background: rgba(129, 247, 243, 0.18) !important;
    color: #ffffff !important;
}
.context-menu-btn.danger-ctx:hover {
    background: rgba(239, 68, 68, 0.25) !important;
    color: #ff8a8a !important;
}

/* ---------- Alle Modals/Popups mit glass-panel ---------- */
div[id$="-modal"] .glass-panel,
.modal .glass-panel,
.glass-panel.modal-content {
    background: var(--zc-panel) !important;
    border: 2px solid var(--zc-border) !important;
    color: var(--zc-text) !important;
}

/* ---------- Gästebuch (komplett inline-grün -> dunkel) ---------- */
#guestbook-modal > div {
    background: var(--zc-panel) !important;
    border: 2px solid var(--zc-border) !important;
    box-shadow: 0 0 25px rgba(129, 247, 243, 0.25), 0 20px 50px rgba(0, 0, 0, 0.7) !important;
}
#guestbook-modal > div > div:first-child {
    background: linear-gradient(135deg, #0d2a30, #12414a) !important;
    color: #81F7F3 !important;
    border-bottom: 1px solid var(--zc-border-soft) !important;
}
#guestbook-modal > div > div:first-child * { color: #81F7F3 !important; }
#guestbook-modal > div > div:nth-child(2) {
    background: rgba(13, 42, 48, 0.6) !important;
    border-bottom-color: var(--zc-border-soft) !important;
}
#guestbook-modal textarea {
    background: var(--zc-input) !important;
    color: #eafafa !important;
    border: 1px solid var(--zc-border-soft) !important;
}
#guestbook-modal textarea::placeholder { color: #4d767c !important; }
#guestbook-chars { color: #8fb8bd !important; }
#guestbook-send {
    background: linear-gradient(135deg, #81F7F3, #3ba8a5) !important;
    color: #06222b !important;
}
#guestbook-list { color: #d8f4f4 !important; }
#guestbook-list * { color: #d8f4f4 !important; }
#guestbook-list > div {
    background: rgba(13, 42, 48, 0.5) !important;
    border: 1px solid var(--zc-border-soft) !important;
}

/* ---------- Profil-Modal ---------- */
#my-profile-modal .glass-panel { background: var(--zc-panel) !important; }
#my-profile-modal h3 { color: #81F7F3 !important; }
#my-profile-modal label { color: #8fb8bd !important; }
#my-profile-modal input, #my-profile-modal select, #my-profile-modal textarea {
    background: var(--zc-input) !important;
    color: #eafafa !important;
    border: 1px solid var(--zc-border-soft) !important;
}

/* ---------- Freundesliste ---------- */
#friends-panel, #friends-list, .friends-box, #friends-modal .glass-panel {
    background: var(--zc-panel) !important;
    color: var(--zc-text) !important;
}
#friends-panel h3, #friends-modal h3 { color: var(--zc-accent) !important; }

/* ---------- Adventskalender (saisonal, aber ans dunkle Theme angepasst) ---------- */
.advent-panel {
    background-image: linear-gradient(rgba(9, 17, 26, 0.88), rgba(9, 17, 26, 0.92)), url('/advent-background.jpg') !important;
    border: 2px solid var(--zc-border) !important;
    color: #d8f4f4 !important;
    box-shadow: 0 0 25px rgba(129, 247, 243, 0.2), 0 24px 70px rgba(0, 0, 0, 0.6) !important;
}
.advent-header h2 { color: var(--zc-accent) !important; }
.advent-header p { color: #8fb8bd !important; }
.advent-content {
    background: rgba(13, 42, 48, 0.9) !important;
    border-color: var(--zc-border-soft) !important;
    color: #d8f4f4 !important;
}
.advent-content h3 { color: var(--zc-accent) !important; }
.advent-status { color: #8fb8bd !important; }

/* ---------- Einstellungs-Dropdown ---------- */
#settings-menu {
    background: var(--zc-panel) !important;
    border: 2px solid var(--zc-border) !important;
    color: var(--zc-text) !important;
    box-shadow: 0 0 18px rgba(129, 247, 243, 0.2), 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}
#settings-menu .settings-label, #settings-menu label, #settings-menu span { color: #b8dde2 !important; }
#settings-menu select, #settings-menu input {
    background: var(--zc-input) !important;
    color: #eafafa !important;
    border: 1px solid var(--zc-border-soft) !important;
}
#settings-menu .secondary-btn { background: rgba(129,247,243,0.1) !important; color: var(--zc-accent) !important; }

/* ---------- User-Profil-Popup (Klick auf User) ---------- */
#user-profile-modal .glass-panel, .user-profile-popup, #profile-popup {
    background: var(--zc-panel) !important;
    border: 2px solid var(--zc-border) !important;
    color: var(--zc-text) !important;
}
#user-profile-modal h2, #user-profile-modal h3, #user-profile-modal h4 { color: var(--zc-accent) !important; }
#user-profile-modal p, #user-profile-modal span, #user-profile-modal div { color: #b8dde2 !important; }
#user-profile-modal strong { color: #81F7F3 !important; }
#user-profile-modal button {
    background: rgba(129, 247, 243, 0.12) !important;
    border: 1px solid var(--zc-border-soft) !important;
    color: var(--zc-accent) !important;
}
#user-profile-modal img { border-color: var(--zc-border) !important; background: rgba(129,247,243,0.1) !important; }
#user-profile-modal div[style*="background: #f3ffe3"], #user-profile-modal div[style*="background:#f3ffe3"] {
    background: rgba(13, 42, 48, 0.6) !important;
    border-color: var(--zc-border-soft) !important;
    color: #d8f4f4 !important;
}

/* ---------- Report/Melde-Modal ---------- */
#report-modal .glass-panel { background: var(--zc-panel) !important; color: var(--zc-text) !important; }
#report-modal textarea, #report-modal input {
    background: var(--zc-input) !important;
    color: #eafafa !important;
    border: 1px solid var(--zc-border-soft) !important;
}

/* ---------- Raum erstellen / Passwort-Modals ---------- */
#create-room-modal .glass-panel, #join-room-modal .glass-panel, #temp-room-modal .glass-panel {
    background: var(--zc-panel) !important;
    color: var(--zc-text) !important;
}
#create-room-modal input, #join-room-modal input, #temp-room-modal input {
    background: var(--zc-input) !important;
    color: #eafafa !important;
    border: 1px solid var(--zc-border-soft) !important;
}

/* ---------- Custom Alert/Confirm Dialoge ---------- */
#custom-alert-modal .glass-panel, #custom-confirm-modal .glass-panel, .custom-alert-box {
    background: var(--zc-panel) !important;
    border: 2px solid var(--zc-border) !important;
    color: var(--zc-text) !important;
}
#custom-alert-modal h3, #custom-confirm-modal h3 { color: var(--zc-accent) !important; }

/* ---------- Bild-Zoom / Upload-Vorschau ---------- */
#image-zoom-modal .glass-panel, #upload-preview-modal .glass-panel {
    background: var(--zc-panel) !important;
    border: 2px solid var(--zc-border) !important;
}

/* ---------- Link-Vorschau in Nachrichten ---------- */
.link-preview, .link-preview-card {
    background: rgba(13, 42, 48, 0.9) !important;
    border: 1px solid var(--zc-border-soft) !important;
    color: var(--zc-text) !important;
}
.link-preview a, .link-preview-title { color: var(--zc-accent) !important; }

/* ---------- YouTube-Button in Nachrichten ---------- */
.youtube-video-open {
    background: rgba(129, 247, 243, 0.12) !important;
    border: 1px solid var(--zc-border-soft) !important;
    color: var(--zc-accent) !important;
}
.youtube-video-open:hover { background: rgba(129, 247, 243, 0.28) !important; }

/* ---------- Online-Zähler / Badges ---------- */
#user-count, .online-count { color: var(--zc-accent) !important; }

/* ---------- "Freunde"-Badge ---------- */
#friends-unread-badge { background: #c53030 !important; color: #fff !important; }

/* ---------- Scrollbar in allen Panels ---------- */
.glass-panel ::-webkit-scrollbar-thumb, .admin-main ::-webkit-scrollbar-thumb {
    background: rgba(129, 247, 243, 0.35) !important;
}
.glass-panel ::-webkit-scrollbar-track, .admin-main ::-webkit-scrollbar-track {
    background: rgba(9, 17, 26, 0.5) !important;
}