/* --- 
   主题：《💼黑丝女学生的秘密疏导中心💕》
   设计方案：【深渊霓虹与蕾丝吊带】
   设计师：AI Assistant
   核心理念：通过视觉元素，具象化“包裹在黑暗与诱惑中的脆弱纯洁”。
--- */

/* --- 基础重置与全局设定 --- */

/* 1. 【强制】隐藏平台默认的顶部彩色装饰条 */
/* 这是实现干净、沉浸式主题的第一步，必须执行。*/
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* --- 核心聊天框美化 (输入与输出共有) --- */

/* 2. 统一聊天框样式：定义基础结构、背景和核心光效 */
.bg-gray-100\/90.relative.inline-block {
    /* -- 基础结构 -- */
    border-radius: 18px !important; /* 更圆润的边角，增添柔和感 */
    border: 1px solid rgba(255, 105, 180, 0.4) !important; /* 纤细的桃红色边框，如同丝袜的锁边 */
    padding-top: 30px !important; /* 为顶部的“蕾丝吊带”装饰留出空间 */
    overflow: visible !important; /* 允许伪元素在聊天框外部显示 */
    isolation: isolate !important; /* 创建新的层叠上下文，确保伪元素背景在文本之下 */
    
    /* -- 背景：模拟黑丝质感与暗室氛围 -- */
    /* 使用深邃的紫黑色渐变，并叠加一层非常精细的斜向纹理，模拟尼龙织物质感 */
    background-image: 
        repeating-linear-gradient(
            -45deg, 
            transparent, 
            transparent 1px, 
            rgba(20, 0, 30, 0.3) 1px, 
            rgba(20, 0, 30, 0.3) 2px
        ),
        linear-gradient(145deg, #1a0f24, #0d0610) !important;
    background-color: #0d0610 !important; /* 备用纯黑背景 */
    
    /* -- 动态光效：霓虹呼吸辉光 -- */
    /* 使用box-shadow和animation实现，模拟霓虹灯的呼吸效果 */
    box-shadow: 0 0 8px rgba(255, 20, 147, 0.5), 0 0 16px rgba(255, 20, 147, 0.3) !important;
    animation: neon-pulse 4s infinite ease-in-out !important;
    
    /* -- 动画过渡 -- */
    transition: all 0.3s ease-in-out !important;
}

/* 3. 输入框的特殊标识 */
/* 当用户输入时，让边框和光晕更明亮，以示区分 */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
    border-color: rgba(255, 105, 180, 0.8) !important;
    box-shadow: 0 0 12px rgba(255, 105, 180, 0.8), 0 0 24px rgba(255, 105, 180, 0.6) !important;
}

/* 4. 定义霓虹呼吸动画 */
@keyframes neon-pulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(255, 20, 147, 0.5), 0 0 16px rgba(255, 20, 147, 0.3) !important;
    }
    50% {
        box-shadow: 0 0 14px rgba(255, 105, 180, 0.7), 0 0 28px rgba(255, 105, 180, 0.5) !important;
    }
}


/* --- 核心装饰：蕾丝吊带 (Lace Garter) --- */

/* 5. 使用 ::before 伪元素制作顶部的“蕾丝边” */
.bg-gray-100\/90.relative.inline-block::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important; /* 精准定位到边框上 */
    left: 0 !important;
    right: 0 !important;
    height: 25px !important; /* 蕾丝的高度 */
    z-index: 0 !important; /* 确保在内容之下，但在背景之上 */
    
    /* -- 使用SVG作为背景图片来创建复杂的蕾丝图案 -- */
    /* 这是一个内联的、经过Base64编码的SVG蕾丝图案，无需外部文件，兼容性好 */
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='p' width='50' height='25' patternUnits='userSpaceOnUse'%3E%3Cpath d='M25 0 C15 0 15 15 0 15 L0 25 L50 25 L50 15 C35 15 35 0 25 0 Z' fill='rgba(18, 9, 26, 0.95)' stroke='rgba(255,105,180,0.6)' stroke-width='0.5'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23p)'/%3E%3C/svg%3E") !important;
    background-repeat: repeat-x !important;
    background-size: 50px 25px !important;
    
    border-top-left-radius: 17px !important; /* 与父容器边角对齐 */
    border-top-right-radius: 17px !important;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10px, black 90%, transparent) !important;
    mask-image: linear-gradient(to right, transparent, black 10px, black 90%, transparent) !important;
}

/* 6. 使用 ::after 伪元素制作吊带中间的“蝴蝶结”装饰 */
.bg-gray-100\/90.relative.inline-block::after {
    content: '🎀' !important; /* 使用Emoji作为简单但有效的装饰 */
    position: absolute !important;
    top: -1px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-50%) !important; /* 精准居中 */
    font-size: 16px !important;
    z-index: 1 !important; /* 在蕾丝之上 */
    text-shadow: 0 0 5px #ff1493 !important; /* 给蝴蝶结加一点霓虹光感 */
    opacity: 0.8 !important;
}


/* --- 文本与内容可读性保障 --- */

/* 7. 【最高优先级】确保聊天框内的主要文本清晰可读 */
.markdown-body {
    background: transparent !important; /* 必须透明以显示聊天框的背景 */
    color: #F5F5F5 !important; /* 使用高亮的灰白色，比纯白更柔和，但对比度足够 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Mi Sans", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    z-index: 1 !important; /* 确保文本在所有背景装饰之上 */
    position: relative !important; /* 为z-index生效创建定位上下文 */
}

/* 8. 强调文本（加粗）的样式 */
.markdown-body strong, .markdown-body b {
    color: #FFC0CB !important; /* 使用淡粉色作为强调色，呼应主题 */
    font-weight: bold !important;
}

/* 9. 代码块样式，增加科技感与疏离感，与主题形成对比 */
.markdown-body pre {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 1px dashed rgba(255, 105, 180, 0.3) !important;
    border-radius: 8px !important;
}
.markdown-body code {
    color: #98f5ff !important; /* 使用一种赛博朋克风格的青色 */
}


/* --- 底部附加元素美化 --- */

/* 10. 底部所有操作按钮（复制、编辑等）的样式 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: #D3D3D3 !important; /* 使用亮灰色，清晰可见但比主文本稍暗 */
    transition: all 0.2s ease !important;
    text-shadow: 0 0 3px rgba(255, 105, 180, 0.5) !important;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    color: #FF69B4 !important; /* 鼠标悬浮时变为亮粉色 */
    background-color: rgba(255, 105, 180, 0.1) !important;
}

/* 11. 模型名称文本样式 */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: #A9A9A9 !important; /* 使用暗灰色，作为次要信息 */
    font-style: italic !important;
}

/* 12. Token消耗文本样式 */
.text-orange-500 {
    color: #8A2BE2 !important; /* 使用蓝紫色，与主题色系协调 */
    font-weight: bold !important;
    text-shadow: 0 0 5px rgba(138, 43, 226, 0.7) !important;
}


/* --- 定制化加载动画 --- */

/* 13. 隐藏默认的加载点动画 */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}

/* 14. 为加载动画的父容器设置基础样式 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 30px !important;
    height: 30px !important;
}

/* 15. 使用 ::before 伪元素插入并驱动SVG心跳动画 */
.flex.items-center.justify-center.w-6.h-5::before {
    content: '' !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    
    /* -- 核心：内联SMIL SVG动画，确保在任何环境下都能动 -- */
    /* 这是一个桃红色的爱心，通过SMIL的<animate>标签使其缩放，形成心跳效果 */
    /* Base64编码以避免特殊字符问题 */
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBmaWxsPSIjRkY2OUI0Ij48cGF0aCBkPSJNMCAxOTJDMCA4Ni4xIDg2LjEgMCAxOTIgMFMyNTYgMjEuMyAzMjAgNjRjNjQtNDIuNyAxMjgtNjQgMTkyLTY0czE5MiA4Ni4xIDE5MiAxOTJjMCAxMzEtMTM4LjUgMjU2LTMyMCA0NDhjLTE4MS41LTE5Mi0zMjAtMzE3LTMyMC00NDh6Ij48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InNjYWxlIiBkdXI9IjEuNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBrZXlUaW1lcz0iMDswLjU7MSIgdmFsdWVzPSIxIDE7MS4yIDEuMjswLjk1IDAuOTUiIGFkZGl0aXZlPSJzdW0iIGNhbGNNb2RlPSJzcGxpbmUiIGtleVNwbGluZXM9IjAuNDIgMCAwLjU4IDE7MC40MiAwIDAuNTggMSIvPjwvcGF0aD48L3N2Zz4=") !important;

    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* --- 响应式调整 --- */
/* 在窄屏幕（如移动设备）上，减小一些装饰元素，保持简洁 */
@media (max-width: 480px) {
    .bg-gray-100\/90.relative.inline-block {
        border-radius: 14px !important;
        padding-top: 10px !important; /* 缩小顶部空间 */
    }

    /* 在移动端隐藏复杂的蕾丝和蝴蝶结，避免拥挤 */
    .bg-gray-100\/90.relative.inline-block::before,
    .bg-gray-100\/90.relative.inline-block::after {
        display: none !important;
    }
    
    .markdown-body {
        font-size: 14px !important;
    }
}

/* --- 降低动态效果（对于开启了“减少动态效果”设置的用户） --- */
@media (prefers-reduced-motion: reduce) {
    .bg-gray-100\/90.relative.inline-block {
        animation: none !important; /* 关闭呼吸光效 */
    }

    /* 即使减少动效，也保留静态的心跳最后一帧，而不是空白 */
    .flex.items-center.justify-center.w-6.h-5::before {
        /* SMIL动画不受此媒体查询影响，这是它的优势。但为保险起见，可以附加一个CSS动画并在此处禁用 */
        animation: none !important;
    }
}