/* ==========================================
   移动端自适应框架
   设计稿基准: 375px (iPhone 6/7/8)
   ========================================== */

/* 1. 默认字体大小（PC端） */
:root {
    font-size: 16px;
}

/* 2. 移动端字体大小 - 使用 vw 实现自适应 */
@media (max-width: 768px) {
    :root {
        /* 375px 设计稿下，1rem = 16px，保持正常大小 */
        font-size: 4.27vw !important; /* 16/375*100 = 4.27vw */
    }
}

/* 3. 平板适配 */
@media (min-width: 481px) and (max-width: 768px) {
    :root {
        font-size: 2.08vw; /* 768px下，保持16px */
    }
}

/* 4. 小屏手机适配 (< 375px) */
@media (max-width: 374px) {
    :root {
        font-size: 5vw; /* 320px下，保持16px */
        min-width: 320px;
    }
}

/* ==========================================
   移动端全局重置
   ========================================== */
@media (max-width: 768px) {
    /* 禁用横向滚动 */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    /* 全局字体大小重置 */
    body {
        font-size: 14px !important;
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* 确保所有文本元素使用合适的大小 */
    p, span, div, li, a {
        font-size: inherit !important;
        line-height: 1.5 !important;
    }
    
    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 18px !important; }
    h4 { font-size: 16px !important; }
    h5 { font-size: 14px !important; }
    h6 { font-size: 13px !important; }
    
    /* 重置所有盒子模型 */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 处理图片自适应 */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* 点击延迟优化 */
    * {
        touch-action: manipulation;
    }
    
    /* 选中文本优化 */
    * {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    input, textarea {
        -webkit-user-select: auto;
        user-select: auto;
    }
}

/* ==========================================
   首页移动端布局重构
   ========================================== */
@media (max-width: 768px) {
    /* 侧边栏移动端样式 */
    .sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 70vw !important;
        max-width: 280px !important;
        height: 100vh !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 9999 !important;
        font-size: 14px !important;
    }
    
    .sidebar.active {
        transform: translateX(0) !important;
    }
    
    /* 侧边栏头部 */
    .sidebar-header {
        padding: 12px !important;
    }
    
    .sidebar-logo {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    .sidebar-logo img {
        width: 36px !important;
        height: 36px !important;
    }
    
    .brand-info h2 {
        font-size: 16px !important;
        margin: 0 !important;
    }
    
    .brand-info p {
        font-size: 11px !important;
        margin: 2px 0 0 !important;
    }
    
    /* 侧边栏用户区域 */
    .sidebar-user {
        position: relative !important;
        z-index: 10000 !important;
    }
    
    .user-menu-btn {
        z-index: 10001 !important;
    }
    
    /* 侧边栏遮罩层 */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9996;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .sidebar-overlay.active {
        display: block;
        opacity: 1;
    }
    
    /* 移动端菜单按钮 - 移动到顶部 */
    .mobile-menu-btn {
        display: flex !important;
        position: fixed;
        top: 6px;
        left: 6px;
        width: 32px;
        height: 32px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        align-items: center;
        justify-content: center;
        z-index: 9997;
        box-shadow: var(--shadow-sm);
        cursor: pointer;
    }
    
    .mobile-menu-btn i {
        font-size: 14px;
        color: var(--text-primary);
    }
    
    /* 隐藏PC端菜单按钮 */
    .sidebar-toggle {
        display: none !important;
    }
    
    /* 主内容区域 */
    .main-content {
        margin-left: 0 !important;
        padding: 84px 12px 20px !important;
        width: 100% !important;
    }
    
    /* 顶部内容头部 - 减少间隙 */
    .content-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 44px !important;
        padding: 8px 12px 8px 46px !important;
        margin: 0 !important;
        background: var(--bg-primary) !important;
        z-index: 9990 !important;
        border-bottom: 1px solid var(--border-color) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* 页面标题移动端样式 */
    .page-header {
        padding: 0 !important;
        margin-bottom: 16px !important;
    }
    
    .page-title {
        font-size: 24px !important;
        text-align: center !important;
        margin: 0 !important;
    }
    
    /* 选项卡容器 */
    .home-tabs-container {
        padding: 0 !important;
        margin: 0 -12px !important;
    }
    
    .home-tabs {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 12px 10px !important;
        gap: 8px !important;
        scrollbar-width: none !important;
    }
    
    .home-tabs::-webkit-scrollbar {
        display: none !important;
    }
    
    .home-tab-btn {
        flex: 0 0 auto !important;
        padding: 6px 14px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        min-width: auto !important;
        border-radius: 16px !important;
        height: 32px !important;
    }
    
    /* 选项卡内容 */
    .home-tab-content {
        padding: 0 !important;
    }
    
    .tab-pane {
        padding: 12px 0 !important;
    }
    
    /* 卡片网格布局 */
    .feature-grid,
    .tools-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 0 !important;
    }
    
    /* AI角色和书籍卡片 - 移动端两列显示 */
    .character-grid,
    .books-grid,
    .ai-characters-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    /* 提示词列表 - 移动端单列显示 */
    #promptSelectionList,
    #promptSavedList {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    .character-card,
    .book-card,
    .ai-character-card {
        width: 100% !important;
        max-width: none !important;
    }
    
    /* 功能卡片 */
    .feature-card,
    .tool-card {
        padding: 14px !important;
        border-radius: 10px !important;
        margin-bottom: 0 !important;
    }
    
    .feature-card h3,
    .tool-card h3 {
        font-size: 15px !important;
        margin-bottom: 6px !important;
    }
    
    .feature-card p,
    .tool-card p {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
    
    .feature-icon,
    .tool-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }
    
    /* 按钮样式 */
    .btn {
        padding: 8px 16px !important;
        font-size: 14px !important;
        border-radius: 18px !important;
    }
    
    .btn-primary {
        width: 100% !important;
        margin: 6px 0 !important;
    }
    
    /* 创作入口卡片 */
    .create-entry-card {
        padding: 20px 16px !important;
        margin-bottom: 12px !important;
    }
    
    .create-entry-card .card-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 24px !important;
    }
    
    .create-entry-card h3 {
        font-size: 18px !important;
        margin: 12px 0 8px !important;
    }
    
    /* 模态框移动端优化 */
    .modal {
        padding: 0 !important;
        z-index: 10000 !important;
    }
    
    .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        height: auto !important;
        max-height: 90vh !important;
        margin: 5vh auto !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    
    .modal-header {
        padding: 14px 16px !important;
        position: sticky !important;
        top: 0 !important;
        background: var(--bg-card) !important;
        z-index: 10001 !important;
        border-bottom: 1px solid var(--border-color) !important;
    }
    
    .modal-body {
        padding: 16px !important;
        overflow-y: auto !important;
        max-height: calc(90vh - 120px) !important;
    }
    
    .modal-footer {
        padding: 14px 16px !important;
        position: sticky !important;
        bottom: 0 !important;
        background: var(--bg-card) !important;
        border-top: 1px solid var(--border-color) !important;
    }
    
    /* 表单输入框 */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
        padding: 12px !important;
        border-radius: 8px !important;
    }
    
    /* 底部固定按钮区域 */
    .mobile-bottom-actions {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-card);
        border-top: 1px solid var(--border-color);
        padding: 12px;
        gap: 12px;
        z-index: 9996;
    }
    
    .mobile-bottom-actions .btn {
        flex: 1;
        margin: 0 !important;
    }
    
    /* 用户信息区域 */
    .user-info-section {
        padding: 12px !important;
        font-size: 13px !important;
    }
    
    .user-avatar {
        width: 36px !important;
        height: 36px !important;
    }
    
    .user-name {
        font-size: 13px !important;
    }
    
    .user-balance {
        font-size: 11px !important;
    }
    
    /* 导航菜单项 */
    .nav-menu {
        padding: 0 !important;
    }
    
    .nav-item {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }
    
    .nav-item i {
        font-size: 14px !important;
        width: 18px !important;
        margin-right: 10px !important;
    }
    
    /* 统计卡片 */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    .stat-card {
        padding: 10px !important;
    }
    
    .stat-value {
        font-size: 18px !important;
    }
    
    .stat-label {
        font-size: 11px !important;
    }
    
    /* 公告栏 */
    .announcement-section {
        padding: 10px !important;
        margin: 0 0 10px !important;
        border-radius: 8px !important;
    }
    
    .announcement-title {
        font-size: 13px !important;
    }
    
    .announcement-content {
        font-size: 12px !important;
        max-height: 80px !important;
    }
    
    /* 用户下拉菜单 - 移动端优化 */
    .user-dropdown {
        position: fixed !important;
        top: auto !important;
        bottom: 60px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        z-index: 10002 !important;
        max-width: calc(100vw - 24px) !important;
    }
    
    /* 快速操作按钮 */
    .quick-actions {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        padding: 10px 0 !important;
    }
    
    .quick-action-btn {
        padding: 10px 6px !important;
        font-size: 11px !important;
        text-align: center !important;
    }
    
    .quick-action-btn i {
        display: block !important;
        font-size: 20px !important;
        margin-bottom: 4px !important;
    }
    
    /* 顶部快捷按钮 - 移动端优化 */
    .header-actions {
        display: flex !important;
        gap: 4px !important;
        flex-wrap: nowrap !important;
    }
    
    .header-action-btn {
        padding: 4px 8px !important;
        font-size: 11px !important;
        border-radius: 12px !important;
        white-space: nowrap !important;
        min-width: auto !important;
        height: 28px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* 移动端隐藏图标 */
    .header-action-btn i {
        display: none !important;
    }
    
    .header-action-btn span {
        display: inline !important;
        font-size: 11px !important;
        font-weight: 500 !important;
    }
    
    /* API按钮 */
    .api-btn span::before {
        content: 'API' !important;
    }
    
    .api-btn span {
        font-size: 0 !important;
    }
    
    .api-btn span::before {
        font-size: 11px !important;
    }
    
    /* 充值按钮 */
    .recharge-btn span::before {
        content: '充值' !important;
    }
    
    .recharge-btn span {
        font-size: 0 !important;
    }
    
    .recharge-btn span::before {
        font-size: 11px !important;
    }
    
    /* 邀请按钮 */
    .invitation-btn span::before {
        content: '邀请' !important;
    }
    
    .invitation-btn span {
        font-size: 0 !important;
    }
    
    .invitation-btn span::before {
        font-size: 11px !important;
    }
    
    /* 消息按钮 */
    .messages-btn span::before {
        content: '消息' !important;
    }
    
    .messages-btn span {
        font-size: 0 !important;
    }
    
    .messages-btn span::before {
        font-size: 11px !important;
    }
}

/* ==========================================
   小屏手机特殊优化 (< 375px)
   ========================================== */
@media (max-width: 374px) {
    /* 更紧凑的布局 */
    .main-content {
        padding: 84px 8px 20px !important;
    }
    
    .feature-card,
    .tool-card {
        padding: 12px !important;
    }
    
    .btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
    
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
    
    .quick-actions {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* 提示词列表 - 小屏手机单列显示 */
    #promptSelectionList,
    #promptSavedList {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

/* ==========================================
   平板优化 (481px - 768px)
   ========================================== */
@media (min-width: 481px) and (max-width: 768px) {
    /* 侧边栏在平板上可以更宽 */
    .sidebar {
        width: 320px !important;
        max-width: 40vw !important;
    }
    
    /* 网格布局调整为2列 */
    .feature-grid,
    .tools-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    
    .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    /* 快速操作4列 */
    .quick-actions {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    /* 提示词列表 - 平板两列显示 */
    #promptSelectionList,
    #promptSavedList {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    /* 主内容区域增加内边距 */
    .main-content {
        padding: 84px 20px 20px !important;
    }
}

/* ==========================================
   触摸优化
   ========================================== */
@media (pointer: coarse) {
    /* 增大可点击区域 */
    button, 
    .btn,
    a,
    .clickable {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* 链接间距 */
    a {
        display: inline-block;
        padding: 8px 4px;
    }
    
    /* 复选框和单选框 */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 20px;
        min-height: 20px;
    }
}

/* ==========================================
   iOS特殊处理
   ========================================== */
@supports (-webkit-touch-callout: none) {
    /* iOS安全区域适配 */
    .main-content {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
    
    .mobile-bottom-actions {
        padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }
    
    /* 修复iOS输入框问题 */
    input, textarea, select {
        -webkit-appearance: none;
        appearance: none;
        border-radius: 0;
    }
}

/* ==========================================
   横屏模式处理
   ========================================== */
@media (max-width: 768px) and (orientation: landscape) {
    /* 横屏时隐藏部分元素节省空间 */
    .page-header {
        display: none !important;
    }
    
    .main-content {
        padding-top: 84px !important;
    }
    
    /* 调整网格布局 */
    .feature-grid,
    .tools-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .modal-content {
        height: 100vh !important;
        max-height: 100vh !important;
    }
}

/* ==========================================
   提示词模态框响应式布局（所有设备）
   ========================================== */

/* 大屏幕（>1200px）：3列 */
@media (min-width: 1200px) {
    #promptSelectionList,
    #promptSavedList {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }
}

/* 中等屏幕（769px-1199px）：2列 */
@media (min-width: 769px) and (max-width: 1199px) {
    #promptSelectionList,
    #promptSavedList {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
}