/* ═══════════════════════════════════════════════════════════════════════════
 * signal-plaza.css — 信号广场视图（R25 视觉语言对齐版）
 * 容器：.thread.view-signal-plaza（js/modules/signal-plaza.js 惰性渲染进 #thread）
 * 范式：对齐已上线的行情/交易/策略三页新视觉语言（落地参照 market-board.css）：
 *   页面底 #f4f4f4 / 卡 #ffffff 圆角 12px / 细分隔 #e9e9e9；
 *   主字 #212121 / 次字 #757575 / 数字 tabular-nums；
 *   区块标题 = 中字重标题 + 灰色副标题小字 + 右侧数据时间戳；
 *   内容区宽版 max-width 1100px（覆盖 styles.css .thread 808px 窄版）；
 *   主题紫 var(--am-brand-600,#7c3aed)：筛选激活态/链接/highlight，
 *   hover 用 --am-brand-700；
 *   涨跌色全站统一拍板：涨/多=绿 #00834d、跌/空=红 #c2402f
 *   （信号方向徽标语义保留：买入=看涨绿系、卖出=看跌红系）。
 * 弃旧 view-card 灰卡范式（#f6f7f8 卡底 + 10px 圆角）：模板层已去 view-card
 * 类，本文件自持白卡样式（同 notify-center.css R25 对齐做法）。
 * 惰性 DOM：初始视图不含任何 .sp-* 元素，不影响像素基线。
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── 视觉令牌（本视图私有） ── */
.view-signal-plaza {
  --sp-up-fg: #00834d;            /* 涨/多（买入）— 绿（全站统一拍板） */
  --sp-up-bg: #e5f2ed;            /* 方向徽标浅绿底 */
  --sp-down-fg: #c2402f;          /* 跌/空（卖出）— 红（全站统一拍板） */
  --sp-down-bg: #f9ecea;          /* 方向徽标浅红底 */
  --sp-page: #f4f4f4;             /* 页面底 / 芯片底 */
  --sp-card: #ffffff;             /* 区块卡底 */
  --sp-line: #e9e9e9;             /* 细分隔线 / 描边 */
  --sp-fg: #212121;               /* 主字 */
  --sp-muted: #757575;            /* 次字 */
  --sp-radius: 12px;              /* 区块卡圆角 */
  --sp-brand: var(--am-brand-600, #7c3aed);
  --sp-brand-hover: var(--am-brand-700, #6d28d9);
}

/* ── 视图容器（thread 变体，内容区宽版 1100px） ── */
.thread.view-signal-plaza {
  width: auto; max-width: none; margin: 0; padding: 18px 26px 34px;
  min-width: 0; container-type: inline-size; container-name: signals-content;
}

.sp-wrap { display: flex; flex-direction: column; min-width: 0; }

/* ── 区块卡：白底 + 圆角 12px + #e9e9e9 细描边（无重边框） ── */
.sp-section { min-width: 0; background: var(--sp-card); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); padding: 16px 18px 8px; }

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

/* ── 头部：筛选器 + 右上角铃铛入口（下缘细分隔） ── */
.sp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--sp-line); }

.sp-filters { display: flex; flex: 1; min-width: 0; flex-wrap: wrap; align-items: center; gap: 10px; }

.sp-fgroup { display: flex; max-width: 100%; flex-wrap: wrap; align-items: center; gap: 6px; }

.sp-flabel { font-size: var(--type-caption-size); color: var(--sp-muted); white-space: nowrap;  line-height: var(--type-caption-line); }

/* 方向筛选按钮组 + 新增三维筛选芯片组（类型/来源/类别，round-27 用户需求）：
   激活态主题紫底白字，hover 主题紫深一档 */
.sp-fside,
.sp-fchip {
  border: none;
  background: transparent;
  padding: 5px 12px;
  font-size: var(--type-caption-size);
  font-family: var(--am-font-family);
  
  color: var(--sp-muted);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
 line-height: var(--type-caption-line); }

.sp-fside:hover,
.sp-fchip:hover { color: var(--sp-brand-hover); background: rgba(124, 58, 237, .08); }

.sp-fside.active,
.sp-fchip.active { background: var(--sp-brand); color: #fff; font-weight: 600; }

.sp-fside:focus-visible,
.sp-fchip:focus-visible { outline: 2px solid var(--sp-brand); outline-offset: 1px; }

/* 标的/强度下拉：白底 + #e9e9e9 细描边 */
.sp-fsel {
  font-size: var(--type-caption-size);
  font-family: var(--am-font-family);
  
  color: var(--sp-fg);
  background: var(--sp-card);
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
  outline: none;
  font-variant-numeric: tabular-nums;
 line-height: var(--type-caption-line); }

.sp-fsel:focus-visible { border-color: var(--sp-brand); }

/* 右上角铃铛（通知中心入口）：hover 主题紫 */
.sp-bell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--sp-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}

.sp-bell:hover { color: var(--sp-brand-hover); background: rgba(124, 58, 237, .08); }
.sp-bell:focus-visible { outline: 2px solid var(--sp-brand); outline-offset: 1px; }

.sp-bell-svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── 信号列表：白卡内紧凑行（36px 系行高 + #e9e9e9 细分隔） ── */
.sp-list { display: flex; flex-direction: column; }

.sp-card {
  padding: 8px 2px 11px 14px;
  border-bottom: 1px solid var(--sp-line);
  cursor: pointer;
  transition: background .15s ease;
}

.sp-card:last-child { border-bottom: none; }
.sp-card:hover { background: rgba(124, 58, 237, .04); }
.sp-card:hover .sp-strategy { color: var(--sp-brand); }
.sp-card:focus-visible { outline: 2px solid var(--sp-brand); outline-offset: -2px; }

/* 方向色条：买入=看涨绿 / 卖出=看跌红（全站统一涨跌口径，方向语义保留）；
   快讯卡=品牌紫色条（类型区分于方向色） */
.sp-card.sp-side-buy { box-shadow: inset 3px 0 0 var(--sp-up-fg); }
.sp-card.sp-side-sell { box-shadow: inset 3px 0 0 var(--sp-down-fg); }
.sp-card.sp-type-news { box-shadow: inset 3px 0 0 var(--sp-brand); }

/* ── 来源徽标：官方=浅紫底紫字 / 第三方=灰底灰字（round-27 来源维度） ── */
.sp-source {
  flex: none;
  font-size: var(--type-caption-size);
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 6px;
  white-space: nowrap;
  letter-spacing: .02em;
 line-height: var(--type-caption-line); }

.sp-source.sp-source-official { color: var(--sp-brand); background: rgba(124, 58, 237, .09); }

.sp-source.sp-source-third-party { color: var(--sp-muted); background: var(--sp-page); }

/* ── 快讯卡（round-27 类型维度）：类型徽标 + 媒体名 + 情绪徽标 + 标题 ── */
.sp-tbadge {
  flex: none;
  font-size: var(--type-caption-size);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  color: #fff;
  background: var(--sp-brand);
  letter-spacing: .02em;
 line-height: var(--type-caption-line); }

.sp-newssrc {
  flex: none;
  max-width: 130px;
  font-size: var(--type-caption-size);
  color: var(--sp-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 line-height: var(--type-caption-line); }

/* 情绪徽标：利好=看涨绿 / 利空=看跌红 / 中性=灰（沿用全站涨跌口径） */
.sp-sent {
  flex: none;
  margin-left: auto;
  font-size: var(--type-caption-size);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
 line-height: var(--type-caption-line); }

.sp-sent.sp-sent-positive { color: var(--sp-up-fg); background: var(--sp-up-bg); }
.sp-sent.sp-sent-negative { color: var(--sp-down-fg); background: var(--sp-down-bg); }
.sp-sent.sp-sent-neutral { color: var(--sp-muted); background: var(--sp-page); }

.sp-newstitle {
  min-width: 0;
  flex: 1;
  font-size: var(--type-body-size);
  font-weight: 500;
  color: var(--sp-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 line-height: var(--type-body-line); }

.sp-type-news .sp-row2 { min-height: 24px; }

/* ── 行首：策略名 / 标的芯片 / 方向徽标（36px 系行高） ── */
.sp-row1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin-bottom: 2px;
}

.sp-strategy {
  min-width: 0;
  font-size: var(--type-body-size);
  font-weight: 600;
  color: var(--sp-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .15s ease;
 line-height: var(--type-body-line); }

.sp-sym {
  flex: none;
  font-size: var(--type-caption-size);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--sp-fg);
  background: var(--sp-page);
  border: 1px solid var(--sp-line);
  border-radius: 6px;
  padding: 1px 7px;
 line-height: var(--type-caption-line); }

.sp-side {
  flex: none;
  margin-left: auto;
  font-size: var(--type-caption-size);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
 line-height: var(--type-caption-line); }

/* 方向徽标：买入=看涨绿 / 卖出=看跌红（与全站涨跌色一致） */
.sp-side.sp-side-buy { color: var(--sp-up-fg); background: var(--sp-up-bg); }
.sp-side.sp-side-sell { color: var(--sp-down-fg); background: var(--sp-down-bg); }

/* ── 次行：触发价 / 强度星 / 相对时间 ── */
.sp-row2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

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

.sp-price b {
  color: var(--sp-fg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 强度星（1-5）：亮星金 / 灰星 */
.sp-stars {
  display: inline-flex;
  gap: 1px;
  font-size: var(--type-caption-size);
  letter-spacing: 1px;
  white-space: nowrap;
 line-height: var(--type-caption-line); }

.sp-star { color: #d9d9d9; }

.sp-star.on { color: var(--am-yellow-9, #f3a700); }

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

/* ── 理由一句话 ── */
.sp-reason {
  margin: 0;
  font-size: var(--type-caption-size);
  
  color: var(--sp-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
 line-height: var(--type-caption-line); }

/* ── 空态 ── */
.sp-empty {
  padding: 40px 14px 44px;
  font-size: var(--type-body-size);
  color: var(--sp-muted);
  text-align: center;
 line-height: var(--type-body-line); }

.sp-results { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: var(--sp-muted); font-size: var(--type-caption-size); line-height: var(--type-caption-line); }
.sp-reset { border: 0; background: transparent; color: var(--am-purple-9, #8055b6); font: inherit; padding: 4px 0; cursor: pointer; }
.sp-data-note { color: var(--sp-muted, #746e7b); font-size: var(--type-caption-size); line-height: var(--type-caption-line); }
.sp-fgroup button:disabled, .sp-fgroup select:disabled { opacity: .5; cursor: not-allowed; }
.sp-news-dialog .fm-dialog-body h3 { font-size: var(--type-section-size, 16px); line-height: var(--type-section-line, 24px); font-weight: 600; margin: 12px 0; }
.sp-news-dialog .fm-dialog-body p { line-height: var(--type-body-line); overflow-wrap: anywhere; }
.sp-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.sp-card-actions button { min-height: 32px; padding: 5px 11px; border-radius: 6px; font: inherit; font-size: var(--type-caption-size); line-height: var(--type-caption-line); cursor: pointer; }
.sp-intake-btn { border: 1px solid #dfd4ed; background: #f3edf9; color: #754aa7; }
.sp-intake-btn:hover { background: #eae0f5; border-color: #c4aedf; }
.sp-secondary-btn { border: 1px solid transparent; background: transparent; color: #776b87; }
.sp-secondary-btn:hover { background: #f2eef7; color: #754aa7; }
.sp-card-actions button:focus-visible, .sp-market-link:focus-visible { outline: 2px solid #9d7bc6; outline-offset: 2px; }
.sp-detail-meta { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 16px 0; color: #776b87; }
.sp-detail-meta b { color: #51495d; font-weight: 500; margin-left: 6px; }
.sp-news-dialog h4 { font-size: var(--type-body-size); font-weight: 600; margin: 18px 0 8px; }
.sp-market-link { display: inline-flex; padding: 5px 0; margin-top: 14px; background: none; border: 0; color: #754aa7; font: inherit; font-size: var(--type-caption-size); cursor: pointer; }

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

/* 三栏布局按业务栏宽度收紧，而不是按整个浏览器宽度判断。 */
@container signals-content (max-width: 520px) {
  .sp-section { padding: 12px 12px 6px; }
  .sp-fgroup { gap: 4px; }
  .sp-fside, .sp-fchip { padding: 5px 8px; }
  .sp-row2 { column-gap: 8px; row-gap: 5px; }
  .sp-type-news .sp-newstitle {
    flex-basis: 100%; white-space: normal; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .sp-type-news .sp-time { margin-left: 0; }
}