/* 移动端响应式设计系统 */

/* CSS变量定义 - 统一断点和设计令牌 */
:root {
    /* 响应式断点 */
    --breakpoint-xs: 320px;
    --breakpoint-sm: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1440px;
    
    /* 移动端专用间距 */
    --mobile-padding-xs: 8px;
    --mobile-padding-sm: 12px;
    --mobile-padding-md: 16px;
    --mobile-padding-lg: 20px;
    --mobile-padding-xl: 24px;
    
    /* 移动端字体大小 */
    --mobile-font-xs: 12px;
    --mobile-font-sm: 14px;
    --mobile-font-md: 16px;
    --mobile-font-lg: 18px;
    --mobile-font-xl: 20px;
    
    /* 触摸目标最小尺寸 */
    --touch-target-min: 44px;
    
    /* 移动端颜色 */
    --mobile-text-color: #374151;
    --mobile-text-light: #6b7280;
    --mobile-border-color: #e5e7eb;
    --mobile-bg-light: #f9fafb;
    
    /* 动画和过渡 */
    --mobile-transition: all 0.3s ease;
    --mobile-transition-fast: all 0.15s ease;
}

/* 移动端基础重置和优化 */
@media (max-width: 768px) {
    /* 提高移动端触摸性能 */
    * {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }
    
    /* 优化移动端滚动 */
    body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    /* 移动端字体优化 */
    body, input, textarea, select, button {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    
    /* 防止移动端缩放输入框 */
    input, textarea, select {
        font-size: var(--mobile-font-md);
    }
}


/* 移动端容器和布局优化 */
@media (max-width: 768px) {
    .container {
        padding-left: var(--mobile-padding-md);
        padding-right: var(--mobile-padding-md);
    }
    
    /* 移动端卡片优化 */
    .form-card, .result-card {
        margin: var(--mobile-padding-sm) 0;
        padding: var(--mobile-padding-md);
        border-radius: 8px;
    }
    
    /* 移动端按钮优化 */
    .btn, .auth-btn, .analyze-submit-btn {
        min-height: var(--touch-target-min);
        font-size: var(--mobile-font-md);
        padding: var(--mobile-padding-sm) var(--mobile-padding-md);
        border-radius: 8px;
        transition: var(--mobile-transition-fast);
    }
    
    /* 移动端表单优化 */
    .form-input, .form-select, .form-textarea {
        min-height: var(--touch-target-min);
        font-size: var(--mobile-font-md);
        padding: var(--mobile-padding-sm);
        border-radius: 6px;
    }
    
    /* 移动端导航优化 */
    .navbar {
        padding: var(--mobile-padding-sm) var(--mobile-padding-md);
        height: auto;
        min-height: 60px;
    }
    
    .navbar-right {
        gap: var(--mobile-padding-xs);
    }
    
    
    /* 移动端侧边栏优化 */
    .gpt-sidebar {
        width: 85vw;
        max-width: 320px;
        padding: var(--mobile-padding-md);
    }
    
    .sidebar-block {
        padding: var(--mobile-padding-sm);
        margin-bottom: var(--mobile-padding-xs);
        border-radius: 8px;
        min-height: var(--touch-target-min);
    }
    
    .block-title {
        font-size: var(--mobile-font-md);
        line-height: 1.4;
    }
    
    .block-description {
        font-size: var(--mobile-font-sm);
        line-height: 1.3;
    }
}

/* 小屏幕优化 (480px及以下) */
@media (max-width: 480px) {
    .container {
        padding-left: var(--mobile-padding-sm);
        padding-right: var(--mobile-padding-sm);
    }
    
    .form-card, .result-card {
        margin: var(--mobile-padding-xs) 0;
        padding: var(--mobile-padding-sm);
        border-radius: 6px;
    }
    
    /* 小屏幕文字优化 */
    .hero-title, .analyze-hero-title {
        font-size: var(--mobile-font-xl);
        line-height: 1.3;
    }
    
    .hero-subtitle, .analyze-hero-subtitle {
        font-size: var(--mobile-font-md);
        line-height: 1.4;
    }
    
    .hero-description, .analyze-hero-description {
        font-size: var(--mobile-font-sm);
        line-height: 1.5;
    }
    
    /* 小屏幕导航优化 */
    .navbar {
        padding: var(--mobile-padding-xs) var(--mobile-padding-sm);
        min-height: 56px;
    }
    
    .nav-user-link, .auth-btn {
        font-size: var(--mobile-font-sm);
        padding: var(--mobile-padding-xs) var(--mobile-padding-sm);
    }
    
    /* 小屏幕侧边栏优化 */
    .gpt-sidebar {
        width: 90vw;
        max-width: 280px;
        padding: var(--mobile-padding-sm);
    }
    
    .sidebar-section {
        margin-bottom: var(--mobile-padding-md);
    }
    
    .sidebar-title {
        font-size: var(--mobile-font-md);
        margin-bottom: var(--mobile-padding-sm);
    }
}

/* 极小屏幕优化 (320px及以下) */
@media (max-width: 320px) {
    .container {
        padding-left: var(--mobile-padding-xs);
        padding-right: var(--mobile-padding-xs);
    }
    
    .form-card, .result-card {
        padding: var(--mobile-padding-xs);
        border-radius: 4px;
    }
    
    /* 极小屏幕文字进一步优化 */
    .hero-title, .analyze-hero-title {
        font-size: var(--mobile-font-lg);
    }
    
    .hero-subtitle, .analyze-hero-subtitle {
        font-size: var(--mobile-font-sm);
    }
    
    /* 极小屏幕导航优化 */
    .navbar {
        padding: var(--mobile-padding-xs);
        min-height: 52px;
    }
    
    .brand img {
        height: 32px;
    }
    
    /* 极小屏幕按钮优化 */
    .btn, .auth-btn, .analyze-submit-btn {
        font-size: var(--mobile-font-sm);
        padding: var(--mobile-padding-xs) var(--mobile-padding-sm);
    }
    
    /* 极小屏幕侧边栏优化 */
    .gpt-sidebar {
        width: 95vw;
        max-width: 260px;
        padding: var(--mobile-padding-xs);
    }
}

/* 移动端交互增强 */
@media (max-width: 768px) {
    /* 增强点击反馈 */
    .sidebar-block:active,
    .btn:active,
    .auth-btn:active,
    .analyze-submit-btn:active {
        transform: scale(0.98);
        transition: var(--mobile-transition-fast);
    }
    
    /* 移动端焦点样式 */
    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
        outline: none;
    }
    
    /* 移动端悬停效果替换为激活效果 */
    .sidebar-block:hover {
        background-color: initial;
    }
    
    .sidebar-block:active {
        background-color: #f3f4f6;
    }
}

/* 移动端模态框优化 */
@media (max-width: 768px) {
    .modal-overlay {
        padding: var(--mobile-padding-sm);
    }
    
    .modal-content {
        width: 95vw;
        max-width: 95vw;
        max-height: 90vh;
        margin: auto;
        border-radius: 12px;
        overflow: hidden;
    }
    
    .modal-header {
        padding: var(--mobile-padding-md);
        border-bottom: 1px solid var(--mobile-border-color);
    }
    
    .modal-body {
        padding: var(--mobile-padding-md);
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .modal-footer {
        padding: var(--mobile-padding-md);
        border-top: 1px solid var(--mobile-border-color);
    }
}

/* 移动端网格和布局优化 */
@media (max-width: 768px) {
    .features-grid,
    .team-stats,
    .form-row {
        grid-template-columns: 1fr;
        gap: var(--mobile-padding-md);
    }
    
    .flex-row {
        flex-direction: column;
        gap: var(--mobile-padding-md);
    }
    
    .cta-video-content {
        flex-direction: column;
        gap: var(--mobile-padding-lg);
    }
}

/* 移动端图片和媒体优化 */
@media (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
    }
    
    .hero-logo-img,
    .brand img {
        height: auto;
        max-height: 40px;
    }
    
    .demo-video {
        width: 100%;
        height: auto;
        border-radius: 8px;
    }
    
    .video-container {
        max-width: 100%;
        aspect-ratio: 16/9;
        overflow: hidden;
        border-radius: 8px;
    }
}

/* 移动端性能优化 */
@media (max-width: 768px) {
    /* 减少不必要的阴影和渐变 */
    .feature-card,
    .sidebar-block,
    .form-card {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    /* 优化动画性能 */
    .loading-spinner,
    .spinner-ring {
        will-change: transform;
    }
    
    /* 减少重绘 */
    .navbar,
    .gpt-sidebar {
        will-change: transform;
    }
}

/* 横屏模式优化 */
@media (max-width: 768px) and (orientation: landscape) {
    .navbar {
        min-height: 48px;
        padding: var(--mobile-padding-xs) var(--mobile-padding-md);
    }
    
    .hero-section,
    .analyze-hero-section {
        padding: var(--mobile-padding-lg) 0;
    }
    
    .modal-content {
        max-height: 85vh;
    }
    
    .modal-body {
        max-height: 65vh;
    }
}

/* 暗色模式下的移动端优化 */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
    :root {
        --mobile-text-color: #f3f4f6;
        --mobile-text-light: #d1d5db;
        --mobile-border-color: #374151;
        --mobile-bg-light: #1f2937;
    }
}

/* 高对比度模式优化 */
@media (max-width: 768px) and (prefers-contrast: high) {
    .btn, .auth-btn, .analyze-submit-btn {
        border: 2px solid currentColor;
    }
    
    .form-input, .form-select, .form-textarea {
        border: 2px solid var(--mobile-text-color);
    }
    
    .sidebar-block:focus,
    .btn:focus,
    .auth-btn:focus {
        outline: 3px solid #0066cc;
        outline-offset: 2px;
    }
}

/* 动画减少偏好适配 */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .loading-spinner {
        animation: none;
    }
    
    .spinner-ring {
        animation: none;
        border-top-color: var(--mobile-text-color);
    }
}