/* Agent2API · 设置页「软件更新」的更新日志与更新提示样式
 *
 * 为什么单独一个文件（而不是并进 page-settings.css）：
 *   page-settings.css 里是各设置面板的排版（表单行、保留天数表格…），
 *   这里则是「一段渲染出来的 Markdown 正文」的排版 + 版本卡片 + 导航小胶囊，
 *   关注点不同；分开后更新日志的观感要整体调整时只动这一个文件。
 *   本文件在 page-settings.css 之后加载（见 index.html 的样式顺序）。
 *
 * 颜色一律走 tokens.css 的变量，深浅两套主题自动适配。
 */

/* ─── 导航「设置」项上的更新提示 ───
   复用 layout.css 里 .count 胶囊的尺寸/排版（与账号计数、日志未读同一套），
   只把配色换成提示色：有新版本是好消息，用日志未读那种警示红会让人以为出了故障。
   这里用 ID 选择器，是为了稳定压过 .nav-item .count:not(.muted) 的红色。 */
#nav-count-update {
  border-color: var(--warn-bd);
  background: var(--warn-soft);
  color: var(--warn);
}

.nav-item.active #nav-count-update { background: var(--surface); }

/* ─── 关于作者 / 收藏项目 ─── */
.update-author {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-inset);
}

.update-author-text {
  flex: 1 1 320px;
  min-width: 0;
  color: var(--text-2);
  font-size: 11.5px;
  line-height: 1.7;
}

.update-author-text strong { color: var(--text); font-weight: 650; margin-right: 6px; }

.update-author-text a {
  color: var(--primary-fg);
  font-weight: 600;
  text-decoration: none;
}

.update-author-text a:hover { text-decoration: underline; }

.update-author-actions { display: flex; gap: 7px; margin-left: auto; }

/* ─── 更新日志：外壳 ─── */
.update-log {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-inset);
}

.update-log-head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

/* 用 span 而不是 h3：卡片正文里的 Markdown 标题已占用 h3~h6，
   这里再插一个同级标题会让大纲层级与视觉层级打结 */
.update-log-title { color: var(--text); font-size: 12.5px; font-weight: 650; }

.update-log-meta {
  color: var(--text-3);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* 外壳本身不滚，也不限高：滚动收在下面的版本正文（.rel-note-body）里，
   这样「更新日志」标题与版本卡头保持可见，正文再长也只在框内滚，
   不会把整张设置页撑长、把上方的更新设置项推出一屏。 */
.update-log-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 加载中 / 空态 / 失败态的统一文案块：与面板既有的 .detail 一个观感 */
.update-log-hint {
  color: var(--text-2);
  font-size: 11.5px;
  line-height: 1.7;
  word-break: break-word;
}

.update-log-hint.bad { color: var(--danger); }

.update-log-hint button { margin-left: 8px; }

/* ─── 更新日志：最新一版的说明 ───
   只展示最新一次发布，所以不再需要「列表 / 时间轴 + 逐条折叠」那套结构：
   一份正文直接平铺成一张静态卡片，版本号与日期做卡头，正文接在下面。

   为什么不做成折叠：只有这一份说明，折叠只会让用户多一次点击才能看到内容，
   而看不到的风险是「不知道这次更新改了什么」—— 这正是这块 UI 存在的理由。
   历史版本若有需要，卡尾的「在 GitHub 查看完整说明」直接跳到 Releases 页面。 */

.rel-note {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  overflow: hidden;
}

/* 卡头：版本号 + 预发布标记 + 发布日期 */
.rel-note-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 12px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-2);
}

/* 版本号：等宽字体 + 表格数字，与面板里其它版本号读数同一套写法 */
.rel-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 650;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.rel-date {
  /* 靠右：没有链接时自己吃掉空档；有链接时由下面的相邻规则交还给链接 */
  margin-left: auto;
  color: var(--text-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 正文滚动区：限高与「检测到更新」弹窗的 .update-modal-notes 一致取 46vh；
   overscroll-behavior 拦住滚动链 —— 正文滚到底后继续滚，不会带动外层设置页一起跳 */
.rel-note-body {
  padding: 10px 12px 12px;
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 卡头里的「在 GitHub 查看完整说明」。
   放在卡头而不是正文末尾：正文是限高滚动的（.rel-note-body 46vh），日志一长，
   页脚那个入口就得滚到底才看得见。卡头不参与滚动，永远在第一屏。

   与 .rel-date 的 margin-left:auto 配合：链接吃掉中间的空档，日期仍靠最右。
   日期不存在时（没有 publishedAt），链接自己顶上 auto，同样贴右。 */
.rel-head-link {
  margin-left: auto;
  color: var(--primary-fg);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.rel-head-link:hover { text-decoration: underline; }

/* 日期紧跟链接之后（链接已经吃了 auto，这里不再 auto，否则会平分空档） */
.rel-head-link + .rel-date { margin-left: 0; }

/* ─── 「加入交流群」弹窗 ──────────────────────────────
   四张卡片（QQ 群 ×2、Telegram、Discord）：左边品牌标、右边主副标题。
   卡片是原生 <button>（QQ，点击复制）/ <a>（外链，点击打开）。

   **这里不能换成组件库 Button**：Button 的 ghost 变体自带 `border-transparent
   bg-transparent`，会把卡片描边与底色整条压掉（两张卡粘成一片、与 <a> 卡对不齐）。
   改用原生元素后还要压掉 components.css 里那两条全局规则：
     · `button { height: 30px }` —— 卡片高度得由两行内容决定；
     · `button:hover:not(:disabled) { background: var(--control-hover) }` —— 特异性
       0,2,1，比 `.qq-card:hover`（0,2,0）高，不显式压过的话悬停会冒出灰底。
   下面统一用 `button.qq-card…` 形态把特异性提到 0,3,1，正好盖住那一条。 */
.qq-intro {
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.6;
}

.qq-cards {
  display: grid;
  gap: 8px;
}

/* 卡片的公共外形：button / a 两种元素共用一套，避免两处样式漂移 */
.qq-card,
a.qq-card,
button.qq-card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  /* 按掉全局 button 的定高与内边距，让卡片高度由内容（两行字）决定 */
  height: auto;
  width: 100%;
  padding: 11px 13px;
  text-align: left;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.qq-card:hover,
a.qq-card:hover,
button.qq-card:hover:not(:disabled) {
  border-color: var(--primary-bd);
  background: var(--primary-soft);
}

.qq-card:focus-visible,
a.qq-card:focus-visible,
button.qq-card:focus-visible { box-shadow: var(--ring); }

/* 品牌标：34px 圆角方框 + 白色图形。Simple Icons 的图形是**单色**（品牌色），
   所以要垫一层同色底、把图形反白 —— 这才是三家官方标的真实样子（蓝底白企鹅 /
   蓝底白纸飞机 / 靛底白笑脸）。底色与图形色成对写在下面，改一处要改两处 */
.qq-card-logo {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
}

.qq-card-logo svg {
  width: 21px;
  height: 21px;
  display: block;
}

/* 图形是品牌色填充，反白靠 filter 会把描边也一起吃掉；改为给 path 直接上白色 */
.qq-card-logo svg path { fill: #fff !important; }

/* 品牌底：与 icons.js 里三枚 path 的 fill 取同一组 hex */
.qq-card-logo[data-brand='qq'] { background: #1EBAFC; }
.qq-card-logo[data-brand='telegram'] { background: #26A5E4; }
.qq-card-logo[data-brand='discord'] { background: #5865F2; }

.qq-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.qq-card-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}

/* 群号用等宽数字，与标题同一行基线对齐；字号略大是主读数 */
.qq-card-title code {
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--primary-fg);
}

.qq-card-sub {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-3);
}

/* 「即将满员」：卡片右上角的整卡状态，不跟标题挤在一行 */
.qq-card-flag {
  flex: 0 0 auto;
  align-self: flex-start;
}

.qq-foot {
  margin: 2px 0 0;
  color: var(--text-3);
  font-size: 11.5px;
  line-height: 1.6;
}

/* ─── Markdown 正文排版 ───
   作用域收在 .md-body 里，不污染面板上其它文字。 */
.md-body {
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.75;
  word-break: break-word;
}

/* 首元素不留上边距：卡片顶部已经有一层内边距，再叠一次会显得空 */
.md-body > :first-child { margin-top: 6px; }

.md-body .md-h {
  /* 标题颜色比正文重一档，在密集的列表说明里能一眼切分段落 */
  color: var(--text);
  font-weight: 650;
  line-height: 1.5;
  margin: 14px 0 6px;
}

.md-body h3.md-h { font-size: 13px; }
.md-body h4.md-h { font-size: 12.5px; }
.md-body h5.md-h,
.md-body h6.md-h { font-size: 12px; color: var(--text-2); }

.md-body p { margin: 7px 0; }

.md-body .md-list {
  margin: 7px 0;
  padding-left: 20px;      /* 列表缩进：嵌套层靠这个逐级内收 */
}

.md-body .md-list .md-list { margin: 4px 0; }

.md-body li { margin: 3px 0; }

/* 行内代码：与 .hint code 同款（描边 + 浅底），在正文里既不抢眼又能认出是代码 */
.md-body .md-code {
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--surface-3);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11.5px;
}

/* 代码块：内容原样保留（不折行），超出横向滚动 */
.md-body .md-pre {
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  overflow-x: auto;
}

.md-body .md-pre code {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  white-space: pre;
}

.md-body .md-quote {
  margin: 8px 0;
  padding: 2px 0 2px 10px;
  border-left: 2px solid var(--border-strong);
  color: var(--text-3);
}

.md-body .md-quote p { margin: 4px 0; }

/* 表格（GFM）：细边框 + 表头浅底；列宽交给内容与浏览器自动分，不设固定宽 */
.md-body .md-table {
  margin: 8px 0;
  border-collapse: collapse;
  font-size: 12px;
}

.md-body .md-table th,
.md-body .md-table td {
  padding: 5px 9px;
  border: 1px solid var(--border);
  text-align: left;
}

.md-body .md-table th {
  background: var(--surface-3);
  color: var(--text);
  font-weight: 600;
}

.md-body .md-table th.md-ta-c,
.md-body .md-table td.md-ta-c { text-align: center; }

.md-body .md-table th.md-ta-r,
.md-body .md-table td.md-ta-r { text-align: right; }

.md-body .md-hr {
  margin: 12px 0;
  border: 0;
  border-top: 1px solid var(--hairline);
}

/* 版本没写说明时的占位（与上面的正文同一字号，不显得像报错） */
.md-body .md-body-empty {
  margin: 7px 0;
  color: var(--text-3);
}

.md-body a {
  color: var(--primary-fg);
  text-decoration: none;
}

.md-body a:hover { text-decoration: underline; }

.md-body strong { color: var(--text); font-weight: 650; }

.md-body del { color: var(--text-3); }

/* 任务列表：勾选框用方框 + 勾画出来（不引原生 input，见 markdown.js 的说明） */
.md-body .md-task { list-style: none; }

.md-body .md-task-box {
  position: relative;
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  vertical-align: -1px;
}

.md-body .md-task-done .md-task-box {
  border-color: var(--ok-bd);
  background: var(--ok-soft);
}

.md-body .md-task-done .md-task-box::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 0;
  width: 4px;
  height: 7px;
  border-right: 1.5px solid var(--ok);
  border-bottom: 1.5px solid var(--ok);
  transform: rotate(45deg);
}