/* =============================================================================
   灵络AI · 左侧菜单统一化（sidebar chrome）v1
   -----------------------------------------------------------------------------
   只解决"菜单本身的风格不统一"，不碰页面内容区。

   诊断出来的 9 个具体问题，本文件逐条对应（编号见 docs/SIDEBAR-UI-SPEC.md）：
     ① 行高 3 种（40 / 37 / 35），由"有没有徽章"和"徽章里是不是中文"决定
     ② 激活色硬编码 #06f 蓝色，与品牌色无关
     ③ 悬停态和激活态视觉完全一样，无法区分
     ④ 激活时用 filter:invert(...) 给图标改色，遇到彩色 logo 会变色
     ⑤ 边框写 .5px，在不同 DPR 下渲染不一致
     ⑥ 红点定位在"文字右侧 -8px"，x 位置随文字长度漂移（实测跨度 51px）
     ⑦ 徽章左边不齐（实测左边界跨度 51px）、内边距 5px、圆角 5px 不在刻度上
     ⑧ 分组标题 margin-top 10px，与列表 gap 5px 不成节奏
     ⑨ 徽章 margin-left:5px 与菜单项 gap:8px 两个间距值

   选择器一律用 [class*="..."] 子串匹配，不用带哈希的完整类名
   （原类名形如 _siderbar_item_fsy3t_80，哈希会随构建变化）。

   接入：在 mirror_local/index.html 的 </head> 前、yyai8-design-tokens.css 之后加一行
       <link rel="stylesheet" href="/css/yyai8-sidebar.css">
   回滚：删掉那一行即可。
   ============================================================================= */


/* =============================================================================
   ① 菜单项：固定行高，取消"有没有徽章高度不一样"
   ============================================================================= */

li[class*="siderbar_item_"]:not([class*="siderbar_item_line"]) {
  height: 40px;                 /* ① 强制 40px：原来 40/37/35 三种 */
  box-sizing: border-box;
  padding: 0 10px;
  gap: 6px;                     /* ⑨ 图标盒从 20 加到 24，间距相应从 8 收到 6 */
  border-radius: 8px;
  border-width: 1px;            /* ⑤ 替掉 .5px */
  border-style: solid;
  /* !important 不能省：这 1px 透明边框是**占位**用的（hover/active 换色时不抖）。
     任何带 !important 的全局 border-color 规则都会把它描成实色 ——
     2026-10 就被颜色收敛层坑过一次，整列菜单被描上浅灰边。 */
  border-color: transparent !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* 隐藏项（股票分析 / 免费工具 / 3D 建模）保持隐藏语义，避免占位 */
li[class*="siderbar_item_"]:not([class*="siderbar_item_line"])[style*="display: none"] {
  height: 0;
}


/* =============================================================================
   ②③ 悬停 与 激活 分开：悬停只提亮背景，激活才上品牌色
   ============================================================================= */

/* 悬停：不改变文字颜色，不改变边框颜色 —— 与激活态明确区分
   ⚠️ 必须把激活项排除掉（:not([class*="siderbar_item_on_"])）：
   否则鼠标一移到当前选中项上，悬停的灰底就把品牌紫底盖掉，颜色"消失"了。 */
li[class*="siderbar_item_"]:not([class*="siderbar_item_line"]):not([class*="siderbar_item_on_"]):hover {
  background: rgba(255, 255, 255, .06) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}
/* 激活项自己也有悬停反馈：紫底加深一档，不换色 */
li[class*="siderbar_item_on_"]:hover {
  background: rgba(124, 58, 237, .40) !important;
}

/* 激活：白字 + 深一档的品牌紫底 + 1px 内描边；替掉硬编码的 #06f / #0057ff0f
   演进过程：青绿底(#13AB92 字) → 淡紫底 + 淡紫字（对比度 2.79，看不清、也显廉价）
   → 现在的做法：**文字回到白色**，靠底色和描边表达"选中"。
   深色侧栏里，白字永远是最干净的；紫色只做底，不做字。 */
li[class*="siderbar_item_on_"] {
  background: rgba(124, 58, 237, .30) !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .28) !important;
  color: #FFFFFF !important;
}
li[class*="siderbar_item_on_"]::before {
  content: "";
  position: absolute;
  left: -9px;                   /* 让指示条落在侧栏左侧留白里 */
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--yy-brand-400, #A78BFA);
}


/* =============================================================================
   ④ 图标：关掉改色 hack，统一容器尺寸
   -----------------------------------------------------------------------------
   原实现：filter:invert(48%) sepia(98%) saturate(7499%) hue-rotate(212deg)
                  brightness(108%) contrast(107%)
   问题：这套滤镜只对"白色单色图标"成立。DeepSeek V4 是全彩品牌 logo，
        激活时会变成一张反色图；智能修图(\"Ps\")、视频生成3.0(\"AI\") 是文字图标，
        也会一起被染色。
   改为：激活态不再改图标颜色，只用背景 + 文字色 + 左侧指示条表达选中。
   ============================================================================= */

li[class*="siderbar_item_"] img[class*="siderbar_item_icon_"] {
  width: 24px;                  /* ★ 24px 盒子：归一化图标是 24 viewBox / 20 墨迹，
                                   渲染成 24px 时墨迹正好 20px，全列一致且比原来略大 */
  height: 24px;
  flex: 0 0 24px;
  object-fit: contain;
  filter: none !important;
}


/* =============================================================================
   ⑥ 文字 + 红点：红点从"绝对定位漂移"改成行内固定槽位
   -----------------------------------------------------------------------------
   原来是 span 的 ::after，position:absolute; right:-8px; top:1px
   → 红点的 x 随文字长度变化（实测 99px ~ 150px，跨度 51px），
     整体看是一条歪掉的斜线。
   改为 span 内部 flex 行内元素，永远距文字 4px 且垂直居中。
   ============================================================================= */

li[class*="siderbar_item_"] > span[class*="siderbar_item_name_"] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;              /* 原 15px，收到整站的 14px 正文档 */
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  flex: 1 1 auto;               /* ★ 吃掉剩余空间，把红点顶到右侧固定列 */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

li[class*="siderbar_item_"] > span[class*="siderbar_item_name_dot_"]::after {
  content: "";
  position: static;             /* ⑥ 关键：取消绝对定位 */
  display: block;
  margin-left: auto;            /* ★ 推到标签区最右 → 所有红点排成一列 */
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yy-color-danger, #DC2626);
}


/* =============================================================================
   ⑦⑨ 徽章：固定 60px 一列 + 右对齐 + 统一内边距/圆角
   -----------------------------------------------------------------------------
   原来 padding:5px、border-radius:5px、margin-left:5px，且紧跟文字
   → 左边不齐（实测左边界 112px ~ 163px，跨度 51px）。

   为什么必须给固定宽度：
   侧栏内容区只有 195px（215 - 左右各 10px 内边距）。要让徽章排成一列，
   只能让它在 flex 里占一个**固定**宽度，再由 margin-left:auto 推到最右。
   如果只写 max-width，长标签会把空间吃光，auto 外边距退化成 0，又变成不齐。

   实测（215px 侧栏，14px 标签，11px 徽章）：
     · 徽章左边界 唯一值 {159}   ← 完全对齐
     · 徽章右边界 唯一值 {219}   ← 完全对齐
     · 没有条目溢出
     · 代价：6 个徽章文案被截断 + 1 个标签被截断

   被截断的 6 个徽章文案（建议在压缩 JS 里改短，改完就不截断了）：
     绘图 / 修图 / 图片创作  →  绘图修图
     抠图、一键PS           →  一键抠图
     3D手办、文生图          →  3D手办
     画布生图/画布视频        →  画布视频
     试衣、换背景            →  试衣换装
     Seedance2.0            →  视频2.0
   ============================================================================= */

li[class*="siderbar_item_"] div[class*="siderbar_item_label_"] {
  /* 用 block + line-height 而不是 flex：flex 的 justify-content:center 在
     内容超宽时会向两侧溢出，overflow:hidden 就把开头也裁掉（实测出现
     "/ 修图 / 图片" 这种把首个字切掉的坏效果）。block 才能让
     text-overflow:ellipsis 正常从右侧收尾。 */
  display: block;
  flex: 0 0 60px;               /* ⑦ 固定宽度 = 对齐的前提 */
  width: 60px;
  max-width: 60px;
  height: 20px;
  padding: 0 3px;
  box-sizing: border-box;
  border-radius: 6px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .62) !important;
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  margin-left: auto !important; /* ⑦ 推到最右 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 如果想让侧栏更安静，取消下面这段注释：徽章整列隐藏（同时消除全部截断） */
/*
li[class*="siderbar_item_"] div[class*="siderbar_item_label_"] { display: none !important; }
*/


/* =============================================================================
   ⑧ 分组标题 + 分隔线 + 列表节奏
   ============================================================================= */

[class*="siderbar_item_line_name_"] {
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, .45) !important;
  padding: 0 10px !important;
  margin-top: 14px !important;   /* ⑧ 原来 10px，与 gap 5px 不成节奏 */
  margin-bottom: 2px !important;
}

/* 分隔线统一成一种（原来 li 分隔线和子菜单标题各写了一套） */
li[class*="siderbar_item_line"] {
  margin-top: 2px;
}
li[class*="siderbar_item_line"]::after {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, .18),
    rgba(255, 255, 255, 0)) !important;
  opacity: 1 !important;
}

/* 列表：与原 gap:5px 收敛到 4px，和 8px 基准刻度对齐 */
ul[class*="siderbar_list_"] {
  gap: 4px !important;
  padding: 8px 0 4px !important;
}


/* =============================================================================
   子菜单（点开分类后出现的两列小卡片）同步同一套规则
   ============================================================================= */

[class*="siderbar_child_item_"] {
  height: 40px;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: 8px;
  border-width: 1px;
  border-style: solid;
  /* 和一级菜单项同理：这 1px 是占位用的，必须显式透明，
     否则会吃到 Tailwind preflight 的 `border-color:#e5e7eb` 默认值。 */
  border-color: transparent !important;
}
[class*="siderbar_child_item_"]:not([class*="siderbar_child_item_on_"]):hover {
  background: rgba(255, 255, 255, .06) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}
[class*="siderbar_child_item_on_"]:hover {
  background: rgba(124, 58, 237, .40) !important;
}
[class*="siderbar_child_item_on_"] {
  background: rgba(124, 58, 237, .30) !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .28) !important;
  color: #FFFFFF !important;
}
[class*="siderbar_child_item_on_"] img,
[class*="siderbar_child_item_"] img {
  filter: none !important;
}
[class*="siderbar_child_item_"] span {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
[class*="siderbar_child_title_"] {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, .45) !important;
}