/* Polyglot AI 3.8.2 - Mobile/iPhone UI optimization */
:root{
  --mobile-nav-height: 76px;
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-card-radius: 20px;
}

html,body,#root{min-height:100%;max-width:100%;overflow-x:hidden}
body{overscroll-behavior-y:none;-webkit-text-size-adjust:100%;touch-action:manipulation}
button,input,textarea,select{font:inherit}
button,.primary-button,.secondary-button,.ghost-button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

@media (max-width: 980px){
  body{padding-bottom:calc(var(--mobile-nav-height) + var(--mobile-safe-bottom))!important}

  .topbar{
    position:sticky!important;
    top:0!important;
    z-index:900!important;
    min-height:58px!important;
    padding:calc(6px + var(--mobile-safe-top)) 12px 7px!important;
    gap:8px!important;
    backdrop-filter:blur(20px)!important;
    background:rgba(18,29,52,.94)!important;
  }
  .brand-lockup{min-width:0!important;gap:8px!important}
  .brand-lockup strong{font-size:16px!important;white-space:nowrap!important}
  .brand-lockup span{display:none!important}
  .brand-mark{width:34px!important;height:34px!important;min-width:34px!important;border-radius:11px!important}
  .topbar-actions{gap:6px!important;min-width:0!important}
  .language-quick-select,.streak-pill,.api-pill{
    min-height:36px!important;
    padding:7px 9px!important;
    font-size:11px!important;
    border-radius:11px!important;
  }
  .streak-pill span,.api-pill span{display:none!important}

  .app-body{
    display:block!important;
    padding:10px 10px calc(20px + var(--mobile-nav-height) + var(--mobile-safe-bottom))!important;
    min-height:calc(var(--app-vh, 100vh) - 58px)!important;
  }

  /* Turn desktop sidebar into an iPhone bottom navigation bar */
  .sidebar{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    z-index:1000!important;
    width:100%!important;
    height:calc(var(--mobile-nav-height) + var(--mobile-safe-bottom))!important;
    min-height:0!important;
    max-height:none!important;
    padding:6px 7px var(--mobile-safe-bottom)!important;
    margin:0!important;
    border-radius:18px 18px 0 0!important;
    overflow:hidden!important;
    background:rgba(18,28,50,.97)!important;
    border:1px solid rgba(255,255,255,.13)!important;
    border-bottom:0!important;
    box-shadow:0 -12px 32px rgba(0,0,0,.34)!important;
    backdrop-filter:blur(24px)!important;
  }
  .sidebar>div:not(:has(nav)),
  .sidebar>span,
  .sidebar>p,
  .sidebar .sidebar-tip,
  .sidebar .sidebar-footer,
  .sidebar hr,
  .sidebar .eyebrow{display:none!important}
  .sidebar nav{
    display:flex!important;
    flex-direction:row!important;
    align-items:stretch!important;
    gap:5px!important;
    width:100%!important;
    height:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity!important;
    scrollbar-width:none!important;
    padding:0!important;
  }
  .sidebar nav::-webkit-scrollbar{display:none!important}
  .sidebar nav button{
    flex:0 0 68px!important;
    min-width:68px!important;
    width:68px!important;
    min-height:60px!important;
    height:60px!important;
    padding:6px 4px!important;
    border-radius:13px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    gap:4px!important;
    font-size:10px!important;
    line-height:1.1!important;
    text-align:center!important;
    white-space:normal!important;
    scroll-snap-align:center!important;
  }
  .sidebar nav button svg,.sidebar nav button .icon{
    width:20px!important;height:20px!important;min-width:20px!important;font-size:19px!important
  }
  .sidebar nav button.active{
    color:#fff!important;
    background:linear-gradient(150deg,rgba(139,92,246,.42),rgba(56,189,248,.16))!important;
    border-color:rgba(196,181,253,.46)!important;
  }

  main,.main-content,.page-section{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  .page-section,.coach-page,.dashboard-page,.course-page,.skill-page,.vocab-lab-page,
  .smart-review-page,.mastery-page,.real-world-page,.writing-page{
    gap:12px!important;
  }

  /* Readable mobile typography */
  .section-heading h1,.coach-page-head h1,.dashboard-welcome h1{
    font-size:29px!important;line-height:1.15!important;letter-spacing:-.025em!important
  }
  .section-heading h2,.course-overview h2,.topic-copy h2,.skill-method-copy h2,
  .reader-title h2,.v34-head h2,.v32-today-head h2{
    font-size:22px!important;line-height:1.22!important
  }
  .section-heading p,.coach-page-head p,.dashboard-welcome p,.course-overview p,
  .topic-copy p,.skill-method-copy p,.v34-head p,.v32-today-head p,.reader-title p{
    font-size:14px!important;line-height:1.65!important
  }

  /* Cards and sections */
  .glass,.v32-today-focus,.v34-progressive-week,.v33-ladder,.skill-method-map,
  .course-overview,.topic-journey,.skill-unit-card,.unit-card,.reader-paper,.story-list,
  .review-card,.voice-layout article,.settings-panel,.provider-card-v22{
    border-radius:var(--mobile-card-radius)!important;
    padding:15px!important;
  }

  .v32-focus-grid,.v34-grid,.v33-ladder-grid,.skill-unit-grid,.unit-grid,.review-grid,
  .dashboard-grid,.voice-layout,.provider-grid,.v38-writing-grid,.v37-task-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
  }
  .v32-focus-card,.v34-day,.v33-ladder-item,.skill-unit-card,.unit-card{
    min-height:0!important;padding:14px!important
  }
  .v34-head,.v32-today-head,.v341-card-head,.course-overview-head,
  .skill-method-head,.reader-title{
    display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:8px!important
  }
  .v34-status{align-items:flex-start!important;min-width:0!important}
  .v34-route{width:100%!important;overflow-x:auto!important;padding-bottom:3px!important}

  /* Lesson lists as clear touch rows */
  .skill-lesson-list,.lesson-list,.daily-task-list,.dashboard-tools{gap:8px!important}
  .skill-lesson-list>button,.lesson-list button,.daily-task-list button,.dashboard-tools button,
  .vocab-pack-actions button,.vocab-quick-practice button,.story-list button{
    width:100%!important;
    min-height:54px!important;
    padding:11px 12px!important;
    border-radius:15px!important;
    text-align:left!important;
  }
  .skill-lesson-list>button b,.lesson-list button b,.daily-task-list button b{
    font-size:14px!important;line-height:1.4!important
  }
  .skill-lesson-list>button small,.lesson-list button small,.daily-task-list button small{
    font-size:12px!important;line-height:1.5!important
  }

  /* Tabs scroll horizontally instead of squeezing */
  .v32-smart-tabs,.v341-roadmap-tabs,.v35-tabs,.v36-tabs,.v37-tabs,.v38-tabs,
  .tab-row,.lesson-tabs{
    display:flex!important;
    width:100%!important;
    gap:7px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    scroll-snap-type:x proximity!important;
    padding-bottom:4px!important;
  }
  .v32-smart-tabs::-webkit-scrollbar,.v341-roadmap-tabs::-webkit-scrollbar,
  .tab-row::-webkit-scrollbar,.lesson-tabs::-webkit-scrollbar{display:none!important}
  .v32-smart-tab,.v341-roadmap-tabs button,.tab-row button,.lesson-tabs button{
    flex:0 0 auto!important;min-width:128px!important;scroll-snap-align:start!important
  }

  /* Forms: stop iOS zoom and increase touch area */
  input,textarea,select{
    min-height:46px!important;
    font-size:16px!important;
    border-radius:13px!important;
  }
  textarea{min-height:110px!important;padding:12px!important}
  .primary-button,.secondary-button,.ghost-button,
  button.primary,button.secondary{
    min-height:46px!important;
    padding:11px 14px!important;
    font-size:14px!important;
    border-radius:14px!important;
  }

  /* Word-writing room */
  canvas,.writing-canvas,.v38-canvas{
    width:100%!important;
    max-width:100%!important;
    height:min(72vw,360px)!important;
    min-height:260px!important;
    touch-action:none!important;
    border-radius:18px!important;
  }
  .v38-writing-workspace,.writing-workspace,.canvas-panel{
    display:flex!important;flex-direction:column!important;gap:10px!important
  }
  .v38-toolbar,.writing-toolbar,.canvas-toolbar{
    display:flex!important;flex-wrap:wrap!important;gap:7px!important
  }
  .v38-toolbar button,.writing-toolbar button,.canvas-toolbar button{
    flex:1 1 calc(50% - 7px)!important;min-height:44px!important
  }

  /* Tables become scrollable */
  .table-wrap,table{max-width:100%!important}
  .table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  table{min-width:620px!important}

  /* Modals fit iPhone viewport */
  [role="dialog"],.modal,.settings-modal,.v34-result-modal,.v34-history-modal{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    max-height:calc(var(--app-vh,100vh) - 24px - var(--mobile-safe-top) - var(--mobile-safe-bottom))!important;
    overflow:auto!important;
    border-radius:22px!important;
    padding:16px!important;
  }

  /* Keep floating actions above bottom navigation */
  .floating-coach,.fab,.ai-fab,.pwa-update-toast{
    right:10px!important;
    bottom:calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 10px)!important;
    max-width:calc(100vw - 20px)!important;
  }

  /* Hide decorative copy when space is tight */
  .dashboard-cycle-panel .decorative-copy,.desktop-only{display:none!important}
}

@media (max-width: 390px){
  :root{--mobile-nav-height:72px}
  .sidebar nav button{flex-basis:62px!important;min-width:62px!important;width:62px!important;font-size:9px!important}
  .topbar{padding-left:9px!important;padding-right:9px!important}
  .language-quick-select{max-width:94px!important}
  .section-heading h1,.coach-page-head h1,.dashboard-welcome h1{font-size:26px!important}
}

@media (max-width: 980px) and (orientation: landscape){
  :root{--mobile-nav-height:64px}
  .sidebar nav button{height:50px!important;min-height:50px!important;flex-direction:row!important;width:auto!important;min-width:92px!important;flex-basis:auto!important;font-size:10px!important}
  canvas,.writing-canvas,.v38-canvas{height:55vh!important;min-height:220px!important}
}