/* ============================================================
   mobile.css — 手机（≤768px）适配，最后加载。
   桌面版式不受影响：除了新增元素默认隐藏，所有规则都在 max-width: 768px 里。
   1. 外壳：顶栏只放“菜单 + 页面标题”，导航收进带文字的抽屉（企业空间、姓名、退出也在抽屉里）
   2. 弹窗：底部抽屉式全宽面板，关闭钮够大
   3. 可点区：按钮、页签、分段、筛选标签至少 40px 高
   4. 各页：项目头、页签、任务卡片、画布工具条与列表看法等
   ============================================================ */
.nav-toggle, .dock-account, .nav-scrim { display: none; }

@media (max-width: 768px) {
  /* ---------- 1. 外壳 ---------- */
  html:root .dock {
    position: fixed; top: 0; bottom: 0; left: 0; right: auto; z-index: 60;
    width: min(84vw, 304px); transform: translateX(-105%); visibility: hidden;
    flex-direction: column; align-items: stretch; gap: 2px;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 12px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 0 18px 18px 0;
    background: linear-gradient(180deg, var(--case-night-2, #1d2028), var(--case-night, #12141a));
    transition: transform .24s var(--ease-ios), visibility 0s linear .24s;
  }
  html.nav-open:root .dock { transform: none; visibility: visible; transition: transform .24s var(--ease-ios); }
  html:root .dock-logo { padding: 2px 8px 12px; margin-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  html:root .dock-logo .logo-name { display: block; }
  html:root .dock-logo .brand-logo { width: 46px; }
  html:root #nav { display: flex; flex-direction: column; align-items: stretch; gap: 2px; flex: none; overflow: visible; }
  html:root .nav-item { min-height: 46px; padding: 10px 12px; font-size: 16px; gap: 14px; }
  html:root .nav-item span { display: inline; }
  html:root .nav-item svg { width: 21px; height: 21px; }
  html:root .nav-item.active::before { left: -12px; right: auto; top: 11px; bottom: 11px; width: 3px; height: auto; }
  html:root .nav-sep {
    font-size: 11.5px; width: auto; height: auto; align-self: stretch; background: none; flex: none;
    margin: 10px 4px 4px; padding: 10px 8px 2px; border-top: 1px solid rgba(255, 255, 255, .08);
    letter-spacing: .12em; color: rgba(241, 237, 228, .45);
  }
  .dock-account {
    display: flex; flex-direction: column; gap: 10px; margin-top: auto;
    padding: 14px 8px 0; border-top: 1px solid rgba(255, 255, 255, .08); color: #F1EDE4;
  }
  .dock-account-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .dock-account-who .avatar { width: 34px; height: 34px; font-size: 15px; background: rgba(255, 255, 255, .14); }
  .dock-account-who div { display: flex; flex-direction: column; min-width: 0; }
  .dock-account-who b { font-size: 15px; }
  .dock-account-who span { font-size: 12.5px; color: rgba(241, 237, 228, .6); }
  html:root .dock-logout { min-height: 42px; background: rgba(255, 255, 255, .1); color: #F1EDE4; }
  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 55; background: rgba(10, 10, 12, .45);
    opacity: 0; pointer-events: none; transition: opacity .24s var(--ease-ios);
  }
  html.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  html.nav-open, html.nav-open body { overflow: hidden; }

  html:root .main { margin-left: 0; padding-top: 0; }
  /* 顶栏：贴顶、不透明（内容滚到下面不再透出来压字），只放“菜单”和完整页面标题 */
  html:root .topbar {
    position: sticky; top: 0; z-index: 30; margin: 0; border-radius: 0; border-width: 0 0 1px;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 6px 8px; min-height: 52px;
    flex-wrap: nowrap; gap: 6px; justify-content: flex-start;
    background: #FBF8F2; -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 1px 6px rgba(40, 30, 15, .08);
  }
  html:root .topbar h2 { flex: 1; min-width: 0; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html:root .topbar-user { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 40px; padding: 0 12px 0 8px;
    border: 1px solid var(--sep-strong); border-radius: 10px; background: var(--surface); color: var(--text-1);
    font: 600 14px/1 var(--font); cursor: pointer;
  }
  .nav-toggle svg { width: 20px; height: 20px; }
  .nav-toggle:active { opacity: .6; }
  html:root .page { padding: 12px 10px 48px; }
  /* 入场淡入动画在手机上关掉：它留下的 transform 会让页内 fixed 的抽屉、底部面板相对卡片而不是屏幕定位 */
  html:root .fx-enter { animation: none; opacity: 1; transform: none; }

  /* ---------- 2. 弹窗：底部抽屉式全宽面板 ---------- */
  html:root .modal-overlay { padding: 0; align-items: flex-end; }
  html:root .modal, html:root .modal.wide {
    width: 100%; max-width: 100%; max-height: calc(100dvh - 10px); border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  html:root .modal-header { padding: 10px 10px 10px 16px; gap: 10px; align-items: flex-start; }
  html:root .modal-header h3 {
    font-size: 16px; line-height: 1.45; word-break: normal; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  html:root .modal-header h3.full { display: block; -webkit-line-clamp: unset; }
  html:root .modal-close { width: 40px; height: 40px; font-size: 20px; }
  html:root .modal-body { padding: 14px 16px 24px; overscroll-behavior: contain; }
  html:root .modal.drawer { max-height: 100dvh; height: 100dvh; border-radius: 0; }

  /* ---------- 3. 可点区 ---------- */
  html:root .btn { min-height: 40px; }
  html:root .btn-sm { min-height: 38px; padding: 6px 12px; }
  html:root .tab-item { min-height: 40px; }
  html:root .seg button { min-height: 38px; }
  html:root .chip-toggle { min-height: 36px; }
  html:root .field input, html:root .field select, html:root select, html:root input[type=search], html:root input[type=text] { min-height: 40px; font-size: 16px; }
  html:root .switch-row { min-height: 36px; }
  html:root .link-btn { min-height: 32px; }
}

/* ---------- 4. 项目工作区 ---------- */
.ws-head-mobile { display: none; }
@media (max-width: 768px) {
  html:root .ws-head { padding: 12px 14px; margin-bottom: 10px; gap: 8px; }
  html:root .ws-title { font-size: 18px; gap: 6px 8px; line-height: 1.35; }
  html:root .ws-myrole { font-size: 12.5px; }
  .ws-head .ws-sub, .ws-head .ws-head-actions { display: none; }
  .ws-head.open .ws-sub, .ws-head.open .ws-head-actions { display: flex; width: 100%; }
  .ws-head.open .ws-head-actions > a[href="#/projects"] { display: none; }
  .ws-head-mobile { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .ws-head-mobile .btn-ghost { padding-left: 4px; }

  /* 页签：一行横滑，当前页签居中，两侧还有页签时边缘淡出 */
  html:root .tab-bar { width: 100%; flex-wrap: nowrap; margin-bottom: 12px; scrollbar-width: none; overscroll-behavior-x: contain; }
  html:root .tab-bar::-webkit-scrollbar { display: none; }
  html:root .tab-item { flex: none; padding: 8px 14px; font-size: 14.5px; }
  .tab-bar.more-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .tab-bar.more-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
  .tab-bar.more-left.more-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }

  /* 表格折成卡片：每行一张，标题整行，其余字段带标签 */
  html:root .card .table.rtable { min-width: 0; }
  .rtable thead { display: none; }
  .rtable, .rtable tbody { display: block; width: 100%; }
  .rtable tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 12px 2px; border-bottom: 1px solid var(--sep); }
  .rtable tr.clickable:active { background: var(--fill); }
  html:root .rtable td { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; font-size: 13px; color: var(--text-2); }
  .rtable td[data-label]::before { content: attr(data-label); color: var(--text-3); font-size: 12px; }
  html:root .rtable td.rt-title { order: -1; width: 100%; display: block; font-size: 15.5px; line-height: 1.5; font-weight: 600; color: var(--text-1); }
  .rtable td.rt-title::before, .rtable td.rt-id::before, .rtable td.rt-status::before { content: none; }
  .rtable td.rt-id { order: -2; font-family: var(--case-mono, var(--mono)); font-size: 12px; }
  .rtable td.rt-status { order: -2; }
  html:root .rtable td.rt-empty, html:root .rtable td.rt-src, html:root .rtable td.rt-act:has(> .muted:only-child) { display: none; }
  .rtable td.rt-act { margin-left: auto; }
  .ws-members-scroll { overflow: visible; }
}

/* ---------- 5. 大画布：缩放条、画布 / 列表切换、列表卡片 ---------- */
.tz-bar, .mview-toggle, .m-mine { display: none; }
@media (max-width: 768px) {
  /* 框内单指原生滚动，双指交给 TouchZoom 缩放内容（不再放大整页） */
  .tz-frame { touch-action: pan-x pan-y; overscroll-behavior: contain; }
  .tz-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 6px; }
  .tz-bar .btn { min-width: 44px; font-weight: 700; }
  .tz-bar .tz-pct { min-width: 64px; font-family: var(--case-mono, var(--mono)); font-weight: 600; }
  .tz-hint { flex: 1 1 100%; font-size: 12px; color: var(--text-3); }
  .mview-toggle { display: inline-flex; }
  .mview-toggle button { min-width: 64px; font-weight: 600; }
  .m-mine { display: inline-flex; align-items: center; }

  .mlist { display: flex; flex-direction: column; gap: 6px; }
  .mlist-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
  .mlist-head {
    display: flex; align-items: baseline; gap: 8px; margin: 8px 2px 2px; list-style: none; cursor: pointer;
    font: 700 15px/1.3 var(--case-serif, inherit); color: var(--text-1);
  }
  .mlist-head::-webkit-details-marker { display: none; }
  details.mlist-group > summary::after { content: '▾ 展开'; margin-left: auto; font: 500 12.5px var(--font); color: var(--accent); }
  details.mlist-group[open] > summary::after { content: '▴ 收起'; }
  .mlist-head b { font: 600 12.5px var(--case-mono, var(--mono)); color: var(--text-3); }
  .mlist-card {
    display: flex; flex-direction: column; gap: 5px; width: 100%; text-align: left; cursor: pointer;
    padding: 12px 14px; border-radius: 12px; border: 1px solid var(--sep); border-left: 4px solid var(--accent);
    background: var(--surface); color: var(--text-1); font: inherit; box-shadow: 0 1px 2px rgba(40, 30, 15, .05);
  }
  .mlist-card:active { background: var(--fill); }
  .mlist-card.k-external, .mlist-card.p-client { border-left-color: var(--case-kraft-dark, #A9865A); background: #FBF4E8; }
  .mlist-card.k-milestone { border-left-color: var(--text-1); }
  .mlist-card.s-done { opacity: .72; border-left-color: var(--success); }
  .mlist-card.late { border-left-color: var(--case-red, var(--danger)); }
  .ml-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12.5px; color: var(--text-2); }
  .ml-top code { font: 700 12.5px var(--case-mono, var(--mono)); color: var(--text-1); }
  .ml-st { padding: 2px 8px; border-radius: 99px; background: var(--fill); font-weight: 600; }
  .ml-st.s-doing { background: var(--accent); color: #FFF; }
  .ml-st.s-done { background: var(--success); color: #FFF; }
  .ml-st.s-blocked { background: var(--case-red, var(--danger)); color: #FFF; }
  .ml-late { color: var(--case-red, var(--danger)); font-weight: 700; }
  .ml-title { font-size: 15.5px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
  .ml-meta { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 13px; color: var(--text-2); }
  .ml-why { font-size: 13px; color: var(--text-2); line-height: 1.6; overflow-wrap: anywhere; }

  /* 甘特图 */
  html:root .g-grid { --label-w: 148px; }
  html:root .g-label { padding: 2px 6px; align-items: center; }
  html:root .g-label .g-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; font-size: 12px; }
  html:root .g-label .g-st { margin-top: 0; }
  html:root .g-lane { white-space: nowrap; }
  .g-lane-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html:root .gantt-scroll { max-height: calc(100dvh - 120px); }
  .sched-toolbar.mview-list [data-zoom], .sched-toolbar.mview-list .seg[aria-label="缩放"], .sched-toolbar.mview-list #sched-all-deps,
  .sched-toolbar.mview-list label:has(#sched-all-deps) { display: none; }
  html:root .sched-head { padding: 12px 14px; }
}

/* 侦探板 */
.lg-mview { display: none; }
@media (max-width: 768px) {
  .lg-mview { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px; }
  html:root .lg-lead { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  html:root .lg-head { padding: 14px 12px; }
  .lg-mlist .lg-strings, .lg-mlist .lg-legend { display: none; }
  .lg-page .tz-bar { margin-top: 4px; }
}

/* 公司全景 */
@media (max-width: 768px) {
  .mlist[hidden] { display: none; }
  .cv-mlist { padding: 10px 10px 16px; background: var(--bg-page); }
  .cv-mlist .mlist-head { color: var(--text-1); }
  .cv-mcard { border-left-color: var(--case-red, var(--danger)); }
  .cv-mcard.cv-ms-done { border-left-color: var(--success); }
  .cv-mcard.cv-ms-dropped { opacity: .65; border-left-color: var(--text-3); }
  .cv-mdate { font: 700 13px var(--case-mono, var(--mono)); color: var(--case-red, var(--danger)); }
  .cv-pcard { border-left-color: var(--case-night, #1d2028); }
  html:root .cv-bar .mview-toggle { background: rgba(255, 255, 255, .1); }
  html:root .cv-bar .mview-toggle button { color: #E8E2D6; }
  html:root .cv-bar .mview-toggle button.on { color: var(--text-1); }
  .cv-list-on .cv-cam, .cv-list-on .cv-legend { display: none; }
  html:root .cv-cam .btn { min-height: 38px; }
  /* 详情抽屉：手机上铺满屏幕，滚到哪里打开都看得见 */
  html:root .cv-drawer { position: fixed; inset: 0; width: 100%; z-index: 96; overflow-y: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom, 0px); }
  html:root .cv-drawer:not(.open) { display: none; }
  html:root .cv-x { min-width: 40px; min-height: 40px; font-size: 18px; }
}

/* 登录页：封面压矮，企业空间、账号、密码和登录按钮在首屏；“或”分隔线放到飞书登录下面 */
@media (max-width: 768px) {
  html:root .cover-stage { height: 30vh; height: 30svh; min-height: 190px; }
  html:root .cover-title { bottom: 26px; }
  html:root .cover-title h2 { font-size: 32px; margin-top: 6px; }
  #login-view .login-oauth { display: flex; flex-direction: column; }
  #login-view .login-oauth .login-divider { order: 2; margin: 14px 0 4px; }
}

/* 任务图：底部相机条、工具条按钮够大 */
@media (max-width: 768px) {
  html:root .tg-btn { min-height: 38px; }
  html:root .tg-camera .tg-btn { min-width: 38px; padding: 6px 8px; }
}

/* 技能库：插件卡在 360 宽也不超出 */
@media (max-width: 768px) {
  html:root .sk-boxes { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  html:root .sk-box, html:root .sk-box-lid, html:root .sk-box-lid .case-no { min-width: 0; }
  html:root .sk-box-lid { align-self: stretch; max-width: calc(100% + 36px); }
}

/* 资产页：长地址、带时间的徽标换行，不再顶出卡片 */
@media (max-width: 768px) {
  #asset-runtime dd, #asset-runtime dt, .desc-grid dd { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
  #asset-runtime .badge { white-space: normal; overflow-wrap: anywhere; }
}

/* 其余小按钮：日程视图切换、数据源链接、今天条目、动线链、负责人图例、数据底座子页签 */
@media (max-width: 768px) {
  html:root .sched-views a { min-height: 40px; display: inline-flex; align-items: center; }
  html:root .sched-source a, html:root .sched-source .btn { min-height: 36px; display: inline-flex; align-items: center; }
  html:root .today-chip { min-height: 36px; }
  html:root .sm-chain { min-height: 32px; }
  html:root .tg-owner-legend button { min-height: 34px; }
  html:root .cv-data-head [data-sub] { min-height: 40px; }
  html:root a.session-project { min-height: 32px; display: inline-flex; align-items: center; }
}

/* 剩下的小可点区：地图详情里的上一步 / 下一步、改挂，公司全景缩放钮，封面暂停钮，独占一行的文字链接 */
@media (max-width: 768px) {
  html:root .sm-panel-row button { min-height: 36px; padding: 4px 10px; font-size: 13px; }
  html:root .sm-embed .linklike { min-height: 32px; padding: 4px 8px; }
  html:root .cv-cam .btn { min-width: 40px; }
  html:root .cover-motion { min-height: 36px; padding: 8px 14px; }
  html:root .collab-tree-project-link { padding: 8px 0; }
  html:root .card-head-row > a { display: inline-flex; align-items: center; min-height: 36px; }
  html:root p > a:only-child, html:root p.hint > a, html:root .login-card .hint > a { display: inline-block; padding-block: 8px; }
}