/* 手机 H5 适配：错题本 + 练习赛/公开赛考场（update/138，2026-09-20）
   只在窄屏生效；桌面布局不动。考场头部带内联样式，窄屏覆盖必须 !important。 */

/* ---------- 两个页面共用：admin-container 的装饰光晕 ::before 左右各伸出 60px，窄屏上把页面撑出横向滚动条 ---------- */
@media (max-width: 900px) {
    #wrongbookPage .admin-container::before,
    #cspPracticePage .admin-container::before {
        left: 0 !important;
        right: 0 !important;
    }
    #wrongbookPage,
    #cspPracticePage {
        overflow-x: hidden;
    }
}

/* ---------- 错题本：手机上做主从切换（列表 ↔ 详情） ---------- */
@media (max-width: 900px) {
    #wrongbookPage .wrongbook-header {
        flex-wrap: wrap;
        row-gap: 10px;
    }
    #wrongbookPage .wrongbook-header .admin-heading-block {
        flex: 1 1 calc(100% - 90px);
        min-width: 0;
    }
    #wrongbookPage .wrongbook-header .admin-heading-block h1 {
        font-size: 22px;
    }
    #wrongbookPage .wrongbook-header .admin-heading-block p {
        font-size: 12.5px;
        line-height: 1.45;
    }
    #wrongbookPage .wrongbook-header .wrongbook-mode-switch,
    #wrongbookPage .wrongbook-header .admin-header-actions {
        flex: 1 1 100%;
    }
    #wrongbookPage .wrongbook-header .wrongbook-mode-switch > button {
        flex: 1 1 0;
        text-align: center;
    }
    /* 列表不再困在 250px 的内滚动框里，整页滚动 */
    #wrongbookPage .wrongbook-list,
    html[data-ui-theme] #wrongbookPage .wrongbook-list {
        max-height: none;
    }
    /* 选中一题后：藏列表、只看详情；顶部一条"返回列表" */
    #wrongbookPage.wb-mobile-detail .wrongbook-browser {
        display: none;
    }
    #wrongbookPage.wb-mobile-detail .wb-mobile-back {
        display: inline-flex;
    }
    #wrongbookPage .wrongbook-detail pre,
    #wrongbookPage .wrongbook-detail table {
        max-width: 100%;
        overflow-x: auto;
    }
}
.wb-mobile-back {
    display: none;
    position: sticky;
    top: 8px;
    z-index: 12;
    align-items: center;
    gap: 6px;
    width: max-content;
    margin: 0 0 4px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border, #d9dde5);
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #15181d);
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
    cursor: pointer;
}
.wb-mobile-back:active { transform: translateY(1px); }

/* ---------- 练习赛 / 公开赛考场 ---------- */
@media (max-width: 640px) {
    #cspPracticePage {
        overflow-x: hidden;
    }
    /* 考场头部：去掉宠物，标题降到正文尺寸，纵向排 */
    #cspContestActivePanel .csp-contest-card-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 12px 14px !important;
        margin-bottom: 12px !important;
    }
    #cspContestActivePanel .csp-contest-title-wrap { gap: 0; }
    #cspContestActivePanel .csp-contest-title-wrap .pixel-pet { display: none; }
    #cspContestTitleText {
        font-size: 15px !important;
        line-height: 1.45 !important;
        font-weight: 600 !important;
    }
    #cspContestModeHint { font-size: 12px !important; }
    /* 头部里的计时器位置留一个占位，真正的计时器固定在屏幕底部（拇指够得着） */
    #cspContestTimerWrap {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 40;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 4px 10px;
        padding: 8px 12px !important;
        background: var(--bg-primary, #fff) !important;
        border: 1px solid var(--border, #d9dde5) !important;
        border-radius: 14px !important;
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
    }
    #cspContestTimerWrap.hidden { display: none; }
    #cspContestTimerWrap > div:first-child {
        width: auto;
        margin: 0 !important;
        font-size: 10px !important;
    }
    #cspContestTimer {
        font-size: 22px !important;
        line-height: 1.1;
    }
    #cspContestTimerWrap .admin-refresh-btn {
        margin-top: 0 !important;
        padding: 7px 12px;
        font-size: 13px;
        min-height: 36px;
    }
    #cspContestPausedHint {
        width: 100%;
        margin-top: 0 !important;
        text-align: center;
    }
    /* 底部固定条会盖住交卷按钮，给内容留出高度 */
    #cspContestActivePanel:not(.hidden) ~ *,
    #cspContestActivePanel {
        padding-bottom: 96px;
    }
    /* 题目卡与交卷区在窄屏上的内边距 */
    #cspPracticePage .csp-contest-prob-card { padding: 14px !important; }
    #cspPracticePage .csp-contest-prob-title { font-size: 15px; line-height: 1.4; }
    #cspPracticePage .csp-contest-prob-meta { flex-wrap: wrap; gap: 4px 12px; }
    #cspContestSubmissionBox { padding: 14px !important; }
    /* 结算面板与公开赛卡片 */
    #cspScoreboardPanel { gap: 14px !important; }
    #cspScoreboardPanel table { display: block; max-width: 100%; overflow-x: auto; }
    .csp-history-card { padding: 14px !important; }
    .csp-history-card h3, .csp-history-card h4 { font-size: 15px; }
}

/* ---------- 桌面侧边栏（update/139）：矮屏幕挤不下 + 可收起 ---------- */
@media (min-width: 769px) {
    /* 矮屏（教室电脑 1024×768 再减浏览器 UI 只剩 ~620px）：导航区可收缩并内滚，最近对话至少留 150px */
    .sidebar .sidebar-top {
        flex: 0 0 auto !important;   /* 导航必须完整可见，不参与压缩 */
        overflow: visible;
    }
    .sidebar #conversationsList {
        flex: 1 1 120px !important;
        min-height: 120px !important;
    }
    .sidebar #sidebarFavorites:not(.collapsed) #favoritesList {
        max-height: 168px;
        overflow-y: auto;
    }
    @media (max-height: 760px) {
        /* 实在装不下时整条侧栏可滚，底部账号行滚出去也比被裁掉强 */
        html .sidebar { overflow-y: auto !important; padding-top: 14px !important; padding-bottom: 10px !important; }
        html .sidebar .sidebar-header { min-height: 44px !important; padding-bottom: 12px !important; }
        html .sidebar .new-chat-btn { min-height: 40px !important; padding-top: 9px !important; padding-bottom: 9px !important; margin-bottom: 10px !important; }
        html .sidebar .learning-nav { gap: 2px !important; margin-bottom: 4px !important; }
        html .sidebar .learning-nav .profile-btn,
        html .sidebar #profileBtn { min-height: 34px !important; padding-top: 7px !important; padding-bottom: 7px !important; }
        html .sidebar .sidebar-tools-group { padding-bottom: 4px !important; margin-bottom: 2px !important; }
        html .sidebar #sidebarFavorites { margin-top: 4px !important; margin-bottom: 4px !important; }
        html .sidebar .sidebar-favorites-toggle { min-height: 32px !important; padding-top: 6px !important; padding-bottom: 6px !important; }
        html .sidebar .sidebar-conversations-label { padding-top: 4px !important; padding-bottom: 4px !important; }
        html .sidebar #profileBtn { margin-top: 4px !important; }
        html .sidebar .sidebar-footer { min-height: 40px !important; padding-top: 8px !important; margin-top: 4px !important; }
    }
    /* 收起按钮：放在 logo 行右侧 */
    .sidebar-collapse-btn {
        margin-left: auto;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        border: 1px solid var(--border, #d9dde5);
        background: var(--bg-primary, #fff);
        color: var(--text-secondary, #52514e);
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
        flex: 0 0 auto;
    }
    .sidebar-collapse-btn:hover { color: var(--text-primary, #15181d); }
    /* 收起后：侧栏移出布局，主区占满；左上角一个展开按钮 */
    html .workspace-shell.sidebar-collapsed { grid-template-columns: minmax(0, 1fr) !important; }
    .workspace-shell.sidebar-collapsed > .sidebar { display: none !important; }
    .workspace-shell.sidebar-collapsed .chat-header { padding-left: 64px !important; }
    .sidebar-expand-btn {
        display: none;
        position: fixed;
        top: 14px;
        left: 14px;
        z-index: 60;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        border: 1px solid var(--border, #d9dde5);
        background: var(--bg-primary, #fff);
        color: var(--text-primary, #15181d);
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
    }
    .workspace-shell.sidebar-collapsed ~ .sidebar-expand-btn,
    body.sidebar-collapsed .sidebar-expand-btn { display: inline-flex; align-items: center; justify-content: center; }
    /* 子页面（错题本/练习等）本来就不显示侧栏，展开按钮也别叠上去 */
    body.sidebar-collapsed .workspace-shell[data-workspace-mode="page"] ~ .sidebar-expand-btn { display: none; }
}
@media (max-width: 768px) {
    .sidebar-collapse-btn, .sidebar-expand-btn { display: none !important; }
}