/* v16.css —— 13 版组件层（2026-10-08，锚 docs/迭代/2026-10-08-13版整体需求/）
   设计评审落地：游客示例图示意（D2）、默认界面引导文案（D3）、大盘信号过期提示（D12）……按批追加。
   ≤720 规则在 mobile.css 尾段，暗色差异在 theme-dark.css 尾部（13 版段）。 */

/* D2：游客示例卡五类画图示意（替代 401 后的「图暂不可用」灰块） */
.sc-draw-guest { position: relative; display: block; width: 100%; aspect-ratio: 166 / 74; background: var(--soft-2); color: var(--ink-3); }
.sc-draw-guest svg { position: absolute; inset: 6px 8px 8px; width: calc(100% - 16px); height: calc(100% - 14px); }
.sc-draw-lock { position: absolute; right: 6px; bottom: 6px; font-size: var(--fs-11); font-weight: 600; line-height: 18px; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0 8px; }

/* D3：引导文案在示例卡上方一行，左对齐卡片，去两侧装饰线 */
.default-hero .gh-sub { display: block; width: min(728px, 100%); text-align: left; font-size: var(--fs-13); color: var(--ink-3); }
.default-hero .gh-sub::before, .default-hero .gh-sub::after { content: none; }

/* D12：大盘信号「数据截至 X · 数据更新延迟」——中性提示，只在本图落后时出现 */
.dm-sub .sig-lag { color: var(--ink-2); font-weight: 600; }
/* D12：点名落后序列后，375 上页头副行可能折到两三行——头部行允许长高（内容不超 45 时仍是 56，与两侧头部行齐平） */
.ws > .drawer .drawer-head { height: auto; min-height: 56px; padding-top: 5px; padding-bottom: 5px; }

/* ============ 13 版 §3（Q7）浮窗承载的模块页（天天复盘 / 推特X日报 / 大盘监测 / 大盘信号）页头 = 模块页统一骨架 ============
   标题 / 元信息 / Tab 直接用 .mp-h1 / .mp-sub / .mp-tabs（v14.css §10），这里只管浮窗头部的几何：
   页头内容与正文同一列（报告页 760；大盘信号页两栏 1284，<1100 时 960），✕ 改 36 圆；有 Tab 时下缘线常显，无 Tab 滚动后出现 */
.ws.is-page > .drawer { --pg-w: var(--content-max); }
.ws.is-page > .drawer.is-sigpage { --pg-w: 1284px; background: var(--page); }
.ws.is-page > .drawer .drawer-head {
  height: auto; min-height: 0; align-items: flex-start; gap: 12px;
  padding: 22px max(var(--sp-9), calc((100% - var(--pg-w)) / 2)) 14px;   /* 两侧与 .drawer-body 左右内边距（--sp-9）同一列 */
  border-bottom: 1px solid transparent; transition: border-color var(--t-micro) var(--ease);
}
.ws.is-page > .drawer .drawer-head.has-tabs { padding-bottom: 0; border-bottom-color: var(--line); }
.ws.is-page > .drawer .drawer-head.is-scrolled { border-bottom-color: var(--line); }
.ws.is-page > .drawer .drawer-meta { padding-right: 0; }
.ws.is-page > .drawer .drawer-meta .mp-h1 { min-height: 36px; display: flex; align-items: center; }   /* 与 .mp-title-row 同：标题在 36 高的 ✕ 行里垂直居中 */
.ws.is-page > .drawer .drawer-close {
  flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--seg-bg); color: var(--ink-2);
  transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.ws.is-page > .drawer .drawer-close:hover { background: var(--line); color: var(--ink); }

/* ============ 13 版 §4.1（Q4）大盘信号页：≥1100 左列表 + 右图区；<1100 列表收成图区上方横滑 chip ============
   测试站反馈（用户 10-08）：列表只放图名（数值与日期点进去看图）；两栏各自滚动——鼠标在哪栏就滚哪栏、互不带动，页面本身不滚。
   10-13（用户）：投资者情绪 / 市场广度拆成两页，列表 300 → 368，14 个图名都单行（最长「标普500期货持仓：…净持仓占比」
   13 号 600 字重实测 320.1 + 条目内边距 28 + 列表内边距 12 + 边框 2 = 362.1，留 6 余量），图区相应变窄（1440 宽 960 → 892）；
   以后若有放不下的更长图名，单行省略、悬停看全名（按钮 title） */
.drawer-body > .sgp { max-width: var(--pg-w); margin-inline: auto; }
.sgp { display: grid; grid-template-columns: 368px minmax(0, 1fr); gap: 24px; align-items: start; }
.sgp-list {
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--sh-card);
}
.sgp-item {
  position: relative; display: flex; flex-direction: column; width: 100%; padding: 10px 12px 10px 16px;
  border-radius: 12px; text-align: left; color: var(--ink); transition: background var(--t-micro) var(--ease);
}
.sgp-item:hover { background: var(--soft-2); }
.sgp-item.is-on { background: var(--soft); }
.sgp-item.is-on::before { content: ''; position: absolute; left: 5px; top: 11px; bottom: 11px; width: 3px; border-radius: 2px; background: var(--ink); }
.sgp-t { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-13); font-weight: 600; line-height: 1.45; }
.sgp-main { min-width: 0; padding: 18px 22px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--sh-card); }
/* 图区头：标题行（标题 + CNN 档位徽章）在上，区间分段统一在下一行左对齐（10-13 用户：原在标题行右侧，
   窄窗口下只有长标题的图被挤到第二行、各图不一致）；手机仍占满一行、各档等分（见 ≤720 段） */
.sgp-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.sgp-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-width: 0; max-width: 100%; }
.sgp-h { min-width: 0; font-size: var(--fs-16); font-weight: 700; line-height: 1.4; color: var(--ink); }
.sgp-head .mp-seg { margin: 0; }
.sgp-head .mp-seg button { min-width: 36px; }
@media (min-width: 1100px) {
  .drawer.is-sigpage .drawer-body { display: flex; flex-direction: column; overflow: hidden; padding-bottom: var(--sp-7); }
  .drawer.is-sigpage .drawer-body > .sgp { flex: 1; min-height: 0; width: 100%; grid-template-rows: minmax(0, 1fr); }
  .sgp-list, .sgp-main { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
@media (max-width: 1099px) {
  .ws.is-page > .drawer.is-sigpage { --pg-w: 960px; }
  .sgp { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sgp-list {
    position: static; flex-direction: row; gap: 8px; padding: 0; overflow-x: auto; scrollbar-width: none;
    background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  .sgp-list::-webkit-scrollbar { display: none; }
  .sgp-item {
    flex: none; width: auto; max-width: 240px; height: 32px; padding: 0 14px; justify-content: center;
    border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card);
  }
  .sgp-item:hover { background: var(--card); border-color: var(--line-hover); }
  .sgp-item.is-on { background: var(--ink); border-color: var(--ink); color: var(--card); }
  .sgp-item.is-on::before { content: none; }
  .sgp-list.fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .sgp-list.fade-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px); mask-image: linear-gradient(to right, transparent, #000 28px); }
  .sgp-list.fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
}
@media (max-width: 720px) {
  .ws.is-page > .drawer .drawer-head { padding: 14px 14px 12px; }
  .ws.is-page > .drawer .drawer-head.has-tabs { padding-bottom: 0; }
  .sgp-main { padding: 14px 14px 12px; border-radius: 16px; }
  .sgp-h { font-size: var(--fs-16); }
  .sgp-head .mp-seg { align-self: stretch; display: flex; }   /* 手机区间分段占满一行、各档等分（触控目标更大） */
  .sgp-head .mp-seg button { flex: 1; min-width: 0; height: 30px; padding: 0; }
}

/* 13 版 §9：已选标的不支持该类型（财报分析限美股个股）→ chip 置灰（选中态也随之转灰），title 里说明原因；仍可点，发送时居中提示拦截。
   选择器带 .tp-wrap 提高一级，压过 v3 / 暗色的选中实底 */
.tp-wrap .tp-chip.is-unsup, .tp-wrap .tp-chip.is-unsup:hover,
.tp-wrap .tp-chip.is-unsup.is-active { color: var(--ink-3); background: var(--soft); border-color: var(--line); box-shadow: none; }

/* ============ 13 版 §10 浮动按钮 ============
   桌面（> 827）：客服钮进主区头部行右侧——36 圆、静色（同模块页 ✕），悬停提示「客服与反馈」，面板在钮下方右对齐展开；原左下浮钮退役。
   ≤ 827：左下浮钮缩为 40，与右下「研究个股」胶囊同一底线；主区下滑收起、上滑出现（support.js）。
   721–827 的「研究个股」胶囊从底 66 落到底 16，看板滚动区底部留出胶囊位（16 + 72），最后一屏不被压住（≤720 主区底 110 已留） */
@media (min-width: 828px) {
  .main-area > .support-root { top: 10px; right: 16px; left: auto; bottom: auto; flex-direction: column-reverse; align-items: flex-end; }
  .sp-btn { width: 36px; height: 36px; background: var(--seg-bg); color: var(--ink-2); box-shadow: none; }
  .sp-btn:hover { background: var(--line); color: var(--ink); }
  .sp-btn .sp-ico-open { width: 18px; height: 18px; }
  .sp-btn .sp-ico-x { width: 15px; height: 15px; }
  .sp-btn.is-open { box-shadow: none; }
}
@media (max-width: 827px) {
  .main-area > .support-root { left: 16px; bottom: 16px; transition: transform var(--t-in) var(--ease), opacity var(--t-in) var(--ease); }
  .sp-btn { width: 40px; height: 40px; }
  .sp-btn .sp-ico-open { width: 20px; height: 20px; }
  .support-root.is-tucked { transform: translateY(80px); opacity: 0; pointer-events: none; }
  .chat-entry { right: 16px; bottom: 16px; }
  .board-scroll { padding-bottom: 88px; }
}

/* 13 版 §4 / §9：报告图统一容器 = 12 圆角 + 1px --line——研究流缩略图（.rcard-thumb）已是；报告主图的 figure 容器由 20 收为 12；
   正文内联图（财报多图等）补圆角描边（原只有暗色给了）；深色下白底图轻压暗在 theme-dark.css */
.report-chart figure { border-radius: var(--r-lg); }
.report-body img { border-radius: var(--r-lg); border: 1px solid var(--line); }
.report-body .report-chart img { border: 0; border-radius: 0; }   /* 主图在 figure 容器里，容器已有描边圆角，图本身不再描边（免双线） */

/* ============ 13 版 §0.2 弹层进出动画（用户 10-08：本版补齐）============
   退场一律 --t-out（160ms）+ --ease，由 util.animateOut / animateRemove 加 .is-closing、播完再隐藏或删节点；退场中不接收点击。
   进场沿用各自已有的 mg-fade / mg-pop / mg-push；原来进出都没有的「编辑速览」「新建 / 修改任务」补上进场；
   五个遮罩类弹窗统一为「遮罩淡入 + 卡片上浮 / 遮罩淡出 + 卡片下沉」（分享 / 登录引导原来只有遮罩淡入，卡片补上浮；邀请码卡片沿用自己的 inv-in）。
   「减少动态」由 base.css 全局把动画缩到 .001ms，JS 侧同时不等待（prefersReducedMotion）。
   顺序：进场规则在前、退场在后；退场期间仍带 is-open 的（新建任务、对话层）退场选择器显式带上 .is-open，权重高于进场 */
@keyframes mg-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes mg-pop-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(6px) scale(.985); } }
@keyframes mg-push-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(14px); } }
/* 进场补齐：编辑速览、新建 / 修改任务弹窗——遮罩淡入 + 卡片上浮；分享 / 登录引导的卡片补上浮（遮罩淡入原有） */
.qe-dim { animation: mg-fade var(--t-in) var(--ease) both; }
.qe-dlg, .share-dlg, .lg-card { animation: mg-pop var(--t-in) var(--ease) both; }
.bt-modal-ovl.is-open { animation: mg-fade var(--t-in) var(--ease) both; }
.bt-modal-ovl.is-open .bt-modal { animation: mg-pop var(--t-in) var(--ease) both; }
/* 退场 */
.is-closing { pointer-events: none; }
/* 遮罩类：整层淡出、里面的卡片下沉淡出（分享 / 登录引导 / 邀请码 / 编辑速览 / 新建任务） */
.share-ovl.is-closing, .login-guide.is-closing, .inv-dlg.is-closing, .qe-dim.is-closing, .bt-modal-ovl.is-open.is-closing { animation: mg-fade-out var(--t-out) var(--ease) both; }
.share-ovl.is-closing .share-dlg, .login-guide.is-closing .lg-card, .inv-dlg.is-closing .inv-card, .qe-dim.is-closing .qe-dlg, .bt-modal-ovl.is-open.is-closing .bt-modal { animation: mg-pop-out var(--t-out) var(--ease) both; }
/* 资讯弹窗：与进场 mg-push 对称，向右滑出淡出（10-19 起带模糊遮罩，遮罩淡出见 v18-news.css） */
.news-ovl.is-closing .nw-pop { animation: mg-push-out var(--t-out) var(--ease) both; }
/* 客服面板：与进场 mg-pop 对称 */
.sp-pop.is-closing { animation: mg-pop-out var(--t-out) var(--ease) both; }
/* 窄档 / 手机对话层：与进场 mg-push 对称（退场期间仍是 is-open，保持 display:flex）；桌面对话栏常驻，不播 */
@media (max-width: 827px) { .chat-aside.is-open.is-closing { animation: mg-push-out var(--t-out) var(--ease) both; } }