/* ==========================================================================
   硅基办公 · 手机适配层
   —— 只在窄屏（≤760px）生效，桌面和平板一行都没改（所有规则都包在媒体查询里）。

   手机上不摆「桌面 + 多窗口」那一套，换成手机本来的样子：
     · 图标 → 全屏 App → 左上角「返回」回桌面（一屏只放一个 App，任务栏就是 App 切换栏）
     · 图标 4 列大图标，点按目标都放大到 44px 以上
     · 刘海与底部横条留白（env(safe-area-inset-*)）
     · 触屏设备上不保留 hover 残留、不做双击缩放延迟（touch-action: manipulation）
   ========================================================================== */

/* 「返回」按钮：桌面端不显示（桌面靠窗口右上角那三个按钮），手机端由下面的媒体查询打开。
   按钮由 desktop.js 加进标题栏，桌面端这里直接隐藏 —— 桌面视图一行都不会变。 */
.dk-win__btn--back { display: none; }

/* ---------- 触屏：点一下之后别让 hover 的底色黏住 ---------- */
@media (hover: none) {
  .dk-icon:hover .dk-icon__inner { background: transparent; box-shadow: none; }
  .dk-icon:hover .dk-icon__label { color: var(--dk-ink); text-shadow: none; }
  .dk-tb:hover { background: transparent; }
  .dk-win__btn:hover:not(.dk-win__btn--close) { background: transparent; color: var(--dk-ink-75); }
  .dk-calc__key:hover, .dk-row:hover, .dk-btn:hover { background-color: inherit; }
}

@media (max-width: 760px) {
  /* ======================================================================
     一、外壳：视口高度、安全区、任务栏
     ====================================================================== */
  .dk { --dk-bar-h: 58px; height: 100dvh; }
  /* 手机上整屏都是点按目标，别让双击变成缩放 */
  .dk button, .dk input, .dk textarea, .dk select, .dk [role="button"] { touch-action: manipulation; }

  .dk-bar {
    height: calc(var(--dk-bar-h) + env(safe-area-inset-bottom));
    padding: 0 4px env(safe-area-inset-bottom);
    gap: 0;
  }
  .dk-tb { height: 48px; padding: 0 10px; }
  .dk-tb--start { width: 52px; }
  /* 正在运行的 App 只留图标：一屏横着放得下五六个 */
  .dk-tb--run { padding: 0 12px; max-width: none; }
  .dk-tb--run .dk-tb__label { display: none; }
  .dk-tb--run .dk-tb__dot { right: 4px; top: 6px; }
  .dk-bar__sep, .dk-showdesk { display: none; }
  /* 搜索：桌面上它在任务栏左边（#dkSearch）可展开；手机上任务栏没地方让它展开，
     所以那颗框藏起来，改回托盘里那颗搜索钮（点开就是一整块结果面板） */
  .dk-search { display: none; }
  .dk-tray .dk-tray__search { display: flex; }
  /* 手机上结果面板贴着任务栏上沿铺开，左右留边 */
  .dk > .wb-pop {
    left: 8px; right: 8px; width: auto; top: auto;
    bottom: calc(var(--dk-bar-h) + env(safe-area-inset-bottom) + 8px);
  }
  /* 退出登录那颗钮在开始菜单里（桌面和手机同一处），手机上不用另外藏东西；
     实在找不着开始菜单就走「系统设置 → 账号与安全 → 退出登录」，落到的是同一层 */
  .dk-tray { gap: 6px; padding: 0 6px; }
  .dk-tray .wb-iconbtn { width: 44px; height: 44px; }
  .dk-tray .wb-avatar { width: 30px; height: 30px; }
  /* 日期时间：折成两行（「2026/9/25」+「02:26」），两边留出呼吸位，别贴到旁边的铃铛上 */
  .dk-tray__clock { min-width: 0; max-width: 78px; padding: 4px 9px; font-size: 11px; line-height: 1.25; text-align: center; white-space: normal; }
  .dk-bar__spacer { min-width: 4px; }

  /* 提示条：贴着任务栏，左右留边 */
  .dk > .wb-toast { left: 12px; right: 12px; bottom: calc(var(--dk-bar-h) + env(safe-area-inset-bottom) + 14px); }

  /* ======================================================================
     二、桌面图标：4 列大图标
     ====================================================================== */
  .dk-icons { left: 8px; right: 8px; top: 12px; }
  .dk[data-icons], .dk[data-icons="lg"], .dk[data-icons="sm"], .dk[data-icons="md"] {
    --dk-col: calc((100vw - 16px) / 4);
    /* 行高只是上限：实际排布由 desktop.js 按可用高度反算 */
    --dk-row: 108px;
    --dk-tile: 58px;
  }
  .dk-icon { border-radius: 14px; }
  .dk-icon__inner { gap: 7px; padding: 6px 4px 7px; border-radius: 15px; }
  .dk-icon__label { font-size: 11.5px; line-height: 1.35; }
  .dk[data-icons] .dk-icon__label, .dk-icon__label { font-size: 11.5px; }

  /* ======================================================================
     三、窗口：一个 App 就是一整屏
     ====================================================================== */
  /* JS 算出来的位置 / 尺寸在手机上全部让位，窗口铺满工作区 */
  .dk-win {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
    animation: dkPhoneIn .2s var(--dk-ease);
  }
  @keyframes dkPhoneIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  /* 一屏只放一个 App（当前那个）；其余的开着但不显示，从任务栏切回来 */
  .dk-win:not(.is-active) { display: none; }

  .dk-win__bar { height: 48px; padding-left: 2px; gap: 2px; }
  .dk-win__ico { width: 20px; height: 20px; border-radius: 6px; margin: 0 4px; }
  .dk-win__ico svg { width: 13px; height: 13px; }
  .dk-win__title { font-size: 13px; }
  .dk-win__btn { width: 48px; height: 48px; }
  .dk-win__btn svg { width: 13px; height: 13px; }
  .dk-win__btn[data-wbtn="min"], .dk-win__btn[data-wbtn="max"] { display: none; }
  .dk-win__btn--back { display: flex; }
  .dk-win__grip { display: none; }
  .dk-win__body > .wb-content { padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); }
  .dk-win__body > .wb-content--full { padding: 10px 10px calc(12px + env(safe-area-inset-bottom)); }
  .dk-win[data-app="chat"] .dk-win__body > .wb-content--full { padding: 0; }

  /* ======================================================================
     四、浮层：开始菜单 / 通知中心 / 横幅 / 计算器 / 日历
     ====================================================================== */
  /* 开始菜单：从底部长出来的一整块，单栏 */
  .dk-start {
    left: 8px; right: 8px; width: auto;
    bottom: calc(var(--dk-bar-h) + env(safe-area-inset-bottom) + 6px);
    height: min(620px, calc(100dvh - var(--dk-bar-h) - 26px));
    grid-template-columns: minmax(0, 1fr);
  }
  .dk-start__apps { padding: 10px 8px 6px; }
  .dk-start__apps button { padding: 11px 12px; font-size: 13px; }
  .dk-start__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 84px; padding: 12px; border-left: 0; border-top: 1px solid rgba(var(--wb-ink-rgb), .1); }

  /* 通知中心：整屏宽 */
  .dk-nc { left: 8px; right: 8px; width: auto; top: 8px; bottom: calc(var(--dk-bar-h) + env(safe-area-inset-bottom) + 8px); }

  /* 右上角横幅：贴顶整宽。
     但开着 App 时窗口标题栏（含关闭按钮）就占着顶部 48px，
     横幅不能让到那一条上去 —— 否则消息一来，用户既看不到标题也点不到关闭。 */
  .dk-banners, .dk[data-maxwin="1"] .dk-banners { top: calc(env(safe-area-inset-top) + 8px); left: 8px; right: 8px; width: auto; }
  .dk.has-win .dk-banners, .dk[data-maxwin="1"].has-win .dk-banners { top: calc(env(safe-area-inset-top) + 56px); }
  /* 关闭键在手机上直接显示（桌面靠 hover 才出来），并且撑到能点中 */
  .dk-banner__close { width: 34px; height: 34px; top: 2px; right: 2px; opacity: 1; border-radius: 9px; font-size: 15px; }
  .dk-banner { padding-right: 40px; }

  /* 计算器 / 日历：底部整宽，按键加高 */
  .dk-calc, .dk-cal {
    left: 8px; right: 8px; width: auto;
    bottom: calc(var(--dk-bar-h) + env(safe-area-inset-bottom) + 8px);
    max-height: calc(100dvh - var(--dk-bar-h) - 30px);
    overflow: auto;
  }
  .dk-calc__key { height: 48px; font-size: 16px; }
  .dk-calc__out { font-size: 30px; }
  .dk-cal__day { min-height: 40px; }

  /* ======================================================================
     五、App 内部：窄屏折成单栏 / 横滑，别让人横着找内容
     ====================================================================== */
  .wb-viewhead { gap: 8px; }
  .wb-viewhead__title { font-size: 19px; }
  .wb-viewhead__sub { font-size: 12px; }
  .wb-viewhead__tools { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
  .wb-viewhead__tools::-webkit-scrollbar { display: none; }

  /* 微聊：手机上一屏就是「会话条 + 对话」。
     会话列表从竖排变横向一条一条滑；底部导航（消息/通讯录/设置）脱离左栏、钉到屏幕最下面，
     不然它会跟着左栏卡在屏幕中间 —— 手机上那一排就是 Tab 栏，位置得在底。
     做法：左栏允许溢出 + 整体底部留出 Tab 栏的高度（.wb-im__body 相对定位当锚点）。 */
  .wb-im__body {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 196px minmax(0, 1fr);
    padding-bottom: calc(54px + env(safe-area-inset-bottom));
  }
  .wb-im__list { grid-row: 1; border-right: 0; border-bottom: 1px solid rgba(var(--wb-ink-rgb), .1); overflow: visible; }
  .wb-im__listhead { padding: 8px 12px 4px; }
  .wb-im__panel { min-height: 0; }
  .wb-im__search { margin: 0 10px 6px; }
  .wb-im__tabs { margin: 0 10px 6px; }

  .wb-im__convs {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 8px;
    padding: 2px 10px 8px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .wb-im__convs > li { flex: 0 0 auto; width: 178px; }
  .wb-im__convs .wb-conv { width: 100%; height: 100%; background: rgba(var(--wb-ink-rgb), .06); box-shadow: inset 0 0 0 1px rgba(var(--wb-ink-rgb), .08); }
  .wb-im__convs .wb-conv.is-active { background: rgba(var(--wb-ink-rgb), .17); }
  .wb-im__convs::-webkit-scrollbar { height: 5px; }
  .wb-im__convs::-webkit-scrollbar-thumb { background: rgba(var(--wb-ink-rgb), .2); border-radius: 999px; }

  .wb-im__nav {
    position: absolute;
    left: 0; right: 0;
    bottom: env(safe-area-inset-bottom);
    height: 54px;
    padding: 4px 7px;
    background: rgba(11, 19, 21, .94);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
  }
  .wb-im__nav button { padding: 4px 2px; gap: 1px; }
  .wb-im__info { left: 8px; right: 8px; width: auto; }
  .wb-im__composer { padding: 9px 10px 11px; }

  /* 花名册简历 / 员工档案：两栏折成一栏 */
  .wb-resume { grid-template-columns: minmax(0, 1fr); }
  .wb-resume__side { padding: 14px 12px; }

  /* 花名册名录：9 列宽表在手机上横着拖太难受，折成一张张员工卡片。
     表头藏掉，每个单元格用 data-label 把字段名补回左边（桌面端完全不受影响）。 */
  .wb-rtwrap { overflow: visible; background: transparent; box-shadow: none; border-radius: 0; }
  .wb-rt, .wb-rt tbody, .wb-rt tr, .wb-rt td { display: block; width: auto; }
  .wb-rt thead { display: none; }
  .wb-rt tr {
    margin-bottom: 10px; padding: 12px;
    border-radius: 16px;
    background: rgba(var(--wb-ink-rgb), .055);
    box-shadow: inset 0 0 0 1px rgba(var(--wb-ink-rgb), .07);
  }
  .wb-rt td { display: flex; align-items: center; gap: 10px; border: 0; padding: 3px 0; }
  .wb-rt td::before { content: attr(data-label); flex: 0 0 66px; font-size: 11px; color: var(--wb-ink-45); }
  .wb-rt td[data-label=""] { padding: 0 0 7px; }
  .wb-rt td[data-label=""]::before { display: none; }
  .wb-rt td.wb-rt__ops { flex-wrap: wrap; gap: 6px; padding-top: 9px; }
  .wb-rt__task { max-width: none; white-space: normal; overflow: visible; }

  /* 统计条：5 连格在手机上挤，改两列 */
  .wb-empstats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wb-projmetrics, .wb-copmetrics { gap: 7px; }

  /* 弹窗：贴着屏幕边，别顶到刘海 */
  .wb-modal { padding: 10px; }
  .wb-modal__card { width: 100%; max-height: calc(100dvh - var(--dk-bar-h) - 30px); padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); border-radius: 18px; }
  .wb-modal__acts { flex-wrap: wrap; }

  /* 按钮点按目标：竖屏下 34px 太小 */
  .wb-btn { height: 38px; }
  .wb-seg button { min-height: 34px; }

  /* ======================================================================
     六、手指点得中：手机上这些高频小控件统一撑到 ≥44px
     （只放大可点区域，不动视觉尺寸；桌面端不受影响）
     ====================================================================== */
  .wb-btn, button.wb-tag, .wb-im__tool, .wb-im__tabs button, .wb-iconbtn,
  .dk-tb, .dk-tray .wb-iconbtn { min-height: 44px; }
  .dk-tb, .dk-tray .wb-iconbtn { min-width: 44px; }
  .wb-im__tool { width: 44px; height: 44px; }
  /* 手机上敲的是软键盘，没有 Enter 键这条提示 */
  .wb-im__hint { display: none; }

  /* 虚拟办公室：场景按比例缩，把两侧面板收到底下 */
  .wb-office__hud, .wb-office__side, .wb-office__cameras { margin: 10px; }
  .wb-office__scene { border-radius: 16px; }

  /* 星环驾驶舱在手机上退回手机本来的样子：导航坞和顶部状态条收起，
     还是「图标 → 全屏 App → 左上角返回」，一屏一个（和 win10 桌面同一套手感） */
  .dk[data-shell="hud"] { --dk-bar-h: 58px; }        /* 手机的任务栏还是按手机那套高度 */
  .dk[data-shell="hud"] .dk-rail,
  .dk[data-shell="hud"] .dk-hud { display: none !important; }
  .dk[data-shell="hud"]::before { display: none; }   /* 舱壁细框在手机上也收掉 */
  .dk[data-shell="hud"] .dk-icons { display: block !important; }
  .dk[data-shell="hud"] .dk-wins { left: 0; top: 0; }
  .dk[data-shell="hud"] .dk-bar { left: 0; }
}