/* ══════════════════════════════════════════════════════════════════
   🍮 菜单选中态 + 头像 —— 从 image2pro.top 实测提取
   
   核心认知：对标站的选中项**不改整行背景**，而是靠三件事区分：
     ① 右侧滑入对勾（.seg-opt-tick：opacity 0→1 + scale .5→1）
     ② 图标底色变品牌色（按模式不同色：橘/蓝/绿）
     ③ cursor 变 grab
   
   实测参数：
     .seg-opt-tick        18×18，opacity:0，transform:scale(.5)
     .seg-opt-tick svg    15×15，stroke:#fff，stroke-width:3
     .sel .tick           opacity:1，transform:scale(1)
     过渡                 opacity .3s, transform .35s cubic-bezier(.3,1.6,.5,1)
     .seg-opt             transform:translateY(-9px) scale(.96); opacity:0
     .open .seg-opt       transform:translateY(0) scale(1); opacity:1
                          错峰 var(--d,0s)
     .open .seg-opt:hover transform:scale(1.02)，.18s cubic-bezier(.3,1.4,.4,1)
     .open .seg-opt:active transform:scale(.97)，.1s ease
   
   头像（.pf-avatar）：
     44×44，border-radius:50%
     background:var(--avatar-bg,#f0a568)
     box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 10px rgba(205,111,71,.35)
     hover: filter:brightness(1.04)
     focus-visible: outline 2px #fff, offset 2px
   ══════════════════════════════════════════════════════════════════ */

/* ---------- 菜单项：进入时的错峰弹入 ---------- */
.st-ws-menu .st-ws-item{
  position:relative;
  transform:translateY(-9px) scale(.96);
  opacity:0;
  transition:background .22s ease, transform .16s ease, opacity .16s ease;
}
.st-ws-menu.is-open .st-ws-item{
  transform:translateY(0) scale(1);
  opacity:1;
  transition:
    background .22s ease,
    transform .5s var(--jelly-ease-soft) var(--d, 0s),
    opacity .38s ease var(--d, 0s);
}
/* hover：轻微放大 */
.st-ws-menu.is-open .st-ws-item:hover{
  transform:translateY(0) scale(1.02);
  transition:background .18s ease, transform .18s cubic-bezier(.3,1.4,.4,1);
}
/* 按下：压回 */
.st-ws-menu.is-open .st-ws-item:active{
  transform:translateY(0) scale(.97);
  transition:transform .1s ease;
}

/* 错峰延迟（7 项） */
.st-ws-menu.is-open .st-ws-item:nth-child(1){--d:0s}
.st-ws-menu.is-open .st-ws-item:nth-child(2){--d:.045s}
.st-ws-menu.is-open .st-ws-item:nth-child(3){--d:.09s}
.st-ws-menu.is-open .st-ws-item:nth-child(4){--d:.135s}
.st-ws-menu.is-open .st-ws-item:nth-child(5){--d:.18s}
.st-ws-menu.is-open .st-ws-item:nth-child(6){--d:.225s}
.st-ws-menu.is-open .st-ws-item:nth-child(7){--d:.27s}
.st-ws-menu.is-open .st-ws-item:nth-child(8){--d:.315s}

/* ---------- 选中态：对勾 + 图标变色 ---------- */
.st-ws-item .st-ws-tick{
  width:18px; height:18px; flex:none;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.5);
  transition:opacity .3s, transform .35s cubic-bezier(.3,1.6,.5,1);
}
.st-ws-item .st-ws-tick svg{
  width:15px; height:15px;
  /* 关键：不能用白色 —— 选中项背景是半透明白，白勾等于隐形 */
  stroke:currentColor; stroke-width:3; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}
/* 勾色跟随模式品牌色 */
.st-ws-item .st-ws-tick{color:rgba(26,26,26,.5)}
.st-ws-item.is-on[data-mode="image"] .st-ws-tick{color:#b8641a}
.st-ws-item.is-on[data-mode="chat"]  .st-ws-tick{color:#0c64cd}
.st-ws-item.is-on:not([data-mode])   .st-ws-tick{color:#a8532f}
.st-ws-item.is-on{
  cursor:grab;
  background:rgba(255,255,255,.9) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 2px 8px rgba(120,100,95,.09);
}
.st-ws-item.is-on:active{cursor:grabbing}
.st-ws-item.is-on .st-ws-tick{
  opacity:1; transform:scale(1);
}

/* 图标按模式染色（实测色值）*/
.st-ws-item.is-on .st-ws-ico{color:#fff}
.st-ws-item.is-on[data-mode="image"] .st-ws-ico{
  background:linear-gradient(135deg,rgba(220,120,30,.95),rgba(180,80,10,.85));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 2px 8px rgba(220,120,30,.5);
  border-color:transparent;
}
.st-ws-item.is-on[data-mode="chat"] .st-ws-ico{
  background:linear-gradient(135deg,rgba(20,145,230,.95),rgba(12,100,205,.85));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 2px 8px rgba(20,130,245,.5);
  border-color:transparent;
}
/* 导航类（非模式切换）选中：中性金 */
.st-ws-item.is-on:not([data-mode]) .st-ws-ico{
  background:linear-gradient(135deg,rgba(205,111,71,.95),rgba(168,83,47,.85));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 2px 8px rgba(205,111,71,.45);
  border-color:transparent;
}

/* 选中项文字加重 */
.st-ws-item.is-on .st-ws-txt b{font-weight:700}
.st-ws-item.is-on .st-ws-txt small{color:rgba(26,26,26,.56)}

/* ---------- 头像（.pf-avatar 实测参数）---------- */
.st-avatar{
  width:22px; height:22px;
  border-radius:50%;
  flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; line-height:1;
  color:#fff;
  background:var(--avatar-bg, #f0a568);
  border:0;
  overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 3px 10px rgba(205,111,71,.35);
  transition:filter .18s ease, transform .3s var(--jelly-ease-soft);
}
.st-avatar:hover{filter:brightness(1.04); transform:scale(1.06)}
.st-avatar img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  border-radius:50%;
}
/* 未登录：中性灰 */
.st-avatar.is-guest{
  background:rgba(255,255,255,.34);
  color:rgba(26,26,26,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 2px 6px rgba(120,100,160,.16);
}

@media (prefers-reduced-motion:reduce){
  .st-ws-menu .st-ws-item,
  .st-ws-menu.is-open .st-ws-item,
  .st-ws-item .st-ws-tick,
  .st-avatar{
    transition-duration:.01ms!important;
    transform:none!important;
    opacity:1!important;
  }
  .st-ws-item .st-ws-tick{opacity:0!important}
  .st-ws-item.is-on .st-ws-tick{opacity:1!important}
}