/* ============================================================================
   通知 / 公告 —— 顶栏小喇叭 + 右侧通知面板 + 弹窗公告
   ----------------------------------------------------------------------------
   独立文件（不并入 style.css）：style.css 是并行开发冲突高发区，本功能全部
   样式集中在这里，index.html 只需多引一个 <link>。

   主题跟随站点：--primary 橙、--card 白、--text 深棕、--text2 浅棕。
   z-index：topbar 是 50 → 面板遮罩 9000 / 抽屉 9001 / 弹窗 9100，确保盖住一切。
   ⚠️ 本文件注释里不得出现星号加斜杠的序列（会提前结束注释、吞掉整条规则）。
   ============================================================================ */

/* ---------- ① 顶栏小喇叭（与 .reload-btn 同尺寸同风格） ---------- */
.nt-bell {
  position: relative;
  width: 32px; height: 32px; flex: none;
  border-radius: 50%;
  border: 1px solid rgba(249, 89, 1, 0.22);
  background: rgba(249, 89, 1, 0.06);
  color: var(--primary, #f95901);
  font-size: 17px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; margin-left: 8px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, transform 0.2s ease;
}
.nt-bell:hover { background: rgba(249, 89, 1, 0.14); }
.nt-bell:active { transform: scale(0.92); }
.nt-bell[hidden] { display: none !important; }

/* 未读红点 */
.nt-dot {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5b5b, #e01b1b);
  color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px rgba(255, 251, 247, 0.95);
  transform: scale(0);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.nt-dot.on { transform: scale(1); }

/* 首次发现新未读时轻晃一次（不循环，避免长期骚扰） */
@keyframes ntRing {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-12deg); }
  60% { transform: rotate(8deg); }
  80% { transform: rotate(-5deg); }
}
.nt-bell.nt-ring { animation: ntRing 0.75s ease; }

/* ---------- ② 遮罩 + 右侧抽屉 ---------- */
.nt-mask {
  position: fixed; inset: 0;
  background: rgba(48, 26, 12, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.26s ease, visibility 0.26s ease;
  z-index: 9000;
}
.nt-mask.on { opacity: 1; visibility: visible; }

.nt-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  /* 88vw：窄屏上仍留出约 12% 的遮罩区，手指能点到「点旁边关闭」；
     92vw 时遮罩只剩 8%（手机上约 31px），基本点不中，只能靠右上角 ✕。 */
  width: min(404px, 88vw);
  background: var(--card, #fff);
  z-index: 9001;
  display: flex; flex-direction: column;
  transform: translateX(101%);
  transition: transform 0.32s cubic-bezier(0.22, 0.72, 0.2, 1);
  box-shadow: -14px 0 44px rgba(90, 50, 20, 0.16);
}
.nt-drawer.on { transform: translateX(0); }

/* 抽屉头 */
.nt-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 13px;
  border-bottom: 1px solid #f5ece5;
  flex: none;
}
.nt-head .nt-h-ic {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  background: var(--grad, linear-gradient(135deg, #ff8845, #f94400));
  color: #fff; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.nt-head .nt-h-tx { flex: 1; min-width: 0; }
.nt-head .nt-h-tx b { display: block; font-size: 15.5px; font-weight: 800; color: var(--text, #3a2a1e); }
.nt-head .nt-h-tx span { display: block; font-size: 11.5px; color: var(--text2, #a08c7c); margin-top: 1px; }
.nt-x {
  width: 30px; height: 30px; flex: none;
  border-radius: 50%; border: none;
  background: #f7f1ec; color: var(--text2, #a08c7c);
  font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.18s ease, color 0.18s ease;
}
.nt-x:hover { background: #f0e5dc; color: var(--text, #3a2a1e); }

/* 工具条 */
.nt-tools {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px 2px;
  flex: none;
}
.nt-tools .nt-count { flex: 1; font-size: 12px; color: var(--text2, #a08c7c); }
.nt-mini {
  border: 1px solid rgba(249, 89, 1, 0.22);
  background: rgba(249, 89, 1, 0.06);
  color: var(--primary, #f95901);
  font-size: 12px; font-weight: 700;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  transition: background 0.18s ease;
}
.nt-mini:hover { background: rgba(249, 89, 1, 0.14); }
.nt-mini[disabled] { opacity: 0.45; cursor: default; }
.nt-mini[disabled]:hover { background: rgba(249, 89, 1, 0.06); }

/* 列表 */
.nt-list {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 14px 24px;
  -webkit-overflow-scrolling: touch;
}
/* 游客提示条：未登录也能看公告，但「主动提醒」需要账号。
   只在 st.guest 为真时由 notices.js 插入，登录用户完全看不到这条。 */
.nt-guest {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 11px;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(249, 89, 1, 0.06);
  border: 1px solid rgba(249, 89, 1, 0.16);
  color: #9a7a62;
  font-size: 12px; line-height: 1.5;
}
.nt-guest > span:first-child { flex: none; font-size: 13px; }
.nt-item {
  position: relative;
  padding: 13px 14px 12px 20px;
  border-radius: 14px;
  margin-bottom: 9px;
  background: #fdfaf7;
  border: 1px solid #f4ebe4;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, opacity 0.3s ease;
}
.nt-item:hover { background: #fdf4ed; }
.nt-item.nt-unread {
  background: linear-gradient(135deg, #fff8f1, #ffeedd);
  border-color: rgba(249, 89, 1, 0.2);
}
.nt-item.nt-unread::before {
  content: '';
  position: absolute; left: 8px; top: 17px; bottom: 17px;
  width: 3px; border-radius: 3px;
  background: var(--grad, linear-gradient(135deg, #ff8845, #f94400));
}
.nt-item.nt-read { opacity: 0.78; }
.nt-item.nt-read:hover { opacity: 1; }

.nt-row1 { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.nt-title {
  flex: 1; min-width: 0;
  font-size: 14px; font-weight: 700; color: var(--text, #3a2a1e);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nt-item.nt-unread .nt-title { font-weight: 800; }
.nt-pin {
  flex: none; font-size: 10.5px; font-weight: 800;
  color: #b45309; background: #fff3d6;
  padding: 2px 6px; border-radius: 6px;
}
.nt-new {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: #ff4d4f;
  box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.16);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.nt-body {
  font-size: 13px; line-height: 1.62; color: #6b5645;
  white-space: pre-wrap; word-break: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.nt-item.nt-open .nt-body { display: block; overflow: visible; }
.nt-time {
  margin-top: 7px; font-size: 11.5px; color: var(--text2, #a08c7c);
  display: flex; align-items: center; gap: 6px;
}
.nt-more { font-size: 11.5px; font-weight: 700; color: var(--primary, #f95901); }

/* 空态 */
.nt-empty {
  padding: 60px 20px; text-align: center; color: var(--text2, #a08c7c);
}
.nt-empty .nt-e-ic { font-size: 40px; opacity: 0.5; margin-bottom: 10px; }
.nt-empty .nt-e-tx { font-size: 13.5px; line-height: 1.7; }

/* ---------- ③ 弹窗公告 ---------- */
.nt-pop-mask {
  position: fixed; inset: 0;
  background: rgba(48, 26, 12, 0.52);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  z-index: 9100;
  opacity: 0; visibility: hidden;
  transition: opacity 0.26s ease, visibility 0.26s ease;
}
.nt-pop-mask.on { opacity: 1; visibility: visible; }

.nt-pop {
  width: min(432px, 100%);
  max-height: 84vh;
  background: var(--card, #fff);
  border-radius: 22px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transform: scale(0.9) translateY(16px);
  transition: transform 0.34s cubic-bezier(0.34, 1.42, 0.64, 1);
  box-shadow: 0 24px 60px rgba(70, 34, 12, 0.3);
}
.nt-pop-mask.on .nt-pop { transform: scale(1) translateY(0); }

.nt-pop-top {
  position: relative;
  padding: 24px 22px 18px;
  background: linear-gradient(135deg, #fff4ea 0%, #ffe9d6 100%);
  flex: none;
}
.nt-pop-top::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--grad, linear-gradient(135deg, #ff8845, #f94400));
}
.nt-pop-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.4px;
  color: var(--primary, #f95901);
  background: rgba(255, 255, 255, 0.82);
  padding: 4px 10px; border-radius: 999px;
  margin-bottom: 12px;
}
.nt-pop-badge::before { content: '📢'; font-size: 12px; }
.nt-pop-title {
  font-size: 19px; font-weight: 800; line-height: 1.4;
  color: var(--text, #3a2a1e);
  word-break: break-word;
}
.nt-pop-body {
  padding: 20px 22px 6px;
  overflow-y: auto;
  font-size: 14.5px; line-height: 1.78; color: #5c4a3c;
  white-space: pre-wrap; word-break: break-word;
  flex: 1;
}
.nt-pop-foot {
  padding: 16px 22px 20px;
  flex: none;
  display: flex; align-items: center; gap: 10px;
}
.nt-pop-ok {
  flex: 1;
  border: none; cursor: pointer;
  background: var(--grad, linear-gradient(135deg, #ff8845, #f94400));
  color: #fff; font-size: 15px; font-weight: 800;
  padding: 13px 16px; border-radius: 14px;
  transition: transform 0.16s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 20px rgba(249, 89, 1, 0.24);
}
.nt-pop-ok:hover { box-shadow: 0 10px 26px rgba(249, 89, 1, 0.32); }
.nt-pop-ok:active { transform: scale(0.975); }
.nt-pop-later {
  flex: none;
  border: 1px solid #ece1d8; background: #fff; cursor: pointer;
  color: var(--text2, #a08c7c); font-size: 14px; font-weight: 700;
  padding: 13px 16px; border-radius: 14px;
  transition: background 0.18s ease;
}
.nt-pop-later:hover { background: #faf5f1; }

/* 小屏微调 */
@media (max-width: 420px) {
  .nt-bell { width: 30px; height: 30px; font-size: 16px; margin-left: 6px; }
  .nt-pop-title { font-size: 17.5px; }
  .nt-pop-body { font-size: 14px; }
}