/* v26.1 · 小夏的灰色波点壁纸 / 雾灰、柔白、灰粉玻璃。 */
:root {
  --ink: #37363a;
  --ink-soft: #55545a;
  --muted: #6d6970;
  --faint: #817b82;
  --accent: #b3a3aa;
  --accent-deep: #7f6e78;
  --line: rgba(96, 92, 102, .13);
  --glass: rgba(250, 249, 250, .38);
  --glass-strong: rgba(252, 250, 252, .58);
  --glass-gray: rgba(201, 204, 211, .38);
  --glass-white: rgba(255, 255, 255, .48);
  --glass-pink: rgba(232, 211, 220, .43);
}

body { background: #e0e0e0; }
.backdrop {
  background-color: #e3e2e4;
  background-image: radial-gradient(circle, rgba(255,255,255,.62) 2.5px, transparent 3px);
  background-size: 28px 28px;
}
.backdrop::after, .backdrop i { display: none; }

/* 壁纸属于固定的聊天外框，消息在其上滚动。
   去掉父层模糊，避免后代气泡只采样到父层的磨砂白底。 */
.paper {
  background-color: #e0e0e0;
  background-image:
    url('/assets/backgrounds/lucky-day-polka.jpg'),
    radial-gradient(circle, rgba(255,255,255,.58) 4px, transparent 4.5px);
  background-position: center, center;
  background-size: auto 100%, 44px 44px;
  background-repeat: no-repeat, repeat;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 24px 70px rgba(69, 65, 74, .13), inset 0 1px 0 rgba(255,255,255,.9);
}
.message-paper { background: transparent; }

.topbar {
  padding: 7px 3px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 20px;
  background: rgba(255,255,255,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 3px 12px rgba(68,65,73,.035);
  -webkit-backdrop-filter: blur(12px) saturate(.7);
  backdrop-filter: blur(12px) saturate(.7);
}
.topbar::before, .topbar::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30px; height: 5px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(132,123,133,.38) 1.5px, transparent 2px) 0 0 / 10px 5px;
  pointer-events: none;
}
.topbar::before { left: 48px; }
.topbar::after { right: 48px; }
.header-title { max-width: calc(100% - 60px); justify-self: center; }

/* 三种颜色共用同一玻璃结构，色彩只来自一层很浅的染色。 */
.chat-venn { --bubble-tint: var(--glass-gray); }
.chat-claude { --bubble-tint: var(--glass-white); }
.chat-xia { --bubble-tint: var(--glass-pink); }
.chat-message .chat-bubble {
  color: var(--ink);
  background-color: var(--bubble-tint, var(--glass-white));
  background-image: linear-gradient(140deg, rgba(255,255,255,.28), rgba(255,255,255,.05) 52%, rgba(255,255,255,.12));
  border: 1px solid rgba(255,255,255,.68);
  border-top-color: rgba(255,255,255,.94);
  border-bottom-color: rgba(255,255,255,.38);
  border-radius: 6px 19px 19px 19px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(255,255,255,.12),
    0 5px 16px rgba(68,65,73,.055);
  -webkit-backdrop-filter: blur(9px) saturate(.65);
  backdrop-filter: blur(9px) saturate(.65);
}
.chat-xia .chat-bubble { border-radius: 19px 6px 19px 19px; }
.chat-xia .chat-bubble::before { content: none; }
.message-author { color: #68636c; text-shadow: 0 1px 2px rgba(255,255,255,.9); }
.message-time { color: #767079; text-shadow: 0 1px 2px rgba(255,255,255,.9); }

/* 波点只在小装饰上重复，正文上不叠纹理。 */
.date-stamp { justify-content: center; }
.date-stamp::before, .date-stamp::after {
  flex: 0 1 32px;
  height: 4px;
  background: radial-gradient(circle, rgba(133,124,135,.45) 1.3px, transparent 1.8px) center / 9px 4px;
}
.date-stamp span {
  padding: 5px 13px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 999px;
  background: rgba(255,255,255,.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.composer {
  background: rgba(253,251,253,.52);
  border-color: rgba(255,255,255,.84);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 25px rgba(68,65,73,.075);
  -webkit-backdrop-filter: blur(16px) saturate(.7);
  backdrop-filter: blur(16px) saturate(.7);
}
.sheet-heading {
  background-image: radial-gradient(circle, rgba(177,166,176,.19) 1.3px, transparent 1.8px);
  background-size: 14px 14px;
}
.private-welcome {
  background: linear-gradient(145deg, rgba(255,255,255,.65), rgba(232,225,231,.42));
  border-color: rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(14px) saturate(.7);
  backdrop-filter: blur(14px) saturate(.7);
}
.empty-page { justify-content: flex-start; padding-top: clamp(30px, 7vh, 68px); }
.empty-page p {
  padding: 10px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* 不支持背景模糊的浏览器用更实的同色底，保持文字清楚。 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .chat-venn { --bubble-tint: rgba(222,224,228,.91); }
  .chat-claude { --bubble-tint: rgba(253,253,253,.94); }
  .chat-xia { --bubble-tint: rgba(238,226,232,.93); }
  .composer, .topbar { background-color: rgba(249,247,250,.92); }
}
@media (max-width: 640px) {
  .paper { background-size: cover, 44px 44px; }
  .topbar { border-radius: 18px; }
}
@media (max-width: 360px) {
  .topbar::before, .topbar::after { width: 20px; }
  .header-title { max-width: calc(100% - 40px); }
}