/* 响应式设计 - 移动端优化 */

/* ========== 1. 默认隐藏移动端元素 ========== */
.mobile-selectors {
    display: none; /* 默认隐藏，在移动端@media中显示 */
}

.panel-overlay,
.aspect-ratio-panel,
.count-panel {
    display: none !important;
}

/* ========== 2. 平板端（768-1024px） ========== */
@media (max-width: 1024px) {
    .main-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .input-panel {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        height: auto;
        max-height: 60vh;
    }
}

/* ========== 3. 移动端核心布局优化 ========== */
@media (max-width: 768px) {
    /* 统一舞台高度变量 - 确保三个模式静默状态高度一致 */
    :root {
        --mode-stage-min-height: 280px;
        --mobile-selectors-slot-height: 64px;
    }

    /* 防止页面拖动和放大 - 原生App体验 */
    html, body {
        touch-action: pan-y !important;  /* 只允许垂直滚动 */
        overflow-x: hidden !important;  /* 防止横向滚动 */
        -webkit-overflow-scrolling: touch !important;  /* 平滑滚动 */
        overscroll-behavior: none !important;  /* 禁用弹性滚动 */
    }

    /* 全局移除移动端触控高亮 - 防止白线闪烁 */
    button,
    a,
    input,
    textarea,
    select {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
    }

    /* 取消二分屏，改为全屏滚动 */
    .main-container {
        display: block !important;
        height: auto !important;
        overflow-y: auto !important;
        padding: 0 !important; /* 移除主容器padding */
        gap: 0 !important;
    }

    /* 输入面板：扁平化，取消所有装饰 */
    .input-panel {
        position: relative !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        border: none !important; /* 移除边框 */
        border-radius: 0 !important; /* 移除圆角 */
        box-shadow: none !important;
        background: var(--background) !important; /* 使用纯背景色 */
        padding: 16px 12px 20px !important; /* 最小边距 */
        margin-bottom: 0 !important;
    }

    /* 移除输入面板的伪元素装饰 */
    .input-panel::before {
        display: none !important;
    }

    /* 取消hover效果 */
    .input-panel:hover {
        border: none !important;
        box-shadow: none !important;
    }

    .panel-content {
        padding: 0 !important; /* 移除内边距 */
    }

    /* 历史面板：完全扁平化，无装饰 */
    .output-panel {
        position: relative !important;
        height: auto !important;
        overflow-y: visible !important;
        border: none !important; /* 移除所有边框 */
        border-radius: 0 !important; /* 移除圆角 */
        box-shadow: none !important; /* 移除阴影 */
        background: transparent !important; /* 完全透明 */
        padding: 0 !important; /* 移除padding */
    }

    /* 移除输出面板的伪元素装饰 */
    .output-panel::before {
        display: none !important;
    }

    /* 取消hover效果 */
    .output-panel:hover {
        border: none !important;
        box-shadow: none !important;
    }

    /* 输出内容区：最小边距 */
    .output-content {
        height: auto !important;
        overflow-y: visible !important;
        padding: 12px !important; /* 只保留12px边距 */
    }

    .history-list {
        height: auto !important;
        overflow-y: visible !important;
        gap: 16px !important; /* 卡片间距 */
    }

    /* 任务卡片：简化padding，现代设计 */
    .task-card {
        padding: 16px 12px !important; /* 减小padding */
        margin-bottom: 0 !important;
        border-radius: 12px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; /* 轻量阴影 */
        background: var(--surface) !important;
    }

    /* 取消任务卡片的hover效果（移动端不需要） */
    .task-card:hover {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
        transform: none !important;
    }

    /* 任务图片容器：移除多余padding */
    .task-images {
        margin-bottom: 12px !important;
    }

    /* ========== 4. 模式选择器优化（下划线样式） ========== */
    .mode-selector {
        background: transparent !important;
        padding: 8px 0 !important;
        border-radius: 0 !important;
        gap: 0 !important;
    }

    .mode-btn {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        position: relative;
        border-bottom: 2px solid transparent !important;
        transition: color 0.2s ease, background 0.2s ease;
        /* 禁用移动端触控高亮 - 修复白线闪烁 */
        -webkit-tap-highlight-color: transparent !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        outline: none !important;
    }

    .mode-btn.active {
        background: transparent !important;
        border-bottom: 2px solid var(--primary-blue) !important;
        color: var(--primary-blue) !important;
    }

    .mode-btn:hover {
        background: rgba(68, 147, 248, 0.05) !important;
    }

    /* ========== 5. 表单优化 ========== */
    /* 移除"图片描述"标题 */
    .form-group label {
        display: none;
    }

    /* 增加输入框高度 */
    .form-group textarea {
        min-height: 100px !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    /* 隐藏PC端的分辨率和数量选择器 */
    .aspect-ratio-selector,
    .number-selector {
        display: none !important;
    }

    /* 移动端折叠选择框容器 */
    .mobile-selectors {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin: 12px 0 6px 0 !important;  /* 减少下方间距，让生成按钮更近 */
    }

    /* 折叠选择框样式 - 一行显示 */
    .mobile-select-btn {
        background: var(--surface);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 10px 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        color: var(--text-primary);
        cursor: pointer;
        transition: all 0.2s ease;
        min-height: 42px;
        gap: 6px;
    }

    .mobile-select-btn:active {
        transform: scale(0.98);
        background: var(--surface-hover);
    }

    .mobile-select-btn .content {
        flex: 1;
        text-align: left;
        font-weight: 500;
        font-size: 14px;
    }

    .mobile-select-btn .icon {
        margin-left: 6px;
        opacity: 0.5;
        font-size: 12px;
        flex-shrink: 0;
    }

    /* 遮罩层 - 半透明 */
    /* 轻量级遮罩 - 半透明，点击关闭 */
    .panel-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(5, 5, 5, 0.45);
        z-index: 9998;
        opacity: 0;
        transition: opacity 0.2s ease;
        pointer-events: none;
    }

    .panel-overlay.active {
        display: block !important;
        opacity: 1;
        pointer-events: auto;
    }

    /* 比例选择面板 - 轻盈向上弹出 */
    .aspect-ratio-panel {
        display: none;
        position: fixed;
        top: auto;
        left: 0;
        background: rgba(28, 29, 34, 0.96);
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
        z-index: 9999;
        padding: 14px 16px 16px;
        opacity: 0;
        transform: translateY(6px) scale(0.96);
        transition: opacity 0.18s ease, transform 0.18s ease;
        max-width: min(340px, calc(100% - 24px));
        width: max(200px, min(320px, calc(100% - 36px)));
        pointer-events: none;
        backdrop-filter: blur(12px);
    }

    .aspect-ratio-panel.active {
        display: block !important;
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .aspect-ratio-panel.panel-above {
        transform-origin: center bottom;
    }

    .aspect-ratio-panel.panel-below {
        transform-origin: center top;
    }

    /* 隐藏面板标题 */
    .panel-header {
        display: none !important;
    }

    .panel-close {
        display: none;
    }

    /* 比例选项 - 网格布局 */
    .aspect-ratio-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .aspect-ratio-option {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        padding: 12px 8px;
        min-height: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    }

    .aspect-ratio-option:active {
        transform: scale(0.97);
    }

    .aspect-ratio-option.selected {
        border-color: var(--primary-blue);
        background: rgba(68, 147, 248, 0.18);
    }

    .aspect-ratio-option .icon-box {
        width: 32px;
        height: 32px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 9px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .aspect-ratio-option .ratio-shape {
        background: var(--text-primary);
        border-radius: 2px;
        flex-shrink: 0;
    }

    .aspect-ratio-option.selected .ratio-shape {
        background: var(--primary-blue);
    }

    /* 不同比例的形状 - 更小更精致 */
    .ratio-shape.ratio-1-1 { width: 20px; height: 20px; }
    .ratio-shape.ratio-16-9 { width: 26px; height: 15px; }
    .ratio-shape.ratio-9-16 { width: 15px; height: 26px; }
    .ratio-shape.ratio-4-3 { width: 24px; height: 18px; }
    .ratio-shape.ratio-3-4 { width: 18px; height: 24px; }

    .aspect-ratio-option .ratio-text {
        font-size: 15px;
        color: var(--text-primary);
        font-weight: 500;
        text-align: center;
    }

    .aspect-ratio-option.selected .ratio-text {
        color: var(--primary-blue);
    }

    /* 数量选择面板 - 轻盈向上弹出 */
    .count-panel {
        display: none;
        position: fixed;
        top: auto;
        left: 0;
        background: rgba(28, 29, 34, 0.96);
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
        z-index: 9999;
        padding: 12px 14px 14px;
        opacity: 0;
        transform: translateY(6px) scale(0.96);
        transition: opacity 0.18s ease, transform 0.18s ease;
        width: max(160px, min(220px, calc(100% - 36px)));
        pointer-events: none;
        backdrop-filter: blur(12px);
    }

    .count-panel.active {
        display: block !important;
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .count-panel.panel-above {
        transform-origin: center bottom;
    }

    .count-panel.panel-below {
        transform-origin: center top;
    }

    /* 数量选项 - 简洁垂直列表 */
    .count-options {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .count-option {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 14px 10px;
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        color: var(--text-primary);
        cursor: pointer;
        transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    }

    .count-option:active {
        transform: scale(0.97);
    }

    .count-option.selected {
        border-color: var(--primary-blue);
        background: rgba(68, 147, 248, 0.15);
        color: var(--primary-blue);
    }

    .form-group {
        margin-bottom: 12px !important;
    }

    /* ========== 6. 图片网格优化（移动端智能布局） ========== */
    .task-images {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* 只有极宽的横图（16:9）占满一行，其他都是两列 */
    .task-image-wrapper[data-aspect="16:9"] {
        grid-column: 1 / -1 !important;
    }

    /* 竖图（9:16, 3:4）、方图（1:1）、普通横图（4:3）都保持两列 */
    /* 不需要特殊设置，默认就是两列 */

    /* 强制图片容器和图片本身适配屏幕 */
    .task-image-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .task-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* ========== 7. 任务卡片操作按钮（只保留图标） ========== */
    .task-action-btn span {
        display: none !important;
    }

    .task-action-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .task-action-btn svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* ========== 8. 顶部导航优化 ========== */
    .header-container {
        padding: 0 12px !important;
    }

    .header-left .logo {
        font-size: 18px !important;
    }

    .header-right {
        gap: 12px !important;
    }

    .particle-display {
        font-size: 14px !important;
        padding: 6px 12px !important;
    }

    .user-menu-trigger {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }

    /* ========== 9. 模态框全屏显示 ========== */
    .modal-content,
    .auth-modal-content {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* ========== 10. 触摸优化 ========== */
    button,
    .clickable,
    input[type="file"],
    select {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* ========== 11. 生成按钮优化 ========== */
    .generate-section {
        padding: 0.8rem 1rem !important;  /* 减少上下padding，让按钮更靠近选择器 */
        border-top: none !important;  /* 移除顶部边框，避免与 input-panel 的 border-bottom 重叠 */
    }

    .generate-btn {
        padding: 14px !important;
        font-size: 16px !important;
        min-height: 50px !important;
    }

    /* ========== 移动端顶部导航优化 - 专业现代设计 ========== */
    /* 导航栏容器 */
    nav {
        padding: 12px 16px !important;
    }

    /* 粒子币显示 - 简洁设计 */
    .particles-badge {
        align-items: center !important;
        gap: 6px !important;
        background: rgba(212, 175, 55, 0.1) !important;
        padding: 6px 12px !important;
        border-radius: 12px !important;
        color: var(--accent-gold) !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        border: 1px solid rgba(212, 175, 55, 0.2) !important;
    }

    .particles-badge i {
        color: var(--accent-gold) !important;
    }

    /* 用户菜单按钮 - 确保可点击 */
    .user-menu-btn {
        align-items: center !important;
        gap: 6px !important;
        background: rgba(99, 102, 241, 0.08) !important;
        padding: 6px 12px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(99, 102, 241, 0.15) !important;
        color: var(--text-primary) !important;
        font-size: 13px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        min-height: 36px !important;  /* 确保点击区域足够大 */
        -webkit-tap-highlight-color: transparent !important;
    }

    .user-menu-btn:active {
        background: rgba(99, 102, 241, 0.15) !important;
        transform: scale(0.98) !important;
    }

    /* 用户名显示 */
    .user-menu-btn #username {
        max-width: 80px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* 下拉菜单 - 移动端优化 */
    .user-menu-dropdown {
        top: calc(100% + 6px) !important;
        right: 0 !important;
        min-width: 140px !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        border: 1px solid var(--border-color) !important;
        z-index: 9999 !important;  /* 确保在最上层 */
    }

    .user-menu-item {
        padding: 12px 14px !important;
        font-size: 13px !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .user-menu-item:active {
        background: var(--bg-tertiary) !important;
    }

    /* 登录按钮 - 现代设计 */
    .login-btn {
        align-items: center !important;
        gap: 6px !important;
        background: var(--accent-primary) !important;
        color: white !important;
        padding: 8px 16px !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .login-btn:active {
        transform: scale(0.98) !important;
        opacity: 0.9 !important;
    }

    /* ========== 任务卡片状态栏 - 移动端优化 ========== */
    .task-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
        margin-bottom: 0.6rem !important;
        padding-bottom: 0.5rem !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    /* 左侧：时间 + 类型 */
    .task-time {
        font-size: 0.85rem !important;
        color: var(--text-secondary) !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .task-mode-badge {
        padding: 0.15rem 0.4rem !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 4px !important;
        font-size: 0.75rem !important;
        background: transparent !important;
        color: var(--text-secondary) !important;
        flex-shrink: 0 !important;
    }

    /* 右侧：状态结果 - 带颜色 */
    .task-stats {
        font-size: 0.85rem !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        margin-left: auto !important;
    }

    .task-stats.status-success {
        color: var(--text-secondary) !important;
    }

    .task-stats.status-pending {
        color: #f59e0b !important;
    }

    .task-stats.status-failed {
        color: #ef4444 !important;
    }

    .task-stats.status-partial {
        color: #f59e0b !important;
    }

    /* 标题区域 - 左侧标题 + 右侧分辨率标签 */
    .task-prompt-wrapper {
        display: flex !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
        margin-bottom: 1rem !important;
        min-height: 3rem !important;
    }

    .task-prompt {
        flex: 1 !important;
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
        word-break: break-word !important;
        padding: 0 !important;
        background: transparent !important;
        display: flex !important;
        align-items: center !important;
    }

    /* 分辨率标签 - 固定右侧，蓝色底，垂直居中，更紧凑 */
    .aspect-ratio-badge {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.25rem 0.5rem !important;
        background: rgba(68, 147, 248, 0.15) !important;
        color: #4893f8 !important;
        border: 1px solid rgba(68, 147, 248, 0.3) !important;
        border-radius: 4px !important;
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        font-family: ui-monospace, monospace !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        min-width: 2.5rem !important;
        align-self: center !important;
    }

    /* ========== 输入框优化 - 柔和蓝色边框透明背景 ========== */
    .form-group textarea {
        min-height: 120px !important;
        font-size: 16px !important;  /* >= 16px 防止iOS自动放大 */
        line-height: 1.6 !important;
        background: transparent !important;
        border: 1px solid rgba(72, 147, 248, 0.3) !important;  /* 降低透明度 */
        border-radius: 8px !important;
        padding: 12px !important;
        color: var(--text-primary) !important;
        touch-action: manipulation !important;  /* 防止双击放大 */
    }

    .form-group textarea:focus {
        outline: none !important;
        border-color: rgba(72, 147, 248, 0.6) !important;
        box-shadow: 0 0 0 3px rgba(72, 147, 248, 0.08) !important;
    }

    /* ========== 输入框容器 - 相对定位 ========== */
    .textarea-container {
        position: relative !important;
        width: 100% !important;
    }

    /* ========== 强化关键词按钮 - 融入输入框内部 ========== */
    .optimize-btn-inline {
        position: absolute !important;
        bottom: 10px !important;
        right: 10px !important;
        background: rgba(72, 147, 248, 0.1) !important;
        color: #4893f8 !important;
        border: 1px solid rgba(72, 147, 248, 0.3) !important;
        border-radius: 6px !important;
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
        white-space: nowrap !important;
    }

    .optimize-btn-inline:hover {
        background: rgba(72, 147, 248, 0.2) !important;
        border-color: rgba(72, 147, 248, 0.5) !important;
    }

    .optimize-btn-inline:active {
        transform: scale(0.95) !important;
    }

    /* ========== 给输入框底部留出按钮空间 ========== */
    .textarea-with-btn textarea {
        padding-bottom: 45px !important;
    }

    /* ========== 图片上传区域优化 - 横向布局 ========== */
    .upload-area {
        min-height: 50px !important;
        max-height: 50px !important;
        padding: 0 1rem !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.8rem !important;
        position: relative !important;
        border: 1px dashed rgba(72, 147, 248, 0.2) !important;  /* 虚线更轻，防止闪烁 */
        border-radius: 8px !important;
        background: transparent !important;
        transition: none !important;  /* 移除过渡效果，防止闪烁 */
    }

    .upload-area:hover {
        border-color: rgba(72, 147, 248, 0.5) !important;
        border-style: solid !important;
        background: rgba(72, 147, 248, 0.05) !important;
    }

    .upload-icon {
        font-size: 1.5rem !important;
        margin-bottom: 0 !important;
        line-height: 1 !important;
    }

    .upload-text {
        font-size: 0.9rem !important;
        font-weight: 500 !important;
        margin-bottom: 0 !important;
        line-height: 1 !important;
    }

    /* 上传区域的计数器 */
    .upload-area .reference-count {
        position: absolute !important;
        bottom: 8px !important;
        right: 10px !important;
        font-size: 0.7rem !important;
        color: var(--text-secondary) !important;
        background: rgba(0, 0, 0, 0.3) !important;
        padding: 2px 6px !important;
        border-radius: 8px !important;
    }

    /* ========== 图片查看器 - 移动端体验优化 ========== */
    .image-viewer-modal {
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    }

    .viewer-content {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .viewer-image-container {
        max-height: calc(100vh - 180px) !important;
        padding: 0 8px !important;
    }

    .viewer-image {
        max-width: 100vw !important;
        max-height: 100% !important;
        border-radius: 18px !important;
    }

    .viewer-loading {
        border-radius: 18px !important;
    }

    .viewer-loading.active {
        display: flex !important;
    }

    .viewer-hint {
        position: fixed !important;
        bottom: calc(env(safe-area-inset-bottom) + 78px) !important;
        background: rgba(0, 0, 0, 0.4) !important;
        font-size: 0.75rem !important;
        padding: 6px 14px !important;
    }

    .viewer-close,
    .viewer-download {
        display: none !important;
    }

    .viewer-mobile-toolbar {
        position: fixed;
        bottom: max(18px, env(safe-area-inset-bottom) + 14px);
        left: 50%;
        transform: translateX(-50%);
        display: flex !important;
        gap: 12px !important;
        align-items: center !important;
        padding: 10px 16px !important;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 999px;
        z-index: 10002;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    }

    .viewer-toolbar-btn {
        font-size: 0.85rem !important;
        padding: 10px 18px !important;
        color: #fff !important;
        background: rgba(255, 255, 255, 0.18) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    .viewer-toolbar-close {
        background: rgba(255, 255, 255, 0.12) !important;
    }

    .viewer-toolbar-download {
        background: linear-gradient(135deg, #58a6ff, #2f6bff) !important;
        border-color: rgba(47, 107, 255, 0.4) !important;
    }

    /* ========== 隐藏移动端不需要的元素 ========== */
    .reference-header {
        display: none !important;
    }

    .mode-description {
        display: none !important;
    }

    /* 隐藏PC端的强化关键词按钮（使用内联版本） */
    .optimize-btn {
        display: none !important;
    }

    /* ========== 统一三种模式的高度 - 消除跳动 ========== */
    /* 所有模式容器使用统一舞台高度 */
    .mode-content {
        min-height: var(--mode-stage-min-height) !important;
        transition: none !important;  /* 禁用过渡，防止闪烁 */
    }

    /* 只有激活的模式使用 flex 布局 */
    .mode-content.active {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 文生图：textarea撑满整个舞台 */
    .text-only-mode .text-only-textarea {
        min-height: var(--mode-stage-min-height) !important;
        flex: 1 !important;
        transition: none !important;  /* 禁用过渡 */
    }

    /* 图生图/系列图：上传区域 + 输入框 = 舞台高度 */
    /* 第一部分：上传区域容器（空状态时占据固定高度） */
    .upload-wrapper {
        min-height: 62px !important;  /* 空状态：上传按钮50px + 间距12px */
        margin-bottom: 12px !important;
        transition: none !important;  /* 禁用过渡 */
    }

    /* 空状态：上传区域显示完整上传按钮 */
    .upload-wrapper.is-empty .upload-area {
        min-height: 50px !important;
        display: flex !important;
    }

    /* 有图片状态：上传区域收缩，隐藏图标和文字 */
    .upload-wrapper:not(.is-empty) .upload-area {
        min-height: 40px !important;  /* 收缩为窄条 */
        padding: 0.5rem 1rem !important;
    }

    .upload-wrapper:not(.is-empty) .upload-icon,
    .upload-wrapper:not(.is-empty) .upload-text {
        display: none !important;  /* 隐藏图标和文字 */
    }

    .upload-wrapper:not(.is-empty) .reference-count {
        position: static !important;  /* 恢复正常位置 */
        font-size: 0.85rem !important;
    }

    /* 第二部分：图生图/系列图输入框（占据剩余高度） */
    #conversation-mode .textarea-with-btn textarea,
    #image-to-image-mode .textarea-with-btn textarea {
        min-height: calc(var(--mode-stage-min-height) - 74px) !important;  /* 舞台高度 - 上传区域(62px) - 间距(12px) */
        flex: 1 !important;
        transition: none !important;  /* 禁用过渡 */
    }

    /* 紧密连接上传区和输入框 */
    #conversation-mode .form-group:first-child,
    #image-to-image-mode .form-group:first-child {
        margin-bottom: 0 !important;
        transition: none !important;
    }

    #conversation-mode .textarea-with-btn,
    #image-to-image-mode .textarea-with-btn {
        margin-top: 0 !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        transition: none !important;
    }

    /* 系列图占位区域 - 对齐生成按钮（高度等于mobile-selectors） */
    .mode-placeholder {
        min-height: var(--mobile-selectors-slot-height) !important;
        max-height: var(--mobile-selectors-slot-height) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 12px 0 6px 0 !important;  /* 减少下方间距，让生成按钮更近 */
        padding: 0 8px !important;
    }

    .mode-tip {
        font-size: 0.8rem !important;
        color: var(--text-secondary) !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 1rem !important;
        line-height: 1.4 !important;
    }

    /* 固定form-group间距 */
    .form-group {
        margin-bottom: 12px !important;
    }

    /* ========== 预览图片优化 ========== */
    .preview-container {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.6rem !important;
        margin-bottom: 0.8rem !important;  /* 增加与upload-area的间距 */
        min-height: 0 !important;
        border: none !important;
        outline: none !important;
        background: transparent !important;
        transition: none !important;  /* 禁用过渡，防止闪烁 */
    }

    /* 空预览容器不显示，不占空间 */
    .preview-container:empty {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .preview-image {
        position: relative !important;
        width: 80px !important;
        height: 80px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        cursor: pointer !important;
        transition: transform 0.2s !important;
        border: none !important;
    }

    .preview-image:hover {
        transform: scale(1.05) !important;
    }

    .preview-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* 删除按钮 - 点击图片后通过JS显示，优雅简洁的X符号 */
    .preview-image .remove-btn {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.6) !important;
        color: white !important;
        border: none !important;
        cursor: pointer !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.2s !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
        font-size: 2.5rem !important;
        font-weight: 300 !important;
        line-height: 1 !important;
    }

    .preview-image .remove-btn::before {
        content: '×' !important;
    }

    /* 显示删除按钮的状态 */
    .preview-image.show-delete .remove-btn {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* ========== 图片加载占位符尺寸优化（避免跳动）========== */
    .task-image-wrapper.loading-spinner {
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
    }

    .task-image-wrapper.loading-spinner[data-aspect="16:9"] {
        aspect-ratio: 16 / 9 !important;
        min-height: 0 !important;
    }

    .task-image-wrapper.loading-spinner[data-aspect="9:16"] {
        aspect-ratio: 9 / 16 !important;
        min-height: 0 !important;
    }

    .task-image-wrapper.loading-spinner[data-aspect="4:3"] {
        aspect-ratio: 4 / 3 !important;
        min-height: 0 !important;
    }

    .task-image-wrapper.loading-spinner[data-aspect="3:4"] {
        aspect-ratio: 3 / 4 !important;
        min-height: 0 !important;
    }

    .task-image-wrapper.loading-spinner[data-aspect="1:1"] {
        aspect-ratio: 1 / 1 !important;
        min-height: 0 !important;
    }
}

/* ========== PC端专属样式（≥769px） - 与移动端完全隔离 ========== */
@media (min-width: 769px) {
    .viewer-hint {
        display: none !important;
    }

    /* 强化关键词按钮 - 兼容移动端的inline版本和PC端的标准版本 */
    .optimize-btn,
    .optimize-btn-inline {
        display: inline-flex !important;
        margin-top: 0.75rem;
        padding: 0.5rem 1rem;
        background: var(--bg-tertiary);
        color: var(--text-secondary);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        align-items: center;
        gap: 0.25rem;
        position: static !important;  /* 覆盖移动端的absolute定位 */
    }

    .optimize-btn:hover,
    .optimize-btn-inline:hover {
        background: var(--accent-primary);
        color: var(--bg-primary);
        border-color: var(--accent-primary);
        transform: translateY(-1px);
    }

    /* PC端状态栏 - 左对齐，一行显示：时间 › 类型 › 分辨率 › 状态 */
    .task-header {
        display: flex;
        align-items: center;
        justify-content: flex-start;  /* 明确左对齐 */
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border-color);
    }

    /* 时间 - 灰色文字，字体放大 */
    .task-time {
        color: var(--text-muted);
        font-size: 0.8rem;  /* 放大1号：0.75→0.8 */
        white-space: nowrap;
    }

    /* 在时间、类型、分辨率后添加分隔符 › */
    .task-time::after,
    .task-mode-badge::after,
    .aspect-ratio-badge::after {
        content: '›';
        margin-left: 0.5rem;
        color: var(--border-color);
        font-weight: 300;
        user-select: none;
    }

    /* 类型标签 - 蓝色主题，字体放大 */
    .task-mode-badge {
        padding: 0.25rem 0.6rem;  /* 稍微加大padding */
        border: 1px solid rgba(99, 102, 241, 0.25);
        color: rgba(99, 102, 241, 0.9);
        background: rgba(99, 102, 241, 0.04);
        border-radius: 4px;
        font-size: 0.8rem;  /* 放大1号：0.7→0.8 */
        font-weight: 500;
        white-space: nowrap;
    }

    /* 分辨率标签 - 改为灰色低调样式，字体放大 */
    .aspect-ratio-badge {
        padding: 0.25rem 0.6rem;
        background: transparent;  /* 透明背景 */
        color: var(--text-secondary);  /* 灰色文字 */
        border: 1px solid var(--border-color);  /* 灰色边框 */
        border-radius: 4px;
        font-size: 0.8rem;  /* 放大1号：0.7→0.8 */
        font-weight: 500;
        font-family: ui-monospace, 'SF Mono', 'Consolas', monospace;
        white-space: nowrap;
    }

    /* 状态标签 - 带颜色变化，字体放大 */
    .task-stats {
        padding: 0.25rem 0.6rem;
        border: 1px solid var(--border-color);
        background: transparent;
        border-radius: 4px;
        font-size: 0.8rem;  /* 放大1号：0.7→0.8 */
        font-weight: 500;
        white-space: nowrap;
    }

    /* 成功状态 - 低调灰色 */
    .task-stats.status-success {
        color: var(--text-secondary);
        border-color: var(--border-color);
    }

    /* 进行中 - 橙色强调 */
    .task-stats.status-pending {
        color: #f59e0b;
        border-color: rgba(245, 158, 11, 0.25);
        background: rgba(245, 158, 11, 0.04);
    }

    /* 失败 - 红色警告 */
    .task-stats.status-failed {
        color: #ef4444;
        border-color: rgba(239, 68, 68, 0.25);
        background: rgba(239, 68, 68, 0.04);
    }

    /* 部分成功 - 橙色提示 */
    .task-stats.status-partial {
        color: #f59e0b;
        border-color: rgba(245, 158, 11, 0.25);
        background: rgba(245, 158, 11, 0.04);
    }

    /* 提示词区域 - 移除分辨率标签（已移到header） */
    .task-prompt-wrapper {
        margin-bottom: 1rem;
    }

    .task-prompt {
        font-size: 0.95rem;
        line-height: 1.6;
        font-weight: 600;
        color: var(--text-primary);
        word-break: break-word;
    }
}