/* Hides the legacy touch HUD while the mobile overlay (mobile-overlay.js) is running. The overlay proxies these controls,
   so they stay in the page, just not on screen. Everything is keyed to html.mo-on, which only exists when the overlay is active. */
@media (max-width: 820px), (max-height: 520px) {
  html.mo-on #kPlayerFrame,
  html.mo-on #kheldraTopBar,
  html.mo-on #hudVitals,
  html.mo-on #hudMenuToggle,
  html.mo-on #hudMenu,
  html.mo-on .hud-bottom,
  html.mo-on .hud-bar2,
  html.mo-on .dpad,
  html.mo-on #mmorpgMinimap,
  html.mo-on #mmorpgZone,
  html.mo-on #kaudioToggle,
  html.mo-on #khelpToggle,
  html.mo-on #kDockToggle,
  html.mo-on #mmorpgUtilities,
  html.mo-on #kTouch .kt-joy,
  html.mo-on #kTouch .kt-btns {
    display: none !important;
  }

  /* Chat, the quest tracker, the next-step hint, the onboarding list and the World Finder live in the sidebars: hidden until docked there. */
  html.mo-on #hudContextToggle,
  html.mo-on #kWorldPanel,
  html.mo-on :is(#mmorpgChat, #navigationGuide, #kTracker, .k-onb):not(.mo-docked) {
    display: none !important;
  }

  html.mo-on .mo-docked {
    position: static !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    z-index: auto !important;
    resize: none !important;
  }

  html.mo-on #mmorpgChat.mo-docked {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  /* World quest markers and NPC speech bubbles are DOM elements above the canvas; keep them from showing through an open sidebar. */
  html.mo-on.mo-drawer-open :is(.qm, #npcBarks, #kFxLayer .k-float, #kMessages) {
    visibility: hidden !important;
  }

  /* Inside the sidebar the chat channel tabs wrap onto a second row instead of scrolling off the edge. */
  html.mo-on #mmorpgChat.mo-docked .k-chat-tabs {
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  html.mo-on #mmorpgChat.mo-docked .k-chat-tab {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Game toasts and speech bubbles are shrunk and parked under the shortcut row, so they never flood a phone screen. */
  html.mo-on #kMessages {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 190px) !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    width: min(86vw, 360px) !important;
    max-width: none !important;
    max-height: 64px !important;
    overflow: hidden !important;
    transform: translateX(-50%) !important;
    font-size: 14.5px !important;
    pointer-events: none !important;
  }

  html.mo-on #kFxLayer .k-float,
  html.mo-on #npcBarks > * {
    box-sizing: border-box !important;
    width: max-content !important;
    max-width: min(62vw, 280px) !important;
    padding: 4px 8px !important;
    font-size: 14.5px !important;
    line-height: 1.2 !important;
  }

  /* The legacy chat is a wrapping row built for a bottom bar; in the sidebar it is a column: tabs, scrolling log, input. */
  html.mo-on #mmorpgChat.mo-docked {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  html.mo-on #mmorpgChat.mo-docked .k-chat-head {
    display: none !important;
  }

  html.mo-on #mmorpgChat.mo-docked .k-chat-tabs {
    flex: 0 0 auto !important;
  }

  html.mo-on #mmorpgChat.mo-docked .k-chat-log {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  html.mo-on #mmorpgChat.mo-docked #mmorpgCommandForm {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
}