ai{
--bg:#090713;
--panel:rgba(22,18,45,.88);
--panel2:rgba(31,24,61,.68);
--line:rgba(191,168,255,.2);
--line2:rgba(99,230,255,.18);
--text:#f5f1ff;
--soft:#d8d0e8;
--muted:#aca4c3;
--dim:#7e768f;
--purple:#9b72ff;
--pink:#ff6fb5;
--cyan:#63e6ff;
--gold:#ffd76a;
--danger:#ff7187;
--green:#8dffcb;
position:relative;
isolation:isolate;
display:block;
box-sizing:border-box;
width:100%;
max-width:900px;
margin:8px auto;
overflow:hidden;
border:1px solid var(--line);
border-radius:22px;
color:var(--text);
background:
radial-gradient(circle at 8% 0%,rgba(155,114,255,.2),transparent 28%),
radial-gradient(circle at 96% 14%,rgba(255,111,181,.12),transparent 25%),
radial-gradient(circle at 48% 100%,rgba(99,230,255,.07),transparent 34%),
linear-gradient(155deg,rgba(25,19,50,.96),rgba(8,6,20,.97));
box-shadow:0 22px 65px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05);
font:14px/1.75 "Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
letter-spacing:.015em;
}
ai::before{
content:"";
position:absolute;
z-index:-2;
inset:0;
pointer-events:none;
opacity:.48;
background-image:
linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
radial-gradient(circle,rgba(255,255,255,.7) 0 1px,transparent 1.5px);
background-size:38px 38px,38px 38px,97px 83px;
-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.75) 55%,transparent 100%);
mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.75) 55%,transparent 100%);
}
ai::after{
content:"";
position:absolute;
z-index:-1;
width:270px;
height:270px;
right:-145px;
top:-150px;
pointer-events:none;
border:1px solid rgba(196,173,255,.16);
border-radius:50%;
box-shadow:
0 0 0 30px rgba(155,114,255,.035),
0 0 0 61px rgba(255,111,181,.025),
0 0 65px rgba(155,114,255,.12);
animation:aiOrbit 12s ease-in-out infinite alternate;
}
ai hd,ai article,ai ev,ai details,ai ft,ai section,ai p,ai q,ai d,ai f{
box-sizing:border-box;
}
ai hd{
position:relative;
display:grid;
grid-template-columns:auto 1fr;
align-items:center;
gap:2px 12px;
min-height:68px;
padding:13px 17px;
overflow:hidden;
border-bottom:1px solid var(--line);
background:
linear-gradient(110deg,rgba(155,114,255,.13),rgba(255,111,181,.055) 55%,rgba(99,230,255,.055)),
rgba(5,4,15,.25);
}
ai hd::before{
content:"";
position:absolute;
left:0;
bottom:0;
width:42%;
height:1px;
background:linear-gradient(90deg,var(--purple),var(--pink),transparent);
box-shadow:0 0 12px rgba(155,114,255,.8);
animation:aiScan 5s ease-in-out infinite alternate;
}
ai hd::after{
content:"✦";
position:absolute;
right:17px;
top:50%;
color:rgba(99,230,255,.5);
font-size:18px;
text-shadow:0 0 14px var(--cyan);
transform:translateY(-50%);
animation:aiPulse 2.4s ease-in-out infinite;
}
ai hd b{
display:flex;
align-items:center;
gap:7px;
min-width:0;
color:transparent;
background:linear-gradient(100deg,#fff 5%,#cbb7ff 42%,#ff94c9 82%,#88efff);
-webkit-background-clip:text;
background-clip:text;
font-size:15px;
font-weight:900;
letter-spacing:.08em;
}
ai hd i{
justify-self:start;
padding:2px 8px;
border:1px solid rgba(99,230,255,.18);
border-radius:999px;
color:var(--cyan);
background:rgba(99,230,255,.055);
font:700 9px/1.7 ui-monospace,"SFMono-Regular",Consolas,monospace;
letter-spacing:.1em;
}
ai hd d{
grid-column:1/-1;
display:block;
padding-right:26px;
overflow:hidden;
color:var(--muted);
font-size:11px;
text-overflow:ellipsis;
white-space:nowrap;
}
ai article{
position:relative;
display:block;
padding:20px clamp(16px,3.5vw,29px) 13px;
}
ai article h2{
position:relative;
margin:0 0 13px;
padding:0 0 11px 17px;
color:#fff;
font-size:clamp(18px,4.8vw,23px);
line-height:1.35;
letter-spacing:.025em;
}
ai article h2::before{
content:"";
position:absolute;
left:0;
top:.12em;
width:4px;
height:1.05em;
border-radius:9px;
background:linear-gradient(to bottom,var(--cyan),var(--purple),var(--pink));
box-shadow:0 0 14px rgba(155,114,255,.72);
}
ai article h2::after{
content:"CHAPTER · DESTINY";
display:block;
margin-top:4px;
color:var(--dim);
font:800 8px/1.4 ui-monospace,Consolas,monospace;
letter-spacing:.22em;
}
ai article>em{
position:relative;
display:block;
margin:0 0 17px;
padding:9px 12px 9px 29px;
border-top:1px solid rgba(99,230,255,.12);
border-bottom:1px solid rgba(99,230,255,.12);
color:#bfeefa;
background:linear-gradient(90deg,rgba(99,230,255,.075),transparent);
font-size:12px;
font-style:normal;
line-height:1.65;
}
ai article>em::before{
content:"✧";
position:absolute;
left:10px;
top:9px;
color:var(--cyan);
text-shadow:0 0 10px var(--cyan);
}
ai article p{
position:relative;
margin:0;
padding:7px 3px;
color:var(--soft);
font-size:14px;
line-height:1.92;
text-align:justify;
transition:color .2s ease,background .2s ease;
}
ai article p:hover{
color:#f4efff;
background:linear-gradient(90deg,rgba(155,114,255,.035),transparent 75%);
}
ai article q{
quotes:none;
position:relative;
display:block;
margin:11px 0;
padding:11px 13px 11px 16px;
overflow:hidden;
border-left:2px solid var(--purple);
border-radius:0 11px 11px 0;
color:#efeaff;
background:
linear-gradient(100deg,rgba(155,114,255,.13),rgba(155,114,255,.035) 72%,transparent);
box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
line-height:1.8;
transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
ai article q::before{
content:"“";
position:absolute;
right:11px;
top:-9px;
color:rgba(196,173,255,.11);
font:700 48px/1 Georgia,serif;
}
ai article q:hover{
transform:translateX(3px);
border-color:var(--cyan);
background:linear-gradient(100deg,rgba(155,114,255,.18),rgba(99,230,255,.035) 75%,transparent);
}
ai article q[t="n"]{
border-left-color:var(--pink);
background:linear-gradient(100deg,rgba(255,111,181,.115),rgba(255,111,181,.025) 75%,transparent);
}
ai article q[t="n"]:hover{
border-left-color:var(--gold);
background:linear-gradient(100deg,rgba(255,111,181,.16),rgba(255,215,106,.025) 75%,transparent);
}
ai q f{
position:relative;
z-index:1;
display:inline-flex;
align-items:center;
margin-right:8px;
padding:1px 8px;
border:1px solid rgba(196,173,255,.2);
border-radius:999px;
color:#d9c9ff;
background:rgba(155,114,255,.11);
font-size:11px;
font-weight:900;
font-style:normal;
vertical-align:1px;
}
ai q[t="n"] f{
border-color:rgba(255,111,181,.23);
color:#ffabd3;
background:rgba(255,111,181,.1);
}
ai ev{
position:relative;
display:grid;
grid-template-columns:auto 1fr;
gap:4px 12px;
margin:9px clamp(13px,3vw,23px);
padding:13px 15px 13px 18px;
overflow:hidden;
border:1px solid rgba(99,230,255,.19);
border-radius:14px;
background:
radial-gradient(circle at 100% 0%,rgba(99,230,255,.095),transparent 40%),
linear-gradient(115deg,rgba(99,230,255,.075),rgba(155,114,255,.075),rgba(4,3,13,.28));
box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 24px rgba(0,0,0,.13);
animation:aiEventIn .5s ease both;
}
ai ev::before{
content:"";
position:absolute;
left:0;
top:12%;
width:2px;
height:76%;
border-radius:8px;
background:linear-gradient(var(--cyan),var(--purple));
box-shadow:0 0 12px var(--cyan);
}
ai ev::after{
content:"◇";
position:absolute;
right:13px;
top:8px;
color:rgba(99,230,255,.22);
font-size:29px;
line-height:1;
animation:aiSpin 10s linear infinite;
}
ai ev>b{
position:relative;
z-index:1;
color:var(--cyan);
font-size:12px;
font-weight:900;
letter-spacing:.08em;
}
ai ev>i{
position:relative;
z-index:1;
align-self:center;
justify-self:end;
padding-right:27px;
color:#b9afcb;
font-size:10px;
font-style:normal;
}
ai ev>d{
position:relative;
z-index:1;
grid-column:1/-1;
display:block;
color:#f1edfa;
font:700 12px/1.7 ui-monospace,Consolas,monospace;
}
ai ev>p{
position:relative;
z-index:1;
grid-column:1/-1;
margin:1px 0 0;
color:var(--muted);
font-size:12px;
line-height:1.7;
}
ai ev[t="fate"]{
grid-template-columns:1fr;
border-color:rgba(255,215,106,.2);
background:
radial-gradient(circle at 100% 0%,rgba(255,215,106,.1),transparent 42%),
linear-gradient(115deg,rgba(255,215,106,.07),rgba(255,111,181,.06),rgba(4,3,13,.3));
}
ai ev[t="fate"]::before{
background:linear-gradient(var(--gold),var(--pink));
box-shadow:0 0 13px rgba(255,215,106,.72);
}
ai ev[t="fate"]::after{
content:"✦";
color:rgba(255,215,106,.28);
animation:aiPulse 2.2s ease-in-out infinite;
}
ai ev[t="fate"]>b{
color:var(--gold);
}
ai ev[t="fate"]>d{
grid-column:auto;
padding-right:24px;
color:#e9dfc2;
font-family:inherit;
font-weight:400;
}
ai details{
position:relative;
display:block;
margin:17px clamp(10px,2.6vw,20px) 13px;
overflow:hidden;
border:1px solid var(--line);
border-radius:16px;
background:linear-gradient(145deg,rgba(20,15,42,.76),rgba(6,5,17,.63));
box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
ai details>summary{
position:relative;
display:flex;
align-items:center;
min-height:48px;
padding:10px 42px 10px 15px;
color:#eee8fa;
background:
linear-gradient(100deg,rgba(155,114,255,.13),rgba(255,111,181,.045),transparent);
font-size:13px;
font-weight:900;
letter-spacing:.06em;
cursor:pointer;
list-style:none;
transition:background .2s ease,color .2s ease;
}
ai details>summary::-webkit-details-marker{
display:none;
}
ai details>summary::before{
content:"◈";
margin-right:9px;
color:var(--purple);
text-shadow:0 0 12px var(--purple);
}
ai details>summary::after{
content:"＋";
position:absolute;
right:15px;
top:50%;
color:var(--cyan);
font-size:18px;
font-weight:400;
transform:translateY(-50%);
transition:transform .25s ease;
}
ai details[open]>summary::after{
transform:translateY(-50%) rotate(45deg);
}
ai details>summary:hover{
color:#fff;
background:linear-gradient(100deg,rgba(155,114,255,.2),rgba(255,111,181,.07),transparent);
}
ai details>summary i{
margin-left:auto;
padding:2px 8px;
border:1px solid rgba(99,230,255,.17);
border-radius:999px;
color:var(--cyan);
background:rgba(99,230,255,.055);
font-size:9px;
font-style:normal;
letter-spacing:.04em;
}
ai details>section{
display:block;
padding:7px 14px 13px;
border-top:1px solid rgba(196,173,255,.1);
animation:aiOpen .32s ease both;
}
ai details h3{
position:relative;
margin:9px 0 3px;
padding:7px 9px 6px 15px;
border-bottom:1px solid rgba(196,173,255,.09);
color:#c9b9ef;
font-size:11px;
font-weight:900;
letter-spacing:.11em;
}
ai details h3::before{
content:"";
position:absolute;
left:1px;
top:50%;
width:6px;
height:6px;
border:1px solid var(--purple);
transform:translateY(-50%) rotate(45deg);
box-shadow:0 0 8px rgba(155,114,255,.5);
}
ai details section>p{
position:relative;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 13px;
margin:0;
padding:7px 9px 7px 13px;
overflow:hidden;
border-left:2px solid rgba(155,114,255,.48);
border-radius:0 9px 9px 0;
background:linear-gradient(90deg,rgba(155,114,255,.045),transparent 72%);
transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
ai details section>p:hover{
border-left-color:var(--cyan);
background:linear-gradient(90deg,rgba(99,230,255,.07),transparent 78%);
transform:translateX(2px);
}
ai details p>d{
position:relative;
display:block;
min-width:0;
padding:3px 1px;
color:#b9b1c8;
font-size:12px;
line-height:1.62;
overflow-wrap:anywhere;
}
ai details p>d::before{
content:"";
display:inline-block;
width:3px;
height:3px;
margin-right:7px;
border-radius:50%;
background:currentColor;
vertical-align:3px;
opacity:.42;
}
ai details p>f{
grid-column:1/-1;
display:block;
margin:1px 0 4px;
color:#e0d3ff;
font-size:13px;
font-weight:900;
}
ai details p[t="hero"]{
border-left-color:var(--purple);
background:linear-gradient(90deg,rgba(155,114,255,.075),rgba(255,111,181,.025),transparent);
}
ai details p[t="hero"]>f{
color:transparent;
background:linear-gradient(90deg,#fff,#c8afff,#ff9bcb);
-webkit-background-clip:text;
background-clip:text;
}
ai details p[t="vital"]{
border-left-color:var(--green);
background:linear-gradient(90deg,rgba(141,255,203,.055),transparent);
}
ai details p[t="vital"]>d:first-child{
color:#b9f8d9;
}
ai details p[t="power"]{
border-left-color:var(--gold);
background:linear-gradient(90deg,rgba(255,215,106,.07),rgba(155,114,255,.025),transparent);
}
ai details p[t="power"]>f{
color:var(--gold);
text-shadow:0 0 12px rgba(255,215,106,.2);
}
ai details p[t="bag"]{
border-left-color:#a99dbd;
}
ai details p[t="npc"]{
border-left-color:var(--cyan);
background:linear-gradient(90deg,rgba(99,230,255,.055),transparent);
}
ai details p[t="npc"]>d:first-child{
grid-column:1/-1;
}
ai details p[t="npc"] f{
display:inline;
color:var(--cyan);
font-weight:900;
}
ai details p[t="quest"]{
grid-template-columns:1fr;
border-left-color:var(--pink);
background:linear-gradient(90deg,rgba(255,111,181,.065),transparent);
}
ai details p[t="quest"]>f{
color:#ff9fce;
}
ai details p[t="clue"]{
grid-template-columns:1fr;
border-left-color:var(--cyan);
background:linear-gradient(90deg,rgba(99,230,255,.055),transparent);
}
ai details p[t="clue"]>d{
color:#badde6;
}
ai details p[t="clue"]>d::before{
display:none;
}
ai details p[t="world"]{
border-left-color:var(--purple);
background:linear-gradient(90deg,rgba(155,114,255,.06),transparent);
}
ai details p[t="memory"]{
grid-template-columns:1fr;
border-left-color:#d79cff;
background:linear-gradient(90deg,rgba(215,156,255,.055),rgba(255,111,181,.018),transparent);
}
ai details p[t="memory"]>d{
color:#c8bdd7;
font-style:italic;
}
ai details p[t="act"]{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:6px;
padding:8px;
border-left-color:var(--gold);
background:linear-gradient(90deg,rgba(255,215,106,.045),transparent);
}
ai details p[t="act"]>d{
position:relative;
padding:7px 9px;
border:1px solid rgba(196,173,255,.11);
border-radius:8px;
color:#cfc6dd;
background:rgba(255,255,255,.025);
cursor:pointer;
transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease;
}
ai details p[t="act"]>d::before{
display:none;
}
ai details p[t="act"]>d:hover{
color:#fff;
border-color:rgba(99,230,255,.3);
background:linear-gradient(100deg,rgba(155,114,255,.13),rgba(99,230,255,.06));
transform:translateX(3px);
}
ai ft{
position:relative;
display:flex;
align-items:center;
justify-content:space-between;
gap:13px;
min-height:45px;
padding:10px 17px;
border-top:1px solid var(--line);
color:var(--dim);
background:rgba(3,2,11,.26);
}
ai ft::before{
content:"";
position:absolute;
left:50%;
top:0;
width:35%;
height:1px;
background:linear-gradient(90deg,transparent,var(--pink),transparent);
transform:translateX(-50%);
box-shadow:0 0 9px rgba(255,111,181,.5);
}
ai ft i{
flex:0 0 auto;
color:#82778f;
font:800 8px/1.5 ui-monospace,Consolas,monospace;
letter-spacing:.14em;
}
ai ft b{
min-width:0;
color:#a79db6;
font-size:10px;
font-weight:500;
font-style:italic;
text-align:right;
}
ai ::selection{
color:#fff;
background:rgba(155,114,255,.55);
}
@keyframes aiOrbit{
0%{transform:translate(0,0) scale(.96);opacity:.6}
100%{transform:translate(-18px,17px) scale(1.06);opacity:1}
}
@keyframes aiScan{
0%{width:18%;opacity:.45}
100%{width:68%;opacity:1}
}
@keyframes aiPulse{
0%,100%{opacity:.4;filter:brightness(.85);transform:translateY(-50%) scale(.88)}
50%{opacity:1;filter:brightness(1.35);transform:translateY(-50%) scale(1.08)}
}
@keyframes aiSpin{
to{transform:rotate(360deg)}
}
@keyframes aiEventIn{
0%{opacity:0;transform:translateY(7px);filter:brightness(1.5)}
100%{opacity:1;transform:translateY(0);filter:brightness(1)}
}
@keyframes aiOpen{
0%{opacity:0;transform:translateY(-5px)}
100%{opacity:1;transform:translateY(0)}
}
@media(max-width:600px){
ai{
margin:4px auto;
border-radius:17px;
font-size:14px;
}
ai hd{
min-height:63px;
padding:11px 13px;
gap:2px 8px;
}
ai hd::after{
right:12px;
}
ai hd b{
font-size:14px;
}
ai hd i{
font-size:8px;
}
ai hd d{
padding-right:22px;
font-size:10px;
}
ai article{
padding:17px 14px 10px;
}
ai article h2{
margin-bottom:10px;
font-size:19px;
}
ai article p{
padding:6px 1px;
font-size:14px;
line-height:1.85;
text-align:left;
}
ai article q{
margin:9px 0;
padding:10px 10px 10px 13px;
}
ai ev{
grid-template-columns:1fr;
margin:8px 10px;
padding:12px 13px 12px 16px;
}
ai ev>i{
justify-self:start;
padding-right:0;
}
ai ev>d,ai ev>p{
grid-column:auto;
}
ai details{
margin:14px 8px 11px;
border-radius:13px;
}
ai details>summary{
padding-left:12px;
}
ai details>section{
padding:6px 9px 10px;
}
ai details h3{
margin-top:7px;
}
ai details section>p,ai details p[t="act"]{
grid-template-columns:1fr;
}
ai details p[t="npc"]>d:first-child{
grid-column:auto;
}
ai details p>d{
font-size:12px;
}
ai ft{
align-items:flex-start;
flex-direction:column;
gap:3px;
padding:9px 13px;
}
ai ft b{
text-align:left;
}
}
@media(max-width:380px){
ai hd{
grid-template-columns:1fr;
}
ai hd i{
display:none;
}
ai article{
padding-right:12px;
padding-left:12px;
}
ai article>em{
padding-right:9px;
}
ai details>summary i{
max-width:82px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
}
@media(prefers-reduced-motion:reduce){
ai::after,ai hd::before,ai hd::after,ai ev::after{
animation:none;
}
ai ev,ai details>section{
animation:none;
}
ai article q,ai details section>p,ai details p[t="act"]>d,ai details>summary{
transition:none;
}
}

/* =========================================================
   紫晶星穹 · 全局界面增强
   建议追加在原 CSS 末尾，兼容常规网页及多数 AI 聊天界面
   ========================================================= */

:root{
  --ai-bg:#090713;
  --ai-bg-deep:#05030d;
  --ai-panel:rgba(22,18,45,.88);
  --ai-panel-solid:#17122f;
  --ai-panel-2:rgba(31,24,61,.72);
  --ai-panel-hover:rgba(42,32,80,.78);

  --ai-line:rgba(191,168,255,.20);
  --ai-line-bright:rgba(191,168,255,.42);
  --ai-line-cyan:rgba(99,230,255,.28);

  --ai-text:#f5f1ff;
  --ai-soft:#d8d0e8;
  --ai-muted:#aca4c3;
  --ai-dim:#7e768f;

  --ai-purple:#9b72ff;
  --ai-purple-light:#cbb7ff;
  --ai-pink:#ff6fb5;
  --ai-cyan:#63e6ff;
  --ai-gold:#ffd76a;
  --ai-green:#8dffcb;
  --ai-danger:#ff7187;

  --ai-radius-sm:9px;
  --ai-radius:14px;
  --ai-radius-lg:20px;

  --ai-shadow:
    0 16px 45px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.045);

  --ai-glow:
    0 0 0 1px rgba(155,114,255,.06),
    0 0 22px rgba(155,114,255,.12);

  --ai-ease:cubic-bezier(.2,.8,.2,1);
}


/* =========================================================
   页面背景与基础字体
   ========================================================= */

html{
  color-scheme:dark;
  background:var(--ai-bg-deep);
}

body{
  color:var(--ai-text);
  background:
    radial-gradient(circle at 8% 0%,rgba(155,114,255,.18),transparent 29rem),
    radial-gradient(circle at 96% 12%,rgba(255,111,181,.11),transparent 27rem),
    radial-gradient(circle at 50% 100%,rgba(99,230,255,.07),transparent 35rem),
    linear-gradient(155deg,#100b24 0%,#090713 48%,#05030d 100%);
  background-attachment:fixed;
  font-family:"Noto Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  accent-color:var(--ai-purple);
}

body::before{
  content:"";
  position:fixed;
  z-index:-1;
  inset:0;
  pointer-events:none;
  opacity:.42;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    radial-gradient(circle,rgba(255,255,255,.48) 0 1px,transparent 1.5px);
  background-size:38px 38px,38px 38px,101px 89px;
  -webkit-mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.55) 60%,transparent);
  mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.55) 60%,transparent);
}

::selection{
  color:#fff;
  background:rgba(155,114,255,.58);
}


/* =========================================================
   页面主容器、面板、卡片
   ========================================================= */

:is(
  .panel,
  .card,
  .modal-content,
  .dialog-content,
  .drawer-content,
  .settings-panel,
  .character-panel,
  .world-panel,
  .preview-panel,
  .form-panel,
  .chat-panel
){
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid var(--ai-line);
  border-radius:var(--ai-radius-lg);
  color:var(--ai-text);
  background:
    radial-gradient(circle at 100% 0%,rgba(155,114,255,.10),transparent 38%),
    linear-gradient(145deg,rgba(28,22,56,.90),rgba(9,7,22,.88));
  box-shadow:var(--ai-shadow);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
  backdrop-filter:blur(18px) saturate(1.12);
}

:is(
  .panel,
  .card,
  .modal-content,
  .dialog-content,
  .drawer-content,
  .preview-panel
)::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      115deg,
      transparent 0 32%,
      rgba(255,255,255,.025) 42%,
      rgba(99,230,255,.045) 49%,
      rgba(155,114,255,.04) 55%,
      transparent 68%
    );
  transform:translateX(-110%);
  transition:transform .9s var(--ai-ease);
}

:is(
  .panel,
  .card,
  .preview-panel
):hover::before{
  transform:translateX(110%);
}


/* =========================================================
   标签导航
   ========================================================= */

:is(
  .tabs,
  .tab-list,
  [role="tablist"],
  .nav-tabs
){
  display:flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  padding:5px;
  overflow-x:auto;
  border:1px solid var(--ai-line);
  border-radius:14px;
  background:
    linear-gradient(145deg,rgba(24,18,49,.80),rgba(8,6,20,.78));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 8px 24px rgba(0,0,0,.15);
  scrollbar-width:none;
}

:is(.tabs,.tab-list,[role="tablist"],.nav-tabs)::-webkit-scrollbar{
  display:none;
}

:is(
  .tab,
  .tab-button,
  [role="tab"],
  .nav-tabs > li > a
){
  position:relative;
  isolation:isolate;
  flex:0 0 auto;
  min-height:38px;
  padding:8px 15px;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:10px;
  color:var(--ai-muted);
  background:transparent;
  font:800 12px/1.4 inherit;
  letter-spacing:.045em;
  text-decoration:none;
  cursor:pointer;
  transition:
    color .22s ease,
    border-color .22s ease,
    background .22s ease,
    transform .22s var(--ai-ease),
    box-shadow .22s ease;
}

:is(
  .tab,
  .tab-button,
  [role="tab"],
  .nav-tabs > li > a
)::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:0;
  background:
    linear-gradient(
      110deg,
      rgba(155,114,255,.18),
      rgba(255,111,181,.08) 56%,
      rgba(99,230,255,.11)
    );
  transition:opacity .22s ease;
}

:is(
  .tab,
  .tab-button,
  [role="tab"],
  .nav-tabs > li > a
):hover{
  color:#fff;
  border-color:rgba(191,168,255,.20);
  background:rgba(155,114,255,.07);
  transform:translateY(-1px);
}

:is(
  .tab.active,
  .tab-button.active,
  [role="tab"][aria-selected="true"],
  .nav-tabs > li.active > a
){
  color:#fff;
  border-color:rgba(155,114,255,.40);
  background:rgba(155,114,255,.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 18px rgba(155,114,255,.16);
}

:is(
  .tab.active,
  .tab-button.active,
  [role="tab"][aria-selected="true"],
  .nav-tabs > li.active > a
)::before{
  opacity:1;
}

:is(
  .tab.active,
  .tab-button.active,
  [role="tab"][aria-selected="true"]
)::after{
  content:"";
  position:absolute;
  left:16%;
  right:16%;
  bottom:0;
  height:2px;
  border-radius:10px;
  background:linear-gradient(90deg,var(--ai-purple),var(--ai-pink),var(--ai-cyan));
  box-shadow:
    0 0 8px var(--ai-purple),
    0 0 14px rgba(99,230,255,.42);
}


/* =========================================================
   通用按钮：悬停扫光、按压波纹、聚焦反馈
   ========================================================= */

:is(
  button,
  .button,
  .btn,
  [role="button"],
  .menu_button,
  .interactable,
  .right_menu_button,
  .drawer-toggle,
  .inline-drawer-toggle
){
  position:relative;
  isolation:isolate;
  box-sizing:border-box;
  min-height:38px;
  padding:8px 15px;
  overflow:hidden;
  border:1px solid rgba(191,168,255,.25);
  border-radius:11px;
  color:var(--ai-text);
  background:
    linear-gradient(
      115deg,
      rgba(155,114,255,.19),
      rgba(255,111,181,.08) 60%,
      rgba(99,230,255,.08)
    ),
    rgba(18,14,39,.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.065),
    0 7px 18px rgba(0,0,0,.18);
  font-weight:800;
  letter-spacing:.025em;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:
    color .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    transform .16s var(--ai-ease),
    filter .2s ease;
}

:is(
  button,
  .button,
  .btn,
  [role="button"],
  .menu_button,
  .interactable,
  .right_menu_button,
  .drawer-toggle,
  .inline-drawer-toggle
)::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-45%;
  bottom:-45%;
  left:-70%;
  width:42%;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.12),
    rgba(99,230,255,.30),
    rgba(255,255,255,.16),
    transparent
  );
  filter:blur(.2px);
  transform:skewX(-22deg);
}

:is(
  button,
  .button,
  .btn,
  [role="button"],
  .menu_button,
  .interactable,
  .right_menu_button,
  .drawer-toggle,
  .inline-drawer-toggle
)::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:50%;
  width:12px;
  height:12px;
  pointer-events:none;
  border-radius:50%;
  opacity:0;
  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.55) 0,
      rgba(155,114,255,.25) 36%,
      transparent 70%
    );
  transform:translate(-50%,-50%) scale(0);
}

:is(
  button,
  .button,
  .btn,
  [role="button"],
  .menu_button,
  .interactable,
  .right_menu_button,
  .drawer-toggle,
  .inline-drawer-toggle
):hover{
  color:#fff;
  border-color:rgba(99,230,255,.43);
  background:
    linear-gradient(
      115deg,
      rgba(155,114,255,.27),
      rgba(255,111,181,.12) 58%,
      rgba(99,230,255,.15)
    ),
    rgba(20,15,45,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 0 0 1px rgba(155,114,255,.06),
    0 8px 24px rgba(0,0,0,.24),
    0 0 20px rgba(155,114,255,.18);
  transform:translateY(-2px);
}

:is(
  button,
  .button,
  .btn,
  [role="button"],
  .menu_button,
  .interactable,
  .right_menu_button,
  .drawer-toggle,
  .inline-drawer-toggle
):hover::before{
  opacity:1;
  animation:aiUiButtonShine .78s var(--ai-ease) forwards;
}

:is(
  button,
  .button,
  .btn,
  [role="button"],
  .menu_button,
  .interactable,
  .right_menu_button,
  .drawer-toggle,
  .inline-drawer-toggle
):active{
  filter:brightness(1.18);
  transform:translateY(0) scale(.965);
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.25),
    0 0 18px rgba(99,230,255,.20);
}

:is(
  button,
  .button,
  .btn,
  [role="button"],
  .menu_button,
  .interactable,
  .right_menu_button,
  .drawer-toggle,
  .inline-drawer-toggle
):active::after{
  opacity:1;
  animation:aiUiClickWave .45s ease-out both;
}

:is(
  button,
  .button,
  .btn,
  [role="button"],
  .menu_button,
  .interactable
):focus-visible{
  outline:2px solid rgba(99,230,255,.78);
  outline-offset:3px;
  border-color:var(--ai-cyan);
  box-shadow:
    0 0 0 4px rgba(99,230,255,.10),
    0 0 22px rgba(99,230,255,.22);
}

:is(button,.button,.btn,[role="button"]):disabled,
:is(button,.button,.btn,[role="button"])[aria-disabled="true"]{
  opacity:.42;
  cursor:not-allowed;
  filter:saturate(.55);
  transform:none;
  box-shadow:none;
}


/* 主要按钮 */

:is(
  .primary,
  .btn-primary,
  button[type="submit"],
  #send_but,
  .send-button
){
  border-color:rgba(155,114,255,.55);
  color:#fff;
  background:
    linear-gradient(110deg,#704de0,#a657db 52%,#d957a4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 8px 24px rgba(95,47,190,.30),
    0 0 18px rgba(155,114,255,.18);
}

:is(
  .primary,
  .btn-primary,
  button[type="submit"],
  #send_but,
  .send-button
):hover{
  border-color:rgba(99,230,255,.65);
  background:
    linear-gradient(110deg,#815eff,#bb61e9 50%,#f461af 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 10px 30px rgba(103,54,205,.38),
    0 0 24px rgba(255,111,181,.23);
}


/* 危险按钮 */

:is(.danger,.btn-danger,.delete-button,[data-action="delete"]){
  border-color:rgba(255,113,135,.38);
  color:#ffdbe1;
  background:
    linear-gradient(115deg,rgba(255,113,135,.22),rgba(255,111,181,.10)),
    rgba(31,12,27,.88);
}

:is(.danger,.btn-danger,.delete-button,[data-action="delete"]):hover{
  border-color:rgba(255,113,135,.65);
  color:#fff;
  box-shadow:
    0 8px 24px rgba(0,0,0,.25),
    0 0 22px rgba(255,113,135,.24);
}


/* 复制按钮与成功状态 */

:is(.copy-button,.copy-btn,[data-action="copy"]){
  border-color:rgba(99,230,255,.28);
  color:#c8f7ff;
  background:
    linear-gradient(110deg,rgba(99,230,255,.13),rgba(155,114,255,.13)),
    rgba(10,15,30,.86);
}

:is(
  .copy-button.copied,
  .copy-btn.copied,
  [data-action="copy"][data-copied="true"],
  [data-action="copy"].success
){
  border-color:rgba(141,255,203,.58);
  color:#d8ffec;
  background:
    linear-gradient(110deg,rgba(141,255,203,.20),rgba(99,230,255,.12)),
    rgba(9,30,25,.88);
  box-shadow:
    0 0 0 1px rgba(141,255,203,.08),
    0 0 22px rgba(141,255,203,.18);
  animation:aiUiSuccess .48s var(--ai-ease);
}


/* =========================================================
   表单、角色配置输入区
   ========================================================= */

:is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select,
  .form-control,
  [contenteditable="true"]
){
  box-sizing:border-box;
  width:100%;
  min-height:42px;
  border:1px solid rgba(191,168,255,.20);
  border-radius:11px;
  outline:none;
  color:var(--ai-text);
  background:
    linear-gradient(135deg,rgba(155,114,255,.055),rgba(99,230,255,.025)),
    rgba(7,5,18,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 2px 12px rgba(0,0,0,.16);
  font:inherit;
  caret-color:var(--ai-cyan);
  transition:
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

:is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select,
  .form-control
){
  padding:10px 12px;
}

textarea{
  min-height:108px;
  line-height:1.72;
  resize:vertical;
}

:is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select,
  .form-control,
  [contenteditable="true"]
):hover{
  border-color:rgba(191,168,255,.34);
  background:
    linear-gradient(135deg,rgba(155,114,255,.08),rgba(99,230,255,.035)),
    rgba(9,7,23,.80);
}

:is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select,
  .form-control,
  [contenteditable="true"]
):focus{
  border-color:rgba(99,230,255,.62);
  background:
    linear-gradient(135deg,rgba(155,114,255,.10),rgba(99,230,255,.055)),
    rgba(10,8,26,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 3px rgba(99,230,255,.075),
    0 0 22px rgba(99,230,255,.12),
    0 8px 24px rgba(0,0,0,.16);
}

::placeholder{
  color:var(--ai-dim);
  opacity:.82;
}

label,
.form-label{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:6px;
  color:#d9cfee;
  font-size:12px;
  font-weight:800;
  letter-spacing:.035em;
}

label::before,
.form-label::before{
  content:"";
  width:5px;
  height:5px;
  flex:0 0 auto;
  border:1px solid var(--ai-purple);
  transform:rotate(45deg);
  box-shadow:0 0 7px rgba(155,114,255,.55);
}


/* 开关与复选框 */

input[type="checkbox"],
input[type="radio"]{
  width:17px;
  height:17px;
  accent-color:var(--ai-purple);
  filter:drop-shadow(0 0 5px rgba(155,114,255,.36));
  cursor:pointer;
}

input[type="range"]{
  accent-color:var(--ai-purple);
}


/* =========================================================
   聊天主区域
   ========================================================= */

:is(
  #chat,
  .chat,
  .chat-container,
  .messages,
  .message-list,
  .conversation
){
  position:relative;
  box-sizing:border-box;
  color:var(--ai-text);
  background:
    radial-gradient(circle at 8% 0%,rgba(155,114,255,.09),transparent 28%),
    radial-gradient(circle at 100% 34%,rgba(99,230,255,.045),transparent 25%),
    rgba(5,4,14,.40);
}


/* 单条消息 */

:is(
  .message,
  .mes,
  .chat-message,
  [data-role="message"]
){
  position:relative;
  isolation:isolate;
  box-sizing:border-box;
  margin:10px 8px;
  padding:14px 16px;
  overflow:hidden;
  border:1px solid rgba(191,168,255,.16);
  border-radius:15px;
  color:var(--ai-soft);
  background:
    radial-gradient(circle at 100% 0%,rgba(155,114,255,.075),transparent 38%),
    linear-gradient(135deg,rgba(26,20,51,.75),rgba(10,8,24,.72));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 8px 25px rgba(0,0,0,.15);
  transition:
    border-color .24s ease,
    background .24s ease,
    box-shadow .24s ease,
    transform .24s var(--ai-ease);
}

:is(
  .message,
  .mes,
  .chat-message,
  [data-role="message"]
)::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:-45%;
  width:30%;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(155,114,255,.07),
    rgba(99,230,255,.10),
    transparent
  );
  transform:skewX(-18deg);
}

:is(
  .message,
  .mes,
  .chat-message,
  [data-role="message"]
)::after{
  content:"";
  position:absolute;
  left:0;
  top:15%;
  width:2px;
  height:70%;
  border-radius:10px;
  background:linear-gradient(var(--ai-cyan),var(--ai-purple),var(--ai-pink));
  box-shadow:0 0 11px rgba(155,114,255,.58);
  opacity:.72;
}

:is(
  .message,
  .mes,
  .chat-message,
  [data-role="message"]
):hover{
  border-color:rgba(191,168,255,.30);
  background:
    radial-gradient(circle at 100% 0%,rgba(155,114,255,.11),transparent 42%),
    linear-gradient(135deg,rgba(31,24,61,.82),rgba(11,9,27,.80));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 30px rgba(0,0,0,.20),
    0 0 22px rgba(155,114,255,.08);
  transform:translateY(-1px);
}

:is(
  .message,
  .mes,
  .chat-message,
  [data-role="message"]
):hover::before{
  opacity:1;
  animation:aiUiMessageShine 1.05s var(--ai-ease) forwards;
}


/* 用户消息 */

:is(
  .message.user,
  .chat-message.user,
  .mes[is_user="true"],
  [data-role="message"][data-author="user"]
){
  margin-left:clamp(22px,7vw,74px);
  border-color:rgba(255,111,181,.20);
  background:
    radial-gradient(circle at 100% 0%,rgba(255,111,181,.10),transparent 42%),
    linear-gradient(135deg,rgba(52,24,61,.76),rgba(18,10,31,.76));
}

:is(
  .message.user,
  .chat-message.user,
  .mes[is_user="true"],
  [data-role="message"][data-author="user"]
)::after{
  left:auto;
  right:0;
  background:linear-gradient(var(--ai-pink),var(--ai-purple));
  box-shadow:0 0 12px rgba(255,111,181,.65);
}


/* AI 消息 */

:is(
  .message.assistant,
  .message.ai,
  .chat-message.assistant,
  .mes[is_user="false"],
  [data-role="message"][data-author="assistant"]
){
  margin-right:clamp(12px,4vw,44px);
  border-color:rgba(99,230,255,.18);
  background:
    radial-gradient(circle at 0 0,rgba(99,230,255,.07),transparent 35%),
    radial-gradient(circle at 100% 0%,rgba(155,114,255,.09),transparent 42%),
    linear-gradient(135deg,rgba(20,25,52,.76),rgba(10,8,25,.78));
}


/* 名称、时间、正文 */

:is(
  .message-name,
  .mes .name_text,
  .chat-message .author,
  .message .author
){
  color:transparent;
  background:linear-gradient(90deg,#fff,var(--ai-purple-light),#ff9dce,var(--ai-cyan));
  -webkit-background-clip:text;
  background-clip:text;
  font-size:13px;
  font-weight:900;
  letter-spacing:.055em;
}

:is(
  .message-time,
  .mes .timestamp,
  .chat-message time,
  .message time
){
  color:var(--ai-dim);
  font:700 9px/1.4 ui-monospace,Consolas,monospace;
  letter-spacing:.055em;
}

:is(
  .message-content,
  .mes_text,
  .chat-message-content
){
  color:var(--ai-soft);
  line-height:1.85;
  overflow-wrap:anywhere;
}

:is(
  .message-content,
  .mes_text,
  .chat-message-content
) a{
  color:var(--ai-cyan);
  text-decoration-color:rgba(99,230,255,.35);
  text-underline-offset:3px;
}

:is(
  .message-content,
  .mes_text,
  .chat-message-content
) blockquote{
  margin:10px 0;
  padding:10px 14px;
  border-left:2px solid var(--ai-purple);
  border-radius:0 10px 10px 0;
  color:#eee9fa;
  background:linear-gradient(90deg,rgba(155,114,255,.12),transparent);
}

:is(
  .message-content,
  .mes_text,
  .chat-message-content
) code{
  padding:.15em .42em;
  border:1px solid rgba(99,230,255,.15);
  border-radius:6px;
  color:#bff5ff;
  background:rgba(4,10,20,.65);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
}

:is(
  .message-content,
  .mes_text,
  .chat-message-content
) pre{
  position:relative;
  padding:14px;
  overflow:auto;
  border:1px solid rgba(99,230,255,.17);
  border-radius:12px;
  background:
    linear-gradient(135deg,rgba(99,230,255,.035),rgba(155,114,255,.04)),
    rgba(3,4,13,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}


/* 头像 */

:is(.avatar,.message-avatar,.mesAvatarWrapper){
  position:relative;
  border:1px solid rgba(191,168,255,.30);
  border-radius:13px;
  background:rgba(15,11,31,.85);
  box-shadow:
    0 0 0 3px rgba(155,114,255,.055),
    0 0 18px rgba(155,114,255,.15);
}

:is(.avatar,.message-avatar,.mesAvatarWrapper) img{
  border-radius:inherit;
}


/* =========================================================
   底部聊天输入框
   ========================================================= */

:is(
  #send_form,
  .chat-input,
  .chat-input-container,
  .composer,
  .message-composer,
  .input-area
){
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:flex-end;
  gap:8px;
  box-sizing:border-box;
  padding:9px;
  border:1px solid rgba(191,168,255,.22);
  border-radius:16px;
  background:
    radial-gradient(circle at 0 100%,rgba(155,114,255,.09),transparent 40%),
    linear-gradient(135deg,rgba(25,19,50,.92),rgba(8,6,20,.94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 12px 35px rgba(0,0,0,.28),
    0 0 24px rgba(155,114,255,.07);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

:is(
  #send_form,
  .chat-input,
  .chat-input-container,
  .composer,
  .message-composer,
  .input-area
)::before{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  top:-1px;
  height:1px;
  pointer-events:none;
  opacity:.68;
  background:linear-gradient(
    90deg,
    transparent,
    var(--ai-purple),
    var(--ai-pink),
    var(--ai-cyan),
    transparent
  );
  box-shadow:0 0 12px rgba(155,114,255,.48);
  animation:aiUiComposerLine 4.8s ease-in-out infinite alternate;
}

:is(
  #send_form,
  .chat-input,
  .chat-input-container,
  .composer,
  .message-composer,
  .input-area
):focus-within{
  border-color:rgba(99,230,255,.40);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 3px rgba(99,230,255,.055),
    0 14px 38px rgba(0,0,0,.32),
    0 0 28px rgba(99,230,255,.10);
}

:is(
  #send_textarea,
  .chat-input textarea,
  .composer textarea,
  .message-composer textarea
){
  flex:1 1 auto;
  min-width:0;
  min-height:44px;
  max-height:240px;
  margin:0;
  border-color:transparent;
  background:rgba(5,4,15,.35);
  box-shadow:none;
  resize:none;
}

:is(
  #send_textarea,
  .chat-input textarea,
  .composer textarea,
  .message-composer textarea
):focus{
  border-color:rgba(99,230,255,.20);
  box-shadow:inset 0 0 18px rgba(99,230,255,.025);
}

:is(#send_but,.send-button,.composer-send){
  flex:0 0 auto;
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  border-radius:12px;
}


/* =========================================================
   实时预览区
   ========================================================= */

:is(.preview,.live-preview,.preview-panel){
  position:relative;
  min-height:120px;
  padding:16px;
  border-color:rgba(99,230,255,.19);
  background:
    radial-gradient(circle at 100% 0%,rgba(99,230,255,.08),transparent 38%),
    radial-gradient(circle at 0 100%,rgba(155,114,255,.08),transparent 42%),
    linear-gradient(145deg,rgba(20,18,47,.83),rgba(7,6,18,.88));
}

:is(.preview,.live-preview,.preview-panel)::after{
  content:"LIVE PREVIEW";
  position:absolute;
  right:13px;
  top:10px;
  color:rgba(99,230,255,.42);
  font:800 8px/1.4 ui-monospace,Consolas,monospace;
  letter-spacing:.14em;
}


/* =========================================================
   提示、成功、警告、错误
   ========================================================= */

:is(.notice,.alert,.toast,.notification){
  position:relative;
  overflow:hidden;
  padding:11px 14px 11px 17px;
  border:1px solid var(--ai-line);
  border-radius:12px;
  color:var(--ai-soft);
  background:
    linear-gradient(110deg,rgba(155,114,255,.12),rgba(99,230,255,.045)),
    rgba(10,8,25,.92);
  box-shadow:var(--ai-shadow);
  animation:aiUiToastIn .36s var(--ai-ease) both;
}

:is(.notice,.alert,.toast,.notification)::before{
  content:"";
  position:absolute;
  left:0;
  top:14%;
  width:2px;
  height:72%;
  border-radius:8px;
  background:linear-gradient(var(--ai-cyan),var(--ai-purple));
  box-shadow:0 0 10px var(--ai-cyan);
}

:is(.success,.alert-success,.toast-success){
  border-color:rgba(141,255,203,.28);
  color:#d8ffec;
  background:
    linear-gradient(110deg,rgba(141,255,203,.12),rgba(99,230,255,.045)),
    rgba(7,24,21,.92);
}

:is(.warning,.alert-warning,.toast-warning){
  border-color:rgba(255,215,106,.30);
  color:#fff0bd;
  background:
    linear-gradient(110deg,rgba(255,215,106,.12),rgba(255,111,181,.04)),
    rgba(27,21,8,.92);
}

:is(.error,.alert-danger,.toast-error){
  border-color:rgba(255,113,135,.32);
  color:#ffd7de;
  background:
    linear-gradient(110deg,rgba(255,113,135,.14),rgba(255,111,181,.045)),
    rgba(29,8,18,.92);
}


/* =========================================================
   滚动条
   ========================================================= */

*{
  scrollbar-width:thin;
  scrollbar-color:rgba(155,114,255,.52) rgba(8,6,20,.36);
}

*::-webkit-scrollbar{
  width:8px;
  height:8px;
}

*::-webkit-scrollbar-track{
  border-radius:999px;
  background:rgba(8,6,20,.42);
}

*::-webkit-scrollbar-thumb{
  border:2px solid rgba(8,6,20,.65);
  border-radius:999px;
  background:
    linear-gradient(
      to bottom,
      rgba(99,230,255,.72),
      rgba(155,114,255,.76),
      rgba(255,111,181,.65)
    );
}

*::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(
      to bottom,
      var(--ai-cyan),
      var(--ai-purple),
      var(--ai-pink)
    );
}


/* =========================================================
   动画
   ========================================================= */

@keyframes aiUiButtonShine{
  0%{
    left:-70%;
    opacity:0;
  }
  18%{
    opacity:.85;
  }
  100%{
    left:132%;
    opacity:0;
  }
}

@keyframes aiUiClickWave{
  0%{
    opacity:.9;
    transform:translate(-50%,-50%) scale(0);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(14);
  }
}

@keyframes aiUiMessageShine{
  0%{
    left:-45%;
    opacity:0;
  }
  18%{
    opacity:1;
  }
  100%{
    left:120%;
    opacity:0;
  }
}

@keyframes aiUiComposerLine{
  0%{
    left:6%;
    right:48%;
    opacity:.42;
  }
  100%{
    left:42%;
    right:7%;
    opacity:1;
  }
}

@keyframes aiUiSuccess{
  0%{
    filter:brightness(1);
    transform:scale(1);
  }
  45%{
    filter:brightness(1.4);
    transform:scale(1.035);
  }
  100%{
    filter:brightness(1);
    transform:scale(1);
  }
}

@keyframes aiUiToastIn{
  from{
    opacity:0;
    filter:brightness(1.35);
    transform:translateY(8px) scale(.985);
  }
  to{
    opacity:1;
    filter:brightness(1);
    transform:translateY(0) scale(1);
  }
}


/* =========================================================
   移动端
   ========================================================= */

@media(max-width:600px){
  :is(
    .panel,
    .card,
    .modal-content,
    .dialog-content,
    .drawer-content,
    .settings-panel,
    .character-panel,
    .world-panel,
    .preview-panel,
    .form-panel,
    .chat-panel
  ){
    border-radius:15px;
  }

  :is(
    .tabs,
    .tab-list,
    [role="tablist"],
    .nav-tabs
  ){
    justify-content:flex-start;
    padding:4px;
  }

  :is(
    .tab,
    .tab-button,
    [role="tab"],
    .nav-tabs > li > a
  ){
    min-height:36px;
    padding:7px 12px;
    font-size:11px;
  }

  :is(
    .message,
    .mes,
    .chat-message,
    [data-role="message"]
  ){
    margin:8px 4px;
    padding:12px 13px;
    border-radius:13px;
  }

  :is(
    .message.user,
    .chat-message.user,
    .mes[is_user="true"],
    [data-role="message"][data-author="user"]
  ){
    margin-left:14px;
  }

  :is(
    .message.assistant,
    .message.ai,
    .chat-message.assistant,
    .mes[is_user="false"],
    [data-role="message"][data-author="assistant"]
  ){
    margin-right:8px;
  }

  :is(
    #send_form,
    .chat-input,
    .chat-input-container,
    .composer,
    .message-composer,
    .input-area
  ){
    gap:6px;
    padding:7px;
    border-radius:14px;
  }

  :is(#send_but,.send-button,.composer-send){
    width:42px;
    min-width:42px;
    height:42px;
    min-height:42px;
  }

  :is(
    button,
    .button,
    .btn,
    [role="button"]
  ){
    min-height:40px;
  }
}


/* =========================================================
   减少动态效果
   ========================================================= */

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }

  :is(
    button,
    .button,
    .btn,
    [role="button"]
  ):hover{
    transform:none;
  }

  :is(
    .message,
    .mes,
    .chat-message,
    [data-role="message"]
  ):hover{
    transform:none;
  }
}