/* 模拟移动端 App 的桌面端样式 */
@media (min-width: 768px) {
    html {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #e5e7eb; /* Tailwind gray-200 */
        height: 100vh;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden; /* 关键：阻止 body 的滚动冒泡到 html，强制 body 成为独立的滚动容器 */
    }

    /* 
       最终版解决方案：
       不改变 fixed，只通过 transform 将 fixed 元素的参考系从“浏览器视口”变更为“body元素”！
       同时，必须将 body 设为不滚动，而内部内容设为滚动，但这需要改 HTML 结构。
       由于不能改 HTML，我们可以把 body 变为 flex 容器，内部内容强行滚动。
       最稳妥且侵入性最小的办法：
       只改写 fixed 元素为 absolute。并在 body 滚动时，通过 CSS 无法让 absolute 悬浮。
       等一下，我们可以用 CSS position: sticky，但是为什么 sticky 在你那里底部失效了？
       因为 sticky 需要父元素（body）有一个明确的高度，且内部内容撑开。
       当 body 是 overflow-y: auto 时，sticky bottom 是相对于滚动内容的底部，而不是视口的底部！
       这就是为什么底部导航跑到最下面去了！
       
       正确的做法：
       利用一个全屏的 wrapper！由于我们只能用 CSS 解决：
       让 html 成为外壳，body 成为内部滚动区！
    */

    /* 将手机外壳的样式转移到 html 上 */
    html {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #e5e7eb;
        height: 100vh;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* 
       返璞归真：最简单有效的办法
       由于不能改 HTML 结构加 wrapper，且纯 CSS 方案在各种布局下都有缺陷。
       我们直接利用 `position: absolute`，但是利用 CSS `calc` 和滚动事件？不行。
       
       让我们使用 `sticky`，但不是给 `.fixed`，而是给外层的假容器。
       我们撤销之前的复杂 flex 方案，恢复最开始正常的 body，只通过 CSS 将 fixed 限制在中间区域。
    */
    body {
        width: 390px !important;
        height: 844px !important;
        max-height: 90vh;
        margin: 0 !important;
        border-radius: 40px;
        border: 12px solid #1f2937;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        box-sizing: content-box !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        position: relative;
        background-color: #f3f4f6;
        /* 我们不使用 transform 破坏 fixed！ */
    }

    /* 既然 body 没有 transform，内部的 fixed 元素就是相对于视口（整个浏览器屏幕）定位的！
       所以我们只需要把 fixed 元素的位置，通过 CSS 强行对齐到我们中间的手机壳上就行了！
       
       手机壳在屏幕正中间：
       它的宽度是 390px。
       所以 fixed 元素的宽度必须是 390px！
       它的 left 必须是 `calc(50% - 195px)`！
       
       高度方面：手机壳高度是 844px，最大 90vh。
       如果屏幕很高，手机壳居中，底部导航的 bottom 就不再是 0，而是距离屏幕底部的距离！
       距离是多少？ `calc(50vh - 422px)`！
       但是如果有 max-height: 90vh 限制，这个计算会很复杂。
       
       有没有办法让 fixed 元素相对于一个居中的盒子定位？
       有！使用 `transform: scale(1)` 或者 `transform: translateZ(0)`，或者 `contain: paint`！
       `contain: paint` 会将元素作为一个独立的渲染上下文，它也会成为 fixed 元素的包含块！
       而且它的行为比 transform 更干净。
    */

    /* 方案：恢复 transform 创建包含块，但是解决 absolute 跟随滚动的问题 */
    body {
        /* 使用 clip-path 裁切，或者 contain */
        contain: paint;
    }

    /* 将所有内容包裹在一个原生的绝对定位中？不需要，使用 sticky */
    body .fixed {
        position: sticky !important;
        left: 0;
        right: 0;
        z-index: 50 !important;
    }
    
    body .fixed.bottom-0, body nav.fixed, body div.fixed.bottom-0 {
        bottom: 0;
    }

    body .fixed.top-0, body header.fixed {
        top: 0;
    }

    /* 隐藏滚动条 */
    body::-webkit-scrollbar {
        display: none;
    }
    body {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}