/* ============================================================
   J&A AUTOMATION — COMPOSE UX V2
   Desktop + Mobile
   ============================================================ */


/* ============================================================
   DESKTOP — MAKE COMPOSE THE PRIMARY ACTION
   ============================================================ */

body.task-mail #taskmenu .action-buttons .compose {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #0796d8 0%,
            #0478b8 55%,
            #055f91 100%
        ) !important;

    border-radius:
        13px !important;

    box-shadow:
        0 8px 22px
        rgba(7,150,216,.30),
        inset 0 1px 0
        rgba(255,255,255,.13) !important;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        filter .15s ease !important;
}


body.task-mail #taskmenu .action-buttons .compose:hover {
    color:
        #ffffff !important;

    filter:
        brightness(1.08);

    transform:
        translateY(-1px);

    box-shadow:
        0 11px 28px
        rgba(7,150,216,.37),
        inset 0 1px 0
        rgba(255,255,255,.15) !important;
}


body.task-mail #taskmenu .action-buttons .compose:active {
    transform:
        translateY(0);
}


/* ============================================================
   MOBILE — FLOATING "+ NEW MESSAGE" BUTTON
   ============================================================ */

@media (max-width: 600px) {

    /*
     * Elastic already creates .floating-action-buttons from
     * data-fab=true. We only redesign it.
     */

    body.task-mail .floating-action-buttons {
        position:
            fixed !important;

        right:
            max(14px, env(safe-area-inset-right)) !important;

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

        z-index:
            1100 !important;

        pointer-events:
            none;
    }


    body.task-mail .floating-action-buttons a.button.compose {
        display:
            inline-flex !important;

        align-items:
            center;

        justify-content:
            center;

        width:
            auto !important;

        min-width:
            158px !important;

        height:
            54px !important;

        padding:
            0 1.15rem !important;

        margin:
            0 !important;

        border:
            1px solid
            rgba(130,215,255,.25) !important;

        border-radius:
            999px !important;

        color:
            #ffffff !important;

        background:
            linear-gradient(
                135deg,
                #079fe3 0%,
                #057fc0 50%,
                #045f96 100%
            ) !important;

        box-shadow:
            0 14px 36px
            rgba(0,75,125,.36),
            0 4px 12px
            rgba(0,0,0,.18),
            inset 0 1px 0
            rgba(255,255,255,.18) !important;

        opacity:
            1 !important;

        pointer-events:
            auto;

        transition:
            transform .15s ease,
            box-shadow .15s ease,
            filter .15s ease !important;
    }


    /*
     * Replace Roundcube's icon with a clean +
     */

    body.task-mail .floating-action-buttons a.button.compose::before {
        content:
            "+" !important;

        display:
            inline-flex !important;

        align-items:
            center;

        justify-content:
            center;

        width:
            auto !important;

        height:
            auto !important;

        margin-right:
            .55rem !important;

        font-family:
            inherit !important;

        font-size:
            1.55rem !important;

        font-weight:
            400 !important;

        line-height:
            1 !important;

        color:
            #ffffff !important;
    }


    /*
     * Elastic normally hides .inner in FABs.
     * Show our text instead.
     */

    body.task-mail .floating-action-buttons a.button.compose .inner {
        display:
            inline-block !important;

        font-size:
            0 !important;

        color:
            #ffffff !important;
    }


    body.task-mail .floating-action-buttons a.button.compose .inner::after {
        content:
            "New message";

        font-size:
            .92rem;

        font-weight:
            700;

        letter-spacing:
            .01em;

        white-space:
            nowrap;
    }


    body.task-mail .floating-action-buttons a.button.compose:active {
        transform:
            scale(.97);
    }


    /*
     * Extra safety: never show the FAB while already composing.
     */

    body.task-mail.action-compose .floating-action-buttons {
        display:
            none !important;
    }

}


/* ============================================================
   PHONE TASK MENU — COMPOSE AS LARGE CTA
   ============================================================ */

html.layout-phone body.task-mail #taskmenu .action-buttons {
    padding:
        .55rem .55rem .35rem;
}


html.layout-phone body.task-mail #taskmenu .action-buttons .compose {
    width:
        100% !important;

    min-height:
        48px;

    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px !important;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #0796d8,
            #056da6
        ) !important;

    box-shadow:
        0 9px 24px
        rgba(7,150,216,.25) !important;
}


/* ============================================================
   MESSAGE ACTION SHELF — MOBILE
   Reply/navigation feels more like a native mail app
   ============================================================ */

@media (max-width: 600px) {

    body.task-mail #layout-content > .footer.content-frame-navigation {
        position:
            sticky;

        bottom:
            0;

        z-index:
            850;

        min-height:
            58px;

        padding-bottom:
            env(safe-area-inset-bottom);

        background:
            rgba(13, 28, 43, .92) !important;

        border-top:
            1px solid
            rgba(110,190,235,.13) !important;

        box-shadow:
            0 -10px 28px
            rgba(0,0,0,.13);

        backdrop-filter:
            blur(16px)
            saturate(130%);

        -webkit-backdrop-filter:
            blur(16px)
            saturate(130%);
    }


    body.task-mail .content-frame-navigation .buttons {
        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            .4rem;
    }


    body.task-mail .content-frame-navigation .button {
        min-width:
            46px;

        min-height:
            44px;

        border-radius:
            11px !important;
    }


    /*
     * Reply = primary action when reading mail
     */

    body.task-mail .content-frame-navigation .button.reply {
        color:
            #ffffff !important;

        background:
            linear-gradient(
                135deg,
                #0796d8,
                #056fa9
            ) !important;

        box-shadow:
            0 7px 20px
            rgba(7,150,216,.24);
    }

}


/* ============================================================
   COMPOSE SCREEN
   ============================================================ */

body.task-mail.action-compose #layout-content {
    background:
        #f5f8fb !important;
}


body.task-mail.action-compose #compose-content {
    background:
        #f5f8fb;
}


body.task-mail.action-compose #compose-headers {
    background:
        #ffffff;

    border-bottom:
        1px solid
        rgba(15,40,70,.08);

    box-shadow:
        0 6px 22px
        rgba(15,30,50,.025);
}


body.task-mail.action-compose .compose-headers {
    padding:
        1rem 1.1rem .5rem;
}


body.task-mail.action-compose .compose-headers .form-control {
    min-height:
        43px;

    border:
        1px solid
        rgba(35,70,105,.14);

    border-radius:
        10px !important;

    background:
        #fbfcfe;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}


body.task-mail.action-compose .compose-headers .form-control:focus {
    background:
        #ffffff;

    border-color:
        rgba(7,150,216,.58);

    box-shadow:
        0 0 0 3px
        rgba(7,150,216,.09);
}


/* ============================================================
   SEND = MOST IMPORTANT COMPOSE ACTION
   ============================================================ */

body.task-mail.action-compose .send,
body.task-mail.action-compose button.send,
body.task-mail.action-compose .btn.send {
    min-height:
        44px;

    min-width:
        112px;

    border:
        0 !important;

    border-radius:
        11px !important;

    color:
        #ffffff !important;

    font-weight:
        700 !important;

    background:
        linear-gradient(
            135deg,
            #079fe3 0%,
            #057fc0 55%,
            #045f96 100%
        ) !important;

    box-shadow:
        0 9px 25px
        rgba(7,150,216,.28),
        inset 0 1px 0
        rgba(255,255,255,.15) !important;
}


body.task-mail.action-compose .send:hover {
    filter:
        brightness(1.07);

    box-shadow:
        0 12px 30px
        rgba(7,150,216,.35) !important;
}


/* ============================================================
   MOBILE COMPOSER
   ============================================================ */

@media (max-width: 600px) {

    body.task-mail.action-compose .compose-headers {
        padding:
            .65rem .65rem .25rem;
    }


    body.task-mail.action-compose .compose-headers .form-control {
        min-height:
            46px;

        font-size:
            16px !important;
    }


    /*
     * Send becomes large and thumb-friendly in the bottom shelf.
     */

    body.task-mail.action-compose
    .content-frame-navigation
    .buttons {
        width:
            100%;

        padding:
            6px 8px;
    }


    body.task-mail.action-compose
    .content-frame-navigation
    .send {
        flex:
            1;

        min-height:
            48px;

        max-width:
            260px;

        border-radius:
            12px !important;
    }


    /*
     * Draft/secondary actions remain accessible,
     * but Send visually dominates.
     */

    body.task-mail.action-compose
    .content-frame-navigation
    .save {
        min-width:
            48px;

        min-height:
            48px;

        border-radius:
            12px !important;
    }

}


/* ============================================================
   DARK MODE
   ============================================================ */

html.dark-mode body.task-mail.action-compose #layout-content,
html.dark-mode body.task-mail.action-compose #compose-content {
    background:
        #0b1520 !important;
}


html.dark-mode body.task-mail.action-compose #compose-headers {
    background:
        #101c29 !important;

    border-color:
        rgba(160,195,220,.10) !important;
}


html.dark-mode body.task-mail.action-compose .compose-headers .form-control {
    color:
        #eef5fb !important;

    background:
        #0d1926 !important;

    border-color:
        rgba(160,195,220,.14) !important;
}


html.dark-mode body.task-mail.action-compose
.compose-headers .form-control:focus {
    background:
        #102234 !important;

    border-color:
        rgba(56,189,248,.58) !important;
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    body.task-mail #taskmenu .compose,
    body.task-mail .floating-action-buttons .compose,
    body.task-mail.action-compose .send {
        transition:
            none !important;
    }

}