/* Mobile account menu as a right-side drawer + bio panel close affordances.
   Loaded after page styles so it overrides the old floating box on phones. */
@media (max-width: 768px) {
  html body .mobile-nav-backdrop {
    inset: 0 !important;
    top: 0 !important;
    z-index: 2990 !important;
    background: rgba(0, 0, 0, 0.55) !important;
  }
  html body .mobile-nav-menu {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: max(85vw, min(360px, 100vw)) !important;
    max-width: 420px !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: max(14px, env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom)) !important;
    border-radius: 22px 0 0 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-right: 0 !important;
    background: rgba(14, 10, 13, 0.985) !important;
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5) !important;
    z-index: 3000 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    box-sizing: border-box !important;
    text-align: left !important;
    gap: 12px !important;
    align-content: start !important;
  }
  html body .mobile-nav-menu.show {
    display: flex !important;
    flex-direction: column !important;
    animation: xchatxDrawerIn 0.22s ease-out;
  }
  @keyframes xchatxDrawerIn { from { transform: translateX(24px); opacity: 0.4; } to { transform: none; opacity: 1; } }

  /* Order: header, user + account list, socials, language, login. */
  html body .mobile-nav-menu > .mobile-nav-menu__header { order: 0; position: sticky; top: calc(-1 * max(14px, env(safe-area-inset-top))); z-index: 2; margin: 0 0 2px !important; padding: 4px 0; background: inherit; }
  html body .mobile-nav-menu > #mobileNavUserGroup { order: 1; }
  html body .mobile-nav-menu > #mobileLoginBtn { order: 1; }
  html body .mobile-nav-menu > .mobile-nav-social-cluster { order: 2; }
  html body .mobile-nav-menu > .mobile-nav-language-cluster,
  html body .mobile-nav-menu > .mobile-language-group { order: 3; }

  html body .mobile-nav-menu .mobile-nav-close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    border-radius: 14px !important;
    font-size: 20px;
  }

  /* Account list: left-aligned 48px rows, full-width tap targets. */
  /* Only restyle when site-user.js has shown the group (inline display:grid). */
  html body .mobile-nav-menu .mobile-nav-account-cluster[style*="grid"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 10px !important;
  }
  html body .mobile-nav-menu .mobile-nav-user-summary {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    min-height: 52px;
    padding: 6px 8px !important;
  }
  html body .mobile-nav-menu .mobile-nav-cluster__label { text-align: left !important; padding: 6px 8px 0 !important; }
  html body .mobile-nav-menu .mobile-nav-account-cluster > a:not([style*="none"]),
  html body .mobile-nav-menu .mobile-nav-account-cluster > .mobile-nav-item:not([style*="none"]) {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    text-align: left !important;
    border-radius: 14px !important;
    font-size: 15px !important;
  }
  html body .mobile-nav-menu .mobile-nav-account-cluster > a i { width: 22px; font-size: 19px; text-align: center; flex: 0 0 22px; }
  html body .mobile-nav-menu #mobileLoginBtn { width: 100% !important; min-height: 48px !important; }

  /* Socials: one evenly spaced row of icon buttons. */
  html body .mobile-nav-menu .mobile-nav-social-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  html body .mobile-nav-menu .mobile-nav-social-link {
    min-height: 48px !important;
    min-width: 0 !important;
    padding: 6px 4px !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    white-space: nowrap;
    overflow: hidden;
  }
  html body .mobile-nav-menu .mobile-nav-social-link > span:not(.twitter-btn__icon) { overflow: hidden; text-overflow: ellipsis; }

  /* Language: segmented control that always fits. */
  html body .mobile-nav-menu .mobile-language-options {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 4px !important;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    width: 100% !important;
    box-sizing: border-box;
  }
  html body .mobile-nav-menu .mobile-language-options .nav-language-option {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 4px !important;
    gap: 0 !important;
    border-radius: 11px !important;
    overflow: hidden;
  }
  html body .mobile-nav-menu .nav-language-option__check { display: none !important; }
  html body .mobile-nav-menu .nav-language-option__short { display: none !important; }
  html body .mobile-nav-menu .nav-language-option__label { display: inline !important; font-size: 14px !important; font-weight: 700; white-space: nowrap; }
  html body .mobile-nav-menu .nav-language-option__label { font-size: 0 !important; }
  html body .mobile-nav-menu .nav-language-option__label::after { font-size: 14px; }
  html body .mobile-nav-menu [data-language-option="en"] .nav-language-option__label::after { content: "EN"; }
  html body .mobile-nav-menu [data-language-option="zh-CN"] .nav-language-option__label::after { content: "中文"; }
  html body .mobile-nav-menu [data-language-option="ja"] .nav-language-option__label::after { content: "日本語"; }
}

/* Bio panel (mobile): obvious close button + wider backdrop tap area. */
@media (max-width: 1024px) {
  html body .mobile-panel { width: min(82vw, 400px) !important; max-width: 400px !important; }
  html body .mobile-overlay { cursor: pointer; }
  .mobile-panel-close {
    position: sticky;
    top: 8px;
    float: right;
    z-index: 30;
    width: 44px;
    height: 44px;
    margin: 8px 8px -52px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(18, 12, 16, 0.86);
    color: rgba(255, 255, 255, 0.9);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(8px);
  }
  .mobile-panel-close:active { transform: scale(0.96); }
}