/* MetaForge · 协作办公室动画场景
   设计意图：把多 Agent 协作可视化成一层真实的办公室切面——
   老板工位在里侧玻璃间，母Agent 的经理位在中央，子Agent 分坐两排工位。
   数据消息以「人物走到对方工位 + 对话气泡 + 交接文件」的方式呈现。
   所有坐标使用百分比，舞台缩放时走位仍然准确。 */

.office-view {
  --office-wall: #0a141f;
  --office-wall-deep: #060d15;
  --office-floor: #08111a;
  --office-line: rgba(0, 234, 255, 0.13);
  --office-line-soft: rgba(0, 234, 255, 0.06);
  --office-warm: #ffb15c;
  --office-warm-soft: rgba(255, 177, 92, 0.16);
  --office-manager: #00eaff;
  --office-boss: #ffc857;
  --office-employee: #8bd6ff;
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(900px 420px at 78% -10%, rgba(0, 234, 255, 0.09), transparent 68%),
    radial-gradient(700px 360px at 8% 4%, rgba(157, 92, 255, 0.1), transparent 70%),
    linear-gradient(165deg, #050b12, #03070c);
}

.office-view[hidden] {
  display: none;
}

html.light .office-view {
  --office-wall: #e8f2f7;
  --office-wall-deep: #dbe9f1;
  --office-floor: #dfeaf1;
  --office-line: rgba(0, 120, 150, 0.18);
  --office-line-soft: rgba(0, 120, 150, 0.08);
  background:
    radial-gradient(900px 420px at 78% -10%, rgba(0, 180, 220, 0.12), transparent 68%),
    radial-gradient(700px 360px at 8% 4%, rgba(140, 92, 255, 0.1), transparent 70%),
    linear-gradient(165deg, #f6fbfd, #eef5fa);
}

/* ---------------- 顶部控制条 ---------------- */

.office-head {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--office-line);
  background:
    linear-gradient(90deg, rgba(0, 234, 255, 0.05), transparent 34%, rgba(255, 177, 92, 0.05)),
    rgba(3, 8, 14, 0.72);
}

.office-head::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
  opacity: 0.45;
}

.office-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--office-line);
  border-radius: var(--radius-md);
  background: rgba(6, 14, 22, 0.7);
  color: var(--text-sub);
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.office-back svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.office-back:hover {
  color: var(--text-main);
  border-color: var(--border-strong);
  background: rgba(0, 234, 255, 0.08);
}

.office-head-main {
  min-width: 0;
}

.office-title {
  font-family: var(--font-tech);
  font-size: 17px;
  letter-spacing: 0.08em;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.office-title span {
  color: var(--office-warm);
}

.office-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.office-head-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.office-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.office-field select {
  max-width: 220px;
  padding: 7px 9px;
  border: 1px solid var(--office-line);
  border-radius: var(--radius-sm);
  /* 必须使用不透明底色：原生下拉列表会继承该背景，半透明会渲染成白色 */
  background-color: #06101a;
  color: var(--text-main);
  font-size: 12px;
  outline: none;
  cursor: pointer;
  /* 告知浏览器使用深色原生控件，避免下拉列表整片白色 */
  color-scheme: dark;
  transition: border-color var(--transition), box-shadow 0.2s ease, background-color var(--transition);
}

.office-field select:hover {
  border-color: var(--border-strong);
  /* 悬停时同样保持不透明深色底，避免下拉列表变白 */
  background-color: #0a1a28;
}

/* 原生下拉选项强制深色，防止选项文字与背景同为浅色而看不见 */
.office-field select option {
  background-color: #06101a;
  color: #e6f7ff;
}

.office-field select:focus-visible {
  border-color: var(--border-glow);
  box-shadow: 0 0 0 2px rgba(0, 234, 255, 0.16);
}

.office-btn {
  padding: 7px 12px;
  border: 1px solid var(--office-line);
  border-radius: var(--radius-sm);
  background: rgba(8, 17, 27, 0.8);
  color: var(--text-sub);
  font-size: 12px;
  cursor: pointer;
  transition:
    color var(--transition),
    border-color var(--transition),
    background var(--transition),
    transform 0.16s ease,
    box-shadow 0.2s ease;
}

.office-btn:hover {
  color: var(--text-main);
  border-color: var(--border-strong);
  background: rgba(0, 234, 255, 0.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 234, 255, 0.1);
}

.office-btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 2px 6px rgba(0, 234, 255, 0.08);
}

.office-btn:focus-visible {
  outline: 2px solid rgba(0, 234, 255, 0.55);
  outline-offset: 2px;
}

.office-btn.sound-off {
  color: var(--text-muted);
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.14);
}

.office-btn.ghost {
  border-style: dashed;
  color: var(--office-warm);
  border-color: rgba(255, 177, 92, 0.38);
}

.office-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------------- 示例演示说明 ---------------- */

.office-demo-help {
  position: relative;
}

/* 首次进入办公室时的小红点，提示这里可以查看演示说明 */
.office-demo-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neon-pink);
  animation: office-demo-dot 2.2s ease-out infinite;
}

.office-demo-help:not(.has-dot) .office-demo-dot {
  display: none;
}

@keyframes office-demo-dot {
  0% { box-shadow: 0 0 0 0 rgba(255, 46, 136, 0.45); }
  70%,
  100% { box-shadow: 0 0 0 7px rgba(255, 46, 136, 0); }
}

.office-help {
  position: absolute;
  top: calc(100% + 10px);
  right: 18px;
  z-index: 40;
  width: min(440px, calc(100vw - 32px));
  padding: 14px 16px 12px;
  border: 1px solid rgba(0, 234, 255, 0.28);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(360px 180px at 90% -20%, rgba(0, 234, 255, 0.12), transparent 70%),
    linear-gradient(165deg, #08141f, #050c14);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6), 0 0 26px rgba(0, 234, 255, 0.08);
  animation: office-help-in 0.18s ease-out;
}

.office-help[hidden] {
  display: none;
}

@keyframes office-help-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.office-help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.office-help-head b {
  font-size: 13px;
  color: var(--text-main);
  letter-spacing: 0.02em;
}

.office-help-close {
  padding: 2px 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.office-help-close:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.06);
}

.office-help-sub {
  margin: 6px 0 10px;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.55;
}

.office-help-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.office-help-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-sub);
}

.oh-tag {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid;
  border-radius: var(--radius-full);
  font-size: 10px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.oh-tag.crew {
  color: #8bd6ff;
  border-color: rgba(139, 214, 255, 0.4);
  background: rgba(139, 214, 255, 0.08);
}

.oh-tag.group {
  color: #c7adff;
  border-color: rgba(199, 173, 255, 0.42);
  background: rgba(157, 92, 255, 0.1);
}

.oh-tag.live {
  color: #7dffc4;
  border-color: rgba(0, 255, 163, 0.4);
  background: rgba(0, 255, 163, 0.08);
}

.office-help-tip {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px dashed var(--office-line);
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-muted);
}

.office-help-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.office-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 46, 136, 0.5);
  border-radius: var(--radius-full);
  color: #ff8fbd;
  font-family: var(--font-tech);
  font-size: 10px;
  letter-spacing: 0.18em;
}

.office-live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff2e88;
  animation: office-live-pulse 1.4s ease-in-out infinite;
}

@keyframes office-live-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* ---------------- 主体布局 ---------------- */

.office-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 304px;
  gap: 14px;
  padding: 14px 16px 16px;
}

.office-stage-wrap {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.office-stage {
  position: relative;
  flex: 1;
  min-height: 540px;
  border: 1px solid var(--office-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--office-wall-deep);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.55), 0 20px 60px rgba(0, 0, 0, 0.45);
  isolation: isolate;
}

.office-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 62%, rgba(3, 7, 11, 0.52)),
    radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(2, 6, 10, 0.48));
}

/* 后墙与天花 */

.office-ceiling {
  position: absolute;
  inset: 0 0 auto;
  height: 17%;
  z-index: 2;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 14%),
    linear-gradient(180deg, #0d1a26, #0a141e);
  border-bottom: 1px solid rgba(255, 177, 92, 0.16);
}

.ceiling-rail {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 42%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(160, 200, 220, 0.18), transparent);
}

.ceiling-lamp {
  position: absolute;
  top: 44%;
  width: 34px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 240, 210, 0.5), #fff3dc, rgba(255, 240, 210, 0.5));
  box-shadow: 0 0 18px 7px rgba(255, 190, 110, 0.22);
}

.ceiling-lamp::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 4px;
  width: 96px;
  height: 120px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 205, 140, 0.12), rgba(255, 205, 140, 0));
  clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.ceiling-lamp.lamp-1 { left: 17%; }
.ceiling-lamp.lamp-2 { left: 48%; }
.ceiling-lamp.lamp-3 { left: 79%; }

.office-ceiling::before,
.office-ceiling::after {
  content: '';
  position: absolute;
  top: 34%;
  width: 18%;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 177, 92, 0), rgba(255, 177, 92, 0.85), rgba(255, 177, 92, 0));
  box-shadow: 0 10px 40px 12px rgba(255, 177, 92, 0.16);
}

.office-ceiling::before { left: 12%; }
.office-ceiling::after { right: 12%; }

/* 城市窗景 */

.office-window {
  position: absolute;
  top: 5%;
  right: 5%;
  width: 35%;
  height: 30%;
  border: 1px solid rgba(0, 234, 255, 0.22);
  border-radius: 4px;
  overflow: hidden;
  background: #06111b;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(0, 234, 255, 0.08);
  z-index: 1;
}

.office-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(2px 2px at 18% 22%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 62% 14%, rgba(200, 240, 255, 0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 82% 38%, rgba(255, 210, 150, 0.8), transparent 60%),
    linear-gradient(180deg, #071726, #0b2235 55%, #123148);
}

.office-skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
  background:
    repeating-linear-gradient(90deg,
      #071420 0 7%,
      #0a1c2b 7% 10%,
      #06111b 10% 16%,
      #0c2131 16% 19%,
      #071420 19% 27%,
      #0a1c2b 27% 31%,
      #06111b 31% 38%,
      #0b1d2c 38% 42%,
      #071420 42% 50%,
      #0c2131 50% 54%,
      #06111b 54% 61%,
      #0a1c2b 61% 65%,
      #071420 65% 73%,
      #0b1d2c 73% 77%,
      #06111b 77% 85%,
      #0a1c2b 85% 89%,
      #071420 89% 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 18%);
  opacity: 0.85;
}

.office-skyline::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255, 200, 120, 0.75) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(120, 230, 255, 0.6) 0 1px, transparent 1.5px);
  background-size: 46px 26px, 61px 33px;
  background-position: 4px 6px, 20px 16px;
  animation: office-window-lights 9s linear infinite;
}

@keyframes office-window-lights {
  0% { opacity: 0.55; }
  45% { opacity: 0.9; }
  70% { opacity: 0.6; }
  100% { opacity: 0.55; }
}

.office-window-mullion {
  position: absolute;
  inset: 0;
}

.office-window-mullion::before,
.office-window-mullion::after {
  content: '';
  position: absolute;
  background: rgba(0, 234, 255, 0.18);
}

.office-window-mullion::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
}

.office-window-mullion::after {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
}

/* 地面：透视网格 + 暖色顶灯光池 */

.office-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72%;
  background:
    radial-gradient(42% 30% at 50% 26%, rgba(255, 177, 92, 0.12), transparent 70%),
    radial-gradient(30% 26% at 84% 14%, rgba(0, 234, 255, 0.09), transparent 70%),
    repeating-linear-gradient(90deg, var(--office-line-soft) 0 1px, transparent 1px 6.25%),
    repeating-linear-gradient(0deg, var(--office-line-soft) 0 1px, transparent 1px 12.5%),
    linear-gradient(180deg, #0b1823, var(--office-floor));
  transform: perspective(520px) rotateX(7deg);
  transform-origin: top center;
  border-top: 1px solid var(--office-line);
}

/* 白板 */

.office-whiteboard {
  position: absolute;
  left: 4.5%;
  top: 8%;
  width: 20%;
  height: 18%;
  padding: 9px 10px;
  border: 1px solid rgba(230, 247, 255, 0.22);
  border-radius: 3px;
  background: rgba(232, 246, 252, 0.07);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.office-whiteboard span {
  display: block;
  color: rgba(230, 247, 255, 0.55);
  font-family: var(--font-tech);
  font-size: 9px;
  letter-spacing: 0.18em;
}

.office-whiteboard i {
  display: block;
  height: 2px;
  margin-top: 8px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(0, 234, 255, 0.55), rgba(0, 234, 255, 0.06));
}

.office-whiteboard i:nth-child(2) { width: 72%; }
.office-whiteboard i:nth-child(3) { width: 88%; background: linear-gradient(90deg, rgba(255, 177, 92, 0.5), rgba(255, 177, 92, 0.05)); }
.office-whiteboard i:nth-child(4) { width: 54%; }

/* 绿植与机柜 */

.office-plant {
  position: absolute;
  width: 44px;
  height: 64px;
  z-index: 3;
}

.office-plant span {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 26px;
  height: 20px;
  transform: translateX(-50%);
  border-radius: 4px 4px 7px 7px;
  background: linear-gradient(180deg, #24303a, #141c24);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.office-plant i {
  position: absolute;
  bottom: 16px;
  left: 50%;
  width: 12px;
  height: 34px;
  border-radius: 60% 60% 40% 40%;
  background: linear-gradient(180deg, #1f7a5c, #0d3d2f);
  transform-origin: bottom center;
}

.office-plant i:nth-child(2) { transform: translateX(-50%) rotate(-24deg); }
.office-plant i:nth-child(3) { transform: translateX(-50%) rotate(4deg); height: 40px; }
.office-plant i:nth-child(4) { transform: translateX(-50%) rotate(26deg); }

.office-plant.plant-a { left: 2%; bottom: 16%; }
.office-plant.plant-b { right: 2.5%; bottom: 40%; transform: scale(0.86); }

.office-server {
  position: absolute;
  right: 5%;
  bottom: 22%;
  width: 34px;
  height: 92px;
  padding: 6px 5px;
  border: 1px solid rgba(0, 234, 255, 0.2);
  border-radius: 3px;
  background: linear-gradient(180deg, #0d1a25, #071019);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  z-index: 3;
}

.office-server i {
  display: block;
  height: 5px;
  margin-bottom: 5px;
  border-radius: 1px;
  background: rgba(0, 234, 255, 0.18);
  animation: office-server-blink 2.4s steps(2, end) infinite;
}

.office-server i:nth-child(2) { animation-delay: 0.6s; background: rgba(255, 177, 92, 0.2); }
.office-server i:nth-child(3) { animation-delay: 1.2s; }

.office-server b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  text-align: center;
  color: rgba(0, 234, 255, 0.5);
  font-family: var(--font-tech);
  font-size: 8px;
  letter-spacing: 0.1em;
}

@keyframes office-server-blink {
  0%, 60% { opacity: 0.35; }
  61%, 100% { opacity: 1; }
}

/* 会议桌 */

.office-meeting {
  position: absolute;
  left: 50%;
  top: 49%;
  width: 17%;
  height: 8%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.office-meeting-top {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(60% 60% at 40% 30%, rgba(255, 255, 255, 0.16), transparent 70%),
    linear-gradient(160deg, #1a2c3b, #0c1822);
  border: 1px solid rgba(0, 234, 255, 0.18);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), inset 0 0 24px rgba(0, 234, 255, 0.06);
}

.office-meeting-leg {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 9%;
  height: 90%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #16232e, #0a121a);
  border-radius: 0 0 3px 3px;
}

/* ---------------- 工位 ---------------- */

.office-desks,
.office-people {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.office-desks { z-index: 4; }
.office-people { z-index: 7; }

.office-desk {
  position: absolute;
  width: clamp(72px, 8.6vw, 118px);
  height: 58px;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
}

.office-desk::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 96%;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.4), transparent 70%);
  pointer-events: none;
}

.office-desk .desk-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 18px;
  height: 15px;
  border-radius: 3px;
  background: linear-gradient(180deg, #23384a, #152532);
  border: 1px solid rgba(0, 234, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.office-desk .desk-leg {
  position: absolute;
  top: 33px;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #1a2a37, #0b141c);
}

.office-desk .desk-leg.l { left: 12%; }
.office-desk .desk-leg.r { right: 12%; }

.office-desk .desk-monitor {
  position: absolute;
  left: 50%;
  top: 0;
  width: 42%;
  height: 22px;
  transform: translateX(-50%);
  border: 1px solid rgba(0, 234, 255, 0.28);
  border-radius: 2px;
  background: linear-gradient(180deg, #07141e, #0a1d2a);
  box-shadow: 0 0 14px rgba(0, 234, 255, 0.18);
}

.office-desk .desk-monitor i {
  position: absolute;
  inset: 3px;
  border-radius: 1px;
  background:
    repeating-linear-gradient(0deg, rgba(0, 234, 255, 0.22) 0 1px, transparent 1px 4px),
    linear-gradient(120deg, rgba(0, 234, 255, 0.16), transparent 60%);
  animation: office-monitor-flicker 5.4s steps(2, end) infinite;
}

@keyframes office-monitor-flicker {
  0%, 92%, 100% { opacity: 0.85; }
  93% { opacity: 0.45; }
  94% { opacity: 0.9; }
}

.office-desk .desk-lamp {
  position: absolute;
  right: 10%;
  top: 8px;
  width: 6px;
  height: 12px;
  border-radius: 3px 3px 1px 1px;
  background: var(--office-warm);
  box-shadow: 0 0 14px 4px rgba(255, 177, 92, 0.28);
}

.office-desk.role-manager .desk-top {
  background: linear-gradient(180deg, #244b56, #123039);
  border-color: rgba(0, 234, 255, 0.4);
  box-shadow: 0 0 22px rgba(0, 234, 255, 0.16);
}

.office-desk.role-boss .desk-top {
  background: linear-gradient(180deg, #4a3a24, #2a2114);
  border-color: rgba(255, 200, 87, 0.42);
  box-shadow: 0 0 22px rgba(255, 200, 87, 0.14);
}

/* ---------------- 人物 ---------------- */

.op-person {
  position: absolute;
  width: 40px;
  height: 68px;
  transform: translate(-50%, -100%);
  transition-property: left, top;
  transition-timing-function: cubic-bezier(0.4, 0.05, 0.3, 1);
  will-change: left, top;
}

.op-avatar {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 40px;
  height: 58px;
  transform: translateX(-50%);
}

/* 脚下投影 */
.op-shadow {
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 26px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.55), transparent 72%);
  filter: blur(1px);
}

/* 领带 */
.op-tie {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 5px;
  height: 11px;
  transform: translateX(-50%);
  clip-path: polygon(50% 0, 82% 22%, 64% 100%, 36% 100%, 18% 22%);
  background: linear-gradient(180deg, #f2f6fb, #c9d6e2);
  opacity: 0.9;
}

/* 工牌 */
.op-badge {
  position: absolute;
  left: 3px;
  top: 7px;
  width: 5px;
  height: 7px;
  border-radius: 1px;
  background: linear-gradient(180deg, #f4f8fb, #cbd8e2);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.3);
}

.op-badge::after {
  content: '';
  position: absolute;
  left: 1px;
  right: 1px;
  top: 1.5px;
  height: 1px;
  background: color-mix(in srgb, var(--person-color, #4cc9f0) 80%, #0a1520);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}

/* 眼镜与耳麦由脸部 SVG 绘制 */
.op-face .op-gear-glasses {
  fill: none;
  stroke: #202b36;
  stroke-width: 0.95;
}

.op-face .op-gear-headset {
  fill: none;
  stroke: #eaf9ff;
  stroke-width: 1.05;
  stroke-linecap: round;
}

.op-face .op-gear-headset rect {
  fill: #eaf9ff;
}

/* 头部：内联 SVG 脸部，五官在小尺寸下依然可辨 */
.op-head {
  position: absolute;
  left: 50%;
  top: -4px;
  width: 28px;
  height: 28px;
  transform: translateX(-50%);
  z-index: 2;
}

.op-face {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--person-color, #4cc9f0);
  /* 全局 svg 规则会继承描边，这里重置，避免五官被粗描边糊住 */
  stroke: none;
  stroke-width: 1;
}

.op-face .op-hair,
.op-face .op-hair-extra {
  fill: currentColor;
}

/* 员工用偏向自然的深色发色，老板与母Agent 保留角色色便于区分 */
.op-person.role-employee .op-face {
  color: color-mix(in srgb, var(--person-color, #4cc9f0) 45%, #232c36);
}

.op-face .op-hair {
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.22));
}

.op-face .op-hair-shine {
  fill: none;
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 1.2;
  stroke-linecap: round;
}

.op-face .op-brow {
  fill: none;
  stroke: #3c2519;
  stroke-width: 1;
  stroke-linecap: round;
}

/* 眨眼：整组眼睛缩放，比单点闪动更自然 */
.op-face .op-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: office-blink 4.6s ease-in-out infinite;
  animation-delay: var(--blink-delay, 0s);
}

.op-body {
  position: absolute;
  left: 50%;
  top: 18px;
  width: 24px;
  height: 25px;
  transform: translateX(-50%);
  border-radius: 8px 8px 5px 5px;
  background: linear-gradient(170deg,
    color-mix(in srgb, var(--person-color, #4cc9f0) 78%, white 10%),
    color-mix(in srgb, var(--person-color, #4cc9f0) 40%, #0a1520));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}

.op-body::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 5px;
  width: 10px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.28);
}

.op-arm {
  position: absolute;
  top: 21px;
  width: 5px;
  height: 18px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--person-color, #4cc9f0) 55%, #0a1520);
  transform-origin: top center;
}

.op-arm.l { left: 3px; transform: rotate(7deg); }
.op-arm.r { right: 3px; transform: rotate(-7deg); }

.op-leg {
  position: absolute;
  top: 41px;
  width: 7px;
  height: 17px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, #1b2a38, #0b141d);
  transform-origin: top center;
}

.op-leg.l { left: 12px; }
.op-leg.r { right: 12px; }

/* 手与鞋 */
.op-arm::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 5px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe4c8, #d8a87c 72%);
}

.op-leg::after {
  content: '';
  position: absolute;
  left: -1px;
  bottom: -1px;
  width: 9px;
  height: 4px;
  border-radius: 2px 3px 2px 2px;
  background: #0a1118;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.op-name {
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  transform: translateX(-50%);
  max-width: 90px;
  padding: 1px 5px;
  border-radius: 2px;
  background: rgba(3, 8, 13, 0.78);
  color: var(--text-sub);
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-person.role-boss .op-name { color: var(--office-boss); }
.op-person.role-manager .op-name { color: var(--office-manager); }

.op-person.walking .op-leg.l { animation: office-step 0.36s ease-in-out infinite alternate; }
.op-person.walking .op-leg.r { animation: office-step 0.36s ease-in-out infinite alternate-reverse; }
.op-person.walking .op-avatar { animation: office-bob 0.36s ease-in-out infinite alternate; }
.op-person.walking .op-arm.l { animation: office-arm-swing-l 0.36s ease-in-out infinite alternate; }
.op-person.walking .op-arm.r { animation: office-arm-swing-r 0.36s ease-in-out infinite alternate; }
.op-person.walking .op-body { transform: translateX(-50%) rotate(-4deg); }
.op-person.walking .op-shadow { animation: office-shadow-step 0.36s ease-in-out infinite alternate; }

/* 待机时轻微呼吸 */
.op-person:not(.walking):not(.working) .op-avatar {
  animation: office-breathe 4.2s ease-in-out infinite;
}

@keyframes office-breathe {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(-1.2px) scale(1.012); }
}

@keyframes office-arm-swing-l {
  from { transform: rotate(-14deg); }
  to { transform: rotate(28deg); }
}

@keyframes office-arm-swing-r {
  from { transform: rotate(14deg); }
  to { transform: rotate(-28deg); }
}

@keyframes office-shadow-step {
  from { transform: translateX(-50%) scaleX(1); opacity: 0.9; }
  to { transform: translateX(-50%) scaleX(0.86); opacity: 0.65; }
}

@keyframes office-blink {
  0%, 91%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(0.12); }
}

/* 处理中：点头 + 打字 */
.op-person.working .op-head {
  animation: office-nod 0.9s ease-in-out infinite alternate;
}

@keyframes office-nod {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(4deg); }
}

@keyframes office-step {
  from { transform: rotate(-17deg); }
  to { transform: rotate(17deg); }
}

@keyframes office-bob {
  from { transform: translateX(-50%) translateY(0); }
  to { transform: translateX(-50%) translateY(-2px); }
}

.op-person.working .op-arm.l { animation: office-type 0.32s ease-in-out infinite alternate; }
.op-person.working .op-arm.r { animation: office-type 0.32s ease-in-out infinite alternate-reverse; }

@keyframes office-type {
  from { transform: rotate(2deg) translateY(0); }
  to { transform: rotate(22deg) translateY(2px); }
}

.op-person.working::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -12px;
  width: 4px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--office-warm);
  box-shadow: 0 0 8px 2px rgba(255, 177, 92, 0.4);
  animation: office-work-dot 1.1s ease-in-out infinite;
}

@keyframes office-work-dot {
  0%, 100% { opacity: 0.3; transform: translateX(-50%) scale(0.7); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}

.op-doc {
  position: absolute;
  right: -2px;
  top: 26px;
  width: 11px;
  height: 14px;
  border-radius: 1px;
  background: linear-gradient(160deg, #f2e6c8, #cdb88f);
  border: 1px solid rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.op-doc::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  top: 4px;
  height: 1px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.22), 0 6px 0 rgba(0, 0, 0, 0.18);
}

.op-person.carrying .op-doc {
  opacity: 1;
  transform: scale(1);
  animation: office-doc-bob 1.1s ease-in-out infinite;
}

.op-person.role-employee .op-tie { display: none; }

@keyframes office-doc-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-2px) rotate(3deg); }
}

/* 对话气泡 */

.op-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  width: max-content;
  max-width: 230px;
  padding: 7px 10px;
  transform: translate(-50%, 6px) scale(0.94);
  transform-origin: bottom center;
  border: 1px solid rgba(0, 234, 255, 0.24);
  border-radius: 5px;
  background: rgba(5, 12, 20, 0.96);
  color: var(--text-main);
  font-size: 11px;
  line-height: 1.55;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  backdrop-filter: blur(6px);
  z-index: 9;
}

.op-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 1px solid rgba(0, 234, 255, 0.24);
  border-bottom: 1px solid rgba(0, 234, 255, 0.24);
  background: rgba(5, 12, 20, 0.96);
}

.op-bubble.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* 靠边工位的对话气泡向内收，避免被舞台裁切 */
.op-person.edge-right .op-bubble {
  left: auto;
  right: -6px;
  transform: translate(0, 6px) scale(0.94);
}

.op-person.edge-right .op-bubble.show {
  transform: translate(0, 0) scale(1);
}

.op-person.edge-right .op-bubble::after {
  left: auto;
  right: 22px;
}

.op-person.edge-left .op-bubble {
  left: -6px;
  transform: translate(0, 6px) scale(0.94);
}

.op-person.edge-left .op-bubble.show {
  transform: translate(0, 0) scale(1);
}

.op-person.edge-left .op-bubble::after {
  left: 22px;
}

.op-bubble .bubble-who {
  display: block;
  margin-bottom: 3px;
  color: var(--office-manager);
  font-family: var(--font-tech);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.op-bubble.type-task { border-color: rgba(255, 200, 87, 0.5); }
.op-bubble.type-task .bubble-who { color: var(--office-boss); }
.op-bubble.type-task.show { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 18px rgba(255, 200, 87, 0.14); }
.op-bubble.type-report { border-color: rgba(0, 255, 163, 0.45); }
.op-bubble.type-report .bubble-who { color: var(--neon-green); }
.op-bubble.type-report.show { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 255, 163, 0.16); }
.op-bubble.type-data { border-color: rgba(157, 92, 255, 0.5); }
.op-bubble.type-data .bubble-who { color: #c7adff; }
.op-bubble.type-error { border-color: rgba(255, 46, 136, 0.55); }
.op-bubble.type-error .bubble-who { color: #ff7aa8; }
.op-bubble.type-work { border-style: dashed; opacity: 0.86; }
.op-bubble.type-work .bubble-who { color: var(--office-warm); }

/* 实时使用：常驻气泡，展示当前使用人数与功能分布 */
.op-bubble.type-live {
  width: max-content;
  min-width: 132px;
  max-width: 196px;
  padding: 7px 10px 8px;
  border-color: rgba(0, 234, 255, 0.32);
  background: rgba(4, 11, 18, 0.95);
}

.op-bubble.type-live .bubble-who {
  color: var(--office-manager);
}

/* 有人使用时高亮为绿色，和"空闲"形成一眼可辨的对比 */
.op-bubble.type-live.busy {
  border-color: rgba(0, 255, 163, 0.5);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 20px rgba(0, 255, 163, 0.18);
}

.op-bubble.type-live.busy .bubble-who {
  color: var(--neon-green);
}

/* 人数变化时短暂放大，提示"刚有人开始用" */
.op-bubble.type-live.bump {
  animation: office-live-bump 0.72s ease-out;
}

@keyframes office-live-bump {
  0% { transform: translate(-50%, 0) scale(1); }
  28% { transform: translate(-50%, 0) scale(1.12); }
  100% { transform: translate(-50%, 0) scale(1); }
}

.op-person.edge-right .op-bubble.type-live.bump {
  animation-name: office-live-bump-right;
}

@keyframes office-live-bump-right {
  0% { transform: translate(0, 0) scale(1); }
  28% { transform: translate(0, 0) scale(1.12); }
  100% { transform: translate(0, 0) scale(1); }
}

.op-person.edge-left .op-bubble.type-live.bump {
  animation-name: office-live-bump-right;
}

/* 具体人数：气泡里最显眼的一行 */
.op-bubble .bubble-count {
  display: block;
  margin: 1px 0 4px;
  font-family: var(--font-tech);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--neon-green);
}

/* 功能明细：功能名称 + 使用人数 */
.op-bubble .bubble-metrics {
  display: block;
  padding-top: 4px;
  border-top: 1px dashed rgba(0, 234, 255, 0.18);
}

.op-bubble .bubble-metric {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  font-size: 10.5px;
  line-height: 1.7;
}

.op-bubble .bubble-metric i {
  overflow: hidden;
  font-style: normal;
  color: var(--text-main);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.op-bubble .bubble-metric b {
  flex: none;
  font-weight: 600;
  color: var(--neon-green);
}

/* 使用人姓名 */
.op-bubble .bubble-users {
  display: block;
  margin-top: 3px;
  font-size: 9.5px;
  line-height: 1.5;
  color: rgba(230, 247, 255, 0.5);
}

.op-bubble .bubble-idle {
  display: block;
  font-size: 10.5px;
  color: rgba(230, 247, 255, 0.42);
}

/* 空状态 */

.office-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  width: min(420px, 76%);
  padding: 22px 26px;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(0, 234, 255, 0.24);
  border-radius: var(--radius-lg);
  background: rgba(4, 10, 17, 0.82);
  text-align: center;
  backdrop-filter: blur(4px);
}

.office-empty[hidden] { display: none; }

.office-empty b {
  color: var(--text-main);
  font-size: 14px;
  letter-spacing: 0.04em;
}

.office-empty span {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.65;
}

/* 播放进度条 */

.office-progress {
  position: relative;
  height: 3px;
  margin: 0 2px 6px;
  border-radius: 2px;
  background: rgba(0, 234, 255, 0.08);
  overflow: hidden;
  transition: opacity 0.25s ease;
}

.office-progress.idle {
  opacity: 0;
}

.office-progress i {
  position: relative;
  display: block;
  width: 0;
  height: 100%;
  border-radius: 2px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(0, 234, 255, 0.55), rgba(0, 255, 163, 0.85));
  box-shadow: 0 0 10px rgba(0, 234, 255, 0.4);
  transition: width 0.35s ease;
}

/* 进度值不动时也保留流动感，表示动画正在播放 */
.office-progress i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: translateX(-100%);
  animation: office-progress-shine 1.6s linear infinite;
}

.office-progress.paused i::after {
  animation-play-state: paused;
  opacity: 0.3;
}

@keyframes office-progress-shine {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* 暂停时轻微压暗舞台，给出明确的状态反馈 */
.office-stage {
  transition: filter 0.3s ease;
}

.office-stage.paused {
  filter: saturate(0.55) brightness(0.78);
}

/* 当前动作条 */

.office-now {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid var(--office-line);
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, rgba(255, 177, 92, 0.07), rgba(5, 12, 20, 0.72));
  color: var(--text-sub);
  font-size: 12px;
}

.office-now::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--office-warm);
  box-shadow: 0 0 10px rgba(255, 177, 92, 0.55);
  animation: office-now-pulse 1.8s ease-in-out infinite;
}

@keyframes office-now-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* 状态条内容更新时的高亮反馈 */
.office-now.flash {
  animation: office-now-flash 0.62s ease-out;
}

@keyframes office-now-flash {
  0% {
    border-color: rgba(0, 234, 255, 0.55);
    box-shadow: 0 0 0 2px rgba(0, 234, 255, 0.12);
  }
  100% {
    border-color: var(--office-line);
    box-shadow: 0 0 0 0 rgba(0, 234, 255, 0);
  }
}

/* ---------------- 对话记录侧栏 ---------------- */

.office-side {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--office-line);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  overflow: hidden;
}

.office-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 13px;
  border-bottom: 1px solid var(--office-line);
  color: var(--text-muted);
  font-family: var(--font-tech);
  font-size: 10px;
  letter-spacing: 0.16em;
}

.office-count {
  padding: 1px 6px;
  border: 1px solid var(--office-line);
  border-radius: var(--radius-full);
  color: var(--office-warm);
  letter-spacing: 0.06em;
}

.office-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 234, 255, 0.24) transparent;
}

.office-log-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 7px 8px;
  border-left: 2px solid var(--office-line);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(8, 16, 26, 0.5);
  animation: office-log-in 0.28s ease-out both;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.office-log-item:hover {
  background: rgba(0, 234, 255, 0.06);
  border-left-color: rgba(0, 234, 255, 0.42);
}

@keyframes office-log-in {
  from { opacity: 0; transform: translateX(6px); }
  to { opacity: 1; transform: translateX(0); }
}

.office-log-item .log-who {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
}

.office-log-item .log-text {
  color: var(--text-sub);
  font-size: 11.5px;
  line-height: 1.6;
  word-break: break-word;
}

.office-log-item .log-time {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  white-space: nowrap;
  padding-top: 1px;
  opacity: 0.85;
}

.office-log-item.task { border-left-color: rgba(255, 200, 87, 0.65); }
.office-log-item.task .log-who { color: var(--office-boss); }
.office-log-item.report { border-left-color: rgba(0, 255, 163, 0.55); }
.office-log-item.report .log-who { color: var(--neon-green); }
.office-log-item.data { border-left-color: rgba(157, 92, 255, 0.55); }
.office-log-item.data .log-who { color: #c7adff; }
.office-log-item.error { border-left-color: rgba(255, 46, 136, 0.6); }
.office-log-item.error .log-text { color: #ff9dbc; }
.office-log-item.status { border-left-color: rgba(0, 234, 255, 0.4); }
.office-log-item.status .log-text { color: var(--text-muted); font-size: 10.5px; }

.office-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--office-line);
  color: var(--text-faint);
  font-size: 10px;
}

.office-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.office-legend .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--office-employee);
}

.office-legend .dot.manager { background: var(--office-manager); }
.office-legend .dot.boss { background: var(--office-boss); }

/* ---------------- 响应式与无障碍 ---------------- */

@media (max-width: 1180px) {
  .office-body {
    grid-template-columns: minmax(0, 1fr) 258px;
    gap: 10px;
    padding: 10px 12px 12px;
  }

  .office-stage { min-height: 480px; }
  .office-head { grid-template-columns: auto minmax(0, 1fr); }
  .office-head-tools { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 860px) {
  .office-body { grid-template-columns: minmax(0, 1fr); }
  .office-side { max-height: 210px; }
  .office-stage { min-height: 420px; }
  .office-title { font-size: 15px; }
  .office-field select { max-width: 150px; }
  .op-bubble { max-width: 170px; font-size: 10.5px; }
  .office-whiteboard { display: none; }
}

@media (max-width: 560px) {
  .office-stage { min-height: 360px; }
  .office-head { padding: 12px; gap: 10px; }
  .office-back span { display: none; }
  .office-head-tools { gap: 6px; }
  .office-btn { padding: 6px 9px; font-size: 11px; }
  .office-help { left: 12px; right: 12px; width: auto; top: calc(100% + 8px); }
  .office-side { max-height: 180px; }
  .office-desk { width: 66px; }
  .op-person { width: 34px; height: 58px; }
  .op-avatar { width: 34px; height: 50px; }
  .op-head { width: 16px; height: 16px; }
  .op-body { width: 21px; height: 21px; }
  .op-arm { height: 15px; }
  .op-leg { height: 14px; top: 36px; }
  .op-name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .office-demo-dot { animation: none; }

  .op-person {
    transition: none !important;
  }

  .op-person.walking .op-leg,
  .op-person.walking .op-avatar,
  .op-person.working .op-arm,
  .op-person.working::after,
  .office-skyline::after,
  .office-desk .desk-monitor i,
  .office-server i,
  .office-live::before,
  .office-now::before {
    animation: none !important;
  }
}

/* ============================================================
   办公室环境细节：墙面、家具、茶水间、前台、NPC 与桌面道具
   ============================================================ */

.office-back-wall {
  position: absolute;
  left: 0;
  right: 0;
  top: 14%;
  height: 25%;
  z-index: 1;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 7.5%),
    linear-gradient(180deg, #0c1925, #09131c 68%, #0a1620);
  border-bottom: 1px solid rgba(0, 234, 255, 0.12);
  box-shadow: inset 0 -20px 40px rgba(0, 0, 0, 0.35);
}

.office-exit-sign {
  position: absolute;
  left: 1.4%;
  top: 9%;
  padding: 2px 5px;
  border: 1px solid rgba(0, 255, 163, 0.4);
  border-radius: 2px;
  background: rgba(0, 255, 163, 0.08);
  color: rgba(125, 255, 200, 0.86);
  font-family: var(--font-tech);
  font-size: 7px;
  letter-spacing: 0.16em;
  box-shadow: 0 0 12px rgba(0, 255, 163, 0.15);
}

.office-bulletin {
  position: absolute;
  left: 24%;
  top: 10%;
  width: 12%;
  height: 54%;
  padding: 7px 7px 6px;
  border: 2px solid #3a2a1b;
  border-radius: 2px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08), transparent 50%),
    #7a5b3b;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.35);
}

.office-bulletin b {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 244, 220, 0.7);
  font-family: var(--font-tech);
  font-size: 7px;
  letter-spacing: 0.14em;
}

.office-bulletin i {
  display: block;
  height: 8px;
  margin-bottom: 4px;
  background: rgba(255, 250, 235, 0.8);
  box-shadow: 12px 3px 0 -4px rgba(255, 250, 235, 0.5);
  transform: rotate(-1.5deg);
}

.office-bulletin i:nth-of-type(2) { width: 82%; transform: rotate(1deg); }
.office-bulletin i:nth-of-type(3) { width: 66%; transform: rotate(-2deg); background: rgba(255, 220, 140, 0.85); }

.office-bulletin span {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 9px;
  height: 9px;
  border-radius: 1px;
  background: #ffd166;
  transform: rotate(12deg);
}

.office-clock {
  position: absolute;
  left: 49%;
  top: 8%;
  width: 26px;
  height: 26px;
  border: 2px solid rgba(230, 247, 255, 0.36);
  border-radius: 50%;
  background: rgba(232, 246, 252, 0.08);
  box-shadow: 0 0 12px rgba(0, 234, 255, 0.12), inset 0 0 8px rgba(0, 0, 0, 0.4);
}

.office-clock .clock-face {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 49%, rgba(230, 247, 255, 0.35) 49% 51%, transparent 51%) 0 1px / 100% 3px no-repeat,
    linear-gradient(0deg, transparent 49%, rgba(230, 247, 255, 0.35) 49% 51%, transparent 51%) 1px 0 / 3px 100% no-repeat;
}

.office-clock .clock-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 1px;
  border-radius: 1px;
  background: rgba(230, 247, 255, 0.8);
  transform-origin: bottom center;
}

.office-clock .clock-hand.hour { height: 6px; transform: translateX(-50%) rotate(305deg); }
.office-clock .clock-hand.minute { height: 9px; transform: translateX(-50%) rotate(60deg); }
.office-clock .clock-hand.second {
  height: 10px;
  background: rgba(255, 177, 92, 0.9);
  animation: office-clock-tick 8s steps(8, end) infinite;
}

@keyframes office-clock-tick {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}

.office-clock .clock-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--office-warm);
}

.office-ac {
  position: absolute;
  left: 40%;
  top: 9%;
  width: 52px;
  height: 13px;
  border: 1px solid rgba(230, 247, 255, 0.22);
  border-radius: 2px;
  background: linear-gradient(180deg, #d8e6ee, #9fb4c1);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.office-ac span {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 3px;
  height: 2px;
  background: rgba(0, 0, 0, 0.3);
}

.office-ac i {
  position: absolute;
  left: 50%;
  top: 3px;
  width: 12px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: rgba(0, 234, 255, 0.45);
}

.office-neon {
  position: absolute;
  left: 35%;
  top: 58%;
  color: rgba(0, 234, 255, 0.55);
  font-family: var(--font-tech);
  font-size: 8px;
  letter-spacing: 0.16em;
  line-height: 1.1;
  text-shadow: 0 0 8px rgba(0, 234, 255, 0.4);
}

.office-neon span {
  display: block;
  color: rgba(255, 177, 92, 0.6);
  text-shadow: 0 0 8px rgba(255, 177, 92, 0.35);
}

.office-wall-art {
  position: absolute;
  border: 2px solid rgba(160, 130, 90, 0.6);
  background: linear-gradient(150deg, rgba(255, 177, 92, 0.12), rgba(0, 234, 255, 0.08));
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.office-wall-art.art-a {
  left: 55%;
  top: 32%;
  width: 26px;
  height: 20px;
}

.office-wall-art.art-a i {
  display: block;
  height: 1px;
  margin: 4px 3px 0;
  background: rgba(230, 247, 255, 0.3);
}

.office-wall-art.art-b {
  left: 7%;
  top: 31%;
  width: 20px;
  height: 16px;
  border-radius: 50%;
}

.office-wall-art.art-b i {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 177, 92, 0.6), rgba(157, 92, 255, 0.25));
}

/* 百叶窗 */

.office-blinds {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(3, 9, 14, 0.55) 0 3px,
    rgba(120, 180, 210, 0.06) 3px 6px
  );
  opacity: 0.55;
  pointer-events: none;
}

/* 地毯与会议区 */

.office-rug {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18%;
  height: 9%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(60% 60% at 40% 30%, rgba(255, 255, 255, 0.08), transparent 70%),
    linear-gradient(160deg, rgba(40, 70, 90, 0.65), rgba(12, 28, 40, 0.75));
  border: 1px solid rgba(0, 234, 255, 0.1);
  z-index: 1;
}

.office-glass-wall {
  position: absolute;
  left: 34%;
  top: 37%;
  width: 32%;
  height: 19%;
  z-index: 2;
  border-top: 2px solid rgba(0, 234, 255, 0.18);
  border-left: 1px solid rgba(0, 234, 255, 0.12);
  border-right: 1px solid rgba(0, 234, 255, 0.12);
  background: linear-gradient(180deg, rgba(120, 220, 255, 0.045), transparent 70%);
  box-shadow: 0 -4px 18px rgba(0, 234, 255, 0.05);
}

.office-glass-wall i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(0, 234, 255, 0.14);
}

.office-glass-wall b {
  position: absolute;
  left: 8px;
  top: -13px;
  padding: 1px 5px;
  border: 1px solid rgba(0, 234, 255, 0.18);
  border-radius: 2px;
  background: rgba(4, 10, 16, 0.86);
  color: rgba(0, 234, 255, 0.55);
  font-family: var(--font-tech);
  font-size: 7px;
  letter-spacing: 0.14em;
  font-weight: 400;
}

/* 书架 / 文件柜 / 打印机 */

.office-bookshelf {
  position: absolute;
  left: 1.4%;
  top: 38%;
  width: 44px;
  height: 82px;
  border: 1px solid rgba(140, 110, 78, 0.55);
  border-radius: 2px;
  background: linear-gradient(180deg, #2a2119, #17120d);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
  z-index: 3;
}

.office-bookshelf span {
  position: absolute;
  inset: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 26px 0 -24px rgba(255, 255, 255, 0.1), 0 52px 0 -50px rgba(255, 255, 255, 0.1);
}

.office-bookshelf i {
  position: absolute;
  bottom: 10px;
  width: 5px;
  height: 18px;
  border-radius: 1px;
  background: #4cc9f0;
  opacity: 0.55;
}

.office-bookshelf i:nth-of-type(1) { left: 7px; }
.office-bookshelf i:nth-of-type(2) { left: 14px; height: 15px; background: #ffb15c; }
.office-bookshelf i:nth-of-type(3) { left: 21px; height: 20px; background: #8b5cf6; }
.office-bookshelf i:nth-of-type(4) { left: 28px; height: 13px; background: #4ade80; }

.office-bookshelf b {
  position: absolute;
  left: 5px;
  bottom: 33px;
  color: rgba(255, 244, 220, 0.4);
  font-family: var(--font-tech);
  font-size: 6px;
  letter-spacing: 0.12em;
}

.office-cabinet {
  position: absolute;
  left: 13%;
  top: 41%;
  width: 38px;
  height: 50px;
  border: 1px solid rgba(120, 140, 155, 0.3);
  border-radius: 2px;
  background: linear-gradient(180deg, #24313c, #131c24);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.35);
  z-index: 3;
}

.office-cabinet span,
.office-cabinet i {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
}

.office-cabinet span { top: 4px; }
.office-cabinet i { top: 22px; }
.office-cabinet i:nth-of-type(2) { top: 40px; height: 8px; }

.office-printer {
  position: absolute;
  left: 2.6%;
  top: 60%;
  width: 42px;
  height: 30px;
  border: 1px solid rgba(120, 140, 155, 0.35);
  border-radius: 2px;
  background: linear-gradient(180deg, #2b3945, #17222b);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.35);
  z-index: 3;
}

.office-printer span {
  position: absolute;
  left: 5px;
  top: -4px;
  width: 22px;
  height: 5px;
  border-radius: 1px;
  background: #d8e2e8;
  opacity: 0.7;
}

.office-printer i {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 10px;
  height: 3px;
  border-radius: 1px;
  background: rgba(0, 234, 255, 0.35);
  box-shadow: 0 0 8px rgba(0, 234, 255, 0.2);
}

.office-printer b {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  animation: office-server-blink 3.2s steps(2, end) infinite;
}

/* 前台与休息沙发 */

.office-reception-desk {
  position: absolute;
  left: 4.8%;
  top: 87%;
  width: 58px;
  height: 30px;
  transform: translate(-50%, -100%);
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, #35505f, #1b2c37);
  border: 1px solid rgba(0, 234, 255, 0.2);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  z-index: 3;
}

.office-reception-desk span {
  position: absolute;
  left: 50%;
  top: -15px;
  width: 18px;
  height: 16px;
  transform: translateX(-50%);
  border: 1px solid rgba(0, 234, 255, 0.26);
  border-radius: 2px;
  background: #07141e;
}

.office-reception-desk i {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 5px;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.office-reception-desk b {
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  color: rgba(0, 234, 255, 0.55);
  font-family: var(--font-tech);
  font-size: 6px;
  letter-spacing: 0.1em;
}

.office-sofa {
  position: absolute;
  left: 9%;
  top: 93%;
  width: 94px;
  height: 38px;
  transform: translate(-50%, -100%);
  z-index: 3;
}

.office-sofa span {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 0;
  height: 22px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, #2f4b5e, #1a2c3a);
  border: 1px solid rgba(0, 234, 255, 0.14);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
}

.office-sofa span::before,
.office-sofa span::after {
  content: '';
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
}

.office-sofa span::before { left: 34%; }
.office-sofa span::after { right: 34%; }

.office-sofa i {
  position: absolute;
  bottom: 0;
  width: 12px;
  height: 20px;
  border-radius: 3px;
  background: linear-gradient(180deg, #29414f, #15242e);
}

.office-sofa i:nth-of-type(1) { left: 0; }
.office-sofa i:nth-of-type(2) { right: 0; }

.office-coffee-table {
  position: absolute;
  left: 17%;
  top: 93%;
  width: 38px;
  height: 16px;
  transform: translate(-50%, -100%);
  z-index: 3;
}

.office-coffee-table span {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, #3a2c21, #221a13);
  border: 1px solid rgba(255, 200, 130, 0.18);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}

.office-coffee-table i {
  position: absolute;
  left: 50%;
  top: 3px;
  width: 10px;
  height: 4px;
  transform: translateX(-50%) rotate(-8deg);
  border-radius: 1px;
  background: rgba(255, 250, 235, 0.6);
}

/* 茶水间 */

.office-water-cooler {
  position: absolute;
  right: 16%;
  top: 87%;
  width: 24px;
  height: 56px;
  transform: translate(50%, -100%);
  border-radius: 3px;
  background: linear-gradient(180deg, #c9dbe5, #94aab8);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
  z-index: 3;
}

.office-water-cooler .wc-bottle {
  position: absolute;
  left: 50%;
  top: -15px;
  width: 15px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, rgba(120, 210, 255, 0.9), rgba(50, 140, 200, 0.75));
  box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.35);
}

.office-water-cooler .wc-bottle::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  animation: office-bubble 2.8s ease-in infinite;
}

@keyframes office-bubble {
  0% { transform: translate(-50%, 0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(-50%, -12px); opacity: 0; }
}

.office-water-cooler .wc-tap {
  position: absolute;
  left: 50%;
  top: 27px;
  width: 5px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 1px;
  background: #55707f;
}

.office-water-cooler b {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 6px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 1px;
  background: rgba(0, 234, 255, 0.35);
}

.office-water-cooler em {
  position: absolute;
  left: 50%;
  top: 36px;
  width: 12px;
  height: 9px;
  transform: translateX(-50%);
  border-radius: 1px;
  background: rgba(0, 234, 255, 0.1);
}

.office-coffee-machine {
  position: absolute;
  right: 9%;
  top: 90%;
  width: 28px;
  height: 42px;
  transform: translate(50%, -100%);
  border-radius: 3px;
  background: linear-gradient(180deg, #2c3b47, #151f28);
  border: 1px solid rgba(255, 177, 92, 0.26);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
  z-index: 3;
}

.office-coffee-machine span {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 5px;
  height: 14px;
  border-radius: 1px;
  background: #07131c;
  border: 1px solid rgba(0, 234, 255, 0.18);
}

.office-coffee-machine i.steam {
  position: absolute;
  left: 50%;
  top: -8px;
  width: 3px;
  height: 8px;
  border-radius: 50%;
  background: rgba(230, 247, 255, 0.2);
  animation: office-steam 3.2s ease-in-out infinite;
}

.office-coffee-machine i.steam.s2 {
  left: 60%;
  animation-delay: 1.1s;
}

@keyframes office-steam {
  0% { opacity: 0; transform: translateY(4px) scaleX(0.7); }
  40% { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-10px) scaleX(1.3); }
}

.office-coffee-machine b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  text-align: center;
  color: rgba(255, 177, 92, 0.5);
  font-family: var(--font-tech);
  font-size: 5px;
  letter-spacing: 0.1em;
}

.office-fridge {
  position: absolute;
  right: 3%;
  top: 84%;
  width: 30px;
  height: 64px;
  transform: translate(50%, -100%);
  border-radius: 2px;
  background: linear-gradient(180deg, #d3e0e8, #9fb2bf);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
  z-index: 3;
}

.office-fridge span {
  position: absolute;
  left: 3px;
  right: 3px;
  top: 24px;
  height: 1px;
  background: rgba(0, 0, 0, 0.22);
}

.office-fridge i {
  position: absolute;
  right: 4px;
  top: 8px;
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background: rgba(0, 0, 0, 0.3);
}

.office-fridge b {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  color: rgba(0, 90, 110, 0.45);
  font-family: var(--font-tech);
  font-size: 6px;
}

.office-fridge::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: #ffd166;
  box-shadow: 7px 1px 0 #ff6b9d, 2px 8px 0 #4cc9f0;
  opacity: 0.8;
}

.office-snack-table {
  position: absolute;
  right: 12%;
  top: 94%;
  width: 52px;
  height: 15px;
  transform: translate(50%, -100%);
  border-radius: 2px;
  background: linear-gradient(180deg, #3a2c21, #211912);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
  z-index: 3;
}

.office-snack-table i {
  position: absolute;
  top: -6px;
  width: 10px;
  height: 6px;
  border-radius: 1px;
  background: rgba(255, 200, 120, 0.75);
}

.office-snack-table i:nth-child(1) { left: 5px; }
.office-snack-table i:nth-child(2) { left: 20px; background: rgba(255, 120, 160, 0.7); }
.office-snack-table i:nth-child(3) { left: 34px; background: rgba(120, 220, 180, 0.7); }

/* 衣帽架 / 垃圾桶 / 纸箱 */

.office-coat-rack {
  position: absolute;
  left: 18.5%;
  top: 35%;
  width: 18px;
  height: 60px;
  z-index: 3;
}

.office-coat-rack span {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3px;
  height: 54px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #6d7f8c, #2a3741);
  border-radius: 2px;
}

.office-coat-rack i {
  position: absolute;
  border-radius: 40% 40% 20% 20%;
  background: linear-gradient(180deg, rgba(80, 110, 130, 0.7), rgba(30, 46, 58, 0.7));
}

.office-coat-rack i:nth-of-type(1) { left: 1px; top: 12px; width: 9px; height: 18px; }
.office-coat-rack i:nth-of-type(2) { right: 0; top: 8px; width: 8px; height: 22px; background: linear-gradient(180deg, rgba(120, 90, 140, 0.6), rgba(40, 30, 50, 0.7)); }

.office-trash {
  position: absolute;
  width: 13px;
  height: 17px;
  border-radius: 2px 2px 3px 3px;
  background: linear-gradient(180deg, #34434f, #1b262e);
  border: 1px solid rgba(0, 234, 255, 0.12);
  z-index: 3;
}

.office-trash span {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 3px;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.office-trash.trash-a { left: 20%; top: 67%; }
.office-trash.trash-b { right: 26%; top: 88%; }

.office-boxes {
  position: absolute;
  right: 21%;
  top: 70%;
  width: 38px;
  height: 30px;
  z-index: 3;
}

.office-boxes i {
  position: absolute;
  border: 1px solid rgba(180, 140, 90, 0.45);
  border-radius: 1px;
  background: linear-gradient(150deg, #8a6a42, #5b452a);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.office-boxes i:nth-child(1) { left: 0; bottom: 0; width: 24px; height: 18px; }
.office-boxes i:nth-child(2) { right: 0; bottom: 6px; width: 18px; height: 22px; background: linear-gradient(150deg, #9a7850, #624b2e); }

.office-boxes i::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
}

/* 绿植补充 */

.office-plant.plant-a {
  left: 1.8%;
  top: 76%;
  bottom: auto;
}

.office-plant.plant-b {
  right: auto;
  left: 70%;
  top: 37%;
  bottom: auto;
  transform: scale(0.92);
}

.office-plant.plant-c {
  left: 44%;
  top: 87%;
  bottom: auto;
  transform: scale(0.78);
}

.office-hanging-plant {
  position: absolute;
  left: 57%;
  top: 32%;
  width: 26px;
  height: 48px;
  z-index: 3;
}

.office-hanging-plant::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 14px;
  background: rgba(200, 220, 230, 0.4);
}

.office-hanging-plant::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 12px;
  width: 18px;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 2px 2px 5px 5px;
  background: linear-gradient(180deg, #8a5b3b, #4a3020);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
}

.office-hanging-plant i {
  position: absolute;
  left: 50%;
  top: 22px;
  width: 5px;
  height: 22px;
  border-radius: 60% 60% 40% 40%;
  background: linear-gradient(180deg, #2e8f6a, #0f3f2f);
  transform-origin: top center;
  animation: office-sway 5.6s ease-in-out infinite;
}

.office-hanging-plant i:nth-child(1) { transform: translateX(-50%) rotate(-18deg); }
.office-hanging-plant i:nth-child(2) { height: 28px; transform: translateX(-50%) rotate(2deg); animation-delay: 0.6s; }
.office-hanging-plant i:nth-child(3) { transform: translateX(-50%) rotate(20deg); animation-delay: 1.2s; }
.office-hanging-plant i:nth-child(4) { height: 18px; transform: translateX(-50%) rotate(-4deg); animation-delay: 1.8s; }

@keyframes office-sway {
  0%, 100% { margin-left: 0; }
  50% { margin-left: 2px; }
}

/* 服务器与桌面道具 */

.office-server {
  right: 4.5%;
  bottom: 38%;
}

.office-desk .desk-chair {
  position: absolute;
  left: 50%;
  top: -15px;
  width: 30px;
  height: 15px;
  transform: translateX(-50%);
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #24323d, #131d25);
  border: 1px solid rgba(0, 234, 255, 0.1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
}

.office-desk .desk-chair::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 14px;
  width: 4px;
  height: 8px;
  transform: translateX(-50%);
  background: #1a2832;
}

.office-desk .desk-pc {
  position: absolute;
  right: 7%;
  top: 34px;
  width: 10px;
  height: 16px;
  border-radius: 1px;
  background: linear-gradient(180deg, #1b2731, #0b131a);
  border: 1px solid rgba(0, 234, 255, 0.12);
}

.office-desk .desk-pc::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 4px 0 #00eaff;
}

.office-desk .desk-keyboard {
  position: absolute;
  left: 50%;
  top: 33px;
  width: 36%;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 1px;
  background: #0d1922;
  border: 1px solid rgba(0, 234, 255, 0.1);
}

.office-desk .desk-mug {
  position: absolute;
  right: 22%;
  top: 27px;
  width: 6px;
  height: 7px;
  border-radius: 1px 1px 3px 3px;
  background: #d8c6a4;
  box-shadow: 2px 0 0 -1px #d8c6a4;
}

.office-desk .desk-paper {
  position: absolute;
  left: 15%;
  top: 31px;
  width: 12px;
  height: 8px;
  background: rgba(240, 236, 220, 0.75);
  transform: rotate(-7deg);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15);
}

.office-desk .desk-sticky {
  position: absolute;
  right: 10%;
  top: 4px;
  width: 7px;
  height: 7px;
  background: #ffd166;
  transform: rotate(6deg);
  opacity: 0.8;
}

.office-desk .desk-mini-plant {
  position: absolute;
  left: 5%;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50% 50% 30% 30%;
  background: linear-gradient(180deg, #2e8f6a, #123f30);
  box-shadow: 0 3px 0 -1px #3a2b1d;
}

.office-desk:nth-child(2n) .desk-mug { background: #b8a7ff; box-shadow: 2px 0 0 -1px #b8a7ff; }
.office-desk:nth-child(3n) .desk-sticky { background: #8be9fd; transform: rotate(-8deg); }
.office-desk:nth-child(3n) .desk-mini-plant { left: auto; right: 12%; }
.office-desk:nth-child(4n) .desk-paper { transform: rotate(9deg); left: 20%; }

.op-person.npc-staff {
  opacity: 0.72;
}

.op-person.npc-staff .op-bubble {
  display: none;
}

/* NPC 同事 */

.office-npcs {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.office-npc {
  position: absolute;
  width: 30px;
  height: 54px;
  transform: translate(-50%, -100%);
  opacity: 0.9;
  filter: saturate(0.62);
}

.npc-head {
  position: absolute;
  left: 50%;
  top: -2px;
  width: 18px;
  height: 18px;
  transform: translateX(-50%);
  z-index: 2;
}

/* NPC 也使用同一套 SVG 脸部，保持和 Agent 一致的观感 */
.npc-head .op-face {
  color: #2f3a45;
}

.npc-torso {
  position: absolute;
  left: 50%;
  top: 13px;
  width: 18px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(170deg, #5a7285, #263845);
}

.npc-legs {
  position: absolute;
  left: 50%;
  top: 34px;
  width: 12px;
  height: 19px;
  transform: translateX(-50%);
  border-left: 4px solid #1a2833;
  border-right: 4px solid #1a2833;
}

.npc-legs::after {
  content: '';
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: -2px;
  height: 3px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
}

.npc-tag {
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  transform: translateX(-50%);
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(4, 10, 16, 0.72);
  color: rgba(160, 190, 210, 0.75);
  font-size: 8px;
  white-space: nowrap;
}

.npc-reception {
  left: 7.5%;
  top: 88%;
  animation: npc-idle 4.6s ease-in-out infinite;
}

.npc-reception .npc-torso {
  background: linear-gradient(170deg, #48657a, #22323f);
}

.npc-cleaner {
  left: 12%;
  top: 93%;
  animation: npc-patrol-bottom 42s linear infinite alternate;
}

.npc-cleaner .npc-torso {
  background: linear-gradient(170deg, #59636b, #2a3238);
}

.npc-cleaner .npc-legs {
  animation: npc-walk 0.9s ease-in-out infinite alternate;
}

.npc-mop {
  position: absolute;
  right: -7px;
  top: 26px;
  width: 2px;
  height: 30px;
  background: #8b6a45;
  transform: rotate(18deg);
  transform-origin: top center;
}

.npc-mop::after {
  content: '';
  position: absolute;
  left: -4px;
  bottom: 0;
  width: 10px;
  height: 5px;
  border-radius: 1px;
  background: rgba(160, 190, 180, 0.6);
}

.npc-intern {
  left: 14%;
  top: 45%;
  animation: npc-patrol-mid 30s linear infinite alternate;
}

.npc-intern .npc-legs {
  animation: npc-walk 0.7s ease-in-out infinite alternate;
}

.npc-papers {
  position: absolute;
  left: 50%;
  top: 22px;
  width: 10px;
  height: 7px;
  transform: translateX(-50%) rotate(-8deg);
  background: rgba(245, 240, 225, 0.8);
  box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.12);
}

.npc-cooler {
  left: 86%;
  top: 90%;
  animation: npc-idle 3.8s ease-in-out infinite;
}

.npc-cooler .npc-torso {
  background: linear-gradient(170deg, #6b5a7e, #322a3c);
}

.npc-cup {
  position: absolute;
  right: -2px;
  top: 26px;
  width: 5px;
  height: 6px;
  border-radius: 1px 1px 2px 2px;
  background: #e6e2d4;
  animation: npc-sip 5.4s ease-in-out infinite;
  transform-origin: top center;
}

@keyframes npc-idle {
  0%, 100% { transform: translate(-50%, -100%); }
  50% { transform: translate(-50%, calc(-100% - 2px)); }
}

@keyframes npc-walk {
  from { transform: translateX(-50%) rotate(-6deg); }
  to { transform: translateX(-50%) rotate(6deg); }
}

@keyframes npc-sip {
  0%, 55%, 100% { transform: rotate(0deg); }
  62%, 78% { transform: rotate(-24deg) translateY(-3px); }
}

@keyframes npc-patrol-bottom {
  0% { left: 11%; }
  35% { left: 52%; }
  55% { left: 52%; }
  100% { left: 91%; }
}

@keyframes npc-patrol-mid {
  0% { left: 12%; }
  42% { left: 64%; }
  58% { left: 64%; }
  100% { left: 12%; }
}

/* 办公室猫 */

.office-cat {
  position: absolute;
  left: 50%;
  top: 96.5%;
  width: 28px;
  height: 16px;
  transform: translate(-50%, -100%);
  animation: cat-patrol 22s linear infinite alternate;
}

.cat-body {
  position: absolute;
  left: 2px;
  top: 4px;
  width: 20px;
  height: 9px;
  border-radius: 7px 9px 5px 5px;
  background: linear-gradient(180deg, #c59a6d, #8a6240);
}

.cat-head {
  position: absolute;
  right: 0;
  top: 1px;
  width: 10px;
  height: 9px;
  border-radius: 50% 50% 45% 45%;
  background: #c59a6d;
}

.cat-head::before,
.cat-head::after {
  content: '';
  position: absolute;
  top: -3px;
  width: 4px;
  height: 4px;
  background: #a97c52;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.cat-head::before { left: 0; }
.cat-head::after { right: 0; }

.cat-tail {
  position: absolute;
  left: -5px;
  top: 2px;
  width: 8px;
  height: 12px;
  border: 2px solid #a97c52;
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform-origin: bottom right;
  animation: cat-tail 1.8s ease-in-out infinite;
}

@keyframes cat-tail {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(16deg); }
}

@keyframes cat-patrol {
  0% { left: 42%; }
  50% { left: 62%; }
  100% { left: 48%; }
}

/* 顶灯地面光斑 */

.office-light-pool {
  position: absolute;
  top: 34%;
  width: 30%;
  height: 42%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    50% 46% at 50% 42%,
    rgba(255, 206, 148, 0.12),
    rgba(255, 198, 138, 0.05) 52%,
    transparent 76%
  );
  filter: blur(6px);
  z-index: 1;
  pointer-events: none;
}

.office-light-pool.pool-1 { left: 17%; }
.office-light-pool.pool-2 { left: 48%; }
.office-light-pool.pool-3 { left: 79%; }

/* 会议室屏幕 */

.office-glass-wall .meeting-screen {
  position: absolute;
  right: 9%;
  top: 13%;
  width: 27%;
  height: 38%;
  border-radius: 2px;
  border: 1px solid rgba(0, 234, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(90, 210, 255, 0.18), rgba(14, 44, 66, 0.42));
  box-shadow: 0 0 16px rgba(0, 234, 255, 0.16), inset 0 0 12px rgba(0, 234, 255, 0.12);
  overflow: hidden;
}

.office-glass-wall .meeting-screen b {
  position: absolute;
  left: 14%;
  top: 24%;
  width: 52%;
  height: 3px;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: rgba(180, 240, 255, 0.42);
}

.office-glass-wall .meeting-screen em {
  position: absolute;
  left: 14%;
  top: 52%;
  width: 34%;
  height: 3px;
  background: rgba(180, 240, 255, 0.26);
}

/* 会议椅 */

.office-meeting .meeting-chair {
  position: absolute;
  width: 15px;
  height: 9px;
  border-radius: 3px 3px 2px 2px;
  background: linear-gradient(180deg, #263b4d, #101d28);
  border: 1px solid rgba(0, 234, 255, 0.14);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.45);
  z-index: 0;
}

.office-meeting .meeting-chair.mc-1 { left: 12%; top: -20%; }
.office-meeting .meeting-chair.mc-2 { left: 43%; top: -22%; }
.office-meeting .meeting-chair.mc-3 { left: 74%; top: -20%; }
.office-meeting .meeting-chair.mc-4 { left: 12%; bottom: -18%; }
.office-meeting .meeting-chair.mc-5 { left: 43%; bottom: -20%; }
.office-meeting .meeting-chair.mc-6 { left: 74%; bottom: -18%; }

/* 绿植补充位置 */

.office-plant.plant-d {
  left: 57%;
  top: 90%;
  bottom: auto;
  transform: scale(0.82);
}

html.light .office-light-pool {
  opacity: 0.5;
}

html.light .office-meeting .meeting-chair {
  background: linear-gradient(180deg, #cfd8e0, #9aa8b4);
  border-color: rgba(30, 60, 80, 0.18);
}

html.light .office-glass-wall .meeting-screen {
  background: linear-gradient(180deg, rgba(80, 170, 220, 0.3), rgba(190, 220, 235, 0.5));
  border-color: rgba(30, 90, 120, 0.28);
}

html.light .office-sky {
  background:
    radial-gradient(2px 2px at 18% 22%, rgba(255, 255, 255, 0.95), transparent 60%),
    radial-gradient(1.5px 1.5px at 62% 14%, rgba(255, 255, 255, 0.85), transparent 60%),
    linear-gradient(180deg, #e2f3fc, #cbe7f6 55%, #b6def2);
}

html.light .office-skyline {
  background: repeating-linear-gradient(
    90deg,
    #a6bccb 0 7%,
    #bccfdb 7% 10%,
    #93aebe 10% 16%,
    #b0c6d4 16% 19%,
    #a6bccb 19% 27%,
    #bccfdb 27% 31%,
    #93aebe 31% 38%,
    #b4cad7 38% 42%,
    #a6bccb 42% 50%,
    #b0c6d4 50% 54%,
    #93aebe 54% 61%,
    #bccfdb 61% 65%,
    #a6bccb 65% 73%,
    #b4cad7 73% 77%,
    #93aebe 77% 85%,
    #bccfdb 85% 89%,
    #a6bccb 89% 100%
  );
  opacity: 0.9;
}

html.light .office-window-mullion::before,
html.light .office-window-mullion::after {
  background: rgba(40, 90, 120, 0.2);
}

html.light .office-blinds {
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.6) 0 3px,
    rgba(140, 170, 190, 0.18) 3px 6px
  );
  opacity: 0.5;
}

html.light .office-meeting-top {
  background:
    radial-gradient(60% 60% at 40% 30%, rgba(255, 255, 255, 0.75), transparent 70%),
    linear-gradient(160deg, #f2f6f9, #cbd8e2);
  border-color: rgba(30, 70, 100, 0.16);
  box-shadow: 0 10px 22px rgba(20, 50, 70, 0.18), inset 0 0 20px rgba(255, 255, 255, 0.5);
}

html.light .office-meeting-leg {
  background: linear-gradient(180deg, #b9c6d0, #8da0ad);
}

/* ---------------- NPC 与办公环境补充细节 ---------------- */

/* 保安：门口站岗，帽檐 + 肩章 */
.npc-security {
  left: 9%;
  top: 68%;
  animation: npc-idle 5.4s ease-in-out infinite;
}

.npc-security .npc-torso {
  background: linear-gradient(170deg, #34506e, #1b2a3a);
}

.npc-security::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 20px;
  width: 6px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 1px;
  background: #ffd166;
  box-shadow: -6px 0 0 rgba(255, 209, 102, 0.85), 6px 0 0 rgba(255, 209, 102, 0.85);
}

.npc-cap {
  position: absolute;
  left: 50%;
  top: -5px;
  width: 19px;
  height: 9px;
  transform: translateX(-50%);
  border-radius: 9px 9px 2px 2px;
  background: linear-gradient(180deg, #24384c, #16232f);
  border-bottom: 2px solid #3d6a90;
  z-index: 3;
}

/* 外卖员：门口等餐，手提外卖袋轻轻晃动 */
.npc-delivery {
  left: 17%;
  top: 71%;
  animation: npc-idle 4.2s ease-in-out infinite;
}

.npc-delivery .npc-torso {
  background: linear-gradient(170deg, #d9a05a, #8a5c26);
}

.npc-bag {
  position: absolute;
  right: -7px;
  top: 20px;
  width: 12px;
  height: 14px;
  border-radius: 2px 2px 3px 3px;
  background: linear-gradient(170deg, #e8b06a, #a86e33);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  transform-origin: top center;
  animation: npc-bag-sway 3.2s ease-in-out infinite;
}

.npc-bag::before {
  content: '';
  position: absolute;
  left: 3px;
  top: -5px;
  width: 6px;
  height: 6px;
  border: 1.5px solid #c9924f;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}

@keyframes npc-bag-sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(4deg); }
}

/* 打电话的同事：靠窗来回踱步，偶尔把手机抬到耳边 */
.npc-caller {
  left: 52%;
  top: 76%;
  animation: npc-pace 10s ease-in-out infinite;
}

.npc-caller .npc-torso {
  background: linear-gradient(170deg, #4a7d84, #24444c);
}

.npc-caller .npc-phone {
  animation-duration: 5.2s;
}

@keyframes npc-pace {
  0%, 100% { left: 52%; }
  45% { left: 55%; }
  55% { left: 55%; }
}

/* 手机（前台 / 通话同事共用） */
.npc-phone {
  position: absolute;
  right: 2px;
  top: 9px;
  width: 3px;
  height: 9px;
  border-radius: 1px;
  background: #2b3742;
  transform-origin: top center;
  animation: npc-call 6s ease-in-out infinite;
  z-index: 3;
}

@keyframes npc-call {
  0%, 55%, 100% { transform: rotate(0deg) translate(0, 0); opacity: 0.85; }
  62%, 86% { transform: rotate(-26deg) translate(-2px, -2px); opacity: 1; }
}

/* 打印机出纸 */
.office-printer .printer-paper {
  position: absolute;
  left: 50%;
  top: calc(100% - 2px);
  width: 16px;
  height: 9px;
  border-radius: 0 0 1px 1px;
  background: linear-gradient(180deg, #eef4f7, #cfdae1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  transform-origin: top center;
  animation: office-print-eject 7.5s ease-in-out infinite;
}

@keyframes office-print-eject {
  0%, 52%, 100% { transform: translateX(-50%) translateY(-6px) scaleY(0.3); opacity: 0; }
  60% { transform: translateX(-50%) translateY(0) scaleY(1); opacity: 1; }
  88% { transform: translateX(-50%) translateY(4px) scaleY(1); opacity: 1; }
}

/* 灭火器 */
.office-extinguisher {
  position: absolute;
  left: 1%;
  top: 61%;
  width: 12px;
  height: 27px;
  z-index: 3;
}

.office-extinguisher span {
  position: absolute;
  left: 1px;
  bottom: 0;
  width: 10px;
  height: 18px;
  border-radius: 3px 3px 4px 4px;
  background: linear-gradient(180deg, #d9483f, #8d211b);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.office-extinguisher i {
  position: absolute;
  left: 4px;
  top: 2px;
  width: 4px;
  height: 5px;
  border-radius: 1px;
  background: #38424c;
}

.office-extinguisher i::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 1px;
  width: 4px;
  height: 1.5px;
  background: #38424c;
}

.office-extinguisher b {
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-tech);
  font-size: 3.5px;
  letter-spacing: 0.06em;
}

/* 雨伞架 */
.office-umbrella-stand {
  position: absolute;
  left: 15.5%;
  top: 87%;
  width: 15px;
  height: 24px;
  z-index: 3;
}

.office-umbrella-stand span {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 15px;
  height: 13px;
  border-radius: 2px 2px 4px 4px;
  background: linear-gradient(180deg, #3b4c5a, #1c2831);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
}

.office-umbrella-stand i {
  position: absolute;
  bottom: 9px;
  width: 2px;
  height: 16px;
  border-radius: 1px;
  background: linear-gradient(180deg, #5896c0, #2a5a7d);
}

.office-umbrella-stand i:nth-of-type(1) { left: 4px; transform: rotate(-6deg); }
.office-umbrella-stand i:nth-of-type(2) { left: 9px; transform: rotate(7deg); }

/* 墙面插座 / 消防报警器 */
.office-socket {
  position: absolute;
  left: 36.5%;
  top: 64%;
  width: 9px;
  height: 11px;
  border-radius: 1px;
  background: #e3ecf1;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
}

.office-socket i {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 3px;
  height: 5px;
  background: radial-gradient(circle at 25% 50%, #46525c 0 1px, transparent 1.2px),
    radial-gradient(circle at 75% 50%, #46525c 0 1px, transparent 1.2px);
}

.office-fire-alarm {
  position: absolute;
  left: 56%;
  top: 62%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0776a, #9d2a20);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.office-fire-alarm i {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
}

/* 窗台小盆栽 */
.office-window-plant {
  position: absolute;
  left: 7%;
  bottom: 1px;
  width: 16px;
  height: 18px;
  z-index: 2;
}

.office-window-plant::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 11px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 2px 2px 4px 4px;
  background: linear-gradient(180deg, #5b6f7c, #33444e);
}

.office-window-plant::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 10px;
  height: 11px;
  transform: translateX(-50%);
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 35% 30%, #3f9d74, #16543c);
  box-shadow: -4px 3px 0 -1px rgba(31, 122, 92, 0.85), 4px 3px 0 -1px rgba(31, 122, 92, 0.85);
}

/* 饮水机旁的一次性纸杯 */
.office-cups {
  position: absolute;
  right: 18.6%;
  top: 89%;
  width: 14px;
  height: 12px;
  z-index: 3;
}

.office-cups i {
  position: absolute;
  bottom: 0;
  width: 5px;
  height: 6px;
  border-radius: 1px 1px 2px 2px;
  background: linear-gradient(180deg, #f2f6f8, #c6d4dc);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.office-cups i:nth-child(1) { left: 0; }
.office-cups i:nth-child(2) { left: 3px; bottom: 3px; }
.office-cups i:nth-child(3) { left: 6px; bottom: 6px; }

/* 外卖袋 */
.office-delivery-bag {
  position: absolute;
  right: 26%;
  top: 92%;
  width: 16px;
  height: 17px;
  z-index: 3;
}

.office-delivery-bag span {
  position: absolute;
  inset: 0;
  border-radius: 2px 2px 3px 3px;
  background: linear-gradient(170deg, #e6b276, #a9713a);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 3px 7px rgba(0, 0, 0, 0.3);
}

.office-delivery-bag span::before {
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  top: -4px;
  height: 5px;
  border: 1.5px solid #c9975c;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}

.office-delivery-bag b {
  position: absolute;
  left: 50%;
  top: 5px;
  transform: translateX(-50%);
  color: rgba(70, 40, 16, 0.7);
  font-family: var(--font-tech);
  font-size: 3.4px;
  line-height: 1.1;
  text-align: center;
  letter-spacing: 0.04em;
}

/* 更细的屏幕/主机动态 */

.office-desk .desk-monitor i::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background: linear-gradient(180deg, transparent, rgba(0, 234, 255, 0.5), transparent);
  animation: office-screen-scan 2.8s linear infinite;
}

@keyframes office-screen-scan {
  from { transform: translateY(-6px); }
  to { transform: translateY(16px); }
}

.office-desk .desk-pc::after {
  animation: office-led 3.4s steps(2, end) infinite;
}

@keyframes office-led {
  0%, 45% { opacity: 0.45; }
  46%, 100% { opacity: 1; }
}

.office-desk:nth-child(2n) .desk-monitor i { animation-delay: -1.2s; }
.office-desk:nth-child(3n) .desk-pc::after { animation-delay: -0.9s; }

.ceiling-lamp.lamp-2 {
  animation: office-lamp-flicker 9s steps(1, end) infinite;
}

@keyframes office-lamp-flicker {
  0%, 90%, 100% { opacity: 1; }
  91% { opacity: 0.55; }
  92% { opacity: 1; }
  93% { opacity: 0.7; }
  94% { opacity: 1; }
}

/* 小屏与矮视口适配 */

@media (max-height: 760px) {
  .office-stage {
    min-height: 330px;
  }
}

@media (max-width: 860px) {
  .office-bookshelf,
  .office-cabinet,
  .office-printer,
  .office-coat-rack,
  .office-wall-art,
  .office-hanging-plant,
  .office-plant.plant-d,
  .office-light-pool,
  .office-umbrella-stand,
  .office-cat {
    display: none;
  }

  .office-bulletin {
    width: 16%;
    left: 20%;
  }

  .office-reception-desk { left: 7%; }
  .office-sofa { left: 11%; }
  .office-water-cooler { right: 14%; }
  .office-coffee-machine { right: 6%; }
  .office-npc.npc-intern { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .office-npc,
  .office-npc *,
  .office-cat,
  .office-cat *,
  .office-hanging-plant i,
  .office-clock .clock-hand.second,
  .office-water-cooler .wc-bottle::after,
  .office-coffee-machine i.steam,
  .op-person .op-avatar,
  .op-person .op-head,
  .op-person .op-arm,
  .op-person .op-leg,
  .op-person .op-eyes,
  .npc-head .op-eyes,
  .op-person .op-doc,
  .op-person .op-shadow,
  .office-printer .printer-paper,
  .office-desk .desk-monitor i::after,
  .office-desk .desk-pc::after,
  .ceiling-lamp.lamp-2,
  .office-now.flash {
    animation: none !important;
  }
}

/* 环境光、踢脚线与角色标签避让 */

.office-back-wall::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(255, 177, 92, 0.06), rgba(0, 234, 255, 0.14), rgba(255, 177, 92, 0.06));
  box-shadow: 0 -6px 16px rgba(0, 234, 255, 0.05);
}

.office-floor::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(26% 30% at 22% 18%, rgba(255, 177, 92, 0.12), transparent 72%),
    radial-gradient(26% 30% at 52% 14%, rgba(255, 177, 92, 0.09), transparent 72%),
    radial-gradient(24% 28% at 78% 16%, rgba(120, 220, 255, 0.08), transparent 72%),
    linear-gradient(180deg, transparent 60%, rgba(2, 7, 11, 0.35));
}

.op-person.role-boss .op-name {
  transform: translateX(-50%) translateX(-12px);
}

.op-person.role-manager .op-name {
  transform: translateX(-50%) translateX(12px);
}

.op-person.role-boss .op-bubble {
  margin-left: -18px;
}

.op-person.role-manager .op-bubble {
  margin-left: 18px;
}

/* 亮色主题下的办公室环境 */

html.light .office-back-wall {
  background:
    repeating-linear-gradient(90deg, rgba(0, 100, 130, 0.035) 0 1px, transparent 1px 7.5%),
    linear-gradient(180deg, #e3eff6, #d6e6ef 68%, #deebf2);
  border-bottom-color: rgba(0, 140, 170, 0.18);
}

html.light .office-ceiling {
  background:
    repeating-linear-gradient(90deg, rgba(0, 80, 110, 0.04) 0 1px, transparent 1px 14%),
    linear-gradient(180deg, #e8f2f7, #dceaf2);
  border-bottom-color: rgba(0, 140, 170, 0.16);
}

html.light .office-floor {
  background:
    radial-gradient(42% 30% at 50% 26%, rgba(255, 170, 80, 0.16), transparent 70%),
    radial-gradient(30% 26% at 84% 14%, rgba(0, 180, 220, 0.12), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0, 120, 150, 0.08) 0 1px, transparent 1px 6.25%),
    repeating-linear-gradient(0deg, rgba(0, 120, 150, 0.08) 0 1px, transparent 1px 12.5%),
    linear-gradient(180deg, #e6f0f6, #d7e5ee);
}

html.light .office-floor::after {
  background:
    radial-gradient(26% 30% at 22% 18%, rgba(255, 177, 92, 0.18), transparent 72%),
    radial-gradient(26% 30% at 52% 14%, rgba(255, 177, 92, 0.14), transparent 72%),
    radial-gradient(24% 28% at 78% 16%, rgba(0, 180, 220, 0.1), transparent 72%),
    linear-gradient(180deg, transparent 70%, rgba(190, 215, 230, 0.25));
}

html.light .office-whiteboard {
  background: rgba(255, 255, 255, 0.66);
  border-color: rgba(30, 80, 105, 0.28);
}

html.light .office-whiteboard span {
  color: #4c6d7f;
}

html.light .office-whiteboard i {
  background: linear-gradient(90deg, rgba(0, 140, 170, 0.55), rgba(0, 140, 170, 0.08));
}

html.light .office-whiteboard i:nth-child(3) {
  background: linear-gradient(90deg, rgba(200, 110, 30, 0.5), rgba(200, 110, 30, 0.06));
}

html.light .office-bulletin {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.16), transparent 50%),
    #c9a877;
  border-color: #8a6a45;
}

html.light .office-neon {
  color: rgba(0, 130, 160, 0.7);
  text-shadow: 0 0 8px rgba(0, 160, 200, 0.22);
}

html.light .office-neon span {
  color: rgba(200, 110, 30, 0.75);
  text-shadow: 0 0 8px rgba(255, 170, 80, 0.25);
}

html.light .office-stage::after {
  background:
    linear-gradient(180deg, transparent 70%, rgba(215, 232, 242, 0.3)),
    radial-gradient(120% 80% at 50% 0%, transparent 62%, rgba(190, 215, 230, 0.22));
}

html.light .office-empty {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(0, 140, 170, 0.28);
}

html.light .office-head {
  background:
    linear-gradient(90deg, rgba(0, 180, 210, 0.06), transparent 34%, rgba(255, 177, 92, 0.08)),
    rgba(255, 255, 255, 0.82);
  border-bottom-color: rgba(0, 140, 170, 0.18);
}

html.light .office-back,
html.light .office-btn {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(0, 140, 170, 0.24);
  color: #265062;
}

html.light .office-btn:hover,
html.light .office-back:hover {
  background: rgba(0, 170, 200, 0.08);
  border-color: rgba(0, 140, 170, 0.45);
  color: #143a49;
}

html.light .office-help {
  border-color: rgba(0, 140, 170, 0.24);
  background:
    radial-gradient(360px 180px at 90% -20%, rgba(0, 180, 220, 0.1), transparent 70%),
    linear-gradient(165deg, #ffffff, #f1f8fb);
  box-shadow: 0 18px 48px rgba(15, 45, 60, 0.18);
}

html.light .office-help-head b {
  color: #143a49;
}

html.light .office-help-close:hover {
  background: rgba(0, 120, 150, 0.08);
}

html.light .oh-tag.crew {
  color: #0369a1;
  border-color: rgba(3, 105, 161, 0.35);
  background: rgba(3, 105, 161, 0.08);
}

html.light .oh-tag.group {
  color: #6d28d9;
  border-color: rgba(109, 40, 217, 0.3);
  background: rgba(124, 58, 237, 0.08);
}

html.light .oh-tag.live {
  color: #047857;
  border-color: rgba(4, 120, 87, 0.3);
  background: rgba(5, 150, 105, 0.08);
}

html.light .office-field select {
  background-color: #ffffff;
  border-color: rgba(0, 140, 170, 0.24);
  color: #1c3d4c;
  /* 浅色主题下让原生下拉列表使用浅色，保持与主题一致 */
  color-scheme: light;
}

html.light .office-field select option {
  background-color: #ffffff;
  color: #1c3d4c;
}

html.light .office-field,
html.light .office-sub {
  color: #587b8d;
}

html.light .office-side {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(0, 140, 170, 0.18);
}

html.light .office-log-item {
  background: rgba(242, 248, 252, 0.94);
  border-left-color: rgba(0, 140, 170, 0.22);
}

html.light .office-log-item .log-text {
  color: #2c4857;
}

html.light .office-log-item .log-who {
  color: #648698;
}

html.light .office-now {
  background: linear-gradient(90deg, rgba(255, 177, 92, 0.14), rgba(255, 255, 255, 0.82));
  color: #2b4656;
  border-color: rgba(0, 140, 170, 0.2);
}

html.light .office-live {
  color: #b0185f;
  border-color: rgba(200, 30, 90, 0.4);
}

/* 矮屏下隐藏部分装饰，避免遮挡主要交流区 */

@media (max-height: 560px) {
  .office-bulletin,
  .office-bookshelf,
  .office-cabinet,
  .office-coat-rack,
  .office-hanging-plant {
    display: none;
  }
}