/* Mobile & small-screen overrides
   - Consolidate all mobile breakpoints here over time
   - Examples: max-width: 1280px / 768px / 480px, pointer: coarse
*/

/* ==== Split from base.css at 2025-11-03T08:11:46.1840878+08:00 ==== */
@media (max-width: 1280px), (pointer: coarse) {
    .mobile-only {
        display: inline-flex !important;
    }
/* 确保控制区在移动端显�?*/
    .controls {
        display: flex !important;
        position: sticky; /* 悬浮在滚动容器底�?*/
        bottom: 0;
        z-index: 1000;
        /* 覆盖原有的负外边距，避免�?sticky 计算冲突 */
        margin: 0 -20px 0;
        /* 仅保留安全区，去除多余底部内边距 */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    /* 不额外预留底部空间，去除按钮下方间距 */
}

@media (max-width: 1280px), (pointer: coarse) {
    body {
        padding: 0;
        height: 100vh;
        height: 100dvh; /* 使用动态视口高度，考虑移动端地址�?*/
    }

    .container {
        margin: 20px 14px;
        padding: 0 14px;
        height: calc(100vh - 40px);
        height: calc(100dvh - 40px);
    }

    .main-content > .progress-info {
        margin-top: 36px;
    }

    .main-content > .question-content {
        margin-top: 28px;
    }

    .main-content > .instruction {
        margin-top: 28px;
        margin-bottom: 28px;
    }

    .progress-info {
        gap: 10px;
        padding: 14px 18px;
    }

    .progress-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .controls {
        flex-direction: column;
        gap: 12px;
        padding: 5px 10px calc(env(safe-area-inset-bottom, 0px) + 5px);
        margin: 0 -10px 0;
    }

    .btn {
        width: 100%;
        justify-content: center;
        padding: 14px 28px;
        font-size: clamp(1.05rem, 3vw, 1.15rem);
    }

    .btn:active {
        transform: scale(0.97);
        box-shadow: 0 8px 15px rgba(63, 106, 240, 0.2);
    }

    .question-content::after {
        inset: 10px;
    }

    /* 移动端明牌浏览模式优�?*/
    .browse-item {
        padding: 12px 14px 12px 46px;
        margin: 8px 0;
    }

    .browse-index {
        min-width: 26px;
        height: 26px;
        font-size: clamp(0.75rem, 2vw, 0.8rem);
        left: 10px;
        top: 10px;
    }
}



@media (max-width: 1280px), (pointer: coarse) {
    .theme-toggle {
        top: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
        font-size: 1.3rem;
    }
}



@media (max-width: 1280px), (pointer: coarse) {
    .ai-memory-button {
        max-width: 180px;
        padding: 8px 14px;
        font-size: 13px;
        margin-top: 16px;
    }

    .ai-button-logo {
        width: 20px;
        height: 20px;
    }

    .ai-tip-container {
        margin-top: 0;
        padding: 24px clamp(14px, 3vw, 20px);
        /* 防止流式渲染时的布局抖动 */
        will-change: contents;
        contain: layout;
    }

    .ai-tip-text {
        /* 与题目正文字号保�?80% 缩放 */
        font-size: calc(var(--font-size-lg) * 0.8);
        line-height: 1.35;  /* 1.8 → 1.35,与桌面端对齐 */
    }

    /* h2 卡片效果在移动端简�?*/
    .ai-tip-text h2 {
        font-size: 1.15em;
        padding: 0.5em 0.6em;
    }

    /* code 标签在小屏收�?*/
    .ai-tip-text code {
        padding: 0.15em 0.4em;
        font-size: 0.85em;
    }
}



@media (max-width: 1280px), (pointer: coarse) {
    .site-footer {
        padding: 0 0;
        margin: 0;
        font-size: 12px;
        gap: 6px;
    }

    .footer-logo {
        height: 26px;
    }
}



@media (max-width: 768px) {
    .search-container {
        margin: 24px 8px 16px;
        padding: 16px;
    }

    .search-input {
        padding: 10px 36px 10px 12px;
        font-size: var(--font-size-sm);
    }

    .search-clear-btn {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
}

/* ==== Split from base.css (iPad range) ==== */


/* ==== Moved mobile-only blocks 2025-11-03T08:14:44.3259938+08:00 ==== */
/* 移动端三按钮导航布局 */
.mobile-navigation {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* ==== Moved mobile-only blocks 2025-11-03T08:14:44.3339901+08:00 ==== */
.mobile-navigation .btn {
    flex: 1;
}

/* ==== Moved mobile-only blocks 2025-11-03T08:14:44.3349885+08:00 ==== */
.mobile-navigation #prevBtn,
.mobile-navigation #nextBtnMobile {
    flex: 0.5; /* 左右导航按钮�?0% */
}

/* ==== Moved mobile-only blocks 2025-11-03T08:14:44.3369895+08:00 ==== */
.mobile-navigation #multiBtn {
    flex: 4; /* 中间多功能按钮占80% */
}

/* ==== Moved mobile-only blocks 2025-11-03T08:14:44.3396535+08:00 ==== */
/* 导航按钮样式 */
.btn-nav {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 20px;
    font-size: 16px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 15px 30px rgba(102, 126, 234, 0.3);
}

/* ==== Moved mobile-only blocks 2025-11-03T08:14:44.3406645+08:00 ==== */
.btn-nav:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 18px 35px rgba(102, 126, 234, 0.4);
}

/* ==== Moved mobile-only blocks 2025-11-03T08:14:44.3426666+08:00 ==== */
.btn-nav:disabled {
    background: linear-gradient(135deg, #ccc 0%, #999 100%);
    cursor: not-allowed;
    opacity: 0.5;
    box-shadow: none;
    transform: none;
}

/* ==== Moved mobile-only blocks 2025-11-03T08:14:44.3436586+08:00 ==== */
/* 完成状态的下一题按�?*/
.btn-nav.complete {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    box-shadow: 0 15px 30px rgba(56, 239, 125, 0.3);
}

/* ==== Moved mobile-only blocks 2025-11-03T08:14:44.3446585+08:00 ==== */
.btn-nav.complete:hover:not(:disabled) {
    box-shadow: 0 18px 35px rgba(56, 239, 125, 0.4);
}

/* ==============================================
   Mobile-only global overrides (no desktop)
   Apply small-screen styles to all widths
   ============================================== */
/* Always show mobile chrome */
.mobile-only { display: inline-flex !important; }
/* Header and title sizing */
.header { padding: 14px 10px 11px; margin: 0 -10px; }
.header h1 { font-size: clamp(1.3rem, 4.2vw, 1.6rem); }
.subtitle { font-size: clamp(0.9rem, 3.6vw, 1.05rem); }

/* Compact layout and sticky controls */
body { padding: 0; height: 100vh; height: 100dvh; }
.container { margin: 14px 0; padding: 0 10px; height: calc(100vh - 28px); height: calc(100dvh - 28px); max-width: none; width: 100%; }
.main-content > .progress-info { margin-top: 0; margin-bottom: 0; }
.main-content > .question-content { margin-top: 20px; }
.main-content > .instruction { margin-top: 28px; margin-bottom: 28px; }
.progress-info { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 8px; padding: 6px 10px; }
.progress-header { display: contents; }
.current-count { white-space: nowrap; order: 1; }
.progress-bar-container { order: 2; flex: 1; height: 6px; margin: 0 8px; }
.progress-percentage { white-space: nowrap; font-weight: 700; order: 3; }
.controls { display: flex !important; position: sticky; bottom: 0; z-index: 1000; margin: 0 -10px 0; padding: 5px 10px calc(env(safe-area-inset-bottom, 0px) + 5px); flex-direction: column; }
.btn { width: 100%; justify-content: center; padding: 16px 28px; font-size: clamp(1rem, 4vw, 1.1rem); }
.btn:active { transform: scale(0.97); box-shadow: 0 8px 15px rgba(63, 106, 240, 0.2); }
.question-content::after { inset: 10px; }
body:not(.browse-mode) .question-content { padding: 22px 16px; }

/* Theme toggle and AI tip sizing */
.theme-toggle { top: 12px; right: 12px; width: 32px; height: 32px; font-size: 1.2rem; }
.ai-memory-button { max-width: 160px; padding: 6px 12px; font-size: 12px; margin-top: 16px; }
.ai-button-logo { width: 18px; height: 18px; }
.ai-tip-container { margin-top: 0; padding: 22px 16px; }
.main-content > .ai-tip-container { margin-top: 0; }
.ai-tip-text { font-size: calc(var(--font-size-lg) * 0.8); line-height: 1.8; }
.ai-tip-text h2 { font-size: 1.15em; padding: 0.5em 0.6em; }
.ai-tip-text code { padding: 0.15em 0.4em; font-size: 0.85em; }
.ai-loading { padding: 24px 12px; }
.ai-error { padding: 20px 12px; }

/* Footer compact */
.site-footer { padding: 0 0; margin: 0; font-size: 11px; gap: 5px; }
.footer-logo { height: 32px; }

/* Intro illustration: shrink to half of previous (30% width) */
#questionContent img[src*="img/2.png"],
#questionContent img[src$="/2.png"] {
    max-width: 30% !important;
}

/* Click-to-reveal blank styles - Mobile responsive */
@media (max-width: 768px) {
    .blank {
        /* Minimum touch target size (44x44px) */
        min-height: 44px;
        padding: 8px 6px;
        /* Prevent zoom-on-tap delay */
        touch-action: manipulation;
        /* Ensure clickable area extends beyond text */
        display: inline-block;
        min-width: 44px;
    }

    .blank:not(.blank-cooling):not(.revealed) {
        /* Enhanced visual feedback for mobile */
        transition: background-color 0.15s, opacity 0.15s;
    }

    .blank:not(.blank-cooling):not(.revealed):hover {
        background-color: rgba(90, 173, 116, 0.2);
    }

    .blank.blank-cooling {
        /* Clear disabled state on mobile */
        opacity: 0.4;
    }
}

/* Focus styles for keyboard navigation */
.blank:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .blank,
    .blank::after,
    .blank:not(.blank-cooling):not(.revealed) {
        transition: none !important;
        animation: none !important;
    }
}