/* ============================================================
   聊天界面 —— 对齐 API 页的黑白毛玻璃系统
   加载顺序必须在 chat.css 之后，这是一层覆盖，删掉这行 link 即可完全还原。

   解决的四件事：
   1. 顶部渐进模糊从 164px 收到 78px（原来一直糊到第三条消息）
   2. 气泡圆角 999px → 21px（长消息不再被拉成椭圆）
   3. 配色统一成黑白 + 毛玻璃，去掉酒红头像和绿色发送键
   4. 图标保持原样（iOS 线性图标），只改颜色
   ============================================================ */

.chat-phone {
  --ink: #17171a;
  --ink-2: rgb(23 23 26 / 62%);
  --ink-3: rgb(23 23 26 / 42%);
  --ink-4: rgb(23 23 26 / 26%);
  --glass: rgb(255 255 255 / 30%);
  --glass-strong: rgb(255 255 255 / 62%);
  --glass-blur: saturate(180%) brightness(1.28) blur(30px);
  --edge: inset 0 0 0 1px rgb(255 255 255 / 42%), inset 0 1px 0 0 rgb(255 255 255 / 72%), inset 0 0 0 1.5px rgb(23 23 26 / 5%);
  --lift: 0 1px 2px rgb(23 23 26 / 4%), 0 8px 20px -8px rgb(23 23 26 / 14%);
}

/* ---------- 1. 模糊范围收窄 ---------- */
/* 工具栏本身高 50px + safe-top，胶囊垂直居中在里面。
   原来模糊区 164px，等于胶囊底下还糊了 110px，前两三条消息全是花的。
   收到 78px：胶囊底边下方只留约 28px 的渐隐，刚好接住滚上来的内容。 */
.chat-phone .detail-toolbar-blur { height: calc(78px + var(--safe-top)); }

/* 层数也跟着收 —— 5 层 32px 的高斯叠在 78px 里会糊成一坨，
   保留前 3 层，后 2 层只做极轻的过渡。 */
.chat-phone .detail-toolbar-blur span:nth-child(1) { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 34%, transparent 62%); mask-image: linear-gradient(to bottom, #000 0%, #000 34%, transparent 62%); }
.chat-phone .detail-toolbar-blur span:nth-child(2) { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 76%); mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 76%); }
.chat-phone .detail-toolbar-blur span:nth-child(3) { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 90%); mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 90%); }
.chat-phone .detail-toolbar-blur span:nth-child(4) { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); }
.chat-phone .detail-toolbar-blur span:nth-child(5) { backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(to bottom, rgb(255 255 255 / 30%), transparent); -webkit-mask-image: none; mask-image: none; }

/* ---------- 2. 气泡 ---------- */
/* 21px 不是随手取的：字号 15px × 行高 1.5 = 22.5px，加上下 padding 20px，
   单行气泡高约 42px，半高正好 21px —— 单行仍是完美胶囊，
   多行则自动变成圆角矩形，不会再被拉成椭圆。 */
.chat-phone .bubble {
  padding: 11px 17px;
  border-radius: 21px;
  box-shadow: var(--edge), var(--lift);
  -webkit-backdrop-filter: saturate(150%) brightness(1.1) blur(14px);
  backdrop-filter: saturate(150%) brightness(1.1) blur(14px);
  font-size: 15px;
  line-height: 1.5;
}
.chat-phone .bubble:not(.self) {
  color: var(--ink);
  background: var(--character-bubble, var(--glass-strong));
}
/* 对方长消息左上角收一点，做出"从头像那边说出来"的指向 */
.chat-phone .message-row:not(.self-row) .bubble { border-top-left-radius: 8px; }
.chat-phone .message-row.self-row .bubble { border-top-right-radius: 8px; }

.chat-phone .bubble.self {
  color: #fff;
  background: var(--character-self-bubble, var(--ink));
  background-image: repeating-linear-gradient(0deg, transparent 0 2px, rgb(255 255 255 / 4%) 2px 3px);
  box-shadow: 0 1px 2px rgb(23 23 26 / 16%), 0 10px 22px -10px rgb(23 23 26 / 40%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.chat-phone .message-row time { color: var(--ink-3); font-size: 10px; }

/* ---------- 3. 头像：去掉酒红，改成黑白 ---------- */
.chat-phone .message-row .avatar,
.chat-phone .message-row .message-avatar {
  border-radius: 8px;
  box-shadow: var(--edge), 0 2px 6px rgb(23 23 26 / 10%);
}
.chat-phone .message-row .avatar-fallback,
.chat-phone .message-row .message-avatar {
  border-radius: 8px;
  color: var(--ink);
  background: var(--glass-strong);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
  font-size: 15px;
  font-weight: 600;
}
/* 自己那一侧反相成黑块，跟自己的气泡呼应 */
.chat-phone .message-row.self-row .avatar-fallback,
.chat-phone .message-row.self-row .message-avatar { color: #fff; background: var(--ink); }

/* ---------- 4. 工具栏胶囊 ---------- */
.chat-phone .toolbar-capsule {
  border: 0;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--edge), var(--lift);
}
.chat-phone .capsule-icon-button { color: var(--ink-2); }
.chat-phone .capsule-icon-button:active { color: var(--ink); }
.chat-phone .detail-toolbar h1 { color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: .2px; }

/* ---------- 5. 输入栏 ---------- */
.chat-phone .message-composer {
  border: 0;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--edge), var(--lift);
}
.chat-phone .message-composer input { color: var(--ink); }
.chat-phone .message-composer input::placeholder { color: var(--ink-4); }
.chat-phone .message-composer .composer-icon { color: var(--ink-2); }

/* 发送键：保留 iOS 的圆形，只把主题绿换成黑白系统里的黑 */
/* 必须带上 button 标签选择器：chat.css 的 `.chat-phone .message-composer button:not(.composer-icon)`
   优先级是 0,3,1，只写 .send-button（0,3,0）会被它的绿色 accent 覆盖掉。 */
.chat-phone .message-composer button.send-button {
  color: #fff;
  background: var(--ink);
  box-shadow: 0 1px 2px rgb(23 23 26 / 18%), 0 6px 14px -6px rgb(23 23 26 / 45%);
  transition: transform .12s ease, opacity .12s ease;
}
.chat-phone .message-composer button.send-button:active { transform: scale(.94); opacity: .85; }