.room{aspect-ratio:1.777;min-height:0;padding:0;background:url('/assets/ai-office.png') center/100% 100%;isolation:isolate;overflow:visible}.desks{position:absolute;inset:0;display:block;z-index:2}.agent{position:absolute;width:18%;left:var(--left);top:var(--top);padding:6px 3px;background:#031323e8}.agent strong{font-size:clamp(8px,.8vw,13px)}.agent small{font-size:clamp(7px,.65vw,10px)}.agent .speech{position:absolute;bottom:calc(100% + 100px);left:50%;transform:translateX(-50%);width:180px;max-width:22vw;padding:8px 10px;border:1px solid #33d9ef;background:#071c30f5;color:#e9fdff;border-radius:12px;box-shadow:0 0 25px #25cff044;font-size:12px;pointer-events:none}.speech:after{content:'';position:absolute;bottom:-7px;left:50%;width:12px;height:12px;transform:rotate(45deg);background:#071c30;border-right:1px solid #33d9ef;border-bottom:1px solid #33d9ef}.agent[data-state=running]{border-color:#30f4b0;box-shadow:0 0 20px #30f4b055}.agent[data-state=speaking]{border-color:#b192ff;box-shadow:0 0 20px #b192ff77}.portrait-motion{position:absolute;inset:0;background:url('/assets/ai-office.png') center/100% 100%;clip-path:ellipse(3.8% 8% at var(--head-x) var(--head-y));pointer-events:none;z-index:1;transform-origin:var(--head-x) var(--head-y)}.portrait-motion.moving{animation:staffMove 2s ease-in-out infinite alternate}.portrait-motion.speaking{animation:staffSpeak .75s ease-in-out infinite alternate}.office-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}.office-controls button{font-size:11px;padding:6px 10px}.office-controls span{font-size:11px;color:var(--muted)}.office.list-mode .room{aspect-ratio:auto;background:none;min-height:0}.office.list-mode .desks{position:static;display:grid;grid-template-columns:repeat(2,1fr)}.office.list-mode .agent{position:relative;width:auto;left:auto;top:auto;text-align:left;padding:14px}.office.list-mode .portrait-motion{display:none}.office.list-mode .speech{position:static;display:block;transform:none;max-width:none;width:auto;margin:8px 0 0}.office.list-mode .speech:after{display:none}.office.list-mode .agent strong{font-size:14px}.office.list-mode .agent small{font-size:12px}@keyframes staffMove{from{transform:translateY(0) rotate(-.4deg)}to{transform:translateY(-2px) rotate(.8deg)}}@keyframes staffSpeak{from{transform:rotate(-1deg)}to{transform:rotate(1deg) translateY(-1px)}}@media(prefers-reduced-motion:reduce){.portrait-motion.moving,.portrait-motion.speaking{animation:none}}@media(max-width:700px){.room{min-width:560px}.office{overflow:auto}.agent .speech{max-width:140px;font-size:10px}.office.list-mode .room{min-width:0}.office.list-mode .desks{grid-template-columns:1fr}}