/* 问车市（#589）。颜色一律取 main.css 的 token，这里不新造任何色值——
   状态色只用来标**少数**：核验没通过的那几句才有颜色，通过的保持正文样子。
   （全站纪律：绿章不给多数派盖，见 UI 改版方案 §十二） */

.ask-wrap { max-width: 820px; margin: 0 auto; padding: var(--sp-6) 0 var(--sp-12); }

/* 这页多处用 display:flex 的元素会被 JS 挂 hidden（引子排、进度舞台的
   found/骨架）——UA 的 [hidden]{display:none} 优先级干不过类选择器的
   display:flex，必须自己钉死，不然 hidden 等于没设。 */
.ask-wrap [hidden] { display: none !important; }

.ask-head { margin-bottom: var(--sp-6); }
.ask-h1 {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    letter-spacing: .04em;
    margin: 0 0 var(--sp-2);
}
.ask-sub { color: var(--ink-2); font-size: var(--fs-base); line-height: 1.7; margin: 0; }

/* ── 提问框 ───────────────────────────────────────── */
.ask-form { display: flex; gap: var(--sp-2); margin: var(--sp-6) 0; }
.ask-input {
    flex: 1;
    padding: var(--sp-4);
    font-size: var(--fs-lg);
    font-family: var(--font-body);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--card);
    color: var(--ink);
}
.ask-input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.ask-btn {
    padding: 0 var(--sp-6);
    font-size: var(--fs-base);
    font-weight: 700;
    border: none;
    border-radius: var(--r);
    background: var(--gold);
    color: var(--on-gold);
    cursor: pointer;
}
.ask-btn:hover { background: var(--gold-bright); }

.ask-egs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-8); }
.ask-egs-t { color: var(--ink-3); font-size: var(--fs-sm); }
.ask-eg {
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    font-size: var(--fs-sm);
    color: var(--ink-2);
    text-decoration: none;
}
.ask-eg:hover { border-color: var(--gold); color: var(--gold-text); }

/* ── 核验汇总条 ────────────────────────────────────── */
.ask-audit {
    display: flex; align-items: baseline; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-left: 3px solid var(--gold);
    background: var(--gold-wash);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    margin-bottom: var(--sp-4);
}
.ask-audit-n { font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.ask-audit-t { color: var(--ink-2); font-size: var(--fs-sm); }
/* 全通过时不额外庆祝：底色退成中性，数字自己说话 */
.ask-audit[data-clean="1"] { border-left-color: var(--line); background: var(--line-2); }
.ask-live-audit {
    display: flex; align-items: baseline; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-left: 3px solid var(--gold);
    background: var(--gold-wash);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    margin-bottom: var(--sp-4);
}
.ask-live-audit-n { font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.ask-live-audit-t { color: var(--ink-2); font-size: var(--fs-sm); }
.ask-live-audit[data-clean="1"] { border-left-color: var(--line); background: var(--line-2); }

/* ── 答案 ─────────────────────────────────────────── */
.ask-answer { font-size: var(--fs-lg); line-height: 1.9; }
.ask-s { margin: 0 0 var(--sp-3); }
.ask-s-unverified .ask-s-text, .ask-s-uncited .ask-s-text { color: var(--ink-3); }

/* 出处角标：跟在句子后面的上标数字，点了跳到下面的原文那一行 */
.ask-cite {
    display: inline-block;
    min-width: 1.15em;
    margin-left: 2px;
    padding: 0 3px;
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    vertical-align: super;
    text-align: center;
    border-radius: var(--r-sm);
    background: var(--gold-light);
    color: var(--gold-text);
    text-decoration: none;
}
.ask-cite:hover { background: var(--gold); color: var(--on-gold); }

.ask-flag {
    display: inline-block;
    margin-left: var(--sp-2);
    padding: 1px var(--sp-2);
    font-size: var(--fs-xs);
    border-radius: var(--r-sm);
    white-space: nowrap;
}
.ask-flag-bad { background: var(--red-light); color: var(--red); border: 1px solid var(--red); }
.ask-flag-none { background: var(--line-2); color: var(--ink-3); border: 1px solid var(--line); }

.ask-how { margin: var(--sp-6) 0; font-size: var(--fs-sm); }
.ask-how summary { cursor: pointer; color: var(--ink-2); }
.ask-how-body { padding: var(--sp-3) 0 0 var(--sp-4); color: var(--ink-2); line-height: 1.75; }
.ask-how-body p { margin: 0 0 var(--sp-3); }

/* ── 三种非正常状态 ────────────────────────────────── */
.ask-state {
    padding: var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--card);
    line-height: 1.75;
}
.ask-state p { margin: var(--sp-2) 0 0; color: var(--ink-2); font-size: var(--fs-sm); }

/* ── 出处清单 ─────────────────────────────────────── */
.ask-src { margin-top: var(--sp-8); }
.ask-src-h { font-size: var(--fs-base); color: var(--ink-2); margin: 0 0 var(--sp-3); }
.ask-src-list { list-style: none; margin: 0; padding: 0; }
.ask-src-item {
    display: grid;
    grid-template-columns: 1.6em 1fr;
    gap: var(--sp-1) var(--sp-3);
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--line-2);
}
/* 从角标跳过来时，让被指的那一行自己站出来 */
.ask-src-item:target { background: var(--gold-wash); }
.ask-src-n {
    grid-row: span 2;
    font-variant-numeric: tabular-nums;
    color: var(--gold-text);
    font-weight: 700;
}
.ask-src-title { color: var(--ink); text-decoration: none; font-weight: 600; }
.ask-src-title:hover { text-decoration: underline; }
.ask-src-meta { color: var(--ink-3); font-size: var(--fs-sm); }
.ask-src-note, .ask-blocked {
    margin-top: var(--sp-3);
    color: var(--ink-3);
    font-size: var(--fs-sm);
    line-height: 1.7;
}

.ask-foot { margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.ask-foot-t { color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.8; margin: 0; }
.ask-mono { font-family: ui-monospace, Menlo, Consolas, monospace; }

@media (max-width: 640px) {
    .ask-form { flex-direction: column; }
    .ask-btn { padding: var(--sp-3); }
    .ask-h1 { font-size: var(--fs-2xl); }
}

/* ── 空态（方案② 3.2；示例成品 2026-08-24 摘除，演示一律问真问题）── */
.ask-coverage { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--ink-3); }
.ask-coverage b { color: var(--gold-text); }

/* ══ SSE 进度舞台（#622）═════════════════════════════════
   检索、作答、核验都只随服务端事件推进；不知道百分比，所以不画进度条。 */
.ask-progress { padding: var(--sp-2) 0; }
.ask-stage {
    display: flex; align-items: baseline; gap: var(--sp-3);
    padding: var(--sp-2) 0;
    color: var(--ink-2);
    font-size: var(--fs-base);
    transition: color .3s var(--ease);
}
.ask-stage.is-wait { color: var(--ink-3); }
.ask-stage-dot {
    flex-shrink: 0;
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 2px solid var(--line);
    background: transparent;
    align-self: center;
    position: relative;
}
.ask-stage.is-live .ask-stage-dot {
    border-color: var(--gold);
    animation: askPulse 1.1s ease-in-out infinite;
}
.ask-stage.is-done { color: var(--ink-3); }
.ask-stage.is-done .ask-stage-dot {
    border-color: var(--gold);
    background: var(--gold);
}
/* 打勾：完成态的点里画一个白勾 */
.ask-stage.is-done .ask-stage-dot::after {
    content: '';
    position: absolute; left: 1px; top: 2.5px;
    width: 5px; height: 2.5px;
    border-left: 1.6px solid var(--on-gold);
    border-bottom: 1.6px solid var(--on-gold);
    transform: rotate(-48deg);
}
@keyframes askPulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--gold-wash); transform: scale(1); }
    50%      { box-shadow: 0 0 0 6px var(--gold-wash); transform: scale(1.15); }
}

/* 检索命中的来源：标题小卡逐张亮进来 */
.ask-found {
    list-style: none;
    margin: var(--sp-1) 0 var(--sp-2); padding: 0 0 0 calc(10px + var(--sp-3));
    display: flex; flex-direction: column; gap: var(--sp-1);
}
.ask-found li {
    display: flex; align-items: baseline; gap: var(--sp-2);
    font-size: var(--fs-sm); color: var(--ink-2);
    opacity: 0; transform: translateY(5px);
    transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.ask-found li.is-in { opacity: 1; transform: none; }
.ask-found .ask-found-n {
    flex-shrink: 0; min-width: 1.15em; text-align: center;
    font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
    border-radius: var(--r-sm);
    background: var(--gold-light); color: var(--gold-text);
}
.ask-found .ask-found-title {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ask-found .ask-found-meta { flex-shrink: 0; color: var(--ink-3); font-size: var(--fs-xs); }

/* 等模型的骨架：三行渐窄的微光，动的是「在干活」，不是「快好了」 */
.ask-skel { padding: var(--sp-2) 0 0 calc(10px + var(--sp-3)); }
.ask-skel i {
    display: block; height: 0.95em;
    margin-bottom: var(--sp-2);
    border-radius: var(--r-sm);
    background: linear-gradient(90deg, var(--line-2) 25%, var(--gold-wash) 50%, var(--line-2) 75%);
    background-size: 220% 100%;
    animation: askShimmer 1.8s ease-in-out infinite;
}
.ask-skel i:nth-child(1) { width: 88%; }
.ask-skel i:nth-child(2) { width: 72%; animation-delay: .12s; }
.ask-skel i:nth-child(3) { width: 45%; animation-delay: .24s; }
@keyframes askShimmer {
    from { background-position: 120% 0; }
    to   { background-position: -100% 0; }
}

/* ══ SSE 逐句直播（#622）══════════════════════════════════
   状态色跟判卷直播共用绿/中性口径；状态只在服务端事件到达时改变。 */
.ask-live { margin-top: var(--sp-3); }
.ask-s-pending .ask-s-text { color: var(--ink); }
.ask-live .ask-cite {
    margin-left: var(--sp-2);
    padding: 2px var(--sp-2);
    vertical-align: baseline;
    white-space: nowrap;
    border: 1px solid var(--line);
    background: var(--line-2);
    color: var(--ink-3);
    transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.ask-live .ask-cite-verifying {
    border-color: var(--gold);
    background: var(--gold-wash);
    color: var(--gold-text);
}
.ask-live .ask-cite-verified {
    border-color: var(--green);
    background: var(--green-light);
    color: var(--green);
}
.ask-live .ask-cite-unverified {
    border-color: var(--line);
    background: var(--line-2);
    color: var(--ink-3);
}
.ask-live .ask-src { margin-top: var(--sp-6); }

@media (max-width: 640px) {
    .ask-live .ask-cite { display: inline-block; margin-top: var(--sp-1); }
}

/* ══ 引用悬浮预览卡（hover 出处角标）═══════════════════════
   数据全来自页面底部已渲染的出处清单，零请求；触屏（hover:none）不启用，
   角标保持原本的锚点跳转。 */
.ask-cite-card {
    position: absolute;
    z-index: 60;
    max-width: 320px;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--card);
    box-shadow: var(--shadow-hover);
    font-size: var(--fs-sm);
    line-height: 1.6;
    opacity: 0; transform: translateY(4px);
    transition: opacity .15s var(--ease-out), transform .15s var(--ease-out);
    pointer-events: none;
}
.ask-cite-card.is-open { opacity: 1; transform: none; pointer-events: auto; }
.ask-cite-card .ask-cite-card-n {
    display: inline-block; min-width: 1.15em; text-align: center;
    margin-right: var(--sp-2);
    font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
    border-radius: var(--r-sm);
    background: var(--gold-light); color: var(--gold-text);
}
.ask-cite-card .ask-cite-card-title {
    color: var(--ink); font-weight: 600; text-decoration: none;
}
.ask-cite-card .ask-cite-card-title:hover { text-decoration: underline; }
.ask-cite-card .ask-cite-card-meta {
    margin: var(--sp-1) 0 0; color: var(--ink-3); font-size: var(--fs-xs);
}

/* ══ 弹簧曲线（顶级质感 pass，2026-08-24）════════════════
   真弹簧方程采样成 linear() 点列（质量-刚度-阻尼），带 8% 过冲后回稳。
   盖章、悬浮卡、联动位移这些「物件落位」的动作统一用它——普通 ease 是
   「滑到位」，弹簧是「弹到位」，贵的手感差在这一下。 */
:root {
    --spring: linear(0, 0.01, 0.04 2.5%, 0.16 5.5%, 0.41 9%, 0.73 13%, 0.96 16.5%,
        1.08 19.5%, 1.12 22%, 1.1 25%, 1.04 30%, 0.99 36%, 0.975 42%,
        0.985 50%, 1.003 62%, 1.001 77%, 1);
}
.ask-cite-card { transition: opacity .15s var(--ease-out), transform .3s var(--spring); }


/* ══ 证据面板「核验放大镜」═══════════════════════════════
   数据全是服务端核验路上算过的中间量（ask._evidence），面板只负责摆出来。 */
.ask-ev-btn {
    margin-left: var(--sp-2);
    padding: 1px var(--sp-2);
    font-size: var(--fs-xs);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    white-space: nowrap;
}
.ask-ev-btn:hover { border-color: var(--gold); color: var(--gold-text); }
.ask-ev-btn[aria-expanded="true"] { border-color: var(--gold); color: var(--gold-text); background: var(--gold-wash); }

.ask-ev {
    margin: calc(-1 * var(--sp-1)) 0 var(--sp-4) var(--sp-2);
    padding: var(--sp-3) 0 var(--sp-2) var(--sp-4);
    border-left: 2px solid var(--gold);
    font-size: var(--fs-sm);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .3s var(--ease-out), transform .4s var(--spring);
}
.ask-ev.is-open { opacity: 1; transform: none; }
.ask-ev-item { display: flex; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.ask-ev-body { min-width: 0; }
.ask-ev-label { margin: 0 0 var(--sp-1); color: var(--ink-3); }
.ask-ev-sent { margin: 0; color: var(--ink-2); line-height: 1.75; }
.ask-ev-hit { background: var(--gold-light); color: inherit; border-radius: 2px; }
.ask-ev-nums { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.ask-ev-nums li { color: var(--ink-2); }
/* ✓/✕ 是判定结果的数据标记（全站口径），不是 UI 图标 */
.ask-ev-nums li.is-ok::before  { content: '✓ '; color: var(--gold-text); }
.ask-ev-nums li.is-miss::before { content: '✕ '; color: var(--red); }
.ask-ev-nums li.is-miss b { color: var(--red); }
.ask-ev-note { margin: var(--sp-2) 0 0; color: var(--ink-3); }

/* 相似度环：进度弧从 0 画到实测值，刻度线钉在阈值的位置——
   「差多远」一眼可读，过没过线由弧尖在刻度哪一侧说话。 */
.ask-ev-ring { width: 48px; height: 48px; flex-shrink: 0; }
.ask-ev-ring circle { fill: none; stroke-width: 4; }
.ask-ev-ring-bg { stroke: var(--line-2); }
.ask-ev-ring-val {
    stroke: var(--gold);
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: center;
    /* r=18 → 周长 113.1；弧长 = 相似度占比 */
    stroke-dasharray: calc(var(--sim) * 113.1) 113.1;
    stroke-dashoffset: calc(var(--sim) * 113.1);
    transition: stroke-dashoffset .9s var(--ease-out) .12s;
}
.ask-ev.is-open .ask-ev-ring-val { stroke-dashoffset: 0; }
.ask-ev-item.is-miss .ask-ev-ring-val { stroke: var(--red); }
.ask-ev-ring-bar { stroke: var(--ink-3); stroke-width: 2; }
/* SVG 图表数值标签，随 viewBox 缩放，不属于正文字阶 */
.ask-ev-ring-t {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    fill: var(--ink-2);
    text-anchor: middle;
}

/* ══ 质量分小环（出处清单）════════════════════════════ */
.ask-src-ring { width: 14px; height: 14px; vertical-align: -2px; }
.ask-src-ring circle { fill: none; stroke-width: 3; }
.ask-src-ring .bg { stroke: var(--line-2); }
.ask-src-ring .v {
    stroke: var(--gold);
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: center;
    /* r=8 → 周长 50.27 */
    stroke-dasharray: calc(var(--v) / 100 * 50.27) 50.27;
}

/* ══ 句子 ↔ 出处双向联动 ═════════════════════════════ */
.ask-s .ask-s-text { border-radius: 3px; transition: background-color .2s var(--ease); }
.ask-s.is-linked .ask-s-text { background-color: var(--gold-wash); }
.ask-src-item { transition: background-color .2s var(--ease), transform .3s var(--spring); }
.ask-src-item.is-linked { background-color: var(--gold-wash); transform: translateX(4px); }

/* ── 动效纪律 ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ask-stage.is-live .ask-stage-dot { animation: none; }
    .ask-skel i { animation: none; background: var(--line-2); }
    .ask-live .ask-cite { transition: none; }
    .ask-ev { opacity: 1; transform: none; transition: none; }
    .ask-ev-ring-val, .ask-src-ring .v { stroke-dashoffset: 0 !important; transition: none; }
    .ask-src-item, .ask-src-item.is-linked { transform: none; }
}