/* Polyglot AI 5.0.3 - Mobile-first redesign */
:root{
  --v503-safe-top: env(safe-area-inset-top, 0px);
  --v503-safe-bottom: env(safe-area-inset-bottom, 0px);
  --v503-dock-h: 68px;
  --v503-bg: #0e1830;
  --v503-panel: rgba(26,40,72,.96);
  --v503-border: rgba(255,255,255,.13);
}

@media (max-width: 980px){
  html,body,#root{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  body{
    background:linear-gradient(180deg,#152442 0%,#0e1830 58%,#0b1427 100%)!important;
    padding:0 0 calc(var(--v503-dock-h) + var(--v503-safe-bottom) + 12px)!important;
    overscroll-behavior-y:auto!important;
  }
  body.v503-menu-open{overflow:hidden!important}

  /* Disable old mobile navigation layers */
  .v502-mobile-dock,.v502-menu-backdrop,.v502-menu-sheet{display:none!important}
  .sidebar{display:none!important}

  .app-shell{min-height:100dvh!important;height:auto!important;overflow:visible!important}
  .topbar{
    position:sticky!important;top:0!important;z-index:1400!important;
    min-height:calc(54px + var(--v503-safe-top))!important;
    padding:calc(6px + var(--v503-safe-top)) 10px 6px!important;
    background:rgba(13,23,43,.96)!important;
    border-bottom:1px solid rgba(255,255,255,.09)!important;
    backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;
  }
  .brand-lockup{gap:7px!important;min-width:0!important}
  .brand-mark{width:32px!important;height:32px!important;min-width:32px!important;border-radius:10px!important}
  .brand-lockup strong{font-size:15px!important;line-height:1!important}
  .brand-lockup span{display:none!important}
  .topbar-actions{gap:5px!important;margin-left:auto!important;min-width:0!important}
  .language-quick-select,.streak-pill,.api-pill,.settings-button{
    min-height:34px!important;height:34px!important;padding:6px 8px!important;border-radius:11px!important;font-size:11px!important
  }
  .streak-pill{display:none!important}
  .language-quick-select{max-width:112px!important}
  .language-quick-select span:not(:first-child){max-width:70px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .api-pill span,.settings-button span{display:none!important}

  .app-body{
    display:block!important;width:100%!important;min-height:auto!important;
    padding:10px 10px calc(var(--v503-dock-h) + var(--v503-safe-bottom) + 28px)!important;
    overflow:visible!important
  }
  main,.main-content,.page-section{width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;overflow:visible!important}
  .page-section,.coach-page,.dashboard-page,.course-page,.skill-page,.vocab-lab-page,
  .smart-review-page,.mastery-page,.real-world-page,.writing-page,.v50-page{
    display:flex!important;flex-direction:column!important;gap:10px!important
  }

  /* Compact mobile headings */
  .section-heading,.coach-page-head,.dashboard-welcome{padding:2px 2px 4px!important}
  .section-heading h1,.coach-page-head h1,.dashboard-welcome h1,
  .v50-hero h1,.v50-head h1{font-size:27px!important;line-height:1.14!important;letter-spacing:-.03em!important;margin:4px 0 6px!important}
  .section-heading h2,.course-overview h2,.topic-copy h2,.skill-method-copy h2,
  .reader-title h2,.v34-head h2,.v32-today-head h2,.v50-card h2{font-size:20px!important;line-height:1.25!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,.v50-card p{
    font-size:13px!important;line-height:1.6!important;color:#d6e1f7!important;margin-top:0!important
  }
  .eyebrow{font-size:9px!important;letter-spacing:.12em!important}

  /* One-card-per-row structure */
  .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,.v50-card,.v50-panel,.v50-hero{
    width:100%!important;border-radius:18px!important;padding:13px!important;margin:0!important;
    background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.035))!important;
    border:1px solid rgba(255,255,255,.11)!important;
    box-shadow:0 10px 28px rgba(0,0,0,.18)!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,.v50-grid,.v50-skills-grid,.v50-memory-grid{
    display:grid!important;grid-template-columns:1fr!important;gap:9px!important
  }
  .v32-focus-card,.v34-day,.v33-ladder-item,.skill-unit-card,.unit-card,.v50-task-card,.v50-skill-card{
    min-height:0!important;padding:13px!important;border-radius:16px!important
  }

  /* Convert long learning cycles to horizontally swipeable cards */
  .learning-cycle,.cycle-track,.v29-cycle-track,.v50-daily-plan,.v50-plan-track{
    display:flex!important;overflow-x:auto!important;overflow-y:hidden!important;gap:9px!important;
    scroll-snap-type:x mandatory!important;scrollbar-width:none!important;padding-bottom:4px!important
  }
  .learning-cycle::-webkit-scrollbar,.cycle-track::-webkit-scrollbar,.v29-cycle-track::-webkit-scrollbar,
  .v50-daily-plan::-webkit-scrollbar,.v50-plan-track::-webkit-scrollbar{display:none!important}
  .learning-cycle>* ,.cycle-track>* ,.v29-cycle-track>* ,.v50-daily-plan>* ,.v50-plan-track>*{
    flex:0 0 min(78vw,280px)!important;scroll-snap-align:start!important
  }

  /* Cards: emphasize the action, reduce filler */
  .v32-focus-card,.v34-day,.skill-unit-card,.unit-card,.v50-task-card{display:flex!important;flex-direction:column!important;gap:7px!important}
  .v32-focus-card b,.v34-day>b,.skill-unit-title h2,.unit-card h3,.v50-task-card b{font-size:15px!important;line-height:1.35!important}
  .v32-focus-card p,.v34-day p,.skill-unit-card p,.unit-card p,.v50-task-card p{font-size:12px!important;line-height:1.55!important}
  .v34-actions,.skill-pack-actions,.vocab-pack-actions,.lesson-actions{margin-top:auto!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}

  /* Touch rows */
  .skill-lesson-list,.lesson-list,.daily-task-list,.dashboard-tools{gap:7px!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:52px!important;padding:10px 11px!important;border-radius:14px!important;
    text-align:left!important
  }
  .skill-lesson-list>button b,.lesson-list button b,.daily-task-list button b{font-size:13px!important}
  .skill-lesson-list>button small,.lesson-list button small,.daily-task-list button small{font-size:11px!important;line-height:1.45!important}

  /* Tabs */
  .v32-smart-tabs,.v341-roadmap-tabs,.v35-tabs,.v36-tabs,.v37-tabs,.v38-tabs,.v50-tabs,.tab-row,.lesson-tabs{
    display:flex!important;gap:7px!important;overflow-x:auto!important;overflow-y:hidden!important;
    scrollbar-width:none!important;padding:1px 0 4px!important;scroll-snap-type:x proximity!important
  }
  .v32-smart-tabs::-webkit-scrollbar,.v341-roadmap-tabs::-webkit-scrollbar,.v50-tabs::-webkit-scrollbar,
  .tab-row::-webkit-scrollbar,.lesson-tabs::-webkit-scrollbar{display:none!important}
  .v32-smart-tab,.v341-roadmap-tabs button,.v50-tabs button,.tab-row button,.lesson-tabs button{
    flex:0 0 auto!important;min-width:116px!important;min-height:42px!important;padding:9px 11px!important;border-radius:13px!important
  }

  /* Buttons and forms */
  button,.primary-button,.secondary-button,.ghost-button,button.primary,button.secondary{
    min-height:44px!important;font-size:13px!important;border-radius:13px!important;-webkit-tap-highlight-color:transparent!important
  }
  input,textarea,select{font-size:16px!important;min-height:44px!important;border-radius:12px!important}
  textarea{min-height:100px!important}

  /* Writing room */
  canvas,.writing-canvas,.v38-canvas{width:100%!important;max-width:100%!important;height:min(76vw,330px)!important;min-height:250px!important;touch-action:none!important}
  .v38-writing-workspace,.writing-workspace,.canvas-panel{display:flex!important;flex-direction:column!important;gap:9px!important}
  .v38-toolbar,.writing-toolbar,.canvas-toolbar{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:7px!important}

  /* Floating items */
  .floating-coach,.fab,.ai-fab{right:10px!important;bottom:calc(var(--v503-dock-h) + var(--v503-safe-bottom) + 14px)!important;z-index:1700!important}
  .pwa-update-toast{left:10px!important;right:10px!important;bottom:calc(var(--v503-dock-h) + var(--v503-safe-bottom) + 14px)!important;max-width:none!important}

  /* New stable dock */
  .v503-mobile-dock{
    position:fixed!important;left:8px!important;right:8px!important;bottom:calc(7px + var(--v503-safe-bottom))!important;
    z-index:3000!important;height:var(--v503-dock-h)!important;display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:4px!important;padding:6px!important;
    border:1px solid rgba(255,255,255,.15)!important;border-radius:21px!important;
    background:rgba(12,22,42,.98)!important;box-shadow:0 18px 55px rgba(0,0,0,.52)!important;
    backdrop-filter:blur(22px)!important;-webkit-backdrop-filter:blur(22px)!important
  }
  .v503-dock-btn{
    min-width:0!important;border:0!important;background:transparent!important;color:#c9d8f2!important;
    border-radius:15px!important;display:flex!important;flex-direction:column!important;align-items:center!important;
    justify-content:center!important;gap:3px!important;padding:4px 2px!important;font-size:9px!important;font-weight:800!important;
    line-height:1.05!important
  }
  .v503-dock-btn .v503-icon{font-size:19px!important;line-height:1!important;width:25px!important;height:25px!important;display:grid!important;place-items:center!important}
  .v503-dock-btn.active{color:#fff!important;background:linear-gradient(145deg,rgba(139,92,246,.42),rgba(56,189,248,.14))!important;box-shadow:inset 0 0 0 1px rgba(196,181,253,.32)!important}

  /* Full-height, readable menu */
  .v503-menu-backdrop{position:fixed!important;inset:0!important;z-index:3040!important;background:rgba(2,6,18,.72)!important;opacity:0!important;pointer-events:none!important;transition:opacity .18s ease!important}
  .v503-menu-panel{
    position:fixed!important;left:8px!important;right:8px!important;top:calc(10px + var(--v503-safe-top))!important;
    bottom:calc(var(--v503-dock-h) + var(--v503-safe-bottom) + 14px)!important;z-index:3050!important;
    display:flex!important;flex-direction:column!important;overflow:hidden!important;border-radius:24px!important;
    border:1px solid rgba(255,255,255,.15)!important;background:linear-gradient(165deg,#1c2b4c 0%,#101a30 85%)!important;
    box-shadow:0 30px 90px rgba(0,0,0,.68)!important;transform:translateY(18px) scale(.985)!important;
    opacity:0!important;pointer-events:none!important;transition:transform .2s ease,opacity .18s ease!important
  }
  body.v503-menu-open .v503-menu-backdrop{opacity:1!important;pointer-events:auto!important}
  body.v503-menu-open .v503-menu-panel{transform:translateY(0) scale(1)!important;opacity:1!important;pointer-events:auto!important}
  .v503-menu-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:14px 14px 11px!important;border-bottom:1px solid rgba(255,255,255,.09)!important;flex:none!important}
  .v503-menu-head h2{margin:0!important;font-size:21px!important;color:#fff!important}
  .v503-menu-head p{margin:3px 0 0!important;font-size:11px!important;color:#aebfdd!important}
  .v503-menu-close{width:40px!important;height:40px!important;min-height:40px!important;padding:0!important;border:1px solid rgba(255,255,255,.13)!important;background:rgba(255,255,255,.06)!important;color:#fff!important;font-size:23px!important;border-radius:13px!important}
  .v503-menu-scroll{overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;padding:12px 12px calc(14px + var(--v503-safe-bottom))!important}
  .v503-menu-section{margin-bottom:15px!important}.v503-menu-section:last-child{margin-bottom:0!important}
  .v503-menu-section h3{margin:0 3px 7px!important;color:#94a9cf!important;font-size:9px!important;letter-spacing:.12em!important;text-transform:uppercase!important}
  .v503-menu-list{display:flex!important;flex-direction:column!important;gap:7px!important}
  .v503-menu-item{
    width:100%!important;min-height:54px!important;padding:9px 11px!important;border:1px solid rgba(255,255,255,.10)!important;
    background:rgba(255,255,255,.045)!important;color:#fff!important;border-radius:15px!important;
    display:grid!important;grid-template-columns:38px minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important;text-align:left!important
  }
  .v503-menu-item .v503-item-icon{width:38px!important;height:38px!important;border-radius:12px!important;display:grid!important;place-items:center!important;font-size:19px!important;background:linear-gradient(145deg,rgba(139,92,246,.25),rgba(56,189,248,.10))!important}
  .v503-menu-item b{display:block!important;font-size:13px!important;line-height:1.25!important}
  .v503-menu-item small{display:block!important;margin-top:2px!important;font-size:10px!important;color:#aebfdd!important;line-height:1.35!important}
  .v503-menu-item .v503-arrow{font-size:17px!important;color:#8498bf!important}
  .v503-menu-item.active{border-color:rgba(196,181,253,.42)!important;background:linear-gradient(145deg,rgba(139,92,246,.27),rgba(56,189,248,.08))!important}

  /* Ensure dialogs remain above content but below mobile menu */
  [role="dialog"],.modal,.settings-modal,.v34-result-modal,.v34-history-modal{max-width:calc(100vw - 18px)!important;width:calc(100vw - 18px)!important;max-height:calc(100dvh - var(--v503-safe-top) - var(--v503-safe-bottom) - 18px)!important;overflow:auto!important}
}

@media (max-width:390px){
  :root{--v503-dock-h:64px}
  .v503-mobile-dock{left:5px!important;right:5px!important;bottom:calc(5px + var(--v503-safe-bottom))!important;padding:5px!important;gap:2px!important}
  .v503-dock-btn{font-size:8.5px!important}.v503-dock-btn .v503-icon{font-size:17px!important}
  .section-heading h1,.coach-page-head h1,.dashboard-welcome h1,.v50-hero h1{font-size:24px!important}
  .v503-menu-panel{left:5px!important;right:5px!important;top:calc(6px + var(--v503-safe-top))!important}
}