/* 邮件页 after Shipthis (mail_inbox.js): the left rail, the 待处理 tabs and the reading pane in two columns. */

/* The old sidebar keeps only its heading and the mailbox picker; filters, sections and statistics give way to the rail. */
#mailview #workspace-mail-sidebar :is(.wh-filter-list, .wh-sidebar-section, .wh-mailbox-stats, .wh-small-note) { display: none; }
#mailview .mail-mode-tabs, #mailview .mail-more-filters { display: none; }

.mail-rail { display: grid; gap: 1px; margin: 6px 0 8px; }
.mail-rail h4 { margin: 12px 8px 4px; font-size: 12px; letter-spacing: .04em; color: var(--dim); font-weight: 700; }
html[data-theme] .mail-rail button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--txt); font: inherit; font-size: 13px; text-align: left; cursor: pointer; box-shadow: none; }
html[data-theme] .mail-rail button:hover { background: color-mix(in srgb, var(--acc) 7%, transparent); }
html[data-theme] .mail-rail button.on { background: color-mix(in srgb, var(--acc) 13%, transparent); color: var(--acc2); font-weight: 700; }
.mail-rail button i { width: 18px; text-align: center; font-style: normal; flex: none; }
.mail-rail button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-rail button b { font-weight: 600; font-size: 12px; color: var(--dim); }
.mail-rail button.on b { color: var(--acc2); }
.mail-rail button.hot b { color: var(--wh-danger, #d14343); }
.mail-rail .mail-rail-all { font-weight: 700; }
.mail-rail-folders { margin: 4px 0 8px; }
.mail-rail-folders > summary { cursor: pointer; padding: 6px 10px; font-size: 12px; font-weight: 700; color: var(--dim); letter-spacing: .04em; }

/* 待处理 / 已处理 / 已忽略 / 全部 over the list. */
.mail-review-tabs { display: flex; align-items: center; gap: 18px; padding: 2px 4px 8px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
html[data-theme] .mail-review-tabs > button { padding: 4px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent;
  color: var(--dim); font: inherit; font-weight: 600; cursor: pointer; box-shadow: none; }
html[data-theme] .mail-review-tabs > button.on { color: var(--acc2); border-bottom-color: var(--acc); }
.mail-review-tabs > button b { margin-left: 2px; }
.mail-review-tools { margin-left: auto; display: flex; gap: 6px; }
.mail-review-tools button { font-size: 12px; padding: 3px 9px; }

/* Reading: the kind dropdown, one row of buttons, then the body and 往来记录 beside the work column. */
.mail-read-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mail-kind-pick { padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; font-size: 12px; max-width: 220px; }
.mail-read-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.mail-read-actions button { font-size: 13px; padding: 5px 11px; }
html[data-theme] .mail-read-actions .mail-read-ignore { color: var(--wh-danger, #d14343); }
.mail-read-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.mail-read-side { display: grid; gap: 8px; align-content: start; }
.mail-read-side .preview-badges { margin: 0; }
.mail-read-facts { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--dim); }
@media (min-width: 1280px) {
  .latest-mail.open { width: min(1180px, calc(100vw - 80px)); }
  .mail-read-grid { grid-template-columns: minmax(0, 1fr) 300px; }
  .mail-read-side { position: sticky; top: 0; max-height: calc(100vh - 220px); overflow: auto; }
}
/* One scroll for the whole mail: body, 往来记录 and the work column move together (no little scroll box inside). */
#preview-content .mail-read-grid { flex: 1; min-height: 0; overflow: auto; margin-top: 12px; }
#preview-content .mail-read-grid .latest-body { flex: none; margin-top: 0; overflow: visible; max-height: none; }
.latest-mail .latest-body :is(.conversation-timeline, .conversation-message-body) { max-height: none !important; overflow: visible !important; }

.mail-history { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 10px; }
.mail-history h3 { margin: 0 0 6px; font-size: 13px; }
.mail-history h3 small { color: var(--dim); font-weight: 400; }
html[data-theme] .mail-history-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 120px) auto; gap: 8px; width: 100%; padding: 6px 8px;
  border: 0; border-bottom: 1px dashed var(--line); border-radius: 0; background: transparent; color: var(--txt); font: inherit; font-size: 12px;
  text-align: left; box-shadow: none; cursor: pointer; }
html[data-theme] .mail-history-row:disabled { cursor: default; opacity: 1; }
html[data-theme] .mail-history-row:not(:disabled):hover { background: color-mix(in srgb, var(--acc) 6%, transparent); }
.mail-history-row .dir { font-weight: 700; }
.mail-history-row.in .dir { color: var(--acc2); }
.mail-history-row.out .dir { color: var(--ok, #2e8b57); }
.mail-history-row :is(.subj, .who) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-history-row :is(.who, time) { color: var(--dim); }
.mail-history-empty { font-size: 12px; color: var(--dim); margin: 4px 0; }
@media (max-width: 600px) {
  .mail-review-tabs { gap: 12px; overflow-x: auto; }
  html[data-theme] .mail-history-row { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .mail-history-row .who { display: none; }
}
/* 同步到 Outlook switch at the bottom of the rail. */
html[data-theme] .mail-rail .mail-rail-sync { margin-top: 10px; border: 1px dashed var(--line); }
html[data-theme] .mail-rail .mail-rail-sync.on b { color: var(--ok, #2e8b57); }
/* 询价闭环: the supplier reply card in the reading pane. */
.mail-rfq-card { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--acc) 40%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--acc) 6%, var(--panel)); }
.mail-rfq-card span, .mail-rfq-card small { font-size: 12px; color: var(--dim); }
/* 其他 folds away in the rail (compact). */
.mail-rail-more > summary { display: flex; align-items: center; gap: 9px; padding: 6px 10px; margin-top: 8px; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--dim); letter-spacing: .04em; }
.mail-rail-more > summary span { flex: 1; }
.mail-rail-more > summary b { font-weight: 600; }
/* The conversation: newest first; older messages under 更早的 N 封. */
.conversation-older > summary { cursor: pointer; padding: 6px 12px; font-size: 12px; color: var(--acc2); font-weight: 600; }
.conversation-older[open] > summary { margin-bottom: 6px; }
/* Phones (Dylan 「手机看邮件都看不到正文」): the head shrinks to a few lines so the body comes first. */
@media (max-width: 600px) {
  #preview-content { padding: 10px 12px !important; }
  .latest-mail .latest-head { padding-bottom: 6px; }
  .latest-mail .mail-read-kicker { margin-bottom: 2px; }
  .latest-mail .latest-subject { font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .latest-mail .latest-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
  .latest-mail .mail-read-actions { flex-wrap: nowrap; overflow-x: auto; gap: 5px; margin-top: 6px; scrollbar-width: none; }
  .latest-mail .mail-read-actions button { flex: none; padding: 4px 9px; font-size: 12px; }
  #preview-content .mail-read-grid { margin-top: 6px; }
  #preview-content .mail-read-grid .latest-body { padding: 10px; }
  .latest-mail .conversation-timeline-head { padding: 0 2px 4px; }
  .latest-mail .conversation-message > summary { padding: 7px 9px; }
  .latest-mail .conversation-message-body { padding: 0 9px 10px 9px; font-size: 13px; }
  .latest-mail .latest-actions { margin-top: 6px; }
}
/* ---- 布局重整 (Dylan 2026-10-27 「上方列表太长」「悬浮观看美观上我不太满意 … 布局上好好想想」) ---- */
/* The top in one line: title, the counters as small chips, the mail range. */
#mailview .mail-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; }
#mailview .mail-section-head > div:first-child { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
#mailview .mail-section-head h2 { font-size: 18px; margin: 0; }
#mailview .mail-section-head #mtime { margin: 0; font-size: 12px; white-space: nowrap; }
#mailview .mail-section-head .mail-today { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; flex: 1 1 auto; }
html[data-theme] #mailview .mail-section-head .mail-today-chip { min-height: 0; padding: 3px 10px; border-radius: 999px; font-size: 12px; display: inline-flex; gap: 5px; align-items: baseline; }
#mailview .mail-section-head .mail-today-chip b { font-size: 13px; }
#mailview .mail-section-head .mail-head-actions { margin-left: auto; }
#mailview .pasta-brief { margin-bottom: 8px; padding-top: 6px; padding-bottom: 6px; }
#mailview .pasta-brief > header { display: flex; align-items: center; gap: 10px; }
.pasta-brief-count { color: var(--dim); font-size: 12px; }
/* 三栏: rail | list | reading pane (wide screens, mail page). */
@media (min-width: 1280px) {
  body.mail-docked #mailview .mail-workspace { grid-template-columns: 60px minmax(320px, 400px) minmax(0, 1fr); gap: 12px; }
  body.mail-docked #mailview .mail-main > .hint { display: none; }
  body.mail-docked .latest-mail { position: sticky !important; top: 76px; right: auto; bottom: auto; width: auto !important; height: calc(100vh - 88px);
    transform: none !important; visibility: visible !important; pointer-events: auto !important; z-index: 1; border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
  body.mail-docked .latest-mail .preview-empty { display: grid; place-items: center; height: 100%; color: var(--dim); }
  body.mail-docked .mail-preview-close { display: none; }
  body.mail-docked .latest-mail .latest-body .mail-html-frame { height: calc(100vh - 330px); min-height: 360px; }
  /* Rows in the narrow list: name and time, the subject, the preview, then the tags. */
  body.mail-docked #list li.mail { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 8px; row-gap: 4px; padding: 9px 10px; }
  body.mail-docked #list li.mail > .ck { grid-row: 1; grid-column: 1; }
  body.mail-docked #list li.mail > .mbody { grid-row: 1; grid-column: 2; min-width: 0; }
  body.mail-docked #list li.mail > .time { grid-row: 1; grid-column: 3; font-size: 11px; white-space: nowrap; }
  body.mail-docked #list li.mail > .mail-tags { grid-row: 2; grid-column: 2 / 4; justify-content: flex-start; flex-wrap: wrap; max-width: none; }
  /* The whole subject, on as many lines as it needs (Dylan 2026-10-28 「尽量让邮件的主题 subject显示全」). */
  body.mail-docked #list li.mail .subj { display: block; margin-left: 0; padding-left: 0; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.35; }
  body.mail-docked #list li.mail .prev { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.mail-docked .mail-read-grid { grid-template-columns: minmax(0, 1fr) 260px; }
}
@media (min-width: 1280px) and (max-width: 1699px) { body.mail-docked .mail-read-grid { grid-template-columns: minmax(0, 1fr); } }
/* The work column as a chat with Pasta. */
.mail-read-side.ai-open > :not(.mail-ai-bar):not(.mail-ai-host) { display: none !important; }
.mail-ai-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 2px; }
.mail-ai-bar b { font-size: 13px; }
.mail-ai-host { min-height: 420px; height: calc(100vh - 300px); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mail-ai-host > * { flex: 1; min-height: 0; }
html[data-theme] .pasta-card .pasta-ask { font-weight: 700; color: var(--acc2); }
@media (min-width: 1280px) {
  /* The narrow list keeps one search line: the range and 在 Outlook 里搜 stay for Enter. */
  body.mail-docked #mailview .mail-search { flex-wrap: nowrap; }
  body.mail-docked #mailview .mail-search #mail-search-range { display: none; }
  body.mail-docked #mailview .mail-search button[type="submit"] { flex: none; white-space: nowrap; }
  body.mail-docked #mailview .mail-shell > .bar { flex-wrap: wrap; gap: 6px; }
}
/* 读信要宽 (Dylan 「看着非常的狭窄」): next to the reading pane the body
   is plain text on the page — no card inside a card — and the work column sits under the body until the screen is wide. */
@media (min-width: 1280px) {
  body.mail-docked .latest-mail #preview-content { padding: 14px 18px; }
  body.mail-docked .latest-mail .latest-body { margin-top: 0; padding: 0; background: transparent; border: 0; font-size: 14px; }
  body.mail-docked .latest-mail .conversation-timeline { gap: 0; }
  body.mail-docked .latest-mail .conversation-message { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
  body.mail-docked .latest-mail .conversation-message > summary { padding: 10px 0; }
  body.mail-docked .latest-mail .conversation-message-copy b { font-size: 13px; }
  body.mail-docked .latest-mail .conversation-message-copy small, body.mail-docked .latest-mail .conversation-message time { font-size: 12px; }
  body.mail-docked .latest-mail .conversation-message-body { padding: 0 0 16px; font-size: 14px; line-height: 1.7; }
  body.mail-docked .latest-mail .mail-html-frame { border: 0; border-radius: 0; }
  html[data-theme="light"] body.mail-docked .latest-mail .latest-body { background: transparent; }
  /* The chat with Pasta needs a column of its own, whatever the width. */
  body.mail-docked .mail-read-grid:has(.mail-read-side.ai-open) { grid-template-columns: minmax(0, 1fr) 320px; }
}
/* Pasta's card in the work column: who, what it found, then the buttons in two even columns. */
.mail-read-side .pasta-card { display: grid; gap: 8px; padding: 10px 12px; margin: 0; border: 1px solid var(--line); border-left: 3px solid #d9822b; border-radius: 10px; }
.mail-read-side .pasta-card-who { font-weight: 700; font-size: 13px; }
.mail-read-side .pasta-card-body { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mail-read-side .pasta-card-body > .ml-suggest, .mail-read-side .pasta-card-body > small { flex-basis: 100%; }
.mail-read-side .pasta-card-body small { color: var(--dim); font-size: 12px; line-height: 1.5; }
.mail-read-side .pasta-card-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mail-read-side .pasta-card-acts button { width: 100%; padding: 5px 6px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-read-side .pasta-card-acts .pasta-why { grid-column: 1 / -1; background: transparent; border: 0; color: var(--dim); text-decoration: underline; padding: 0; }
.mail-read-side .tag.ml-suggest { display: grid; gap: 6px; width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--acc, #245fa9) 35%, var(--line)); border-radius: 8px;
  background: color-mix(in srgb, var(--acc, #245fa9) 7%, transparent); color: var(--txt); white-space: normal; font-size: 13px; line-height: 1.5; }
.mail-read-side .ml-suggest-acts { display: flex; gap: 6px; }
.mail-read-side .tag.ml-suggest button { padding: 3px 10px; font-size: 12px; border-radius: 6px; }
.mail-read-side .tag.ml-suggest button[data-ml="confirm"] { background: var(--acc, #245fa9); color: #fff; border-color: transparent; }
.mail-read-side .tag.ml-suggest button[data-ml="dismiss"] { margin-left: auto; }
.ml-suggest-acts { display: inline-flex; gap: 4px; }
/* The rail as a menu: line icons, 业务往来 folding open to its kinds, counts on the right. */
.mail-rail .mail-rail-icon { flex: none; color: var(--dim); }
html[data-theme] .mail-rail button.on .mail-rail-icon { color: var(--acc2); }
html[data-theme] .mail-rail button.sub { padding-left: 26px; }
html[data-theme] .mail-rail .mail-rail-group { font-weight: 600; }
.mail-rail .mail-rail-group em { display: inline-flex; margin-left: 4px; transition: transform .15s ease; }
.mail-rail .mail-rail-group em .mail-rail-icon { width: 14px; height: 14px; }
.mail-rail .mail-rail-group[aria-expanded="false"] em { transform: rotate(-90deg); }
.mail-rail-sub[hidden] { display: none; }
html[data-theme] .mail-rail .mail-rail-sync { margin-top: 10px; border-top: 1px solid var(--line); border-radius: 0; padding-top: 10px; }
html[data-theme] .mail-rail .mail-rail-sync b { padding: 1px 8px; border-radius: 999px; background: var(--surface1, var(--line)); }
html[data-theme] .mail-rail .mail-rail-sync.on b { background: var(--acc); color: #fff; }
/* 整页悬浮 (Dylan 2026-10-27 「做成整页的悬浮吧而不是这种小的」): next to the reading pane the rail is a strip of icons the
   height of the page; pointing at it opens the whole menu — the company, the mailboxes, the kinds and the Outlook
   folders — over the list, as tall as the page, and it folds back when the pointer leaves (mail_inbox.js railHover). */
@media (min-width: 1280px) {
  body.mail-docked #mailview .mail-workspace > .business-sidebar { position: sticky; top: 76px; z-index: 20; align-self: start; box-sizing: border-box;
    width: 60px; height: calc(100vh - 88px); overflow: hidden auto; scrollbar-width: none; padding: 6px 4px; border: 1px solid var(--line); border-radius: 14px;
    background: var(--panel); transition: width .16s ease, box-shadow .16s ease; }
  body.mail-docked #mailview .mail-workspace > .business-sidebar::-webkit-scrollbar { display: none; }
  body.mail-docked:not(.mail-rail-open) #mailview .business-sidebar > :not(.mail-rail):not(.side-settings) { display: none !important; }
  body.mail-docked:not(.mail-rail-open) #mailview .mail-rail :is(h4, button > span, button > em) { display: none; }
  body.mail-docked:not(.mail-rail-open) #mailview .mail-rail button { position: relative; justify-content: center; min-height: 38px; padding: 4px 0; }
  body.mail-docked:not(.mail-rail-open) #mailview .mail-rail button.sub { padding-left: 0; }
  body.mail-docked:not(.mail-rail-open) #mailview .mail-rail button > b { position: absolute; top: 0; right: 0; min-width: 18px; padding: 0 4px; border-radius: 999px;
    font-size: 12px; line-height: 18px; text-align: center; background: var(--surface1, var(--line)); }
  body.mail-docked:not(.mail-rail-open) #mailview .mail-rail button > b:empty { display: none; }
  body.mail-docked:not(.mail-rail-open) #mailview .mail-rail .mail-rail-sync { padding-top: 8px; }
  body.mail-docked:not(.mail-rail-open) #mailview .side-settings { font-size: 0; padding: 8px 0; width: 100%; }
  body.mail-docked:not(.mail-rail-open) #mailview .side-settings::first-letter { font-size: 18px; }
  body.mail-docked.mail-rail-open #mailview .mail-workspace > .business-sidebar { width: 272px; padding: 10px; box-shadow: 0 18px 48px rgba(15, 30, 60, .24); }
}/* 标签不被挡住 (Dylan 2026-10-27 「部分标签被覆盖了」): in the narrow list beside the reading pane the tags are one line that
   wraps — 业务类型, 单号, 状态, then the rest — instead of the wide three-column grid (190 + 140 + 100 px) that ran past
   the edge and hid the 状态 tag. Empty places take no room. */
@media (min-width: 1280px) {
  body.mail-docked #list li.mail > .mail-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; grid-template-columns: none; min-width: 0; max-width: 100%; overflow: hidden; }
  body.mail-docked #list li.mail .mt-slot { flex: 0 1 auto; min-width: 0; max-width: 100%; }
  body.mail-docked #list li.mail .mt-slot:empty { display: none; }
  body.mail-docked #list li.mail .mt-slot-type .mt-type { max-width: 100%; overflow: hidden; }
  body.mail-docked #list li.mail .mt-slot-type .mt-type > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.mail-docked #list li.mail .mt-extra { flex: 1 1 100%; max-width: 100%; }
  body.mail-docked #list li.mail .mt-extra > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}/* Pasta 今日简报 (renderPastaBrief): the kinds as chips with counts, one kind's lines at a time, and 「✦ Pasta 推荐 N 个任务」
   folding open to a list to tick and make at once. */
#mailview .pasta-brief .brief-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 6px; }
html[data-theme] #mailview .brief-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); box-shadow: none; font-size: 13px; font-weight: 600; color: var(--txt); cursor: pointer; }
html[data-theme] #mailview .brief-chip b { min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--surface1, var(--line)); font-size: 12px; text-align: center; }
html[data-theme] #mailview .brief-chip.on { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, var(--panel)); color: var(--acc2); }
html[data-theme] #mailview .brief-chip.hot b { background: var(--wh-danger, #c0392b); color: #fff; }
html[data-theme] #mailview .brief-chip.warn b { background: var(--wh-violet, var(--acc)); color: #fff; }
#mailview .brief-chips .pasta-brief-note { margin-left: auto; }
#mailview .brief-lines { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
#mailview .brief-lines li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; }
#mailview .brief-lines li:hover { background: var(--surface1, color-mix(in srgb, var(--acc) 6%, transparent)); }
#mailview .brief-line-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
#mailview .brief-line-text b { margin-right: 8px; padding: 1px 6px; border-radius: 6px; background: var(--surface1, var(--line)); font-size: 12px; }
html[data-theme] #mailview .brief-open { flex: none; padding: 2px 10px; border: 0; border-radius: 999px; background: transparent; box-shadow: none; color: var(--acc2); font-size: 12px; cursor: pointer; }
html[data-theme] #mailview .brief-open:hover { background: color-mix(in srgb, var(--acc) 10%, transparent); }
#mailview .brief-tasks-bar { margin-top: 8px; }
html[data-theme] #mailview .brief-tasks-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--wh-violet, var(--acc)) 35%, var(--line)); border-radius: 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 10%, var(--panel)), color-mix(in srgb, var(--wh-violet, var(--acc)) 10%, var(--panel))); box-shadow: none; font-size: 13px; color: var(--txt); text-align: left; cursor: pointer; }
#mailview .brief-tasks-toggle i { font-style: normal; color: var(--wh-violet, var(--acc2)); }
#mailview .brief-tasks-toggle b { color: var(--acc2); }
#mailview .brief-tasks-toggle span { margin-left: auto; color: var(--acc2); font-weight: 600; }
#mailview .brief-tasks-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px; font-size: 13px; }
#mailview .brief-tasks-tools small { color: var(--dim); }
#mailview .brief-tasks { display: grid; gap: 4px; max-height: 320px; overflow: auto; margin: 0; padding: 0; list-style: none; }
#mailview .brief-tasks li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
#mailview .brief-tasks li.on { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 6%, var(--panel)); }
#mailview .brief-tasks label { flex: 1; display: flex; align-items: flex-start; gap: 8px; min-width: 0; cursor: pointer; }
#mailview .brief-tasks label span { min-width: 0; }
#mailview .brief-tasks label b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mailview .brief-tasks label small { display: block; color: var(--dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mailview .brief-tasks code { flex: none; padding: 1px 6px; border-radius: 6px; background: var(--surface1, var(--line)); font-size: 12px; }
#mailview .brief-tasks em { flex: none; font-style: normal; font-size: 12px; color: var(--acc2); }
html[data-theme] #mailview .brief-edit { flex: none; padding: 2px 8px; border: 0; background: transparent; box-shadow: none; color: var(--dim); font-size: 12px; cursor: pointer; }
/* 从邮件直接推荐任务: the mail's suggested task at the top of its Pasta card. */
.pasta-task-suggest { display: grid; gap: 4px; padding: 8px 10px; border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 10%, var(--panel)), color-mix(in srgb, var(--wh-violet, var(--acc)) 10%, var(--panel))); border: 1px solid color-mix(in srgb, var(--wh-violet, var(--acc)) 30%, var(--line)); }
.pasta-task-suggest > span { font-size: 12px; color: var(--wh-violet, var(--acc2)); font-weight: 600; }
.pasta-task-suggest > span i { font-style: normal; margin-right: 4px; }
.pasta-task-suggest > b { font-size: 13px; }
.pasta-task-suggest > small { color: var(--dim); font-size: 12px; }
.pasta-task-suggest > div { display: flex; gap: 6px; margin-top: 2px; }
.pasta-task-suggest > div button { padding: 3px 10px; font-size: 12px; }/* 任务详情 · 负责人和关联同事 (renderTaskPeople): faces in a row, ＋ 关联同事 and 转交… for one's own task. */
.task-people { display: grid; gap: 6px; margin: 8px 0 4px; }
.task-people-row { display: flex; flex-wrap: wrap; gap: 6px; }
.task-person { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: 13px; }
.task-person.owner { border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); background: color-mix(in srgb, var(--acc) 8%, var(--panel)); }
.task-person small { color: var(--dim); font-size: 12px; }
html[data-theme] .task-person button { padding: 0 4px; border: 0; background: transparent; box-shadow: none; color: var(--dim); cursor: pointer; }
.task-transferred { margin: 0; color: var(--dim); font-size: 12px; }
.task-people-tools, .task-transfer-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.task-transfer-form[hidden] { display: none; }
.task-people-tools select, .task-transfer-form select { max-width: 200px; }
.task-transfer-form input { flex: 1; min-width: 160px; }
/* The phone (Dylan 2026-10-28 「别的功能板块也强化下」): a mail row reads like a phone mail app — sender and time on one
   line, the subject, one line of preview, the tags on one line — with no checkbox (hold a mail to select it from its
   menu); swiped left it shows 忽略 / 已处理, held it opens its menu as a sheet from the bottom. */
@media (max-width: 759px) {
  html[data-theme] #mailview li.mail { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "body time" "tags tags"; gap: 6px 10px; padding: 12px 16px !important; background: var(--panel); transition: transform .18s ease; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  html[data-theme] #mailview li.mail > .ck { display: none !important; }
  html[data-theme] #mailview li.mail.sel > .ck, html[data-theme] #mailview.picking li.mail > .ck { display: block !important; }
  html[data-theme] #mailview li.mail > .mbody { grid-area: body; display: block !important; min-width: 0; padding: 0 !important; }
  html[data-theme] #mailview li.mail .who { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 600; }
  html[data-theme] #mailview li.mail .subj { display: block; overflow-wrap: anywhere; margin-top: 2px; font-size: 15px; line-height: 1.35; white-space: normal; }
  html[data-theme] #mailview li.mail .conversation-row-meta { display: inline-block; margin: 2px 0 0; padding: 0; font-size: 12px; color: var(--dim); }
  html[data-theme] #mailview li.mail .prev { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; font-size: 14px; color: var(--dim); }
  html[data-theme] #mailview li.mail > .time { grid-area: time; display: block !important; align-self: start; padding-top: 3px; font-size: 12px; color: var(--dim); white-space: nowrap; }
  html[data-theme] #mailview li.mail > .mail-tags { grid-area: tags; display: flex !important; flex-wrap: nowrap; gap: 6px; overflow: hidden; margin: 0 !important; padding: 0 !important; }
  html[data-theme] #mailview li.mail > .mail-tags :is(button, .mt-more) { flex: none; max-width: 62vw; min-height: 26px; padding: 2px 8px !important; font-size: 12px !important; }
  html[data-theme] #mailview li.mail .subj { margin-left: 0 !important; padding-left: 0 !important; text-indent: 0; }
  html[data-theme] #mailview li.mail > .mail-tags > .mt-slot { display: flex; flex: none; gap: 6px; min-width: 0; margin: 0 !important; }
  html[data-theme] #mailview li.mail > .mail-tags > .mt-slot:empty { display: none; }
  html[data-theme] #mailview li.mail > .mail-tags .mt-type { overflow: hidden; max-width: 58vw; }
  html[data-theme] #ctxmenu { position: fixed; left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-width: none; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); border-radius: 14px 14px 0 0; box-shadow: 0 -10px 30px rgba(15, 30, 60, .25); }
  html[data-theme] #ctxmenu :is(button, a) { min-height: 48px; padding: 0 20px; font-size: 16px; }
}
.row-swipe { position: fixed; right: 0; z-index: 210; display: flex; }
.row-swipe[hidden] { display: none; }
html[data-theme] .row-swipe button { width: 84px; height: 100%; border: 0; border-radius: 0; box-shadow: none; background: #8a96a8; color: #fff; font-size: 15px; }
html[data-theme] .row-swipe button.primary { background: var(--acc); }/* 我的工作 and 办公室 on the phone: the counts scroll sideways on one line instead of running off the edge, a task row
   slides like a mail row, and the office drops its floating 工作讨论 pill (the bottom bar already has 聊天). */
@media (max-width: 759px) {
  html[data-theme] #taskview .simple-task-stats { display: flex !important; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  html[data-theme] #taskview .simple-task-stats::-webkit-scrollbar { display: none; }
  html[data-theme] #taskview .simple-task-stats > * { flex: none; }
  html[data-theme] #taskview .simple-task-row { position: relative; background: var(--panel); transition: transform .18s ease; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  body[data-current-view] #studio-chat-launcher { display: none !important; }
}/* One row of list tools: 全选, what is selected, 写邮件, 待建档 and 一键降噪 stay on one line (Dylan 2026-10-28
   「降噪不要单独分行」); what is selected gives way first. */
html[data-theme] #mailview .bar { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 8px; }
html[data-theme] #mailview .bar > :is(button, label, details) { flex: none; white-space: nowrap; }
html[data-theme] #mailview .bar > .sel { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme] #mailview .bar .mail-cleanup-action { margin-inline-start: auto; }
body.mail-docked #mailview .bar > :is(button, label) { padding-inline: 10px; font-size: 13px; }
/* Narrow list: the select-all box without its word, and no 「未选择」 until something is chosen. */
body.mail-docked #mailview .bar .mail-select-all > span, html[data-theme] #mailview .bar:not(.has-selection) > .sel { display: none; }/* Row order (Dylan 2026-10-28 「名字单独凸出来很奇怪」): the subject leads, beside the time; the sender and the mail count
   follow as one quiet line; then the preview and the tags. */
:is(body.mail-docked #list, #mailview) li.mail > .mbody { display: flex !important; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
body.mail-docked #list li.mail > .mbody > .subj, body.mail-docked #list li.mail > .mbody > .prev { flex: 1 0 100%; }
body.mail-docked #list li.mail > .mbody > .subj { order: 1; margin: 0; font-size: 14px; font-weight: 600; color: var(--txt); }
html[data-theme] body.mail-docked #list li.mail > .mbody > .who { order: 2; display: inline; margin: 2px 0 0; font-size: 12.5px; font-weight: 500; color: var(--dim); }
body.mail-docked #list li.mail > .mbody > .conversation-row-meta { order: 3; margin: 0; padding: 0; font-size: 12px; color: var(--dim); }
body.mail-docked #list li.mail > .mbody > .conversation-row-meta::before { content: '· '; }
body.mail-docked #list li.mail > .mbody > .prev { order: 4; margin-top: 3px; }
@media (max-width: 759px) {
  html[data-theme] #mailview li.mail > .mbody > :is(.subj, .prev) { flex: 1 0 100%; }
  html[data-theme] #mailview li.mail > .mbody > .subj { order: 1; margin: 0; font-size: 15px; font-weight: 600; color: var(--txt); }
  html[data-theme] #mailview li.mail > .mbody > .who { order: 2; display: inline; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--dim); }
  html[data-theme] #mailview li.mail > .mbody > .conversation-row-meta { order: 3; margin: 0; font-size: 12px; }
  html[data-theme] #mailview li.mail > .mbody > .conversation-row-meta::before { content: '· '; }
  html[data-theme] #mailview li.mail > .mbody > .prev { order: 4; }
}/* The status row on one line (Dylan 2026-10-28 「按钮怎么改进下」): 待处理 / 已处理 / 已忽略 / 全部 as a segmented strip that
   never wraps, and 按单号 / 批量整理 as two small icon buttons at its end (their names on hover). */
html[data-theme] #mailview .mail-review-tabs { display: flex !important; flex-wrap: nowrap; align-items: center; gap: 2px; min-width: 0; }
html[data-theme] #mailview .mail-review-tabs > button[data-inbox-tab] { flex: none; white-space: nowrap; padding: 6px 9px; font-size: 13px; }
html[data-theme] #mailview .mail-review-tabs > button[data-inbox-tab] b { margin-left: 3px; }
html[data-theme] #mailview .mail-review-tools { display: flex; flex: none; gap: 4px; margin-left: auto; }
html[data-theme] #mailview .mail-review-tools button { display: inline-grid; place-items: center; width: 32px; height: 32px; min-height: 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--dim); font-size: 15px; font-weight: 700; line-height: 1; }
html[data-theme] #mailview .mail-review-tools button:hover, html[data-theme] #mailview .mail-review-tools button.on { color: var(--acc2, var(--acc)); border-color: var(--acc); background: color-mix(in srgb, var(--acc) 8%, var(--panel)); }/* 办公室的邮件: a compact row (mailpanel.py officeMailCard). */
html[data-theme] .office-drag-card.office-mail-row { display: grid; gap: 4px; padding: 10px 12px; }
html[data-theme] .office-mail-row .studio-card-title { font-size: 14px; line-height: 1.35; font-weight: 600; text-align: left; white-space: normal; overflow-wrap: anywhere; }
html[data-theme] .office-mail-row.unread .studio-card-title::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 6px 2px 0; border-radius: 50%; background: var(--acc); }
html[data-theme] .office-mail-row .office-mail-from { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); }
html[data-theme] .office-mail-row .office-mail-from em { padding: 0 6px; border-radius: 999px; font-style: normal; font-size: 11px; line-height: 18px; background: color-mix(in srgb, var(--acc) 10%, var(--panel)); color: var(--acc2, var(--acc)); }
html[data-theme] .office-mail-row .office-mail-from em.urgent { background: color-mix(in srgb, #e5484d 12%, var(--panel)); color: #c4363b; }
html[data-theme] .office-mail-row .office-mail-preview { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--dim); }
html[data-theme] .office-mail-row .office-mail-links { font-size: 12px; color: var(--acc2, var(--acc)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme] .office-mail-row .studio-card-actions { display: flex; gap: 6px; margin-top: 2px; }
html[data-theme] .office-mail-row .studio-card-actions button { padding: 3px 9px; font-size: 12px; }/* 任务跟进 cards (mailpanel.py officeTaskActions / officeTaskFaces): who is on it, and the everyday actions in place. */
html[data-theme] .office-drag-card .office-drag-card-head { display: flex; align-items: center; gap: 8px; }
html[data-theme] .office-drag-card .office-drag-grip { margin-left: 0; }
html[data-theme] .office-task-faces { display: inline-flex; align-items: center; margin-left: auto; }
html[data-theme] .office-task-faces > * + * { margin-left: -6px; }
html[data-theme] .office-task-faces .chat-face { box-shadow: 0 0 0 2px var(--panel); border-radius: 50%; }
html[data-theme] .office-task-faces small { margin-left: 4px; font-size: 11px; color: var(--dim); }
html[data-theme] .office-task-pool { padding: 0 7px; border-radius: 999px; font-style: normal; font-size: 11px; line-height: 20px; background: color-mix(in srgb, #d98a00 14%, var(--panel)); color: #a3630a; }
html[data-theme] .office-drag-card .studio-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-theme] .office-drag-card .studio-card-actions button { padding: 4px 10px; font-size: 12px; }
html[data-theme] .office-task-due { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px 0 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; color: var(--dim); }
html[data-theme] .office-task-due input { width: 122px; min-height: 0; padding: 2px 4px; border: 0; background: transparent; font-size: 12px; }
html[data-theme] .studio-queue-filters button b { margin-left: 4px; padding: 0 5px; border-radius: 999px; font-size: 11px; background: var(--acc); color: #fff; }html[data-theme] .studio-queue-filters { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
html[data-theme] .studio-queue-filters button { flex: 1 0 auto; white-space: nowrap; padding: 6px 8px; font-size: 12.5px; }
/* 任务跟进, tidied (Dylan 2026-10-28 「界面完善下」): five filters fit one line, compact cards, one button style. */
html[data-theme] #worldview .studio-queue-filters { display: flex !important; flex-wrap: wrap; gap: 4px 2px; padding: 6px 3px 3px; overflow: visible; }
html[data-theme] #worldview .studio-queue-filters button { position: relative; flex: 1 1 auto !important; min-width: max-content; padding: 7px 8px; font-size: 12.5px; white-space: nowrap; overflow: visible; text-overflow: clip; }
html[data-theme] #worldview .studio-queue-filters button b { position: absolute; top: -6px; right: 2px; min-width: 16px; margin: 0; padding: 0 4px; line-height: 16px; font-size: 10.5px; }
html[data-theme] .office-drag-card.task { display: grid; gap: 6px; padding: 12px 14px; border-left: 3px solid transparent; }
html[data-theme] .office-drag-card.task.late { border-left-color: #e5484d; }
html[data-theme] .office-drag-card.task.done { opacity: .72; }
html[data-theme] .office-drag-card.task .studio-card-title { font-size: 14.5px; line-height: 1.35; font-weight: 600; text-align: left; white-space: normal; }
html[data-theme] .office-task-meta { font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme] .office-task-meta .late { color: #c4363b; font-weight: 600; }
html[data-theme] .office-drag-card.task .studio-next-action { margin: 0; padding: 6px 8px; border-left: 0; border-radius: 6px; background: color-mix(in srgb, var(--acc) 6%, var(--panel)); font-size: 12.5px; }
html[data-theme] .office-drag-card .studio-card-actions { margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--line); align-items: center; }
html[data-theme] .office-drag-card .studio-card-actions button { min-height: 28px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--txt); box-shadow: none; font-size: 12px; font-weight: 500; }
html[data-theme] .office-drag-card .studio-card-actions button.primary { border-color: transparent; background: var(--acc); color: #fff; font-weight: 600; }
html[data-theme] .office-drag-card .studio-card-actions .office-task-due { min-height: 28px; }html[data-theme] .office-drag-card .studio-card-actions .office-task-due input { width: 108px; }
html[data-theme] .office-drag-card .studio-card-actions .office-task-chat { padding: 3px 8px; }
/* 父子任务 in 我的工作 (mailpanel.py simpleTaskTree): the children sit indented under their parent, which shows a roll-up. */
html[data-theme] .simple-task-children { margin: -4px 0 8px 22px; padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--acc) 30%, var(--line)); }
html[data-theme] .simple-task-children .simple-task-row { padding-top: 8px; padding-bottom: 8px; }
html[data-theme] .simple-task-children .simple-task-title { font-size: 14px; }
html[data-theme] .simple-rollup { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); }
html[data-theme] .simple-rollup .simple-progress { width: 64px; }/* 流程: 换人, 批量换人 and 流程模板 (flows.js). */
html[data-theme] .fl-step-state { display: inline-flex; align-items: center; gap: 8px; }
html[data-theme] .fl-owner-btn { min-height: 0; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); box-shadow: none; font-size: 12px; color: var(--acc2, var(--acc)); }
html[data-theme] .fl-owner-src { margin-left: 6px; padding: 0 6px; border-radius: 999px; font-style: normal; font-size: 11px; background: color-mix(in srgb, var(--acc) 9%, var(--panel)); color: var(--dim); }
html[data-theme] .fl-owner-src.fl-src-pool { background: color-mix(in srgb, #d98a00 14%, var(--panel)); color: #a3630a; }
html[data-theme] .fl-owner-form { display: grid; gap: 8px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--acc) 4%, var(--panel)); }
html[data-theme] .fl-owner-form select, html[data-theme] .fl-bulk select, html[data-theme] .fl-template select { min-width: 200px; }
html[data-theme] .fl-owner-scope { display: grid; gap: 4px; font-size: 13px; }
html[data-theme] .fl-owner-scope label { display: flex; align-items: center; gap: 6px; }
html[data-theme] .fl-owner-preview { margin: 0; font-size: 12.5px; color: var(--dim); }
html[data-theme] .fl-owner-preview:empty { display: none; }
html[data-theme] .fl-owner-buttons, html[data-theme] .fl-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html[data-theme] .fl-bulk { margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--acc); border-radius: 10px; background: color-mix(in srgb, var(--acc) 6%, var(--panel)); }
html[data-theme] .fl-bulk .fl-owner-preview { flex-basis: 100%; }
html[data-theme] .fl-card.pickable { cursor: pointer; }
html[data-theme] .fl-card.picked { outline: 2px solid var(--acc); }
html[data-theme] .fl-pick { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border: 1.5px solid var(--line); border-radius: 4px; font-style: normal; font-size: 12px; color: #fff; }
html[data-theme] .fl-card.picked .fl-pick { border-color: var(--acc); background: var(--acc); }
/* 发起任务链: company, chain and project side by side, the steps with who takes each below */
html[data-theme] .fl-chain-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 10px 0; }
html[data-theme] .fl-chain-form label { display: grid; gap: 4px; font-size: 12.5px; color: var(--dim); }
html[data-theme] .fl-chain-form select, html[data-theme] .fl-chain-form textarea { width: 100%; font: inherit; }
html[data-theme] .fl-chain-form .fl-chain-brief { grid-column: 1 / -1; }
html[data-theme] .fl-chain-lpo { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; font-size: 13px; background: color-mix(in srgb, var(--acc) 8%, transparent); }
html[data-theme] .fl-template { margin-bottom: 14px; }
html[data-theme] .fl-template header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
html[data-theme] .fl-template table { width: 100%; border-collapse: collapse; font-size: 13px; }
html[data-theme] .fl-template th, html[data-theme] .fl-template td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
html[data-theme] .fl-toolbar button.on { border-color: var(--acc); color: var(--acc2, var(--acc)); }/* 交给同事: the colleague is a dropdown with a search on top (mailpanel.py colleagueCombo*); a dropped task's notice has 撤销. */
html[data-theme] .colleague-combo { position: relative; display: grid; gap: 4px; }
html[data-theme] .colleague-combo-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 220px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: none; text-align: left; }
html[data-theme] .colleague-combo-btn b { flex: 1; font-weight: 600; }
html[data-theme] .colleague-combo-btn i { font-style: normal; color: var(--dim); }
html[data-theme] .colleague-combo-pop { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; width: 300px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 14px 34px rgba(15, 30, 60, .2); }
html[data-theme] .colleague-combo-pop[hidden] { display: none; }
html[data-theme] .colleague-combo-pop input { width: 100%; margin-bottom: 6px; }
html[data-theme] .colleague-combo-list { display: grid; max-height: 260px; overflow: auto; }
html[data-theme] .colleague-combo-list button { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; text-align: left; }
html[data-theme] .colleague-combo-list button:hover, html[data-theme] .colleague-combo-list button.hot { background: color-mix(in srgb, var(--acc) 10%, var(--panel)); }
html[data-theme] .colleague-combo-list button.on b { color: var(--acc2, var(--acc)); }
html[data-theme] .colleague-combo-list small { color: var(--dim); font-size: 11.5px; }
html[data-theme] .colleague-combo-empty { margin: 6px 8px; color: var(--dim); font-size: 13px; }
#toast { pointer-events: auto; }
html[data-theme] #toast .toast-undo { margin-left: 10px; padding: 2px 10px; border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit; box-shadow: none; font-size: 12.5px; }/* 未开始的步骤默认折叠: the later steps of a chain sit behind one line (flows.js, foldLaterStages in mailpanel.py). */
html[data-theme] .fl-later { list-style: none; }
html[data-theme] .fl-later button, html[data-theme] .stage-later > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 0; margin: 4px 0 4px 36px; padding: 4px 10px; border: 1px dashed var(--line); border-radius: 8px; background: transparent; box-shadow: none; color: var(--dim); font-size: 12.5px; cursor: pointer; }
html[data-theme] .stage-later > summary { margin-left: 0; list-style: none; }
html[data-theme] .stage-later > summary::-webkit-details-marker { display: none; }
html[data-theme] .stage-later[open] > summary { margin-bottom: 6px; }/* 流程详情 as a timeline (Dylan 2026-10-28 「视觉上提升下」): a line joins the steps — green through what is done, dashed
   ahead; the step under way sits in a light card; who has it shows their face, the due date is a tag. */
html[data-theme] #flow-detail .fl-detail-bar { height: 6px; margin: 10px 0 2px; border-radius: 999px; background: color-mix(in srgb, var(--txt) 8%, var(--panel)); overflow: hidden; }
html[data-theme] #flow-detail .fl-detail-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2e8b57, var(--acc)); }
html[data-theme] #flow-detail .fl-steps { position: relative; padding: 4px 0; }
html[data-theme] #flow-detail .fl-step { position: relative; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; padding: 12px 10px 12px 0; border-top: 0; }
html[data-theme] #flow-detail .fl-step::before { content: ''; position: absolute; left: 14px; top: 0; bottom: 0; width: 2px; background: var(--line); }
html[data-theme] #flow-detail .fl-step:first-child::before { top: 24px; }
html[data-theme] #flow-detail .fl-step:last-child::before { bottom: calc(100% - 24px); }
html[data-theme] #flow-detail .fl-step.done::before { background: #2e8b57; }
html[data-theme] #flow-detail .fl-step.wait::before { background: none; border-left: 2px dashed var(--line); width: 0; }
html[data-theme] #flow-detail .fl-dot { position: relative; z-index: 1; width: 30px; height: 30px; background: var(--panel); border-width: 2px; font-weight: 700; }
html[data-theme] #flow-detail .fl-step.now .fl-dot { background: var(--acc); border-color: var(--acc); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--acc) 18%, transparent); }
html[data-theme] #flow-detail .fl-step.now.late .fl-dot { background: #e5484d; border-color: #e5484d; box-shadow: 0 0 0 5px color-mix(in srgb, #e5484d 18%, transparent); }
html[data-theme] #flow-detail .fl-step.now .fl-step-main { padding: 10px 12px; margin: -6px 0; border-radius: 12px; background: color-mix(in srgb, var(--acc) 7%, var(--panel)); border: 1px solid color-mix(in srgb, var(--acc) 25%, var(--line)); }
html[data-theme] #flow-detail .fl-step-main b { font-size: 14px; }
html[data-theme] #flow-detail .fl-step.done .fl-step-main b { font-weight: 600; text-decoration: none; }
html[data-theme] #flow-detail .fl-step.wait .fl-step-main b { color: var(--dim); font-weight: 600; }
html[data-theme] #flow-detail .fl-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; }
html[data-theme] #flow-detail .fl-face .chat-face { width: 20px; height: 20px; }
html[data-theme] #flow-detail .fl-owner-src { margin-left: 0; }
html[data-theme] #flow-detail .fl-due { padding: 0 7px; border-radius: 999px; font-size: 11.5px; line-height: 20px; background: color-mix(in srgb, var(--txt) 7%, var(--panel)); color: var(--dim); }
html[data-theme] #flow-detail .fl-due.late { background: color-mix(in srgb, #e5484d 14%, var(--panel)); color: #c4363b; font-weight: 600; }
html[data-theme] #flow-detail .fl-extra { color: var(--dim); }
html[data-theme] #flow-detail .fl-step-state { flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 2px; }
html[data-theme] #flow-detail .fl-state-label { padding: 1px 8px; border-radius: 999px; font-size: 11.5px; line-height: 20px; }
html[data-theme] #flow-detail .fl-step.done .fl-state-label { background: color-mix(in srgb, #2e8b57 12%, var(--panel)); color: #23744a; }
html[data-theme] #flow-detail .fl-step.now .fl-state-label { background: color-mix(in srgb, var(--acc) 14%, var(--panel)); color: var(--acc2, var(--acc)); }
html[data-theme] #flow-detail .fl-step.now.late .fl-state-label { background: color-mix(in srgb, #e5484d 14%, var(--panel)); color: #c4363b; }
html[data-theme] #flow-detail .fl-owner-btn { padding: 2px 8px; font-size: 11.5px; color: var(--dim); border-color: transparent; background: transparent; }
html[data-theme] #flow-detail .fl-owner-btn:hover, html[data-theme] #flow-detail .fl-step.now .fl-owner-btn { border-color: var(--line); color: var(--acc2, var(--acc)); background: var(--panel); }
html[data-theme] #flow-detail .fl-later { position: relative; padding: 4px 0 4px 42px; }
html[data-theme] #flow-detail .fl-later::before { content: ''; position: absolute; left: 14px; top: 0; bottom: 0; border-left: 2px dashed var(--line); }
html[data-theme] #flow-detail .fl-later button { margin: 0; }
html[data-theme] #flow-detail .fl-actions { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }html[data-theme] #flow-detail .fl-step.done .fl-dot { background: #2e8b57; border-color: #2e8b57; color: #fff; }
html[data-theme] #flow-detail .fl-step.now::before { background: linear-gradient(#2e8b57 0 24px, var(--line) 24px); }
/* 办公室, more useful: the person card lists their work with 催一下; the numbers open what they count; the legend folds. */
html[data-theme] .focus-work { display: grid; gap: 4px; margin: 8px 0; }
html[data-theme] .focus-work > small { color: var(--dim); font-size: 12px; }
html[data-theme] .focus-work .late { color: #c4363b; }
html[data-theme] .focus-task { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-left: 3px solid var(--acc); border-radius: 8px; background: var(--panel); }
html[data-theme] .focus-task.late { border-left-color: #e5484d; }
html[data-theme] .focus-task-title { overflow: hidden; padding: 0; border: 0; background: none; box-shadow: none; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--txt); }
html[data-theme] .focus-task > span { font-size: 12px; color: var(--dim); }
html[data-theme] .focus-task.late > span { color: #c4363b; font-weight: 600; }
html[data-theme] .focus-task-nudge { min-height: 0; padding: 2px 8px; font-size: 12px; }
html[data-theme] .focus-work-empty { margin: 8px 0; color: var(--dim); font-size: 13px; }
html[data-theme] .office-stats > button { display: grid; gap: 2px; text-align: center; cursor: pointer; transition: border-color .15s, transform .15s; }
html[data-theme] .office-stats > button:hover { border-color: var(--acc); transform: translateY(-1px); }
html[data-theme] .office-legend-fold > summary { display: inline-flex; margin: 6px 0; color: var(--dim); font-size: 12.5px; cursor: pointer; list-style: none; }
html[data-theme] .office-legend-fold > summary::-webkit-details-marker { display: none; }
html[data-theme] .office-legend-fold > summary::before { content: 'ⓘ'; margin-right: 6px; }html[data-theme] #team-map-focus .team-map-focus-actions button { border: 1px solid var(--line) !important; background: var(--panel) !important; color: var(--txt) !important; box-shadow: none; font-size: 12.5px; }
html[data-theme] #team-map-focus .team-map-focus-actions button.primary { border-color: transparent !important; background: var(--acc) !important; color: #fff !important; }
html[data-theme] .fl-owner-note { margin: 0; font-size: 12px; color: #a3630a; }
/* 安排模式: the work column wide, the office beside it compact (mailpanel.py officeArrangeMode). */
@media (min-width: 1100px) {
  html[data-theme] .office-workbench.arrange-mode:not(.locations-mode) { grid-template-columns: minmax(400px, 36%) minmax(0, 1fr) !important; }
  html[data-theme] .office-workbench.arrange-mode:not(.locations-mode) > .office-rail { display: none !important; }
}
html[data-theme] .office-workbench.arrange-mode .office-quick-panel { width: auto !important; max-width: none !important; }
html[data-theme] .office-workbench.arrange-mode .studio-scene-heading h2 { font-size: 18px; }
html[data-theme] .office-workbench.arrange-mode .studio-core-room { padding: 10px 12px; }
html[data-theme] .office-workbench.arrange-mode .studio-core-room .studio-detail-floor { min-height: 0 !important; padding: 6px 0 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
html[data-theme] .office-workbench.arrange-mode .studio-core-room .studio-detail-floor > :not(.studio-member-grid) { display: none !important; }
html[data-theme] .office-workbench.arrange-mode .studio-core-room .studio-member-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; padding: 0 !important; }
html[data-theme] .office-workbench.arrange-mode .studio-core-room .studio-person { display: grid !important; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; min-height: 0; padding: 8px 10px !important; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); text-align: left; transform: none !important; }
html[data-theme] .office-workbench.arrange-mode .studio-core-room .studio-person .studio-station { grid-row: 1 / 3; width: 28px; height: 28px; margin: 0; }
html[data-theme] .office-workbench.arrange-mode .studio-core-room .studio-person .studio-station > i { display: none; }
html[data-theme] .office-workbench.arrange-mode .studio-core-room .studio-person b { font-size: 13px; }
html[data-theme] .office-workbench.arrange-mode .studio-core-room .studio-person small { font-size: 11.5px; }
html[data-theme] .office-workbench.arrange-mode .studio-core-room .studio-person.drop-ready { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 20%, transparent); }
html[data-theme] .office-arrange-note { padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 10%, var(--panel)); color: var(--acc2, var(--acc)); font-size: 12px; }/* 这事谁在跟: the office search's work list (mailpanel.py officeWhoFollowsHtml). */
html[data-theme] .office-who-follows { display: grid; gap: 6px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--acc) 30%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--acc) 5%, var(--panel)); }
html[data-theme] .office-who-follows header { display: flex; align-items: baseline; gap: 10px; }
html[data-theme] .office-who-follows header small, html[data-theme] .office-who-follows .who-more { color: var(--dim); font-size: 12px; }
html[data-theme] .office-who-follows.empty { display: flex; gap: 10px; align-items: baseline; color: var(--dim); font-size: 13px; }
html[data-theme] .who-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-left: 3px solid var(--acc); border-radius: 8px; background: var(--panel); cursor: grab; }
html[data-theme] .who-row.late { border-left-color: #e5484d; }
html[data-theme] .who-title { overflow: hidden; padding: 0; border: 0; background: none; box-shadow: none; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--txt); }
html[data-theme] .who-owner { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--txt); white-space: nowrap; }
html[data-theme] .who-owner .chat-face { width: 20px; height: 20px; }
html[data-theme] .who-due { font-size: 12px; color: var(--dim); }
html[data-theme] .who-row.late .who-due { color: #c4363b; font-weight: 600; }
html[data-theme] .who-hand { min-height: 0; padding: 3px 9px; font-size: 12px; }/* 任务跟进 / 邮件 panel, slimmed (Dylan 2026-10-29 「这个界面做的太臃肿了」): one title line, small switcher and filters,
   two-line cards with icon buttons, the footer on one row. */
html[data-theme] #office-quick-panel > header { padding-bottom: 4px; }
html[data-theme] #office-quick-panel #office-panel-kicker, html[data-theme] #office-quick-panel .office-panel-tip { display: none !important; }
html[data-theme] #office-quick-panel #office-panel-title { margin: 0; font-size: 15px; }
html[data-theme] #office-quick-panel .office-panel-switcher { gap: 2px; padding: 3px; }
html[data-theme] #office-quick-panel .office-panel-switcher button { display: inline-flex !important; flex-direction: row !important; align-items: center; justify-content: center; gap: 5px; min-height: 30px !important; padding: 4px 6px !important; font-size: 12.5px; }
html[data-theme] #office-quick-panel .office-panel-switcher button i { font-size: 13px; }
html[data-theme] #office-quick-panel .studio-queue-tools { gap: 6px; }
html[data-theme] #office-quick-panel .studio-queue-tools input { min-height: 32px; padding: 5px 10px; font-size: 13px; }
html[data-theme] #worldview #office-quick-panel .studio-queue-filters button { padding: 5px 6px; font-size: 12px; }
html[data-theme] #office-quick-panel .studio-queue-count { margin: 2px 0 4px; font-size: 12px; }
html[data-theme] #office-quick-panel .office-drag-card.task { position: relative; gap: 3px; margin-bottom: 6px; padding: 8px 10px 8px 12px; border-radius: 10px; box-shadow: none; }
html[data-theme] #office-quick-panel .office-drag-card.task .office-drag-card-head { position: absolute; top: 7px; right: 8px; gap: 4px; }
html[data-theme] #office-quick-panel .office-drag-card.task .office-drag-kind { padding: 0 6px; font-size: 11px; line-height: 18px; }
html[data-theme] #office-quick-panel .office-drag-card.task .office-drag-grip { display: none; }
html[data-theme] #office-quick-panel .office-drag-card.task .studio-card-title { padding-right: 70px; font-size: 13.5px; line-height: 1.3; }
html[data-theme] #office-quick-panel .office-drag-card.task .office-task-meta { font-size: 12px; }
html[data-theme] #office-quick-panel .office-drag-card.task .studio-next-action { padding: 4px 8px; font-size: 12px; }
html[data-theme] #office-quick-panel .office-drag-card .studio-card-actions { gap: 4px; margin-top: 0; padding-top: 4px; border-top: 0; }
html[data-theme] #office-quick-panel .office-drag-card .studio-card-actions .office-icon-btn, html[data-theme] #office-quick-panel .office-drag-card .studio-card-actions .office-task-chat { width: 28px; min-height: 26px; padding: 0 !important; font-size: 13px; }
html[data-theme] #office-quick-panel .office-drag-card .studio-card-actions .office-task-due { min-height: 26px; padding: 0 2px 0 6px; border-color: transparent; }
html[data-theme] #office-quick-panel .office-drag-card .studio-card-actions .office-task-due input { width: 112px; font-size: 11.5px; color: var(--dim); }
html[data-theme] #office-quick-panel .office-drag-card .studio-card-actions .office-task-due:hover { border-color: var(--line); }
html[data-theme] #office-quick-panel #office-panel-footer { display: flex !important; flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
html[data-theme] #office-quick-panel #office-panel-footer button { flex: 1 1 auto; width: auto !important; min-height: 30px; padding: 4px 10px; font-size: 12.5px; }html[data-theme] #office-quick-panel .office-drag-card .studio-card-actions { justify-content: flex-start !important; }
html[data-theme] #office-quick-panel .office-drag-card .studio-card-actions > button { flex: none !important; min-height: 26px; padding: 2px 9px; font-size: 12px; }
html[data-theme] #office-quick-panel .office-drag-card .studio-card-actions .office-task-chat { margin-left: auto; }
/* 一点就分配: the colleagues beside ⇄ (mailpanel.py officeQuickAssign). */
.quick-assign { position: fixed; z-index: 260; display: grid; gap: 6px; width: 280px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 16px 38px rgba(15, 30, 60, .22); }
.quick-assign[hidden] { display: none; }
html[data-theme] .quick-assign input { width: 100%; min-height: 32px; padding: 5px 10px; font-size: 13px; }
html[data-theme] .quick-assign-list { display: grid; max-height: 280px; overflow: auto; }
html[data-theme] .quick-assign-list button { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; text-align: left; }
html[data-theme] .quick-assign-list button:first-child, html[data-theme] .quick-assign-list button:hover { background: color-mix(in srgb, var(--acc) 10%, var(--panel)); }
html[data-theme] .quick-assign-list b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
html[data-theme] .quick-assign-list small { color: var(--dim); font-size: 11.5px; }
html[data-theme] .quick-assign-more { min-height: 28px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; color: var(--acc2, var(--acc)); font-size: 12.5px; }
html[data-theme] .quick-assign-empty { margin: 6px 8px; color: var(--dim); font-size: 13px; }/* Buttons say what they do (Dylan 2026-10-30 「让介面更清晰，不要产生误解」). */
html[data-theme] #office-quick-panel .office-drag-card .studio-card-actions .office-icon-btn { width: auto; padding: 0 9px !important; font-size: 12px; }
html[data-theme] #office-quick-panel .office-drag-card .studio-card-actions .office-task-due { gap: 4px; font-size: 12px; color: var(--dim); }
/* 一行建任务 and the hover actions beside a colleague (mailpanel.py officeQuickAdd / officeRowActionsShow). */
html[data-theme] .office-quick-add { margin: 0 0 8px; }
html[data-theme] .office-quick-add input { width: 100%; min-height: 36px; padding: 6px 12px; border: 1px dashed color-mix(in srgb, var(--acc) 45%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--acc) 4%, var(--panel)); font-size: 13px; }
html[data-theme] .office-quick-add input:focus { border-style: solid; border-color: var(--acc); background: var(--panel); }
.office-row-actions { position: fixed; z-index: 240; display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); box-shadow: 0 8px 20px rgba(15, 30, 60, .16); }
.office-row-actions[hidden] { display: none; }
html[data-theme] .office-row-actions button { min-height: 26px; padding: 2px 10px; border: 0; border-radius: 7px; background: transparent; box-shadow: none; font-size: 12px; color: var(--txt); }
html[data-theme] .office-row-actions button:first-child { background: var(--acc); color: #fff; }
/* 办公室 · 审批 (Dylan 2026-11-02): one row per approval — what, from whom and where — with 同意 / 拒绝 in place. */
.office-approval { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin-bottom: 8px; }
.office-approval.busy { opacity: .55; pointer-events: none; }
.office-approval-area { grid-row: span 2; align-self: start; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 12%, transparent); color: var(--acc2, var(--acc)); font-size: 12px; font-weight: 600; white-space: nowrap; }
.office-approval-main { min-width: 0; }
.office-approval-main b { display: block; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.office-approval-main small { display: block; margin-top: 2px; color: var(--dim); font-size: 12px; }
.office-approval-main em { font-style: normal; color: #c2410c; }
.office-approval-actions { display: flex; gap: 6px; align-items: center; }
html[data-theme] .office-approval-actions button { padding: 3px 12px; font-size: 12px; border-radius: 8px; }
html[data-theme] .office-approval-actions button.link { margin-left: auto; border: 0; background: transparent; box-shadow: none; color: var(--acc2, var(--acc)); padding: 3px 4px; }
.office-approval-tools { flex-direction: column; align-items: stretch; gap: 6px; }
.office-approval-tools .studio-queue-filters b { margin-left: 4px; font-size: 11px; opacity: .75; }
/* 审批流 drawer (Dylan 2026-11-02): the approval's steps as a timeline, later steps folded, the actions at the foot. */
.office-approval-boxes { margin-bottom: 8px; }
.office-approval-main[data-oa-open] { cursor: pointer; }
.oa-amount { font-weight: 700; color: var(--txt); white-space: nowrap; }
.oa-amount.hidden { font-weight: 400; color: var(--dim); font-size: 12px; }
.oa-status { font-size: 12px; color: var(--dim); }
.oa-status.approved { color: #15803d; } .oa-status.rejected, .oa-status.expired { color: #b91c1c; } .oa-status.returned { color: #c2410c; }
html[data-theme] .oa-back { border: 0; background: transparent; box-shadow: none; color: var(--acc2, var(--acc)); padding: 2px 0; margin-bottom: 6px; }
.oa-drawer.busy { opacity: .55; pointer-events: none; }
.oa-drawer header { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.oa-drawer header .office-approval-area { justify-self: start; }
.oa-drawer header h3 { margin: 0; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.oa-drawer header small { color: var(--dim); font-size: 12px; }
html[data-theme] .oa-drawer header .link { justify-self: start; border: 0; background: transparent; box-shadow: none; padding: 0; color: var(--acc2, var(--acc)); font-size: 12px; }
.oa-steps { list-style: none; margin: 12px 0; padding: 0; }
.oa-step { position: relative; display: grid; grid-template-columns: 16px 1fr; gap: 10px; padding-bottom: 14px; }
.oa-step::before { content: ''; position: absolute; left: 7px; top: 16px; bottom: 0; border-left: 2px solid var(--line); }
.oa-step:last-child::before { display: none; }
.oa-step > i { width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--line); background: var(--panel); box-sizing: border-box; z-index: 1; }
.oa-step.done > i { border-color: #16a34a; background: #16a34a; }
.oa-step.active > i { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 25%, var(--panel)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 15%, transparent); }
.oa-step.returned > i { border-color: #ea580c; background: #ea580c; }
.oa-step b { font-size: 13px; }
.oa-step small { margin-left: 6px; color: var(--dim); font-size: 12px; }
.oa-people { margin-top: 2px; font-size: 12px; color: var(--txt); }
.oa-people .pending { font-weight: 600; color: var(--acc2, var(--acc)); }
.oa-auto { margin-top: 2px; font-size: 11.5px; color: var(--dim); }
.oa-step ul, .oa-comments ul { list-style: none; margin: 4px 0 0; padding: 0; }
.oa-step li, .oa-comments li { font-size: 12px; margin-top: 4px; }
.oa-step li time, .oa-comments li time { margin-left: 6px; color: var(--dim); font-size: 11.5px; }
.oa-step li p, .oa-comments li p { margin: 2px 0 0; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--txt) 5%, transparent); white-space: pre-wrap; overflow-wrap: anywhere; }
.oa-later details summary { cursor: pointer; color: var(--dim); font-size: 12px; }
.oa-later ol { list-style: none; padding: 8px 0 0; margin: 0; }
.oa-comments { border-top: 1px solid var(--line); padding-top: 8px; }
.oa-comments h4 { margin: 0 0 4px; font-size: 13px; }
.oa-actions { position: sticky; bottom: 0; display: grid; gap: 6px; padding: 10px 0 4px; border-top: 1px solid var(--line); background: var(--panel); }
.oa-actions textarea { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--txt); }
.oa-field { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); }
.oa-field select { flex: 1; min-width: 0; font-size: 12.5px; }
.oa-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-theme] .oa-buttons button { padding: 4px 12px; font-size: 12.5px; border-radius: 8px; }
html[data-theme] .oa-buttons button.danger { color: #b91c1c; }
html[data-theme] .oa-buttons button.link { border: 0; background: transparent; box-shadow: none; color: var(--acc2, var(--acc)); }
.oa-hint { color: var(--dim); font-size: 11.5px; }
/* 后台 → 审批流程 (approval_flows_admin.js): types on the left, the steps top to bottom on the right, the fixed last step. */
.af-empty { padding: 32px; text-align: center; color: var(--dim); }
.af-layout { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .af-layout { grid-template-columns: 1fr; } }
.af-types { display: grid; gap: 6px; }
html[data-theme] .af-types button { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: none; color: var(--txt); }
html[data-theme] .af-types button.on { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, var(--panel)); }
.af-types small { color: var(--dim); font-size: 11.5px; }
.af-main header h2 { margin: 0; font-size: 17px; }
.af-main header p { margin: 4px 0 12px; color: var(--dim); font-size: 12.5px; }
.af-nodes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.af-node { position: relative; padding: 10px 12px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.af-node:not(:last-child)::after { content: '↓'; position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); color: var(--dim); font-size: 12px; }
.af-node.fixed { background: color-mix(in srgb, var(--txt) 4%, var(--panel)); border-style: dashed; }
.af-node-head { display: flex; align-items: center; gap: 8px; }
.af-kind { flex: none; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 12%, transparent); color: var(--acc2, var(--acc)); font-size: 12px; font-weight: 600; }
.af-node.kind-cc .af-kind { background: color-mix(in srgb, var(--txt) 8%, transparent); color: var(--dim); }
html[data-theme] .af-label { flex: 1; min-width: 0; font: inherit; font-weight: 600; border: 0; border-bottom: 1px dashed transparent; border-radius: 0; box-shadow: none; background: transparent; color: var(--txt); padding: 2px 0; }
html[data-theme] .af-label:hover, html[data-theme] .af-label:focus { outline: none; border-bottom-color: var(--acc); }
.af-tools { display: flex; gap: 2px; }
html[data-theme] .af-tools button { width: 26px; height: 26px; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--dim); }
.af-summary { margin: 4px 0 0; font-size: 12.5px; color: var(--dim); }
.af-edit { margin-top: 6px; font-size: 12.5px; }
.af-edit summary { cursor: pointer; color: var(--acc2, var(--acc)); }
.af-edit label { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.af-edit label select, .af-edit label input[type="number"] { font-size: 12.5px; }
.af-picks { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.af-pick { display: inline-flex; align-items: center; gap: 4px; }
.af-pick small { color: var(--dim); }
.af-inline input[type="number"] { width: 64px; }
.af-add, .af-try, .af-main footer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.af-threshold { margin: 12px 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; }
.af-threshold small { display: block; color: var(--dim); margin-top: 4px; }
.af-threshold input[data-af-threshold="currency"] { width: 48px; }
.af-preview { margin: 4px 0 8px; padding-left: 20px; font-size: 12.5px; }
.af-error { color: #b91c1c; font-size: 12.5px; }
/* 去处理: a task raised by the rental / repair / trade feed opens its work page from the list. */
html[data-theme] .simple-work-go { padding: 2px 10px; border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--acc) 8%, transparent); box-shadow: none; color: var(--acc2, var(--acc)); font-size: 12px; white-space: nowrap; cursor: pointer; }
html[data-theme] .simple-work-go:hover { background: color-mix(in srgb, var(--acc) 16%, transparent); }html[data-theme] .task-open-work { display: block; margin: 8px 0 4px; padding: 8px 16px; border-radius: 10px; font-size: 14px; }
html[data-theme] .task-open-work[hidden] { display: none; }

/* 右下角不打架 (Dylan 2026-11-02 「点击人，出现的聊天窗口在右下角和别的功能撞一起了」): while a chat window or a colleague's card
   is open, the AI colleague's reminder bubble steps aside; a colleague's card sits above the chat bar, never under it. */
body:has(#team-chat-drawer:not([hidden])) .ai-nudge, body:has(.chat-pop) .ai-nudge, body:has(#team-map-focus:not([hidden])) .ai-nudge { display: none !important; }
body:has(.chat-pop) #team-map-focus { display: none !important; }
.office-mode .team-map-focus { bottom: 60px !important; z-index: 60; }
/* 拖任务给人: while a task is dragged every colleague shows as a place to drop it, and the one under the pointer lights up. */
.studio-dragging [data-office-member] { outline: 2px dashed color-mix(in srgb, var(--acc) 55%, transparent); outline-offset: 2px; }
.studio-dragging [data-office-member].drop-ready { outline-style: solid; background: color-mix(in srgb, var(--acc) 14%, var(--panel)) !important; }
.studio-dragging [data-office-member] * { pointer-events: none; }
.office-drag-hint { position: fixed; left: 50%; top: 72px; transform: translateX(-50%); z-index: 400; padding: 8px 16px; border-radius: 999px; background: var(--acc); color: #fff; font-size: 13px; box-shadow: 0 6px 18px rgba(15, 23, 42, .2); pointer-events: none; }
/* 走过去催: the sender's figure walks to the colleague's desk, says it, and walks back (cosmetic). */
.office-walker { position: fixed; left: 0; top: 0; z-index: 300; display: flex; align-items: flex-start; gap: 6px; pointer-events: none; transition-property: transform; transition-timing-function: linear; }
.office-walker-body { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--panel); box-shadow: 0 4px 12px rgba(15, 23, 42, .25); overflow: hidden; }
.office-walker-body > * { max-width: 40px; max-height: 40px; }
.office-walker-body b { font-size: 16px; color: var(--acc2, var(--acc)); }
.office-walker.walking .office-walker-body { animation: office-walk-bob .32s ease-in-out infinite alternate; }
@keyframes office-walk-bob { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-4px) rotate(4deg); } }
.office-walker-bubble { opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; max-width: 220px; padding: 6px 10px; border-radius: 12px 12px 12px 2px; background: #c2410c; color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 12px rgba(194, 65, 12, .3); }
.office-walker.talking .office-walker-bubble { opacity: 1; transform: none; }
.office-walker.leaving { opacity: .0; transition-property: transform, opacity; }
.office-urged { animation: office-urged .5s ease-in-out 4; }
@keyframes office-urged { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .office-walker.walking .office-walker-body, .office-urged { animation: none; } }
/* 看哪几间办公室: my office by default, a chip per office (with who is online), 我管的 / 全部 for several at once. */
.office-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; }
html[data-theme] .office-scope button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); box-shadow: none; color: var(--txt); font-size: 12.5px; }
html[data-theme] .office-scope button.on { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, var(--panel)); color: var(--acc2, var(--acc)); font-weight: 600; }
.office-scope button small { color: var(--dim); font-size: 11px; font-weight: 400; }
.office-scope-sep { width: 1px; height: 18px; background: var(--line); margin: 0 2px; }
/* With the work column open, the Core room cards above the floor (their people are on the floor below) step aside. */
html[data-theme] .office-workbench.arrange-mode .studio-core-room { display: none !important; }
/* 今天这间办公室: overdue, due today, nobody owns — one strip above the floor. */
.office-today { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid #c2410c; border-radius: 10px; background: var(--panel); }
.office-today.calm { border-left-color: #16a34a; }
.office-today header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.office-today header b { font-size: 14px; }
.office-today header span { color: var(--txt); }
.office-today header i { font-style: normal; } .office-today header i.late { color: #b91c1c; font-weight: 600; } .office-today header i.pool { color: #7c3aed; }
.office-today header small { margin-left: auto; color: var(--dim); font-size: 11.5px; }
html[data-theme] .office-today-fold { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--dim); transition: transform .15s; }
.office-today.folded .office-today-fold { transform: rotate(-90deg); }
.office-today-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px; margin-top: 8px; }
.office-today-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--txt) 2%, var(--panel)); cursor: grab; }
.office-today-item em { grid-row: span 2; font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, #2563eb 12%, transparent); color: #1d4ed8; white-space: nowrap; }
.office-today-item.late em { background: color-mix(in srgb, #dc2626 12%, transparent); color: #b91c1c; }
.office-today-item.pool em { background: color-mix(in srgb, #7c3aed 12%, transparent); color: #6d28d9; }
html[data-theme] .office-today-title { min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--txt); font-size: 13px; font-weight: 600; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.office-today-item small { grid-column: 2; color: var(--dim); font-size: 11.5px; }
html[data-theme] .office-today-give { grid-row: 1 / 3; grid-column: 3; padding: 3px 10px; font-size: 12px; border-radius: 8px; }
html[data-theme] .office-today-more { margin-top: 6px; padding: 2px 4px; border: 0; background: transparent; box-shadow: none; color: var(--acc2, var(--acc)); font-size: 12px; }
/* 派任务时按忙闲: a small load bar per colleague, the least busy marked. */
.qa-load { display: inline-block; width: 44px; height: 5px; margin-left: 6px; border-radius: 3px; background: color-mix(in srgb, var(--txt) 10%, transparent); overflow: hidden; vertical-align: middle; }
.qa-load > i { display: block; height: 100%; background: var(--acc); border-radius: 3px; }
.qa-best { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; font-style: normal; font-size: 11px; }.quick-assign small .qa-load, .quick-assign small .qa-best { flex: none; }
.quick-assign small { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

/* 布局更紧凑 (Dylan 2026-11-02 「界面的布局需要提升 目前这样页面范围内的信息太少」): less air around the office so more of it fits on
   one screen — a one-line heading, the office chips replace the 全部团队 picker, slimmer bars, a one-row panel switcher,
   compact task cards. */
html[data-theme] .virtual-office .studio-scene-heading { min-height: 0 !important; padding: 2px 0 6px !important; align-items: center !important; }
html[data-theme] .virtual-office .studio-scene-heading h2 { font-size: 18px !important; margin: 0 !important; }
html[data-theme] .virtual-office .studio-scene-heading p { margin: 2px 0 0 !important; font-size: 12px !important; }
html[data-theme] .virtual-office .studio-heading-tools { flex-direction: row !important; flex-wrap: wrap; align-items: center !important; justify-content: flex-end; gap: 6px !important; }
html[data-theme] .virtual-office .studio-heading-tools > * { min-height: 30px !important; height: auto !important; padding-top: 4px !important; padding-bottom: 4px !important; }
body:has(.office-scope) #studio-team-select { display: none !important; }
html[data-theme] .virtual-office .studio-nav { margin: 0 0 8px !important; gap: 6px !important; }
html[data-theme] .virtual-office .studio-nav input, html[data-theme] .virtual-office .studio-nav select { height: 32px !important; min-height: 32px !important; padding-top: 4px !important; padding-bottom: 4px !important; }
html[data-theme] .virtual-office .office-quickbar { margin-bottom: 6px !important; }
html[data-theme] .virtual-office .office-chip { min-height: 26px !important; padding: 2px 10px !important; }
.virtual-office .office-scope { margin: 0 0 8px; }
html[data-theme] .virtual-office .office-scope button { padding: 2px 10px; }
.virtual-office .office-today { padding: 8px 10px; margin-bottom: 8px; }
.virtual-office .office-today-list { margin-top: 6px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.virtual-office .office-today-item { padding: 4px 8px; }
/* The work column: one row of tabs, compact cards. */
html[data-theme] .office-panel-switcher { flex-wrap: nowrap !important; overflow-x: auto; gap: 2px !important; padding: 3px !important; scrollbar-width: none; }
html[data-theme] .office-panel-switcher button { flex: 1 0 auto; min-width: 0; padding: 4px 8px !important; font-size: 12.5px !important; white-space: nowrap; }
html[data-theme] .office-quick-panel > header { padding-top: 10px !important; padding-bottom: 6px !important; }
html[data-theme] .office-drag-card.task { padding: 8px 10px !important; margin-bottom: 6px !important; }
html[data-theme] .office-drag-card.task .office-task-meta { margin-top: 2px !important; }
html[data-theme] .office-drag-card.task .office-task-actions { margin-top: 6px !important; gap: 4px !important; }
html[data-theme] .office-drag-card.task .office-task-actions button, html[data-theme] .office-drag-card.task .office-task-due { min-height: 26px !important; padding: 2px 8px !important; font-size: 12px !important; }
html[data-theme] .office-drag-card.task .office-task-next { margin-top: 4px !important; padding: 4px 8px !important; font-size: 12px !important; }html[data-theme] .office-panel-switcher { display: flex !important; grid-template-columns: none !important; }
html[data-theme] .office-panel-switcher button i { margin-right: 4px; }
html[data-theme] .virtual-office .org-floor { padding: 10px 10px 8px !important; }
html[data-theme] .virtual-office .org-zones { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; gap: 10px !important; }
html[data-theme] .virtual-office .org-zone { margin: 0 !important; }
html[data-theme] .virtual-office .studio-heading-tools { flex-wrap: nowrap !important; }html[data-theme] .virtual-office .studio-heading-tools > * { white-space: nowrap !important; }
html[data-theme] .virtual-office .org-zones { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; }