/*
 * ITNAONE_RESPONSIVE_FINAL_V4_20260903
 *
 * Single responsive authority for:
 * - mobile/tablet drawer
 * - bottom navigation
 * - iPhone safe area
 * - Android
 * - tablets
 * - compose FAB clearance
 *
 * UI only.
 */


/* =========================================================
   MOBILE + TABLET
   ========================================================= */

@media (max-width:900px){

  /* -------------------------
     DRAWER
     ------------------------- */

  body.mail-ui-page .itnaone-app-drawer{
    position:fixed!important;
    z-index:1000!important;

    top:0!important;
    left:0!important;
    bottom:0!important;

    width:min(86vw,360px)!important;

    height:100vh!important;
    height:100dvh!important;
    max-height:100dvh!important;

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

    display:flex!important;
    flex-direction:column!important;

    overflow:hidden!important;

    background:#fff!important;

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

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

    box-sizing:border-box!important;

    transition:
      transform .22s ease,
      visibility .22s ease!important;

    transform:translateX(-105%)!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body.mail-ui-page .itnaone-app-drawer[aria-hidden="false"]{
    transform:translateX(0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }


  /* -------------------------
     DRAWER BACKDROP
     ------------------------- */

  body.mail-ui-page .itnaone-drawer-backdrop{
    position:fixed!important;
    z-index:990!important;

    inset:0!important;

    width:100%!important;
    height:100vh!important;
    height:100dvh!important;

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

    background:rgba(15,23,42,.42)!important;

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

  body.mail-ui-page .itnaone-drawer-backdrop[hidden]{
    display:none!important;
  }


  /* -------------------------
     DRAWER HEADER
     ------------------------- */

  body.mail-ui-page .itnaone-drawer-brand{
    flex:0 0 auto!important;

    min-height:82px!important;

    margin:0!important;

    padding:
      calc(10px + env(safe-area-inset-top,0px))
      16px
      10px!important;

    display:flex!important;
    align-items:center!important;

    gap:12px!important;

    background:#fff!important;

    border-bottom:1px solid #edf0f3!important;

    box-sizing:border-box!important;
  }

  body.mail-ui-page .itnaone-drawer-brand img{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;

    margin:0!important;

    object-fit:cover!important;

    border-radius:13px!important;

    box-shadow:0 4px 13px rgba(15,23,42,.12)!important;
  }

  body.mail-ui-page .itnaone-drawer-brand > div{
    flex:1 1 auto!important;
    min-width:0!important;
  }

  body.mail-ui-page .itnaone-drawer-brand strong{
    display:block!important;

    margin:0!important;

    color:#202124!important;

    font-size:18px!important;
    line-height:23px!important;
    font-weight:750!important;
  }

  body.mail-ui-page .itnaone-drawer-brand small{
    display:block!important;

    margin-top:2px!important;

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

    color:#6b7280!important;

    font-size:12px!important;
    line-height:17px!important;
  }

  body.mail-ui-page #itnaoneDrawerClose{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;

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

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

    border:1px solid #d7e0eb!important;
    border-radius:50%!important;

    background:#fff!important;
    color:#0b57d0!important;

    font-size:29px!important;
    line-height:1!important;

    box-shadow:none!important;
  }


  /* -------------------------
     ONLY MENU AREA SCROLLS
     ------------------------- */

  body.mail-ui-page .itnaone-app-drawer > nav{
    flex:1 1 auto!important;

    min-height:0!important;

    margin:0!important;

    padding:6px 10px 12px!important;

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

    -webkit-overflow-scrolling:touch!important;

    overscroll-behavior:contain!important;

    scrollbar-width:none!important;

    background:#fff!important;
  }

  body.mail-ui-page .itnaone-app-drawer > nav::-webkit-scrollbar{
    display:none!important;
  }

  body.mail-ui-page .itnaone-app-drawer .ws-nav-section{
    margin:0!important;

    padding:12px 12px 5px!important;

    color:#5f6368!important;

    font-size:12px!important;
    line-height:17px!important;
    font-weight:650!important;

    text-transform:none!important;
    letter-spacing:0!important;
  }

  body.mail-ui-page .itnaone-app-drawer nav > a{
    width:100%!important;

    height:46px!important;
    min-height:46px!important;

    margin:1px 0!important;
    padding:0 13px!important;

    display:flex!important;
    align-items:center!important;

    gap:13px!important;

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

    background:transparent!important;

    color:#3c4043!important;

    text-decoration:none!important;

    box-shadow:none!important;

    box-sizing:border-box!important;
  }

  body.mail-ui-page .itnaone-app-drawer nav > a > span{
    width:25px!important;
    min-width:25px!important;
    height:25px!important;

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

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

    color:#5f6368!important;

    font-size:19px!important;
    line-height:25px!important;
  }

  body.mail-ui-page .itnaone-app-drawer nav > a > b{
    min-width:0!important;

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

    color:inherit!important;

    font-size:15px!important;
    line-height:20px!important;
    font-weight:650!important;
  }

  body.mail-ui-page .itnaone-app-drawer nav > a.active{
    background:#d3e3fd!important;
    color:#0b57d0!important;
  }

  body.mail-ui-page .itnaone-app-drawer nav > a.active > span{
    color:#0b57d0!important;
  }


  /* -------------------------
     DRAWER SIGN OUT
     ------------------------- */

  body.mail-ui-page .itnaone-drawer-logout{
    flex:0 0 auto!important;

    width:100%!important;

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

    background:#fff!important;

    border-top:1px solid #edf0f3!important;

    box-sizing:border-box!important;
  }

  body.mail-ui-page .itnaone-drawer-logout button{
    width:100%!important;
    height:46px!important;

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

    display:flex!important;
    align-items:center!important;

    gap:12px!important;

    border:1px solid #d7e0eb!important;
    border-radius:23px!important;

    background:#fff!important;
    color:#0b57d0!important;

    font-size:15px!important;
    font-weight:700!important;

    box-shadow:none!important;
  }

  body.mail-ui-page .itnaone-drawer-footer{
    flex:0 0 auto!important;

    margin:0!important;

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

    background:#fff!important;

    border-top:1px solid #edf0f3!important;

    color:#718096!important;

    font-size:11px!important;
    line-height:16px!important;

    box-sizing:border-box!important;
  }


  /* =======================================================
     BOTTOM NAVIGATION
     FLEX = AUTOMATIC 4 OR 5 ITEMS
     ======================================================= */

  body.mail-ui-page .itnaone-mobile-dock,
  body.mail-ui-page .mail-mobile-dock{
    position:fixed!important;

    z-index:700!important;

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

    width:100%!important;

    height:calc(
      62px +
      env(safe-area-inset-bottom,0px)
    )!important;

    min-height:0!important;

    margin:0!important;

    padding:
      4px
      6px
      calc(4px + env(safe-area-inset-bottom,0px))
      6px!important;

    display:flex!important;
    align-items:flex-start!important;

    gap:2px!important;

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

    border:0!important;
    border-top:1px solid #e5e9ef!important;

    border-radius:0!important;

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

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

    box-sizing:border-box!important;
  }

  body.mail-ui-page .itnaone-mobile-dock > a,
  body.mail-ui-page .mail-mobile-dock > a{
    flex:1 1 0!important;

    min-width:0!important;

    height:52px!important;
    min-height:52px!important;

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

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

    gap:1px!important;

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

    background:transparent!important;

    color:#5f6368!important;

    text-decoration:none!important;

    box-shadow:none!important;

    box-sizing:border-box!important;
  }

  body.mail-ui-page .itnaone-mobile-dock > a > span,
  body.mail-ui-page .mail-mobile-dock > a > span{
    min-width:48px!important;
    height:28px!important;

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

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

    border-radius:999px!important;

    background:transparent!important;

    font-size:21px!important;
    line-height:28px!important;

    box-sizing:border-box!important;
  }

  body.mail-ui-page .itnaone-mobile-dock > a > small,
  body.mail-ui-page .mail-mobile-dock > a > small{
    margin:0!important;
    padding:0!important;

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

    max-width:100%!important;

    color:#5f6368!important;

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

  body.mail-ui-page .itnaone-mobile-dock > a.active,
  body.mail-ui-page .mail-mobile-dock > a.active{
    background:transparent!important;
    color:#0b57d0!important;
  }

  body.mail-ui-page .itnaone-mobile-dock > a.active > span,
  body.mail-ui-page .mail-mobile-dock > a.active > span{
    background:#d3e3fd!important;
    color:#0b57d0!important;
  }

  body.mail-ui-page .itnaone-mobile-dock > a.active > small,
  body.mail-ui-page .mail-mobile-dock > a.active > small{
    color:#0b57d0!important;
    font-weight:750!important;
  }

  /*
   * Sign out exists in drawer.
   * Never give it a bottom-navigation slot.
   */
  body.mail-ui-page .itnaone-mobile-direct-logout{
    display:none!important;
  }


  /* -------------------------
     CONTENT CLEARANCE
     ------------------------- */

  body.mail-ui-page .itnaone-view-stage{
    padding-bottom:
      calc(
        62px +
        env(safe-area-inset-bottom,0px) +
        16px
      )!important;
  }

  body.mail-ui-page .gmail-mail,
  body.mail-ui-page .gmail-messages,
  body.mail-ui-page .messages{
    padding-bottom:
      calc(
        62px +
        env(safe-area-inset-bottom,0px) +
        28px
      )!important;
  }


  /* -------------------------
     COMPOSE +
     ------------------------- */

  body.mail-ui-page :is(
    .gmail-compose-fab,
    .mail-compose-fab,
    .compose-fab,
    .gmail-fab
  ){
    bottom:
      calc(
        62px +
        env(safe-area-inset-bottom,0px) +
        14px
      )!important;
  }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width:390px){

  body.mail-ui-page .itnaone-app-drawer{
    width:min(88vw,335px)!important;
  }

  body.mail-ui-page .itnaone-app-drawer nav > a{
    height:44px!important;
    min-height:44px!important;
  }

  body.mail-ui-page .itnaone-mobile-dock > a > span{
    min-width:43px!important;
    font-size:20px!important;
  }

  body.mail-ui-page .itnaone-mobile-dock > a > small{
    font-size:10px!important;
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width:761px) and (max-width:900px){

  body.mail-ui-page .itnaone-app-drawer{
    width:360px!important;
  }

  body.mail-ui-page .itnaone-mobile-dock,
  body.mail-ui-page .mail-mobile-dock{
    left:50%!important;
    right:auto!important;

    width:min(680px,calc(100% - 32px))!important;

    transform:translateX(-50%)!important;

    bottom:10px!important;

    border:1px solid #dfe5ec!important;
    border-radius:22px!important;

    box-shadow:0 10px 35px rgba(15,23,42,.12)!important;
  }

  body.mail-ui-page .itnaone-view-stage{
    padding-bottom:100px!important;
  }
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width:901px){

  body.mail-ui-page .itnaone-mobile-dock,
  body.mail-ui-page .mail-mobile-dock{
    display:none!important;
  }
}