/* ============================================
   /portal/assets/css/portal.mobile.tabbar.css
   ============================================ */
  /* ==============================================================================
   ----------------------手机端底部固定导航栏（新增）------------------------------
   ===============================================================================*/   
@media (max-width: 768px) {

  /* ⭐ 底部固定导航栏（你要插入的部分） */
  .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;
  }
  
  /* ⭐ 图标高亮（Lucide 版） */
.tab-item.active .tab-icon .icon-active.lucide-icon {
    stroke: #ff2d7a !important;   /* 唯品会粉 */
    color: #ff2d7a !important;
}
  
/* -----------------------（第1图标：首页）图标样式---------------------- */
/* ==========================
   （首页）未中版
   （用的lucide引用图标，
   所以不写CSS）
   ======================== */

/* ==========================
   （首页）选中版（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;
  }
 
/* -----------------------（第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: 22px; border-width: 1.8px; }
  .news-icon::before { top: 32%; width: 62%; }
  .news-icon::after  { top: 58%; width: 46%; }
}

/* =========================
   news 图标：高亮版（选中）
   ========================= */
.news-icon-active {
  position: relative;
  width: 22px;
  height: 24px;
  display: inline-block;
  margin-bottom: 2px;
  box-sizing: border-box;

  /* ⭐ 背景填充粉色（和购物车、我的一致） */
  background: #ff2d7a;

  /* ⭐ 外框线条变白 */
  border: 2px solid #fff;

  /* ⭐ 让内部横线跟随 currentColor → 白色 */
  color: #fff;

  border-radius: 4px;
}

/* 两条横线（白色） */
.news-icon-active::before,
.news-icon-active::after {
  content: "";
  position: absolute;
  left: 18%;
  width: 60%;
  height: 2px;

  /* ⭐ 横线变白 */
  background: #fff;

  border-radius: 2px;
  pointer-events: none;
}

/* 上横线 */
.news-icon-active::before {
  top: 30%;
}

/* 下横线 */
.news-icon-active::after {
  top: 56%;
  width: 44%;
}

/* 小屏微调 */
@media (max-width: 360px) {
  .news-icon-active { width: 22px; height: 24px; border-width: 1.8px; }
  .news-icon-active::before { top: 32%; width: 62%; }
  .news-icon-active::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%;     /* 调大可让三点往下移 */
  }
}

/* ⭐ ------选中态：下面是消息选中高亮效果代码------- */
/* ⭐ 选中态：让气泡图标（message-circle）也变色 */
.tab-item.active .message-icon-wrapper .lucide-icon {
    stroke: var(--taobao-orange) !important;   /* 淘宝的橙色 */
    color: var(--taobao-orange) !important;   
}

/* ⭐ 消息图标：选中时高亮填充背景 */
.tab-item.active .message-icon-wrapper .lucide-icon {
    stroke: #fff !important;      /* 气泡线条变白 */
    color: #fff !important;       /* currentColor = 白色 */
    fill: #ff2d7a !important;     /* 气泡背景填充粉色（你可换成橙色） */
}

/* ⭐ 消息图标：选中时三个点变白 */
.tab-item.active .message-icon-wrapper::before,
.tab-item.active .message-icon-wrapper::after,
.tab-item.active .message-icon-wrapper .dot-middle {
    background: #fff !important;
}

/* -----------------------（第4图标：购物车）图标样式---------------------- */ 
/* =========================
   图标：高亮版（选中）
   ========================= */

/* 高亮状态：购物车线条变白 */
.tab-item.active .icon-active.lucide-icon {
    color: #fff;
}

/* 包裹层定位 */
.cart-icon-wrapper {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
}

/* 背景闭合形状（默认透明） */
.cart-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: transparent;
    top: 0;
    left: 0;
    z-index: 1;
}

/* 高亮时背景填充粉色 */
.tab-item.active .cart-bg {
    fill: #ff2d7a;
}

/* 购物车图标永远在最上层 */
.cart-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
}

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

/* 选中时：调整图标与文字间距 */
.profile-icon-active {
    margin-top: 6px;
}

/* ⭐------ “我的”图标：笑脸弧线左右轻轻摇摆动画--------- */
.profile-icon-active .smile-line {
    animation: smileSwing 0.80s ease-out;   /* 动画持续时间 */
    transform-origin: center;   /* 以中心为旋转点 */
}

@keyframes smileSwing {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(12deg); }   /* 向右轻轻摆 */
    50%  { transform: rotate(-12deg); }  /* 向左轻轻摆 */
    75%  { transform: rotate(6deg); }   /* 回到右边一点 */
    100% { transform: rotate(0deg); }   /* 回到原位 */
}

/* -------------------------动态高亮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 图标+菜单：“未选中状态（非高亮）”的线条颜色与粗细（灰色 #666。）--------------------- */
.portal-mobile-tabbar .lucide-icon {
    stroke: #666;        /* 统一颜色 */
    stroke-width: 1.5;   /* 统一粗细 */
    color: #666;         /* currentColor = #666 */
	}
	
/* ⭐ 强制所有图标容器宽度一致（控制的是：图标外层的盒子，不是图标本身） */
/* 这个对首页，咨询，消息有效；对购物车，个人中心无效，
因为这两个的样式没写进这个CSS内，所以调整这个代码时，还需单独去调整另外两个图标的代码文件 */
.portal-mobile-tabbar .tab-icon {
    width: 29px;    /* 建议 26px，适配你所有图标 */
    height: 29px;
    display: flex;  /* 图标容器居中用 */
    align-items: center;
    justify-content: center;
  }
  
/* ============================
   Tabbar 交互动画（大厂级）
============================ */

/* 点击时轻微缩放（保持不变） */
.tab-item:active .tab-icon {
    transform: scale(0.92);
    transition: transform 0.12s ease-out;
}

/* 选中时：轻颤 + 微晃（再增强 20%） */
.tab-item.active .tab-icon {
    animation: tabIconActive 0.45s cubic-bezier(.34,1.56,.64,1);
}

/* ⭐ 轻颤 + 微晃（增强 40% 总量） */
@keyframes tabIconActive {
    0%   { transform: scale(1.00) rotate(0deg); }

    25%  { transform: scale(1.06) rotate(2.8deg); }   /* 小幅放大 + 轻微右晃 */
    50%  { transform: scale(0.96) rotate(-2.8deg); }  /* 小幅回缩 + 左晃 */

    75%  { transform: scale(1.03) rotate(1.4deg); }   /* 回弹 + 微右晃 */
    100% { transform: scale(1.00) rotate(0deg); }     /* 稳定在高亮状态 */
	}

}  /* ← 这里是 @media 的结束 */