/* Loaded LAST - all floating UI must sit above the desktop discover rail */

#ted-overlay-root {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
    isolation: isolate;
}

#ted-overlay-root > .platform-picker-modal.is-open,
#ted-overlay-root > .pwa-launch-modal.open,
#ted-overlay-root > .pwa-install-banner:not([hidden]),
#ted-overlay-root > .new-message-modal.open,
#ted-overlay-root > .dm-call-root:not([hidden]) {
    pointer-events: auto;
}

/* Desktop discover rail is layout chrome, never an overlay layer */
@media (min-width: 1101px) {
    .right-panel,
    .trending-panel,
    .trends-card,
    .trends-search-wrap {
        z-index: 0 !important;
        position: sticky;
    }

    .right-panel,
    .trending-panel {
        top: 0;
    }

    .layout-grid {
        z-index: 0 !important;
        isolation: isolate;
    }

    html:has(#ted-overlay-root .pwa-push-banner:not([hidden])) .right-panel,
    html:has(#ted-overlay-root .pwa-push-banner:not([hidden])) .trending-panel,
    html.platform-picker-open .right-panel,
    html.platform-picker-open .trending-panel {
        pointer-events: none !important;
    }
}

/* Push / install prompts */
.pwa-push-banner,
.pwa-install-banner {
    position: fixed !important;
    z-index: 2147483001 !important;
    left: 12px;
    right: 12px;
    bottom: calc(var(--nav-mobile) + 12px + env(safe-area-inset-bottom, 0));
    pointer-events: none;
}

.pwa-push-banner:not([hidden]),
.pwa-install-banner:not([hidden]) {
    pointer-events: auto;
}

@media (min-width: 1101px) {
    .pwa-push-banner,
    .pwa-install-banner {
        left: calc(var(--shell-gutter, 0px) + var(--rail-width, 275px) + 16px) !important;
        right: auto !important;
        bottom: 24px !important;
        width: min(420px, calc(var(--feed-width, 600px) - 32px)) !important;
        max-width: min(420px, calc(var(--feed-width, 600px) - 32px)) !important;
    }
}

/* Mobile: full-width above bottom nav, no right rail */
@media (max-width: 1100px) {
    .pwa-push-banner,
    .pwa-install-banner {
        left: max(12px, env(safe-area-inset-left, 0px)) !important;
        right: max(12px, env(safe-area-inset-right, 0px)) !important;
        bottom: calc(var(--nav-mobile) + 12px + env(safe-area-inset-bottom, 0)) !important;
        width: auto !important;
        max-width: none !important;
    }
}

html.ted-raid-alert-open,
html.ted-raid-alert-open body {
    overflow: hidden;
}

.ted-raid-alert-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: rgba(120, 0, 0, 0.72);
    backdrop-filter: blur(4px);
    animation: tedRaidOverlayPulse 1.2s ease-in-out infinite;
}

.ted-raid-alert-card {
    width: min(100%, 420px);
    border-radius: 18px;
    padding: 24px 20px;
    background: linear-gradient(180deg, #2a0b0b 0%, #120404 100%);
    border: 1px solid rgba(255, 80, 80, 0.45);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    text-align: center;
    color: #fff;
}

.ted-raid-alert-badge {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.ted-raid-alert-title {
    margin: 0 0 10px;
    font-size: clamp(22px, 5vw, 28px);
    line-height: 1.15;
}

.ted-raid-alert-body {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 16px;
    line-height: 1.4;
}

.ted-raid-alert-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.ted-raid-alert-actions .btn {
    min-width: 132px;
}

@keyframes tedRaidOverlayPulse {
    0%, 100% { background-color: rgba(120, 0, 0, 0.72); }
    50% { background-color: rgba(170, 10, 10, 0.82); }
}

/* Mobile drawer — must sit above header, bottom nav, push banners, and feed */
@media (max-width: 1100px) {
    .mobile-sidebar-panel {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147483200 !important;
        display: none;
        margin: 0 !important;
        padding: 0 !important;
        padding-top: env(safe-area-inset-top, 0) !important;
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
        background: #000000 !important;
        overflow: hidden;
        isolation: isolate;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.18s ease, visibility 0.18s ease;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-sidebar-panel.open {
        display: block !important;
        pointer-events: auto;
        opacity: 1;
        visibility: visible;
        overflow-y: auto;
    }

    .mobile-sidebar-content {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 100%;
        min-height: 100%;
        background: #000000;
    }

    .mobile-sidebar-close {
        z-index: 3;
    }

    html.mobile-menu-open,
    body.mobile-menu-open {
        overflow: hidden !important;
        overscroll-behavior: none;
        touch-action: none;
        height: 100%;
    }

    body.mobile-menu-open .page,
    body.mobile-menu-open .layout-grid,
    body.mobile-menu-open .main-content,
    body.mobile-menu-open .portal-main-content,
    body.mobile-menu-open .mobile-header,
    body.mobile-menu-open .mobile-nav,
    body.mobile-menu-open #ted-overlay-root,
    body.mobile-menu-open .pwa-push-banner,
    body.mobile-menu-open .pwa-install-banner,
    body.mobile-menu-open .toast-share,
    body.mobile-menu-open .ted-raid-alert-overlay {
        visibility: hidden !important;
        pointer-events: none !important;
    }
}