css
.status-container{max-width:900px;margin:20px auto;padding:15px;font-family:'Microsoft YaHei',sans-serif;background:linear-gradient(135deg,rgba(10,10,20,0.95),rgba(30,10,20,0.95));border:2px solid rgba(255,20,147,0.3);border-radius:15px;box-shadow:0 8px 32px rgba(0,0,0,0.6);color:#e0e0e0;}
.status-container details{background:rgba(20,20,30,0.6);border:1px solid rgba(255,20,147,0.25);border-radius:10px;margin-bottom:15px;padding:15px;transition:all 0.3s;backdrop-filter:blur(5px);}
.status-container details:hover{border-color:rgba(255,20,147,0.5);box-shadow:0 4px 20px rgba(255,20,147,0.2);}
.status-container details[open]{background:rgba(30,20,40,0.8);border-color:rgba(255,20,147,0.6);box-shadow:0 6px 25px rgba(255,20,147,0.3);}
.status-container summary{cursor:pointer;font-size:18px;font-weight:bold;color:#ff69b4;padding:10px 15px;border-radius:8px;background:linear-gradient(90deg,rgba(139,0,0,0.4),rgba(75,0,130,0.4));transition:all 0.3s;position:relative;padding-left:35px;user-select:none;}
.status-container summary::before{content:'▶';position:absolute;left:12px;transition:transform 0.3s;color:#ff1493;}
.status-container details[open] summary::before{transform:rotate(90deg);}
.status-container summary:hover{background:linear-gradient(90deg,rgba(139,0,0,0.6),rgba(75,0,130,0.6));color:#ff1493;text-shadow:0 0 10px rgba(255,20,147,0.6);}
.status-container details[open] summary{background:linear-gradient(90deg,rgba(255,20,147,0.3),rgba(138,43,226,0.3));border-bottom:2px solid rgba(255,20,147,0.4);margin-bottom:15px;}
.status-container strong{color:#ff69b4;font-weight:bold;}
.status-container br{display:block;margin:5px 0;}
.status-container table{width:100%;border-collapse:collapse;margin-top:15px;background:rgba(10,10,20,0.5);border-radius:8px;overflow:hidden;}
.status-container table th{background:linear-gradient(135deg,rgba(139,0,0,0.6),rgba(75,0,130,0.6));color:#ff69b4;padding:12px 10px;text-align:left;font-size:14px;border-bottom:2px solid rgba(255,20,147,0.4);}
.status-container table td{padding:10px;border-bottom:1px solid rgba(255,20,147,0.15);color:#d0d0d0;font-size:14px;}
.status-container table tr:hover{background:rgba(255,20,147,0.1);}
.status-container table tr:last-child td{border-bottom:none;}
.status-container ul{list-style:none;padding-left:0;margin:10px 0;}
.status-container ul li{position:relative;padding:8px 0 8px 25px;color:#d0d0d0;line-height:1.6;}
.status-container ul li::before{content:'💗';position:absolute;left:0;top:8px;font-size:14px;}
.status-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:15px 0;}
.status-info-item{background:rgba(30,20,40,0.5);border:1px solid rgba(255,20,147,0.2);border-radius:8px;padding:10px 15px;transition:all 0.3s;}
.status-info-item:hover{border-color:rgba(255,20,147,0.5);background:rgba(40,30,50,0.7);}
.status-label{color:#ff69b4;font-weight:bold;font-size:14px;margin-bottom:5px;display:block;}
.status-value{color:#e0e0e0;font-size:15px;line-height:1.5;}
.status-bar{width:100%;height:20px;background:rgba(20,20,30,0.8);border:1px solid rgba(255,20,147,0.3);border-radius:10px;overflow:hidden;margin:8px 0;position:relative;}
.status-bar-fill{height:100%;background:linear-gradient(90deg,#ff1493,#ff69b4);border-radius:10px;transition:width 0.5s;position:relative;overflow:hidden;}
.status-bar-fill::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);animation:shimmer 2s infinite;}
@keyframes shimmer{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}
.status-bar-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:bold;text-shadow:0 1px 3px rgba(0,0,0,0.8);z-index:1;}
.danger-level{display:inline-block;padding:5px 15px;border-radius:20px;font-weight:bold;font-size:14px;text-align:center;margin:5px 0;}
.danger-safe{background:linear-gradient(135deg,rgba(0,128,0,0.3),rgba(0,100,0,0.5));border:1px solid rgba(0,255,0,0.4);color:#90ee90;}
.danger-low{background:linear-gradient(135deg,rgba(255,255,0,0.3),rgba(218,165,32,0.5));border:1px solid rgba(255,255,0,0.4);color:#ffff99;}
.danger-medium{background:linear-gradient(135deg,rgba(255,140,0,0.3),rgba(255,69,0,0.5));border:1px solid rgba(255,140,0,0.4);color:#ffb366;}
.danger-high{background:linear-gradient(135deg,rgba(255,0,0,0.3),rgba(139,0,0,0.5));border:1px solid rgba(255,0,0,0.4);color:#ff6666;}
.danger-extreme{background:linear-gradient(135deg,rgba(139,0,0,0.5),rgba(75,0,130,0.5));border:1px solid rgba(255,20,147,0.6);color:#ff1493;animation:pulse 1.5s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 10px rgba(255,20,147,0.5);}50%{box-shadow:0 0 25px rgba(255,20,147,0.9);}}
.memory-section{margin-top:20px;}
.memory-section h4{color:#ff69b4;font-size:16px;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid rgba(255,20,147,0.3);}
.action-list{background:rgba(30,20,40,0.6);border-radius:10px;padding:15px;}
.action-list ol{list-style:none;counter-reset:action-counter;padding:0;margin:0;}
.action-list ol li{counter-increment:action-counter;position:relative;padding:12px 15px 12px 45px;margin-bottom:10px;background:rgba(40,30,50,0.5);border:1px solid rgba(255,20,147,0.2);border-radius:8px;color:#d0d0d0;transition:all 0.3s;cursor:pointer;}
.action-list ol li::before{content:counter(action-counter);position:absolute;left:12px;top:50%;transform:translateY(-50%);width:25px;height:25px;background:linear-gradient(135deg,#ff1493,#8b008b);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:bold;font-size:14px;}
.action-list ol li:hover{background:rgba(50,40,60,0.8);border-color:rgba(255,20,147,0.5);transform:translateX(5px);box-shadow:0 4px 15px rgba(255,20,147,0.3);}
.quote-text{background:rgba(139,0,0,0.2);border-left:4px solid #ff1493;padding:10px 15px;margin:10px 0;border-radius:5px;font-style:italic;color:#ffb6c1;}
.relationship-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;margin-top:15px;}
.relationship-item{background:rgba(30,20,40,0.6);border:1px solid rgba(255,20,147,0.25);border-radius:8px;padding:12px;transition:all 0.3s;}
.relationship-item:hover{border-color:rgba(255,20,147,0.5);background:rgba(40,30,50,0.8);}
.relationship-item strong{display:block;margin-bottom:8px;font-size:15px;}
@media(max-width:768px){.status-container{padding:10px;margin:10px;}.status-container summary{font-size:16px;padding:8px 12px;padding-left:30px;}.status-container details{padding:12px;}.status-info-grid{grid-template-columns:1fr;gap:10px;}.status-container table{font-size:12px;}.status-container table th,.status-container table td{padding:8px 6px;}.relationship-grid{grid-template-columns:1fr;}}
css
/* 隐藏顶部装饰条 */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
display: none !important;
}
/* 统一聊天框基础样式 */
.bg-gray-100\/90.relative.inline-block {
background: linear-gradient(135deg, rgba(20, 10, 30, 0.92), rgba(40, 20, 40, 0.92)) !important;
border: 2px solid rgba(139, 0, 0, 0.6) !important;
border-radius: 15px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 20, 147, 0.1) !important;
backdrop-filter: blur(10px) !important;
padding: 20px !important;
margin: 15px 0 !important;
position: relative !important;
overflow: visible !important;
transition: all 0.3s ease !important;
}
/* 聊天框悬停效果 */
.bg-gray-100\/90.relative.inline-block:hover {
border-color: rgba(255, 20, 147, 0.7) !important;
box-shadow: 0 12px 40px rgba(139, 0, 0, 0.5), 0 0 30px rgba(255, 20, 147, 0.2) !important;
transform: translateY(-2px) !important;
}
/* 聊天框左侧装饰线 */
.bg-gray-100\/90.relative.inline-block::before {
content: '' !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 4px !important;
height: 100% !important;
background: linear-gradient(180deg, #ff1493, #8b008b, #4b0082) !important;
border-radius: 15px 0 0 15px !important;
}
/* 正文内容区域 - 确保高可读性 */
.markdown-body {
color: #f0f0f0 !important;
line-height: 1.8 !important;
font-size: 16px !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
background: transparent !important;
position: relative !important;
z-index: 1 !important;
}
/* 正文标题样式 */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
color: #ff69b4 !important;
text-shadow: 0 0 10px rgba(255, 105, 180, 0.5) !important;
border-bottom: 2px solid rgba(255, 20, 147, 0.3) !important;
padding-bottom: 8px !important;
margin-top: 20px !important;
margin-bottom: 15px !important;
}
/* 正文链接样式 */
.markdown-body a {
color: #ff69b4 !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(255, 105, 180, 0.4) !important;
transition: all 0.3s !important;
}
.markdown-body a:hover {
color: #ff1493 !important;
border-bottom-color: #ff1493 !important;
text-shadow: 0 0 8px rgba(255, 20, 147, 0.6) !important;
}
/* 正文代码块样式 */
.markdown-body code {
background: rgba(139, 0, 0, 0.3) !important;
color: #ffb6c1 !important;
padding: 2px 6px !important;
border-radius: 4px !important;
border: 1px solid rgba(255, 20, 147, 0.2) !important;
}
/* 正文引用块样式 */
.markdown-body blockquote {
border-left: 4px solid #ff1493 !important;
background: rgba(139, 0, 0, 0.2) !important;
padding: 10px 15px !important;
margin: 15px 0 !important;
border-radius: 5px !important;
color: #ffb6c1 !important;
}
/* 底部按钮区域 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
color: #ff69b4 !important;
transition: all 0.3s !important;
border-radius: 8px !important;
padding: 6px 12px !important;
}
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
background: rgba(255, 20, 147, 0.15) !important;
color: #ff1493 !important;
box-shadow: 0 0 15px rgba(255, 20, 147, 0.3) !important;
}
/* 模型名称文本 */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
color: #d0d0d0 !important;
font-size: 13px !important;
opacity: 0.8 !important;
}
/* Token消耗文本 */
.text-orange-500 {
color: #ffb366 !important;
font-weight: bold !important;
text-shadow: 0 0 5px rgba(255, 140, 0, 0.4) !important;
}
/* 隐藏默认加载动画 */
.style_dot-flashing__8L91Q.style_text__zGhNq {
display: none !important;
}
/* 自定义加载动画容器 */
.flex.items-center.justify-center.w-6.h-5 {
position: relative !important;
min-height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* 加载动画 - 使用SVG心跳效果 */
.flex.items-center.justify-center.w-6.h-5::before {
content: '' !important;
width: 30px !important;
height: 30px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff1493' 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'%3E%3Canimate attributeName='opacity' values='0.3;1;0.3' dur='1.5s' repeatCount='indefinite'/%3E%3CanimateTransform attributeName='transform' type='scale' values='0.8;1.1;0.8' dur='1.5s' repeatCount='indefinite' additive='sum'/%3E%3C/path%3E%3C/svg%3E") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
display: block !important;
}
/* 滚动条美化 */
.markdown-body::-webkit-scrollbar {
width: 8px !important;
}
.markdown-body::-webkit-scrollbar-track {
background: rgba(20, 10, 30, 0.5) !important;
border-radius: 4px !important;
}
.markdown-body::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #ff1493, #8b008b) !important;
border-radius: 4px !important;
transition: all 0.3s !important;
}
.markdown-body::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #ff69b4, #ff1493) !important;
box-shadow: 0 0 10px rgba(255, 20, 147, 0.5) !important;
}
/* 移动端适配 */
@media (max-width: 768px) {
.bg-gray-100\/90.relative.inline-block {
padding: 15px !important;
border-radius: 12px !important;
margin: 10px 0 !important;
}
.markdown-body {
font-size: 15px !important;
line-height: 1.7 !important;
}
.flex.items-center.justify-center.w-6.h-5::before {
width: 25px !important;
height: 25px !important;
}
}
/* 降低动效模式 */
@media (prefers-reduced-motion: reduce) {
.flex.items-center.justify-center.w-6.h-5::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff1493' 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'%3E%3Canimate attributeName='opacity' values='0.5;1;0.5' dur='3s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") !important;
}
}