/* Mobile-only product polish. Desktop remains owned by the core stylesheets. */
@media (max-width: 1023px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { min-height: 100dvh; }
  button, [role="button"], a, input, select, textarea { touch-action: manipulation; }
  .app-shell { height: 100dvh; min-height: -webkit-fill-available; }
  .app-main-shell, .app-content { min-width: 0; }
  .app-topbar { position: relative; z-index: 60; flex: none; }
  .app-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0;
    z-index: 70;
    width: min(18rem, 88vw) !important;
    height: 100dvh;
    flex: none !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-101%);
    transition: transform .24s ease;
  }
  .app-sidebar.is-open { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; z-index: 65; inset: 0; display: none; }
  .sidebar-backdrop.is-open { display: block; }
  .nav-open { overflow: hidden; }
  .app-nav a, .nav-create-grid a { min-height: 2.75rem; }
  .app-content > :not(.chat-page-shell):not(.pm-shell):not(.account-center):not(.support-shell):not(.purchase-backdrop) { width: 100%; }
  img, video, canvas, svg { max-width: 100%; }
  input, select, textarea { max-width: 100%; font-size: 16px; }
  .purchase-backdrop, .daily-backdrop, .gift-reveal-backdrop, .report-backdrop { height: 100dvh; }
  .purchase-modal, .daily-modal, .gift-reveal-card, .report-sheet { max-height: calc(100dvh - 1.25rem); overscroll-behavior: contain; }

  /* Admin becomes a compact horizontal workspace instead of a crushed desktop rail. */
  .admin-console { width: 100%; padding: .85rem !important; }
  .admin-command-header, .admin-page-intro { align-items: flex-start; flex-wrap: wrap; gap: .75rem; }
  .admin-console-layout { display: block !important; }
  .admin-rail { position: static !important; width: 100% !important; max-width: none !important; margin-bottom: .9rem; }
  .admin-nav { display: flex !important; gap: .4rem; overflow-x: auto; padding: .55rem; scrollbar-width: none; scroll-snap-type: x proximity; }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav-label, .admin-rail-foot { display: none !important; }
  .admin-nav a { flex: 0 0 auto; min-height: 2.65rem; padding: .65rem .75rem !important; border: 1px solid #283142; border-radius: .65rem; scroll-snap-align: start; }
  .admin-workspace { min-width: 0; padding: 0 !important; }
  .admin-table { min-width: 42rem; }
  .admin-table-wrap, .overflow-x-auto { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 720px) {
  :root { --mobile-gutter: clamp(.75rem, 3.8vw, 1rem); }
  .app-topbar { min-height: 3.55rem; padding: .5rem var(--mobile-gutter); gap: .45rem; }
  .app-page-identity { min-width: 0; gap: .5rem; }
  .header-eyebrow { display: none; }
  .app-page-title { max-width: 7.5rem; font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .header-icon, .account-trigger, .daily-trigger { min-width: 2.35rem; min-height: 2.35rem; }
  .app-topbar > div:last-child { gap: .35rem !important; }
  .live-announcement > button { width: 2.35rem; max-width: 2.35rem; padding: 0; justify-content: center; }
  .live-announcement > button b, .live-announcement > button span { display: none; }
  .live-announcement-bubble { position: fixed; top: 4rem; right: var(--mobile-gutter); left: var(--mobile-gutter); width: auto; transform: translateY(-.25rem); }
  .live-announcement:hover .live-announcement-bubble, .live-announcement:focus-within .live-announcement-bubble { transform: none; }
  .header-popover { left: var(--mobile-gutter); right: var(--mobile-gutter); top: 4rem; width: auto; max-height: calc(100dvh - 5rem); overflow-y: auto; }

  /* The cost selector stays visible, readable and below the top bar. */
  .interaction-control { left: var(--mobile-gutter) !important; right: var(--mobile-gutter); width: auto !important; max-width: none; transform: none !important; justify-content: center; }
  .interaction-control label { min-width: 0; flex: 1 1 0; }
  .interaction-control select { width: 100%; min-width: 0; font-size: .68rem; }
  .token-context-main { padding-top: 3.6rem; }

  /* Shared page rhythm and readable full-width controls. */
  .asg-home, .account-center, .support-shell, .pm-shell, .universe-editor { padding-right: var(--mobile-gutter) !important; padding-left: var(--mobile-gutter) !important; }
  .asg-hero { min-height: auto; border-radius: 1rem !important; }
  .asg-hero h1, .help-hero h1, .support-hero h1 { font-size: clamp(1.65rem, 8vw, 2.35rem) !important; line-height: 1.08; }
  .dashboard-character-grid { grid-template-columns: 1fr !important; }
  .dashboard-character-art { height: 12rem !important; }
  .char-portrait { height: min(110vw, 25rem); }
  .char-identity h1 { font-size: clamp(2rem, 11vw, 3rem); }
  .char-actions > *, .universe-editor-actions > *, .support-help-link { justify-content: center; min-height: 2.75rem; }
  .account-center { padding-top: 1rem !important; }
  .account-hero, .account-panel { padding: 1rem; }
  .account-stats { gap: .45rem; }
  .account-stats > div { padding: .7rem .6rem; }
  .account-primary, .account-secondary { width: 100%; min-height: 2.75rem; }
  .creation-capacity { grid-template-columns: 1fr auto; }
  .creation-capacity > div { grid-column: 1 / -1; grid-row: 2; }
  .creator-guide nav, .universe-editor-nav, .persona-readiness-checks { scrollbar-width: none; }
  .creator-guide nav::-webkit-scrollbar, .universe-editor-nav::-webkit-scrollbar { display: none; }

  /* Premium cards, store and billing stop behaving like squeezed desktop rows. */
  .plan-card { min-height: 0; padding: 1.15rem; border-radius: 1.15rem; }
  .plan-featured { transform: none; }
  .shop-column, .billing-ledger, .purchase-history { border-radius: 1rem; }
  .product-row { min-height: 3.75rem; }
  .purchase-history-head { padding: 1rem; }
  .purchase-history-row { grid-template-columns: 2.35rem minmax(0,1fr); padding: .9rem; }
  .purchase-price { grid-column: 2; grid-row: auto; justify-items: start; text-align: left; }
  .purchase-order { grid-column: 2; }
  .billing-row-actions { grid-column: 1 / -1; justify-content: stretch; }
  .billing-row-actions > * { flex: 1; min-height: 2.5rem; }

  /* Forms and dialogs use the viewport as a bottom sheet on phones. */
  .purchase-backdrop, .daily-backdrop, .gift-reveal-backdrop, .report-backdrop { align-items: flex-end; padding: 0; }
  .purchase-modal, .daily-modal, .gift-reveal-card, .report-sheet { width: 100%; max-height: 94dvh; padding: 1rem; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 1.15rem 1.15rem 0 0; }
  .daily-modal.daily-modal-clean { max-height: 94dvh; padding: 1rem; }
  .daily-modal-clean .daily-days { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .daily-modal-clean .daily-day { min-height: 5.4rem; }
  .report-head { grid-template-columns: auto 1fr auto; padding: 1rem; }
  .report-mark { width: 2.35rem; height: 2.35rem; }
  .report-sheet form { padding: 1rem; }

  /* Chat is a single, stable mobile writing surface. */
  body[data-page^="/chat/"] .app-content { overflow: hidden !important; }
  .chat-page-shell { width: 100% !important; height: 100% !important; padding: 0 !important; }
  .chat-page-shell .sticky-header { margin: 0 !important; min-height: 3.55rem; padding: .45rem var(--mobile-gutter) !important; }
  .chat-page-shell .sticky-header h1, .chat-page-shell .sticky-header h2 { max-width: 47vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-thread-scroll { padding: .75rem var(--mobile-gutter) 1rem !important; scrollbar-gutter: auto; }
  .chat-thread-scroll #chatList { width: 100%; }
  .chat-bubble, .narrator-message, .story-turn { max-width: 92% !important; }
  .deleted-message-row { width: 92%; }
  .chat-composer-dock { padding: .55rem var(--mobile-gutter) max(.65rem, env(safe-area-inset-bottom)); }
  #aiGoalInput { min-height: 2.5rem; padding-right: .65rem !important; padding-left: .65rem !important; }
  #chatComposer { border-radius: .85rem !important; }
  #chatInput { min-height: 3rem; max-height: 9rem; padding-top: .8rem !important; padding-bottom: .8rem !important; }
  .chat-tool-btn, #sendBtn { min-width: 2.65rem; min-height: 2.65rem; }
  .chat-composer-help { display: none; }
  .chat-scroll-latest { top: -2.35rem; min-height: 2.15rem; }
  #meterPanel { display: none !important; }
  #xpToastStack { top: 4rem !important; right: var(--mobile-gutter) !important; left: var(--mobile-gutter); align-items: stretch !important; }
}

@media (max-width: 420px) {
  .app-page-title { max-width: 5.6rem; }
  .daily-trigger span:not(.daily-dot), .account-trigger > i { display: none; }
  .account-trigger { width: 2.35rem; padding: .2rem; }
  .interaction-control { gap: .3rem; padding: .35rem; }
  .interaction-control .image-fixed { display: none; }
  .char-actions { display: grid; grid-template-columns: 1fr; }
  .maintenance-stage { padding: .75rem; }
  .maintenance-card { padding: 1.25rem; border-radius: 1rem; }
  .maintenance-countdown { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 360px) {
  .app-page-title { display: none; }
  .daily-trigger { display: none; }
  .daily-modal-clean .daily-days { grid-template-columns: 1fr; }
}