/* ===== 顶栏 Banner ===== */
.wpn-banner { position: fixed; top:0; left:0; right:0; z-index: 9999; }
.wpn-banner-item { display:flex; gap:.75rem; align-items:center; padding:.75rem 1rem; border-bottom:1px solid rgba(0,0,0,.06); }
.wpn-banner-item .wpn-banner-content { flex:1; }
.wpn-banner-item .wpn-banner-title { font-weight:700; margin-bottom:.25rem; }
.wpn-banner-item .wpn-close { border:0; background:transparent; font-size:20px; cursor:pointer; line-height:1; }
.wpn-cta { display:inline-block; margin-left:.5rem; text-decoration:underline; }

/* 轻量配色（亮色） */
.sev-info    { background: #eef6ff; }
.sev-success { background: #eefcf3; }
.sev-warning { background: #fff9e6; }
.sev-error   { background: #ffeeee; }

/* ===== 右下 Toast ===== */
.wpn-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.wpn-toast { padding:.75rem 1rem; border-radius:8px; box-shadow:0 6px 12px rgba(0,0,0,.08); background:#fff; border:1px solid rgba(0,0,0,.06); }
.wpn-toast-title { font-weight:700; margin-bottom:.25rem; }
.wpn-toast-actions { display:flex; align-items:center; gap:.5rem; margin-top:.25rem; }
.wpn-toast .wpn-close { border:0; background:transparent; font-size:16px; cursor:pointer; line-height:1; margin-left:auto; }

/* ===== 抽屉（右侧） ===== */
#wpn-drawer { position: fixed; inset:0; z-index: 10000; pointer-events: none; }
#wpn-drawer .wpn-drawer-mask { position:absolute; inset:0; background: rgba(0,0,0,.2); opacity:0; transition: opacity .18s ease; }
#wpn-drawer .wpn-drawer-panel { position:absolute; top:0; right:-400px; width:380px; max-width: 92vw; height:100%; background:#fff; box-shadow: -4px 0 16px rgba(0,0,0,.1); transition: right .22s ease; display:flex; flex-direction:column; }
#wpn-drawer .wpn-drawer-head { padding:.75rem 1rem; border-bottom:1px solid rgba(0,0,0,.06); display:flex; align-items:center; justify-content:space-between; }
#wpn-drawer .wpn-drawer-title { display:flex; align-items:center; gap:.5rem; font-weight:700; }
#wpn-drawer .wpn-drawer-close { border:0; background:transparent; font-size:20px; cursor:pointer; }
#wpn-drawer .wpn-drawer-body { padding:.75rem; overflow:auto; flex:1; }
#wpn-drawer .wpn-list-empty { text-align:center; color:#888; padding:2rem 0; }
#wpn-drawer.show { pointer-events: auto; }
#wpn-drawer.show .wpn-drawer-mask { opacity:1; }
#wpn-drawer.show .wpn-drawer-panel { right:0; }

/* 打开抽屉时可禁用滚动 */
body.wpn-open { overflow: hidden; }

/* ===== 铃铛角标 ===== */
.toggle-wpn { position: relative; cursor: pointer; }
.toggle-wpn .wpn-badge {
    position:absolute; top:-4px; right:-6px;
    min-width: 16px; height:16px; padding:0 4px;
    border-radius: 8px; background:#e02424; color:#fff;
    font-size:11px; line-height:16px; text-align:center;
}

/* ===== Inbox 卡片（亮色） ===== */
.wpn-card {
    border:1px solid rgba(0,0,0,.08);
    border-left-width: 6px;
    border-radius:10px;
    padding:.75rem .75rem .6rem .75rem;
    margin-bottom:.75rem;
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.wpn-card .wpn-card-hd {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:.25rem;
}
.wpn-title-left { display:flex; align-items:center; gap:.5rem; }
.wpn-emoji { font-size: 18px; line-height: 1; }
.wpn-card-title { font-weight:700; }

/* 已读/未读样式（亮色） */
.wpn-card.is-unread { outline: 2px solid rgba(0, 123, 255, .25); background: linear-gradient(0deg, rgba(0,123,255,.05), transparent 30%); }
.wpn-card.is-read   { opacity:.9; }
.wpn-read-check { display:inline-block; background:#16a34a; color:#fff; border-radius: 10px; padding:0 .4rem; font-size:12px; line-height:18px; }

/* 按钮区域 */
.wpn-card .wpn-card-ft { display:flex; align-items:center; gap:.5rem; margin-top:.5rem; }
.wpn-card .wpn-btn { border:1px solid #ddd; background:#fafafa; padding:.3rem .6rem; border-radius:6px; cursor:pointer; }
.wpn-card .wpn-btn:hover { background:#f0f0f0; }
.wpn-card .wpn-btn:disabled,
.wpn-card .wpn-btn[disabled] {
    cursor: not-allowed;
    color:#999;
    background:#f7f7f7;
    border-color:#e5e5e5;
}

/* 优先级强度条（亮色） */
.prio-0 { border-left-color: rgba(2, 132, 199, .25); }
.prio-1 { border-left-color: rgba(2, 132, 199, .40); }
.prio-2 { border-left-color: rgba(2, 132, 199, .55); }
.prio-3 { border-left-color: rgba(2, 132, 199, .70); }
.prio-4 { border-left-color: rgba(2, 132, 199, .85); }
.prio-5 { border-left-color: rgba(2, 132, 199, 1.00); }

/* 等级着色（亮色） */
.wpn-card.sev-info    { background: #eef6ff; }
.wpn-card.sev-success { background: #eefcf3; }
.wpn-card.sev-warning { background: #fff9e6; }
.wpn-card.sev-error   { background: #ffeeee; }

/* ======== 夜间模式适配（html[data-bs-theme="dark"]） ========= */
html[data-bs-theme="dark"] .wpn-banner-item {
    background: rgba(255,255,255,.04);
    border-bottom-color: rgba(255,255,255,.08);
}
html[data-bs-theme="dark"] .wpn-cta { color: #93c5fd; }

html[data-bs-theme="dark"] .wpn-toast {
    background: rgba(30,41,59,.9); /* slate-800 近似 */
    color: #e5e7eb;
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

html[data-bs-theme="dark"] #wpn-drawer .wpn-drawer-panel {
    background: rgba(17,24,39,.98); /* slate-900 近似 */
    color: #e5e7eb;
    box-shadow: -4px 0 20px rgba(0,0,0,.6);
}
html[data-bs-theme="dark"] #wpn-drawer .wpn-drawer-head {
    border-bottom-color: rgba(255,255,255,.08);
}
html[data-bs-theme="dark"] #wpn-drawer .wpn-list-empty {
    color:#9ca3af;
}

/* Inbox 卡片（暗色） */
html[data-bs-theme="dark"] .wpn-card {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
html[data-bs-theme="dark"] .wpn-card.is-unread {
    outline: 2px solid rgba(59, 130, 246, .35); /* blue-500 */
    background: linear-gradient(0deg, rgba(59,130,246,.10), transparent 30%);
}
html[data-bs-theme="dark"] .wpn-card.is-read { opacity: .92; }
html[data-bs-theme="dark"] .wpn-read-check { background:#16a34a; color:#fff; }

/* 暗色按钮 */
html[data-bs-theme="dark"] .wpn-card .wpn-btn {
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color:#e5e7eb;
}
html[data-bs-theme="dark"] .wpn-card .wpn-btn:hover {
    background: rgba(255,255,255,.12);
}
html[data-bs-theme="dark"] .wpn-card .wpn-btn:disabled,
html[data-bs-theme="dark"] .wpn-card .wpn-btn[disabled] {
    color:#9ca3af;
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.08);
}

/* 暗色优先级强度条 */
html[data-bs-theme="dark"] .prio-0 { border-left-color: rgba(96, 165, 250, .35); }
html[data-bs-theme="dark"] .prio-1 { border-left-color: rgba(96, 165, 250, .50); }
html[data-bs-theme="dark"] .prio-2 { border-left-color: rgba(96, 165, 250, .65); }
html[data-bs-theme="dark"] .prio-3 { border-left-color: rgba(96, 165, 250, .80); }
html[data-bs-theme="dark"] .prio-4 { border-left-color: rgba(96, 165, 250, .95); }
html[data-bs-theme="dark"] .prio-5 { border-left-color: rgba(96, 165, 250, 1.00); }

/* 暗色等级着色（更轻，避免过重底色） */
html[data-bs-theme="dark"] .wpn-card.sev-info    { background: rgba(147,197,253,.10); }
html[data-bs-theme="dark"] .wpn-card.sev-success { background: rgba(187,247,208,.10); }
html[data-bs-theme="dark"] .wpn-card.sev-warning { background: rgba(254,240,138,.10); }
html[data-bs-theme="dark"] .wpn-card.sev-error   { background: rgba(254,202,202,.10); }