@charset "utf-8";
/* ==========================================================================
   冰橙 AI 助手 h8 · 设计系统
   视觉方向：冰与橙（Ice & Orange）
     - 冰蓝做骨架（结构、文字、主操作）
     - 橙做全站唯一的强调色（品牌、焦点、用户侧）
   风格：杂志编辑感，靠细线分层而不是重阴影，长文阅读优先。
   说明：本文件完全替代 Tailwind / layui 的视觉层，页面不依赖二者的样式类。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计变量
   -------------------------------------------------------------------------- */
:root {
    /* 底色阶：暖白纸感 */
    --bg: #f7f5f1;
    --bg-soft: #efebe4;
    --surface: #ffffff;
    --surface-2: #fbfaf8;

    /* 文字阶 */
    --ink: #16242c;
    --ink-2: #5c6b73;
    --ink-3: #8c979c;

    /* 分隔线 */
    --line: #e3ded5;
    --line-strong: #cfc8bc;

    /* 主色：冰蓝 */
    --ice: #1b4965;
    --ice-deep: #12303f;
    --ice-soft: #e7eef3;

    /* 强调色：赤陶橙（全站唯一高饱和色） */
    --orange: #e4572e;
    --orange-deep: #c2431f;
    --orange-soft: #fdede7;

    /* 语义色 */
    --green: #2f7d5b;
    --green-soft: #eaf4ef;
    --red: #c0392b;
    --red-soft: #fcefec;
    --amber: #b06d1b;
    --amber-soft: #fbf1e0;

    /* 圆角 */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;

    /* 字体 */
    --font-sans: system-ui, -apple-system, "HarmonyOS Sans SC", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;

    /* 版面 */
    --page-max: 860px;
    --gutter: 16px;

    /* 层级 */
    --z-topbar: 20;
    --z-composer: 20;
    --z-mask: 60;
    --z-toast: 90;

    /* 动效 */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. 基础重置
   -------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--bg);
    /* 极浅的纸纹：两层斜向细线，营造"纸"的质感，不抢内容 */
    background-image: linear-gradient(180deg, rgba(27, 73, 101, 0.022) 0%, rgba(27, 73, 101, 0) 340px);
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Vue 未渲染前隐藏模板内容，避免闪现 */
[v-cloak] {
    display: none !important;
}

button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
    border: 0;
    background: none;
}

input,
textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

a {
    color: var(--ice);
    text-decoration: none;
}

/* 细滚动条 */
.stream::-webkit-scrollbar,
.panel-body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.stream::-webkit-scrollbar-thumb,
.panel-body::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   3. 整体骨架：顶栏 / 会话流 / 输入区 三段式
   -------------------------------------------------------------------------- */
.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    width: 100%;
}

/* --- 3.1 顶栏 --- */
.topbar {
    flex: none;
    position: relative;
    z-index: var(--z-topbar);
    display: flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    padding: 0 var(--gutter);
    background: rgba(247, 245, 241, 0.92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--line);
}

.topbar-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: var(--page-max);
    margin: 0 auto;
}

/* 品牌标识：直接用 h55 旧版同一张 logo（图标 + 字标），图片本地化在 img/logo.png */
.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.brand-logo {
    display: block;
    height: 27px;
    width: auto;
    max-width: 48vw;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.topbar-spacer {
    flex: 1;
}

/* 顶栏图标按钮 */
.icon-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    color: var(--ink-2);
    transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.icon-btn:hover,
.icon-btn:active {
    background: var(--bg-soft);
    color: var(--ice);
}

.icon-btn.is-active {
    background: var(--ice-soft);
    color: var(--ice);
}

/* 字符数：等宽数字，杂志感的小标签 */
.quota {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-2);
    white-space: nowrap;
}

.quota b {
    font-weight: 500;
    color: var(--ice);
}

.quota.is-low {
    border-color: #f0c9bd;
    background: var(--orange-soft);
    color: var(--orange-deep);
}

.quota.is-low b {
    color: var(--orange-deep);
}

/* --- 3.2 会话流 --- */
.stream {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* 刻意不加 scroll-behavior: smooth：
       流式输出要「瞬间贴底」，平滑滚动会让 scrollTop 停留在动画中途，
       滚动监听据此误判成「用户上滚了」，于是自动跟随被关掉、还错误地浮出「回到最新」。 */
}

.stream-inner {
    width: 100%;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 22px var(--gutter) 28px;
}

/* --- 3.3 输入区 --- */
.composer {
    flex: none;
    position: relative;
    z-index: var(--z-composer);
    background: linear-gradient(180deg, rgba(247, 245, 241, 0) 0%, var(--bg) 22px);
    padding: 8px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
}

.composer-inner {
    width: 100%;
    max-width: var(--page-max);
    margin: 0 auto;
}

.composer-box {
    position: relative;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    background: var(--surface);
    transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.composer-box:focus-within {
    border-color: var(--ice);
    box-shadow: 0 0 0 3px rgba(27, 73, 101, 0.09);
}

/* 拖拽悬停：橙色虚线提示 */
.composer-box.is-dragover {
    border-color: var(--orange);
    border-style: dashed;
    background: var(--orange-soft);
}

.composer-input {
    display: block;
    width: 100%;
    min-height: 56px;
    max-height: 180px;
    padding: 13px 16px 6px;
    border: 0;
    outline: none;
    resize: none;
    background: transparent;
    font-size: 15px;
    line-height: 1.6;
}

.composer-input::placeholder {
    color: var(--ink-3);
}

/* 输入区底部工具条 */
.composer-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px 9px;
}

.tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    max-width: 100%;
    padding: 0 10px;
    border-radius: var(--r-sm);
    color: var(--ink-2);
    font-size: 12.5px;
    white-space: nowrap;
    transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

/* 按钮里的文字：长了就省略，不要把按钮撑出两行 */
.tool-btn .tool-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 模型按钮占位最长，单独限宽（够放「模型名 等 N 个」） */
.tool-btn.is-model {
    max-width: 190px;
}

.tool-btn:hover,
.tool-btn:active {
    background: var(--bg-soft);
    color: var(--ice);
}

.tool-btn.is-on {
    background: var(--ice-soft);
    color: var(--ice);
}

.tool-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.composer-tools-spacer {
    flex: 1;
}

/* 发送按钮：橙色，全页唯一实心强调 */
.send-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--orange);
    color: #fff;
    transition: background-color 0.18s var(--ease), transform 0.12s var(--ease);
}

.send-btn:hover {
    background: var(--orange-deep);
}

.send-btn:active {
    transform: scale(0.94);
}

.send-btn:disabled {
    background: var(--line-strong);
    cursor: not-allowed;
    transform: none;
}

/* 生成中：同一位置切成「停止」。
   多模型并发时文案变「全部停止」，按钮自动撑宽；停单个模型走标签行里的按钮 */
.send-btn.is-stop {
    width: auto;
    min-width: 38px;
    padding: 0 13px;
    gap: 6px;
    background: var(--ice);
}

.send-btn.is-stop:hover {
    background: var(--ice-deep);
}

.send-stop-text {
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.composer-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 7px;
    padding: 0 2px;
    font-size: 11px;
    color: var(--ink-3);
}

.composer-hint .count {
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}

/* 已选图片缩略图 */
.attach-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 12px 0;
}

/* 文档附件的折算消耗提示 */
.attach-note {
    padding: 8px 12px 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-3);
}

.attach-note b {
    color: var(--ice);
    font-weight: 600;
}

.attach-item {
    position: relative;
    width: 56px;
    height: 56px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface-2);
}

.attach-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attach-item .file-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 4px;
    gap: 1px;
    color: var(--ice);
    font-size: 20px;
}

/* 文档附件：卡片放宽，能看清文件名与格式角标 */
.attach-item.is-doc {
    width: 112px;
}

.attach-item .file-ph .file-ext {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1;
}

.attach-item .file-ph .file-name {
    display: block;
    max-width: 100%;
    font-size: 9px;
    font-style: normal;
    line-height: 1.2;
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attach-del {
    position: absolute;
    top: -1px;
    right: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 0 var(--r-sm) 0 8px;
    background: rgba(22, 36, 44, 0.62);
    color: #fff;
    font-size: 11px;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   4. 会话内容
   -------------------------------------------------------------------------- */

/* --- 4.1 开场区 --- */
.welcome {
    padding: 26px 0 20px;
}

.welcome-title {
    margin: 0 0 6px;
    font-size: 25px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.3;
    color: var(--ice);
}

.welcome-title em {
    font-style: normal;
    color: var(--orange);
}

.welcome-desc {
    margin: 0 0 18px;
    font-size: 13.5px;
    color: var(--ink-2);
}

/* 顶部公告条 */
.notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    margin-bottom: 18px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--ice);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: 12.5px;
    color: var(--ink-2);
}

/* --- 4.2 一轮问答 --- */
.turn {
    margin-bottom: 26px;
}

/* 用户提问：左侧橙线 + 米底，不用气泡避免"聊天气泡"廉价感 */
.ask {
    border-left: 3px solid var(--orange);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: var(--orange-soft);
    padding: 11px 14px;
}

.ask-text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: #7a2f14;
    white-space: pre-wrap;
    word-break: break-word;
}

.ask-imgs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.ask-imgs img {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border: 1px solid rgba(196, 67, 31, 0.25);
    border-radius: var(--r-sm);
    background: var(--surface);
    cursor: zoom-in;
}

/* 对话区里的文档附件：与输入区一致做成文档卡。
   文档地址塞进 <img> 会去加载 PDF，浏览器只会渲染出一个破图。 */
.ask-imgs .ask-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 76px;
    padding: 0 6px;
    gap: 3px;
    border: 1px solid rgba(196, 67, 31, 0.25);
    border-radius: var(--r-sm);
    background: var(--surface);
    cursor: pointer;
}

.ask-imgs .ask-file .file-ext {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1;
    color: var(--ice);
}

.ask-imgs .ask-file .file-name {
    display: block;
    max-width: 100%;
    font-size: 9px;
    font-style: normal;
    line-height: 1.2;
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 每个附件套一层，给「重新发送」按钮做定位基准 */
.ask-att {
    position: relative;
    display: flex;
    flex: none;
}

/* 重新发送：把这份附件放回输入区，省掉二次上传。
   常态就显示（这个功能本身很隐蔽，再靠 hover 才浮出来基本没人会发现），
   悬停时换成主色做反馈。 */
.ask-re {
    position: absolute;
    right: 2px;
    bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(122, 47, 20, 0.62);
    color: #fff;
    line-height: 1;
    cursor: pointer;
    transition: background 0.16s var(--ease);
}

.ask-re:hover,
.ask-re:focus-visible {
    background: var(--orange);
}

.ask-meta {
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: #a9694f;
}

/* --- 4.3 多模型标签（sticky） ---
   为什么钉住：多模型并发时答案会持续变长，标签若跟着滚上去，用户在生成过程中就
   够不到它，只能干等这一个模型跑完才能切到另一个看 —— 这正是之前的体验问题。
   钉在视口顶部后，随时都能切模型、随时都能单独停掉当前这个。 */
.model-tabs {
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px -2px 10px;
    padding: 8px 2px;
    /* 不透明底色：正文从下面滚过时不会与标签叠在一起 */
    background: var(--bg);
}

/* 本轮还有模型在生成：加一条底线，跟下面的正文分层 */
.model-tabs.is-live {
    border-bottom: 1px solid var(--line);
}

.model-tabs-strip {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.model-tabs-strip::-webkit-scrollbar {
    display: none;
}

.model-tab {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.02em;
    color: var(--ink-2);
    transition: all 0.18s var(--ease);
}

.model-tab:hover {
    border-color: var(--line-strong);
}

.model-tab.is-active {
    background: var(--ice);
    border-color: var(--ice);
    color: #fff;
}

.model-tab.is-error {
    border-color: #ecc3ba;
    color: var(--red);
}

.model-tab.is-error.is-active {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.model-tab.is-stopped {
    border-style: dashed;
    color: var(--ink-3);
}

/* 单个模型的生成状态：跑动 / 完成 / 出错 / 已停止 / 未开始 */
.tab-state {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--line-strong);
}

.tab-state.is-run {
    background: var(--orange);
    animation: pulse 1.1s var(--ease) infinite;
}

.tab-state.is-done {
    background: var(--green);
}

.tab-state.is-error {
    background: var(--red);
}

.tab-state.is-stopped {
    border-radius: 2px;
    background: var(--ink-3);
}

/* 只停当前正在看的这个模型（停全部走输入区的按钮） */
.tab-stop {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 27px;
    padding: 0 11px;
    border: 1px solid var(--ice);
    border-radius: 999px;
    background: var(--ice-soft);
    color: var(--ice);
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.18s var(--ease), transform 0.12s var(--ease);
}

.tab-stop:hover {
    background: #dae6ee;
}

.tab-stop:active {
    transform: scale(0.96);
}

@keyframes pulse {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1); }
}

/* --- 4.4 回答区 --- */
.reply {
    margin-top: 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    overflow: hidden;
}

.reply-body {
    padding: 14px 15px;
}

/* 流式输出时的光标 */
.caret {
    display: inline-block;
    width: 7px;
    height: 15px;
    margin-left: 3px;
    vertical-align: -2px;
    background: var(--orange);
    animation: blink 0.9s steps(2, start) infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

/* --- 4.5 思维链 --- */
.reason {
    margin-top: 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-2);
    overflow: hidden;
}

.reason-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 13px;
    text-align: left;
}

.reason-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.reason-time {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-3);
}

.reason-toggle {
    font-size: 11.5px;
    color: var(--ice);
}

.reason-body {
    padding: 0 13px 13px;
    border-top: 1px dashed var(--line);
    font-size: 13px;
    color: var(--ink-2);
}

/* --- 4.6 参考来源 --- */
.refs {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--line);
}

.refs-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.ref {
    padding: 9px 0 9px 12px;
    border-left: 2px solid var(--ice-soft);
}

.ref + .ref {
    border-top: 1px solid var(--line);
}

.ref-title {
    display: flex;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
}

.ref-title a {
    color: var(--ice);
}

.ref-title a:hover {
    color: var(--orange);
}

.ref-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--ink-3);
}

.ref-meta .badge {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--ice-soft);
    color: var(--ice);
}

.ref-more {
    margin-top: 6px;
    font-size: 12px;
    color: var(--ice);
}

.ref-detail {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-size: 12px;
    line-height: 1.65;
    color: var(--ink-2);
}

/* --- 4.7 错误卡片 --- */
.alert {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    padding: 12px 13px;
    border: 1px solid #efccc5;
    border-left: 3px solid var(--red);
    border-radius: var(--r-sm);
    background: var(--red-soft);
}

.alert-icon {
    flex: none;
    font-size: 15px;
    line-height: 1.5;
    color: var(--red);
}

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

.alert-title {
    font-size: 13.5px;
    font-weight: 500;
    color: #8f2b1f;
}

.alert-text {
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.6;
    color: #9c4133;
    word-break: break-word;
}

.alert-meta {
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: #a8614f;
}

/* 未扣积分提示：绿色，和红色错误卡片区分 */
.alert-noscore {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 5px 10px;
    border: 1px dashed #a9d5c0;
    border-radius: var(--r-sm);
    background: var(--green-soft);
    font-size: 11.5px;
    color: var(--green);
}

/* --- 4.8 操作按钮行 --- */
.acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.act {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-size: 12px;
    color: var(--ink-2);
    transition: all 0.18s var(--ease);
}

.act:hover {
    border-color: var(--ice);
    color: var(--ice);
}

.act.is-primary {
    border-color: var(--ice);
    color: var(--ice);
}

.act.is-danger:hover {
    border-color: var(--red);
    color: var(--red);
}

.act-model {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--ink-3);
    border-style: dashed;
}

.act-cost {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-3);
    padding-left: 2px;
}

/* 生成中的骨架提示 */
.thinking {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 10px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    font-size: 13px;
    color: var(--ink-2);
}

.thinking-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 14px;
}

.thinking-bars i {
    display: block;
    width: 3px;
    border-radius: 2px;
    background: var(--orange);
    animation: bounce 1s var(--ease) infinite;
}

.thinking-bars i:nth-child(1) { height: 6px; animation-delay: 0s; }
.thinking-bars i:nth-child(2) { height: 12px; animation-delay: 0.14s; }
.thinking-bars i:nth-child(3) { height: 8px; animation-delay: 0.28s; }

@keyframes bounce {
    0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
    50% { transform: scaleY(1); opacity: 1; }
}

/* 空态 */
.empty {
    padding: 40px 0;
    text-align: center;
    font-size: 13px;
    color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   5. 弹层
   -------------------------------------------------------------------------- */
.mask {
    position: fixed;
    inset: 0;
    z-index: var(--z-mask);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(18, 48, 63, 0.32);
    backdrop-filter: blur(2px);
    animation: fadeIn 0.2s var(--ease);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(22px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.sheet {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--page-max);
    max-height: 86vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    background: var(--bg);
    animation: slideUp 0.26s var(--ease);
    overflow: hidden;
}

.sheet-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px var(--gutter) 13px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

/* 顶部小把手 */
.sheet-head::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 34px;
    height: 3px;
    margin-left: -17px;
    border-radius: 2px;
    background: var(--line-strong);
}

.sheet-title {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ice);
}

.sheet-close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--r-sm);
    color: var(--ink-2);
}

.sheet-close:hover {
    background: var(--bg-soft);
}

.sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px var(--gutter) calc(18px + env(safe-area-inset-bottom, 0px));
}

.sheet-foot {
    flex: none;
    display: flex;
    gap: 10px;
    padding: 12px var(--gutter) calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: var(--surface);
}

/* 通用按钮 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 18px;
    border-radius: var(--r-sm);
    font-size: 14px;
    transition: all 0.18s var(--ease);
}

.btn-primary {
    flex: 1;
    background: var(--ice);
    color: #fff;
}

.btn-primary:hover {
    background: var(--ice-deep);
}

.btn-accent {
    flex: 1;
    background: var(--orange);
    color: #fff;
}

.btn-accent:hover {
    background: var(--orange-deep);
}

.btn-ghost {
    border: 1px solid var(--line-strong);
    color: var(--ink-2);
}

.btn-ghost:hover {
    border-color: var(--ice);
    color: var(--ice);
}

.btn-sm {
    height: 32px;
    padding: 0 12px;
    font-size: 12.5px;
}

.btn-danger {
    border: 1px solid #ecc3ba;
    color: var(--red);
}

.btn-danger:hover {
    background: var(--red-soft);
}

/* --- 5.1 搜索框 --- */
.search {
    position: relative;
    margin-bottom: 12px;
}

.search input {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 34px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    outline: none;
    background: var(--surface);
    font-size: 13.5px;
}

.search input:focus {
    border-color: var(--ice);
}

.search svg {
    position: absolute;
    left: 11px;
    top: 12px;
    color: var(--ink-3);
}

/* --- 5.2 模型卡片 --- */
.model-grid {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.model-card {
    position: relative;
    display: flex;
    gap: 10px;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    transition: all 0.18s var(--ease);
}

.model-card:hover {
    border-color: var(--line-strong);
}

.model-card.is-selected {
    border-color: var(--orange);
    background: var(--orange-soft);
    box-shadow: 0 3px 12px rgba(228, 87, 46, 0.09);
}

.model-check {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--orange);
}

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

.model-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ice);
    word-break: break-all;
}

.tag {
    flex: none;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0;
}

.tag-web {
    background: var(--ice-soft);
    color: var(--ice);
}

.tag-vision {
    background: #fdece8;
    color: var(--orange-deep);
}

/* 「文件」标签：该模型实测能把 PDF/Word/Excel/PPT 读进模型（与「识图」不是一回事） */
.tag-file {
    background: var(--green-soft);
    color: var(--green);
}

.tag-picked {
    background: var(--orange);
    color: #fff;
}

.model-tips {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--ink-2);
}

.model-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-3);
}

.model-tipbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    border: 1px solid #f0d3c8;
    border-radius: var(--r-md);
    background: var(--orange-soft);
    font-size: 12.5px;
    color: #8a3a1c;
}

.model-tipbar span {
    flex: 1;
}

/* --- 5.3 历史列表 --- */
.hist-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    text-align: left;
    transition: all 0.18s var(--ease);
}

.hist-item:hover {
    border-color: var(--ice);
}

/* 箭头固定不缩，长标题再长也不能把它挤走 */
.hist-item > svg {
    flex: 0 0 auto;
    color: var(--ink-3);
    transition: transform 0.18s var(--ease);
}

.hist-item:hover > svg {
    transform: translateX(2px);
    color: var(--ice);
}

/* ⚠️ hist-title / hist-time 必须是块级：原先两个都是 span（inline），
   overflow:hidden + text-overflow 在 inline 元素上不生效，
   配合 white-space:nowrap 长标题会整条横向溢出卡片（2026-10-09 用户截图反馈） */
.hist-main {
    min-width: 0;
    flex: 1;
}

.hist-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* 标题最多两行，超出第二行末尾出省略号（比单行截断能保留更多上下文） */
    -webkit-line-clamp: 2;
    overflow: hidden;
    /* 兼容容器：防止长英文单词/URL 撑破 */
    word-break: break-word;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ink);
}

.hist-time {
    display: block;
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.02em;
    color: var(--ink-3);
}

.hist-empty {
    padding: 34px 0;
    text-align: center;
    font-size: 13px;
    color: var(--ink-3);
}

/* 历史面板内的动作 */
.hist-acts {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

/* --- 5.4 提示词（专属 AI）编辑 ---
   「我的专属 AI」已于 2026-10-09 下线，原 .field / .field-label / .role-row
   三组样式随之移除。子页面里的表单类名带 p 前缀（.pfield / .pinput），与此无关。 */

/* --- 5.5 有趣提问 --- */
.quiz-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quiz-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    font-size: 13.5px;
    color: var(--ink);
    text-align: left;
    transition: all 0.18s var(--ease);
}

.quiz-item:hover {
    border-color: var(--orange);
    background: var(--orange-soft);
}

.quiz-item .idx {
    flex: none;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
}

/* 话题建议条 */
.topic-strip {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: none;
}

.topic-strip::-webkit-scrollbar {
    display: none;
}

.topic-chip {
    flex: none;
    max-width: 78%;
    padding: 8px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-size: 12.5px;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.18s var(--ease);
}

.topic-chip:hover {
    border-color: var(--orange);
    color: var(--orange-deep);
    background: var(--orange-soft);
}

.topic-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.topic-bar button {
    color: var(--ice);
}

/* --------------------------------------------------------------------------
   6. 上传进度
   -------------------------------------------------------------------------- */
.upload-card {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: var(--z-toast);
    width: min(88vw, 340px);
    transform: translate(-50%, -50%);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: 0 16px 40px rgba(18, 48, 63, 0.16);
    overflow: hidden;
}

.upload-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--line);
}

.upload-head .title {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--ice);
}

.upload-body {
    padding: 14px 15px 15px;
}

.upload-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 12.5px;
    color: var(--ink-2);
}

.upload-name .size {
    flex: none;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
}

.bar {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-soft);
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--orange);
    transition: width 0.28s var(--ease);
}

.bar-fill.is-done {
    background: var(--green);
}

.upload-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 11px;
    font-size: 12px;
    color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   7. Toast
   -------------------------------------------------------------------------- */
.toast-wrap {
    position: fixed;
    left: 50%;
    /* 顶在输入区上方：输入框会随内容长高，全屏阅读时输入区又会消失，
       所以高度由 JS 实时写进 --composer-h，不用写死的数值 */
    bottom: calc(var(--composer-h, 150px) + 16px);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transform: translateX(-50%);
    pointer-events: none;
}

.toast {
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(18, 36, 44, 0.92);
    color: #fff;
    font-size: 13px;
    animation: slideUp 0.22s var(--ease);
    max-width: 86vw;
}

.toast.is-ok {
    background: var(--green);
}

.toast.is-warn {
    background: var(--orange-deep);
}

/* --------------------------------------------------------------------------
   7.5 录音遮罩
   -------------------------------------------------------------------------- */
.rec-mask {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(18, 48, 63, 0.88);
    color: #fff;
    text-align: center;
    animation: fadeIn 0.2s var(--ease);
}

.rec-mask .rec-title {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.rec-mask .rec-tip {
    font-size: 13px;
    opacity: 0.78;
}

/* --------------------------------------------------------------------------
   7.5 居中说明框（文件上传说明等）
   -------------------------------------------------------------------------- */
.mask.is-center {
    align-items: center;
    padding: 18px;
}

.dialog {
    display: flex;
    flex-direction: column;
    width: min(92vw, 430px);
    max-height: 86vh;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: 0 18px 48px rgba(18, 48, 63, 0.2);
    animation: slideUp 0.24s var(--ease);
}

.dialog-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px 11px;
    border-bottom: 1px solid var(--line);
}

.dialog-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

.dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 11px 14px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ink-2);
}

.dlg-lead {
    margin: 0 0 7px;
}

.dlg-models {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

.dlg-model {
    padding: 1px 7px;
    font-size: 10.5px;
    color: var(--ice);
    background: var(--ice-soft);
    border-radius: 999px;
}

.dlg-row {
    display: flex;
    gap: 8px;
    padding: 5px 0;
    border-top: 1px solid var(--line);
}

.dlg-row:first-of-type {
    border-top: 0;
}

.dlg-k {
    flex: none;
    width: 74px;
    color: var(--ink-3);
}

.dlg-v {
    flex: 1 1 auto;
    color: var(--ink);
}

.dlg-table {
    width: 100%;
    margin: 5px 0 2px;
    border-collapse: collapse;
    font-size: 11.5px;
}

.dlg-table th,
.dlg-table td {
    padding: 4px 6px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.dlg-table th {
    font-weight: 600;
    color: var(--ink-3);
}

.dlg-table td:last-child {
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

/* 两个「更详细」入口并排，别各占一行把弹层撑高 */
.dlg-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 7px;
}

.dlg-more {
    color: var(--ice);
    text-decoration: none;
}

.dlg-more:hover {
    text-decoration: underline;
}

.dlg-sub {
    margin-top: 10px;
}

.dlg-warn {
    margin: 7px 0 0;
    color: var(--amber);
}

/* 附件保留期限声明：属于「免责声明」，用浅底块和正文区分开 */
.dlg-keep {
    margin: 9px 0 0;
    padding: 7px 9px;
    border-radius: var(--r-sm);
    background: var(--bg-soft);
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--ink-2);
}

.dlg-keep b {
    color: var(--ink);
    font-weight: 600;
}

/* 交互提示：说明「发过的附件点一下能看、↻ 能重发」 */
.dlg-tip {
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--ink-3);
}

.dlg-tip b {
    color: var(--ink);
    font-weight: 600;
}

/* 折叠块：按文件大小折算的积分表默认收起，点标题栏展开 */
.dlg-fold {
    margin-top: 4px;
    border-top: 1px solid var(--line);
}

.dlg-fold-head {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 8px 0;
    border: 0;
    background: none;
    text-align: left;
    font-size: 11.5px;
    color: var(--ink-2);
    cursor: pointer;
}

.dlg-fold-title {
    flex: none;
    font-weight: 600;
}

.dlg-fold-hint {
    flex: 1 1 auto;
    color: var(--ink-3);
}

.dlg-fold-ico {
    flex: none;
    color: var(--ink-3);
    transition: transform 0.18s var(--ease);
}

.dlg-fold.is-open .dlg-fold-ico {
    transform: rotate(180deg);
}

.dlg-fold-body {
    padding-bottom: 2px;
}

.dialog-foot {
    flex: none;
    padding: 10px 14px 13px;
    border-top: 1px solid var(--line);
    background: var(--bg);
}

.dlg-check {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 11.5px;
    color: var(--ink-3);
    cursor: pointer;
}

.dlg-check input {
    margin: 0;
}

.dlg-btns {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* --------------------------------------------------------------------------
   8. 侧边抽屉（历史 / 菜单）
   -------------------------------------------------------------------------- */
.drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: var(--z-mask);
    display: flex;
    flex-direction: column;
    width: min(84vw, 330px);
    background: var(--bg);
    border-right: 1px solid var(--line);
    box-shadow: 12px 0 36px rgba(18, 48, 63, 0.14);
    animation: drawerIn 0.24s var(--ease);
}

@keyframes drawerIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.drawer-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px var(--gutter) 13px;
    border-bottom: 1px solid var(--line);
}

.drawer-title {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px var(--gutter) 24px;
}

/* 抽屉里的动作列表 */
.drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 16px;
}

.drawer-action {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 12px 10px;
    border-radius: var(--r-sm);
    font-size: 14px;
    color: var(--ink);
    text-align: left;
    transition: background-color 0.16s var(--ease);
}

.drawer-action:hover {
    background: var(--bg-soft);
    color: var(--ice);
}

.drawer-action svg {
    flex: none;
    color: var(--ink-3);
}

.drawer-action:hover svg {
    color: var(--ice);
}

.drawer-action.is-danger:hover {
    color: var(--red);
}

.drawer-sep {
    height: 1px;
    margin: 10px 0 14px;
    background: var(--line);
}

.drawer-section {
    margin-bottom: 8px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   9. Markdown 排版（AI 回复正文）
   杂志感：标题用冰蓝细底线，引用用橙线，代码用等宽浅底
   -------------------------------------------------------------------------- */
.md {
    font-size: 15px;
    line-height: 1.78;
    color: var(--ink);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.md > *:first-child {
    margin-top: 0;
}

.md > *:last-child {
    margin-bottom: 0;
}

.md h1,
.md h2,
.md h3,
.md h4,
.md h5,
.md h6 {
    margin: 22px 0 10px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ice);
}

.md h1 {
    font-size: 21px;
    padding-bottom: 7px;
    border-bottom: 2px solid var(--ice);
}

.md h2 {
    font-size: 18px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--ice-soft);
}

.md h3 {
    font-size: 16px;
    padding-left: 9px;
    border-left: 3px solid var(--orange);
}

.md h4 {
    font-size: 15px;
    color: var(--ink);
}

.md h5,
.md h6 {
    font-size: 13.5px;
    color: var(--ink-2);
}

.md p {
    margin: 10px 0;
}

.md ul,
.md ol {
    margin: 10px 0;
    padding-left: 22px;
}

.md li {
    margin: 5px 0;
}

.md li::marker {
    color: var(--orange);
}

.md blockquote {
    margin: 12px 0;
    padding: 8px 14px;
    border-left: 3px solid var(--orange);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--surface-2);
    color: var(--ink-2);
}

.md code {
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--bg-soft);
    font-family: var(--font-mono);
    font-size: 0.88em;
    color: #9c3d18;
}

/* 独立代码块。带语言栏 / 复制按钮的那种由 .md-code 包一层，见下方 */
.md pre {
    margin: 12px 0;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: #f4f2ee;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.md pre code {
    padding: 0;
    background: none;
    color: var(--ink);
    font-size: 12.5px;
    line-height: 1.7;
    white-space: pre;
}

/* --- 新版渲染管线的代码块：语言栏 + 复制按钮 --- */
.md-code {
    margin: 12px 0;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: #f4f2ee;
    overflow: hidden;
}

/* 外层已经画了框，里面的 pre 不再重复画一遍 */
.md-code pre {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.md-code-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px 6px 12px;
    border-bottom: 1px solid var(--line);
    background: rgba(27, 73, 101, 0.045);
}

.md-code-lang {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.md-code-copy {
    flex: none;
    padding: 3px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-2);
    font-size: 11px;
    transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.md-code-copy:hover {
    border-color: var(--ice);
    color: var(--ice);
}

/* 复制成功的短暂反馈（由 app-ui.js 里的委托事件打上这个类） */
.md-code-copy.is-copied {
    border-color: var(--green);
    color: var(--green);
}

/* --- 表格：外层可横向滚动，窄屏不撑破版面 --- */
.md-table-wrap {
    margin: 12px 0;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.md table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.md th,
.md td {
    padding: 8px 11px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.md th + th,
.md td + td {
    border-left: 1px solid var(--line);
}

.md tbody tr:last-child td {
    border-bottom: 0;
}

.md th {
    background: var(--surface-2);
    font-weight: 500;
    color: var(--ice);
    white-space: nowrap;
}

/* 模型直接吐出的原始 HTML <table> 不会被 renderMarkdown 包上 .md-table-wrap
   （那层壳只服务 markdown 语法表格，而 marked 会把裸 HTML 表格原样透传），
   于是宽表会顶出 .md；而 .stream 有 overflow-x:hidden ⇒ 右边几列被永久裁掉、
   连滚都滚不到（2026-10-17 查明）。这里给它自己补个框，并让它可横向滚动。
   ⚠️ 选择器只匹配 .md 的「直接子元素」，壳（.md-table-wrap）里的表格父节点不是 .md，
      所以对有壳的表格零副作用 —— 别改成 .md table。 */
.md>table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 12px 0;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

/* 任务列表 */
.md input[type="checkbox"] {
    margin: 0 6px 0 0;
    vertical-align: -1px;
    accent-color: var(--ice);
}

.md li>p {
    margin: 0;
}

/* 删除线 / 上下标 */
.md del {
    color: var(--ink-3);
}

.md sup,
.md sub {
    font-size: 0.74em;
}

/* 嵌套列表的间距收一点，层级更清楚 */
.md ul ul,
.md ol ol,
.md ul ol,
.md ol ul {
    margin: 4px 0;
}

.md img {
    max-width: 100%;
    border-radius: var(--r-sm);
}

.md a {
    color: var(--ice);
    border-bottom: 1px solid var(--ice-soft);
}

.md a:hover {
    color: var(--orange);
    border-bottom-color: var(--orange);
}

.md hr {
    margin: 18px 0;
    border: 0;
    border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   10. 响应式
   -------------------------------------------------------------------------- */
/* 手机窄屏：收紧留白 */
@media (max-width: 480px) {
    :root {
        --gutter: 13px;
    }

    .welcome-title {
        font-size: 22px;
    }

    .brand-sub {
        display: none;
    }

    .ask-imgs img {
        width: 64px;
        height: 64px;
    }
}

/* 极窄屏：工具条只留图标，仅保留信息量最大的模型名 */
@media (max-width: 400px) {
    .tool-btn {
        padding: 0 8px;
    }

    .tool-btn .tool-text {
        display: none;
    }

    .tool-btn.is-model {
        max-width: 118px;
    }

    .tool-btn.is-model .tool-text {
        display: inline;
    }
}

/* 平板及以上：弹层改为居中卡片，抽屉保留 */
@media (min-width: 700px) {
    .mask {
        align-items: center;
        padding: 24px;
    }

    .sheet {
        max-height: 82vh;
        border-radius: var(--r-xl);
        animation: popIn 0.22s var(--ease);
    }

    @keyframes popIn {
        from { transform: translateY(14px) scale(0.985); opacity: 0; }
        to { transform: translateY(0) scale(1); opacity: 1; }
    }

    .sheet-head::before {
        display: none;
    }

    .composer-input {
        min-height: 64px;
    }
}

/* 大屏：正文略放大，行宽舒适 */
@media (min-width: 1000px) {
    body {
        font-size: 15.5px;
    }

    .md {
        font-size: 15.5px;
        line-height: 1.82;
    }
}

/* 尊重系统减弱动效设置 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 全屏阅读模式：隐藏输入区，顶栏只留那一颗「全屏开关」。
   刻意保留顶栏本身（背景透明化、不占视觉），这样开关的位置一动不动 ——
   进入全屏与退出全屏是同一处、同一个按钮，来回切换连贯，不会有「上去下来」的错位感。 */
body.reading .composer {
    display: none;
}

body.reading .topbar {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.reading .topbar .icon-btn:not(.reading-toggle),
body.reading .topbar .brand,
body.reading .topbar .quota,
body.reading .topbar .topbar-spacer {
    display: none;
}

/* 顶栏只剩一颗按钮，靠右对齐即与常规模式下的位置完全重合 */
body.reading .topbar-inner {
    justify-content: flex-end;
}

body.reading .stream-inner {
    padding-top: 14px;
    /* 输入区已隐藏，「回到最新」会降到右下角，这里给它留出空间 */
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

/* 全屏阅读时输入区没了，把「回到最新」从输入区上方挪到右下角 */
body.reading .to-bottom {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

/* 「回到最新」：用户上滚阅读时浮出，一键回到底部并恢复自动跟随 */
.to-bottom {
    position: fixed;
    right: 16px;
    bottom: calc(150px + env(safe-area-inset-bottom, 0px));
    z-index: 70;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 13px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: saturate(180%) blur(10px);
    color: var(--ice);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 3px 14px rgba(27, 73, 101, 0.14);
    transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.to-bottom:active {
    transform: scale(0.96);
}

/* 下面还有新内容时的小圆点 */
.to-bottom-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange);
    flex: none;
}

/* 被用户主动停止的回答：在操作行里给一句轻提示，不占用错误卡片 */
.act-stopped {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--ink-2);
    font-size: 11px;
    white-space: nowrap;
}

/* 生成中的「停止」：与「复制 / 重新生成」同排，但不抢视觉重心 */
.act.is-stop {
    color: var(--ice);
}

/* =========================================================================
   20. 对话页交互优化（2026-10-17）
       20.1 顶栏：额度点击切换 / logo = 新建会话
       20.2 附件不被支持的模型：显示「已忽略」说明
       20.3 模型选择：国内外分组 + 桌面端居中大面板
   ========================================================================= */

/* --- 20.1 顶栏 ---------------------------------------------------------- */

/* .brand 从 <div> 改成 <button>（点它新建会话）：只补按钮特有的重置，
   字体/尺寸仍沿用第 3 段，别把 logo 大小改坏 */
.brand {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
    border-radius: 8px;
    transition: opacity 0.18s var(--ease);
}

.brand:hover { opacity: 0.78; }
.brand:active { opacity: 0.62; }
.brand:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }

/* .quota 从 <a> 改成 <button>：同样只补重置，胶囊外形沿用 3.1 段 */
.quota {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    text-align: center;
    transition: border-color 0.16s var(--ease), color 0.16s var(--ease);
}

.quota:hover { border-color: var(--line-strong); color: var(--ink); }
.quota:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }

/* 展开态用实线描边，与「额度」两字时的低调感区分开 */
.quota.is-shown { border-color: var(--line-strong); }

/* --- 20.2 附件不被支持的模型 ------------------------------------------- */
/* 特意与「错误卡片」区分：这不是失败，而是这一轮主动没发请求 */
.skip-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 10px 0 4px;
    padding: 11px 13px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface-2);
}

.skip-note-icon {
    flex: none;
    display: flex;
    margin-top: 1px;
    color: var(--ink-3);
}

.skip-note-main { min-width: 0; }

.skip-note-title {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink);
}

.skip-note-sub {
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--ink-3);
}

/* 多模型标签上的「跳过」态：不是错误，所以不给红色 */
.tab-state.is-skipped { background: var(--ink-3); }
.model-tab.is-skipped { color: var(--ink-3); }

/* --- 20.3 模型选择 ----------------------------------------------------- */

/* 抽屉遮罩的定位原本写在 wen.html 的行内 style 上，
   桌面端要覆盖必须挪进 CSS（行内样式优先级最高） */
.drawer-mask {
    align-items: stretch;
    justify-content: flex-start;
}

/* 未付费时的「国外模型被锁」提示 */
.model-locked {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--bg-soft);
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--ink-3);
}

.model-locked svg { flex: none; }
.model-locked a { flex: none; margin-left: auto; color: var(--ice); font-weight: 600; }
.model-locked a:hover { text-decoration: underline; }

/* 分组标题：国内模型 / 国外模型 */
.model-group-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 4px 0 2px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink-3);
}

.model-group-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

.model-group-count {
    flex: none;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--bg-soft);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-3);
}

/* 桌面端：模型选择从「左侧 330px 抽屉」换成「居中大面板」，
   屏幕够大就把模型尽量铺开，少滚动、少翻页 */
@media (min-width: 900px) {
    .drawer-mask.is-model {
        align-items: center;
        justify-content: center;
        padding: 28px 24px;
    }

    .drawer.is-model {
        position: relative;
        top: auto;
        left: auto;
        bottom: auto;
        width: min(94vw, 1040px);
        height: min(86vh, 820px);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        box-shadow: 0 24px 64px rgba(18, 48, 63, 0.22);
        animation: modelPanelIn 0.22s var(--ease);
    }

    .drawer.is-model .drawer-body { padding: 16px 20px 26px; }

    .drawer.is-model .model-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(246px, 1fr));
        gap: 10px;
        align-items: stretch;
    }

    /* 分组标题横跨整行 —— 否则会被塞进某一列里 */
    .drawer.is-model .model-group-title { grid-column: 1 / -1; margin-top: 8px; }

    /* 同一行的卡片等高，看起来更整齐 */
    .drawer.is-model .model-card { height: 100%; padding: 10px 12px; }

    /* 「已选 N 个」那条在大面板里别铺满 1000px，收成小胶囊就够；
       整行橙色块在宽面板里太重，会抢走模型卡片的注意力 */
    .drawer.is-model .model-tipbar {
        display: inline-flex;
        padding: 7px 12px;
        margin-bottom: 12px;
    }

    .drawer.is-model .model-tipbar span { flex: none; }

    .drawer.is-model .drawer-head { padding: 17px 20px 13px; }
    .drawer.is-model .drawer-title { font-size: 12px; }
}

@keyframes modelPanelIn {
    from { opacity: 0; transform: translateY(10px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .drawer.is-model { animation: none; }
}

/* =========================================================================
 * 21. 多模型标签条：桌面端换行铺开（2026-10-17）
 * -------------------------------------------------------------------------
 * 问题：标签条一直是「单行 + overflow-x:auto + 隐藏滚动条」。
 *       选 6 个以上模型时，右侧的标签被裁在可视区外，而滚动条是隐藏的 ——
 *       桌面端用户根本没有「这里还能横向滚」的线索，看起来就像「后面的模型不见了」
 *       （用户反馈原文：红框里模型多了就看不到后面的）。
 * 桌面屏宽裕，不藏：改成 flex-wrap 换行，选几个就铺几行，全部可见。
 * 移动端保持单行横滑 —— 换行会把回答区挤下去一大截，得不偿失。
 * ⚠️ 只加 flex-wrap，不要给 .model-tabs-strip 设 max-height/overflow 隐藏：
 *    那等于又把它藏起来了。
 * ====================================================================== */
@media (min-width: 900px) {
    .model-tabs {
        /* 换行后标签条会变成多行，停止键按第一行对齐，不要垂直居中 */
        align-items: flex-start;
    }

    .model-tabs-strip {
        flex-wrap: wrap;
        overflow-x: visible;
        row-gap: 7px;
    }

    .tab-stop { flex: none; }
}