/* ==========================================
   1. 状态栏 (Details/Summary) 恋爱游戏面板化
   ========================================== */
#customized-answer-content details,
#customized-question-content details {
  border: 2px dashed #FF85A2 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #FFF5F7 0%, #FFFFFF 100%) !important;
  margin: 12px 0 !important;
  padding: 10px 16px !important;
  box-shadow: 0 6px 16px rgba(255, 133, 162, 0.15) !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

#customized-answer-content details[open],
#customized-question-content details[open] {
  border-style: solid !important;
  border-color: #FF85A2 !important;
  box-shadow: 0 8px 24px rgba(255, 133, 162, 0.25) !important;
  transform: scale(1.01) !important;
}

/* 标题栏美化 */
#customized-answer-content summary,
#customized-question-content summary {
  font-family: system-ui, -apple-system, sans-serif !important;
  font-weight: 700 !important;
  color: #D81B60 !important;
  cursor: pointer !important;
  padding: 6px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  list-style: none !important;
}

#customized-answer-content summary::-webkit-details-marker,
#customized-question-content summary::-webkit-details-marker {
  display: none !important;
}

/* 恋爱感小图标指示器 */
#customized-answer-content summary::after,
#customized-question-content summary::after {
  content: '💖' !important;
  font-size: 14px !important;
  transition: transform 0.3s ease !important;
}

#customized-answer-content details[open] summary::after,
#customized-question-content details[open] summary::after {
  transform: rotate(180deg) scale(1.2) !important;
  content: '🌸' !important;
}

/* 状态栏内部表格与排版 */
#customized-answer-content table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 10px 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1.5px solid #FFE4EC !important;
}

#customized-answer-content th {
  background-color: #FFE4EC !important;
  color: #D81B60 !important;
  font-weight: 700 !important;
  padding: 10px 12px !important;
  font-size: 0.85rem !important;
}

#customized-answer-content td {
  background-color: #FFFFFF !important;
  color: #4A1521 !important;
  padding: 8px 12px !important;
  font-size: 0.85rem !important;
  border-bottom: 1.5px solid #FFF0F5 !important;
}

#customized-answer-content tr:last-child td {
  border-bottom: none !important;
}

/* ==========================================
   2. 消息气泡区美化 (恋爱喜剧风)
   ========================================== */
/* 用户消息气泡 */
#customized-question-content {
  background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%) !important; /* 清爽薄荷绿 */
  border-radius: 20px 20px 4px 20px !important;
  border: 2px solid #A5D6A7 !important;
  box-shadow: 0 4px 12px rgba(165, 214, 167, 0.2) !important;
}
#customized-question-content .markdown-body {
  color: #1B5E20 !important;
  font-weight: 500 !important;
}

/* AI消息气泡 */
#customized-answer-content {
  background: linear-gradient(135deg, #FFF0F5 0%, #FFE4E1 100%) !important; /* 甜美樱花粉 */
  border-radius: 20px 20px 20px 4px !important;
  border: 2px solid #FFB6C1 !important;
  box-shadow: 0 6px 18px rgba(255, 182, 193, 0.3) !important;
}
#customized-answer-content .markdown-body {
  color: #4A1521 !important;
  font-weight: 500 !important;
}

/* 气泡顶部装饰条 */
#customized-question-content .bg-\[\#c9e1e9\] {
  background-color: #81C784 !important;
}
#customized-answer-content .bg-\[\#F1CBCB\] {
  background-color: #FF85A2 !important;
}

/* 头像微动效 */
#customized-question-avatar, #customized-answer-avatar {
  border: 2px solid #FF85A2 !important;
  box-shadow: 0 4px 8px rgba(255, 133, 162, 0.2) !important;
  transition: transform 0.3s ease !important;
}
#customized-question-avatar:hover, #customized-answer-avatar:hover {
  transform: rotate(8deg) scale(1.08) !important;
}

/* ==========================================
   3. 界面控制区与底部输入框
   ========================================== */
/* 顶部控制栏 */
.sticky.top-0 {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 2px solid #FFF0F5 !important;
}

/* 模型选择器 */
#customized-model-selector {
  border-radius: 20px !important;
  border: 2px solid #FF85A2 !important;
  background: #FFFFFF !important;
  color: #D81B60 !important;
  font-weight: bold !important;
}

/* 快捷按钮组 */
#ai-mod-button2 .MuiButton-outlinedPrimary {
  border-radius: 20px !important;
  border: 2.5px solid #FF85A2 !important;
  color: #FF85A2 !important;
  background-color: #FFF5F7 !important;
  font-weight: 700 !important;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
#ai-mod-button2 .MuiButton-outlinedPrimary:hover {
  background-color: #FF85A2 !important;
  color: #FFFFFF !important;
  transform: translateY(-3px) !important;
}

/* 底部输入框容器 */
.bg-white.border-\[1\.5px\] {
  border-radius: 24px !important;
  border: 2.5px solid #FF85A2 !important;
  box-shadow: 0 8px 24px rgba(255, 133, 162, 0.2) !important;
  background: #FFFDFE !important;
}

#ai-chat-input {
  color: #4A1521 !important;
  font-weight: 500 !important;
}

/* 发送按钮 */
#ai-send-button {
  background-color: #FF85A2 !important;
  border-radius: 50% !important;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
#ai-send-button:hover {
  background-color: #D81B60 !important;
  transform: scale(1.15) rotate(-10deg) !important;
}

/* ==========================================
   4. AI回复加载动画 (心跳动效)
   ========================================== */
/* 隐藏原有闪烁点 */
#customized-answer-content [class*="dot-flashing"] {
  display: none !important;
}

/* 替换为SVG SMIL跳动爱心 */
#customized-answer-content .flex.items-center.justify-center.w-6.h-5 {
  position: relative !important;
  width: 36px !important;
  height: 30px !important;
}

#customized-answer-content .flex.items-center.justify-center.w-6.h-5::before {
  content: '' !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="%23FF85A2" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"><animateTransform attributeName="transform" type="scale" values="1; 1.25; 1" keyTimes="0; 0.5; 1" dur="0.7s" repeatCount="indefinite" transform-origin="center" /></path></svg>') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* ==========================================
   5. 评论区美化
   ========================================== */
.absolute.bottom-0.z-20.inset-x-0.bg-white {
  border-radius: 28px 28px 0 0 !important;
  border-top: 4px solid #FF85A2 !important;
  box-shadow: 0 -10px 30px rgba(255, 133, 162, 0.15) !important;
  background: #FFFDFE !important;
}

/* 评分星星 */
.MuiRating-iconFilled {
  color: #FF85A2 !important;
}
.MuiRating-iconEmpty {
  color: #FFE4EC !important;
}

/* 评论输入框 */
.flex.flex-col.border-\[1\.5px\].border-gray-200 {
  border-radius: 16px !important;
  border: 2px solid #FFB6C1 !important;
  background: #FFFFFF !important;
}

/* 评论发送按钮 */
svg[data-icon="Send03"] {
  color: #FF85A2 !important;
  transition: transform 0.2s ease !important;
}
svg[data-icon="Send03"]:hover {
  transform: scale(1.2) !important;
}