/* ============================================================
   css/chat/chat-answer-card.css — 问答卡（答复卡）卡面样式
   两套长相共用一套结构：
     · 纸卡（`.ac-card`）：暖米纸底 + 金线分隔 —— 一问一答 / 填表
     · 试卷（`.ac-card--exam`）：题号单独一列（右侧细金线）+ 选项带勾选框 —— 带选项的卷子
   ★ 定稿口径（2028-09 甲方看图选款后的「A 款 · 清新典雅」）：
     · **层级**：题面是主（13.5px/600/近黑），答案是第二层（13px/衬线/偏灰）；
       她那一栏下面的括号说明再淡一层（11.5px/淡灰）。
     · **打星**：15px 真五角星（clip-path），点亮的实心玫瑰色、没点亮的只有描边（空心）。
     · **打分**：小徽章（金色细边 + 玫瑰色数字 + 「/10」小一号）。
     · **对错**：两块小方格并排（对钩 / 叉），**他选中的那块实心**，另一块淡色空心。
     · **对齐**（甲方明确要求）：打星 / 打分 / 对错一律**整块靠右对齐**，
       跟答案文字之间留出呼吸位，绝不贴着最后一个字。
     · 出场只动透明度 + 极轻微位移，180ms 内结束；跟随系统「减少动效」。
   规矩：禁 emoji、禁系统默认控件、颜色一律走主题变量、窄屏 360 不许横向溢出、
        卡片不写死高度（按实际宽高比自适应）。
   ============================================================ */

.bubble.answer-card-bubble,
.bubble.ask-card-bubble {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0;
}
.bubble.answer-card-bubble:hover,
.bubble.ask-card-bubble:hover {
    transform: none;
    box-shadow: none !important;
}
/* 她那条（出题方）跟他的答卷同宽同左沿（原来窄 6px，两张卡上下对不齐） */
.bubble.ask-card-bubble { max-width: 100% !important; width: 100% !important; }
/* ★ 外层的 .bubble-wrap 默认按内容宽（只设了 max-width:100%），内容短时会跟着缩成一条
   （实测：她那条求婚申请表只有 154px 宽、一张纸孤零零挂在左边，很难看）。
   卡片是「一张纸」的形态，永远撑满消息行才对 —— 用 :has() 把外层也撑满（Chrome/Safari 15.4+/iOS 15.4+ 都支持，
   安卓 Chrome 105+ 支持；不支持时退回下面的 align-self，最差只是窄一点，不会破版）。 */
.bubble-wrap:has(> .bubble.answer-card-bubble),
.bubble-wrap:has(> .bubble.ask-card-bubble) {
    width: 100%;
    min-width: 0;
    align-items: stretch;
}
/* ★ 同一条里两块卡（她的问卷 + 他的答卷）左右**必须对齐** */
.msg:has(> .bubble-wrap > .bubble.answer-card-bubble),
.msg:has(> .bubble-wrap > .bubble.ask-card-bubble) {
    align-items: stretch;
}
.bubble.ask-card-bubble,
.bubble.answer-card-bubble {
    align-self: stretch;
    width: 100% !important;
    max-width: 100% !important;
}

.ac-card {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 15px 11px;
    border: 0.5px solid var(--border);
    border-radius: 18px;
    background: var(--surface-solid, #FFFFFF);
    background-image: linear-gradient(180deg, rgba(196, 168, 106, 0.045) 0%, rgba(196, 168, 106, 0) 42%);
    box-shadow: 0 1px 2px rgba(140, 120, 112, 0.06), 0 6px 16px rgba(140, 120, 112, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    color: var(--text, #3A322E);
    overflow: hidden;
    animation: acRiseIn .18s cubic-bezier(.16, 1, .3, 1) both;
}
/* 出场：只动透明度 + 极轻微位移（不位移整块版面，也不拖时间） */
@keyframes acRiseIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}
/* 出题方：底色更淡、边框更细，像一张递给他的空白卷 */
.ac-card--ask {
    background: var(--surface, #FBF8F4);
    border-style: dashed;
    opacity: 0.98;
}

/* ---------- 抬头 ---------- */
.ac-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding-bottom: 9px;
    border-bottom: 0.5px solid rgba(196, 168, 106, 0.25);
}
.ac-head-ico {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    color: var(--rose, #C9A8A8);
}
.ac-head-tx {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-serif, Georgia, "Songti SC", serif);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ac-head-sub {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--text-muted, #9C938C);
    letter-spacing: 0.4px;
}

/* ---------- 主体 ---------- */
.ac-body { padding: 2px 0 0; }

.ac-intro {
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--text-muted, #9C938C);
    padding: 7px 2px 5px;
    word-break: break-word;
}

.ac-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 0 10px;
    border-bottom: 0.5px solid rgba(196, 168, 106, 0.16);
}
.ac-row:last-child { border-bottom: 0; }

.ac-no {
    flex: 0 0 auto;
    min-width: 17px;
    padding-top: 1px;
    font-family: var(--font-serif, Georgia, "Songti SC", serif);
    font-size: 12px;
    font-weight: 600;
    color: var(--rose, #C9A8A8);
    text-align: center;
    letter-spacing: 0.2px;
}
/* 试卷：题号带一条右侧细金线，站成单独一列 */
.ac-card--exam .ac-no {
    min-width: 22px;
    padding-right: 8px;
    border-right: 0.5px solid rgba(196, 168, 106, 0.3);
    line-height: 1.5;
}

.ac-main { flex: 1 1 auto; min-width: 0; }

/* 题面（第一层：最大最重） */
.ac-q {
    font-size: 13.5px;
    line-height: 1.6;
    font-weight: 600;
    color: #2E2823;
    word-break: break-word;
    overflow-wrap: anywhere;
}
/* 她那一栏下面的括号说明（第三层：最淡） */
.ac-hint {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--text-muted, #9C938C);
    line-height: 1.55;
}

/* 答案（第二层：比题面轻、但一眼看得出是他说的） */
.ac-a {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.72;
    color: #4A423C;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-family: var(--font-serif, Georgia, "Songti SC", serif);
}
.ac-a--empty { color: var(--text-muted, #9C938C); font-style: italic; font-size: 12px; }
/* ★ 有「打分 / 打星 / 对错」时：答案与那一块横向排一行，**那一块整体靠右对齐**
   （甲方明确要求：不许贴着最后一个字，也不许歪着） */
.ac-a--withmeta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}
.ac-a-tx { flex: 1 1 auto; min-width: 0; }
.ac-a--withmeta > .ac-meta { flex: 0 0 auto; margin-left: 0; }
/* 只有后缀、没有答案文字时：整块靠右 */
.ac-a--meta { display: flex; justify-content: flex-end; }

.ac-note {
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--text-muted, #9C938C);
    word-break: break-word;
}

/* ---------- 选项（勾选框） ---------- */
.ac-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-top: 8px;
}
.ac-opt {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 3.5px 10px 3.5px 8px;
    border: 0.5px solid rgba(196, 168, 106, 0.32);
    border-radius: 11px;
    background: rgba(196, 168, 106, 0.05);
    font-size: 12px;
    line-height: 1.5;
    color: #6E655E;
    transition: background .22s cubic-bezier(.16, 1, .3, 1), border-color .22s cubic-bezier(.16, 1, .3, 1), color .22s, transform .22s;
}
.ac-opt-box {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(196, 168, 106, 0.55);
    border-radius: 4px;
    color: transparent;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.ac-opt-no {
    flex: 0 0 auto;
    font-family: var(--font-serif, Georgia, "Songti SC", serif);
    font-size: 11.5px;
    opacity: 0.75;
}
.ac-opt-tx { min-width: 0; word-break: break-word; overflow-wrap: anywhere; }

/* 他选中的那一项：玫瑰底色 + 对勾 */
.ac-opt.on {
    border-color: var(--rose, #C9A8A8);
    background: rgba(201, 168, 168, 0.12);
    color: #3A322E;
    font-weight: 500;
}
.ac-opt.on .ac-opt-box {
    background: var(--rose, #C9A8A8);
    border-color: var(--rose, #C9A8A8);
    color: #fff;
}
/* 出题方那张：不显示勾选框里的对勾（她还没答），框留空 */
.ac-opts--ask .ac-opt { opacity: 0.86; }

/* ---------- 后缀三件套：打星 / 打分 / 对错 ---------- */
.ac-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    vertical-align: middle;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* 打分/打星/对错与答案文字之间的呼吸位 */
.ac-meta-sep { display: inline-block; width: 10px; }

/* 打星：15px 真五角星，点亮的实心、没点亮的只有描边 */
.ac-stars { display: inline-flex; align-items: center; gap: 3px; }
.ac-star {
    display: inline-block;
    width: 15px;
    height: 15px;
    /* 五角星（纯 CSS，不用 emoji / 图片） */
    clip-path: polygon(50% 0%, 62.4% 35.4%, 100% 36.8%, 70.6% 58.6%, 81.6% 95.4%, 50% 74.4%, 18.4% 95.4%, 29.4% 58.6%, 0% 36.8%, 37.6% 35.4%);
    background: rgba(196, 168, 106, 0.20);
    box-shadow: inset 0 0 0 1px rgba(196, 168, 106, 0.5);
    transition: background .22s, box-shadow .22s, transform .22s;
}
.ac-star.on {
    background: #D9A6A6;
    box-shadow: inset 0 0 0 1px rgba(192, 138, 143, 0.75);
}

/* 打分：小徽章（金色细边 + 玫瑰数字 + 「/10」小一号） */
.ac-scorebadge {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    padding: 1.5px 8px 2px;
    border: 0.5px solid rgba(196, 168, 106, 0.55);
    border-radius: 999px;
    background: rgba(196, 168, 106, 0.07);
    font-family: var(--font-serif, Georgia, "Songti SC", serif);
    color: #B4797F;
}
.ac-scorebadge b { font-size: 15px; font-weight: 600; line-height: 1; }
.ac-scorebadge i { font-style: normal; font-size: 10.5px; opacity: .75; }

/* 对错：两块小方格并排，他选中的那块实心 */
.ac-tfpair { display: inline-flex; align-items: center; gap: 6px; }
.ac-tfbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    border: 1px solid rgba(180, 170, 155, 0.5);
    background: rgba(180, 170, 155, 0.07);
    color: rgba(160, 150, 140, 0.55);
    transition: background .22s, border-color .22s, color .22s, transform .22s, box-shadow .22s;
}
.ac-tfbox svg { display: block; }
.ac-tfbox.yes.on {
    border-color: #8FB59E;
    background: #8FB59E;
    color: #fff;
    box-shadow: 0 2px 5px rgba(143, 181, 158, 0.35);
}
.ac-tfbox.no.on {
    border-color: #CE8A90;
    background: #CE8A90;
    color: #fff;
    box-shadow: 0 2px 5px rgba(206, 138, 144, 0.35);
}

/* ---------- 页脚：一条收尾金线 ---------- */
.ac-foot {
    display: flex;
    justify-content: center;
    padding-top: 7px;
    padding-bottom: 2px;
}
.ac-foot-line {
    display: block;
    width: 46px;
    height: 1px;
    background: linear-gradient(90deg, rgba(196, 168, 106, 0) 0%, rgba(196, 168, 106, 0.6) 50%, rgba(196, 168, 106, 0) 100%);
}

/* ---------- 窄屏（<370px）与深色 ---------- */
@media (max-width: 370px) {
    .ac-card { padding: 12px 12px 8px; }
    .ac-q { font-size: 13px; }
    .ac-a { font-size: 12.5px; }
    .ac-opt { font-size: 11.5px; padding: 3px 7px 3px 6px; }
    .ac-card--exam .ac-no { min-width: 19px; padding-right: 6px; }
    .ac-tfbox { width: 23px; height: 23px; border-radius: 8px; }
    .ac-star { width: 13px; height: 13px; }
    .ac-meta { gap: 6px; margin-left: 8px; }
}
/* 减少动效：出场动画与状态过渡一律关掉 */
@media (prefers-reduced-motion: reduce) {
    .ac-card { animation: none; }
    .ac-star, .ac-opt, .ac-tfbox, .ac-scorebadge { transition: none !important; }
}
[data-theme-mode="dark"] .ac-card {
    background: var(--surface-solid, #2A2523);
    background-image: linear-gradient(180deg, rgba(196, 168, 106, 0.06) 0%, rgba(196, 168, 106, 0) 42%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
[data-theme-mode="dark"] .ac-opt { background: rgba(196, 168, 106, 0.08); }
[data-theme-mode="dark"] .ac-q { color: #F2EDE7; }
[data-theme-mode="dark"] .ac-a { color: #DCD4CC; }
[data-theme-mode="dark"] .ac-scorebadge { background: rgba(196, 168, 106, 0.12); }
[data-theme-mode="dark"] .ac-tfbox { border-color: rgba(196, 168, 106, 0.4); background: rgba(196, 168, 106, 0.08); }