/* 长按菜单、回应表情、工具调用、附件预览。2026-10-02 从 index.html 拆出来；加载顺序见 index.html 的 <link>，前后顺序就是层叠顺序，别乱调 */
  /* ── 长按气泡 · 复制菜单 (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(40,50,72,.16);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    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 18px 40px rgba(64,76,112,.22);
    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:rgba(255,255,255,.86) !important; color:#2B2F36 !important; border:1px solid rgba(255,255,255,.6); border-radius:14px 14px 4px 14px; }
  .msg-menu-clone.clone-ai{ background:rgba(255,255,255,.78) !important; color:#2B2F36 !important; border:1px solid rgba(255,255,255,.6); border-radius:14px 14px 14px 4px; }
  .msg-menu-actions{
    position:fixed; display:flex; flex-direction:column; min-width:150px; padding:5px;
    border-radius:14px; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.5);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 12px 30px rgba(64,76,112,.18);
    -webkit-backdrop-filter:blur(20px) saturate(1.6); backdrop-filter:blur(20px) saturate(1.6);
    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:#2B2F36;
    font-family:var(--font-cn); font-size:14px; 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:rgba(255,255,255,.55); }
  .msg-act:active{ background:rgba(255,255,255,.55); transform:scale(.98); }
  .msg-act svg{ width:18px; height:18px; color:#5E6C86; flex:0 0 auto; }
  .msg-act.danger, .msg-act.danger svg{ color:#B2604D; }                       /* 删除(仅本地) */

  /* ── 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:78%; }
  .reaction{
    display:inline-flex; align-items:center; justify-content:center;
    font-size:15px; line-height:1; padding:4px 9px; border-radius:13px;
    background:rgba(255,255,255,.64); border:1px solid rgba(255,255,255,.4);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 4px 12px rgba(64,76,112,.10);
    -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5);
    -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; }
  }

  @media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
      animation: none !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }


/* ── 工具调用 & thinking ── */
.tool-call-bar {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-cn); font-size: 12px; color: var(--text-faint);
  padding: 4px 0; margin-bottom: 4px;
}
.tool-call-bar .tc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}
.tool-call-bar.running .tc-dot { animation: pulse-ring 1.2s ease infinite; }
/* 气泡顶上一条可折叠的头，下面一道细线跟正文分开 */
.thinking-block {
  margin: 0 0 8px; padding-bottom: 7px;
  border-bottom: 1px solid rgba(60,72,100,.12);
}
.thinking-toggle {
  display: flex; align-items: center; gap: 4px; width: 100%; text-align: left;
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 11px; color: var(--text-faint);
  transition: color .15s var(--ease-soft);
}
.thinking-toggle:hover { color: var(--text-dim); }
.thinking-block.open .think-chev { transform: rotate(180deg); }
.thinking-body {
  margin-top: 7px; padding-left: 10px;
  border-left: 1px solid rgba(60,72,100,.16);
  font-family: var(--font-cn); font-size: 12px; line-height: 1.68; color: var(--text-dim);
  white-space: pre-wrap; max-height: 200px; overflow-y: auto;
  scrollbar-width: none;
}
.thinking-body::-webkit-scrollbar { display: none; }
.thinking-body.hidden { display: none; }

/* ── 附件预览条 ── */
.attach-preview {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 4px 0 0;
  width: 100%;
  order: -1;
}
.attach-preview.hidden { display: none; }
.attach-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 12px rgba(64,76,112,.08);
  padding: 5px 8px; font-size: 12px; color: var(--text-dim);
  max-width: 180px; position: relative;
}
.attach-chip img {
  width: 36px; height: 36px; object-fit: cover;
  border-radius: 6px; flex-shrink: 0;
}
.attach-chip .chip-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attach-chip .chip-del {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-faint); color: #fff;
  border: 0; font-size: 10px; cursor: pointer;
  display: grid; place-items: center; flex-shrink: 0;
  line-height: 1;
}
