/* ============================================
   /portal/assets/css/portal.mobile.css
   ============================================ */
/* ============================================
   手机端适配（核心）
   ============================================ */
@media (max-width: 768px) {

  /* ⭐ 抽屉整体：挂在导航下方，高度 40vh，浅灰背景 */
  .portal-mobile-menu-wrapper {
    display: none;
    position: fixed;
    top: var(--portal-nav-height);
    left: 0;
    right: 0;
    height: calc(100vh - var(--portal-nav-height));
    background: #e5eaf3;          /* ⭐ 让背景色柔和但明显，和白色卡片区分 */
    padding: 0;        /* ← 关键：去掉左右 padding */
    z-index: 2000;
    flex-direction: column;
  }

  body.portal-menu-open .portal-mobile-menu-wrapper {
    display: flex;
  }

  /* ⭐ 顶部固定悬浮层（你的 footer）视觉样式 */
  .portal-mobile-footer {
      padding: 6px 16px;   /* 上下 8，左右 16 —— 作为统一“内边距基准线” */
      background: #ffffff;        /* 白色背景 */
      border-bottom: 1px solid #e5e7eb;  /* ⭐ 顶部悬浮层的分割线（你要的） */
      box-shadow: 0 1px 2px rgba(0,0,0,0.06); /* ⭐ 轻微阴影（可选） */
      display: flex;
      flex-direction: column;     /* 整体仍然纵向 */
      gap: 12px;
	  position: relative;
  }
  

  /* ⭐ 登录/注册按钮保持同一行（放这里最合适） */
  #portal-login-row-mobile {
      display: flex;
	  flex-direction: row;
	  gap: 10px;
	  align-items: center;
  }
  
  /* ⭐ 登录后用户区：头像 + 昵称 + 后台 + 退出 全部一行 */
  #portal-user-row-mobile {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 12px;              /* 按钮与头像之间的间距 */
      padding: 6px 0;      /* ⭐ 只保留上下 8，左右用 footer 的 16px */
      background: #ffffff;
  }

  /* ⭐ 头像 + 昵称 */
  #portal-user-info-mobile {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
  }
  
  /* ⭐ 后台 + 退出按钮（同一行） */
  #portal-user-actions-mobile {
      display: flex;
      flex-direction: row;
      gap: 10px;
      margin-left: auto;      /* ⭐ 让按钮组靠右 */
  }
  
  /* 手机端昵称最多显示 4 个汉字宽度 */
  #portal-user-name-mobile {
    max-width: 4em;        /* ⭐ 关键：限制为 4 个汉字宽度 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;      /* ⭐ 关键：让昵称宽度固定为 4em，不被 flex 挤压 */
  }

  /* 隐藏 PC 菜单（旧结构） */
.portal-nav-left > .portal-nav-menu {
    display: none;
}

/* ⭐ 隐藏 PC 菜单（新结构） */
.portal-menu-pc {
    display: none;
}

/* ⭐ --------------显示手机顶部第二层菜单（横向滑动）---------------- */


/* ⭐ 让左侧容器允许横向滚动（关键） */
.portal-nav-second .portal-nav-left {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
}

/* ⭐ ------------手机导航菜单滑动---结束-------------- */


  /* 显示汉堡按钮 */
  .portal-nav-toggle {
    display: block;
    margin-left: 12px;
  }

  /* 隐藏 PC 登录/注册 */
  #portal-btn-login,
  #portal-btn-register {
    display: none;
  }

  /* 退出登录按钮靠左 */
  #portal-btn-logout-mobile {
    margin-left: 0 !important;   /* 保持靠左 */
    align-self: flex-start;      /* ⭐ 内容宽度，不拉满整行 */
    width: auto !important;      /* ⭐ 强制恢复按钮原本宽度 */
  }

  /* 二级菜单改为纵向 */
  body.portal-menu-open .portal-submenu {
    display: none;
    position: static;
    flex-direction: column;
    box-shadow: none;
    padding: 0;
    background: transparent;
  }

  body.portal-menu-open .portal-nav-item-with-children {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
  }

  body.portal-menu-open .portal-nav-link.has-children {
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
  }

  /* 删除导致按钮错位的 margin-top */
  body.portal-menu-open #portal-btn-logout-mobile {
    margin-top: 0 !important;
  }

  /* mobile 通用按钮基类 */
  .portal-btn-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
  }

  /* mobile 登录后按钮样式 */
  #portal-btn-dashboard-mobile,
  #portal-btn-logout-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
	
	border: none;      /* ⭐ 去掉默认边框 */
    outline: none;     /* ⭐ 去掉点击外轮廓 */
    box-shadow: none;  /* ⭐ 确保没有阴影边框 */
  }

  /* 灰色按钮 */
  #portal-btn-dashboard-mobile {
    background: #e5e7eb;
    color: #111827;
  }

  /* 红色按钮 */
  #portal-btn-logout-mobile {
    background: #ef4444;
    color: #ffffff;
  }
  
  /* 移除 mobile 菜单所有链接的下划线 */
  .portal-mobile-mega a {
      text-decoration: none;
  }
 
  /* ============================
   Mobile 双栏 Mega Menu（阿里云）
   ============================ */
  .portal-mobile-mega {
      display: none;
      background: #fff;
      flex-direction: row;
      height: 100%;        /* ⭐ 吃满 portal-mobile-body */
      overflow: hidden;    /* ⭐ 防止外层滚动 */
  }

  body.portal-menu-open .portal-mobile-mega {
      display: flex;
  }

  /* 左栏 */
  .mobile-l1-column {
      width: 35%;
      background: #f3f4f6;
      border-right: 1px solid #e5e7eb;
      overflow-y: auto;
  }

  .mobile-l1-item {
      padding: 14px 16px;
      font-size: 15px;
      cursor: pointer;
  }

  .mobile-l1-item.active {
      background: #e0e7ff;
      color: #1d4ed8;
      font-weight: 500;
  }
  
  /* 一级菜单文字 + 箭头布局 */
  .mobile-l1-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

  /* 默认箭头（朝下） */
  .mobile-l1-arrow {
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid #6b7280; /* 灰色箭头 */
      transition: transform 0.2s ease;
  }

  /* 展开时箭头朝上 */
  .mobile-l1-item.active .mobile-l1-arrow {
      transform: rotate(180deg);
  }

  /* 左栏：一级下的二级组（有三级时才显示） */
.mobile-l1-group {
    display: none;
    border-top: 1px solid #e5e7eb;
}

.mobile-l1-group.active {
    display: block;
}

/* 左栏二级菜单（有三级时） */
.mobile-l2-item-left {
    padding: 12px 16px;
    font-size: 15px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

/* ⭐ 一级 + 二级整体容器（用于整块高亮） */
.mobile-l1-block {
    background: transparent;
}

/* ⭐ 展开时整块变蓝（一级 + 二级一起高亮） */
.mobile-l1-block.active {
    background: #e0e7ff;
}

/* ⭐ 一级菜单背景透明（避免双层蓝色） */
.mobile-l1-item {
    background: transparent !important;
}

/* ⭐ 二级菜单背景透明（让整块背景生效） */
.mobile-l2-item-left {
    background: transparent !important;
}

/* ⭐ 二级菜单 active 时只改变文字颜色，不改变背景 */
.mobile-l2-item-left.active {
    color: #1d4ed8;
    font-weight: 500;
}

  /* 右栏 */
  .mobile-l2-column {
      flex: 1;
      overflow-y: auto;
      padding: 12px 16px;
  }

  /* 三级菜单 */
  .mobile-l3-panel {
      display: none;
      padding-left: 12px;
      border-left: 2px solid #e5e7eb;
      margin-bottom: 10px;
  }

  .mobile-l3-panel.active {
      display: block;
  }

  .mobile-l3-link {
      display: block;
      padding: 8px 0;
      font-size: 14px;
      color: #374151;
  }
  
    /* 二级面板（无三级时使用） */
  .mobile-l2-panel {
      display: none;
  }

  .mobile-l2-panel.active {
      display: block;
  }

  .mobile-l2-link {
      display: block;
      padding: 10px 0;
      font-size: 15px;
      color: #111827;
  }

  .mobile-l2-link:hover {
      color: #1d4ed8;
  }
  
  /* ⭐ 左栏、右栏都必须允许滚动 */
  .mobile-l1-column,
  .mobile-l2-column {
      min-height: 0;   /* ⭐ 关键中的关键 */
      overflow-y: auto;
  }

  /* ⭐ 左栏内部的二级组也要允许滚动 */
  .mobile-l1-group {
      max-height: 100%;
      min-height: 0;
      overflow-y: auto;
  }
  
  /* ⭐ 右侧栏顶部标题（大厂风格） */
  .mobile-panel-title {
      font-size: 16px;     /* ⭐ 字体大小 */
      font-weight: 550;   /* ⭐ 字体粗细 */
      color: #111827;     /* ⭐ 字体颜色 */
      padding: 4px 0 10px 0;
      margin-bottom: 10px;
      border-bottom: 1px solid #e5e7eb; /* ⭐ 分隔线 */
  }
  
    /* ⭐⭐⭐ 手机端四级菜单（新增） ⭐⭐⭐ */

  /* 三级标题 + 箭头 */
  .mobile-l3-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      cursor: pointer;
  }

  /* 三级箭头 */
  .mobile-l3-arrow {
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid #6b7280;
      transition: transform 0.2s ease;
  }

  /* 展开时箭头旋转 */
  .mobile-l3-item.active .mobile-l3-arrow {
      transform: rotate(180deg);
  }

  /* 四级菜单容器（默认隐藏） */
  .mobile-l4-panel {
      display: none;
      padding-left: 16px;
      border-left: 2px solid #e5e7eb;
      margin-bottom: 8px;
  }

  /* 四级菜单项 */
  .mobile-l4-link {
      display: block;
      padding: 6px 0;
      font-size: 14px;
      color: #374151;
  }

 /* ----------------------------------------分割线（下面这段很重要手机菜单导航栏滑动效果）-------------------------------*/
  
  /* === 强制让第二层导航从屏幕最左边开始（覆盖旧规则） === */

/* 1) 去掉导航内层的左侧 padding（全局左留白） */
.portal-nav-second .portal-nav-inner {
  padding-left: 0 !important;
  padding-right: 0 !important; /* 右侧留白用菜单自身或按钮留白处理 */
}

/* 2) 确保 portal-nav-left 不再以 flex 占位（避免撑开左侧） */
.portal-nav-second .portal-nav-left {
  display: block !important;    /* 保留容器但不强制占位 */
  flex: 0 0 auto !important;    /* 不占剩余空间 */
  width: auto !important;
  min-width: 0 !important;
  overflow: visible !important; /* 防止裁剪 */
  margin: 0 !important;
  padding: 0 !important;
}


/* 4) 菜单项本身去掉左侧内边距/外边距，确保文字贴边 */
.portal-menu-mobile-top .mobile-top-link {
  display: inline-block;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* 5) 如果你用过 margin-left 或 transform 抵消，清理它们（保险） */
.portal-nav-second,
.portal-nav-inner,
.portal-nav-left,
.portal-menu-mobile-top,
.portal-menu-mobile-top .mobile-top-link {
  transform: none !important;
}

/* 7) iOS 安全区（可选）：如果你希望在刘海屏上也贴边，考虑安全区 */
.portal-menu-mobile-top {
  padding-left: env(safe-area-inset-left, 0) !important;
  } 
  /* === 手机端：给滑动菜单一个合适的左侧间距（可选 12 / 14 / 16px） === */
:root {
  --mobile-menu-left-gap: 16px; /* ← 改成 12px 或 14px 按需选择 */
  --mobile-menu-right-gap: 56px; /* 给悬浮按钮的右侧留白，按需调整 */
}

/* 确保第一个菜单项没有额外的负 margin 或多余内边距 */
.portal-menu-mobile-top .mobile-top-link:first-child {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* 菜单项触控友好内边距（可微调） */
.portal-menu-mobile-top .mobile-top-link {
  padding: 8px 10px; /* 上下 8px，左右 10px */
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  }
  
  /* ================================
   面包按钮背板样式风格
   =================================*/
/* =========================
   统一导航定位与面包按钮（替换冲突段）
   粘到 @media (max-width:768px) 的末尾，替换掉旧的相关段
   ========================= */

/* 1) 全局高度变量（只在此处定义一次，按实际像素调整） */
:root {
  --portal-nav-height: 56px;         /* 第一层导航高度，按实际调整 */
  --portal-nav-second-height: 48px;  /* 第二层导航高度，按实际调整 */
  --portal-nav-total: calc(var(--portal-nav-height) + var(--portal-nav-second-height));
}

/* 2) 清理会破坏 fixed 定位的 transform（放在末尾以覆盖） */
html, body, #app, .portal-root, .portal-nav, .portal-nav-inner, .portal-mobile-menu-wrapper {
  transform: none !important;
  -webkit-transform: none !important;
}

/* 3) 第一层导航：固定在顶部（第一层在上） */
.portal-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--portal-nav-height) !important;
  z-index: 2400 !important; /* 第一层在上 */
  margin: 0 !important;
  box-sizing: border-box;
}

/* 4) 第二层导航：紧贴第一层下方并固定（不会覆盖第一层） */
.portal-nav-second {
  position: fixed !important;
  top: var(--portal-nav-height) !important; /* 直接等于第一层高度 */
  left: 0 !important;
  right: 0 !important;
  height: var(--portal-nav-second-height) !important;
  z-index: 2390 !important; /* 略低于第一层，确保不被覆盖 */
  margin: 0 !important;
  box-sizing: border-box;
  overflow: visible !important; /* 允许内部绝对定位元素显示 */
}

/* 5) 导航内部垂直居中（保持原有内联布局） */
.portal-nav .portal-nav-inner {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 16px !important;   /* ⭐ 第一层左右 16px 间距 */
  padding-right: 16px !important;
}

.portal-nav-second .portal-nav-inner {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 0 !important;      /* ⭐ 第二层保持贴边，由 .portal-menu-mobile-top 控制间距 */
  padding-right: 0 !important;
}


/* 6) 把面包按钮放回第二层内部右侧（绝对定位，相对于 .portal-nav-second） */
.portal-nav-second .portal-nav-actions {
  position: absolute !important;
  right: calc(env(safe-area-inset-right, 0px) + 0px) !important; /* 紧贴第二层右侧 */
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2450 !important; /* 高于第二层内容，低于第一层仍可调整 */
  pointer-events: auto;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  display: block !important;
}

/* 7) 面包按钮视觉样式（在第二层内） */
.portal-nav-second .portal-nav-actions .portal-mobile-menu-toggle {
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: 0 6px 18px rgba(16,24,40,0.12) !important;
  border: none !important;
  font-size: 20px !important;
  line-height: 1 !important;
  color: #111827 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
}

/* 8) 按下反馈（保持在第二层内） */
.portal-nav-second .portal-nav-actions .portal-mobile-menu-toggle:active {
  transform: translateY(-50%) scale(0.98) !important;
  box-shadow: 0 4px 10px rgba(16,24,40,0.10) !important;
}

/* 9) 页面主体与抽屉/遮罩同步下移，避免被导航遮挡 */
body {
  padding-top: var(--portal-nav-total) !important;
}
.portal-mobile-menu-wrapper {
  top: var(--portal-nav-total) !important;
}
.portal-mobile-overlay {
  top: var(--portal-nav-total) !important;
}

/* 10) 给滑动菜单留出右侧空间，避免被按钮遮挡（按需微调） */
.portal-menu-mobile-top {
  padding-right: calc(env(safe-area-inset-right, 0px) + 64px) !important;
  }
  
  /* ⭐ 第二层导航栏第一个菜单与左侧安全间距（唯品会 / 淘宝标准） */
  .portal-menu-mobile-top {
    padding-left: 16px !important;
  }
  
  /* ⭐⭐⭐ 在这里插入隐藏滚动条的新代码 ⭐⭐⭐ */
  .portal-menu-mobile-top {
      display: flex;
      overflow-x: scroll;
      white-space: nowrap;
      gap: 16px;
      -webkit-overflow-scrolling: touch;

      /* 完全隐藏滚动条 */
      scrollbar-width: none;
  }

  .portal-menu-mobile-top::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
  }
  
  /* ==============================================================================
   ----------------------手机端底部固定导航栏（新增）------------------------------
   ===============================================================================*/    
    /* ⭐⭐⭐ 在这里插入隐藏滚动条的新代码 ⭐⭐⭐ */
  .portal-menu-mobile-top {
      display: flex;
      overflow-x: scroll;
      white-space: nowrap;
      gap: 16px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
  }

  .portal-menu-mobile-top::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
  }

  /* ⭐ 底部固定导航栏（你要插入的部分） */
  .portal-mobile-tabbar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 58px;
      background: #ffffff;
      border-top: 1px solid #e5e7eb;
      display: flex;
      justify-content: space-around;
      align-items: center;
      z-index: 3000;
  }

  .portal-mobile-tabbar .tab-item {
      flex: 1;
      text-align: center;
      text-decoration: none;
      color: #444;
      font-size: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }

  .portal-mobile-tabbar .tab-center .tab-icon {
      font-size: 26px;
      margin-bottom: 1px;
  }

  .portal-mobile-tabbar .tab-center {
      font-weight: 600;
      color: #1d4ed8;
  }

  body {
      padding-bottom: 58px !important;
  }
  
/* -----------------------（第1图标：首页）图标样式---------------------- */
/* ==========================
   （首页）选中版（active）
   ======================== */
/* ⭐ 唯品会首页图标：上尖下平 + 圆角，兼容版 */
.home-icon-active {
  position: relative;
  width: 22px;
  height: 22px;          /* 控制整体高度 */
  background: linear-gradient(180deg, #ff2d7a 0%, #ff5fa2 100%);
  border-radius: 3px;          /* 先整体圆角一层 */
  display: inline-block;
  margin-bottom: 2px;
  box-sizing: content-box;

  /* 上尖下平的五边形轮廓 */
  clip-path: polygon(
    50% 0%,   /* 顶点 */
    100% 32%, /* 右上斜边 */
    100% 100%,/* 右下 */
    0% 100%,  /* 左下 */
    0% 32%    /* 左上斜边 */
  );
}

/* 中间白色横线 */
.home-icon-active::before {
  content: "";
  position: absolute;
  top: 68%;    /* 想更靠上就调小，反之调大 */
  left: 50%;
  width: 10px;
  height: 2.5px;
  background: #fff;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

/* 首页文字高亮 */
.tab-item.active .tab-text {
  color: #ff2d7a;
  font-weight: 600;
  }
 
/* ==========================
   （首页）未选中版
   ======================== */
.home-icon {
  position: relative;
  width: 22px;
  height: 22px;
  display: inline-block;
  margin-bottom: 2px;
}

.home-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #666;
  border-radius: 3px;
  clip-path: polygon(
    50% 0%,
    100% 32%,
    100% 100%,
    0% 100%,
    0% 32%
  );
}

.home-icon::after {
  content: "";
  position: absolute;
  top: 68%;
  left: 50%;
  width: 10px;
  height: 2px;
  background: #666;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

/* -----------------------（第2图标：资讯）图标样式---------------------- */ 
/* =========================
   news 图标：线条轮廓版（未选中）
   ========================= */
.news-icon {
  position: relative;
  width: 20px;
  height: 22px;
  display: inline-block;
  margin-bottom: 2px;
  box-sizing: border-box;

  /* 轮廓线使用 currentColor，方便统一由 .tab-item 控制颜色 */
  color: #666;                 /* 默认颜色（未选中） */
  border-radius: 4px;
  background: transparent;
  border: 2px solid currentColor; /* 线框轮廓 */
}

/* 两条横线（报纸样式）——用伪元素绘制，保证像素一致 */
.news-icon::before,
.news-icon::after {
  content: "";
  position: absolute;
  left: 18%;               /* 距左边 18% */
  width: 60%;              /* 白线占图标宽度的比例 */
  height: 2px;
  background: currentColor; /* 跟随 currentColor（未选中为 #666） */
  border-radius: 2px;
  pointer-events: none;
}

/* 上白线（更靠上） */
.news-icon::before {
  top: 30%;
}

/* 下白线（更靠中下） */
.news-icon::after {
  top: 56%;
  width: 44%;              /* 第二条略短，视觉更平衡 */
}

/* 未选中时文字颜色（保持一致） */
.tab-item .news-icon + .tab-text,
.tab-item .news-icon { color: #666; }

/* 选中态（仍由你现有的 .icon-active 控制高亮版） */
/* 保持现有切换逻辑：.tab-item.active .icon-default {display:none;} .tab-item.active .icon-active {display:inline-block;} */

/* 可选：当你希望未选中也有轻微按下反馈时启用（可删） */
.tab-item .news-icon:active {
  transform: translateY(0.5px);
}

/* 小屏微调（保持比例） */
@media (max-width: 360px) {
  .news-icon { width: 20px; height: 20px; border-width: 1.8px; }
  .news-icon::before { top: 32%; width: 62%; }
  .news-icon::after  { top: 58%; width: 46%; }
}


/* -----------------------（第3图标：消息）图标样式---------------------- */ 
:root{
  --taobao-orange: #FF5000;
  --muted-gray: #666666;
}

/* 包裹层：尺寸由你自由控制 */
.message-icon-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;    /* 想多大改这里,之前写的30px;  */
  height: 100%;
  pointer-events: none;   /* 点不拦截点击 */
  color: var(--muted-gray); /* 让点可用 currentColor 跟随 */
}

/* Lucide 图标自动填满包裹层 */
.message-icon-wrapper .lucide-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke-width: 1.3; /* 与你 SVG 的 stroke-width 保持一致 */
}

/* 三个点的通用样式（使用绝对定位，按百分比随容器缩放） */
.message-icon-wrapper::before,
.message-icon-wrapper::after,
.message-icon-wrapper .dot-middle {
  position: absolute;
  width: 10%;
  height: 10%;
  background: currentColor;
  border-radius: 50%;
  top: 50%;                      /* ← 调整竖向位置（增大往下） */
  transform: translate(-50%, -30%); /* ← 精细下移（比 -50% 更靠下） */
  box-sizing: border-box;
  z-index: 9999;                 /* 确保点在 svg 之上可见 */
  pointer-events: none;
}

/* 左点（伪元素） */
.message-icon-wrapper::before {
  content: "";
  left: 32%;           /* 对应 SVG 中 cx=8.5 的相对位置（约 8.5/24 ≈ 35%） */
}

/* 中点（实际元素） */
.message-icon-wrapper .dot-middle {
  left: 50%;           /* 对应 SVG 中 cx=12 的相对位置（12/24 = 50%） */
}

/* 右点（伪元素） */
.message-icon-wrapper::after {
  content: "";
  left: 68%;           /* 对应 SVG 中 cx=15.5 的相对位置（≈ 15.5/24 ≈ 65%） */
}

/* 选中态：点颜色随 .tab-item.active 变化 */
/* 若你希望点在选中时为白色（在橙色圆内），把 color 设为 #fff 并保持图标背景由现有 active 逻辑控制 */
.tab-item.active .message-icon-wrapper {
  color: var(--taobao-orange); /* 若想点为白色，改为 color: #fff; 并调整 SVG active 填充 */
}

/* 如果你希望选中时点为白色而图标为橙色，使用下面两行替代上面一行：
.tab-item.active .message-icon-wrapper { color: #fff; }
.tab-item.active .message-icon-wrapper .lucide-icon { /* 保持或覆盖 svg 填充为橙色 */ }
*/

/* 小屏微调 */
@media (max-width: 360px) {
  .message-icon-wrapper::before,
  .message-icon-wrapper::after,
  .message-icon-wrapper .dot-middle {
    width: 12%;
    height: 12%;
    top: 58%;     /* 调大可让三点往下移 */
  }
}

/* -----------------------（第4图标：购物车）图标样式---------------------- */ 


/* -----------------------（第5图标：个人中心）图标样式---------------------- */ 
/* 实测数字调大，可以缩小图标与菜单文字间距，调小增加间距 */
.profile-icon {
    margin-top: 6px;   /* 搭配下面的.tab-item { 的gap值微调 */
}

/* --------------------动态高亮active和非active切换---------------------- */ 
/* ---------- 全局切换逻辑（只写一次） ---------- */
/* ⭐ 默认图标（未选中） */
.tab-item .icon-default { display: inline-block; }
.tab-item .icon-active { display: none; }

/* ⭐ 选中图标（高亮） */
.tab-item.active .icon-default { display: none; }
.tab-item.active .icon-active { display: inline-block; }


/* ---------- 图标容器与文本样式 ---------- */
/*.tab-icon { display:inline-block; width:22px; height:22px; vertical-align:middle; }*/
.tab-item { 
    text-decoration:none; 
	color:#666; 
	display:flex; 
	flex-direction:column; 
	align-items:center; 
	gap:2px;       /* 图标与菜单文字间距（这个是所有图标的，，单个图标还是微调 */
	padding:6px 8px;  /* 图标菜单---导航栏上下边的距离 */
   }
.tab-text { 
    font-size:12px; 
	line-height:1; 
	color:#666; 
	}

/* ⭐ 让所有图标自动缩放到 tab-icon 容器内（解决图标与文字不对齐问题） */
/*.portal-mobile-tabbar .tab-icon svg,
.portal-mobile-tabbar .tab-icon i,
.portal-mobile-tabbar .tab-icon .profile-icon svg {
    width: 100%;
    height: 100%;
}因为这几个图标缩放大小效果不同，所以就不用自动缩放了。（因为部分图标是引用图标库，部分是组件，部分SVG代码，部分纯CSS）*/

/* 选中文本高亮 */
.tab-item.active .tab-text { color:#ff2d7a; font-weight:600; }

/* ---------- SVG 视觉微调（确保像素级一致） ---------- */
/* 让 SVG 在不同设备上保持清晰 */
.icon-default, .icon-active {
  display:block;
  /* width:22px;   ← 删除 */
  /* height:22px;  ← 删除 */
  }

/* 未选中线条颜色与粗细（可微调） */
.icon-default g { 
stroke:#444; stroke-width:1.9; 
  }

/* 选中填充版的边缘可加轻微描边（可选） */
.icon-active path { 
shape-rendering:geometricPrecision; 
  }
  
/* ⭐ 统一 Lucide 图标（首页、消息）的线条颜色与粗细 */
.portal-mobile-tabbar .lucide-icon {
    stroke: #666;        /* 统一颜色 */
    stroke-width: 1.9;   /* 统一粗细 */
    color: #666;         /* currentColor = #666 */
	}
	
/* ⭐ 强制所有图标容器宽度一致（控制的是：图标外层的盒子，不是图标本身） */
/* 这个对首页，咨询，消息有效；对购物车，个人中心无效，
因为这两个的样式没写进这个CSS内，所以调整这个代码时，还需单独去调整另外两个图标的代码文件 */
.portal-mobile-tabbar .tab-icon {
    width: 29px;    /* 建议 26px，适配你所有图标 */
    height: 29px;
    display: flex;  /* 图标容器居中用 */
    align-items: center;
    justify-content: center;
  }
  
}  /* ← 这里是 @media 的结束 */



/* ---------------------------------分割线-------------------------------------- */
/* ⭐ 遮罩层（默认隐藏） */
.portal-mobile-overlay {
    display: none;
    position: fixed;
    top: var(--portal-nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.45);   /* ⭐ 半透明黑色，和亚马逊一致 */
    z-index: 1500;                  /* ⭐ 在抽屉下面一层 */
}

/* ⭐ 当菜单打开时显示遮罩 */
body.portal-menu-open .portal-mobile-overlay {
    display: block;
}