/* =========================================
   公主恋人 - 皇家社交界 全局终极美化
   ========================================= */

/* =========================================
   1. 消息气泡与高清字体 (AI & User)
   ========================================= */

/* AI 消息气泡 (深紫与皇家红的交织) */
#customized-answer-content {
  background: linear-gradient(135deg, rgba(35, 18, 44, 0.9) 0%, rgba(27, 10, 33, 0.95) 100%) !important;
  border: 1px solid rgba(197, 160, 89, 0.4) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(107, 13, 24, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
  will-change: transform, box-shadow, border-color !important;
}

/* 用户 消息气泡 (暗黑与皇家金的尊贵) */
#customized-question-content {
  background: linear-gradient(135deg, rgba(21, 11, 28, 0.95) 0%, rgba(13, 7, 20, 0.98) 100%) !important;
  border: 1px solid rgba(197, 160, 89, 0.5) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(197, 160, 89, 0.15) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
  will-change: transform, box-shadow, border-color !important;
}

/* 🌟 高清字体修正：抛弃模糊的衬线体，使用高对比度无衬线黑体 */
#customized-answer-content .text-gray-900,
#customized-question-content .text-gray-900,
#customized-answer-content .markdown-body,
#customized-question-content .markdown-body {
  color: #f0ebf5 !important; /* 提亮为极浅的灰紫白 */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans SC", "PingFang SC", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  letter-spacing: 0.03em !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important; /* 锐利化文字边缘 */
  font-weight: 400 !important;
}

/* 强调文本与标题颜色 */
#customized-answer-content .markdown-body strong,
#customized-question-content .markdown-body strong {
  color: #e8d09b !important;
  text-shadow: 0 0 8px rgba(197, 160, 89, 0.4) !important;
  font-weight: 600 !important;
}
#customized-answer-content .markdown-body h1,
#customized-answer-content .markdown-body h2,
#customized-answer-content .markdown-body h3 {
  color: #e8d09b !important;
  font-family: 'Cinzel', 'Georgia', serif !important; /* 仅在标题保留古典英文字体 */
  text-shadow: 0 0 10px rgba(197, 160, 89, 0.3) !important;
}

/* 顶部装饰条改造 */
#customized-answer-content .bg-\[\#F1CBCB\] {
  background: linear-gradient(90deg, #6b0d18 0%, #9c1c2b 50%, #6b0d18 100%) !important;
  box-shadow: 0 2px 10px rgba(107, 13, 24, 0.6) !important;
}
#customized-question-content .bg-\[\#c9e1e9\] {
  background: linear-gradient(90deg, #8e6d2f 0%, #c5a059 50%, #8e6d2f 100%) !important;
  box-shadow: 0 2px 10px rgba(197, 160, 89, 0.6) !important;
}

/* =========================================
   2. 气泡悬浮烫金特效补丁
   ========================================= */

/* AI 气泡悬停：皇家红底色上的璀璨烫金光晕 */
#customized-answer-content:hover {
  border-color: #e8d09b !important;
  background: linear-gradient(135deg, rgba(45, 22, 55, 0.95) 0%, rgba(35, 15, 40, 0.98) 100%) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 20px rgba(197, 160, 89, 0.6), 0 0 45px rgba(232, 208, 155, 0.3), inset 0 0 25px rgba(197, 160, 89, 0.25) !important;
  transform: translateY(-3px) scale(1.005) !important;
}

/* 用户 气泡悬停：暗黑底色上的尊贵烫金光晕 */
#customized-question-content:hover {
  border-color: #e8d09b !important;
  background: linear-gradient(135deg, rgba(30, 15, 40, 0.98) 0%, rgba(20, 10, 25, 1) 100%) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), 0 0 25px rgba(197, 160, 89, 0.7), 0 0 50px rgba(232, 208, 155, 0.4), inset 0 0 20px rgba(197, 160, 89, 0.3) !important;
  transform: translateY(-3px) scale(1.005) !important;
}

/* 操作按钮悬停烫金 */
#customized-answer-content button:hover,
#customized-question-content button:hover {
  color: #e8d09b !important;
  filter: drop-shadow(0 0 8px rgba(197, 160, 89, 0.8)) !important;
  transform: scale(1.1) !important;
}

/* =========================================
   3. 状态栏精装订美化 (Details/Summary)
   ========================================= */

/* 📖 基础卡片容器：增加书脊与册子感 */
#customized-answer-content details {
  background: linear-gradient(135deg, rgba(27, 10, 33, 0.85) 0%, rgba(13, 7, 20, 0.95) 100%) !important;
  border: 1px solid rgba(197, 160, 89, 0.4) !important;
  border-left: 6px solid #8e6d2f !important; /* 暗金书脊 */
  border-radius: 4px 16px 16px 4px !important; /* 左侧直切，右侧圆润 */
  margin: 16px 0 !important;
  box-shadow: 4px 10px 25px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(107, 13, 24, 0.15) !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

#customized-answer-content details[open] {
  border-color: #c5a059 !important;
  border-left: 6px solid #c5a059 !important; /* 展开时书脊发亮 */
  box-shadow: 6px 15px 35px rgba(0, 0, 0, 0.7), 0 0 15px rgba(197, 160, 89, 0.2) !important;
  padding-bottom: 15px !important;
}

/* 嵌套的子级卡片（如酒馆记事薄） */
#customized-answer-content details details {
  margin: 12px 15px 12px 25px !important;
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px dashed rgba(197, 160, 89, 0.3) !important;
  border-left: 4px solid rgba(197, 160, 89, 0.5) !important;
  border-radius: 4px 10px 10px 4px !important;
  box-shadow: none !important;
}

/* 🏷️ 华丽的标题栏 (Summary) */
#customized-answer-content summary {
  background: linear-gradient(90deg, rgba(107, 13, 24, 0.7) 0%, rgba(35, 18, 44, 0.8) 50%, rgba(13, 7, 20, 0.8) 100%) !important;
  padding: 14px 20px !important;
  font-size: 1.15em !important;
  font-weight: bold !important;
  color: #e8d09b !important;
  cursor: pointer !important;
  list-style: none !important;
  border-bottom: 1px solid transparent !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8) !important;
  display: flex !important;
  align-items: center !important;
  letter-spacing: 1.5px !important;
}
#customized-answer-content summary::-webkit-details-marker { display: none !important; }

#customized-answer-content details[open] > summary {
  border-bottom: 1px solid rgba(197, 160, 89, 0.4) !important;
  background: linear-gradient(90deg, rgba(156, 28, 43, 0.8) 0%, rgba(35, 18, 44, 0.9) 100%) !important;
  margin-bottom: 12px !important;
}

/* 标题栏星芒图标 */
#customized-answer-content summary::before {
  content: '✦' !important;
  color: #c5a059 !important;
  margin-right: 12px !important;
  font-size: 1.2em !important;
  transition: transform 0.4s ease !important;
}
#customized-answer-content details[open] > summary::before {
  transform: rotate(90deg) scale(1.1) !important;
  text-shadow: 0 0 12px #c5a059, 0 0 20px #e8d09b !important;
}
#customized-answer-content summary:hover {
  color: #fffdf9 !important;
  text-shadow: 0 0 10px #c5a059 !important;
}

/* 📜 内页装订感排版 */
#customized-answer-content details > p, 
#customized-answer-content details > div,
#customized-answer-content details > ul {
  padding: 0 20px 0 15px !important;
  margin: 10px 20px 10px 20px !important;
  line-height: 1.8 !important;
  border-left: 1px dashed rgba(197, 160, 89, 0.3) !important; /* 内部装订虚线 */
}

#customized-answer-content details ul { list-style: none !important; }
#customized-answer-content details ul li {
  position: relative !important;
  margin-bottom: 8px !important;
}
#customized-answer-content details ul li::before {
  content: '✧' !important;
  position: absolute !important;
  left: -18px !important;
  color: #c5a059 !important;
  font-size: 0.9em !important;
}

/* ✨ 真·鎏金分割线 (HR) */
#customized-answer-content details hr {
  border: none !important;
  height: 2px !important;
  /* 中心高亮，两端渐隐的纯金质感 */
  background: linear-gradient(90deg, transparent 0%, rgba(197,160,89,0) 10%, #e8d09b 50%, rgba(197,160,89,0) 90%, transparent 100%) !important;
  /* 强烈的发光投影 */
  box-shadow: 0 1px 8px rgba(232, 208, 155, 0.8), 0 -1px 4px rgba(197, 160, 89, 0.5) !important;
  margin: 22px auto !important;
  width: 88% !important;
  opacity: 1 !important;
}

/* 记忆回廊表格 (Table) */
#customized-answer-content details table {
  width: calc(100% - 50px) !important;
  margin: 15px 20px 15px 30px !important;
  border-collapse: collapse !important;
  background: rgba(13, 7, 20, 0.6) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(197, 160, 89, 0.25) !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.4) !important;
}
#customized-answer-content details th {
  background: linear-gradient(180deg, rgba(107, 13, 24, 0.6) 0%, rgba(35, 18, 44, 0.8) 100%) !important;
  color: #e8d09b !important;
  padding: 12px 15px !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.4) !important;
  text-align: left !important;
}
#customized-answer-content details td {
  padding: 10px 15px !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.1) !important;
  transition: background 0.3s ease !important;
}
#customized-answer-content details tr:hover td {
  background: rgba(197, 160, 89, 0.08) !important;
  color: #fffdf9 !important;
}

/* 思维链特效 (COT) */
#customized-answer-content cot {
  display: block !important;
  background: linear-gradient(90deg, rgba(35, 18, 44, 0.6) 0%, transparent 100%) !important;
  border-left: 4px solid #8e6d2f !important;
  padding: 12px 18px !important;
  margin: 15px 20px 15px 25px !important;
  font-style: italic !important;
  color: #a89fbc !important;
  border-radius: 0 8px 8px 0 !important;
  position: relative !important;
}
#customized-answer-content cot::after {
  content: '⚜️' !important;
  position: absolute !important;
  right: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 0.2 !important;
  font-size: 1.5em !important;
}

/* =========================================
   4. 底部输入区及评论区
   ========================================= */

/* 输入框主容器 */
.bg-gradient-to-t { background: linear-gradient(to top, rgba(13, 7, 20, 1) 0%, rgba(13, 7, 20, 0.8) 50%, transparent 100%) !important; }
.bg-white.border-\[1\.5px\] {
  background: rgba(27, 10, 33, 0.85) !important;
  border: 1px solid rgba(197, 160, 89, 0.5) !important;
  border-radius: 20px !important;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.7), inset 0 0 10px rgba(197, 160, 89, 0.1) !important;
  backdrop-filter: blur(15px) !important;
}
#ai-chat-input { color: #e8d09b !important; }
#ai-chat-input::placeholder { color: rgba(197, 160, 89, 0.5) !important; }

/* 发送按钮 */
#ai-send-button {
  background: linear-gradient(135deg, #6b0d18 0%, #9c1c2b 100%) !important;
  border: 1px solid #c5a059 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 15px rgba(107, 13, 24, 0.6) !important;
  transition: all 0.3s ease !important;
}
#ai-send-button:hover {
  background: linear-gradient(135deg, #8e6d2f 0%, #c5a059 100%) !important;
  box-shadow: 0 0 20px rgba(197, 160, 89, 0.8) !important;
  transform: scale(1.05) !important;
}
#ai-send-button .icon-icon-send { color: #fffdf9 !important; }

/* 快捷按钮组 */
#ai-mod-button2 .MuiButton-outlinedPrimary {
  border-color: rgba(197, 160, 89, 0.4) !important;
  color: #c5a059 !important;
  background: rgba(35, 18, 44, 0.6) !important;
  border-radius: 12px !important;
}
#ai-mod-button2 .MuiButton-outlinedPrimary:hover {
  border-color: #c5a059 !important;
  background: rgba(107, 13, 24, 0.4) !important;
  box-shadow: 0 0 10px rgba(197, 160, 89, 0.3) !important;
}

/* 评论区面板 */
.absolute.bottom-0.z-20.inset-x-0.bg-white {
  background: linear-gradient(180deg, rgba(35, 18, 44, 0.98) 0%, rgba(13, 7, 20, 1) 100%) !important;
  border-top: 2px solid #c5a059 !important;
  border-radius: 24px 24px 0 0 !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8), inset 0 10px 20px rgba(197, 160, 89, 0.05) !important;
}
.absolute.bottom-0.z-20.inset-x-0.bg-white .text-lg.font-bold,
.absolute.bottom-0.z-20.inset-x-0.bg-white .text-grey-600,
.absolute.bottom-0.z-20.inset-x-0.bg-white .text-gray-900 { color: #e8d09b !important; }

.MuiRating-iconFilled { color: #c5a059 !important; filter: drop-shadow(0 0 5px rgba(197, 160, 89, 0.6)) !important; }
.MuiRating-iconEmpty { color: rgba(197, 160, 89, 0.3) !important; }

.flex.flex-col.border-\[1\.5px\].border-gray-200 {
  background: rgba(13, 7, 20, 0.6) !important;
  border: 1px solid rgba(197, 160, 89, 0.4) !important;
  border-radius: 12px !important;
}
textarea[placeholder="发表评论"] { color: #d1cbd6 !important; background: transparent !important; }
textarea[placeholder="发表评论"]::placeholder { color: rgba(197, 160, 89, 0.4) !important; }

.group.ml-0 div.break-all { color: #f0ebf5 !important; }
.group.ml-0 .text-sm.text-grey-600 span.font-bold { color: #c5a059 !important; }
button[aria-label="close"] { color: #c5a059 !important; transition: all 0.3s ease !important; }
button[aria-label="close"]:hover { color: #9c1c2b !important; transform: rotate(90deg) !important; }

/* =========================================
   公主恋人 - 加载动画与评论区深度美化补丁
   ========================================= */

/* =========================================
   5. 皇家档案载入动画 (Loading Animation)
   ========================================= */

/* 隐藏默认的平民点阵动画 */
#customized-answer-content [class*="dot-flashing"] {
    display: none !important;
}

/* 扩展加载容器，准备注入皇家魔力 */
#customized-answer-content .flex.items-center.justify-center.w-6.h-5 {
    width: 220px !important;
    height: 24px !important;
    position: relative !important;
    justify-content: flex-start !important;
    margin-left: 5px !important;
}

/* 注入 SVG SMIL 呼吸文字动画：[ 皇家档案拟定中... ] */
#customized-answer-content .flex.items-center.justify-center.w-6.h-5::before {
    content: '';
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    /* 采用 URL 编码的 SVG，带纯金呼吸闪烁效果 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='24'%3E%3Ctext x='0' y='16' fill='%23c5a059' font-family='Georgia, serif' font-size='14' font-weight='bold' letter-spacing='2'%3E[ 皇家档案拟定中... ]%3Canimate attributeName='opacity' values='0.4;1;0.4' dur='2s' repeatCount='indefinite'/%3E%3C/text%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    filter: drop-shadow(0 0 5px rgba(197, 160, 89, 0.5)) !important;
}


/* =========================================
   6. 私密茶话会沙龙 (评论区深度美化)
   ========================================= */

/* 评论列表项 - 皇家信签卡片化 */
.p-3.overflow-y-auto.h-full .group.ml-0 {
    background: rgba(35, 18, 44, 0.4) !important; /* 暗夜紫半透明底色 */
    border-left: 3px solid #8e6d2f !important; /* 暗金信签边框 */
    padding: 14px !important;
    margin-bottom: 12px !important;
    border-radius: 4px 16px 16px 4px !important; /* 书脊式圆角 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 评论卡片悬停互动 - 贵族的注目 */
.p-3.overflow-y-auto.h-full .group.ml-0:hover {
    background: linear-gradient(90deg, rgba(107, 13, 24, 0.4) 0%, rgba(35, 18, 44, 0.5) 100%) !important; /* 泛起暗红的暧昧底色 */
    border-left-color: #e8d09b !important; /* 边框化为亮金 */
    transform: translateX(6px) !important; /* 优雅地向右滑出 */
    box-shadow: -2px 6px 15px rgba(0,0,0,0.6), inset 0 0 15px rgba(197, 160, 89, 0.1) !important;
}

/* 评论区内的小按钮 (点赞、回复等) */
.p-3.overflow-y-auto.h-full .group.ml-0 button,
.p-3.overflow-y-auto.h-full .group.ml-0 span.cursor-pointer {
    color: #a89fbc !important;
    transition: all 0.2s ease !important;
}
.p-3.overflow-y-auto.h-full .group.ml-0 button:hover,
.p-3.overflow-y-auto.h-full .group.ml-0 span.cursor-pointer:hover {
    color: #e8d09b !important; /* 悬停变烫金 */
    text-shadow: 0 0 5px rgba(197, 160, 89, 0.6) !important;
}

/* 排序按钮组 (最新/最热) - 暗夜金边风格 */
.p-3.overflow-y-auto.h-full > .MuiStack-root:first-child .MuiButton-root {
    border-radius: 8px !important;
    font-family: 'Cinzel', 'Georgia', serif !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
}
/* 未选中状态 */
.p-3.overflow-y-auto.h-full > .MuiStack-root:first-child .MuiButton-outlinedPrimary {
    border-color: rgba(197, 160, 89, 0.4) !important;
    color: #c5a059 !important;
    background: rgba(27, 10, 33, 0.6) !important;
}
/* 选中状态 */
.p-3.overflow-y-auto.h-full > .MuiStack-root:first-child .MuiButton-containedPrimary {
    background: linear-gradient(135deg, #6b0d18 0%, #35122c 100%) !important;
    color: #e8d09b !important;
    border: 1px solid #c5a059 !important;
    box-shadow: 0 0 10px rgba(197, 160, 89, 0.3) !important;
}

/* 评论区专属鎏金滚动条 */
.p-3.overflow-y-auto.h-full::-webkit-scrollbar {
    width: 6px !important;
}
.p-3.overflow-y-auto.h-full::-webkit-scrollbar-track {
    background: rgba(13, 7, 20, 0.8) !important;
    border-radius: 3px !important;
}
.p-3.overflow-y-auto.h-full::-webkit-scrollbar-thumb {
    background: #8e6d2f !important;
    border-radius: 3px !important;
}
.p-3.overflow-y-auto.h-full::-webkit-scrollbar-thumb:hover {
    background: #c5a059 !important;
    box-shadow: 0 0 8px rgba(197, 160, 89, 0.8) !important;
}