/**
 * Canonical app-v8 phone preview frame — 430×932 + viewport scale.
 * Shared: client_app_shell_v1, partner staff shell, checkout hall, etc.
 * Pair with static/js/shared/app_shell_viewport_fit.js
 */

html.shell-content body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    min-height: 100%;
    height: 100%;
}

html.shell-content .app-shell-viewport {
    position: fixed;
    inset: 0;
    padding: 0;
}

html.shell-content .app-shell-scale-wrapper {
    width: 100%;
    height: 100%;
    transform: none !important;
}

html.shell-content .app-shell-phone-frame,
html.shell-content .mobile-frame.app-shell-phone-frame {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}

html.shell-content .status-bar {
    display: none;
}

html.shell-content .scroll-zone {
    top: 0;
}

body.app-shell-phone-preview {
    margin: 0;
    min-height: 100vh;
    overflow: hidden;
}

.app-shell-scale-slot,
.shell-scale-slot,
.staff-scale-slot {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-shell-viewport {
    position: fixed;
    inset: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    box-sizing: border-box;
}

.app-shell-scale-wrapper {
    width: 430px;
    height: 932px;
    transform-origin: center center;
    transition: transform 0.2s ease;
}

.checkout-success-overlay {
    box-sizing: border-box;
}

.app-shell-phone-frame,
.mobile-frame.app-shell-phone-frame {
    width: 430px;
    height: 932px;
    max-width: none;
    max-height: none;
    border-radius: 55px;
    border: 8px solid #000;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}