/* ========== 全局背景与氛围 ========== */

/* 聊天页面整体背景 */
.chat-background,
.chat-container,
.message-list {
  background: linear-gradient(135deg, #faf5f5 0%, #f3e8e8 30%, #faf5f5 60%, #f0e5e5 100%) !important;
}

/* 如果平台有body级别的背景 */
body {
  background-color: #faf5f5 !important;
}

/* ========== 消息气泡 - 用户（玩家）========== */

/* 用户发送的消息气泡 */
.message-bubble.user,
.message.user .bubble,
[class*="user"] .bubble,
.from-user .message-content,
.chat-message.user .bubble {
  background: #ffffff !important;
  color: #5a4a4a !important;
  border-radius: 20px 20px 4px 20px !important;
  border: 1px solid #e8d5d5 !important;
  box-shadow: 0 2px 6px rgba(160, 120, 120, 0.08) !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  padding: 14px 18px !important;
}

/* 用户消息的字体颜色微调 */
.message-bubble.user p,
.from-user .message-content p {
  color: #5a4a4a !important;
}

/* ========== 消息气泡 - 由依（AI/助手）========== */

/* AI回复的消息气泡 */
.message-bubble.assistant,
.message.assistant .bubble,
[class*="assistant"] .bubble,
.from-assistant .message-content,
.chat-message.assistant .bubble,
.message-bubble.ai,
.message.ai .bubble {
  background: #fefcfc !important;
  color: #4a3a3a !important;
  border-radius: 20px 20px 20px 4px !important;
  border: 1px solid #ecd5d5 !important;
  box-shadow: 0 2px 6px rgba(160, 120, 120, 0.06) !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  padding: 14px 18px !important;
}

/* AI消息的字体颜色微调 */
.message-bubble.assistant p,
.from-assistant .message-content p {
  color: #4a3a3a !important;
}

/* ========== 消息头像 ========== */

/* 用户头像区域 */
.message-avatar.user,
.user-avatar,
[class*="user"] .avatar {
  border: 2px solid #d4a8a8 !important;
  border-radius: 50% !important;
}

/* AI（由依）头像区域 */
.message-avatar.assistant,
.assistant-avatar,
[class*="assistant"] .avatar,
.ai-avatar {
  border: 2px solid #e8b8b8 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 8px rgba(200, 150, 150, 0.2) !important;
}

/* ========== 输入框区域 ========== */

/* 输入框整体容器 */
.chat-input-container,
.input-area,
.message-input-container {
  background: #ffffff !important;
  border-top: 1px solid #ecd5d5 !important;
  padding: 12px 16px !important;
}

/* 输入框本身 */
.chat-input,
.message-input,
textarea.message-input,
input.message-input {
  background: #fdf8f8 !important;
  border: 1px solid #e8d5d5 !important;
  border-radius: 20px !important;
  color: #5a4a4a !important;
  font-size: 14px !important;
  padding: 12px 18px !important;
  outline: none !important;
  transition: border-color 0.3s ease !important;
}

/* 输入框聚焦状态 */
.chat-input:focus,
.message-input:focus {
  border-color: #d4a8a8 !important;
  box-shadow: 0 0 0 2px rgba(212, 168, 168, 0.15) !important;
}

/* 输入框占位符文字 */
.chat-input::placeholder,
.message-input::placeholder {
  color: #c8b0b0 !important;
  font-style: italic !important;
}

/* ========== 发送按钮 ========== */

/* 发送按钮 */
.send-button,
button.send,
.submit-button,
[class*="send"] button {
  background: #d4a8a8 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(180, 140, 140, 0.3) !important;
}

/* 发送按钮悬停 */
.send-button:hover,
button.send:hover {
  background: #c09595 !important;
  box-shadow: 0 4px 10px rgba(160, 120, 120, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* ========== 预设按钮（输入预设）========== */

/* 预设按钮容器 */
.preset-buttons,
.input-presets,
.quick-actions {
  background: transparent !important;
}

/* 预设按钮 */
.preset-button,
.input-preset button,
.quick-action button,
.preset-buttons button {
  background: #fdf8f8 !important;
  color: #9a7a7a !important;
  border: 1px solid #e8d5d5 !important;
  border-radius: 16px !important;
  font-size: 12px !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

/* 预设按钮悬停 */
.preset-button:hover,
.input-preset button:hover {
  background: #f5e8e8 !important;
  border-color: #d4a8a8 !important;
  color: #7a5a5a !important;
}

/* ========== 后续建议按钮 ========== */

/* 建议选项容器 */
.suggestions-container,
.suggestion-buttons,
[class*="suggestion"] {
  background: transparent !important;
}

/* 建议选项按钮 */
.suggestion-button,
.suggestion-buttons button,
[class*="suggestion"] button {
  background: #ffffff !important;
  color: #7a5a5a !important;
  border: 1px solid #e8d5d5 !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 4px rgba(160, 120, 120, 0.06) !important;
}

/* 建议选项悬停 */
.suggestion-button:hover,
.suggestion-buttons button:hover {
  background: #fefcfc !important;
  border-color: #d4a8a8 !important;
  color: #5a3a3a !important;
  box-shadow: 0 2px 8px rgba(180, 140, 140, 0.15) !important;
}

/* ========== 分割线与装饰 ========== */

/* 消息间分隔 */
.message-divider,
.divider {
  border-color: #ecd5d5 !important;
}

/* 时间戳 */
.message-timestamp,
.timestamp {
  color: #c8b0b0 !important;
  font-size: 11px !important;
}

/* ========== 滚动条美化 ========== */

/* 聊天区域滚动条 */
.message-list::-webkit-scrollbar,
.chat-container::-webkit-scrollbar {
  width: 4px !important;
}

.message-list::-webkit-scrollbar-track,
.chat-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.message-list::-webkit-scrollbar-thumb,
.chat-container::-webkit-scrollbar-thumb {
  background: #e8d5d5 !important;
  border-radius: 2px !important;
}

.message-list::-webkit-scrollbar-thumb:hover,
.chat-container::-webkit-scrollbar-thumb:hover {
  background: #d4a8a8 !important;
}

/* ========== 选中文字颜色 ========== */

::selection {
  background: #f0d8d8 !important;
  color: #5a3a3a !important;
}