/* Kantor isometrik bersama (Serambi dan Ladang). Semua token di dalam .office agar tidak bentrok dengan halaman. */
.office {
  --o-bg:#08102a; --o-floor:#0e1a3f; --o-line:#233068; --o-text:#e9eeff; --o-mute:#8d9ac9;
  --o-ok:#43e97b; --o-on-ok:#06210f; --o-warn:#ffd166;
  display:block; width:100%; height:auto; max-width:100%; background:var(--o-bg); border-radius:12px;
  font:14px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.office [data-room="research"] { --tc:#38bdf8; }
.office [data-room="content"] { --tc:#facc15; }
.office [data-room="design"] { --tc:#f43f9d; }
.office [data-room="dev"] { --tc:#4ade80; }
.office [data-room="social"] { --tc:#fb923c; }
.office [data-room="store"] { --tc:#a78bfa; }
.office [data-room="inbox"] { --tc:#2dd4bf; }
.office [data-room="quality-finance"] { --tc:#fb7185; }

.office .floor { fill:var(--o-floor); stroke:var(--tc, #fcd34d); stroke-width:2; stroke-linejoin:round; }
.office .hub .floor { fill:#1a2150; stroke:#fcd34d; stroke-width:3; }
.office .room-name { fill:var(--o-text); font-size:15px; font-weight:700; }
.office .hub .room-name { font-size:14px; fill:var(--o-mute); }
.office .hub-note { fill:var(--o-text); font-size:13px; font-variant-numeric:tabular-nums; }
.office .hub-meet { fill:var(--o-warn); font-size:12px; }
.office .room.active .floor { stroke-width:4; }
.office .more { fill:var(--o-mute); font-size:13px; font-weight:600; }
.office .hit { pointer-events:all; }
.office.meeting .hub .hit { pointer-events:none; }
.office .room-name, .office .hub-note, .office .hub-meet { paint-order:stroke; stroke:var(--o-bg); stroke-width:4px; stroke-linejoin:round; }

.office .agent .body { fill:var(--tc, var(--o-mute)); }
.office .agent .head { fill:var(--o-text); }
.office .agent .shadow { fill:#000; opacity:.35; }
.office .agent.idle .figure { opacity:.85; }
.office .agent.work .head { stroke:var(--o-ok); stroke-width:2; }
.office .agent.rest { opacity:.4; }
.office .agent.sub { opacity:.8; }
.office .agent.sub .body { stroke:var(--o-text); stroke-width:1.5; stroke-dasharray:3 2; }
.office.stale .room .floor { stroke-opacity:.35; }

.office .bubble-tag rect { fill:var(--o-pill, #121936); stroke:var(--tc, #fcd34d); stroke-width:1; rx:6; opacity:.94; }
.office .bubble-tag text { fill:var(--o-text, #ffffff); font-size:11px; font-weight:600; }
.office .live-badge rect { fill:var(--o-ok); }
.office .live-badge text { fill:var(--o-on-ok); font-size:13px; font-weight:800; letter-spacing:.08em; }

.office [role="button"] { cursor:pointer; }
.office [role="button"]:hover .floor { stroke-width:3; }
.office :focus-visible { outline:2px solid var(--o-warn); outline-offset:2px; }

/* Rapat: kru tiap ruangan berkumpul di pusat (tata letak lebar; offset sama dengan layoutFor('wide').gather). */
.office.wide.meeting [data-room="research"] .crew { transform:translate(0px, 184px); }
.office.wide.meeting [data-room="content"] .crew { transform:translate(-238px, 130px); }
.office.wide.meeting [data-room="design"] .crew { transform:translate(-336px, 0px); }
.office.wide.meeting [data-room="dev"] .crew { transform:translate(-238px, -130px); }
.office.wide.meeting [data-room="social"] .crew { transform:translate(0px, -184px); }
.office.wide.meeting [data-room="store"] .crew { transform:translate(238px, -130px); }
.office.wide.meeting [data-room="inbox"] .crew { transform:translate(336px, 0px); }
.office.wide.meeting [data-room="quality-finance"] .crew { transform:translate(238px, 130px); }

/* Gerak hanya untuk karakter yang bekerja (data nyata), dan hanya bila pengguna tidak meminta gerak berkurang. */
@media (prefers-reduced-motion: no-preference) {
  .office .agent.work .figure { animation:office-bob 1.1s ease-in-out infinite alternate; }
  .office .crew { transition:transform 1.4s ease-in-out; }
  .office .hub.pulse .floor { animation:office-pulse .9s ease-out 2; }
  .office3d .hub.pulse .lbl { animation:office3d-pulse .9s ease-out 2; }
  @keyframes office3d-pulse { 50% { transform:scale(1.08); } }
  @keyframes office-pulse { 50% { stroke-width:7; } }
  @keyframes office-bob { from { transform:translateY(0); } to { transform:translateY(-4px); } }
}
@media (prefers-reduced-motion: reduce) {
  .office, .office *, .office3d, .office3d * { animation:none !important; transition:none !important; }
}

/* ---- Mode 3D (WebGL): kanvas + lapisan label DOM. Posisi label lewat stylesheet konstruksi (tanpa atribut style, CSP). ---- */
.office[hidden], .office3d[hidden] { display:none; }
.office3d {
  --o-text:#f3efff; --o-mute:#cfc8ee; --o-pill:rgba(24,18,48,.86); --o-line:#4b4470; --o-gold:#ffc861; --o-ok:#43e97b; --o-on-ok:#06210f; --o-warn:#ffd166;
  position:relative; width:100%; aspect-ratio:16 / 10; max-height:calc(100vh - 110px); min-height:420px; overflow:hidden; border-radius:12px;
  background:linear-gradient(#8fd3f4, #2f87c0); font:14px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; isolation:isolate;
}
.office3d canvas { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
.office3d canvas.page-scroll { touch-action:pan-y pinch-zoom; }
.office3d canvas.dragging, .office3d canvas.rotating { cursor:grabbing; }
.office3d canvas.pick { cursor:pointer; }
.office3d::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 48%, transparent 62%, rgba(10,30,60,.32) 100%); }
.office3d-overlay { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.office3d-overlay [data-pos] { position:absolute; left:0; top:0; visibility:hidden; }
.office3d [data-room="research"] { --tc:#4c7df0; }
.office3d [data-room="content"] { --tc:#ff6b6b; }
.office3d [data-room="design"] { --tc:#9b6bff; }
.office3d [data-room="dev"] { --tc:#12b5a6; }
.office3d [data-room="social"] { --tc:#f053b0; }
.office3d [data-room="store"] { --tc:#ffb020; }
.office3d [data-room="inbox"] { --tc:#2cb7ff; }
.office3d [data-room="quality-finance"] { --tc:#2fbf71; }

.office3d .room, .office3d .hub { background:none; border:0; padding:6px 0; margin:0; font:inherit; color:var(--o-text); min-height:44px; min-width:44px; }
.office3d button.room, .office3d button.hub { pointer-events:auto; cursor:pointer; }
.office3d .lbl { display:inline-flex; align-items:center; gap:7px; padding:5px 10px 5px 8px; border-radius:99px; background:var(--o-pill); border:1px solid color-mix(in srgb, var(--tc, var(--o-gold)) 70%, #000); box-shadow:0 4px 14px rgba(0,0,0,.45); backdrop-filter:blur(6px); white-space:nowrap; }
.office3d .dot { width:10px; height:10px; border-radius:50%; background:var(--tc, var(--o-gold)); box-shadow:0 0 8px var(--tc, var(--o-gold)); }
.office3d .name { font-weight:700; font-size:13px; }
.office3d .count { color:var(--o-mute); font-size:12px; font-variant-numeric:tabular-nums; }
.office3d .meet { color:var(--o-warn); font-size:12px; }
.office3d .meet:empty, .office3d .count:empty { display:none; }
.office3d .avs { display:inline-flex; gap:3px; }
.office3d .avs .agent { width:9px; height:9px; border-radius:50%; background:#8d86b3; }
.office3d .avs .agent.work { background:var(--o-ok); box-shadow:0 0 6px var(--o-ok); }
.office3d .avs .agent.idle { background:var(--o-warn); }
.office3d .avs .agent.rest { background:#6c6590; opacity:.6; }
.office3d .room.active .lbl { border-color:#fff; box-shadow:0 0 0 2px var(--tc), 0 4px 14px rgba(0,0,0,.45); }
.office3d .hub .lbl { --tc:#ffc861; max-width:min(340px, 72vw); }
.office3d .hub .count { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.office3d .hub .name { color:var(--o-gold); letter-spacing:.08em; }
.office3d button:hover .lbl { background:rgba(40,30,78,.95); }
.office3d :focus-visible { outline:2px solid var(--o-warn); outline-offset:2px; border-radius:99px; }
.office3d .tag { padding:2px 8px; border-radius:6px; background:var(--o-pill); color:var(--o-text); font-size:12px; font-weight:600; white-space:nowrap; border:1px solid var(--o-line); }
.office3d .room-bubble { display:none; font-size:11px; line-height:1.2; color:var(--o-text); background:var(--o-pill); border:1px solid var(--tc, var(--o-gold)); border-radius:8px; padding:3px 8px; margin-bottom:5px; white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis; box-shadow:0 2px 8px rgba(0,0,0,.4); pointer-events:none; }
.office3d .room:hover .room-bubble, .office3d .room.active .room-bubble { display:inline-block; }
.office3d .room-bubble[hidden] { display:none !important; }
.office3d .live-badge { position:absolute; left:12px; top:12px; padding:4px 12px; border-radius:99px; background:var(--o-ok); color:var(--o-on-ok); font-size:13px; font-weight:800; letter-spacing:.08em; pointer-events:none; }
.office3d .ctrl { position:absolute; right:12px; top:12px; display:flex; flex-direction:column; gap:6px; pointer-events:auto; }
.office3d .ctrl-btn { width:44px; height:44px; border-radius:12px; border:1px solid var(--o-line); background:var(--o-pill); color:var(--o-text); font-size:20px; line-height:1; cursor:pointer; backdrop-filter:blur(6px); }
.office3d .ctrl-btn:hover { background:rgba(40,30,78,.95); }