/* ==========================================================================
   悬浮侧边栏样式 (Floating Sidebar Style)
   包含：
   1. 3D旋转兔子雪碧图动画（120px 饱满尺寸 + 蓝色投影）
   2. 功能图标组（50px 宽，内部 SVG 图标严格保持 23px）
   4. TOP 返回顶部按钮（与悬浮栏 100% 严格垂直对齐，从右侧滑入，不影响原栏）
   5. 5px 精修小圆角
   6. 展开面板一（客服联系人：宽度 230px，紧凑精细排版）
   7. 展开面板二（工单/反馈/举报：宽度 230px，与面板一宽度完全一致）
   8. 展开面板三（双二维码面板：缩减至 268px 紧凑并排）
   ========================================================================== */

:root {
  --nuoang-sidebar-primary-color: #3269ff;       /* 主题蓝 */
  --nuoang-sidebar-primary-hover: #3884ff;       /* 悬浮浅蓝 */
  --nuoang-sidebar-primary-active: #0e4fd1;      /* 点击深蓝 */
  --nuoang-sidebar-bg: #ffffff;                  /* 卡片背景白 */
  --nuoang-sidebar-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); /* 柔和阴影 */
  --nuoang-sidebar-shadow-hover: 0 6px 18px rgba(50, 105, 255, 0.18);
  --nuoang-sidebar-border-radius: 5px;           /* 圆角（5px 精致微圆角） */
  --nuoang-sidebar-icon-color: #262626;          /* 图标默认颜色 */
  --nuoang-sidebar-divider: #f0f0f0;             /* 分割线颜色 */
  --nuoang-sidebar-width: 50px;                  /* 悬浮栏基准宽度 */
}

/* 侧边栏总固定容器 (宽度明确固定为 50px，严格垂直对齐) */
.floating-sidebar {
  position: fixed;
  right: 20px;
  top: 58%;
  transform: translateY(-50%);
  z-index: 99999;
  width: var(--nuoang-sidebar-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   1. 3D 旋转兔子动画 (雪碧图 Sprite)
   原图尺寸: 300px * 10080px (共 48 帧，每帧 300px * 210px，宽高比 10:7)
   120px 规格：宽 120px，高 84px，雪碧总高 4032px (84px * 48帧，完全精确整除)
   -------------------------------------------------------------------------- */
.sidebar-mascot {
  position: relative;
  width: 120px;                   /* 保持 120px 饱满大尺寸 */
  height: 96px;                   /* 兔子 + 投影的高度 */
  /* 通过负外边距让 120px 的兔子在 50px 的卡片上方水平严格居中对称溢出 */
  margin-left: calc((var(--nuoang-sidebar-width) - 120px) / 2);
  margin-right: calc((var(--nuoang-sidebar-width) - 120px) / 2);
  margin-bottom: 2px;             /* 与下方卡片紧凑贴合 */
  z-index: 2;
  cursor: pointer;
  pointer-events: auto;
  flex-shrink: 0;
}

/* 舞台蓝光去掉，只用深色投影烘托悬浮感 */
.sidebar-mascot::before {
  display: none;
}

/* 底部椭圆投影，让白兔在白底上也有层次 */
.sidebar-mascot::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 70px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(29, 78, 216, 0.35) 0%, rgba(29, 78, 216, 0) 70%);
  z-index: 0;
}

/* 兔子裁剪容器：只显示一帧，防止雪碧图溢出 */
.sidebar-mascot .rabbit-clip {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 84px;
  overflow: hidden;
  z-index: 1;
}

.sidebar-mascot .rabbit-sprite {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 4032px;                 /* 84px * 48帧 = 4032px */
  background: url('../images/rotating-rabbit.png') no-repeat left top;
  background-size: 120px 4032px;
  /* 48 帧阶梯式动画，2.4 秒平滑旋转一圈 */
  animation: rabbit-rotate 2.4s steps(48) infinite;
}

/* 鼠标悬停在侧边栏或兔子上时加速旋转，增加趣味互动 */
.sidebar-mascot:hover .rabbit-sprite {
  animation-duration: 1.4s;
}

@keyframes rabbit-rotate {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-4032px);
  }
}

/* --------------------------------------------------------------------------
   2. 中间功能图标卡片 (SVG 图标大小严格保持 23px)
   -------------------------------------------------------------------------- */
.sidebar-menu-card {
  position: relative;
  width: 100%;
  background: var(--nuoang-sidebar-bg);
  border-radius: var(--nuoang-sidebar-border-radius);
  box-shadow: var(--nuoang-sidebar-shadow);
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 0;
  transition: box-shadow 0.25s ease;
  flex-shrink: 0;
}

.sidebar-menu-card:hover {
  box-shadow: var(--nuoang-sidebar-shadow-hover);
}

/* 菜单项 */
.sidebar-item {
  position: relative;
  width: 100%;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--nuoang-sidebar-icon-color);
  border-radius: 4px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

/* 鼠标悬浮激活项浅灰底色 */
.sidebar-item:hover {
  background-color: #f2f4f7;
  color: var(--nuoang-sidebar-primary-color);
}

/* 内部 SVG 图标严格保持 23px 不变 */
.sidebar-item svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease, transform 0.2s ease;
}

.sidebar-item:hover svg {
  transform: scale(1.06);
}

/* 分割线 */
.sidebar-divider {
  width: 26px;
  height: 1px;
  background-color: var(--nuoang-sidebar-divider);
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   4. 底部 TOP 按钮 (返回顶部)
   -------------------------------------------------------------------------- */
.sidebar-top-btn {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: 100%;
  height: 44px;
  background: var(--nuoang-sidebar-bg);
  border-radius: var(--nuoang-sidebar-border-radius);
  box-shadow: var(--nuoang-sidebar-shadow);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  color: var(--nuoang-sidebar-primary-color);

  /* 初始隐藏：透明且水平向右偏移 */
  opacity: 0;
  visibility: hidden;
  transform: translateX(45px);
  pointer-events: none;
  transition: opacity 0.3s ease,
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.3s ease,
              background-color 0.2s ease,
              box-shadow 0.25s ease;
}

/* 页面向下滑动时激活：从右侧平滑滑入，与上方卡片 100% 严密对齐 */
.sidebar-top-btn.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

/* 悬停微抬效果 */
.sidebar-top-btn.show:hover {
  transform: translateY(-2px);
  box-shadow: var(--nuoang-sidebar-shadow-hover);
  background-color: #f8fbff;
}

.sidebar-top-btn .arrow-icon {
  width: 15px;
  height: 11px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-top-btn .arrow-icon svg {
  width: 15px;
  height: 11px;
  display: block;
}

.sidebar-top-btn .text {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  font-family: Arial, -apple-system, sans-serif;
  line-height: 1;
}

/* ==========================================================================
   展开面板统一公共基础样式 (右侧三角箭头、平滑滑出动效、纯白大投影卡片)
   ========================================================================== */
.flyout-panel {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease;
  z-index: 1000;
  text-align: left;
}

/* 小三角箭头 (纯白实心三角形，精准指向右侧触发图标中心) */
.flyout-panel::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -7px;
  transform: translateY(-50%);
  border-width: 7px 0 7px 7px;
  border-style: solid;
  border-color: transparent transparent transparent #ffffff;
}

/* --------------------------------------------------------------------------
   5. 面板一：专属客服联系人列表 (简云锤锤、简云妮妮、微信客服锤锤、客服热线)
   尺寸：宽度 230px，与面板二完全一致；内容微调小一点点
   -------------------------------------------------------------------------- */
.sidebar-popover-panel {
  width: 230px;                   /* 与面板二宽度严格一致保持 230px */
  padding: 4px 0;
}

/* 悬停在线客服按钮或耳机图标展示面板一 */
.sidebar-item[data-action="phone"]:hover .sidebar-popover-panel,
.sidebar-service-btn:hover .sidebar-popover-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.cs-row-item {
  display: flex;
  align-items: center;
  padding: 10px 14px;             /* 紧凑内边距 */
  text-decoration: none;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cs-row-item:hover {
  background-color: #f8faff;
}

.cs-row-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 1px;
  background-color: #f2f3f5;
}

/* 头像微调小至 38px */
.cs-avatar-box {
  position: relative;
  width: 38px;
  height: 38px;
  margin-right: 11px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-avatar-box svg,
.cs-avatar-box img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: block;
}

/* 绿色在线状态指示圆点调小至 10px */
.cs-online-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  background-color: #1bb934;
  border: 1.5px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.cs-text-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cs-title {
  font-size: 14px;                /* 由 15px 微调至 14px */
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.25;
  letter-spacing: 0.2px;
}

.cs-subtitle {
  font-size: 12px;                /* 由 13px 微调至 12px */
  color: #666666;
  line-height: 1.25;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   6. 面板二：工单 / 反馈 / 举报面板 (参考图 2 高保真还原)
   尺寸：宽度 230px，与面板一完全一致；内容微调小一点点
   -------------------------------------------------------------------------- */
.sidebar-workorder-panel {
  width: 230px;                   /* 与面板一宽度严格一致保持 230px */
  padding: 4px 0;
}

/* 悬停笔形反馈图标展示面板二 */
.sidebar-item[data-action="feedback"]:hover .sidebar-workorder-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.wo-row-item {
  display: flex;
  align-items: center;
  padding: 11px 14px;             /* 紧凑内边距 */
  text-decoration: none;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.wo-row-item:hover {
  background-color: #f8faff;
}

.wo-row-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 1px;
  background-color: #f2f3f5;
}

/* 左侧图标容器微调至 26px */
.wo-icon-box {
  width: 26px;
  height: 26px;
  margin-right: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #262626;
}

.wo-icon-box svg {
  width: 22px;                    /* 由 28px 微调至 22px */
  height: 22px;
  display: block;
}

.wo-text-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wo-title {
  font-size: 14px;                /* 由 16px 微调至 14px */
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.25;
}

.wo-subtitle {
  font-size: 12px;                /* 由 13px 微调至 12px */
  color: #666666;
  line-height: 1.25;
  margin-top: 2px;
}

.wo-subtitle.highlight-orange {
  color: #ff6a00;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   7. 面板三：微信客服 & 微信公众号 双二维码面板 (参考图 1 高保真还原)
   尺寸：缩减至 268px 紧凑并排；二维码与文字同步微调收敛
   -------------------------------------------------------------------------- */
.sidebar-qrcode-panel {
  width: 268px;                   /* 由 330px 收缩至 268px */
  padding: 14px 12px 12px;        /* 紧凑内边距 */
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* 悬停矩阵/二维码图标展示面板三 */
.sidebar-item[data-action="qrcode"]:hover .sidebar-qrcode-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.qr-col-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 112px;                   /* 单列微调至 112px */
}

/* 二维码外层白底卡片微调至 108px */
.qr-card-frame {
  position: relative;
  width: 108px;
  height: 108px;
  background: #ffffff;
  border-radius: 5px;
  border: 1px solid #edf0f5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.qr-card-frame:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.qr-card-frame svg,
.qr-card-frame img {
  width: 96px;                    /* 由 116px 微调至 96px */
  height: 96px;
  display: block;
}

/* 二维码下方名称微调至 12px */
.qr-name-label {
  font-size: 12px;                /* 由 14px 微调至 12px */
  font-weight: 500;
  color: #333333;
  margin-top: 8px;
  letter-spacing: 0.2px;
}

/* --------------------------------------------------------------------------
   移动端隐藏悬浮侧边栏
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .floating-sidebar {
    display: none !important;
  }
}