/*
 * Mobile editing frame. JS enables this only for the current design with a
 * readable preview and enough visual-viewport height. No body scroll lock.
 * --dtf-mobile-workspace-height is supplied from the visual viewport by JS.
 */
#dtf-form-wrapper .step2-settings-frame {
    display: contents;
}
#dtf-form-wrapper .step2-settings-frame-hint {
    display: none !important;
}
#dtf-form-wrapper .step2-mobile-tools,
#dtf-form-wrapper .step2-mobile-panel-header,
#dtf-form-wrapper .step2-mobile-tool-empty {
    display: none !important;
}
/* The additional DOM wrapper must preserve the existing desktop card spacing. */
#dtf-form-wrapper .step2-side-panel > .step2-settings-frame > .qui-card {
    margin: 0 !important;
}

@media (max-width: 640px) {
    #dtf-form-wrapper.has-mobile-workspace .wizard-body {
        padding: 0.6rem !important;
    }
    #dtf-form-wrapper .design-item.is-mobile-workspace .step2-card-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: clamp(160px, min(52%, calc(var(--dtf-mobile-workspace-height) - 264px)), 440px) minmax(0, 1fr) auto auto !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
        width: 100% !important;
        height: var(--dtf-mobile-workspace-height, calc(100dvh - 24px)) !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }
    /* Keep a smaller image visible while the on-screen keyboard uses space. */
    #dtf-form-wrapper .design-item.is-mobile-workspace-short .step2-card-grid {
        grid-template-rows: clamp(160px, calc(var(--dtf-mobile-workspace-height) - 191px), 220px) minmax(0, 1fr) auto !important;
        gap: 0.375rem !important;
    }
    #dtf-form-wrapper .design-item.is-mobile-workspace .step2-upload-pane {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: 100% !important;
        padding: 0.4rem !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    #dtf-form-wrapper .design-item.is-mobile-workspace .use-original-status {
        flex: 0 0 auto !important;
        margin: 0 0 0.25rem !important;
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
    }
    #dtf-form-wrapper .design-item.is-mobile-workspace .preview-area {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: 100% !important;
        margin: 0 !important;
    }
    #dtf-form-wrapper .design-item.is-mobile-workspace .preview-toolbar.qui-toolbar {
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 0.15rem 0.2rem !important;
        margin: 0 0 0.3rem !important;
        overflow-x: auto !important;
        overscroll-behavior-x: contain !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
    }
    #dtf-form-wrapper .design-item.is-mobile-workspace .preview-toolbar .qui-tool {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        flex: 0 0 auto !important;
    }
    #dtf-form-wrapper .design-item.is-mobile-workspace .preview-toolbar .qui-tool.dtf-ai-tool {
        width: auto !important;
    }
    #dtf-form-wrapper .design-item.is-mobile-workspace .preview-image-container {
        flex: 1 1 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    #dtf-form-wrapper .design-item.is-mobile-workspace .preview-image-container .preview-img {
        flex: 0 1 auto !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }
    #dtf-form-wrapper .design-item.is-mobile-workspace .step2-side-panel {
        display: contents !important;
        position: static !important;
    }
    #dtf-form-wrapper .design-item.is-mobile-workspace .step2-settings-frame {
        grid-column: 1 !important;
        grid-row: 2 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-rows: max-content !important;
        align-content: start !important;
        gap: 0.625rem !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: 100% !important;
        padding: 0.55rem !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 10px !important;
        background: #f8fafc !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: auto !important;
        scroll-padding-block: 0.55rem !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }
    #dtf-form-wrapper .design-item.is-mobile-workspace .step2-settings-frame:focus-visible {
        outline: 3px solid #a5b4fc;
        outline-offset: 2px;
    }
    #dtf-form-wrapper .design-item.is-mobile-workspace:not(.is-mobile-workspace-short) .step2-settings-frame > [data-mobile-tool]:not(.is-mobile-tool-active) {
        display: none !important;
    }
    #dtf-form-wrapper .design-item.is-mobile-workspace:not(.is-mobile-workspace-short) .step2-mobile-panel-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        min-height: 44px !important;
        position: sticky !important;
        top: -0.55rem !important;
        z-index: 2 !important;
        margin: -0.55rem -0.55rem 0 !important;
        padding: 0 0.55rem !important;
        border-bottom: 1px solid #e2e8f0 !important;
        background: #f8fafc !important;
        font-size: 0.9rem !important;
        box-sizing: border-box !important;
    }
    #dtf-form-wrapper .step2-mobile-panel-close {
        min-height: 44px;
        padding: 0 0.4rem;
        border: 0;
        background: transparent;
        color: #4338ca;
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
    }
    #dtf-form-wrapper .design-item.is-mobile-workspace:not(.is-mobile-workspace-short) .step2-mobile-tool-empty:not([hidden]) {
        display: block !important;
        margin: 0 !important;
        font-size: 0.85rem !important;
        color: #475569 !important;
    }
    #dtf-form-wrapper .design-item.is-mobile-workspace:not(.is-mobile-workspace-short) .step2-mobile-tools {
        grid-column: 1 !important;
        grid-row: 3 !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0.2rem !important;
        padding: 0.3rem !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 10px !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }
    #dtf-form-wrapper .step2-mobile-tools button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        min-width: 0;
        min-height: 50px;
        padding: 0.25rem 0.1rem;
        border: 1px solid transparent;
        border-radius: 7px;
        background: transparent;
        color: #475569;
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1.3;
        white-space: nowrap;
        cursor: pointer;
        box-sizing: border-box;
    }
    #dtf-form-wrapper .step2-mobile-tools button[aria-pressed="true"] {
        border-color: #a5b4fc;
        background: #eef2ff;
        color: #4338ca;
    }
    #dtf-form-wrapper .step2-mobile-tools svg {
        width: 23px;
        height: 23px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    #dtf-form-wrapper .step2-mobile-tools button:focus-visible,
    #dtf-form-wrapper .step2-mobile-panel-close:focus-visible {
        outline: 3px solid #818cf8;
        outline-offset: 1px;
    }
    #dtf-form-wrapper .design-item.is-mobile-tool-panel-closed .step2-card-grid {
        grid-template-rows: minmax(0, 1fr) auto auto !important;
    }
    #dtf-form-wrapper .design-item.is-mobile-tool-panel-closed .step2-settings-frame {
        display: none !important;
    }
    #dtf-form-wrapper .design-item.is-mobile-workspace.is-mobile-tool-panel-closed:not(.is-mobile-workspace-short) .step2-mobile-tools {
        grid-row: 2 !important;
    }
    #dtf-form-wrapper .design-item.is-mobile-workspace .step2-settings-frame-hint {
        display: block !important;
        margin: 0 !important;
        padding: 0.05rem 0 !important;
        font-size: 0.75rem !important;
        line-height: 1.5 !important;
        font-weight: 600 !important;
        color: #334155 !important;
    }
    #dtf-form-wrapper .design-item.is-mobile-workspace .step2-actions,
    #dtf-form-wrapper .design-item.is-mobile-compact .step2-actions {
        position: static !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0.5rem !important;
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
        z-index: auto !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-sizing: border-box !important;
    }
    #dtf-form-wrapper .design-item.is-mobile-workspace .step2-actions {
        grid-column: 1 !important;
        grid-row: 4 !important;
    }
    #dtf-form-wrapper .design-item:is(.is-mobile-workspace-short, .is-mobile-tool-panel-closed) .step2-actions {
        grid-row: 3 !important;
    }
    /* Number entry must not trigger automatic phone-browser magnification. */
    #dtf-form-wrapper .design-item:is(.is-mobile-workspace, .is-mobile-compact) input[type="text"],
    #dtf-form-wrapper .design-item:is(.is-mobile-workspace, .is-mobile-compact) input[type="number"],
    #dtf-form-wrapper .design-item:is(.is-mobile-workspace, .is-mobile-compact) select {
        font-size: 16px !important;
    }
}