.mxm-mobile-shell,
.mxm-compose-fab,
.mxm-menu-toggle,
.mxm-drawer,
.mxm-drawer-backdrop {
  display: none;
}

@media (max-width: 720px) {
  html body.mxm-mobile-x-enabled,
  html body.mxm-mobile-x-enabled.mx-theme-dark,
  html body.mxm-mobile-x-enabled.mx-theme-dim {
    --bg: #ffffff;
    --panel: #ffffff;
    --topbar-bg: rgba(255, 255, 255, 0.92);
    --search-focus-bg: #ffffff;
    --card: #f7f9f9;
    --border: #eff3f4;
    --text: #0f1419;
    --muted: #536471;
    --hover: rgba(15, 20, 25, 0.08);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    --primary-btn: #0f1419;
    color-scheme: light;
    background: #ffffff;
    color: #0f1419;
  }

  html body.mxm-mobile-x-enabled,
  html body.mxm-mobile-x-enabled .mx-main,
  html body.mxm-mobile-x-enabled .mx-wrap,
  html body.mxm-mobile-x-enabled .mx-topbar,
  html body.mxm-mobile-x-enabled .mx-settings-page,
  html body.mxm-mobile-x-enabled .mx-modal-card,
  html body.mxm-mobile-x-enabled .mx-compose-modal-card,
  html body.mxm-mobile-x-enabled .mx-profedit-card,
  html body.mxm-mobile-x-enabled .mx-card,
  html body.mxm-mobile-x-enabled .mx-card-soft,
  html body.mxm-mobile-x-enabled .mx-searchbox,
  html body.mxm-mobile-x-enabled .mx-widget,
  html body.mxm-mobile-x-enabled .mx-chat,
  html body.mxm-mobile-x-enabled .mx-bubble,
  html body.mxm-mobile-x-enabled .mx-msg-bubble,
  html body.mxm-mobile-x-enabled .mx-poll,
  html body.mxm-mobile-x-enabled .mx-poll-choicebtn,
  html body.mxm-mobile-x-enabled .mx-poll-result,
  html body.mxm-mobile-x-enabled .mx-settings-rhead,
  html body.mxm-mobile-x-enabled .mx-settings-left,
  html body.mxm-mobile-x-enabled .mx-prof-tabs,
  html body.mxm-mobile-x-enabled .mx-menu,
  html body.mxm-mobile-x-enabled .mx-emoji-pop,
  html body.mxm-mobile-x-enabled .mx-compose,
  html body.mxm-mobile-x-enabled .mx-reply-compose {
    background: var(--panel);
    color: var(--text);
  }

  html body.mxm-mobile-x-enabled input,
  html body.mxm-mobile-x-enabled textarea,
  html body.mxm-mobile-x-enabled select {
    color: var(--text);
  }


  body.mxm-mobile-x-enabled {
    --mxm-light-bg: #ffffff;
    --mxm-light-panel: #ffffff;
    --mxm-light-card: #f7f9f9;
    --mxm-light-border: #eff3f4;
    --mxm-light-text: #0f1419;
    --mxm-light-muted: #536471;
    --mxm-light-hover: rgba(15, 20, 25, 0.08);
    --mxm-light-topbar: rgba(255, 255, 255, 0.92);
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
    -webkit-tap-highlight-color: transparent;
  }

  body.mxm-mobile-x-enabled.mxm-drawer-open {
    overflow: hidden;
  }

  body.mxm-mobile-x-enabled .mx-wrap {
    max-width: 100%;
  }

  body.mxm-mobile-x-enabled .mx-main {
    min-height: calc(100vh - env(safe-area-inset-bottom));
  }

  body.mxm-mobile-x-enabled .mx-topbar {
    top: 0;
    padding-top: env(safe-area-inset-top);
    min-height: calc(52px + env(safe-area-inset-top));
  }

  body.admin-bar.mxm-mobile-x-enabled .mx-topbar {
    top: 46px;
  }

  body.mxm-mobile-x-enabled .mx-tabs {
    padding-left: 56px;
    padding-right: 12px;
  }

  body.mxm-mobile-x-enabled .mx-compose,
  body.mxm-mobile-x-enabled .mx-post,
  body.mxm-mobile-x-enabled .mx-reply-compose,
  body.mxm-mobile-x-enabled .mx-reply-item,
  body.mxm-mobile-x-enabled .mx-info,
  body.mxm-mobile-x-enabled .mx-body,
  body.mxm-mobile-x-enabled .mx-prof-meta {
    padding-left: 12px;
    padding-right: 12px;
  }

  body.mxm-mobile-x-enabled .mx-post-grid,
  body.mxm-mobile-x-enabled .mx-compose-inner {
    gap: 10px;
  }

  body.mxm-mobile-x-enabled .mx-avatar,
  body.mxm-mobile-x-enabled .mx-post .mx-avatar {
    width: 38px;
    height: 38px;
  }

  body.mxm-mobile-x-enabled .mx-post-text,
  body.mxm-mobile-x-enabled .mx-reply-text {
    font-size: 15px;
    line-height: 1.45;
  }

  body.mxm-mobile-x-enabled .mx-meta {
    gap: 4px;
    font-size: 12px;
  }

  body.mxm-mobile-x-enabled .mx-actions {
    margin-top: 8px;
  }

  body.mxm-mobile-x-enabled .mx-action {
    min-height: 38px;
  }

  body.mxm-mobile-x-enabled .mx-fabs {
    display: none !important;
  }

  body.mxm-mobile-x-enabled.mxm-has-home-panels .mx-panel[data-panel="home"] > .mx-compose {
    display: none;
  }

  body.mxm-mobile-x-enabled .mx-modal {
    padding: max(12px, env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));
    align-items: flex-start;
  }

  body.mxm-mobile-x-enabled .mx-modal-card,
  body.mxm-mobile-x-enabled .mx-compose-modal-card,
  body.mxm-mobile-x-enabled .mx-profedit-card {
    width: 100%;
    max-height: calc(100vh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius: 20px;
  }

  body.mxm-mobile-x-enabled .mx-prof-cover {
    height: 148px;
  }

  body.mxm-mobile-x-enabled .mx-prof-head {
    margin-top: -44px;
    padding-left: 12px;
    padding-right: 12px;
    align-items: flex-end;
  }

  body.mxm-mobile-x-enabled .mx-prof-avawrap {
    width: 100px;
    height: 100px;
  }

  body.mxm-mobile-x-enabled .mx-prof-ava {
    width: 96px;
    height: 96px;
    border-width: 3px;
  }

  body.mxm-mobile-x-enabled .mx-prof-actions {
    gap: 8px;
    padding-bottom: 4px;
  }

  body.mxm-mobile-x-enabled .mx-prof-name {
    font-size: 20px;
  }

  body.mxm-mobile-x-enabled .mx-prof-stats {
    gap: 14px;
    flex-wrap: wrap;
  }

  body.mxm-mobile-x-enabled .mx-prof-tab {
    min-width: 110px;
    flex: 0 0 auto;
    padding: 14px 10px;
  }


  body.mxm-mobile-x-enabled.mxm-has-settings-page {
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
  }

  body.mxm-mobile-x-enabled.mxm-has-settings-page .mxm-compose-fab {
    display: none;
  }

  body.mxm-mobile-x-enabled .mx-settings-page {
    width: 100%;
    min-height: auto;
    border-left: 0;
    border-right: 0;
    background: var(--panel);
  }

  body.mxm-mobile-x-enabled .mx-settings-cols {
    display: block;
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
  }

  body.mxm-mobile-x-enabled .mx-settings-left,
  body.mxm-mobile-x-enabled .mx-settings-right {
    width: 100%;
    min-width: 0;
    border-right: 0;
    background: var(--panel);
  }

  body.mxm-mobile-x-enabled.mxm-settings-root .mx-settings-right {
    display: block;
    border-top: 1px solid var(--border);
  }

  body.mxm-mobile-x-enabled.mxm-settings-subpage .mx-settings-left {
    display: none;
  }

  body.mxm-mobile-x-enabled .mx-settings-title {
    position: sticky;
    top: 0;
    z-index: 4;
    margin: 0;
    padding: calc(12px + env(safe-area-inset-top)) 16px 10px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
  }

  body.mxm-mobile-x-enabled.mxm-settings-root .mx-settings-title {
    padding-left: 56px;
  }

  body.mxm-mobile-x-enabled .mx-settings-search {
    padding: 12px 16px;
  }

  body.mxm-mobile-x-enabled .mx-settings-nav {
    padding: 0 0 calc(8px + env(safe-area-inset-bottom));
  }

  body.mxm-mobile-x-enabled .mx-settings-navitem {
    margin: 0;
    border-radius: 0;
    padding: 16px;
    border-bottom: 1px solid var(--border);
  }

  body.mxm-mobile-x-enabled .mx-settings-navitem.is-active {
    background: transparent;
    font-weight: 800;
  }

  body.mxm-mobile-x-enabled .mx-settings-rhead {
    position: sticky;
    top: 0;
    z-index: 5;
    min-height: 56px;
    padding: calc(12px + env(safe-area-inset-top)) 16px 10px;
    background: var(--panel);
  }

  body.mxm-mobile-x-enabled .mx-settings-rtitle {
    font-size: 22px;
    line-height: 1.15;
  }

  body.mxm-mobile-x-enabled .mx-settings-cardlist,
  body.mxm-mobile-x-enabled .mx-display-wrap,
  body.mxm-mobile-x-enabled .mx-settings-pad {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  body.mxm-mobile-x-enabled .mx-settings-row {
    padding: 14px 16px;
  }

  body.mxm-mobile-x-enabled .mx-settings-row-title,
  body.mxm-mobile-x-enabled .mx-settings-session-title {
    line-height: 1.3;
  }

  body.mxm-mobile-x-enabled .mx-settings-row-sub,
  body.mxm-mobile-x-enabled .mx-settings-session-sub,
  body.mxm-mobile-x-enabled .mx-display-help {
    line-height: 1.4;
  }

  body.mxm-mobile-x-enabled .mx-display-wrap {
    padding: 14px 16px calc(96px + env(safe-area-inset-bottom));
  }

  /* Robust settings mobile layout without relying on JS body classes */
  .mx-settings-page {
    overflow-x: hidden;
  }

  @supports selector(.mx-settings-page:has(.mx-settings-back)) {
    .mx-settings-page:has(.mx-settings-back) .mx-settings-cols {
      display: block !important;
      grid-template-columns: minmax(0, 1fr) !important;
      min-height: auto;
    }

    .mx-settings-page:has(.mx-settings-back) .mx-settings-left {
      display: none !important;
    }

    .mx-settings-page:has(.mx-settings-back) .mx-settings-right {
      display: block !important;
      width: 100% !important;
      max-width: none !important;
      min-width: 0 !important;
      margin: 0 !important;
      border-right: 0 !important;
    }

    .mx-settings-page:has(.mx-settings-back) .mx-settings-rhead,
    .mx-settings-page:has(.mx-settings-back) .mx-display-wrap,
    .mx-settings-page:has(.mx-settings-back) .mx-settings-pad,
    .mx-settings-page:has(.mx-settings-back) .mx-settings-cardlist {
      width: 100% !important;
      max-width: none !important;
      min-width: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      overflow-x: hidden;
      box-sizing: border-box;
    }

    .mx-settings-page:has(.mx-settings-back) .mx-display-wrap {
      padding-left: 16px !important;
      padding-right: 16px !important;
    }

    .mx-settings-page:has(.mx-settings-back) .mx-display-sliderbar,
    .mx-settings-page:has(.mx-settings-back) #mx-accent-row,
    .mx-settings-page:has(.mx-settings-back) #mx-bg-row,
    .mx-settings-page:has(.mx-settings-back) .mx-display-system {
      width: 100% !important;
      max-width: none !important;
    }

    .mx-settings-page:has(.mx-settings-back) .mx-bg-row {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 12px;
    }

    .mx-settings-page:has(.mx-settings-back) .mx-bgcard {
      width: 100% !important;
      max-width: none !important;
      min-width: 0 !important;
    }

    .mx-settings-page:has(.mx-settings-back) .mx-color-row {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      justify-items: center;
    }
  }

  @supports selector(.mx-settings-page:not(:has(.mx-settings-back))) {
    .mx-settings-page:not(:has(.mx-settings-back)) .mx-settings-cols {
      display: block !important;
      grid-template-columns: minmax(0, 1fr) !important;
      min-height: auto;
    }

    .mx-settings-page:not(:has(.mx-settings-back)) .mx-settings-left {
      display: block !important;
      width: 100% !important;
      max-width: none !important;
    }

    .mx-settings-page:not(:has(.mx-settings-back)) .mx-settings-right {
      display: block !important;
      width: 100% !important;
      max-width: none !important;
      min-width: 0 !important;
      margin: 0 !important;
      border-top: 1px solid var(--border);
      border-right: 0 !important;
    }
  }

  body.mxm-mobile-x-enabled .mx-bg-row {
    grid-template-columns: 1fr;
  }

  body.mxm-mobile-x-enabled .mx-color-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 14px;
  }

  body.mxm-mobile-x-enabled .mx-colorbtn {
    justify-self: start;
  }


  body.mxm-mobile-x-enabled.mxm-settings-root .mx-settings-rhead {
    position: relative;
    top: auto;
  }

  body.mxm-mobile-x-enabled.mxm-settings-root .mx-settings-cardlist,
  body.mxm-mobile-x-enabled.mxm-settings-root .mx-settings-pad,
  body.mxm-mobile-x-enabled.mxm-settings-root .mx-display-wrap {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  body.mxm-mobile-x-enabled.mxm-settings-root .mx-settings-left + .mx-settings-right {
    margin-top: 0;
  }

  .mxm-mobile-shell,
  .mxm-menu-toggle,
  .mxm-drawer,
  .mxm-drawer-backdrop {
    display: block;
  }


  body.mxm-mobile-x-enabled.mxm-hide-menu-toggle .mxm-menu-toggle {
    display: none;
  }

  .mxm-menu-toggle {
    appearance: none;
    position: fixed;
    top: calc(8px + env(safe-area-inset-top));
    left: 10px;
    z-index: 92;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--mxm-light-text);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  body.admin-bar .mxm-menu-toggle {
    top: calc(54px + env(safe-area-inset-top));
  }

  .mxm-menu-avatar,
  .mxm-drawer-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 999px;
    background: var(--mxm-light-card);
  }

  .mxm-menu-avatar {
    width: 32px;
    height: 32px;
  }

  .mxm-menu-avatar img,
  .mxm-drawer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mxm-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 93;
    background: rgba(15, 20, 25, 0.24);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .mxm-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 94;
    width: min(84vw, 320px);
    background: var(--mxm-light-panel);
    border-right: 1px solid var(--mxm-light-border);
    box-shadow: 8px 0 20px rgba(15, 20, 25, 0.12);
    transform: translateX(-102%);
    transition: transform 0.24s ease;
    padding: calc(12px + env(safe-area-inset-top)) 0 calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body.admin-bar .mxm-drawer {
    padding-top: calc(58px + env(safe-area-inset-top));
  }

  body.mxm-drawer-open .mxm-drawer {
    transform: translateX(0);
  }

  body.mxm-drawer-open .mxm-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .mxm-drawer-head {
    padding: 0 16px 16px;
    border-bottom: 1px solid var(--mxm-light-border);
  }

  .mxm-drawer-close {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--mxm-light-text);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    cursor: pointer;
  }

  .mxm-drawer-close:hover {
    background: var(--mxm-light-hover);
  }

  .mxm-drawer-account {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .mxm-drawer-avatar {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
  }

  .mxm-drawer-name {
    display: block;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 900;
    color: var(--mxm-light-text);
  }

  .mxm-drawer-handle {
    display: block;
    margin-top: 3px;
    color: var(--mxm-light-muted);
    font-size: 14px;
  }

  .mxm-drawer-stats {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    font-size: 14px;
    color: var(--mxm-light-muted);
    flex-wrap: wrap;
  }

  .mxm-drawer-stats strong {
    color: var(--mxm-light-text);
    font-weight: 900;
  }

  .mxm-drawer-guest {
    padding-top: 2px;
  }

  .mxm-drawer-signin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    margin-top: 14px;
    border-radius: 999px;
    background: var(--text);
    color: var(--mxm-light-bg);
    text-decoration: none;
    font-weight: 800;
  }

  .mxm-drawer-nav {
    padding: 10px 8px 0;
  }

  .mxm-drawer-link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 48px;
    padding: 0 12px;
    margin: 2px 8px;
    border-radius: 999px;
    color: var(--mxm-light-text);
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
  }

  .mxm-drawer-link:hover,
  .mxm-drawer-link.is-active {
    background: var(--mxm-light-hover);
  }

  .mxm-drawer-link .mxm-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }

  .mxm-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 88;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--mxm-light-border);
    background: var(--mxm-light-panel);
    box-shadow: 0 -4px 12px rgba(15, 20, 25, 0.06);
  }

  .mxm-dock-link {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--mxm-light-muted);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 56px;
    padding: 4px 2px;
    font: inherit;
    cursor: pointer;
    position: relative;
    border-radius: 14px;
  }

  .mxm-dock-link.is-active {
    color: var(--mxm-light-text);
    font-weight: 800;
  }

  .mxm-dock-link.is-active::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 3px;
    border-radius: 999px;
    background: var(--accent);
  }

  .mxm-icon {
    display: inline-flex;
    width: 23px;
    height: 23px;
    align-items: center;
    justify-content: center;
  }

  .mxm-icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .mxm-dock-label {
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.01em;
  }

  .mxm-compose-fab {
    display: inline-flex;
    position: fixed;
    right: 16px;
    bottom: calc(74px + env(safe-area-inset-bottom));
    z-index: 89;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 6px 16px rgba(29, 155, 240, 0.22);
    cursor: pointer;
  }

  .mxm-compose-fab .mxm-icon {
    width: 24px;
    height: 24px;
  }

  body.mxm-mobile-x-enabled .mx-searchbox,
  body.mxm-mobile-x-enabled .mx-card,
  body.mxm-mobile-x-enabled .mx-card-soft {
    border-radius: 18px;
  }

  body.mxm-mobile-x-enabled .mx-widget,
  body.mxm-mobile-x-enabled .mx-right-inner {
    padding-bottom: 0;
  }
}