/* ==========================================
 * 模块一：消息气泡区 (真凉 vs 爱衣的对决)
 * ========================================== */

/* 用户消息气泡 (真凉的冰蓝伪装) */
#customized-question-content {
    background: linear-gradient(135deg, #E6F0FA 0%, #A2C2E6 100%) !important;
    box-shadow: 0 4px 12px rgba(162, 194, 230, 0.3) !important;
    border-radius: 16px 16px 4px 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* AI消息气泡 (爱衣的傲娇粉红) */
#customized-answer-content {
    background: linear-gradient(135deg, #FFF0F5 0%, #F4A7B9 100%) !important;
    box-shadow: 0 4px 12px rgba(244, 167, 185, 0.3) !important;
    border-radius: 16px 16px 16px 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* 消息文本高对比度适配 */
#customized-question-content .markdown-body,
#customized-answer-content .markdown-body {
    color: #2C3E50 !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    font-weight: 500 !important;
}

/* 顶部装饰条颜色替换 */
#customized-question-content .bg-\[\#c9e1e9\] {
    background-color: #89C4E1 !important; /* 加深冰蓝 */
}
#customized-answer-content .bg-\[\#F1CBCB\] {
    background-color: #F08A9F !important; /* 加深傲娇粉 */
}

/* 模型标识与Token消耗 (姬香的中二紫) */
#customized-answer-content .text-purple-500.mt-1,
#customized-answer-content .text-orange-500 {
    color: #C3B4D5 !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

/* ==========================================
 * 模块二：加载动画 (修罗场心跳)
 * ========================================== */

/* 隐藏默认闪烁点 */
#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: 30px !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,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath 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' fill='%23F4A7B9'%3E%3Canimate attributeName='transform' type='scale' values='1; 1.2; 1' dur='0.8s' repeatCount='indefinite' additive='sum'/%3E%3Canimate attributeName='fill' values='%23F4A7B9; %23A2C2E6; %23F4A7B9' dur='1.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* ==========================================
 * 模块三：界面控制区 (千和与姬香的领地)
 * ========================================== */

/* 顶部控制栏 (千和的活力橙底边) */
.sticky.top-0 {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 2px dashed #F8B862 !important;
    box-shadow: 0 4px 15px rgba(248, 184, 98, 0.1) !important;
}

/* 底部输入框容器 */
.bg-white.border-\[1\.5px\] {
    border-radius: 24px !important;
    border: 2px solid #C3B4D5 !important; /* 姬香紫边框 */
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 4px 20px rgba(195, 180, 213, 0.15) !important;
    transition: all 0.3s ease !important;
}

/* 输入框聚焦时变为修罗场粉色 */
.bg-white.border-\[1\.5px\]:focus-within {
    border-color: #F4A7B9 !important;
    box-shadow: 0 4px 20px rgba(244, 167, 185, 0.3) !important;
}

/* 发送按钮 (四色交织渐变) */
#ai-send-button {
    background: linear-gradient(45deg, #A2C2E6, #F4A7B9) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(244, 167, 185, 0.4) !important;
    transition: transform 0.2s !important;
}
#ai-send-button:hover {
    transform: scale(1.1) rotate(10deg) !important;
    background: linear-gradient(45deg, #F8B862, #C3B4D5) !important;
}
#ai-send-button .icon-icon-send {
    color: white !important;
}

/* 快捷按钮组 */
#ai-mod-button2 .MuiButton-outlinedPrimary {
    border-color: #A2C2E6 !important;
    color: #2C3E50 !important;
    border-radius: 12px !important;
    background: rgba(162, 194, 230, 0.1) !important;
}
#ai-mod-button2 .MuiButton-outlinedPrimary:hover {
    background: rgba(162, 194, 230, 0.3) !important;
}

/* ==========================================
 * 模块四：评论区 (吃瓜群众的剧场)
 * ========================================== */

/* 面板主容器 */
.absolute.bottom-0.z-20.inset-x-0.bg-white {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    border-top: 4px solid #F4A7B9 !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.08) !important;
}

/* 评分星星 (千和的橙色) */
.MuiRating-iconFilled {
    color: #F8B862 !important;
    filter: drop-shadow(0 0 2px rgba(248, 184, 98, 0.5)) !important;
}

/* 评论输入框 */
textarea[placeholder="发表评论"] {
    border-radius: 16px !important;
    border: 2px solid #E6F0FA !important;
    background: #FAFAFA !important;
    padding: 12px !important;
    transition: all 0.3s !important;
}
textarea[placeholder="发表评论"]:focus {
    border-color: #A2C2E6 !important;
    box-shadow: 0 0 10px rgba(162, 194, 230, 0.2) !important;
}

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

/* 评论列表项悬停效果 */
.group.ml-0:hover {
    background: linear-gradient(to right, rgba(244,167,185,0.05), transparent) !important;
    border-radius: 8px !important;
}
/* 
 * ==========================================
 * 《我女友与青梅竹马的惨烈修罗场》主题状态栏
 * ==========================================
 */

/* 根容器变量定义 */
.oreshura-board {
    --masuzu-blue: #A2C2E6; /* 夏川真凉 - 冰蓝 */
    --chiwa-orange: #F8B862; /* 春咲千和 - 活力橙 */
    --himeka-purple: #C3B4D5; /* 秋篠姬香 - 中二紫 */
    --ai-pink: #F4A7B9; /* 冬海爱衣 - 傲娇粉 */
    --text-main: #2C3E50;
    --bg-light: rgba(255, 255, 255, 0.85);
    
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif !important;
    color: var(--text-main) !important;
    line-height: 1.6 !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}

/* ================= 折叠面板 (Details) ================= */
.oreshura-board details {
    background: var(--bg-light) !important;
    border: 2px solid var(--ai-pink) !important;
    border-radius: 12px !important;
    margin-bottom: 15px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(244, 167, 185, 0.2) !important;
    transition: all 0.3s ease-in-out !important;
}

/* 展开状态的面板边框变为真凉蓝 */
.oreshura-board details[open] {
    border-color: var(--masuzu-blue) !important;
    box-shadow: 0 6px 20px rgba(162, 194, 230, 0.3) !important;
}

/* 嵌套的 details (如记忆配置区) 简化样式 */
.oreshura-board details details {
    border: 1px dashed var(--himeka-purple) !important;
    box-shadow: none !important;
    margin: 10px 15px !important;
    border-radius: 8px !important;
}

/* ================= 标题栏 (Summary) ================= */
.oreshura-board summary {
    background: linear-gradient(135deg, #FFF0F5 0%, #F0F8FF 100%) !important;
    color: var(--text-main) !important;
    padding: 12px 20px !important;
    font-weight: 700 !important;
    font-size: 1.05em !important;
    cursor: pointer !important;
    list-style: none !important; /* 隐藏默认箭头 */
    position: relative !important;
    border-bottom: 1px solid transparent !important;
    transition: background 0.3s !important;
}

/* 隐藏 Webkit 默认箭头 */
.oreshura-board summary::-webkit-details-marker {
    display: none !important;
}

/* 修罗场警告悬停效果 */
.oreshura-board summary:hover {
    background: repeating-linear-gradient(
        45deg,
        #FFF0F5,
        #FFF0F5 10px,
        #FFE4E1 10px,
        #FFE4E1 20px
    ) !important;
}

/* 展开后的标题底边框 */
.oreshura-board details[open] > summary {
    border-bottom: 1px solid var(--masuzu-blue) !important;
    background: #F0F8FF !important;
}

/* 自定义折叠图标 */
.oreshura-board summary::after {
    content: '💖' !important;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-size: 1.2em !important;
}

/* 展开后图标变为心碎（修罗场爆发） */
.oreshura-board details[open] > summary::after {
    content: '💔' !important;
    transform: translateY(-50%) rotate(180deg) !important;
    filter: drop-shadow(0 0 2px red) !important;
}

/* ================= 内容区域 ================= */
/* 选择 details 下除了 summary 之外的所有直接子元素 */
.oreshura-board details > *:not(summary) {
    padding: 10px 20px !important;
    margin: 0 !important;
}

/* 分割线美化 */
.oreshura-board hr {
    border: 0 !important;
    height: 2px !important;
    background: linear-gradient(to right, transparent, var(--chiwa-orange), var(--ai-pink), transparent) !important;
    margin: 15px 0 !important;
}

/* ================= 表格美化 (记忆区) ================= */
.oreshura-board table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 10px 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

.oreshura-board th {
    background: var(--chiwa-orange) !important;
    color: #fff !important;
    padding: 10px !important;
    text-align: left !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1) !important;
}

.oreshura-board td {
    padding: 10px !important;
    border-bottom: 1px solid #eee !important;
    background: #fff !important;
}

.oreshura-board tr:nth-child(even) td {
    background: #FFFAF0 !important; /* 极淡的橙色交替 */
}

.oreshura-board tr:hover td {
    background: #F0F8FF !important; /* 悬停变为真凉蓝 */
}

/* ================= 特殊标签美化 ================= */
/* 思维链 <cot> 标签 (真凉的秘密笔记本风格) */
.oreshura-board cot {
    display: block !important;
    background: #F5F5DC !important; /* 羊皮纸色 */
    border-left: 4px solid var(--himeka-purple) !important;
    padding: 10px 15px !important;
    margin: 10px 0 !important;
    font-family: 'Courier New', Courier, monospace !important;
    color: #555 !important;
    border-radius: 0 8px 8px 0 !important;
    position: relative !important;
}
.oreshura-board cot::before {
    content: '📝' !important;
    position: absolute !important;
    right: 10px !important;
    opacity: 0.5 !important;
}

/* 选项区域强调 (A/B/C/D) */
.oreshura-board p:has(> strong) {
    /* 如果你的选项是加粗的，这里会生效，增加选项的点击感 */
    padding: 5px 0 !important;
}

/* ==========================================
 * 模块一点五：气泡操作按钮专属发光特效 (战术 x 修罗场)
 * ========================================== */

/* 赋予所有操作按钮平滑的过渡动画基础 */
#customized-answer-content button,
#customized-question-content button {
    color: #888c94 !important; /* 默认静默灰 */
    transition: all 0.3s ease !important;
}

/* 用户气泡按钮悬停：硬核战术青色霓虹发光 (原汁原味) */
#customized-question-content button:hover {
    color: #00f0ff !important;
    filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.8)) !important;
}

/* AI气泡按钮悬停：修罗场傲娇粉色霓虹发光 (爱衣的暴击) */
#customized-answer-content button:hover {
    color: #FF69B4 !important; /* 采用高亮荧光粉以确保发光效果 */
    filter: drop-shadow(0 0 5px rgba(255, 105, 180, 0.8)) !important;
}