/* ═══════════════════════════════════════════════════════════════
   StarSea · 手机端交互特效（按键音/发送音/涟漪/光晕/气泡浮现/震动）
   2026-06-21 落地 · 淮淮定案：琴键 + 星河 + 涟漪+光晕+气泡浮现 + 震动开
   ── 隔离铁律 ──
   整个文件包在 @media(max-width:768px) 里，电脑端（≥769px）永远读不到一行。
   只「ADD」覆盖，不动 style.css 任何共用基础样式。一键摘除即回滚。
   配套：js/mobile-fx.js（桌面 matchMedia 直接 return 不执行）
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* 发送钮当容器，让涟漪/光晕能附上并向外溢出 */
  #chat-send-btn{position:relative;overflow:visible}

  /* 涟漪：从钮中心快速扩散淡出 */
  @keyframes sfx-ripple{from{opacity:.5;transform:scale(.25)}to{opacity:0;transform:scale(2.5)}}
  #chat-send-btn .sfx-rp{
    position:absolute;inset:0;border-radius:50%;
    background:var(--accent2,#9b8fd6);
    animation:sfx-ripple .72s ease-out forwards;pointer-events:none;z-index:1}

  /* 光晕：钮外圈一圈柔光呼吸 */
  @keyframes sfx-glow{from{opacity:.55;transform:scale(.5)}to{opacity:0;transform:scale(2.3)}}
  #chat-send-btn .sfx-gl{
    position:absolute;inset:-7px;border-radius:50%;
    background:radial-gradient(circle,var(--accent2,#9b8fd6),transparent 68%);
    animation:sfx-glow .92s ease-out forwards;pointer-events:none;z-index:0}

  /* 气泡浮现：我的新消息从下方浮上来 */
  @keyframes sfx-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
  .chat-msg.user.sfx-pop{animation:sfx-pop .5s cubic-bezier(.2,.9,.3,1.2)}
}