/* ══ 办公室场景 ══════════════════════════════════════ */

.stage {
  /* 主次分明：右侧员工列表宽度优先保证（卡片要能正常显示），
     左侧办公室吃掉剩余空间、自适应。 */
  display: grid; grid-template-columns: minmax(260px, 1fr) 520px; gap: 10px;
  padding: 8px clamp(8px, 1.5vw, 16px) 10px;
  min-height: 0; overflow: hidden;
}
@media (max-width: 1360px) { .stage { grid-template-columns: minmax(220px,1fr) 480px; } }
@media (max-width: 980px)  { .stage { grid-template-columns: 1fr; grid-template-rows: minmax(240px,38vh) 1fr; } }

/* ── 左：办公室 ─────────────────────────────── */
.office {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  display: grid; grid-template-rows: auto 1fr; min-height: 0;
}
.office-view {
  position: relative; overflow: hidden; min-height: 0;
  /* CAD 图纸空间的观感：浅灰底、白线。地板铺满整个视口 ——
     缩放时看到的是"走进更大的办公室"，而不是一个画板在屏幕中间缩小。
     白线压在浅灰上是"减色"的细格，比深色描边干净：
     细格 32px 半透明白，粗格 160px 纯白，跟 AutoCAD 一个路数。 */
  background:
    repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 160px),
    repeating-linear-gradient(0deg,  #fff 0 1px, transparent 1px 160px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.6) 0 1px, transparent 1px 32px),
    #d8dce4;
  cursor: grab; touch-action: none;
}
.office-view.grabbing { cursor: grabbing; }
.office-pan { transform-origin: 0 0; will-change: transform; position: absolute; top: 0; left: 0; }
.office-hint {
  position: absolute; left: 10px; bottom: 8px; z-index: 2; pointer-events: none;
  font-size: 10.5px; color: var(--muted);
  background: rgba(255,255,255,.82); padding: 2px 8px; border-radius: 99px;
  border: 1px solid var(--border); backdrop-filter: blur(4px);
}

.zoomctl { display: inline-flex; align-items: center; gap: 3px; }
.zoomctl button {
  width: 24px; height: 24px; border-radius: 6px; font-size: 14px; font-weight: 700;
  color: var(--text-2); background: var(--bg-2); border: 1px solid var(--border);
}
.zoomctl button.fit { width: auto; padding: 0 8px; font-size: 11.5px; font-weight: 600; }
.zoomctl button:hover { background: #fff; color: var(--teal); border-color: rgba(13,148,136,.4); }
.zlv { font-size: 10.5px; color: var(--muted); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.office-bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; background: rgba(255,255,255,.92);
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);
}
.office-bar::-webkit-scrollbar { display: none; }
.office-bar h3 {
  font-size: 13px; font-weight: 700; white-space: nowrap; flex: none;
  display: inline-flex; align-items: center; gap: 5px;   /* 图标与文字同一行 */
}
.office-stat { white-space: nowrap; flex: none; }
.office-bar .grow { flex: 1; }
.office-stat {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 650;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text-2);
}
.office-stat b { font-variant-numeric: tabular-nums; }
.office-stat.on  { color: var(--emerald); border-color: rgba(5,150,105,.3);  background: rgba(5,150,105,.08); }
.office-stat.run { color: var(--teal);    border-color: rgba(13,148,136,.3); background: rgba(13,148,136,.08); }

/* 只约束根 svg 本身：用 !important 会连内部 rect 一起改，
   实测把 24 高的屏幕撑成了 168 —— 这里必须精确到根元素 */
svg.office-svg { display: block; max-width: none; max-height: none; overflow: visible; }
svg.office-svg > * { max-width: none; }
.office-svg text { font-family: var(--font); }
.o-emptyTip { font-size: 15px; fill: #e6ebf3; }

/* ── 深色画布上的配色 ──
   背景是黑的，原来那套深灰文字和浅色桌面就全糊了，整体翻过来：
   文字走浅灰白，桌面走深板 + 亮描边，正好是 CAD 里"实体线框"的感觉。 */
.o-shadow { fill: rgba(30,45,80,.13); }
.o-deskTop { fill: #f4f6fa; stroke: #b9c3d6; }
.o-boss-desk { fill: #dfe6f5; stroke: #c3cee3; }
/* 12px 是双色描边的下限：10.5px 的汉字笔画间隙只有 1px 上下，
   内圈再细也会把它填死，字就糊成一坨、看着像加粗。
   字重保持常规，不加粗。 */
.o-nameTag { font-size: 12px; fill: #fff; }
/* 名牌三层描边：黑的兜底、白的提亮、实心字在最上。三层同坐标，不偏移。
   paint-order 让描边画在字底下，不然粗描边会把笔画吃细。 */
.o-label text { paint-order: stroke fill; }
/* 描边：最外一圈白、里面一圈黑，字保持自己的颜色。三层同坐标不偏移。
   宽度按 10.5px 的汉字调过 —— 再粗一点笔画间隙就会被糊死。 */
/* 外白内黑，字取白 —— 字必须跟紧挨着的那圈（黑）反色，否则糊成一坨看着像加粗。
   宽度卡在 10.5px 汉字的极限：内圈再粗一点，笔画间隙就被填死了。 */
.o-label .ol-w { stroke: #fff;    stroke-width: 2.5px; stroke-linejoin: round; fill: #fff; }
.o-label .ol-k { stroke: #0e131c; stroke-width: 1.25px; stroke-linejoin: round; fill: #0e131c; }
.o-label text { pointer-events: none; paint-order: stroke fill; }
/* 深底上的字（职务牌、打卡板抬头、卫生间牌子）：内圈换成浅色，
   不然黑圈压在深底上等于没描 */
.o-boss-tag { font-size: 11.5px; fill: var(--text); font-weight: 700; }
.o-bossStat { font-size: 10px; fill: var(--muted); }
.o-mframe { fill: #26303f; stroke: #94a3b8; stroke-width: 1; }
.o-kbBase { fill: #cbd5e1; stroke: #9aa7bd; stroke-width: .6; }
.o-key    { fill: #64748b; }
.desk.offline .o-kb { opacity: .45; }
.o-screen { fill: #0f172a; }
.o-code rect { fill: #334155; }
/* 屏幕里的真快照。玻璃反光那一层压在上面，让缩略图不那么"贴纸"，
   也把网页的白底压暗一点，跟深色机身不至于割裂。 */
.o-shot { image-rendering: auto; }
.o-glass { fill: url(#o-glassgrad); pointer-events: none; opacity: .5; }
.desk.offline .o-shot { opacity: .45; filter: grayscale(.5); }
.desk.working .o-glass { opacity: .3; }
.o-emptyTip { font-size: 15px; fill: #e6ebf3; }

/* ── 人会走路 ──
   槽钉住工位原点并统一放大；人在槽里靠 --dx/--dy 位移，加过渡就是走过去。
   桌子留在槽里不动 —— 人走了，工位还在。 */
.desk {
  cursor: pointer;
  transform: translate(var(--dx, 0px), var(--dy, 0px));
  transition: transform 1.25s cubic-bezier(.45, .05, .25, 1);
}
.slot { --sw: 1; }

/* ── 身体各部位 ──
   画成一个个部位就是为了能分开动：走路迈腿、打字甩前臂、空闲晃身子。 */
/* 胳膊跟衣服同色，不压一档就跟躯干糊成一块，看不出是两条手臂 */
.b-arm rect { filter: brightness(.84); }
.b-arm  { transform-origin: 48px 44px; }
.b-arm.l { transform-origin: 38px 44px; }
.b-arm.r { transform-origin: 58px 44px; }
.b-leg  { transform-origin: 48px 57px; }
/* 点头绕脖子转；缩放在外层 wrap 上，这里只管动作 */
.b-head { transform-origin: 48px 27px; }
.o-body { transform-origin: 48px 58px; }

/* 走路：迈腿 + 反向甩手 + 身子轻微起伏 */
.desk.away .b-leg.l { animation: step-a .46s ease-in-out infinite; }
.desk.away .b-leg.r { animation: step-b .46s ease-in-out infinite; }
.desk.away .b-arm.l { animation: swing-b .46s ease-in-out infinite; }
.desk.away .b-arm.r { animation: swing-a .46s ease-in-out infinite; }
.desk.away .o-body  { animation: walk-bob .23s ease-in-out infinite; }
@keyframes step-a { 0%,100% { transform: rotate(15deg); } 50% { transform: rotate(-15deg); } }
@keyframes step-b { 0%,100% { transform: rotate(-15deg); } 50% { transform: rotate(15deg); } }
@keyframes swing-a { 0%,100% { transform: rotate(11deg); } 50% { transform: rotate(-11deg); } }
@keyframes swing-b { 0%,100% { transform: rotate(-11deg); } 50% { transform: rotate(11deg); } }
@keyframes walk-bob { 50% { transform: translateY(-1.6px); } }
/* 往左走就整个人翻过来面朝左 */
.desk.flip .o-body { transform: scaleX(-1); transform-origin: 48px 44px; }

/* 打卡那一下：站定、点头 */
.desk.signing .b-head { animation: sign-nod .5s ease-in-out 2; }
@keyframes sign-nod { 50% { transform: translateY(2.4px) rotate(7deg); } }

/* 打卡途中：收起副标签和气泡，三个人站一排才不打架 */
.desk.punching { z-index: 5; }
.desk.punching .o-bub { opacity: 0; }
.slot:has(.desk.punching) .o-nickTag, .slot:has(.desk.punching) .o-teamTag { opacity: 0; }

/* 排队的人挨得近，缩一点 */
.desk.inqueue .o-body { transform: scale(.66); transform-origin: 48px 74px; }
.desk.inqueue .o-bub { opacity: 0; }

/* ── 干活：身子前倾、前臂狂敲、键帽轮流闪 ── */
.desk.working .o-body  { animation: type-lean .34s ease-in-out infinite; }
.desk.working .b-arm.l { animation: type-l .17s ease-in-out infinite; }
.desk.working .b-arm.r { animation: type-r .17s ease-in-out infinite; }
@keyframes type-lean { 50% { transform: translateY(1.1px) rotate(.5deg); } }
@keyframes type-l { 0%,100% { transform: rotate(-16deg); } 50% { transform: rotate(-26deg); } }
@keyframes type-r { 0%,100% { transform: rotate(26deg); } 50% { transform: rotate(16deg); } }
.desk.working .o-kb .o-key { animation: key-hit .26s steps(2) infinite; }
.desk.working .o-kb .o-key:nth-child(3) { animation-delay: .07s; }
.desk.working .o-kb .o-key:nth-child(4) { animation-delay: .13s; }
.desk.working .o-kb .o-key:nth-child(5) { animation-delay: .2s; }
@keyframes key-hit { 0%, 100% { fill: #64748b; } 50% { fill: #5eead4; } }

/* ── 空闲：晃着走神，偶尔歪头 ── */
.desk.idle:not(.away) .o-body  { animation: idle-sway 4.6s var(--ease-io) infinite; }
.desk.idle:not(.away) .b-head  { animation: idle-tilt 6.2s var(--ease-io) infinite; }
@keyframes idle-sway { 0%,100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
@keyframes idle-tilt { 0%,72%,100% { transform: rotate(0); } 84% { transform: rotate(-6deg); } }

/* ── 掉线：整个人灰下去、垂着手 ── */
.desk.offline .o-body { opacity: .5; filter: grayscale(.6); }
.desk.offline .b-arm.l { transform: rotate(4deg); }
.desk.offline .b-arm.r { transform: rotate(-4deg); }

.desk:focus-visible { outline: none; }
.desk:focus-visible .b-head circle { stroke: var(--teal); stroke-width: 2.5; }

/* 干活的数据点 / 掉线的 Zzz / 出错的警示 —— 挂在人身上的小挂件 */
.o-pips circle { fill: var(--teal); animation: rise 1.8s var(--ease-io) infinite; }
.o-pips circle:nth-child(2) { animation-delay: .3s; }
.o-pips circle:nth-child(3) { animation-delay: .6s; }
@keyframes rise {
  0%   { opacity: 0; transform: translate(0,6px) scale(.6); }
  40%  { opacity: .9; }
  100% { opacity: 0; transform: translate(6px,-12px) scale(1.1); }
}
.o-zzz { font-size: 13px; fill: #e2e8f0; animation: zfloat 3s var(--ease-io) infinite; }
.o-zzz.big { font-size: 17px; animation-delay: .5s; }
@keyframes zfloat {
  0%   { opacity: 0; transform: translate(0,4px); }
  40%  { opacity: .85; }
  100% { opacity: 0; transform: translate(5px,-11px); }
}
.o-alert circle { fill: var(--rose); }
.o-alert path { stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.desk.failed .o-alert { animation: alert-pop 1.6s var(--ease-io) infinite; transform-origin: 73px 8px; }
@keyframes alert-pop { 50% { transform: scale(1.16); } }

/* ── 打卡板 ── */
.o-board { cursor: pointer; }
.o-board:hover .o-boardBody { stroke: var(--teal); }
.o-board:hover .o-boardTip  { fill: #9df3dd; opacity: 1; }
.o-board:focus-visible { outline: none; }
.o-board:focus-visible .o-boardBody { stroke: var(--teal); stroke-width: 2; }
.o-boardBody { fill: #fdfdfe; stroke: #b9c3d6; }
.o-boardHead { fill: #0f766e; }
.o-boardT    { font-size: 11px; fill: #fff; letter-spacing: .06em; }
.o-boardRows rect { fill: #e3e8f0; }
.o-boardTip {
  font-size: 9px; fill: #e8edf5; opacity: .95; pointer-events: none;
  transition: fill .15s, opacity .15s;
}
.o-boardHit {
  font-size: 12.5px; fill: #7df0c2;
  opacity: 0; transition: opacity .25s;
}
.o-boardHit.on { opacity: 1; animation: hit-pop .45s var(--ease) both; }
.o-boardHit.bad { fill: var(--rose); }
/* 打卡没打上的，站在板前那一下抖一下 */
.desk.failed-punch .o-body { animation: punch-fail .3s ease-in-out 3; }
@keyframes punch-fail { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
@keyframes hit-pop { 0% { transform: translateY(6px) scale(.8); } 100% { transform: none; } }

/* ── 厕所 ── */
.o-wcBody { fill: #eef1f6; stroke: #b9c3d6; }
.o-wcSign { fill: #64748b; }
.o-wcT    { font-size: 10px; fill: #fff; letter-spacing: .04em; }
.o-wcDoor { fill: #cfd7e4; stroke: #a7b2c6; }
.o-wcKnob { fill: #7d8ba1; }
.o-wcN    { font-size: 10.5px; fill: #fcd66b; }
.o-fix.busy .o-wcDoor { fill: #e2e8f0; animation: door-ajar 3.4s var(--ease-io) infinite; }
@keyframes door-ajar { 50% { transform: translateX(-3px) skewY(-.6deg); } }

/* 部门分排 */
/* ── 停摆气泡：头顶说明这人为什么停着 ────────── */
.o-bub rect, .o-bub path { fill: var(--surface); stroke: var(--border-2); stroke-width: 1; }
/* 字跟最近那圈描边必须反色：内圈是黑的，字就得是白的 ——
   深色字紧挨着黑内圈会糊成一团，看着就是被加粗了 */
.o-bub text { font-size: 8.6px; fill: #fff; text-anchor: middle; }
/* 气泡里的字也描边，但气泡本身就是浅底，外圈白收细一点免得发虚 */
.o-bub .o-label .ol-w { stroke-width: 2px; }
.o-bub .o-label .ol-k { stroke-width: 1px; }
.o-badgeT { font-size: 10px; fill: #dcd9ff; }
.lead-gm .o-badgeT { fill: #ffe1b0; }
.lead-wk .o-badgeT { fill: #a9f2e6; }
.o-bub-offline rect, .o-bub-offline path { fill: #f6f8fb; stroke: #cbd5e1; }
.o-bub-failed  rect, .o-bub-failed  path { fill: #fff1f2; stroke: rgba(225,29,72,.35); }
.o-bub-paused  rect, .o-bub-paused  path { fill: #fffbeb; stroke: rgba(180,83,9,.32); }
/* 没有停摆原因时整组隐藏。骨架照样留在 DOM 里，
   有无气泡就不会改变几何，也就不会触发重建。 */
.o-bub-off { display: none; }
.o-bub-idle    rect, .o-bub-idle    path { fill: #f0fdfa; stroke: rgba(13,148,136,.3); }
/* 干活中：办公室里最该被看见的一类气泡，给它最实的底色和呼吸描边 */
.o-bub-work    rect, .o-bub-work    path { fill: #ecfeff; stroke: rgba(8,145,178,.45); }
.desk.working .o-bub-work rect { animation: bub-breathe 2.6s var(--ease-io) infinite; }
@keyframes bub-breathe { 50% { stroke: rgba(8,145,178,.9); } }
.o-bub-revoked rect, .o-bub-revoked path { fill: #fdf2f8; stroke: rgba(190,24,93,.35); }
/* 气泡描边压在别的工位上会糊，画在最上层 */
/* 气泡要能 hover 出 <title> 明细；点击照样冒泡到工位，不影响开对话 */
.desk .o-bub { cursor: help; }

.o-nickTag { font-size: 9.5px; fill: #dfe6f2; }
.desk.offline .o-nickTag { opacity: .7; }

.o-deptline { stroke: #9aa7bd; stroke-width: 1; stroke-dasharray: 3 4; }
.o-deptname { font-size: 13.5px; fill: #fff; letter-spacing: .02em; }
.o-deptnum  { font-size: 11.5px; fill: #d3dbe8; }

/* ── 右：员工列表（一行一个，可滚动）────────── */
.roster {
  container: roster / inline-size;   /* 当前任务卡按这一栏的宽度决定左右还是上下 */
  border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  display: grid; grid-template-rows: auto 1fr; min-height: 0; overflow: hidden;
}
.roster-h {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--bg-2);
}
.roster-h h3 { font-size: 13px; font-weight: 700; flex: 1; }
.roster-list {
  overflow-y: auto; overflow-x: hidden; min-height: 0;
  padding: 8px; display: flex; flex-direction: column; gap: 8px;
}
.roster-h .seg { transform: scale(.86); transform-origin: right center; }

/* 顶栏紧凑统计 */
.hud { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.hud-i {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 8px; font-size: 11.5px; color: var(--text-2);
  background: var(--bg-2); border: 1px solid var(--border); white-space: nowrap;
}
.hud-i b { font-size: 12.5px; font-weight: 750; color: var(--text); font-variant-numeric: tabular-nums; }
.hud-i i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.hud-i.run b { color: var(--teal); }
.hud-i.acc  { border-color: rgba(13,148,136,.3); background: rgba(13,148,136,.07); }
.hud-i.acc b { color: var(--teal); }
@media (max-width: 1280px) { .hud-i { padding: 3px 6px; font-size: 11px; } }

@media (prefers-reduced-motion: reduce) {
  .office-svg * { animation: none !important; }
}

/* ── 主管 / 总经理：没有客户端，画法与员工区分开 ─────────── */
.desk.lead .o-nameTag { font-weight: 750; }
.desk.lead .o-deskTop { fill: var(--border-2); }

/* 职务牌顶替显示器 —— 它们不执行浏览器动作，摆台显示器是误导 */
.o-badge rect { fill: rgba(79,70,229,.10); stroke: rgba(79,70,229,.35); stroke-width: 1; }
.lead-gm .o-badge rect { fill: rgba(180,83,9,.10); stroke: rgba(180,83,9,.38); }

/* 小组标签：挂在昵称下面，没编队时是空字符串，不占视觉 */
.o-teamTag { font-size: 9px; fill: #8fefdf; }
/* 工牌色：名牌下面那一条。同角色多人时靠它区分，颜色按 id 定死不会变 */
.o-tone { opacity: .9; }
.desk.offline .o-tone { opacity: .35; }

/* 纯协议员工：没有客户端但确实在干活，牌子用青色跟主管区分 */
.lead-wk .o-badge rect { fill: rgba(13,148,136,.10); stroke: rgba(13,148,136,.38); }

/* ══ 办公室多 tab：左员工导轨 + 右工作台 ═══════════════ */

.office-body { display: grid; grid-template-columns: 132px 1fr; min-height: 0; overflow: hidden; }
.otop-pane[data-otop="office"] { grid-template-rows: 1fr; }

/* 左侧导轨：一行一个人，点谁切谁 */
.orail {
  overflow-y: auto; overflow-x: hidden; min-height: 0;
  border-right: 1px solid var(--border); background: var(--bg-2);
  padding: 6px; display: flex; flex-direction: column; gap: 3px;
}
.orail::-webkit-scrollbar { width: 6px; }
.orail::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }
.orail-h {
  font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: .04em;
  padding: 6px 6px 2px; white-space: nowrap;
}
.orail-i {
  display: flex; align-items: center; gap: 6px; padding: 5px 6px;
  border-radius: 8px; cursor: pointer; border: 1px solid transparent;
  background: none; text-align: left; width: 100%; min-width: 0;
  transition: background .15s, border-color .15s;
}
.orail-i:hover { background: var(--surface); }
.orail-i[aria-pressed="true"] { background: var(--surface); border-color: rgba(13,148,136,.4); }
/* 左侧那条工牌色，跟工位名牌下面那条同一个颜色 */
.orail-i { position: relative; }
.orail-i::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 2px 2px 0; background: var(--tone, transparent); opacity: .85;
}
.orail-i[data-orail=""]::before { display: none; }
.orail-i.offline::before { opacity: .3; }

.orail-i img { width: 24px; height: 24px; border-radius: 50%; flex: none; background: var(--bg-3); }
.orail-i .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.orail-i .t b {
  font-size: 11.5px; font-weight: 650; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.orail-i .t span {
  font-size: 9.5px; color: var(--muted); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.orail-i i.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: none; }
.orail-i.running i.dot { background: var(--teal); }
.orail-i.online  i.dot { background: var(--emerald); }

/* 右侧工作台 */
.opane { position: relative; min-height: 0; display: grid; }
.otab  { min-height: 0; display: grid; grid-template-rows: 1fr; overflow: hidden; }
.otab[hidden] { display: none !important; }
/* 工作台：左边一栏是「名字 + 竖排的三个页」，右边才是内容（Windows 那种左对齐） */
.otab[data-otab="one"] { grid-template-rows: 1fr; grid-template-columns: 132px 1fr; }
.oside {
  border-right: 1px solid var(--border); background: var(--bg-2);
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
}
.omain {
  min-width: 0; min-height: 0; display: grid; overflow: hidden;
  container: omain / inline-size;      /* 执行记录整页按这一栏的宽度分档 */
}

.owho {
  display: flex; align-items: center; gap: 7px; padding: 9px 8px;
  border-bottom: 1px solid var(--border); min-width: 0;
}
.owho-av { border-radius: 50%; flex: none; border: 1px solid var(--border); }
.owho-id { min-width: 0; display: flex; flex-direction: column; flex: 1; }
.owho-id b { font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.owho-id span { font-size: 9.5px; color: var(--muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 竖排子 tab，选中的那条左边一道竖杠 —— 就是 Windows 设置那套 */
.oseg { display: flex; flex-direction: column; gap: 1px; padding: 6px; }
.oseg button {
  border: 0; background: none; cursor: pointer; text-align: left;
  padding: 7px 9px; border-radius: 7px; font-size: 12px; color: var(--text-2);
  white-space: nowrap; position: relative;
}
.oseg button:hover { background: var(--surface); }
.oseg button[aria-pressed="true"] {
  background: var(--surface); color: var(--text); font-weight: 650; box-shadow: var(--shadow);
}
.oseg button[aria-pressed="true"]::before {
  content: ''; position: absolute; left: 3px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 99px; background: var(--teal);
}

.osub { min-height: 0; display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.osub[hidden] { display: none !important; }
.osub[data-osub="chat"] { grid-template-rows: auto 1fr auto; }

/* ── 文件柜 ── */
.fbar {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  border-bottom: 1px solid var(--border); min-width: 0; flex-wrap: nowrap; overflow-x: auto;
}
.fbar::-webkit-scrollbar { display: none; }
.fscope button { padding: 3px 9px; font-size: 11.5px; }
.fcrumb { display: flex; align-items: center; gap: 2px; font-size: 11.5px; min-width: 0; overflow: hidden; }
.fcrumb button {
  border: 0; background: none; cursor: pointer; color: var(--teal);
  font-size: 11.5px; padding: 2px 3px; white-space: nowrap;
}
.fcrumb span { color: var(--muted); flex: none; }
.fuse { font-size: 10.5px; color: var(--muted); white-space: nowrap; flex: none; }

.fdrop { position: relative; min-height: 0; overflow: hidden; display: grid; }
.flist { overflow-y: auto; min-height: 0; padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.flist::-webkit-scrollbar { width: 6px; }
.flist::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }
.frow {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); min-width: 0;
}
.frow:hover { border-color: var(--border-2); }
.frow .fi { flex: none; color: var(--muted); display: inline-flex; }
.frow.dir .fi { color: var(--amber, #b45309); }
.frow .fn {
  flex: 1; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.frow.dir .fn { cursor: pointer; font-weight: 650; }
.frow .fm { font-size: 10.5px; color: var(--muted); white-space: nowrap; flex: none; }
.frow .fa { display: flex; gap: 4px; flex: none; }
.frow .fa button {
  border: 1px solid var(--border); background: var(--surface); border-radius: 6px;
  cursor: pointer; font-size: 10.5px; padding: 2px 6px; color: var(--text-2); white-space: nowrap;
}
.frow .fa button:hover { color: var(--teal); border-color: rgba(13,148,136,.4); }

/* 拖拽上传的遮罩，只在拖进来时出现 */
.fmask {
  position: absolute; inset: 6px; border: 2px dashed rgba(13,148,136,.6); border-radius: 12px;
  background: rgba(13,148,136,.08); display: none; place-items: center;
  font-size: 13px; color: #0f766e; pointer-events: none;
}
.fdrop.over .fmask { display: grid; }

/* ══ 办公室里的对话：按真 AI 对话的样子做 ══════════════ */


/* 输入区 */
/* 抽屉拆了以后，这套气泡就住在工作台的聊天页里 */
.osub[data-osub="chat"] .chat-body { min-height: 0; padding: 16px 16px 6px; gap: 14px; }
.osub[data-osub="chat"] .chat-body::-webkit-scrollbar { width: 6px; }
.osub[data-osub="chat"] .chat-body::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }

.ochat-in { padding: 8px 12px 12px; }
.ochat-box {
  display: flex; align-items: flex-end; gap: 6px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  padding: 6px 6px 6px 12px; transition: border-color .18s, box-shadow .18s;
}
.ochat-box:focus-within { border-color: rgba(13,148,136,.55); box-shadow: 0 0 0 3px rgba(13,148,136,.10); }
.ochat-box textarea {
  flex: 1; resize: none; border: 0; outline: none; background: none;
  font: inherit; font-size: 13px; line-height: 1.7; padding: 5px 0;
  max-height: 132px; min-height: 26px; color: var(--text);
}
.ochat-go {
  flex: none; width: 30px; height: 30px; border-radius: 9px; border: 0; cursor: pointer;
  background: var(--grad); color: #fff; display: grid; place-items: center;
  transition: opacity .18s, transform .18s;
}
.ochat-go:hover { transform: translateY(-1px); }
.ochat-go:disabled { opacity: .4; cursor: default; transform: none; }

@media (max-width: 980px) { .office-body { grid-template-columns: 96px 1fr; } }

/* ── 资源管理器手感：右键菜单 ─────────────────────────── */
.ctxmenu {
  position: fixed; z-index: 200; min-width: 168px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 10px; box-shadow: 0 12px 32px -8px rgba(16,32,64,.28);
}
.ctxmenu[hidden] { display: none !important; }
.ctxmenu button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 0; background: none; cursor: pointer; padding: 7px 10px;
  border-radius: 7px; font-size: 12.5px; color: var(--text); white-space: nowrap;
}
.ctxmenu button:hover { background: var(--bg-2); }
.ctxmenu button.danger { color: var(--rose); }
.ctxmenu button.danger:hover { background: rgba(225,29,72,.08); }
.ctxmenu .sep { height: 1px; margin: 4px 6px; background: var(--border); }
.ctxmenu .ic { color: var(--muted); }

/* 选中态：跟 Windows 一样，点一下选中、双击才打开 */
.frow.sel { border-color: rgba(13,148,136,.55); background: rgba(13,148,136,.07); }
.frow { user-select: none; cursor: default; }
.frow .fn { cursor: default; }

/* ── 预览面板 ── */
.fpv-img { display: block; max-width: 100%; margin: 0 auto; background: #fff; }
.fpv-pdf { width: 100%; height: 62vh; border: 0; display: block; background: #fff; }
.fpv-txt {
  margin: 0; padding: 12px; font: 12.5px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap; word-break: break-word; color: var(--text);
}
.fpv-edit {
  width: 100%; min-height: 46vh; border: 0; outline: none; resize: vertical;
  padding: 12px; background: transparent; color: var(--text);
  font: 12.5px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.fpv-tbl { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--surface); }
.fpv-tbl td, .fpv-tbl th {
  border: 1px solid var(--border); padding: 5px 8px; text-align: left;
  max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fpv-tbl thead th { background: var(--bg-2); font-weight: 650; position: sticky; top: 0; }
.fpv-tbl tbody tr:nth-child(even) { background: var(--bg-2); }
.fpv-none { padding: 40px; text-align: center; color: var(--muted); font-size: 13px; }

@media (max-width: 1200px) { .otab[data-otab="one"] { grid-template-columns: 112px 1fr; } }

/* ══ 右栏：任务计划（原员工列表的位置）════════════════ */

.tplist {
  overflow-y: auto; overflow-x: hidden; min-height: 0;
  padding: 8px; display: flex; flex-direction: column; gap: 7px;
}
.tplist::-webkit-scrollbar { width: 6px; }
.tplist::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }

.tprow {
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  padding: 9px 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.tprow.run  { border-color: rgba(13,148,136,.38); }
.tprow.fail { border-color: rgba(225,29,72,.32); background: rgba(225,29,72,.03); }
.tprow-h { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tprow-h .g {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tprow-h img { width: 18px; height: 18px; border-radius: 50%; flex: none; background: var(--bg-3); }
.tprow-m {
  display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--muted);
  min-width: 0; flex-wrap: nowrap; overflow: hidden;
}
.tprow-m b { color: var(--text-2); font-weight: 600; white-space: nowrap; }
.tprow-m .grow { flex: 1; }
.tprow-bar { height: 4px; border-radius: 99px; background: var(--bg-3); overflow: hidden; }
.tprow-bar > i { display: block; height: 100%; border-radius: 99px; background: var(--grad); }
.tprow.done .tprow-bar > i { background: var(--emerald); }
.tprow.fail .tprow-bar > i { background: var(--rose); }
.tprow-why {
  font-size: 11px; color: var(--rose); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── 分段小标题 ── */
.tp-h2 {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 2px 0; font-size: 11px; font-weight: 700; color: var(--text-2); letter-spacing: .03em;
}
.tp-h2 b { color: var(--teal); font-variant-numeric: tabular-nums; }
.tp-h2 i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex: none;
  animation: pulse-dot 1.7s var(--ease-io) infinite;
}
.tp-h2 .tp-tip { margin-left: auto; font-size: 10px; font-weight: 400; color: var(--muted); }
.tp-none { padding: 6px 2px; font-size: 11.5px; color: var(--muted); }

/* ── 正在执行：整块大区域 ──
   带实时画面、进度、以及它此刻在想什么。整个面板只有它享受这个待遇。 */
.tpnow {
  border: 1px solid rgba(13,148,136,.42); border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, rgba(13,148,136,.07), var(--surface) 70%);
  box-shadow: 0 3px 14px -6px rgba(13,148,136,.4);
}
.tpnow-top {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  color: #0f766e; background: rgba(13,148,136,.10);
  border-bottom: 1px solid rgba(13,148,136,.18);
}
.tpnow-top .grow { flex: 1; }
.tpnow-top > i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex: none;
  animation: pulse-dot 1.7s var(--ease-io) infinite;
}
.tpnow-body { display: grid; grid-template-columns: 132px 1fr; gap: 10px; padding: 10px; }
@container roster (max-width: 300px) { .tpnow-body { grid-template-columns: 1fr; } }

/* 左：他此刻的屏幕 */
.tpn-shot {
  position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden;
  background: #0f172a; border: 1px solid rgba(15,23,42,.35); cursor: zoom-in;
}
.tpn-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.tpn-noshot {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px;
  color: #64748b; font-size: 10px;
}
.tpn-live {
  position: absolute; left: 5px; top: 5px; display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 99px; font-size: 8.5px; font-weight: 800; letter-spacing: .06em;
  background: rgba(15,23,42,.72); color: #fda4af; backdrop-filter: blur(4px);
}
.tpn-live i { width: 4px; height: 4px; border-radius: 50%; background: currentColor;
  animation: pulse-dot 1.4s var(--ease-io) infinite; }
.tpn-age {
  position: absolute; right: 5px; bottom: 5px; font-size: 8.5px; color: #cbd5e1;
  background: rgba(15,23,42,.6); padding: 1px 5px; border-radius: 99px; backdrop-filter: blur(4px);
}

/* 右：目标、人、进度、正在想什么 */
.tpn-info { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tpn-goal {
  font-size: 13.5px; font-weight: 650; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tpn-who { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-2); min-width: 0; }
.tpn-av { width: 17px; height: 17px; border-radius: 50%; flex: none; background: var(--bg-3); }
.tpn-who span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpn-who em { font-style: normal; color: var(--muted); font-size: 10.5px; }
.tpn-who em::before { content: '· '; }

.tpn-barrow { display: flex; align-items: center; gap: 8px; }
.tpn-bar { flex: 1; height: 6px; border-radius: 99px; background: rgba(13,148,136,.15); overflow: hidden; }
.tpn-bar > i {
  display: block; height: 100%; border-radius: 99px; background: var(--grad);
  transition: width .6s var(--ease);
}
.tpn-pct {
  flex: none; font-size: 17px; font-weight: 700; color: var(--teal); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tpn-pct em { font-size: 10px; font-style: normal; opacity: .7; }
.tpn-step {
  display: flex; gap: 8px; font-size: 10.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; flex-wrap: wrap;
}
.tpn-step span::before { content: '· '; }

/* 它此刻在想什么 —— 这句话是这块区域存在的理由 */
.tpn-why {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 11.5px; line-height: 1.55; color: var(--text-2);
  background: rgba(13,148,136,.07); border: 1px solid rgba(13,148,136,.18);
  border-radius: 8px; padding: 6px 8px;
}
.tpn-why .dim { color: var(--muted); }
.tpn-why .d { display: inline-flex; gap: 2px; flex: none; padding-top: 6px; }
.tpn-why .d i {
  width: 3.5px; height: 3.5px; border-radius: 50%; background: var(--teal);
  animation: bounce 1.3s var(--ease-io) infinite;
}
.tpn-why .d i:nth-child(2) { animation-delay: .17s; }
.tpn-why .d i:nth-child(3) { animation-delay: .34s; }

/* ── 空态：居中、小字、灰 ── */
.tp-empty {
  margin: auto; padding: 30px 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  color: var(--muted);
}
.tp-empty svg { opacity: .28; margin-bottom: 2px; }
.tp-empty b { font-size: 12.5px; font-weight: 600; color: var(--text-2); opacity: .75; }
.tp-empty span { font-size: 11px; }

/* ── 勾选与批量 ── */
.tpbulk {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 5px 6px; border-radius: 8px; background: var(--bg-2);
  border: 1px solid var(--border); font-size: 11px; color: var(--muted);
  position: sticky; top: 0; z-index: 2;
}
.tpbulk .grow { flex: 1; }
.tpbulk .n b { color: var(--teal); font-weight: 700; }

/* 自己画的勾选框：原生 checkbox 在这个尺寸下各浏览器长得都不一样 */
.tpck { display: inline-flex; align-items: center; flex: none; cursor: pointer; }
.tpck input { position: absolute; opacity: 0; width: 0; height: 0; }
.tpck span {
  width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--border-2);
  background: var(--surface); display: block; position: relative; transition: all .14s;
}
.tpck input:checked + span { background: var(--teal); border-color: var(--teal); }
.tpck input:checked + span::after {
  content: ''; position: absolute; left: 4px; top: 1px; width: 3.5px; height: 7px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.tpck input:indeterminate + span { background: var(--teal); border-color: var(--teal); }
.tpck input:indeterminate + span::after {
  content: ''; position: absolute; left: 2.5px; top: 5px; width: 7px; height: 2px; background: #fff;
}
.tpck input:focus-visible + span { box-shadow: 0 0 0 3px rgba(13,148,136,.25); }
.escrow > .tpck { margin-bottom: 4px; }

/* ── 排队中：可拖、可改、可删 ── */
.tpq { display: flex; flex-direction: column; gap: 4px; }
.tpqrow {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  padding: 7px 8px 7px 4px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface);
  transition: border-color .15s, background .15s, opacity .15s;
}
.tpqrow:hover { border-color: var(--border-2); background: var(--bg-2); }
.tpqrow.dragging { opacity: .4; border-style: dashed; }
.tpqrow.editing { border-color: rgba(13,148,136,.5); background: var(--surface); }
.tpqrow .grip { flex: none; width: 16px; display: grid; place-items: center; color: var(--border-2); cursor: grab; }
.tpqrow:hover .grip { color: var(--muted); }
.tpqrow .grip:active { cursor: grabbing; }
.tpqrow .g {
  flex: 1; min-width: 0; font-size: 12px; line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tpqrow .who { flex: none; font-size: 10px; color: var(--muted); max-width: 74px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpedit {
  width: 100%; border: 0; outline: none; background: none; font: inherit; font-size: 12px;
  color: var(--text); padding: 0;
}

/* 行尾那两颗小操作键：平时淡，鼠标过去才实 */
.tpx {
  flex: none; padding: 2px 7px; border-radius: 6px; cursor: pointer; font-size: 10.5px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  opacity: .55; transition: opacity .15s, color .15s, border-color .15s;
}
.tpqrow:hover .tpx, .tprow:hover .tpx, .tpnow:hover .tpx, .tpx:focus-visible { opacity: 1; }
.tpx:hover { color: var(--teal); border-color: rgba(13,148,136,.45); }
.tpx.bad:hover { color: var(--rose); border-color: rgba(225,29,72,.45); }

/* ══ 工位下面的进度条 ══════════════════════════════ */
.o-prog     { fill: var(--bg-3); }
.o-progIn   { fill: var(--teal); }
.desk.offline .o-progIn { fill: var(--muted); }
.desk.failed  .o-progIn { fill: var(--rose); }

/* ── 图片右上角的放大镜 ──
   全站图片统一在站内放大，不再往新标签页甩。平时半透明，
   鼠标移到图上才浮出来 —— 缩略图本来就小，常驻会挡内容。 */
.imgzoom {
  position: absolute; top: 4px; right: 4px; z-index: 3;
  width: 22px; height: 22px; border-radius: 6px; cursor: zoom-in;
  display: grid; place-items: center; padding: 0;
  background: rgba(15,23,42,.62); color: #fff; border: 1px solid rgba(255,255,255,.22);
  opacity: 0; transform: scale(.86); backdrop-filter: blur(3px);
  transition: opacity .16s, transform .16s, background .16s;
}
.imgzoom:hover { background: rgba(15,23,42,.85); }
.imgzoom:focus-visible { opacity: 1; transform: none; outline: 2px solid var(--teal); }
.rp-frame:hover .imgzoom, .rp-screen:hover .imgzoom,
.msg .shot:hover .imgzoom, .tpn-shot:hover .imgzoom { opacity: 1; transform: none; }
/* 触屏没有 hover，直接常驻 */
@media (hover: none) { .imgzoom { opacity: .85; transform: none; } }

/* 挂放大镜的容器都要能定位 */
.rp-frame, .msg .shot, .tpn-shot { position: relative; }
.msg .shot { display: block; }

/* ── 部门职能页顶上的角色说明 ── */
.rolebar {
  display: grid; gap: 8px; padding: 0 2px 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.rolecard {
  display: flex; gap: 10px; align-items: flex-start; min-width: 0;
  padding: 10px 12px; border-radius: 11px;
  background: var(--surface); border: 1px solid var(--border);
}
.role-fig { position: relative; flex: none; width: 46px; text-align: center; }
.role-fig img { width: 40px; height: 40px; display: block; margin: 0 auto; }
.role-badge {
  display: block; margin-top: 2px; font-size: 8.5px; font-weight: 750; line-height: 13px;
  border-radius: 99px; border: 1px solid currentColor; opacity: .9;
}
.role-mon {
  display: block; margin: 3px auto 0; width: 30px; height: 15px; border-radius: 2px;
  background: #26303f; border: 1px solid #94a3b8;
  box-shadow: inset 0 3px 0 rgba(94,234,212,.5);
}
.role-txt { min-width: 0; }
.role-txt b { font-size: 13px; font-weight: 700; }
.role-txt p { margin: 3px 0 4px; font-size: 11.5px; line-height: 1.65; color: var(--text-2); }
.role-how { font-size: 10.5px; color: var(--muted); line-height: 1.5; }

.rolecard.amber  { border-color: rgba(180,83,9,.3);  background: rgba(180,83,9,.04); }
.rolecard.amber  .role-badge { color: #b45309; }
.rolecard.indigo { border-color: rgba(79,70,229,.28); background: rgba(79,70,229,.04); }
.rolecard.indigo .role-badge { color: #4338ca; }
.rolecard.teal   { border-color: rgba(13,148,136,.3); background: rgba(13,148,136,.04); }
.rolecard.teal   .role-badge { color: #0f766e; }

.role-note {
  grid-column: 1 / -1; font-size: 11px; color: var(--muted); line-height: 1.7;
  padding: 2px 2px 0;
}

/* ── 交付物：已交付那一栏每行挂的小链接 ── */
.tpfiles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.tpfile {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0;
  padding: 3px 8px; border-radius: 7px; cursor: pointer; font-size: 11px;
  border: 1px solid rgba(5,150,105,.3); background: rgba(5,150,105,.07); color: #047857;
  transition: background .15s, border-color .15s;
}
.tpfile:hover { background: rgba(5,150,105,.14); border-color: rgba(5,150,105,.55); }
.tpfile i {
  font-style: normal; font-size: 10px; opacity: .7; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 跳过去之后闪一下，告诉你就是这一份 */
.ftile.flash, .frow2.flash { animation: file-flash 1.6s var(--ease-io); }
@keyframes file-flash {
  0%, 100% { box-shadow: none; }
  20%, 60% { box-shadow: 0 0 0 3px rgba(13,148,136,.45); }
}

/* 站在别人私有柜子里时头上那条横幅 —— 翻两层目录也不会忘了自己在谁的地盘上 */
.privbar {
  display: flex; align-items: center; gap: 6px; flex: none;
  margin: 8px 8px 0; padding: 7px 10px; border-radius: 9px; font-size: 11.5px;
  background: rgba(180,83,9,.07); border: 1px solid rgba(180,83,9,.28); color: #92400e;
}
.privbar svg { flex: none; opacity: .8; }
.privbar b { font-weight: 750; }
.privbar > span:not(.grow) {
  color: #b45309; opacity: .78; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.privbar .grow { flex: 1; }
.privbar button {
  flex: none; cursor: pointer; font-size: 11px; padding: 2px 9px; border-radius: 6px;
  border: 1px solid rgba(180,83,9,.4); background: rgba(255,255,255,.6); color: #92400e;
}
.privbar button:hover { background: #fff; border-color: rgba(180,83,9,.7); }
/* fdrop 是 grid，插了横幅要让列表继续吃掉剩余高度 */
.fdrop:has(> .privbar) { grid-template-rows: auto 1fr; }

/* ── 公共区里别人的私有柜子 ──
   公共文件/公共知识库的根目录下会摆出每个人的私有柜子，
   点进去就是切到那个人的作用域。必须一眼看出「这是谁的、这是私有的」，
   否则老板会以为这些东西是公共的。 */
/* 每个图块都要能定位 —— 只给 .priv 加 position 的话，进到别人柜子里之后
   普通文件的「谁的」角标会飞出去贴到整个列表的左上角，图标模式就等于没标。 */
.ftile, .frow2 { position: relative; }
.ftile.priv { background: rgba(180,83,9,.045); border-color: rgba(180,83,9,.22); }
.ftile.priv:hover { border-color: rgba(180,83,9,.45); }
.frow2.priv .nm { color: #92400e; }
.ptag {
  font-size: 9px; font-weight: 700; letter-spacing: .04em; font-style: normal;
  padding: 0 5px; border-radius: 99px; line-height: 15px; display: inline-block;
  background: rgba(180,83,9,.12); color: #b45309; border: 1px solid rgba(180,83,9,.28);
}
.ftile .ptag { position: absolute; top: 5px; right: 5px; }
.frow2 .ptag { margin-left: 6px; vertical-align: 1px; }
.fcrumb .fpriv { color: #b45309; font-weight: 650; }
.fcrumb .fpriv i {
  font-style: normal; font-size: 9px; margin-left: 4px; padding: 0 4px;
  border-radius: 99px; background: rgba(180,83,9,.14); border: 1px solid rgba(180,83,9,.3);
}
.fcrumb [data-back] { color: var(--teal); font-weight: 650; }

/* 公共库里那个固定的《交付》文件夹：全公司交付物的落点，删不掉 */
.ftile.fixed { background: rgba(13,148,136,.05); border-color: rgba(13,148,136,.28); }
.ftile.fixed:hover { border-color: rgba(13,148,136,.55); }
.frow2.fixed .nm { color: #0f766e; font-weight: 650; }
.ptag.fix {
  background: rgba(13,148,136,.12); color: #0f766e; border-color: rgba(13,148,136,.3);
}
/* 站在别人柜子里：每一条都挂上"谁的"，整片区域也换个底 —— 光靠顶上
   那条横幅不够，里面很可能也有个同名的《交付》，分不出是谁的东西。 */
.flist.inpriv { background: rgba(180,83,9,.035); }
.flist.inpriv .ftile { border-color: rgba(180,83,9,.22); background: rgba(180,83,9,.04); }
.flist.inpriv .ftile:hover { border-color: rgba(180,83,9,.45); }
.flist.inpriv .frow2 .nm { color: #92400e; }
.ptag.own {
  background: rgba(180,83,9,.14); color: #92400e; border-color: rgba(180,83,9,.32);
  max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ftile .ptag.own { position: absolute; top: 5px; left: 5px; right: auto; }
.flist.inpriv .ftile .sz { color: #b45309; opacity: .85; }
.ftile.fixed .fg { color: var(--teal); }

/* ══ 文件区：图标视图 / 详细列表 ══════════════════════ */

.fview { display: inline-flex; gap: 2px; flex: none; background: var(--bg-3); padding: 2px; border-radius: 8px; }
.fview button {
  border: 0; background: none; cursor: pointer; padding: 4px 7px; border-radius: 6px;
  color: var(--muted); display: inline-flex; align-items: center;
}
.fview button:hover { color: var(--text-2); }
.fview button[aria-pressed="true"] { background: var(--surface); color: var(--teal); box-shadow: var(--shadow); }

/* 图标视图：自动铺满，跟资源管理器的大图标一个意思 */
.flist.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 4px; align-content: start; padding: 10px;
}
.ftile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px 9px; border-radius: 10px; border: 1px solid transparent;
  cursor: default; user-select: none; min-width: 0;
}
.ftile:hover { background: var(--bg-2); }
.ftile.sel  { background: rgba(13,148,136,.10); border-color: rgba(13,148,136,.42); }
.ftile .fg  { flex: none; }
/* 图片文件直接出缩略图，比一个通用图标有用得多 */
.ftile .thumb {
  width: 40px; height: 40px; object-fit: cover; border-radius: 6px;
  background: var(--bg-3); border: 1px solid var(--border);
}
.ftile .nm {
  font-size: 11.5px; line-height: 1.35; text-align: center; width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-all;
}
.ftile .sz { font-size: 9.5px; color: var(--muted); line-height: 1; }

/* 详细列表：表头 + 行，列宽固定，不会因为名字长短跳来跳去 */
.flist.list { display: block; padding: 6px 8px 10px; }
.fhead {
  display: grid; grid-template-columns: 1fr 92px 108px 96px; gap: 8px;
  padding: 0 8px 6px; font-size: 10.5px; color: var(--muted); font-weight: 650;
  border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: var(--surface); z-index: 1;
}
.frow2 {
  display: grid; grid-template-columns: 1fr 92px 108px 96px; gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: 7px; cursor: default; user-select: none;
  font-size: 12px; border: 1px solid transparent;
}
.frow2:hover { background: var(--bg-2); }
.frow2.sel  { background: rgba(13,148,136,.09); border-color: rgba(13,148,136,.38); }
.frow2 .nm { display: flex; align-items: center; gap: 7px; min-width: 0; }
.frow2 .nm .fg, .frow2 .nm .thumb { width: 18px; height: 18px; flex: none; }
.frow2 .nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow2 .c { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 空文件夹：不写一整段说明，居中一行小灰字就够 */
.fempty {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--muted); font-size: 12px; pointer-events: none;
}

/* ══ 办公室那一行本身就是 tab 条 ═══════════════════════ */

.office-bar { gap: 2px; padding: 5px 8px; }
.otop {
  border: 0; background: none; cursor: pointer; white-space: nowrap; flex: none;
  padding: 6px 11px; border-radius: 8px; font-size: 12.5px; color: var(--text-2);
  position: relative;
}
.otop:hover { background: var(--bg-2); color: var(--text); }
.otop[aria-pressed="true"] { color: var(--text); font-weight: 700; background: var(--bg-2); }
.otop[aria-pressed="true"]::after {
  content: ''; position: absolute; left: 11px; right: 11px; bottom: 2px;
  height: 2px; border-radius: 99px; background: var(--teal);
}

.office { grid-template-rows: auto 1fr; }
.otop-pane { min-height: 0; display: grid; overflow: hidden; }
.otop-pane[hidden] { display: none !important; }
/* 搬进 tab 的那几块原来是弹窗内容，给它们一个能滚动的容器 */
.opanel { overflow-y: auto; min-height: 0; padding: 14px 16px 18px; }
.opanel::-webkit-scrollbar { width: 6px; }
.opanel::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }
.opanel h3 { font-size: 15px; margin: 0 0 4px; }
.opanel .rows { max-height: none !important; }

/* 左侧导轨顶上的两颗小按钮：招员工、分组 */
.orailwrap {
  display: grid; grid-template-rows: auto 1fr; min-height: 0;
  border-right: 1px solid var(--border); background: var(--bg-2);
}
.orailwrap .orail { border-right: 0; }
.orail-tools {
  display: flex; gap: 4px; padding: 6px 6px 0;
}
.rt {
  flex: 1; height: 24px; display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--surface); border-radius: 7px;
  cursor: pointer; color: var(--text-2); font-size: 14px; line-height: 1; padding: 0;
}
.rt:hover { color: var(--teal); border-color: rgba(13,148,136,.4); }

.fcrumb-tag {
  flex: none; font-size: 11px; font-weight: 700; color: #fff;
  background: var(--grad); border-radius: 5px; padding: 2px 7px;
}

/* ══ 任务计划：三页 + 建任务 ═══════════════════════════ */

.roster-h .grow { flex: 1; }
.tpadd {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--surface); border-radius: 7px;
  cursor: pointer; color: var(--teal); font-size: 15px; line-height: 1; padding: 0;
}
.tpadd:hover { background: rgba(13,148,136,.08); border-color: rgba(13,148,136,.45); }
.tpadd.on { background: var(--teal); color: #fff; border-color: transparent; }

.roster-h .seg button b {
  margin-left: 4px; min-width: 15px; padding: 0 4px; border-radius: 99px;
  background: var(--rose); color: #fff; font-size: 9.5px; line-height: 15px;
  display: inline-block; font-weight: 700;
}
.roster-h .seg button b[hidden] { display: none !important; }

.tpnew {
  padding: 8px; border-bottom: 1px solid var(--border); background: var(--bg-2);
  display: flex; flex-direction: column; gap: 6px;
}
.tpnew[hidden] { display: none !important; }
.tpnew textarea {
  width: 100%; resize: vertical; border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 9px; font: inherit; font-size: 12.5px; background: var(--surface);
  min-height: 46px; max-height: 140px;
}
.tpnew textarea:focus { outline: none; border-color: rgba(13,148,136,.5); }
.tpnew-r { display: flex; align-items: center; gap: 6px; }
.tpnew-r .input { width: 150px; flex: none; padding: 5px 8px; font-size: 12px; }

/* 待定夺：一条一条，能就地追问 */
.escrow {
  border: 1px solid rgba(225,29,72,.3); background: rgba(225,29,72,.03);
  border-radius: 10px; padding: 9px 10px; display: flex; flex-direction: column; gap: 6px;
}
.escrow > b { font-size: 12.5px; }
.escrow .d { font-size: 11px; color: var(--text-2); white-space: pre-wrap; line-height: 1.6; }
.escrow .meta { font-size: 10.5px; color: var(--muted); }
.escrow .acts { display: flex; gap: 6px; }
.escrow .acts button {
  border: 1px solid var(--border); background: var(--surface); border-radius: 7px;
  cursor: pointer; font-size: 11px; padding: 3px 9px; color: var(--text-2);
}
.escrow .acts button:hover { color: var(--teal); border-color: rgba(13,148,136,.4); }
.escthread { display: flex; flex-direction: column; gap: 5px; }
.escthread[hidden] { display: none !important; }
.escthread .m {
  max-width: 88%; padding: 6px 9px; border-radius: 10px; font-size: 11.5px; line-height: 1.6;
  white-space: pre-wrap;
}
.escthread .m.human { align-self: flex-end; background: var(--grad); color: #fff; }
.escthread .m.agent { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); }
.escthread .in { display: flex; gap: 5px; }
.escthread .in input {
  flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 7px;
  padding: 5px 8px; font: inherit; font-size: 11.5px; background: var(--surface);
}
.escthread .in input:focus { outline: none; border-color: rgba(13,148,136,.5); }

/* ══ 只读说明页（Skill 仓库 / 部门职能）════════════════ */

.otop.ro { color: var(--muted); }
.otop.ro[aria-pressed="true"] { color: var(--text); }

.doc-h { max-width: 760px; }
.doc-h h3 { font-size: 16px; margin: 0 0 8px; }
.doc-h p { font-size: 13px; line-height: 1.85; color: var(--text-2); margin: 0 0 6px; }
.doc-h p b { color: var(--text); font-weight: 650; }
.doc-ro {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px !important; color: var(--muted) !important;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 7px; padding: 4px 9px; margin-top: 4px !important;
}

/* 顶部那排概览数字 */
.doc-stat { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 12px; }
.doc-stat .s {
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  padding: 8px 14px; min-width: 92px;
}
.doc-stat .s b { display: block; font-size: 19px; font-weight: 750; line-height: 1.2; font-variant-numeric: tabular-nums; }
.doc-stat .s span { font-size: 11px; color: var(--muted); }
.doc-stat .s.teal b { color: var(--teal); }
.doc-stat .s.amber b { color: #b45309; }

/* 说明条目 */
.doclist { display: flex; flex-direction: column; gap: 8px; }
.docrow {
  border: 1px solid var(--border); border-radius: 11px; background: var(--surface);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 7px;
}
.docrow-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.docrow-h b { font-size: 13.5px; }
.docrow-h code {
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--muted); background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 6px;
}
.docrow-d { font-size: 12.5px; line-height: 1.75; color: var(--text-2); }
.docrow-d.dim { color: var(--muted); font-style: italic; }

/* 名值对：把「跑了多少次 / 成功率 / 平均耗时」这类摆整齐 */
.kv { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.kv span { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.kv span b { color: var(--text-2); font-weight: 650; font-variant-numeric: tabular-nums; }

.tag {
  font-size: 10.5px; font-weight: 650; border-radius: 6px; padding: 2px 7px;
  border: 1px solid var(--border); color: var(--text-2); background: var(--bg-2); white-space: nowrap;
}
.tag.teal  { color: #0f766e; background: rgba(13,148,136,.10); border-color: rgba(13,148,136,.34); }
.tag.amber { color: #b45309; background: rgba(180,83,9,.09);  border-color: rgba(180,83,9,.30); }
.tag.rose  { color: #be123c; background: rgba(225,29,72,.08); border-color: rgba(225,29,72,.30); }
.tag.plain { color: var(--muted); }

/* 部门里的人 */
.docppl { display: flex; flex-wrap: wrap; gap: 6px; }
.docppl .p {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  border: 1px solid var(--border); border-radius: 8px; padding: 3px 9px 3px 4px; background: var(--bg-2);
}
.docppl .p img { width: 18px; height: 18px; border-radius: 50%; background: var(--bg-3); }
.docppl .p i { font-style: normal; color: var(--muted); font-size: 10.5px; }