/**
 * macOS Web 模拟环境 - 响应式设计样式
 * 确保在不同设备上提供良好的用户体验
 */

/* 移动设备优先的响应式设计 */

/* 基础响应式调整 */
:root {
    --mobile-header-height: 44px;
    --mobile-dock-height: 60px;
    --tablet-header-height: 50px;
    --tablet-dock-height: 70px;
}

/* 小型移动设备（320px - 479px） */
@media (max-width: 479px) {
    /* 顶栏调整 */
    #menu-bar {
        height: var(--mobile-header-height);
        font-size: 14px;
    }
    
    .menu-item {
        padding: 0 8px;
        height: var(--mobile-header-height);
        line-height: var(--mobile-header-height);
    }
    
    .right-menu {
        font-size: 12px;
    }
    
    /* Dock栏调整 */
    #dock {
        height: var(--mobile-dock-height);
        padding: 4px 8px;
    }
    
    .dock-app {
        width: 36px;
        height: 36px;
        margin: 0 2px;
    }
    
    .dock-app-icon {
        width: 28px;
        height: 28px;
    }
    
    /* 桌面图标调整 */
    .desktop-icon {
        width: 64px;
        height: 80px;
    }
    
    .desktop-icon-icon {
        width: 40px;
        height: 40px;
    }
    
    .desktop-icon-label {
        font-size: 10px;
        max-width: 60px;
    }
    
    /* 窗口调整 */
    .window {
        min-width: 90vw !important;
        min-height: 60vh !important;
        border-radius: 8px;
    }
    
    .window-header {
        height: 40px;
    }
    
    .window-controls {
        gap: 4px;
        margin-left: 8px;
    }
    
    .window-close, .window-minimize, .window-maximize {
        width: 12px;
        height: 12px;
    }
    
    .window-title {
        font-size: 12px;
    }
    
    /* 右键菜单调整 */
    .context-menu {
        min-width: 150px;
        font-size: 12px;
    }
    
    .context-menu-item {
        padding: 10px 12px;
    }
    
    /* 通知调整 */
    .notification {
        max-width: 90vw;
        padding: 12px;
        font-size: 13px;
    }
    
    /* 应用内容调整 */
    .finder-sidebar {
        width: 120px;
        font-size: 12px;
    }
    
    .finder-files-view {
        font-size: 12px;
    }
    
    .terminal-content {
        font-size: 12px;
        line-height: 1.6;
    }
}

/* 中型移动设备（480px - 767px） */
@media (min-width: 480px) and (max-width: 767px) {
    /* 顶栏调整 */
    #menu-bar {
        height: var(--mobile-header-height);
        font-size: 15px;
    }
    
    .menu-item {
        padding: 0 10px;
        height: var(--mobile-header-height);
        line-height: var(--mobile-header-height);
    }
    
    /* Dock栏调整 */
    #dock {
        height: var(--mobile-dock-height);
        padding: 6px 12px;
    }
    
    .dock-app {
        width: 40px;
        height: 40px;
        margin: 0 3px;
    }
    
    .dock-app-icon {
        width: 32px;
        height: 32px;
    }
    
    /* 桌面图标调整 */
    .desktop-icon {
        width: 72px;
        height: 90px;
    }
    
    .desktop-icon-icon {
        width: 48px;
        height: 48px;
    }
    
    .desktop-icon-label {
        font-size: 11px;
        max-width: 70px;
    }
    
    /* 窗口调整 */
    .window {
        min-width: 85vw !important;
        min-height: 65vh !important;
    }
    
    /* 应用内容调整 */
    .finder-sidebar {
        width: 140px;
    }
}

/* 平板设备（768px - 1023px） */
@media (min-width: 768px) and (max-width: 1023px) {
    /* 顶栏调整 */
    #menu-bar {
        height: var(--tablet-header-height);
    }
    
    .menu-item {
        padding: 0 12px;
        height: var(--tablet-header-height);
        line-height: var(--tablet-header-height);
    }
    
    /* Dock栏调整 */
    #dock {
        height: var(--tablet-dock-height);
        padding: 8px 16px;
    }
    
    .dock-app {
        width: 48px;
        height: 48px;
        margin: 0 4px;
    }
    
    .dock-app-icon {
        width: 36px;
        height: 36px;
    }
    
    /* 桌面图标调整 */
    .desktop-icon {
        width: 80px;
        height: 100px;
    }
    
    /* 窗口调整 */
    .window {
        min-width: 80vw !important;
        min-height: 70vh !important;
    }
    
    /* 多窗口布局 - 平板上并排显示两个窗口 */
    .window-container.window-split-left {
        left: 10px !important;
        width: calc(50% - 15px) !important;
    }
    
    .window-container.window-split-right {
        right: 10px !important;
        left: auto !important;
        width: calc(50% - 15px) !important;
    }
}

/* 中型桌面设备（1024px - 1439px） */
@media (min-width: 1024px) and (max-width: 1439px) {
    /* 窗口调整 */
    .window {
        min-width: 700px !important;
    }
    
    /* 多窗口布局 */
    .window-container.window-split-left {
        left: 50px !important;
        width: calc(50% - 75px) !important;
    }
    
    .window-container.window-split-right {
        right: 50px !important;
        left: auto !important;
        width: calc(50% - 75px) !important;
    }
}

/* 大型桌面设备（1440px及以上） */
@media (min-width: 1440px) {
    /* 桌面图标网格调整 */
    .desktop-icons {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
    
    /* 多窗口布局 */
    .window-container.window-split-left {
        left: 100px !important;
        width: calc(50% - 125px) !important;
    }
    
    .window-container.window-split-right {
        right: 100px !important;
        left: auto !important;
        width: calc(50% - 125px) !important;
    }
    
    /* 三窗口布局 */
    .window-container.window-split-third {
        width: calc(33.333% - 50px) !important;
    }
}

/* 竖屏设备特殊处理 */
@media (orientation: portrait) {
    /* Dock栏调整为水平显示 */
    #dock {
        flex-direction: row !important;
        width: 100% !important;
        height: var(--mobile-dock-height) !important;
        border-radius: 15px 15px 0 0 !important;
        bottom: 0 !important;
        right: auto !important;
        left: 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .dock-app {
        margin: 0 4px !important;
    }
    
    /* 桌面图标调整为列布局 */
    .desktop-icons {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        padding: 20px;
    }
    
    /* 窗口调整 */
    .window {
        min-height: 60vh !important;
    }
}

/* 横屏设备特殊处理 */
@media (orientation: landscape) {
    /* 移动设备上隐藏部分菜单 */
    @media (max-width: 767px) {
        .menu-center .menu-item:not(:first-child) {
            display: none;
        }
    }
}

/* 触控设备交互增强 */
@media (hover: none) and (pointer: coarse) {
    /* 增大可点击区域 */
    .menu-item,
    .window-controls > div,
    .dock-app {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* 调整窗口标题栏高度 */
    .window-header {
        height: 50px;
    }
    
    /* 禁用悬停效果，使用触摸反馈 */
    .dock-app:hover {
        transform: none !important;
    }
    
    /* 触摸时的反馈效果 */
    .touch-feedback {
        transition: background-color 0.15s ease;
    }
    
    .touch-feedback:active {
        background-color: rgba(0, 0, 0, 0.1);
    }
}

/* 高分辨率屏幕优化 */
@media (-webkit-device-pixel-ratio: 2), (resolution: 192dpi) {
    /* 确保图标和图像在高分屏下清晰显示 */
    .dock-app-icon,
    .desktop-icon-icon {
        image-rendering: -webkit-optimize-contrast;
    }
    
    /* 微调UI元素以适应高清屏幕 */
    .window-controls > div {
        border-radius: 50%;
    }
}

/* 暗色模式响应式调整 */
@media (prefers-color-scheme: dark) {
    /* 暗色模式下的响应式调整 */
    .window {
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .window-header {
        background-color: #1e1e1e;
    }
}

/* 打印样式 */
@media print {
    /* 隐藏非打印内容 */
    #menu-bar,
    #dock,
    .desktop-icons {
        display: none !important;
    }
    
    /* 优化窗口打印 */
    .window {
        box-shadow: none !important;
        border: 1px solid #000 !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
    }
    
    .window-header {
        background-color: #fff !important;
        color: #000 !important;
    }
}

/* 辅助功能响应式调整 */
@media (prefers-reduced-motion: reduce) {
    /* 禁用或简化动画 */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    /* 简化窗口动画 */
    .window {
        transition: none !important;
    }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
    /* 增加对比度 */
    .window {
        border: 2px solid #000;
    }
    
    .window-header {
        border-bottom: 2px solid #000;
    }
    
    .menu-item {
        border: 1px solid transparent;
    }
    
    .menu-item:hover {
        border: 1px solid #000;
    }
}

/* 无障碍字体大小调整 */
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
    :root {
        font-size: 16px; /* 确保最小字体大小 */
    }
}

/* 特定设备优化 - iPad */
@media screen and (device-width: 768px) and (device-height: 1024px) {
    /* iPad特定优化 */
    #menu-bar {
        height: 55px;
    }
    
    .menu-item {
        height: 55px;
        line-height: 55px;
        font-size: 16px;
    }
    
    #dock {
        height: 80px;
        padding: 10px 20px;
    }
    
    .dock-app {
        width: 56px;
        height: 56px;
    }
    
    .dock-app-icon {
        width: 40px;
        height: 40px;
    }
}

/* 特定设备优化 - iPhone */
@media screen and (device-width: 375px) and (device-height: 812px) {
    /* iPhone X及更新机型特定优化 */
    #menu-bar {
        padding-top: env(safe-area-inset-top, 20px);
        height: calc(var(--mobile-header-height) + env(safe-area-inset-top, 20px));
    }
    
    #dock {
        padding-bottom: env(safe-area-inset-bottom, 15px);
        height: calc(var(--mobile-dock-height) + env(safe-area-inset-bottom, 15px));
    }
    
    .desktop-icons {
        padding-bottom: calc(var(--mobile-dock-height) + env(safe-area-inset-bottom, 15px) + 20px);
    }
}

/* 侧边栏响应式调整 */
@media (max-width: 1023px) {
    .finder-sidebar {
        position: fixed;
        left: -100%;
        top: var(--mobile-header-height);
        width: 240px;
        height: calc(100vh - var(--mobile-header-height) - var(--mobile-dock-height));
        background-color: #f5f5f7;
        z-index: 100;
        transition: left 0.3s ease;
        border-right: 1px solid #e0e0e0;
        padding: 10px 0;
    }
    
    .finder-sidebar.open {
        left: 0;
    }
    
    .toggle-sidebar-btn {
        display: block !important;
    }
}

/* 表格响应式处理 */
@media (max-width: 767px) {
    /* 表格在小屏幕上转换为卡片式布局 */
    table {
        display: block;
    }
    
    thead {
        display: none;
    }
    
    tbody {
        display: block;
    }
    
    tr {
        display: block;
        border: 1px solid #e0e0e0;
        margin-bottom: 10px;
        border-radius: 8px;
        overflow: hidden;
    }
    
    td {
        display: block;
        padding: 8px 12px;
        text-align: right;
        border-bottom: 1px solid #f0f0f0;
    }
    
    td:last-child {
        border-bottom: none;
    }
    
    td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
    }
}

/* 输入控件响应式调整 */
@media (max-width: 767px) {
    input[type="text"],
    input[type="search"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px; /* 防止iOS自动放大 */
        padding: 12px;
        border-radius: 8px;
    }
    
    button {
        min-height: 48px;
        font-size: 16px;
        padding: 12px 20px;
    }
}

/* 工具提示响应式调整 */
@media (max-width: 767px) {
    [title] {
        position: relative;
    }
    
    [title]:active::after {
        content: attr(title);
        position: fixed;
        bottom: calc(var(--mobile-dock-height) + 20px);
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        pointer-events: none;
    }
}

/* 加载状态响应式调整 */
@media (max-width: 767px) {
    .loading-spinner {
        width: 32px;
        height: 32px;
        border-width: 3px;
    }
}

/* 错误状态响应式调整 */
@media (max-width: 767px) {
    .error-message {
        padding: 16px;
        margin: 10px;
        font-size: 14px;
    }
}

/* 窗口内容滚动优化 */
@media (max-width: 1023px) {
    .window-content {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
    }
}

/* 多任务视图响应式调整 */
@media (max-width: 767px) {
    .mission-control-view {
        flex-direction: column;
        padding: 10px;
    }
    
    .mission-control-window {
        width: 100% !important;
        height: 150px !important;
        margin-bottom: 10px;
    }
}