/* 聊天页面样式 */
.chat-page { background: var(--bg-cream); position: relative; }

.chat-header { 
  height: 50px; 
  display: flex; 
  align-items: center; 
  padding: 0 15px; 
  background: rgba(255, 255, 255, 0.15); 
}

.chat-header .page-title,
.chat-header svg {
  mix-blend-mode: difference;
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.chat-header .page-back { 
  background: none; 
  width: auto; 
  height: auto; 
  padding: 4px 6px; 
}

.chat-header .page-back:active { 
  background: none; 
}

.chat-header-avatar { 
  width: 32px; 
  height: 32px; 
  border-radius: 50%; 
  overflow: hidden; 
  margin-right: 10px; 
  border: 1px solid var(--light-pink); 
}

.chat-header-avatar img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

.chat-content { 
  flex: 1; 
  padding: 15px; 
  overflow-y: auto; 
  display: flex; 
  flex-direction: column; 
  gap: 15px; 
}

.msg-item { 
  display: flex; 
  max-width: 85%; 
  position: relative; 
}


.msg-item.left { 
  align-self: flex-start; 
}

.msg-item.right { 
  align-self: flex-end; 
  flex-direction: row-reverse; 
}

.msg-avatar { 
  width: 36px; 
  height: 36px; 
  border-radius: 50%; 
  overflow: hidden; 
  flex-shrink: 0; 
  border: 1px solid var(--light-pink); 
  margin: 0 8px; 
}

.msg-avatar img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

.msg-bubble { 
  padding: 10px 14px; 
  border-radius: 18px; 
  line-height: 1.4; 
  font-size: 14px; 
  backdrop-filter: blur(12px); 
  -webkit-backdrop-filter: blur(12px); 
}

.msg-item.left .msg-bubble {
  background: rgba(var(--left-bubble-bg, 255, 255, 255), var(--bubble-opacity-l, 0.6)) !important;
  color: var(--left-bubble-text-color, var(--text-dark)) !important;
  border-radius: var(--bubble-radius-l, 18px) !important;
  border-bottom-left-radius: var(--bubble-radius-l-bottom, 18px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04); 
  border: 1px solid rgba(255,255,255,0.5);
}

body.bubble-grad-l .msg-item.left .msg-bubble {
  background: var(--left-bubble-grad-bg, rgba(255, 255, 255, 0.6)) !important;
}

.msg-item.right .msg-bubble { 
  background: rgba(var(--right-bubble-bg, 240, 184, 200), var(--bubble-opacity-r, 0.85)) !important; 
  color: var(--right-bubble-text-color, #fff) !important; 
  border-radius: var(--bubble-radius-r, 18px) !important;
  border-bottom-right-radius: var(--bubble-radius-r-bottom, 18px) !important;
  box-shadow: 0 4px 12px rgba(240, 184, 200, 0.2); 
  border: 1px solid rgba(255,255,255,0.3); 
}

body.bubble-grad-r .msg-item.right .msg-bubble {
  background: var(--right-bubble-grad-bg, rgba(240, 184, 200, 0.85)) !important;
}

.msg-quote { 
  padding: 6px 10px; 
  border-radius: 8px; 
  font-size: 12px; 
  margin-bottom: 6px; 
  line-height: 1.2; 
  background: #f8f5f0; 
  color: var(--text-light); 
}


.msg-item.selected .msg-bubble { 
  opacity: 0.7; 
  border: 2px solid #ff6b81; 
}

.msg-item .check-icon { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 20px; 
  height: 20px; 
  background: #ff6b81; 
  color: white; 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 12px; 
  display: none; 
}

.msg-item.selected .check-icon { 
  display: flex; 
}

.chat-input-area { 
  display: flex; 
  align-items: flex-end; 
  padding: 10px 15px; 
  background: rgba(255, 255, 255, 0.15); 
  gap: 8px; 
}

.chat-func-btn-group { 
  display: flex; 
  flex-direction: row; 
  gap: 6px; 
}

.chat-func-btn { 
  width: 40px; 
  height: 40px; 
  border-radius: 50%; 
  background: rgba(255,255,255,0.6); 
  border: 1px solid rgba(255,255,255,0.5); 
  color: var(--text-dark); 
  font-size: 18px; 
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  backdrop-filter: blur(10px); 
  box-shadow: 0 2px 5px rgba(0,0,0,0.02); 
}

.chat-func-btn:active { 
  background: rgba(255,255,255,0.8); 
}

.chat-input-container { 
  flex: 1; 
  position: relative; 
}

.reply-tip { 
  padding: 4px 10px; 
  background: rgba(248, 215, 224, 0.8); 
  backdrop-filter: blur(10px); 
  color: var(--text-dark); 
  font-size: 12px; 
  border-radius: 12px 12px 0 0; 
  display: none; 
}

.reply-tip-close { 
  cursor: pointer; 
  font-size: 14px; 
}

.chat-input { 
  width: 100%; 
  padding: 10px 16px; 
  border-radius: 20px; 
  border: 1px solid rgba(255,255,255,0.5); 
  outline: none; 
  font-size: 14px; 
  resize: none; 
  height: 40px; 
  background: rgba(255,255,255,0.6); 
  backdrop-filter: blur(10px); 
  line-height: 20px; 
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.02); 
  overflow: hidden; 
}

.chat-btn-group { 
  display: flex; 
  gap: 8px; 
}

.chat-send-btn { 
  width: 40px; 
  height: 40px; 
  border-radius: 50%; 
  background: var(--main-pink); 
  backdrop-filter: blur(10px); 
  -webkit-backdrop-filter: blur(10px); 
  color: #fff; 
  border: 1px solid rgba(255,255,255,0.4); 
  cursor: pointer; 
  font-size: 16px; 
  box-shadow: 0 2px 8px var(--main-pink); 
}

.chat-ai-reply-btn { 
  width: 40px; 
  height: 40px; 
  border-radius: 50%; 
  background: transparent; 
  backdrop-filter: blur(10px); 
  -webkit-backdrop-filter: blur(10px); 
  color: #fff; 
  border: none; 
  cursor: pointer; 
  font-size: 16px; 
  box-shadow: none; 
  opacity: 0.8;
}

.emoji-panel { 
  position: absolute; 
  bottom: 60px; 
  left: 0; 
  width: 100%; 
  background: #fff; 
  border-radius: 16px 16px 0 0; 
  padding: 10px; 
  box-shadow: 0 -2px 8px rgba(0,0,0,0.05); 
  display: none; 
  z-index: 99; 
}

.emoji-grid { 
  display: grid; 
  grid-template-columns: repeat(8, 1fr); 
  gap: 10px; 
}

.emoji-item { 
  font-size: 24px; 
  text-align: center; 
  cursor: pointer; 
}

.attach-panel { 
  position: absolute; 
  bottom: 60px; 
  left: 0; 
  width: 100%; 
  background: #fff; 
  border-radius: 16px 16px 0 0; 
  padding: 15px; 
  box-shadow: 0 -2px 8px rgba(0,0,0,0.05); 
  display: none; 
  z-index: 99; 
}

.attach-grid { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 15px; 
}

.attach-item { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  cursor: pointer; 
  color: var(--text-light); 
  font-size: 12px; 
}

.attach-icon { 
  width: 40px; 
  height: 40px; 
  border-radius: 8px; 
  background: var(--light-pink); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 20px; 
  margin-bottom: 5px; 
}

.batch-delete-bar { 
  display: none; 
  height: 50px; 
  background: #f5f5f5; 
  border-top: 1px solid #e0e0e0; 
  align-items: center; 
  justify-content: space-between; 
  padding: 0 20px; 
}

.batch-delete-bar.show { 
  display: flex; 
}

.batch-delete-bar .cancel { 
  color: var(--text-light); 
  cursor: pointer; 
}

.batch-delete-bar .count { 
  color: var(--text-light); 
}

.batch-delete-bar .delete { 
  color: #ff4757; 
  font-weight: bold; 
  cursor: pointer; 
}

.mode-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.mode-switch-label {
  font-size: 14px;
  color: var(--text-light);
}

.mode-switch-toggle {
  width: 60px;
  height: 30px;
  border-radius: 15px;
  background: #e0e0e0;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
}

.mode-switch-toggle.active {
  background: var(--main-pink);
}

.mode-switch-toggle::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: transform 0.3s;
}

.mode-switch-toggle.active::after {
  transform: translateX(30px);
}

/* 消息编辑弹窗 */
#msgEditModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99999;
  align-items: center;
  justify-content: center;
}



/* ===== rp-notif notification card ===== */
/* 方案A：微信风格胶囊 - 清新简约，可读性强 */
.rp-notif-card { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 4px; 
  font-size: 11px; 
  color: #666; 
  background: rgba(0, 0, 0, 0.05); 
  padding: 5px 12px; 
  border-radius: 12px; 
  backdrop-filter: blur(8px); 
  margin: 10px auto; 
  max-width: 80%; 
  width: fit-content; 
  text-align: center; 
  align-self: center;
}
.rp-notif-card img { 
  width: 12px; 
  height: 14px; 
  object-fit: contain; 
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.2)); 
}
/* ===== end rp-notif ===== */

/* 绉诲姩绔槻璇Е */
@media (hover: none) and (pointer: coarse) {
  .msg-row {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }
  .msg-content {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }
}

/* 背景亮度自适应 */
.bg-dark {
    color: #d1d5db;
}
.bg-light {
    color: #374151;
}

.hide-avatars-global .msg-avatar { display: none !important; }

/* 天气特效样式 */
#weather-effect-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 2147483647;
  overflow: visible !important;
}

.weather-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

/* 阳光特效 */
.weather-effect.sun {
  z-index: 9998;
  background: transparent;
}
.weather-effect.sun::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 10% 10%, rgba(255, 245, 200, 0.4) 0%, rgba(255, 230, 150, 0.1) 40%, transparent 70%);
  pointer-events: none;
  animation: sun-glow 8s infinite alternate ease-in-out;
}

.sun-ray {
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 100px;
  background: linear-gradient(to bottom, rgba(255, 255, 200, 0.6) 0%, transparent 100%);
  transform-origin: top left;
  filter: blur(15px);
  animation: sun-rays 6s infinite alternate ease-in-out;
  pointer-events: none;
}

.sun-ray:nth-child(1) { top: -10%; left: -10%; --rot: -15deg; }
.sun-ray:nth-child(2) { top: -5%; left: 20%; --rot: -30deg; animation-delay: 2s; }
.sun-ray:nth-child(3) { top: 0; left: 50%; --rot: -45deg; animation-delay: 4s; }

.sun-mote {
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 200, 0.9);
  border-radius: 50%;
  filter: blur(2px);
  box-shadow: 0 0 10px rgba(255, 255, 200, 0.8);
  animation: float-mote linear infinite alternate;
  will-change: transform, opacity;
}

@keyframes float-mote {
  0% { transform: translateY(0) scale(0.8); opacity: 0.2; }
  100% { transform: translateY(-60px) scale(1.5); opacity: 1; }
}

@keyframes sun-glow {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.1); }
}

@keyframes sun-rays {
  0% { opacity: 0.3; transform: scaleY(0.8) translateY(0) rotate(var(--rot)); }
  100% { opacity: 0.8; transform: scaleY(1.5) translateY(20px) rotate(calc(var(--rot) + 5deg)); }
}

/* 雨丝特效 */
.weather-effect.rain {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
}
  .rain-drop {
    position: absolute;
    top: -20px;
    width: 1px;
    height: 30px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
    animation: rain-fall linear infinite;
    will-change: transform;
  }
@keyframes rain-fall {
  0% { transform: translateY(-20px) rotate(15deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(100vh) rotate(15deg); opacity: 0; }
}

/* 雪花特效 */
.weather-effect.snow {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
}
.snow-flake {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  filter: blur(1px);
  box-shadow: 0 0 5px white;
  animation: snow-fall linear infinite;
  will-change: transform;
}
@keyframes snow-fall {
  0% { transform: translateY(-20px) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(100vh) translateX(20px); opacity: 0; }
}

.weather-effect.spring {
  background: linear-gradient(to bottom, rgba(255, 182, 193, 0.05) 0%, transparent 100%);
}
.spring-petal {
  position: absolute;
  top: -20px;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 30% 30%, #ffb6c1, #ff69b4);
  border-radius: 50% 0 50% 50%;
  filter: drop-shadow(0 0 4px rgba(255,105,180,0.8));
  animation: petal-fall linear infinite;
  will-change: transform;
}
@keyframes petal-fall {
  0% { transform: translateY(-20px) translateX(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(100vh) translateX(50px) rotate(360deg); opacity: 0; }
}

/* ====================== 聊天气泡头衔标签 ====================== */
.chat-member-title {
  display: inline-block;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 6px;
  margin-left: 4px;
  vertical-align: middle;
  font-weight: 500;
  line-height: 14px;
}

.chat-member-title.gradient {
  background: linear-gradient(135deg, var(--title-color, #7c6bff), var(--title-color-light, #a78bfa));
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}

.chat-member-title.outline {
  background: transparent;
  color: var(--title-color, #7c6bff);
  border: 1.5px solid var(--title-color, #7c6bff);
}

.chat-member-title.glass {
  background: rgba(124, 107, 255, 0.12);
  color: var(--title-color, #7c6bff);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(124, 107, 255, 0.2);
}