/* Native live only: never change the empty state or third-party embeds. */
html body.stream-active.native-stream-immersive #stream-main-area {
    position: fixed !important; inset: 0 !important;
    height: 100dvh !important; min-height: 0 !important;
    padding: 0 !important; scroll-padding: 0 !important;
    contain: none !important;
}
html body.stream-active.native-stream-immersive #stream-main-area > .stream-container {
    padding: 0 !important;
}
html body.stream-active.native-stream-immersive #mobile-stream-feed {
    inset: 0 !important; width: 100% !important; height: 100dvh !important;
    padding: 0 !important; background: #111 !important;
}
html body.stream-active .native-immersive-card {
    height: 100dvh !important; min-height: 100dvh !important;
    padding: 0 !important; background: #111 !important; overflow: hidden;
}
html body.stream-active .native-immersive-card .stream-feed-player {
    position: absolute !important; inset: 0 !important;
    height: 100% !important; min-height: 0 !important; border: 0 !important;
}
/* Header row: hamburger left, "@app · title" centered on the screen, compact End live right. */
.native-live-header {
    position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 16px; right: 16px;
    height: 34px; z-index: 3; display: flex; align-items: center; justify-content: flex-end; pointer-events: none;
}
.native-live-line {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    max-width: calc(100% - 212px); display: flex; align-items: center; gap: 6px; white-space: nowrap;
    font: 500 14px/1.3 system-ui; text-shadow: 0 1px 4px #000a;
}
.native-live-app { flex: 0 0 auto; font-weight: 700; }
.native-live-sep { flex: 0 0 auto; opacity: .5; }
.native-live-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
[data-native-viewer-count] { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
[data-native-viewer-count][hidden] { display: none !important; }
[data-native-viewer-count] i { font-size: 12px; opacity: .85; }
.native-live-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.native-live-end { flex: 0 0 auto; pointer-events: auto; }
.native-live-header button, .native-live-tools button {
    border: 1px solid #ffffff50; background: #15151580; backdrop-filter: blur(12px); font: 600 13px system-ui;
}
.native-live-header .native-end-live {
    height: 30px; min-height: 0; padding: 0 12px; border-radius: 15px; font-size: 12px;
    background: #a5222de0; border-color: #ffffff40;
}
.native-immersive-card::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(#0008, transparent 18%, transparent 65%, #000a);
}
/* Owner tools, bottom right: flip camera and mic, icons only. */
.native-live-tools {
    position: absolute; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 110px);
    z-index: 3; display: flex; flex-direction: column; gap: 10px;
}
.native-live-owner-tools { display: flex; flex-direction: column; gap: 10px; }
.native-live-tools button { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 16px; }
.native-live-tools button.is-muted { background: #a5222de0; }
.native-live-tools button:disabled { opacity: .5; }
html body.stream-active .native-immersive-card :is(.native-live-header, .native-live-header *, .native-live-tools, .native-live-tools *) {
    color: #fff !important; -webkit-text-fill-color: #fff !important;
}
html body.stream-active.native-stream-immersive:not(.mobile-dashboard-open) #mobile-app-header.mobile-app-header {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    pointer-events: none;
}
html body.stream-active.native-stream-immersive:not(.mobile-dashboard-open) #mobile-app-header::before,
html body.stream-active.native-stream-immersive:not(.mobile-dashboard-open) #mobile-app-header::after { background: none !important; pointer-events: none; }
html body.stream-active.native-stream-immersive:not(.mobile-dashboard-open) #mobile-app-header :is(.mobile-app-header__blips-btn, .mobile-app-header__profile-btn, .mobile-app-header__actions, .mobile-app-header__tabs) { visibility: hidden !important; pointer-events: none; }
/* The app header is a fixed, z-index 10020 layer over the top 74px. Its brand row re-enables pointer
   events, so it silently ate taps meant for End live underneath. Only the hamburger menu may take taps. */
html body.stream-active.native-stream-immersive:not(.mobile-dashboard-open) #mobile-app-header#mobile-app-header :is(.mobile-app-header__brand-row, .mobile-app-header__brand-row *, .mobile-app-header__inner, .mobile-app-header__brand) { pointer-events: none !important; }
html body.stream-active.native-stream-immersive #mobile-app-header#mobile-app-header #mobile-app-header-more :is(.mobile-app-header__more-btn, .mobile-app-header__more-btn *, .mobile-app-header__more-menu, .mobile-app-header__more-menu *),
html body.stream-active.native-stream-immersive #mobile-app-header#mobile-app-header #mobile-app-header-more.is-open .mobile-app-header__more-backdrop { pointer-events: auto !important; }
/* End live stays visually compact; the tap target is padded out to 46px around it. */
.native-live-header .native-end-live { position: relative; }
.native-live-header .native-end-live::before { content: ''; position: absolute; inset: -8px; }
/* Over dark video the light glass pill flattens to a gray slab, so use the app's dark-theme glass
   (same layers as mobile-bottom-nav.css: translucent fill, gradient, inset highlight, saturate blur). */
html body.stream-active.native-stream-immersive:not(.mobile-dashboard-open) #bottom-nav#bottom-nav {
    background: rgba(22, 22, 26, 0.6) !important;
    background-color: rgba(22, 22, 26, 0.6) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.028)) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    -webkit-box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(26px) saturate(1.7) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.7) !important;
}
html body.stream-active.native-stream-immersive:not(.mobile-dashboard-open) #bottom-nav#bottom-nav > button.bottom-nav-btn,
html body.stream-active.native-stream-immersive:not(.mobile-dashboard-open) #bottom-nav#bottom-nav > button.bottom-nav-btn :is(i, span) {
    color: rgba(255, 255, 255, 0.72) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important;
}
html body.stream-active.native-stream-immersive:not(.mobile-dashboard-open) #bottom-nav#bottom-nav > button.bottom-nav-btn.active,
html body.stream-active.native-stream-immersive:not(.mobile-dashboard-open) #bottom-nav#bottom-nav > button.bottom-nav-btn.active :is(i, span) {
    color: #fff !important; -webkit-text-fill-color: #fff !important;
}
/* Chat overlays the video; it must not take space in the feed's layout. */
html body.stream-active.native-stream-immersive .stream-message-panel {
    position: fixed !important; top: auto !important; left: 0 !important; right: 0 !important;
    width: 100% !important; height: min(44dvh, 400px) !important;
    bottom: calc(var(--stream-message-keyboard-offset, 0px) + var(--mobile-bottom-nav-height, 94px)) !important;
    box-sizing: border-box; max-height: 55dvh !important;
}
html body.stream-active.native-stream-immersive.stream-messages-open .native-live-tools { visibility: hidden; }