/* The live office scene (hero-office.js), shared by the landing page and sign-in. */
.office-hero { flex: 1 1 560px; margin: 0; min-width: 0; position: relative; display: grid; justify-items: center; }
/* Faint dot field behind the room, fading toward the edges. */
.office-hero::before {
  content: ""; position: absolute; inset: -6% -8%; pointer-events: none;
  background-image: radial-gradient(circle, #c3cbd6 1.1px, transparent 1.5px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
}
.hq { position: relative; width: 100%; max-width: 820px; height: auto; overflow: visible; }

/* Isometric faces: light from the top left, so top > left > right in brightness. */
.hq .f-t { fill: var(--surface); }
.hq .f-l { fill: #e2e7ed; }
.hq .f-r { fill: #c9d1db; }
.hq polygon { stroke: #9aa7b6; stroke-width: 0.75; stroke-linejoin: round; }
.hq-floor { fill: #f8fafb; }
.hq-slab-l { fill: #dde3ea; }
.hq-slab-r { fill: #cbd3dd; }
.hq-wall { fill: #f1f4f7; }
.hq-wall-l { fill: #e8ecf1; }
.hq .hq-window { fill: #dfe8f3; stroke: #b4bfcc; }
.hq-dot { fill: #9aa7b6; transform-box: fill-box; transform-origin: center; }
.hq-route { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.hq-route-hi { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.hq-motion { fill: none; stroke: none; }

.hq-monitor .f-l { fill: var(--ink); }
.hq-monitor .f-r, .hq-monitor .f-t { fill: #2b3a50; }
.hq-kbd .f-t { fill: #e9edf2; }
.hq-mug .f-t { fill: #6b5a4b; } .hq-mug .f-l { fill: #fff; } .hq-mug .f-r { fill: #e2e7ed; }
.hq .hq-zone { fill-opacity: 0.06; stroke-opacity: 0.35; stroke-width: 1; stroke-dasharray: 4 4; }
.hq .hq-glow { stroke: none; opacity: 0; }
.hq-line { fill: none; stroke-width: 3; stroke-linecap: round; }
.hq .hq-bar { stroke: none; transform-box: fill-box; transform-origin: 50% 100%; }
.hq-rack .f-l { fill: #1f3049; }
.hq-rack .f-r, .hq-rack .f-t { fill: #2b3a50; }
.hq .hq-led { stroke: none; }
.hq .hq-paper { fill: #fff; stroke: var(--line-strong); }
.hq-pot .f-l { fill: #b9a99a; } .hq-pot .f-r { fill: #a08f80; } .hq-pot .f-t { fill: #6b5a4b; }
.hq-plant circle { fill: #5f8a73; stroke: #4c735f; stroke-width: 0.75; }

.hq-shadow { fill: var(--ink); opacity: 0.12; }
.hq-stem { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 2 3; }
.hq-pop, .hq-disc, .hq-ring, .hq-badge, .hq-ripple { transform-box: fill-box; transform-origin: center; }
.hq-disc { stroke: var(--ground); stroke-width: 3; }
.hq-ring { fill: none; stroke-width: 2; opacity: 0; }
.hq-icon { color: #fff; }
.hq use { fill: currentColor; }
.hq-name { font: 600 16px var(--font-sans); fill: var(--ink); }
.hq-role { font: 400 13px var(--font-sans); fill: var(--muted); }
.hq-label text { paint-order: stroke; stroke: var(--ground); stroke-width: 4px; stroke-linejoin: round; }

.hq-parcel { opacity: 0; }
.hq-cube .f-t { fill: #fff; } .hq-cube .f-l { fill: #f0d9b5; } .hq-cube .f-r { fill: #d9bc8f; }
.hq-env .f-t { fill: #fff; }
.hq-ripple { fill: none; stroke: var(--alert); stroke-width: 2; opacity: 0; }
.hq-badge-bg { fill: var(--signal-soft); stroke: var(--signal-fill); stroke-width: 1.5; }
.hq-badge-text { font: 600 15px var(--font-sans); fill: var(--signal); dominant-baseline: central; }
.hq-badge.is-ok .hq-badge-bg { fill: var(--surface); stroke: var(--ink); }
.hq-badge.is-ok .hq-badge-text { fill: var(--ink); }

/* Live status line under the room. */
.hq-status {
  --agent: var(--c-koor);
  position: relative; display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  margin-top: -8px; padding: 8px 16px 8px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); box-shadow: var(--float); font-size: 15px; color: var(--ink);
}
.hq-status time { font: 500 14px var(--font-mono); color: var(--muted); }
.hq-pip { width: 10px; height: 10px; border-radius: 50%; background: var(--agent); flex: none; }
.hq-status.is-waiting { --agent: var(--signal-fill); border-color: var(--signal-fill); background: var(--signal-soft); }
.hq-status.is-waiting time { color: var(--signal); }

/* ---------- 3D office (office3d.js) ---------- */
.o3-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.o3-page .topbar .brand { color: var(--ink); text-decoration: none; }
.o3-page .topbar .btn { text-decoration: none; color: var(--ink); }
.o3-main { flex: 1; position: relative; display: flex; flex-direction: column; min-height: 0; }
.o3-stage { position: relative; flex: 1; min-height: 420px; overflow: hidden; cursor: grab; touch-action: pan-y; }
.o3-stage:active { cursor: grabbing; }
.o3-stage canvas { display: block; width: 100%; height: 100%; }
.o3-labels { position: absolute; inset: 0; pointer-events: none; }
/* Name tag pinned above each person; the speech bubble sits on top of it. */
.o3-label {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center;
  translate: -50% -100%; white-space: nowrap; will-change: transform;
}
.o3-label b {
  font-size: 13px; font-weight: 600; color: #fff; background: var(--agent); padding: 2px 9px; border-radius: 999px;
  box-shadow: 0 2px 6px rgb(14 26 43 / 0.25);
}
.o3-label span { font-size: 11px; color: var(--ink-2); margin-top: 2px; padding: 0 6px; border-radius: 4px; background: rgb(238 241 244 / 0.85); }
.o3-say {
  font-style: normal; font-size: 13px; line-height: 1.35; color: #fff; background: var(--ink); padding: 6px 10px; border-radius: 8px;
  max-width: 220px; white-space: normal; text-align: center; margin-bottom: 6px; box-shadow: var(--float); position: relative;
}
.o3-say::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.o3-say.is-alert { background: var(--alert); }
.o3-say.is-waiting { background: var(--signal-soft); color: var(--signal); border: 1.5px solid var(--signal-fill); font-weight: 600; }
.o3-say.is-waiting::after { border-right: 1.5px solid var(--signal-fill); border-bottom: 1.5px solid var(--signal-fill); }
.o3-say.is-ok { background: var(--surface); color: var(--ink); border: 1.5px solid var(--ink); font-weight: 600; }
.o3-status { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); margin: 0; white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }
.o3-hint { position: absolute; right: 16px; top: 12px; font: 500 12px var(--font-mono); color: var(--muted); }
@media (max-width: 600px) {
  .o3-status { white-space: normal; left: 12px; right: 12px; bottom: 12px; transform: none; max-width: none; border-radius: 14px; }
  .o3-label span { display: none; }
  .o3-say { max-width: 150px; font-size: 12px; }
}