:root{
  --atu-pwa-blue:#0754a6;
  --atu-pwa-ink:#14213d;
  --atu-pwa-muted:#61748a;
  --atu-pwa-border:#d8e5f0;
  --atu-pwa-bg:#fff;
  --atu-pwa-bottom-clearance:0px;
}

.atu-pwa-sheet,.atu-notification-sheet{
  position:fixed;
  z-index:100000;
  left:50%;
  bottom:calc(var(--atu-pwa-bottom-clearance) + max(22px,env(safe-area-inset-bottom)));
  transform:translate(-50%,24px);
  width:min(560px,calc(100% - 28px));
  max-height:calc(100dvh - var(--atu-pwa-bottom-clearance) - 44px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  box-sizing:border-box;
  overflow-y:auto;
  background:rgba(255,255,255,.98);
  color:var(--atu-pwa-ink);
  border:1px solid var(--atu-pwa-border);
  border-radius:24px;
  box-shadow:0 24px 70px rgba(20,54,90,.22);
  padding:18px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
  backdrop-filter:blur(16px);
}
.atu-pwa-sheet.is-visible,.atu-notification-sheet.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
.atu-pwa-icon{width:58px;height:58px;flex:0 0 58px;border-radius:17px;object-fit:cover;border:1px solid #d8e7f6;background:#edf6ff}
.atu-pwa-copy{min-width:0;flex:1}
.atu-pwa-copy h3{font-size:1rem;line-height:1.25;margin:1px 0 5px;color:var(--atu-pwa-ink)}
.atu-pwa-copy p{font-size:.88rem;line-height:1.45;margin:0;color:var(--atu-pwa-muted)}
.atu-pwa-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.atu-pwa-action{appearance:none;border:0;border-radius:12px;padding:10px 13px;font:inherit;font-size:.86rem;font-weight:750;cursor:pointer;min-height:42px}
.atu-pwa-action.primary{background:var(--atu-pwa-blue);color:#fff}
.atu-pwa-action.secondary{background:#eef4fa;color:#344a62}
.atu-pwa-close{appearance:none;border:0;background:transparent;color:#6c7e91;font-size:1.2rem;line-height:1;padding:4px;cursor:pointer}
.atu-pwa-help{font-size:.78rem!important;margin-top:8px!important;color:#6e7e90!important}
.atu-pwa-toast{
  position:fixed;
  z-index:100001;
  left:50%;
  bottom:calc(var(--atu-pwa-bottom-clearance) + max(24px,env(safe-area-inset-bottom)));
  transform:translateX(-50%);
  max-width:min(520px,calc(100% - 30px));
  padding:12px 16px;
  border-radius:14px;
  background:#14213d;
  color:#fff;
  font:600 .86rem/1.4 system-ui,sans-serif;
  box-shadow:0 14px 38px rgba(20,33,61,.25)
}

/* Logged-in mobile dashboards use a fixed 64px bottom navigation bar. Keep
   install/notification prompts above it even before JavaScript measures it. */
@media(max-width:768px){
  body:has(.dashboard-sidebar){--atu-pwa-bottom-clearance:72px}
}

@media(max-width:520px){
  .atu-pwa-sheet,.atu-notification-sheet{
    bottom:calc(var(--atu-pwa-bottom-clearance) + max(12px,env(safe-area-inset-bottom)));
    width:calc(100% - 20px);
    max-height:calc(100dvh - var(--atu-pwa-bottom-clearance) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius:20px;
    padding:15px 14px;
    gap:11px
  }
  .atu-pwa-icon{width:48px;height:48px;flex-basis:48px}
  .atu-pwa-copy h3{font-size:.96rem}
  .atu-pwa-copy p{font-size:.83rem}
  .atu-pwa-actions{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto}
  .atu-pwa-action{width:100%;padding:10px 12px}
  .atu-pwa-close{flex:0 0 auto}
}

@media(max-height:520px){
  .atu-pwa-sheet,.atu-notification-sheet{
    top:max(10px,env(safe-area-inset-top));
    bottom:auto;
    max-height:calc(100dvh - var(--atu-pwa-bottom-clearance) - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    transform:translate(-50%,-18px)
  }
  .atu-pwa-sheet.is-visible,.atu-notification-sheet.is-visible{transform:translate(-50%,0)}
}

@media(display-mode:standalone){.atu-pwa-sheet{display:none!important}}

/* Premium bottom-nav integration: once JS detects the fixed dashboard dock,
   the measured clearance already includes the device safe area. Do not add it
   a second time to install/notification prompts or toast messages. */
@media(max-width:768px){
  .atu-has-mobile-nav .atu-pwa-sheet,
  .atu-has-mobile-nav .atu-notification-sheet{
    bottom:calc(var(--atu-pwa-bottom-clearance) + 8px);
    max-height:calc(100dvh - var(--atu-pwa-bottom-clearance) - 20px - env(safe-area-inset-top));
  }
  .atu-has-mobile-nav .atu-pwa-toast{
    bottom:calc(var(--atu-pwa-bottom-clearance) + 8px);
  }
}


/* Center the notification-permission prompt so it is not affected by the
   premium bottom navigation on iPhone or Android. */
.atu-notification-backdrop{
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(15,23,42,.28);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease,visibility .22s ease;
}
.atu-notification-backdrop.is-visible{opacity:1;visibility:visible}

.atu-notification-sheet{
  z-index:100000;
  top:50%;
  bottom:auto;
  transform:translate(-50%,calc(-50% + 22px));
  width:min(520px,calc(100% - 28px));
  max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
.atu-notification-sheet.is-visible{transform:translate(-50%,-50%)}

@media(max-width:520px){
  .atu-notification-sheet{
    top:50%;
    bottom:auto;
    width:calc(100% - 24px);
    max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}

@media(max-height:520px){
  .atu-notification-sheet{
    top:max(10px,env(safe-area-inset-top));
    bottom:auto;
    max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    transform:translate(-50%,-16px);
  }
  .atu-notification-sheet.is-visible{transform:translate(-50%,0)}
}

@media(max-width:768px){
  .atu-has-mobile-nav .atu-notification-sheet{
    top:50%;
    bottom:auto;
    max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}


/* Strong modal wrapper for the notification-permission prompt.
   This guarantees it stays centered instead of sitting above the bottom nav. */
.atu-notification-modal{
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  background:rgba(15,23,42,.28);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease,visibility .22s ease;
}
.atu-notification-modal.is-visible{opacity:1;visibility:visible}
.atu-notification-modal .atu-notification-sheet{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  transform:translateY(20px) !important;
  width:min(520px,100%) !important;
  max-height:min(560px,calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
  margin:0;
}
.atu-notification-modal.is-visible .atu-notification-sheet{opacity:1 !important;visibility:visible !important;transform:translateY(0) !important}
@media(max-width:520px){
  .atu-notification-modal{padding:12px}
  .atu-notification-modal .atu-notification-sheet{width:100% !important;max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important}
}
@media(max-height:520px){
  .atu-notification-modal{align-items:flex-start}
  .atu-notification-modal .atu-notification-sheet{margin-top:max(8px,env(safe-area-inset-top));max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important}
}


/* v9: notification permission card always sits above the premium mobile dock.
   The dashboard nav uses a near-maximum z-index, so this modal must be higher. */
.atu-notification-modal{
  z-index:2147483646 !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding-top:clamp(92px,16vh,150px) !important;
  padding-right:max(14px,env(safe-area-inset-right)) !important;
  padding-bottom:max(96px,calc(82px + env(safe-area-inset-bottom))) !important;
  padding-left:max(14px,env(safe-area-inset-left)) !important;
}
.atu-notification-modal .atu-notification-sheet{
  z-index:2147483647 !important;
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  margin:0 !important;
  transform:translateY(14px) !important;
  max-height:calc(100dvh - clamp(184px,30vh,250px) - env(safe-area-inset-bottom)) !important;
}
.atu-notification-modal.is-visible .atu-notification-sheet{
  transform:translateY(0) !important;
}
.atu-pwa-toast{z-index:2147483647 !important}

@media(max-width:520px){
  .atu-notification-modal{
    padding-top:clamp(86px,14vh,122px) !important;
    padding-right:12px !important;
    padding-left:12px !important;
    padding-bottom:max(94px,calc(80px + env(safe-area-inset-bottom))) !important;
  }
  .atu-notification-modal .atu-notification-sheet{
    width:100% !important;
    max-width:430px !important;
    max-height:calc(100dvh - 190px - env(safe-area-inset-bottom)) !important;
  }
}

@media(max-height:600px){
  .atu-notification-modal{
    align-items:flex-start !important;
    padding-top:max(24px,env(safe-area-inset-top)) !important;
    padding-bottom:max(84px,calc(74px + env(safe-area-inset-bottom))) !important;
  }
  .atu-notification-modal .atu-notification-sheet{
    margin-top:0 !important;
    max-height:calc(100dvh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
}