/* WorkHub on phones (<= 600px wide). Loaded right after workhub_theme.css.
   The left sidebar becomes a bottom tab bar, the top bar becomes one compact
   row, pages get one column and the full screen width. iPad and wider screens
   keep the desktop layout (focus_layout.css already shrinks the sidebar to an
   icon rail below 1100px). */
@media(max-width:600px){
  html,html body{overflow-x:clip}

  /* Top bar: one row; the tool buttons scroll sideways instead of spilling off screen. */
  html body .topbar,html[data-workhub-nav="collapsed"] body .topbar,html[dir="rtl"] body .topbar,html[dir="rtl"][data-workhub-nav="collapsed"] body .topbar{
    position:sticky;top:0;z-index:40;width:100%;height:auto;min-height:52px;margin:0;padding:calc(6px + env(safe-area-inset-top)) 10px 6px;gap:8px;flex-wrap:nowrap}
  html body .topbar .brandline,html body .topbar .shell-nav-toggle,html body .topbar .auto-state,html body .topbar .self-status-score{display:none}
  /* #12: icons on the first row, search on its own full-width row, so nothing is off-screen. */
  html body .topbar .tools{flex:1 1 auto;min-width:0;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;overflow:visible}
  html body .topbar .tools::-webkit-scrollbar{display:none}
  html body .topbar .tools>*{flex:none}
  html body .topbar .tools #q{flex:1 1 auto;width:auto;min-width:0}
  /* Phone top bar (WeChat-like): avatar, search, 连接, 显示, 刷新. Language and skin live in 显示设置; the bug button and the pet are desktop extras. */
  html body .topbar .tools :is(#pet-toggle,.self-status-copy,#bug-report-button,#language-select,#skin-wrap){display:none}
  html body .topbar .tools .self-status-pill{grid-template-columns:36px;padding:2px!important;min-height:40px}
  html body .topbar .tools #connection-guide-button>span,html body .topbar .tools #skin-trigger-text,html body .topbar .tools .wh-prefs-button em{display:none}
  html body .topbar .tools :is(#skin-trigger,.wh-prefs-button,#connection-guide-button){min-width:0;padding-inline:10px}
  html body .topbar .tools :is(button,select,input){min-height:40px}

  /* Sidebar -> bottom tab bar. Every entry stays reachable by swiping the bar. */
  html body .topbar .hub-nav,html[data-workhub-nav="collapsed"] body .topbar .hub-nav,html[dir="rtl"] body .topbar .hub-nav{
    position:fixed;inset:auto 0 0 0;z-index:60;width:auto;height:auto;flex-direction:row;align-items:stretch;gap:2px;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));overflow-x:auto;overflow-y:hidden;border-top:1px solid var(--wh-nav-divider,rgba(255,255,255,.08));
    box-shadow:0 -10px 30px rgba(0,0,0,.35);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  html body .topbar .hub-nav::-webkit-scrollbar{display:none}
  html body .topbar .hub-nav :is(.hub-nav-brand,.hub-nav-spacer),html.wh-nav-fold[data-theme] body .topbar .hub-nav .wh-nav-group-head{display:none}
  html body .topbar .hub-nav .viewtab,html[data-workhub-nav="collapsed"] body .topbar .hub-nav .viewtab{
    flex:0 0 66px;flex-direction:column;justify-content:center;gap:3px;min-height:56px;margin:0!important;padding:4px 2px;border-radius:12px}
  html body .topbar .hub-nav .viewtab span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.2}
  html body .topbar .hub-nav .viewtab i{width:30px;height:30px}
  html body .topbar .hub-nav .viewtab::before{content:none!important}
  html[data-theme] body .topbar .hub-nav .viewtab.on::after,html[data-theme][data-workhub-nav="collapsed"] body .topbar .hub-nav .viewtab.on::after{
    inset:0 18px auto 18px!important;width:auto!important;height:3px!important;border-radius:0 0 3px 3px!important}
  /* Floating buttons sit above the tab bar. */
  #studio-chat-launcher{bottom:calc(88px + env(safe-area-inset-bottom))!important}
  html body .topbar .hub-nav .viewtab .nav-task-count{position:absolute;top:2px;right:8px;min-width:18px;height:18px;padding:0 5px;line-height:18px}
  html body .topbar .hub-nav .viewtab:is([data-hub-nav="admin"],[data-hub-nav="settings"],[data-hub-nav="account"]):not(.on){border-radius:12px}

  /* Content: full width, room above the tab bar. */
  html body main,html[data-workhub-nav="collapsed"] body main,html[dir="rtl"] body main,html[dir="rtl"][data-workhub-nav="collapsed"] body main{
    margin:0;padding:10px 10px calc(84px + env(safe-area-inset-bottom))}

  /* Button rows wrap instead of running off the right edge. */
  :is(#mailview .mail-section-head,#taskview .simple-task-head,#freightview .freight-section-head,.ra-head)>*{min-width:0}
  :is(#mailview .mail-section-head,#taskview .simple-task-head,#freightview .freight-section-head,.ra-head,
      .mail-mode-tabs,.task-mode-switch,.simple-task-actions,.mail-toolbar){flex-wrap:wrap}

  /* Rental, repair, 采购与销售: one column. The sub-menu folds behind a "☰ current page" button
     (added by workhub_nav_fold.js); closed, only the 常用 favourites show, as a row of chips. */
  .ra-shell{grid-template-columns:minmax(0,1fr)}.ra-shell>*{min-width:0}
  .ra-shell .ra-layout{display:block}.ra-shell .ra-main{min-width:0;overflow-x:auto}
  .ra-shell :is(.ra-cards,.ra-kpis){grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .ra-shell .wh-menu-toggle{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;margin:0 0 8px;padding:8px 14px;border:1px solid var(--line);border-radius:12px;
    background:var(--panel);color:var(--txt);font:inherit;font-size:15px;font-weight:650;text-align:start;cursor:pointer}
  .ra-shell .wh-menu-toggle>b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ra-shell .wh-menu-toggle::after{content:"";width:8px;height:8px;margin-inline-end:4px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-2px,-2px);opacity:.7}
  .ra-shell .wh-menu-toggle[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,-2px)}
  .ra-shell .ra-nav{display:block;max-height:none;margin-bottom:12px;overflow:visible;position:static}
  html[data-theme] .ra-shell .ra-nav:not(.wh-menu-open){padding:0;border:0;background:none;box-shadow:none}
  html[data-theme] .ra-shell .ra-nav:not(.wh-menu-open)>.wh-pinned-group>button::before{content:none}
  .ra-shell .ra-nav:not(.wh-menu-open)>.ra-nav-group:not(.wh-pinned-group){display:none}
  html[data-theme] .ra-shell .ra-nav:not(.wh-menu-open)>.wh-pinned-group{display:flex;flex-wrap:nowrap;gap:6px;margin:0;padding:0;border:0;background:none;overflow-x:auto;scrollbar-width:none}
  .ra-shell .ra-nav:not(.wh-menu-open)>.wh-pinned-group>span{display:none}
  html[data-theme] .ra-shell .ra-nav:not(.wh-menu-open)>.wh-pinned-group>button{box-shadow:none;flex:none;width:auto;min-height:38px;padding:0 34px 0 14px;border:1px solid color-mix(in srgb,#f5b83d 35%,var(--line));border-radius:999px;background:var(--panel);white-space:nowrap}
  .ra-shell .ra-nav.wh-menu-open{padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:var(--shadow)}
  .ra-shell .ra-nav.wh-menu-open .ra-nav-group>button{min-height:44px}
  /* Freight's own menu button and list follow the same look. */
  #freightview .freight-side:not(.open) .ra-nav>.wh-pinned-group{display:none}

  /* Mail: the head's tabs and the day counters are one sideways row each; keyboard tips are for desktops. */
  #mailview .mail-section-head .mail-head-actions{display:flex;flex-wrap:wrap;gap:8px;width:100%}
  #mailview .mail-mode-tabs{flex:1 1 100%;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none}
  #mailview .mail-mode-tabs>*{flex:none}
  #mailview .mail-today{display:flex!important;flex-wrap:nowrap!important;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  #mailview .mail-today>*{flex:none}
  #mailview .mail-main>.hint{display:none}

  /* Touch targets: chips, filters and small buttons in pages are at least 36px tall. */
  main :is(button,select,input:not([type=checkbox],[type=radio],[type=range])):not(.wh-pin):not(.viewtab){min-height:36px}
  main label:has(>input[type=checkbox]){min-height:36px;display:inline-flex;align-items:center;gap:8px}

  /* Wide tables scroll inside their card instead of widening the page. */
  main :is(.ra-panel,.tr-panel,.pc-panel):has(>table,>div>table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Dialogs use the whole screen. */
  dialog{max-width:calc(100vw - 16px);max-height:calc(100dvh - 24px)}
  dialog :is(.tr-form-grid,.ra-form-grid){grid-template-columns:1fr!important}
}

/* Narrower desktops and laptops (601-1599px): the top-bar tools must fit in one row in every
   language. English and Arabic labels are longer than Chinese and pushed the refresh button
   past the right edge (a horizontal page scroll on mail and tasks). Long labels become their
   icon here; each button keeps its title / aria-label, and the full labels return at 1600px+. */
@media(min-width:601px) and (max-width:1599px){
  html body .topbar .tools{min-width:0}
  html body .topbar .tools .self-status-score{display:none}
  html body .topbar .tools .self-status-pill{grid-template-columns:36px minmax(70px,auto)}
  html body .topbar .tools #connection-guide-button>span,html body .topbar .tools #skin-trigger-text{display:none}
  html body .topbar .tools #skin-trigger{min-width:0;padding-inline:12px}
}
/* The phone menu button is only for phones. */
@media(min-width:601px){.wh-menu-toggle{display:none}}

/* ================================================================
   Phones, WeChat / WhatsApp feel (Dylan 2026-10-26): flat full-width lists, plain section
   labels, a light tab bar with plain icons, fewer frames and shadows.
   ================================================================ */
@media(max-width:600px){
  html[data-theme="light"] body{background:#f2f3f5}
  html[data-theme="light"] body .topbar{background:#f7f7f8;box-shadow:0 1px 0 #e3e5e8}
  /* Tab bar: light in the light skin, plain icons, the current tab in the accent colour. */
  html[data-theme="light"] body .topbar .hub-nav{background:#f7f7f8;border-top:1px solid #e3e5e8;box-shadow:none}
  html[data-theme] body .topbar .hub-nav .viewtab,html[data-theme] body .topbar .hub-nav .viewtab.on{background:transparent!important;box-shadow:none!important}
  html[data-theme] body .topbar .hub-nav .viewtab i,html[data-theme] body .topbar .hub-nav .viewtab.on i{background:transparent!important;box-shadow:none!important;width:26px;height:26px}
  html[data-theme] body .topbar .hub-nav .viewtab.on::after{display:none}
  html[data-theme="light"] body .topbar .hub-nav .viewtab{color:#6b7280}
  html[data-theme="light"] body .topbar .hub-nav .viewtab i{color:#6b7280!important}
  html[data-theme] body .topbar .hub-nav .viewtab.on,html[data-theme] body .topbar .hub-nav .viewtab.on span{color:var(--acc)!important;font-weight:650}
  html[data-theme] body .topbar .hub-nav .viewtab.on i{color:var(--acc)!important}
  html[data-theme] body .topbar .hub-nav .viewtab span{font-size:11px;font-weight:500}
  html[data-theme] body .topbar .hub-nav .viewtab{flex-basis:62px;min-height:52px}

  /* Content: edge to edge, cards become flat white blocks separated by the page colour. */
  html body main,html[data-workhub-nav="collapsed"] body main{padding-left:0;padding-right:0}
  main>.view>*,main>#workspace-context-bar{margin-left:0!important;margin-right:0!important}
  html[data-theme] main :is(.mail-shell,.business-sidebar,.simple-task-shell,.freight-panel,.freight-side,.ra-panel,.ra-shell,.settings-card,.account-card,
      .directory-shell,.case-board,#office-workbench,#workspace-context-bar,#hero,.deep-card,.pasta-brief,.ph-side,.ra-nav){
    border-radius:0!important;border-left:0!important;border-right:0!important;box-shadow:none!important}
  html[data-theme] main :is(.mail-shell,.simple-task-shell,.freight-panel,.ra-panel,#office-workbench,#hero)::before{display:none}
  html[data-theme="light"] main :is(.mail-shell,.business-sidebar,.simple-task-shell,.freight-panel,.ra-panel,.settings-card,.account-card,.directory-shell,#workspace-context-bar,.pasta-brief){background:#fff!important}
  html[data-theme="ocean"] main :is(.mail-shell,.business-sidebar,.simple-task-shell,.freight-panel,.ra-panel,.settings-card,.account-card,.directory-shell,#workspace-context-bar,.pasta-brief,#office-workbench,#hero){background:var(--wh-glass)!important}
  /* Page titles: one plain line; headings left-aligned like a chat app. */
  html[data-theme] main :is(#mailview .mail-section-head,#taskview .simple-task-head,#freightview .freight-section-head,.ra-head){padding-inline:14px}
  html[data-theme] main :is(#mailview .mail-section-head h2,#taskview .simple-task-head h2,#freightview .freight-section-head h2,.ra-head h2){font-size:20px;justify-content:flex-start}
  html[data-theme] main :is(#mailview .mail-section-head h2,#taskview .simple-task-head h2,#freightview .freight-section-head h2,.ra-head h2)::before{display:none}
  html[data-theme] main .ra-shell .ra-main>*,html[data-theme] main .ra-page-title{padding-inline:12px}
  /* Mail list rows: full width with a hairline, like a chat list. */
  html[data-theme] #mailview :is(.mail-item,.mail-row,.mail-card){border-radius:0;border-left:0;border-right:0;margin:0;box-shadow:none}
  /* Pasta's brief: one compact strip. */
  html[data-theme] #mailview .pasta-brief>p{display:none}
  html[data-theme] #mailview .pasta-brief{padding:10px 14px}
  /* Mail head left-aligned; the list area keeps a small inner margin while its block runs edge to edge. */
  html[data-theme] #mailview .mail-section-head{align-items:flex-start;text-align:start}
  html[data-theme] #mailview .mail-section-head>*{justify-content:flex-start;text-align:start}
  html[data-theme] #mailview .mail-main>*:not(.mail-list):not(#mail-list){padding-inline:12px}
  html[data-theme] #mailview .business-sidebar{padding-inline:4px}
  /* Freight and rental number cards: flat tiles. */
  html[data-theme] main :is(.ra-card,.ra-kpis article,#freightview .freight-kpis>.freight-kpi,#freightview .freight-ops-summary article){border-radius:10px;box-shadow:none!important}
  html[data-theme] main :is(.ra-card,.ra-kpis article,#freightview .freight-kpis>.freight-kpi)::before{display:none}
  html[data-theme] #freightview :is(.freight-kpis,.freight-module-pane>*){margin-inline:12px}
  /* Day counters: small pills. */
  html[data-theme] #mailview .mail-today{padding-inline:12px}
  html[data-theme] #mailview .mail-today>*{min-height:34px;padding:4px 12px;border-radius:999px}
}
/* Phones, simpler and smaller (Dylan 2026-10-26 18:28): no page descriptions, compact number
   tiles three to a row, smaller chips and tabs. Touch targets stay at least 32px. */
@media(max-width:600px){
  html[data-theme] main :is(#taskview .simple-task-head p,.ra-page-title p,#freightview .freight-section-head p,.ra-head .ra-head-date,#mailview .mail-section-head>div>p,.freight-help-body){display:none}
  html[data-theme] main :is(.ra-cards,.ra-kpis,#freightview .freight-kpis,#freightview .freight-ops-summary,.simple-task-stats){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
  html[data-theme] main :is(.ra-card,.ra-kpis article,#freightview .freight-kpis>.freight-kpi,#freightview .freight-ops-summary article){min-height:0!important;padding:8px 10px!important;border-radius:8px}
  html[data-theme] main :is(.ra-card,.ra-kpis article,#freightview .freight-kpis>.freight-kpi,#freightview .freight-ops-summary article) b{font-size:17px!important;line-height:1.2;white-space:normal!important;overflow-wrap:anywhere}
  html[data-theme] main :is(.ra-card,.ra-kpis article,#freightview .freight-kpis>.freight-kpi,#freightview .freight-ops-summary article) :is(span,small){font-size:12px!important;line-height:1.3}
  html[data-theme] main :is(.ra-card,.ra-kpis article) small{display:none}
  html[data-theme] main :is(button,select,input:not([type=checkbox],[type=radio],[type=range])):not(.wh-pin):not(.viewtab){min-height:32px}
  html[data-theme] main :is(.mail-mode-tabs,.task-mode-switch,.simple-task-stats,.wh-company-chips,.ra-filters,.freight-filter-row) button,
  html[data-theme] main .mail-today>*{min-height:32px!important;padding:0 10px!important;font-size:13px!important;border-radius:999px}
  html[data-theme] main :is(#mailview .mail-section-head h2,#taskview .simple-task-head h2,#freightview .freight-section-head h2,.ra-head h2){font-size:18px}
  html[data-theme] main :is(.ra-page-title h3,.ra-section-title,.freight-panel h3){font-size:15px}
  html[data-theme] main .ra-shell .wh-menu-toggle{min-height:40px;font-size:14px}
}
/* Phones, content first (Dylan 2026-10-26 18:39): the list a page is about starts in the first
   third of the screen. Every group of controls becomes one sideways-scrolling row; headers that
   repeat the tab bar go; desktop-only management links live on the desktop. */
@media(max-width:600px){
  html[data-theme] main :is(.simple-head-actions,.simple-task-stats,.simple-task-filters,.mail-head-actions,.mail-today,#mail-side-folders,#mailview .mail-shell>.bar,#freightview .freight-kpis,#freightview .freight-head-actions){
    display:flex!important;flex-wrap:nowrap!important;align-items:center;justify-content:flex-start!important;gap:6px!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;max-width:100%;padding-block:2px}
  html[data-theme] main :is(.simple-head-actions,.simple-task-stats,.simple-task-filters,.mail-head-actions,.mail-today,#mail-side-folders,#mailview .mail-shell>.bar,#freightview .freight-kpis,#freightview .freight-head-actions)::-webkit-scrollbar{display:none}
  html[data-theme] main :is(.simple-head-actions,.simple-task-stats,.simple-task-filters,.mail-head-actions,.mail-today,#mail-side-folders,#mailview .mail-shell>.bar,#freightview .freight-kpis,#freightview .freight-head-actions)>*{flex:none!important;margin:0!important;width:auto!important}
  html[data-theme] main :is(.task-mode-switch,.mail-mode-tabs){display:flex;flex-wrap:nowrap!important;flex:none}
  /* 我的工作 */
  html[data-theme] #taskview .simple-task-head{padding:10px 12px 4px!important;gap:8px}
  html[data-theme] #taskview :is(.simple-task-stats,.simple-task-filters){padding-inline:12px!important;margin:0!important;min-height:0}
  html[data-theme] #taskview .ai-mailbox-filter{min-height:32px;padding:0 8px;font-size:12px}
  html[data-theme] #taskview .ai-mailbox-filter select{min-height:30px;font-size:13px}
  html[data-theme] #taskview .simple-empty{padding:18px 12px}
  /* 邮件 */
  html[data-theme] #mailview .mail-section-head{padding:10px 12px 4px!important;gap:6px}
  html[data-theme] #mailview .mail-window-control{min-height:32px;padding:0 4px 0 8px;gap:4px;font-size:12px}
  html[data-theme] #mailview .mail-window-control select{min-height:30px;font-size:13px}
  html[data-theme] #mailview .pasta-brief{padding:6px 12px;min-height:0}
  html[data-theme] #mailview .business-sidebar{padding:6px 12px!important;min-height:0}
  html[data-theme] #mailview :is(.mail-side-title,.mail-side-manage,.side-settings,#mail-search){display:none!important}
  html[data-theme] #mailview #mail-side-folders>button{min-height:32px;padding:0 14px;border-radius:999px}
  html[data-theme] #mailview .mail-more-filters{padding-block:2px}
  html[data-theme] #mailview .mail-shell>.bar{padding:6px 12px!important;min-height:0}
  html[data-theme] #mailview .mail-workspace{display:block}
  /* 货代: the title repeats the tab bar and the menu button; status and refresh share one row. */
  html[data-theme] #freightview :is(.freight-topbar-title,#freight-page-title){display:none!important}
  html[data-theme] #freightview .freight-topbar{padding:6px 12px!important;min-height:0}
  html[data-theme] #freightview .freight-side{padding:6px 12px 0!important}
  html[data-theme] #freightview .freight-kpis{display:flex!important;margin-inline:12px}
  html[data-theme] #freightview .freight-kpis>.freight-kpi{display:inline-flex!important;flex-direction:row-reverse;align-items:center;gap:6px;min-height:32px!important;padding:0 12px!important;border-radius:999px!important}
  html[data-theme] #freightview .freight-kpis>.freight-kpi b{font-size:15px!important}
}
/* Phones, WeChat-account layout (Dylan 2026-10-26 18:51): title, main switch and list stay;
   filters, counters and secondary tools fold behind the 筛选与更多 bar (workhub_mobile.js);
   the page's main action floats as a round button above the tab bar. */
.wh-fold-bar{display:none}
@media(max-width:600px){
  html[data-theme] .view .wh-fold-bar{display:flex;align-items:center;justify-content:space-between;width:calc(100% - 24px);min-height:36px;margin:4px 12px;padding:0 12px;
    border:1px solid var(--line);border-radius:10px;background:var(--surface1);color:var(--dim);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
  html[data-theme] .view .wh-fold-bar>i{width:7px;height:7px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translate(-2px,-2px)}
  html[data-theme] .view.wh-fold-open .wh-fold-bar>i{transform:rotate(-135deg) translate(-2px,-2px)}
  html[data-theme] .view.wh-fold-open .wh-fold-bar{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 40%,var(--line))}
  /* What folds away, per page. */
  #mailview:not(.wh-fold-open) :is(.mail-window-control,#mail-today,#pasta-brief,.business-sidebar,.mail-more-filters,.mail-shell>.bar>:not(.mail-compose-new)),
  #taskview:not(.wh-fold-open) :is(.simple-task-filters,#task-supporting-details,.simple-head-actions>button:not([onclick="openQuickTask()"])),
  #freightview:not(.wh-fold-open) :is(.freight-topbar,#freightview .freight-kpis,.freight-split-tools>input,.hy-panel,.freight-hyfa,[class^="hy-"]){display:none!important}
  /* backdrop-filter would make these panels the containing block of the fixed button. */
  html[data-theme] main :is(.mail-shell,.simple-task-shell,.freight-panel,.freight-module-pane,.ra-panel){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  /* The main action: a round accent button above the tab bar. */
  html[data-theme] :is(#mailview .mail-compose-new,#taskview button[onclick="openQuickTask()"],#freightview [data-fe-paste]){
    position:fixed!important;right:16px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:55;min-height:52px!important;padding:0 20px!important;border:0!important;border-radius:999px!important;
    background:linear-gradient(100deg,var(--primary1),var(--primary2))!important;color:#fff!important;font-size:15px!important;font-weight:650;box-shadow:0 8px 24px rgba(0,0,0,.28)!important}
  html[dir="rtl"][data-theme] :is(#mailview .mail-compose-new,#taskview button[onclick="openQuickTask()"],#freightview [data-fe-paste]){right:auto;left:16px}
}
/* Fold bar on the other pages (phones). Rental / repair: notices and the column picker;
   采购与销售: the desk's number tiles; office: counters, filters, legend, team and search. */
@media(max-width:600px){
  :is(#rentalview,#repairview):not(.wh-fold-open) :is(.ra-message:not(.bad),[data-ra-colpick]),
  #procurementview:not(.wh-fold-open) :is(.ph-kpis,.pc-card-head small),
  #worldview:not(.wh-fold-open) :is(.office-stats,.office-filters,.office-role-legend,.office-legend-line,#studio-team-select,#studio-search,.studio-queue-tools){display:none!important}
  html[data-theme] #worldview .team-map-toolbar{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
}
/* Phones, round 4 (Dylan 2026-10-27 05:06): fewer entry points per screen.
   Bottom bar: 邮件 · 我的工作 · 聊天 · 办公室 · 更多 (fixed, no sideways scroll); everything else is
   in the 更多 sheet. Top bar: avatar, search, refresh. No "正在连接" row. */
.wh-more-tab{display:none}
/* Wider screens: the sidebar has every entry, so the 更多 tab stays hidden there. */
@media(min-width:601px){html body .topbar .hub-nav>.wh-more-tab.viewtab{display:none!important}}
@media(max-width:600px){
  html body .topbar .hub-nav{overflow-x:hidden!important;justify-content:space-around}
  html body .topbar .hub-nav>.viewtab[data-hub-nav]:not(:is([data-hub-nav="mail"],[data-hub-nav="matters"],[data-hub-nav="chat"],[data-hub-nav="office"])){display:none!important}
  html body .topbar .hub-nav>.viewtab{flex:1 1 0!important;min-width:0}
  html body .topbar .hub-nav>.wh-more-tab{display:flex;order:5}
  html body .topbar .hub-nav>.viewtab[data-hub-nav="mail"]{order:1}html body .topbar .hub-nav>.viewtab[data-hub-nav="matters"]{order:2}html body .topbar .hub-nav>.viewtab[data-hub-nav="chat"]{order:3}html body .topbar .hub-nav>.viewtab[data-hub-nav="office"]{order:4}
  html body .topbar .hub-nav>.wh-more-tab>i{display:grid;place-items:center}
  html body .topbar .tools :is(#connection-guide-button,.wh-prefs-button){display:none!important}
  html body .topbar .tools #q{flex:1 1 auto}
  #workspace-context-bar:has(>.wh-context-loading){display:none!important}
  /* The 更多 sheet. */
  .wh-more-sheet{position:fixed;inset:0;z-index:300}
  .wh-more-backdrop{position:absolute;inset:0;background:rgba(10,16,28,.45)}
  .wh-more-panel{position:absolute;left:0;right:0;bottom:0;padding:18px 14px calc(18px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0;background:var(--panel2,var(--panel,#fff));box-shadow:0 -12px 40px rgba(0,0,0,.25)}
  html[data-theme="ocean"] .wh-more-panel{background:linear-gradient(180deg,#111b3a,#0b1128)}
  .wh-more-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 6px}
  html[data-theme] .wh-more-grid>button{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:72px;padding:6px 2px;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--txt);font-size:12px}
  html[data-theme] .wh-more-grid>button>i{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--acc) 10%,var(--surface1,#fff));color:var(--acc2);font-style:normal;font-size:16px;font-weight:700}
  html[data-theme] .wh-more-grid>button>i[style*="--wh-icon"]{font-size:0}
  html[data-theme] .wh-more-grid>button>i[style*="--wh-icon"]::after{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:var(--wh-icon) center/22px 22px no-repeat;mask:var(--wh-icon) center/22px 22px no-repeat}
  .wh-more-grid>button>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Rental / repair: the ☰ menu button and the favourites share one row; the demo notice goes. */
  html[data-theme] .ra-shell .ra-layout{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px}
  html[data-theme] .ra-shell .ra-layout>.wh-menu-toggle{flex:0 0 auto;width:auto;margin:0;padding:0 12px;min-height:38px}
  html[data-theme] .ra-shell .ra-layout>.ra-nav:not(.wh-menu-open){flex:1 1 0;min-width:0;margin:0}
  html[data-theme] .ra-shell .ra-layout>.ra-nav.wh-menu-open{flex:1 1 100%;order:1}
  html[data-theme] .ra-shell .ra-layout>.ra-main{flex:1 1 100%;order:2}
  :is(#rentalview,#repairview) .ra-message:not(.bad):not(.ok){display:none!important}
  /* One rhythm: 12px sides, 12px between blocks. */
  html[data-theme] main .view>*:not(.wh-fold-bar){margin-block-end:12px}
}
/* Phones, round 5 (Dylan 2026-10-27 06:14: 操作性继续简化): each page shows one row of main
   switches, the list and the round main action; desktop tools fold away. */
@media(max-width:600px){
  /* 我的工作: 今天 / 逾期 / 等待回复 / 全部待办 / 已完成 is the switch; the mode tabs (团队管理, 流程, 甘特图)
     and the paste / all-types buttons fold. */
  #taskview:not(.wh-fold-open) :is(.task-mode-switch,.simple-head-actions>button:not([onclick="openQuickTask()"])){display:none!important}
  html[data-theme] #taskview .simple-task-head{padding-bottom:0!important}
  /* 邮件: 待处理 / 已处理 / 已忽略 / 全部 is the switch; 按单号 and 批量整理 fold. */
  #mailview:not(.wh-fold-open) :is(.mail-review-tools,.mail-mode-tabs){display:none!important}
  /* 办公室: the canvas and 按部门/按项目 stay; 真实地点 and 聊一聊 fold (聊天 is a tab). */
  #worldview:not(.wh-fold-open) :is(.team-map-toolbar>*,.studio-team-chat){display:none!important}
  html[data-theme] #worldview .team-map-toolbar{min-height:0;padding:0;margin:0}
  /* 货代: the Shipthis status row folds; the counters stay as pills. */
  #freightview:not(.wh-fold-open) .freight-topbar{display:none!important}
  html[data-theme] #freightview :is(.freight-split-filter,.freight-split-filters){display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none}
  html[data-theme] #freightview :is(.freight-split-filter,.freight-split-filters)>*{flex:none}
}/* Phones: the office heading wraps instead of running past the right edge (its block had no min-width, so the
   ellipsis never applied and "One office, moving work forward together" was cut off). */
@media(max-width:600px){
  html[data-theme] #worldview .studio-scene-heading>*{min-width:0;max-width:100%}
  html[data-theme] #worldview .studio-scene-heading h2{white-space:normal;font-size:18px;line-height:1.3}
}