/* Bridges devices.css into Striqr mobile preview with exact CSS viewports. */

.preview-frame-wrap--mobile .preview-phone-stage {
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-frame-wrap--mobile .preview-device-shell {
    position: relative;
    flex: none;
    transform: scale(var(--preview-phone-scale, 1));
    transform-origin: center center;
    transition: transform 0.22s var(--ease-out);
}

.preview-frame-wrap--mobile .preview-device-shell[class*="device-"] {
    height: auto !important;
    width: auto !important;
}

.preview-frame-wrap--mobile .preview-device-shell .device-frame {
    height: auto !important;
    width: auto !important;
    position: relative;
}

.preview-frame-wrap--mobile .preview-device-shell .device-screen {
    width: calc(var(--preview-phone-w, 375) * 1px) !important;
    height: calc(var(--preview-phone-h, 667) * 1px) !important;
    border: none;
    display: block;
    object-fit: unset;
}

/* Fluid bezels — frame grows with the viewport slot */
.preview-frame-wrap--mobile .preview-device-shell.device-iphone-8 .device-frame {
    padding: calc(var(--preview-phone-h, 667) * 0.13 * 1px) calc(var(--preview-phone-w, 375) * 0.055 * 1px) !important;
}

.preview-frame-wrap--mobile .preview-device-shell.device-iphone-x .device-frame,
.preview-frame-wrap--mobile .preview-device-shell.device-iphone-14 .device-frame,
.preview-frame-wrap--mobile .preview-device-shell.device-iphone-14-pro .device-frame {
    padding: calc(var(--preview-phone-h, 844) * 0.028 * 1px) calc(var(--preview-phone-w, 390) * 0.045 * 1px) !important;
}

.preview-frame-wrap--mobile .preview-device-shell.device-google-pixel-6-pro .device-frame {
    padding: calc(var(--preview-phone-h, 915) * 0.028 * 1px) calc(var(--preview-phone-w, 412) * 0.032 * 1px) calc(var(--preview-phone-h, 915) * 0.034 * 1px) !important;
}

.preview-frame-wrap--mobile .preview-device-shell.device-google-pixel-2-xl .device-frame {
    padding: calc(var(--preview-phone-h, 915) * 0.058 * 1px) calc(var(--preview-phone-w, 412) * 0.048 * 1px) !important;
}

.preview-frame-wrap--mobile .preview-device-shell.device-google-pixel .device-frame {
    padding: calc(var(--preview-phone-h, 915) * 0.095 * 1px) calc(var(--preview-phone-w, 412) * 0.048 * 1px) !important;
}

/* Reposition hardware chrome relative to the live frame */
.preview-frame-wrap--mobile .preview-device-shell.device-iphone-8 .device-home {
    bottom: calc(var(--preview-phone-h, 667) * 0.028 * 1px) !important;
    width: calc(var(--preview-phone-w, 375) * 0.145 * 1px) !important;
    height: calc(var(--preview-phone-w, 375) * 0.145 * 1px) !important;
    margin-left: calc(var(--preview-phone-w, 375) * -0.0725 * 1px) !important;
}

.preview-frame-wrap--mobile .preview-device-shell.device-iphone-8 .device-sensors {
    top: calc(var(--preview-phone-h, 667) * 0.06 * 1px) !important;
    width: calc(var(--preview-phone-w, 375) * 0.19 * 1px) !important;
    margin-left: calc(var(--preview-phone-w, 375) * -0.095 * 1px) !important;
}

.preview-frame-wrap--mobile .preview-device-shell.device-iphone-14-pro .device-header,
.preview-frame-wrap--mobile .preview-device-shell.device-iphone-14 .device-header {
    top: calc(var(--preview-phone-h, 844) * 0.028 * 1px + 8px) !important;
    width: calc(var(--preview-phone-w, 390) * 0.28 * 1px) !important;
    margin-left: calc(var(--preview-phone-w, 390) * -0.14 * 1px) !important;
}

.preview-frame-wrap--mobile .preview-device-shell.device-iphone-14-pro .device-sensors::after,
.preview-frame-wrap--mobile .preview-device-shell.device-iphone-14 .device-sensors::after {
    top: calc(var(--preview-phone-h, 844) * 0.028 * 1px + 9px) !important;
    width: calc(var(--preview-phone-w, 390) * 0.17 * 1px) !important;
    margin-left: calc(var(--preview-phone-w, 390) * -0.085 * 1px) !important;
}

.preview-frame-wrap--mobile .preview-device-shell.device-iphone-x .device-header {
    top: calc(var(--preview-phone-h, 844) * 0.028 * 1px + 6px) !important;
    width: calc(var(--preview-phone-w, 390) * 0.42 * 1px) !important;
    margin-left: calc(var(--preview-phone-w, 390) * -0.21 * 1px) !important;
}

.preview-frame-wrap--mobile .preview-device-shell.device-google-pixel-6-pro .device-sensors {
    top: calc(var(--preview-phone-h, 915) * 0.028 * 1px + 14px) !important;
    width: calc(var(--preview-phone-w, 412) * 0.22 * 1px) !important;
    margin-left: calc(var(--preview-phone-w, 412) * -0.11 * 1px) !important;
}

.preview-frame-wrap--mobile .preview-device-shell.device-google-pixel-2-xl .device-sensors {
    top: calc(var(--preview-phone-h, 915) * 0.058px + 8px) !important;
}

.preview-frame-wrap--mobile .preview-device-shell.device-google-pixel .device-sensors {
    top: calc(var(--preview-phone-h, 915) * 0.095px + 6px) !important;
}

/* Hide chrome that belongs to other skins */
.preview-device-shell:not(.device-iphone-8) .device-home {
    display: none !important;
}

.preview-device-shell:not(.device-iphone-x):not(.device-iphone-14):not(.device-iphone-14-pro) .device-header {
    display: none !important;
}

.preview-device-shell.device-iphone-8 .device-header {
    display: none !important;
}

/* Side keys scale with device height */
.preview-frame-wrap--mobile .preview-device-shell .device-btns {
    top: 18% !important;
}

.preview-frame-wrap--mobile .preview-device-shell .device-btns::after {
    top: 110% !important;
}

.preview-frame-wrap--mobile .preview-device-shell .device-btns::before {
    top: 220% !important;
}

.preview-frame-wrap--mobile .preview-device-shell .device-power {
    top: 22% !important;
    height: 9% !important;
    min-height: 52px;
}

/* Desktop — plain iframe, no device chrome */
.preview-frame-wrap--desktop .preview-device-shell {
    position: relative !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    transform: none !important;
    z-index: auto !important;
}

.preview-frame-wrap--desktop .preview-device-shell .device-frame {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.preview-frame-wrap--desktop .preview-device-shell .device-screen,
.preview-frame-wrap--desktop #previewFramer {
    flex: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    background: #fff !important;
    object-fit: unset !important;
}

.preview-frame-wrap--desktop .preview-device-shell .device-stripe,
.preview-frame-wrap--desktop .preview-device-shell .device-header,
.preview-frame-wrap--desktop .preview-device-shell .device-sensors,
.preview-frame-wrap--desktop .preview-device-shell .device-btns,
.preview-frame-wrap--desktop .preview-device-shell .device-power,
.preview-frame-wrap--desktop .preview-device-shell .device-home {
    display: none !important;
}