/* Preview-only finishing layer. Scene colors are driven exclusively by MYT. */
.office-embedded .bottom{position:relative;display:flex;gap:10px;flex-wrap:nowrap}
.office-embedded .bottom .office-pixel-control{width:116px;min-width:0}
.activity-popover{position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%);width:min(330px,calc(100vw - 40px));max-height:min(440px,65dvh);overflow:auto;background:var(--panel);color:var(--ink);border:2px solid var(--line);border-radius:8px;box-shadow:5px 6px 0 #0002;padding:14px 16px;z-index:2000;font:15px/1.35 Pixel,monospace;text-align:left}
.activity-popover h2{font:19px Pixel,monospace;margin:0 0 4px}.activity-popover>p{margin:0 0 10px;color:var(--accent);font-size:13px}
.activity-row{display:flex;gap:12px;align-items:center;padding:5px 0;border-top:1px solid color-mix(in srgb,var(--line) 30%,transparent)}
.activity-row img{width:36px;height:38px;object-fit:contain;image-rendering:pixelated;flex:none}.activity-row strong{font-weight:normal;display:block}.activity-row span{font-size:12px;display:block;opacity:.8}.activity-row.off img{filter:grayscale(1);opacity:.5}
.resting-note{position:absolute;top:53%;left:50%;transform:translate(-50%,-50%);z-index:4;max-width:90%;text-align:center;color:var(--ink);pointer-events:none;text-shadow:0 1px var(--page);font:16px/1.6 Pixel,monospace}.resting-note strong{display:block;font-size:25px;font-weight:normal}.resting-note span{display:block;opacity:.8;margin-top:8px}
.screen-off{background:#243033!important}.screen-off:before{background:linear-gradient(135deg,#b8d3ca14,transparent)}.standby-light{position:absolute;right:7px;bottom:6px;width:3px;height:3px;background:#a9c484;box-shadow:0 0 5px #a9c48480}
.office[data-mode=asleep] .asset-backdrop{filter:brightness(.28) saturate(.45)}.office[data-mode=asleep] .asset-ground{background:radial-gradient(ellipse at 70% 0%,#293b3d,#1b292e 80%)}.office[data-mode=asleep] .asset-furniture,.office[data-mode=asleep] .room-object{filter:brightness(.55)}
.office-world .actor{width:128px;height:128px}.office-world .guest.guest-boss{width:168px;height:168px}
.boss-working img{animation:none!important}.room-target{touch-action:manipulation}.office-pixel-control{touch-action:manipulation}
@media(max-width:600px){.office-embedded .bottom{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.office-embedded .bottom .office-pixel-control{width:100%;font-size:12px;gap:4px;padding:8px 4px}.office-pixel-control svg,.office-pixel-control img{width:17px;height:17px;flex-basis:17px}.activity-popover{left:50%;width:min(320px,calc(100vw - 28px))}.resting-note{position:sticky;left:0;top:48%;transform:none;margin:auto;width:90%;font-size:14px}.resting-note strong{font-size:22px}}
/* Scale people with the available room height so rows stay readable on short screens. */
.office-world{container-type:size}
@container (max-height:500px){
 .room-person,.office-world .actor{width:96px;height:96px}
 .remote-person{width:52px;height:58px}
 .living-screen{height:18cqh}
 .office-world .guest{width:106px;height:106px}.office-world .guest.guest-boss{width:127.2px;height:127.2px}
 .object-board{width:88px;height:74px}.object-meeting{width:50px;height:42px}
 .colleague-label{font-size:11px}
}
/* Coffee reactions stay in front of pantry props, not behind the chairs/books. */
.office-world .actor[data-state=coffee],.office-world .actor[data-state=happy]{z-index:1050!important}
.object-printer{width:62px;height:56px}.object-cat{width:68px;height:68px}
.office[data-mode=after] .object-cat:after,.office[data-mode=asleep] .object-cat:after,.office[data-mode=weekend] .object-cat:after,.office[data-mode=before] .object-cat:after{content:'z z';position:absolute;right:0;top:0;font:14px Pixel,monospace;color:var(--ink);text-shadow:1px 1px var(--panel)}
/* Unified supplied panoramas, joined by one continuous floor. */
.asset-backdrop{left:36%;width:64%;height:35%;background-image:url('office-assets/backgrounds/office-redrawn.webp');background-size:cover;background-position:center bottom;filter:none;overflow:visible}
.asset-backdrop:before{content:'';position:absolute;right:100%;top:0;width:56.25%;height:100%;background:url('office-assets/backgrounds/cafeteria-redrawn.webp') center bottom/cover no-repeat}
.asset-backdrop:after{content:'';position:absolute;left:-12px;top:0;bottom:0;width:24px;background:linear-gradient(90deg,#9f968744,#ada89822,transparent);pointer-events:none}
.asset-ground{background:linear-gradient(180deg,#b8ac95,#d4c6ab 45%,#c8b798)}
body,.page,button,select,.office-embedded .bottom,.office-guide,.world-feedback,.activity-popover{font-family:Pixel,monospace}
.world-feedback[data-kind=reaction],.office-embedded .world-feedback[data-kind=reaction]{background:#182c2aee;color:#fffdec;border:1px solid #b6c8a566;border-radius:7px;padding:9px 13px;font:16px/1.4 Pixel,monospace;font-weight:400;text-shadow:none;box-shadow:0 3px 0 #0002;max-width:min(270px,calc(100% - 28px))}
.world-feedback[data-kind=strip]{max-height:100px;overflow:auto}.world-feedback[data-kind=reaction]:after{display:none}
.activity-popover{width:min(710px,calc(100vw - 48px));max-height:min(470px,calc(100dvh - 115px));padding:16px}
.activity-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.activity-row{border:1px solid color-mix(in srgb,var(--line) 60%,transparent);background:color-mix(in srgb,var(--panel) 90%,var(--line));border-radius:7px;padding:10px 8px;gap:8px;min-width:0;align-items:center}
.activity-row img{width:40px;height:48px}.activity-row>div{min-width:0}.activity-row strong{font-size:15px}.activity-row span{font-size:13px;overflow-wrap:anywhere;line-height:1.35}.activity-row small{font:11px/1.4 Pixel,monospace;display:block;opacity:.65;margin-top:4px}
.cat-menu{position:absolute;z-index:15;transform:translateX(-50%);width:min(280px,calc(100% - 24px));padding:12px;border:2px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);box-shadow:3px 4px 0 #0002;font:15px/1.4 Pixel,monospace}
.cat-menu strong{font-weight:400;display:block;margin-bottom:8px}.cat-actions{display:flex;gap:6px}.cat-actions button{flex:1;min-height:44px;background:var(--page);border:1px solid var(--line);border-radius:5px;padding:6px;font:14px Pixel,monospace}.cat-actions button:disabled{opacity:.5}.cat-record{display:block;font-size:13px;margin-top:9px}
.object-cat{width:92px;height:92px;transition:filter .2s;cursor:pointer}
.object-cat:after{content:''!important}
.object-cat[data-cat-state=sleeping]:after{content:'z z'!important;position:absolute;right:12px;top:14px;color:var(--ink);font:14px Pixel,monospace;background:var(--panel);border-radius:4px;padding:2px 4px}
.object-cat[data-cat-state=happy]:after,.object-cat[data-cat-state=clingy]:after{content:'♥'!important;position:absolute;right:8px;top:8px;color:#ac4058;font-size:17px;text-shadow:1px 1px var(--panel)}
.object-cat[data-cat-state=angry]:after{content:'!'!important;position:absolute;right:10px;top:8px;color:#b63825;background:var(--panel);padding:1px 5px;border-radius:4px}
.object-cat[data-cat-state=walking] img{animation:cat-step .55s steps(2) infinite}.object-cat[data-cat-state=happy] img{animation:cat-happy .7s ease 2}.object-cat[data-cat-state=angry] img{animation:office-grumble .2s 2}.object-cat[data-cat-state=ignore] img{transform:scaleX(-1)}.object-cat[data-cat-state=sleeping] img{transform:translateY(7px) scaleY(.85)}
.cat-attention img{animation:cat-pet 2s ease 2!important}@keyframes cat-step{50%{translate:0 -2px}}@keyframes cat-happy{50%{translate:0 -3px;rotate:3deg}}@keyframes cat-pet{50%{rotate:-3deg;translate:0 1px}}
@media(min-width:601px) and (max-width:950px){.activity-popover{width:min(520px,calc(100vw - 40px))}.activity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.activity-popover{width:calc(100vw - 40px);max-height:min(440px,calc(100dvh - 130px))}.activity-grid{grid-template-columns:minmax(0,1fr);gap:7px}.activity-row{padding:8px 12px}.activity-row img{width:38px;height:40px}.activity-row strong{font-size:16px}.activity-row small{margin-top:1px}.world-feedback[data-kind=reaction]{font-size:15px;max-width:calc(100% - 28px)}}
@media(prefers-reduced-motion:reduce){.object-cat img,.cat-attention img{animation:none!important;transition:none!important}}
@media(min-width:951px){.activity-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.activity-row{grid-column:span 2}.activity-row:nth-last-child(2):nth-child(3n+1),.activity-row:last-child:nth-child(3n+2){grid-column:span 3}}
@media(min-width:601px) and (max-width:950px){.activity-row:last-child:nth-child(odd){grid-column:1/-1}}

/* Matched prop scale; tabletop objects share the desk anchor and foreground layer. */
.object-printer{width:44px;height:44px;transform:translate(-50%,calc(-100% + 8px));z-index:890!important}
.object-work{width:48px;height:44px;transform:translate(-50%,calc(-100% + 8px));z-index:890!important}
.object-phone{width:44px;height:44px;transform:translate(-50%,calc(-100% + 8px));z-index:891!important}
.object-phone img{width:18px;height:28px;position:absolute;bottom:0;left:13px}
.object-coffee{width:44px;height:44px;transform:translate(-50%,calc(-100% + 8px));z-index:450!important}
.object-coffee img{width:22px;height:29px;position:absolute;bottom:0;left:11px}
.object-meeting{width:44px;height:44px;transform:translate(-50%,calc(-100% + 8px));z-index:350!important}
.object-meeting img{width:30px;height:26px;position:absolute;bottom:0;left:7px}
.object-break{width:48px;height:57px}.object-board{width:96px;height:83px}
.asset-furniture[data-prop=books]{transform:translate(-50%,calc(-100% + 8px));z-index:449!important}
/* A framed structural pier covers the panorama joint from ceiling to floor. */
.asset-backdrop:after{left:-14px;top:0;bottom:-6px;width:28px;background:linear-gradient(90deg,#626e70 0 3px,#aeb5af 3px 7px,#8d9895 7px 23px,#5c696a 23px);border-top:6px solid #58666b;border-bottom:8px solid #566463;box-shadow:5px 2px 0 #152b3433;z-index:2}
.cat-actions button{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;padding:7px 5px;line-height:1.15}
.cat-action-icon{width:18px;height:18px;flex:0 0 18px;color:var(--accent)}
.cat-actions button span{max-width:58px}
/* Enlarge around the existing foot anchor, without lowering Boss into the floor. */
.office-world .guest.guest-boss{transform:translate(-50%,calc(-65% - 16.8px))}
@container(max-height:500px){.office-world .guest.guest-boss{transform:translate(-50%,calc(-65% - 14.42px))}}

@container(max-height:500px){.office-desk .desk-leg{height:17px}.office-desk .desk-leg.back-left,.office-desk .desk-leg.back-right{height:28px}.office-desk .desk-surface{height:18px}.office-desk .desk-apron{top:17px;height:5px}.office-desk .desk-leg.left,.office-desk .desk-leg.right{top:22px}}

/* Approved compact dialogue system: speech and cloud thoughts only. */
.office .world-feedback{pointer-events:auto;font:14.4px/1.5 Pixel,monospace!important;max-width:min(248px,calc(100% - 28px))!important;padding:9.6px 12.8px!important;background:#fffef2!important;color:#283d30!important;border:1.6px solid #819570!important;border-radius:6.4px!important;box-shadow:2px 3px 0 #31442c22!important}
.world-feedback strong{display:block;font:10.4px/1.4 Pixel,monospace;color:#596952;margin-bottom:4px}
.dialogue-next{display:block;margin:6px 0 0 auto;padding:4px;border:0;background:transparent;color:inherit;font:12px Pixel,monospace;text-decoration:underline;min-height:32px;cursor:pointer}
.office .world-feedback[data-kind=thought]{background:transparent!important;border:0!important;box-shadow:none!important;padding:22px 25px!important;isolation:isolate;scale:.9;transform-origin:center bottom}
.world-feedback[data-kind=thought]:before{content:'';position:absolute;inset:-8px;z-index:-1;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20320%20150%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M40%20125C6%20127%200%2092%2020%2075C-2%2049%2024%2023%2054%2030C60%205%20101%200%20123%2019C146%20-2%20184%201%20202%2020C232%201%20269%2013%20272%2035C311%2026%20329%2061%20305%2082C327%20111%20296%20139%20268%20130C252%20153%20213%20150%20195%20135C169%20154%20133%20150%20115%20135C87%20154%2049%20147%2040%20125Z%22%20fill%3D%22%23dfe6d9%22%20stroke%3D%22%23a6b29e%22%20stroke-width%3D%222%22/%3E%3C/svg%3E") center/100% 100% no-repeat}
.office .world-feedback[data-kind=thought]:after{content:'';position:absolute;left:55%;bottom:-17px;width:9px;height:9px;border-radius:50%;background:#dfe6d9;border:1px solid #a6b29e;box-shadow:6px 11px 0 -2px #dfe6d9,6px 11px 0 -1px #a6b29e}

.office .world-feedback[data-kind=speech][data-placement=below]:after{top:-7px;bottom:auto;transform:rotate(225deg);background:#fffef2;border-color:#819570}

/* First-visit guidance stays on the wall, clear of Carmen and the desks. */
@media(max-width:600px){
 .office-guide{top:58px;bottom:auto;left:10px;right:10px;padding:6px 8px;font-size:12px;line-height:1.4;text-align:center;border-left-width:1px;border-radius:6px;white-space:nowrap}
}
