/* ==========================================================================
   [01] BASIS-KONFIGURATION
   ========================================================================== */
/* TINA-FORUM LOGISTIK | 2026 
   LOGISTIK: MEDIATHEK-DYNAMIK (LIGHT-STEEL-MODUS)
*/

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&family=Roboto+Mono:wght@400;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* WICHTIG: Padding zählt nicht zur Breite dazu! */
}

/* Body muss jetzt scrollbar sein, da Header/Footer Platz wegnehmen */
body, html {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column; /* Alles untereinander */
}

/* ==========================================================================
   [02] HEADER-MODUL (KONSOLE)
   ========================================================================== */
header {
    background-color: #ffffff; /* Reinweiss */
    height: 60px;
    border-bottom: 3px solid #001b3d; /* Harte Navy-Kante */
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
}

.header-inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    gap: 15px;
}

.domain-name {
    font-size: 1.4rem;
    font-weight: 600;
    color: #001b3d; /* Navy-Titel */
    letter-spacing: 1px;
    white-space: nowrap;
}
.header-logo {
    height: 40px;
    width: auto;
}

/* ==========================================================================
   [03] STATUS-ELEMENTE: TICKER & DISCORD
   ========================================================================== */

   .mobile-only-widget-container {
    display: none;
}

.icecast-status {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #001b3d;
    display: flex;
    align-items: center;
    height: 32px;
    width: 100%;
    font-family: 'Roboto Mono', monospace;
    overflow: hidden;
    flex: 1;
    margin: 0 20px;
}

.ticker-wrapper { 
    flex: 1; 
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; 
}

#icecast-title { 
    color: #001b3d; 
    font-size: 0.8rem; 
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
}

#discord-status { 
    background: #001b3d;
    color: #ffffff;
    height: 100%; 
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 0.75rem;
    font-weight: bold;
    border-left: 2px solid #001b3d;
    white-space: nowrap;
}

/* ==========================================================================
   [04] NAVIGATION & BURGER
   ========================================================================== */
/* ==========================================================================
   [04] NAVIGATION & BURGER (SYSTEM-MODUS: GLAS-EFFEKT, KEINE ANIMATION)
   ========================================================================== */
#menu-overlay {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 998;
    display: none;
}

#menu-overlay.active { 
    display: block !important; 
}

.burger-icon {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    z-index: 1001;
}

.burger-icon span { 
    width: 25px; 
    height: 3px; 
    background: #001b3d; 
    transition: none; /* Transition entfernt */
}

.nav-menu {
    position: fixed;
    top: 0; 
    right: -320px;
    width: 300px; 
    height: 100vh;
    
    /* Glas-Effekt, ohne Transition */
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(10px);
    border-left: 3px solid #001b3d;
    transition: none !important; /* Transition hart abgeschaltet */
    z-index: 999;
    overflow-y: auto;
}

.nav-menu.active { 
    right: 0 !important; 
}

.menu-status-label {
    background: #e8e8e8;
    color: #001b3d;
    padding: 10px;
    font-size: 2.2rem;
    text-align: center;
    text-transform: uppercase;
}

.nav-section {
    width: 100%;
    border-bottom: 4px solid #e8e8e8;
}

.section-header-img {
    width: 100%;
    height: auto;
    display: block;
}

.nav-button {
    color: #a6a6a6 !important;
    background: transparent !important; /* Button-Transparenz */
    padding: 15px 20px !important;
    text-decoration: none !important;
    display: block !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    transition: none !important; /* Transition entfernt[cite: 3] */
}

.nav-button:hover {
    background: #001b3d !important;
    color: #ffffff !important;
}

/* ==========================================================================
   [05] MAIN KONTEND
   ========================================================================== */

   .user-header-widget {
    position: relative; /* Wichtig für das Dropdown-Menü */
    display: flex !important;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.1);
    padding: 5px 15px;
    border-radius: 5px; /* Eckig statt rund */
    color: #000000;
}

.user-header-widget img {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50%;
    object-fit: cover;
}

.dropdown-toggle {
    background: none;
    border: none;
    color: rgb(0, 0, 0);
    cursor: pointer;
    font-size: 1em;
}

/* Das Dropdown-Menü */
.user-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #000;
    padding: 10px;
    z-index: 1000;
    min-width: 120px;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px); /* Für Safari-Unterstützung[cite: 2] */
}

.user-dropdown-menu a {
    display: block;
    text-decoration: none;
    color: black;
    padding: 5px 0;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px); /* Für Safari-Unterstützung[cite: 2] */
}


/* Der Container nimmt den Platz zwischen Header und Footer ein */
.forum-container {
    display: flex;
    flex: 1; /* Nimmt den restlichen Platz zwischen Header und Footer ein */
    min-height: 0; /* WICHTIG: Erlaubt Flex-Kindern zu schrumpfen */
    width: 100%;
    overflow: hidden;
}

.forum-header-banner {
    width: 100%;
    height: 100%;
}

/* Linke Leiste bündig links */
.chat-list {
    width: 430px;
    border-right: 3px solid #001b3d;
    display: flex;
    flex-direction: column;
        /* Alpha-Wert von 0.8 auf 0.6 reduziert */
    background: rgba(0, 27, 61, 0.9) !important; 
    /* Blur von 20px auf 30px verstärkt */
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px); /* Für Safari-Unterstützung[cite: 2] */
}

.chat-item a {
    display: block;
    padding: 10px;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Roboto Mono', monospace;
    border-left: 4px solid #e8e8e8;
    transition: 0.1s;
}

.chat-item a:hover {
    background: #e8e8e8;
    border-left-color: #76b7d1;
    color: #001b3d;
}

/* Styling für das Kategorie-Banner */
.category-banner {
        /* Alpha-Wert von 0.8 auf 0.6 reduziert */
    background: rgba(0, 27, 61, 0.9) !important; 
    /* Blur von 20px auf 30px verstärkt */
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px); /* Für Safari-Unterstützung[cite: 2] */
    color: #ffffff;           /* Weiße Schrift */
    font-family: 'Oswald', sans-serif;
    font-size: 2.0rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-left: 4px solid #5b8da1; /* Akzentlinie links */
    text-align: center;
}

/* Optional: Erstes Banner oben bündig machen, falls es zu weit unten klebt */
#chat-list-items > .category-banner:first-child {
    margin-top: 0;
}

/* Hauptbereich bündig rechts */
/* Das Chat-Input-Feld muss am Boden der .chat-area bleiben */
.chat-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    position: relative;
}

/* Nachrichten-Liste ohne Rand-Lücken */
#message-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px; /* Minimaler Puffer für Lesbarkeit */
}

/* NACHRICHTEN-DESIGN */
/* 1. Die gesamte Zeile nimmt nun 100% Breite ein */
/* Avatar und Name-Container */
.message-row {
    display: flex;
    width: 100%;
    padding: 15px; /* Etwas mehr Luft für die Elemente */
    border-bottom: 1px solid #e8e8e8;
    align-items: flex-start; /* Namen oben bündig zum Avatar */
}

/* Padding zwischen Avatar und Rest */
.avatar {
    width: 60px;
    height: 60px;
    margin-right: 20px; /* DER PADDING-ABSTAND ZWISCHEN AVATAR UND TEXT */
    border: 2px solid #001b3d;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Accountname (Größer und fett) */
.msg-username {
    font-family: 'Oswald', sans-serif;
    font-size: 1.2rem; /* Leicht größer als msg-content */
    font-weight: 600;
    color: #001b3d;
    margin-bottom: 2px;
}

/* Eigentliche Nachricht (Etwas kleiner, gut lesbar) */
/* In forum.css unter .msg-content ergänzen */
.msg-content {
    font-family: 'Roboto Mono', monospace;
    font-size: 1.0rem;
    line-height: 1.5;
    color: #333;
    
    /* FIX: Verhindert Rauslaufen */
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word; 
    max-width: 100%;
}

.msg-time {
    font-size: 0.75rem;
    opacity: 0.5;
    margin-top: 5px;
}

/* Eingabe-Bereich bündig am Boden */
.chat-input-area {
    width: 100%;
    padding: 10px;
    background: #001b3d;
    flex-shrink: 0; /* Verhindert, dass das Input-Feld bei wenig Platz verschwindet */
}
.input-wrapper {
    display: flex;
    gap: 0; /* Keine Lücke zwischen Input und Button */
}

#msg-input {
    flex: 1;
    padding: 10px;
    border: none;
    outline: none; /* Kein blauer Rand beim Anklicken */
}

#send-msg-btn, .chat-list button {
    background: #e8e8e8;
    border: none;
    padding: 10px 20px;
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 3px 0 #a6a6a6;
    transition: 0.1s;
}

/* 2. Rechte Seite soll den restlichen Platz komplett ausfüllen */
.message-right {
    flex: 1; /* Nimmt alles, was vom Avatar übrig bleibt */
    min-width: 0; /* WICHTIG: Erlaubt das Umbrechen von Text */
}

#send-msg-btn:hover { background: #76b7d1; }

/* TINA-TRANSFRAU.DE | HAUPTSYSTEM-STEUERUNG 2026 
   LOGISTIK: INDEX CSS (DISCO/CLUB VIBE - VOLLSTÄNDIG)
*/

/* 
   TINA-TRANSFRAU.DE | HAUPTSYSTEM-STEUERUNG 2026 
   LOGISTIK: MEDIATHEK-DYNAMIK (LIGHT-STEEL-MODUS)
*/

/* ==========================================================================
   [06] FOOTER-MODUL
   ========================================================================= */
footer {
    background-color: #ffffff;
    padding: 20px;
    border-top: 3px solid #001b3d;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-copyright {
    font-size: 0.85rem;
    font-weight: 600;
}

/* ==========================================================================
   [07] MOBILE ANPASSUNGEN (INTELLIGENTER SINGLE-NAV-TOGGLE)
   ========================================================================== */

@keyframes ticker-scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-120%); }
}

@media screen and (max-width: 1000px) {
    /* Header-Logistik bleibt kompakt */
    .header-inner { 
        padding: 0 10px; 
        gap: 5px; 
    }
    .mobile-only-chats {
        display: block !important; /* Macht die Chats im Burger sichtbar */
    }

    
    .domain-name { 
        font-size: 1.1rem; 
    }

    .icecast-status { 
        flex: 1;
        margin: 0 5px;
    }

    #icecast-title {
        animation: ticker-scroll 12s linear infinite;
        padding-left: 100%;
    }

    #discord-status { 
        display: none; 
    }

    /* --- DER LAYOUT-FIX: CHAT FÜLLT JETZT 100% DES SCREENS --- */
    body, html {
        height: 100% !important;
        overflow: hidden !important; /* Verhindert das Scrollen der ganzen Seite */
    }

    .forum-container {
        flex-direction: column !important;
        height: calc(100vh - 60px) !important;
        overflow: hidden !important;
    }

    /* 1. Die normale Kanalliste im Hauptbereich wird auf Mobile UNSICHTBAR */
    .forum-container > .chat-list {
        display: none !important;
    }

    /* 2. Das Chatfenster bekommt SOFORT den vollen Platz beim Laden */
    .chat-area {
        width: 100% !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }

    #message-list {
        flex: 1 !important;
        overflow-y: auto !important;
    }

    .chat-input-area {
        width: 100% !important;
        flex-shrink: 0 !important;
    }

    /* --- DIE RETTUNG DER CHATLIST: INTEGRATION IN DEN BURGER-DRAWER --- */
    
    /* Wir stylen die Chatlist so um, dass sie sich perfekt in das ausfahrbare Menü einfügt */
    /* Hinweis: Damit das klappt, klonen moderne Layouts die Liste, oder wir blenden sie ein, 
       indem wir sie im Drawer via CSS sichtbar machen, falls sie im DOM unterhalb von nav liegt.
       Da deine .chat-list im HTML parallel zu .chat-area liegt, machen wir folgenden Trick: */

    .nav-menu {
        width: 320px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Wir fügen einen sauberen Scrollbereich für den Drawer hinzu */
    .nav-menu .nav-section {
        flex-shrink: 0;
    }
    /* --- HIER WIRD DAS USER-WIDGET FÜR MOBILE SÄUBERT --- */

    /* Blendet das Widget im normalen Header auf Mobile komplett aus */
    .desktop-only-widget {
        display: none !important;
    }

    /* Zeigt das Widget im ausgefahrenen Burger-Menü an */
    .mobile-only-widget-container {
        display: block !important;
        background: #001b3d; /* Dunkler Marine-Hintergrund für die User-Zone */
        padding: 15px;
        border-bottom: 2px solid #5b8da1;
    }

    /* Verpasst dem mobilen Widget den passenden Look */
    .mobile-widget-styled {
        display: flex !important;
        align-items: center;
        gap: 12px;
        background: rgba(255, 255, 255, 0.1) !important;
        padding: 10px !important;
        border-radius: 4px;
    }

    /* Links für Profil & Logout direkt im Burger untereinander listen */
    .mobile-user-links {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-top: 10px;
    }

    .mobile-user-links a {
        color: #76b7d1 !important;
        text-decoration: none;
        font-family: 'Roboto Mono', monospace;
        font-size: 0.9rem;
        padding: 8px 5px;
        border-radius: 4px;
        transition: 0.1s;
    }

    .mobile-user-links a:hover {
        background: rgba(255, 255, 255, 0.05);
        color: #ffffff !important;
    }
}

/* Extra-Schliff für ganz kleine Handys */
@media screen and (max-width: 480px) {
    .message-row {
        padding: 10px;
    }

    .avatar {
        width: 45px;
        height: 45px;
        margin-right: 12px;
    }
}