/* ===== AI 买电视助手（agent.jsx，壳内层）— 演示对话样式 =====
   token 见 styles.css；弹簧/spin/fadein keyframes 见 mobile-shared.css。 */

.agc { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; padding-top: 52px; }
html.real .agc { padding-top: calc(env(safe-area-inset-top, 0px) + 8px); }

/* ---- 顶栏 ---- */
.agc-head { display: flex; align-items: center; gap: 9px; padding: 4px 14px 10px; flex: 0 0 auto; }
.agc-orb { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; color: #fff;
  background: linear-gradient(140deg, #0A84FF, #7A4DFF);
  box-shadow: 0 4px 12px rgba(60, 80, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .4); }
.agc-ht { flex: 1; min-width: 0; }
.agc-ht b { display: block; font-size: 15.5px; font-weight: 820; letter-spacing: -.02em; color: var(--ink); }
.agc-ht small { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 640; color: var(--ink-3); margin-top: 1px; }
.agc-ht small::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: var(--green); flex: 0 0 auto;
  animation: labpulse 2.2s var(--smooth) infinite; }
.agc-re { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; color: var(--ink-2);
  background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--sh-sm); }

/* ---- 消息流 ---- */
.agc-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 4px 13px 12px;
  display: flex; flex-direction: column; gap: 9px; }
.agc-scroll::-webkit-scrollbar { display: none; }

.msg { max-width: 84%; padding: 9px 13px; border-radius: 18px; font-size: 12.8px; line-height: 1.62; font-weight: 560;
  animation: agin .42s var(--spring-morph) both; }
.msg.user { align-self: flex-end; color: #fff; border-bottom-right-radius: 6px;
  background: linear-gradient(140deg, #0A84FF, #5A5AFF); box-shadow: 0 6px 16px -6px rgba(40, 90, 255, .5); }
.msg.ai { align-self: flex-start; color: var(--ink); border-bottom-left-radius: 6px;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border); box-shadow: var(--sh-sm), inset 0 1px 0 var(--glass-edge); }
@keyframes agin { from { opacity: 0; transform: translateY(9px) scale(.98); } to { opacity: 1; transform: none; } }

.agc-dots { display: flex; gap: 4px; padding: 4px 1px; }
.agc-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: agdot 1s ease-in-out infinite; }
.agc-dots span:nth-child(2) { animation-delay: .15s; }
.agc-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes agdot { 30% { transform: translateY(-4px); opacity: .5; } }

/* ---- 工具调用行 ---- */
.tcall { align-self: stretch; display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 14px;
  background: rgba(var(--accent-rgb), .07); border: 1px dashed rgba(var(--accent-rgb), .4);
  animation: agin .42s var(--spring-morph) both; }
.tcall.done { background: var(--glass); border: 1px solid var(--glass-border); }
.tc-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto;
  background: rgba(var(--accent-rgb), .13); color: var(--accent); }
.tc-tt { flex: 1; min-width: 0; }
.tc-tt b { display: block; font-size: 12px; font-weight: 780; color: var(--ink); }
.tc-tt small { display: block; font-size: 10.5px; font-weight: 620; color: var(--ink-3); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-tt small.ok { color: var(--green); }
.tc-spin { width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid rgba(var(--accent-rgb), .22); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.tc-done { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--green-soft); color: var(--green); }

/* ---- 选项组（用户反馈全走选择器） ---- */
.opts { display: flex; flex-wrap: wrap; gap: 7px; align-self: flex-start; max-width: 94%;
  animation: agin .42s var(--spring-morph) both; }
.opt { text-align: left; padding: 8px 13px; border-radius: 14px; font-size: 12.5px; font-weight: 720; color: var(--ink);
  background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--sh-sm), inset 0 1px 0 var(--glass-edge);
  transition: transform .16s var(--smooth); }
.opt:active { transform: scale(.95); }
.opt small { display: block; font-size: 9.8px; font-weight: 620; color: var(--ink-3); margin-top: 1px; }
.opt.accent { color: var(--accent); border-color: rgba(var(--accent-rgb), .42); background: rgba(var(--accent-rgb), .1); }
.opt.accent small { color: var(--accent); opacity: .72; }
.opt.wide { flex: 1 1 100%; text-align: center; padding: 10px; }

/* ---- 结构卡片通用 ---- */
.agk { align-self: stretch; border-radius: 18px; padding: 12px 13px; display: flex; flex-direction: column; gap: 9px;
  background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--sh-card), inset 0 1px 0 var(--glass-edge);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  animation: agin .45s var(--spring-morph) both; }
.agk-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: var(--ink-2); }
.agk-h svg { color: var(--accent); flex: 0 0 auto; }
.agk-note { font-size: 9.5px; color: var(--ink-4); }
.agk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 36px; padding: 0 14px;
  border-radius: 12px; font-size: 12px; font-weight: 760; color: var(--accent); background: rgba(var(--accent-rgb), .11);
  text-decoration: none; white-space: nowrap; transition: transform .15s var(--smooth); }
.agk-btn:active { transform: scale(.96); }
.agk-btn.pri { color: #fff; background: linear-gradient(140deg, #0A84FF, #4F5BFF); box-shadow: 0 5px 14px -4px rgba(40, 90, 255, .55); }

/* AR 回传 / 机型实测：三联数值 */
.ark-vals, .tvk-mx { display: flex; gap: 7px; }
.ark-vals > div, .tvk-mx > div { flex: 1; min-width: 0; border-radius: 12px; padding: 7px 10px; background: var(--fill);
  display: flex; flex-direction: column; gap: 1px; }
.ark-vals small, .tvk-mx small { font-size: 9.5px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.ark-vals b, .tvk-mx b { font-size: 13.5px; font-weight: 820; letter-spacing: -.01em; color: var(--ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.ark-vals b.acc { color: var(--accent); }

/* 入户预检 */
.entk .agk-h svg { color: var(--green); }
.entk-ok { margin-left: auto; font-size: 10px; font-weight: 800; color: var(--green); background: var(--green-soft);
  padding: 3px 9px; border-radius: 99px; }
.entk-rows { display: flex; flex-direction: column; gap: 5px; }
.entk-row { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 660; color: var(--ink); }
.entk-row svg { color: var(--green); flex: 0 0 auto; }
.entk-row em { font-style: normal; color: var(--ink-3); margin-left: auto; font-size: 10px; white-space: nowrap; }
.entk-warn { font-size: 10px; font-weight: 720; color: var(--amber); background: var(--amber-soft); border-radius: 9px; padding: 5px 9px; }

/* 推荐机型卡（结论：价格 + 链接） */
.tvk { gap: 8px; }
.tvk-top { display: flex; align-items: center; gap: 8px; }
.tvk-b { font-size: 13px; font-weight: 880; letter-spacing: .01em; flex: 0 0 auto; }
.tvk-n { font-size: 15px; font-weight: 820; letter-spacing: -.01em; color: var(--ink); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvk-tag { flex: 0 0 auto; font-size: 9.5px; font-weight: 800; color: var(--accent); background: rgba(var(--accent-rgb), .12);
  padding: 3px 9px; border-radius: 99px; }
.tvk-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.tvk-tags span { font-size: 9.5px; font-weight: 700; color: var(--ink-2); background: var(--fill); padding: 3px 8px; border-radius: 7px; }
.tvk-why { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-2); }
.tvk-buy { display: flex; align-items: center; gap: 8px; }
.tvk-p { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tvk-p b { font-size: 17px; font-weight: 840; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tvk-p small { font-size: 9.5px; font-weight: 680; color: var(--green); white-space: nowrap; }

/* 旧机估值 */
.trk .agk-h svg { color: var(--amber); }
.trk-v { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.trk-v b { font-size: 19px; font-weight: 840; letter-spacing: -.02em; color: var(--amber); font-variant-numeric: tabular-nums; }
.trk-v span { font-size: 10.5px; font-weight: 640; color: var(--ink-3); }

/* 小结 */
.endk .agk-h svg { color: var(--green); }
.endk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.endk-chips span { font-size: 10.5px; font-weight: 720; color: var(--accent); background: rgba(var(--accent-rgb), .1);
  padding: 4px 10px; border-radius: 99px; }

/* ---- 底部假输入条 ---- */
.agc-bar { flex: 0 0 auto; margin: 4px 13px 12px; display: flex; align-items: center; gap: 9px; min-height: 44px;
  padding: 0 8px 0 14px; border-radius: 99px; color: var(--ink-4); font-size: 11.5px; font-weight: 580;
  background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--sh-card), inset 0 1px 0 var(--glass-edge); }
.agc-bar > span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agc-mic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--fill); color: var(--ink-3); }
html.real .agc-bar { margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); }

/* ---- AR 量房浮层（假测量：净宽 + 视距） ---- */
.arov { position: absolute; inset: 0; z-index: 70; overflow: hidden; background: #14121a; animation: fadein .35s var(--smooth) both; }
.arov-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.arov-dim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 8, 16, .55), rgba(10, 8, 16, .15) 30%, rgba(10, 8, 16, .2) 70%, rgba(10, 8, 16, .6)); }
.arov-grid { position: absolute; inset: 0; mix-blend-mode: overlay; opacity: .3;
  background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
  background-size: 30px 30px; animation: argrid 2.4s var(--smooth) infinite; }
@keyframes argrid { 50% { opacity: .12; } }
.arov-hint { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); z-index: 3; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .45); padding: 6px 14px; border-radius: 99px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html.real .arov-hint { top: calc(env(safe-area-inset-top, 0px) + 18px); }
.arc { position: absolute; width: 24px; height: 24px; border: 2.5px solid rgba(255, 255, 255, .9);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); z-index: 2; }
.arc.tl { top: 96px; left: 22px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.arc.tr { top: 96px; right: 22px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.arc.bl { bottom: 120px; left: 22px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.arc.br { bottom: 120px; right: 22px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.ar-w { position: absolute; left: 13%; right: 13%; top: 42%; z-index: 3; border-top: 2px dashed #7ED8FF;
  filter: drop-shadow(0 0 6px rgba(90, 190, 255, .8)); transform-origin: left center; animation: arw .7s var(--smooth) both; }
.ar-w::before, .ar-w::after { content: ""; position: absolute; top: -7px; width: 2px; height: 14px; background: #7ED8FF; }
.ar-w::before { left: 0; }
.ar-w::after { right: 0; }
@keyframes arw { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
.ar-d { position: absolute; left: 50%; top: 46%; bottom: 24%; z-index: 3; border-left: 2px dashed #B7FF9E;
  filter: drop-shadow(0 0 6px rgba(140, 255, 120, .7)); transform-origin: center top; animation: ard .7s var(--smooth) both; }
@keyframes ard { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.ar-lbl { position: absolute; left: 50%; top: -13px; transform: translate(-50%, -50%); white-space: nowrap;
  font-size: 11px; font-weight: 800; color: #06263e; background: #7ED8FF; padding: 3px 11px; border-radius: 99px;
  box-shadow: 0 2px 10px rgba(90, 190, 255, .5); }
.ar-d .ar-lbl { top: 50%; left: 0; background: #B7FF9E; color: #143307; box-shadow: 0 2px 10px rgba(140, 255, 120, .4); }
.arov-pill { position: absolute; left: 50%; bottom: 42px; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 720; color: var(--ink); background: var(--glass-strong); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--sh-pop); padding: 10px 16px; border-radius: 99px; white-space: nowrap; }
.arov-pill.ok { color: var(--green); }
html.real .arov-pill { bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); }

@media (prefers-reduced-motion: reduce) {
  .msg, .tcall, .opts, .agk, .ar-w, .ar-d, .arov { animation-duration: .01s !important; }
  .agc-dots span, .tc-spin, .arov-grid, .agc-ht small::before { animation: none !important; }
}