/* ============================================================
   app-shell.css — 侧栏布局框架（整站改版，feat/sidebar-revamp）
   基准：design-app/index.html（画布 726465901280114 全 11 屏）
   结构：顶栏（topbar.js 渲染）+ .shell（.side-nav 200px + .shell-main）
   ============================================================ */

/* ---------- 外壳：顶栏下双栏 ---------- */
.shell {
    display: flex;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px 60px;
    gap: 20px;
}
.shell-main {
    flex: 1;
    min-width: 0; /* 防止内部宽表格撑破 */
}

/* ---------- 侧栏 ---------- */
.side-nav {
    width: 200px;
    flex: none;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #E3E8F0);
    border-radius: 12px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 84px; /* 顶栏 64px + 呼吸间距 */
    align-self: flex-start;
}
.side-nav .nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--text-2, #64748B);
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.side-nav .nav-item svg { flex: none; width: 16px; height: 16px; }
.side-nav .nav-item:hover { background: var(--primary-weak, #EDF2FF); color: var(--primary, #4F46E5); }
.side-nav .nav-item.active {
    background: var(--primary-weak, #EDF2FF);
    color: var(--primary, #4F46E5);
    font-weight: 600;
}
.side-nav .nav-item .badge-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-2, #64748B);
    font-weight: 500;
}

/* ---------- 页内主区（替代旧 .container 顶帽） ---------- */
.shell-main .page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.shell-main .page-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-1, #0F172A);
    margin: 0;
}

/* 登录卡态：侧栏隐藏、主区居中收窄（游客只见登录卡，侧栏无意义） */
.shell.no-nav .side-nav { display: none; }
.shell.no-nav .shell-main { max-width: 640px; margin: 0 auto; }

/* ---------- 窄屏（<900px）：侧栏折叠为横向胶囊条 ---------- */
@media (max-width: 899px) {
    .shell { flex-direction: column; padding: 14px 12px 56px; }
    .side-nav {
        position: static;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
        padding: 8px;
    }
    .side-nav .nav-item { padding: 7px 11px; font-size: 12.5px; }
}

/* ---------- 暗色模式（跟 topbar.css 的 [data-theme=dark] 同款变量体系） ---------- */
[data-theme="dark"] .side-nav {
    background: var(--surface, #16181D);
    border-color: var(--border, #262A33);
}
[data-theme="dark"] .side-nav .nav-item { color: var(--text-2, #9AA3B2); }
[data-theme="dark"] .side-nav .nav-item:hover,
[data-theme="dark"] .side-nav .nav-item.active {
    background: rgba(99, 102, 241, .14);
    color: var(--primary, #A5B4FC);
}

/* ---------- 教程截图（图文教程，2026-10-04 Harness 起用） ----------
   结构：<a class="tut-shot" href="原图"><img …><span class="tut-shot-hint">🔍 点击看大图</span></a>
   点击由 ui.js 的 uiLightbox 接管放大；无 JS 时按 <a target="_blank"> 原生降级。
   图片一律 max-width:100%，窄屏不撑破 .shell-main。 */
.tut-shot {
    position: relative;
    display: block;
    margin: 8px 0 4px;
    border: 1px solid var(--border, #E3E8F0);
    border-radius: var(--radius-sm, 10px);
    overflow: hidden;
    background: var(--surface-2, #F8FAFC);
    cursor: zoom-in;
    text-decoration: none;
    line-height: 0; /* 消除 img 行内基线空隙 */
}
.tut-shot img {
    display: block;
    width: 100%;
    height: auto;
}
.tut-shot:hover { border-color: var(--primary, #4F46E5); }
.tut-shot-hint {
    position: absolute;
    right: 8px;
    bottom: 8px;
    line-height: 1.4;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    color: #fff;
    background: rgba(15, 23, 42, .62);
    pointer-events: none;
    backdrop-filter: blur(2px);
}
/* 图片替换文字后的「小字幕」：池相关模型名等动态说明 */
.tut-cap {
    font-size: .82rem;
    color: var(--text-2, #64748B);
    line-height: 1.6;
    margin: 2px 0 6px;
}
.tut-cap code {
    background: var(--surface-2, #F8FAFC);
    border: 1px solid var(--border, #E3E8F0);
    border-radius: 5px;
    padding: 1px 5px;
    font-size: .95em;
}
[data-theme="dark"] .tut-shot { background: #0f1526; border-color: #262A33; }
[data-theme="dark"] .tut-cap code { background: #16181D; border-color: #262A33; }

/* 放大遮罩：z-index 高于 notice(1000)，低于无（页面最高层） */
.tut-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 23, 42, .86);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    cursor: zoom-out;
}
.tut-lightbox img {
    max-width: 96vw;
    max-height: 92vh;
    width: auto;
    height: auto;
    border-radius: 10px;
    box-shadow: var(--shadow-lg, 0 8px 30px rgba(15, 23, 42, .14));
    cursor: default;
    background: #fff;
}
.tut-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    font-size: 16px;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    cursor: pointer;
}
.tut-lightbox-close:hover { background: rgba(255, 255, 255, .3); }


/* ---------- 移动端适配（owner 2026-10-25 用户反馈手机端不自适应）----------
   症状：≤768px 下 200px 固定侧栏 + 主区挤在同一行，内容被压成窄条且
   顶栏按钮换行错乱。方案：窄屏侧栏降级为横向滚动条（水平导航），主区
   全宽；顶栏间距收紧。桌面端（>768px）零变化。 */
@media (max-width: 768px) {
    .shell {
        flex-direction: column;      /* 侧栏与主区上下排布 */
        padding: 12px 10px 40px;
        gap: 12px;
    }
    .side-nav {
        position: static;            /* 取消 sticky（移动端无意义且占高） */
        width: 100%;
        flex-direction: row;         /* 横向导航条 */
        overflow-x: auto;            /* 项多时横滑 */
        padding: 8px 6px;
        gap: 4px;
        -webkit-overflow-scrolling: touch;
    }
    .side-nav .nav-item {
        flex: none;                  /* 横条内不收缩，保持可读 */
        white-space: nowrap;
        padding: 7px 12px;
    }
    .shell-main { width: 100%; }
}

/* 更窄（≤480px）：导航字号略缩，顶栏密排 */
@media (max-width: 480px) {
    .side-nav .nav-item { padding: 6px 10px; font-size: .84rem; }
}

/* 游客态（no-nav）移动端：main 限宽放宽为全宽，内容不被 640px 卡居中条 */
@media (max-width: 768px) {
    .shell.no-nav .shell-main { max-width: none; }
}