/* =========================================
   🌸 《我心里危险的东西》主题 CSS（修复版）
   角色：市川京太郎 (深紫) × 山田杏奈 (樱花粉)
========================================= */

/* -----------------------------------------
   1. 状态栏 HTML 深度美化 (折叠面板与表格)
----------------------------------------- */
.markdown-body details {
    background: rgba(255, 240, 245, 0.6) !important;
    border: 2px solid #FFA6C9 !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 15px rgba(255, 166, 201, 0.2) !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}
.markdown-body details[open] {
    border-color: #2B2050 !important;
    box-shadow: 0 4px 15px rgba(43, 32, 80, 0.2) !important;
}

.markdown-body summary {
    background: linear-gradient(135deg, #2B2050 0%, #4A3B75 100%) !important;
    color: #FFFFFF !important;
    padding: 12px 18px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    list-style: none !important;
    position: relative !important;
    border-radius: 14px !important;
}
.markdown-body details[open] summary {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.markdown-body summary::-webkit-details-marker {
    display: none !important;
}
.markdown-body summary::after {
    content: '♥' !important;
    position: absolute !important;
    right: 18px !important;
    color: #FFA6C9 !important;
    transition: transform 0.3s ease !important;
}
.markdown-body details[open] summary::after {
    transform: rotate(180deg) !important;
    color: #98FF98 !important;
}

/* ✅ 修复点：将 > 替换为 >（子代选择器） */
.markdown-body details > div,
.markdown-body details > p {
    padding: 12px 16px !important;
    color: #2B2050 !important;
}

.markdown-body table {
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 10px 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}
.markdown-body th {
    background: #FFA6C9 !important;
    color: #2B2050 !important;
    padding: 10px !important;
    border: 1px solid #FFD1E3 !important;
    font-weight: bold !important;
}
.markdown-body td {
    padding: 10px !important;
    border: 1px solid #FFD1E3 !important;
    background: #FFFFFF !important;
    color: #4A3B75 !important;
}

/* 自定义 <cot> 标签 */
.markdown-body cot {
    display: block !important;
    background: rgba(43, 32, 80, 0.05) !important;
    padding: 10px 14px !important;
    border-left: 4px solid #2B2050 !important;
    border-radius: 0 8px 8px 0 !important;
    font-size: 0.9em !important;
    color: #4A3B75 !important;
    margin: 10px 0 !important;
    font-style: italic !important;
}

.markdown-body hr {
    border: none !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #FFA6C9, transparent) !important;
    margin: 16px 0 !important;
}

/* -----------------------------------------
   2. 消息气泡区 (对话美化)
----------------------------------------- */
#customized-question-content {
    background: linear-gradient(135deg, #FFF0F5 0%, #FFE4E1 100%) !important;
    border: 2px solid #FFA6C9 !important;
    border-radius: 20px 20px 4px 20px !important;
    box-shadow: 0 4px 15px rgba(255, 166, 201, 0.2) !important;
}
#customized-question-content .markdown-body {
    color: #2B2050 !important;
}
#customized-question-content .bg-\[\#c9e1e9\] {
    background: #FFA6C9 !important;
}

#customized-answer-content {
    background: #FFFFFF !important;
    border: 2px solid #2B2050 !important;
    border-radius: 20px 20px 20px 4px !important;
    box-shadow: 0 4px 15px rgba(43, 32, 80, 0.1) !important;
}
#customized-answer-content .markdown-body {
    color: #2C2C2C !important;
}
#customized-answer-content .bg-\[\#F1CBCB\] {
    background: #2B2050 !important;
}

#customized-answer-content .text-purple-500.mt-1 {
    color: #FFA6C9 !important;
}
#customized-answer-content .text-orange-500 {
    color: #98FF98 !important;
}

/* -----------------------------------------
   3. 加载动画 (双色心跳)
----------------------------------------- */
#customized-answer-content [class*="dot-flashing"] {
    display: none !important;
}
/* 兼容性优化：使用更稳健的选择器 */
#customized-answer-content .flex.items-center.justify-center.w-6.h-5::before {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 20'%3E%3Ccircle cx='15' cy='10' r='6' fill='%23FFA6C9'%3E%3Canimate attributeName='cy' values='10;4;10' dur='0.8s' repeatCount='indefinite' begin='0s'/%3E%3C/circle%3E%3Ccircle cx='35' cy='10' r='6' fill='%232B2050'%3E%3Canimate attributeName='cy' values='10;4;10' dur='0.8s' repeatCount='indefinite' begin='0.4s'/%3E%3C/circle%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
#customized-answer-content .flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
}

/* -----------------------------------------
   4. 界面控制区 (顶部与底部)
----------------------------------------- */
.sticky.top-0 {
    background: rgba(43, 32, 80, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important; /* Safari 兼容 */
    border-bottom: 2px solid #FFA6C9 !important;
}
#customized-model-selector .truncate,
#customized-model-selector svg[data-icon="ChevronDown"],
#header-setting-button,
.lucide-clock8.md\:hidden,
button .lucide-music2 {
    color: #FFFFFF !important;
}

#ai-mod-button2 .MuiButton-outlinedPrimary {
    border-color: #FFA6C9 !important;
    color: #2B2050 !important;
    background: #FFF0F5 !important;
    border-radius: 12px !important;
    text-transform: none !important;
    font-weight: 600 !important;
}
#ai-mod-button2 .MuiButton-outlinedPrimary:hover {
    background: #FFA6C9 !important;
    color: #FFFFFF !important;
}

.bg-gradient-to-t {
    background: linear-gradient(to top, rgba(255, 240, 245, 0.95) 0%, transparent 100%) !important;
}
.bg-white.border-\[1\.5px\] {
    background: #FFFFFF !important;
    border: 2px solid #FFA6C9 !important;
    border-radius: 24px !important;
    box-shadow: 0 4px 20px rgba(255, 166, 201, 0.2) !important;
}
#ai-chat-input {
    color: #2B2050 !important;
    font-weight: 500 !important;
}
#ai-chat-input::placeholder {
    color: #FFA6C9 !important;
    opacity: 0.8 !important;
}
#ai-chat-input::selection {
    background: #FFA6C9 !important;
    color: #FFFFFF !important;
}

#ai-send-button {
    background: linear-gradient(135deg, #2B2050 0%, #4A3B75 100%) !important;
    border-radius: 50% !important;
    transition: transform 0.2s ease !important;
}
#ai-send-button:hover {
    transform: scale(1.1) !important;
}
#ai-send-button .icon-icon-send {
    color: #FFA6C9 !important;
}

/* -----------------------------------------
   5. 评论区美化
----------------------------------------- */
.absolute.bottom-0.z-20.inset-x-0.bg-white {
    background: #FFF0F5 !important;
    border-top: 4px solid #FFA6C9 !important;
    border-radius: 24px 24px 0 0 !important;
}
.text-lg.font-bold.pl-3 {
    color: #2B2050 !important;
}
.MuiRating-iconFilled {
    color: #FFA6C9 !important;
}
.MuiRating-iconEmpty {
    color: rgba(255, 166, 201, 0.3) !important;
}
textarea[placeholder="发表评论"] {
    background: #FFFFFF !important;
    border: 2px solid #2B2050 !important;
    border-radius: 12px !important;
    color: #2B2050 !important;
    padding: 10px !important;
}
svg[data-icon="Send03"] {
    color: #FFFFFF !important;
    background: #2B2050 !important;
    border-radius: 50% !important;
    padding: 4px !important;
}