/* 店员首页顶部栏、消息铃铛和消息页。颜色沿用 app.css 的变量；红色角标单独定义。 */
:root{--bell-red:#e0463b;--on-red:#ffffff;--ann:#4b6280;--ann-soft:#e5eaf1}

/* 顶部栏：头像 · 名字，您好 / 日期 · 版本 · 铃铛 */
.header-avatar{width:44px;height:44px;flex:none;display:grid;place-items:center;font-size:17px;overflow:hidden}
.home-hello strong{display:flex;min-width:0;font-size:18px;letter-spacing:.02em}
.home-hello .hello-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.home-hello .hello-tail{flex:none}
.home-hello small{display:block;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bell-btn{position:relative;flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--accent);background:var(--page);border:1px solid var(--border);text-decoration:none}
.bell-btn svg{width:22px;height:22px}
.bell-badge{position:absolute;top:-5px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--bell-red);color:var(--on-red);font-size:11px;font-weight:700;line-height:16px;text-align:center;border:2px solid var(--bg);font-variant-numeric:tabular-nums}
.home-anchor:empty{margin:0}

/* 消息页 */
.msg-tabs .pill-filter{display:inline-flex;align-items:center;gap:6px}
.msg-count{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bell-red);color:var(--on-red);font-size:10.5px;font-weight:700;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}
.msg-summary{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:var(--muted);margin:-6px 0 2px}
.msg-summary .text-btn:disabled{color:var(--muted);cursor:default;opacity:.7}
.msg-group{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:.06em;margin:12px 2px 8px}
.msg-row{align-items:flex-start;font:inherit}
button.msg-row{cursor:pointer}
.msg-row.selected{background:var(--accent-soft)}
.msg-icon{position:relative;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.msg-icon svg{width:21px;height:21px}
.msg-todo{background:var(--warn-soft);color:var(--warn)}
.msg-notice{background:var(--accent-soft);color:var(--accent)}
.msg-ann{background:var(--ann-soft);color:var(--ann)}
.msg-dot{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;background:var(--bell-red);border:2px solid var(--bg)}
.msg-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.list-row .msg-top strong{font-weight:500;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.list-row.unread .msg-top strong{font-weight:650;color:var(--ink)}
.msg-top time{font-size:11px;color:var(--muted);flex:none;font-variant-numeric:tabular-nums}
.list-row .msg-preview{font-size:12px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.msg-foot{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:var(--muted)}
.msg-tag{padding:1px 7px;border-radius:6px;font-size:11px;line-height:1.6}
.msg-from{margin-left:auto;white-space:nowrap}
.msg-check{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--muted);display:grid;place-items:center;flex:none;margin-top:9px;color:var(--on-accent)}
.msg-check svg{width:14px;height:14px;opacity:0;stroke-width:2.6}
.msg-row.selected .msg-check{background:var(--accent);border-color:var(--accent)}
.msg-row.selected .msg-check svg{opacity:1}

/* 消息详情 */
.msg-detail h1{font-size:20px;line-height:1.45;margin-top:14px;text-wrap:balance}
.msg-kind{display:flex;align-items:center;gap:8px}
.msg-meta{font-size:12px;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums}
.msg-body{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.75;overflow-wrap:anywhere}
.msg-detail+.btn{margin-bottom:10px}
.msg-delete{margin-top:4px}
.msg-delete svg{width:18px;height:18px}
.msg-keep{text-align:center}

/* 老板：发过的公告 */
.ann-row .meta{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ann-row .right .text-btn{color:var(--danger)}

@media (prefers-reduced-motion:no-preference){
  .bell-btn.ring svg{animation:bell-ring .9s ease;transform-origin:50% 12%}
}
@keyframes bell-ring{0%,100%{transform:rotate(0)}15%{transform:rotate(16deg)}30%{transform:rotate(-14deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}75%{transform:rotate(3deg)}}