/*
 * 设定：失忆女友复健计划：每天告诉她一个新的“关系”
 * 风格：纯白病房、记忆碎片、谎言与依赖
 * 核心设计理念：
 *   - 背景：病历纸的质感，以及若有若无的消毒水气息。
 *   - 颜色：纯白、浅蓝、柔和的珊瑚粉，营造洁净又略带忧郁的氛围。
 *   - 动画：缓慢浮动的光斑，如同记忆碎片。
 *   - 可读性：极致优先，深色文字在浅色背景上清晰可见。
 */

/* --- 隐藏平台自带的顶部装饰条 --- */
[class*="bg-[#F1CBCB]"],
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* --- 统一聊天框 (输入与输出共有) --- */
/* 病历夹与笔记本的质感 */
.bg-gray-100\/90.relative.inline-block {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 20, 30, 0.08), 0 0 0 1px rgba(93, 155, 155, 0.15) !important;
    border: none !important;
    overflow: hidden !important;
    position: relative !important;
    isolation: isolate !important;
    transition: all 0.3s ease-out !important;
}

.bg-gray-100\/90.relative.inline-block:hover {
    box-shadow: 0 15px 35px rgba(0, 20, 30, 0.12), 0 0 0 1px rgba(224, 130, 131, 0.3) !important;
}

/* --- 聊天框背景动效：记忆的光斑 --- */
.bg-gray-100\/90.relative.inline-block::before {
    content: '';
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: 0.4 !important;
    background-image: radial-gradient(circle at 20% 30%, rgba(224, 130, 131, 0.08) 0%, transparent 30%),
                      radial-gradient(circle at 80% 70%, rgba(93, 155, 155, 0.08) 0%, transparent 40%);
    animation: float-lights 15s infinite alternate ease-in-out !important;
}

@keyframes float-lights {
    0% { background-position: 20% 30%, 80% 70%; }
    100% { background-position: 25% 35%, 75% 65%; }
}

/* --- 聊天框内的主要文本内容 --- */
/* 写在病历上的文字 */
.markdown-body {
    color: #2c3e50 !important;
    font-family: 'Noto Sans SC', 'Helvetica Neue', 'Arial', sans-serif !important;
    line-height: 1.7 !important;
    font-size: 15px !important;
    z-index: 1 !important;
    position: relative !important;
    background: transparent !important;
}

.markdown-body strong {
    font-weight: 600 !important;
    color: #e08283 !important;
}

.markdown-body a {
    color: #5d9b9b !important;
    text-decoration: underline wavy rgba(93, 155, 155, 0.3) !important;
}

.markdown-body pre,
.markdown-body code {
    background-color: rgba(93, 155, 155, 0.08) !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    color: #2c3e50 !important;
    font-family: 'SF Mono', monospace !important;
    border: 1px solid rgba(0,0,0,0.03) !important;
}

.markdown-body blockquote {
    border-left: 4px solid #e08283 !important;
    color: #4a5a6a !important;
    padding-left: 18px !important;
    font-style: italic !important;
    background: rgba(224, 130, 131, 0.03) !important;
}

/* ========== 新增：details / summary 折叠块美化 (病历夹风格) ========== */
.markdown-body details {
    margin: 1.5em 0;
    border: 1px solid rgba(93, 155, 155, 0.25);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 12px rgba(0, 20, 30, 0.04);
    overflow: hidden;
    transition: all 0.2s ease;
}

.markdown-body details[open] {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 16px rgba(0, 20, 30, 0.06);
}

.markdown-body summary {
    padding: 1rem 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    background: linear-gradient(to right, rgba(93, 155, 155, 0.06), transparent);
    cursor: pointer;
    list-style: none; /* 隐藏默认三角 */
    position: relative;
    user-select: none;
    border-bottom: 1px solid transparent;
    transition: background 0.2s;
}

.markdown-body summary::-webkit-details-marker {
    display: none; /* 隐藏默认三角 */
}

.markdown-body summary::before {
    content: '📋';
    margin-right: 10px;
    font-size: 1.1em;
    opacity: 0.8;
}

/* 展开/折叠状态下的箭头指示器 */
.markdown-body summary::after {
    content: '▼';
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    color: #5d9b9b;
    transition: transform 0.25s;
}

.markdown-body details[open] summary::after {
    transform: translateY(-50%) rotate(180deg);
}

.markdown-body details[open] summary {
    border-bottom-color: rgba(93, 155, 155, 0.15);
}

.markdown-body summary:hover {
    background: rgba(93, 155, 155, 0.08);
}

/* details 内部内容增加内边距 */
.markdown-body details > :not(summary) {
    padding: 0.2rem 1.5rem 1.2rem 1.5rem;
    margin: 0;
}

/* ========== 新增：人物对话特殊美化框 (自动显示名字) ========== */
/* 使用方法：AI输出 <div class="dialogue-box" data-name="诗织">“对话内容...”</div> */
.markdown-body .dialogue-box {
    position: relative;
    margin: 1.8em 0 1.5em 0;
    padding: 1.8rem 1.5rem 1.2rem 1.5rem;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    border-radius: 20px 8px 20px 20px; /* 左下角直角，模仿对话框小尾巴 */
    border-left: 6px solid #e08283;
    box-shadow: 0 6px 14px rgba(224, 130, 131, 0.08);
    font-style: normal;
    color: #2c3e50;
}

/* 利用伪元素显示角色名字 (取自 data-name 属性) */
.markdown-body .dialogue-box::before {
    content: attr(data-name);
    position: absolute;
    top: -10px;
    left: 18px;
    background: #ffffff;
    padding: 0.25rem 1.2rem;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #e08283;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    border: 1px solid rgba(224, 130, 131, 0.2);
    backdrop-filter: blur(4px);
    letter-spacing: 0.3px;
}

/* 可选：对话内容中的引号美化 */
.markdown-body .dialogue-box p {
    margin-bottom: 0.5rem;
}

/* ========== 新增：心理活动特殊美化框 (自动显示“内心独白”或角色名) ========== */
/* 使用方法：AI输出 <div class="thought-box" data-name="诗织">“心理活动内容...”</div> 
   或省略 data-name 时默认显示“内心独白” */
.markdown-body .thought-box {
    position: relative;
    margin: 1.8em 0 1.5em 0;
    padding: 1.8rem 1.5rem 1.2rem 1.5rem;
    background: rgba(93, 155, 155, 0.04);
    backdrop-filter: blur(4px);
    border-radius: 12px 20px 20px 20px;
    border-left: 6px solid #5d9b9b;
    box-shadow: 0 6px 14px rgba(93, 155, 155, 0.06);
    font-style: italic;
    color: #3a5060;
}

.markdown-body .thought-box::before {
    content: attr(data-name);
    position: absolute;
    top: -10px;
    left: 18px;
    background: #f8fafc;
    padding: 0.25rem 1.2rem;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #5d9b9b;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    border: 1px solid rgba(93, 155, 155, 0.2);
    backdrop-filter: blur(4px);
    font-style: normal;
}

/* 如果没有提供 data-name，默认显示“内心独白” */
.markdown-body .thought-box:not([data-name])::before,
.markdown-body .thought-box[data-name=""]::before {
    content: "💭 内心独白";
}

/* 如果提供了 data-name 但希望前面加上特定图标，可以额外处理（保留名字即可） */

/* 兼容移动端细节 */
@media (max-width: 768px) {
    .markdown-body .dialogue-box,
    .markdown-body .thought-box {
        padding: 1.5rem 1rem 1rem 1rem;
        margin: 1.5em 0;
    }
    .markdown-body .dialogue-box::before,
    .markdown-body .thought-box::before {
        left: 12px;
        font-size: 0.8rem;
        padding: 0.2rem 1rem;
    }
}

/* --- 单独的输入聊天框 --- */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(224, 130, 131, 0.2) !important;
}

/* --- 聊天框底部操作按钮 --- */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: #5d9b9b !important;
    background-color: transparent !important;
    border-radius: 30px !important;
    padding: 4px 12px !important;
    font-size: 13px !important;
    transition: all 0.2s !important;
    border: 1px solid transparent !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    background-color: rgba(93, 155, 155, 0.08) !important;
    border-color: rgba(93, 155, 155, 0.2) !important;
    color: #2c3e50 !important;
}

/* 模型名称文本 */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: #e08283 !important;
    font-style: italic !important;
    opacity: 0.8 !important;
}

/* Token消耗文本 */
.text-orange-500 {
    color: #e08283 !important;
    font-weight: 500 !important;
}

/* --- 加载动画：心跳与等待 --- */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}

.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 24px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.flex.items-center.justify-center.w-6.h-5::before {
    content: '🕊️';
    position: absolute !important;
    font-size: 18px !important;
    animation: heartbeat 1.5s infinite ease-in-out !important;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* --- 移动端适配 --- */
@media (max-width: 768px) {
    .bg-gray-100\/90.relative.inline-block {
        border-radius: 16px !important;
    }
    .markdown-body {
        font-size: 14px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bg-gray-100\/90.relative.inline-block::before {
        animation: none !important;
    }
    .flex.items-center.justify-center.w-6.h-5::before {
        animation: none !important;
        opacity: 0.8 !important;
    }
}