/* 悬浮框外框 */
.dastra_sider_bar {
  z-index: 999999;
  position: fixed;
  right: 0;
  top: 30%;
  /* 🌟 关键修复：去掉 width: 50px，改用 auto 或者干脆不写，防止裁剪 */
  width: auto; 
  background-color: transparent;
  /* 防止动画时出现横向滚动条 */
  overflow: visible; 
}

/* 列表容器 */
.dastra_sider_bar ul {
  padding: 0;
  margin: 0;
  list-style: none;
  /* 让 ul 包裹所有 li，靠右对齐 */
  display: flex;
  flex-direction: column;
  align-items: flex-end; 
}

/* 单个列表项 */
.dastra_sider_bar li {
  position: relative;
  height: 50px;
  width: 50px; 
  background: var(--color-primary, #0056b3); /* 蓝色背景 */
  margin-bottom: 2px;
  /* 右侧的圆角 */
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  transition: width 0.3s ease; 
  /* 保证里面的内容超出后不换行 */
  white-space: nowrap; 
}

/* 🌟 核心：鼠标悬停时，当前 li 宽度变长 */
.dastra_sider_bar li:hover {
  width: 280px; 
}

/* 图标样式（固定在右侧） */
.dastra_sider_bar li i {
  position: absolute;
  right: 0; 
  top: 0;
  display: block;
  width: 50px;
  height: 50px;
  color: #fff;
  font-size: 24px;
  text-align: center;
  line-height: 50px;
  z-index: 2;
}

/* 文字容器 */
.dastra_sider_bar .column {
  position: relative;
  height: 100%;
}

/* 文字容器（靠左对齐） */
.dastra_sider_bar .info-text {
  position: absolute;
  top: 0;
  left: 0; 
  display: flex;
  align-items: center;
  height: 100%;
  width: 230px; 
  color: #fff;
  font-size: 14px;
  font-family: Arial, sans-serif;
  padding-left: 15px; 
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

/* 🌟 鼠标悬停时，文字显现 */
.dastra_sider_bar li:hover .info-text {
  opacity: 1;
}

.dastra_sider_bar .info-text .label {
  font-weight: bold;
  margin-right: 5px;
}