/* 移动端专属样式 - 视口宽度 <= 768px */
@media (max-width: 768px) {
    /* 移动端侧边栏样式 - 悬浮抽屉 */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        height: 100dvh;
        width: 260px;
        z-index: 1030;
        transform: translateX(-100%);
        transition: transform 300ms ease;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    /* 移动端遮罩层 */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1025;
        opacity: 0;
        visibility: hidden;
        transition: opacity 300ms ease, visibility 300ms ease;
    }

    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* 移动端主内容区 */
    .main-content,
    #assets-content,
    #enhancer-content {
        margin-left: 0 !important;
        margin-top: 64px;
    }

    /* 移动端顶部导航栏 */
    .top-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        background-color: var(--background);
        z-index: 50;
        border-bottom: 1px solid var(--border);
    }

    .top-header-left,
    .top-header-right {
        flex: 1;
        display: flex;
        align-items: center;
    }

    .top-header-left {
        margin-left: -8px;
    }

    .top-header-right {
        justify-content: flex-end;
    }

    .top-header-center {
        flex: 0 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* 移动端侧边栏触发按钮 - 与桌面端 sidebar-trigger 样式一致 */
    .sidebar-trigger-mobile {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 350;
        white-space: nowrap;
        border-radius: 6px;
        border: 1px solid transparent;
        background-color: transparent;
        color: var(--muted-foreground);
        width: 36px;
        height: 36px;
        outline: none;
        cursor: pointer;
        transition: all 200ms ease;
    }

    .sidebar-trigger-mobile:hover {
        background-color: var(--accent);
        color: var(--accent-foreground);
    }

    .sidebar-trigger-mobile:focus-visible {
        outline: none;
        border-color: var(--ring);
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
    }

    .sidebar-trigger-mobile svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        pointer-events: none;
        filter: brightness(0) saturate(100%) invert(100%);
    }

    /* 移动端模型选择器显示 */
    #topModelSelectorContainerDesktop {
        display: none !important;
    }

    #topModelSelectorContainerMobile {
        display: block;
        position: relative;
        z-index: 200;
    }

    /* 移动端 PromptBox — 内联在滚动区域底部 */

    /* 移动端容器样式 */
    .container {
        padding: 0 16px;
        padding-bottom: 24px;
        justify-content: center;
        box-sizing: border-box;
    }

    /* 移动端图片区域 */
    .image-section {
        min-height: 0;
        flex: 1;
        justify-content: center;
        gap: 16px;
    }

    .header {
        gap: 8px;
    }

    .icon {
        width: 28px;
        height: 28px;
    }

    .title {
        font-size: 24px;
        margin-top: 2px;
    }

    .image-card {
        width: 76px;
        padding: 10px;
        margin-left: -10px;
        border-radius: 8px;
    }
}