/* Extracted from web/index.html in the second conservative CSS split. */
/* Chat scroll, message bubbles, composer, emoji/sticker/context modals, message menu, reactions. */
  /* ── 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: calc(clamp(12px, 1.6vw, 16px) * var(--ui-font-scale)); 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: calc(clamp(12px, 1.6vw, 16px) * var(--ui-font-scale));
    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: var(--font-cn);
    font-size: calc(clamp(14px, 1.55vw, 16px) * var(--bubble-font-multiplier)); 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: calc(clamp(11px, 1.3vw, 14px) * var(--ui-font-scale)); color: var(--text-faint); user-select:none;
    vertical-align: baseline;
  }
  .meta .tick{ color: var(--tick); margin-left: 7px; letter-spacing:0; }
  .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); }
  /* 发送中:小时钟(Telegram 既视感),转完即送达 → 同位换成 ✓✓ */
  .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); }


  /* ── Composer ── */
  .composer{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    width: min(100vw, var(--ref-width));
    margin: 0 auto;
    display:flex; align-items:center; gap: clamp(6px, 1vw, 12px);
    background: transparent; border:none;
    padding: 0 var(--side-pad) clamp(10px, 1.6vw, 18px);
    padding-bottom: calc(clamp(10px, 1.6vw, 18px) + env(safe-area-inset-bottom));
    transform: translate3d(0, calc(-1 * var(--keyboard-offset)), 0);
    -webkit-transform: translate3d(0, calc(-1 * var(--keyboard-offset)), 0);
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
  }
  .floatbtn{
    flex:none; width: clamp(36px, 5vw, 48px); height: clamp(36px, 5vw, 48px); border-radius:50%;
    border: none; background: transparent;
    color: var(--accent); display:grid; place-items:center; cursor:pointer; padding:0;
    transition: transform .15s ease, color .2s ease;
  }
  .floatbtn:active{ transform: scale(.9); color: var(--text); }
  .floatbtn:hover{ color: var(--text); }
  .floatbtn svg{ width: clamp(20px, 2.8vw, 28px); height: clamp(20px, 2.8vw, 28px); display:block; }
  .floatbtn.send{
    background: var(--send-bg);
    color:#ffffff;
    box-shadow: 0 16px 32px rgba(41, 60, 78, 0.22);
  }
  .floatbtn.send:hover{ color:#ffffff; }
  .floatbtn.send:active{ transform: scale(.97); }      /* 发送键按压:轻收 3%(比通用 .floatbtn 的 .9 克制) */
  @keyframes send-go{ from{ transform: scale(.96); } to{ transform: scale(1); } }
  .floatbtn.send.send-go{ animation: send-go .22s cubic-bezier(.2,.8,.2,1); }
  @media (prefers-reduced-motion: reduce){ .floatbtn.send.send-go{ animation: none; } }
  .composer .field{
    flex:1 1 auto; display:flex; align-items:center; gap: clamp(4px, 0.8vw, 10px);
    background: var(--field-bg);
    border: 1px solid var(--field-line);
    border-radius: 999px;
    padding: clamp(4px, 0.6vw, 8px) clamp(8px, 1.2vw, 14px) clamp(4px, 0.6vw, 8px) clamp(10px, 1.5vw, 16px);
    min-height: clamp(42px, 5.5vw, 56px);
    box-shadow: var(--shadow);
    transition: border-color .2s ease;
  }
  .composer .field:focus-within{ border-color: var(--field-line); }
  .composer textarea:focus,
  .composer textarea:focus-visible,
  .composer button:focus-visible{
    outline: none;
  }
  textarea{
    flex:1 1 auto; border:none; outline:none; resize:none; background:transparent;
    color: var(--text); font-family: var(--font-en), var(--font-cn); font-size: calc(clamp(15px, 2vw, 18px) * var(--ui-font-scale)); line-height:1.35;
    max-height: 110px; padding: 6px 0; margin:0;
  }
  textarea::placeholder{ color: var(--text-faint); opacity: 1; }
  .emojibtn{
    flex:none; width: clamp(28px, 3.8vw, 38px); height: clamp(28px, 3.8vw, 38px); border:none; background:transparent;
    color: var(--accent); display:grid; place-items:center; cursor:pointer; padding:0;
    transition: transform .15s ease, color .2s ease;
  }
  .emojibtn:active{ transform: scale(.85); color: var(--text); }
  .emojibtn:hover{ color: var(--text); }
  .emojibtn svg{ width: clamp(22px, 3vw, 30px); height: clamp(22px, 3vw, 30px); display:block; }
  /* ── 回到最新 · 翻历史时来新消息,底部悬浮一枚安静的半透明胶囊 ── */
  .newmsg-pill{
    position: fixed; left: 50%; z-index: 90;
    bottom: calc(clamp(78px, 13vw, 96px) + env(safe-area-inset-bottom));
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px 7px 11px; border: none; border-radius: 999px;
    background: rgba(34, 46, 60, .52); color: #fff;
    font-family: var(--font-en), var(--font-cn); font-size: 13px; line-height: 1; letter-spacing: .01em;
    -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
    box-shadow: 0 8px 24px rgba(18, 28, 40, .26);
    cursor: pointer; opacity: 0; pointer-events: none;
    transform: translate3d(-50%, calc(8px - var(--keyboard-offset, 0px)), 0);
    transition: opacity .2s ease, transform .28s cubic-bezier(.2,.8,.2,1);
  }
  .newmsg-pill.show{ opacity: 1; pointer-events: auto; transform: translate3d(-50%, calc(-1 * var(--keyboard-offset, 0px)), 0); }
  .newmsg-pill svg{ width: 15px; height: 15px; flex: none; }
  @media (prefers-reduced-motion: reduce){ .newmsg-pill{ transition: opacity .2s ease; } }


  /* EVE-style chat extras: mounted sticker libraries, remarks, context preview */
  .remark-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .remark-grid .connector-field{ margin:0; }
  .chat-context-actions{ display:grid; grid-template-columns:1fr; margin-top:12px; }
  .soft-tool-btn{
    border:0;
    border-radius:12px;
    padding:10px 12px;
    background:var(--seg-track);
    color:var(--text-soft);
    font:inherit;
    cursor:pointer;
  }
  .soft-tool-btn:active{ transform:scale(.99); }
  .emoji-panel{
    position:fixed;
    left:50%;
    bottom:calc(var(--composer-zone) + 8px);
    width:min(460px, calc(100vw - 26px));
    max-height:min(46vh, 360px);
    z-index:130;
    transform:translate(-50%, 12px);
    opacity:0;
    pointer-events:none;
    border:1px solid var(--card-line);
    border-radius:20px;
    background:var(--card-bg);
    box-shadow:var(--shadow);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    overflow:hidden;
    transition:opacity .2s ease, transform .24s var(--ease-soft);
  }
  .emoji-panel.open{ opacity:1; pointer-events:auto; transform:translate(-50%, 0); }
  .emoji-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border-bottom:1px solid var(--field-line);
  }
  .emoji-tabs{ display:flex; gap:6px; min-width:0; overflow-x:auto; scrollbar-width:none; }
  .emoji-tabs::-webkit-scrollbar{ display:none; }
  .emoji-tab{
    border:0;
    border-radius:999px;
    padding:7px 11px;
    background:transparent;
    color:var(--text-soft);
    font-size:12px;
    white-space:nowrap;
    cursor:pointer;
  }
  .emoji-tab.active{ background:var(--seg-thumb); color:var(--text); box-shadow:var(--seg-thumb-shadow); }
  .emoji-manage{
    width:30px;
    height:30px;
    border:0;
    border-radius:50%;
    background:var(--seg-track);
    color:var(--text-soft);
    display:grid;
    place-items:center;
    cursor:pointer;
    flex:0 0 auto;
  }
  .emoji-manage svg{ width:16px; height:16px; }
  .emoji-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(48px, 1fr));
    gap:8px;
    padding:12px;
    overflow:auto;
    max-height:calc(min(46vh, 360px) - 52px);
  }
  .emoji-choice,
  .sticker-choice{
    border:1px solid var(--field-line);
    border-radius:14px;
    background:rgba(255,255,255,.32);
    color:var(--text);
    min-height:48px;
    display:grid;
    place-items:center;
    cursor:pointer;
    overflow:hidden;
  }
  .emoji-choice{ font-size:24px; }
  .sticker-choice img{ width:100%; height:100%; min-height:52px; object-fit:cover; display:block; }
  .emoji-empty{ grid-column:1 / -1; color:var(--text-faint); text-align:center; padding:24px 8px; font-size:13px; }
  .chat-modal{
    position:fixed;
    inset:0;
    z-index:270;
    display:grid;
    place-items:end center;
    padding:18px;
    background:rgba(22,32,42,.22);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }
  .chat-modal.open{ opacity:1; pointer-events:auto; }
  .chat-modal-sheet{
    width:min(620px,100%);
    max-height:min(82vh,720px);
    overflow:auto;
    border:1px solid var(--card-line);
    border-radius:20px;
    background:var(--card-bg);
    box-shadow:var(--shadow);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    padding:16px;
  }
  .chat-modal-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
  .chat-modal-title{ font-size:17px; color:var(--text); font-weight:520; }
  .chat-modal-close{
    width:32px; height:32px; border:0; border-radius:50%;
    background:var(--seg-track); color:var(--text-soft); cursor:pointer;
  }
  .sticker-form{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
  .sticker-form input, .sticker-form select{
    width:100%;
    border:1px solid var(--field-line);
    border-radius:12px;
    background:var(--field-bg);
    color:var(--text);
    padding:10px;
    font:inherit;
  }
  .sticker-form .wide{ grid-column:1 / -1; }
  .sticker-list{ display:flex; flex-direction:column; gap:8px; }
  .sticker-lib-row{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:10px;
    padding:10px;
    border:1px solid var(--field-line);
    border-radius:14px;
    background:rgba(255,255,255,.26);
  }
  .sticker-lib-row input{ width:18px; height:18px; accent-color:var(--accent); }
  .sticker-lib-row b{ display:block; color:var(--text); font-size:13px; }
  .sticker-lib-row small{ color:var(--text-faint); font-size:11px; }
  .context-list{ display:flex; flex-direction:column; gap:8px; }
  .context-item{
    border:1px solid var(--field-line);
    border-radius:14px;
    padding:10px 12px;
    background:rgba(255,255,255,.28);
  }
  .context-item b{ color:var(--text-soft); font-size:12px; }
  .context-item p{ margin:4px 0 0; color:var(--text); font-size:13px; line-height:1.55; white-space:pre-wrap; }

  /* ── 长按气泡 · 复制菜单 (TG 式抬起+遮罩) ── */
  /* 长按由我们接管 → 彻底屏蔽聊天区(#scroll)的系统选择/放大镜/callout,否则和我们的菜单打架。
     用 !important 压过一切(含 iOS 误报 hover/pointer 的情况)。输入框在 #scroll 外,单独保持可选可编辑;
     气泡里要复制文字走长按菜单的 Copy。 */
  #scroll, #scroll *{
    -webkit-user-select:none !important; user-select:none !important;
    -webkit-touch-callout:none !important;
  }
  textarea, input, .composer, .composer *{
    -webkit-user-select:text !important; user-select:text !important;
    -webkit-touch-callout:default !important;
  }

  .msg-menu{ position:fixed; inset:0; z-index:250; opacity:0; pointer-events:none; }
  .msg-menu.open{ opacity:1; pointer-events:auto; }
  .msg-menu-scrim{
    position:absolute; inset:0;
    background:rgba(10,16,24,.30);
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    opacity:0; transition:opacity .26s var(--ease-soft);
  }
  .msg-menu.open .msg-menu-scrim{ opacity:1; }
  .msg-menu-clone{
    position:fixed !important; margin:0 !important; animation:none !important;
    pointer-events:none; box-sizing:border-box;
    box-shadow:0 22px 50px rgba(18,34,52,.30);
    transform:scale(1); transition:transform .26s var(--ease-soft); will-change:transform;
  }
  .msg-menu.open .msg-menu-clone{ transform:scale(1.02); }
  .msg-menu-clone.clone-human{ background:var(--bubble-human-bg) !important; color:var(--bubble-human-fg) !important; }
  .msg-menu-clone.clone-ai{ background:var(--bubble-ai-bg) !important; color:var(--bubble-ai-fg) !important; }
  .msg-menu-actions{
    position:fixed; display:flex; flex-direction:column; min-width:150px; padding:5px;
    border-radius:16px; background:var(--composer-bg); border:1px solid var(--hairline);
    box-shadow:var(--shadow);
    -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4);
    opacity:0; transform:translateY(8px) scale(.96); transform-origin:top center;
    transition:opacity .2s var(--ease-soft) .05s, transform .26s var(--ease-soft) .05s;
  }
  .msg-menu.open .msg-menu-actions{ opacity:1; transform:none; }
  .msg-act{
    appearance:none; -webkit-appearance:none; border:0; background:transparent; color:var(--text);
    font-family:var(--font-en), var(--font-cn); font-size:15px; display:flex; align-items:center; gap:11px;
    padding:10px 14px; border-radius:12px; cursor:pointer; text-align:left; width:100%;
    transition:background var(--motion-fast);
  }
  .msg-act:hover{ background:var(--row-press); }
  .msg-act:active{ background:var(--row-press); transform:scale(.98); }
  .msg-act svg{ width:18px; height:18px; opacity:.82; flex:0 0 auto; }
  .msg-act.danger{ color:#e05a4d; }                       /* 删除(仅本地) */

  /* ── reaction chips (AI poke) ── */
  .row.has-reactions{ flex-direction:column; gap:5px; }
  .row.human.has-reactions{ align-items:flex-end; }
  .row.ai.has-reactions{ align-items:flex-start; }
  .reactions{ display:flex; flex-wrap:wrap; gap:5px; max-width:min(61vw,506px); }
  .reaction{
    display:inline-flex; align-items:center; justify-content:center;
    font-size:15px; line-height:1; padding:4px 9px; border-radius:13px;
    background:var(--bubble-ai-bg); border:1px solid var(--hairline);
    box-shadow:0 4px 12px rgba(78,94,108,.12);
    -webkit-user-select:none; user-select:none;
  }
  .reaction.pop-in{ animation:reactionPop .52s cubic-bezier(.34,1.56,.5,1) both; }
  @keyframes reactionPop{
    0%{ transform:scale(0) rotate(-16deg); opacity:0; }
    55%{ transform:scale(1.22) rotate(5deg); opacity:1; }
    100%{ transform:none; opacity:1; }
  }