/*
 * Mix365 native Live page — exact homepage / Vice presentation.
 * The legacy interface is now native DOM, not an iframe.
 */

body.mix365-native-live-active,
body.mix365-native-live-active .qw-totalcontainer,
body.mix365-native-live-active #canvas,
body.mix365-native-live-active #vice-ajaxcontents,
body.mix365-native-live-active .dhrk-ajax-content {
    background: #030304 !important;
}

body.mix365-native-live-active .dhrk-ajax-content {
    padding: 0 !important;
}

body.mix365-native-live-active .vice-footerwidgets,
body.mix365-native-live-active .dhrk-pagefooter {
    display: none !important;
}

body.mix365-native-live-active .qw-header-fixed {
    position: absolute;
    z-index: 1000;
    background: transparent !important;
    box-shadow: none !important;
}

body.mix365-native-live-active.qw-scrolled .qw-header-fixed {
    position: fixed;
    background: rgba(3, 3, 4, 0.92) !important;
    backdrop-filter: blur(14px);
}

.mix365-native-live-page {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: #030304;
}

.mix365-live-home-hero {
    min-height: 100vh;
    min-height: 100svh;
}

.mix365-native-live-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100vh;
    padding: 105px 0 130px;
    color: #fff;
    background:
        radial-gradient(
            circle at 50% 7%,
            rgba(55, 58, 63, 0.42),
            rgba(8, 9, 10, 0.90) 35%,
            #020203 76%
        );
}

.mix365-native-live-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: 0.20;
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}

.mix365-native-live-shell {
    position: relative;
    z-index: 5;
    width: min(1780px, calc(100% - 38px));
    margin: 0 auto;
}

.mix365-native-live-heading {
    width: min(900px, 100%);
    margin: 0 auto 48px;
    text-align: center;
}

.mix365-native-live-kicker {
    margin: 0 0 13px;
    color: #ff0048;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.mix365-native-live-heading h2 {
    position: relative;
    display: inline-block;
    margin: 0;
    color: #fff;
    font-size: clamp(45px, 7vw, 98px);
    font-weight: 900;
    line-height: 0.90;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.mix365-native-live-heading > p:last-child {
    width: min(700px, 100%);
    margin: 24px auto 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 16px;
    line-height: 1.72;
}

/* Local Bootstrap-compatible layout, scoped to the native Live app. */
.mix365-live-native,
.mix365-live-native *,
.mix365-live-native *::before,
.mix365-live-native *::after {
    box-sizing: border-box;
}

.mix365-live-native {
    --mix-live-red: #ff0048;
    --mix-live-red-dark: #cc003c;
    --mix-live-red-deep: #780024;
    --mix-live-grey: #26292d;
    --mix-live-grey-light: #44484d;
    --mix-live-black: #030304;

    position: relative;
    z-index: 8;
    width: 100%;
    color: #fff;
    background: transparent;
}

.mix365-live-native .container-fluid,
.mix365-live-native .container {
    width: 100%;
    max-width: 1760px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 18px;
    padding-left: 18px;
}

.mix365-live-native .row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    margin: 0;
}

.mix365-live-native .col-12,
.mix365-live-native .col-xl-4,
.mix365-live-native .col-xl-6,
.mix365-live-native .col-xl-8 {
    min-width: 0;
    grid-column: span 12;
}

@media (min-width: 1200px) {
    .mix365-live-native .col-xl-4 {
        grid-column: span 4;
    }

    .mix365-live-native .col-xl-6 {
        grid-column: span 6;
    }

    .mix365-live-native .col-xl-8 {
        grid-column: span 8;
    }
}

.mix365-live-native .g-4 {
    gap: 24px;
}

.mix365-live-native .d-flex {
    display: flex !important;
}

.mix365-live-native .flex-column {
    flex-direction: column !important;
}

.mix365-live-native .align-items-stretch {
    align-items: stretch !important;
}

.mix365-live-native .justify-content-between {
    justify-content: space-between !important;
}

.mix365-live-native .text-center {
    text-align: center !important;
}

.mix365-live-native .w-100 {
    width: 100% !important;
}

.mix365-live-native .px-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}

@media (min-width: 1200px) {
    .mix365-live-native .px-xl-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }
}

.mix365-live-native .h-100 {
    height: 100% !important;
}

.mix365-live-native .mt-1 {
    margin-top: 0.25rem !important;
}

.mix365-live-native .mt-3 {
    margin-top: 1rem !important;
}

.mix365-live-native .mt-4 {
    margin-top: 1.5rem !important;
}

.mix365-live-native .mb-0 {
    margin-bottom: 0 !important;
}

.mix365-live-native .mb-2 {
    margin-bottom: 0.5rem !important;
}

.mix365-live-native .mb-3 {
    margin-bottom: 1rem !important;
}

.mix365-live-native .mb-4 {
    margin-bottom: 1.5rem !important;
}

.mix365-live-native .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

.mix365-live-native .tab-pane:not(.active),
.mix365-live-native .tab-pane:not(.show) {
    display: none;
}

.mix365-live-native .tab-pane.active.show,
.mix365-live-native .tab-pane.active {
    display: block;
}

.mix365-live-native .live-page-section {
    position: relative;
    overflow: visible;
    padding: 0 0 30px !important;
    background: transparent !important;
}

.mix365-live-native .live-page-section::before {
    display: none !important;
}

/* Every panel now uses the homepage's sharp dark/red language. */
.mix365-live-native .live-card,
.mix365-live-native .mix365-live-extras-shell,
.mix365-live-native .mix365-social-section-card,
.mix365-live-native .mini-stat-box,
.mix365-live-native .live-track-card,
.mix365-live-native .live-stat-chip,
.mix365-live-native .live-meta-item,
.mix365-live-native .live-chat-mount,
.mix365-live-native .mix365-cdn-switch,
.mix365-live-native .mix-chat,
.mix365-live-native [class*="mix-chat__panel"],
.mix365-live-native .likes-leaderboard-row.is-top-1,
.mix365-live-native .likes-leaderboard-row.is-top-2,
.mix365-live-native .likes-leaderboard-row.is-top-3 {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.105) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(
            145deg,
            rgba(38, 41, 45, 0.82),
            rgba(8, 9, 10, 0.94)
        ) !important;
    box-shadow: 0 26px 68px rgba(0, 0, 0, 0.40) !important;
    clip-path: polygon(
        13px 0,
        100% 0,
        100% calc(100% - 13px),
        calc(100% - 13px) 100%,
        0 100%,
        0 13px
    );
    backdrop-filter: blur(14px);
}

.mix365-live-native .live-card {
    padding: clamp(19px, 2vw, 30px) !important;
}

.mix365-live-native .live-card::before,
.mix365-live-native .mix365-live-extras-shell::before,
.mix365-live-native .mix365-social-section-card::before {
    content: "";
    position: absolute;
    z-index: 6;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            #ff0048,
            #cc003c 34%,
            transparent 73%
        );
}

.mix365-live-native .live-card-header {
    position: relative;
    z-index: 8;
    margin-bottom: 22px;
}

.mix365-live-native .live-card-title,
.mix365-live-native .likes-leaderboard-title,
.mix365-live-native .likes-leaderboard-label,
.mix365-live-native h1,
.mix365-live-native h2,
.mix365-live-native h3,
.mix365-live-native h4 {
    color: #fff !important;
    font-family: inherit !important;
    font-weight: 900 !important;
    letter-spacing: -0.028em;
}

.mix365-live-native .live-card-title {
    font-size: clamp(25px, 2.5vw, 42px) !important;
    line-height: 0.98 !important;
}

.mix365-live-native p,
.mix365-live-native span,
.mix365-live-native label,
.mix365-live-native li {
    font-family: inherit;
}

.mix365-live-native .live-track-label,
.mix365-live-native .live-genres-label,
.mix365-live-native .live-visitors-title,
.mix365-live-native .mix365-cdn-switch__label,
.mix365-live-native .mini-stat-label,
.mix365-live-native [class*="kicker"],
.mix365-live-native [class*="eyebrow"] {
    color: #ff0048 !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
}

.mix365-live-native .live-player-wrap {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 0 !important;
    background:
        radial-gradient(
            circle at 50% 44%,
            rgba(68, 72, 77, 0.44),
            rgba(3, 3, 4, 0.98) 72%
        ) !important;
    clip-path: polygon(
        12px 0,
        100% 0,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        0 100%,
        0 12px
    );
}

.mix365-live-native .live-player-wrap::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.35);
}

.mix365-live-native .live-player-placeholder,
.mix365-live-native #livePlayerMount,
.mix365-live-native #livePlayerMount video,
.mix365-live-native #livePlayerMount iframe {
    border-radius: 0 !important;
}

/* Buttons and controls. */
.mix365-live-native .cmn-btn,
.mix365-live-native .mix365-inline-action,
.mix365-live-native button[type="submit"],
.mix365-live-native .btn-main,
.mix365-live-native .likes-leaderboard-tab,
.mix365-live-native .mix365-cdn-switch__btn,
.mix365-live-native [class*="action-button"] {
    min-height: 46px;
    border: 1px solid rgba(255, 0, 72, 0.48) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(
            135deg,
            rgba(255, 0, 72, 0.94),
            rgba(120, 0, 36, 0.94)
        ) !important;
    color: #fff !important;
    box-shadow: 0 15px 34px rgba(120, 0, 36, 0.22) !important;
    clip-path: polygon(
        8px 0,
        100% 0,
        100% calc(100% - 8px),
        calc(100% - 8px) 100%,
        0 100%,
        0 8px
    );
    font-weight: 900 !important;
    letter-spacing: 0.065em;
    text-transform: uppercase;
    transition: transform 180ms ease, filter 180ms ease, border-color 180ms ease;
}

.mix365-live-native .cmn-btn:hover,
.mix365-live-native .cmn-btn:focus,
.mix365-live-native .mix365-inline-action:hover,
.mix365-live-native .mix365-inline-action:focus,
.mix365-live-native button[type="submit"]:hover,
.mix365-live-native button[type="submit"]:focus,
.mix365-live-native .btn-main:hover,
.mix365-live-native .btn-main:focus {
    border-color: rgba(255, 255, 255, 0.35) !important;
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.mix365-live-native .btn-outline,
.mix365-live-native .live-stat-pill,
.mix365-live-native .live-genre-pill,
.mix365-live-native .likes-leaderboard-score,
.mix365-live-native .likes-leaderboard-pos-badge,
.mix365-live-native .live-audio-toggle {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(
            145deg,
            rgba(68, 72, 77, 0.42),
            rgba(12, 13, 15, 0.78)
        ) !important;
    color: #fff !important;
    box-shadow: none !important;
    clip-path: polygon(
        6px 0,
        100% 0,
        100% calc(100% - 6px),
        calc(100% - 6px) 100%,
        0 100%,
        0 6px
    );
}

.mix365-live-native .live-stat-pill i,
.mix365-live-native .live-stat-chip i,
.mix365-live-native .live-meta-item i,
.mix365-live-native .live-audio-toggle i,
.mix365-live-native .live-action-icon {
    color: #ff0048 !important;
}

.mix365-live-native .live-badge,
.mix365-live-native .live-badge-inline,
.mix365-live-native .live-audio-toggle.is-playing,
.mix365-live-native .is-live-heart {
    border-color: rgba(255, 0, 72, 0.48) !important;
    background: rgba(255, 0, 72, 0.14) !important;
    color: #fff !important;
    box-shadow: 0 0 26px rgba(255, 0, 72, 0.13) !important;
}

.mix365-live-native .live-badge i,
.mix365-live-native .live-badge-inline i {
    color: #ff0048 !important;
}

/* Forms. */
.mix365-live-native .form--control,
.mix365-live-native .form-control,
.mix365-live-native input,
.mix365-live-native textarea,
.mix365-live-native select {
    width: 100%;
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 0 !important;
    background: rgba(3, 3, 4, 0.78) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.mix365-live-native textarea {
    min-height: 120px;
}

.mix365-live-native .form--control:focus,
.mix365-live-native .form-control:focus,
.mix365-live-native input:focus,
.mix365-live-native textarea:focus,
.mix365-live-native select:focus {
    border-color: rgba(255, 0, 72, 0.65) !important;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(255, 0, 72, 0.10) !important;
}

.mix365-live-native input::placeholder,
.mix365-live-native textarea::placeholder {
    color: rgba(255, 255, 255, 0.44) !important;
}

/* Avatars and now-playing media. */
.mix365-live-native .live-dj-avatar,
.mix365-live-native .live-visitor-avatar,
.mix365-live-native .likes-leaderboard-avatar,
.mix365-live-native [class*="avatar"] img {
    border-color: rgba(255, 0, 72, 0.48) !important;
    box-shadow:
        0 0 0 3px rgba(255, 0, 72, 0.10),
        0 15px 32px rgba(0, 0, 0, 0.31) !important;
}

.mix365-live-native .live-info-card.has-live-flyer-watermark::after {
    background:
        radial-gradient(
            circle at 50% 22%,
            rgba(255, 0, 72, 0.09),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            rgba(3, 3, 4, 0.58),
            rgba(3, 3, 4, 0.95)
        ) !important;
}

.mix365-live-native .live-show-flyer-watermark {
    filter: saturate(0.76) contrast(1.13) brightness(0.72) !important;
}

/* Chat. */
.mix365-live-native .live-chat-mount {
    min-height: 620px;
    padding: 0 !important;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            rgba(12, 13, 15, 0.95),
            rgba(3, 3, 4, 0.99)
        ) !important;
}

.mix365-live-native .mix-chat,
.mix365-live-native [class^="mix-chat__"],
.mix365-live-native [class*=" mix-chat__"] {
    border-radius: 0 !important;
}

.mix365-live-native .mix-chat__toolbar,
.mix365-live-native .mix-chat__composer,
.mix365-live-native .mix-chat__tabs,
.mix365-live-native .mix-chat__modebar {
    border-color: rgba(255, 255, 255, 0.10) !important;
    background: rgba(8, 9, 10, 0.96) !important;
}

.mix365-live-native .mix-chat__send,
.mix365-live-native .mix-chat__tab.is-active,
.mix365-live-native .mix-chat__mode.is-active {
    border-color: rgba(255, 0, 72, 0.46) !important;
    background: rgba(255, 0, 72, 0.16) !important;
    color: #fff !important;
}

/* Leaderboard, visitors and listener map. */
.mix365-live-native .likes-leaderboard-row.is-top-1,
.mix365-live-native .likes-leaderboard-row.is-top-2,
.mix365-live-native .likes-leaderboard-row.is-top-3 {
    border-color: rgba(255, 0, 72, 0.22) !important;
}

.mix365-live-native #listenerStaticMap {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 0 !important;
    background: #08090a;
    clip-path: polygon(
        10px 0,
        100% 0,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        0 100%,
        0 10px
    );
}

/* Native modal replacement for Bootstrap's visual layer. */
.mix365-live-native .modal {
    position: fixed;
    z-index: 2147481000;
    inset: 0;
    display: none;
    overflow: auto;
    padding: 30px 16px;
    background: rgba(0, 0, 0, 0.76);
    backdrop-filter: blur(12px);
}

.mix365-live-native .modal.show {
    display: block;
}

.mix365-live-native .modal-dialog {
    width: min(680px, 100%);
    margin: 5vh auto;
}

.mix365-live-native .modal-content {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 0;
    background:
        linear-gradient(
            145deg,
            rgba(38, 41, 45, 0.98),
            rgba(3, 3, 4, 0.99)
        );
    color: #fff;
    clip-path: polygon(
        14px 0,
        100% 0,
        100% calc(100% - 14px),
        calc(100% - 14px) 100%,
        0 100%,
        0 14px
    );
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55);
}

.mix365-live-native .modal-header,
.mix365-live-native .modal-body,
.mix365-live-native .modal-footer {
    padding: 20px 22px;
}

.mix365-live-native .modal-header,
.mix365-live-native .modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-color: rgba(255, 255, 255, 0.10);
}

.mix365-live-native .btn-close {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.mix365-live-native .btn-close::before {
    content: "×";
    color: #fff;
    font-size: 25px;
}

.mix365-native-live-error {
    padding: 40px;
    border: 1px solid rgba(255, 0, 72, 0.40);
    color: #fff;
    text-align: center;
}

/* Keep functional overlays above the Vice presentation layers. */
.mix365-live-native .like-burst-layer,
.mix365-live-native .mix365-reactions-overlay,
.mix365-live-native [class*="overlay"],
.mix365-live-native [class*="popover"] {
    z-index: 2147482000;
}

@media (max-width: 991.98px) {
    .mix365-native-live-section {
        padding: 82px 0 100px;
    }

    .mix365-native-live-shell {
        width: calc(100% - 16px);
    }

    .mix365-live-native .container-fluid,
    .mix365-live-native .container {
        padding-right: 8px;
        padding-left: 8px;
    }

    .mix365-live-native .row {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .mix365-live-native .col-12,
    .mix365-live-native .col-xl-4,
    .mix365-live-native .col-xl-6,
    .mix365-live-native .col-xl-8 {
        grid-column: auto;
    }
}

@media (max-width: 575.98px) {
    .mix365-native-live-heading {
        padding: 0 10px;
    }

    .mix365-live-native .live-card {
        padding: 17px 12px !important;
    }

    .mix365-live-native .live-chat-mount {
        min-height: 560px;
    }
}

/* MIX365_LIVE_THEME_CARRYOVER_START */

/*
 * Exact Mix365 homepage visual language across the complete
 * native Live page.
 */

body.mix365-native-live-active {
    --mix-home-red: #ff0048;
    --mix-home-red-dark: #cc003c;
    --mix-home-red-deep: #780024;
    --mix-home-charcoal: #26292d;
    --mix-home-dark: #15171a;
    --mix-home-black: #030304;
    --mix-home-white: #ffffff;
    --mix-home-border: rgba(255,255,255,0.105);

    color: #fff;
    background: #030304 !important;
}

body.mix365-native-live-active .qw-totalcontainer,
body.mix365-native-live-active #canvas,
body.mix365-native-live-active #vice-ajaxcontents,
body.mix365-native-live-active .dhrk-ajax-content,
body.mix365-native-live-active .mix365-native-live-page {
    background: #030304 !important;
}

body.mix365-native-live-active .dhrk-ajax-content {
    padding: 0 !important;
}

body.mix365-native-live-active .qw-header-fixed {
    position: absolute;
    z-index: 200;
    background: transparent !important;
    box-shadow: none !important;
}

body.mix365-native-live-active.qw-scrolled .qw-header-fixed {
    position: fixed;
    background:
        rgba(3,3,4,0.92) !important;
    backdrop-filter: blur(14px);
}

body.mix365-native-live-active .vice-footerwidgets,
body.mix365-native-live-active .dhrk-pagefooter {
    display: none !important;
}

/*
 * Hero remains the exact main homepage hero.
 */

body.mix365-native-live-active .mix365-live-home-hero {
    min-height: 100vh;
    min-height: 100svh;
    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(44,48,51,0.56) 0,
            rgba(8,9,10,0.72) 31%,
            #020203 72%
        ) !important;
}

body.mix365-native-live-active .mix365-glitch-title {
    color: #fff !important;
    text-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

body.mix365-native-live-active .mix365-hero-subtitle {
    color: rgba(255,255,255,0.70) !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

body.mix365-native-live-active .mix365-listen-button {
    border-radius: 0 !important;
    border:
        1px solid
        rgba(255,0,72,0.72) !important;
    background:
        linear-gradient(
            135deg,
            #ff0048,
            #a40031
        ) !important;
    color: #fff !important;
    clip-path: polygon(
        8px 0,
        100% 0,
        100% calc(100% - 8px),
        calc(100% - 8px) 100%,
        0 100%,
        0 8px
    );
    box-shadow:
        0 18px 42px
        rgba(255,0,72,0.18) !important;
    transform: none !important;
}

/*
 * Entire Live room uses the homepage unified moving background.
 */

body.mix365-native-live-active .mix365-native-live-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 100px 0 130px;
    background-color: #050506 !important;
    background-image:
        radial-gradient(
            circle at 18% 30%,
            rgba(231,0,65,0.10),
            transparent 31%
        ),
        radial-gradient(
            circle at 82% 70%,
            rgba(255,255,255,0.035),
            transparent 28%
        ) !important;
    border-top:
        1px solid
        rgba(255,255,255,0.065);
}

body.mix365-native-live-active .mix365-native-live-shell {
    position: relative;
    z-index: 10;
    width: min(
        1840px,
        calc(100% - 36px)
    );
    margin: 0 auto;
}

body.mix365-native-live-active .mix365-native-live-heading {
    width: min(920px, 100%);
    margin: 0 auto 54px;
    padding: 0 18px;
    color: #fff;
    text-align: center;
}

body.mix365-native-live-active .mix365-native-live-kicker {
    color: #ff0048 !important;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

body.mix365-native-live-active .mix365-native-live-heading h2 {
    position: relative;
    margin: 0;
    color: #fff !important;
    font-size: clamp(48px, 8vw, 104px) !important;
    font-weight: 900 !important;
    line-height: 0.88 !important;
    letter-spacing: -0.05em !important;
    text-transform: uppercase;
    text-shadow: none !important;
    transform: none !important;
}

body.mix365-native-live-active .mix365-native-live-heading > p:last-child {
    width: min(720px, 100%);
    margin: 24px auto 0;
    color: rgba(255,255,255,0.64);
    font-size: 16px;
    line-height: 1.72;
}

/*
 * Each major Live block becomes its own animated homepage band.
 */

body.mix365-native-live-active .mix365-live-theme-band {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    margin:
        0
        calc(-1 * clamp(18px, 3vw, 52px))
        34px !important;
    padding:
        clamp(30px, 4vw, 62px)
        clamp(18px, 3vw, 52px) !important;
    border-top:
        1px solid
        rgba(255,255,255,0.055);
    border-bottom:
        1px solid
        rgba(255,13,78,0.08);
    background-color:
        rgba(5,5,6,0.72) !important;
    background-image:
        radial-gradient(
            circle at 16% 28%,
            rgba(231,0,65,0.085),
            transparent 29%
        ),
        radial-gradient(
            circle at 84% 74%,
            rgba(255,255,255,0.026),
            transparent 25%
        ) !important;
}

body.mix365-native-live-active .mix365-live-theme-band:nth-of-type(even) {
    background-image:
        radial-gradient(
            circle at 82% 26%,
            rgba(231,0,65,0.075),
            transparent 28%
        ),
        radial-gradient(
            circle at 18% 76%,
            rgba(255,255,255,0.026),
            transparent 24%
        ) !important;
}

body.mix365-native-live-active .mix365-live-theme-band
    > .mix365-live-band-effects-canvas {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0.68;
    pointer-events: none !important;
}

body.mix365-native-live-active .mix365-live-theme-band
    > .mix365-live-band-grid {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    opacity: 0.085;
    background-image:
        linear-gradient(
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );
    background-size: 90px 90px;
    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 78%
        );
}

body.mix365-native-live-active .mix365-live-theme-band
    > .mix365-live-band-vignette {
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at center,
            transparent 25%,
            rgba(0,0,0,0.25) 72%,
            rgba(0,0,0,0.57) 100%
        );
}

body.mix365-native-live-active .mix365-live-theme-band
    > .mix365-live-band-scanlines {
    position: absolute;
    z-index: 4;
    inset: 0;
    pointer-events: none;
    opacity: 0.055;
    mix-blend-mode: screen;
    background:
        repeating-linear-gradient(
            180deg,
            rgba(255,255,255,0.055) 0,
            rgba(255,255,255,0.055) 1px,
            transparent 1px,
            transparent 5px
        );
    background-size: 100% 10px;
    animation:
        mix365LiveThemeScanlines
        11s linear infinite;
}

body.mix365-native-live-active .mix365-live-theme-band
    > *:not(.mix365-live-band-effects-canvas)
       :not(.mix365-live-band-grid)
       :not(.mix365-live-band-vignette)
       :not(.mix365-live-band-scanlines) {
    position: relative;
    z-index: 7;
}

/*
 * Cards use the same clean clipped Vice/homepage language.
 */

body.mix365-native-live-active .mix365-live-native .live-card,
body.mix365-native-live-active .mix365-live-native
    .mix365-live-extras-shell {
    position: relative;
    overflow: hidden !important;
    border:
        1px solid
        rgba(255,255,255,0.11) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(
            145deg,
            rgba(38,41,45,0.55),
            rgba(7,8,9,0.91)
        ) !important;
    clip-path: polygon(
        14px 0,
        100% 0,
        100% calc(100% - 14px),
        calc(100% - 14px) 100%,
        0 100%,
        0 14px
    ) !important;
    box-shadow:
        0 28px 78px
        rgba(0,0,0,0.36) !important;
    backdrop-filter: blur(15px);
    transform: none !important;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease !important;
}

body.mix365-native-live-active .mix365-live-native .live-card::before,
body.mix365-native-live-active .mix365-live-native
    .mix365-live-extras-shell::before {
    content: "";
    position: absolute;
    z-index: 5;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    height: 1px !important;
    background:
        linear-gradient(
            90deg,
            #ff0048,
            transparent 34%,
            transparent 70%,
            rgba(255,255,255,0.13)
        ) !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none;
}

body.mix365-native-live-active .mix365-live-native .live-card::after,
body.mix365-native-live-active .mix365-live-native
    .mix365-live-extras-shell::after {
    content: "";
    position: absolute;
    z-index: 4;
    top: 13px;
    right: 13px;
    width: 30px;
    height: 30px;
    border-top:
        1px solid
        rgba(255,255,255,0.20);
    border-right:
        1px solid
        rgba(255,255,255,0.20);
    pointer-events: none;
}

body.mix365-native-live-active .mix365-live-native .live-card:hover {
    border-color:
        rgba(255,0,72,0.31) !important;
    transform:
        translateY(-3px) !important;
    box-shadow:
        0 36px 90px
        rgba(0,0,0,0.46),
        0 0 40px
        rgba(255,0,72,0.045) !important;
}

body.mix365-native-live-active .mix365-live-native
    .live-card-title,
body.mix365-native-live-active .mix365-live-native
    .mix365-live-extras-title {
    color: #fff !important;
    font-size: clamp(27px, 2.8vw, 45px) !important;
    font-weight: 900 !important;
    line-height: 0.96 !important;
    letter-spacing: -0.04em !important;
    text-transform: uppercase;
    text-shadow: none !important;
}

body.mix365-native-live-active .mix365-live-native
    .live-card-header {
    padding-bottom: 16px;
    border-bottom:
        1px solid
        rgba(255,255,255,0.075);
}

body.mix365-native-live-active .mix365-live-native
    .top-title,
body.mix365-native-live-active .mix365-live-native
    .live-track-label,
body.mix365-native-live-active .mix365-live-native
    .live-genres-label,
body.mix365-native-live-active .mix365-live-native
    .live-visitors-title,
body.mix365-native-live-active .mix365-live-native
    .mini-stat-label {
    color: #ff0048 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    transform: none !important;
}

/*
 * Player, chat and forms keep their functions but inherit the
 * main homepage finish.
 */

body.mix365-native-live-active .mix365-live-native
    .live-player-wrap {
    border:
        1px solid
        rgba(255,255,255,0.12) !important;
    border-radius: 0 !important;
    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(38,41,45,0.50),
            #020203 72%
        ) !important;
    clip-path: polygon(
        12px 0,
        100% 0,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        0 100%,
        0 12px
    ) !important;
    box-shadow:
        inset 0 0 80px
        rgba(0,0,0,0.42) !important;
    transform: none !important;
}

body.mix365-native-live-active .mix365-live-native
    .live-player-wrap::before {
    content: "";
    position: absolute;
    z-index: 20;
    inset: 0;
    pointer-events: none;
    opacity: 0.055;
    background:
        repeating-linear-gradient(
            180deg,
            rgba(255,255,255,0.055) 0,
            rgba(255,255,255,0.055) 1px,
            transparent 1px,
            transparent 5px
        );
}

body.mix365-native-live-active .mix365-live-native
    .live-player-wrap::after {
    content: none !important;
}

body.mix365-native-live-active .mix365-live-native
    .live-chat-mount {
    border:
        1px solid
        rgba(255,255,255,0.10) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(
            180deg,
            rgba(8,9,10,0.92),
            rgba(3,3,4,0.98)
        ) !important;
    box-shadow:
        inset 0 0 70px
        rgba(0,0,0,0.42) !important;
}

body.mix365-native-live-active .mix365-live-native
    .cmn-btn,
body.mix365-native-live-active .mix365-live-native
    .mix365-inline-action,
body.mix365-native-live-active .mix365-live-native
    button[type="submit"],
body.mix365-native-live-active .mix365-live-native
    .btn-main,
body.mix365-native-live-active .mix365-live-native
    .likes-leaderboard-tab,
body.mix365-native-live-active .mix365-live-native
    .mix365-cdn-switch__btn {
    border:
        1px solid
        rgba(255,0,72,0.56) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(
            135deg,
            #ff0048,
            #9d002f
        ) !important;
    color: #fff !important;
    clip-path: polygon(
        7px 0,
        100% 0,
        100% calc(100% - 7px),
        calc(100% - 7px) 100%,
        0 100%,
        0 7px
    ) !important;
    box-shadow:
        0 15px 36px
        rgba(255,0,72,0.13) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    transform: none !important;
}

body.mix365-native-live-active .mix365-live-native
    .cmn-btn:hover,
body.mix365-native-live-active .mix365-live-native
    .cmn-btn:focus,
body.mix365-native-live-active .mix365-live-native
    .mix365-inline-action:hover,
body.mix365-native-live-active .mix365-live-native
    .mix365-inline-action:focus,
body.mix365-native-live-active .mix365-live-native
    button[type="submit"]:hover,
body.mix365-native-live-active .mix365-live-native
    button[type="submit"]:focus,
body.mix365-native-live-active .mix365-live-native
    .btn-main:hover,
body.mix365-native-live-active .mix365-live-native
    .btn-main:focus {
    border-color:
        rgba(255,255,255,0.34) !important;
    background:
        linear-gradient(
            135deg,
            #ff1756,
            #cc003c
        ) !important;
    color: #fff !important;
    transform:
        translateY(-2px) !important;
}

body.mix365-native-live-active .mix365-live-native
    .btn-outline,
body.mix365-native-live-active .mix365-live-native
    .live-stat-pill,
body.mix365-native-live-active .mix365-live-native
    .live-genre-pill,
body.mix365-native-live-active .mix365-live-native
    .likes-leaderboard-score,
body.mix365-native-live-active .mix365-live-native
    .likes-leaderboard-pos-badge,
body.mix365-native-live-active .mix365-live-native
    .live-audio-toggle {
    border:
        1px solid
        rgba(255,255,255,0.11) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(
            145deg,
            rgba(38,41,45,0.42),
            rgba(7,8,9,0.84)
        ) !important;
    color: #fff !important;
    clip-path: polygon(
        5px 0,
        100% 0,
        100% calc(100% - 5px),
        calc(100% - 5px) 100%,
        0 100%,
        0 5px
    ) !important;
    box-shadow: none !important;
    transform: none !important;
}

body.mix365-native-live-active .mix365-live-native
    .live-stat-pill i,
body.mix365-native-live-active .mix365-live-native
    .live-stat-chip i,
body.mix365-native-live-active .mix365-live-native
    .live-meta-item i,
body.mix365-native-live-active .mix365-live-native
    .live-audio-toggle i {
    color: #ff0048 !important;
}

body.mix365-native-live-active .mix365-live-native
    .form--control,
body.mix365-native-live-active .mix365-live-native
    .form-control,
body.mix365-native-live-active .mix365-live-native
    input,
body.mix365-native-live-active .mix365-live-native
    textarea,
body.mix365-native-live-active .mix365-live-native
    select {
    border:
        1px solid
        rgba(255,255,255,0.13) !important;
    border-radius: 0 !important;
    background:
        rgba(3,3,4,0.78) !important;
    color: #fff !important;
    box-shadow: none !important;
    transform: none !important;
}

body.mix365-native-live-active .mix365-live-native
    .form--control:focus,
body.mix365-native-live-active .mix365-live-native
    .form-control:focus,
body.mix365-native-live-active .mix365-live-native
    input:focus,
body.mix365-native-live-active .mix365-live-native
    textarea:focus,
body.mix365-native-live-active .mix365-live-native
    select:focus {
    border-color:
        rgba(255,0,72,0.68) !important;
    outline: none !important;
    box-shadow:
        0 0 0 2px
        rgba(255,0,72,0.10) !important;
}

body.mix365-native-live-active .mix365-live-native
    .live-dj-avatar,
body.mix365-native-live-active .mix365-live-native
    .live-visitor-avatar,
body.mix365-native-live-active .mix365-live-native
    .likes-leaderboard-avatar {
    border-color:
        rgba(255,0,72,0.40) !important;
    box-shadow:
        0 0 0 3px
        rgba(255,0,72,0.08),
        0 14px 30px
        rgba(0,0,0,0.30) !important;
    transform: none !important;
}

/*
 * Moderate theme glitch, matching the homepage rather than
 * the previous constant distressed treatment.
 */

body.mix365-native-live-active
    .mix365-live-theme-glitch {
    animation:
        mix365LiveThemeGlitch
        240ms steps(2, end);
}

@keyframes mix365LiveThemeGlitch {
    0% {
        transform: translate(0);
        filter: none;
    }

    24% {
        transform:
            translate(-3px, 1px);
        filter:
            drop-shadow(
                3px 0 0
                rgba(255,0,72,0.65)
            );
    }

    52% {
        transform:
            translate(4px, -1px);
        filter:
            drop-shadow(
                -3px 0 0
                rgba(216,250,255,0.35)
            );
    }

    78% {
        transform:
            translate(-1px, 0);
    }

    100% {
        transform: translate(0);
        filter: none;
    }
}

@keyframes mix365LiveThemeScanlines {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 120px;
    }
}

@media (max-width: 991.98px) {
    body.mix365-native-live-active
        .mix365-native-live-shell {
        width:
            calc(100% - 18px);
    }

    body.mix365-native-live-active
        .mix365-live-theme-band {
        margin:
            0 -9px 24px !important;
        padding:
            28px 9px !important;
    }
}

@media (max-width: 575.98px) {
    body.mix365-native-live-active
        .mix365-native-live-section {
        padding:
            76px 0 90px;
    }

    body.mix365-native-live-active
        .mix365-native-live-heading h2 {
        font-size:
            clamp(44px, 16vw, 72px)
            !important;
    }

    body.mix365-native-live-active
        .mix365-live-native .live-card {
        padding:
            18px 13px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.mix365-native-live-active
        .mix365-live-band-scanlines,
    body.mix365-native-live-active
        .mix365-live-theme-glitch {
        animation: none !important;
    }
}

/* MIX365_LIVE_THEME_CARRYOVER_END */


/* MIX365_FINAL_STABLE_LIVE_LAYOUT_START */

/*
 * The main Live section owns the animated wallpaper.
 * Individual content rows must never create their own height.
 */

body.mix365-native-live-active
.mix365-native-live-section {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 !important;

    padding:
        0
        0
        42px
        !important;

    align-items: start !important;
    align-content: start !important;
    justify-content: start !important;

    overflow: hidden !important;
    transform: none !important;
}

body.mix365-native-live-active
.mix365-native-live-heading {
    display: none !important;

    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}

body.mix365-native-live-active
.mix365-native-live-shell,
body.mix365-native-live-active
#mix365LiveNativeApp,
body.mix365-native-live-active
#mix365LiveNativeApp.live-page-section,
body.mix365-native-live-active
#mix365LiveNativeApp
> .container-fluid {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    padding-top: 0 !important;

    align-items: start !important;
    align-content: start !important;
    justify-content: start !important;

    overflow: visible !important;
    transform: none !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
> .container-fluid {
    padding-right: 14px !important;
    padding-left: 14px !important;
}

/*
 * Remove every abandoned row-level decorative layer.
 */

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-section-canvas,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-section-star-overlay,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-band-effects-canvas,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-band-grid,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-band-vignette,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-band-scanlines {
    display: none !important;

    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    opacity: 0 !important;
    visibility: hidden !important;
}

/*
 * No content row may have a viewport-sized or growing height.
 */

body.mix365-native-live-active
#mix365LiveNativeApp
.row,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-section-scene,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-theme-band {
    position: relative !important;

    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    margin-top: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    align-items: start !important;
    align-content: start !important;

    overflow: visible !important;
    transform: none !important;
}

/*
 * Completely remove empty rows left behind by older scripts.
 */

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-empty-scene,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-final-empty-row {
    display: none !important;

    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}

/*
 * First row:
 * video far left and chat on the right.
 */

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-final-player-chat-row {
    display: grid !important;

    grid-template-columns:
        minmax(0, 72fr)
        minmax(350px, 28fr);

    align-items: start !important;
    align-content: start !important;

    gap:
        clamp(16px, 1.5vw, 26px)
        !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    margin:
        0
        0
        28px
        !important;

    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;

    overflow: visible !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-final-player-chat-row
> .mix365-final-player-column,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-final-player-chat-row
> .mix365-final-chat-column {
    width: 100% !important;
    max-width: none !important;

    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: none !important;
    align-self: start !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-final-player-column {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-final-chat-column {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

/*
 * Remove only the large outer player and chat boxes.
 */

body.mix365-native-live-active
#mix365LiveNativeApp
.live-player-card,
body.mix365-native-live-active
#mix365LiveNativeApp
.live-chat-card {
    display: block !important;

    width: 100% !important;

    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
    clip-path: none !important;

    overflow: visible !important;
    transform: none !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.live-player-card::before,
body.mix365-native-live-active
#mix365LiveNativeApp
.live-player-card::after,
body.mix365-native-live-active
#mix365LiveNativeApp
.live-chat-card::before,
body.mix365-native-live-active
#mix365LiveNativeApp
.live-chat-card::after {
    display: none !important;
    content: none !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.live-player-card
.live-card-header,
body.mix365-native-live-active
#mix365LiveNativeApp
.live-chat-card
.live-card-header {
    min-height: 0 !important;
    height: auto !important;

    margin:
        0
        0
        14px
        !important;

    padding:
        0
        0
        12px
        !important;
}

/*
 * Natural video height.
 */

body.mix365-native-live-active
#mix365LiveNativeApp
.live-player-wrap {
    width: 100% !important;
    max-width: none !important;

    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    aspect-ratio:
        16 / 9
        !important;

    margin: 0 !important;
}

/*
 * Fixed chat viewport. Inline ResizeObserver values cannot
 * override these declarations.
 */

body.mix365-native-live-active
#mix365LiveNativeApp
.live-chat-mount {
    width: 100% !important;

    height:
        clamp(
            520px,
            37vw,
            670px
        )
        !important;

    min-height:
        clamp(
            520px,
            37vw,
            670px
        )
        !important;

    max-height:
        clamp(
            520px,
            37vw,
            670px
        )
        !important;

    margin: 0 !important;

    overflow: hidden !important;
}

/*
 * Later sections retain separation but cannot grow.
 */

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-final-content-row {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    margin:
        0
        0
        26px
        !important;

    padding:
        20px
        0
        24px
        !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-final-content-row:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/*
 * Remove the expanding space after the final section.
 */

body.mix365-native-live-active
#mix365LiveNativeApp
> .container-fluid
> :last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 991.98px) {
    body.mix365-native-live-active
    #mix365LiveNativeApp
    .mix365-final-player-chat-row {
        grid-template-columns:
            1fr
            !important;

        gap:
            24px
            !important;
    }

    body.mix365-native-live-active
    #mix365LiveNativeApp
    .mix365-final-player-column {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    body.mix365-native-live-active
    #mix365LiveNativeApp
    .mix365-final-chat-column {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    body.mix365-native-live-active
    #mix365LiveNativeApp
    .live-chat-mount {
        height:
            620px
            !important;

        min-height:
            620px
            !important;

        max-height:
            620px
            !important;
    }
}

@media (max-width: 575.98px) {
    body.mix365-native-live-active
    #mix365LiveNativeApp
    > .container-fluid {
        padding-right: 7px !important;
        padding-left: 7px !important;
    }

    body.mix365-native-live-active
    #mix365LiveNativeApp
    .live-chat-mount {
        height:
            560px
            !important;

        min-height:
            560px
            !important;

        max-height:
            560px
            !important;
    }
}

/* MIX365_FINAL_STABLE_LIVE_LAYOUT_END */

/* MIX365_DJ_SCHEDULE_VISITORS_LAYOUT_START */

/*
 * Combined information layout:
 *
 * LEFT:
 * AutoDJ / Live DJ
 *
 * RIGHT:
 * Next 2 Shows
 * Visitors / Stats
 */

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-dj-schedule-layout {
    position: relative !important;
    z-index: 10 !important;

    display: grid !important;

    grid-template-columns:
        minmax(330px, 0.88fr)
        minmax(0, 1.12fr);

    align-items: start !important;

    gap:
        clamp(20px, 2vw, 34px)
        !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    margin:
        0
        0
        30px
        !important;

    padding:
        22px
        0
        28px
        !important;

    border: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
    clip-path: none !important;

    overflow: visible !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-dj-schedule-left,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-dj-schedule-right {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-dj-schedule-right {
    display: grid !important;

    grid-template-columns: 1fr;

    gap:
        clamp(18px, 1.6vw, 26px)
        !important;
}

/*
 * Visitors and statistics remain one area under Next 2 Shows.
 * If they are two separate cards, show them side by side.
 */

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-visitors-stats-area {
    display: grid !important;

    grid-template-columns:
        repeat(
            var(--mix365-visitors-stats-columns, 1),
            minmax(0, 1fr)
        );

    align-items: start !important;

    gap:
        clamp(16px, 1.4vw, 22px)
        !important;

    width: 100% !important;

    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}

/*
 * Prevent old Bootstrap h-100 and row stretching from changing
 * the new layout height.
 */

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-dj-schedule-layout
.live-card,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-dj-schedule-layout
.live-card.h-100 {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 !important;

    align-self: start !important;
    transform: none !important;
}

/*
 * AutoDJ / Live DJ occupies the full left column.
 */

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-dj-schedule-left
.live-info-card {
    width: 100% !important;

    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
}

/*
 * Keep upcoming shows compact enough to sit above the visitors.
 */

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-next-two-shows-card {
    width: 100% !important;

    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-next-two-shows-card
.upcoming-show-item {
    min-height: 0 !important;
}

/*
 * Hide abandoned Bootstrap columns and rows after their cards
 * have been moved into the combined section.
 */

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-reflow-source-empty {
    display: none !important;

    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    overflow: hidden !important;
    visibility: hidden !important;
}

/*
 * Mobile and tablet:
 *
 * AutoDJ / Live DJ
 * Next 2 Shows
 * Visitors / Stats
 */

@media (max-width: 991.98px) {
    body.mix365-native-live-active
    #mix365LiveNativeApp
    .mix365-dj-schedule-layout {
        grid-template-columns:
            1fr
            !important;

        gap:
            24px
            !important;

        padding:
            18px
            0
            24px
            !important;
    }

    body.mix365-native-live-active
    #mix365LiveNativeApp
    .mix365-dj-schedule-left {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    body.mix365-native-live-active
    #mix365LiveNativeApp
    .mix365-dj-schedule-right {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
}

@media (max-width: 700px) {
    body.mix365-native-live-active
    #mix365LiveNativeApp
    .mix365-visitors-stats-area {
        grid-template-columns:
            1fr
            !important;
    }
}

/* MIX365_DJ_SCHEDULE_VISITORS_LAYOUT_END */

/* MIX365_REMOVE_OFFLINE_HERO_START */

#mix365OfflineHero,
.mix365-offline-hero {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* MIX365_REMOVE_OFFLINE_HERO_END */

/* MIX365_REMOVE_EXTRA_VIDEO_CONTROLS_START */

/*
 * Remove unwanted controls beneath the Live video.
 * Keep them in the DOM so legacy scripts do not break.
 */

#liveShareBtn,
#liveReplayBtn,
#liveReplaysBtn,
#replayLiveBtn,
#replaysLiveBtn,
#liveCurrentViewsPill,
#liveTotalViewsPill,
#mobileLiveShareBtn,
#mobileLiveReplayBtn,
#mobileLiveReplaysBtn,
.mix365-hidden-live-control {
    display: none !important;

    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    opacity: 0 !important;
    visibility: hidden !important;

    overflow: hidden !important;
    pointer-events: none !important;
}

/* MIX365_REMOVE_EXTRA_VIDEO_CONTROLS_END */


/* MIX365_CLEAN_EQUAL_VIDEO_BAR_START */

/*
 * The old container remains for legacy scripts, but the actual
 * desktop controls now live in one isolated clean bar.
 */

@media (min-width: 992px) {

    body.mix365-native-live-active
    #liveBelowVideoRow {
        display: none !important;

        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }

    /*
     * Exactly the same width as the video.
     */

    body.mix365-native-live-active
    #mix365DesktopVideoActions {
        display: flex !important;
        flex-flow: row nowrap !important;

        align-items: stretch !important;
        justify-content: stretch !important;

        gap: 8px !important;

        box-sizing: border-box !important;

        width: 100% !important;
        max-width: none !important;

        min-height: 0 !important;
        height: auto !important;

        margin: 12px 0 0 !important;
        padding: 8px !important;

        border:
            1px solid
            rgba(255,255,255,0.08)
            !important;

        background:
            rgba(4,5,6,0.86)
            !important;

        clip-path: polygon(
            8px 0,
            100% 0,
            100% calc(100% - 8px),
            calc(100% - 8px) 100%,
            0 100%,
            0 8px
        );

        box-shadow:
            0 15px 40px
            rgba(0,0,0,0.30)
            !important;

        overflow: visible !important;
    }

    body.mix365-native-live-active
    #mix365DesktopVideoActions.is-empty {
        display: none !important;
    }

    /*
     * Every visible direct child gets exactly the same share.
     */

    body.mix365-native-live-active
    #mix365DesktopVideoActions
    > .mix365-desktop-action {
        position: relative !important;

        display: inline-flex !important;
        flex: 1 1 0 !important;
        flex-direction: row !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 7px !important;

        box-sizing: border-box !important;

        width: 0 !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;

        margin: 0 !important;
        padding: 8px 6px !important;

        float: none !important;
        clear: none !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        border:
            1px solid
            rgba(255,255,255,0.15)
            !important;

        border-radius: 0 !important;

        color: #fff !important;

        clip-path: polygon(
            6px 0,
            100% 0,
            100% calc(100% - 6px),
            calc(100% - 6px) 100%,
            0 100%,
            0 6px
        );

        box-shadow:
            inset 0 1px 0
            rgba(255,255,255,0.06),
            0 8px 20px
            rgba(0,0,0,0.24)
            !important;

        font-family: inherit !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: 0.045em !important;

        text-align: center !important;
        text-transform: uppercase;
        text-decoration: none !important;

        white-space: nowrap !important;
        word-break: normal !important;
        writing-mode: horizontal-tb !important;

        overflow: hidden !important;

        transform: none;
    }

    body.mix365-native-live-active
    #mix365DesktopVideoActions
    > .mix365-desktop-action i,

    body.mix365-native-live-active
    #mix365DesktopVideoActions
    > .mix365-desktop-action span {
        display: inline-block !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;

        font-size: inherit !important;
        line-height: 1 !important;

        white-space: nowrap !important;
    }

    /*
     * Reaction wrapper is one equal-width slot.
     */

    body.mix365-native-live-active
    #mix365DesktopVideoActions
    > #liveReactionsRow.mix365-desktop-action {
        padding: 0 !important;

        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;

        overflow: visible !important;
    }

    body.mix365-native-live-active
    #mix365DesktopVideoActions
    #liveReactionToggle {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;

        margin: 0 !important;
        padding: 8px 6px !important;

        border:
            1px solid
            rgba(255,0,72,0.66)
            !important;

        border-radius: 0 !important;

        background:
            linear-gradient(
                135deg,
                #ff0048,
                #790024
            )
            !important;

        color: #fff !important;

        clip-path: polygon(
            6px 0,
            100% 0,
            100% calc(100% - 6px),
            calc(100% - 6px) 100%,
            0 100%,
            0 6px
        );

        font-size: 11px !important;
        font-weight: 900 !important;
    }

    /*
     * Theme colours.
     */

    body.mix365-native-live-active
    #desktopStatsBtn {
        background:
            linear-gradient(
                135deg,
                #0786a1,
                #123344
            )
            !important;
    }

    body.mix365-native-live-active
    #liveLikeBtn {
        background:
            linear-gradient(
                135deg,
                #e71750,
                #780023
            )
            !important;
    }

    body.mix365-native-live-active
    #liveFollowBtn,

    body.mix365-native-live-active
    #followLiveBtn {
        background:
            linear-gradient(
                135deg,
                #19a86e,
                #075039
            )
            !important;
    }

    body.mix365-native-live-active
    #liveTipBtn {
        background:
            linear-gradient(
                135deg,
                #18b8ec,
                #6952ff
            )
            !important;
    }

    body.mix365-native-live-active
    #requestLiveBtn,

    body.mix365-native-live-active
    #liveRequestBtn {
        background:
            linear-gradient(
                135deg,
                #65eee1,
                #089b92
            )
            !important;

        color: #03100f !important;
    }

    body.mix365-native-live-active
    #liveTrackIdToggleBtn,

    body.mix365-native-live-active
    #liveTrackIdBtn,

    body.mix365-native-live-active
    #trackIdBtn {
        background:
            linear-gradient(
                135deg,
                #cb8117,
                #673900
            )
            !important;
    }

    body.mix365-native-live-active
    #liveAdminBtn,

    body.mix365-native-live-active
    #adminLiveBtn {
        background:
            linear-gradient(
                135deg,
                #a21b44,
                #420819
            )
            !important;
    }

    /*
     * The old individual statistic elements remain available
     * to the Stats overlay but cannot appear in this bar.
     */

    body.mix365-native-live-active
    #liveListenersPillBottom,

    body.mix365-native-live-active
    #liveListenersPill,

    body.mix365-native-live-active
    #liveLikesPill,

    body.mix365-native-live-active
    #liveCurrentViewsPill,

    body.mix365-native-live-active
    #liveTotalViewsPill {
        display: none !important;
    }

    /*
     * Hidden/live-only controls take no space.
     */

    body.mix365-native-live-active
    #mix365DesktopVideoActions
    > .offline-hidden,

    body.mix365-native-live-active
    #mix365DesktopVideoActions
    > .mix365-hidden-live-control,

    body.mix365-native-live-active
    #mix365DesktopVideoActions
    > [hidden] {
        display: none !important;
        flex: 0 0 0 !important;

        width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /*
     * Glitch hover.
     */

    body.mix365-native-live-active
    #mix365DesktopVideoActions
    > button.mix365-desktop-action:hover,

    body.mix365-native-live-active
    #mix365DesktopVideoActions
    > a.mix365-desktop-action:hover,

    body.mix365-native-live-active
    #liveReactionToggle:hover {
        animation:
            mix365CleanActionGlitch
            240ms
            steps(2,end);

        border-color:
            rgba(255,255,255,0.80)
            !important;

        box-shadow:
            3px 0 0
            rgba(0,234,255,0.58),
            -3px 0 0
            rgba(255,0,72,0.68),
            0 12px 28px
            rgba(0,0,0,0.38)
            !important;
    }
}

@media (max-width: 991.98px) {
    #mix365DesktopVideoActions,
    #desktopStatsBtn {
        display: none !important;
    }
}

@keyframes mix365CleanActionGlitch {
    0% {
        transform: translate(0);
    }

    25% {
        transform:
            translate(-3px,1px)
            skewX(-1deg);
    }

    50% {
        transform:
            translate(4px,-1px)
            skewX(1deg);
    }

    75% {
        transform:
            translate(-2px,0);
    }

    100% {
        transform: translate(0);
    }
}

/* MIX365_CLEAN_EQUAL_VIDEO_BAR_END */

/* MIX365_DESKTOP_LIVE_ONLY_CONTROLS_START */

/*
 * Stats and Track ID are live-only controls.
 */

body.mix365-native-live-active
.mix365-desktop-live-only-hidden {
    display: none !important;

    flex: 0 0 0 !important;

    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;

    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    overflow: hidden !important;
}

/* MIX365_DESKTOP_LIVE_ONLY_CONTROLS_END */


/* MIX365_EXACT_CHAT_ALIGNMENT_START */

@media (min-width: 992px) {

    body.mix365-native-live-active
    #mix365LiveNativeApp
    .live-chat-card {
        display: flex !important;
        flex-direction: column !important;

        box-sizing: border-box !important;

        height:
            var(
                --mix365-exact-chat-card-height,
                auto
            )
            !important;

        min-height:
            var(
                --mix365-exact-chat-card-height,
                0
            )
            !important;

        max-height:
            var(
                --mix365-exact-chat-card-height,
                none
            )
            !important;

        margin-bottom: 0 !important;
        overflow: hidden !important;
    }

    body.mix365-native-live-active
    #mix365LiveNativeApp
    .live-chat-card
    .live-card-header {
        flex: 0 0 auto !important;
    }

    body.mix365-native-live-active
    #mix365LiveNativeApp
    .live-chat-mount {
        flex: 0 0 auto !important;

        box-sizing: border-box !important;

        width: 100% !important;

        height:
            var(
                --mix365-exact-chat-mount-height,
                540px
            )
            !important;

        min-height:
            var(
                --mix365-exact-chat-mount-height,
                540px
            )
            !important;

        max-height:
            var(
                --mix365-exact-chat-mount-height,
                540px
            )
            !important;

        margin-bottom: 0 !important;
        overflow: hidden !important;
    }
}

@media (max-width: 991.98px) {

    body.mix365-native-live-active
    #mix365LiveNativeApp
    .live-chat-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
}

/* MIX365_EXACT_CHAT_ALIGNMENT_END */

/* MIX365_TIDY_CHAT_LAYOUT_START */

/*
 * Compact chat layout while retaining:
 *
 * Public / DJ Chat / Private
 * Full screen
 * Browser popout
 * Translate
 * Clean Chat
 * Attachments
 * Message composer
 * Text the Studio
 */

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border:
        1px solid
        rgba(255,255,255,0.10)
        !important;

    background:
        linear-gradient(
            180deg,
            rgba(15,17,19,0.97),
            rgba(4,5,6,0.99)
        )
        !important;

    box-shadow:
        0 22px 58px
        rgba(0,0,0,0.38)
        !important;
}

/*
 * Top row:
 *
 * Public | DJ Chat | Private        ⛶ ↗ ⚙
 */

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix365-chat-topbar {
    position: relative;
    z-index: 30;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 8px;

    flex: 0 0 auto;

    width: 100%;

    margin: 0;
    padding: 8px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.09);

    background:
        rgba(7,8,9,0.96);
}

/*
 * Three chat modes occupy the available width.
 */

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix365-chat-tabs-slot {
    min-width: 0;
}

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix365-chat-tabs-slot
.mix-chat__modebar {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr))
        !important;

    align-items: stretch !important;

    gap: 6px !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
}

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix-chat__modebtn {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 6px !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    margin: 0 !important;
    padding: 7px 8px !important;

    border:
        1px solid
        rgba(255,255,255,0.12)
        !important;

    border-radius: 0 !important;

    background:
        linear-gradient(
            145deg,
            rgba(39,42,46,0.88),
            rgba(10,11,12,0.96)
        )
        !important;

    color:
        rgba(255,255,255,0.78)
        !important;

    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0.035em !important;

    text-transform: uppercase;
    white-space: nowrap !important;
}

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix-chat__modebtn.is-active,
body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix-chat__modebtn.active,
body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix-chat__modebtn[aria-selected="true"] {
    border-color:
        rgba(102,252,241,0.60)
        !important;

    background:
        linear-gradient(
            135deg,
            #64eee3,
            #17bcb1
        )
        !important;

    color:
        #041211
        !important;
}

/*
 * Fullscreen, browser popout and Settings.
 */

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix365-chat-actions-slot {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 6px;

    flex: 0 0 auto;
}

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix365-chat-actions-slot
.mix-chat__popoutbar {
    display: flex !important;

    align-items: center !important;
    justify-content: flex-end !important;

    gap: 6px !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix365-chat-actions-slot
.mix-chat__popout-toggle,
body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix365-chat-settings-toggle {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    border:
        1px solid
        rgba(255,255,255,0.14)
        !important;

    border-radius: 0 !important;

    background:
        linear-gradient(
            145deg,
            rgba(42,45,49,0.94),
            rgba(10,11,12,0.98)
        )
        !important;

    color: #ffffff !important;

    clip-path: polygon(
        5px 0,
        100% 0,
        100% calc(100% - 5px),
        calc(100% - 5px) 100%,
        0 100%,
        0 5px
    );

    font-size: 12px !important;

    cursor: pointer;

    box-shadow:
        0 8px 20px
        rgba(0,0,0,0.24)
        !important;
}

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix365-chat-actions-slot
.mix-chat__popout-toggle span,
body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix365-chat-settings-toggle span {
    display: none !important;
}

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix365-chat-actions-slot
button:hover,
body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix365-chat-actions-slot
button:focus-visible {
    border-color:
        rgba(255,0,72,0.62)
        !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,0,72,0.94),
            rgba(103,0,31,0.98)
        )
        !important;

    outline: none !important;
}

/*
 * Translate and Clean Chat become a settings dropdown.
 */

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix365-chat-settings-panel {
    position: absolute;
    z-index: 200;

    top: 54px;
    right: 8px;

    display: none;

    width:
        min(
            340px,
            calc(100% - 16px)
        );

    max-height: 330px;

    margin: 0;
    padding: 12px;

    overflow: auto;

    border:
        1px solid
        rgba(255,0,72,0.32);

    background:
        linear-gradient(
            145deg,
            rgba(35,38,42,0.99),
            rgba(5,6,7,0.995)
        );

    clip-path: polygon(
        9px 0,
        100% 0,
        100% calc(100% - 9px),
        calc(100% - 9px) 100%,
        0 100%,
        0 9px
    );

    box-shadow:
        0 26px 70px
        rgba(0,0,0,0.62);
}

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix365-chat-settings-panel.is-open {
    display: block;
}

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix365-chat-settings-panel
.mix-chat__toolbar {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr))
        !important;

    align-items: end !important;

    gap: 10px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
}

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix-chat__toolbar label {
    display: flex !important;
    flex-direction: column !important;

    gap: 5px !important;

    min-width: 0;

    color:
        rgba(255,255,255,0.72)
        !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;

    text-transform: uppercase;
}

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix-chat__toolbar select,
body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix-chat__toolbar input {
    width: 100% !important;
    min-width: 0 !important;

    height: 38px !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 6px 9px !important;

    border:
        1px solid
        rgba(255,255,255,0.13)
        !important;

    border-radius: 0 !important;

    background: #08090a !important;
    color: #ffffff !important;

    font-size: 11px !important;
}

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix-chat__toolbar
> :last-child {
    grid-column:
        1 / -1;

    margin-top: 2px !important;

    color:
        rgba(255,255,255,0.52)
        !important;

    font-size: 9px !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

/*
 * Private-user picker stays available directly below the
 * compact top bar, but only appears when its existing code
 * chooses to display it.
 */

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix-chat__privatebar {
    flex: 0 0 auto;

    width: 100% !important;

    margin: 0 !important;
    padding: 8px !important;

    border-bottom:
        1px solid
        rgba(255,255,255,0.08);

    background:
        rgba(8,9,10,0.94);
}

/*
 * Give the actual messages most of the available space.
 */

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix-chat__body {
    flex:
        1
        1
        auto
        !important;

    min-height: 180px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 10px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    background:
        linear-gradient(
            180deg,
            rgba(22,24,27,0.70),
            rgba(10,11,12,0.92)
        )
        !important;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(255,0,72,0.62)
        rgba(255,255,255,0.04);
}

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix-chat__empty,
body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix-chat__private-empty {
    color:
        rgba(255,255,255,0.58)
        !important;

    font-size: 12px !important;
    line-height: 1.45 !important;

    padding: 18px !important;
}

/*
 * New-message notification remains available but compact.
 */

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix-chat__newbar {
    flex: 0 0 auto;

    margin: 0 !important;
}

/*
 * Composer:
 *
 * + | Type a message | Send
 */

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix-chat__composer {
    flex: 0 0 auto !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border-top:
        1px solid
        rgba(255,255,255,0.09);

    background:
        rgba(5,6,7,0.98);
}

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix-chat__compose {
    order: 10 !important;

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 9px !important;

    border: 0 !important;
    background: transparent !important;
}

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix-chat__compose
input,
body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix-chat__compose
textarea {
    flex:
        1
        1
        auto
        !important;

    width: auto !important;
    min-width: 0 !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 90px !important;

    margin: 0 !important;
    padding: 8px 10px !important;

    border:
        1px solid
        rgba(255,255,255,0.13)
        !important;

    border-radius: 0 !important;

    background: #050607 !important;
    color: #ffffff !important;

    font-size: 12px !important;
}

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix-chat__compose
button {
    flex: 0 0 40px !important;

    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 0 !important;
}

/*
 * Text the Studio stays visible as a slim bottom strip.
 */

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy
.mix-chat__studio-text {
    order: 20 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 38px !important;

    margin: 0 !important;
    padding: 8px 10px !important;

    border:
        0
        !important;

    border-top:
        1px solid
        rgba(102,252,241,0.26)
        !important;

    border-radius: 0 !important;

    background:
        linear-gradient(
            135deg,
            rgba(20,89,91,0.48),
            rgba(7,31,34,0.72)
        )
        !important;

    box-shadow: none !important;

    color: #ffffff !important;

    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 0.025em !important;

    white-space: nowrap !important;
}

/*
 * Full-screen mode keeps the top controls accessible.
 */

.live-chat-mount.mix365-chat-popout-mount
.mix-chat.mix365-chat-tidy
.mix365-chat-topbar {
    position: sticky;
    top: 0;

    z-index: 2147483646;
}

/*
 * Guests still follow the original rule that hides modes they
 * are not permitted to use.
 */

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy.is-guest
.mix365-chat-tabs-slot {
    display: none;
}

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy.is-guest
.mix365-chat-topbar {
    grid-template-columns: 1fr;
}

body.mix365-native-live-active
.mix-chat.mix365-chat-tidy.is-guest
.mix365-chat-actions-slot {
    justify-self: end;
}

/*
 * Mobile remains compact, with the same functions.
 */

@media (max-width: 575.98px) {

    body.mix365-native-live-active
    .mix-chat.mix365-chat-tidy
    .mix365-chat-topbar {
        gap: 6px;
        padding: 6px;
    }

    body.mix365-native-live-active
    .mix-chat.mix365-chat-tidy
    .mix-chat__modebar {
        gap: 4px !important;
    }

    body.mix365-native-live-active
    .mix-chat.mix365-chat-tidy
    .mix-chat__modebtn {
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;

        padding: 6px 4px !important;

        font-size: 9px !important;
    }

    body.mix365-native-live-active
    .mix-chat.mix365-chat-tidy
    .mix-chat__popout-toggle,
    body.mix365-native-live-active
    .mix-chat.mix365-chat-tidy
    .mix365-chat-settings-toggle {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;

        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
    }

    body.mix365-native-live-active
    .mix-chat.mix365-chat-tidy
    .mix365-chat-settings-panel {
        top: 48px;
        right: 6px;

        width:
            calc(100% - 12px);
    }

    body.mix365-native-live-active
    .mix-chat.mix365-chat-tidy
    .mix-chat__body {
        padding: 8px !important;
    }

    body.mix365-native-live-active
    .mix-chat.mix365-chat-tidy
    .mix-chat__compose {
        padding: 7px !important;
    }

    body.mix365-native-live-active
    .mix-chat.mix365-chat-tidy
    .mix-chat__studio-text {
        font-size: 9px !important;
    }
}

/* MIX365_TIDY_CHAT_LAYOUT_END */