/* Approved-concept office layout. No redraw or generated replacement art. */
@media(min-width:1050px){
 .layout{display:grid;grid-template-columns:minmax(0,3.25fr) minmax(275px,1fr);
  grid-template-areas:"scene controls" "agents controls";align-items:start}
 .layout>.office{grid-area:scene;min-width:0}
 .layout>.right{grid-area:controls;min-width:0}
 .layout>.agents{grid-area:agents;min-height:0}
 .agents #agents-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
 .agents .agent{margin:0}
}
.office .viewport{height:clamp(470px,65vh,840px);background:#071626;cursor:grab}
.office .viewport:active{cursor:grabbing}
.office .viewport #master-canvas{position:absolute;top:50%;left:50%;width:100%;aspect-ratio:1220 / 941;
 transform:translate(-50%,-50%);transform-origin:50% 50%;will-change:transform;
 overflow:hidden;pointer-events:none}
.office .viewport #master-canvas>img{position:absolute;left:0;top:0;width:137.04918%;height:100%;
 max-width:none;object-fit:fill;transform:none!important;user-select:none;pointer-events:none}
.office .viewport #master-missing{z-index:2;max-width:460px;border:1px solid #49687c;
 color:#cedfec;background:rgba(8,23,37,.94)}
.office .viewport[data-source="UNVERIFIED"] #master-canvas{filter:saturate(.60)}
.office .viewport[data-source="UNVERIFIED"] .office-avatar{opacity:.55}
.office .viewport #master-canvas .office-avatar{pointer-events:auto;position:absolute;
 width:42px;height:59px;transform:translate(-50%,-50%);z-index:5;padding:0;
 border:0;background:transparent;cursor:pointer;color:#fff;
 filter:drop-shadow(0 2px 3px #07111baa)}
.office-avatar .avatar-shadow{position:absolute;width:26px;height:9px;left:8px;bottom:7px;
 border-radius:50%;background:#06121c99;box-shadow:0 0 10px #0b1e29}
.office-avatar .avatar-figure{position:absolute;left:11px;top:2px;width:21px;height:43px;
 transform-origin:center bottom;animation:office-breathe 3.3s ease-in-out infinite}
.office-avatar .avatar-head{position:absolute;left:5px;top:0;width:12px;height:13px;
 background:#d69f7d;border-radius:45% 45% 49% 49%;
 border-top:4px solid #27324c;box-shadow:0 0 2px #0d2030}
.office-avatar .avatar-body{position:absolute;left:4px;top:13px;width:14px;height:18px;
 border-radius:6px 6px 3px 3px;background:#2e80a7;border:1px solid #a9ddec77}
.office-avatar[data-role="R01"] .avatar-body{background:#b58b4a}
.office-avatar[data-role="R04"] .avatar-body{background:#804ab9}
.office-avatar[data-role="R05"] .avatar-body{background:#278f85}
.office-avatar[data-role="R06"] .avatar-body{background:#a04a64}
.office-avatar[data-role="R07"] .avatar-body{background:#945a33}
.office-avatar .avatar-arm{position:absolute;top:15px;width:5px;height:16px;
 background:#d5a27d;border-top:5px solid #327795;border-radius:5px;transform-origin:center 3px}
.office-avatar .avatar-arm.left{left:1px;transform:rotate(20deg)}
.office-avatar .avatar-arm.right{right:0;transform:rotate(-20deg)}
.office-avatar .avatar-leg{position:absolute;top:29px;width:5px;height:13px;
 border-radius:2px;background:#252b3d}
.office-avatar .avatar-leg.left{left:5px}
.office-avatar .avatar-leg.right{right:5px}
.office-avatar .avatar-id{position:absolute;left:0;bottom:0;border:1px solid #6e8ba7;
 border-radius:20px;background:#0b223ce8;color:#e5f4fa;font-size:9px;
 font-weight:700;letter-spacing:.02em;min-width:42px;padding:3px 5px;text-align:center}
.office-avatar .avatar-state{position:absolute;right:1px;top:1px;
 border-radius:50%;color:#06111a;font-size:12px;font-weight:bold;line-height:14px;
 width:15px;height:15px;text-align:center;background:transparent}
.office-avatar:hover .avatar-id,.office-avatar:focus-visible .avatar-id,
.office-avatar.picked .avatar-id{background:#197a80;border-color:#a4faec;color:white}
.office-avatar:focus-visible{outline:3px solid #c8f9dd;border-radius:12px}
.office-avatar.status-running .avatar-figure{animation:office-typing 1s steps(2,end) infinite}
.office-avatar.status-running .avatar-arm.left{animation:office-left-type .27s ease-in-out infinite alternate}
.office-avatar.status-running .avatar-arm.right{animation:office-right-type .31s ease-in-out infinite alternate}
.office-avatar.status-running .avatar-state{background:#20d6b4;box-shadow:0 0 12px #0bffc288}
.office-avatar.status-review .avatar-figure{animation:office-meeting 2.7s ease-in-out infinite}
.office-avatar.status-review .avatar-arm.right{animation:office-point 1.8s ease-in-out infinite}
.office-avatar.status-review .avatar-state{background:#8de4de}
.office-avatar.status-queued .avatar-state{background:#f9c46d}
.office-avatar.status-queued .avatar-figure{animation:office-breathe 4s ease-in-out infinite}
.office-avatar.status-waiting-approval .avatar-state{background:#cdb1ff}
.office-avatar.status-completed .avatar-state{background:#74dda6}
.office-avatar.status-failed .avatar-state{background:#f27b80;box-shadow:0 0 8px #ef4444bb}
.office-avatar.status-stopped .avatar-figure{animation:none;filter:grayscale(1)}
.office-avatar.status-stopped .avatar-id{background:#3b4652}
.office-avatar.status-unverified .avatar-figure{animation:none;filter:grayscale(1)}
.office-avatar.status-unverified .avatar-state{background:#9ca8b5}
.office-avatar.status-running[data-role="R01"] .avatar-figure{animation:office-walk 2.8s ease-in-out infinite}
.office-avatar.status-review[data-role="R05"] .avatar-figure{animation:office-review-walk 3.6s ease-in-out infinite}
@keyframes office-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes office-typing{0%,100%{transform:translateY(0)}50%{transform:translateY(1px)}}
@keyframes office-left-type{from{transform:rotate(17deg)}to{transform:rotate(63deg)}}
@keyframes office-right-type{from{transform:rotate(-14deg)}to{transform:rotate(-55deg)}}
@keyframes office-meeting{0%,100%{transform:rotate(0)}50%{transform:rotate(-5deg)}}
@keyframes office-point{0%,35%,100%{transform:rotate(-20deg)}55%,75%{transform:rotate(-87deg)}}
@keyframes office-walk{0%,100%{transform:translate(0,0)}25%{transform:translate(11px,-6px)}50%{transform:translate(18px,-5px)}75%{transform:translate(8px,-4px)}}
@keyframes office-review-walk{0%,100%{transform:translate(0,0)}50%{transform:translate(-16px,-6px)}}
@media(max-width:1049px){.office .viewport{height:520px}.office .viewport #master-canvas{min-width:570px}}
@media(max-width:580px){.office .viewport{height:380px}.office .viewport #master-canvas{min-width:490px}
 .office-avatar{zoom:.9}}
@media(prefers-reduced-motion:reduce){
 .office-avatar .avatar-figure,.office-avatar .avatar-arm,.office-avatar.status-running .avatar-figure,
 .office-avatar.status-review .avatar-figure{animation:none!important}
 .office .viewport #master-canvas{will-change:auto}
}