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

.topbar {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;
    box-sizing: border-box;
    border-bottom: 2px solid var(--twitch-purple);
}

.left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo {
    height: 40px;
}

.title {
    font-size: 22px;
    font-weight: bold;
    color: var(--twitch-purple);
}

/* ===== RIGHT SIDE ===== */

.right {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

/* ===== CONTENT ===== */

.content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding: 20px;
}

/* ===== LAYOUT WRAPPER (PLAYER + CHAT) ===== */

.layout-wrapper {
    display: flex;
    gap: 20px;
    width: 100%;
    max-width: 95%;
    height: calc(100dvh - 160px);
    max-height: 725px;
    margin: 0 auto;
	transition: all 0.35s ease;
}

/* ===== PLAYER ===== */

.player-wrapper {
    flex: 1;
    display: flex;
    border: 0px solid var(--twitch-purple);
    border-radius: 6px;
    overflow: hidden;
    transition: 
        flex 0.35s ease,
        opacity 0.25s ease,
        transform 0.35s ease;
}

/* 🔥 Animation erst wenn Klasse gesetzt wird */
.layout-wrapper.animate .player-wrapper {
    transition:
        flex 0.35s ease,
        opacity 0.25s ease,
        transform 0.35s ease;
}

.layout-wrapper.animate .chat-wrapper {
    transition: flex 0.35s ease;
}

.layout-wrapper.hide-player .player-wrapper {
    flex: 0;
    opacity: 0;
    transform: translateX(-20px);
    pointer-events: none;
}

#twitch-player {
    flex: 1;
}

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

.chat-wrapper {
    position: relative; /* 🔥 DAS IST DER FIX */
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--twitch-purple);
    border-radius: 6px;
    overflow: hidden;
}

/* Chat Container soll restliche Höhe füllen */
.chat-container {
    flex: 1;
    overflow-y: auto;
}

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

@media (max-width: 900px) {

    .layout-wrapper {
        flex-direction: column;
        height: auto;
        max-height: none;
    }

    .player-wrapper,
    .chat-wrapper {
        height: auto;
    }
}