/* ================================= */
/* ===== MOBILE APP MODE FINAL ===== */
/* ================================= */

@media (max-width: 768px) {

    /* ----- Grundlayout ----- */

    html, body {
        height: 100dvh;
    }

    body {
        display: flex;
        flex-direction: column;
    }

    /* 🔥 GANZ WICHTIG – zentrierung vom Desktop überschreiben */
    .content {
        flex: 1;
		height: 100%;
        min-height: 0;
        display: flex;
        padding: 0;
        padding-top: 8px;

        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    .chat-wrapper {
        flex: 1;
        min-height: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        border-bottom: none;

        display: flex;
        flex-direction: column;

        margin: 0;
    }

    .chat-container {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        font-size: 16px;
        padding-top: 0;
    }

    /* ----- Topbar ----- */

    .topbar {
        flex-shrink: 0;
        flex-direction: column;
        align-items: flex-start;
        padding: 6px 12px;
        gap: 6px;
        overflow: visible;
        border-bottom: none !important;
    }

    .left {
        width: 100%;
        justify-content: flex-start;
        gap: 10px;
    }

    .logo {
        height: 28px;
    }

    .title {
        font-size: 16px;
		display: none !important;
    }

    .right {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Dropdown */

    .history-container {
        position: relative;
    }

    .history-dropdown {
        z-index: 9999;
    }

    /* Buttons */

    .status,
    .clock,
    .viewer-count,
    .active-users,
    .theme-toggle,
    .history-btn,
    .player-btn	{
        height: 28px;
        font-size: 12px;
        padding: 0 10px;
    }

    .viewer-icon,
    .active-users-icon {
        width: 20px;
        height: 20px;
    }

    .live-dot {
        width: 9px;
        height: 9px;
    }

    /* Footer aus */

    .footer {
        display: none;
    }

    /* Chat Header kompakt */

    .chat-header {
        padding: 6px;
        font-size: 12px;
        gap: 6px;
		/*display: none !important;*/
    }

    .userlist-btn {
        height: 28px;
        font-size: 12px;
        padding: 0 10px;
        display: none !important;
    }

    .userlist-icon {
        width: 20px;
        height: 20px;
        display: none !important;
    }

    .bot-container {
        display: none !important;
    }

    .bot-btn {
        display: none !important;
    }

    .history-btn {
        display: none !important;
    }

    .theme-toggle {
        margin-left: auto;
    }
}

/* ===== Extra kleine Geräte ===== */

@media (max-width: 480px) {
    .clock {
        display: none;
    }
}