/* ==========================================================================
   layout.css — “复古海报”版式大重排层（加载于 design.css 之后）
   --------------------------------------------------------------------------
   目标：把整站的结构性布局区搬到与原设计截然不同的位置——
     · 竖向侧栏 → 顶部横向报头
     · 顶部横条 → 底部栏
     · 右侧浮动面板 → 左侧（左↔右互换）
     · 居中卡片网格 → 反转列序 / 对角重排
   全部用 !important 压制各页原有布局；仅改几何/顺序，不动功能与文案。
   图标重绘：lucide 线条图标加粗 + 方牌底 + 硬投影 + hover 微旋，复古邮戳感。
   注意：本层是“视觉重排”，若某页 JS 依赖具体 offsetWidth/位置需后续微调。
   ========================================================================== */

/* ==========================================================================
   A. 图标系统重绘（全站 lucide <svg> 与 <i data-lucide>）
   ========================================================================== */

/* 所有 lucide 图标：加粗描边，复古墨线 */
.lucide,
svg.lucide,
[data-lucide] svg,
button svg,
i svg {
    stroke-width: 2.4 !important;
    vector-effect: non-scaling-stroke;
    transform-origin: center;
    transition: transform .18s ease !important;
}

/* 按钮内的图标：装进复古方牌（邮戳底） */
button > .lucide,
button > svg,
button > i > svg,
.tool-btn svg,
.nav-item svg,
.side-pill svg,
.action-btn svg,
.ws-icon-btn svg,
.ws-primary-btn svg,
.rail-new svg,
.send-btn svg,
.upload-btn svg {
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
}

/* hover 时图标微微旋起，像盖章——放在容器按钮上 */
.nav-item:hover svg,
.side-pill:hover svg,
.action-btn:hover svg,
.tool-btn:hover svg,
.ws-icon-btn:hover svg,
.ws-primary-btn:hover svg,
.send-btn:hover svg,
.upload-btn:hover svg,
.gen-btn:hover svg,
.primary-btn:hover svg {
    transform: rotate(-8deg) scale(1.12) !important;
}

/* 关闭/返回类图标保持方向语义，不做旋转过渡 */
.rail-close svg,
[aria-label*="关闭"] svg,
[title*="关闭"] svg,
#backToManagerBtn svg,
.toolbar-toggle svg,
.preview-nav-btn svg {
    transition: transform .18s ease !important;
}
.rail-close:hover svg,
.toolbar-toggle:hover svg {
    transform: rotate(180deg) !important;
}


/* ==========================================================================
   B. 首页 app-shell：左侧栏 → 顶部横向报头
   ========================================================================== */

body:has(.app-shell) .app-shell {
    flex-direction: column !important;
    height: 100vh !important;
}

/* 侧栏变成通栏顶部报头（扁平：图标+文字横排，整条 ~44px） */
body:has(.app-shell) .sidebar,
body:has(.app-shell) #studioSidebar {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    border-right: none !important;
    border-bottom: 2px solid var(--dv-stroke-soft) !important;
    padding: 5px 14px !important;
    gap: 8px !important;
    overflow: visible !important;
    box-shadow: 0 3px 0 var(--dv-shadow-c) !important;
}

/* 报头内的 logo 区靠左 */
body:has(.app-shell) .sidebar .logo-ring {
    flex: 0 0 auto !important;
    margin: 0 8px 0 0 !important;
    transform: none !important;
}
body:has(.app-shell) .sidebar .logo-ring.mb-12 {
    margin-bottom: 0 !important;
}

/* 底部动作组（API设置/更多设置/项目主页/更新）：横排靠右，图标+文字水平 */
body:has(.app-shell) .sidebar .side-actions {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    gap: 6px !important;
    order: 99 !important;
    position: relative !important;
}

/* 版本徽章 / 更新按钮：收进报头一行，不撑高 */

/* 整条报头锁高度，避免被撑高 */
body:has(.app-shell) .sidebar,
body:has(.app-shell) #studioSidebar {
    height: auto !important;
}
body:has(.app-shell) .sidebar nav {
    flex-wrap: nowrap !important;
}
body:has(.app-shell) .sidebar > * {
    align-self: center !important;
}

/* nav 从纵向改横向滚动条 */
body:has(.app-shell) .sidebar nav {
    flex: 1 1 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 !important;
    gap: 6px !important;
    scrollbar-width: thin !important;
}

/* 每个导航项/动作牌：扁平横排（图标+文字水平一行），统一 30px 高 */
body:has(.app-shell) .sidebar .nav-item,
body:has(.app-shell) .sidebar .side-pill{
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    height: 30px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border: 2px solid var(--dv-stroke-soft) !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 var(--dv-shadow-c) !important;
}
/* 报头内图标缩小一档，与文字水平居中 */
body:has(.app-shell) .sidebar .nav-item svg,
body:has(.app-shell) .sidebar .side-pill svg {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 auto !important;
}
/* 折叠把手 chevron：横排内联，不再撑高按钮 */
body:has(.app-shell) .settings-fold-chevron {
    width: 12px !important;
    height: 12px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

/* 导航文字常显、缩小（覆盖原 max-width:0 折叠态） */
body:has(.app-shell) .nav-text,
body:has(.app-shell) .side-pill-text {
    opacity: 1 !important;
    max-width: 160px !important;
    margin-left: 0 !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    transition: none !important;
}

/* 折叠 chevron / 展开动画在报头里失效 → 全部直接展开、隐藏折叠把手 */
/* 导航分隔线在横排下压扁成竖线，并杀掉旧竖排遗留的 margin:auto 空洞 */
body:has(.app-shell) .sidebar nav > div:not([class]) {
    width: 2px !important;
    height: 26px !important;
    align-self: center !important;
    flex: 0 0 auto !important;
    margin: 0 4px !important;
}

/* 报头统一行高，杜绝个别 pill/项因 chevron 撑高错位 */
body:has(.app-shell) .sidebar nav,
body:has(.app-shell) .sidebar .side-actions {
    align-items: center !important;
    flex-wrap: nowrap !important;
}
body:has(.app-shell) .sidebar nav { justify-content: flex-start !important; }
body:has(.app-shell) .sidebar .side-actions { justify-content: flex-end !important; }
body:has(.app-shell) .nav-item,
body:has(.app-shell) .side-pill{
    height: 30px !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 「更多设置」弹窗取消：隐藏触发按钮，把折叠组（主题/语言/工作流）
   直接内联平铺进顶栏，始终展开、横向排列，与其余 side-pill 同一行。 */
body:has(.app-shell) .settings-fold-toggle {
    display: none !important;
}
body:has(.app-shell) .settings-fold-group,
body:has(.app-shell) .settings-fold-group.is-collapsed {
    position: static !important;
    width: auto !important;
    max-height: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    z-index: auto !important;
}
body:has(.app-shell) .settings-fold-group .side-pill {
    width: auto !important;
    height: 30px !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 10px !important;
    border: 2px solid var(--dv-stroke-soft) !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 var(--dv-shadow-c) !important;
}
body:has(.app-shell) .side-actions {
    position: relative !important;
}
/* 顶栏后 hover 不再改宽度/位移 */
body:has(.app-shell) .sidebar:hover .nav-item,
body:has(.app-shell) .sidebar:hover .side-pill,
body:has(.app-shell) .sidebar.is-pinned .nav-item,
body:has(.app-shell) .sidebar.is-pinned .side-pill {
    width: auto !important;
    transform: none !important;
}
body:has(.app-shell) .sidebar .letter-d,
body:has(.app-shell) .sidebar .letter-x {
    transform: none !important;
    opacity: 1 !important;
}

/* 舞台（原 iframe 区）留在下方全宽 */
body:has(.app-shell) .stage {
    flex: 1 1 auto !important;
    width: auto !important;
    margin: 12px !important;
    border-radius: 12px !important;
}


/* ==========================================================================
   C. 画布列表 .workspace：左侧栏 → 顶部；顶栏 → 底部
   ★ 2026-09-14 第 11 批：画布列表页已改回「左侧竖栏 + 右侧网格」，
     由 canvas-list.css 自己接管排版。这里用 body:not(.canvas-list-page) 把
     整段覆盖对画布列表页 scope 掉 —— 其余仍带 .ws-sidebar 的页面（老页面/外壳）
     行为完全不变。
   ========================================================================== */

body:not(.canvas-list-page):has(.ws-sidebar) .workspace {
    flex-direction: column !important;
}

/* 项目侧栏变顶部横条 */
body:not(.canvas-list-page):has(.ws-sidebar) .ws-sidebar {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-height: none !important;
    flex-direction: row !important;
    align-items: center !important;
    border-right: none !important;
    border-bottom: 2px solid var(--dv-stroke-soft) !important;
    padding: 8px 14px !important;
    gap: 12px !important;
    box-shadow: 0 3px 0 var(--dv-shadow-c) !important;
}
body:not(.canvas-list-page):has(.ws-sidebar) .ws-side-head {
    flex: 0 0 auto !important;
    padding: 0 !important;
    width: auto !important;
}
body:not(.canvas-list-page):has(.ws-sidebar) .ws-project-list {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 4px 2px !important;
    min-width: 0 !important;
}
body:not(.canvas-list-page):has(.ws-sidebar) .ws-side-foot {
    flex: 0 0 auto !important;
}

/* 主区内顶栏翻到底部 */
body:not(.canvas-list-page):has(.ws-sidebar) .ws-main {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
body:not(.canvas-list-page):has(.ws-sidebar) .ws-topbar {
    order: 99 !important;
    border-bottom: none !important;
    border-top: 2px solid var(--dv-stroke-soft) !important;
    box-shadow: 0 -3px 0 var(--dv-shadow-c) !important;
    backdrop-filter: none !important;
}


/* ==========================================================================
   D. 设置类页 .layout（comfyui-settings）：侧栏 → 顶部横排
   （api-settings 已改为左右两栏新排版，由 .api-page 专属规则接管，见 D2）
   ========================================================================== */

body:not(.api-page):has(aside.sidebar) .layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    gap: 16px !important;
}
body:not(.api-page):has(aside.sidebar) .sidebar {
    position: static !important;
    max-height: none !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
    overflow: visible !important;
    border: 2px solid var(--dv-stroke-soft) !important;
    border-radius: 10px !important;
    box-shadow: var(--dv-shadow-sm) !important;
    top: auto !important;
}
body:not(.api-page):has(aside.sidebar) .sidebar .provider-list,
body:not(.api-page):has(aside.sidebar) .sidebar .workflow-panel,
body:not(.api-page):has(aside.sidebar) .sidebar .side-card {
    flex: 1 1 200px !important;
    width: auto !important;
    max-height: 150px !important;
    overflow: auto !important;
}
body:not(.api-page):has(aside.sidebar) .sidebar {
    max-height: 190px !important;
    overflow: auto !important;
}
body:not(.api-page):has(aside.sidebar) .content {
    width: 100% !important;
}


/* ==========================================================================
   D2. API 设置页（.api-page）：严格左右两栏
   左列：只有平台列表（sidebar，含新增平台/推荐API/CLI 设置）
   右列：其余全部纵向堆叠 —— API 标题条 → 基本信息 → 模型列表工具条 →
         生图/聊天/视频模型（新增平台子页面同样适用，编辑器视图共用本容器）
   ========================================================================== */
body.api-page .layout {
    display: grid !important;
    grid-template-columns: 320px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
}
body.api-page .layout > .sidebar {
    grid-column: 1 !important;
}
/* 右列：settingsContent 恢复普通纵向容器，全部子块纵向堆叠、无空洞 */
body.api-page #settingsContent {
    grid-column: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    min-width: 0 !important;
}
body.api-page #recommendContent {
    grid-column: 2 !important;
}
body.api-page .model-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}
/* 窄屏退回单列 */
@media (max-width: 1100px) {
    body.api-page .layout {
        grid-template-columns: 1fr !important;
    }
    body.api-page .layout > .sidebar,
    body.api-page #settingsContent,
    body.api-page #recommendContent {
        grid-column: 1 !important;
    }
}


/* ==========================================================================
   E. GPT 对话：保持原生布局（顶栏在顶部、输入区 composer 在底部）
   说明：此处曾用 grid-row 把 composer 提到顶部、顶栏沉底；
   2026.09.12 按需求还原为 gpt-chat.html 的原生 DOM 顺序
   （topbar → messages → composer-wrap），无需任何覆盖。
   ========================================================================== */


/* ==========================================================================
   F. 无限画布 canvas / smart-canvas：浮动面板左右互换 + 工具栏下沉
   ========================================================================== */

/* 顶部浮动 topbar 沉到画布下方 */
body:has(> .shell) .shell > .topbar,
.shell .topbar.editor-only,
#shell.shell > .topbar {
    top: auto !important;
    bottom: 18px !important;
    left: 24px !important;
    right: 24px !important;
}
/* 右上素材抽屉 → 左下 */
.canvas-asset-panel {
    right: auto !important;
    left: 24px !important;
    top: auto !important;
    bottom: 96px !important;
}
.asset-panel:not(.open):not([class*="workflow"]) {
    right: auto !important;
    left: 22px !important;
    top: auto !important;
    bottom: 96px !important;
}


/* ==========================================================================
   G. 生成工具页角标与网格（angle / enhance / klein / online / zimage）
   居中卡片：网格左右列互换；浮动角标按钮对角翻转
   ========================================================================== */

/* 双列工具网格 → 反转列序（视觉左变右） */
.grid.grid-cols-1.md\:grid-cols-2,
body:has(.container-box) .md\:grid-cols-2 {
    direction: rtl !important;
}
body:has(.container-box) .md\:grid-cols-2 > * {
    direction: ltr !important;
}

/* 生成/预览类浮动角标：从右角搬到左角 */
button.absolute.top-10.right-10 { right: auto !important; left: 2.5rem !important; }
button.absolute.top-6.right-6   { right: auto !important; left: 1.5rem !important; }


/* ==========================================================================
   G2. 子页顶部黑色长条：container 顶部 margin 塌陷穿透 body，露出 html 冷黑底
       （rgb(15,20,29)）。design.css 只给 body 上暖色，未管 html。
       根治：给 html 也压上复古暖底 + 保留少量顶部留白。
   ========================================================================== */
html,
html.studio-theme-dark,
html.theme-dark {
    background-color: var(--dv-bg) !important;
}
body .container-box,
body .layout-container {
    margin-top: 24px !important;
    padding-top: 0 !important;
}


/* ==========================================================================
   G3. 小字号统一放大：9/10/11px 的 Tailwind 任意值类与常见小标签
   ========================================================================== */
.text-\[8px\],
.text-\[9px\],
.text-\[10px\] {
    font-size: 12px !important;
    line-height: 1.5 !important;
}
.text-\[11px\] {
    font-size: 13px !important;
    line-height: 1.5 !important;
}
/* 常见小标签类（参考图 MAIN/AUX、PROMPT、引擎、尺寸等） */
.text-xs {
    font-size: 12.5px !important;
}
/* 顶栏版本徽章 */
/* 生成页内联小字号类（模型/尺寸/引擎/徽标等）统一放大 */
body .control-label,
body .model-option,
body .size-select,
body .size-custom,
body .size-fit-btn,
body .mode-badge,
body .engine-switch,
body .engine-btn,
body .engine-label,
body .ratio-label,
body .select-shell,
body .nano-input,
body .mode-btn,
body .mode-btn span,
body .hbm-btn,
body .hbm-btn span {
    font-size: 12.5px !important;
}
body .control-label {
    letter-spacing: .06em !important;
    font-weight: 700 !important;
}
/* API 设置页小标签 */
body .side-section-title,
body .provider-meta,
body .recommend-badge,
body .lora-field span,
body .picker-cat-tab .cat-count,
body .picker-model-badge,
body .rh-card-title-field span,
body .rh-editor-summary span,
body .rh-preview-slot,
body .rh-image-slot-row label span {
    font-size: 12px !important;
}
/* GPT 对话页小标签 */
body .title-block p,
body .model-picker-provider,
body .model-picker-model,
body .model-picker-scope button,
body .model-picker-option,
body .resolution-picker-type,
body .resolution-picker-value,
body .resolution-picker-scope button,
body .resolution-picker-option,
body .mode-switch button,
body .action-btn,
body .action-btn span,
body .system-prompt-actions button,
body .system-prompt-actions button span,
body .empty-state-text {
    font-size: 12px !important;
}
/* 智能画布 composer 控件字体变量（10.5px）整体抬到 12px */
body .composer,
html.studio-theme-dark body .composer {
    --ctrl-font: 12px !important;
    --ctrl-pop-font: 12px !important;
}


/* ==========================================================================
   H. 素材管理页 asset-manager：恢复原生 DOM 顺序（头部在顶部、内容在下方）
   说明：此处曾用 `.asset-page{flex-direction:column-reverse}` +
   `.asset-manager-root{order:1}` 把「素材库管理」整行头翻到页面底部；
   2026.09.12 按需求还原为 asset-manager.html 的原生顺序，无需任何覆盖
   （asset-manager.css 的 .asset-page 本身就是 flex-direction:column）。

   I. 同段原有一条 `body{overflow:hidden}`（给上面的翻转做"滚动/遮挡保护"）已移除：
   该页 body 的 overflow:hidden 由 asset-manager.css 自己声明（配合 .nav-scroll /
   .content-scroll / .detail-scroll 内部滚动区），这里重复声明属于冗余，
   留着还会和 @media(max-width:1280px) 的 `body{overflow:auto}` 打架。
   ========================================================================== */