/* 顶部状态栏消息下拉面板（默认暗黑，theme1 浅色） */
/* PC：覆盖 .head .margin{position:relative}，面板相对 .head .right 右对齐（头像右缘红线） */
@media (min-width:768px){
  .head .right{position:relative}
  .head .margin.head-notify-wrap{position:static;z-index:120}
}
.head-notify-wrap{z-index:120}
.head-notify-link{position:relative;display:block}
.head-notify-badge{
  position:absolute;top:12px;right:-4px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:#ef4444;color:#fff;font-size:11px;line-height:16px;
  text-align:center;font-style:normal;box-sizing:border-box
}
.head-notify-badge.none{display:none!important}

.head .head-notify-panel,
.head-notify-panel{
  position:absolute;top:calc(100% + 10px);left:auto;right:0;width:420px;max-width:min(420px,calc(100vw - 24px));
  background:#16181d;border:1px solid rgba(255,255,255,.08);border-radius:12px;
  box-shadow:0 12px 36px rgba(0,0,0,.45);overflow:hidden;display:none;z-index:9999;
  text-align:left;color:rgba(255,255,255,.88)
}
.head-notify-panel.is-open{display:block}
.head-notify-panel *{box-sizing:border-box}

.head-notify-panel__hd{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08)
}
.head-notify-panel__title{margin:0;font-size:16px;font-weight:600;color:#fff;line-height:1.2}
.head-notify-panel__actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.head-notify-panel__action{
  appearance:none;border:0;background:transparent;padding:0;
  color:#5eb8ff;font-size:13px;cursor:pointer;line-height:1
}
.head-notify-panel__action:hover{text-decoration:underline;color:#8fd0ff}
.head-notify-panel__action:disabled{opacity:.4;cursor:not-allowed;text-decoration:none}

.head-notify-panel__tabs{
  display:flex;align-items:stretch;gap:0;overflow-x:auto;overflow-y:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);scrollbar-width:none;-ms-overflow-style:none
}
.head-notify-panel__tabs::-webkit-scrollbar{display:none}
.head-notify-panel__tab{
  flex:0 0 auto;appearance:none;border:0;background:transparent;
  padding:12px 12px;font-size:13px;color:rgba(255,255,255,.45);cursor:pointer;
  position:relative;line-height:1;white-space:nowrap
}
.head-notify-panel__tab:hover{color:rgba(255,255,255,.85)}
.head-notify-panel__tab.is-active{color:#5eb8ff;font-weight:600}
.head-notify-panel__tab.is-active:after{
  content:"";position:absolute;bottom:0;left:20%;right:20%;height:2px;
  background:#5eb8ff;border-radius:2px
}

.head-notify-panel__list{max-height:460px;overflow-y:auto;background:#16181d}
.head-notify-panel__list::-webkit-scrollbar{width:5px}
.head-notify-panel__list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:4px}

.head-notify-msg{
  display:flex;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.06);
  cursor:pointer;transition:background .2s;background:transparent
}
.head-notify-msg:hover{background:rgba(255,255,255,.04)}
.head-notify-msg.is-unread{background:rgba(47,155,255,.1)}
.head-notify-msg:last-child{border-bottom:0}

.head-notify-msg__avatar{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:#2a2f3a;overflow:hidden;display:flex;align-items:center;justify-content:center;
  font-size:18px;color:rgba(255,255,255,.7)
}
.head-notify-msg__avatar--system{background:#243044;color:#8ab4f8}
.head-notify-msg__avatar--activity{background:#3a3228;color:#ffb86b}
.head-notify-msg__avatar--order{background:#2a3328;color:#86efac}
.head-notify-msg__avatar--vip{background:#322848;color:#c4b5fd}
.head-notify-msg__avatar--announce{background:#3a2830;color:#f9a8d4}
.head-notify-msg__avatar--reply{background:#243038;color:#7dd3fc}
.head-notify-msg__avatar svg{width:20px;height:20px;display:block}

.head-notify-msg__body{flex:1;min-width:0}
.head-notify-msg__top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.head-notify-msg__title-row{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}
.head-notify-msg__dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;background:#5eb8ff
}
.head-notify-msg__dot--system{background:#5eb8ff}
.head-notify-msg__dot--announce{background:#f472b6}
.head-notify-msg__dot--reply{background:#34d399}
.head-notify-msg__dot--order{background:#fb923c}
.head-notify-msg__dot--vip{background:#a78bfa}
.head-notify-msg__dot--activity{background:#fbbf24}
.head-notify-msg__title{
  font-size:14px;font-weight:600;color:rgba(255,255,255,.92);line-height:1.35;word-break:break-word
}
.head-notify-msg__urgent{
  font-size:10px;padding:1px 5px;border-radius:4px;background:rgba(239,68,68,.2);color:#f87171;font-weight:600
}
.head-notify-msg__time{font-size:12px;color:rgba(255,255,255,.35);white-space:nowrap;flex-shrink:0;line-height:1.4}
.head-notify-msg__desc{
  font-size:13px;color:rgba(255,255,255,.45);margin-top:4px;line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical
}
.head-notify-msg__ops{margin-top:6px;display:flex;gap:12px;flex-wrap:wrap}
.head-notify-msg__op{
  appearance:none;border:0;background:transparent;padding:0;
  font-size:12px;color:rgba(255,255,255,.4);cursor:pointer;line-height:1.2
}
.head-notify-msg__op:hover{color:#5eb8ff}
.head-notify-msg__op--del:hover{color:#f87171}

.head-notify-panel__empty{
  padding:50px 20px;text-align:center;color:rgba(255,255,255,.4);font-size:14px
}
.head-notify-panel__ft{
  display:flex;justify-content:center;padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.08);background:transparent
}
/* 提高优先级，避免被 .head .margin a{height:70px} 覆盖 */
.head .margin .head-notify-panel__more,
.head-notify-panel .head-notify-panel__more{
  display:block;width:100%;max-width:100%;height:32px;padding:0 12px;
  box-sizing:border-box;text-align:center;
  flex-direction:unset;align-items:unset;justify-content:unset;
  color:#5eb8ff;font-size:13px;line-height:30px;text-decoration:none;
  border:1px solid #5eb8ff;border-radius:4px;background:transparent;
  transition:background .15s,color .15s,border-color .15s
}
.head .margin .head-notify-panel__more:hover,
.head-notify-panel .head-notify-panel__more:hover{
  text-decoration:none;color:#8fd0ff!important;border-color:#8fd0ff;
  background:rgba(94,184,255,.08)
}

/* 浅色主题 */
.theme1 .head-notify-panel{
  background:#fff;border-color:#e5e7eb;box-shadow:0 8px 30px rgba(0,0,0,.15);color:#1f2937
}
.theme1 .head-notify-panel__hd{border-bottom-color:#eee}
.theme1 .head-notify-panel__title{color:#1f2937}
.theme1 .head-notify-panel__action{color:#3b82f6}
.theme1 .head-notify-panel__action:hover{color:#2563eb}
.theme1 .head-notify-panel__tabs{border-bottom-color:#eee}
.theme1 .head-notify-panel__tab{color:#6b7280}
.theme1 .head-notify-panel__tab:hover{color:#374151}
.theme1 .head-notify-panel__tab.is-active{color:#2563eb}
.theme1 .head-notify-panel__tab.is-active:after{background:#2563eb}
.theme1 .head-notify-panel__list{background:#fff}
.theme1 .head-notify-panel__list::-webkit-scrollbar-thumb{background:#d1d5db}
.theme1 .head-notify-msg{border-bottom-color:#f3f4f6;background:#fff}
.theme1 .head-notify-msg:hover{background:#f9fafb}
.theme1 .head-notify-msg.is-unread{background:#f0f7ff}
.theme1 .head-notify-msg__avatar{background:#e5e7eb;color:#4b5563}
.theme1 .head-notify-msg__avatar--system{background:#dbeafe;color:#2563eb}
.theme1 .head-notify-msg__avatar--activity{background:#ffedd5;color:#ea580c}
.theme1 .head-notify-msg__avatar--order{background:#ffedd5;color:#f97316}
.theme1 .head-notify-msg__avatar--vip{background:#ede9fe;color:#7c3aed}
.theme1 .head-notify-msg__avatar--announce{background:#fce7f3;color:#db2777}
.theme1 .head-notify-msg__avatar--reply{background:#d1fae5;color:#059669}
.theme1 .head-notify-msg__title{color:#111827}
.theme1 .head-notify-msg__urgent{background:#fee2e2;color:#dc2626}
.theme1 .head-notify-msg__time{color:#9ca3af}
.theme1 .head-notify-msg__desc{color:#6b7280}
.theme1 .head-notify-msg__op{color:#9ca3af}
.theme1 .head-notify-msg__op:hover{color:#2563eb}
.theme1 .head-notify-msg__op--del:hover{color:#ef4444}
.theme1 .head-notify-panel__empty{color:#9ca3af}
.theme1 .head-notify-panel__ft{border-top-color:#eee;background:#fff}
.theme1 .head .margin .head-notify-panel__more,
.theme1 .head-notify-panel .head-notify-panel__more{color:#3b82f6;border-color:#3b82f6;background:rgba(59,130,246,.06)}
.theme1 .head .margin .head-notify-panel__more:hover,
.theme1 .head-notify-panel .head-notify-panel__more:hover{color:#2563eb!important;border-color:#2563eb;background:rgba(59,130,246,.1)}

@media (max-width:767px){
  .head .head-notify-panel,
  .head-notify-panel{
    position:fixed;top:56px;left:12px;right:12px;width:auto;max-width:none
  }
}