/* Phone-only workspace layout. Desktop sizing and persisted sidebar stay intact. */
#mobileNavigationToggle, #mobileNavigationBackdrop, #mobileNavigationClose { display: none; }
@media (max-width: 767px) {
  html:has(body.mobile-navigation-enabled) { height: auto !important; min-height: 100% !important; overflow-y: auto !important; }
  html:has(body.mobile-navigation-open), body.mobile-navigation-open { overflow: hidden !important; }
  html:not(.react-student-embedded) body.mobile-navigation-enabled {
    --mobile-toolbar-height: 162px;
    height: auto !important; min-height: 100dvh !important; max-height: none !important; overflow: visible !important;
  }
  html:not(.react-student-embedded) body.mobile-navigation-enabled .shell.shell {
    display: block !important;
    position: relative !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html:not(.react-student-embedded) body.mobile-navigation-enabled .shell > .main.main {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 12px 28px !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html:not(.react-student-embedded) body.mobile-navigation-enabled :is(#mobileNavigationDrawer, #workspaceSidebar) {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 15001 !important;
    width: min(304px, calc(100vw - 40px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 40px) !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow: auto !important;
    box-sizing: border-box !important;
    transform: translateX(-105%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
  }
  html:not(.react-student-embedded) body.mobile-navigation-open :is(#mobileNavigationDrawer, #workspaceSidebar) {
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  :is(#mobileNavigationDrawer, #workspaceSidebar) :is(.brand, .brand-head, .menu, .sidebar-bottom-zone, .sidebar-account-card, .sidebar-account-button) {
    width: 100% !important; min-width: 0 !important; max-width: none !important;
    transform: none !important; visibility: visible !important; opacity: 1 !important;
  }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .brand { height: 92px !important; min-height: 92px !important; max-height: none !important; padding: 0 36px 0 0 !important; margin: 0 !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .brand-head { display: flex !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; flex-direction: column !important; align-items: flex-start !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .brand-icon-logo { display: none !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .brand-main-logo { display: grid !important; opacity: 1 !important; visibility: visible !important; width: 156px !important; min-width: 156px !important; height: 46px !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .brand-subtitle-text { display: block !important; width: auto !important; height: auto !important; opacity: 1 !important; font-size: 11px !important; text-align: left !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) #sidebarToggle { display: none !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .menu { flex: 1 0 auto !important; display: flex !important; flex-direction: column !important; gap: 4px !important; overflow: visible !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .menu-item { width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 44px !important; height: auto !important; max-height: none !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; padding: 10px 12px !important; border-radius: 10px !important; font-size: 15px !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) :is(.menu-item-label, .sidebar-account-copy) { display: block !important; opacity: 1 !important; visibility: visible !important; width: auto !important; font-size: 15px !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .workspace-nav-chevron { display: block !important; margin-left: auto !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .workspace-nav-subitem { padding-left: 32px !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) .menu-item { display: flex !important; flex-direction: row !important; grid-template-columns: none !important; justify-content: flex-start !important; text-indent: 0 !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) .menu-item-label { height: auto !important; min-height: 22px !important; max-height: none !important; line-height: 1.5 !important; transform: none !important; position: static !important; overflow: visible !important; white-space: normal !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) .menu-item-icon { position: static !important; flex: 0 0 22px !important; width: 22px !important; height: 22px !important; margin: 0 !important; transform: none !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) .sidebar-account-button { display: flex !important; flex-direction: row !important; justify-content: flex-start !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) .sidebar-account-copy { width: auto !important; max-width: none !important; min-width: 0 !important; flex: 1 !important; text-align: left !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) .brand-head { align-items: flex-start !important; justify-content: flex-start !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) :is(.brand, .brand-head, .menu, .workspace-nav-group, .workspace-nav-children, .sidebar-bottom-zone, .sidebar-account-card, .sidebar-account-button) { width: 100% !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) .menu-item { width: 100% !important; min-width: 0 !important; max-width: none !important; padding: 10px 12px !important; box-sizing: border-box !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) .workspace-nav-subitem { padding-left: 32px !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) .menu-item-label { width: auto !important; min-width: 0 !important; max-width: none !important; flex: 1 1 auto !important; margin: 0 !important; text-align: left !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) .sidebar-account-card { padding: 0 !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) .sidebar-account-copy { display: block !important; width: auto !important; min-width: 80px !important; max-width: none !important; flex: 1 1 auto !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar):is(#mobileNavigationDrawer, #workspaceSidebar) .sidebar-account-copy strong { width: auto !important; max-width: none !important; display: block !important; text-indent: 0 !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .workspace-nav-children { display: none !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .workspace-nav-group.is-open > .workspace-nav-children { display: grid !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .sidebar-bottom-zone { margin-top: auto !important; padding: 8px 0 0 !important; border: 0 !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) .sidebar-account-button { display: flex !important; gap: 10px !important; padding: 10px !important; min-height: 58px !important; height: auto !important; }
  :is(#mobileNavigationDrawer, #workspaceSidebar) #sidebarAccountAvatar { width: 36px !important; min-width: 36px !important; max-width: 36px !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; flex: 0 0 36px !important; padding: 0 !important; aspect-ratio: 1 !important; box-sizing: border-box !important; border-radius: 50% !important; overflow: hidden !important; }
  #mobileNavigationToggle, #mobileNavigationClose {
    display: grid !important; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--border-color, #dce4ef); border-radius: 12px;
    background: var(--surface, #fff); color: var(--text-primary, #25364f); font-size: 22px; cursor: pointer;
  }
  #mobileNavigationToggle { position: fixed; top: 8px; left: 12px; z-index: 1001; }
  #mobileNavigationClose { position: absolute; top: 12px; right: 12px; z-index: 100; box-shadow: none !important; background: #fff !important; color: #334155 !important; }
  #mobileNavigationClose::before, #mobileNavigationClose::after { content: none !important; }
  #mobileNavigationBackdrop:not([hidden]) { display: block !important; position: fixed; inset: 0; z-index: 15000; border: 0; background: rgb(15 23 42 / 40%); }
  #mobileNavigationToggle:focus-visible, #mobileNavigationClose:focus-visible { outline: 3px solid #5076f5; outline-offset: 2px; }
  html:not(.react-student-embedded) body.mobile-navigation-enabled .main.main > .topbar.topbar {
    position: sticky !important; top: 0 !important; left: auto !important; right: auto !important;
    width: calc(100% + 24px) !important; min-width: 0 !important; height: auto !important; min-height: 60px !important; max-height: none !important;
    margin: 0 -12px 16px !important; padding: 8px 12px 8px 64px !important;
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important;
    border-radius: 0 !important; box-sizing: border-box !important; z-index: 1000 !important;
  }
  body.mobile-navigation-enabled .topbar .topbar-left { min-width: 0 !important; }
  :is(#hw-v189-mobile, html):not(.react-student-embedded) body.mobile-navigation-enabled .main.main > .topbar :is(.topbar-left, .topbar-title-stack, #pageTitle) { width: auto !important; min-width: 0 !important; max-width: none !important; flex: 1 !important; display: block !important; overflow: visible !important; white-space: normal !important; }
  body.mobile-navigation-enabled #pageTitle { font-size: 18px !important; line-height: 1.4 !important; }
  body.mobile-navigation-enabled .topbar .topbar-title-stack, body.mobile-navigation-enabled #pageTitle { display: block !important; opacity: 1 !important; visibility: visible !important; }
  body.mobile-navigation-enabled .topbar .topbar-center { grid-column: 1 / -1 !important; grid-row: 2 !important; width: 100% !important; min-width: 0 !important; }
  body.mobile-navigation-enabled .topbar .topbar-right { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; }
  body.mobile-navigation-enabled .topbar-search { width: 100% !important; min-width: 0 !important; height: 40px !important; }
  body.mobile-navigation-enabled #topbarCommandInput { min-width: 0 !important; width: 100% !important; font-size: 16px !important; }
  body.mobile-navigation-enabled #companionTopbarEntry { min-width: 64px !important; width: auto !important; padding: 5px 8px !important; }
  body.mobile-navigation-enabled #companionTopbarEntry small { display: none !important; }
  body.mobile-navigation-enabled #debugTopbarActions { display: none !important; }
  body.mobile-navigation-enabled #globalAiSearchPanel { position: fixed !important; left: 12px !important; right: 12px !important; top: 110px !important; width: auto !important; max-height: calc(100dvh - 130px) !important; overflow: auto !important; }
  body.mobile-navigation-enabled #mobileActionDock { display: none !important; }
  html:not(.react-student-embedded) body.mobile-navigation-enabled .main.main > .panel.active {
    width: 100% !important; min-width: 0 !important; max-width: none !important;
    margin: 0 !important; padding: 0 0 24px !important; box-sizing: border-box !important;
  }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] .main.main > .panel.active { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; }
  body.mobile-navigation-enabled :is(.section-card, .hero-card, .info-card, .training-rpg-shell, .engineering-bug-card) { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }
  body.mobile-navigation-enabled :is(.section-card, .hero-card, .info-card) { animation: none !important; transform: none !important; }
  body.mobile-navigation-enabled :is(.landing-final-grid, .landing-first-use-layout, .training-rpg-core, .training-rpg-hero, .engineering-bug-grid, .section-grid) { grid-template-columns: minmax(0, 1fr) !important; }
  :is(#hw-v189-mobile, html):is(#hw-v189-mobile, html):not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="landing"] .main.main > .panel.active > .landing-home-grid { width: 100% !important; padding: 0 !important; margin: 0 !important; gap: 16px !important; }
  :is(#hw-v189-mobile, html):is(#hw-v189-mobile, html):not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="landing"] .main.main > .panel.active > .landing-home-grid > .landing-action-plan { grid-template-columns: minmax(0, 1fr) !important; padding: 0 !important; }
  body.mobile-navigation-enabled .landing-final-goal-card::after { content: none !important; }
  body.mobile-navigation-enabled .landing-action-plan::after { content: none !important; }
  :is(#hw-v189-mobile, html) body.mobile-navigation-enabled :is(.landing-action-plan, .landing-final-goal-card)::after { content: none !important; }
  body.mobile-navigation-enabled #trainingDashboardDrawer[aria-hidden="true"] { display: none !important; visibility: hidden !important; pointer-events: none !important; }
  body.mobile-navigation-enabled :is(.training-rpg-path, .training-rpg-next-stage, .engineering-bug-grid) { min-width: 0 !important; }
  body.mobile-navigation-enabled :is(.section-head, .engineering-bug-toolbar, .training-rpg-footer) { flex-wrap: wrap !important; gap: 12px !important; }
  body.mobile-navigation-enabled :is(.section-head h3, .training-rpg-hero h3, .engineering-bug-hero h3) { font-size: 25px !important; overflow-wrap: anywhere; }
  body.mobile-navigation-enabled :is(input, select, textarea) { min-width: 0; max-width: 100%; box-sizing: border-box; font-size: 16px; }
  body.mobile-navigation-enabled .modal-card { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px) !important; overflow-y: auto !important; box-sizing: border-box !important; }
  body.mobile-navigation-enabled .modal-backdrop { z-index: 20000 !important; padding: 12px !important; box-sizing: border-box !important; }
  body.mobile-navigation-enabled #accountForm .account-auth-mode { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 4px !important; }
  body.mobile-navigation-enabled #accountForm .account-auth-mode button { min-width: 0 !important; min-height: 44px !important; padding: 8px 4px !important; font-size: 12px !important; }
  body.mobile-navigation-enabled #accountForm .form-actions { position: static !important; margin-top: 16px !important; }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"].interview-meeting-active #interviewStudio#interviewStudio.interview-space-arena-open {
    height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important;
    padding-bottom: calc(var(--mobile-toolbar-height) + 16px + env(safe-area-inset-bottom)) !important; scroll-margin-top: 120px !important;
  }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewCoachRoom {
    grid-template-columns: minmax(0, 1fr) !important; padding: 12px !important; gap: 10px !important;
  }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] #interviewStudio#interviewStudio :is(.interview-training-title, .interview-training-actions) { flex-wrap: wrap !important; }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] #interviewStudio#interviewStudio > .interview-main-dashboard {
    display: flex !important; flex-direction: column !important; gap: 14px !important; overflow: visible !important; height: auto !important; max-height: none !important; flex: none !important; padding: 0 !important;
  }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] #interviewStudio#interviewStudio :is(.interview-workspace-card, .interview-arena-stack) {
    display: flex !important; flex-direction: column !important; gap: 14px !important;
    padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
    width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; flex: none !important;
  }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-workspace-card > .section-head { display: none !important; }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] #interviewStudio#interviewStudio :is(.interview-question-card, .interview-meeting-stage-grid, .interview-question-dialog, #interviewAnswerZone, .interview-copilot-card) {
    width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; box-sizing: border-box !important;
  }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-question-card { display: block !important; padding: 14px !important; }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-meeting-stage-grid { display: flex !important; flex-direction: column !important; gap: 12px !important; }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-interviewer-stage { min-height: 90px !important; max-height: none !important; }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] #interviewStudio#interviewStudio .interview-question-footer { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] #interviewStudio#interviewStudio #interviewAnswerZone { padding: 14px !important; }
  body.mobile-navigation-enabled #engineeringTrainingFlow .engineering-training-steps { overflow: auto !important; }
  html:not(.react-student-embedded) body.mobile-navigation-enabled[data-active-panel="interview"] .interview-bottom-actionbar.interview-bottom-actionbar {
    position: fixed !important; inset: auto 0 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important; display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important; gap: 7px !important; box-sizing: border-box !important; z-index: 900 !important;
  }
  body.mobile-navigation-enabled .interview-bottom-actionbar .interview-bottom-context { display: flex !important; align-items: center !important; gap: 12px !important; padding: 0 !important; }
  body.mobile-navigation-enabled #interviewRecordingTimer { font-size: 15px !important; }
  body.mobile-navigation-enabled .interview-bottom-waveform { display: none !important; }
  body.mobile-navigation-enabled .interview-bottom-actionbar .interview-bottom-actions { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; width: 100% !important; gap: 7px !important; padding: 0 !important; }
  body.mobile-navigation-enabled .interview-bottom-actionbar .interview-bottom-actions-right { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.mobile-navigation-enabled .interview-bottom-actionbar button { width: 100% !important; min-width: 0 !important; min-height: 44px !important; padding: 8px 6px !important; font-size: 14px !important; white-space: nowrap !important; }
  html[data-theme="dark"] body.mobile-navigation-enabled :is(#mobileNavigationToggle, #mobileNavigationClose) { background: #172338 !important; color: #e2e8f0 !important; border-color: #35435a !important; }
  html[data-theme="dark"] body.mobile-navigation-enabled :is(#mobileNavigationDrawer, #workspaceSidebar) { background: #0f1b2e !important; color: #e2e8f0 !important; }
  html[data-theme="light"] body.mobile-navigation-enabled :is(#mobileNavigationDrawer, #workspaceSidebar) { background: #f8faff !important; color: #334155 !important; }
  :is(#hw-v189-mobile, html)[data-theme="dark"] body.mobile-navigation-enabled :is(.training-rpg-shell, .training-rpg-next-stage, .landing-final-goal-card, .landing-final-ai-plan, .landing-final-growth-feedback, .interview-video-tile) { background: #172338 !important; color: #e2e8f0 !important; border-color: #34435c !important; }
  :is(#hw-v189-mobile, html)[data-theme="dark"] body.mobile-navigation-enabled :is(.training-rpg-shell, .landing-final-goal-card, .landing-final-ai-plan, .interview-video-tile) :is(h3, h4, strong, .landing-greeting-line) { color: #e2e8f0 !important; }
  :is(#hw-v189-mobile, html):is(#hw-v189-mobile, html)[data-theme="dark"] body.mobile-navigation-enabled .training-rpg-shell { background: #172338 !important; border-color: #34435c !important; }
  :is(#hw-v189-mobile, html):is(#hw-v189-mobile, html)[data-theme="dark"] body.mobile-navigation-enabled :is(.training-rpg-xp, .training-rpg-roadmap) { background: #223148 !important; }
  :is(#hw-v189-mobile, html):is(#hw-v189-mobile, html)[data-theme="dark"] body.mobile-navigation-enabled .training-rpg-shell :is(h2, h3, h4, strong) { color: #e2e8f0 !important; }
  :is(#hw-v189-mobile, html):is(#hw-v189-mobile, html)[data-theme="dark"] body.mobile-navigation-enabled .training-rpg-shell :is(p, small) { color: #bac9df !important; }
}