/**
 * responsive.css - 移动端响应式布局优化
 * 使前端在手机和平板上获得更好的使用体验
 * 
 * 策略：
 *   - 仅通过 CSS 媒体查询控制布局变化
 *   - 配合 index.html 中极少量的布局交互JS（非业务逻辑）
 *   - 不修改任何现有 JS 业务逻辑文件
 */

/* ==========================================
   汉堡菜单按钮 (默认隐藏，手机端显示)
   ========================================== */
.nav-hamburger {
    display: none;
    background: none;
    border: 1px solid transparent;
    color: #ececf1;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 6px 10px;
    line-height: 1;
    border-radius: 6px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.nav-hamburger:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}

.nav-hamburger.active {
    color: var(--accent-color);
    background: rgba(16, 163, 127, 0.15);
    border-color: rgba(16, 163, 127, 0.3);
}

/* ==========================================
   手机端侧边栏遮罩层
   ========================================== */
.sidebar-mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    z-index: 199;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.sidebar-mobile-overlay.visible {
    display: block;
}

/* ==========================================
   手机端聊天侧边栏切换按钮
   ========================================== */
.mobile-chat-toggle {
    display: none;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 95;
    background: rgba(16, 163, 127, 0.12);
    color: #10a37f;
    border: 1px solid rgba(16, 163, 127, 0.35);
    border-radius: 10px;
    width: auto;
    height: auto;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: all 0.2s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mobile-chat-toggle:hover,
.mobile-chat-toggle:active {
    background: rgba(16, 163, 127, 0.25);
    border-color: rgba(16, 163, 127, 0.6);
    color: #fff;
}

/* 精准生图弹窗 & 查看结果按钮 — 默认隐藏 */
.pc-mobile-close,
.pc-mobile-view-results {
    display: none;
}

/* ==========================================
   Tablet & Mobile: <= 768px
   ========================================== */
@media (max-width: 768px) {

    /* ===== 防止水平溢出（根本解决按钮被挤出问题） ===== */
    html {
        overflow-x: hidden !important;
    }

    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* ===== 顶部导航栏 → 汉堡下拉菜单 ===== */
    nav.top-nav {
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: 48px !important;
        padding: 6px 10px !important;
        gap: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        max-width: 100vw !important;
    }

    .logo {
        flex: 1 1 0 !important;
        font-size: 0.9rem !important;
        order: 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    .logo svg {
        flex-shrink: 0;
    }

    .nav-hamburger {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        order: 1 !important;
        flex-shrink: 0 !important;
        background: rgba(16, 163, 127, 0.12) !important;
        border: 1px solid rgba(16, 163, 127, 0.4) !important;
        color: #10a37f !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        padding: 6px 14px !important;
        border-radius: 20px !important;
        gap: 4px !important;
    }

    .nav-hamburger.active {
        background: rgba(16, 163, 127, 0.25) !important;
        border-color: rgba(16, 163, 127, 0.6) !important;
        color: #fff !important;
    }

    /* 用户区域（登录前+登录后）都要紧凑，flex:1与logo对称实现居中 */
    .user-area {
        order: 2 !important;
        flex: 1 1 0 !important;
        min-width: auto !important;
        justify-content: flex-end !important;
        flex-shrink: 1 !important;
        gap: 6px !important;
        overflow: hidden !important;
    }

    /* 登录按钮（未登录时） */
    .user-area .auth-btn,
    .user-area button[onclick="showLoginModal()"] {
        padding: 4px 10px !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
        border-radius: 15px !important;
    }

    /* 导航链接：折叠为竖排下拉 */
    nav.top-nav > .nav-links,
    .nav-links,
    #navLinks {
        display: none !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 4px !important;
        padding: 8px 0 4px 0 !important;
        order: 10 !important;
        border-top: 1px solid #333 !important;
        margin-top: 6px !important;
    }

    nav.top-nav > .nav-links.mobile-open,
    .nav-links.mobile-open,
    #navLinks.mobile-open {
        display: flex !important;
    }

    .nav-item {
        padding: 10px 14px !important;
        border-radius: 8px !important;
        font-size: 0.9rem !important;
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 手机端禁用glow动画，节省性能 + 减少视觉干扰 */
    .nav-item.glow-effect {
        animation: none !important;
    }

    .nav-item.glow-effect::after {
        display: none !important;
    }

    /* ===== 登录后的用户区域：紧凑化 ===== */
    .user-stats {
        gap: 4px !important;
        font-size: 0.7rem !important;
    }

    .credits-display {
        font-size: 0.7rem !important;
        gap: 3px !important;
    }

    /* 隐藏积分文字标签，只保留数值 */
    .credits-label {
        display: none !important;
    }

    /* 隐藏分隔线 */
    .credits-display .divider {
        display: none !important;
    }

    .stat-badge {
        padding: 1px 4px !important;
        font-size: 0.65rem !important;
    }

    .recharge-btn-small {
        padding: 2px 6px !important;
        font-size: 0.65rem !important;
    }

    .user-avatar-small {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.7rem !important;
    }

    .user-avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
    }

    /* 隐藏会员徽章（节省空间） */
    .member-badge {
        display: none !important;
    }

    /* 用户下拉菜单适配 */
    .user-dropdown {
        right: 0 !important;
        width: 180px !important;
    }

    /* ===== 聊天侧边栏 → 抽拉式抽屉 ===== */
    #view-inspiration {
        position: relative !important;
    }

    #view-inspiration .sidebar,
    .sidebar#chatSidebar,
    #chatSidebar {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        width: 280px !important;
        z-index: 200 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: none !important;
        flex-direction: column !important;
    }

    #chatSidebar.mobile-open {
        transform: translateX(0) !important;
        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.5) !important;
    }

    .mobile-chat-toggle {
        display: flex !important;
    }

    /* 隐藏桌面端的侧边栏展开/折叠按钮 */
    #sidebarExpandBtn {
        display: none !important;
    }

    #sidebarExpandHint {
        display: none !important;
    }

    /* ===== 聊天区域优化 ===== */
    .message-content {
        padding: 12px 10px !important;
        gap: 10px !important;
    }

    .content-wrapper {
        gap: 10px !important;
    }

    .input-area-wrapper {
        padding-bottom: 10px !important;
        padding-top: 8px !important;
    }

    .input-box {
        margin: 0 8px !important;
        border-radius: 10px !important;
    }

    /* 画师固定提醒条在手机上隐藏（节省空间，用户可通过右上角画师展示切换） */
    .painter-reminder-fixed {
        display: none !important;
    }

    /* 随机生成按钮自适应 */
    .random-draw-btn {
        padding: 5px 8px !important;
        font-size: 0.75rem !important;
    }

    /* 右上角画师展示缩小 */
    #topRightPainterWrapper {
        top: 5px !important;
        right: 5px !important;
    }

    #topRightPainter {
        padding: 3px 6px !important;
        gap: 5px !important;
    }

    #sp_name_tr {
        font-size: 0.7rem !important;
    }

    #sp_cat_tr {
        font-size: 0.55rem !important;
    }

    #sp_cover_tr,
    #sp_cover_placeholder {
        width: 24px !important;
        height: 24px !important;
        font-size: 11px !important;
    }

    /* 使用教程快捷入口缩小 */
    .painter-intro-hint {
        font-size: 0.65rem !important;
        padding: 2px 6px !important;
    }

    /* ===== 精准生图 — 手机端弹窗模式 ===== */
    .pc-layout {
        flex-direction: column !important;
    }

    /* 手机端：侧边栏占满全部高度 */
    .pc-sidebar {
        width: 100% !important;
        border-right: none !important;
        border-bottom: none !important;
        max-height: none !important;
        height: 100% !important;
        overflow-y: auto !important;
        padding: 8px 10px !important;
        flex-shrink: 0 !important;
    }

    .pc-sidebar h2 {
        font-size: 0.9rem !important;
        margin-bottom: 10px !important;
        gap: 6px !important;
    }

    .pc-section {
        margin-bottom: 10px !important;
    }

    .pc-label {
        font-size: 0.78rem !important;
        margin-bottom: 5px !important;
    }

    /* 模式选择卡片更紧凑 */
    .pc-mode-grid {
        gap: 5px !important;
    }

    .pc-mode-card {
        padding: 6px 4px !important;
        border-radius: 6px !important;
    }

    .pc-mode-card .mode-icon {
        font-size: 1rem !important;
    }

    .pc-mode-card .mode-name {
        font-size: 0.68rem !important;
    }

    /* 输入框/下拉框更紧凑 */
    .pc-select {
        padding: 7px 8px !important;
        font-size: 0.8rem !important;
        border-radius: 6px !important;
    }

    .pc-textarea {
        padding: 8px !important;
        font-size: 0.8rem !important;
        min-height: 60px !important;
    }

    .pc-input-group {
        border-radius: 6px !important;
    }

    /* 上传区域更紧凑 */
    .pc-upload-area {
        min-height: 100px !important;
        padding: 10px !important;
        border-radius: 6px !important;
    }

    .pc-upload-icon {
        font-size: 1.5rem !important;
    }

    #pc-uploaded-img {
        height: 140px !important;
    }

    /* 参数网格更紧凑 */
    .pc-params-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .pc-param-item label {
        font-size: 0.72rem !important;
    }

    .pc-param-item select,
    .pc-param-item input {
        padding: 6px !important;
        font-size: 0.78rem !important;
    }

    /* 运行按钮紧凑 */
    .pc-run-btn {
        padding: 10px !important;
        font-size: 0.85rem !important;
        border-radius: 8px !important;
    }

    /* 手机端：结果区默认隐藏 */
    .pc-main {
        display: none !important;
    }

    /* 手机端：结果弹窗打开时 — 全屏覆盖 */
    .pc-main.pc-popup-open {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 500 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: #151619 !important;
        padding: 0 !important;
        flex-direction: column !important;
        overflow-y: auto !important;
    }

    .pc-main.pc-popup-open .pc-result-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 10px !important;
    }

    .pc-result-card:hover {
        transform: none !important;
    }

    .pc-params-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* 空状态减少占用空间 */
    #pc-empty-state {
        padding-top: 30px !important;
    }

    /* 返回按钮样式 */
    .pc-mobile-close {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        background: rgba(32, 33, 35, 0.95) !important;
        color: #10a37f !important;
        border: none !important;
        border-bottom: 1px solid #333 !important;
        padding: 14px 16px !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }

    /* 查看结果按钮样式 */
    .pc-mobile-view-results {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        background: transparent !important;
        color: #10a37f !important;
        border: 1px dashed rgba(16, 163, 127, 0.4) !important;
        padding: 10px !important;
        border-radius: 8px !important;
        font-size: 0.85rem !important;
        cursor: pointer !important;
        margin-top: 10px !important;
        width: 100% !important;
    }

    #pc-empty-state div:first-child {
        font-size: 3rem !important;
        margin-bottom: 10px !important;
    }

    #pc-empty-state div:last-child {
        font-size: 0.9rem !important;
    }

    .pc-status-banner {
        padding: 12px !important;
        gap: 12px !important;
    }

    .pc-run-btn {
        padding: 12px !important;
        font-size: 0.95rem !important;
    }

    /* ===== 一键同款 ===== */
    .samestyle-layout {
        padding: 0 10px 20px 10px !important;
    }

    .samestyle-header {
        padding-left: 10px !important;
        margin-bottom: 10px !important;
    }

    .samestyle-header h2 {
        font-size: 1.1rem !important;
    }

    .samestyle-category-nav {
        gap: 12px !important;
        padding-left: 12px !important;
        padding-bottom: 10px !important;
    }

    .ss-nav-btn {
        font-size: 0.95rem !important;
    }

    .ss-nav-btn.active {
        font-size: 1.15rem !important;
    }

    .ss-nav-btn.active::before {
        left: -10px !important;
        height: 18px !important;
        width: 3px !important;
    }

    .samestyle-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 10px !important;
    }

    .style-card {
        border-radius: 10px !important;
    }

    .card-info {
        padding: 10px !important;
        gap: 5px !important;
    }

    .style-title {
        font-size: 0.9rem !important;
    }

    .style-meta {
        font-size: 0.75rem !important;
    }

    .apply-btn {
        padding: 8px !important;
        font-size: 0.85rem !important;
        border-radius: 5px !important;
    }

    .ss-ratio-nav {
        padding: 8px 10px !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    .ss-ratio-label {
        font-size: 0.8rem !important;
        margin-right: 5px !important;
    }

    .ss-ratio-btn {
        padding: 5px 10px !important;
        font-size: 0.8rem !important;
    }

    /* 一键同款进度弹窗 */
    .ss-progress-modal {
        width: 95% !important;
        max-width: 95% !important;
    }

    /* ===== 神奇工具 ===== */
    .tools-menu {
        padding: 12px !important;
        gap: 12px !important;
    }

    .tool-card {
        width: 100% !important;
    }

    .card-cover {
        height: 80px !important;
        font-size: 2.5rem !important;
    }

    .tools-header {
        padding: 10px 12px !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .tool-input {
        width: 60px !important;
    }

    .imagetool-workspace {
        padding: 12px !important;
    }

    .imagetool-upload-area {
        padding: 20px 12px !important;
    }

    /* ===== 弹窗全局优化 ===== */
    .modal-container {
        width: 95% !important;
        max-width: 95% !important;
        max-height: 90vh !important;
        max-height: 90dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #upscaleConfirmModal .modal-container {
        width: 92% !important;
    }

    .modal-header {
        padding: 10px 12px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }

    .modal-body {
        padding: 12px !important;
    }

    /* ===== 登录弹窗 — 手机端竖排可滚动 ===== */
    #authModal .modal-container {
        max-width: 95% !important;
        width: 95% !important;
        max-height: 92vh !important;
        max-height: 92dvh !important;
        overflow-y: auto !important;
    }
    /* 双栏强制竖排 */
    #authModal .modal-container > div:nth-child(2) {
        flex-direction: column !important;
    }
    /* 左侧表单区：取消min-width限制 */
    #authModal .modal-container > div:nth-child(2) > div:first-child {
        min-width: 0 !important;
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #444 !important;
    }
    /* 右侧微信扫码区：全宽、缩小 */
    #authModal .modal-container > div:nth-child(2) > div:last-child {
        width: 100% !important;
        min-width: 0 !important;
        padding: 14px 16px !important;
    }
    /* 微信二维码区域缩小 */
    #authModal #wechatQrcodeBox {
        min-height: 180px !important;
    }
    /* 表单tab缩小 */
    #authModal .modal-tab {
        padding: 8px 4px !important;
        font-size: 0.8rem !important;
    }
    /* 表单字段缩小 */
    #authModal .auth-form-group {
        margin-bottom: 10px !important;
    }
    #authModal .auth-form-group input {
        padding: 8px !important;
        font-size: 0.85rem !important;
    }
    #authModal .auth-btn {
        padding: 8px !important;
        font-size: 0.85rem !important;
    }

    /* 充值等级卡片 */
    .level-card {
        padding: 12px !important;
    }

    .level-name {
        font-size: 1rem !important;
    }

    .level-price {
        font-size: 1.5rem !important;
    }

    .level-benefits {
        font-size: 0.85rem !important;
    }

    /* ===== 全局后台任务栏 ===== */
    .global-task-bar {
        bottom: 8px !important;
        right: 8px !important;
        padding: 5px 10px !important;
        min-width: 100px !important;
        border-radius: 20px !important;
        max-width: calc(100vw - 16px) !important;
        font-size: 0.8rem !important;
        z-index: 9998 !important;
        border-width: 1.5px !important;
    }

    .task-bar-indicator {
        width: 8px !important;
        height: 8px !important;
    }

    .task-bar-content {
        gap: 5px !important;
    }

    .task-bar-text {
        font-size: 0.75rem !important;
    }

    .task-bar-icon {
        font-size: 0.85rem !important;
    }

    .task-bar-expand {
        padding: 1px 4px !important;
        font-size: 0.7rem !important;
    }

    .task-bar-details {
        min-width: 220px !important;
        max-width: calc(100vw - 20px) !important;
        right: 0 !important;
    }

    .task-detail-item {
        padding: 10px !important;
    }

    /* ===== 连接断开横幅 ===== */
    .connection-banner {
        top: auto !important;
        font-size: 0.8rem !important;
        padding: 6px !important;
    }

    .queue-banner {
        font-size: 0.8rem !important;
        padding: 6px 14px !important;
    }

    /* ===== 图片查看器 ===== */
    #imageViewerImg {
        max-width: 95vw !important;
        max-height: 85vh !important;
    }

    .close-viewer-btn {
        top: 10px !important;
        right: 10px !important;
        font-size: 1.5rem !important;
    }

    /* ===== 图库图片 ===== */
    .image-card img {
        max-height: 280px !important;
    }

    /* ===== 国展信息 ===== */
    .exhibition-layout {
        padding: 10px !important;
    }
}

/* ==========================================
   Extra Small Screens: <= 480px
   ========================================== */
@media (max-width: 480px) {
    nav.top-nav {
        padding: 4px 8px !important;
        min-height: 44px !important;
    }

    .logo {
        font-size: 0.8rem !important;
        gap: 5px !important;
    }

    .logo svg {
        width: 18px !important;
        height: 18px !important;
    }

    .nav-hamburger {
        font-size: 1.3rem !important;
        padding: 4px 8px !important;
        margin: 0 4px !important;
    }

    .user-area {
        max-width: 40% !important;
    }

    .user-area .auth-btn,
    .user-area button[onclick="showLoginModal()"] {
        padding: 3px 8px !important;
        font-size: 0.7rem !important;
    }

    .nav-item {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }

    /* 一键同款卡片更紧凑 */
    .samestyle-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .card-info {
        padding: 8px !important;
        gap: 4px !important;
    }

    .style-title {
        font-size: 0.8rem !important;
    }

    .apply-btn {
        padding: 6px !important;
        font-size: 0.8rem !important;
    }

    /* 精准生图侧边栏更紧凑 */
    .pc-sidebar {
        padding: 6px 8px !important;
    }

    .pc-sidebar h2 {
        font-size: 0.82rem !important;
        margin-bottom: 8px !important;
    }

    .pc-section {
        margin-bottom: 8px !important;
    }

    .pc-label {
        font-size: 0.72rem !important;
        margin-bottom: 4px !important;
    }

    .pc-mode-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important;
    }

    .pc-mode-card {
        padding: 5px 3px !important;
    }

    .pc-select, .pc-textarea {
        padding: 6px !important;
        font-size: 0.78rem !important;
    }

    .pc-textarea {
        min-height: 50px !important;
    }

    .pc-run-btn {
        padding: 8px !important;
        font-size: 0.8rem !important;
    }

    /* 精准生图空状态 */
    #pc-empty-state {
        padding-top: 20px !important;
    }

    #pc-empty-state div:first-child {
        font-size: 2.5rem !important;
    }

    #pc-empty-state div:last-child {
        font-size: 0.85rem !important;
    }

    /* 聊天消息 */
    .message-content {
        padding: 8px !important;
        gap: 8px !important;
    }

    .avatar {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.65rem !important;
    }

    .avatar-painter img,
    .avatar-painter .avatar-icon {
        width: 22px !important;
        height: 22px !important;
    }

    .avatar-painter .avatar-name {
        font-size: 0.7rem !important;
    }

    /* 输入区 */
    textarea {
        padding: 10px 40px 10px 10px !important;
        font-size: 0.9rem !important;
    }

    .send-btn {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }

    .upload-img-btn {
        padding: 8px !important;
    }

    .image-card img {
        max-height: 200px !important;
    }

    /* 工具卡片封面高度 */
    .card-cover {
        height: 70px !important;
        font-size: 2rem !important;
    }

    .card-body {
        padding: 10px !important;
    }

    .card-title {
        font-size: 0.9rem !important;
    }

    .card-desc {
        font-size: 0.78rem !important;
    }

    /* 聊天侧边栏宽度 */
    #chatSidebar {
        width: 260px !important;
    }

    /* 全局任务栏 */
    .global-task-bar {
        bottom: 6px !important;
        right: 6px !important;
        padding: 4px 8px !important;
        min-width: 90px !important;
    }

    .task-bar-text {
        font-size: 0.7rem !important;
    }

    /* 用户区域进一步紧凑 */
    .user-stats {
        gap: 3px !important;
    }

    .recharge-btn-small {
        padding: 1px 5px !important;
        font-size: 0.6rem !important;
    }

    .user-avatar-small {
        width: 24px !important;
        height: 24px !important;
    }

    .credits-display {
        font-size: 0.65rem !important;
    }
}