/* ═══════════════════════════════════════════════════════════════════════════
 * news-feed.css — 聚合快讯视图（R25 视觉语言对齐）
 * 对齐标杆：行情 / 交易 / 策略 三页新视觉（落地参照 css/modules/market-board.css）
 *   · 页面底 #f4f4f4；卡片 #ffffff 圆角 12px；细分隔 #e9e9e9
 *   · 主字 #212121 / 次字 #757575；数字 tabular-nums
 *   · 主题紫 var(--am-brand-600,#7c3aed)：Tab 激活态/主按钮/链接选中态；
 *     hover 用 var(--am-brand-700,#6d28d9)
 *   · 涨跌色全站统一拍板：涨绿 #00834d / 跌红 #c2402f（利好绿 / 利空红）
 *   · 内容区宽版 max-width 1100px（旧 860px 系废除）；紧凑密度 12-13px 字号
 * 容器：.thread.view-news-feed（js/modules/news-feed.js 惰性渲染进 #thread）。
 * 旧 view-card 范式（#f6f7f8 卡底 / 10px 圆角）整体废除：HTML 模板不再挂
 * view-card 类，本文件自带全部卡片视觉（参照 market-board 解耦方式），
 * 变量收敛在 .view-news-feed 作用域内，不污染全局。
 * 惰性 DOM：初始视图不含任何 .nf-* 元素，不影响像素基线（铁律 §0）。
 * ═══════════════════════════════════════════════════════════════════════════ */

.view-news-feed {
  --nf-bg: #f4f4f4;                   /* 页面底 / 卡内芯片底 */
  --nf-card: #ffffff;                 /* 卡片底 */
  --nf-line: #e9e9e9;                 /* 细分隔线 / 描边 */
  --nf-fg: #212121;                   /* 主字 */
  --nf-muted: #757575;                /* 次字 */
  --nf-up: #00834d;                   /* 涨 / 利好 — 绿（全站统一拍板） */
  --nf-down: #c2402f;                 /* 跌 / 利空 — 红（全站统一拍板） */
  --nf-brand: var(--am-brand-600, #7c3aed);        /* 主题紫：激活/选中 */
  --nf-brand-strong: var(--am-brand-700, #6d28d9); /* hover / 按下 */
  --nf-brand-soft: #f3eefd;           /* 主题紫弱底 */
  --nf-brand-line: #e4d9fb;           /* 主题紫弱描边 */
  max-width: 1100px;                  /* 内容区宽版（对齐 .view-market-board） */
  width: 100%;
  margin: 0 auto;
}

.nf-wrap { display: flex; flex-direction: column; padding: 18px 0 48px; }

/* ── 区块头：中字重标题 + 灰色副题小字 + 右侧数据时间戳 ── */
.nf-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.nf-sec-title { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--type-section-size); font-weight: 600; color: var(--nf-fg);  line-height: var(--type-section-line); }
.nf-sec-icon { width: 16px; height: 16px; flex: none; color: var(--nf-brand); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nf-sec-sub { font-size: var(--type-caption-size); font-weight: 400; color: var(--nf-muted); margin-left: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  line-height: var(--type-caption-line); }
.nf-sec-time { flex: none; font-size: var(--type-caption-size); color: var(--nf-muted); font-variant-numeric: tabular-nums;  line-height: var(--type-caption-line); }

/* ── 分类 Tab：白底容器 + 主题紫激活态 ── */
.nf-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  margin-bottom: 12px;
  background: var(--nf-card);
  border: 1px solid var(--nf-line);
  border-radius: 10px;
  width: fit-content;
}

.nf-tab {
  border: none;
  background: transparent;
  padding: 5px 14px;
  font-size: var(--type-body-size);
  font-family: var(--am-font-family, inherit);
  color: var(--nf-muted);
  border-radius: 7px;
  cursor: pointer;
  
  transition: background .15s ease, color .15s ease;
 line-height: var(--type-body-line); }

.nf-tab:hover { background: var(--nf-brand-soft); color: var(--nf-brand-strong); }

/* 选中态瞬时生效（离散选择即时反馈；hover 缓动保留在基态 transition） */
.nf-tab.active { background: var(--nf-brand); color: #ffffff; font-weight: 600; transition: none; }

.nf-tab:focus-visible { outline: 2px solid var(--nf-brand); outline-offset: 1px; }

/* ── 「N 条新消息」提示条（主操作按钮：主题紫） ── */
.nf-newbar {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 7px 14px;
  border: none;
  border-radius: 8px;
  background: var(--nf-brand);
  color: #ffffff;
  font-size: var(--type-caption-size);
  font-family: var(--am-font-family, inherit);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background .15s ease;
 line-height: var(--type-caption-line); }

.nf-newbar:hover { background: var(--nf-brand-strong); }
.nf-newbar[hidden] { display: none; }   /* 修复：旧版 display:block 覆盖 hidden 属性 */
.nf-newbar:focus-visible { outline: 2px solid var(--nf-brand); outline-offset: 2px; }

/* ── 快讯卡片流：白卡 12px 圆角 + 紧凑密度 + 时间线（左轴 + 节点） ── */
.nf-list { position: relative; padding-left: 20px; }

/* 时间轴线（细分隔色） */
.nf-list::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--nf-line);
  border-radius: 1px;
}

.nf-card {
  position: relative;
  background: var(--nf-card);
  border: 1px solid var(--nf-line);
  border-radius: 12px;
  padding: 10px 14px 12px;
  font-size: var(--type-body-size);
  margin-bottom: 8px;
 line-height: var(--type-body-line); }

/* 时间线节点：白底细描边，最新一条主题紫高亮 */
.nf-card::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nf-card);
  border: 2px solid var(--nf-line);
  box-sizing: border-box;
}

.nf-card:first-child::before { border-color: var(--nf-brand); }

/* ── 卡片内 meta 行：相对时间 / 来源 / 情绪标签 ── */
.nf-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }

.nf-time { color: var(--nf-muted); font-size: var(--type-caption-size); font-variant-numeric: tabular-nums; white-space: nowrap;  line-height: var(--type-caption-line); }

.nf-source { color: var(--nf-muted); font-size: var(--type-caption-size); background: var(--nf-bg); border-radius: 5px; padding: 1px 6px; white-space: nowrap;  line-height: var(--type-caption-line); }

/* 情绪标签：利好绿 / 利空红 / 中性灰（涨跌色全站统一拍板） */
.nf-sent { font-size: var(--type-caption-size); font-weight: 600; border-radius: 5px; padding: 1px 7px; white-space: nowrap;  line-height: var(--type-caption-line); }

.nf-sent-bull { color: var(--nf-up); background: rgba(0, 131, 77, .08); }
.nf-sent-bear { color: var(--nf-down); background: rgba(194, 64, 47, .08); }
.nf-sent-neutral { color: var(--nf-muted); background: var(--nf-bg); }

/* ── 标题 / 摘要（两行截断，紧凑字号） ── */
.nf-title { font-size: var(--type-body-size); font-weight: 600; color: var(--nf-fg);  margin: 0 0 4px;  line-height: var(--type-body-line); }

.nf-body {
  font-size: var(--type-caption-size);
  color: var(--nf-muted);
  
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
 line-height: var(--type-caption-line); }

/* ── 关联标的 tag（链接语义：主题紫选中 / hover 深化） ── */
.nf-syms { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px; }

.nf-sym {
  border: 1px solid var(--nf-brand-line);
  background: var(--nf-brand-soft);
  color: var(--nf-brand);
  font-family: var(--am-font-family-code, ui-monospace, monospace);
  font-size: var(--type-caption-size);
  font-variant-numeric: tabular-nums;
  border-radius: 6px;
  padding: 1px 8px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
 line-height: var(--type-caption-line); }

.nf-sym:hover { background: #ece2fb; border-color: var(--nf-brand); color: var(--nf-brand-strong); }
.nf-sym:focus-visible { outline: 2px solid var(--nf-brand); outline-offset: 1px; }

/* ── 空态（新卡片范式） ── */
.nf-empty {
  background: var(--nf-card);
  border: 1px solid var(--nf-line);
  border-radius: 12px;
  color: var(--nf-muted);
  text-align: center;
  padding: 28px 14px;
  font-size: var(--type-body-size);
 line-height: var(--type-body-line); }

/* ── 响应式：窄屏收起区块副题 ── */
@media (max-width: 900px) {
  .nf-sec-sub { display: none; }
}