/* responsive.css — [1025 WP6] 手机 / 平板兼容层, 在 web_ui.html 与 artifacts.html 中最后加载。
 *
 * 只用媒体查询覆盖, 桌面 (≥1280 且鼠标) 不命中任何规则, 外观不变:
 *   1) 安全区: viewport-fit=cover 后刘海 / 底部横条区域用 env(safe-area-inset-*) 让开 (无安全区的设备 env()=0)
 *   2) 侧栏抽屉: ≤900px 或横屏手机 (高 ≤500) 侧栏改为抽屉, ☰ 打开、点遮罩关闭 (原来只有 ≤640 才是抽屉)
 *   3) 触屏 (hover:none + pointer:coarse): 可点元素至少 40px; 只在 :hover 出现的按钮常显
 *   4) ≤480 手机: 弹出面板铺满全屏; DAG 编辑器、/artifacts 页改成单列
 */

/* ── 1. 安全区 ─────────────────────────────────────────────── */
@supports (padding:max(0px)) {
  html body.v2 #app{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  html body.v2 #ia{padding-bottom:max(14px, calc(env(safe-area-inset-bottom) + 6px))}
  html body.v2 #sb{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .dag-ui{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
}
/* 顶部安全区只在「添加到主屏幕」全屏打开时非 0 (浏览器里状态栏在视口外), 只在这种模式下给头部让位 */
@media (display-mode:standalone), (display-mode:fullscreen) {
  html body.v2 #hdr{padding-top:env(safe-area-inset-top);box-sizing:content-box}
}
@media (max-width:640px) {
  @supports (padding:max(0px)) {
    html body.v2 #ia{padding-bottom:max(10px, calc(env(safe-area-inset-bottom) + 4px))}
  }
}

/* ── 2. 平板竖屏 / 横屏手机: 侧栏改抽屉 ─────────────────────── */
@media (max-width:900px), (max-height:500px) and (max-width:1000px) and (orientation:landscape) {
  html body.v2 #sb{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);width:78vw;max-width:300px;z-index:20;
    box-shadow:none}
  html body.v2 #sb.open{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.18)}
  html body #ov.show{display:block!important}
  html body #mbu{display:flex!important;align-items:center;justify-content:center}
  html body.v2 #scroll-btn{left:50%}
}
/* 横屏手机: 高度很紧, 输入区和头部压缩, 留出消息区 */
@media (max-height:500px) and (orientation:landscape) {
  html body.v2 #hdr{height:44px}
  html body.v2 #ia{padding-top:2px;padding-bottom:max(6px, env(safe-area-inset-bottom))}
  html body.v2 #iw{padding-top:6px;padding-bottom:4px}
  html body.v2 #mi{max-height:72px}
  html body.v2 #main.lc-empty #iw{min-height:0}
  html body.v2 #main.lc-empty #mw{padding-bottom:8px}
  .lc-hello{font-size:20px}
  .lc-hello-sub{display:none}
  .pnl .pb_{max-height:96vh}
}

/* ── 3. 触屏: 点击目标 ≥40px、hover 才出现的按钮常显 ──────────── */
@media (hover:none) and (pointer:coarse) {
  /* 头部 / 输入条 */
  html body #mbu{min-width:44px;min-height:44px;font-size:22px}
  html body.v2 #share-btn,html body.v2 #hdr-more,html body.v2 #hdr-model{min-width:40px;height:40px}
  html body.v2 #upb,html body.v2 #micb,html body.v2 #iw-more{width:40px;height:40px}
  html body.v2 #msw-chip,html body.v2 #thk,html body.v2 #strat,html body.v2 #kbs-btn,html body.v2 #stb{height:40px}
  html body.v2 #sdb,html body.v2 #ib{width:44px;height:44px}
  html body.v2 #mi{min-height:40px}
  html body.v2 #scroll-btn{width:40px;height:40px}
  html body.v2 .sg{min-height:40px}
  /* 消息内: 复制 / 编辑 / 步骤折叠 / 文件卡 */
  html body.v2 .cpb{opacity:.9;min-height:40px;min-width:48px;font-size:12px}
  html body.v2 .mac{opacity:1}
  html body.v2 .mab{min-height:40px;padding:6px 10px}
  html body.v2 .lc-steps-h{min-height:40px}
  html body.v2 .lc-fa{min-height:40px;min-width:40px;display:inline-flex;align-items:center;justify-content:center}
  /* 侧栏: 会话项、操作按钮 (原来 .si:hover 才显示, 触屏点不到) */
  html body.v2 .si{min-height:44px}
  html body.v2 .si.act .sdl{display:block;min-width:40px;min-height:40px}
  html body.v2 .si.act .pg-mv{opacity:.7}
  html body.v2 .pg-btn{opacity:.8;min-width:40px;min-height:40px}
  html body.v2 #ncb,html body.v2 #today-entry,html body.v2 #sess-search,html body.v2 #sess-sort{min-height:40px}
  html body.v2 #ud-entry,html body.v2 #pv-entry{min-height:40px;font-size:12px!important}
  html body.v2 .sbt,html body.v2 .sbx-tog{min-height:40px}
  html body.v2 #sbf-status{min-height:40px}
  /* 面板通用: 关闭 ×、按钮、标签页、折叠 summary */
  .px_{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:24px!important}
  .pnl .abtn,.pnl button:not(.px_):not(.cal-day):not([class*="cal-cell"]),.pnl select,
  .pnl input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]){min-height:40px}
  .pnl .abtn{font-size:12px!important}
  summary{min-height:40px;min-width:44px;display:flex;align-items:center}
  .pnl .abtn{min-width:40px}
  .pnl .art-chip{min-height:40px;display:inline-flex;align-items:center;font-size:12px}
  #sf-bd div[onclick]{min-height:40px;display:flex;align-items:center}
  #sf-bd span[onclick]{display:inline-flex;align-items:center;min-height:40px}
  #ud-close{width:44px;height:44px}
  #pv-close{width:42px;height:42px}   /* providers.css 窄屏给标题留 calc(100% - 50px), 42+8 正好不折行 */
  #pv-new,.pv-btn{min-height:40px}
  #msw-card .msw-test{min-width:44px}
  .pv-add,.pv-item,.ud-chip,#ud-export,#ud-report,.st-chip,.sk-tab,.sk-btn,.cal-seg-b,.ud-link{min-height:40px}
  .sk-btn,.cal-seg-b,.ud-chip{min-width:44px}
  #sf-bd a[download],#sf-bd a[href*="download"]{display:inline-flex;min-width:40px;min-height:40px;align-items:center;justify-content:center}
  /* 浮层卡片: 模型选择 / 更多菜单 */
  #msw-card button,#msw-card [data-pick],#hdr-more-card .hdr-more-it,#iw-more-card button{min-height:40px}
  #msw-card [data-close]{min-width:40px;font-size:20px}
  /* 登录 */
  #ls .li_,#ls .lb_{min-height:44px;font-size:16px}
  /* DAG */
  .dag-ui .dag-close-btn,.dag-ui #dpl-new,.dag-ui .dpl-act-btn,.dag-ui .des-btn,.dag-ui .des-top input.name{min-height:40px}
  .dag-ui .dpl-act-btn{min-width:44px;font-size:12px}
  .dag-ui .des-pal-item{min-height:40px;font-size:13px;cursor:pointer}
  .dag-ui .des-drawer .close{min-width:44px;min-height:44px}
  /* 面板与浮层里内联写死 9~11px 的小字 (文件大小 / 时间 / 说明) 统一放大到 12px */
  .pnl [style*="font-size:9px"],.pnl [style*="font-size:10px"],.pnl [style*="font-size:11px"],
  #msw-card [style*="font-size:10px"],#msw-card [style*="font-size:11px"],#msw-card .msw-i,#msw-card .msw-test{font-size:12px!important}
  .sk-name,.sk-badge,.sk-btn,.pnl small,.pv-gd,.pv-badge,.pv-cnt,html body.v2 .clang,html body.v2 #share-btn .t{font-size:12px}
  /* 触屏输入框 ≥16px, 防 iOS 聚焦自动放大 */
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:max(16px, 1em)}
}

/* ── 4a. 平板及以下: 小字放大到 ≥12px ───────────────────────── */
@media (max-width:1024px) and (hover:none) {
  .dag-ui .dag-ver{font-size:12px}
  .dag-ui .des-pal-h,.dag-ui .dpl-card .meta,.dag-ui #dpl-cnt{font-size:12px}
  .cal-ev{font-size:12px}
}

/* ── 4b. 手机 (≤480): 面板铺满全屏 ─────────────────────────── */
@media (max-width:480px) {
  html body .pnl{padding:0;align-items:stretch}
  /* 各面板有 #pnl-xxx .pb_{height:86vh} 这类 id 级规则, 这里只能用 !important 覆盖 */
  html body .pnl > .pb_{max-width:none!important;width:100%!important;height:100vh!important;height:100dvh!important;max-height:none!important;border-radius:0!important;
    padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  html body .pnl > .pb_ > .pbd_{max-height:none!important;flex:1 1 auto;overflow-y:auto;min-height:0}
  html body #pnl-vnc > div{width:100vw!important;height:100dvh!important;border-radius:0!important}
  /* 模型选择等浮层不超出屏幕 */
  #msw-card{max-width:calc(100vw - 16px)}
}

/* ── 4c. DAG 编辑器窄屏: 工具条换行、调色板变成顶部横向滚动条 ───
 * dag_ui / dag_editor_simple / dag_pipelines 的样式是运行时插到 <head> 末尾的, 这里统一加 .dag-ui 前缀提高优先级 */
@media (max-width:640px) {
  .dag-ui .dag-ui-top{flex-wrap:wrap;gap:6px;padding:8px 10px}
  .dag-ui .dag-ui-top .dag-ver{display:none}
  .dag-ui .des-top{flex-wrap:wrap}
  .dag-ui .des-top input.name{flex:1 1 100%;min-width:0}
  .dag-ui .des-top .spacer{display:none}
  .dag-ui .des-top .des-btn{flex:1 1 0}
  .dag-ui .des-body{flex-direction:column}
  .dag-ui .des-palette{flex:0 0 auto;display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overflow-y:hidden;
    border-right:none;border-bottom:1px solid var(--bd,#e2e8f0);padding:6px 8px;-webkit-overflow-scrolling:touch}
  .dag-ui .des-pal-h{flex:0 0 auto;align-self:center;margin:0 2px}
  .dag-ui .des-pal-item{flex:0 0 auto;margin:0;white-space:nowrap}
  .dag-ui .des-drawer{width:100%;max-width:none}
  .dag-ui .dpl-card{flex-wrap:wrap}
  .dag-ui .dpl-card .actions{width:100%;justify-content:flex-end;flex-wrap:wrap}
}

/* ── 4d. /artifacts 独立页 (artifacts.html): 窄屏单列 ────────── */
@media (max-width:768px) {
  .top:has(+ .shell){height:auto;flex-wrap:wrap;padding:10px 14px;padding-top:max(10px, env(safe-area-inset-top))}
  .top:has(+ .shell) .sub{flex:1 1 auto;min-width:0}
  .shell:has(> aside.side){display:block;height:auto}
  .shell > aside.side{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border);
    padding:8px 10px}
  .shell > aside.side h4{display:none}
  .shell > aside.side #owner-list{display:flex;gap:6px}
  .shell > aside.side .owner-item{flex:0 0 auto;white-space:nowrap;margin:0;min-height:40px;border:1px solid var(--border)}
  .shell > aside.side .owner-item .cnt{margin-left:6px;font-size:12px}
  .shell > main.main{padding:16px 14px max(16px, env(safe-area-inset-bottom))}
  .shell > main.main .hero .h1{font-size:24px}
  .shell > main.main .grid{grid-template-columns:1fr}
}
@media (hover:none) and (pointer:coarse) {
  .top:has(+ .shell) .pill,.shell .card .row .btn{min-height:40px;min-width:44px;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
  .shell > aside.side h4,.shell > aside.side .owner-item .cnt,.shell .card .kind,.shell .card .owner{font-size:12px}
}