/* 
  All pages mobile responsive upgrade - 2026-04-30
  Loaded after page-level styles. It keeps desktop layout intact and hardens
  phone / tablet layouts for public pages, admin, AI workspace and the Canvas game.
*/

:root{
  --mobile-page-gutter: clamp(10px, 3.4vw, 18px);
  --mobile-card-radius: clamp(18px, 5vw, 26px);
  --mobile-bottom-nav-h: 76px;
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --game-mobile-reserved-bottom: 176px;
}

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html.mobile-responsive-ready,
html.mobile-responsive-ready body{
  max-width: 100%;
  overflow-x: hidden;
}

body.mobile-responsive-ready{
  min-width: 0 !important;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
  -webkit-tap-highlight-color: transparent;
}

body.mobile-responsive-ready *,
body.mobile-responsive-ready *::before,
body.mobile-responsive-ready *::after{
  box-sizing: border-box;
  min-width: 0;
}

body.mobile-responsive-ready img,
body.mobile-responsive-ready video,
body.mobile-responsive-ready svg,
body.mobile-responsive-ready iframe,
body.mobile-responsive-ready canvas{
  max-width: 100%;
}

body.mobile-responsive-ready pre,
body.mobile-responsive-ready code,
body.mobile-responsive-ready .admin-code-block,
body.mobile-responsive-ready .ai-embedding-result,
body.mobile-responsive-ready .ai-language-result,
body.mobile-responsive-ready .mobile-scroll-x{
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.mobile-responsive-ready table{
  width: 100%;
  max-width: 100%;
}

.mobile-table-wrap{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.mobile-responsive-ready input,
body.mobile-responsive-ready select,
body.mobile-responsive-ready textarea,
body.mobile-responsive-ready button{
  max-width: 100%;
}

@media (pointer: coarse){
  body.mobile-responsive-ready a,
  body.mobile-responsive-ready button,
  body.mobile-responsive-ready [role="button"],
  body.mobile-responsive-ready input,
  body.mobile-responsive-ready select{
    min-height: 44px;
  }
}

/* Shared app-shell pages */
@media (max-width: 960px){
  body.app-unified-enabled .app-shell-v2,
  body#page-ai .app-shell-v2{
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  body.app-unified-enabled .app-main-stage,
  body#page-ai .app-main-stage,
  body#page-ai .ai-main-stage{
    width: 100% !important;
    margin: 0 !important;
    padding-left: var(--mobile-page-gutter) !important;
    padding-right: var(--mobile-page-gutter) !important;
  }

  body.app-unified-enabled .app-page-content > main,
  body.app-unified-enabled .app-page-content > .container,
  body.app-unified-enabled main.container,
  body.app-netease > main.container{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: var(--mobile-page-gutter) !important;
    padding-right: var(--mobile-page-gutter) !important;
  }

  body.app-unified-enabled .app-topbar,
  body#page-ai .app-topbar{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.app-unified-enabled .app-left-rail,
  body#page-ai .app-left-rail{
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: min(88vw, 336px) !important;
    max-width: 336px !important;
    height: 100dvh !important;
    transform: translateX(-105%) !important;
    transition: transform .24s ease, box-shadow .24s ease !important;
    z-index: 1000 !important;
  }

  body.app-unified-enabled.app-nav-open .app-left-rail,
  body#page-ai.app-nav-open .app-left-rail{
    transform: translateX(0) !important;
  }

  body.app-unified-enabled.app-nav-open .app-nav-backdrop,
  body#page-ai.app-nav-open .app-nav-backdrop{
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 990 !important;
    border: 0 !important;
    background: rgba(15,23,42,.48) !important;
    backdrop-filter: blur(8px) !important;
  }

  body.app-unified-enabled .app-mobile-menu,
  body#page-ai .app-mobile-menu{
    display: inline-flex !important;
    flex: 0 0 auto;
  }

  body.app-unified-enabled .app-topbar-search,
  body#page-ai .app-topbar-search{
    display: none !important;
  }

  body.app-unified-enabled .app-topbar-title,
  body#page-ai .app-topbar-title{
    min-width: 0 !important;
    overflow: hidden;
  }

  body.app-unified-enabled .app-topbar-title strong,
  body#page-ai .app-topbar-title strong{
    max-width: 56vw !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

@media (max-width: 760px){
  body.app-unified-enabled,
  body#page-ai.ai-app-shell{
    padding-bottom: calc(var(--mobile-bottom-nav-h) + var(--mobile-safe-bottom) + 10px) !important;
  }

  body.app-unified-enabled .app-mobile-bottom-tabs,
  .app-mobile-bottom-tabs{
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(8px, var(--mobile-safe-bottom)) !important;
    min-height: 62px !important;
    border-radius: 22px !important;
    padding: 6px !important;
  }

  .app-mobile-tab{
    height: 48px !important;
    border-radius: 16px !important;
  }

  body.app-unified-enabled .app-page-content,
  body#page-ai .app-page-content{
    padding-bottom: calc(var(--mobile-bottom-nav-h) + 24px) !important;
  }

  body.mobile-responsive-ready:not(.game-mobile-page) .grid,
  body.mobile-responsive-ready:not(.game-mobile-page) [class*="-grid"],
  body.mobile-responsive-ready:not(.game-mobile-page) [class*="Grid"],
  body.mobile-responsive-ready:not(.game-mobile-page) .forum-shell,
  body.mobile-responsive-ready:not(.game-mobile-page) .social-shell,
  body.mobile-responsive-ready:not(.game-mobile-page) .social-chat-body,
  body.mobile-responsive-ready:not(.game-mobile-page) .sponsor-shell,
  body.mobile-responsive-ready:not(.game-mobile-page) .setup-grid,
  body.mobile-responsive-ready:not(.game-mobile-page) .admin-form-grid,
  body.mobile-responsive-ready:not(.game-mobile-page) .admin-home-grid,
  body.mobile-responsive-ready:not(.game-mobile-page) .admin-settings-grid,
  body.mobile-responsive-ready:not(.game-mobile-page) .admin-upload-grid,
  body.mobile-responsive-ready:not(.game-mobile-page) .admin-two-col-grid{
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.mobile-responsive-ready:not(.game-mobile-page) .flex{
    min-width: 0;
  }

  body.mobile-responsive-ready:not(.game-mobile-page) .flex:not(.app-mobile-tab):not(.app-rail-link){
    flex-wrap: wrap;
  }

  body.mobile-responsive-ready:not(.game-mobile-page) h1{
    font-size: clamp(1.85rem, 8.5vw, 2.65rem) !important;
    line-height: 1.08 !important;
    text-wrap: balance;
  }

  body.mobile-responsive-ready:not(.game-mobile-page) h2{
    font-size: clamp(1.35rem, 6.2vw, 2rem) !important;
    line-height: 1.15 !important;
  }

  body.mobile-responsive-ready:not(.game-mobile-page) .neon-glass,
  body.mobile-responsive-ready:not(.game-mobile-page) .forum-card,
  body.mobile-responsive-ready:not(.game-mobile-page) .social-card,
  body.mobile-responsive-ready:not(.game-mobile-page) .sponsor-card,
  body.mobile-responsive-ready:not(.game-mobile-page) .setup-card,
  body.mobile-responsive-ready:not(.game-mobile-page) .admin-section-card,
  body.mobile-responsive-ready:not(.game-mobile-page) .admin-dashboard-panel,
  body.mobile-responsive-ready:not(.game-mobile-page) .admin-settings-card,
  body.mobile-responsive-ready:not(.game-mobile-page) .admin-upload-card,
  body.mobile-responsive-ready:not(.game-mobile-page) .ai-panel-card,
  body.mobile-responsive-ready:not(.game-mobile-page) .ai-tool-dock,
  body.mobile-responsive-ready:not(.game-mobile-page) .ai-points-card,
  body.mobile-responsive-ready:not(.game-mobile-page) .ai-usage-card{
    border-radius: var(--mobile-card-radius) !important;
    padding: clamp(14px, 4.2vw, 20px) !important;
  }

  body.mobile-responsive-ready:not(.game-mobile-page) .win-button,
  body.mobile-responsive-ready:not(.game-mobile-page) .app-primary-btn,
  body.mobile-responsive-ready:not(.game-mobile-page) .app-soft-btn,
  body.mobile-responsive-ready:not(.game-mobile-page) .admin-primary-btn,
  body.mobile-responsive-ready:not(.game-mobile-page) .admin-gradient-btn{
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  body.mobile-responsive-ready:not(.game-mobile-page) input,
  body.mobile-responsive-ready:not(.game-mobile-page) select,
  body.mobile-responsive-ready:not(.game-mobile-page) textarea{
    font-size: 16px !important;
  }
}

/* Home / music player pages */
@media (max-width: 760px){
  body.app-unified-enabled .music-appbar-shell,
  body.app-unified-enabled .music-brand-cluster,
  body.app-unified-enabled .music-appbar-actions,
  body.app-unified-enabled .hero-action-row,
  body.app-unified-enabled .online-player-actions,
  body.app-unified-enabled .player-actions,
  body.app-unified-enabled .admin-toolbar-row,
  body.app-unified-enabled .admin-form-actions,
  body.app-unified-enabled .sponsor-method-row{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  body.app-unified-enabled .music-shortcut-grid,
  body.app-unified-enabled .feature-strip-grid,
  body.app-unified-enabled .discover-grid,
  body.app-unified-enabled .stage-mini-grid,
  body.app-unified-enabled .hero-insight-strip,
  body.app-unified-enabled .library-command-grid,
  body.app-unified-enabled .sponsor-amount-grid,
  body.app-unified-enabled .sponsor-kv{
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-unified-enabled #globalPlayer.player-dock-shell,
  body.app-unified-enabled .player-dock-shell{
    left: 50% !important;
    right: auto !important;
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    bottom: calc(var(--mobile-bottom-nav-h) + var(--mobile-safe-bottom) + 10px) !important;
    transform: translate(-50%, calc(100% + 28px)) !important;
  }

  body.app-unified-enabled #globalPlayer.player-dock-shell:not(.translate-y-full),
  body.app-unified-enabled .player-dock-shell:not(.translate-y-full){
    transform: translate(-50%, 0) !important;
  }

  body.app-unified-enabled .player-dock-grid{
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body.app-unified-enabled .player-extra-panel{
    display: none !important;
  }

  body.app-unified-enabled .stage-cover-wrap,
  body.app-unified-enabled .detail-cover-wrap,
  body.app-unified-enabled .rotating{
    width: clamp(110px, 34vw, 150px) !important;
    height: clamp(110px, 34vw, 150px) !important;
  }
}

/* Admin pages */
@media (max-width: 860px){
  body#page-admin,
  body#page-admin .admin-shell,
  body#page-admin .admin-main{
    min-width: 0 !important;
    width: 100% !important;
  }

  body#page-admin .admin-shell{
    display: block !important;
  }

  body#page-admin .admin-sidebar{
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(88vw, 320px) !important;
    max-width: 320px !important;
    transform: translateX(-105%);
    transition: transform .22s ease;
    z-index: 1000 !important;
  }

  body#page-admin.admin-sidebar-open .admin-sidebar,
  body#page-admin .admin-sidebar.is-open{
    transform: translateX(0) !important;
  }

  body#page-admin .admin-content,
  body#page-admin .admin-main{
    padding-left: var(--mobile-page-gutter) !important;
    padding-right: var(--mobile-page-gutter) !important;
  }

  body#page-admin .admin-topbar{
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) auto !important;
    gap: 10px !important;
  }

  body#page-admin .admin-topbar-title,
  body#page-admin .admin-toolbar-meta,
  body#page-admin .admin-item-title{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body#page-admin .admin-nav{
    max-height: calc(100dvh - 180px);
    overflow-y: auto;
  }
}

/* Community / social / sponsor pages */
@media (max-width: 760px){
  .forum-category-item,
  .forum-thread-item,
  .social-list-item,
  .social-chat-item,
  .sponsor-amount-btn,
  .sponsor-method-btn{
    min-height: 48px;
  }

  .social-chat-body{
    min-height: auto !important;
  }

  .social-chat-side,
  .social-friend-panel,
  .social-right-panel{
    order: 2;
  }

  .social-msg-bubble{
    max-width: 92% !important;
    word-break: break-word;
  }

  .social-chat-composer,
  .forum-composer,
  .comment-composer{
    position: sticky;
    bottom: calc(var(--mobile-bottom-nav-h) + var(--mobile-safe-bottom) + 10px);
    z-index: 20;
  }
}

/* AI workspace */
@media (max-width: 1180px){
  body#page-ai .ai-workbench-app{
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body#page-ai .ai-tool-dock{
    position: static !important;
    top: auto !important;
  }
}

@media (max-width: 760px){
  body#page-ai.ai-app-shell{
    background-attachment: scroll !important;
  }

  body#page-ai .ai-main-stage{
    padding-top: max(8px, var(--mobile-safe-top)) !important;
  }

  body#page-ai .app-topbar{
    grid-template-columns: auto minmax(0,1fr) auto !important;
  }

  body#page-ai .app-topbar-model{
    min-width: 0 !important;
    width: 100% !important;
  }

  body#page-ai .app-topbar-model .ai-select{
    width: 100% !important;
  }

  body#page-ai .ai-hero-app,
  body#page-ai .ai-workbench-app,
  body#page-ai .ai-panel-stack,
  body#page-ai .ai-panel-card{
    width: 100% !important;
    max-width: 100% !important;
  }

  body#page-ai .ai-workbench-app{
    gap: 14px !important;
    padding: 0 !important;
  }

  body#page-ai .ai-tool-tabs{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body#page-ai .ai-tool-tab{
    min-height: 50px !important;
    padding: 10px 8px !important;
    justify-content: center !important;
  }

  body#page-ai .ai-chat-history,
  body#page-ai .ai-nv-chat-history{
    max-height: min(54dvh, 520px) !important;
    min-height: 240px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body#page-ai .ai-bubble,
  body#page-ai .ai-message,
  body#page-ai .ai-chat-message{
    max-width: 100% !important;
  }

  body#page-ai .ai-nv-toolbar,
  body#page-ai .ai-composer-actions,
  body#page-ai .ai-image-actions-bar{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body#page-ai .ai-composer,
  body#page-ai .ai-nvidia-composer{
    position: sticky !important;
    bottom: calc(var(--mobile-bottom-nav-h) + var(--mobile-safe-bottom) + 10px) !important;
    z-index: 40 !important;
    border-radius: 22px !important;
  }

  body#page-ai .ai-composer textarea,
  body#page-ai #aiPrompt{
    min-height: 112px !important;
    max-height: 32dvh !important;
  }

  body#page-ai .ai-nv-input-footer{
    gap: 8px !important;
  }

  body#page-ai #aiChatStatus{
    max-width: 38vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body#page-ai .ai-image-form-grid,
  body#page-ai .ai-form-grid,
  body#page-ai .ai-language-grid,
  body#page-ai .ai-voice-grid{
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body#page-ai .ai-form-span-2{
    grid-column: auto !important;
  }
}

@media (max-width: 420px){
  body#page-ai .ai-tool-tabs{
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body#page-ai .app-topbar-actions{
    max-width: 28vw !important;
  }
}

/* Standalone player page */
@media (max-width: 560px){
  body.mobile-responsive-ready #player{
    width: 100% !important;
    min-height: auto !important;
    padding: 16px !important;
    border-radius: 24px !important;
  }

  body.mobile-responsive-ready #controls,
  body.mobile-responsive-ready #eq{
    grid-template-columns: minmax(0,1fr) !important;
  }

  body.mobile-responsive-ready #cover{
    order: -1;
  }
}

/* Canvas game page */
body.game-mobile-page{
  width: 100vw !important;
  min-height: 100dvh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.game-mobile-page canvas#game{
  max-width: calc(100vw - 8px) !important;
  max-height: calc(100dvh - 8px) !important;
}

@media (pointer: coarse), (max-width: 900px){
  body.game-mobile-page{
    align-items: flex-start !important;
    padding-top: max(6px, var(--mobile-safe-top)) !important;
  }

  body.game-mobile-page canvas#game{
    max-width: calc(100vw - 8px) !important;
    max-height: calc(100dvh - var(--game-mobile-reserved-bottom) - var(--mobile-safe-bottom) - 8px) !important;
    margin-top: 2px;
    border-radius: 12px !important;
  }

  body.game-mobile-page #touch-pad{
    display: block !important;
    height: calc(var(--game-mobile-reserved-bottom) + var(--mobile-safe-bottom)) !important;
    padding-bottom: var(--mobile-safe-bottom);
  }

  body.game-mobile-page #joy-base{
    left: max(16px, env(safe-area-inset-left, 0px) + 12px) !important;
  }

  body.game-mobile-page #tp-j,
  body.game-mobile-page #tp-k,
  body.game-mobile-page #tp-l{
    right: max(16px, env(safe-area-inset-right, 0px) + 12px) !important;
  }

  body.game-mobile-page #net-toggle,
  body.game-mobile-page #audio-toggle{
    min-height: 38px !important;
    padding: 7px 10px !important;
    font-size: 12px !important;
    top: max(8px, var(--mobile-safe-top)) !important;
  }

  body.game-mobile-page #net-toggle{
    right: max(84px, env(safe-area-inset-right, 0px) + 84px) !important;
  }

  body.game-mobile-page #audio-toggle{
    right: max(8px, env(safe-area-inset-right, 0px) + 8px) !important;
  }

  body.game-mobile-page #net-panel{
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    top: max(48px, calc(var(--mobile-safe-top) + 48px)) !important;
    width: auto !important;
    max-height: calc(100dvh - var(--mobile-safe-top) - 64px) !important;
    border-radius: 18px !important;
  }

  body.game-mobile-page .net-grid{
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.game-mobile-page .net-btn,
  body.game-mobile-page .net-code{
    font-size: 13px !important;
  }
}

@media (pointer: coarse) and (orientation: landscape){
  :root{ --game-mobile-reserved-bottom: 118px; }

  body.game-mobile-page #touch-pad{
    height: calc(var(--game-mobile-reserved-bottom) + var(--mobile-safe-bottom)) !important;
  }

  body.game-mobile-page #joy-base{
    width: 104px !important;
    height: 104px !important;
    bottom: 10px !important;
  }

  body.game-mobile-page #joy-knob{
    width: 42px !important;
    height: 42px !important;
    left: 31px !important;
    top: 31px !important;
  }

  body.game-mobile-page #tp-j{
    width: 68px !important;
    height: 68px !important;
    bottom: 16px !important;
  }

  body.game-mobile-page #tp-k{
    width: 54px !important;
    height: 54px !important;
    right: 92px !important;
    bottom: 58px !important;
  }

  body.game-mobile-page #tp-l{
    width: 58px !important;
    height: 58px !important;
    bottom: 62px !important;
  }
}

@media (max-width: 380px){
  :root{ --game-mobile-reserved-bottom: 168px; }

  body.game-mobile-page #joy-base{
    width: 112px !important;
    height: 112px !important;
  }

  body.game-mobile-page #joy-knob{
    width: 42px !important;
    height: 42px !important;
    left: 35px !important;
    top: 35px !important;
  }

  body.game-mobile-page #tp-j{
    width: 74px !important;
    height: 74px !important;
  }

  body.game-mobile-page #tp-k{
    width: 58px !important;
    height: 58px !important;
    right: 94px !important;
  }

  body.game-mobile-page #tp-l{
    width: 62px !important;
    height: 62px !important;
  }
}