/* Shared window chrome, based on the ASFC Home window. */
:root {
    --desktop-window-frame: #c0c0c0;
    --desktop-window-titlebar: #0049d1;
    --desktop-window-shadow: 7px 9px 0 #12364135;
    --desktop-titlebar-height: 30px;
}
#ModalWelcome {
    left: 160px;
    top: 38px;
    width: calc(100vw - 192px);
    height: calc(100dvh - 126px);
    max-width: none;
    max-height: none;
    transform: none;
}
#modalContainer .desktop-window {
    box-sizing: border-box;
    padding: 4px;
    border: 2px outset #e5e5e5;
    border-radius: 0;
    background: var(--desktop-window-frame);
    box-shadow: var(--desktop-window-shadow);
    overflow: hidden;
}
#modalContainer .managed-window { position: fixed !important; }
#modalContainer .desktop-window > .window-controls {
    box-sizing: border-box;
    position: relative;
    height: var(--desktop-titlebar-height);
    min-height: var(--desktop-titlebar-height);
    margin: 0;
    padding: 3px 5px 3px 9px;
    border: 0;
    border-radius: 0;
    background: var(--desktop-window-titlebar);
    color: white;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font: bold 12px/1.2 Tahoma, Arial, sans-serif;
    text-shadow: none;
    touch-action: none;
    cursor: grab;
}
#modalContainer .desktop-window > .window-controls .desktop-window-title {
    flex: 1;
    min-width: 0;
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font: inherit;
    color: inherit;
}
#modalContainer .desktop-window .desktop-window-title > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font: inherit;
    color: inherit;
}
#modalContainer .desktop-window .desktop-window-title img {
    width: 16px;
    height: 16px;
    margin: 0;
    border-radius: 0;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 7px;
    flex-shrink: 0;
}
#modalContainer .desktop-window > .window-controls .window-btn-container {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 5px;
    margin: 0;
    padding: 0;
}
#modalContainer .desktop-window > .window-controls button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 23px;
    min-width: 24px;
    min-height: 23px;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    border: 2px outset #eee;
    border-radius: 0;
    background: var(--desktop-window-frame);
    color: #111;
    box-shadow: none;
    font: bold 14px/17px monospace;
    text-shadow: none;
    cursor: pointer;
    transition: none;
}
#modalContainer .desktop-window > .window-controls button:hover { background: #e2e2e2; color: #111; }
#modalContainer .desktop-window > .window-controls button:active { border-style: inset; background: #b4b4b4; }
#modalContainer .desktop-window > .window-controls button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
#modalContainer .desktop-window > .modal-iframe {
    display: block;
    width: 100%;
    height: calc(100% - 34px) !important;
    margin: 4px 0 0;
    padding: 0;
    border: 0;
}
#modalContainer .desktop-window > .channeltrack-content {
    height: calc(100% - 34px);
    margin-top: 4px;
}
#modalContainer .desktop-window.is-maximized {
    position: fixed !important;
    max-width: none;
    max-height: none;
}
#modalContainer .managed-window > .modal-iframe,
#modalContainer .managed-window > .modal-content {
    display: block;
    width: 100%;
    height: calc(100% - 34px);
    min-height: 0;
    margin: 4px 0 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}
#modalContainer .managed-window .modal-content > .modal-iframe {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}
#agency-desktop-slot { height: calc(100% - 33px); margin-top: 3px; }
#agency-home-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    background: #f8f7ef;
}
.desktop-window.is-maximized > .window-controls { cursor: default !important; }
#taskbar-windows { min-width: 0; overflow-x: auto; }
.taskbar-window-button { flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#phone-homepage-host { display: none; }
#phone-launcher { display: none; }
.phone-channel-tabs { display: flex; gap: 8px; padding: 12px 16px; background: #e8e8df; }
.phone-channel-tabs button { flex: 1; padding: 11px; border: 1px solid #9da696; background: #f8f7ef; font: bold 13px Arial, sans-serif; color: #142520; }
.phone-channel-tabs button[aria-selected="true"] { background: #0049d1; color: white; }
.phone-channel-frame { display: block; width: 100%; height: calc(100dvh - 130px); border: 0; background: white; }
.phone-channel-full { display: block; padding: 9px 16px; font: 12px Arial, sans-serif; color: #0049d1; }
.phone-channel-links { display: flex; justify-content: space-between; gap: 16px; padding: 9px 16px; font: 12px Arial, sans-serif; color: #0049d1; }
#phone-app-body [hidden] { display: none !important; }
@media (max-width: 1050px) and (min-width: 769px) {
    #ModalWelcome { left: 118px; top: 24px; width: calc(100vw - 140px); height: calc(100dvh - 112px); }
}
@media (min-width: 1600px) {
    #ModalWelcome { left: max(160px, calc((100vw - 1270px) / 2)); width: min(1270px, calc(100vw - 192px)); }
}
@media (max-width: 768px) {
    #phone-homepage-host { display: block; }
    #phone-home #agency-home-frame { height: calc(100dvh - 30px); margin: 0; }
    #phone-home > .phone-statusbar { height: 30px; box-sizing: border-box; }
    #phone-app .phone-appgrid { padding: 24px 18px; }
    .phone-channel-tabs { position: sticky; top: 0; z-index: 1; }
}
@media (prefers-reduced-motion: reduce) {
    #boot-screen, #phone-boot { transition: none; }
}

/* Preserve the compose form’s white surface inside the shared gray frame. */
#ModalContact.desktop-window > form { background: #fff; }

/* Keep each app's scrolling surface inside its fitted frame. */
#modalContainer .desktop-window > :is(.login-layout, .error-layout, .aim-layout, .channeltrack-content, .stats-body) {
    box-sizing: border-box;
    height: calc(100% - 34px);
    min-height: 0;
    margin-top: 4px;
    overflow: auto;
}
#modalContainer .desktop-window.explorer-modal { flex-direction: column; }
#modalContainer .desktop-window.explorer-modal > :not(.explorer-body) { flex-shrink: 0; }
#modalContainer .desktop-window.explorer-modal > .explorer-body {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

/* Equal 60px artwork height, compensating for each asset's transparent padding. */
#welcomeBtn > img { transform: scale(1.090116) translateX(-4.9%); }
#aboutBtn > img { transform: scale(.968492); }
#contactBtn > img { transform: scale(.999467) translate(-2.5%, -.3%); }

/* Trash's photo uses the same desktop frame and a fitted, uncropped viewer. */
#ModalTrash .top-left-folder { display:flex; flex-wrap:wrap; gap:24px; }
#blissPhotoBtn img { object-fit:contain; }
#ModalBliss > .modal-iframe { display:block; height:calc(100% - var(--desktop-titlebar-height)); }
.phone-bliss-frame { display:block; width:100%; height:100%; min-height:calc(100dvh - 110px); border:0; }