/* ============================================================
   Raingad-IM 移动端 H5 适配层（注入文件，非官方产物）
   配套脚本: assets/js/mobile-h5.js
   回滚方式: 删除本文件及 index.html 中对应引用即可
   ============================================================ */

@media screen and (max-width: 900px) {
  /* 外层容器占满视口（覆盖窗口模式 1000x640 与 min-height:600px） */
  .lemon-wrapper {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex-direction: column !important;
  }

  /* 左侧 60px 菜单栏 -> 底部导航栏（保留头像/会话/通讯录/设置/退出等全部入口） */
  .lemon-menu {
    order: 30;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    flex-direction: row !important;
    align-items: center;
    padding: 0 8px !important;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .05) !important;
  }
  .lemon-menu__avatar { margin: 0 8px 0 0 !important; }
  .lemon-menu__item {
    margin: 0 4px 0 0 !important;
    padding: 6px 9px !important;
    white-space: nowrap;
  }
  .lemon-menu__item > * { font-size: 22px !important; }
  .lemon-menu__bottom {
    position: static !important;
    order: 99;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    margin-left: auto !important;
  }
  .lemon-menu__bottom .lemon-menu__item { margin-bottom: 0 !important; }

  /* 侧栏与聊天区：手机上二选一，通过 body.lemon-mobile-chat 切换 */
  .lemon-sidebar {
    order: 10;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0;
    border-right: none !important;
  }
  .lemon-container {
    order: 20;
    width: 100% !important;
    flex: 1 1 auto;
    min-height: 0;
    display: none !important;
  }
  body.lemon-mobile-chat .lemon-sidebar { display: none !important; }
  body.lemon-mobile-chat .lemon-container { display: flex !important; }

  /* 聊天标题栏给返回按钮留出位置 */
  body.lemon-mobile-chat .lemon-container__title {
    padding-left: 52px !important;
    padding-right: 10px !important;
  }
}

/* 返回联系人列表按钮（由 mobile-h5.js 注入到 body） */
.lemon-mobile-back {
  display: none;
  position: fixed;
  top: 11px;
  left: 10px;
  z-index: 3000;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: #172033;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .18);
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 900px) {
  body.lemon-mobile-chat .lemon-mobile-back { display: flex; }
  body.lemon-mobile-auto .lemon-mobile-back { display: none !important; }
}