/* ═══════════════════════════════════════════════════════════════════════════
   Agent Office — Operations page. A Pixi.js top-down office floor for Steward's
   multi-agent work. Paired with static/agent_office.js. Uses the dashboard's
   design tokens (--bg / --bg2 / --border / --blue / --dim / --text / --mono).
   ═══════════════════════════════════════════════════════════════════════════ */

#page-operations { flex-direction: column; overflow: hidden; }
.office { height: 100%; min-height: 0; min-width: 0; width: 100%; max-width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); background: var(--bg); }
.office-body { width: 100%; min-width: 0; }

/* ── header ─────────────────────────────────────────────────────────────── */
.office-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.office-head-copy { flex: 1 1 260px; min-width: 0; }
.office-head h2 { font-size: 16px; margin: 0; }
.office-head p { font-size: 11px; color: var(--dim); margin: 3px 0 0; }
.office-src-label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--dim); }
.office-select { background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 7px;
  padding: 6px 9px; font-size: 12px; max-width: 320px; min-width: 0; }

/* ── body: stage + panel ───────────────────────────────────────────────── */
.office-body { min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, 510px); }
.office-floor-column { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.office-stage { position: relative; min-width: 0; overflow: hidden; border-right: 1px solid var(--border);
  background: #10131a; display: flex; align-items: center; justify-content: center; }
.office-canvas-host { position: absolute; inset: 0; }
.office-canvas-host canvas { display: block; width: 100%; height: 100%; }
.office-stage-mount { position: absolute; inset: 0; overflow: hidden; }
.office-stage-mount canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
/* HTML name-label layer — screen-constant, always crisp (Pixi.Text upscaled by
   the camera was unreadable). */
.office-lbl-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.office-bubble-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.office-bubble { position: absolute; left: 0; top: 0; max-width: 170px; padding: 7px 9px; box-sizing: border-box;
  overflow-wrap: anywhere; font: 700 10px/1.35 var(--mono); border: 2px solid #1a1320; will-change: transform, opacity;
  transition: opacity .22s linear; }
.office-bubble.thought { color: #3d2e4a; background: #fffdf5; border-radius: 12px; }
.office-bubble.speech { color: #fffdf5; background: rgba(26,19,32,.96); border-radius: 4px; }
.office-bubble::after { content: ""; position: absolute; left: var(--tail-x,50%); bottom: -9px; width: 12px; height: 12px;
  transform: translateX(-50%) rotate(45deg); border-right: 2px solid #1a1320; border-bottom: 2px solid #1a1320; }
.office-bubble.thought::after { border-radius: 50%; background: #fffdf5; width: 9px; height: 9px; bottom: -7px; }
.office-bubble.speech::after { background: #1a1320; }
.office-lbl { position: absolute; top: 0; left: 0; white-space: nowrap;
  font: 800 10px/1 ui-monospace, "SF Mono", "JetBrains Mono", monospace;
  letter-spacing: .2px; color: #eef2ff;
  text-shadow: 0 0 2px #05070c, 0 0 2px #05070c, 0 1px 0 #05070c, 1px 0 0 #05070c, -1px 0 0 #05070c, 0 -1px 0 #05070c;
  will-change: transform; }
.office-lbl.sel { color: #9ec7ff; }
.office-lbl.host { color: #7ce9dc; text-shadow: 0 0 4px rgba(64,224,208,.55), 0 1px 1px #05070c; }
.office-lbl.host.sel { color: #ffd078; text-shadow: 0 0 4px rgba(255,176,59,.6), 0 1px 1px #05070c; }
.office-node-lbl { position:absolute; left:0; top:0; padding:2px 4px; color:#1a1320; background:#fff8e7;
  border:1px solid #1a1320; box-shadow:1px 1px 0 rgba(26,19,32,.35); white-space:nowrap;
  font:800 9px/1 ui-monospace,"SF Mono","JetBrains Mono",monospace; letter-spacing:0; will-change:transform; }
.office-node-state { font-size:10px; line-height:8px; text-shadow:0 0 1px currentColor; }
.office-node-lbl.online .office-node-state { color:#218739; }
.office-node-lbl.offline .office-node-state { color:#c73545; }
.office-node-lbl.unknown .office-node-state { color:#9a7110; }
.office-empty { position: relative; z-index: 2; padding: 20px; max-width: 420px; }
.office-credit { position: absolute; right: 8px; bottom: 6px; z-index: 3; font: 10px/1.3 var(--mono);
  color: rgba(255,255,255,.55); background: rgba(0,0,0,.35); padding: 2px 7px; border-radius: 6px; }
.office-credit a { color: rgba(255,255,255,.8); }

/* Cluster-node desk hover tooltip (static/agent_office.js renderNodeDeskArt). */
.office-tip { position: absolute; top: 0; left: 0; z-index: 6; pointer-events: none;
  max-width: 220px; padding: 7px 10px; border-radius: 8px; background: rgba(12,14,20,.94);
  border: 1px solid rgba(137,180,250,.28); color: #eef2ff; font: 11px/1.4 var(--mono);
  box-shadow: 0 6px 16px rgba(0,0,0,.35); will-change: transform; }
.office-tip[hidden] { display: none; }
.office-tip b { color: #9ec7ff; }
.office-tip-sub { color: #a6adc8; font-size: 10px; margin-top: 2px; }
.office-tip-status { margin-top: 4px; font-weight: 700; }
.office-tip-status.busy { color: #a6e3a1; }
.office-tip-status.idle { color: #c7ccd6; }
.office-tip-status.offline { color: #f38ba8; }
.office-tip-stats { margin-top: 3px; color: #cdd6f4; font-size: 10px; }

.office-panel { min-width: 0; min-height: 0; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--bg); }
.office-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--border); }
.office-tab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--dim);
  padding: 7px 7px; font: 600 11px var(--font, inherit); cursor: pointer; white-space: nowrap; }
.office-tab:hover { color: var(--text); }
.office-tab.on { color: var(--text); border-bottom-color: var(--blue); }
.office-panel-body { overflow: auto; padding: 12px; font-size: 12px; line-height: 1.5; }

.office-sec { margin-bottom: 12px; }
.office-sec h4 { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--dim); margin: 0 0 6px; }
.office-row { padding: 7px 0; border-bottom: 1px solid rgba(137,180,250,.1); }
.office-row:last-child { border-bottom: 0; }
.office-badge { display: inline-flex; padding: 1px 6px; border-radius: 9px; background: rgba(137,180,250,.14);
  color: var(--blue); font: 700 9px var(--mono); text-transform: uppercase; }
.office-badge.podcast { color: #7ce9dc; background: rgba(64,224,208,.12); }
.office-badge.ok { color: #88d498; background: rgba(136,212,152,.12); }
.office-badge.warn { color: #f5c26b; background: rgba(245,194,107,.13); }
.office-kv { color: var(--dim); font-size: 11px; }
.office-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.office-msg-act { font: 700 9px var(--mono); text-transform: uppercase; padding: 1px 5px; border-radius: 8px; }
.office-board { white-space: pre-wrap; font: 11px/1.5 var(--mono); color: var(--dim); margin: 0; }
.office-sme { margin-top: 8px; padding: 8px; border: 1px solid var(--border); background: var(--bg2); }
.office-panel-lead { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.office-system-card { display: grid; gap: 5px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.office-system-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; color: var(--dim); }
.office-tag-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.office-kanban { display: grid; grid-template-columns: repeat(4, minmax(155px, 1fr)); gap: 8px; min-width: 680px; }
.office-kanban-col { padding: 8px; border: 1px solid var(--border); background: var(--bg2); min-height: 120px; }
.office-focus-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 10px; padding: 6px 10px; border: 1px solid rgba(137,180,250,.25);
  background: rgba(137,180,250,.08); border-radius: 6px; font-size: 11px; color: var(--dim); }
.office-focus-banner b { color: var(--text); }
.office-kanban-col h4 { display: flex; justify-content: space-between; margin: 0 0 7px; }
.office-task-card { padding: 7px; margin-bottom: 6px; border: 1px solid var(--border); background: var(--bg); }
.office-tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.office-tool { min-height: 92px; padding: 10px; text-align: left; color: var(--text); border: 1px solid var(--border); background: var(--bg2); cursor: pointer; }
.office-tool:hover { border-color: var(--blue); }
.office-tool b,.office-tool span { display: block; }
.office-tool span { margin-top: 4px; color: var(--dim); font-size: 10px; line-height: 1.35; }

/* ── agent strip ───────────────────────────────────────────────────────── */
.office-strip { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--border);
  overflow-x: auto; background: var(--bg); }
.office-chip { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; padding: 6px 10px; min-width: 150px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg2); cursor: pointer; }
.office-chip:hover, .office-chip.on { border-color: var(--blue); }
.office-add-agent { min-width: 150px; justify-content: center; align-items: flex-start; flex-direction: column; }
.office-add-agent span { font-size: 10px; color: var(--dim); }
.office-chip.gone { opacity: .5; }
.office-chip.home { opacity: .62; border-style: dashed; }
/* team divider pill in the agent strip */
.office-strip-hd { flex: 0 0 auto; align-self: stretch; display: flex; flex-direction: column; justify-content: center;
  gap: 2px; padding: 4px 8px; border-left: 3px solid var(--team, var(--border)); color: var(--team, var(--text));
  font: 800 10px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.office-strip-hd em { font-style: normal; font-weight: 700; font-size: 9px; color: var(--dim); }
.office-chip-av { width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto; image-rendering: pixelated; }
.office-chip-txt { min-width: 0; }
.office-chip-name { font-size: 11px; font-weight: 700; color: var(--text); }
.office-chip-sub { font-size: 10px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.office-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--dim); }
.office-dot.work { background: #a6e3a1; } .office-dot.wait { background: #f9e2af; }
.office-dot.idle { background: #89b4fa; } .office-dot.gone { background: #f38ba8; }

/* ── Game Servers card (Floor tab) ────────────────────────────────────── */
.office-gs-row { display: flex; align-items: center; gap: 7px; padding: 5px 0; border-bottom: 1px solid rgba(137,180,250,.1); }
.office-gs-row:last-child { border-bottom: 0; }
.office-gs-row b { flex: 1 1 auto; min-width: 0; font-size: 11px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.office-gs-count { flex: 0 0 auto; font-size: 10px; color: var(--dim); white-space: nowrap; }

/* ── compose drawer ───────────────────────────────────────────────────── */
.office-drawer-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 900; }
.office-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(380px, 92vw); z-index: 901;
  background: var(--bg); border-left: 1px solid var(--border); box-shadow: -12px 0 40px rgba(0,0,0,.4);
  display: flex; flex-direction: column; gap: 12px; padding: 16px; overflow: auto; }
/* the element-level display:flex/inset above would otherwise beat [hidden] */
.office-drawer[hidden], .office-drawer-scrim[hidden], .office-credit[hidden] { display: none !important; }
.office-hire-wizard [hidden] { display: none !important; }
.office-drawer-head { display: flex; align-items: center; justify-content: space-between; }
.office-drawer label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--dim); }
.office-drawer input, .office-drawer select, .office-drawer textarea {
  background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 7px 9px;
  font-size: 12px; font-family: inherit; }
.office-drawer textarea { resize: vertical; }
.office-drawer-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: auto; }
.office-onboarding-note { display: grid; gap: 4px; padding: 10px; border: 1px solid rgba(137,180,250,.35); background: rgba(137,180,250,.08); font-size: 11px; }

/* ── repo-style command center, scoped to the Agent Office ───────────── */
#page-operations {
  --bg: #fffdf5; --bg2: #f8edcf; --bg3: #efe2b9; --text: #1a1320; --dim: #6f5a78;
  --border: #a997bf; --blue: #6f4b8b; --green: #317a4d; --red: #a53d45; --yellow: #b47b08;
  background: #fffdf5; color: #1a1320;
}
#page-operations .office-head { min-height: 68px; box-sizing: border-box; color: #1a1320; background: #f8edcf; border: 0; border-bottom: 2px solid #1a1320; box-shadow: none; }
#page-operations .office-head h2 { font: 800 17px/1.2 var(--mono); letter-spacing: .03em; text-transform: uppercase; }
#page-operations .office-head p, #page-operations .office-src-label { color:#6f5a78; }
#page-operations .office-head .cc-btn { min-height:34px; padding:7px 10px; color:#1a1320; background:#fffaf0; border:1px solid #6f5a78; box-shadow:1px 1px 0 rgba(26,19,32,.2); }
#page-operations .office-head .cc-btn:hover { color:#1a1320; background:#e7d28f; border-color:#1a1320; }
#page-operations .office-head .cc-btn.primary { color:#1a1320; background:#65d2c7; border-color:#1a1320; }
#page-operations .office-select { min-height:34px; width:clamp(210px,18vw,320px); color:#1a1320; background:#fffdf5; border:1px solid #6f5a78; }
#page-operations .office-source-badge { min-height:34px; display:inline-flex; align-items:center; box-sizing:border-box;
  padding:7px 12px; color:#1a1320; background:#fffdf5; border:1px solid #6f5a78;
  font:800 11px/1 var(--mono); letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; }
#page-operations .office-panel, #page-operations .office-strip { color: #1a1320; background: #fffdf5; }
#page-operations .office-strip-hd { border-left-width: 3px; }
#page-operations .office-strip-hd em { color: #6f5a78; }
#page-operations .office-tabs { background: #f8edcf; border-bottom: 1px solid #1a1320; }
#page-operations .office-tab { color: #5e4968; }
#page-operations .office-tab:hover, #page-operations .office-tab.on { color: #1a1320; background: #fffdf5; }
#page-operations .office-tab.on { border-bottom-color: #dcae32; }
#page-operations .office-panel-body { padding: 0; }
#page-operations .office-sec { padding: 11px 14px; margin: 0; border-bottom: 1px solid #b8a9c9; }
#page-operations .office-sec h4 { color: #6f5a78; font: 800 10px/1.3 var(--mono); }
#page-operations .office-chip { color: #1a1320; background: #fffaf0; border: 1px solid #6f5a78; border-radius: 0; }
#page-operations .office-chip:hover, #page-operations .office-chip.on { background: #d6edf0; border: 2px solid #6f5a78; padding: 5px 9px; }
#page-operations .cc-btn, #page-operations button, .office-hire-wizard button { border-radius: 0; }

.office-command-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 2px solid #1a1320; background: #fffdf5; }
.office-command-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.office-command-avatar { display: grid; place-items: center; width: 45px; height: 45px; flex: 0 0 auto; border: 2px solid #6f5a78; background: color-mix(in srgb,var(--agent-accent) 28%,#fffdf5); color: #1a1320; font: 900 18px var(--mono); }
.office-command-identity h3 { margin: 0; font: 900 12px/1.35 var(--mono); letter-spacing: .02em; }
.office-command-status { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: #6f5a78; font-size: 11px; }
.office-command-head-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.office-mode-button { padding: 7px 9px; color: #1a1320; background: #fffaf0; border: 1px solid #6f5a78; font: 700 11px var(--font); cursor: pointer; }
.office-mode-button:hover { background: #e7d28f; }
.office-command-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding: 10px 14px; background: #fffdf5; border-bottom: 2px solid #1a1320; }
.office-command-tile { min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; color: #1a1320; background: #f8edcf; border: 1px solid #c4b4d2; font-size: 15px; cursor: pointer; }
.office-command-tile span { width: 20px; font: 900 17px var(--mono); }
.office-command-tile b { font: 650 13px var(--font); }
.office-command-tile:hover, .office-command-tile:focus-visible { background: #e0ad38; border-color: #1a1320; outline: 1px solid #1a1320; }
.office-command-subnav { display: grid; grid-template-columns: repeat(4,1fr); background: #f8edcf; border-bottom: 1px solid #1a1320; }
.office-command-subnav button { padding: 9px 3px; color: #1a1320; background: transparent; border: 0; border-right: 1px solid #b8a9c9; font: 800 9px var(--mono); cursor: pointer; }
.office-command-subnav button:hover { background: #e7d28f; }
.office-steer { padding: 10px 14px; background: #fffdf5; border-bottom: 1px solid #b8a9c9; }
.office-steer label { display: block; margin-bottom: 4px; color: #6f5a78; font: 700 9px var(--mono); text-transform: uppercase; }
.office-steer > div, .office-search-row { display: flex; gap: 7px; }
.office-steer input, .office-search-row input { flex: 1; min-width: 0; padding: 8px 9px; color: #1a1320; background: #fffdf5; border: 1px solid #a997bf; font: 12px var(--font); }
.office-steer button, .office-search-row button { padding: 7px 12px; border: 2px solid #1a1320; background: #e7d28f; color: #1a1320; font-weight: 750; cursor: pointer; }

.office-memory { min-height: 100%; background: #f4edcf; }
.office-memory-owner { display: block; margin-bottom: 8px; color: #6f5a78; font-size: 10px; }
.office-memory-owner select { display: block; margin-top: 4px; padding: 6px 8px; color: #1a1320; background: #fffdf5; border: 1px solid #b8a9c9; opacity: 1; }
.office-memory-charter { height: 330px; overflow: auto; margin: 0; padding: 11px; white-space: pre-wrap; color: #1a1320; background: #fffdf5; border: 1px solid #a997bf; font: 11px/1.55 var(--mono); }
.office-memory-results { display: grid; gap: 4px; margin: 0 0 8px; }
.office-memory-hit { display: grid; gap: 2px; padding: 7px; text-align: left; color: #1a1320; background: #fffaf0; border: 1px solid #b8a9c9; cursor: pointer; }
.office-memory-hit b { font: 800 9px var(--mono); color: #6f5a78; }
.office-memory-hit span { font-size: 11px; }

/* ── full four-step Add Agent flow ──────────────────────────────────── */
.office-hire-wizard { top: 5vh; left: 50%; right: auto; width: min(1160px,96vw); height: min(850px,90vh); transform: translateX(-50%); padding: 0; gap: 0; color: #1a1320; background: #fffdf5; border: 2px solid #1a1320; box-shadow: 10px 12px 0 rgba(26,19,32,.3); }
.office-hire-wizard .office-drawer-head { padding: 14px 18px; background: #f8edcf; border-bottom: 2px solid #1a1320; }
.office-hire-wizard .office-drawer-head b { font: 900 17px var(--mono); letter-spacing: .05em; }
.office-hire-layout { display: grid; grid-template-columns: 235px minmax(0,1fr); min-height: 0; flex: 1; overflow: hidden; }
.office-hire-steps { padding: 28px 15px; background: #f8edcf; border-right: 2px solid #a997bf; }
.office-hire-step { width: 100%; display: grid; gap: 3px; padding: 10px 12px; margin-bottom: 8px; text-align: left; color: #3d2e4a; background: #fff9eb; border: 1px solid #c4b4d2; cursor: pointer; }
.office-hire-step b { font: 900 11px var(--mono); }
.office-hire-step span { color: #6f5a78; font-size: 11px; }
.office-hire-step.on { background: #cce7eb; border: 2px solid #6f5a78; padding: 9px 11px; }
.office-hire-pages { min-width: 0; overflow: auto; padding: 28px 32px; }
.office-hire-page { display: grid; gap: 16px; }
.office-hire-page[hidden] { display: none !important; }
.office-hire-wizard label { color: #3d2e4a; font: 800 10px var(--mono); text-transform: uppercase; }
.office-hire-wizard input, .office-hire-wizard select, .office-hire-wizard textarea { color: #1a1320; background: #fffdf5; border: 1px solid #c4b4d2; border-radius: 0; font: 14px var(--font); text-transform: none; }
#office-hire input, #office-hire select, #office-hire textarea { color:#1a1320 !important; background:#fffdf5 !important; border-color:#a997bf !important; }
.office-hire-wizard fieldset { margin: 0; padding: 0; border: 0; }
.office-hire-wizard legend { margin-bottom: 8px; color: #3d2e4a; font: 800 10px var(--mono); text-transform: uppercase; }
.office-character-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(82px,1fr)); gap: 8px; }
.office-character-choice { display: grid; place-items: center; min-height: 116px; padding: 6px; color: #3d2e4a; background: #fffaf0; border: 1px solid #d4c9df; cursor: pointer; }
.office-character-choice img { width: 54px; height: 76px; object-fit: contain; image-rendering: pixelated; }
.office-character-choice > span { display: grid; place-items: center; width: 54px; height: 76px; background: #efe2b9; font: 900 24px var(--mono); }
.office-character-choice b { font-size: 11px; text-transform: capitalize; }
.office-character-choice.on { background: #cce7eb; border: 3px solid #6f5a78; padding: 4px; }
.office-color-grid { display: flex; gap: 10px; }
.office-color-choice { width: 54px; height: 54px; background: var(--choice); border: 2px solid #a997bf; cursor: pointer; }
.office-color-choice.on { outline: 4px solid #1a1320; outline-offset: 2px; }
.office-hire-wizard .office-onboarding-note { color: #3d2e4a; background: #f8edcf; border: 1px solid #a997bf; }
.office-hire-import { display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: #fff9eb; border-top: 1px solid #a997bf; font-size: 11px; }
.office-hire-import span { flex: 1; color: #6f5a78; }
.office-hire-wizard .office-drawer-foot { margin: 0; padding: 12px 18px; background: #fffdf5; border-top: 2px solid #1a1320; }
#office-hire .cc-btn { min-height:32px; color:#1a1320; background:#fffaf0; border:1px solid #6f5a78; box-shadow:1px 1px 0 rgba(26,19,32,.2); }
#office-hire .cc-btn:hover { color:#1a1320; background:#e7d28f; border-color:#1a1320; }
#office-hire .cc-btn.primary { color:#fffdf5; background:#1a1320; border-color:#1a1320; }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .office-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(280px, 48vh) minmax(0, 1fr); overflow: hidden; }
  .office-floor-column { min-height: 280px; }
  .office-stage { border-right: 0; border-bottom: 1px solid var(--border); }
  .office-panel { min-height: 0; }
}
@media (max-width: 600px) {
  #page-operations { height: calc(100dvh - 92px); max-height: calc(100dvh - 92px); min-height: 0; overflow: hidden; }
  .office { height: 100%; min-height: 0; }
  .office-body { grid-template-rows: minmax(240px, 38vh) minmax(0, 1fr); }
  .office-floor-column { min-height: 240px; }
  .office-head { padding: 8px; gap: 7px; }
  .office-head-copy { flex-basis: 100%; }
  .office-select { flex: 1 1 180px; max-width: none; }
  .office-tool-grid { grid-template-columns: 1fr; }
  .office-bubble { max-width: 145px; font-size: 9px; }
  .office-command-head { align-items: flex-start; }
  .office-command-head-actions { flex-direction: column; align-items: stretch; }
  .office-command-grid { grid-template-columns: 1fr 1fr; padding: 8px; }
  .office-command-tile { min-height: 40px; padding: 6px; }
  .office-hire-wizard { top: 1vh; bottom: calc(70px + env(safe-area-inset-bottom)); height: auto; width: 96vw; }
  .office-hire-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }
  .office-hire-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; padding: 7px; border-right: 0; border-bottom: 1px solid #a997bf; }
  .office-hire-step { margin: 0; padding: 7px 3px; text-align: center; }
  .office-hire-step.on { padding: 6px 2px; }
  .office-hire-step span { display: none; }
  .office-hire-pages { padding: 14px; }
  .office-character-grid { grid-template-columns: repeat(3,1fr); }
  .office-hire-import { align-items: stretch; flex-wrap: wrap; }
  .office-hire-import span { flex-basis: 100%; }
}

/* ── Command-page Office (#cc-hive) — the real floor, reparented in ─────── */
.cc-hive-live { position: relative; height: 300px; border-radius: 9px; overflow: hidden;
  border: 1px solid var(--border); background: #10131a; }
.cc-hive-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.cc-hive-cred { font: 10px/1.3 var(--mono); color: var(--dim); }
.cc-hive-cred a { color: var(--dim); }