/* ========================================
   手动模拟 - 专用样式文件
   ======================================== */

/* === CSS 变量定义（支持双色模式） === */
:root[data-theme="light"] {
    --manual-text-primary: #1C1C1E;
    --manual-text-secondary: #8E8E93;
    --manual-border-light: #E5E5EA;
    --manual-border-dark: #D1D1D6;
    --manual-hover-bg: #F5F5F7;
    --manual-placeholder-border: #C7C7CC;
}

:root[data-theme="dark"] {
    --manual-text-primary: #F5F5F7;
    --manual-text-secondary: #A1A1A6;
    --manual-border-light: #424245;
    --manual-border-dark: #3A3A3F;
    --manual-hover-bg: #2C2C31;
    --manual-placeholder-border: #6C6C70;
}

/* === 手动模拟内容容器 === */
.manual-simulation-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
    height: 100%;
    overflow: hidden;
}

/* === 消耗统计区 === */
.consumption-stats {
    background: var(--column-bg, #f8fafc);
    border-radius: var(--radius-lg, 12px);
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    flex-shrink: 0;
}

.stats-title {
    margin: 0 0 var(--spacing-sm, 0.5rem) 0;
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 600;
}

.stats-content {
    padding: var(--spacing-sm, 0.5rem);
    background: var(--affix-bg, #ffffff);
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--affix-border, rgba(0,0,0,0.1));
    min-height: 40px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
    align-items: flex-start;
    justify-content: flex-start;
}

.stats-empty {
    color: var(--text-secondary, #6E6E73);
    font-size: 0.875rem;
}

/* === 消耗统计分类行（按类别换行显示） === */
.consumption-category-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm, 0.5rem);
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding-top: 0.5rem;
    border-top: 1px solid var(--affix-border, rgba(0,0,0,0.1));
}

.consumption-category-row:first-child {
    padding-top: 0;
    border-top: none;
}

/* === 消耗统计项（图片显示） === */
.consumption-item-with-image {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #F5F5F7;
    border: 1px solid #E5E5EA;
    border-radius: var(--radius-sm, 4px);
    transition: all 0.2s ease;
    cursor: pointer;
}

.consumption-item-with-image:hover {
    background: #EBEBF0;
    border-color: var(--accent-blue, #007AFF);
    box-shadow: 0 2px 8px rgba(0,122,255,0.2);
    transform: scale(1.05);
}

.consumption-item-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}

.consumption-count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #5AC8FA 0%, #007AFF 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    border: 2px solid #FFFFFF;
    box-shadow: 0 2px 6px rgba(0,122,255,0.3);
    padding: 0 4px;
}

.consumption-item-text {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.consumption-item-count {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-left: 0.25rem;
}

/* === 模拟过程区 === */
.simulation-process {
    background: var(--column-bg, #f8fafc);
    border-radius: var(--radius-lg, 12px);
    padding: var(--spacing-md, 1rem);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0; /* 不允许收缩 */
    height: 300px; /* ✅ 固定高度 - 你可以调整这个值 */
}

.process-title {
    margin: 0 0 var(--spacing-sm, 0.5rem) 0;
    padding: 0;
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 600;
    flex-shrink: 0; /* ✅ 防止标题被压缩 */
    z-index: 10;
}

.process-log {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-sm, 0.5rem);
    background: var(--affix-bg, #ffffff);
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--affix-border, rgba(0,0,0,0.1));
    min-height: 0; /* ✅ 关键：允许 flex 子项以小于内容高度收缩 */
}

.log-empty {
    color: var(--text-secondary, #6E6E73);
    text-align: center;
    padding: var(--spacing-lg, 1.5rem);
    font-size: 0.875rem;
}

/* === 日志项样式优化（多行显示） === */
.log-item {
    transition: all 0.2s ease;
}

.log-item:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* === 底部操作区 === */
.bottom-actions {
    background: var(--column-bg, #f8fafc);
    border-radius: var(--radius-lg, 12px);
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md, 1rem);
    flex-shrink: 0;
}

.history-buttons,
.extra-buttons {
    display: flex;
    gap: var(--spacing-sm, 0.5rem);
}

.action-btn {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    background: var(--affix-bg, #ffffff);
    border: 2px solid var(--affix-border, rgba(0,0,0,0.1));
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    min-width: 80px;
    /* ✅ 触摸优化 */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

.action-btn:hover {
    background: var(--affix-hover, #f1f5f9);
    transform: translateY(-1px);
}

.action-btn:active {
    transform: translateY(0);
}

.action-btn.btn-reset {
    background: var(--accent-red);
    color: white;
    border-color: var(--accent-red);
}

.action-btn.btn-reset:hover {
    opacity: 0.9;
}

.action-btn.btn-extra {
    min-width: auto;
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

/* === 通货按钮网格区 - Apple风格 === */
.currency-grid-container {
    background: var(--bg-primary, #ffffff);
    border-radius: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 400px;
}

/* 默认桌面端：横向多列布局 */
.currency-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0;
}

/* Apple风格：移除厚重容器，简洁分隔 */
.currency-category {
    background: transparent;
    border-radius: 0;
    padding: var(--spacing-lg, 1.5rem) var(--spacing-md, 1rem);
    border: none;
    border-right: 1px solid var(--affix-border, rgba(0,0,0,0.08));
}

.currency-category:last-child {
    border-right: none;
}

/* Apple风格：标题更轻量 */
.category-header {
    font-size: 0.925rem; /* 14px - 放大 */
    font-weight: 600;
    color: var(--text-secondary, #8E8E93);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0;
    text-align: center;
    border: none;
    margin-bottom: var(--spacing-md, 1rem);
    background: transparent;
    border-radius: 0;
}

/* 默认桌面端：每个类别3列按钮 */
.currency-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md, 1rem);
}

/* Apple风格：透明背景 + 悬停反馈 */
.currency-btn {
    aspect-ratio: 1;
    background: transparent; /* 透明背景 */
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* Apple标准缓动 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-secondary, #6E6E73);
    box-shadow: none; /* 无阴影 */
    /* ✅ 触摸优化 */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

[data-theme="dark"] .currency-btn {
    background: transparent;
    box-shadow: none;
}

.currency-btn:hover {
    background: var(--bg-tertiary, #E8E8ED);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

[data-theme="dark"] .currency-btn:hover {
    background: rgba(255,255,255,0.12);
}

.currency-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.currency-btn.selected {
    background: var(--accent-blue, #007AFF);
    color: white;
    box-shadow: 0 2px 8px rgba(0,122,255,0.3);
}

/* ✅ 预兆类按钮激活时：深红色 */
.currency-btn[data-category="omen"].selected {
    background: #CC3333; /* 深红色 */
    box-shadow: 0 2px 8px rgba(204,51,51,0.4);
}

/* ✅ 催化剂按钮激活时：保持蓝色 */
.currency-btn[data-category="catalyst"].selected {
    background: var(--accent-blue, #007AFF);
    box-shadow: 0 2px 8px rgba(0,122,255,0.3);
}

.currency-icon {
    font-size: 1.2rem;
}

/* === 滚动条样式 - Apple风格 === */
.process-log::-webkit-scrollbar,
.currency-grid-container::-webkit-scrollbar {
    width: 4px; /* 更细的滚动条 */
}

.process-log::-webkit-scrollbar-track,
.currency-grid-container::-webkit-scrollbar-track {
    background: transparent;
}

.process-log::-webkit-scrollbar-thumb,
.currency-grid-container::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 2px;
}

[data-theme="dark"] .process-log::-webkit-scrollbar-thumb,
[data-theme="dark"] .currency-grid-container::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
}

.process-log::-webkit-scrollbar-thumb:hover,
.currency-grid-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.25);
}

[data-theme="dark"] .process-log::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .currency-grid-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.3);
}

/* === 响应式设计 === */

/* 中等屏幕优化 */
@media (max-width: 1200px) {
    .currency-grid-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

/* 📱 移动端完全重设 (768px及以下) */
@media (max-width: 768px) {
    /* === 整体布局 === */
    .manual-simulation-container {
        gap: var(--spacing-sm, 0.5rem);
    }
    
    /* === 消耗统计区 === */
    .consumption-stats {
        padding: var(--spacing-sm, 0.5rem);
    }
    
    .stats-title {
        font-size: 0.9375rem;
    }
    
    .stats-content {
        padding: var(--spacing-xs, 0.25rem);
        gap: var(--spacing-xs, 0.25rem);
    }
    
    .consumption-category-row {
        gap: var(--spacing-xs, 0.25rem);
        padding-top: var(--spacing-xs, 0.25rem);
    }
    
    .consumption-item-with-image {
        width: 36px;
        height: 36px;
    }
    
    .consumption-item-img {
        padding: 1px;
    }
    
    .consumption-count-badge {
        top: -5px;
        right: -5px;
        min-width: 18px;
        height: 18px;
        font-size: 0.625rem;
        border-width: 1.5px;
    }
    
    /* === 模拟过程区 === */
    .simulation-process {
        padding: var(--spacing-sm, 0.5rem);
        height: 250px;
    }
    
    .process-title {
        font-size: 0.9375rem;
        margin-bottom: var(--spacing-xs, 0.25rem);
    }
    
    .process-log {
        padding: var(--spacing-xs, 0.25rem);
        font-size: 0.8125rem;
    }
    
    .log-empty {
        padding: var(--spacing-md, 1rem);
        font-size: 0.8125rem;
    }
    
    /* === 底部操作区 === */
    .bottom-actions {
        flex-direction: column;
        gap: var(--spacing-sm, 0.5rem);
        padding: var(--spacing-sm, 0.5rem);
    }
    
    .history-buttons,
    .extra-buttons {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    /* ✅ 移动端按钮：放大一倍高度 */
    .action-btn {
        flex: 1;
        min-width: 70px;
        min-height: 44px; /* 苹果推荐的最小触摸尺寸 */
        padding: var(--spacing-md, 1rem);
        font-size: 0.9375rem; /* 15px */
        font-weight: 500;
    }
    
    .action-btn.btn-extra {
        font-size: 0.875rem; /* 14px */
        padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
        min-height: 40px;
    }
    
    /* ========================================
       🎯 移动端：Apple风格 - 简洁分隔
       ======================================== */
    
    .currency-grid-container {
        padding: 0;
        min-height: 300px;
        background: var(--bg-primary, #ffffff);
    }
    
    /* ✅ 纵向堆叠，移除间距 */
    .currency-grid-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 0;
    }
    
    /* ✅ Apple风格：类别之间用细线分隔 */
    .currency-category {
        width: 100%;
        padding: var(--spacing-lg, 1.5rem) var(--spacing-md, 1rem);
        box-sizing: border-box;
        border-right: none;
        border-bottom: 1px solid var(--affix-border, rgba(0,0,0,0.08));
        background: transparent;
    }
    
    .currency-category:last-child {
        border-bottom: none;
    }
    
    /* ✅ 标题：放大字号 */
    .category-header {
        font-size: 0.925rem; /* 14px - 移动端放大 */
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 0;
        margin-bottom: var(--spacing-md, 1rem);
        color: var(--text-secondary, #8E8E93);
    }
    
    /* ✅ 类别内按钮：固定6列（移动端） */
    .currency-buttons {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 0.5rem; /* 减小间距以适应6列布局 */
    }
    
    /* ✅ 按钮：移动端更大更易点击 */
    .currency-btn {
        aspect-ratio: 1;
        width: 100%;
        height: auto;
        font-size: 1.3rem;
        border-radius: 2px; /* 正方形，无圆角 */
        min-height: 64px; /* 最小触摸尺寸 */
    }
    
    .currency-icon {
        font-size: 1.1rem;
    }
}

/* === 超小屏幕优化 (手机竖屏 ≤480px) === */
@media (max-width: 480px) {
    /* === 消耗统计 === */
    .stats-title,
    .process-title {
        font-size: 0.875rem;
    }
    
    .consumption-item-with-image {
        width: 32px;
        height: 32px;
    }
    
    .consumption-count-badge {
        min-width: 16px;
        height: 16px;
        font-size: 0.5625rem;
        border-width: 1px;
    }
    
    /* === 模拟过程 === */
    .simulation-process {
        height: 220px;
    }
    
    .process-log {
        font-size: 0.75rem;
    }
    
    /* === 操作按钮（超小屏） === */
    .action-btn {
        min-width: 60px;
        min-height: 40px;
        padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
        font-size: 0.875rem;
    }
    
    .action-btn.btn-extra {
        font-size: 0.8125rem;
        min-height: 36px;
    }
    
    /* === 通货网格：超小屏适配 === */
    .currency-grid-container {
        padding: 0;
    }
    
    .currency-category {
        padding: var(--spacing-md, 1rem) var(--spacing-sm, 0.5rem);
    }
    
    .category-header {
        font-size: 0.8525rem; /* 13px - 超小屏也放大 */
        letter-spacing: 0.4px;
        margin-bottom: var(--spacing-sm, 0.5rem);
    }
    
    /* ✅ 超小屏：6列，紧凑间距 */
    .currency-buttons {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 0.4rem;
    }
    
    .currency-btn {
        aspect-ratio: 1;
        width: 100%;
        height: auto;
        font-size: 1.2rem;
        border-radius: 2px; /* 正方形，无圆角 */
        min-height: 56px;
    }
    
    .currency-icon {
        font-size: 1rem;
    }
}

/* === 横屏优化 (768px以下横屏) === */
@media (max-width: 768px) and (orientation: landscape) {
    .simulation-process {
        height: 200px;
    }
    
    .currency-grid-container {
        min-height: 250px;
    }
    
    /* ✅ 横屏：改为6列布局 */
    .currency-buttons {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 0.5rem;
    }
    
    .currency-btn {
        aspect-ratio: 1;
        width: 100%;
        height: auto;
        font-size: 1.25rem;
        border-radius: 2px; /* 正方形，无圆角 */
        min-height: 52px;
    }
    
    .currency-icon {
        font-size: 1rem;
    }
}