/* =========================================================
   V52 — MOBILE / ANDROID APP LAYOUT
   Presentation-only responsive layer. Desktop and application logic stay
   unchanged. Safe-area aware for Android gesture nav and iPhone notches.
   ========================================================= */
:root{
  --app-safe-top:env(safe-area-inset-top,0px);
  --app-safe-right:env(safe-area-inset-right,0px);
  --app-safe-bottom:env(safe-area-inset-bottom,0px);
  --app-safe-left:env(safe-area-inset-left,0px);
}
html{overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100dvh;overflow-x:hidden;overscroll-behavior-y:none}
button,a,select,input,textarea{-webkit-tap-highlight-color:transparent}

@media(max-width:820px){
  body{
    padding-bottom:calc(86px + var(--app-safe-bottom))!important;
  }
  .app-shell{min-height:100dvh;overflow-x:clip}

  /* Header: brand + compact utility row, then three equal stats. */
  .topbar.v5-topbar{
    position:relative!important;
    top:auto!important;
    z-index:20!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    gap:10px 8px!important;
    padding:calc(10px + var(--app-safe-top)) max(12px,var(--app-safe-right)) 10px max(12px,var(--app-safe-left))!important;
    min-height:0!important;
  }
  .v5-topbar .brand{
    min-width:0!important;
    gap:9px!important;
  }
  .v5-topbar .brand-mark{
    width:38px!important;
    height:38px!important;
    border-radius:12px!important;
    flex:0 0 auto;
  }
  .v5-topbar .brand-title{font-size:23px!important;white-space:nowrap}
  .v5-topbar .brand-sub{font-size:8px!important;letter-spacing:.12em!important}

  .site-utility-actions{
    grid-column:2!important;
    grid-row:1!important;
    gap:5px!important;
    justify-self:end!important;
    min-width:0;
  }
  .site-utility-btn{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0!important;
    border-radius:13px!important;
  }
  .site-utility-btn>span:not(.site-utility-icon):not(.quick-theme-icon):not(.quick-theme-caret){display:none!important}
  .site-utility-btn .site-utility-icon{min-width:0!important;font-size:15px!important}
  .quick-theme-button .quick-theme-caret{display:none!important}
  .quick-theme-popover{
    right:0!important;
    left:auto!important;
    min-width:190px!important;
    max-width:calc(100vw - 24px)!important;
  }

  .v5-topbar .top-stats{
    grid-column:1/-1!important;
    grid-row:2!important;
    justify-self:stretch!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:0!important;
    padding:4px!important;
    overflow:visible!important;
    border-radius:18px!important;
  }
  .top-stats .stat-pill,
  .top-stats .session-pill{
    min-width:0!important;
    width:100%!important;
    padding:6px 5px!important;
    gap:6px!important;
  }
  .top-stats .stat-pill+.stat-pill{border-left:1px solid var(--theme-border-soft,var(--line))}
  .top-stats .gold-heart3d{transform:rotate(-45deg) scale(.72);margin:-3px}
  .top-stats .stat-icon{font-size:13px!important}
  .top-stats .stat-stack strong{font-size:12px!important;white-space:nowrap}
  .top-stats .stat-stack span{font-size:8px!important;line-height:1.08!important}

  /* Main surfaces stay comfortably clear of the screen edges. */
  .dashboard-wrap,.profile-wrap,.adhkar-wrap,.names-wrap,
  .reader-view .reader-wrap{
    width:calc(100% - 20px)!important;
    max-width:none!important;
    margin:14px auto 28px!important;
  }
  .home-welcome{
    margin-bottom:12px!important;
    gap:13px!important;
  }
  .home-welcome h1{font-size:clamp(30px,9vw,38px)!important;line-height:1.03!important}
  .welcome-actions,.profile-share-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    width:100%!important;
  }
  .welcome-actions .share-btn,.profile-share-actions .share-btn{
    width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    padding:0 11px!important;
    font-size:11px!important;
  }

  /* Weekly row scrolls instead of crushing seven days into tiny boxes. */
  .habit-week-card{padding:17px 15px!important;border-radius:19px!important}
  .week-habit-row{
    display:flex!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    gap:8px!important;
    padding-bottom:3px;
  }
  .week-habit-row::-webkit-scrollbar{display:none}
  .week-habit-row .habit-day{
    flex:0 0 76px!important;
    min-width:76px!important;
    scroll-snap-align:start;
    min-height:78px!important;
  }
  .week-habit-row .habit-day .day-count{display:block!important;font-size:9px!important}

  /* Continue + Hasanaat: one-column, no cramped split. */
  .dashboard-view .v15-continue-card{
    grid-template-columns:1fr!important;
    gap:16px!important;
    padding:18px!important;
    border-radius:20px!important;
  }
  .dashboard-view .v15-continue-card .primary-cta{
    width:100%!important;
    min-height:52px!important;
    margin-top:14px!important;
  }
  .continue-hasanaat-tracker{
    padding:15px 0 0!important;
    border-left:0!important;
    border-top:1px solid var(--theme-border,var(--line))!important;
  }
  .continue-tracker-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  .continue-tracker-stat{padding:11px 8px!important;text-align:center}
  .continue-tracker-stat span{white-space:normal!important;font-size:8px!important}
  .continue-tracker-stat strong{font-size:17px!important}

  /* Reader: selectors are compact, reading card owns the screen. */
  .reader-shell-v12{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .reader-shell-v12 .reader-sidebar{
    position:static!important;
    top:auto!important;
  }
  .reader-shell-v12 .reader-sidebar-panel{
    display:grid!important;
    grid-template-columns:minmax(0,1.35fr) minmax(86px,.65fr)!important;
    gap:8px!important;
    padding:10px!important;
    border-radius:17px!important;
  }
  .reader-shell-v12 .sidebar-select{gap:5px!important}
  .reader-shell-v12 .sidebar-select>span{font-size:9px!important}
  .reader-shell-v12 .sidebar-select select{
    min-height:44px!important;
    padding:0 10px!important;
    border-radius:12px!important;
    font-size:13px!important;
  }
  .reader-shell-v12 .sidebar-meta-stack{
    grid-column:1/-1!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
    margin-top:0!important;
  }
  .reader-shell-v12 .sidebar-meta-card{
    min-width:0!important;
    padding:8px 10px!important;
    border-radius:12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
  }
  .reader-shell-v12 .sidebar-meta-label{font-size:8px!important}
  .reader-shell-v12 .sidebar-meta-card strong{font-size:11px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .reader-view .ayah-card{
    padding:20px 14px!important;
    border-radius:22px!important;
  }
  .reader-view .surah-heading h1{font-size:27px!important}
  .reader-view .mushaf-reading-panel{
    grid-template-columns:10px minmax(0,1fr) 10px!important;
    gap:4px!important;
  }
  .reader-view .mushaf-arabic{font-size:clamp(30px,9.2vw,39px)!important;line-height:1.85!important}
  .reader-view .reader-bismillah{font-size:clamp(24px,7.5vw,32px)!important}
  .reader-view .translation{font-size:15px!important;line-height:1.7!important}
  .reader-shell-v12 .reader-quick-controls-v17{
    grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr)!important;
    gap:7px!important;
  }
  .reader-shell-v12 .reader-quick-controls-v17 #reciterQuickBtn{grid-column:1/-1!important}
  .reader-shell-v12 .reader-quick-controls-v17 #speedQuickBtn{grid-column:1!important}
  .reader-shell-v12 .reader-quick-controls-v17 .reader-audio-icon-btn{grid-column:2!important;width:54px!important;min-width:54px!important}
  .reader-shell-v12 .reader-quick-controls-v17 #autoplayQuickBtn{grid-column:3!important}
  .reader-shell-v12 .reader-quick-controls-v17 #textSizeQuickBtn{grid-column:1/-1!important}
  .reader-shell-v12 .reader-control-btn{min-height:48px!important;padding:0 8px!important;gap:5px!important}
  .reader-shell-v12 .reader-control-label{font-size:9px!important}
  .reader-shell-v12 .reader-control-btn strong{font-size:11px!important}
  .reader-navigation-v13{
    grid-template-columns:64px minmax(0,1fr) minmax(82px,1fr)!important;
    gap:8px!important;
  }
  .reader-navigation-v13 .reader-action-btn{min-height:58px!important;border-radius:16px!important;padding:0 12px!important}
  .reader-next-btn .reader-action-arrow{font-size:34px!important}
  .reader-next-reward-inside{font-size:14px!important}
  .method-note{font-size:9px!important;line-height:1.45!important;padding-inline:4px}

  /* Profiles, settings and spiritual pages never force horizontal overflow. */
  .profile-hero,.profile-edit-card,.profile-editor-card,
  .adhkar-hero,.names-hero,.adhkar-progress-card{
    border-radius:20px!important;
  }
  .profile-editor-card{padding:17px!important;gap:16px!important}
  .profile-photo-editor{padding:2px!important}
  .profile-fields-grid{gap:11px!important}
  .profile-field input,.profile-field textarea{font-size:16px!important} /* prevents Android/iOS zoom */
  .profile-account-action-buttons{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .profile-account-action-buttons button{min-width:0!important;padding-inline:10px!important;font-size:11px!important}
  .adhkar-layout{gap:12px!important}
  .dhikr-card{border-radius:20px!important}
  .names-grid{gap:10px!important}

  /* Settings and auth overlays fit keyboard-sized mobile viewports. */
  .settings-drawer{
    width:min(100%,430px)!important;
    max-width:100%!important;
    height:100dvh!important;
    padding-top:var(--app-safe-top)!important;
    padding-bottom:calc(12px + var(--app-safe-bottom))!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
  }
  .oq25-auth-overlay,.utility-modal-overlay{padding:max(10px,var(--app-safe-top)) max(10px,var(--app-safe-right)) max(10px,var(--app-safe-bottom)) max(10px,var(--app-safe-left))!important}
  .oq25-auth-modal,.utility-modal-card{
    max-height:calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom) - 20px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
  }

  /* Bottom nav sits above Android gesture nav and never covers content. */
  .bottom-nav{
    left:max(8px,var(--app-safe-left))!important;
    right:max(8px,var(--app-safe-right))!important;
    bottom:max(8px,var(--app-safe-bottom))!important;
    transform:none!important;
    width:auto!important;
    max-width:none!important;
    padding:5px!important;
    gap:2px!important;
    border-radius:18px!important;
    z-index:40!important;
  }
  body[data-view="readerView"] .bottom-nav{left:max(8px,var(--app-safe-left))!important;right:max(8px,var(--app-safe-right))!important}
  .bottom-nav-btn{
    min-height:55px!important;
    padding:5px 2px!important;
    border-radius:14px!important;
    gap:3px!important;
    font-size:8.5px!important;
  }
  .bottom-nav-icon{font-size:18px!important}

  /* Sync badge remains useful but no longer floats over the app content. */
  .guest-unsaved-bubble,.guest-unsaved-bubble:hover{
    top:auto!important;
    right:max(10px,var(--app-safe-right))!important;
    bottom:calc(74px + var(--app-safe-bottom))!important;
    transform:none!important;
    min-width:0!important;
    width:auto!important;
    max-width:155px!important;
    padding:8px 9px!important;
    grid-template-columns:7px 1fr!important;
    border-radius:13px!important;
    z-index:69!important;
  }
  .guest-unsaved-bubble .guest-unsaved-copy small,
  .guest-unsaved-bubble .guest-unsaved-arrow{display:none!important}
  .guest-unsaved-bubble .guest-unsaved-copy strong{font-size:9px!important;white-space:nowrap}

  .toast{
    bottom:calc(82px + var(--app-safe-bottom))!important;
    max-width:calc(100vw - 24px)!important;
  }
}

@media(max-width:420px){
  .v5-topbar .brand-sub{display:none!important}
  .v5-topbar .brand-title{font-size:21px!important}
  .site-utility-btn{width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important}
  .top-stats .stat-stack span{font-size:7.5px!important}
  .home-welcome h1{font-size:30px!important}
  .welcome-actions,.profile-share-actions{grid-template-columns:1fr!important}
  .continue-tracker-stat{padding-inline:5px!important}
  .continue-tracker-stat strong{font-size:16px!important}
  .reader-view .ayah-card{padding-inline:11px!important}
  .reader-navigation-v13{grid-template-columns:58px minmax(0,1fr) 78px!important}
}

/* Landscape phones: preserve vertical space while keeping all actions reachable. */
@media(max-width:920px) and (orientation:landscape) and (max-height:520px){
  .topbar.v5-topbar{position:relative!important;padding-top:8px!important}
  .v5-topbar .top-stats{grid-column:1!important;grid-row:2!important}
  .bottom-nav{position:fixed!important}
  .dashboard-wrap,.profile-wrap,.adhkar-wrap,.names-wrap,.reader-view .reader-wrap{margin-top:10px!important}
}

@media(hover:none) and (pointer:coarse){
  button:hover,.bottom-nav-btn:hover,.site-utility-btn:hover,.guest-unsaved-bubble:hover{transform:none!important}
  button,select,.bottom-nav-btn,.site-utility-btn{touch-action:manipulation}
}


/* =========================================================
   V53 — MOBILE INTERACTION / PERFORMANCE HOTFIX
   - Native page scrolling stays available whenever no modal is open.
   - The fixed bottom navigation sits below modal overlays instead of above them.
   - The floating sync bubble is removed on phones; sync state remains in Profile.
   - Expensive fixed-surface blur/entry animations are disabled on mobile.
   ========================================================= */
@media(max-width:820px){
  html{
    overflow-x:hidden!important;
    overflow-y:auto!important;
    scroll-behavior:auto!important;
  }
  body{
    min-height:100%!important;
    height:auto!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
    touch-action:auto!important;
  }
  body.drawer-open,body.utility-modal-open{
    overflow:hidden!important;
  }
  .app-shell{
    min-height:100vh!important;
    height:auto!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
  }
  main.view,.view.active-view{
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
    animation:none!important;
  }
  .topbar.v5-topbar{
    position:relative!important;
    top:auto!important;
    z-index:20!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .bottom-nav{
    z-index:40!important;
    pointer-events:auto!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    box-shadow:0 10px 28px rgba(0,0,0,.28)!important;
  }
  .bottom-nav-btn{
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }
  .drawer-overlay{z-index:55!important}
  .settings-drawer{z-index:60!important}

  /* Floating account-sync status was useful on desktop but obstructed small screens. */
  .guest-unsaved-bubble,
  .guest-unsaved-bubble:hover{
    display:none!important;
  }

  /* Mobile rendering stays visually identical without costly compositing effects. */
  .view,
  .habit-day,
  .spiritual-tool-card,
  .name-card,
  .dhikr-card,
  .reader-control-btn,
  .bottom-nav-btn{
    transition-duration:.01ms!important;
  }
}