/* ============================================
   移动端阅读体验增强样式
   针对手机和平板的优化
============================================ */

/* ==================== 基础移动端优化 ==================== */
@media (max-width: 768px) {

    /* 防止横向滚动 */
    body {
        overflow-x: hidden;
    }

    /* 触摸优化：增大可点击区域 */
    a, button {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 文本选择优化 */
    * {
        -webkit-tap-highlight-color: rgba(59, 130, 246, 0.2);
    }

    /* ==================== 导航栏优化 ==================== */
    .article-nav-wrapper {
        position: sticky;
        top: 0;
        background: var(--color-bg-primary);
        z-index: 100;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        padding: var(--space-3) var(--space-4) !important;
    }

    .back-btn {
        font-size: var(--text-sm);
        padding: var(--space-2) var(--space-3);
    }

    .lang-switcher {
        gap: var(--space-2);
    }

    .lang-btn {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-sm);
    }

    /* ==================== 标题优化 ==================== */
    .article-header {
        padding: var(--space-6) 0 var(--space-4) !important;
    }

    .main-title {
        font-size: var(--text-2xl) !important;
        line-height: 1.3;
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    .subtitle {
        font-size: var(--text-sm);
        line-height: 1.5;
    }

    /* ==================== 内容区优化 ==================== */
    .content-body {
        font-size: 16px !important; /* 固定16px，避免浏览器自动缩放 */
        line-height: 1.7 !important;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* 段落间距 */
    .content-body p {
        margin: var(--space-4) 0;
    }

    /* 标题间距 */
    .content-body h2 {
        font-size: var(--text-xl) !important;
        margin-top: var(--space-8) !important;
        margin-bottom: var(--space-4) !important;
        line-height: 1.3;
    }

    .content-body h3 {
        font-size: var(--text-lg) !important;
        margin-top: var(--space-6) !important;
        margin-bottom: var(--space-3) !important;
        line-height: 1.4;
    }

    .content-body h4 {
        font-size: var(--text-base);
        margin-top: var(--space-4);
        margin-bottom: var(--space-2);
    }

    /* ==================== 列表优化 ==================== */
    .content-body ul,
    .content-body ol {
        padding-left: var(--space-6);
        margin: var(--space-4) 0;
    }

    .content-body li {
        margin: var(--space-2) 0;
        line-height: 1.6;
    }

    /* ==================== 代码块优化 ==================== */
    .code-block-wrapper,
    .content-body pre {
        margin: var(--space-4) calc(var(--space-4) * -1) !important;
        border-radius: 0 !important;
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
    }

    .content-body pre code {
        font-size: 13px !important;
        line-height: 1.5 !important;
        padding: var(--space-4) !important;
        padding-top: 40px !important;
        white-space: pre-wrap !important;
        word-break: break-all;
    }

    /* 行内代码 */
    .content-body :not(pre) > code {
        font-size: 0.9em !important;
        padding: 2px 4px !important;
        word-break: break-word;
    }

    /* 代码复制按钮 */
    .copy-code-btn {
        top: 6px !important;
        right: 6px !important;
        padding: 6px 10px !important;
        font-size: 12px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    /* ==================== 引用块优化 ==================== */
    .content-body blockquote {
        margin: var(--space-4) 0;
        padding: var(--space-3) var(--space-4);
        font-size: 0.95em;
        border-left-width: 3px;
    }

    /* ==================== 表格优化 ==================== */
    .table-responsive,
    .content-body table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: var(--space-4) calc(var(--space-4) * -1) !important;
    }

    .content-body table {
        font-size: 13px;
        min-width: 600px; /* 确保表格不会太窄 */
    }

    .content-body th,
    .content-body td {
        padding: var(--space-2) var(--space-3) !important;
        white-space: nowrap;
    }

    /* 表格滚动提示 */
    .table-responsive::after {
        content: '→ 滑动查看更多';
        display: block;
        text-align: center;
        color: var(--color-text-tertiary);
        font-size: var(--text-xs);
        padding: var(--space-2) 0;
        opacity: 0.6;
    }

    /* ==================== 图片优化 ==================== */
    .content-body img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: var(--space-4) auto;
        border-radius: 8px;
    }

    /* ==================== 目录优化 ==================== */
    .table-of-contents {
        margin: var(--space-4) 0;
        padding: var(--space-3);
        font-size: 14px;
    }

    .table-of-contents summary {
        font-size: var(--text-base);
        padding: var(--space-2);
        cursor: pointer;
        user-select: none;
    }

    .table-of-contents ul {
        padding-left: var(--space-4);
        margin-top: var(--space-2);
    }

    .table-of-contents li {
        margin: var(--space-2) 0;
    }

    .table-of-contents a {
        display: block;
        padding: var(--space-2);
        line-height: 1.4;
    }

    /* ==================== 按钮优化 ==================== */
    .back-to-top {
        width: 44px !important;
        height: 44px !important;
        bottom: 20px !important;
        right: 20px !important;
        font-size: 20px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    /* ==================== 页脚优化 ==================== */
    .footer {
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-6) var(--space-4);
        font-size: var(--text-sm);
        text-align: center;
    }

    /* ==================== 横向链接优化 ==================== */
    .content-body a {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* ==================== 禁用不必要的动画 ==================== */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* ==================== 超小屏幕优化 (iPhone SE 等) ==================== */
@media (max-width: 375px) {
    .article-container {
        padding: 0 var(--space-3) !important;
    }

    .main-title {
        font-size: var(--text-xl) !important;
    }

    .content-body {
        font-size: 15px !important;
    }

    .content-body pre code {
        font-size: 12px !important;
    }

    .back-to-top {
        width: 40px !important;
        height: 40px !important;
        bottom: 16px !important;
        right: 16px !important;
    }
}

/* ==================== 横屏优化 ==================== */
@media (max-width: 768px) and (orientation: landscape) {
    .article-header {
        padding: var(--space-4) 0 var(--space-3) !important;
    }

    .main-title {
        font-size: var(--text-xl) !important;
    }

    .content-body h2 {
        margin-top: var(--space-6) !important;
    }
}

/* ==================== 平板优化 (768px - 1024px) ==================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .article-container {
        max-width: 720px;
        padding: 0 var(--space-6);
    }

    .content-body {
        font-size: 17px;
        line-height: 1.7;
    }

    .content-body pre code {
        font-size: 14px;
    }
}

/* ==================== Safari iOS 特定修复 ==================== */
@supports (-webkit-touch-callout: none) {
    /* 修复 iOS Safari 的 viewport 单位问题 */
    .article-container {
        min-height: -webkit-fill-available;
    }

    /* 修复 iOS 滚动卡顿 */
    .content-body,
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    /* 修复 iOS 输入框缩放 */
    input, textarea, select {
        font-size: 16px !important;
    }
}

/* ==================== 暗色模式移动端优化 ==================== */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
    .article-nav-wrapper {
        background: var(--color-bg-primary);
        border-bottom: 1px solid var(--color-border-light);
    }

    .copy-code-btn {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .back-to-top {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
}