/*
 * ITNAONE_GMAIL_HEADER_FINAL_V1_20260903
 * Final topbar normalization.
 * UI only. Does not touch mail/push/account/realtime logic.
 */

body.mail-ui-page .itnaone-gmail-topbar{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    height:64px!important;
    min-height:64px!important;
    display:grid!important;
    grid-template-columns:
        44px
        minmax(145px,220px)
        minmax(240px,720px)
        minmax(150px,1fr)!important;
    align-items:center!important;
    gap:12px!important;
    padding:8px 16px!important;
    background:rgba(248,250,253,.96)!important;
    border-bottom:1px solid rgba(60,64,67,.08)!important;
    box-shadow:none!important;
    backdrop-filter:blur(18px) saturate(140%)!important;
    -webkit-backdrop-filter:blur(18px) saturate(140%)!important;
}

/* hamburger */
body.mail-ui-page .itnaone-menu-button{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    display:grid!important;
    place-items:center!important;
    background:transparent!important;
    color:#444746!important;
    font-size:23px!important;
    line-height:1!important;
    box-shadow:none!important;
}

body.mail-ui-page .itnaone-menu-button:hover{
    background:#eef1f5!important;
}

/* brand */
body.mail-ui-page .itnaone-mail-brand{
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
}

body.mail-ui-page .itnaone-mail-brand img{
    width:34px!important;
    height:34px!important;
    flex:0 0 34px!important;
    object-fit:contain!important;
}

/* Gmail-style search */
body.mail-ui-page .itnaone-global-search{
    width:100%!important;
    min-width:0!important;
    height:48px!important;
    margin:0!important;
    padding:0 8px 0 15px!important;
    border:1px solid transparent!important;
    border-radius:24px!important;
    background:#eef3fb!important;
    box-shadow:none!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    overflow:hidden!important;
}

body.mail-ui-page .itnaone-global-search:focus-within{
    background:#fff!important;
    border-color:#d9e1ee!important;
    box-shadow:
        0 1px 2px rgba(60,64,67,.15),
        0 1px 4px rgba(60,64,67,.10)!important;
}

body.mail-ui-page .itnaone-global-search .mail-search-icon{
    flex:0 0 auto!important;
    width:22px!important;
    height:22px!important;
    display:grid!important;
    place-items:center!important;
    color:#5f6368!important;
    font-size:20px!important;
    line-height:1!important;
}

body.mail-ui-page .itnaone-global-search input{
    min-width:0!important;
    width:100%!important;
    height:100%!important;
    padding:0!important;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    color:#202124!important;
    font-size:16px!important;
    box-shadow:none!important;
}

body.mail-ui-page .itnaone-global-search input::placeholder{
    color:#5f6368!important;
    opacity:1!important;
}

body.mail-ui-page .itnaone-search-options{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border:0!important;
    border-radius:50%!important;
    background:transparent!important;
    color:#5f6368!important;
}

/* right side */
body.mail-ui-page .itnaone-top-actions{
    justify-self:end!important;
    position:relative!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:4px!important;
    white-space:nowrap!important;
}

/* Remove Drive + Wallet duplicates from header only.
   They remain in drawer and account menu. */
body.mail-ui-page .itnaone-top-actions > .itnaone-drive-toplink,
body.mail-ui-page .itnaone-top-actions > .itnaone-wallet-toplink,
body.mail-ui-page .itnaone-top-actions > .itnaone-top-direct-logout{
    display:none!important;
}

/* standard action circles */
body.mail-ui-page .itnaone-top-actions > .itnaone-apps-toplink,
body.mail-ui-page .itnaone-top-actions > #notifyBtn,
body.mail-ui-page .itnaone-top-actions > .mail-settings-btn{
    position:relative!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    flex:0 0 40px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:50%!important;
    display:grid!important;
    place-items:center!important;
    background:transparent!important;
    color:#444746!important;
    box-shadow:none!important;
    line-height:1!important;
    text-decoration:none!important;
}

body.mail-ui-page .itnaone-top-actions > .itnaone-apps-toplink:hover,
body.mail-ui-page .itnaone-top-actions > #notifyBtn:hover,
body.mail-ui-page .itnaone-top-actions > .mail-settings-btn:hover{
    background:#e9edf3!important;
}

/* true Gmail-like 9-dot apps icon */
body.mail-ui-page .itnaone-top-actions > .itnaone-apps-toplink{
    font-size:0!important;
}

body.mail-ui-page .itnaone-top-actions > .itnaone-apps-toplink::before{
    content:""!important;
    width:4px!important;
    height:4px!important;
    border-radius:50%!important;
    background:#5f6368!important;
    box-shadow:
        7px 0 #5f6368,
        14px 0 #5f6368,
        0 7px #5f6368,
        7px 7px #5f6368,
        14px 7px #5f6368,
        0 14px #5f6368,
        7px 14px #5f6368,
        14px 14px #5f6368!important;
    transform:translate(-7px,-7px)!important;
}

/* bell/settings normalize */
body.mail-ui-page .itnaone-top-actions > #notifyBtn{
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif!important;
    font-size:19px!important;
}

body.mail-ui-page .itnaone-top-actions > .mail-settings-btn{
    font-size:20px!important;
}

/* Gmail-style account avatar */
body.mail-ui-page .itnaone-account-button{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    max-width:40px!important;
    max-height:40px!important;
    flex:0 0 40px!important;
    margin-left:4px!important;
    padding:0!important;
    border:2px solid rgba(255,255,255,.9)!important;
    border-radius:50%!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
    background:
        linear-gradient(135deg,#1a73e8,#4f8ff7)!important;
    color:#fff!important;
    font-size:13px!important;
    font-weight:800!important;
    letter-spacing:.02em!important;
    line-height:1!important;
    text-align:center!important;
    box-shadow:
        0 0 0 1px rgba(60,64,67,.12),
        0 2px 6px rgba(60,64,67,.13)!important;
}

body.mail-ui-page .itnaone-account-button:hover{
    box-shadow:
        0 0 0 3px rgba(60,64,67,.10),
        0 2px 7px rgba(60,64,67,.15)!important;
}

/* account card remains attached to avatar */
body.mail-ui-page .itnaone-account-menu{
    right:0!important;
    top:48px!important;
    width:min(320px,calc(100vw - 20px))!important;
    border-radius:20px!important;
    border:1px solid #e1e5ea!important;
    background:#fff!important;
    box-shadow:
        0 8px 28px rgba(60,64,67,.22)!important;
}

/* tablet */
@media (max-width:1000px){
    body.mail-ui-page .itnaone-gmail-topbar{
        grid-template-columns:
            44px
            42px
            minmax(0,1fr)
            auto!important;
        gap:7px!important;
        padding-left:10px!important;
        padding-right:10px!important;
    }

    body.mail-ui-page .itnaone-mail-brand{
        width:42px!important;
        justify-content:center!important;
    }

    body.mail-ui-page .itnaone-mail-brand > span,
    body.mail-ui-page .itnaone-mail-brand > small{
        display:none!important;
    }
}

/* phone */
@media (max-width:700px){
    body.mail-ui-page .itnaone-gmail-topbar{
        height:66px!important;
        min-height:66px!important;
        grid-template-columns:
            42px
            minmax(0,1fr)
            86px!important;
        gap:7px!important;
        padding:
            7px
            8px!important;
        background:#f8fafd!important;
    }

    /* hide separate brand on phone to give search maximum room */
    body.mail-ui-page .itnaone-mail-brand{
        display:none!important;
    }

    body.mail-ui-page .itnaone-menu-button{
        width:40px!important;
        height:40px!important;
        min-width:40px!important;
        min-height:40px!important;
    }

    body.mail-ui-page .itnaone-global-search{
        height:48px!important;
        border-radius:24px!important;
        padding-left:13px!important;
        padding-right:6px!important;
    }

    body.mail-ui-page .itnaone-global-search .mail-search-icon{
        display:grid!important;
        width:20px!important;
    }

    body.mail-ui-page .itnaone-global-search input{
        font-size:16px!important;
    }

    body.mail-ui-page .itnaone-search-options{
        display:none!important;
    }

    body.mail-ui-page .itnaone-top-actions{
        width:86px!important;
        min-width:86px!important;
        gap:4px!important;
    }

    /* Gmail mobile: apps + avatar only */
    body.mail-ui-page .itnaone-top-actions > #notifyBtn,
    body.mail-ui-page .itnaone-top-actions > .mail-settings-btn{
        display:none!important;
    }

    body.mail-ui-page .itnaone-top-actions > .itnaone-apps-toplink,
    body.mail-ui-page .itnaone-account-button{
        display:grid!important;
        width:40px!important;
        height:40px!important;
        min-width:40px!important;
        min-height:40px!important;
        flex:0 0 40px!important;
    }

    body.mail-ui-page .itnaone-account-button{
        margin-left:2px!important;
    }

    body.mail-ui-page .itnaone-account-menu{
        position:fixed!important;
        top:68px!important;
        right:8px!important;
        width:min(330px,calc(100vw - 16px))!important;
        max-height:calc(100dvh - 90px)!important;
        overflow:auto!important;
    }
}

/* very narrow phones */
@media (max-width:390px){
    body.mail-ui-page .itnaone-gmail-topbar{
        grid-template-columns:
            40px
            minmax(0,1fr)
            82px!important;
        gap:4px!important;
        padding-left:6px!important;
        padding-right:6px!important;
    }

    body.mail-ui-page .itnaone-global-search{
        padding-left:10px!important;
    }

    body.mail-ui-page .itnaone-global-search input{
        font-size:15px!important;
    }

    body.mail-ui-page .itnaone-top-actions{
        width:82px!important;
        min-width:82px!important;
        gap:1px!important;
    }
}

/* ITNAONE_APPS_GRID_ICON_FINAL_V2_20260903 */

/* One clean Google-style 3x3 apps grid */
body.mail-ui-page .itnaone-apps-toplink{
    position:relative!important;

    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;

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

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

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

    background:transparent!important;
    color:#5f6368!important;

    font-size:0!important;
    line-height:0!important;

    overflow:visible!important;

    box-shadow:none!important;
}

/* remove any old duplicate decoration */
body.mail-ui-page .itnaone-apps-toplink::after{
    content:none!important;
    display:none!important;
}

/* create exactly one 3x3 dot grid */
body.mail-ui-page .itnaone-apps-toplink::before{
    content:""!important;

    display:block!important;

    width:4px!important;
    height:4px!important;

    border-radius:50%!important;

    background:currentColor!important;

    box-shadow:
        8px 0 0 currentColor,
        16px 0 0 currentColor,

        0 8px 0 currentColor,
        8px 8px 0 currentColor,
        16px 8px 0 currentColor,

        0 16px 0 currentColor,
        8px 16px 0 currentColor,
        16px 16px 0 currentColor!important;

    transform:translate(-8px,-8px)!important;
}

/* hide any old text/icon inside the apps button */
body.mail-ui-page .itnaone-apps-toplink > *{
    display:none!important;
}

body.mail-ui-page .itnaone-apps-toplink:hover,
body.mail-ui-page .itnaone-apps-toplink:active{
    background:#f1f3f4!important;
}

/* Mobile alignment with account circle */
@media (max-width:760px){

    body.mail-ui-page .itnaone-apps-toplink{
        width:42px!important;
        height:42px!important;
        min-width:42px!important;
        min-height:42px!important;
    }

}

/* =========================================================
   ITNAONE PREMIUM APP LAUNCHER ICON V3
   ========================================================= */

body.mail-ui-page .itnaone-apps-toplink{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;

    position:relative!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:#5f6368!important;

    font-size:0!important;
    line-height:0!important;

    box-shadow:none!important;

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

/* remove old icon rendering */
body.mail-ui-page .itnaone-apps-toplink::before,
body.mail-ui-page .itnaone-apps-toplink::after{
    content:none!important;
    display:none!important;
}

/* hide old internal character */
body.mail-ui-page .itnaone-apps-toplink > *{
    display:none!important;
}

/*
 * Draw premium 3x3 rounded-square launcher
 */
body.mail-ui-page .itnaone-apps-toplink{
    background-image:
        radial-gradient(
            circle at 14px 14px,
            currentColor 0 3px,
            transparent 3.3px
        ),
        radial-gradient(
            circle at 22px 14px,
            currentColor 0 3px,
            transparent 3.3px
        ),
        radial-gradient(
            circle at 30px 14px,
            currentColor 0 3px,
            transparent 3.3px
        ),

        radial-gradient(
            circle at 14px 22px,
            currentColor 0 3px,
            transparent 3.3px
        ),
        radial-gradient(
            circle at 22px 22px,
            currentColor 0 3px,
            transparent 3.3px
        ),
        radial-gradient(
            circle at 30px 22px,
            currentColor 0 3px,
            transparent 3.3px
        ),

        radial-gradient(
            circle at 14px 30px,
            currentColor 0 3px,
            transparent 3.3px
        ),
        radial-gradient(
            circle at 22px 30px,
            currentColor 0 3px,
            transparent 3.3px
        ),
        radial-gradient(
            circle at 30px 30px,
            currentColor 0 3px,
            transparent 3.3px
        )!important;

    background-repeat:no-repeat!important;
}

body.mail-ui-page .itnaone-apps-toplink:hover{
    background-color:#f1f3f4!important;
}

body.mail-ui-page .itnaone-apps-toplink:active{
    background-color:#e8eaed!important;
    transform:scale(.94)!important;
}

/* mobile */
@media (max-width:760px){

    body.mail-ui-page .itnaone-apps-toplink{
        width:42px!important;
        height:42px!important;
        min-width:42px!important;
        min-height:42px!important;
    }

}

/* =========================================================
   ITNAONE APPS ICON FINAL V4
   Reliable premium 3x3 launcher
   ========================================================= */

body.mail-ui-page .itnaone-apps-toplink{
    display:grid!important;
    place-items:center!important;

    flex:0 0 44px!important;

    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;

    position:relative!important;

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

    visibility:visible!important;
    opacity:1!important;

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

    background:#f4f7fb!important;
    color:#4b5563!important;

    font-size:0!important;
    line-height:0!important;

    overflow:visible!important;

    box-shadow:none!important;
}


/* Remove every previous icon implementation */
body.mail-ui-page .itnaone-apps-toplink > *{
    display:none!important;
}

body.mail-ui-page .itnaone-apps-toplink::after{
    content:none!important;
    display:none!important;
}


/* 3 x 3 premium rounded dots */
body.mail-ui-page .itnaone-apps-toplink::before{
    content:""!important;

    display:block!important;

    position:absolute!important;

    left:50%!important;
    top:50%!important;

    width:5px!important;
    height:5px!important;

    margin-left:-9px!important;
    margin-top:-9px!important;

    border-radius:2px!important;

    background:#4b5563!important;

    box-shadow:
        7px 0 0 #4b5563,
        14px 0 0 #4b5563,

        0 7px 0 #4b5563,
        7px 7px 0 #4b5563,
        14px 7px 0 #4b5563,

        0 14px 0 #4b5563,
        7px 14px 0 #4b5563,
        14px 14px 0 #4b5563!important;
}


body.mail-ui-page .itnaone-apps-toplink:hover{
    background:#e9eef6!important;
}

body.mail-ui-page .itnaone-apps-toplink:active{
    background:#dfe7f2!important;
    transform:scale(.94)!important;
}


/* Phone */
@media (max-width:760px){

    body.mail-ui-page .itnaone-apps-toplink{
        display:grid!important;

        flex:0 0 42px!important;

        width:42px!important;
        height:42px!important;
        min-width:42px!important;
        min-height:42px!important;
    }

}


/* Very narrow phones: never remove Apps icon */
@media (max-width:390px){

    body.mail-ui-page .itnaone-apps-toplink{
        display:grid!important;

        flex:0 0 38px!important;

        width:38px!important;
        height:38px!important;
        min-width:38px!important;
        min-height:38px!important;
    }

}

/* =========================================================
   ITNAONE ACCOUNT ONLINE DOT FINAL V1
   ========================================================= */

body.mail-ui-page .itnaone-account-button{
    position:relative!important;
    overflow:visible!important;
}

/* clean green online indicator */
body.mail-ui-page .itnaone-account-button::after{
    content:""!important;

    position:absolute!important;

    right:1px!important;
    bottom:1px!important;

    width:10px!important;
    height:10px!important;

    min-width:10px!important;
    min-height:10px!important;

    display:block!important;

    border:2px solid #fff!important;
    border-radius:50%!important;

    background:#22c55e!important;

    box-shadow:
        0 1px 3px rgba(15,23,42,.18)!important;

    z-index:5!important;

    box-sizing:border-box!important;
    pointer-events:none!important;
}

/* phone */
@media (max-width:760px){

    body.mail-ui-page .itnaone-account-button::after{
        width:11px!important;
        height:11px!important;

        right:0!important;
        bottom:0!important;

        border-width:2px!important;
    }

}