.desktop-stage{height:calc(100dvh - 44px);padding:24px;overflow:auto;display:flex;align-items:flex-start;background:#e9edf5;overscroll-behavior:contain}.desktop-preview-surface{flex:none;margin:auto}.desktop-window-slot{position:relative;flex:none}.desktop-window{position:absolute;left:0;top:0;width:1280px;height:800px;transform-origin:top left;background:#f6f7fb;border:1px solid #d7deea;border-radius:12px;box-shadow:0 22px 70px #26385425,0 3px 10px #26385413;overflow:hidden;display:flex;flex-direction:column}.desktop-titlebar{height:40px;min-height:40px;display:flex;align-items:center;background:#f9faff;border-bottom:1px solid #e8edf5;user-select:none;padding-left:14px;color:#7f8ca3}.desktop-titlebar-brand{display:flex;align-items:center;gap:8px;color:#596784}.desktop-titlebar-brand .brand-mark{width:20px;height:20px;border-radius:5px}.desktop-titlebar-brand .brand-mark svg{width:19px;height:19px}.desktop-titlebar-brand b{font-size:12px;font-weight:600;letter-spacing:.1px}.desktop-titlebar-caption{font-size:10px;margin-left:12px;padding-left:12px;border-left:1px solid #e0e6ef;color:#9aa5b7}.desktop-window-controls{display:flex;height:100%;margin-left:auto;flex-shrink:0}.desktop-window-controls button{display:flex;align-items:center;justify-content:center;width:46px;height:39px;border-radius:0;color:#8390a5}.desktop-window-controls button:hover{background:#e8edf5}.desktop-window-controls button:disabled{opacity:.35;cursor:default;background:none}.desktop-window-controls .desktop-window-close:hover{background:#e75b6c;color:white}.desktop-preview-note{display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#8f9bb0;padding:12px 3px 0}.desktop-window-placeholder{width:340px;padding:34px;display:flex;align-items:center;flex-direction:column;text-align:center;gap:15px;background:#fff;border:1px solid #dee5ef;border-radius:16px;box-shadow:0 18px 55px #26385412;margin:auto}.desktop-window-placeholder p{font-size:12px;color:#97a2b7}.desktop-window-placeholder h2{font-size:17px;color:#65728d}.desktop-window-placeholder>.brand-mark{width:46px;height:46px;border-radius:13px}.desktop-window-placeholder .button{margin-top:7px}
/* These rules use the fixed client canvas, not viewport breakpoints. */
.desktop-window .desktop-shell{height:calc(100% - 40px);min-height:0;width:100%;grid-template-columns:208px minmax(0,1fr);flex:1}.desktop-window .desktop-main{min-height:0;min-width:0}.desktop-window .sidebar{padding:20px 12px 14px;min-height:0;overflow:auto}.desktop-window .sidebar .brand{padding:0 10px;margin-bottom:22px;justify-content:flex-start}.desktop-window .sidebar .brand-name{display:inline;font-size:23px}.desktop-window .sidebar .workspace-picker{display:flex}.desktop-window .sidebar .nav-label{display:block}.desktop-window .sidebar .nav-item{display:flex;justify-content:flex-start;padding:0 12px;min-height:38px;height:38px;font-size:12px}.desktop-window .sidebar .nav-item>span{display:inline}.desktop-window .sidebar .nav-item>.nav-dot{display:block}.desktop-window .sidebar .sidebar-tip{display:none}.desktop-window .sidebar .sidebar-footer{display:flex;font-size:9px}.desktop-window .sidebar-bottom{padding-top:14px}.desktop-window .sidebar .nav-separator{margin:15px 9px}.desktop-window .topbar{height:60px;min-height:60px;padding:0 22px;gap:18px}.desktop-window .breadcrumb{font-size:14px;color:#465572}.desktop-window .breadcrumb strong{font-weight:600}.desktop-window .global-search{width:255px;font-size:11px}.desktop-window .topbar-user b,.desktop-window .topbar-user small,.desktop-window .topbar-user .icon{display:block}.desktop-window .topbar-user small{font-size:10px}.desktop-window .topbar-user b{font-size:11px}.desktop-window .topbar-user{gap:10px}.desktop-window .page-content{max-width:none;padding:24px;margin:0}.desktop-window .dashboard-layout{grid-template-columns:minmax(0,1fr) 280px;gap:18px}.desktop-window .dashboard-primary,.desktop-window .dashboard-secondary{gap:18px}.desktop-window .greeting h1{font-size:25px}.desktop-window .hero-card{height:144px;min-height:144px;padding:25px}.desktop-window .hero-card h2{font-size:21px}.desktop-window .hero-card .hero-art{right:0;opacity:.9;width:265px;height:150px}.desktop-window .metric-grid{gap:12px}.desktop-window .metric-card{padding:16px 14px;min-height:90px}.desktop-window .metric-card .app-icon{display:flex}.desktop-window .quick-grid{grid-template-columns:repeat(8,minmax(0,1fr));padding:0 12px 18px;gap:3px}.desktop-window .quick-app{padding:9px 0;font-size:11px}.desktop-window .panel-heading{padding:20px 20px 16px}.desktop-window .panel-body{padding:0 20px 18px}.desktop-window .task-list{padding:0 20px}.desktop-window .task-tabs{padding:0 20px;gap:22px}.desktop-window .task-row{padding:15px 0}.desktop-window .task-time{display:block}.desktop-window .content-scroll:has(.collab-chat-layout){overflow:hidden;display:flex;flex-direction:column}.desktop-window .page-content:has(.collab-chat-layout){display:flex;flex-direction:column;flex:1;min-height:0;height:100%}.desktop-window .page-content:has(.collab-chat-layout)>.page-heading{flex-shrink:0}.desktop-window .collab-chat-layout{flex:1;height:auto;min-height:0;grid-template-columns:260px minmax(0,1fr)}.desktop-window .collab-chat-list,.desktop-window .collab-chat-main{min-height:0}.desktop-window .collab-message-stream{min-height:0}.desktop-window .collab-composer{flex-shrink:0}.desktop-window .login-shell{height:calc(100% - 40px);min-height:0;flex:1;background:#f5f7fc}.desktop-window .collab-contacts-layout{grid-template-columns:210px minmax(0,1fr);gap:18px}.desktop-window .collab-people-heading{align-items:center;flex-direction:row}.desktop-window .collab-people-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Dialogs are positioned and scaled inside the same fixed client canvas. */
.has-desktop-preview #modal-root .modal-overlay:not(.is-mobile){inset:auto;left:var(--desktop-overlay-x);top:var(--desktop-overlay-y);width:1280px;height:var(--desktop-client-height,760px);transform:scale(var(--desktop-preview-scale,1));transform-origin:top left;padding:25px;border-radius:0 0 12px 12px;overflow:hidden}.has-desktop-preview #modal-root .modal-overlay:not(.is-mobile) .modal{max-height:calc(var(--desktop-client-height,760px) - 50px)}.has-desktop-preview #modal-root .modal-overlay.drawer:not(.is-mobile){padding:0}.has-desktop-preview #modal-root .modal-overlay.drawer:not(.is-mobile) .modal.drawer{height:100%;max-height:100%;width:420px;border-radius:0}
.has-desktop-preview #modal-root .modal-overlay:not(.is-mobile){width:var(--desktop-client-width,1278px)}