/*
 * ITNAONE_MAIL_MOBILE_FINAL_V1_20260903
 *
 * Gmail-style mobile Inbox normalization.
 * UI ONLY.
 * Does not change JMAP, folders, messages, search,
 * push, stars, compose or mail actions.
 */

/* =========================================================
   MAIL CONTENT SHELL
   ========================================================= */

body.mail-ui-page.view-mail .gmail-mail{
    min-width:0!important;
}

body.mail-ui-page.view-mail .gmail-messages{
    min-width:0!important;
}


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

@media (max-width:760px){

    /*
     * Main mail page.
     * The global Gmail-style search already exists in header,
     * so the old secondary mail search does not need space.
     */
    body.mail-ui-page.view-mail .gmail-messages{
        width:100%!important;
        max-width:100%!important;
        padding:
            0
            0
            calc(104px + env(safe-area-inset-bottom,0px))
            0!important;
        margin:0!important;
        overflow:visible!important;
        background:#fff!important;
    }

    body.mail-ui-page.view-mail .gmail-messages > .search{
        display:none!important;
    }


    /* =====================================================
       FOLDER TABS
       ===================================================== */

    body.mail-ui-page.view-mail .gmail-mobile-folders{
        width:100%!important;
        display:flex!important;
        align-items:center!important;
        gap:8px!important;

        margin:0!important;
        padding:10px 16px 9px!important;

        overflow-x:auto!important;
        overflow-y:hidden!important;

        -webkit-overflow-scrolling:touch!important;
        scrollbar-width:none!important;

        border-bottom:1px solid #e8eaed!important;
        background:#fff!important;

        white-space:nowrap!important;
    }

    body.mail-ui-page.view-mail
    .gmail-mobile-folders::-webkit-scrollbar{
        display:none!important;
    }

    body.mail-ui-page.view-mail .gmail-mobile-folders a{
        flex:0 0 auto!important;

        min-width:76px!important;
        min-height:40px!important;

        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;

        margin:0!important;
        padding:0 17px!important;

        border:0!important;
        border-radius:999px!important;

        background:#f1f3f4!important;
        color:#3c4043!important;

        font-size:14px!important;
        font-weight:650!important;
        line-height:1!important;

        text-decoration:none!important;
        box-shadow:none!important;
    }

    body.mail-ui-page.view-mail .gmail-mobile-folders a.active{
        background:#d3e3fd!important;
        color:#0b57d0!important;
        font-weight:750!important;
    }


    /* =====================================================
       SCHEDULED / RULES / CALENDAR / CONTACTS
       ===================================================== */

    body.mail-ui-page.view-mail .ws-mail-productivity{
        width:100%!important;
        max-width:100%!important;

        display:flex!important;
        align-items:center!important;
        gap:7px!important;

        margin:0!important;
        padding:8px 16px 9px!important;

        overflow-x:auto!important;
        overflow-y:hidden!important;

        -webkit-overflow-scrolling:touch!important;
        scrollbar-width:none!important;

        white-space:nowrap!important;

        background:#fff!important;
        border-bottom:1px solid #edf0f2!important;
    }

    body.mail-ui-page.view-mail
    .ws-mail-productivity::-webkit-scrollbar{
        display:none!important;
    }

    body.mail-ui-page.view-mail .ws-mail-productivity a{
        flex:0 0 auto!important;

        min-height:34px!important;

        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        gap:5px!important;

        margin:0!important;
        padding:0 11px!important;

        border:1px solid #e1e5e9!important;
        border-radius:999px!important;

        background:#fff!important;
        color:#3c4043!important;

        font-size:12.5px!important;
        font-weight:650!important;
        line-height:1!important;

        text-decoration:none!important;
        box-shadow:none!important;
    }

    body.mail-ui-page.view-mail .ws-mail-productivity a:active{
        background:#f1f3f4!important;
    }


    /* =====================================================
       FOLDER TITLE / MESSAGE COUNT
       ===================================================== */

    body.mail-ui-page.view-mail .gmail-messages .section-title{
        width:100%!important;

        display:flex!important;
        align-items:center!important;
        justify-content:space-between!important;
        gap:12px!important;

        margin:0!important;
        padding:13px 16px 12px!important;

        border-bottom:1px solid #edf0f2!important;
        background:#fff!important;
    }

    body.mail-ui-page.view-mail .gmail-messages .section-title h2{
        margin:0!important;
        min-width:0!important;

        color:#202124!important;
        font-size:17px!important;
        font-weight:650!important;
        line-height:1.25!important;
    }

    body.mail-ui-page.view-mail .gmail-messages .section-title span{
        margin:0!important;
        flex:0 0 auto!important;

        color:#80868b!important;

        font-size:12px!important;
        font-weight:500!important;
        line-height:1.25!important;

        white-space:nowrap!important;
    }


    /* =====================================================
       EMAIL ROW
       ===================================================== */

    body.mail-ui-page.view-mail .gmail-messages > a.msg{
        position:relative!important;

        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        min-height:94px!important;

        display:grid!important;
        grid-template-columns:
            48px
            minmax(0,1fr)
            38px!important;

        align-items:center!important;
        gap:12px!important;

        margin:0!important;
        padding:12px 14px!important;

        border:0!important;
        border-bottom:1px solid #edf0f2!important;
        border-radius:0!important;

        background:#fff!important;

        color:#202124!important;
        text-decoration:none!important;

        box-shadow:none!important;
        overflow:hidden!important;

        -webkit-tap-highlight-color:transparent!important;
    }

    body.mail-ui-page.view-mail .gmail-messages > a.msg:active{
        background:#f5f8fc!important;
    }

    body.mail-ui-page.view-mail .gmail-messages > a.msg.unread{
        background:#f4f8ff!important;
    }


    /* Sender avatar */
    body.mail-ui-page.view-mail .gmail-messages .msg .sender{
        width:46px!important;
        height:46px!important;
        min-width:46px!important;

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

        margin:0!important;

        border-radius:50%!important;

        font-size:14px!important;
        font-weight:750!important;
        line-height:1!important;

        overflow:hidden!important;
    }


    /*
     * Main text column.
     * This also prevents long email addresses from
     * forcing horizontal page overflow.
     */
    body.mail-ui-page.view-mail
    .gmail-messages .msg > div:nth-child(2){
        min-width:0!important;
        width:100%!important;

        display:block!important;

        text-align:left!important;
    }


    /* Sender */
    body.mail-ui-page.view-mail .gmail-messages .msg h3{
        display:block!important;

        width:100%!important;

        margin:0!important;

        overflow:hidden!important;
        text-overflow:ellipsis!important;
        white-space:nowrap!important;

        color:#202124!important;

        font-size:15px!important;
        font-weight:500!important;
        line-height:1.3!important;

        text-align:left!important;
    }

    body.mail-ui-page.view-mail .gmail-messages .msg.unread h3{
        font-weight:750!important;
    }


    /* Subject / preview */
    body.mail-ui-page.view-mail .gmail-messages .msg p{
        display:block!important;

        width:100%!important;
        max-width:100%!important;

        margin:4px 0 0!important;
        padding:0!important;

        overflow:hidden!important;
        text-overflow:ellipsis!important;
        white-space:nowrap!important;

        color:#5f6368!important;

        font-size:14px!important;
        font-weight:400!important;
        line-height:1.35!important;

        text-align:left!important;
    }

    body.mail-ui-page.view-mail .gmail-messages .msg p strong{
        color:#202124!important;
        font-weight:600!important;
    }

    body.mail-ui-page.view-mail .gmail-messages .msg.unread p strong{
        font-weight:750!important;
    }


    /* Any time/date element in the message row */
    body.mail-ui-page.view-mail .gmail-messages .msg time{
        color:#5f6368!important;
        font-size:11px!important;
        font-weight:550!important;
        white-space:nowrap!important;
    }


    /*
     * Keep third-column actions such as star aligned
     * and stop old CSS from stretching them.
     */
    body.mail-ui-page.view-mail
    .gmail-messages .msg > :last-child:not(div:nth-child(2)){
        justify-self:center!important;
    }


    /*
     * Existing star/action implementations in older
     * ItnaOne styles remain functional.
     */
    body.mail-ui-page.view-mail .gmail-messages .star,
    body.mail-ui-page.view-mail .gmail-messages .star-btn{
        width:36px!important;
        height:36px!important;

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

        margin:0!important;
        padding:0!important;

        border:0!important;
        border-radius:50%!important;

        background:transparent!important;
        color:#747b80!important;

        font-size:23px!important;
    }


    /* =====================================================
       EMPTY / ERROR STATE
       ===================================================== */

    body.mail-ui-page.view-mail .gmail-messages > .mini-card{
        margin:20px 16px!important;
        padding:28px 20px!important;

        border:1px solid #e5e9ef!important;
        border-radius:18px!important;

        background:#f8fafd!important;

        text-align:center!important;
        color:#202124!important;

        box-shadow:none!important;
    }


    /* =====================================================
       FLOATING COMPOSE BUTTON
       ===================================================== */

    body.mail-ui-page.view-mail a.compose,
    body.mail-ui-page.view-mail .compose{
        -webkit-tap-highlight-color:transparent!important;
    }
}


/* =========================================================
   SMALL iPHONE WIDTHS
   ========================================================= */

@media (max-width:390px){

    body.mail-ui-page.view-mail .gmail-mobile-folders{
        padding-left:12px!important;
        padding-right:12px!important;
        gap:6px!important;
    }

    body.mail-ui-page.view-mail .gmail-mobile-folders a{
        min-width:70px!important;
        min-height:38px!important;
        padding-left:14px!important;
        padding-right:14px!important;
        font-size:13px!important;
    }

    body.mail-ui-page.view-mail .ws-mail-productivity{
        padding-left:12px!important;
        padding-right:12px!important;
    }

    body.mail-ui-page.view-mail .gmail-messages > a.msg{
        grid-template-columns:
            44px
            minmax(0,1fr)
            34px!important;

        gap:10px!important;
        padding-left:12px!important;
        padding-right:10px!important;
    }

    body.mail-ui-page.view-mail .gmail-messages .msg .sender{
        width:42px!important;
        height:42px!important;
        min-width:42px!important;
    }
}


/* =========================================================
   DESKTOP / TABLET PRODUCTIVITY BAR NORMALIZATION
   ========================================================= */

@media (min-width:761px){

    body.mail-ui-page.view-mail .ws-mail-productivity{
        display:flex!important;
        align-items:center!important;
        flex-wrap:wrap!important;
        gap:8px!important;

        margin:12px 0!important;
    }

    body.mail-ui-page.view-mail .ws-mail-productivity a{
        display:inline-flex!important;
        align-items:center!important;
        gap:6px!important;

        padding:8px 11px!important;

        border:1px solid #e1e7ef!important;
        border-radius:12px!important;

        background:#fff!important;
        color:#3c4043!important;

        font-size:13px!important;
        font-weight:650!important;

        text-decoration:none!important;
    }
}