/* =========================================================
   轻影 · 三视图路由样式（nav.js）
   核心思想：三个视图（home / search / play）是 body 下的互斥容器，
   同一时刻只有一个可见，靠 [hidden] 属性切换。
   全局 chrome（顶栏 / 底栏）不属于任何视图，用 data-view 控制显隐。
   这样彻底消除了旧版"首页内容块在播放页残留占位 → 黑块"的问题。
   ========================================================= */

/* ── 三视图容器：默认块级，[hidden] 时彻底退出文档流 ─────────────── */
#viewHome,
#viewSearch,
#viewPlay {
    display: block;
    width: 100%;
    min-height: 100vh;
}
#viewHome[hidden],
#viewSearch[hidden],
#viewPlay[hidden] {
    display: none !important;
}

/* ── 全局 chrome 显隐 ─────────────────────────────────────────────
   顶栏 appHeader 与底栏 bottomNav 是全局 UI：
     · 首页 / 搜索页都要显示（顶栏有搜索框，底栏可切区）
     · 播放页隐藏（沉浸式观影）
   频道 tab #hotCats 只在首页有意义，搜索页隐藏。 */
html[data-view="play"] #appHeader,
html[data-view="play"] #bottomNav {
    display: none !important;
}
html[data-view="search"] #hotCats {
    display: none;
}

/* 播放视图脱离文档流铺满，避免与全局 chrome 叠加 */
html[data-view="play"] #viewPlay {
    position: relative;
    z-index: 1;
}