/**
 * 彩种切换 / 用户侧栏弹层样式兜底。
 * 1) sys-kind 原先未注入 menu-view 样式 → 只见遮罩不见面板
 * 2) 桌面打开 H5 时 menu-box 用了 100vw，抽屉会跑出手机框架
 */

/* ---- 基础面板（手机端也需要） ---- */
.menu-box.kind .menu-view,
.menu-box.kind .menu-view[data-v-fed743c2] {
  width: 66.6667%;
  max-width: 280px;
  background: #fff;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.menu-box.menu .menu-view {
  width: 66.6667%;
  max-width: 280px;
  background: #fff;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.menu-box.kind .menu-view .user-info,
.menu-box.kind .menu-view .user-info[data-v-fed743c2] {
  width: 100%;
  min-height: 150px;
  background: linear-gradient(90deg, #d81e06, #dd524d);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff;
  font-size: 14px;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  padding: 30px 12px 16px;
}

.menu-box.kind .menu-view .user-info .back,
.menu-box.kind .menu-view .user-info .back[data-v-fed743c2] {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.menu-box.kind .menu-view .user-info .image,
.menu-box.kind .menu-view .user-info .image[data-v-fed743c2] {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
}

.menu-box.kind .menu-view .user-info .image .img,
.menu-box.kind .menu-view .user-info .image .img[data-v-fed743c2],
.menu-box.kind .menu-view .user-info .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: top;
}

.menu-box.kind .menu-view .user-info .name,
.menu-box.kind .menu-view .user-info .name[data-v-fed743c2] {
  margin-top: 10px;
  width: 90%;
  text-align: center;
}

.menu-box.kind .menu-view .list,
.menu-box.kind .menu-view .list[data-v-fed743c2] {
  flex: 1;
  overflow: hidden auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
}

.menu-box.kind .menu-view .list .item,
.menu-box.kind .menu-view .list .item[data-v-fed743c2] {
  display: flex;
  align-items: center;
  padding: 15px 10px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.menu-box.kind .menu-view .list .item .img,
.menu-box.kind .menu-view .list .item .img[data-v-fed743c2],
.menu-box.kind .menu-view .list .item img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  vertical-align: top;
  flex-shrink: 0;
}

.menu-box.kind .menu-view .list .item .text,
.menu-box.kind .menu-view .list .item .text[data-v-fed743c2] {
  font-size: 14px;
  padding-left: 8px;
  color: #333;
}

.page .mask {
  z-index: 10000 !important;
}

.menu-box.kind,
.menu-box.menu {
  z-index: 10001 !important;
}

/*
 * 桌面端抽屉约束：仅当 JS 打上 h5-drawer-framed 时生效。
 * 默认藏框外 + 首屏无动画，避免刷新闪一下再划走。
 */
body.h5-frame-page .menu-box.menu.h5-drawer-framed,
body.h5-frame-page .menu-box.kind.h5-drawer-framed {
  left: var(--h5-frame-left, 0px) !important;
  right: auto !important;
  width: var(--h5-frame-width, 100%) !important;
  max-width: var(--h5-frame-width, 100%) !important;
  height: var(--app-height, 100dvh) !important;
  max-height: var(--app-height, 100dvh) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.h5-frame-page .menu-box.menu.h5-drawer-framed {
  transform: translateX(110%) !important;
}

body.h5-frame-page .menu-box.kind.h5-drawer-framed {
  transform: translateX(-110%) !important;
}

body.h5-frame-page .menu-box.menu.h5-drawer-framed.hide {
  transform: translateX(110%) !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.h5-frame-page .menu-box.kind.h5-drawer-framed.hide-kind {
  transform: translateX(-110%) !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.h5-frame-page .menu-box.menu.h5-drawer-framed:not(.hide),
body.h5-frame-page .menu-box.kind.h5-drawer-framed:not(.hide-kind) {
  transform: translateX(0) !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.h5-frame-page.h5-drawer-anim .menu-box.menu.h5-drawer-framed,
body.h5-frame-page.h5-drawer-anim .menu-box.kind.h5-drawer-framed {
  transition: transform .3s ease, visibility .3s ease !important;
}

body.h5-frame-page .menu-box.kind.h5-drawer-framed .menu-view,
body.h5-frame-page .menu-box.menu.h5-drawer-framed .menu-view {
  width: 72% !important;
  max-width: 280px !important;
}

body.h5-frame-page .mask.h5-drawer-framed {
  left: var(--h5-frame-left, 0px) !important;
  right: auto !important;
  width: var(--h5-frame-width, 100%) !important;
  max-width: var(--h5-frame-width, 100%) !important;
}