/**
 * 我的通知 - 列表（长条卡片流）+ 详情（阅读卡片）专属样式
 * 视觉层（R52 允许）：仅 CSS 装饰，行为仍由 Layui + QY.* 承担
 * 复用 common.css 的设计 token（--c-*、--sp-*、--r-*、--sh-*）
 */

/* ========== 列表区容器：替代标准 .table-box 的卡片流 ========== */
.notice-list-box {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background:
        radial-gradient(1200px 280px at 0% -10%, rgba(0, 107, 230, 0.05) 0%, rgba(0, 107, 230, 0) 60%),
        radial-gradient(900px 240px at 100% 0%, rgba(180, 83, 9, 0.04) 0%, rgba(180, 83, 9, 0) 60%),
        var(--c-bg-card);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
    border: var(--bd-soft);
    padding: var(--sp-4) var(--sp-5);
}
.notice-list-box::-webkit-scrollbar { width: var(--scroll-w); }
.notice-list-box::-webkit-scrollbar-thumb { background: var(--c-ink-200); border-radius: 5px; }
.notice-list-box:hover::-webkit-scrollbar-thumb { background: var(--c-ink-300); }

.notice-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

/* ========== 单张通知卡片：长条横向布局 ========== */
.notice-card {
    position: relative;
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--c-ink-100);
    border-radius: var(--r-md);
    padding: 18px 18px 18px 24px;
    cursor: pointer;
    box-shadow: var(--sh-xs);
    transition: transform var(--t-fast) var(--ease),
                box-shadow var(--t-base) var(--ease),
                border-color var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease);
    overflow: hidden;
    /* 进场动效：列表渲染时整体淡入上浮，QY.crud 的 done 回调外（手写列表）也能受益 */
    animation: notice-card-in 0.32s var(--ease) both;
}
@keyframes notice-card-in {
    0%   { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}
/* 错峰进入，让卡片像瀑布一样依次显现，限定前 8 张避免过多 keyframe 计算 */
.notice-list .notice-card:nth-child(1) { animation-delay: 0.00s; }
.notice-list .notice-card:nth-child(2) { animation-delay: 0.04s; }
.notice-list .notice-card:nth-child(3) { animation-delay: 0.08s; }
.notice-list .notice-card:nth-child(4) { animation-delay: 0.12s; }
.notice-list .notice-card:nth-child(5) { animation-delay: 0.16s; }
.notice-list .notice-card:nth-child(6) { animation-delay: 0.20s; }
.notice-list .notice-card:nth-child(7) { animation-delay: 0.24s; }
.notice-list .notice-card:nth-child(8) { animation-delay: 0.28s; }

.notice-card:hover {
    transform: translateY(-2px);
    border-color: var(--c-brand-200);
    background: linear-gradient(92deg, #FFFFFF 0%, var(--c-brand-50) 100%);
    box-shadow:
        0 2px 6px rgba(15, 23, 42, 0.04),
        0 14px 32px rgba(0, 107, 230, 0.12);
}
.notice-card:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* 未读卡片：整体微微染色 + 更醒目阴影，让"待办感"在视觉层先抓眼 */
.notice-card--unread {
    background: linear-gradient(92deg, #FFFFFF 0%, rgba(0, 107, 230, 0.035) 100%);
    border-color: var(--c-brand-100);
}
.notice-card--unread:hover {
    background: linear-gradient(92deg, #FFFFFF 0%, var(--c-brand-50) 100%);
    border-color: var(--c-brand-300, #8FBEF8);
    box-shadow:
        0 2px 6px rgba(15, 23, 42, 0.04),
        0 16px 36px rgba(0, 107, 230, 0.16);
}

/* 左侧色条：未读时主色渐变，已读时透明（占位保证布局对齐） */
.notice-card-stripe {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: transparent;
    border-radius: var(--r-md) 0 0 var(--r-md);
    transition: background var(--t-fast) var(--ease), width var(--t-fast) var(--ease);
}
.notice-card--unread .notice-card-stripe {
    background: linear-gradient(180deg, var(--c-brand-500) 0%, var(--c-brand-700) 100%);
    box-shadow: 0 0 12px rgba(0, 107, 230, 0.35);
}
.notice-card--unread:hover .notice-card-stripe {
    width: 5px;
}

/* 中央主区域：标题 + meta */
.notice-card-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 18px;
}
.notice-card-row1 {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.notice-card-title {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    color: var(--c-ink-700);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--t-fast) var(--ease);
}
.notice-card:hover .notice-card-title { color: var(--c-brand-700); }
.notice-card--unread .notice-card-title {
    color: var(--c-ink-900);
    font-weight: var(--fw-semi);
}

/* 未读小红点：在标题右侧呼吸闪动 */
.notice-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #EF4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    animation: notice-dot-pulse 1.8s var(--ease) infinite;
}
@keyframes notice-dot-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* meta 行：发布时间 + 状态 */
.notice-card-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: var(--fs-sm);
    color: var(--c-ink-500);
}
.notice-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.notice-meta-item .layui-icon {
    font-size: 14px;
    color: var(--c-ink-400);
}
.notice-card--unread .notice-meta-status {
    color: var(--c-brand-700);
    font-weight: var(--fw-semi);
}
.notice-card--unread .notice-meta-status .layui-icon { color: var(--c-brand-600); }

/* ========== 类型 tag：胶囊形（带细微高光） ========== */
.notice-tag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 12px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: var(--fw-semi);
    letter-spacing: 0.4px;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.notice-card:hover .notice-tag { transform: translateY(-1px); }
.notice-tag--popup {
    color: #B45309;
    background: linear-gradient(180deg, #FEF6DD 0%, var(--c-warning-soft) 100%);
    border: 1px solid #FDE68A;
}
.notice-tag--normal {
    color: var(--c-brand-700);
    background: linear-gradient(180deg, #F4F9FE 0%, var(--c-brand-50) 100%);
    border: 1px solid var(--c-brand-200);
}

/* ========== 右侧操作区 ========== */
.notice-card-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 1px dashed var(--c-ink-100);
    padding-left: 18px;
    /* 默认略微淡出，hover 卡片时整组凸显，减少静态噪点 */
    opacity: 0.78;
    transition: opacity var(--t-fast) var(--ease);
}
.notice-card:hover .notice-card-actions { opacity: 1; }
.notice-card-actions .layui-btn {
    margin: 0;
    border-radius: var(--r-pill);
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.notice-card-actions .layui-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.10);
}

/* ========== 空态：更友好的引导 ========== */
.notice-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0 60px;
    color: var(--c-ink-400);
}
.notice-empty .layui-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    font-size: 48px;
    margin-bottom: 18px;
    color: var(--c-brand-400);
    background:
        radial-gradient(circle at center, var(--c-brand-50) 0%, rgba(238, 245, 254, 0) 70%);
    border-radius: 50%;
}
.notice-empty-text {
    font-size: var(--fs-md);
    color: var(--c-ink-500);
    letter-spacing: 0.3px;
}
.notice-empty-text::after {
    content: '当有新消息时会出现在这里';
    display: block;
    margin-top: 6px;
    font-size: var(--fs-xs);
    color: var(--c-ink-400);
    letter-spacing: 0.2px;
}

/* ========== 详情页：阅读卡片 ========== */
.notice-detail-page {
    height: 100%;
    overflow-y: auto;
    padding: var(--sp-5) var(--sp-5);
    background:
        radial-gradient(1200px 360px at 50% -10%, rgba(0, 107, 230, 0.06) 0%, rgba(0, 107, 230, 0) 70%),
        var(--c-bg-app);
}
.notice-detail-card {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    background: var(--c-bg-card);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    border: var(--bd-soft);
    padding: 40px 48px 32px;
    overflow: hidden;
    animation: notice-card-in 0.4s var(--ease) both;
}
/* 顶部装饰条：低饱和度品牌色，给页面一个身份记号 */
.notice-detail-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--c-brand-500) 0%,
        var(--c-brand-700) 40%,
        #B45309 100%);
}
.notice-detail-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.notice-detail-header > #noticeTypeBadge {
    align-self: flex-start;
}
/* 管理侧顶部徽标行：类型 / 范围 / 发布状态 三个 layui-badge 并排，与用户侧只有一个 noticeTypeBadge 不同
 * 不要给 .layui-badge 加 margin（项目用 gap 统一处理间距） */
.notice-detail-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.notice-detail-title {
    margin: 0;
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    color: var(--c-ink-900);
    line-height: 1.32;
    letter-spacing: 0.2px;
    background: linear-gradient(180deg, var(--c-ink-900) 0%, var(--c-ink-800) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
.notice-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    font-size: var(--fs-sm);
    color: var(--c-ink-500);
}
.notice-detail-meta .notice-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--c-ink-50);
    border-radius: var(--r-pill);
}
.notice-detail-meta .layui-icon { color: var(--c-ink-400); font-size: 14px; }
/* 已读/未读状态徽标的颜色提示 */
.notice-detail-meta #readBadge .layui-icon-ok-circle { color: var(--c-success); }
.notice-detail-meta #readBadge .layui-icon-notice    { color: var(--c-brand-600); }

.notice-detail-divider {
    margin: 26px 0 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--c-ink-200) 20%, var(--c-ink-200) 80%, transparent 100%);
}

/* 管理侧接收人区（仅 scopeType=2 指定用户时出现）
 * 视觉与 .notice-detail-meta 同基调（淡灰底圆角），但纵向排列让长名单不挤标题 */
.notice-detail-receivers {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--c-ink-50);
    border-radius: var(--r-md);
    border: 1px dashed var(--c-ink-200);
}
.notice-detail-receivers-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--c-ink-600);
}
.notice-detail-receivers-label .layui-icon {
    font-size: 14px;
    color: var(--c-brand-600);
}
.notice-detail-receivers-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
}
.notice-receiver-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: var(--fs-xs);
    color: var(--c-brand-700);
    background: var(--c-brand-50);
    border: 1px solid var(--c-brand-200);
    border-radius: var(--r-pill);
    line-height: 1.6;
}

/* 管理侧底部"最后更新"脚注：低调灰色文字，紧贴 footer 上方
 * 仅当 updateUser/updateTime 与创建不同时才显示（detail.js 控制） */
.notice-detail-update-info {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
    padding-top: 14px;
    border-top: 1px dashed var(--c-ink-100);
    font-size: var(--fs-xs);
    color: var(--c-ink-400);
}
.notice-detail-update-info .layui-icon {
    font-size: 14px;
    color: var(--c-ink-400);
}

.notice-detail-body {
    min-height: 200px;
}
.notice-detail-content {
    color: var(--c-ink-800);
    font-size: var(--fs-base);
    line-height: var(--lh-loose);
    word-break: break-word;
}
.notice-detail-content p { margin: 0 0 14px; }
/* 标题字号必须用绝对值并加 !important：
 * 1) 项目 --fs-* 变量阶梯太密（base=17,md=16,lg=18,xl=20,2xl=22），h3=18 跟正文 17 几乎不分；
 * 2) Vditor.preview 渲染后会给容器加 .vditor-reset 类，自带 .vditor-reset h1{1.75em} 等规则，
 *    跟我们的选择器同特异性（0,1,1），任何加载顺序变化都可能反客为主。
 * 用绝对像素 + !important 把"标题层级"锁死，避免再被 reset 翻盘。 */
.notice-detail-content h1,
.notice-detail-content h2,
.notice-detail-content h3,
.notice-detail-content h4,
.notice-detail-content h5,
.notice-detail-content h6 {
    color: var(--c-ink-900);
    font-weight: var(--fw-semi);
    line-height: 1.35;
    margin: 28px 0 12px;
}
.notice-detail-content h1 { font-size: 28px !important; padding-bottom: 8px; border-bottom: 1px solid var(--c-ink-100); }
.notice-detail-content h2 { font-size: 23px !important; }
.notice-detail-content h3 { font-size: 20px !important; }
.notice-detail-content h4 { font-size: 18px !important; }
.notice-detail-content h5 { font-size: 17px !important; color: var(--c-ink-700); }
.notice-detail-content h6 { font-size: 16px !important; color: var(--c-ink-600); }
.notice-detail-content a {
    color: var(--c-brand-600);
    text-decoration: none;
    border-bottom: 1px dashed var(--c-brand-200);
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.notice-detail-content a:hover {
    color: var(--c-brand-700);
    border-bottom-color: var(--c-brand-500);
}
.notice-detail-content img {
    display: block !important;
    float: none !important;
    margin: 12px 0;
    max-width: 100%;
    border-radius: var(--r-sm);
    box-shadow: var(--sh-sm);
}
.notice-detail-content pre {
    background: var(--c-ink-50);
    border: 1px solid var(--c-ink-100);
    border-radius: var(--r-sm);
    padding: 14px 16px;
    overflow-x: auto;
}
.notice-detail-content code {
    background: var(--c-ink-50);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: var(--ff-mono);
    font-size: 0.94em;
    color: #B45309;
}
.notice-detail-content pre code {
    background: transparent;
    padding: 0;
    color: var(--c-ink-800);
}
.notice-detail-content blockquote {
    margin: 16px 0;
    padding: 10px 16px 10px 18px;
    border-left: 3px solid var(--c-brand-400);
    background: var(--c-brand-50);
    color: var(--c-ink-700);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.notice-detail-content blockquote p:last-child { margin-bottom: 0; }
/* 反制 layui.css 顶部 reset `li{list-style:none}`：
 * 该 reset 全局生效，导致详情/弹窗/编辑器里 markdown 渲染出的 ul/ol 没有 • 和 1./2.，
 * 用户体感是"无序/有序列表按钮没生效"。这里 .notice-detail-content / .notice-popup-content
 * 三层选择器都显式恢复 list-style，且 li 用 inherit 让 Layui 在 li 上的 list-style:none 失效。
 * （index.html 不加载 common.css，所以这块必须放在 notice.css 内才能覆盖到首页铃铛弹窗。） */
.notice-detail-content ul {
    list-style: disc outside;
    padding-left: 24px;
    margin: 0 0 14px;
}
.notice-detail-content ol {
    list-style: decimal outside;
    padding-left: 24px;
    margin: 0 0 14px;
}
.notice-detail-content ul ul { list-style: circle outside; }
.notice-detail-content ul ul ul { list-style: square outside; }
.notice-detail-content li { list-style: inherit; margin: 4px 0; }
.notice-detail-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: var(--fs-sm);
}
.notice-detail-content table th,
.notice-detail-content table td {
    border: 1px solid var(--c-ink-200);
    padding: 8px 12px;
    text-align: left;
}
.notice-detail-content table th {
    background: var(--c-ink-50);
    font-weight: var(--fw-semi);
    color: var(--c-ink-700);
}

.notice-detail-footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px dashed var(--c-ink-100);
    text-align: center;
}
.notice-detail-footer .layui-btn {
    border-radius: var(--r-pill);
    padding: 0 22px;
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.notice-detail-footer .layui-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.10);
}

/* ========== 弹窗通知（notice-bell 弹层）正文样式 ==========
 * 与详情页 .notice-detail-content 共享视觉，但弹层是 layer 内置容器，
 * 高度由 area 决定，因此正文不要再设 max-height/overflow（会出现双滚动条）。 */
.notice-popup-wrap {
    padding: 18px 22px 20px;
}
.notice-popup-time {
    font-size: var(--fs-xs);
    color: var(--c-ink-400);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--c-ink-100);
}
.notice-popup-content {
    color: var(--c-ink-800);
    font-size: var(--fs-base);
    line-height: var(--lh-loose);
    word-break: break-word;
}
.notice-popup-content p { margin: 0 0 12px; }
/* 同详情页：用绝对像素 + !important 锁定标题层级，
 * 否则 --fs-md=16px 比正文 --fs-base=17px 还小，h3 看起来比正文更"轻"，
 * 用户反馈"标题样式不回显，全部都是一种样式"根因即此。 */
.notice-popup-content h1,
.notice-popup-content h2,
.notice-popup-content h3,
.notice-popup-content h4,
.notice-popup-content h5,
.notice-popup-content h6 {
    color: var(--c-ink-900);
    font-weight: var(--fw-semi);
    line-height: 1.35;
    margin: 22px 0 10px;
}
.notice-popup-content h1 { font-size: 26px !important; padding-bottom: 8px; border-bottom: 1px solid var(--c-ink-100); }
.notice-popup-content h2 { font-size: 22px !important; }
.notice-popup-content h3 { font-size: 19px !important; }
.notice-popup-content h4 { font-size: 17px !important; }
.notice-popup-content h5 { font-size: 16px !important; color: var(--c-ink-700); }
.notice-popup-content h6 { font-size: 15px !important; color: var(--c-ink-600); }
.notice-popup-content a {
    color: var(--c-brand-600);
    text-decoration: none;
    border-bottom: 1px dashed var(--c-brand-200);
}
.notice-popup-content a:hover {
    color: var(--c-brand-700);
    border-bottom-color: var(--c-brand-500);
}
.notice-popup-content img {
    display: block !important;
    float: none !important;
    margin: 12px 0;
    max-width: 100%;
    border-radius: var(--r-sm);
    box-shadow: var(--sh-sm);
    cursor: zoom-in;
}
.notice-popup-content pre {
    background: var(--c-ink-50);
    border: 1px solid var(--c-ink-100);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    overflow-x: auto;
}
.notice-popup-content code {
    background: var(--c-ink-50);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: var(--ff-mono);
    color: #B45309;
}
.notice-popup-content pre code {
    background: transparent;
    padding: 0;
    color: var(--c-ink-800);
}
.notice-popup-content blockquote {
    margin: 14px 0;
    padding: 8px 16px;
    border-left: 3px solid var(--c-brand-400);
    background: var(--c-brand-50);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
/* 同详情页：反制 layui 的 li{list-style:none} 全局 reset，恢复弹窗里有序/无序列表标记 */
.notice-popup-content ul {
    list-style: disc outside;
    padding-left: 24px;
    margin: 0 0 12px;
}
.notice-popup-content ol {
    list-style: decimal outside;
    padding-left: 24px;
    margin: 0 0 12px;
}
.notice-popup-content ul ul { list-style: circle outside; }
.notice-popup-content ul ul ul { list-style: square outside; }
.notice-popup-content li { list-style: inherit; margin: 4px 0; }

/* ========== 响应式：窄屏堆叠 ========== */
@media (max-width: 880px) {
    .notice-card {
        flex-direction: column;
        gap: 12px;
        padding: 14px 16px 14px 20px;
    }
    .notice-card-actions {
        border-left: none;
        border-top: 1px dashed var(--c-ink-100);
        padding: 10px 0 0;
        justify-content: flex-end;
        opacity: 1;
    }
    .notice-detail-card { padding: 28px 22px 22px; }
    .notice-detail-title { font-size: var(--fs-2xl); }
    .notice-detail-meta { gap: 10px; }
}