:root {
  --hud-h: 66px;
  --ink: #17212a;
  --muted: #73808a;
  --line: #dfe5e9;
  --blue: #2468c9;
  --green: #2c9b68;
  --yellow: #c58a2b;
  --red: #cf5656;
  --panel-w: 410px;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { color: var(--ink); background: #111820; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; overflow: hidden; }
button, textarea, a { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; left: 12px; top: -50px; z-index: 100; padding: 9px 13px; color: #fff; background: var(--blue); border-radius: 7px; }
.skip-link:focus { top: 10px; }

.office-hud { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--hud-h); display: grid; grid-template-columns: 270px 1fr auto; align-items: center; gap: 18px; padding: 0 18px; color: #fff; background: rgba(14,21,27,.95); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(18px); }
.hud-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #2f70d3; font-weight: 800; }
.hud-brand > span:last-child { display: grid; min-width: 0; }
.hud-brand strong { font-size: 14px; white-space: nowrap; }
.hud-brand small { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: #aab5bd; font-size: 9px; }
.hud-brand small i { width: 7px; height: 7px; border-radius: 50%; background: #42ba80; box-shadow: 0 0 0 4px rgba(66,186,128,.1); }
.hud-metrics { display: flex; align-items: center; justify-content: center; gap: 7px; }
.metric { position: relative; min-width: 74px; height: 40px; display: grid; grid-template-columns: auto auto; grid-template-rows: 1fr 1fr; align-items: center; justify-content: center; column-gap: 5px; padding: 5px 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; color: #fff; background: rgba(255,255,255,.055); }
.metric i { grid-row: 1 / 3; width: 7px; height: 7px; border-radius: 50%; }
.metric b { align-self: end; font-size: 12px; line-height: 1; }
.metric small { align-self: start; margin-top: 2px; color: #aeb8c0; font-size: 8px; }
.metric.green i { background: var(--green); }.metric.yellow i { background: var(--yellow); }.metric.red i { background: var(--red); }
.hud-actions { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.hud-actions > a, .hud-actions > button { padding: 8px 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 7px; color: #dbe2e7; background: rgba(255,255,255,.035); text-decoration: none; cursor: pointer; }
.hud-actions > a:hover, .hud-actions > button:hover { color: #fff; background: rgba(255,255,255,.1); }
#hud-clock, #user-info { color: #9ca9b2; font-size: 10px; }

.office-view { position: fixed; inset: var(--hud-h) 0 0; overflow: hidden; background: #151d23; user-select: none; }
.live-stage { position: absolute; left: 50%; top: 50%; width: 1780px; height: 1000px; transform-origin: center; background: #26333b url('/static/assets/office-live-background.png?v=20260712-a') center / cover no-repeat; will-change: transform; }
.actor-layer { position: absolute; inset: 0; }
.cinematic-grade { position: absolute; inset: 0; z-index: 8; pointer-events: none; background: linear-gradient(180deg, rgba(5,11,16,.08), transparent 27%, transparent 72%, rgba(5,11,16,.24)), radial-gradient(circle at 50% 45%, transparent 48%, rgba(5,11,16,.2) 118%); }
.zone { position: absolute; z-index: 1; padding: 5px 9px; border-radius: 999px; color: rgba(255,255,255,.8); background: rgba(14,23,29,.42); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(7px); font-size: 9px; letter-spacing: .04em; pointer-events: none; }
.zone-meeting { left: 46%; top: 35%; }.zone-ops { left: 15%; top: 53%; }.zone-finance { right: 13%; top: 52%; }.zone-lounge { right: 17%; top: 43%; }

.actor { position: absolute; z-index: 4; width: 96px; height: 205px; padding: 0; border: 0; color: inherit; background: none; cursor: pointer; transform-origin: 50% 100%; will-change: left, top, transform; transition: filter .2s ease; }
.actor:hover, .actor:focus-visible, .actor.selected { z-index: 15 !important; filter: drop-shadow(0 12px 12px rgba(0,0,0,.28)); outline: none; }
.actor-shadow { position: absolute; left: 18%; right: 18%; bottom: 0; height: 11px; border-radius: 50%; background: rgba(12,17,20,.24); filter: blur(4px); transform: scaleX(1); }
.actor-body { position: absolute; inset: 0 0 4px; transform-origin: 50% 100%; }
.actor-part { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; transform-origin: 50% 64%; }
.actor-upper { clip-path: polygon(0 0,100% 0,100% 66%,0 66%); }
.actor-leg-left { clip-path: polygon(0 58%,52% 58%,52% 100%,0 100%); transform-origin: 46% 61%; }
.actor-leg-right { clip-path: polygon(48% 58%,100% 58%,100% 100%,48% 100%); transform-origin: 54% 61%; }
.actor.walking .actor-upper { animation: torso-walk .58s ease-in-out infinite alternate; }
.actor.walking .actor-leg-left { animation: leg-left .72s ease-in-out infinite alternate; }
.actor.walking .actor-leg-right { animation: leg-right .72s ease-in-out infinite alternate; }
.actor.walking .actor-shadow { animation: shadow-step .72s ease-in-out infinite alternate; }
.actor.working .actor-upper { animation: breathing 2.4s ease-in-out infinite alternate; }
.actor.talking .actor-upper { animation: talking 1.6s ease-in-out infinite; }
.actor.seated { height: 142px; }
.actor.seated .actor-body { clip-path: inset(0 0 38% 0); transform: translateY(46px) scale(1.08); }
.actor.seated .actor-shadow { opacity: .2; }
@keyframes torso-walk { from { transform: translateY(0) rotate(-.5deg); } to { transform: translateY(-3px) rotate(.7deg); } }
@keyframes leg-left { from { transform: rotate(5deg) translateX(1px); } to { transform: rotate(-6deg) translateX(-1px); } }
@keyframes leg-right { from { transform: rotate(-6deg) translateX(-1px); } to { transform: rotate(5deg) translateX(1px); } }
@keyframes shadow-step { from { transform: scaleX(.82); opacity: .18; } to { transform: scaleX(1.08); opacity: .3; } }
@keyframes breathing { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes talking { 0%,100% { transform: rotate(0); } 35% { transform: rotate(-1.4deg); } 65% { transform: rotate(1deg); } }
.actor-label { position: absolute; left: 50%; bottom: calc(100% + 3px); min-width: 90px; max-width: 170px; transform: translateX(-50%); padding: 7px 9px; border-radius: 8px; color: #fff; background: rgba(15,25,32,.84); box-shadow: 0 8px 20px rgba(0,0,0,.18); backdrop-filter: blur(10px); text-align: left; pointer-events: none; }
.actor-label strong { display: flex; align-items: center; gap: 5px; font-size: 10px; white-space: nowrap; }
.actor-label strong i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.actor.status-yellow .actor-label strong i { background: var(--yellow); }.actor.status-red .actor-label strong i { background: var(--red); }
.actor-label span { display: block; margin-top: 3px; overflow: hidden; color: #c5d0d7; font-size: 8px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.actor-event { position: absolute; left: 76%; top: 22%; width: 180px; padding: 9px 10px; border-radius: 8px; color: #20303a; background: rgba(255,255,255,.94); box-shadow: 0 12px 28px rgba(18,29,37,.18); font-size: 9px; line-height: 1.5; opacity: 0; transform: translateY(5px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.actor.event-visible .actor-event { opacity: 1; transform: translateY(0); }

.mode-panel { position: absolute; left: 18px; top: 18px; z-index: 20; min-width: 300px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 11px 10px 13px; color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(13,23,30,.67); backdrop-filter: blur(14px); box-shadow: 0 12px 32px rgba(0,0,0,.16); }
.mode-panel > div:first-child { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 7px; }
.mode-panel i { grid-row: 1 / 3; width: 7px; height: 7px; border-radius: 50%; background: #56b988; box-shadow: 0 0 0 4px rgba(86,185,136,.13); }
.mode-panel strong { font-size: 11px; }.mode-panel span { margin-top: 2px; color: #b9c5cc; font-size: 8px; }
.mode-switch { display: flex; padding: 2px; border-radius: 7px; background: rgba(255,255,255,.07); }
.mode-switch button { padding: 6px 8px; border: 0; border-radius: 5px; color: #afbbc3; background: transparent; font-size: 9px; cursor: pointer; }
.mode-switch button.active { color: #fff; background: #2f6fcb; }
.walk-start { position: absolute; left: 50%; top: 52%; z-index: 20; display: grid; gap: 5px; transform: translate(-50%,-50%); padding: 13px 17px; border: 1px solid rgba(255,255,255,.28); border-radius: 10px; color: #fff; background: rgba(13,22,28,.72); backdrop-filter: blur(13px); box-shadow: 0 14px 36px rgba(0,0,0,.22); text-align: center; pointer-events: none; transition: opacity .35s ease; }
.walk-start strong { font-size: 12px; }.walk-start span { color: #c4cdd3; font-size: 9px; }.office-started .walk-start { opacity: 0; }
.interaction-prompt { position: absolute; left: 50%; top: 42%; z-index: 22; width: 210px; transform: translate(-50%,-50%); padding: 9px 11px; border-radius: 9px; color: #fff; background: rgba(13,23,30,.8); backdrop-filter: blur(12px); text-align: center; pointer-events: none; }
.interaction-prompt span,.interaction-prompt small { display: block; color: #b9c6ce; font-size: 8px; }.interaction-prompt strong { display: block; margin: 3px 0; font-size: 12px; }
.control-help { position: absolute; left: 18px; bottom: 58px; z-index: 20; display: flex; align-items: center; gap: 5px; padding: 9px 11px; border-radius: 9px; color: #d7dfe4; background: rgba(12,21,27,.72); backdrop-filter: blur(12px); font-size: 9px; }
.control-help kbd,.control-help b { padding: 4px 6px; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; color: #fff; background: rgba(255,255,255,.06); font-size: 8px; font-weight: 600; }
.activity-strip { position: absolute; left: 18px; right: 18px; bottom: 12px; z-index: 20; height: 38px; display: grid; grid-template-columns: 100px 1fr; align-items: center; overflow: hidden; border-radius: 9px; color: #d7e0e5; background: rgba(12,21,27,.76); backdrop-filter: blur(14px); }
.activity-strip > strong { height: 100%; display: grid; place-items: center; border-right: 1px solid rgba(255,255,255,.1); font-size: 9px; }
.ticker { display: flex; gap: 26px; padding: 0 14px; overflow: hidden; white-space: nowrap; }
.ticker-item { display: inline-flex; gap: 6px; align-items: center; color: #bdc8cf; font-size: 8px; }.ticker-item b { color: #75a8df; }.ticker-item time { color: #82919b; }

.chat-panel { position: fixed; right: 0; top: var(--hud-h); bottom: 0; z-index: 70; width: var(--panel-w); display: grid; grid-template-rows: auto auto 1fr auto auto; background: rgba(251,252,253,.985); box-shadow: -20px 0 55px rgba(11,22,30,.2); transform: translateX(105%); transition: transform .28s ease; }
.chat-panel.open { transform: translateX(0); }
.chat-header { display: grid; grid-template-columns: 48px 1fr auto; gap: 11px; align-items: center; padding: 17px 14px; border-bottom: 1px solid var(--line); }
.panel-photo { width: 48px; height: 48px; border-radius: 50%; background: #dbe5ed center 12% / 150% auto no-repeat; border: 1px solid #d9e1e6; }
.chat-header > div { display: grid; min-width: 0; }.chat-header strong { font-size: 15px; }.chat-header > div > span { margin-top: 2px; overflow: hidden; color: #7d8992; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.chat-header small { display: flex; align-items: center; gap: 5px; margin-top: 5px; color: #60717d; font-size: 9px; }.chat-header small i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.chat-header button { align-self: start; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; color: #697781; background: #fff; cursor: pointer; }
.current-task { margin: 12px 14px 0; padding: 10px 11px; border-left: 3px solid #6da4e9; background: #edf4fb; }.current-task span { display: block; color: #84919a; font-size: 8px; }.current-task strong { display: block; margin-top: 3px; color: #4f6270; font-size: 10px; }
.chat-messages { min-height: 0; overflow: auto; padding: 18px 14px 10px; }
.chat-empty { height: 100%; display: grid; place-content: center; gap: 7px; color: #61717c; text-align: center; }.chat-empty strong { font-size: 12px; }.chat-empty span { max-width: 250px; color: #8d9aa3; font-size: 9px; line-height: 1.6; }
.chat-day { margin: 2px 0 15px; color: #9aa5ac; font-size: 9px; text-align: center; }
.chat-message { display: flex; align-items: flex-end; gap: 7px; margin: 0 0 14px; }.chat-message.owner { justify-content: flex-end; }.message-avatar { flex: 0 0 auto; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: #376da9; font-size: 10px; }
.message-stack { max-width: 78%; display: grid; gap: 4px; }.owner .message-stack { justify-items: end; }.message-bubble { padding: 9px 11px; border-radius: 10px; color: #25343e; background: #edf0f2; font-size: 10px; line-height: 1.55; white-space: pre-wrap; }.owner .message-bubble { background: #dceafb; }.message-time { color: #9aa6ad; font-size: 8px; }
.chat-typing { display: flex; align-items: center; gap: 4px; padding: 0 14px 10px; color: #7e8d96; font-size: 8px; }.chat-typing i { width: 5px; height: 5px; border-radius: 50%; background: #9eabb4; animation: dot .9s ease-in-out infinite alternate; }.chat-typing i:nth-child(2){animation-delay:.15s}.chat-typing i:nth-child(3){animation-delay:.3s}@keyframes dot{to{transform:translateY(-3px);opacity:.45}}
.chat-error { margin: 0 14px 8px; padding: 8px 9px; border-radius: 6px; color: #9d3c3c; background: #fff0f0; font-size: 9px; }
.chat-compose { padding: 10px 14px 14px; border-top: 1px solid var(--line); background: #fff; }.chat-compose textarea { width: 100%; min-height: 64px; max-height: 130px; resize: none; padding: 10px; border: 1px solid #cfd8df; border-radius: 9px; color: #263842; outline: none; }.chat-compose textarea:focus { border-color: #6e9fdf; box-shadow: 0 0 0 3px rgba(64,122,201,.11); }.chat-compose > div { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }.chat-compose span { color: #9aa5ad; font-size: 8px; }.chat-compose button { padding: 8px 22px; border: 0; border-radius: 7px; color: #fff; background: #2867c7; cursor: pointer; }.chat-compose button:disabled,.chat-compose textarea:disabled { opacity: .55; cursor: wait; }

@media (max-width: 900px) {
  .office-hud { grid-template-columns: 1fr auto; }.hud-metrics { display: none; }.hud-actions a,#user-info,#hud-clock { display: none; }
  .mode-panel { right: 12px; left: 12px; min-width: 0; }.control-help { display: none; }
  .chat-panel { width: min(100vw, 410px); }.activity-strip { left: 10px; right: 10px; }.live-stage { width: 1450px; height: 816px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }