/* 五行脉学位图解 - 移动端专用样式 */
/* 优化触摸体验和移动端显示 */

/* 移动端悬浮提示窗口样式 */
@media (max-width: 768px) {
    /* 认证入口样式 - 调整位置使其更明显 */
    .auth-entry {
        position: absolute;
        top: 15px;  /* 调整位置使其更靠近顶部 */
        left: 15px; /* 改为左上角以避免与退出按钮重叠 */
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* 改为左对齐 */
        gap: 8px;
        z-index: 1000; /* 提高层级 */
    }
    
    .tip-btn {
        width: 45px;
        height: 45px;
        top: 15px;
        right: 15px;
    }
    
    .tip-btn .tip-icon {
        font-size: 1.3rem;
    }
    
    .floating-tip-content {
        width: 95%;
        max-height: 85vh;
        border-radius: 12px;
    }
    
    .floating-tip-header {
        padding: 16px 20px;
        border-radius: 12px 12px 0 0;
    }
    
    .floating-tip-header h3 {
        font-size: 1.2rem;
    }
    
    .floating-tip-icon {
        font-size: 1.6rem;
        margin-right: 10px;
    }
    
    .floating-tip-body {
        padding: 20px;
    }
    
    .tip-item {
        padding: 12px;
        margin-bottom: 16px;
        border-radius: 10px;
    }
    
    .tip-item-icon {
        font-size: 1.3rem;
        margin-right: 12px;
    }
    
    .tip-item-content h4 {
        font-size: 1rem;
        margin-bottom: 6px;
    }
    
    .tip-item-content p {
        font-size: 0.9rem;
    }
    
    .floating-tip-footer {
        padding: 16px 20px;
        border-radius: 0 0 12px 12px;
    }
}

/* 移动端触摸优化 */
@media (max-width: 768px) {
    /* 触摸友好的按钮尺寸 */
    .select-box {
        min-height: 48px; /* 符合触摸最小尺寸要求 */
        touch-action: manipulation;
    }
    
    .acupoint-item {
        min-height: 60px; /* 触摸友好的最小高度 */
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* 触摸反馈 */
    .acupoint-item:active {
        background: #dbeafe;
        transform: scale(0.98);
    }
    
    /* 下拉选择框触摸优化 */
    .select-box:focus {
        transform: scale(1.02);
    }
    
    /* 弹窗触摸优化 */
    .close {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }
    
    /* 防止iOS缩放 */
    input, select, textarea {
        font-size: 16px;
    }
}

/* 小屏幕设备优化 */
@media (max-width: 480px) {
    /* 更紧凑的布局 */
    .container {
        padding: 10px;
    }
    
    .header {
        padding: 20px 0;
        margin-bottom: 20px;
    }
    
    .title {
        font-size: 1.6rem;
        letter-spacing: 1px;
    }
    
    .subtitle {
        font-size: 0.9rem;
    }
    
    /* 移动端APP链接样式优化 */
    .app-entry {
        margin-bottom: 8px;
    }
    
    .mobile-app-link {
        font-size: 1rem; /* 增大字体 */
        display: flex;
        align-items: center;
        background: rgba(16, 185, 129, 0.7); /* 提高颜色对比度 */
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.5); /* 增强阴影 */
        border: 1px solid rgba(255, 255, 255, 0.7);
        padding: 8px 15px; /* 增大内边距 */
        border-radius: 20px;
        color: white;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* 添加文字阴影 */
        max-width: 95%;
    }
    
    .qr-generator-btn {
        font-size: 0.95rem;
        padding: 6px 12px;
        background: rgba(59, 130, 246, 0.8);
        margin-top: 5px;
        max-width: 95%;
    }
    
    .mobile-app-link .qr-icon {
        font-size: 1.2rem; /* 增大图标 */
        margin-right: 6px;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }
    
    .cascade-section,
    .acupoint-section {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .select-group {
        margin-bottom: 20px;
    }
    
    .select-group label {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }
    
    .section-header {
        margin-bottom: 20px;
        padding-bottom: 15px;
    }
    
    .section-header h2 {
        font-size: 1.3rem;
    }
    
    .current-path {
        font-size: 0.85rem;
        padding: 6px 10px;
    }
    
    .acupoint-item {
        padding: 15px;
        margin-bottom: 10px;
    }
    
    .acupoint-name {
        font-size: 0.95rem;
    }
    
    .acupoint-description {
        font-size: 0.8rem;
    }
    
    /* 弹窗移动端优化 */
    .modal-content {
        width: 98%;
        margin: 5% auto;
    }
    
    .modal-header {
        padding: 15px 20px;
    }
    
    .modal-header h3 {
        font-size: 1.2rem;
    }
    
    .modal-body {
        padding: 20px;
    }
    
    .image-placeholder {
        padding: 30px 15px;
    }
    
    .placeholder-icon {
        font-size: 3rem;
    }
    
    .image-placeholder p {
        font-size: 1rem;
    }
    
    .placeholder-note {
        font-size: 0.8rem;
    }
}

/* 超小屏幕设备优化 */
@media (max-width: 360px) {
    .title {
        font-size: 1.4rem;
    }
    
    .subtitle {
        font-size: 0.8rem;
    }
    
    /* 超小屏幕设备上更突出的APP链接 */
    .auth-entry {
        top: 10px;
        left: 10px;
        padding: 8px;
        background: rgba(16, 185, 129, 0.8);
    }
    
    .mobile-app-link {
        font-size: 0.85rem;
        padding: 5px 10px;
        margin-bottom: 5px;
        white-space: nowrap;
    }
    
    .login-btn {
        padding: 5px 10px;
        font-size: 0.8rem;
    }
    
    .cascade-section,
    .acupoint-section {
        padding: 12px;
    }
    
    .select-box {
        padding: 12px 14px;
        font-size: 14px;
    }
    
    .acupoint-item {
        padding: 12px;
    }
    
    .acupoint-name {
        font-size: 0.9rem;
    }
}

/* 横屏模式优化 */
@media (max-height: 500px) and (orientation: landscape) {
    .header {
        padding: 15px 0;
        margin-bottom: 20px;
    }
    
    .title {
        font-size: 1.8rem;
        margin-bottom: 5px;
    }
    
    .subtitle {
        font-size: 0.9rem;
    }
    
    .cascade-section {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .select-group {
        margin-bottom: 15px;
    }
    
    .acupoint-section {
        padding: 20px;
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    /* 触摸设备专用样式 */
    .acupoint-item:hover {
        background: #f8fafc;
        border-color: var(--border-color);
        transform: none;
        box-shadow: none;
    }
    
    .select-box:hover {
        border-color: var(--border-color);
    }
    
    /* 触摸反馈 */
    .acupoint-item:active {
        background: #e0f2fe;
        border-color: var(--secondary-color);
        transform: scale(0.98);
    }
    
    .select-box:active {
        border-color: var(--secondary-color);
        transform: scale(1.02);
    }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .select-box {
        border-width: 1px;
    }
    
    .acupoint-item {
        border-width: 1px;
    }
    
    .section-header {
        border-bottom-width: 1px;
    }
    
    .current-path {
        border-left-width: 2px;
    }
}

/* 深色模式支持（可选） */
@media (prefers-color-scheme: dark) {
    /* 这里可以添加深色模式样式 */
    /* 暂时保持浅色模式，确保传统中医风格 */
}

/* 减少动画（用户偏好） */
@media (prefers-reduced-motion: reduce) {
    .acupoint-item,
    .select-box,
    .modal-content {
        transition: none;
        animation: none;
    }
    
    .acupoint-item:hover {
        transform: none;
    }
    
    .acupoint-item:active {
        transform: none;
    }
}