/* ===========================================================
   v5.11 消息中心 UI（铃铛 / 浮标 / 面板 / 角标 / 轻提示）
   PC 与移动端共用；样式以 portal.css 的深蓝+青为基准
   =========================================================== */

/* ---------- 铃铛按钮 ---------- */
.unotify-bell{
  position:relative;display:inline-grid;place-items:center;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--navy);cursor:pointer;padding:0;
  transition:border-color .18s,background .18s,transform .16s,box-shadow .18s}
.unotify-bell:hover{border-color:var(--teal);color:var(--teal);box-shadow:var(--sh-1)}
.unotify-bell:active{transform:scale(.94)}
.un-badge{
  position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:#d3373c;color:#fff;font-size:10.5px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.16);
  animation:unPop .32s cubic-bezier(.34,1.56,.64,1)}
@keyframes unPop{0%{transform:scale(0)}100%{transform:scale(1)}}

/* ---------- 下拉面板 ---------- */
.un-panel{
  position:fixed;top:74px;right:24px;width:min(380px,calc(100vw - 32px));z-index:120;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 48px rgba(16,38,66,.18);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);
  transition:opacity .2s,transform .22s cubic-bezier(.2,.7,.3,1),visibility .2s;
  overflow:hidden}
.un-panel.on{opacity:1;visibility:visible;transform:none}
.un-panel-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fbfcfe,#fff)}
.un-panel-head b{font-size:14px;color:var(--navy);font-weight:700}
.un-readall{font-size:12px;color:var(--teal);font-weight:600;margin-left:auto;text-decoration:none}
.un-readall:hover{text-decoration:underline}
.un-close{border:0;background:transparent;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;padding:0 2px}
.un-close:hover{color:var(--navy)}
.un-panel-body{max-height:min(440px,60vh);overflow-y:auto;-webkit-overflow-scrolling:touch}
.un-panel-body::-webkit-scrollbar{width:6px}
.un-panel-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

.un-item{display:block;padding:11px 14px;border-bottom:1px solid var(--line-2);text-decoration:none;
  transition:background .16s;position:relative}
.un-item:last-child{border-bottom:0}
.un-item:hover{background:var(--soft)}
.un-item.unread{background:rgba(14,124,134,.045)}
.un-item.unread::before{content:"";position:absolute;left:6px;top:17px;width:6px;height:6px;
  border-radius:50%;background:var(--teal)}
.un-t{display:block;font-size:13px;font-weight:700;color:var(--navy);line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.un-b{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.un-d{display:block;font-size:11px;color:#9aa9ba;margin-top:4px}
.un-empty{padding:30px 16px;text-align:center;color:var(--muted);font-size:13px}

/* ---------- 轻提示 ---------- */
.un-toast{
  position:fixed;left:50%;bottom:34px;transform:translate(-50%,14px);
  background:rgba(15,39,66,.94);color:#fff;font-size:13px;font-weight:600;
  padding:10px 18px;border-radius:999px;z-index:200;pointer-events:none;
  opacity:0;transition:opacity .25s,transform .25s cubic-bezier(.2,.7,.3,1);
  box-shadow:0 10px 30px rgba(16,38,66,.3);max-width:86vw;text-align:center}
.un-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- 移动端适配 ---------- */
@media (max-width:980px){
  .un-panel{top:auto;bottom:64px;right:8px;left:8px;width:auto;
    border-radius:16px;box-shadow:0 -12px 40px rgba(16,38,66,.22)}
  .un-panel-body{max-height:52vh}
  .un-item.unread::before{left:10px}
  .un-item{padding:12px 16px 12px 20px}
  .un-toast{bottom:78px}
}