/* T261023-09 v10.6 — 导航栏消息铃铛（普通用户）
   设计对齐站内规范：3px 卡片圆角 / 发丝描边 / 不堆阴影 / 金色作强调。
   面板固定定位在导航下方右侧，与 .nav-user-menu 的语汇保持一致。 */

.nav-bell{ position:relative; display:inline-flex; align-items:center; }

.nav-bell-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0;
  background:none; border:1px solid var(--line); border-radius:50%;
  color:var(--bone-dim); cursor:pointer;
  transition:color .35s cubic-bezier(.22,.61,.36,1), border-color .35s cubic-bezier(.22,.61,.36,1), background .35s;
}
.nav-bell-btn:hover{ color:var(--bone); border-color:rgba(223,231,224,.34); background:rgba(223,231,224,.035); }
.nav-bell-btn[aria-expanded="true"]{ color:var(--gold); border-color:rgba(201,162,74,.5); }

/* v10.9 —— 同 admin 侧：`hidden` 要能压过 display:inline-flex */
.nav-bell-badge[hidden]{ display:none !important; }
.nav-bell-badge{
  position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--vermilion); color:#fff; border-radius:9px;
  font-size:9px; line-height:1; letter-spacing:0; font-variant-numeric:tabular-nums;
}

.nav-bell-panel{
  position:absolute; top:calc(100% + 12px); right:0; z-index:60;
  width:min(340px, calc(100vw - 32px));
  background:var(--ink); border:1px solid var(--line); border-radius:3px;
  overflow:hidden;
}
.nav-bell-hd{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border-bottom:1px solid var(--line-soft);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.nav-bell-read{
  background:none; border:0; padding:0; cursor:pointer;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
}
.nav-bell-read:hover{ color:var(--bone); }

.nav-bell-list{ max-height:320px; overflow:auto; }
.nav-bell-item{
  display:grid; gap:3px; padding:12px 14px; text-decoration:none;
  border-bottom:1px solid var(--line-soft);
  transition:background .35s, box-shadow .35s;
}
.nav-bell-item:last-child{ border-bottom:0; }
.nav-bell-item:hover{ background:rgba(223,231,224,.035); box-shadow:inset 2px 0 0 var(--vermilion); }
.nav-bell-item b{ font-size:12.5px; font-weight:500; color:var(--bone-dim); letter-spacing:.02em; }
.nav-bell-item.is-unread b{ color:var(--bone); }
.nav-bell-item i{ font-style:normal; font-size:11px; line-height:1.65; color:var(--muted); }
.nav-bell-item em{ font-style:normal; font-size:9.5px; letter-spacing:.12em; color:rgba(223,231,224,.34); }

.nav-bell-empty{ margin:0; padding:22px 14px; text-align:center; font-size:11.5px; color:var(--muted); }

/* v11.2 —— 手机宽度实测：面板 340px 锚在铃铛（靠右）上会溢出视口
   （实测 panel.right=477 > viewport 390）。改为以**视口**为基准固定定位，
   左右各留 12px，宽度自适应。 */
@media (max-width:620px){
  .nav-bell-panel{
    position:fixed; top:64px; left:12px; right:12px; width:auto;
    max-height:calc(100vh - 80px); overflow:auto;
  }
}

/* v10.10 —— 面板底部「全部消息 →」入口（指向新页 /messages/） */
.nav-bell-foot{
  display:block; padding:10px 14px; text-align:center; text-decoration:none;
  font-size:11px; letter-spacing:.12em; color:var(--gold);
  border-top:1px solid var(--line-soft);
}
.nav-bell-foot:hover{ background:rgba(223,231,224,.035); color:var(--bone); }

/* ============================================================================
   T261028-49 v22.1 —— 前台导航「管理员紫铃」（仅 isAdmin 渲染）
   ----------------------------------------------------------------------------
   语义与后台紫铃一致：数字=未读管理员消息（读完消失）；紫/黄小点+呼吸环=待审核充值/工单
   （处理完才消失）。只加紫色系与待办指示，不改普通用户铃铛的既有观感。
   ============================================================================ */
.nav-bell-admin .nav-bell-btn{
  color:oklch(72% .14 295);
  border-color:oklch(47% .13 295 / .45);
}
.nav-bell-admin .nav-bell-btn:hover{
  color:oklch(84% .12 295);
  border-color:oklch(60% .16 295 / .6);
  background:oklch(47% .13 295 / .12);
}
.nav-bell-admin .nav-bell-btn[aria-expanded="true"]{
  color:oklch(86% .12 295);
  border-color:oklch(62% .17 295 / .7);
}
.nav-bell-admin .nav-bell-read{ color:oklch(78% .14 295); }
.nav-bell-admin .nav-bell-foot{ color:oklch(78% .14 295); }
.nav-bell-admin .nav-bell-item:hover{ box-shadow:inset 2px 0 0 oklch(68% .17 295); }

/* 待办小点：紫=充值待审核 / 黄=工单；与后台 `.tk-bell-dot` 同尺寸 */
.nav-bell-dot{
  position:absolute; right:-2px; bottom:-2px; width:9px; height:9px; border-radius:50%;
  background:var(--vermilion); border:1px solid var(--ink);
  box-shadow:0 0 8px currentColor;
}
.nav-bell-dot[hidden]{ display:none !important; }
.nav-bell-dot.is-pending{ background:oklch(68% .17 295); color:oklch(68% .17 295); }
.nav-bell-dot.is-ticket{ background:#e6c24a; color:#e6c24a; }

/* 呼吸环：数字之外的第二层提示，处理完才消失 */
.nav-bell-admin .nav-bell-btn.is-alert-pending,
.nav-bell-admin .nav-bell-btn.is-alert-ticket{ animation:tkNavBellPulse 2.2s ease-in-out infinite; }
.nav-bell-admin .nav-bell-btn.is-alert-pending{ --tk-alert-rgb:150,112,255; }
.nav-bell-admin .nav-bell-btn.is-alert-ticket{ --tk-alert-rgb:230,194,74; }
@keyframes tkNavBellPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(var(--tk-alert-rgb,150,112,255),0); }
  50%{ box-shadow:0 0 0 3px rgba(var(--tk-alert-rgb,150,112,255),.30), 0 0 14px rgba(var(--tk-alert-rgb,150,112,255),.45); }
}

/* 窄屏（≤620px）顶部已被品牌/铃铛/头像/汉堡占满：管理员紫铃先隐藏，后台在手机端仍可进；
   避免两个 34px 铃铛把 390px 顶栏挤溢出。 */
@media (max-width:620px){
  .nav-bell-admin{ display:none; }
}