.group.ml-0 > .flex.items-start.gap-2{
font-family:"Microsoft YaHei","微软雅黑",sans-serif!important;
background-color:rgba(248,250,255,0.9)!important;
border-radius:20px!important;
padding:15px 20px!important;
width:100%!important;
box-shadow:0 16px 60px -12px rgba(74,158,255,0.3),inset 0 2px 4px rgba(255,255,255,1),0 0 0 2px rgba(255,255,255,0.8)!important;
border:1px solid rgba(255,255,255,0.9)!important;
transition:all 0.3s ease-in-out!important;
backdrop-filter:blur(30px) saturate(200%)!important;
-webkit-backdrop-filter:blur(30px) saturate(200%)!important;
}
.group.ml-0 > .flex.items-start.gap-2:hover{
transform:translateY(-5px)!important;
box-shadow:0 8px 25px rgba(74,158,255,0.15),inset 0 2px 4px rgba(255,255,255,1),0 0 0 2px rgba(255,255,255,0.8)!important;
background-color:rgba(250,252,255,0.95)!important;
border-color:rgba(74,158,255,0.5)!important;
}
.group.ml-0 .break-all{
white-space:pre-wrap!important;
line-height:1.6!important;
overflow-wrap:break-word!important;
word-wrap:break-word!important;
color:#34495e!important;
}
.group.ml-0 > .flex.items-start.gap-2 .text-grey-600{
color:#55708a!important;
}
.group.ml-0 > .flex.items-start.gap-2 .text-gray-500{
color:#798da3!important;
}
.group.ml-0 > .flex.items-start.gap-2 .text-gray-400{
color:#9ab0c7!important;
}
.group.ml-0 > .flex.items-start.gap-2 .font-bold{
color:#0d3866!important;
}
div[class*="__divider"][class*="__horizontal"]{
margin-top:10px!important;
margin-bottom:10px!important;
border-top:1px solid rgba(200,215,230,0.6)!important;
background:none!important;
}
@keyframes bg-scroll{
0%{background-position:0 0}
100%{background-position:200px 200px}
}
@keyframes pulse-npc{
0%,100%{opacity:0.6;transform:scale(1)}
50%{opacity:1;transform:scale(1.3)}
}
@keyframes pulse-user{
0%,100%{opacity:0.6;transform:scale(1)}
50%{opacity:1;transform:scale(1.3)}
}
@keyframes glow-text{
0%,100%{opacity:0.5}
50%{opacity:1}
}
@keyframes rotate-icon{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
@keyframes arknights-text-glow{
0%{opacity:0.7;text-shadow:0 0 8px rgba(74,158,255,0.3)}
50%{opacity:0.9;text-shadow:0 0 12px rgba(74,158,255,0.5),0 0 20px rgba(74,158,255,0.2)}
100%{opacity:1;text-shadow:0 0 16px rgba(74,158,255,0.6),0 0 24px rgba(74,158,255,0.3),0 0 32px rgba(74,158,255,0.1)}
}
@keyframes classUI-breathing-glow{
0%,100%{opacity:0.3;transform:translate(-50%,-50%) scale(0.8)}
50%{opacity:0.6;transform:translate(-50%,-50%) scale(1)}
}
.chat{
display:flex;
flex-direction:column;
gap:18px;
padding:32px 24px;
background:linear-gradient(135deg,#0a1929 0%,#0d2238 30%,#1a2332 60%,#0f1b2d 100%);
border:2px solid rgba(0,212,255,0.3);
border-left:5px solid #00d4ff;
border-radius:3px;
margin:24px 0;
position:relative;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
box-shadow:0 8px 32px rgba(0,0,0,0.6),0 4px 16px rgba(0,0,0,0.4),inset 0 1px 0 rgba(0,212,255,0.2);
overflow:hidden;
}
.chat::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-image:url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='hexGrid' x='0' y='0' width='86.6' height='100' patternUnits='userSpaceOnUse'%3E%3Cpath d='M43.3 0 L86.6 25 L86.6 75 L43.3 100 L0 75 L0 25 Z' fill='none' stroke='%2300d4ff' stroke-width='0.8' opacity='0.15'/%3E%3Ccircle cx='43.3' cy='50' r='3' fill='%2300e5ff' opacity='0.2'/%3E%3Cline x1='43.3' y1='25' x2='43.3' y2='75' stroke='%2300bcd4' stroke-width='0.5' opacity='0.1'/%3E%3C/pattern%3E%3Cpattern id='circuit' x='0' y='0' width='120' height='120' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 60 L30 60 L30 30 L90 30 L90 90 L60 90' stroke='%2300d4ff' stroke-width='1' fill='none' opacity='0.2'/%3E%3Ccircle cx='30' cy='60' r='4' fill='%2300e5ff' opacity='0.3'/%3E%3Ccircle cx='30' cy='30' r='4' fill='%2300e5ff' opacity='0.3'/%3E%3Ccircle cx='90' cy='30' r='4' fill='%2300e5ff' opacity='0.3'/%3E%3Ccircle cx='90' cy='90' r='4' fill='%2300e5ff' opacity='0.3'/%3E%3Crect x='25' y='55' width='10' height='10' fill='%2300bcd4' opacity='0.15'/%3E%3C/pattern%3E%3Cpattern id='dots' x='0' y='0' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='5' cy='5' r='1.5' fill='%2300d4ff' opacity='0.25'/%3E%3Ccircle cx='25' cy='25' r='1' fill='%2300e5ff' opacity='0.2'/%3E%3Cpath d='M15 15 L17 15 L17 17 L15 17 Z M15 13 L17 13 L17 15 L15 15 Z' fill='none' stroke='%2300bcd4' stroke-width='0.5' opacity='0.15'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='200' height='200' fill='url(%23hexGrid)'/%3E%3Crect width='200' height='200' fill='url(%23circuit)'/%3E%3Crect width='200' height='200' fill='url(%23dots)'/%3E%3C/svg%3E");
background-size:200px 200px;
background-position:0 0;
animation:bg-scroll 40s linear infinite;
opacity:0.6;
pointer-events:none;
z-index:0;
will-change:background-position;
}
.chat::after{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,212,255,0.03) 3px,rgba(0,212,255,0.03) 4px),radial-gradient(circle at 15% 20%,rgba(0,229,255,0.08) 0%,transparent 40%),radial-gradient(circle at 85% 80%,rgba(0,188,212,0.06) 0%,transparent 40%);
pointer-events:none;
z-index:0;
}
.chat > *{
position:relative;
z-index:1;
}
.bubble{
max-width:72%;
padding:16px 20px;
position:relative;
line-height:1.6;
word-wrap:break-word;
clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
box-shadow:0 4px 16px rgba(0,0,0,0.4),0 2px 8px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.1);
transition:transform 0.2s ease,box-shadow 0.2s ease;
overflow:hidden;
}
.bubble:hover{
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(0,0,0,0.5),0 3px 10px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.15);
}
.bubble.npc{
background:linear-gradient(135deg,#0a2540 0%,#0d3a5f 50%,#0f4463 100%);
border:2px solid rgba(0,212,255,0.5);
color:#e3f2fd;
align-self:flex-start;
border-left:5px solid #00e5ff;
box-shadow:0 4px 16px rgba(0,188,212,0.4),0 2px 8px rgba(0,168,204,0.3),inset 0 1px 0 rgba(0,229,255,0.2);
}
.bubble.npc::after{
content:'';
position:absolute;
top:3px;
right:3px;
width:8px;
height:8px;
background:radial-gradient(circle,#00e5ff 0%,transparent 70%);
border-radius:50%;
box-shadow:0 0 10px rgba(0,229,255,0.9);
animation:pulse-npc 2s ease-in-out infinite;
z-index:2;
}
.bubble.npc .name{
color:#00e5ff;
text-shadow:0 1px 4px rgba(0,229,255,0.5);
}
.bubble.npc .name::before{
color:#00d4ff;
text-shadow:0 0 8px rgba(0,212,255,0.8);
}
.bubble.npc .msg{
text-shadow:0 1px 2px rgba(0,0,0,0.3);
}
.bubble.user{
background:linear-gradient(135deg,#0f2a3f 0%,#1a3a52 50%,#234a63 100%);
border:2px solid rgba(0,212,255,0.4);
color:#e3f2fd;
align-self:flex-end;
border-right:5px solid #00bcd4;
clip-path:polygon(12px 0,100% 0,100% 100%,0 100%,0 12px);
box-shadow:0 4px 16px rgba(0,188,212,0.3),0 2px 8px rgba(0,168,204,0.25),inset 0 1px 0 rgba(0,229,255,0.15);
}
.bubble.user::after{
content:'';
position:absolute;
top:3px;
left:3px;
width:8px;
height:8px;
background:radial-gradient(circle,#00bcd4 0%,transparent 70%);
border-radius:50%;
box-shadow:0 0 10px rgba(0,188,212,0.8);
animation:pulse-user 2s ease-in-out infinite;
z-index:2;
}
.bubble.user .name{
color:#00bcd4;
text-shadow:0 1px 4px rgba(0,188,212,0.5);
}
.bubble.user .name::before{
color:#00acc1;
text-shadow:0 0 8px rgba(0,172,193,0.8);
}
.bubble.user .msg{
text-shadow:0 1px 2px rgba(0,0,0,0.3);
}
.bubble .name{
font-size:0.75em;
font-weight:700;
text-transform:uppercase;
letter-spacing:1.8px;
margin-bottom:10px;
display:block;
position:relative;
padding-left:14px;
z-index:1;
}
.bubble .name::before{
content:'▸';
position:absolute;
left:0;
font-size:1.3em;
}
.bubble .msg{
margin:0;
font-size:0.95em;
font-weight:400;
position:relative;
z-index:1;
}
.doc{
background:linear-gradient(180deg,#0a0e1a 0%,#0d1420 50%,#0f1624 100%);
border:2px solid rgba(0,212,255,0.3);
border-left:6px solid #00d4ff;
border-radius:2px;
padding:32px 36px;
margin:28px 0;
position:relative;
font-family:'Courier New',Consolas,monospace;
box-shadow:0 8px 24px rgba(0,0,0,0.6),0 4px 12px rgba(0,0,0,0.4),inset 0 1px 0 rgba(0,212,255,0.2);
overflow:hidden;
}
.doc::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,212,255,0.05) 2px,rgba(0,212,255,0.05) 3px);
pointer-events:none;
z-index:0;
}
.doc::after{
content:'[ CLASSIFIED DOCUMENT ]';
position:absolute;
top:14px;
right:18px;
font-size:0.65em;
color:rgba(0,212,255,0.6);
letter-spacing:3px;
font-weight:700;
text-shadow:0 0 10px rgba(0,212,255,0.7);
animation:glow-text 3s ease-in-out infinite;
z-index:2;
}
.doc > *{
position:relative;
z-index:1;
}
.doc .title{
color:#00e5ff;
font-size:1.4em;
font-weight:700;
margin:0 0 26px 0;
padding-bottom:16px;
border-bottom:2px solid rgba(0,212,255,0.5);
letter-spacing:1.8px;
text-transform:uppercase;
position:relative;
text-shadow:0 0 14px rgba(0,229,255,0.7);
}
.doc .title::before{
content:'◆';
margin-right:14px;
color:#00d4ff;
display:inline-block;
animation:rotate-icon 4s linear infinite;
}
.doc .content{
color:#e0e7ee;
font-size:0.95em;
line-height:1.9;
position:relative;
z-index:1;
}
.doc .content p{
margin:0 0 1.2em 0;
text-align:justify;
}
.doc .content p:last-child{
margin-bottom:0;
}
.tip{
position:relative;
display:inline-block;
color:#ffc107;
font-weight:600;
border-bottom:2px solid rgba(255,193,7,0.7);
cursor:help;
transition:all 0.3s ease;
z-index:9998;
}
.tip:hover{
color:#ffd54f;
border-bottom-color:#ffab00;
text-shadow:0 0 10px rgba(255,213,79,0.5);
}
.tip .text{
visibility:hidden;
width:320px;
background:linear-gradient(135deg,#0a0e1a 0%,#0d1420 50%,#0f1624 100%);
color:#e8f4f8;
text-align:left;
border:2px solid #00d4ff;
border-radius:2px;
padding:18px 20px;
position:fixed;
z-index:9999;
bottom:auto;
left:50%;
transform:translate(-50%,-100%) translateY(-20px);
margin-left:0;
opacity:0;
transition:opacity 0.3s ease,visibility 0.3s ease,transform 0.3s ease;
font-weight:400;
font-size:0.85em;
line-height:1.7;
box-shadow:0 12px 28px rgba(0,0,0,0.8),0 6px 14px rgba(0,0,0,0.6),inset 0 1px 0 rgba(0,212,255,0.3);
clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
pointer-events:none;
}
.tip .text::before{
content:'[ INFO ]';
display:block;
font-size:0.7em;
color:#00e5ff;
margin-bottom:12px;
letter-spacing:3px;
font-weight:700;
text-shadow:0 0 10px rgba(0,229,255,0.9);
}
.tip .text::after{
content:'';
position:absolute;
top:100%;
left:50%;
margin-left:-10px;
border-width:10px;
border-style:solid;
border-color:#00d4ff transparent transparent transparent;
filter:drop-shadow(0 3px 5px rgba(0,0,0,0.4));
}
.tip:hover .text{
visibility:visible;
opacity:1;
transform:translate(-50%,-100%) translateY(-10px);
pointer-events:auto;
}
.sticky.w-full.top-0.flex.items-center{
background:rgba(248,250,255,0.88)!important;
border-bottom:1px solid rgba(74,158,255,0.4)!important;
backdrop-filter:blur(28px) saturate(180%)!important;
-webkit-backdrop-filter:blur(28px) saturate(180%)!important;
height:3.1rem!important;
color:#2c3e50!important;
font-family:'Helvetica Neue','Roboto','Segoe UI',Arial,sans-serif!important;
font-weight:600!important;
z-index:10!important;
padding-top:max(0px,env(safe-area-inset-top))!important;
height:calc(3.5rem + max(0px,env(safe-area-inset-top)))!important;
box-shadow:0 4px 20px rgba(74,158,255,0.1);
}
.sticky.w-full.top-0.flex.items-center .inline-flex.items-center{
background:rgba(74,158,255,0.1)!important;
color:#0d3866!important;
border:1px solid rgba(74,158,255,0.3)!important;
font-size:0.75rem!important;
font-weight:700!important;
letter-spacing:0.05em;
border-radius:6px;
box-shadow:inset 0 0 4px rgba(74,158,255,0.1);
}
#ai-model-selector .group{
background:rgba(255,255,255,0.6)!important;
border:1px solid rgba(200,215,230,0.6)!important;
border-radius:8px!important;
padding:0 8px!important;
height:2rem!important;
transition:all 0.3s ease;
}
#ai-model-selector .group:hover{
border-color:rgba(74,158,255,0.7)!important;
box-shadow:0 0 8px rgba(74,158,255,0.2);
background:rgba(255,255,255,0.7)!important;
}
#ai-model-selector .truncate{
font-size:13px!important;
font-weight:600!important;
color:#34495e!important;
font-family:'Helvetica Neue','Roboto','Segoe UI',Arial,sans-serif!important;
transition:color 0.3s ease;
}
#ai-model-selector .group:hover .truncate{
color:#0056b3!important;
}
#ai-model-selector svg{
color:#34495e!important;
transition:color 0.3s ease;
}
#ai-model-selector .group:hover svg{
color:#0056b3!important;
}
#header-setting-button{
border-radius:8px!important;
background:rgba(255,255,255,0.6)!important;
border:1px solid rgba(200,215,230,0.6)!important;
transition:all 0.3s ease;
}
#header-setting-button:hover{
border-color:rgba(74,158,255,0.7)!important;
box-shadow:0 0 8px rgba(74,158,255,0.25);
background:rgba(255,255,255,0.7)!important;
}
#header-setting-button svg{
color:#34495e!important;
}
.p-\[5\.5px\].max-h-\[150px\]{
background:rgba(248,250,255,0.8)!important;
border:1.5px solid rgba(74,158,255,0.4)!important;
border-radius:14px!important;
box-shadow:0 4px 12px rgba(74,158,255,0.1)!important;
padding:6px!important;
backdrop-filter:blur(16px)!important;
-webkit-backdrop-filter:blur(16px)!important;
width:auto!important;
max-width:95%!important;
margin-left:auto!important;
margin-right:auto!important;
}
#ai-chat-input{
background:rgba(255,255,255,0.8)!important;
border-radius:10px!important;
border:1px solid rgba(200,215,230,0.7)!important;
font-family:"Noto Sans SC","Microsoft YaHei",sans-serif!important;
font-size:14px!important;
line-height:1!important;
color:#2c3e50!important;
caret-color:#4a9eff!important;
padding:10px 44px 10px 10px!important;
height:auto!important;
max-height:120px!important;
resize:none!important;
outline:none!important;
transition:all 0.3s ease;
field-sizing:content!important;
}
#ai-chat-input::placeholder{
color:rgba(44,62,80,0.5)!important;
}
#ai-chat-input:focus{
border-color:#4a9eff!important;
box-shadow:0 0 8px rgba(74,158,255,0.3)!important;
background:rgba(255,255,255,0.9)!important;
}
.p-\[5\.5px\].max-h-\[150px\] .flex.items-center.px-1{
background:rgba(74,158,255,0.1)!important;
color:#0d3866!important;
border-radius:6px!important;
border:1px solid rgba(74,158,255,0.25)!important;
}
.p-\[5\.5px\].max-h-\[150px\] .mx-1{
background:rgba(74,158,255,0.2)!important;
}
#ai-send-button{
border-radius:8px!important;
background:rgba(255,255,255,0.6)!important;
border:1px solid rgba(200,215,230,0.6)!important;
transition:all 0.3s ease;
}
#ai-send-button:hover{
background:rgba(74,158,255,0.1)!important;
border-color:rgba(74,158,255,0.7)!important;
box-shadow:0 0 8px rgba(74,158,255,0.2);
}
#ai-send-button svg{
color:#34495e!important;
transition:color 0.3s ease;
}
#ai-send-button:hover svg{
color:#0056b3!important;
}
[class*="dot-flashing"]{
display:none!important;
}
div:has(> [class*="dot-flashing"]){
width:100%!important;
height:auto!important;
min-height:80px!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
align-items:center!important;
background:linear-gradient(135deg,rgba(248,250,255,0.95),rgba(240,247,255,0.98))!important;
border:1px solid rgba(74,158,255,0.25)!important;
border-radius:16px!important;
backdrop-filter:blur(24px)!important;
box-shadow:0 12px 40px rgba(74,158,255,0.1),inset 0 1px 0 rgba(255,255,255,0.6)!important;
position:relative!important;
overflow:hidden!important;
}
div:has(> [class*="dot-flashing"])::before{
content:''!important;
position:absolute!important;
top:50%!important;
left:50%!important;
transform:translate(-50%,-50%)!important;
width:60px!important;
height:60px!important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3ClinearGradient id='mainGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%234a9eff'%3E%3Canimate attributeName='stop-color' values='%234a9eff;%2366b3ff;%238ac5ff;%234a9eff' dur='3s' repeatCount='indefinite'/%3E%3C/stop%3E%3Cstop offset='50%25' stop-color='%2366b3ff'%3E%3Canimate attributeName='stop-color' values='%2366b3ff;%238ac5ff;%234a9eff;%2366b3ff' dur='3s' repeatCount='indefinite'/%3E%3C/stop%3E%3Cstop offset='100%25' stop-color='%238ac5ff'%3E%3Canimate attributeName='stop-color' values='%238ac5ff;%234a9eff;%2366b3ff;%238ac5ff' dur='3s' repeatCount='indefinite'/%3E%3C/stop%3E%3C/linearGradient%3E%3CradialGradient id='coreGrad'%3E%3Cstop offset='0%25' stop-color='%23ffffff' stop-opacity='0.9'/%3E%3Cstop offset='70%25' stop-color='%234a9eff' stop-opacity='0.7'/%3E%3Cstop offset='100%25' stop-color='%234a9eff' stop-opacity='0.3'/%3E%3C/radialGradient%3E%3Cfilter id='glow' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='3' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(60,60)'%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 0 0;360 0 0' dur='4s' repeatCount='indefinite'/%3E%3Cpolygon points='-25,-43.3 25,-43.3 50,0 25,43.3 -25,43.3 -50,0' fill='none' stroke='url(%23mainGrad)' stroke-width='2.5' filter='url(%23glow)' opacity='0.8'/%3E%3C/g%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' values='360 0 0;0 0 0' dur='3s' repeatCount='indefinite'/%3E%3Cpolygon points='-18,-31.2 18,-31.2 36,0 18,31.2 -18,31.2 -36,0' fill='none' stroke='url(%23mainGrad)' stroke-width='2' opacity='0.6'/%3E%3C/g%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 0 0;-360 0 0' dur='6s' repeatCount='indefinite'/%3E%3Cpolygon points='-12,-20.8 12,-20.8 24,0 12,20.8 -12,20.8 -24,0' fill='url(%23coreGrad)' opacity='0.4'/%3E%3C/g%3E%3Ccircle cx='0' cy='0' r='8' fill='url(%23coreGrad)' opacity='0.9'%3E%3Canimate attributeName='r' values='6;10;6' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.9;0.6;0.9' dur='2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cg opacity='0.7'%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 0 0;360 0 0' dur='8s' repeatCount='indefinite'/%3E%3Cline x1='-20' y1='0' x2='20' y2='0' stroke='url(%23mainGrad)' stroke-width='1.5' stroke-dasharray='4,2'%3E%3Canimate attributeName='stroke-dashoffset' values='0;6' dur='1s' repeatCount='indefinite'/%3E%3C/line%3E%3Cline x1='0' y1='-20' x2='0' y2='20' stroke='url(%23mainGrad)' stroke-width='1.5' stroke-dasharray='4,2'%3E%3Canimate attributeName='stroke-dashoffset' values='0;6' dur='1s' repeatCount='indefinite'/%3E%3C/line%3E%3C/g%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 0 0;360 0 0' dur='5s' repeatCount='indefinite'/%3E%3Ccircle cx='30' cy='0' r='2' fill='%234a9eff' opacity='0.8'%3E%3Canimate attributeName='opacity' values='0.8;0.3;0.8' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='-30' cy='0' r='2' fill='%2366b3ff' opacity='0.8'%3E%3Canimate attributeName='opacity' values='0.3;0.8;0.3' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='0' cy='30' r='2' fill='%238ac5ff' opacity='0.8'%3E%3Canimate attributeName='opacity' values='0.8;0.3;0.8' dur='1.5s' begin='0.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='0' cy='-30' r='2' fill='%234a9eff' opacity='0.8'%3E%3Canimate attributeName='opacity' values='0.3;0.8;0.3' dur='1.5s' begin='0.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E")!important;
background-size:contain!important;
background-repeat:no-repeat!important;
background-position:center!important;
filter:drop-shadow(0 0 12px rgba(74,158,255,0.4))!important;
}
div:has(> [class*="dot-flashing"])::after{
content:'Neural Network Processing...'!important;
position:absolute!important;
bottom:16px!important;
left:50%!important;
transform:translateX(-50%)!important;
font-family:"Orbitron","Share Tech Mono","Microsoft YaHei",monospace!important;
font-size:13px!important;
font-weight:600!important;
color:#4a9eff!important;
letter-spacing:0.15em!important;
text-transform:uppercase!important;
animation:arknights-text-glow 2.5s ease-in-out infinite alternate!important;
text-shadow:0 0 10px rgba(74,158,255,0.4)!important;
}
div.group.relative > div.relative.inline-block.bg-gray-100\/90{
background:rgba(248,250,255,0.9);
color:#2c3e50;
border-radius:20px;
border:1px solid rgba(255,255,255,0.9);
box-shadow:0 16px 60px -12px rgba(74,158,255,0.3),inset 0 2px 4px rgba(255,255,255,1),0 0 0 2px rgba(255,255,255,0.8);
backdrop-filter:blur(30px) saturate(200%);
-webkit-backdrop-filter:blur(30px) saturate(200%);
position:relative;
overflow:hidden;
}
div.group.relative > div.relative.inline-block.bg-gray-100\/90::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-image:radial-gradient(circle at 1px 1px,rgba(74,158,255,0.12) 1px,transparent 0);
background-size:24px 24px;
opacity:0.6;
pointer-events:none;
z-index:0;
}
div.group.relative > div.relative.inline-block.bg-gray-100\/90::after{
content:'';
position:absolute;
top:50%;
left:50%;
width:200%;
height:200%;
background:radial-gradient(circle,rgba(74,158,255,0.15) 0%,transparent 50%);
transform:translate(-50%,-50%);
animation:classUI-breathing-glow 8s infinite ease-in-out;
z-index:0;
pointer-events:none;
}
.styled-prose-container{
font-family:'Helvetica Neue','Roboto','Segoe UI',Arial,sans-serif;
position:relative;
z-index:1;
}
.styled-prose-container br{
line-height:1.2;
}
.styled-prose-container details{
background:rgba(255,255,255,0.6);
border-radius:12px;
margin:14px 0;
overflow:hidden;
border:1px solid rgba(200,215,230,0.6);
box-shadow:0 4px 15px rgba(74,158,255,0.08),inset 0 1px 1px rgba(255,255,255,0.6),inset 0 -1px 0 rgba(200,215,230,0.5);
transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
font-size:15px;
line-height:1.9;
padding:0 22px 18px 22px;
color:#34495e;
}
.styled-prose-container details:hover{
transform:translateY(-3px) scale(1.01);
box-shadow:0 8px 25px rgba(74,158,255,0.15),inset 0 1px 1px rgba(255,255,255,0.6),inset 0 -1px 0 rgba(200,215,230,0.5);
border-color:rgba(74,158,255,0.5);
}
.styled-prose-container details summary{
background:transparent;
padding:16px 50px 16px 22px;
margin:0 -22px;
font-weight:700;
font-size:16px;
cursor:pointer;
color:#0d3866;
text-shadow:0 1px 2px rgba(255,255,255,0.8);
letter-spacing:0.8px;
position:relative;
list-style:none;
border-bottom:1px solid rgba(200,215,230,0.6);
transition:all 0.3s ease;
}
.styled-prose-container details summary::-webkit-details-marker{
display:none;
}
.styled-prose-container details summary::before{
content:'';
position:absolute;
right:22px;
top:50%;
width:8px;
height:8px;
border-right:2px solid rgba(74,158,255,0.8);
border-bottom:2px solid rgba(74,158,255,0.8);
transform:translateY(-60%) rotate(45deg);
transition:transform 0.35s cubic-bezier(0.4,0,0.2,1),border-color 0.3s ease;
}
.styled-prose-container details summary:hover::before{
border-color:#0056b3;
}
.styled-prose-container details[open] > summary{
background:linear-gradient(180deg,rgba(74,158,255,0.12),transparent);
border-bottom-color:rgba(74,158,255,0.6);
color:#0056b3;
padding-top:18px;
margin-bottom:18px;
}
.styled-prose-container details[open] > summary::before{
transform:translateY(-40%) rotate(225deg);
}
.styled-prose-container details > *:not(summary){
padding:0;
line-height:inherit;
font-size:inherit;
color:inherit;
background:transparent;
}
.classUI-story{
background:linear-gradient(145deg,rgba(248,250,255,0.95),rgba(238,242,250,0.85));
border:1px solid rgba(74,158,255,0.4);
border-radius:14px;
padding:24px 28px;
margin:20px 0;
color:#1a1a2e;
font-size:16px;
line-height:1.9;
box-shadow:inset 0 3px 12px rgba(255,255,255,1),0 0 0 2px rgba(255,255,255,0.7);
position:relative;
}
.classUI-story::before,.classUI-story::after{
content:'';
position:absolute;
width:20px;
height:20px;
border-color:rgba(74,158,255,0.7);
border-style:solid;
transition:all 0.4s ease;
}
.classUI-story::before{
top:10px;
left:10px;
border-width:2px 0 0 2px;
border-top-left-radius:4px;
}
.classUI-story::after{
bottom:10px;
right:10px;
border-width:0 2px 2px 0;
border-bottom-right-radius:4px;
}
.classUI-story:hover::before,.classUI-story:hover::after{
transform:scale(1.1);
border-color:#0056b3;
}
.classUI-memory{
background:rgba(255,255,255,0.7);
border-color:rgba(74,158,255,0.5);
padding-bottom:0;
}
.classUI-memory-section{
margin:0 0 18px 0;
padding:0;
background:transparent;
border:none;
}
.classUI-table{
width:100%;
border-collapse:collapse;
margin-top:8px;
border-radius:8px;
overflow:auto;
border:1px solid rgba(74,158,255,0.3);
box-shadow:0 4px 12px rgba(74,158,255,0.08);
display:block;
}
.classUI-table thead th{
background:linear-gradient(160deg,rgba(255,255,255,0.4),rgba(255,255,255,0.2));
color:#0d3866;
padding:14px 10px;
font-weight:700;
font-size:13px;
text-align:center;
border-bottom:2px solid rgba(74,158,255,0.6);
text-shadow:0 1px 1px rgba(255,255,255,0.7);
white-space:nowrap;
}
.classUI-table tbody td{
padding:12px 10px;
border-bottom:1px solid rgba(200,215,230,0.9);
background:rgba(255,255,255,0.7);
font-size:13px;
color:#34495e;
vertical-align:middle;
transition:background-color 0.3s ease;
}
.classUI-table tbody tr:last-child td{
border-bottom:none;
}
.classUI-table tbody tr:hover td{
background:rgba(74,158,255,0.15);
}
@media (max-width:768px){
.classUI-table{
display:block;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
border-radius:8px;
}
.classUI-table thead th{
font-size:11px;
padding:10px 6px;
min-width:60px;
}
.classUI-table tbody td{
font-size:11px;
padding:10px 6px;
min-width:60px;
}
}
@media (max-width:480px){
.classUI-table thead th{
font-size:10px;
padding:8px 4px;
min-width:50px;
}
.classUI-table tbody td{
font-size:10px;
padding:8px 4px;
min-width:50px;
}
}
.classUI-actions{
background:linear-gradient(180deg,rgba(255,255,255,0.3),transparent);
border:1px solid rgba(74,158,255,0.5);
border-radius:12px;
padding:18px 22px;
margin-top:18px;
color:#0d3866;
font-weight:600;
font-size:15px;
line-height:1.8;
box-shadow:0 4px 15px rgba(74,158,255,0.1);
}
.MuiStack-root.text-purple-500.mt-1.css-1kz283j{
background:rgba(245,248,255,0.85)!important;
border:1px solid rgba(74,158,255,0.3)!important;
border-radius:8px!important;
padding:6px 12px!important;
display:flex!important;
align-items:center!important;
flex-wrap:wrap!important;
gap:0 12px!important;
transition:all 0.3s ease!important;
box-shadow:0 2px 10px rgba(74,158,255,0.08)!important;
margin-top:4px!important;
}
.MuiStack-root.css-1kz283j > p.MuiTypography-root.css-6c0gf2{
color:#0d3866!important;
font-weight:600!important;
font-size:14px!important;
margin:0!important;
display:flex!important;
align-items:center!important;
font-family:'Helvetica Neue','Roboto','Segoe UI',Arial,sans-serif!important;
}
.MuiStack-root.css-1kz283j > p.MuiTypography-root.css-6c0gf2::after{
content:'显示消耗'!important;
background:rgba(74,158,255,0.1)!important;
color:#0056b3!important;
border:1px solid rgba(74,158,255,0.2)!important;
border-radius:4px!important;
padding:2px 8px!important;
font-size:12px!important;
margin-left:10px!important;
cursor:pointer!important;
transition:all 0.2s ease!important;
font-family:'Helvetica Neue','Roboto','Segoe UI',Arial,sans-serif!important;
font-weight:600!important;
white-space:nowrap;
}
.MuiStack-root.css-1kz283j > p.MuiTypography-root.css-6c0gf2:hover::after{
background:rgba(74,158,255,0.9)!important;
border-color:rgba(74,158,255,0.4)!important;
color:#ffffff!important;
box-shadow:0 0 10px rgba(74,158,255,0.4)!important;
text-shadow:0 0 5px rgba(255,255,255,0.5)!important;
}
.MuiStack-root.css-1kz283j > p.MuiTypography-root.css-1x48u03{
color:#E6A23C!important;
font-size:13px!important;
font-weight:600!important;
margin:0!important;
padding:2px 6px!important;
background:rgba(230,162,60,0.1)!important;
border-radius:4px!important;
opacity:0!important;
max-width:0!important;
overflow:hidden!important;
white-space:nowrap!important;
transition:opacity 0.3s ease,max-width 0.4s ease,padding 0.4s ease!important;
}
.MuiStack-root.css-1kz283j > p.MuiTypography-root.css-6c0gf2:hover ~ p.MuiTypography-root.css-1x48u03{
opacity:1!important;
max-width:200px!important;
}
.classUI-audio-player{
width:100%;
height:35px;
margin-top:8px;
background:linear-gradient(135deg,rgba(255,255,255,0.7),rgba(245,248,255,0.8));
border-radius:18px;
border:1px solid rgba(74,158,255,0.2);
box-shadow:0 2px 8px rgba(74,158,255,0.15),inset 0 1px 1px rgba(255,255,255,0.9);
accent-color:#4a9eff;
}
.classUI-audio-player::-webkit-media-controls-panel{
background:transparent;
}
.classUI-audio-player::-webkit-media-controls-play-button,.classUI-audio-player::-webkit-media-controls-mute-button{
background-color:rgba(74,158,255,0.15);
border-radius:50%;
transition:background-color 0.3s ease;
filter:brightness(0) saturate(100%) invert(59%) sepia(80%) saturate(2250%) hue-rotate(190deg) brightness(102%) contrast(101%);
}
.classUI-audio-player::-webkit-media-controls-play-button:hover,.classUI-audio-player::-webkit-media-controls-mute-button:hover{
background-color:rgba(74,158,255,0.3);
}
.classUI-audio-player::-webkit-media-controls-current-time-display,.classUI-audio-player::-webkit-media-controls-time-remaining-display{
color:#2c3e50;
font-weight:600;
text-shadow:0 0 5px rgba(255,255,255,0.8);
}
.classUI-audio-player::-webkit-media-controls-timeline{
background-color:rgba(74,158,255,0.1);
border-radius:6px;
height:6px;
border:1px solid rgba(255,255,255,0.6);
box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);
}
.classUI-audio-player::-webkit-media-controls-volume-slider{
background-color:rgba(74,158,255,0.1);
border-radius:6px;
height:6px;
border:1px solid rgba(255,255,255,0.6);
}
.mb-2 > .shrink-0.w-10.h-10 {
    display: none;
}
@media (max-width:768px){
.chat{
padding:24px 16px;
gap:14px;
}
.chat::before{
animation-duration:60s;
}
.bubble{
max-width:85%;
padding:12px 16px;
}
.bubble .name{
font-size:0.7em;
letter-spacing:1.2px;
}
.bubble .msg{
font-size:0.9em;
}
.doc{
padding:24px 20px;
}
.doc .title::before{
animation:none;
}
.tip .text{
width:260px;
}
.styled-prose-container details{
font-size:14px;
line-height:1.8;
padding:0 16px 14px 16px;
}
.styled-prose-container details summary{
padding:14px 45px 14px 16px;
margin:0 -16px;
font-size:15px;
}
.styled-prose-container details[open] > summary{
padding-top:16px;
margin-bottom:16px;
}
.classUI-story{
font-size:15px;
}
}
@media (prefers-reduced-motion:reduce){
.chat::before{
animation:none;
}
.doc .title::before{
animation:none;
}
.doc::after{
animation:none;
}
.bubble.npc::after{
animation:none;
}
.bubble.user::after{
animation:none;
}
}
think {
  display: none !important;
}
.styled-prose-container calc {
  display: block !important;
  margin: 12px 0 !important;
  padding: 10px 14px 10px 40px !important;
  font-family: 'Consolas', 'SF Mono', monospace !important;
  font-size: 11px !important;
  line-height: 1.7 !important;
  color: #34495e !important;
  letter-spacing: 0.5px !important;
  background: rgba(255,255,255,0.6) !important;
  border: 1px solid rgba(200,215,230,0.6) !important;
  border-left: 3px solid rgba(74,158,255,0.6) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(74,158,255,0.08), inset 0 1px 1px rgba(255,255,255,0.6) !important;
  position: relative !important;
  overflow: hidden !important;
}
.styled-prose-container calc::before {
  content: '⚙' !important;
  position: absolute !important;
  left: 12px !important;
  top: 10px !important;
  font-size: 14px !important;
  color: rgba(74,158,255,0.6) !important;
}
.styled-prose-container calc::after {
  content: 'MEMORY CALC' !important;
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: rgba(74,158,255,0.4) !important;
  font-family: 'Consolas', monospace !important;
}
/* --- 功能状态栏 (Function Bar) — 明日方舟版 --- */
.styled-prose-container fbar {
  display: block !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #0d3866 !important;
  letter-spacing: 1.5px !important;
  padding: 8px 14px !important;
  margin: 8px 0 0 0 !important;
  border-top: 1px dashed rgba(74,158,255,0.2) !important;
  font-family: 'Helvetica Neue', 'Roboto', 'Segoe UI', Arial, sans-serif !important;
  line-height: 1.8 !important;
}
/* === 记忆存档区 === */
.styled-prose-container .s{padding:4px 0 0 0!important;font-size:14px!important;line-height:1.8!important;color:#34495e!important}
.styled-prose-container .s>.t{font-size:13px!important;font-weight:700!important;color:#0d3866!important;letter-spacing:1.2px!important;padding:10px 16px!important;margin:0 -22px!important;background:linear-gradient(135deg,rgba(74,158,255,.06),rgba(74,158,255,.12),rgba(74,158,255,.06))!important;border-left:3px solid #4a9eff!important;display:flex!important;align-items:center!important;gap:8px!important;font-family:'Helvetica Neue','Roboto','Segoe UI',sans-serif!important;position:relative!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(74,158,255,.1)!important}
.styled-prose-container .s>.t::before{content:''!important;width:6px!important;height:6px!important;background:#4a9eff!important;border-radius:50%!important;box-shadow:0 0 6px rgba(74,158,255,.5)!important;flex-shrink:0!important}
.styled-prose-container .s>.t::after{content:''!important;flex:1!important;height:1px!important;background:linear-gradient(90deg,rgba(74,158,255,.25),transparent)!important;margin-left:8px!important}
.styled-prose-container .s>strong{display:block!important;text-align:right!important;font-size:11px!important;font-weight:600!important;color:#4a9eff!important;letter-spacing:.5px!important;margin:6px 0!important;padding:0 4px!important;font-family:'Consolas','SF Mono',monospace!important;opacity:.7!important}
.styled-prose-container .s>hr{border:none!important;height:1px!important;margin:10px -22px!important;background:rgba(200,215,230,.5)!important}
/* 响应式 */
@media(max-width:768px){
.styled-prose-container .s>.t{font-size:12px!important;padding:8px 14px!important;margin:0 -16px!important;letter-spacing:1px!important}
.styled-prose-container .s>.t::before{width:5px!important;height:5px!important}
.styled-prose-container .s>strong{font-size:10px!important}
.styled-prose-container .s>hr{margin:8px -16px!important}
}
@media(max-width:480px){
.styled-prose-container .s>.t{font-size:11px!important;padding:6px 12px!important;margin:0 -12px!important;gap:6px!important}
.styled-prose-container .s>.t::before{width:4px!important;height:4px!important}
.styled-prose-container .s>strong{font-size:9px!important}
.styled-prose-container .s>hr{margin:6px -12px!important}
}
[class*="bg-[#F1CBCB]"],[class*="bg-[#c9e1e9]"]{display:none}
/* ============================================================
   跨次元观测模块 · v3.3 · 弹幕密集版
   合并容器：.cdo-* | 评论：.cm-* | 弹幕：.dm-*
   纯 CSS 无 JS · 真 marquee 滚动 · 具名观测者 class 识别
   依赖：@keyframes glow-text（已在主 CSS 中定义）
   ============================================================ */

/* ==================== CDO 总容器 ==================== */
.cdo-box {
    background: linear-gradient(145deg, rgba(248,250,255,0.9), rgba(240,247,255,0.88));
    border: 1px solid rgba(74,158,255,0.35);
    border-left: 3px solid #4a9eff;
    border-radius: 14px;
    padding: 22px 24px 18px;
    margin: 18px 0;
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(74,158,255,0.1), inset 0 1px 0 rgba(255,255,255,0.7);
}

.cdo-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(74,158,255,0.025) 3px, rgba(74,158,255,0.025) 4px);
    pointer-events: none;
    z-index: 0;
}

.cdo-box::after {
    content: '[ CROSS-DIM · LIVE ]';
    position: absolute;
    top: 12px; right: 14px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(74,158,255,0.7);
    font-family: 'Consolas','SF Mono',monospace;
    text-shadow: 0 0 8px rgba(74,158,255,0.4);
    padding: 2px 6px;
    background: rgba(74,158,255,0.08);
    border: 1px solid rgba(74,158,255,0.25);
    border-radius: 3px;
    z-index: 2;
    animation: glow-text 3s ease-in-out infinite;
}

.cdo-title {
    display: block;
    font-weight: 700;
    color: #0056b3;
    font-family: 'Helvetica Neue','Roboto','Microsoft YaHei',sans-serif;
    font-size: 17px;
    letter-spacing: 1.5px;
    text-shadow: 0 0 10px rgba(74,158,255,0.4);
    padding-left: 22px;
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
    animation: glow-text 2.5s ease-in-out infinite;
}

.cdo-title::before {
    content: '◆';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    color: #4a9eff;
    font-size: 13px;
    text-shadow: 0 0 12px rgba(74,158,255,0.8);
}

.cdo-line {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(74,158,255,0.4) 20%, rgba(0,86,179,0.6) 50%, rgba(74,158,255,0.4) 80%, transparent);
    margin: 10px 0 16px;
    position: relative;
    z-index: 1;
}

.cdo-line-sub {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(74,158,255,0.25) 30%, rgba(74,158,255,0.25) 70%, transparent);
    margin: 14px 0;
    position: relative;
    z-index: 1;
}

.cdo-section {
    position: relative;
    z-index: 1;
    margin-bottom: 6px;
}

.cdo-label {
    display: block;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    color: #4a9eff;
    font-family: 'Consolas','Helvetica Neue',monospace;
    margin-bottom: 10px;
    padding: 4px 10px;
    background: rgba(74,158,255,0.08);
    border-left: 3px solid #4a9eff;
    border-radius: 0 4px 4px 0;
    text-transform: uppercase;
    text-shadow: 0 0 6px rgba(74,158,255,0.3);
}

/* ==================== 弹幕嵌入面板 ==================== */
.cdo-dm-panel {
    background: linear-gradient(145deg, #0a1929 0%, #0d2238 50%, #0f1b2d 100%);
    border: 1px solid rgba(0,212,255,0.3);
    border-left: 3px solid #00d4ff;
    border-radius: 10px;
    padding: 12px 14px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25), inset 0 1px 0 rgba(0,212,255,0.15);
}

.cdo-dm-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,212,255,0.04) 2px, rgba(0,212,255,0.04) 3px), repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(0,212,255,0.04) 40px, rgba(0,212,255,0.04) 41px);
    pointer-events: none;
    z-index: 0;
}

/* ==================== 弹幕轨道 ==================== */
.dm-track {
    display: block;
    margin-bottom: 8px;
    padding: 5px 0;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0,212,255,0.02) 0%, rgba(0,212,255,0.06) 50%, rgba(0,212,255,0.02) 100%);
    border-radius: 6px;
    transition: background 0.3s ease;
}

.dm-track:last-child { margin-bottom: 0; }

.dm-track:hover {
    background: linear-gradient(90deg, rgba(0,212,255,0.05) 0%, rgba(0,212,255,0.12) 50%, rgba(0,212,255,0.05) 100%);
}

.dm-track::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 70%;
    background: linear-gradient(180deg, transparent, #00d4ff, transparent);
    border-radius: 2px;
    opacity: 0.5;
    z-index: 2;
}

/* 滚动内层 */
.dm-scroll {
    display: inline-block;
    padding-left: 100%;
    animation: dm-slide linear infinite;
    will-change: transform;
}

.dm-track:hover .dm-scroll {
    animation-play-state: paused;
}

/* 三档速度（v3.3 微调后） */
.dm-spd-a { animation-duration: 28s; }
.dm-spd-b { animation-duration: 19s; }
.dm-spd-c { animation-duration: 36s; }

/* 单条弹幕（v3.3 字间距缩小，容纳更多条） */
.dm-msg {
    display: inline-block;
    margin-right: 55px;            /* v3.3: 80px → 55px 容纳更多弹幕 */
    font-size: 14px;
    font-weight: 600;
    color: #e3f2fd;
    font-family: 'Helvetica Neue','Microsoft YaHei',sans-serif;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 0 6px rgba(0,212,255,0.25);
    padding: 4px 10px;
    background: rgba(10,25,41,0.5);
    border-radius: 6px;
    border-left: 2px solid transparent;
    transition: all 0.3s ease;
    position: relative;
}

.dm-msg::before {
    content: '';
    position: absolute;
    left: -2px; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(0,212,255,0.3), rgba(0,229,255,0.7), rgba(0,212,255,0.3));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dm-msg:hover {
    background: rgba(0,212,255,0.18);
    border-left-color: #00d4ff;
    box-shadow: 0 2px 8px rgba(0,212,255,0.25);
    transform: translateY(-1px);
}

.dm-msg:hover::before { opacity: 1; }

/* 弹幕颜色 */
.dm-c1 { color: #e3f2fd; }
.dm-c2 { color: #00e5ff; text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 0 10px rgba(0,229,255,0.55); }
.dm-c3 { color: #ffd54f; text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 0 10px rgba(255,193,7,0.55); }
.dm-c4 { color: #ff8a65; text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 0 10px rgba(255,107,74,0.55); }
.dm-c5 { color: #ba68c8; text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 0 10px rgba(156,102,200,0.55); }

/* ==================== 评论容器 ==================== */
.cdo-cm-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.cm-item {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(200,215,230,0.5);
    border-left: 3px solid rgba(74,158,255,0.5);
    border-radius: 10px;
    transition: all 0.3s ease;
    animation: cm-fade-in 0.5s ease backwards;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.cm-item:hover {
    transform: translateX(3px);
    background: rgba(255,255,255,0.85);
    border-left-color: #4a9eff;
    box-shadow: 0 4px 15px rgba(74,158,255,0.12);
}

.cm-item:nth-child(1) { animation-delay: 0s; }
.cm-item:nth-child(2) { animation-delay: 0.15s; }
.cm-item:nth-child(3) { animation-delay: 0.30s; }
.cm-item:nth-child(n+4) { animation-delay: 0.45s; }

.cm-avatar {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4a9eff 0%, #66b3ff 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(74,158,255,0.35), inset 0 1px 2px rgba(255,255,255,0.4);
    font-family: 'Helvetica Neue','Microsoft YaHei',sans-serif;
}

.cm-body { flex: 1; min-width: 0; }

.cm-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.cm-author {
    font-weight: 700;
    font-size: 14px;
    color: #0d3866;
    text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}

.cm-time {
    font-size: 11px;
    color: #9ab0c7;
    font-family: 'Consolas','SF Mono',monospace;
    letter-spacing: 0.5px;
}

.cm-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    background: rgba(74,158,255,0.1);
    color: #0056b3;
    border: 1px solid rgba(74,158,255,0.3);
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cm-content {
    font-size: 13.5px;
    line-height: 1.75;
    color: #34495e;
    margin-bottom: 6px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.cm-stats {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: #798da3;
}

.cm-like { color: #E6A23C; font-weight: 600; }
.cm-reply { color: #4a9eff; font-weight: 600; transition: color 0.2s ease; }
.cm-reply:hover { color: #0056b3; }

/* ==================== 具名观测者 ==================== */
.cm-item.cm-obs-xlpj { border-left-color: #ff6b4a; }
.cm-item.cm-obs-xlpj .cm-avatar {
    background: linear-gradient(135deg, #ff6b4a 0%, #ff8c6b 100%);
    box-shadow: 0 4px 10px rgba(255,107,74,0.35), inset 0 1px 2px rgba(255,255,255,0.4);
}
.cm-item.cm-obs-xlpj .cm-author { color: #c0392b; }
.cm-item.cm-obs-xlpj .cm-badge {
    background: rgba(255,107,74,0.1);
    color: #c0392b;
    border-color: rgba(255,107,74,0.3);
}

.cm-item.cm-obs-xr { border-left-color: #8a6bff; }
.cm-item.cm-obs-xr .cm-avatar {
    background: linear-gradient(135deg, #8a6bff 0%, #4a9eff 100%);
    box-shadow: 0 4px 10px rgba(138,107,255,0.35), inset 0 1px 2px rgba(255,255,255,0.4);
}
.cm-item.cm-obs-xr .cm-author { color: #5e3fb8; }
.cm-item.cm-obs-xr .cm-badge {
    background: rgba(138,107,255,0.1);
    color: #5e3fb8;
    border-color: rgba(138,107,255,0.3);
}

/* ==================== 动画 ==================== */
@keyframes dm-slide {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

@keyframes cm-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==================== 响应式 ==================== */
@media (max-width: 768px) {
    .cdo-box {
        padding: 18px 18px 14px;
        margin: 16px 0;
        border-radius: 12px;
    }
    .cdo-title {
        font-size: 15px;
        padding-left: 20px;
        letter-spacing: 1px;
    }
    .cdo-title::before { font-size: 11px; }
    .cdo-box::after {
        font-size: 8px;
        letter-spacing: 1.5px;
        top: 10px; right: 10px;
    }
    .cdo-label {
        font-size: 11px;
        letter-spacing: 1.5px;
        padding: 3px 8px;
    }
    .cdo-dm-panel { padding: 10px 12px; }
    .cm-item { padding: 12px 14px; gap: 10px; }
    .cm-avatar { width: 36px; height: 36px; font-size: 14px; }
    .cm-author { font-size: 13px; }
    .cm-content { font-size: 12.5px; }
    .cm-time { font-size: 10px; }
    .cm-badge { font-size: 9px; padding: 1px 6px; }
    .dm-track { padding: 4px 0; margin-bottom: 7px; }
    .dm-msg {
        margin-right: 40px;        /* v3.3: 60px → 40px */
        font-size: 13px;
        padding: 3px 8px;
    }
    .dm-spd-a { animation-duration: 23s; }
    .dm-spd-b { animation-duration: 16s; }
    .dm-spd-c { animation-duration: 30s; }
}

@media (max-width: 480px) {
    .cdo-box { padding: 14px; }
    .cdo-title { font-size: 14px; }
    .cdo-label { font-size: 10px; }
    .cm-badge { display: none; }
    .cm-meta { gap: 6px; }
    .cm-stats { gap: 10px; font-size: 11px; }
    .dm-msg {
        font-size: 12px;
        margin-right: 32px;        /* v3.3: 50px → 32px */
    }
}

@media (prefers-reduced-motion: reduce) {
    .cdo-title,
    .cdo-box::after {
        animation: none !important;
    }
    .dm-scroll {
        animation: none !important;
        padding-left: 0 !important;
    }
    .dm-track { overflow-x: auto !important; }
    .cm-item { animation: none !important; }
}
.UI-actions > div[data-action="append-textinput"]{
  display:block; margin:8px 0; padding:10px 14px;
  border-radius:8px; cursor:pointer;
  background:rgba(74,158,255,.08);
  border:1px solid rgba(74,158,255,.35);
  color:#0d3866; transition:all .25s ease;
}
.UI-actions > div[data-action="append-textinput"]:hover{
  background:rgba(74,158,255,.18);
  border-color:rgba(74,158,255,.7);
  transform:translateX(4px);
  box-shadow:0 2px 10px rgba(74,158,255,.2);
}
.UI-actions > div[data-action="append-textinput"]:active{ transform:translateX(2px) scale(.99); }