@import url('./features/office/avatar.css');
@import url('./features/office/avatar-presets-ui.css');
@import url('./features/office/room.css');
@import url('./features/office/emotes.css');
@import url('./features/office/jukebox.css');
@import url('./features/office/lobby-editor.css');
@import url('./features/office/actions.css');
@import url('./features/office/dock.css');
@import url('./features/office/todos.css');
@import url('./features/office/games.css');
@import url('./features/office/game-icons.css');
@import url('./features/office/work-indicator.css');
@import url('./features/office/shared-drawing.css');
@import url('./features/office/online-rewards.css');
@import url('./features/office/messenger.css');
@import url('./features/office/guide.css');
@import url('./features/office/pet-ai-toggle.css');
@import url('./features/office/smoking-ui.css');
.office-duel-badge { position:absolute;left:50%;top:-40px;transform:translateX(-50%);display:flex;align-items:center;gap:3px;padding:2px 9px 2px 3px;border:2.5px solid #1f2a44;border-radius:999px;background:linear-gradient(180deg,#ffe58a,#ffbf2e);box-shadow:inset 0 -2px 0 #d18e00,inset 0 2px #ffffffa0,0 3px 0 #1f2a4466;white-space:nowrap;font-size:17px;line-height:1;animation:office-duel-bob 1.6s ease-in-out infinite; }
.office-duel-badge[hidden] { display:none; }
.office-duel-badge img { width:24px;height:24px;box-sizing:border-box;object-fit:contain;border:2px solid #1f2a44;border-radius:50%;background:#fff; }
.office-duel-badge::after { content:'';position:absolute;left:50%;bottom:-8px;margin-left:-5px;border:5px solid transparent;border-top:6px solid #1f2a44; }
@keyframes office-duel-bob { 0%,100% { translate:0 0; } 50% { translate:0 -4px; } }
@media(prefers-reduced-motion:reduce) { .office-duel-badge { animation:none; } }
#view-office { width:100%; max-width:none; min-width:0; min-height:0; height:100%; margin:0; display:flex; flex-direction:column; position:relative; overflow:hidden; overflow-anchor:none; animation:none; transform:none; }
.content-area.office-content-active { padding:84px 22px 18px; overflow:hidden; display:flex; flex-direction:column; min-width:0; min-height:0; }
.content-area.office-content-active #view-office { height:auto; flex:1; }
.content-area.office-content-active .notif-area { top:18px; right:22px; }
.content-area.office-content-active .notif-dropdown { max-width:calc(100vw - 30px); max-height:min(400px,calc(100dvh - 100px)); }
.office-toolbar { display:flex; flex-shrink:0; align-items:center; justify-content:space-between; gap:14px; margin:0 0 12px; min-height:42px; }
.office-toolbar h1 { margin:0; font-size:25px; min-width:0; max-width:50%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.office-toolbar-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.office-toolbar button, .office-chat button, .office-load-error button { border:1px solid var(--border-color); background:var(--card-bg); color:var(--text-primary); border-radius:8px; padding:9px 12px; font:inherit; font-size:12px; cursor:pointer; }
.office-connection { font-size:11px; color:var(--text-secondary); margin-right:6px; min-width:72px; text-align:right; }
.office-connection[data-state="connected"]::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:#68c58a; margin-right:6px; }
.office-game { position:relative; display:flex; flex:1; flex-direction:column; min-height:0; background:#25303c; border:1px solid #576578; border-radius:12px; overflow:hidden; }
.office-stage { position:relative; flex:1; min-height:0; overflow:clip; overflow-anchor:none; background:#bfc4cc; isolation:isolate; outline:none; touch-action:none; }
.office-stage:focus-visible { outline:2px solid #a6c9f3; outline-offset:-2px; }
.office-stage.is-panning { cursor:grabbing; user-select:none; }
.office-camera-controls { position:absolute; right:12px; bottom:12px; z-index:20; display:flex; align-items:center; gap:3px; padding:5px; border:1px solid #c0dce780; border-radius:14px; color:#e8f5ff; background:#20384ee8; box-shadow:0 3px 8px #12253633; }
.office-camera-controls button { display:flex; align-items:center; justify-content:center; gap:5px; min-width:30px; height:30px; padding:0 6px; border:0; border-radius:8px; background:transparent; color:inherit; font:600 18px system-ui; cursor:pointer; }
.office-camera-controls button:hover,.office-camera-controls button:focus-visible { background:#ffffff24; }
.office-camera-controls output { min-width:42px; text-align:center; font:600 11px system-ui; font-variant-numeric:tabular-nums; }
.office-camera-controls [data-camera-home] { border-left:1px solid #ffffff26; border-radius:0 8px 8px 0; padding-left:9px; font-size:11px; }
.office-camera-controls [data-camera-home].is-detached { color:#ffdc83; }
.office-world { position:absolute; left:0; top:0; will-change:transform; }
.office-scenery,.office-actors { position:absolute; inset:0; }
.office-actors { pointer-events:none; }
.office-hall { position:absolute; inset:0; background-size:300px 390px; background-repeat:repeat-x; }
.office-door-plate { position:absolute; top:58px; transform:translateX(-50%); background:#2c3848eb; border:1px solid #a4b4c5; box-shadow:0 2px 3px #25304440; border-radius:5px; min-width:85px; max-width:180px; text-align:center; padding:5px 9px; color:#edf3fa; font-size:12px; }
.office-door-plate strong { display:block; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.office-door-light { display:block; font:10px monospace; margin-bottom:2px; }
.office-door-light::before { content:''; display:inline-block; width:5px; height:5px; background:currentColor; border-radius:50%; margin-right:5px; }
.office-door-light.is-on { color:#9aebb1; }
.office-door-light.is-off { color:#ffabae; }
.office-door-light.is-unknown { color:#b0bfce; }
.office-actor { position:absolute; left:0; top:0; width:64px; height:111px; display:flex; flex-direction:column; align-items:center; will-change:transform; }
.office-actor-canvas { width:64px; height:96px; display:block; image-rendering:pixelated; filter:drop-shadow(0 2px 1px #14233d45); }
.office-actor-name { max-width:150px; width:max-content; background:#26374bda; color:#f3f6fa; border:1px solid #a9bbce; border-radius:12px; padding:1px 7px; white-space:nowrap; font-size:10px; line-height:15px; }
.office-bubble { position:absolute; z-index:3; bottom:108px; left:50%; transform:translateX(-50%); max-width:200px; min-width:50px; width:max-content; white-space:pre-wrap; overflow-wrap:anywhere; background:#fafbff; color:#243146; padding:7px 10px; border:1px solid #6d7b8e; border-radius:10px; font-size:12px; line-height:1.5; box-shadow:0 3px 12px #17233520; }
.office-interaction { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:10; width:max-content; max-width:calc(100% - 30px); }
.office-interaction button { border:1px solid #b6cbe2; border-radius:20px; background:#20364ce8; color:#f2f7ff; padding:9px 17px; font:inherit; font-size:12px; cursor:pointer; box-shadow:0 4px 15px #0003; }
.office-chat { background:#202b3b; border-top:1px solid #65778b; flex-shrink:0; }
.office-chat-log { height:70px; min-height:70px; max-height:70px; box-sizing:border-box; padding:8px 15px; overflow-y:auto; overflow-anchor:none; scrollbar-gutter:stable; color:#d1ddec; font-size:12px; line-height:1.7; scrollbar-width:thin; }
.office-chat-log p { margin:0; overflow-wrap:anywhere; }
.office-chat-log strong { color:#a9c9ef; font-weight:500; }
.office-chat form { display:flex; gap:7px; padding:0 12px 12px; }
.office-chat input { min-width:0; flex:1; border:1px solid #607184; border-radius:7px; background:#182436; color:#f2f6fc; padding:10px; font:inherit; font-size:12px; }
.office-chat button { background:#3b5370; color:#f4f7fd; border-color:#6987a9; }
.office-chat button:disabled { opacity:.5; cursor:wait; }
.office-error { position:absolute; bottom:126px; left:50%; transform:translateX(-50%); z-index:40; width:max-content; max-width:calc(100% - 36px); max-height:80px; overflow:auto; padding:8px 12px; border:1px solid #ad7283; border-radius:8px; background:#352b3bed; color:#ffced4; font-size:12px; }
.office-touch-stick { position:absolute; width:75px; height:75px; border:1px solid #ffffff88; background:#293d5644; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; }
.office-touch-stick i { position:absolute; width:26px; height:26px; border-radius:50%; background:#dde9f099; left:24px; top:24px; }
.office-loading,.office-load-error { padding:30px; color:var(--text-secondary); }
.office-load-error p { margin-bottom:15px; }
.office-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#view-office [hidden] { display:none !important; }
#view-office button:focus-visible,#view-office input:focus-visible { outline:2px solid #bad8ff; outline-offset:2px; }
/* Compact game chrome. Stage, camera and chat dimensions remain fixed above. */
.office-toolbar h1 { display:flex; align-items:center; gap:10px; font-weight:750; letter-spacing:-.045em; color:var(--text-primary); }
.office-toolbar h1::before { content:''; flex:0 0 27px; width:27px; height:27px; border:1px solid #9babbe80; border-radius:8px; background:linear-gradient(135deg,#bcd1e24d,#758da520),linear-gradient(90deg,transparent 45%,#8195aa 45% 55%,transparent 55%) center/12px 12px no-repeat,linear-gradient(transparent 45%,#8195aa 45% 55%,transparent 55%) center/12px 12px no-repeat; box-shadow:inset 0 1px #ffffff36; }
.office-toolbar-actions { gap:7px; }
.office-toolbar button,.office-load-error button { display:inline-flex; align-items:center; justify-content:center; gap:6px; border-color:#8597ad60; border-radius:9px; background:linear-gradient(180deg,#90a8c012,#5a708608),var(--card-bg); box-shadow:inset 0 1px #ffffff12,0 1px 2px #0c182512; font-weight:600; line-height:16px; transition:background-color .15s,border-color .15s,box-shadow .15s; }
.office-toolbar button:hover,.office-load-error button:hover { border-color:#9cb6d1bb; background-color:#8daacc26; box-shadow:inset 0 1px #ffffff25,0 2px 7px #12263812; }
.office-toolbar button:active { background-color:#7898ba33; box-shadow:inset 0 1px 3px #0b17282a; }
.office-toolbar [data-edit-avatar]::before,.office-toolbar [data-edit-room]::before,.office-toolbar [data-edit-lobby]::before { content:''; width:14px; height:14px; flex:0 0 14px; background:currentColor; opacity:.8; mask:var(--office-button-icon) center/contain no-repeat; }
.office-toolbar [data-edit-avatar] { --office-button-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M4 22v-3a8 8 0 0 1 16 0v3M8 15l4 4 4-4'/%3E%3C/svg%3E"); }
.office-toolbar [data-edit-room] { --office-button-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8M5 10v11h14V10M9 21v-8h6v8'/%3E%3C/svg%3E"); }
.office-toolbar [data-edit-lobby] { --office-button-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3 21V5h18v16H3zM8 5V2h8v3M8 9v2m8-2v2M8 14v2m8-2v2m-4 5v-5'/%3E%3C/svg%3E"); }
.office-toolbar [data-open-jukebox] { color:#b8d5ed; border-color:#799fc47d; background:linear-gradient(145deg,#263f56,#23344a); }
.office-toolbar [data-open-jukebox]:hover { background:linear-gradient(145deg,#304e69,#29405a); border-color:#add8edbd; }
.office-connection { padding:5px 8px; border-radius:20px; background:#7f91a80e; color:var(--text-secondary); font-variant-numeric:tabular-nums; font-weight:500; }
.office-connection::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:6px; background:#b7a178; box-shadow:0 0 0 3px #b7a17812; }
.office-connection[data-state="connected"] { color:#7dbb9c; background:#4c9a7010; }
.office-connection[data-state="connected"]::before { background:#73c99c; box-shadow:0 0 0 3px #66bd8e13,0 0 7px #66bd8e28; }
.office-connection[data-state="disconnected"] { color:#d3a1a9; background:#b4707c0e; }
.office-connection[data-state="disconnected"]::before { background:#cd8795; box-shadow:none; }
.office-game { border-color:#7c8ea064; border-radius:14px; box-shadow:0 8px 28px #0a152222,inset 0 1px #ffffff16; }
.office-stage { background:radial-gradient(ellipse at 50% 25%,#d1d7dd,#aeb9c4); }
.office-stage:focus-visible { outline-color:#b9d5e6a8; }
.office-door-plate { background:linear-gradient(160deg,#354757f0,#253648f2); border-color:#a7bfcd9c; box-shadow:inset 0 1px #ffffff20,0 3px 7px #152a3933; border-radius:7px; }
.office-door-plate strong { font-weight:600; letter-spacing:-.015em; }
.office-door-light { letter-spacing:.07em; }
.office-door-light.is-on::before { box-shadow:0 0 6px #9aebb16b; }
.office-actor-name { background:#213547e0; border-color:#e4f2ff75; box-shadow:0 1px 3px #192b3d29; font-weight:550; text-shadow:0 1px #13243350; }
.office-bubble { background:linear-gradient(150deg,#fff,#f2f7fb); border-color:#92a9bd; border-radius:11px 11px 11px 4px; box-shadow:0 4px 12px #1d304025,inset 0 1px #ffffff; }
.office-bubble::after { content:''; position:absolute; bottom:-5px; left:calc(50% - 4px); width:7px; height:7px; background:#f4f8fc; border-right:1px solid #92a9bd; border-bottom:1px solid #92a9bd; transform:rotate(45deg); }
.office-interaction button { border-color:#d2e5f0a1; background:linear-gradient(135deg,#263c50f5,#1b3046f5); box-shadow:0 4px 14px #1124353d,inset 0 1px #ffffff23; font-weight:600; letter-spacing:.015em; transition:border-color .15s,background-color .15s; }
.office-interaction button:hover { border-color:#f1fbff; background:#31506a; }
.office-chat { background:linear-gradient(110deg,#1d2b3b,#223244); border-top-color:#a4bbce5e; box-shadow:inset 0 1px #ffffff0b; }
.office-chat-log { color:#d7e1ec; scrollbar-color:#637e9680 #13213330; }
.office-chat-log strong { color:#aecde5; font-weight:650; }
.office-chat-log p { text-shadow:0 1px #0a17251f; }
.office-chat-log p.is-npc strong { color:#f3d68c; }
.office-chat input { border-color:#637e975f; border-radius:9px; background:#142335b3; box-shadow:inset 0 1px 3px #09172833; caret-color:#c0e4fc; transition:border-color .15s,box-shadow .15s; }
.office-chat input::placeholder { color:#9cafc2; opacity:1; }
.office-chat input:focus { border-color:#9cbdde; box-shadow:inset 0 1px 3px #09172833,0 0 0 2px #85add818; }
.office-chat button { border-radius:9px; background:linear-gradient(150deg,#3e5b77,#304a65); border-color:#7d9ebc75; box-shadow:inset 0 1px #d8ebff17; font-weight:600; transition:background-color .15s,border-color .15s; }
.office-chat button:hover:not(:disabled) { background:#466b8b; border-color:#a6c9e4b0; }
.office-chat button:active:not(:disabled) { background:#2d4b65; box-shadow:inset 0 1px 3px #11223350; }
.office-chat button[type="submit"] { min-width:56px; letter-spacing:.035em; }
.office-error { border-color:#d49ca88c; background:#3a2d3ff5; box-shadow:0 4px 14px #1421383b; }
.office-error-close { margin-left:12px; padding:0 4px; border:0; background:transparent; color:inherit; font-size:20px; cursor:pointer; vertical-align:middle; }
.office-touch-stick { border-color:#f3fbff9c; background:radial-gradient(circle,#37557024,#32475f5c); box-shadow:inset 0 1px 5px #ecf8ff1c,0 3px 12px #182b4426; }
.office-touch-stick i { background:linear-gradient(135deg,#f0f8ffe0,#bdcfdfbf); box-shadow:0 2px 5px #122d4250; }
@media(prefers-reduced-motion:reduce) { .office-toolbar button,.office-chat button,.office-chat input,.office-interaction button { transition:none; } }
@media(max-width:768px) { .content-area.office-content-active { padding:82px 12px 12px !important; } .content-area.office-content-active .notif-area { right:12px; } .office-toolbar { align-items:flex-start; gap:8px; margin-bottom:10px; } .office-toolbar h1 { font-size:20px; } .office-toolbar-actions { justify-content:flex-end; gap:5px; } .office-toolbar button { padding:7px 9px; font-size:11px; } .office-connection { width:100%; text-align:right; margin:0; } .office-chat input { font-size:16px; } }