/* components.css — 品牌/按钮/输入/徽章/卡片/会话流/输入条/浮窗/modal/toast */

/* —— 品牌 / logo（注入 <img src="logo.png">，见 app.js LOGO；图样式在 v2.css .logo img）—— */
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); }
.logo { width: 28px; height: 28px; display: inline-grid; place-items: center; flex: none; }
.brand .name { font-weight: var(--fw-extrabold); letter-spacing: -.02em; font-size: var(--fs-lg); }
.brand .name .en { color: var(--ink-3); font-weight: var(--fw-bold); margin-left: 6px; font-size: var(--fs-sm); }
.login-brand { margin-bottom: var(--sp-7); }
.login-brand .logo { width: 34px; height: 34px; }

/* —— 按钮 —— */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); height: 40px; padding: 0 var(--sp-7); border-radius: var(--r-lg); font-weight: var(--fw-semibold); font-size: var(--fs-base); transition: background var(--t-base) var(--ease), box-shadow var(--t-base), transform var(--t-fast), color var(--t-base); white-space: nowrap; user-select: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-loading { cursor: not-allowed; opacity: .55; pointer-events: none; }
.btn-primary { background: var(--green); color: #fff; box-shadow: var(--sh-cta); }
.btn-primary:hover { background: var(--green-d); }
.btn-ghost { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--soft); }
.btn-block { width: 100%; }
.btn-lg { height: 46px; font-size: var(--fs-md); }

/* —— 输入 / 登录 —— */
.field { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.field > label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-2); }
.input { height: 44px; width: 100%; padding: 0 var(--sp-6); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); font-size: var(--fs-base); transition: border-color var(--t-input), box-shadow var(--t-input); }
.input::placeholder { color: var(--ink-3); }
.input:hover { border-color: #E2E6EA; }
.input:focus { border-color: var(--green); box-shadow: var(--focus-ring); outline: none; }
.input.is-error { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.field-msg { font-size: var(--fs-sm); color: var(--ink-3); min-height: 1em; margin-bottom: var(--sp-5); }
.field-msg.error { color: var(--red); }
.login-h { font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); letter-spacing: -.02em; }
.login-p { color: var(--ink-2); font-size: var(--fs-sm); margin-bottom: var(--sp-7); }
.login-terms { margin-top: var(--sp-4); text-align: center; font-size: var(--fs-xs); color: var(--ink-3); }
.login-visual .visual-sub:last-child { font-size: var(--fs-xs); color: var(--ink-3); }

/* —— 开关 —— */
.switch { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; user-select: none; font-size: var(--fs-sm); color: var(--ink-2); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 38px; height: 22px; border-radius: var(--r-pill); background: var(--line); position: relative; transition: background var(--t-base); flex: none; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--sh-card); transition: transform var(--t-base) var(--ease); }
.switch input:checked + .track { background: var(--green); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch.mini .track { width: 32px; height: 18px; }
.switch.mini .track::after { width: 14px; height: 14px; }
.switch.mini input:checked + .track::after { transform: translateX(14px); }

/* —— 徽章 —— */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: var(--fw-bold); letter-spacing: .02em; white-space: nowrap; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-queued { background: var(--soft); color: var(--ink-2); }
.badge-running { background: #FFF6E9; color: #C9772A; }
.badge-running .dot { animation: mg-pulse 1.5s ease-in-out infinite; }
.badge-done { background: var(--green-soft); color: var(--green-d); }
.badge-failed { background: var(--red-soft); color: var(--red); }
.badge-cached { background: #EFF3FF; color: #3257C9; }
/* 重试中：在途但属自动恢复重试链——蓝色区别于 badge-running 的琥珀「生成中」，保留脉冲点 */
.badge-retry { background: #EAF1FF; color: #2F6BD8; }
.badge-retry .dot { animation: mg-pulse 1.5s ease-in-out infinite; }
.chip-market { font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--ink-2); background: var(--soft); border-radius: var(--r-xs); padding: 3px 7px; letter-spacing: .03em; }

/* —— 顶栏右侧：连接状态 + 头像菜单 —— */
.conn { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--ink-2); font-weight: var(--fw-semibold); }
.conn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); transition: background .2s, box-shadow .2s; }
.conn.off { color: #9A5A1E; }
.conn.off .dot { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.avatar-wrap { position: relative; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-sm); display: grid; place-items: center; transition: transform .12s; }
.avatar:hover { transform: scale(1.05); }
.menu { position: absolute; top: calc(100% + 8px); right: 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-pop); padding: 6px; min-width: 130px; z-index: 40; animation: mg-pop .14s var(--ease) both; }
.menu-item { width: 100%; text-align: left; padding: 9px 12px; border-radius: var(--r-sm); font-size: var(--fs-base); color: var(--ink); }
.menu-item:hover { background: var(--soft); }

/* —— 报告记录：顶栏开关 + 左侧列表项 —— */
.topbar-left { display: flex; align-items: center; gap: var(--sp-4); }
.list-btn { width: 32px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--ink-3); transition: background .15s, color .15s; }
.list-btn:hover { background: var(--soft); color: var(--ink-2); }
.list-btn[aria-pressed="true"] { background: var(--green-soft); color: var(--green-d); }

/* 列表面板头 */
.listpanel-head .lp-title { font-weight: var(--fw-extrabold); font-size: var(--fs-md); letter-spacing: -.01em; }
.lp-close { width: 30px; height: 30px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--ink-2); background: var(--soft); flex: none; }
.lp-close:hover { background: var(--line); color: var(--ink); }

/* 列表项（已生成报告，点击在右侧打开） */
/* 「我的」报告卡（对齐参考：白卡描边 + 头部芯片/名称/代码/类型徽章 + 两行摘要 + 时间；选中整卡变绿） */
.li-item { width: 100%; text-align: left; display: block; padding: var(--sp-7); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg); transition: background .15s, border-color .15s, box-shadow .15s; }
.li-item + .li-item { margin-top: var(--sp-4); }
.li-item:hover { border-color: #E2E6EA; box-shadow: var(--sh-card); }
.li-item.is-active { background: var(--green); border-color: var(--green); box-shadow: var(--sh-cta); }
.li-head { display: flex; align-items: center; gap: var(--sp-3); }
.li-name { font-weight: var(--fw-extrabold); letter-spacing: -.01em; font-size: var(--fs-lg); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.li-sym { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); flex: none; }
.li-badge { margin-left: auto; flex: none; }
.li-sum { margin-top: var(--sp-5); color: var(--ink-2); font-size: var(--fs-base); line-height: var(--lh-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.li-time { margin-top: var(--sp-4); font-size: 11px; color: var(--ink-3); }
/* 选中态（整卡绿底，文字转白） */
.li-item.is-active .li-name { color: #fff; }
.li-item.is-active .li-sym { color: rgba(255,255,255,.78); }
.li-item.is-active .li-sum { color: rgba(255,255,255,.92); }
.li-item.is-active .li-time { color: rgba(255,255,255,.72); }
.li-item.is-active .chip-market,
.li-item.is-active .badge-sr,
.li-item.is-active .badge-tp { background: rgba(255,255,255,.22); color: #fff; }
.li-empty { padding: var(--sp-9) var(--sp-6); text-align: center; color: var(--ink-3); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }

/* —— 会话流：用户气泡 + 报告卡片 —— */
.msg { margin-bottom: var(--sp-9); animation: mg-rise .35s var(--ease) both; }
.bubble-user { margin-left: auto; width: fit-content; max-width: 78%; background: var(--green-soft); color: var(--green-d); font-weight: var(--fw-semibold); padding: 9px 16px; border-radius: 16px 16px 5px 16px; font-size: var(--fs-base); margin-bottom: var(--sp-5); }
.rcard { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-card); overflow: hidden; transition: box-shadow .18s, border-color .18s, transform .18s; }
.rcard.clickable { cursor: pointer; }
.rcard.clickable:hover { box-shadow: var(--sh-card-lg); border-color: #E2E6EA; transform: translateY(-1px); }
.rcard-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-6) var(--sp-6) 0; }
.rcard-name { font-weight: var(--fw-bold); letter-spacing: -.01em; }
.rcard-sym { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.rcard-time { margin-left: auto; font-size: var(--fs-xs); color: var(--ink-3); }
.rcard-thumb { margin: var(--sp-5) var(--sp-6) 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--soft); }
.rcard-thumb img { display: block; width: 100%; height: auto; }
.rcard-summary { padding: var(--sp-6); color: var(--ink); line-height: var(--lh-relaxed); font-weight: var(--fw-semibold); }
.rcard-foot { padding: 0 var(--sp-6) var(--sp-6); display: flex; justify-content: flex-start; align-items: center; gap: var(--sp-5); }
.link-more { color: var(--green-d); font-weight: var(--fw-semibold); font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 4px; }
.rcard-loading { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-7) var(--sp-6); color: var(--ink-2); font-weight: var(--fw-semibold); }
.rcard-loading .spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--green-soft); border-top-color: var(--green); animation: mg-spin .8s linear infinite; flex: none; }
/* 生成中卡片：表头(已确定) + 下方加载动画（图表占位 shimmer + 轨道 spinner） */
.rcard-genimg { position: relative; margin: var(--sp-5) var(--sp-6) var(--sp-6); height: 188px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.rcard-genimg .shimmer { position: absolute; inset: 0; background: linear-gradient(90deg, var(--soft) 25%, #EFF2F5 37%, var(--soft) 63%); background-size: 480px 100%; animation: mg-shimmer 1.4s linear infinite; }
.rcard-genimg .gen-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-5); }
.rcard-genimg .orbit { position: relative; width: 46px; height: 46px; }
.rcard-genimg .orbit .ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--green-soft); border-top-color: var(--green); animation: mg-spin 1s linear infinite; }
.rcard-genimg .orbit .core { position: absolute; inset: 12px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--green-d); font-weight: var(--fw-extrabold); font-size: 13px; box-shadow: var(--sh-card); }
.rcard-genimg .gen-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-2); background: rgba(255,255,255,.7); padding: 3px 10px; border-radius: var(--r-pill); }
.rcard-fail { display: flex; align-items: flex-start; gap: var(--sp-5); padding: var(--sp-7) var(--sp-6); }
.rcard-fail .x { width: 30px; height: 30px; border-radius: 50%; background: var(--red-soft); color: var(--red); display: grid; place-items: center; font-weight: 800; flex: none; }
.rcard-fail .ft { font-weight: var(--fw-bold); }
.rcard-fail .fg { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 2px; }
.rcard-fail .btn { margin-left: auto; height: 34px; }

/* —— 底部悬浮输入条 —— */
.market-pills { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); padding: 0 var(--sp-3); }
.market-pills button { height: 28px; padding: 0 13px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-2); background: var(--soft); transition: background .15s, color .15s; }
.market-pills button[aria-pressed="true"] { background: var(--green); color: #fff; }
.market-pills .switch.mini { margin-left: auto; }
/* 输入条：两行同框（上排搜索 + 下排 市场/积分/发送），实测对齐参考 */
.input-bar { background: var(--bg); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--sh-card-lg); transition: border-color .15s, box-shadow .15s; }
.input-bar:focus-within { border-color: var(--green); box-shadow: var(--sh-cta); }
.input-row { display: flex; align-items: center; gap: var(--sp-4); padding: 12px 14px 6px; }
.input-row .search-ico { color: var(--ink-3); display: inline-flex; flex: none; }
.input-row input { flex: 1; min-width: 0; height: 30px; border: 0; background: transparent; font-size: var(--fs-lg); outline: none; }
.input-bot { display: flex; align-items: center; gap: var(--sp-4); padding: 4px 8px 8px 14px; }
.send-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; flex: none; box-shadow: var(--sh-cta); transition: background .15s, transform .12s; }
.send-btn:hover { background: var(--green-d); }
.send-btn:active { transform: scale(.92); }
.send-btn[disabled] { background: var(--line); color: var(--ink-3); box-shadow: none; cursor: not-allowed; }
.send-btn .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: mg-spin .8s linear infinite; }

/* —— 建议下拉（浮在输入条上方）—— */
.suggest { position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-pop); padding: 6px; max-height: 300px; overflow-y: auto; animation: mg-pop .16s var(--ease) both; }
.suggest.u-hidden { display: none; }
/* 04：跨市场候选 = 市场彩标 + 名称(14/700) + 代码；点选即提交 */
.suggest-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); cursor: pointer; }
.suggest-item:hover { background: var(--soft); }
.suggest-item .nm { font-weight: var(--fw-bold); font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-item .sy { margin-left: auto; padding-left: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none; }
.suggest-empty { padding: var(--sp-5) var(--sp-4); font-size: var(--fs-sm); color: var(--ink-3); }
/* 名称歧义：顶部「请选择具体标的」提示 */
.suggest-hint { padding: var(--sp-4) var(--sp-4) var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-3); }

/* —— 浮窗头 —— */
.drawer-meta .dm-top { display: flex; align-items: center; gap: var(--sp-3); }
.drawer-meta .dm-name { font-weight: var(--fw-extrabold); font-size: var(--fs-lg); letter-spacing: -.01em; }
.drawer-meta .dm-sym { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.drawer-meta .dm-sub { margin-top: 3px; font-size: var(--fs-xs); color: var(--ink-3); }
.drawer-close { position: absolute; top: var(--sp-7); right: var(--sp-9); width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--ink-2); background: var(--soft); flex: none; z-index: 1; }
.drawer-close:hover { background: var(--line); color: var(--ink); }

/* —— modal —— */
.modal-backdrop { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: var(--sp-7); background: rgba(20,23,27,.34); backdrop-filter: blur(3px); }
.modal-backdrop.is-open { display: flex; animation: mg-fade .16s var(--ease); }
.modal { width: 100%; max-width: 420px; background: var(--bg); border-radius: var(--r-xl); box-shadow: var(--sh-pop); padding: var(--sp-9); animation: mg-pop .22s var(--ease) both; }
.modal h3 { font-size: var(--fs-xl); font-weight: var(--fw-extrabold); letter-spacing: -.01em; }
.modal .confirm-target { margin: var(--sp-6) 0; padding: var(--sp-6); background: var(--soft); border-radius: var(--r-lg); text-align: center; }
.modal .confirm-target { margin: var(--sp-6) 0 var(--sp-7); }
.modal .confirm-target .nm { font-size: var(--fs-xl); font-weight: var(--fw-extrabold); letter-spacing: -.01em; }
.modal .confirm-target .sy { margin-top: 4px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.modal .confirm-meta { display: flex; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-5); }
.modal-actions { display: flex; gap: var(--sp-4); margin-top: var(--sp-7); }
.modal-actions .btn { flex: 1; }

/* —— toast —— */
.toast-host { position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; }
.toast { background: var(--ink); color: #fff; padding: var(--sp-4) var(--sp-7); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: var(--fw-semibold); box-shadow: var(--sh-pop); animation: mg-rise .22s var(--ease) both; transition: opacity .2s, transform .2s; }
.toast.err { background: var(--red); }
/* animation:none：否则 mg-rise 的 both fill 终态(opacity:1/translateY(0))钉死 out 的淡出+下滑（.toast--center 已单独 animation:none） */
.toast.out { opacity: 0; transform: translateY(8px); animation: none; }

@media (max-width: 720px) {
  .bubble-user { max-width: 88%; }
}