html.is-fullscreen,
body.is-fullscreen {
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100vh !important;
    width: 100vw !important;
}

body.is-fullscreen #main-header,
body.is-fullscreen #mt-title,
body.is-fullscreen footer {
    display: none !important;
}

body.is-fullscreen main {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

body.is-fullscreen #mt-layout {
    flex-direction: column !important;
    gap: 0 !important;
    height: 100vh !important;
    align-items: stretch !important;
}

@media (min-width: 1024px) {
    body.is-fullscreen #mt-layout {
        flex-direction: row !important;
    }
}

body.is-fullscreen #mt-videos {
    width: 100vw !important;
    height: 60vh !important;
    margin: 0 !important;
    display: grid !important;
    gap: 0 !important;
}

@media (min-width: 1024px) {
    body.is-fullscreen #mt-videos {
        width: 80vw !important;
        height: 100vh !important;
    }
}

body.is-fullscreen #mt-chat {
    width: 100vw !important;
    height: 40vh !important;
    border: none !important;
    margin: 0 !important;
    position: static !important;
}

@media (min-width: 1024px) {
    body.is-fullscreen #mt-chat {
        width: 20vw !important;
        height: 100vh !important;
    }
}

body.is-fullscreen .pixel-card {
    border: none !important;
    border-radius: 0 !important;
    background-color: #000000 !important;
}

body.is-fullscreen .pixel-card>div {
    background-color: #000000 !important;
    padding: 0 !important;
}

body.is-fullscreen .pixel-card::before,
body.is-fullscreen .pixel-card::after,
body.is-fullscreen .pixel-card>div::before,
body.is-fullscreen .pixel-card>div::after {
    display: none !important;
}

body.is-fullscreen .grid {
    gap: 0 !important;
}

body.is-fullscreen .stream-card>header {
    display: none !important;
}

body.is-fullscreen iframe {
    box-shadow: none !important;
    aspect-ratio: auto !important;
    height: 100% !important;
    background-color: #000000 !important;
}

body.is-fullscreen #stream-controls {
    display: none !important;
}

body.chat-hidden #mt-chat {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -100 !important;
    visibility: hidden !important;
}

body.chat-hidden #mt-videos {
    width: 100% !important;
}

body.chat-hidden.is-fullscreen #mt-videos {
    width: 100vw !important;
    height: 100vh !important;
}

/* Smooth transition for Layout Toggling (Chat Hide/Show) */
#mt-videos, #mt-chat {
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                flex-basis 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.4s ease, 
                transform 0.4s ease !important;
}

/* Transitions fluides pour le Mode Focus */
#mt-videos {
    transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1), grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.stream-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Optimisation des View Transitions Natives */
::view-transition-group(*) {
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(*),
::view-transition-new(*) {
    mix-blend-mode: normal;
    animation-duration: 0.4s;
}

/* Dynamic Grid Layouts using ResizeObserver classes (.container-sm, .container-md, .container-lg) */
.layout-1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.layout-2 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
}

.container-lg.layout-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

.container-lg.layout-3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.container-lg.layout-3:not(.has-focus)>.stream-card.is-visual-first {
    grid-column: span 2;
}

.container-lg.layout-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.container-lg.layout-5 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.container-lg.layout-6 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.container-md.layout-3 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.container-md.layout-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.container-md.layout-5 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.container-md.layout-6 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.container-sm.layout-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.container-sm.layout-5 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.container-sm.layout-5:not(.has-focus)>.stream-card.is-visual-first {
    grid-column: span 2;
}

.container-sm.layout-6 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

/* Compact layout for laptop screens (1366x768 or smaller heights) */
@media (max-height: 800px) and (min-width: 1024px) {
    #main-header {
        margin-bottom: 1rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    #mt-title {
        margin-bottom: 1rem !important;
    }

    #mt-title>div:nth-child(2) {
        margin-top: 0.5rem !important;
        font-size: 0.875rem !important;
    }

    #stream-controls {
        margin-bottom: 1rem !important;
    }

    .stream-card header {
        padding: 0.15rem 0.5rem !important;
    }

    #mt-videos,
    #mt-chat {
        height: calc(105vh - 210px) !important;
    }
}

/* Allow slight scrolling but page content barely exceeds viewport */
html,
body {
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #09090b;
}


/* Fullscreen Layout Overrides (Container Query Logic applies here too) */
body.is-fullscreen #mt-videos.layout-1 {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
}

body.is-fullscreen #mt-videos.container-sm.layout-2,
body.is-fullscreen #mt-videos.container-md.layout-2 {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 1fr !important;
}

body.is-fullscreen #mt-videos.container-lg.layout-2 {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr !important;
}

body.is-fullscreen #mt-videos.container-sm.layout-3,
body.is-fullscreen #mt-videos.container-md.layout-3 {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 1fr 1fr !important;
}

body.is-fullscreen #mt-videos.container-sm.layout-3:not(.has-focus)>.stream-card.is-visual-first,
body.is-fullscreen #mt-videos.container-md.layout-3:not(.has-focus)>.stream-card.is-visual-first {
    grid-column: auto !important;
}

body.is-fullscreen #mt-videos.container-lg.layout-3 {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
}

body.is-fullscreen #mt-videos.container-lg.layout-3:not(.has-focus)>.stream-card.is-visual-first {
    grid-column: span 2 !important;
}

body.is-fullscreen #mt-videos.container-sm.layout-4,
body.is-fullscreen #mt-videos.container-md.layout-4 {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
}

body.is-fullscreen #mt-videos.container-sm.layout-5,
body.is-fullscreen #mt-videos.container-md.layout-5 {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr 1fr !important;
}

body.is-fullscreen #mt-videos.container-sm.layout-5:not(.has-focus)>.stream-card.is-visual-first,
body.is-fullscreen #mt-videos.container-md.layout-5:not(.has-focus)>.stream-card.is-visual-first {
    grid-column: span 2 !important;
}

body.is-fullscreen #mt-videos.container-lg.layout-5 {
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
}

body.is-fullscreen #mt-videos.container-lg.layout-5:not(.has-focus)>.stream-card.is-visual-first {
    grid-column: auto !important;
}

body.is-fullscreen #mt-videos.container-sm.layout-6,
body.is-fullscreen #mt-videos.container-md.layout-6 {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr 1fr !important;
}

body.is-fullscreen #mt-videos.container-lg.layout-6 {
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
}

/* Focus Layout Support */
#mt-videos.has-focus {
    display: grid !important;
}

#mt-videos.has-focus .stream-card.is-focused .focus-stream-btn {
    color: white;
    transform: scale(1.15);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
}

[id^="title-stream-"] {
    transition: all 0.3s ease;
}

#mt-videos.has-focus .stream-card.is-focused [id^="title-stream-"] {
    font-size: 1.1rem !important;
    text-shadow: 0 0 8px currentColor, 0 0 12px currentColor;
    padding: 0.25rem 0 !important;
    margin: -0.25rem 0 !important;
}

#mt-videos.has-focus .stream-card:not(.is-focused) header {
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
}

#mt-videos.has-focus.container-sm .stream-card:not(.is-focused) [id^="title-stream-"],
#mt-videos.has-focus.container-md .stream-card:not(.is-focused) [id^="title-stream-"] {
    font-size: 0.65rem !important;
}

#mt-videos.has-focus.container-lg .stream-card.is-focused [id^="title-stream-"] {
    font-size: 1.5rem !important;
}

#mt-videos.has-focus.container-lg .stream-card:not(.is-focused) [id^="title-stream-"] {
    font-size: 0.75rem !important;
}

#mt-videos.has-focus.container-lg,
body.is-fullscreen #mt-videos.has-focus.container-lg {
    grid-template-columns: 4fr 1fr !important;
}

#mt-videos.has-focus.container-lg.layout-2,
body.is-fullscreen #mt-videos.has-focus.container-lg.layout-2 {
    grid-template-rows: minmax(0, 1fr) !important;
}

#mt-videos.has-focus.container-lg.layout-3,
body.is-fullscreen #mt-videos.has-focus.container-lg.layout-3 {
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}

#mt-videos.has-focus.container-lg.layout-4,
body.is-fullscreen #mt-videos.has-focus.container-lg.layout-4 {
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
}

#mt-videos.has-focus.container-lg.layout-5,
body.is-fullscreen #mt-videos.has-focus.container-lg.layout-5 {
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
}

#mt-videos.has-focus.container-lg.layout-6,
body.is-fullscreen #mt-videos.has-focus.container-lg.layout-6 {
    grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
}

#mt-videos.has-focus.container-lg .stream-card {
    grid-column: 2 !important;
    grid-row: auto !important;
    min-height: 0 !important;
}

#mt-videos.has-focus.container-lg .stream-card.is-focused {
    grid-column: 1 !important;
    grid-row: 1 / -1 !important;
    /* S'étend dynamiquement sur toute la hauteur exacte */
}

#mt-videos.has-focus.container-sm,
#mt-videos.has-focus.container-md,
body.is-fullscreen #mt-videos.has-focus.container-sm,
body.is-fullscreen #mt-videos.has-focus.container-md {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(30%, 1fr)) !important;
    grid-auto-rows: max-content !important;
    grid-template-rows: auto !important;
}

#mt-videos.has-focus.container-sm .stream-card,
#mt-videos.has-focus.container-md .stream-card {
    height: 120px !important;
}

#mt-videos.has-focus.container-sm .stream-card.is-focused,
#mt-videos.has-focus.container-md .stream-card.is-focused {
    grid-column: 1 / -1 !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
    order: -1 !important;
}

/* Utility to hide elements without using display: none, to keep iframes/media alive */
.keep-alive-hidden {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -100 !important;
    visibility: hidden !important;
    width: 100% !important;
    height: 100% !important;
}

/* Stabilize Chat Header to avoid Layout Shift when tabs appear */
#mt-chat header {
    min-height: 85px; /* Empêche le saut de l'iframe quand les onglets s'affichent */
    align-content: flex-start;
}

@media (min-width: 1024px) {
    #mt-chat header {
        min-height: 95px;
    }
}

.keep-alive-visible {
    position: relative !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: auto !important;
    visibility: visible !important;
    width: 100% !important;
    height: 100% !important;
}