/* ===== css/main/20-components.css —— 组件与弹层：公告日志弹窗 / 长文展开与阅读器 / 调试开关 / 全屏封禁 / 响应式手机端 / 引导页覆盖层 =====
   · 2026-10-16 从 index.html 的 <style> 按【原顺序】切出：只切不重构，样式一个字符没改
   · 加载顺序（必须保持）：00-tokens → 10-layout → 20-components → 30-themes → 40-art
   · 本文件是第 3／5 段；删掉头部这 5 行，剩下的就是原文对应片段
   ===== */
    /* ---------- 公告日志弹窗 ---------- */
    .notice-modal {
      position: fixed;
      inset: 0;
      z-index: 8000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background: rgba(30, 22, 52, 0.6);
    }

    .notice-modal.open {
      display: flex;
      animation: noticeFade 0.2s ease;
    }

    .notice-panel {
      width: min(360px, calc(100vw - 32px));
      max-height: var(--notice-panel-max-height); /* 弹窗总高固定，不随公告数量撑爆 */
      display: flex;
      flex-direction: column;
      padding: 20px 18px;
      background: rgba(255, 255, 255, 0.96);
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(31, 38, 135, 0.18);
    }

    .notice-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
      flex: none;
    }

    .notice-title {
      font-size: 17px;
      font-weight: 700;
      color: #4a3b7c;
      letter-spacing: 1px;
    }

    .notice-close {
      padding: 2px 10px;
      border: none;
      border-radius: 999px;
      background: rgba(89, 49, 246, 0.12);
      color: #5931F6;
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
    }

    .notice-list {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      /* 内容区初始恰好容纳最新两条；第三条起在下方滚动查看 */
      max-height: var(--notice-list-max-height);
      /* 经典窄滚动条：Firefox */
      scrollbar-width: thin;
      scrollbar-color: var(--notice-scrollbar-thumb) var(--notice-scrollbar-track);
    }

    /* 经典窄滚动条：WebKit（Chrome/Safari/Edge） */
    .notice-list::-webkit-scrollbar {
      width: var(--notice-scrollbar-width);
    }

    .notice-list::-webkit-scrollbar-track {
      background: var(--notice-scrollbar-track);
      border-radius: 4px;
    }

    .notice-list::-webkit-scrollbar-thumb {
      background: var(--notice-scrollbar-thumb);
      border-radius: 4px;
    }

    /* ---------- 长文分段展开："展开查看更多"按钮（位于内容左下角） ---------- */
    .expand-more-button {
      display: block;                      /* 独占一行，自然落在左下角 */
      margin: 10px 0 0;
      padding: 5px 14px;
      border: 1px solid rgba(89, 49, 246, 0.32);
      border-radius: 999px;
      background: rgba(89, 49, 246, 0.10);
      color: #6f5bd6;
      font-size: 13px;
      font-family: inherit;
      letter-spacing: 0.5px;
      cursor: pointer;
    }

    .expand-more-button:hover {
      background: rgba(89, 49, 246, 0.18);
    }

    /* 评论区内的按钮：整体缩小一号，避免抢戏 */
    .expand-more-button.is-compact {
      margin-top: 6px;
      padding: 3px 11px;
      font-size: 11.5px;
    }

    /* "收回全部"按钮：仅在全部展开完出现，按下回到最初 300 字 */
    .collapse-all-button {
      display: block;
      margin: 8px 0 0;
      padding: 5px 14px;
      border: 1px solid rgba(89, 49, 246, 0.22);
      border-radius: 999px;
      background: rgba(89, 49, 246, 0.06);
      color: #8a7ec9;
      font-size: 13px;
      font-family: inherit;
      letter-spacing: 0.5px;
      cursor: pointer;
    }

    .collapse-all-button:hover {
      background: rgba(89, 49, 246, 0.12);
    }

    .collapse-all-button.is-compact {
      margin-top: 5px;
      padding: 3px 11px;
      font-size: 11.5px;
    }

    /* 两个按钮都带 display:block，必须让 [hidden] 仍能生效 */
    .expand-more-button[hidden],
    .collapse-all-button[hidden] {
      display: none !important;
    }

    /* ---------- 长文阅读器（大号"公告栏"：右侧窄滑块，一次性看完全文） ---------- */
    .reader-modal {
      position: fixed;
      inset: 0;
      z-index: 8500;                       /* 高于公告弹窗，低于封禁警告 */
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background: rgba(30, 22, 52, 0.6);
    }

    .reader-modal.open {
      display: flex;
      animation: noticeFade 0.2s ease;
    }

    .reader-panel {
      width: min(var(--reader-panel-width), calc(100vw - 32px));
      max-height: var(--reader-panel-max-height);
      display: flex;
      flex-direction: column;
      padding: 20px 22px;
      background: rgba(255, 255, 255, 0.97);
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
    }

    .reader-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
      flex: none;
    }

    .reader-head-text {
      min-width: 0;                        /* 允许内部文字正常换行/截断 */
    }

    .reader-nick {
      font-size: 15px;
      font-weight: 700;
      color: #5931F6;
    }

    .reader-meta {
      margin-left: 10px;
      font-size: 12px;
      color: #b3a8cc;
    }

    .reader-close {
      flex: none;
      padding: 2px 10px;
      border: none;
      border-radius: 999px;
      background: rgba(89, 49, 246, 0.12);
      color: #5931F6;
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
    }

    .reader-body {
      flex: 1 1 auto;
      min-height: 120px;
      overflow-y: auto;                    /* 右侧出现窄滑块，可滑到全文末尾 */
      -webkit-overflow-scrolling: touch;
      padding-right: 8px;
      font-size: 15.5px;
      line-height: 1.85;
      color: #333;
      white-space: pre-wrap;               /* 保留原有换行 */
      word-break: break-word;
      overflow-wrap: break-word;           /* 长串/表情连排不撑破阅读器 */
      /* 经典窄滚动条：Firefox */
      scrollbar-width: thin;
      scrollbar-color: var(--notice-scrollbar-thumb) var(--notice-scrollbar-track);
    }

    /* 经典窄滚动条：WebKit（Chrome/Safari/Edge） */
    .reader-body::-webkit-scrollbar {
      width: var(--notice-scrollbar-width);
    }

    .reader-body::-webkit-scrollbar-track {
      background: var(--notice-scrollbar-track);
      border-radius: 4px;
    }

    .reader-body::-webkit-scrollbar-thumb {
      background: var(--notice-scrollbar-thumb);
      border-radius: 4px;
    }

    /* ---------- 长文提示小弹窗（三个出口：全屏观看 / 取消 / ✕） ---------- */
    .long-tip-modal {
      position: fixed;
      inset: 0;
      z-index: 8600;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(30, 22, 52, 0.45);
    }

    .long-tip-modal.open {
      display: flex;
      animation: noticeFade 0.18s ease;
    }

    .long-tip-panel {
      position: relative;
      width: min(330px, calc(100vw - 40px));
      padding: 22px 20px 18px;
      background: rgba(255, 255, 255, 0.98);
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
      text-align: center;
    }

    .long-tip-close {
      position: absolute;
      top: 6px;
      right: 8px;
      padding: 2px 8px;
      border: none;
      border-radius: 999px;
      background: rgba(89, 49, 246, 0.10);
      color: #5931F6;
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
    }

    .long-tip-text {
      margin: 6px 0 16px;
      font-size: 14px;
      line-height: 1.7;
      color: #4a3b7c;
    }

    .long-tip-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
    }

    .long-tip-btn {
      padding: 8px 18px;
      border: 1px solid rgba(89, 49, 246, 0.35);
      border-radius: 999px;
      background: rgba(89, 49, 246, 0.10);
      color: #6f5bd6;
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
    }

    .long-tip-btn-primary {
      border-color: transparent;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #fff;
    }

    /* ---------- 临时调试开关（夸张验证用） ----------
       用法：push 后访问 index.html?maildebug=1 或 ?noticedebug=1（可同时）
       验收完成后，删除本注释块即可（不影响正式样式） */
    body.mail-debug {
      --mail-icon-size: 50px;
      --mail-dot-size: 22px;
      --mail-offset-x: 40px;
      --mail-offset-y: 40px;
    }

    body.mail-debug .notice-bell {
      outline: 3px dashed red;
    }

    /* ①验收 a：夸张测试——标签字号调 3 倍（12px → 36px）+ 红描边，
       用于证明 --notice-label-font-size 变量真的生效；验收完成后删掉本规则即回调。 */
    body.mail-debug .notice-label {
      --notice-label-font-size: 36px;
      outline: 2px dashed red;
    }

    body.notice-debug .notice-list {
      max-height: 150px !important;
      outline: 3px dashed red;
      --notice-scrollbar-width: 14px;
      --notice-scrollbar-thumb: red;
      --notice-scrollbar-track: #ffe3e3;
    }

    .notice-item {
      padding: 10px 0;
      border-bottom: 1px dashed rgba(89, 49, 246, 0.18);
    }

    .notice-item:last-child {
      border-bottom: none;
    }

    .notice-item-head {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 3px;
    }

    .notice-nick {
      font-size: 14px;
      font-weight: 700;
      color: #5931F6;
    }

    /* ③"（已修改）"角标：位于管理员昵称右侧、正文上方（就在昵称那一行内） */
    .notice-modified {
      position: relative;    /* 留在正常文档流中，不覆盖任何元素 */
      z-index: 0;            /* 层级最低：绝不遮挡昵称与正文 */
      margin-left: var(--notice-modified-gap);
      font-size: var(--notice-modified-font-size);
      color: var(--notice-modified-color);
      letter-spacing: 0;
      font-weight: 400;
      line-height: 1;
      white-space: nowrap;   /* 不换行 */
      flex: none;            /* 不被压缩，不挤压正文 */
    }

    .notice-time {
      margin-left: auto;
      font-size: 12px;
      color: #999;
    }

    .notice-content {
      font-size: 14px;
      line-height: 1.6;
      color: #333;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .notice-empty {
      padding: 24px 0;
      text-align: center;
      color: #9b8fc0;
      font-size: 14px;
    }

    /* 弹窗打开期间锁定背后页面滚动 */
    .notice-open-body {
      overflow: hidden;
    }

    @keyframes noticeFade {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
      .notice-modal {
        animation: none;
      }
    }

    /* ---------- 全屏封禁警告（行业级严厉风格） ---------- */
    .ban-overlay {
      position: fixed;
      inset: 0;
      z-index: 2147483647;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: linear-gradient(160deg, #1a0508 0%, #3d0a10 55%, #6b0f1d 100%);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }

    .ban-panel {
      width: 100%;
      max-width: 430px;
      padding: 34px 26px;
      text-align: center;
      background: rgba(122, 12, 24, 0.94);
      border: 2px solid #ff5b6e;
      border-radius: 18px;
      box-shadow: 0 0 60px rgba(255, 60, 80, 0.35);
      color: #fff;
    }

    .ban-icon {
      display: block;
      font-size: 46px;
      margin-bottom: 14px;
    }

    .ban-text {
      font-size: 18px;
      font-weight: 700;
      line-height: 1.7;
    }

    .ban-exit {
      display: inline-block;
      margin-top: 26px;
      padding: 12px 36px;
      border: none;
      border-radius: 999px;
      background: #ff5b6e;
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
    }

    .ban-exit:disabled {
      background: #7a7a7a;
      cursor: not-allowed;
    }

    /* 弹窗打开期间锁定背景滚动 */
    .ban-body-lock {
      overflow: hidden;
    }

    /* 移动端降级：关闭 backdrop，改纯色深红不透明背景 */
    @media (max-width: 600px) {
      .ban-overlay {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: #2a050b;
      }
    }

    /* ---------- 响应式（手机端） ---------- */
    @media (max-width: 600px) {
      .container {
        width: calc(100% - 24px);
        padding: 28px 18px 32px;
        border-radius: 16px;
      }

      .page-title {
        font-size: 28px;
      }

      .subtitle-row {
        margin-bottom: 26px;
      }

      .subtitle-row .page-subtitle {
        margin-bottom: 0;
      }

      .page-subtitle {
        font-size: 13px;
      }

      /* 移动端毛玻璃降级：关闭 backdrop-filter，改用纯色半透明底 */
      .container {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: rgba(255, 255, 255, 0.95);
      }

      .intro-overlay {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: rgba(20, 12, 40, 0.9);
      }

      .message-item {
        padding: 12px 14px;
      }

      .guide-card {
        padding: 24px 16px;
      }

      .form-card input,
      .form-card textarea {
        font-size: 16px; /* 防止 iOS 聚焦时自动放大 */
      }
    }
    /* ============================================================
       动效（Step 6）：只允许动 transform / opacity；
       box-shadow 仅作为聚焦柔光的渐显过渡，不用于连续动画
    ============================================================ */

    /* 1. 页面初次进入：整个主内容容器淡入 */
    .container {
      animation: fadeIn 0.3s ease-out;
    }

    /* 2. 留言卡片入场：淡入 + 轻微上滑（「加载更多」追加的卡片同样生效） */
    .message-item {
      animation: fadeUp 0.4s ease-out;
    }

    /* 8. 门禁引导卡片：显示时同样淡入上滑 */
    .guide-card {
      animation: fadeUp 0.4s ease-out;
    }

    /* 5. 输入框聚焦：柔光描边渐显而非瞬间出现 */
    .form-card input,
    .form-card textarea {
      transition: box-shadow 0.2s ease;
    }

    /* 3/4. 按钮：悬停轻抬、按下微缩，只动 transform */
    .submit-button,
    .load-more-button,
    .guide-card button {
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .submit-button:hover:not(:disabled),
    .load-more-button:hover:not(:disabled),
    .guide-card button:hover {
      transform: translateY(-2px);
    }

    .submit-button:active:not(:disabled),
    .load-more-button:active:not(:disabled),
    .guide-card button:active {
      transform: scale(0.97);
    }

    /* 6. 「加载更多」请求期间：半透明 */
    .load-more-button.is-loading {
      opacity: 0.6;
    }

    /* 7. 背景柔光粒子装饰（纯 CSS：两个径向渐变光晕，缓慢漂浮呼吸） */
    body::before,
    body::after {
      content: '';
      position: fixed;
      z-index: -1;
      pointer-events: none;
      border-radius: 50%;
      filter: blur(60px); /* 静态光晕，不做逐帧动画 */
      will-change: transform, opacity; /* 只加在真正持续动画的元素上 */
    }

    /* 增强态（默认）：光晕更大更亮 + 呼吸式漂浮 */
    body::before {
      top: 8%;
      left: -6%;
      width: 460px;
      height: 460px;
      background: radial-gradient(circle at center, rgba(251, 194, 235, 0.7), rgba(251, 194, 235, 0) 70%);
      animation: float 11s ease-in-out infinite;
    }

    body::after {
      bottom: 5%;
      right: -6%;
      width: 440px;
      height: 440px;
      background: radial-gradient(circle at center, rgba(89, 49, 246, 0.42), rgba(89, 49, 246, 0) 70%);
      animation: float 11s ease-in-out infinite;
      animation-delay: -5.5s; /* 与第一个装饰错开相位 */
    }

    /* 降档态：帧率看门狗命中 body.low-fps 时，一次性回到增强前水平 */
    body.low-fps::before {
      width: 420px;
      height: 420px;
      background: radial-gradient(circle at center, rgba(251, 194, 235, 0.55), rgba(251, 194, 235, 0) 70%);
      animation: floatSoft 12s ease-in-out infinite;
    }

    body.low-fps::after {
      width: 420px;
      height: 420px;
      background: radial-gradient(circle at center, rgba(89, 49, 246, 0.3), rgba(89, 49, 246, 0) 70%);
      animation: floatSoft 12s ease-in-out infinite;
      animation-delay: -6s;
    }

    /* ---------- 创立初衷引导页覆盖层（每次访问展示，覆盖在最上层） ---------- */
    .intro-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999; /* 高于页面所有现有元素（含 gate 锁层） */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(43, 30, 74, 0.72); /* 暗紫半透明，毛玻璃盖住全屏 */
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      opacity: 1;
      transition: opacity 0.6s ease, transform 0.6s ease; /* 淡出约 600ms */
    }

    .intro-overlay.is-leaving {
      opacity: 0;
      transform: translateY(10px); /* 轻微下沉淡出 */
      pointer-events: none;        /* 淡出过程中不再拦截下方点击 */
    }

    .intro-card {
      width: 100%;
      max-width: 460px;
      padding: 36px 30px;
      text-align: center;
      background: rgba(255, 255, 255, 0.92);
      border-radius: 20px;
      box-shadow: 0 8px 32px rgba(31, 38, 135, 0.25);
    }

    .intro-title {
      font-size: 26px;
      font-weight: 700;
      letter-spacing: 3px;
      color: #4a3b7c;
      margin-bottom: 18px;
    }

    .intro-text {
      font-size: 16px;
      line-height: 2;
      color: #333;
    }

    .intro-button {
      margin-top: 26px;
      padding: 13px 40px;
      border: none;
      border-radius: 999px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      font-family: inherit;
      letter-spacing: 1px;
      cursor: pointer;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .intro-button:hover {
      transform: translateY(-2px);
    }

    .intro-button:active {
      transform: scale(0.97);
    }

    /* 按钮下方小字提示（约正文 80% 字号，透明度稍降，居中） */
    .intro-hint {
      margin-top: 4px;
      font-size: 13px;
      line-height: 1.8;
      color: #9b8fc0;
      opacity: 0.75;
    }

    .intro-hint:first-of-type {
      margin-top: 16px;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(12px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 增强漂浮 + 柔和呼吸（幅度 1.3 倍，opacity 0.85 ↔ 1） */
    @keyframes float {
      0%, 100% {
        transform: translateY(0);
        opacity: 0.85;
      }
      50% {
        transform: translateY(-26px);
        opacity: 1;
      }
    }

    /* 降档漂浮（增强前水平：幅度 -20px，无呼吸） */
    @keyframes floatSoft {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-20px);
      }
    }

    /* 用户系统开启「减弱动效」时，关闭所有动画与过渡（粒子动画降到最低） */
    @media (prefers-reduced-motion: reduce) {
      .container,
      .message-item,
      .guide-card,
      body::before,
      body::after,
      body.low-fps::before,
      body.low-fps::after {
        animation: none;
      }

      .submit-button,
      .load-more-button,
      .guide-card button,
      .intro-overlay,
      .intro-button,
      .form-card input,
      .form-card textarea {
        transition: none;
      }
    }
    /* ============================================================
       调色板（新增）：页面主题配色切换 —— 紫霞（原有配色，默认） / 秋意（金黄落叶） / 盛夏（嫩绿生机）
       稳定性设计：
       1) 本节全部是「新增规则」，一行都没有改动上方既有样式
          → 默认紫霞配色与改造前 100% 一致，不存在回归风险；
       2) 秋意配色只写在 body[data-theme="autumn"] 之下（选择器优先级更高 + 位置更靠后），
          切回紫霞时这些规则一律不匹配，配色瞬间恢复原样；
       3) 调色板按钮与面板全部绝对定位（脱离排版流）
          → 绝不挤动大标题 / 标语 / 公告栏图标 / 昵称的位置；
       4) 所有配色都只写「文字颜色 / 背景色 / 边框色」，不涉及 display、尺寸、
          层级关系等结构属性 → 不可能造成黑屏、白屏或布局错位。
    ============================================================ */
    :root {
      /* 圆形调色板按钮：位置与尺寸全部由下面这几个变量推导，改这里即可整体微调 */
      --palette-fab-size: 36px;      /* 圆盘直径 */
      --palette-fab-inset: 0px;      /* 圆盘左缘距内容区左缘的距离（0 = 与「昵称」标签左对齐） */
      --palette-panel-rise: 56px;    /* 面板上抬高度：恰好盖住大标题，不侵入下方表单（面板变矮后同步下调） */
      --palette-fab-label-color: #9b8fc0; /* “调色板”三个字的颜色（默认与副标题同色） */
      /* 面板与色卡的主题跟随色（默认 = 紫霞） */
      --theme-accent: #5931F6;
      --theme-accent-soft: rgba(89, 49, 246, 0.16);
      --theme-panel-bg: rgba(255, 255, 255, 0.97);
      --theme-panel-border: rgba(89, 49, 246, 0.20);
      --theme-panel-shadow: 0 12px 30px rgba(48, 36, 96, 0.20), 0 2px 6px rgba(48, 36, 96, 0.10);
      --theme-panel-title: #4a3b7c;
      --theme-panel-text: #8b86a3;
      --theme-option-bg: rgba(89, 49, 246, 0.06);
      --theme-option-border: rgba(89, 49, 246, 0.18);
      --theme-option-name: #4a3b7c;
      --theme-option-desc: #8b86a3;
    }