/* ============================================
   移动端触摸交互优化样式表
   Mobile Touch Interaction Optimization
   ============================================ */

/* ============================================
   1. 触摸友好的基础设置
   Touch-Friendly Base Settings
   ============================================ */

:root {
    /* 触摸目标最小尺寸 (Apple & Google 推荐) */
    --touch-target-min: 44px;
    --touch-spacing: 8px;

    /* 字体大小 (避免浏览器自动缩放) */
    --font-size-body: 16px;
    --font-size-small: 14px;
    --font-size-large: 18px;
    --font-size-h1: 28px;
    --font-size-h2: 24px;
    --font-size-h3: 20px;

    /* 行高 */
    --line-height-body: 1.6;
    --line-height-heading: 1.3;

    /* 触摸反馈颜色 */
    --tap-highlight: rgba(201, 169, 97, 0.3);
    --ripple-color: rgba(201, 169, 97, 0.4);
    --active-bg: rgba(201, 169, 97, 0.1);
}

/* ============================================
   2. 全局触摸优化
   Global Touch Optimizations
   ============================================ */

* {
    /* 禁用iOS默认的触摸高亮 */
    -webkit-tap-highlight-color: transparent;

    /* 优化触摸滚动性能 */
    -webkit-overflow-scrolling: touch;

    /* 防止双击缩放 */
    touch-action: manipulation;
}

body {
    /* 基础字体大小（避免移动端浏览器自动缩放） */
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);

    /* 优化字体渲染 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 禁用按钮和链接上的文本选择 */
button,
a,
.btn,
.option,
.suggestion-btn,
.nav-links a {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* 防止长按时出现上下文菜单 */
    -webkit-touch-callout: none;
}

/* ============================================
   3. 按钮触摸优化
   Button Touch Optimizations
   ============================================ */

/* 所有按钮最小尺寸 44x44px */
.btn,
button,
.option,
.suggestion-btn,
input[type="submit"],
input[type="button"] {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: 12px 20px;

    /* 按钮间距 */
    margin: var(--touch-spacing);

    /* 触摸时的过渡效果 */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* 确保按钮可点击 */
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* 主按钮触摸优化 */
.btn-primary {
    font-size: var(--font-size-large);
    font-weight: 600;
    padding: 14px 28px;
    min-height: 48px;
}

/* 次要按钮 */
.btn-secondary {
    font-size: var(--font-size-body);
    padding: 12px 24px;
    min-height: var(--touch-target-min);
}

/* ============================================
   4. 触摸反馈效果
   Touch Feedback Effects
   ============================================ */

/* Active状态 - 按下时的视觉反馈 */
.btn:active,
button:active,
.option:active,
.suggestion-btn:active {
    transform: scale(0.97);
    background-color: var(--active-bg);
}

/* 涟漪效果容器 */
.btn::before,
button::before,
.option::before,
.suggestion-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--ripple-color);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

/* 点击时触发涟漪效果 */
.btn:active::before,
button:active::before,
.option:active::before,
.suggestion-btn:active::before {
    width: 300px;
    height: 300px;
}

/* 自定义tap高亮颜色 */
.btn,
button,
.option,
.suggestion-btn,
a {
    -webkit-tap-highlight-color: var(--tap-highlight);
}

/* ============================================
   5. 选项卡片触摸优化
   Option Cards Touch Optimization
   ============================================ */

.option {
    /* 增大点击区域 */
    padding: 20px;
    min-height: 80px;

    /* 清晰的触摸边界 */
    border: 2px solid #e9ecef;
    border-radius: 12px;

    /* 增加间距 */
    margin-bottom: 16px;

    /* 触摸反馈 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.option:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.option-title {
    font-size: var(--font-size-large);
    font-weight: 700;
    line-height: var(--line-height-heading);
    margin-bottom: 8px;
}

.option-desc {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}

/* ============================================
   6. 导航链接触摸优化
   Navigation Touch Optimization
   ============================================ */

.nav-links a {
    display: inline-block;
    min-height: var(--touch-target-min);
    padding: 12px 16px;
    margin: 4px;
    line-height: 1.4;

    /* 触摸反馈 */
    transition: all 0.2s ease;
}

.nav-links a:active {
    background-color: var(--active-bg);
    border-radius: 8px;
}

/* ============================================
   7. 输入框触摸优化
   Input Touch Optimization
   ============================================ */

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
#user-input {
    /* 最小触摸区域 */
    min-height: var(--touch-target-min);

    /* 易读字体大小（避免iOS自动缩放） */
    font-size: var(--font-size-body);

    /* 舒适的内边距 */
    padding: 12px 16px;

    /* 清晰的边框 */
    border: 2px solid #e9ecef;
    border-radius: 8px;

    /* 焦点状态 */
    transition: all 0.3s ease;
}

input:focus,
textarea:focus,
#user-input:focus {
    outline: none;
    border-color: var(--accent-gold, #C9A961);
    box-shadow: 0 0 0 4px var(--tap-highlight);
}

/* ============================================
   8. 快捷建议按钮优化
   Quick Suggestion Buttons
   ============================================ */

.suggestion-btn {
    font-size: var(--font-size-body);
    padding: 10px 18px;
    min-height: var(--touch-target-min);

    /* 增加间距 */
    margin: 6px;

    /* 触摸反馈 */
    border-radius: 8px;
    transition: all 0.2s ease;
}

.suggestion-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ============================================
   9. 滚动区域优化
   Scroll Area Optimization
   ============================================ */

.conversation-history,
.status-panel,
.content {
    /* iOS平滑滚动 */
    -webkit-overflow-scrolling: touch;

    /* 优化滚动性能 */
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

/* 自定义滚动条（移动端） */
.conversation-history::-webkit-scrollbar,
.status-panel::-webkit-scrollbar {
    width: 8px;
}

.conversation-history::-webkit-scrollbar-thumb,
.status-panel::-webkit-scrollbar-thumb {
    background: rgba(201, 169, 97, 0.5);
    border-radius: 4px;
    min-height: 40px; /* 触摸友好的最小高度 */
}

/* ============================================
   10. Toast通知触摸优化
   Toast Notification Touch Optimization
   ============================================ */

.toast,
.notification,
.feedback {
    min-height: 60px;
    padding: 16px 20px;
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    border-radius: 12px;

    /* 可点击关闭 */
    cursor: pointer;
    touch-action: manipulation;
}

.feedback-title {
    font-size: var(--font-size-large);
    font-weight: 700;
    margin-bottom: 8px;
}

/* ============================================
   11. 响应式触摸优化
   Responsive Touch Optimization
   ============================================ */

@media (max-width: 768px) {
    /* 增加移动端的触摸目标尺寸 */
    :root {
        --touch-target-min: 48px;
        --touch-spacing: 10px;
    }

    /* 增大移动端字体 */
    body {
        font-size: 17px;
    }

    .btn-primary {
        font-size: 19px;
        padding: 16px 32px;
        min-height: 52px;
    }

    .option {
        padding: 24px;
        min-height: 100px;
        margin-bottom: 20px;
    }

    .option-title {
        font-size: 20px;
    }

    .option-desc {
        font-size: 17px;
    }

    /* 导航链接堆叠显示，增大触摸面积 */
    .nav-links {
        padding: 12px;
    }

    .nav-links a {
        display: block;
        text-align: center;
        min-height: 48px;
        margin: 8px 0;
        padding: 14px 20px;
        border-radius: 8px;
        background: white;
    }

    /* 输入区域优化 */
    #user-input {
        font-size: 17px;
        min-height: 52px;
        padding: 14px 18px;
    }

    /* 建议按钮横向滚动 */
    .quick-suggestions {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding: 8px 0;
        -webkit-overflow-scrolling: touch;
    }

    .suggestion-btn {
        flex-shrink: 0;
        min-height: 48px;
        padding: 12px 20px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    /* 小屏幕更大的触摸区域 */
    :root {
        --touch-target-min: 52px;
    }

    .btn-primary {
        width: 100%;
        min-height: 56px;
        font-size: 20px;
    }

    .btn-secondary {
        width: 100%;
        min-height: 52px;
    }

    /* 全宽按钮组 */
    .input-actions {
        flex-direction: column;
        gap: 12px;
    }

    .input-actions .btn {
        width: 100%;
    }
}

/* ============================================
   12. 加载状态触摸优化
   Loading State Touch Optimization
   ============================================ */

.loading,
.btn:disabled,
button:disabled {
    /* 禁用触摸交互 */
    pointer-events: none;
    opacity: 0.6;

    /* 视觉反馈 */
    cursor: not-allowed;
}

/* 加载动画 */
.btn.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spinner 0.8s linear infinite;
}

@keyframes spinner {
    to { transform: rotate(360deg); }
}

/* ============================================
   13. 手势支持提示
   Gesture Support Hints
   ============================================ */

/* 可滑动区域提示 */
.swipeable::after {
    content: '← 滑动查看更多 →';
    display: block;
    text-align: center;
    font-size: 12px;
    color: var(--text-light, #999);
    padding: 8px;
    opacity: 0.7;
}

/* 下拉刷新提示 */
.pull-to-refresh {
    text-align: center;
    padding: 20px;
    color: var(--text-light, #999);
    font-size: 14px;
}

/* ============================================
   14. 状态面板触摸优化
   Status Panel Touch Optimization
   ============================================ */

.stat-item {
    padding: 10px;
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-value {
    font-size: var(--font-size-large);
    font-weight: 700;
}

/* 进度条触摸友好 */
.progress-bar {
    min-height: 12px;
    border-radius: 6px;
    margin: 8px 0;

    /* 可点击查看详情 */
    cursor: pointer;
    transition: all 0.3s ease;
}

.progress-bar:active {
    transform: scaleY(1.2);
}

/* ============================================
   15. 辅助功能触摸优化
   Accessibility Touch Optimization
   ============================================ */

/* 焦点可见性 */
*:focus-visible {
    outline: 3px solid var(--accent-gold, #C9A961);
    outline-offset: 2px;
    border-radius: 4px;
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
    .btn,
    button,
    .option {
        border-width: 3px;
    }
}

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

/* ============================================
   16. 消息气泡触摸优化
   Message Bubble Touch Optimization
   ============================================ */

.message-bubble {
    padding: 16px 18px;
    min-height: 60px;
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);

    /* 长按可复制 */
    user-select: text;
    -webkit-user-select: text;
}

.message-text {
    font-size: var(--font-size-body);
    line-height: 1.7;
}

/* ============================================
   17. 卡片触摸优化
   Card Touch Optimization
   ============================================ */

.company-card,
.panel-section,
.scene-info {
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.company-name,
.section-title {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-heading);
    font-weight: 700;
    margin-bottom: 12px;
}

/* ============================================
   18. 技能按钮触摸优化
   Skill Item Touch Optimization
   ============================================ */

.skill-item {
    padding: 14px;
    min-height: 60px;
    margin-bottom: 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.skill-item:active {
    transform: scale(0.98);
    background-color: var(--active-bg);
}

.skill-name {
    font-size: var(--font-size-body);
    font-weight: 600;
    line-height: 1.4;
}

/* ============================================
   19. 横向模式优化
   Landscape Mode Optimization
   ============================================ */

@media (orientation: landscape) and (max-height: 500px) {
    /* 横屏时减少垂直间距 */
    .game-header {
        padding: 8px 16px;
    }

    .btn-primary {
        min-height: 40px;
        padding: 10px 24px;
    }

    .option {
        padding: 14px;
        margin-bottom: 10px;
    }
}

/* ============================================
   20. 特殊触摸优化 - 防误触
   Anti-Accidental Touch
   ============================================ */

/* 危险操作需要长按 */
.btn-danger,
.btn-destructive {
    position: relative;
}

.btn-danger::after,
.btn-destructive::after {
    content: '长按确认';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--text-light, #999);
    white-space: nowrap;
}

/* ============================================
   21. 振动反馈支持
   Haptic Feedback Support
   ============================================ */

/* 为支持振动反馈的设备添加标记 */
.haptic-feedback {
    /* JavaScript will handle actual vibration */
    position: relative;
}

/* ============================================
   22. 性能优化
   Performance Optimization
   ============================================ */

/* GPU加速 */
.btn,
.option,
.message-bubble,
.progress-fill {
    transform: translateZ(0);
    will-change: transform;
}

/* 延迟加载图片占位 */
.lazy-image {
    min-height: 200px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   23. 安全区域适配 (iPhone X+)
   Safe Area Adaptation
   ============================================ */

@supports (padding: env(safe-area-inset-bottom)) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .conversation-input {
        padding-bottom: calc(var(--spacing-md, 20px) + env(safe-area-inset-bottom));
    }
}

/* ============================================
   24. 深色模式触摸优化
   Dark Mode Touch Optimization
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --tap-highlight: rgba(201, 169, 97, 0.4);
        --ripple-color: rgba(201, 169, 97, 0.5);
        --active-bg: rgba(201, 169, 97, 0.15);
    }

    /* 增强深色模式下的对比度 */
    .btn,
    .option {
        border-width: 2px;
    }
}

/* ============================================
   END OF MOBILE TOUCH OPTIMIZATION
   ============================================ */