/* KY mobile app shell: safe on iPhone notches/Dynamic Island and Android cutouts. */
@media (max-width:760px){
  :root{--ky-safe-top:env(safe-area-inset-top,0px);--ky-safe-bottom:env(safe-area-inset-bottom,0px);--ky-dock-content:54px}

  /* Only the installed-app shell needs an extra top safe-area. */
  body.kyStandalone header{
    height:calc(58px + var(--ky-safe-top))!important;
    min-height:calc(58px + var(--ky-safe-top))!important;
    padding:calc(var(--ky-safe-top) + 7px) 12px 8px!important;
    align-items:flex-end!important;
  }

  /* A compact Facebook-style dock: 48 px targets, plus the device home-indicator inset. */
  .bottom{
    left:14px!important;
    right:14px!important;
    bottom:0!important;
    width:auto!important;
    min-width:0!important;
    height:calc(var(--ky-dock-content) + var(--ky-safe-bottom))!important;
    min-height:calc(var(--ky-dock-content) + var(--ky-safe-bottom))!important;
    max-height:calc(var(--ky-dock-content) + var(--ky-safe-bottom))!important;
    padding:2px 5px max(2px,var(--ky-safe-bottom))!important;
    border-radius:22px 22px 0 0!important;
    background:rgba(255,255,255,.78)!important;
    -webkit-backdrop-filter:blur(22px) saturate(150%)!important;
    backdrop-filter:blur(22px) saturate(150%)!important;
    box-shadow:0 -3px 18px rgba(20,45,80,.13),inset 0 1px 0 rgba(255,255,255,.9)!important;
  }
  .bottom button{
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    padding:1px 2px!important;
    border-radius:15px!important;
    font-size:17px!important;
    gap:0!important;
  }
  .bottom button span{font-size:8.5px!important;line-height:1.05!important;font-weight:800!important}

  /* Keep the floating KY controls clear of the shorter dock on every inset size. */
  #kyAiPanel{bottom:calc(var(--ky-dock-content) + var(--ky-safe-bottom) + 4px)!important}
  #kyAiFab{bottom:calc(var(--ky-dock-content) + var(--ky-safe-bottom) + 10px)!important}
  main{padding-bottom:calc(76px + var(--ky-safe-bottom))!important}
}

/* Fallback when the browser reports standalone mode but the body class is
   not attached yet. Kept separate for broad WebView/Safari compatibility. */
@media (max-width:760px) and (display-mode:standalone){
  body:not(.kyStandalone) header{
    height:calc(58px + var(--ky-safe-top))!important;
    min-height:calc(58px + var(--ky-safe-top))!important;
    padding:calc(var(--ky-safe-top) + 7px) 12px 8px!important;
    align-items:flex-end!important;
  }
}