/* ============================================================
   摸鱼大厅 · 样式表
   美学方向：深海霓虹（Abyssal Neon）
   —— 深海生物荧光 × 街机霓虹管：墨蓝深渊底、荧光青主色、电光粉点缀，
      叠网格纹理与暗角做景深，靠辉光而非色块堆叠来制造氛围。

   组织顺序：
   ① 设计变量  ② 全局底与景深  ③ 顶栏  ④ 三栏骨架
   ⑤ 聊天区（含消息左右分栏）  ⑥ 表情包面板  ⑦ 浮层与特效  ⑧ 响应式
   ============================================================ */

/* ---------- ① 设计变量 ---------- */
:root {
  /* 墨蓝阶：整体提亮一档，避免手机 QQ 暗色模式下文字糊成一片 */
  --ink-900: #070b14;
  --ink-800: #0d1422;
  --ink-700: #132033;
  --ink-600: #1a2a42;

  --line: rgba(130, 205, 255, 0.18);
  --line-strong: rgba(130, 205, 255, 0.34);

  /* 文字对比度整体提升，弱色不再过淡 */
  --text: #e8f1fa;
  --text-dim: #8ba3c7;
  --text-faint: #5e7396;

  /* 荧光色板：降低一点饱和度，减少 QQ/TBS 内核的色带与发光锯齿 */
  --cyan: #36eadb;
  --cyan-deep: #15b8ab;
  --pink: #ff6aa8;
  --amber: #ffc46d;
  --violet: #b388ff;
  --online: #42e897;

  --radius: 14px;
  --radius-sm: 9px;

  /* 字体：拉丁文用 Bahnschrift（Win 自带，窄体有机械感），中文回落到有性格的国产字体 */
  --font-display: "Bahnschrift", "DIN Alternate", "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --font-mono: "Cascadia Mono", "JetBrains Mono", "Consolas", "SF Mono", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: var(--font-body);
  background: var(--ink-900);
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  /* 移动端三件套：禁止 iOS 横屏自动放大字号、去掉点击时的灰色高亮闪屏、掐掉整页下拉回弹 */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* ---------- ② 全局底与景深 ---------- */
#fishView {
  position: relative;
  /* 100vh 在移动端包含地址栏高度，会让输入框被挡在屏幕外；
     100dvh 取"动态可视高度"，地址栏收起/弹出时自动跟随。
     --app-height 由 index.html 里的 JS 根据实际可视高度计算，手机 QQ 兜底用 */
  height: 100vh;
  height: 100dvh;
  height: var(--app-height, 100dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 五层背景叠出深海：暗角 → 左上青光 → 右上紫气 → 底部粉霞 → 底色 */
  background:
    radial-gradient(ellipse 105% 85% at 50% 0%, transparent 38%, rgba(0, 0, 0, 0.6) 100%),
    radial-gradient(ellipse 58% 46% at 10% -10%, rgba(46, 230, 214, 0.14), transparent 62%),
    radial-gradient(ellipse 52% 44% at 94% -6%, rgba(160, 107, 255, 0.16), transparent 62%),
    radial-gradient(ellipse 72% 52% at 50% 110%, rgba(255, 77, 151, 0.1), transparent 66%),
    var(--ink-900);
}

/* 网格纹理：向四周淡出，像深海探测器的扫描线，同时给平面加一层空间感 */
#fishView::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(130, 205, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 205, 255, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 92% 72% at 50% 42%, #000 18%, transparent 80%);
  mask-image: radial-gradient(ellipse 92% 72% at 50% 42%, #000 18%, transparent 80%);
}

/* 颗粒噪点：压掉渐变的塑料感，让暗部有质感（务必在内容层之下） */
#fishView::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* QQ/TBS 等老内核可能不支持 mask-image / mix-blend-mode，没遮罩时网格会铺满比较乱，
   用 @supports 给这些浏览器一个更保守的纯色渐变背景兜底 */
@supports not (mask-image: radial-gradient(ellipse at center, #000, transparent)) {
  #fishView::before { display: none; }
}
@supports not (mix-blend-mode: overlay) {
  #fishView::after { display: none; }
}

/* --- 背景漂浮粒子 --- */
.bg-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bg-particles .fish-float {
  position: absolute;
  font-size: 20px;
  opacity: 0.14;
  filter: drop-shadow(0 0 6px rgba(46, 230, 214, 0.5));
  animation: floatUp linear infinite;
}
@keyframes floatUp {
  0%   { transform: translateY(110vh) translateX(0) rotate(0deg); }
  100% { transform: translateY(-10vh) translateX(46px) rotate(25deg); }
}

/* ---------- ③ 顶栏 ---------- */
.fish-topbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 22px;
  background: linear-gradient(180deg, rgba(13, 22, 38, 0.95), rgba(8, 14, 26, 0.92));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

/* 老内核（如部分 QQ/TBS）不支持 backdrop-filter 时，直接给一个足够不透明的背景，
   避免内容透出导致顶栏文字看不清 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .fish-topbar { background: var(--ink-800); }
}
/* 顶栏底缘的霓虹光带：整站的"灯管" */
.fish-topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--violet), var(--pink), transparent);
  opacity: 0.7;
  box-shadow: 0 0 14px rgba(46, 230, 214, 0.5);
}

/* 标题区可点：点它 = 换个名号（手机端是改名的唯一入口，桌面端也有 ✏️ 按钮兜底） */
.fish-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 8px;
  margin-left: -8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.16s;
}
.fish-brand:hover { background: rgba(120, 200, 255, 0.07); }
.fish-brand:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.fish-logo {
  font-size: 24px;
  filter: drop-shadow(0 0 10px rgba(46, 230, 214, 0.75));
  animation: fishWiggle 2.4s ease-in-out infinite;
}
@keyframes fishWiggle {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50%      { transform: rotate(8deg) scale(1.1); }
}

/* 站名：窄体字 + 大字距 + 双色辉光，做成霓虹招牌的感觉 */
.fish-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 3px;
  background: linear-gradient(96deg, var(--cyan) 0%, #8fe9ff 42%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--cyan); /* 兜底：不支持 background-clip:text 的内核显示品牌青色 */
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(46, 230, 214, 0.45));
}
.fish-tag {
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 1px;
  padding-left: 11px;
  border-left: 1px solid var(--line-strong);
}

.fish-stats { display: flex; gap: 20px; margin-left: auto; font-size: 12px; color: var(--text-dim); }
.fish-stats .stat { display: inline-flex; align-items: center; }
/* 数字用等宽字体 + 荧光色，跳动时不会左右抖动 */
.fish-stats em {
  font-family: var(--font-mono);
  font-style: normal;
  color: var(--cyan);
  font-weight: 700;
  font-size: 15px;
  margin: 0 4px 0 0;
  text-shadow: 0 0 10px rgba(46, 230, 214, 0.55);
}

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; }
.dot--online { background: var(--online); box-shadow: 0 0 9px var(--online); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.fish-actions { display: flex; gap: 9px; }

/* --- 通用按钮：底部压暗 + 顶部高光，做出实体键帽的厚度 --- */
.btn {
  position: relative;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, var(--ink-600), var(--ink-700));
  color: var(--text);
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.5px;
  padding: 7px 15px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.18s, color 0.18s, transform 0.14s, box-shadow 0.18s;
}
.btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -6px rgba(46, 230, 214, 0.55);
}
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled { cursor: default; }
/* touch-action: manipulation 去掉移动端"双击缩放"的 300ms 延迟，点按跟手 */
.btn,
.tab,
.game-card,
.avatar-cell,
.chat-input { touch-action: manipulation; }

.btn--ghost { background: transparent; }
.btn--send {
  background: linear-gradient(180deg, var(--cyan), var(--cyan-deep));
  color: #032521;
  border-color: transparent;
  font-weight: 700;
}
.btn--send:hover { color: #032521; box-shadow: 0 0 24px rgba(46, 230, 214, 0.5); }
.btn--icon { padding: 7px 11px; font-size: 16px; line-height: 1; }
.btn--sm { padding: 5px 11px; font-size: 11px; }

/* 面板展开时按钮点亮，提示"当前处于表情选择状态" */
.btn--icon.is-on {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: inset 0 0 14px rgba(46, 230, 214, 0.18), 0 0 14px rgba(46, 230, 214, 0.35);
}

/* --- 小屏专用元素：桌面端一律隐藏，由 ⑧ 响应式段落放开 --- */
.btn--mobile-only { display: none; }
.drawer-close,
.drawer-mask { display: none; }

/* 图标与文字拆成两个 span，小屏只留图标、丢掉文字，顶栏才塞得下 4 个按钮 */
.btn-ico { font-size: 14px; }

/* 在线人数角标（挂在「👥 成员」按钮上） */
.badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--cyan);
  background: rgba(46, 230, 214, 0.12);
  border: 1px solid rgba(46, 230, 214, 0.3);
  border-radius: 9px;
  padding: 1px 6px;
  margin-left: 5px;
}

/* 红点：对战抽屉里有未处理邀请时亮起。absolute 定位到按钮右上角 */
.dot-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 10px var(--pink);
  animation: pulse 1.6s infinite;
}
/* 红点要露到按钮外沿之外，解掉 .btn 的 overflow: hidden 裁剪 */
#btnGame { overflow: visible; }

/* 面板标题栏里的小动作按钮（如「＋ 发起」），跟胶囊标签同语言 */
.panel-action {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--cyan);
  background: rgba(46, 230, 214, 0.1);
  border: 1px solid rgba(46, 230, 214, 0.32);
  border-radius: 20px;
  padding: 3px 11px;
  cursor: pointer;
}

/* ---------- ④ 三栏骨架 ---------- */
.fish-body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  gap: 14px;
  padding: 14px;
  overflow: hidden;
  min-height: 0;
}

/* 面板：顶部一道极淡高光模拟灯管照到边沿，底部投影把面板"抬"离背景 */
.panel {
  width: 224px;
  background: linear-gradient(180deg, rgba(12, 21, 36, 0.78), rgba(7, 13, 24, 0.7));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(160, 220, 255, 0.06), 0 22px 44px -28px rgba(0, 0, 0, 0.95);
}
.panel--game { width: 244px; }

.panel-title {
  padding: 13px 15px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 2px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.panel-title span {
  font-family: var(--font-mono);
  background: rgba(46, 230, 214, 0.1);
  color: var(--cyan);
  border: 1px solid rgba(46, 230, 214, 0.25);
  border-radius: 10px;
  padding: 0 8px;
  font-size: 11px;
}

.panel-foot { padding: 11px 15px; border-top: 1px solid var(--line); }
.hint-text { font-size: 11px; color: var(--text-faint); line-height: 1.65; }

/* --- 在线成员列表 --- */
.user-list { flex: 1; overflow-y: auto; padding: 8px; }

/* --hue 由 JS 按 uid 派生，让每个人的头像/名字自带专属色 */
.user-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  border: 1px solid transparent;
  animation: msgIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: background 0.15s, border-color 0.15s;
}
.user-item:hover { background: rgba(120, 200, 255, 0.05); border-color: var(--line); }
.user-item.is-me {
  background: linear-gradient(90deg, hsla(var(--hue, 174), 90%, 60%, 0.14), transparent);
  border-color: hsla(var(--hue, 174), 90%, 60%, 0.28);
}

.user-avatar {
  width: 29px; height: 29px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  font-size: 15px;
  flex-shrink: 0;
  background: hsla(var(--hue, 174), 60%, 50%, 0.13);
  border: 1px solid hsla(var(--hue, 174), 80%, 62%, 0.35);
}
.user-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-me-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--cyan);
  border: 1px solid rgba(46, 230, 214, 0.4);
  border-radius: 5px;
  padding: 0 5px;
}

/* 人机分组的分隔标题：弱化成一行小字，右侧拉一条渐隐细线收口 */
.user-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 4px;
  padding: 0 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text-faint);
}
.user-group::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* 人机整行做视觉降级，别和真人抢注意力 */
.user-item.is-bot { opacity: 0.72; }
.user-item.is-bot:hover { opacity: 1; }
.user-item.is-bot .user-avatar { filter: saturate(0.45); }

/* AI 标签：紫罗兰色，与「我」的青色标签区分开 */
.bot-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--violet);
  border: 1px solid rgba(160, 107, 255, 0.45);
  border-radius: 5px;
  padding: 0 5px;
  flex-shrink: 0;
  align-self: center;
}

/* ---------- ⑤ 聊天区 ---------- */
.chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(12, 21, 36, 0.78), rgba(7, 13, 24, 0.7));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(160, 220, 255, 0.06), 0 22px 44px -28px rgba(0, 0, 0, 0.95);
}

.chat-stream {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 10px;
  scroll-behavior: smooth;
  /* 滚到底/顶不再带动整页橡皮筋；iOS 上启用原生惯性滚动 */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* 冷启动空状态：等第一条消息进来之前，别留一片死黑 */
.chat-stream:empty::after {
  content: "大厅还很安静……\n说点什么，或者按 🎉 先撒个花";
  white-space: pre-line;
  display: block;
  text-align: center;
  padding: 64px 20px;
  font-size: 13px;
  line-height: 2.1;
  color: var(--text-faint);
  letter-spacing: 1px;
}

/* 消息行：默认左对齐（别人的发言） */
.msg {
  display: flex;
  gap: 12px;
  margin-bottom: 6px;
  padding: 6px 8px;
  border-radius: 12px;
  animation: msgIn 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: background 0.18s;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ↓↓↓ 核心：自己的发言整行镜像到右侧 ↓↓↓ */
.msg.is-me { flex-direction: row-reverse; }
.msg.is-me .msg-head { justify-content: flex-end; }
/* .msg-text 是 inline-block，靠父级 text-align 把它推到右边 */
.msg.is-me .msg-body { text-align: right; }

.msg-avatar {
  width: 36px; height: 36px;
  border-radius: 11px;
  display: grid; place-items: center;
  font-size: 17px;
  flex-shrink: 0;
  background: hsla(var(--hue, 174), 55%, 50%, 0.12);
  border: 1px solid hsla(var(--hue, 174), 80%, 62%, 0.32);
  box-shadow: inset 0 0 12px hsla(var(--hue, 174), 80%, 60%, 0.12);
}
.msg-body { flex: 1; min-width: 0; }
.msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.msg-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: hsl(var(--hue, 174), 85%, 68%);
}
/* 时间用等宽小字，视觉上退到背景里去 */
.msg-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.5px;
}

/* 人机发言整体退一档灰度，一眼能和真人区分开 */
.msg.is-bot .msg-avatar { filter: saturate(0.4); }
.msg.is-bot .msg-name { opacity: 0.75; }
.msg.is-bot .msg-text { color: var(--text-dim); }

/* 气泡：左上角收小圆角，暗示"从左侧头像发出"
   自己的气泡在 .msg.is-me 里改成右上角收角，镜像对称 */
.msg-text {
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--text);
  word-break: break-word;
  background: linear-gradient(180deg, rgba(24, 38, 63, 0.85), rgba(17, 29, 49, 0.85));
  border: 1px solid var(--line);
  border-radius: 3px 14px 14px 14px;
  padding: 9px 13px;
  display: inline-block;
  max-width: 76%;
  text-align: left; /* 覆盖父级 text-align:right，保证气泡内文字仍左起 */
}
.msg.is-me .msg-text {
  border-radius: 14px 3px 14px 14px;
  background: linear-gradient(180deg, rgba(46, 230, 214, 0.16), rgba(46, 230, 214, 0.07));
  border-color: rgba(46, 230, 214, 0.34);
  box-shadow: 0 0 20px -6px rgba(46, 230, 214, 0.45);
}

/* 悬停时整行微微亮起，帮助在密集消息里定位当前行 */
.msg:not(.msg--system):hover { background: rgba(120, 200, 255, 0.045); }

/* 系统消息：居中、虚线胶囊、弱化存在感 */
.msg--system { justify-content: center; margin-bottom: 10px; }
.msg--system .msg-text {
  background: transparent;
  color: var(--text-faint);
  font-size: 11.5px;
  padding: 3px 14px;
  border-radius: 12px;
  border: 1px dashed var(--line);
  max-width: 90%;
  text-align: center;
  box-shadow: none;
}

/* 消息里的图片表情包 */
.msg-sticker {
  display: block;
  max-width: 148px;
  max-height: 148px;
  border-radius: 14px;
  background: var(--ink-700);
  border: 1px solid var(--line);
  object-fit: contain;
}
/* 自己的贴图靠右：.msg-sticker 是 block，给个自动左外边距 */
.msg.is-me .msg-sticker { margin-left: auto; border-color: rgba(46, 230, 214, 0.4); }

/* --- 连击提示 --- */
.combo-tip {
  position: absolute;
  right: 24px; top: 18px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--amber);
  text-shadow: 0 0 18px rgba(255, 180, 84, 0.85), 0 0 40px rgba(255, 77, 151, 0.55);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.5);
}
.combo-tip.show { animation: comboPop 0.9s ease-out; }
@keyframes comboPop {
  0%   { opacity: 0; transform: scale(0.4) rotate(-12deg); }
  35%  { opacity: 1; transform: scale(1.28) rotate(6deg); }
  100% { opacity: 0; transform: scale(1) rotate(0deg); }
}

/* --- 输入栏：做成一条"控制台"，聚焦时整条点亮 --- */
.chat-input-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 15px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(4, 7, 14, 0.3), rgba(4, 7, 14, 0.6));
  transition: box-shadow 0.25s;
}
/* 输入框获得焦点时，整条输入栏底部泛光，视线自然落回来 */
.chat-input-bar:focus-within { box-shadow: inset 0 1px 0 rgba(46, 230, 214, 0.35); }

.me-avatar {
  width: 36px; height: 36px;
  border-radius: 11px;
  background: linear-gradient(180deg, var(--ink-600), var(--ink-700));
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  font-size: 17px;
  flex-shrink: 0;
}

.chat-input {
  flex: 1;
  background: rgba(4, 7, 14, 0.75);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 15px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.chat-input:focus {
  border-color: var(--cyan);
  background: rgba(4, 7, 14, 0.95);
  box-shadow: 0 0 0 3px rgba(46, 230, 214, 0.12), inset 0 0 18px rgba(46, 230, 214, 0.06);
}
.chat-input::placeholder { color: var(--text-faint); }

/* ---------- ⑥ 表情包面板 ---------- */
.sticker-panel {
  display: none;
  flex-direction: column;
  gap: 9px;
  max-height: 236px;
  padding: 12px 16px 13px;
  border-top: 1px solid var(--line);
  background: rgba(4, 7, 14, 0.72);
}
.sticker-panel.show { display: flex; animation: panelUp 0.24s cubic-bezier(0.34, 1.4, 0.64, 1); }
@keyframes panelUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sticker-tabs { display: flex; gap: 7px; flex-wrap: wrap; }
/* 表情面板与头像选择器共用同一套胶囊标签样式，保证视觉语言统一 */
.sticker-tabs .tab,
.avatar-tabs .tab {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 0.6px;
  padding: 4px 13px;
  border-radius: 20px;
  border: 1px solid var(--line);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.16s;
}
.sticker-tabs .tab:hover,
.avatar-tabs .tab:hover { color: var(--text); border-color: var(--line-strong); }
.sticker-tabs .tab.is-active,
.avatar-tabs .tab.is-active {
  color: #032521;
  font-weight: 700;
  background: linear-gradient(180deg, var(--cyan), var(--cyan-deep));
  border-color: transparent;
  box-shadow: 0 0 18px -4px rgba(46, 230, 214, 0.7);
}

/* 表情网格：滚动区，容纳任意数量的表情 */
.sticker-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 6px;
  align-content: start;
  min-height: 62px;
  padding-right: 2px;
}

.sticker-grid .sticker {
  display: grid;
  place-items: center;
  height: 46px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  border: 1px solid transparent;
  transition: background 0.15s, transform 0.15s, border-color 0.15s;
}
.sticker-grid .sticker:hover {
  background: rgba(46, 230, 214, 0.1);
  border-color: rgba(46, 230, 214, 0.35);
  transform: scale(1.15) rotate(6deg);
}
/* 图片表情：槽位尺寸更大，方便看清图案 */
.sticker-grid .sticker--img { padding: 4px; }
.sticker-grid .sticker--img img { width: 100%; height: 100%; object-fit: contain; }

/* 空状态提示（比如"我的表情"还没上传过图） */
.sticker-grid .sticker-empty {
  grid-column: 1 / -1;
  color: var(--text-faint);
  font-size: 11.5px;
  text-align: center;
  padding: 20px 6px;
  line-height: 1.9;
}

.sticker-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px dashed var(--line);
  padding-top: 9px;
}

/* ---------- ⑦ 浮层与特效 ---------- */

/* --- 弹窗 --- */
.modal {
  position: fixed; inset: 0;
  background: rgba(2, 4, 9, 0.78);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  display: none; place-items: center;
  z-index: 1000;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .modal { background: rgba(2, 4, 9, 0.95); }
}
.modal.show { display: grid; animation: fadeIn 0.2s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  position: relative;
  /* min()：桌面上仍是 386px 定宽，窄屏（<418px 的手机）自动收成"屏幕宽 - 32px"，不再横向溢出 */
  width: min(386px, calc(100vw - 32px));
  background: linear-gradient(180deg, var(--ink-700), var(--ink-800));
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 27px;
  text-align: center;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(160, 220, 255, 0.08);
  animation: modalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* 弹窗顶部一道霓虹条，跟顶栏呼应 */
.modal-card::before {
  content: "";
  position: absolute;
  left: 26px; right: 26px; top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--pink), transparent);
  opacity: 0.85;
}
.modal-card--wide { width: min(530px, calc(100vw - 32px)); }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(24px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-card h3 {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 2px;
  margin-bottom: 7px;
}
.modal-desc { font-size: 12px; color: var(--text-dim); margin-bottom: 19px; }

.modal-avatar {
  width: 68px; height: 68px; margin: 0 auto 17px;
  border-radius: 20px;
  font-size: 33px;
  display: grid; place-items: center;
  background: rgba(46, 230, 214, 0.08);
  border: 1px solid rgba(46, 230, 214, 0.3);
  box-shadow: inset 0 0 24px rgba(46, 230, 214, 0.12), 0 0 26px -8px rgba(46, 230, 214, 0.6);
  animation: fishWiggle 2.4s ease-in-out infinite;
}

/* 头像有两种形态：emoji 字符 或 上传图片。图片按格子铺满，圆角跟随外层槽位 */
.user-avatar img,
.msg-avatar img,
.me-avatar img,
.modal-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.modal-input {
  width: 100%;
  background: rgba(4, 7, 14, 0.85);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px 15px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  text-align: center;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.modal-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(46, 230, 214, 0.12); }

.modal-suggest { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 13px; }
.modal-suggest span {
  font-size: 11px;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 3px 11px;
  cursor: pointer;
  transition: all 0.15s;
}
.modal-suggest span:hover { border-color: var(--cyan); color: var(--cyan); }

/* --- 头像选择器（昵称弹窗内） --- */
.avatar-picker { margin-top: 20px; text-align: left; }
.avatar-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.avatar-picker-title {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 0.8px;
  color: var(--text-dim);
}
.avatar-upload {
  font-size: 11.5px;
  color: var(--cyan);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.15s;
}
.avatar-upload:hover { opacity: 0.7; }

.avatar-tabs { display: flex; gap: 7px; margin-bottom: 10px; }

/* 网格限高，头像再多也不会把弹窗撑破 */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 5px;
  max-height: 112px;
  overflow-y: auto;
  padding-right: 2px;
  align-content: start;
}
.avatar-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 9px;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, transform 0.15s, border-color 0.15s;
}
.avatar-cell:hover { background: rgba(46, 230, 214, 0.1); transform: scale(1.1); }
/* 选中态：荧光青描边 + 外发光，跟分类标签的激活态呼应 */
.avatar-cell.is-active {
  background: rgba(46, 230, 214, 0.16);
  border-color: var(--cyan);
  box-shadow: 0 0 14px -4px rgba(46, 230, 214, 0.9);
}
.avatar-cell--img { padding: 2px; }
.avatar-cell--img img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }

.modal-btns { display: flex; gap: 10px; margin-top: 21px; }
.modal-btns--right { justify-content: flex-end; }
.modal-btns .btn { flex: 1; padding: 10px; font-size: 13px; }
.modal-btns--right .btn { flex: 0 0 auto; padding: 8px 23px; }

/* --- 游戏选择网格 --- */
.game-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.game-card {
  background: linear-gradient(180deg, var(--ink-600), var(--ink-700));
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 17px 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.game-card:hover {
  border-color: var(--amber);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -14px rgba(255, 180, 84, 0.7);
}
.game-card .gc-icon { font-size: 27px; margin-bottom: 8px; }
.game-card .gc-name { font-family: var(--font-display); font-size: 14.5px; letter-spacing: 1px; font-weight: 700; margin-bottom: 5px; }
.game-card .gc-desc { font-size: 11px; color: var(--text-dim); line-height: 1.55; }
.game-card .gc-tag {
  display: inline-block;
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--violet);
  border: 1px solid rgba(160, 107, 255, 0.4);
  border-radius: 8px;
  padding: 1px 8px;
}

/* --- 对战邀请面板 --- */
.invite-list { flex: 1; overflow-y: auto; padding: 10px; }
.empty-tip { color: var(--text-faint); font-size: 12px; text-align: center; padding: 28px 8px; line-height: 1.9; }
.empty-tip small { color: var(--text-faint); opacity: 0.75; }

.invite-item {
  background: linear-gradient(135deg, rgba(255, 180, 84, 0.12), rgba(160, 107, 255, 0.09));
  border: 1px solid rgba(255, 180, 84, 0.32);
  border-radius: 11px;
  padding: 11px;
  margin-bottom: 9px;
  /* 面板每 2 秒刷新一次以更新倒计时，这里不加入场动画，避免反复重播 */
}
.invite-item .invite-item-title {
  font-family: var(--font-display);
  font-size: 13.5px;
  letter-spacing: 0.8px;
  font-weight: 700;
  color: var(--amber);
  margin-bottom: 5px;
}
.invite-item .invite-item-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); margin-bottom: 9px; }
.invite-item .btn { width: 100%; font-size: 12px; padding: 6px; }
.invite-item.is-mine { opacity: 0.6; }

/* --- Emoji 雨 --- */
.emoji-rain { position: fixed; inset: 0; pointer-events: none; z-index: 998; overflow: hidden; }
.emoji-rain .rain-item {
  position: absolute; top: -50px; font-size: 28px;
  filter: drop-shadow(0 0 8px rgba(46, 230, 214, 0.6));
  animation: rainFall linear forwards;
}
@keyframes rainFall {
  to { transform: translateY(105vh) rotate(380deg); opacity: 0.2; }
}

/* --- Toast --- */
.toast {
  position: fixed; left: 50%;
  /* 加安全区：iPhone 底部横条（34px）会盖住纯 42px 的提示条 */
  bottom: calc(42px + env(safe-area-inset-bottom, 0px));
  max-width: calc(100vw - 32px);
  transform: translateX(-50%) translateY(80px);
  background: linear-gradient(180deg, var(--ink-600), var(--ink-700));
  border: 1px solid rgba(46, 230, 214, 0.55);
  color: var(--cyan);
  font-size: 13px;
  letter-spacing: 0.4px;
  padding: 11px 24px;
  border-radius: 24px;
  opacity: 0;
  box-shadow: 0 12px 34px -12px rgba(46, 230, 214, 0.7);
  transition: all 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 1001;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- 滚动条：细窄、荧光青、悬停点亮 --- */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(120, 200, 255, 0.16); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(46, 230, 214, 0.5); }

/* ---------- ⑧ 响应式与可访问性 ---------- */

/* ------------------------------------------------------------
   窄屏（≤900px，手机/竖屏平板）：整体按"手机 IM"重做
   - 骨架学微信/QQ：顶部毛玻璃导航栏 + 满屏会话流 + 底部胶囊输入栏
   - 手感学 iOS：毛玻璃材质、发丝分隔线、44pt 触控区、弹簧曲线
   - 三栏 → 单栏 + 左右抽屉（成员 / 对战邀请）
   - 桌面端布局完全不受影响：所有改动都关在这条媒体查询里
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  /* --- 顶栏：iOS 导航栏，毛玻璃 + 发丝线 --- */
  .fish-topbar {
    gap: 6px;
    padding: 6px 8px;
    padding-top: calc(6px + env(safe-area-inset-top, 0px)); /* 避开 iPhone 刘海 */
    /* 手机 QQ 上 backdrop-filter 经常失效，直接用不透明的 ink-800 兜底 */
    background: rgba(8, 13, 24, 0.92);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
  }
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .fish-topbar { background: var(--ink-800); }
  }
  /* 底缘保留霓虹灯管（这是全站的识别色），但去掉桌面端的辉光，免得毛玻璃上发糊 */
  .fish-topbar::after { opacity: 0.55; box-shadow: none; }

  .fish-tag,
  .fish-stats { display: none; } /* 在线人数改由「👥」按钮上的角标承载 */
  .fish-name { font-size: 16px; letter-spacing: 1px; }
  .fish-logo { font-size: 20px; animation: none; } /* 手机上别一直摇头，省电 */

  /* 左上角标题兼作「改名」入口，给它一个够大的触控区 */
  .fish-brand { padding: 8px; margin-left: -4px; border-radius: 12px; transition: background 0.15s; min-height: 40px; }
  .fish-brand:active { background: rgba(120, 200, 255, 0.12); }

  /* 右上角按钮：44×44 触控区、无边框（iOS 导航栏按钮就是这个样子） */
  .fish-actions { margin-left: auto; gap: 2px; }
  .fish-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 6px;
    border-color: transparent;
    background: transparent;
  }
  .fish-actions .btn:active { background: rgba(120, 200, 255, 0.14); transform: none; }
  /* 小屏只留 emoji 图标；「改名」整颗收掉，入口挪到左上角标题上 */
  .btn-txt { display: none; }
  .btn-ico { font-size: 19px; }
  .btn--mobile-only { display: inline-flex; align-items: center; }
  .fish-actions .btn--desktop-only { display: none; }
  .badge { margin-left: 3px; }

  /* --- 聊天区：满屏铺满，去掉桌面端的卡片边框与内缩 ---
     微信的会话页就是整屏的，留一圈边框反而不像 App */
  .fish-body { padding: 0; gap: 0; }
  .chat {
    border: none;
    border-radius: 0;
    background: transparent; /* 让 #fishView 的深海背景直接透上来 */
    box-shadow: none;
  }
  .chat-stream { padding: 14px 12px 10px; }
  .msg-text {
    max-width: 82%;
    font-size: 15px;
    line-height: 1.65;
    border-radius: 6px 18px 18px 18px;
    /* 自己的消息气泡在 QQ/TBS 上有时发虚，加个轻微外发光提升辨识度 */
    box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.35);
  }
  .msg.is-me .msg-text {
    border-radius: 18px 6px 18px 18px;
    box-shadow: 0 2px 14px -4px rgba(46, 230, 214, 0.35);
  }

  /* --- 输入栏：iOS 胶囊输入框 + 胶囊发送键，毛玻璃底 --- */
  .chat-input-bar {
    gap: 8px;
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); /* 避开底部横条 */
    /* 手机 QQ 上 backdrop-filter 可能失效，用不透明的 ink-800 兜底 */
    background: rgba(8, 13, 24, 0.95);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
  }
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .chat-input-bar { background: var(--ink-800); }
  }
  .chat-input {
    /* 字号必须 ≥16px，否则 iOS 聚焦时会自动放大整页；QQ 里同样 */
    font-size: 16px;
    padding: 10px 14px;
    border-radius: 20px;
    border-color: transparent;
    background: rgba(255, 255, 255, 0.09);
  }
  /* 聚焦不再是桌面端的"描边 + 辉光"，改成 iOS 表单那种轻微提亮 */
  .chat-input:focus {
    border-color: rgba(46, 230, 214, 0.5);
    background: rgba(255, 255, 255, 0.13);
    box-shadow: none;
  }
  /* 手机屏幕窄，头像占位砍掉，把宽度让给输入框 */
  .me-avatar { display: none; }
  .btn--icon {
    min-width: 42px; min-height: 42px;
    padding: 0;
    border-color: transparent;
    background: transparent;
  }
  .btn--icon:active { background: rgba(120, 200, 255, 0.14); }
  .btn--send { border-radius: 20px; min-height: 42px; padding: 0 18px; font-size: 14px; }

  /* 表情面板：高度跟着视口走，别一下把聊天区压没 */
  .sticker-panel { max-height: min(42vh, 280px); padding: 10px 12px 12px; }

  /* 软键盘弹起时（由 app.js 给 body 加 keyboard-open），压缩表情面板并把消息流底部留足空间 */
  body.keyboard-open .sticker-panel { max-height: min(32vh, 220px); }
  body.keyboard-open .chat-stream { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }

  /* --- 两侧面板：脱离文档流，变成左右滑出的毛玻璃抽屉 --- */
  .panel {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 60;
    /* 特小屏（如 320px 宽的老手机）抽屉别占太满，留一点聊天区边缘 */
    width: min(82vw, 300px);
    min-width: 240px;
    border-radius: 0;
    border-top: none;
    border-bottom: none;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* 手机 QQ 上 backdrop-filter 经常失效，用接近实心的背景兜底 */
    background: rgba(10, 17, 30, 0.96);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    box-shadow: 0 0 60px -10px rgba(0, 0, 0, 0.95);
    /* iOS 抽屉的弹簧曲线：起手快、收尾慢，比 ease-in-out 更"跟手" */
    transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
  }
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .panel { background: var(--ink-800); }
  }
  .panel--users { left: 0; transform: translateX(-102%); border-left: none; }
  .panel--game { right: 0; transform: translateX(102%); border-right: none; }
  .panel.is-open { transform: translateX(0); }

  /* 抽屉标题栏给关闭按钮让位 */
  .panel .panel-title { padding-right: 46px; }

  /* 关闭按钮：iOS 风格的圆形小灰键，挂在面板右上角 */
  .drawer-close {
    display: grid;
    place-items: center;
    position: absolute;
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: 10px;
    width: 32px;
    height: 32px;
    font-size: 14px;
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
  }
  .drawer-close:active { background: rgba(255, 255, 255, 0.16); }

  /* 遮罩：抽屉拉开时盖住聊天区，点一下即收起 */
  .drawer-mask {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .drawer-mask.show { opacity: 1; pointer-events: auto; }

  /* 列表行高拉到 48px 上下，手指点起来不费劲 */
  .user-item { padding: 10px 9px; font-size: 14px; }
  .user-item:active { background: rgba(120, 200, 255, 0.09); }

  /* 邀请卡片在小屏上放宽一点，按钮更好点 */
  .invite-item .btn { padding: 11px; font-size: 13px; }

  /* --- 手机端减负：网格与噪点铺满整屏时很吃移动 GPU，观感收益却很小，直接关掉 --- */
  #fishView::before,
  #fishView::after { display: none; }
}

/* 特小屏手机（如 iPhone SE / 老安卓 / QQ 内置浏览器窄窗口） */
@media (max-width: 375px) {
  .fish-topbar { gap: 4px; padding: 5px 6px; }
  .fish-name { font-size: 15px; }
  .fish-actions .btn { min-width: 40px; min-height: 40px; }
  .btn-ico { font-size: 17px; }
  .chat-stream { padding: 12px 10px 8px; }
  .msg-text { max-width: 84%; font-size: 14.5px; padding: 8px 12px; }
  .chat-input-bar { padding: 7px 8px; gap: 6px; }
  .btn--send { padding: 0 14px; min-height: 40px; }
  .btn--icon { min-width: 40px; min-height: 40px; }
  .panel { width: min(86vw, 280px); min-width: 220px; }
}

/* 有屏幕键盘弹出时（矮视口），弹窗改成可滚动，并留出安全区 */
@media (max-height: 780px) {
  .modal {
    padding: 14px;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .modal-card {
    /* 100% 相对 .modal 的内容区（已扣除 padding 与安全区），滚动条不会顶到屏幕边 */
    max-height: 100%;
    overflow-y: auto;
  }
}

/* 触屏设备：:hover 会在点完后"粘"住（比如点过的按钮一直保持上浮、点过的消息行一直高亮）。
   这里把靠 transform / box-shadow / background 制造的悬停态复位，改用按下反馈 */
@media (hover: none) {
  .btn:hover,
  .game-card:hover,
  .avatar-cell:hover,
  .sticker-grid .sticker:hover {
    transform: none;
    box-shadow: none;
  }
  .msg:not(.msg--system):hover { background: transparent; }
  .user-item:hover { background: transparent; border-color: transparent; }

  /* 按下时轻微回缩，手感接近原生控件 */
  .btn:active { transform: scale(0.96); }
}

/* 尊重系统的"减少动态效果"偏好：关掉循环动画，只保留必要的淡入 */
@media (prefers-reduced-motion: reduce) {
  .fish-logo,
  .modal-avatar,
  .dot--online,
  .bg-particles .fish-float { animation: none; }
  .msg, .user-item, .modal-card { animation-duration: 0.01ms; }
  .chat-stream { scroll-behavior: auto; }
}