/* Theme System v2 — mobile module */
/* AI Product Prompt Studio — Mobile First v35 */
html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

body,
.fi-body,
.fi-layout,
.fi-main-ctn,
.fi-main,
.fi-page,
.fi-page-content,
.fi-section,
.fi-section-content,
.fi-fo-component-ctn {
    min-width: 0;
    max-width: 100%;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

/* Prevent generated prompts and long URLs from forcing desktop width. */
pre,
code,
.prompt-code-content,
.reference-prompt-preview,
.ps-code-block {
    max-width: 100%;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 767px) {
    body {
        overflow-x: hidden;
    }

    .fi-main {
        width: 100% !important;
        padding-inline: .65rem !important;
    }

    .fi-page-header-main-ctn,
    .fi-page-header,
    .fi-page-header-main,
    .fi-header {
        min-width: 0;
        gap: .65rem !important;
    }

    .fi-header-heading,
    .fi-page-heading {
        font-size: 1.2rem !important;
        line-height: 1.55rem !important;
        overflow-wrap: anywhere;
    }

    .fi-header-subheading,
    .fi-page-subheading {
        font-size: .82rem !important;
        line-height: 1.35rem !important;
    }

    .fi-section-header {
        padding: .85rem !important;
    }

    .fi-section-content {
        padding: .8rem !important;
    }

    /* Every Filament form becomes one readable column on phones. */
    .fi-fo-grid,
    .fi-sc-grid,
    .fi-grid,
    .fi-fo-component-ctn > .grid,
    .studio-choice-block .grid,
    [data-prompt-studio-grid],
    .ps-card-grid,
    .ps-summary-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .fi-fo-field-wrp,
    .fi-input-wrp,
    .fi-select-input,
    .fi-fo-textarea,
    input,
    select,
    textarea {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    /* 16px prevents iOS from zooming when focusing a field. */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    textarea {
        min-height: 7rem;
    }

    .fi-btn,
    .fi-ac-btn-action,
    button,
    [role="button"] {
        min-height: 2.75rem;
        touch-action: manipulation;
    }

    .fi-btn {
        justify-content: center;
    }

    /* Primary page actions are full width and easy to tap. */
    .fi-page-header-actions,
    .fi-form-actions,
    .fi-ac-action-group,
    .reference-action-row {
        width: 100%;
        flex-direction: column;
        align-items: stretch !important;
    }

    .fi-page-header-actions > *,
    .fi-form-actions > *,
    .reference-action-row > * {
        width: 100%;
    }

    /* Main 3-step wizard: horizontal swipe instead of seven tiny cards. */
    .studio-workflow {
        display: flex !important;
        gap: .65rem !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        padding-bottom: .45rem;
        -webkit-overflow-scrolling: touch;
    }

    .studio-workflow > .studio-step {
        flex: 0 0 82%;
        scroll-snap-align: start;
        padding: .75rem !important;
    }

    .creative-panel-nav {
        display: flex !important;
        gap: .55rem !important;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        padding-bottom: .45rem;
        -webkit-overflow-scrolling: touch;
    }

    .creative-panel-button {
        flex: 0 0 10rem;
        min-height: 4rem !important;
        scroll-snap-align: start;
    }

    .studio-beta-bar,
    .preset-launcher,
    .prompt-code-header,
    .preset-modal-header {
        align-items: stretch !important;
        flex-direction: column;
    }

    .preset-launch-button,
    .prompt-copy-button,
    .preset-modal-close {
        width: 100%;
        text-align: center;
    }

    .preset-modal-backdrop {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .preset-modal {
        width: 100% !important;
        max-height: 92dvh !important;
        border-radius: 1rem 1rem 0 0 !important;
        padding: .85rem !important;
    }

    .preset-grid,
    .clip-plan-grid,
    .reference-choice-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .preset-card,
    .reference-choice-card {
        min-height: auto !important;
        padding: .8rem !important;
    }

    .studio-choice-block {
        padding: .7rem !important;
        border-left-width: 4px !important;
    }

    .studio-choice-block label:has(input[type="radio"]) {
        min-height: 3.5rem;
        padding: .7rem !important;
    }

    .prompt-code-list {
        gap: .85rem !important;
    }

    .prompt-code-card {
        border-radius: .65rem !important;
    }

    .prompt-code-content,
    .reference-prompt-preview {
        padding: .75rem !important;
        font-size: .78rem !important;
        line-height: 1.55 !important;
        overflow-x: hidden !important;
    }

    /* FilePond upload preview: one clean card per row. */
    .filepond--root,
    .filepond--list-scroller,
    .filepond--item,
    .filepond--panel-root {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .filepond--item {
        width: 100% !important;
        margin-inline: 0 !important;
    }

    .filepond--drop-label {
        min-height: 4.5rem !important;
    }

    /* Tables remain usable without breaking the entire page width. */
    .fi-ta-ctn {
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .fi-ta-table {
        width: max-content;
        min-width: 44rem;
    }

    .fi-pagination {
        min-width: 0;
        overflow-x: auto;
    }

    /* Login pages fit small phones and respect the keyboard viewport. */
    .fi-simple-main {
        width: calc(100% - 1.25rem) !important;
        max-width: 28rem !important;
        margin-inline: auto;
        padding: 1rem !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .studio-workflow,
    .preset-grid,
    .reference-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .creative-panel-nav {
        grid-template-columns: repeat(4, minmax(9rem, 1fr)) !important;
    }
}