/* ============================================================
   AP SYNAPSE — MOBILE IMAGE CREATION SHEET
   ============================================================ */

@media (max-width:760px) {

    #apMobileImageSheet {

        position:fixed !important;

        left:10px !important;
        right:10px !important;

        bottom:
            calc(
                96px +
                env(safe-area-inset-bottom)
            ) !important;

        width:auto !important;
        max-width:420px !important;

        margin:0 auto !important;

        padding:14px !important;

        display:none;

        box-sizing:border-box !important;

        color:#f3f1eb !important;

        background:
            linear-gradient(
                155deg,
                rgba(23,24,27,.985),
                rgba(10,11,13,.99)
            ) !important;

        border:
            1px solid
            rgba(211,170,82,.24) !important;

        border-radius:18px !important;

        box-shadow:
            0 18px 55px rgba(0,0,0,.55),
            inset 0 1px 0 rgba(255,255,255,.045) !important;

        backdrop-filter:
            blur(22px) !important;

        -webkit-backdrop-filter:
            blur(22px) !important;

        z-index:10050 !important;
    }


    #apMobileImageSheet.ap-open {

        display:block !important;

        animation:
            apImageSheetIn
            .18s
            ease-out
            both;
    }


    @keyframes apImageSheetIn {

        from {
            opacity:0;
            transform:translateY(10px) scale(.985);
        }

        to {
            opacity:1;
            transform:none;
        }
    }


    .ap-image-sheet-head {

        display:flex !important;

        align-items:flex-start !important;

        justify-content:space-between !important;

        gap:14px !important;

        margin-bottom:12px !important;
    }


    .ap-image-sheet-kicker {

        display:block !important;

        margin-bottom:4px !important;

        color:
            rgba(217,177,94,.82) !important;

        font-size:8px !important;

        font-weight:700 !important;

        letter-spacing:.16em !important;

        text-transform:uppercase !important;
    }


    .ap-image-sheet-title {

        margin:0 !important;

        color:#f6f4ef !important;

        font-size:16px !important;

        line-height:1.15 !important;

        font-weight:680 !important;

        letter-spacing:-.02em !important;
    }


    .ap-image-sheet-copy {

        margin:
            4px 0 0 !important;

        color:
            rgba(235,233,227,.53) !important;

        font-size:10px !important;

        line-height:1.4 !important;
    }


    .ap-image-sheet-close {

        width:31px !important;
        height:31px !important;

        min-width:31px !important;

        display:grid !important;
        place-items:center !important;

        padding:0 !important;

        color:
            rgba(245,243,238,.72) !important;

        background:
            rgba(255,255,255,.035) !important;

        border:
            1px solid
            rgba(255,255,255,.075) !important;

        border-radius:9px !important;

        cursor:pointer !important;
    }


    .ap-image-sheet-close svg {

        width:14px !important;
        height:14px !important;

        stroke:currentColor !important;
        fill:none !important;

        stroke-width:1.8 !important;

        stroke-linecap:round !important;
    }


    .ap-image-sheet-options {

        display:grid !important;

        grid-template-columns:
            1fr !important;

        gap:7px !important;
    }


    .ap-image-prompt-option {

        width:100% !important;

        min-height:42px !important;

        padding:
            9px 11px !important;

        display:flex !important;

        align-items:center !important;

        gap:10px !important;

        text-align:left !important;

        color:
            rgba(245,243,237,.89) !important;

        background:
            rgba(255,255,255,.025) !important;

        border:
            1px solid
            rgba(255,255,255,.06) !important;

        border-radius:11px !important;

        cursor:pointer !important;

        box-sizing:border-box !important;

        font-size:10px !important;

        line-height:1.35 !important;

        transition:
            background .15s ease,
            border-color .15s ease,
            transform .15s ease !important;
    }


    .ap-image-prompt-option:hover {

        background:
            rgba(211,170,82,.055) !important;

        border-color:
            rgba(211,170,82,.22) !important;
    }


    .ap-image-prompt-option:active {

        transform:
            scale(.985) !important;
    }


    .ap-image-prompt-option svg {

        width:16px !important;
        height:16px !important;

        flex:0 0 16px !important;

        stroke:
            rgba(219,177,91,.86) !important;

        fill:none !important;

        stroke-width:1.65 !important;

        stroke-linecap:round !important;
        stroke-linejoin:round !important;
    }


    .ap-image-sheet-custom {

        margin-top:10px !important;

        padding-top:10px !important;

        border-top:
            1px solid
            rgba(255,255,255,.055) !important;

        color:
            rgba(230,228,221,.43) !important;

        font-size:9px !important;

        line-height:1.35 !important;
    }


    /* Hide any OLD mobile image-helper garbage */

    .ap-mobile-legacy-image-helper-hidden {

        display:none !important;

        visibility:hidden !important;

        opacity:0 !important;

        pointer-events:none !important;

        position:absolute !important;

        width:0 !important;
        height:0 !important;

        overflow:hidden !important;
    }

}