/* Polyglot AI 5.4.1 — compact mobile layout + notch/Dynamic Island safe areas */
:root{
  --v541-safe-top:env(safe-area-inset-top,0px);
  --v541-safe-right:env(safe-area-inset-right,0px);
  --v541-safe-bottom:env(safe-area-inset-bottom,0px);
  --v541-safe-left:env(safe-area-inset-left,0px);
  --v541-mobile-nav-height:60px;
  --v541-mobile-gutter:8px;
  --v541-viewport-height:100dvh;
}

@media(max-width:980px){
  html,body,#root{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  html{
    min-height:100%;
    background:#0c1528;
  }
  body{
    min-height:var(--v541-viewport-height)!important;
    font-size:14px!important;
    padding-top:0!important;
    padding-right:var(--v541-safe-right)!important;
    padding-bottom:calc(var(--v541-mobile-nav-height) + var(--v541-safe-bottom) + 13px)!important;
    padding-left:var(--v541-safe-left)!important;
  }

  /* Keep all top controls below the notch / Dynamic Island. */
  .topbar{
    top:0!important;
    box-sizing:border-box!important;
    height:auto!important;
    min-height:calc(48px + var(--v541-safe-top))!important;
    padding-top:calc(var(--v541-safe-top) + 4px)!important;
    padding-right:calc(8px + var(--v541-safe-right))!important;
    padding-bottom:4px!important;
    padding-left:calc(8px + var(--v541-safe-left))!important;
    align-items:flex-end!important;
  }
  html.v541-ios.v541-standalone .topbar{
    padding-top:max(var(--v541-safe-top),12px)!important;
    min-height:calc(48px + max(var(--v541-safe-top),12px))!important;
  }
  .brand-mark{width:30px!important;height:30px!important;min-width:30px!important;border-radius:10px!important}
  .brand-lockup{gap:6px!important;min-width:0!important}
  .brand-lockup strong{font-size:14px!important;line-height:1.05!important}
  .brand-lockup span{display:none!important}
  .topbar-actions{gap:4px!important;min-width:0!important;margin-left:auto!important}
  .language-quick-select,.api-pill,.settings-button,.v53-search-trigger{
    height:32px!important;min-height:32px!important;border-radius:10px!important;padding:4px 7px!important
  }
  .language-quick-select{max-width:104px!important;font-size:10px!important}
  .v53-search-trigger{width:32px!important;min-width:32px!important;padding:0!important;justify-content:center!important}

  /* Slightly narrower content, especially in landscape where left/right safe areas matter. */
  .app-body{
    box-sizing:border-box!important;
    width:100%!important;
    padding-top:8px!important;
    padding-right:calc(var(--v541-mobile-gutter) + var(--v541-safe-right))!important;
    padding-bottom:calc(var(--v541-mobile-nav-height) + var(--v541-safe-bottom) + 26px)!important;
    padding-left:calc(var(--v541-mobile-gutter) + var(--v541-safe-left))!important;
  }
  .app-body>main,.page-section{width:100%!important;max-width:100%!important;min-width:0!important}
  .page-section{padding-bottom:12px!important}

  /* Compact dashboard without reducing essential touch target sizes. */
  .v54-dashboard{gap:9px!important;margin-bottom:10px!important}
  .v54-dashboard-head{padding:0 1px 2px!important}
  .v54-dashboard-head small{font-size:8px!important}
  .v54-dashboard-head h1{font-size:23px!important;line-height:1.16!important;margin:4px 0!important}
  .v54-dashboard-head p{font-size:10px!important;line-height:1.5!important;-webkit-line-clamp:2!important}
  .v54-cycle{gap:5px!important;padding:7px!important;border-radius:14px!important}
  .v54-cycle button{min-height:38px!important;padding:4px 6px!important;gap:5px!important}
  .v54-cycle button span{width:24px!important;height:24px!important;border-radius:8px!important}
  .v54-cycle button b{font-size:9px!important}
  .v54-cycle>i{width:12px!important}
  .v54-next-card{grid-template-columns:40px minmax(0,1fr)!important;padding:11px!important;gap:9px!important;border-radius:17px!important}
  .v54-next-icon{width:39px!important;height:39px!important;border-radius:12px!important;font-size:18px!important}
  .v54-next-copy small{font-size:8px!important}
  .v54-next-copy h2{font-size:17px!important;margin:3px 0!important}
  .v54-next-copy p{font-size:9.5px!important;line-height:1.45!important}
  .v54-next-meta{gap:5px!important;margin-top:7px!important}
  .v54-next-meta span{font-size:8px!important;padding:4px 6px!important}
  .v54-primary-action{grid-column:1/-1!important;width:100%!important;height:42px!important;min-height:42px!important;border-radius:12px!important}
  .v54-dashboard-grid{gap:7px!important}
  .v54-dashboard-card{min-height:64px!important;padding:9px!important;border-radius:14px!important;grid-template-columns:34px 1fr 15px!important;gap:8px!important}
  .v54-dashboard-card>span{width:33px!important;height:33px!important;border-radius:10px!important}
  .v54-dashboard-card small{font-size:7.5px!important}.v54-dashboard-card b{font-size:11px!important;margin-top:2px!important}
  .v54-details-row button{min-height:38px!important;width:100%!important}

  /* Mobile bottom navigation stays inside the home-indicator safe area. */
  .v53-mobile-nav{display:none!important}
  .v54-mobile-nav{
    box-sizing:border-box!important;
    left:calc(6px + var(--v541-safe-left))!important;
    right:calc(6px + var(--v541-safe-right))!important;
    bottom:calc(6px + var(--v541-safe-bottom))!important;
    height:var(--v541-mobile-nav-height)!important;
    padding:4px!important;
    gap:2px!important;
    border-radius:18px!important;
  }
  .v54-mobile-nav>button{
    min-height:48px!important;
    border-radius:13px!important;
    padding:2px 1px!important;
    gap:2px!important;
  }
  .v54-mobile-nav>button .v54-nav-icon{width:23px!important;height:22px!important;font-size:16px!important}
  .v54-mobile-nav>button b{font-size:7.5px!important;line-height:1!important}

  /* Every full-screen layer reserves the notch and curved-screen margins. */
  .v54-overlay,
  .v53-hub-overlay,
  .v53-search-overlay,
  .v53-onboard{
    box-sizing:border-box!important;
    padding-top:calc(var(--v541-safe-top) + 8px)!important;
    padding-right:calc(var(--v541-safe-right) + 7px)!important;
    padding-bottom:calc(var(--v541-safe-bottom) + 7px)!important;
    padding-left:calc(var(--v541-safe-left) + 7px)!important;
  }
  .v54-overlay{place-items:end center!important}
  .v54-hub{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(var(--v541-viewport-height) - var(--v541-safe-top) - var(--v541-safe-bottom) - 18px)!important;
    padding:11px 9px calc(12px + var(--v541-safe-bottom))!important;
    border-radius:20px!important;
  }
  .v54-hub-head{grid-template-columns:36px minmax(0,1fr) 38px!important;gap:8px!important;padding:2px 2px 10px!important}
  .v54-stage-icon{width:35px!important;height:35px!important;border-radius:11px!important;font-size:17px!important}
  .v54-hub-head h2{font-size:18px!important;margin:2px 0!important}
  .v54-hub-head p{font-size:9.5px!important;line-height:1.45!important}
  .v54-close,.v53-close{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;touch-action:manipulation!important}
  .v54-principle{margin-top:8px!important;padding:7px 9px!important;font-size:9px!important}
  .v54-hub-grid{gap:6px!important;padding-top:8px!important}
  .v54-hub-item{min-height:66px!important;padding:8px!important;border-radius:13px!important;grid-template-columns:34px 1fr 14px!important;gap:8px!important}
  .v54-hub-item>span{width:33px!important;height:33px!important;border-radius:10px!important;font-size:16px!important}
  .v54-hub-item b{font-size:11px!important;margin:2px 0!important}
  .v54-hub-item small{font-size:7.5px!important}

  .v53-search-dialog{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(var(--v541-viewport-height) - var(--v541-safe-top) - var(--v541-safe-bottom) - 18px)!important;
    border-radius:18px!important;
  }
  .v53-search-head{height:52px!important;grid-template-columns:20px 1fr 38px!important;padding:0 8px!important}
  .v53-search-results{max-height:calc(var(--v541-viewport-height) - var(--v541-safe-top) - var(--v541-safe-bottom) - 72px)!important}

  /* Focus lesson header/action areas also avoid both notch and home indicator. */
  body.v53-lesson-focus .app-body{
    padding-top:calc(var(--v541-safe-top) + 7px)!important;
    padding-right:calc(var(--v541-safe-right) + 8px)!important;
    padding-bottom:calc(var(--v541-safe-bottom) + 18px)!important;
    padding-left:calc(var(--v541-safe-left) + 8px)!important;
  }
  body.v53-lesson-focus .lesson-topbar{top:var(--v541-safe-top)!important;padding-top:5px!important}
  body.v53-lesson-focus .lesson-stage{min-height:430px!important;padding:15px!important;border-radius:17px!important}
  body.v53-lesson-focus .lesson-actions{bottom:var(--v541-safe-bottom)!important;padding-bottom:calc(7px + var(--v541-safe-bottom))!important}

  /* Keep all floating helpers above the compact navigation. */
  .floating-coach,.fab,.ai-fab,.pwa-update-toast{
    bottom:calc(var(--v541-mobile-nav-height) + var(--v541-safe-bottom) + 15px)!important;
  }
}

@media(max-width:380px){
  :root{--v541-mobile-nav-height:57px;--v541-mobile-gutter:6px}
  .v54-dashboard-head h1{font-size:21px!important}
  .v54-mobile-nav>button{min-height:45px!important}
  .v54-mobile-nav>button b{font-size:7px!important}
  .v54-cycle button b{font-size:8px!important}
}

@media(max-width:980px) and (orientation:landscape){
  .topbar{
    padding-left:calc(10px + var(--v541-safe-left))!important;
    padding-right:calc(10px + var(--v541-safe-right))!important;
  }
  .app-body{
    padding-left:calc(12px + var(--v541-safe-left))!important;
    padding-right:calc(12px + var(--v541-safe-right))!important;
  }
  .v54-mobile-nav{
    left:calc(10px + var(--v541-safe-left))!important;
    right:calc(10px + var(--v541-safe-right))!important;
  }
}