/* Live office: preserve the existing illustration and surrounding dashboard. */
.office-stage{overflow:hidden;background:linear-gradient(145deg,#17232b,#131923 52%)}
.office-live{display:inline-flex;align-items:center;gap:7px;font-size:8px;letter-spacing:1.1px;color:#9aaeba;white-space:nowrap;border:1px solid #34444c;background:#152027;border-radius:20px;padding:6px 9px}
.office-live::before{content:'';width:5px;height:5px;background:currentColor;border-radius:50%}
.office-live[data-phase=active]{color:#b5ecc5;border-color:#4a7260;background:#1c322b}
.office-live[data-phase=preview]{color:#d0bbfa;border-color:#685480;background:#2b233c}
.office-stage .room{isolation:isolate}
.office-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.workstation{--agent-color:#b5ecc5}
[data-scene-agent]{--idle-tempo:5.6s;--motion-offset:-.8s}
[data-scene-agent=content]{--idle-tempo:4.8s;--motion-offset:-2.3s}
[data-scene-agent=compliance]{--idle-tempo:6.2s;--motion-offset:-3.7s}
[data-scene-agent=approval]{--idle-tempo:5.2s;--motion-offset:-1.6s}
[data-scene-agent=publisher]{--idle-tempo:5.9s;--motion-offset:-4.2s}
.agent-person{transform-origin:var(--person-origin)}
.agent-person,.agent-hand{opacity:1}
/* Ambient motion is visual only: phase labels and working indicators stay real. */
.agent-person{animation:office-breathing var(--idle-tempo) ease-in-out infinite;animation-delay:var(--motion-offset)}
.agent-hand{animation:office-resting-hand calc(var(--idle-tempo) * 1.4) ease-in-out infinite;animation-delay:var(--motion-offset)}
.workstation[data-phase=active] .agent-person,.workstation[data-phase=active] .agent-hand{opacity:1}
.workstation[data-phase=active] .agent-person{animation:office-working 2.8s ease-in-out infinite}
.workstation[data-phase=active] .agent-hand{animation:office-typing .55s ease-in-out infinite alternate}
.workstation[data-phase=active] .agent-person,.workstation[data-phase=active] .agent-hand{animation-delay:var(--motion-offset)}
.screen-light{fill:var(--agent-color);stroke:var(--agent-color);stroke-width:2;opacity:0;filter:drop-shadow(0 0 9px var(--agent-color));transition:opacity .3s}
.workstation .screen-light{animation:office-standby-screen calc(var(--idle-tempo) * 1.5) ease-in-out infinite;animation-delay:var(--motion-offset)}
.workstation[data-phase=active] .screen-light{animation:office-screen 2.4s ease-in-out infinite}
.typing-light{fill:var(--agent-color);opacity:0;filter:blur(4px)}
.workstation[data-phase=active] .typing-light{animation:office-keystroke .7s ease-in-out infinite alternate}
.work-bubble{position:absolute;z-index:3;transform:translate(-50%,-50%);background:#0e1929ed;border:1px solid color-mix(in srgb,var(--agent-color) 65%,transparent);border-radius:9px;padding:7px 10px;box-shadow:0 3px 12px #0006;pointer-events:none;opacity:0;transition:opacity .25s}
.work-bubble::after{content:'';position:absolute;bottom:-5px;left:calc(50% - 4px);width:7px;height:7px;transform:rotate(45deg);background:#132030;border-bottom:1px solid var(--agent-color);border-right:1px solid var(--agent-color)}
.work-bubble[data-phase=active],.work-bubble[data-phase=waiting]{opacity:1}
.work-bubble[data-phase=active]{animation:office-bubble 3s ease-in-out infinite}
.work-bubble[data-phase=waiting]{animation:office-bubble var(--idle-tempo) ease-in-out infinite;animation-delay:var(--motion-offset)}
.work-dots{display:flex;gap:4px;align-items:center;height:8px}
.work-dots i{width:4px;height:4px;background:var(--agent-color);border-radius:50%;animation:office-dot 1.1s ease-in-out infinite}
.work-dots i:nth-child(2){animation-delay:.15s}.work-dots i:nth-child(3){animation-delay:.3s}
.wait-glyph{display:none;color:#f2d398;font-size:13px;line-height:10px}
.work-bubble[data-phase=waiting] .work-dots{display:none}.work-bubble[data-phase=waiting] .wait-glyph{display:block}
.office-stage .desk{z-index:4;min-width:93px;padding:6px 8px;gap:2px;background:#111c2aec;border-color:#465461;border-radius:9px}
.desk-name{display:flex;align-items:center;gap:6px;font-size:10px}
.office-stage .desk small{font-size:8px;max-width:115px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#a4b3c7}
.agent-signal{display:inline-block;width:5px;height:5px;background:#637182;border-radius:50%;flex:none}
[data-phase=active] .agent-signal{background:#b5ecc5;box-shadow:0 0 8px #b5ecc580;animation:office-signal 1.8s ease-in-out infinite}
[data-phase=waiting] .agent-signal,[data-phase=paused] .agent-signal{background:#e6c18a}
[data-phase=attention] .agent-signal{background:#f19c9c}
[data-phase=done] .agent-signal{background:#b5ecc5}
.desk[data-phase=active]{border-color:#719f89;box-shadow:0 0 0 2px #b5ecc510,0 4px 18px #0008}
.desk[data-phase=waiting]{border-color:#a18a60}
.office-stage .desk.selected{border-color:#c1ecd0;background:#253b32ee}
.office-status{padding:13px 16px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid #293744;background:#101a24}
#office-work-summary{font-size:11px;color:#cad8df;line-height:1.65;min-height:18px}
.office-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.office-controls button{font-size:10px;font-weight:500;padding:5px 9px;border-radius:6px;background:#18232d;border-color:#34414c;color:#bac9d5}
.office-controls button[aria-pressed=true]{border-color:#526c62;color:#c9eed8}
.office-controls .scene-preview[aria-pressed=true]{border-color:#746183;color:#dfc8ff;background:#30253e}
.office-stage .room-label{z-index:2;font-size:7px;letter-spacing:1.6px;background:#101722d9}
.office-stage .room-legend{font-size:9px;padding:10px 16px;color:#8f9eae;flex-wrap:wrap}
.legend-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#b5ecc5;margin-right:4px}
.legend-dot.waiting{background:#e6c18a;margin-left:10px}
.office-queue{padding:12px 16px 4px}
.office-queue>div{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#a8b9c7;margin-bottom:5px}
.office-queue progress{display:block;width:100%;height:4px;accent-color:#b5ecc5;border:0;border-radius:3px;overflow:hidden;background:#263541}
.office-queue progress::-webkit-progress-bar{background:#263541}.office-queue progress::-webkit-progress-value{background:#b5ecc5}
.agent-strip .agent-card{padding:13px 4px 10px;gap:4px;position:relative;overflow:hidden;min-width:0}
.agent-card strong{font-size:10px;font-weight:600}
.agent-card .avatar-wrap{position:relative;display:block;margin-bottom:3px}
.avatar-wrap .agent-avatar{display:block}
.agent-card .agent-avatar{animation:office-standby-avatar var(--idle-tempo) ease-in-out infinite;animation-delay:var(--motion-offset)}
.avatar-wrap>.agent-signal{position:absolute;right:0;bottom:0;width:8px;height:8px;border:2px solid #131923}
.agent-card[data-phase=active]{background:linear-gradient(160deg,#22372d,#151d27 80%);border-color:#536f61}
.agent-card[data-phase=active] .agent-avatar{animation:office-avatar 2.8s ease-in-out infinite;border-color:var(--agent-color)}
.agent-card[data-phase=waiting]{border-color:#635740}
.agent-card-status{font-size:8px;color:#98a9bb;max-width:100%;padding:3px 3px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent-card[data-phase=active] .agent-card-status{color:#b5ecc5}.agent-card[data-phase=waiting] .agent-card-status{color:#e6c18a}
@keyframes office-working{0%,100%{transform:translate(0,0) rotate(0)}35%{transform:translate(.6px,1.8px) rotate(.35deg)}65%{transform:translate(-.5px,.6px) rotate(-.2deg)}}
@keyframes office-breathing{0%,100%{transform:translate(0,0) rotate(0)}40%{transform:translate(1px,-3px) rotate(.55deg)}70%{transform:translate(-1px,-1px) rotate(-.3deg)}}
@keyframes office-resting-hand{0%,30%,75%,100%{transform:translate(0,0)}50%{transform:translate(1px,-2px)}}
@keyframes office-standby-screen{0%,100%{opacity:.035}50%{opacity:.13}}
@keyframes office-standby-avatar{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(1.5deg)}}
@keyframes office-typing{from{transform:translateY(0)}to{transform:translateY(2.5px)}}
@keyframes office-screen{0%,100%{opacity:.12}50%{opacity:.34}}
@keyframes office-keystroke{from{opacity:.04}to{opacity:.25}}
@keyframes office-dot{0%,70%,100%{transform:translateY(0);opacity:.45}35%{transform:translateY(-3px);opacity:1}}
@keyframes office-bubble{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 3px))}}
@keyframes office-signal{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes office-avatar{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-3deg)}}
#main[data-motion=off] .office-stage *,#main[data-motion=off] .agent-strip *{animation:none!important}
#main[data-motion=off] .workstation[data-phase=active] .screen-light{opacity:.2}
#main[data-motion=off] .agent-person,#main[data-motion=off] .agent-hand{opacity:0}
@media(max-width:560px){.office-stage .desk{min-width:70px;padding:4px 5px}.desk-name{font-size:9px}.office-stage .desk small{font-size:7px;max-width:90px}.work-bubble{padding:5px 7px;border-radius:7px}.work-dots{gap:3px;height:6px}.work-dots i{width:3px;height:3px}.office-stage .room-label{font-size:5px;letter-spacing:1px}.office-live{font-size:7px;padding:5px 7px}.office-stage .panel-head{gap:8px}.office-stage .panel-head p{font-size:10px}.agent-card-status{font-size:7px}.office-stage .room-legend{font-size:8px}.office-status{padding:11px 12px}.office-stage .desk-manager{top:34%}}
@media(prefers-reduced-motion:reduce){.office-stage *,.agent-strip *{animation:none!important;transition:none!important}.workstation[data-phase=active] .screen-light{opacity:.2}.agent-person,.agent-hand{opacity:0!important}}