/* ────────────────────────────────────────────────────────────────────────────
   门户通知铃铛 + 抽屉（站内收件箱的**唯一**看面）。

   为什么单开这个文件（而不是写进 app.css）：与 css/toast.css 同一条理由 ——
   门户有一条用户红线是「勿碰 extraction.css / app.css」，所以门户这批新增样式
   一律**不往 app.css 里加**。铃铛又恰好是「全局组件、不属于任何一屏」，
   与 toast 同类。

   ⚠️ 角标的**数值**照抄 app.css 的 `.pending-badge`（`background:var(--danger)` /
   `border-radius:10px` / 9px / `line-height:14px`）—— **值抄过来、选择器新开**。
   名字刻意叫 `.notify-badge` 而不是复用 `.pending-badge`：后者是 app.css 里的规则，
   复用它等于把本组件的形状挂在红线文件上（改 app.css 会静默打歪铃铛）。

   🔴 **配色只用 app.css `:root` 里已定义的变量**：浅深两套主题都覆盖了它们
   （`--primary-light` 在深色下是 `#0d2847`）⇒ **本文件不需要一条
   `[data-theme="dark"]` 规则**，深色自动跟上。
   ⛔ 顺带一个真踩过的坑：**别用 `--text-dim`** —— 那个变量在全仓**没有定义**
   （app.js 里有几处内联 `var(--text-dim)`，它静默失效、靠继承兜住）。
   `tests/test_portal_notify.py` 有一条闸门逐个校验本文件用到的变量在 app.css 里真的有定义。

   ⚠️ 改类名/加类名时，同步改 `static/js/app.js` 里 `status-bar` 的模板串
   （那条耦合由 `tests/test_portal_notify.py` 双向钉住）。
   ──────────────────────────────────────────────────────────────────────────── */

/* 铃铛外层：抽屉的定位基准。`inline-flex` 让它与相邻的图标按钮（主题切换）
   在同一条基线上对齐 —— status-bar 是 flex 行，`inline-*` 才不掉高。 */
.notify-wrap { position: relative; display: inline-flex; align-items: center; }

/* 视觉上照 `.sb-btn`（status-bar 里其它图标按钮）：同样无底无框、hover 才出底色。
   不改 app.css 的 `.sb-btn` 再加一个并列类，是因为铃铛多一个「角标要挂在它角上」
   的定位要求 ⇒ 这里 `position:relative` 由它自己承担。 */
.notify-bell { position: relative; display: inline-flex; align-items: center; background: none;
  border: none; cursor: pointer; font-size: 14px; padding: 2px 6px;
  border-radius: var(--r-sm); color: var(--primary); transition: all var(--transition); }
.notify-bell:hover { background: var(--primary-light); }

/* 未读角标。`pointer-events:none` ⇒ 角标不会吃掉铃铛的点击（角标压在铃铛右上角）。 */
.notify-badge { position: absolute; top: -2px; right: -1px; box-sizing: border-box;
  min-width: 14px; background: var(--danger); color: #fff; border-radius: 10px;
  padding: 0 4px; font-size: 9px; line-height: 14px; font-weight: 600;
  text-align: center; pointer-events: none; }

/* 抽屉。`z-index:200` = 与 `.sb-tenant-menu`（app.css）同一层：
   两者都是 status-bar 的下拉，且模板里**互斥**（开一个就关另一个）。
   ⚠️ 不要再往上抬：门户的模态层是 10000（`.confirm-overlay`），抽屉必须在其下。 */
.notify-drawer { position: absolute; top: 100%; right: 0; margin-top: 4px; width: 320px;
  max-height: 60vh; display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); z-index: 200; overflow: hidden; }

.notify-head { display: flex; align-items: center; justify-content: space-between;
  padding: 8px var(--sp-md); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.notify-title { font-size: var(--text-base); font-weight: 600; color: var(--text); }
.notify-action { background: none; border: none; cursor: pointer; padding: 2px 6px;
  font-size: var(--text-xs); color: var(--primary); border-radius: var(--r-sm);
  transition: all var(--transition); }
.notify-action:hover { background: var(--primary-light); }

.notify-list { flex: 1; overflow-y: auto; }

.notify-item { padding: 8px var(--sp-md); cursor: pointer;
  border-bottom: 1px solid var(--border-light); transition: background var(--transition); }
.notify-item:last-child { border-bottom: none; }
.notify-item:hover { background: var(--primary-light); }
/* 未读 = 左侧一条主色竖条（**不是**换底色）：
   底色那条路会和 `:hover` 抢同一个 `--primary-light` ⇒ 悬停时看不出反馈。
   竖条 + `padding-left` 补位，浅深两套主题都成立，所以不需要深色覆盖规则。 */
.notify-item.unread { border-left: 2px solid var(--primary); padding-left: 10px; }

.notify-item-title { font-size: var(--text-base); font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notify-item-body { margin-top: 2px; font-size: var(--text-xs); color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notify-item-time { margin-top: 3px; font-size: 9px; color: var(--text-muted); }

.notify-empty { padding: 24px 0; text-align: center;
  font-size: var(--text-sm); color: var(--text-muted); }

/* 窄屏：320px 的抽屉在 360px 宽的屏上会把左侧溢出屏幕外（`right:0` 只钉住右边）。
   门户有手机横屏那一档，这里跟着收一档。 */
@media (max-width: 420px) {
  .notify-drawer { width: calc(100vw - 24px); right: -8px; }
}