/* ══════════════════════════════════════════════
   Echo 回响 · css/messages.css
   消息气泡 + thinking 折叠区 + act 动作 chip
   ══════════════════════════════════════════════ */

  /* ── 对话字体:仅聊天气泡使用(九信风) ── */
  /* 切片按需加载:浏览器只下载页面实际用到的字符片,不再整包 8MB */
  @font-face{
    font-family: "Jiuxinfeng90";
    src: url("../fonts/jxf/base.woff2") format("woff2");
    font-weight: normal; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF,U+2000-206F,U+3000-303F,U+FF00-FFEF,U+2190-21FF,U+2600-27BF;
  }
  @font-face{
    font-family: "Jiuxinfeng90";
    src: url("../fonts/jxf/cjk00.woff2") format("woff2");
    font-weight: normal; font-style: normal; font-display: swap;
    unicode-range: U+4E00-52FF;
  }
  @font-face{
    font-family: "Jiuxinfeng90";
    src: url("../fonts/jxf/cjk01.woff2") format("woff2");
    font-weight: normal; font-style: normal; font-display: swap;
    unicode-range: U+5300-57FF;
  }
  @font-face{
    font-family: "Jiuxinfeng90";
    src: url("../fonts/jxf/cjk02.woff2") format("woff2");
    font-weight: normal; font-style: normal; font-display: swap;
    unicode-range: U+5800-5CFF;
  }
  @font-face{
    font-family: "Jiuxinfeng90";
    src: url("../fonts/jxf/cjk03.woff2") format("woff2");
    font-weight: normal; font-style: normal; font-display: swap;
    unicode-range: U+5D00-61FF;
  }
  @font-face{
    font-family: "Jiuxinfeng90";
    src: url("../fonts/jxf/cjk04.woff2") format("woff2");
    font-weight: normal; font-style: normal; font-display: swap;
    unicode-range: U+6200-66FF;
  }
  @font-face{
    font-family: "Jiuxinfeng90";
    src: url("../fonts/jxf/cjk05.woff2") format("woff2");
    font-weight: normal; font-style: normal; font-display: swap;
    unicode-range: U+6700-6BFF;
  }
  @font-face{
    font-family: "Jiuxinfeng90";
    src: url("../fonts/jxf/cjk06.woff2") format("woff2");
    font-weight: normal; font-style: normal; font-display: swap;
    unicode-range: U+6C00-70FF;
  }
  @font-face{
    font-family: "Jiuxinfeng90";
    src: url("../fonts/jxf/cjk07.woff2") format("woff2");
    font-weight: normal; font-style: normal; font-display: swap;
    unicode-range: U+7100-75FF;
  }
  @font-face{
    font-family: "Jiuxinfeng90";
    src: url("../fonts/jxf/cjk08.woff2") format("woff2");
    font-weight: normal; font-style: normal; font-display: swap;
    unicode-range: U+7600-7AFF;
  }
  @font-face{
    font-family: "Jiuxinfeng90";
    src: url("../fonts/jxf/cjk09.woff2") format("woff2");
    font-weight: normal; font-style: normal; font-display: swap;
    unicode-range: U+7B00-7FFF;
  }
  @font-face{
    font-family: "Jiuxinfeng90";
    src: url("../fonts/jxf/cjk10.woff2") format("woff2");
    font-weight: normal; font-style: normal; font-display: swap;
    unicode-range: U+8000-84FF;
  }
  @font-face{
    font-family: "Jiuxinfeng90";
    src: url("../fonts/jxf/cjk11.woff2") format("woff2");
    font-weight: normal; font-style: normal; font-display: swap;
    unicode-range: U+8500-89FF;
  }
  @font-face{
    font-family: "Jiuxinfeng90";
    src: url("../fonts/jxf/cjk12.woff2") format("woff2");
    font-weight: normal; font-style: normal; font-display: swap;
    unicode-range: U+8A00-8EFF;
  }
  @font-face{
    font-family: "Jiuxinfeng90";
    src: url("../fonts/jxf/cjk13.woff2") format("woff2");
    font-weight: normal; font-style: normal; font-display: swap;
    unicode-range: U+8F00-93FF;
  }
  @font-face{
    font-family: "Jiuxinfeng90";
    src: url("../fonts/jxf/cjk14.woff2") format("woff2");
    font-weight: normal; font-style: normal; font-display: swap;
    unicode-range: U+9400-98FF;
  }
  @font-face{
    font-family: "Jiuxinfeng90";
    src: url("../fonts/jxf/cjk15.woff2") format("woff2");
    font-weight: normal; font-style: normal; font-display: swap;
    unicode-range: U+9900-9DFF;
  }
  @font-face{
    font-family: "Jiuxinfeng90";
    src: url("../fonts/jxf/exta0.woff2") format("woff2");
    font-weight: normal; font-style: normal; font-display: swap;
    unicode-range: U+3400-3BFF;
  }
  @font-face{
    font-family: "Jiuxinfeng90";
    src: url("../fonts/jxf/exta1.woff2") format("woff2");
    font-weight: normal; font-style: normal; font-display: swap;
    unicode-range: U+3C00-43FF;
  }
  @font-face{
    font-family: "Jiuxinfeng90";
    src: url("../fonts/jxf/exta2.woff2") format("woff2");
    font-weight: normal; font-style: normal; font-display: swap;
    unicode-range: U+4400-4DBF;
  }
  /* ── Messages ── */
  .scroll{
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    overflow-anchor: none;
    padding: clamp(14px, 2.4vw, 28px) var(--side-pad) var(--composer-zone);
    display: flex; flex-direction: column;
    transition: padding-bottom .28s cubic-bezier(.2,.8,.2,1);
    /* 边缘渐隐:顶部一段、底部对齐 composer 上沿一段,消息滚到边缘自然淡出 */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--edge-fade-top), #000 calc(100% - var(--composer-zone)), transparent calc(100% - var(--composer-zone) + var(--edge-fade-tail)));
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--edge-fade-top), #000 calc(100% - var(--composer-zone)), transparent calc(100% - var(--composer-zone) + var(--edge-fade-tail)));
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  .scroll::-webkit-scrollbar{ width:0; height:0; }
  .v-spacer{
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    pointer-events: none;
  }

  .day{
    align-self: center;
    margin: 0;
    font-family: var(--font-en), var(--font-cn);
    font-size: clamp(12px, 1.6vw, 16px); color: var(--text-faint);
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
  }

  .row{ display:flex; position:relative; margin-top: clamp(14px, 2.2vw, 28px); }
  .day + .row{ margin-top: clamp(12px, 1.8vw, 20px); }
  .new-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: clamp(16px, 2.4vw, 24px);
    margin: clamp(16px, 2.4vw, 28px) 0 clamp(12px, 1.8vw, 20px);
    color: var(--text-faint);
    font-family: var(--font-en), var(--font-cn);
    font-size: clamp(12px, 1.6vw, 16px);
    line-height:1;
    letter-spacing:0;
  }
  .new-divider::before,
  .new-divider::after{
    content:"";
    width: clamp(94px, 24vw, 226px);
    height:1px;
    background: var(--hairline);
  }
  .row.grouped{ margin-top: clamp(4px, 0.8vw, 8px); }
  .row.human{ justify-content: flex-end; }
  .row.ai{ justify-content: flex-start; padding-left: calc(var(--avatar-size) + clamp(10px, 1.6vw, 16px)); }
  .row.ai::before{
    content:"";
    position:absolute;
    left:0;
    top: clamp(5px, 1vw, 9px);
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
    background-image: var(--avatar-default);
    background-size: cover;
    background-position: center;
    box-shadow: 0 12px 24px rgba(24,46,67,0.14);
  }

  .bubble{
    max-width: min(61vw, 506px);
    padding: clamp(8px, 1.05vw, 12px) clamp(13px, 1.65vw, 18px) clamp(8px, 1.1vw, 13px);
    border-radius: var(--bubble-radius);
    position: relative;
    font-family: "Jiuxinfeng90", var(--font-cn);
    font-size: clamp(14px, 1.55vw, 16px); line-height: 1.58;
    word-wrap: break-word;
    overflow-wrap: break-word;
    animation: pop .24s cubic-bezier(.2,.8,.2,1) both;
  }
  .row[data-vkey] .bubble,
  .row[data-vkey] .think-block{ animation: none; }
  @keyframes pop{ from{ transform: translateY(5px) scale(.99);} to{ transform:none;} }
  /* 新消息入场:轻微弹性,只对刚发/刚收到那条播一次(虚拟列表复用不重播,JS 控 enter class) */
  .row[data-vkey].enter-human .bubble{ transform-origin: bottom right; animation: enterHuman .44s cubic-bezier(.34,1.46,.5,1) both; }
  .row[data-vkey].enter-ai .bubble{ transform-origin: bottom left; animation: enterAi .44s cubic-bezier(.34,1.46,.5,1) both; }
  @keyframes enterHuman{ from{ transform: translate(6px, 9px) scale(.95); opacity:0; } 55%{ opacity:1; } to{ transform:none; opacity:1; } }
  @keyframes enterAi{ from{ transform: translate(-6px, 9px) scale(.95); opacity:0; } 55%{ opacity:1; } to{ transform:none; opacity:1; } }
  .row.ai .bubble{
    background: var(--bubble-ai-bg);
    color: var(--bubble-ai-fg);
    border: 0;
    box-shadow: 0 10px 28px rgba(78, 94, 108, 0.08);
  }
  .row.human .bubble{
    background: var(--bubble-human-bg);
    color: var(--bubble-human-fg);
    border: 0;
    box-shadow: 0 10px 28px rgba(78, 94, 108, 0.08);
  }
  /* 每段最后一条:外下角收一个小尖 */
  .row.ai.tail .bubble{ border-bottom-left-radius: 2px; }
  .row.human.tail .bubble{ border-bottom-right-radius: 2px; }

  .bubble .txt{ white-space: normal; }
  .bubble.has-att{ display:flex; flex-direction:column; gap:6px; }
  .bubble.att-only{ background:transparent !important; padding:0 !important; box-shadow:none !important; }
  .att-img-link{ display:block; line-height:0; border-radius:14px; overflow:hidden; width:min(64vw,260px); aspect-ratio:var(--att-ratio, 1.04); max-height:340px; background:rgba(125,128,135,.10); }
  .att-img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:14px; }
  .att-file{ display:flex; align-items:center; gap:10px; padding:9px 11px; min-width:170px; max-width:250px; text-decoration:none; color:inherit; background:rgba(125,128,135,.12); border-radius:12px; }
  .att-file-ic{ flex:0 0 auto; width:36px; height:36px; display:grid; place-items:center; border-radius:9px; background:rgba(125,128,135,.20); }
  .att-file-ic svg{ width:20px; height:20px; opacity:.85; }
  .att-file-meta{ display:flex; flex-direction:column; min-width:0; }
  .att-file-name{ font-size:13px; font-weight:600; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .att-file-size{ font-size:11px; opacity:.6; margin-top:2px; }
  .att-uploading{ opacity:.62; }
  .att-img-dead img{ display:none; }
  .att-img-dead::after{ content:"⚠ 图片已失效"; display:inline-block; padding:16px 20px; font-size:12px; color:var(--text-faint); background:rgba(125,128,135,.14); border-radius:14px; }
  .att-failed{ outline:1.5px solid #e3534d; outline-offset:1px; }
  .bubble .txt a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
  .bubble .txt code{
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em;
    background: rgba(120,100,80,0.14); padding: 1px 5px; border-radius: 5px;
  }
  .bubble .txt strong{ font-weight: 700; }
  .meta{
    display:inline; margin-left: clamp(10px, 1.4vw, 16px); white-space: nowrap;
    font-family: var(--font-en), var(--font-cn);
    font-size: clamp(11px, 1.3vw, 14px); color: var(--text-faint); user-select:none;
    vertical-align: baseline;
  }
  .meta .tick{ color: var(--tick); margin-left: 7px; letter-spacing:0; }
  .meta .tick.read{ color: var(--tick); opacity:.85; }
  .meta .state{ color: var(--accent); }
  .meta .fail{ color:#c0533f; cursor:pointer; }
  .row.human .meta,
  .row.ai .meta{ color: var(--text-faint); }
  .row.human .meta .tick,
  .row.ai .meta .tick{ color: var(--tick); }
  /* 发送中:小时钟,转完即送达 → 同位换成 ✓✓ */
  .meta .tick.clock{ color: var(--tick); }
  .meta .tick.clock svg{ width: 1.05em; height: 1.05em; vertical-align: -0.18em; }

  /* ── thinking ── collapsed follows AI bubble; expanded becomes a quiet reading section ── */
  .row.think{
    justify-content: flex-start;
    padding-left: calc(var(--avatar-size) + clamp(10px, 1.6vw, 16px));
    padding-right: 0;
    margin-top: clamp(7px, 1.2vw, 12px);
    margin-bottom: clamp(10px, 1.8vw, 18px);
  }
  .row.think.think-open{
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    margin-top: clamp(20px, 3.2vw, 34px);
    margin-bottom: clamp(18px, 2.8vw, 28px);
  }
  .think-block{
    width: min(61vw, 506px);
    max-width: min(61vw, 506px);
    color: var(--think-body);
    text-align: left;
    animation: pop .24s cubic-bezier(.2,.8,.2,1) both;
  }
  .think-block.open{
    width: 100%;
    max-width: min(100%, 760px);
    text-align: center;
  }
  .think-toggle{
    appearance: none;
    -webkit-appearance: none;
    width: auto;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
  }
  .think-block.open .think-toggle{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(9px, 1.8vw, 14px);
  }
  .think-toggle:hover .think-caption{ color: var(--accent); }
  .think-toggle:active{ transform: translateY(1px); }
  .think-rule{
    display: none;
    position: relative;
    width: 100%;
    height: 1px;
    color: var(--think-flourish);
  }
  .think-block.open .think-rule{ display: block; }
  .think-rule::before{
    content: "";
    position: absolute;
    left: clamp(22px, 6vw, 64px);
    right: clamp(22px, 6vw, 64px);
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--think-flourish) 16%, var(--think-flourish) 84%, transparent);
    opacity: .46;
  }
  .think-caption{
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    color: var(--think-label);
    font-family: var(--font-en), var(--font-cn);
    font-size: clamp(12px, 1.38vw, 14px);
    line-height: 1.1;
    letter-spacing: .08em;
    transition: color var(--motion-fast) var(--ease-soft);
  }
  .think-caption-star,
  .think-state{
    color: var(--think-flourish);
    font-size: 1.18em;
    line-height: 1;
    transform: translateY(-.02em);
  }
  .think-block.open .think-caption-star{ display: none; }
  .think-state::before{ content: "✧"; }
  .think-block.open .think-state::before{ content: "✦"; }
  .think-body[hidden]{ display: none !important; }
  .think-body{
    margin-top: clamp(12px, 2.2vw, 20px);
  }
  .think-text{
    width: min(82%, 520px);
    margin: 0 auto clamp(16px, 2.6vw, 24px);
    color: var(--think-body);
    font-family: var(--font-cn);
    font-size: clamp(12px, 1.25vw, 13.5px);
    line-height: 1.72;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
  }
  .think-starline{
    position: relative;
    width: 100%;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--think-flourish);
  }
  .think-starline::before,
  .think-starline::after{
    content: "";
    position: absolute;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--think-flourish) 15%, var(--think-flourish) 85%, transparent);
    opacity: .5;
  }
  .think-starline::before{ left: 0; right: calc(50% + 34px); }
  .think-starline::after{ left: calc(50% + 34px); right: 0; }
  .think-star{
    position: relative;
    z-index: 1;
    color: var(--think-flourish);
    display: grid;
    place-items: center;
  }
  .think-star svg{ width: 24px; height: 24px; display: block; }
  .think-copy{ min-width: 0; }
  .think-copy a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
  .think-copy code{
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: .9em;
    background: rgba(120,100,80,0.10);
    padding: 1px 5px;
    border-radius: 5px;
  }

  /* ── act ── the AI's action chip: a quiet "what it just did", optionally expand to see raw tool calls ──
     视觉与 thinking 同一族(--think-* 配色),但更小、更收,贴在头像缝隙里,不抢气泡 ── */
  .row.act{
    justify-content: flex-start;
    padding-left: calc(var(--avatar-size) + clamp(10px, 1.6vw, 16px));
    padding-right: clamp(12px, 4vw, 40px);
    margin-top: clamp(4px, 0.9vw, 9px);
    margin-bottom: clamp(4px, 0.9vw, 9px);
  }
  .act-block{
    max-width: min(80vw, 470px);
    animation: pop .24s cubic-bezier(.2,.8,.2,1) both;
  }
  .act-toggle{
    appearance: none; -webkit-appearance: none;
    margin: 0; padding: 2px 0; border: 0; background: transparent;
    color: inherit; font: inherit; cursor: pointer; text-align: left;
    max-width: 100%;
    display: inline-flex; align-items: baseline; gap: 7px;
  }
  .act-toggle.bare{ cursor: default; }
  .act-toggle:focus-visible{ outline: none; }
  .act-glyph{
    flex: none;
    color: var(--think-flourish);
    font-size: 1.04em; line-height: 1;
    transform: translateY(.06em);
  }
  .act-label{
    color: var(--think-label);
    font-family: var(--font-cn);                /* 统一宋体:--font-en 末尾的通用 serif 会先吃掉 CJK→iOS 回退黑体 */
    font-size: clamp(12px, 1.32vw, 13.5px);
    line-height: 1.46;
    letter-spacing: .02em;
  }
  /* 展开指示:沿用 thinking 的空心星 ✧(收起)→ 实心 ✦(展开),比"· 展开"文字更轻、不突兀 */
  .act-state{
    flex: none;
    color: var(--think-flourish);
    font-size: 1.1em;
    line-height: 1;
    transform: translateY(.02em);
    transition: color var(--motion-fast) var(--ease-soft);
  }
  .act-state::before{ content: "✧"; }
  .act-block.open .act-state::before{ content: "✦"; }
  .act-toggle:hover .act-state{ color: var(--accent); }
  .act-toggle:hover .act-label{ color: var(--think-body); }
  .act-toggle:active{ transform: translateY(1px); }
  .act-detail[hidden]{ display: none !important; }
  .act-detail{
    margin-top: 8px;
    border-radius: 12px;
    background: rgba(127,127,127,0.08);
    border: 1px solid var(--field-line);
    padding: clamp(9px, 1.6vw, 13px) clamp(11px, 1.8vw, 14px);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px; line-height: 1.6;
    color: var(--think-body);
    overflow-x: auto;
    animation: pop .2s cubic-bezier(.2,.8,.2,1) both;
  }
  .act-step + .act-step{
    margin-top: 7px; padding-top: 7px;
    border-top: 1px dashed var(--field-line);
  }
  .act-line{ white-space: pre-wrap; overflow-wrap: anywhere; }
  .act-k{ color: var(--text-faint); user-select: none; }
  .act-v{ color: var(--think-body); }