/* —— 统一底色：与 Compose AdaptiveViewport 外层底色一致 —— */
:root {
    --page-bg: #f2f2f7; /* 对应 Color(0xFFF2F2F7) */
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--page-bg);
}

/* —— 移动端（或窄屏）默认：铺满整个浏览器 —— */
body {
    overflow: hidden; /* 避免与内部滚动冲突 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#ComposeTarget {
    position: fixed;
    inset: 0;
    display: block;

    width: 100vw;
    height: 100vh; /* 回退 */
    background: var(--page-bg);
    outline: none;

    /* 只允许纵向手势，阻断滚动链，移动端更顺滑 */
    touch-action: pan-y;
    overscroll-behavior: contain;

    /* 刘海/底部条安全区 */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

@supports (height: 100dvh) { #ComposeTarget { height: 100dvh; } }
@supports (-webkit-touch-callout: none) { #ComposeTarget { height: -webkit-fill-available; } }

/* —— 宽屏（PC/大屏）时：模拟手机视图（固定 390×844），浏览器不足则出现滚动条 —— */
@media (min-width: 768px) {
    html, body {
        height: auto;
        min-height: 100vh;
        background: var(--page-bg);
    }
    body {
        overflow: auto; /* 需要时显示滚动条 */
    }
    #ComposeTarget {
        position: relative;   /* 不再覆盖全屏，由页面滚动承接 */
        inset: auto;
        width: 390px;         /* 固定“手机”宽度 */
        height: 844px;        /* 固定“手机”高度 */
        margin: 0 auto;       /* 水平居中 */
        background: var(--page-bg);
        touch-action: auto;   /* PC 不需要手势拦截 */
        overscroll-behavior: auto;
        padding: 0;           /* PC 不需要安全区 padding */
    }
}