/* 增强的移动端交互样式 */
/* 这个文件可以包含在所有页面中，提供更好的移动端体验 */

/* 全局触摸优化 */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* 允许文本选择 */
input, textarea, [contenteditable] {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* 确保链接正常工作 */
.nav-item {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

/* 允许链接正常工作 */
a {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* 平滑滚动 */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior: none;
}

/* 防止页面缩放 */
.app-container {
    touch-action: manipulation;
}

/* 增强的按钮交互 */
.btn, .function-item, .settings-item, .product-card {
    position: relative;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:active, .function-item:active, .settings-item:active, .product-card:active {
    transform: scale(0.98);
}

/* 波纹效果 */
.btn::after, .function-item::after, .settings-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    pointer-events: none;
}

.btn:active::after, .function-item:active::after, .settings-item:active::after {
    width: 200px;
    height: 200px;
}

/* 加载状态 */
.loading {
    position: relative;
    pointer-events: none;
}

.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 1000;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #007AFF;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1001;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 页面切换动画 */
.page-transition {
    animation: pageSlideIn 0.3s ease-out;
}

@keyframes pageSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 卡片悬停效果 */
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* 输入框焦点效果 */
.form-input:focus {
    transform: scale(1.02);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 防止长按菜单 */
img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 优化字体渲染 */
body, input, textarea, button {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    text-rendering: optimizeLegibility;
}

/* 移动端优化 */
@media (max-width: 768px) {
    /* 增加触摸目标大小 */
    .btn, .nav-item, .function-item {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* 优化滚动性能 */
    .scroll-container {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
    
    /* 防止横向滚动 */
    body {
        overflow-x: hidden;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    .bottom-nav {
        background: rgba(28, 28, 30, 0.95);
        border-top-color: #38383a;
    }
    
    .nav-item {
        color: #8e8e93;
    }
    
    .nav-item.active {
        color: #0a84ff;
    }
}