/* ============================================================
   拾光笔记 — 移动优先设计系统（2026-08-22）
   手机端字阶/触控/留白/安全区统一。所有规则均包在媒体查询里，桌面端不受影响。
   断点约定：手机 ≤767.98px；平板 ≤991.98px。
   ============================================================ */

@media (max-width: 767.98px) {
    /* ── 基础可读性：正文 16px、行高 1.75 ── */
    html { -webkit-text-size-adjust: 100%; }
    body {
        font-size: 16px;
        line-height: 1.75;
        color: var(--sg-text-primary, #1e293b);
    }

    /* ── 顶栏：logo 与图标强制并列一行，不换行；紧凑以适配窄屏/大字号 ── */
    .custom-navbar .container { flex-wrap: nowrap; align-items: center; }
    .custom-navbar .navbar-brand { font-size: 1rem; flex-shrink: 0; margin-right: 6px; }
    .custom-navbar .navbar-brand i { font-size: 1.1rem; }
    .custom-navbar .navbar-nav.ms-auto { flex-shrink: 0; }
    .custom-navbar .navbar-nav.ms-auto .nav-link { padding: 6px 4px !important; }
    .custom-navbar .navbar-nav.ms-auto #pointsValue { font-size: 0.9rem; }

    /* ── 底部导航：贴底 + 安全区加底距，避免被手机底部浏览器/手势条切掉 ── */
    .mobile-nav {
        height: auto;
        min-height: 54px;
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 6px);
    }

    /* ── 长标题防溢出：笔记/主题等列表行裁切 + 标题单行省略，避免撑破卡片/横向溢出 ── */
    .list-group-item { overflow: hidden; }
    .list-group-item .text-truncate { max-width: 100%; }
    .entry-title-line strong, .topic-title-row strong {
        display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    /* ══════════════ 移动端沉浸式编辑器（备忘录式）══════════════ */
    .mobile-editor {
        position: relative;
        min-height: calc(100vh - 56px);
        display: flex;
        flex-direction: column;
        margin: -1rem -0.75rem;   /* 抵消 base container 留白，真正全屏 */
    }
    .me-topbar {
        position: sticky;
        top: 0;
        z-index: 20;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px calc(8px + env(safe-area-inset-top, 0));
        background: var(--sg-surface, #fff);
        border-bottom: 1px solid var(--sg-divider, #f1f5f9);
    }
    .me-icon-btn {
        width: 44px; height: 44px;
        border: none; background: transparent;
        color: var(--sg-text-primary, #1e293b);
        font-size: 1.35rem; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .me-icon-btn:active { background: var(--sg-surface-hover, #f1f5f9); }
    .me-done { color: var(--sg-primary, #4f6ef7); font-size: 1.6rem; }
    .me-title-wrap { flex: 1; min-width: 0; }
    .me-title {
        width: 100%; border: none; outline: none; background: transparent;
        font-size: 1.35rem; font-weight: 700; color: var(--sg-text-primary, #1e293b);
        padding: 2px 0;
    }
    .me-title::placeholder { color: var(--sg-text-tertiary, #94a3b8); }
    .me-meta { font-size: 0.78rem; color: var(--sg-text-tertiary, #94a3b8); margin-top: 1px; }
    .me-textarea {
        flex: 1;
        border: none; outline: none; background: transparent; resize: none;
        font-size: 16px; line-height: 1.85; color: var(--sg-text-primary, #1e293b);
        padding: 16px 22px calc(120px + env(safe-area-inset-bottom, 0));
        min-height: 55vh;
        width: 100%;
        -webkit-appearance: none;
    }
    .me-textarea::placeholder { color: var(--sg-text-tertiary, #94a3b8); }

    /* 选中浮动条 */
    .me-selbar {
        position: fixed; left: 50%; transform: translateX(-50%);
        top: 42%;
        z-index: 50;
        display: flex; gap: 2px;
        background: var(--sg-surface, #fff);
        border: 1px solid var(--sg-border, #e2e8f0);
        border-radius: 14px;
        box-shadow: 0 6px 24px rgba(15,23,42,0.18);
        padding: 4px 6px;
    }
    .me-selbar button {
        min-width: 40px; height: 40px; border: none; background: transparent;
        color: var(--sg-text-primary, #1e293b);
        font-size: 0.95rem; border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
    }
    .me-selbar button:active { background: var(--sg-surface-hover, #f1f5f9); }

    /* 底部图标栏（底导航上方） */
    .me-bar {
        position: fixed; left: 50%; transform: translateX(-50%);
        bottom: calc(56px + env(safe-area-inset-bottom, 0) + 10px);
        z-index: 30;
        display: flex; gap: 4px;
        background: var(--sg-surface, #fff);
        border: 1px solid var(--sg-border, #e2e8f0);
        border-radius: 22px;
        box-shadow: 0 6px 24px rgba(15,23,42,0.16);
        padding: 5px 10px;
    }
    .me-bar button {
        min-width: 52px; min-height: 48px; border: none; background: transparent;
        color: var(--sg-text-secondary, #64748b);
        border-radius: 14px;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 1px; font-size: 0.68rem;
    }
    .me-bar button i { font-size: 1.25rem; }
    .me-bar button:active { background: var(--sg-surface-hover, #f1f5f9); }

    /* 更多菜单（底部栏上方弹出） */
    .me-moremenu {
        position: fixed; right: 12px;
        bottom: calc(122px + env(safe-area-inset-bottom, 0));
        z-index: 40;
        min-width: 190px;
        background: var(--sg-surface, #fff);
        border: 1px solid var(--sg-border, #e2e8f0);
        border-radius: 14px;
        box-shadow: 0 8px 28px rgba(15,23,42,0.2);
        padding: 6px;
    }
    .me-more-item {
        display: flex; align-items: center; width: 100%;
        border: none; background: transparent; text-decoration: none;
        padding: 12px 14px; font-size: 0.95rem;
        color: var(--sg-text-primary, #1e293b); border-radius: 10px;
    }
    .me-more-item:active { background: var(--sg-surface-hover, #f1f5f9); }

    /* AI 操作菜单（与更多菜单同风格） */
    .me-aimenu {
        position: fixed; right: 12px;
        bottom: calc(122px + env(safe-area-inset-bottom, 0));
        z-index: 45;
        min-width: 210px;
        background: var(--sg-surface, #fff);
        border: 1px solid var(--sg-border, #e2e8f0);
        border-radius: 14px;
        box-shadow: 0 8px 28px rgba(15,23,42,0.2);
        padding: 6px;
    }
    .me-aimenu-title {
        padding: 8px 14px 6px; font-size: 0.78rem;
        color: var(--sg-text-tertiary, #94a3b8);
    }

    [data-bs-theme="dark"] .me-topbar,
    [data-bs-theme="dark"] .me-selbar,
    [data-bs-theme="dark"] .me-bar,
    [data-bs-theme="dark"] .me-moremenu,
    [data-bs-theme="dark"] .me-aimenu {
        background: var(--sg-surface, #1e293b);
        border-color: var(--sg-border, #334155);
    }

    /* 编辑页隐藏浮动学习计时器（避免遮挡移动编辑器底部栏；!important 压过 study_timer.js 的 style 设置） */
    body:has(.mobile-editor) #studyTimer { display: none !important; }

    /* ── 标题层级更清晰 ── */
    h1 { font-size: 1.5rem; line-height: 1.3; }
    h2 { font-size: 1.325rem; line-height: 1.3; }
    h3 { font-size: 1.175rem; line-height: 1.35; }
    h4 { font-size: 1.05rem; line-height: 1.4; }
    h5 { font-size: 0.975rem; }
    h6 { font-size: 0.9rem; }

    /* ── 消灭微字：说明/弱化文案提到 ≥0.825rem，徽章 ≥0.78rem ── */
    .text-muted, small.text-muted, small, .small { font-size: 0.85rem !important; }
    .badge { font-size: 0.78rem; line-height: 1.4; padding: 0.35em 0.6em; }
    .card-title, .card-header h5 { font-size: 1rem; }
    .card-subtitle, .card-text { font-size: 0.95rem; }
    .list-group-item { font-size: 1rem; }
    .form-control, .form-select { font-size: 1rem; }

    /* ── 触控目标：主按钮 ≥48px、普通 ≥44px ── */
    .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .btn-lg { min-height: 52px; font-size: 1.05rem; }
    .btn-sm { min-height: 40px; }
    .nav-link, .list-group-item-action { min-height: 44px; align-items: center; }
    .dropdown-item { min-height: 46px; display: flex; align-items: center; }
    .page-link { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }

    /* ── 顶栏下拉（头像/积分/通知）：移动端紧凑右对齐浮层，限高滚动，不撑开布局 ── */
    .custom-navbar .account-dropdown,
    .custom-navbar #pointsDropdown,
    .custom-navbar #notifyDropdown {
        position: absolute !important;
        min-width: 200px;
        max-width: 82vw;
        max-height: 62vh !important;
        overflow-y: auto;
        border-radius: var(--sg-radius-card, 12px);
        box-shadow: var(--sg-shadow-md, 0 10px 30px rgba(0,0,0,0.16));
    }

    /* 通知铃在中右位置，下方放不下宽卡片：手机端改为右锚定面板，贴合视口不溢出 */
    .custom-navbar #notifyDropdown {
        position: fixed !important;
        top: 54px;
        right: 8px;
        left: auto !important;
        width: min(320px, calc(100vw - 16px));
    }
    .custom-navbar .account-dropdown .dropdown-item,
    .custom-navbar .account-dropdown .dropdown-item-text,
    .custom-navbar #pointsDropdown .dropdown-item,
    .custom-navbar #pointsDropdown .dropdown-item-text,
    .custom-navbar #notifyDropdown .dropdown-item,
    .custom-navbar #notifyDropdown .dropdown-item-text {
        font-size: 0.92rem;
        padding: 11px 16px;
        min-height: 46px;
    }

    /* ── 记录/编辑：移动端沉浸式大输入区 ── */
    textarea.form-control { min-height: 35vh; }

    /* ── 留白与圆角统一 ── */
    .card { border-radius: var(--sg-radius-card, 12px); }
    .card-body { padding: 1rem; }
    .list-group-item { padding: 0.9rem 0.95rem; }
    .container { padding-left: 14px; padding-right: 14px; }

    /* ── 安全区 ── */
    .app-footer { padding-bottom: calc(env(safe-area-inset-bottom, 0) + 16px); }
    #backToTop {
        right: 16px;
        bottom: calc(56px + env(safe-area-inset-bottom, 0) + 76px) !important;
    }
}

/* ── 平板 768–991.98px：仅微调字阶 ── */
@media (min-width: 768px) and (max-width: 991.98px) {
    body { font-size: 15px; }
    .text-muted, small, .small { font-size: 0.85rem !important; }
}

/* ── 极窄屏 <376px：隐藏积分数字仅剩硬币图标，确保全部图标与 logo 同行不溢出 ── */
@media (max-width: 375.98px) {
    .custom-navbar .navbar-nav.ms-auto #pointsValue { display: none !important; }
}