/* 才不是你的小麦 - 响应式设计增强 */

/* 移动端优先的基础设置 */
:root {
    --safe-area-top: env(safe-area-inset-top);
    --safe-area-bottom: env(safe-area-inset-bottom);
    --safe-area-left: env(safe-area-inset-left);
    --safe-area-right: env(safe-area-inset-right);
}

/* 触摸设备优化 */
@media (hover: none) {
    .nav-btn:hover,
    .action-btn:hover,
    .photo-card:hover,
    .effect-card:hover {
        transform: none;
    }
    
    .nav-btn:active,
    .action-btn:active,
    .photo-card:active,
    .effect-card:active {
        transform: scale(0.95);
    }
}

/* 触摸设备特殊样式 */
body.touch-device .nav-btn,
body.touch-device .action-btn,
body.touch-device .photo-card,
body.touch-device .effect-card {
    -webkit-tap-highlight-color: transparent;
}

/* 大屏幕 (1200px以上) */
@media (min-width: 1200px) {
    .main-content {
        max-width: 1400px;
        margin: 0 auto;
    }
    
    .day-photos {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

/* 平板和中等屏幕 (768px - 1199px) */
@media (max-width: 1199px) and (min-width: 768px) {
    .navbar {
        padding: 0 1.5rem;
    }
    
    .nav-menu {
        gap: 0.5rem;
    }
    
    .nav-btn {
        padding: 0.6rem 1rem;
    }
}

/* 小平板和大手机 (481px - 767px) */
@media (max-width: 767px) {
    /* 导航栏改为底部固定 */
    .navbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        height: 70px;
        flex-direction: row;
        padding: 0.5rem;
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.98);
        border-top: 1px solid var(--gray-200);
        border-bottom: none;
        z-index: 1000;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    .nav-brand {
        display: none;
    }
    
    .nav-menu {
        flex: 1;
        justify-content: space-around;
        gap: 0;
    }
    
    .nav-btn {
        flex-direction: column;
        padding: 0.5rem 0.25rem;
        font-size: 0.75rem;
        gap: 0.35rem;
        min-width: 70px;
        border-radius: 12px;
    }
    
    .nav-btn i {
        font-size: 1.5rem;
    }
    
    .nav-btn span {
        display: block;
        font-size: 0.7rem;
        font-weight: 600;
    }
    
    .nav-actions {
        position: fixed;
        top: 1rem;
        right: 1rem;
        gap: 0.5rem;
        z-index: 1001;
    }
    
    .action-btn {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: var(--shadow-md);
        border-radius: 50%;
    }
    
    /* 主内容区调整 - 增加更多内边距 */
    .main-content {
        padding: 1.25rem;
        padding-bottom: calc(100px + env(safe-area-inset-bottom));
        padding-top: 90px;
    }
    
    /* AI欢迎语移到顶部 */
    .ai-welcome {
        position: fixed;
        top: 1rem;
        left: 1rem;
        right: auto;
        flex-direction: row;
        gap: 0.75rem;
        z-index: 100;
    }
    
    .ai-avatar {
        width: 50px;
        height: 50px;
    }
    
    .ai-message {
        max-width: 220px;
    }
    
    .ai-message p {
        font-size: 0.85rem;
        padding: 0.75rem 1rem;
        line-height: 1.5;
    }
    
    /* 每日语录 - 更大更舒适 */
    .daily-quote {
        margin-bottom: 1.5rem !important;
        padding: 1.25rem;
        font-size: 1rem;
        line-height: 1.6;
    }
    
    /* 统计栏 - 改为网格布局更适合移动端 */
    .stats-bar {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        padding: 0.75rem 0;
        overflow: visible;
    }
    
    .stat-item {
        flex-shrink: 0;
        padding: 1rem;
        min-width: auto;
        border-radius: 16px;
    }
    
    .stat-value {
        font-size: 1.5rem;
        font-weight: 800;
    }
    
    /* 照片网格 - 更大间距更好触摸 */
    .day-photos {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .photo-card {
        border-radius: var(--radius-lg);
        min-height: 180px;
    }
    
    .photo-card img {
        object-fit: cover;
    }
    
    /* 模态框全屏 */
    .modal-content {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    
    .upload-modal,
    .effect-modal {
        max-width: 100%;
        margin: 0;
        border-radius: 0;
    }
    
    /* 特效选择网格 */
    .effect-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    /* 幻灯片模式 */
    .slideshow-controls {
        padding: 1rem;
    }
    
    .slideshow-btn {
        width: 45px;
        height: 45px;
    }
    
    /* 音乐播放器 */
    .music-player {
        left: 1rem;
        right: 1rem;
        bottom: calc(80px + env(safe-area-inset-bottom));
        border-radius: var(--radius-md);
        max-width: none;
        min-width: auto;
    }
    
    .music-player-main {
        gap: 0.75rem;
    }
    
    .music-info {
        font-size: 0.9rem;
    }
    
    .music-volume input {
        width: 60px;
    }
    
    /* 照片查看器 */
    .photo-viewer {
        flex-direction: column;
    }
    
    .photo-container {
        height: 50vh;
    }
    
    .photo-info {
        width: 100%;
        max-height: 40vh;
        overflow-y: auto;
    }
    
    /* 日期分组标题 */
    .day-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    /* 周视图 */
    .week-card {
        margin-bottom: 1rem;
    }
    
    .week-photos {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .month-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 小手机 (480px以下) */
@media (max-width: 480px) {
    /* 收起/展开按钮 */
    .navbar-toggle-btn {
        top: -28px;
        width: 45px;
        height: 28px;
        font-size: 0.9rem;
    }
    
    /* 更紧凑的导航但更好触摸 */
    .navbar {
        height: 65px;
    }
    
    /* 收起状态 */
    .navbar.collapsed {
        transform: translateY(calc(100% - 28px));
    }
    
    /* 收起时调整内容区域 */
    body.navbar-collapsed .main-content {
        padding-bottom: calc(38px + env(safe-area-inset-bottom)) !important;
    }
    
    body.navbar-collapsed .music-player {
        bottom: calc(38px + env(safe-area-inset-bottom)) !important;
    }
    
    .nav-btn {
        min-width: 65px;
        padding: 0.4rem 0.2rem;
    }
    
    .nav-btn i {
        font-size: 1.3rem;
    }
    
    .nav-btn span {
        font-size: 0.65rem;
    }
    
    .main-content {
        padding: 1rem;
        padding-bottom: calc(85px + env(safe-area-inset-bottom));
        padding-top: 75px;
    }
    
    /* AI欢迎语更小 */
    .ai-welcome {
        transform: scale(0.85);
        transform-origin: left top;
    }
    
    /* 每日语录 - 舒适阅读 */
    .daily-quote {
        padding: 1.1rem;
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    /* 统计栏保持2列 */
    .stats-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }
    
    .stat-item {
        padding: 0.8rem;
    }
    
    .stat-value {
        font-size: 1.3rem;
    }
    
    /* 照片保持2列更好看 */
    .day-photos {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }
    
    .week-grid {
        grid-template-columns: 1fr;
    }
    
    .week-photos {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* 日历更小 */
    .month-calendar {
        padding: 0.75rem;
    }
    
    .calendar-header h3 {
        font-size: 1rem;
    }
    
    .calendar-day {
        min-height: 50px;
        font-size: 0.75rem;
    }
    
    /* 特效卡片 */
    .effect-card {
        padding: 1rem;
    }
    
    .effect-preview {
        width: 60px;
        height: 60px;
    }
    
    /* 上传区域 */
    .upload-area {
        padding: 2rem 1rem;
    }
    
    .upload-area i {
        font-size: 2rem;
    }
    
    /* 按钮 */
    .btn {
        padding: 0.875rem 1.25rem;
        font-size: 0.9rem;
    }
    
    /* 模态框 */
    .modal-header {
        padding: 1rem;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    .modal-footer {
        padding: 1rem;
        flex-direction: column;
    }
    
    .modal-footer .btn {
        width: 100%;
    }
}

/* 超小屏幕 (360px以下) */
@media (max-width: 360px) {
    .nav-btn span {
        display: none;
    }
    
    .nav-btn i {
        font-size: 1.3rem;
    }
    
    .effect-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-bar {
        gap: 0.5rem;
    }
    
    .stat-item {
        padding: 0.5rem 0.75rem;
        min-width: 80px;
    }
    
    .stat-value {
        font-size: 1.1rem;
    }
}

/* 横屏手机 */
@media (max-height: 500px) and (orientation: landscape) {
    .navbar {
        height: 50px;
    }
    
    .main-content {
        padding-bottom: calc(70px + env(safe-area-inset-bottom));
    }
    
    .ai-welcome {
        display: none;
    }
    
    .modal-content {
        max-height: 95vh;
    }
    
    /* 横屏时照片网格改为2列 */
    .day-photos {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 暗黑模式支持 */
@media (prefers-color-scheme: dark) {
    :root {
        --cream: #1a1a2e;
        --white: #16213e;
        --gray-800: #e94560;
        --gray-600: #a0a0a0;
    }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* iPhone X+ 刘海屏适配 */
@supports (padding-top: env(safe-area-inset-top)) {
    .navbar {
        padding-top: env(safe-area-inset-top);
    }
    
    .main-content {
        padding-bottom: calc(90px + env(safe-area-inset-bottom));
    }
    
    .music-player {
        bottom: calc(80px + env(safe-area-inset-bottom));
    }
}

/* iOS Safari 底部安全区域 */
@supports (-webkit-touch-callout: none) {
    .navbar {
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    }
}

/* 移动端右侧操作菜单 */
@media (max-width: 767px) {
    /* 隐藏桌面端操作按钮 */
    .nav-actions {
        display: none;
    }
    
    /* 移动端操作菜单按钮 */
    .mobile-actions-toggle {
        position: fixed;
        top: 1rem;
        right: 1rem;
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: var(--shadow-md);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        color: var(--gray-800);
        z-index: 1002;
        transition: all var(--transition-normal);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    .mobile-actions-toggle:hover {
        background: white;
        box-shadow: var(--shadow-lg);
        color: var(--wheat-gold-dark);
    }
    
    .mobile-actions-toggle.active {
        background: linear-gradient(135deg, var(--wheat-gold), var(--sakura-pink));
        color: white;
    }
    
    /* 移动端操作菜单 - 水平排列，向上弹出 */
    .mobile-actions-menu {
        position: fixed;
        bottom: 70px;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 1001;
        padding: 1rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 0.75rem;
        transition: all var(--transition-normal);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
        transform: translateY(100%);
        opacity: 0;
        visibility: hidden;
    }
    
    .mobile-actions-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    /* 移动端操作按钮 */
    .mobile-action-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.35rem;
        padding: 0.75rem 1rem;
        border: none;
        border-radius: var(--radius-md);
        background: rgba(244, 208, 63, 0.1);
        color: var(--gray-800);
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        transition: all var(--transition-normal);
        min-width: 60px;
    }
    
    .mobile-action-btn:hover {
        background: linear-gradient(135deg, var(--wheat-gold), var(--sakura-pink));
        color: white;
        transform: translateY(-2px);
    }
    
    .mobile-action-btn i {
        font-size: 1.3rem;
    }
    
    .mobile-action-btn.hidden {
        display: none;
    }
    
    /* 移动端菜单遮罩 */
    .mobile-actions-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-normal);
    }
    
    .mobile-actions-overlay.active {
        opacity: 1;
        visibility: visible;
    }
}

/* 桌面端隐藏移动端菜单元素 */
@media (min-width: 768px) {
    .mobile-actions-toggle,
    .mobile-actions-menu,
    .mobile-actions-overlay {
        display: none !important;
    }
    
    .nav-actions {
        display: flex !important;
    }
}

/* 个人介绍页响应式 */
@media (max-width: 768px) {
    .profile-container {
        padding: 2rem 1.5rem;
    }
    
    .profile-header {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
    
    .profile-avatar {
        width: 100px;
        height: 100px;
    }
    
    .profile-info h1 {
        font-size: 1.5rem;
        justify-content: center;
    }
    
    .profile-stats {
        gap: 1.5rem;
        padding: 1rem;
    }
    
    .profile-stat .stat-number {
        font-size: 1.5rem;
    }
    
    .profile-content {
        padding: 0;
    }
    
    .style-tags {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .profile-container {
        padding: 1.5rem 1rem;
        border-radius: var(--radius-lg);
    }
    
    .profile-avatar {
        width: 80px;
        height: 80px;
        border-width: 3px;
    }
    
    .profile-info h1 {
        font-size: 1.3rem;
    }
    
    .profile-tag {
        font-size: 0.9rem;
    }
    
    .profile-bio {
        font-size: 1rem;
    }
    
    .profile-stats {
        gap: 1rem;
        flex-wrap: wrap;
    }
    
    .profile-stat {
        min-width: 80px;
    }
    
    .profile-content h2 {
        font-size: 1.1rem;
    }
    
    .style-tag {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
}