ai{
--paper:rgba(250,252,255,.95);
--ink:#17202c;
--muted:#687486;
--line:rgba(44,67,91,.14);
--blue:#4388e8;
--blue2:#275fae;
--pink:#f07fa8;
--pink2:#c94f80;
--cyan:#20b9bf;
--cyan2:#07838e;
--purple:#7767d8;
--red:#e7626c;
--amber:#e3a43f;
--green:#35a879;
--phone:#101721;
--screen:#edf2f6;
display:block;
position:relative;
max-width:920px;
margin:auto;
color:var(--ink);
font:15px/1.65 system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
background:radial-gradient(circle at 8% 2%,rgba(32,185,191,.14),transparent 28%),radial-gradient(circle at 95% 16%,rgba(119,103,216,.12),transparent 30%),linear-gradient(145deg,#f4f7fa,#e8eef3);
border:1px solid rgba(60,83,107,.14);
border-radius:22px;
box-shadow:0 18px 50px rgba(19,35,55,.18);
overflow:hidden;
isolation:isolate;
}
ai:before{
content:"";
position:absolute;
inset:0;
z-index:-1;
pointer-events:none;
opacity:.34;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='68' viewBox='0 0 68 68'%3E%3Cg fill='none' stroke='%23627b93' stroke-opacity='.12'%3E%3Cpath d='M0 34h68M34 0v68'/%3E%3Ccircle cx='34' cy='34' r='2'/%3E%3C/g%3E%3C/svg%3E");
}
ai b,ai strong{font-weight:700}
ai q{quotes:none}
ai q:before,ai q:after{content:none}
ai av{
box-sizing:border-box;
overflow:hidden;
user-select:none;
}
ai av[g="m"]{
color:#fff;
background:linear-gradient(135deg,#67b5ff 0%,var(--blue) 48%,var(--blue2) 100%)!important;
border-color:rgba(215,238,255,.9)!important;
box-shadow:0 4px 11px rgba(47,118,209,.3)!important;
}
ai av[g="f"]{
color:#fff;
background:linear-gradient(135deg,#ffb5cf 0%,var(--pink) 48%,var(--pink2) 100%)!important;
border-color:rgba(255,226,237,.92)!important;
box-shadow:0 4px 11px rgba(211,77,130,.27)!important;
}
ai av[g="me"]{
color:#fff;
background:linear-gradient(135deg,#68ebe0 0%,var(--cyan) 48%,var(--cyan2) 100%)!important;
border-color:rgba(220,255,252,.92)!important;
box-shadow:0 4px 11px rgba(20,157,165,.29)!important;
}
ai av[g="u"]{
color:#fff;
background:linear-gradient(135deg,#a296ff,#6652c9 55%,#46349b)!important;
border-color:rgba(235,231,255,.9)!important;
box-shadow:0 4px 11px rgba(85,64,172,.29)!important;
}
ai av[g="group"]{
color:#fff;
background:linear-gradient(135deg,var(--blue),var(--cyan))!important;
border-color:rgba(221,250,255,.9)!important;
box-shadow:0 4px 11px rgba(38,143,190,.28)!important;
}
ai>hd{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:11px 16px;
color:#f6fbff;
background:linear-gradient(115deg,#172c48,#245b81 54%,#4565a0);
box-shadow:0 5px 20px rgba(22,49,78,.2);
}
ai>hd:before{
content:"";
width:8px;
height:8px;
flex:0 0 auto;
border-radius:50%;
background:#72eff0;
box-shadow:0 0 0 4px rgba(114,239,240,.13),0 0 12px #72eff0;
animation:aiPulse 2.4s ease-in-out infinite;
}
ai>hd>b{
margin-right:auto;
font-size:15px;
letter-spacing:.05em;
}
ai>hd>i{
color:rgba(247,252,255,.78);
font-size:12px;
font-style:normal;
text-align:right;
}
ai>scene{
display:block;
position:relative;
margin:13px 13px 10px;
padding:16px 15px 13px;
color:#fff;
overflow:hidden;
border-radius:16px;
background:linear-gradient(120deg,rgba(14,37,61,.9),rgba(35,101,127,.82)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='90'%3E%3Cg fill='none' stroke='%23c7f6ff' stroke-opacity='.13'%3E%3Cpath d='M-10 73L32 31l28 28 33-43 78 75'/%3E%3Cpath d='M0 82h160M120 0v90'/%3E%3C/g%3E%3C/svg%3E");
background-size:cover;
box-shadow:0 9px 24px rgba(23,64,83,.2);
}
ai>scene:after{
content:"";
position:absolute;
right:-22px;
top:-28px;
width:100px;
height:100px;
border:1px solid rgba(146,244,255,.25);
border-radius:50%;
box-shadow:0 0 0 16px rgba(146,244,255,.05),0 0 0 32px rgba(146,244,255,.035);
}
ai scene loc,ai scene tag{
display:inline-flex;
position:relative;
z-index:1;
align-items:center;
margin:0 5px 5px 0;
padding:2px 8px;
font-size:11px;
border:1px solid rgba(255,255,255,.2);
border-radius:20px;
background:rgba(8,25,42,.28);
backdrop-filter:blur(5px);
}
ai scene tag{color:#a8f4ec}
ai scene h1{
position:relative;
z-index:1;
margin:7px 0 1px;
font-size:22px;
line-height:1.28;
}
ai scene>i{
position:relative;
z-index:1;
display:block;
color:rgba(255,255,255,.72);
font-size:12px;
font-style:normal;
}
ai>article{
display:block;
padding:3px 17px 8px;
font-size:15px;
line-height:1.85;
}
ai article>p{
position:relative;
margin:8px 0;
padding-left:13px;
}
ai article>p:before{
content:"";
position:absolute;
left:0;
top:.75em;
width:5px;
height:5px;
border-radius:50%;
background:linear-gradient(135deg,var(--cyan),var(--purple));
box-shadow:0 0 8px rgba(32,185,191,.55);
}
ai talk,ai think{
display:block;
position:relative;
margin:10px 0;
padding:9px 11px;
overflow:hidden;
border:1px solid rgba(55,80,104,.13);
border-radius:14px;
box-shadow:0 4px 12px rgba(35,60,83,.07);
}
ai talk:before,ai think:before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:4px;
}
ai talk>b,ai think>b{
display:inline;
padding:3px 8px;
box-decoration-break:clone;
-webkit-box-decoration-break:clone;
color:#fff;
font-size:11px;
line-height:1.45;
border-radius:12px;
white-space:normal;
}
ai talk>span,ai think>span{
display:inline;
margin-left:6px;
min-width:0;
font-size:13px;
line-height:1.72;
overflow-wrap:anywhere;
}
ai talk[g="m"]{
background:linear-gradient(105deg,rgba(67,136,232,.12),rgba(255,255,255,.72));
}
ai talk[g="m"]:before{background:linear-gradient(var(--blue),var(--blue2))}
ai talk[g="m"]>b{background:linear-gradient(135deg,var(--blue),var(--blue2))}
ai talk[g="m"]>span{color:#244d7d}
ai talk[g="f"]{
background:linear-gradient(105deg,rgba(240,127,168,.13),rgba(255,255,255,.74));
}
ai talk[g="f"]:before{background:linear-gradient(var(--pink),var(--pink2))}
ai talk[g="f"]>b{background:linear-gradient(135deg,var(--pink),var(--pink2))}
ai talk[g="f"]>span{color:#74324d}
ai talk[g="me"]{
background:linear-gradient(105deg,rgba(32,185,191,.13),rgba(255,255,255,.74));
}
ai talk[g="me"]:before{background:linear-gradient(var(--cyan),var(--cyan2))}
ai talk[g="me"]>b{background:linear-gradient(135deg,var(--cyan),var(--cyan2))}
ai talk[g="me"]>span{color:#175c62}
ai think{
border-style:dashed;
background:linear-gradient(120deg,rgba(119,103,216,.11),rgba(247,245,255,.77));
}
ai think:before{background:linear-gradient(var(--purple),#5144a8)}
ai think>b{background:linear-gradient(135deg,var(--purple),#5144a8)}
ai think>span{
color:#57516f;
font-style:italic;
}
ai think>span:before{content:"“"}
ai think>span:after{content:"”"}
ai ph{
display:block;
position:relative;
width:min(390px,calc(100% - 26px));
margin:15px auto 19px;
box-sizing:border-box;
overflow:hidden;
color:#17202c;
background:var(--screen);
border:7px solid var(--phone);
border-radius:38px;
box-shadow:0 25px 45px rgba(15,25,40,.27),0 0 0 1px rgba(255,255,255,.22) inset,0 0 0 2px rgba(0,0,0,.18);
transform:translateZ(0);
}
ai ph:before{
content:"";
position:absolute;
z-index:20;
left:50%;
top:7px;
width:88px;
height:20px;
transform:translateX(-50%);
border-radius:0 0 14px 14px;
background:#101721;
pointer-events:none;
}
ai ph:after{
content:"";
position:absolute;
z-index:21;
top:12px;
left:calc(50% + 25px);
width:6px;
height:6px;
border-radius:50%;
background:#223343;
box-shadow:inset 0 0 2px #5aa1c0;
pointer-events:none;
}
ai top{
display:flex;
align-items:center;
height:30px;
padding:0 13px;
box-sizing:border-box;
font-size:10px;
font-weight:700;
background:rgba(244,248,251,.96);
}
ai top>i{
display:block;
flex:1;
font-style:normal;
}
ai top>b{
font-size:9px;
white-space:nowrap;
}
ai pn{
display:flex;
align-items:center;
gap:9px;
height:53px;
padding:4px 12px;
box-sizing:border-box;
border-bottom:1px solid rgba(55,77,99,.13);
background:rgba(250,252,254,.96);
}
ai pn>av{
display:grid;
place-items:center;
width:34px;
height:34px;
flex:0 0 auto;
font-weight:800;
border-radius:11px;
}
ai pn>q{
display:flex;
flex:1;
min-width:0;
flex-direction:column;
line-height:1.3;
}
ai pn>q>b{
overflow:hidden;
font-size:14px;
text-overflow:ellipsis;
white-space:nowrap;
}
ai pn>q>i{
color:var(--muted);
font-size:10px;
font-style:normal;
}
ai pn>em{
color:#718092;
font-style:normal;
letter-spacing:2px;
}
ai apps{
display:flex;
position:relative;
width:100%;
height:525px;
box-sizing:border-box;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
scrollbar-width:none;
overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;
background:var(--screen);
}
ai apps::-webkit-scrollbar{
display:none;
width:0;
height:0;
}
ai apps>tab{
display:block;
position:relative;
width:100%;
height:100%;
min-width:100%;
max-width:100%;
flex:0 0 100%;
box-sizing:border-box;
overflow-x:hidden;
overflow-y:auto;
scroll-snap-align:start;
scroll-snap-stop:always;
scrollbar-width:thin;
scrollbar-color:rgba(65,97,121,.22) transparent;
overscroll-behavior-y:contain;
background:linear-gradient(rgba(244,248,251,.96),rgba(233,240,245,.98)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M0 18h36M18 0v36' stroke='%23566f86' stroke-opacity='.05'/%3E%3C/svg%3E");
}
ai apps>tab::-webkit-scrollbar{width:3px}
ai apps>tab::-webkit-scrollbar-thumb{
background:rgba(65,97,121,.25);
border-radius:4px;
}
ai apps>#c{
display:flex;
flex-direction:column;
}
ai apps>tab:target{animation:aiAppFocus .35s ease-out}
ai day{
display:block;
width:max-content;
margin:9px auto 8px;
padding:2px 9px;
color:#84909d;
font-size:10px;
border-radius:12px;
background:rgba(116,135,151,.1);
}
ai m{
display:flex;
align-items:flex-start;
gap:7px;
margin:8px 11px;
flex:0 0 auto;
}
ai m>av{
display:grid;
place-items:center;
width:31px;
height:31px;
flex:0 0 auto;
font-size:11px;
font-weight:700;
border-radius:9px;
}
ai m>q{
display:flex;
max-width:78%;
flex-direction:column;
align-items:flex-start;
}
ai m>q>b{
margin:0 3px 2px;
color:#7f8a96;
font-size:9px;
font-weight:500;
}
ai m>q>span{
display:block;
position:relative;
padding:7px 10px;
font-size:12px;
line-height:1.55;
border:1px solid rgba(61,83,105,.09);
border-radius:4px 12px 12px 12px;
background:#fff;
box-shadow:0 2px 7px rgba(30,52,72,.07);
}
ai m>q>i{
margin:2px 3px 0;
color:#7f8a96;
font-size:9px;
font-style:normal;
}
ai m[me]{justify-content:flex-end}
ai m[me]>q{
align-items:flex-end;
max-width:82%;
}
ai m[me]>q>span{
color:#0e4f52;
border-color:rgba(32,185,191,.2);
border-radius:12px 4px 12px 12px;
background:linear-gradient(135deg,#cbf5ee,#b6eae7);
}
ai m[sys]{
display:block;
align-self:center;
max-width:85%;
margin:8px auto;
padding:3px 9px;
color:#7f8995;
font-size:9px;
text-align:center;
border-radius:12px;
background:rgba(99,119,136,.1);
}
ai m[unknown]>q>span{
color:#582965;
border-color:rgba(119,103,216,.25);
background:linear-gradient(135deg,#faf6ff,#eee8fa);
box-shadow:0 0 13px rgba(104,80,194,.12);
animation:aiGlitch 4.5s steps(1,end) infinite;
}
ai send{
display:flex;
position:sticky;
z-index:8;
bottom:0;
align-items:center;
gap:7px;
width:100%;
min-height:48px;
margin-top:auto;
padding:7px 9px;
box-sizing:border-box;
flex:0 0 auto;
font-size:0;
border-top:1px solid rgba(53,75,97,.13);
background:rgba(247,250,252,.98);
box-shadow:0 -5px 14px rgba(28,51,71,.07);
backdrop-filter:blur(12px);
}
ai send:before{
content:"＋";
display:grid;
place-items:center;
width:27px;
height:27px;
flex:0 0 auto;
box-sizing:border-box;
font-size:15px;
line-height:1;
border:1px solid rgba(55,78,99,.2);
border-radius:50%;
}
ai send>span{
flex:1;
min-width:0;
padding:6px 9px;
overflow:hidden;
color:#9aa3ad;
font-size:10px;
white-space:nowrap;
border:1px solid rgba(53,76,98,.08);
border-radius:8px;
background:#fff;
}
ai send>b{
padding:5px 9px;
color:#fff;
font-size:10px;
border-radius:8px;
background:#25a87c;
}
ai bar{
display:flex;
position:sticky;
z-index:5;
top:0;
align-items:flex-start;
justify-content:center;
flex-direction:column;
min-height:48px;
padding:5px 13px;
box-sizing:border-box;
border-bottom:1px solid rgba(51,74,96,.13);
background:rgba(247,250,252,.96);
backdrop-filter:blur(10px);
}
ai bar>b{font-size:14px}
ai bar>i{
color:var(--muted);
font-size:10px;
font-style:normal;
}
ai cover{
display:flex;
position:relative;
min-height:126px;
padding:68px 13px 13px 82px;
box-sizing:border-box;
flex-direction:column;
justify-content:flex-end;
color:#fff;
overflow:hidden;
background:linear-gradient(180deg,rgba(17,37,57,.03),rgba(17,37,57,.82)),radial-gradient(circle at 78% 18%,rgba(81,220,222,.38),transparent 28%),linear-gradient(135deg,#315f7b,#253a5e 55%,#4f5380);
}
ai cover:before{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:78px;
opacity:.32;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='78' viewBox='0 0 390 78'%3E%3Cpath fill='%23fff' fill-opacity='.2' d='M0 58h25V31h14v27h16V18h24v40h18V38h19v20h27V9h29v49h17V29h16v29h25V20h28v38h17V41h21v17h27V14h31v44h36v20H0z'/%3E%3C/svg%3E");
background-position:center bottom;
background-size:cover;
}
ai cover>av{
display:grid;
position:absolute;
z-index:2;
left:13px;
bottom:13px;
place-items:center;
width:58px;
height:58px;
color:#fff;
font-size:21px;
font-weight:800;
border:3px solid rgba(255,255,255,.92);
border-radius:14px;
}
ai cover>b{
position:relative;
z-index:2;
font-size:14px;
line-height:1.25;
text-shadow:0 2px 6px rgba(0,0,0,.35);
}
ai cover>i{
position:relative;
z-index:2;
color:rgba(255,255,255,.74);
font-size:9px;
font-style:normal;
}
ai post{
display:block;
position:relative;
margin:0 10px;
padding:11px 2px 12px 43px;
border-bottom:1px solid rgba(52,76,98,.12);
}
ai post>h{
display:flex;
align-items:center;
gap:8px;
min-height:34px;
}
ai post h>av{
display:grid;
position:absolute;
left:0;
top:11px;
place-items:center;
width:34px;
height:34px;
color:#fff;
font-size:11px;
font-weight:800;
border-radius:9px;
}
ai post h>q{
display:flex;
min-width:0;
flex:1;
flex-direction:column;
align-items:flex-start;
line-height:1.35;
}
ai post h>q>b{
color:#365b7c;
font-size:12px;
}
ai post h>q>i{
color:var(--muted);
font-size:9px;
font-style:normal;
}
ai post>p{
margin:7px 0;
color:#2d3946;
font-size:11px;
line-height:1.58;
}
ai pics{
display:flex;
align-items:center;
justify-content:center;
min-height:92px;
max-width:205px;
margin:7px 0;
padding:8px;
box-sizing:border-box;
overflow:hidden;
font-size:38px;
font-style:normal;
text-align:center;
border:1px solid rgba(55,91,116,.13);
border-radius:8px;
background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.9),transparent 28%),linear-gradient(145deg,#dcecf1,#c4dbe3);
box-shadow:inset 0 0 25px rgba(46,105,127,.09),0 3px 9px rgba(34,64,84,.09);
transition:.22s ease;
}
ai pics:hover{
filter:saturate(1.12) brightness(1.04);
box-shadow:0 7px 16px rgba(36,79,102,.18);
transform:translateY(-2px) scale(1.02);
}
ai post meta{
display:flex;
align-items:center;
gap:8px;
margin-top:6px;
color:#758291;
font-size:9px;
}
ai post meta a{
flex:0 0 auto;
margin-left:auto;
padding:2px 5px;
color:#536f8b;
font-weight:700;
text-decoration:none;
border-radius:5px;
}
ai post meta a+a{margin-left:0}
ai post meta a:hover{
color:#fff;
background:#637b93;
}
ai reply{
display:block;
position:relative;
margin-top:6px;
padding:6px 7px;
color:#566473;
font-size:9px;
line-height:1.5;
border-radius:6px;
background:rgba(103,125,144,.1);
}
ai reply:before{
content:"";
position:absolute;
left:9px;
top:-4px;
width:8px;
height:8px;
background:rgba(103,125,144,.1);
transform:rotate(45deg);
}
ai reply>b{color:#3e617d}
ai mp{
display:block;
position:relative;
height:220px;
margin:10px;
overflow:hidden;
border:1px solid rgba(44,102,127,.18);
border-radius:15px;
background-color:#dbe9e7;
background-image:linear-gradient(28deg,transparent 42%,rgba(255,255,255,.9) 43%,rgba(255,255,255,.9) 47%,transparent 48%),linear-gradient(105deg,transparent 51%,rgba(255,255,255,.8) 52%,rgba(255,255,255,.8) 56%,transparent 57%),linear-gradient(rgba(48,115,125,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(48,115,125,.08) 1px,transparent 1px);
background-size:100% 100%,100% 100%,24px 24px,24px 24px;
box-shadow:inset 0 0 30px rgba(39,100,105,.12);
}
ai mp:before{
content:"临 江\A\A　滨河辅路　　　　　　旧港区\A\A\A　　长宁隧道";
white-space:pre;
position:absolute;
inset:0;
padding:13px;
color:rgba(45,92,98,.4);
font-size:10px;
letter-spacing:.16em;
}
ai mp road{
position:absolute;
z-index:1;
left:21%;
top:69%;
width:61%;
height:4px;
border-radius:5px;
background:linear-gradient(90deg,var(--blue),var(--cyan),var(--red));
box-shadow:0 0 8px rgba(47,155,181,.75);
transform:rotate(-28deg);
transform-origin:left center;
}
ai mp road:after{
content:"";
position:absolute;
inset:-3px;
border:1px dashed rgba(255,255,255,.85);
border-width:1px 0;
animation:aiRoute 1.7s linear infinite;
}
ai pt{
display:flex;
position:absolute;
z-index:3;
align-items:center;
flex-direction:column;
font-size:9px;
line-height:1.2;
text-align:center;
filter:drop-shadow(0 2px 2px rgba(20,52,62,.2));
}
ai pt:before{
display:grid;
place-items:center;
width:24px;
height:24px;
margin-bottom:2px;
color:#fff;
font-size:12px;
border:2px solid #fff;
border-radius:50% 50% 50% 4px;
background:var(--blue);
box-shadow:0 0 0 4px rgba(54,120,212,.13);
transform:rotate(-45deg);
}
ai pt[k="me"]:before{
content:"●";
background:var(--cyan);
}
ai pt[k="x"]:before{
content:"◆";
background:var(--red);
animation:aiDanger 1.5s ease-out infinite;
}
ai pt[k="t"]:before{
content:"★";
background:var(--purple);
}
ai pt>b,ai pt>i{
padding:1px 4px;
border-radius:4px;
background:rgba(250,253,253,.82);
}
ai pt>i{
max-width:105px;
color:var(--muted);
font-size:8px;
font-style:normal;
}
ai pt[k="me"]{left:11%;top:62%}
ai pt[k="x"]{left:43%;top:38%}
ai pt[k="t"]{right:7%;top:13%}
ai route{
display:block;
padding:0 10px 5px;
}
ai route>l{
display:grid;
grid-template-columns:76px 1fr;
gap:7px;
padding:7px 4px;
color:#667486;
font-size:11px;
border-bottom:1px solid rgba(55,80,103,.1);
}
ai route>l>b{color:#35516b}
ai navs{
display:grid;
grid-template-columns:1fr 1fr;
gap:6px;
padding:7px 10px 12px;
}
ai navs>a{
padding:7px 5px;
color:#fff;
font-size:10px;
font-weight:700;
text-align:center;
text-decoration:none;
border-radius:9px;
background:linear-gradient(135deg,var(--blue),#4564b6);
box-shadow:0 4px 10px rgba(54,96,178,.18);
transition:.2s ease;
}
ai navs>a:last-child{
grid-column:1/-1;
color:#526579;
background:#dfe7ed;
box-shadow:none;
}
ai navs>a:hover{
filter:brightness(1.08);
transform:translateY(-1px);
}
ai tab>acts{
display:grid;
gap:7px;
padding:11px;
}
ai tab>acts>a{
display:flex;
align-items:center;
min-height:50px;
padding:9px 11px;
box-sizing:border-box;
flex-direction:column;
color:inherit;
text-decoration:none;
border:1px solid rgba(52,79,104,.11);
border-radius:12px;
background:rgba(255,255,255,.78);
box-shadow:0 3px 10px rgba(38,60,80,.06);
transition:.2s ease;
}
ai tab>acts>a:hover{
border-color:rgba(32,185,191,.42);
box-shadow:0 6px 14px rgba(44,113,132,.13);
transform:translateY(-2px);
}
ai tab>acts>a>b{
align-self:stretch;
color:#294a68;
font-size:12px;
}
ai tab>acts>a>i{
align-self:stretch;
color:var(--muted);
font-size:9px;
font-style:normal;
line-height:1.4;
}
ai dock{
display:grid;
position:relative;
z-index:15;
grid-template-columns:repeat(4,1fr);
height:57px;
margin:0;
border-top:1px solid rgba(49,70,91,.15);
background:rgba(250,252,254,.98);
box-shadow:0 -4px 12px rgba(26,47,67,.06);
}
ai dock>a{
display:flex;
position:relative;
align-items:center;
justify-content:center;
flex-direction:column;
color:#718091;
font-size:19px;
line-height:1.1;
text-decoration:none;
transition:.2s ease;
}
ai dock>a:after{
content:"";
position:absolute;
bottom:1px;
width:0;
height:2px;
border-radius:4px;
background:linear-gradient(90deg,var(--cyan),var(--purple));
transition:.2s ease;
}
ai dock>a:hover{
color:var(--blue);
background:rgba(54,120,212,.05);
transform:translateY(-1px);
}
ai dock>a:hover:after{width:24px}
ai dock>a>i{
color:inherit;
font-size:8px;
font-style:normal;
}
ai dock>a>b{
display:grid;
position:absolute;
top:4px;
left:54%;
place-items:center;
min-width:14px;
height:14px;
padding:0 3px;
box-sizing:border-box;
color:#fff;
font-size:8px;
border-radius:9px;
background:var(--red);
}
ai ph:not(:has(tab:target)) dock a[href="#c"],
ai ph:has(#c:target) dock a[href="#c"],
ai ph:has(#f:target) dock a[href="#f"],
ai ph:has(#p:target) dock a[href="#p"],
ai ph:has(#x:target) dock a[href="#x"]{
color:var(--blue);
background:rgba(54,120,212,.045);
}
ai ph:not(:has(tab:target)) dock a[href="#c"]:after,
ai ph:has(#c:target) dock a[href="#c"]:after,
ai ph:has(#f:target) dock a[href="#f"]:after,
ai ph:has(#p:target) dock a[href="#p"]:after,
ai ph:has(#x:target) dock a[href="#x"]:after{
width:24px;
}
ai home{
display:block;
width:92px;
height:4px;
margin:6px auto;
border-radius:4px;
background:#2d3640;
}
ai>details{
display:block;
margin:9px 13px;
overflow:hidden;
border:1px solid var(--line);
border-radius:13px;
background:rgba(251,253,255,.75);
box-shadow:0 3px 11px rgba(38,59,79,.045);
transition:.2s ease;
}
ai>details:last-child{margin-bottom:13px}
ai>details:hover{
border-color:rgba(54,120,212,.25);
box-shadow:0 6px 16px rgba(38,75,105,.075);
}
ai>details>summary{
position:relative;
min-height:42px;
padding:10px 44px 10px 12px;
box-sizing:border-box;
color:#24435f;
font-size:14px;
font-weight:750;
line-height:22px;
cursor:pointer;
list-style:none;
background:linear-gradient(90deg,rgba(54,120,212,.09),rgba(49,184,200,.035),transparent);
user-select:none;
}
ai>details>summary::-webkit-details-marker{display:none}
ai>details>summary:after{
content:"＋";
display:flex;
position:absolute;
right:11px;
top:50%;
align-items:center;
justify-content:center;
width:22px;
height:22px;
box-sizing:border-box;
color:#58738d;
font:400 18px/1 Arial,sans-serif;
border-radius:50%;
background:rgba(73,105,134,.09);
transform:translateY(-50%);
transition:.22s ease;
}
ai>details[open]>summary{
border-bottom:1px solid rgba(53,78,101,.1);
}
ai>details[open]>summary:after{
content:"−";
padding-bottom:2px;
color:#fff;
font-size:19px;
background:var(--blue);
transform:translateY(-50%) rotate(180deg);
}
ai g{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:1px;
margin:8px;
overflow:hidden;
border-radius:9px;
background:rgba(50,76,99,.09);
}
ai g>d{
display:flex;
min-width:0;
padding:7px 9px;
flex-direction:column;
overflow:hidden;
color:#28445c;
font-size:13px;
font-weight:700;
text-overflow:ellipsis;
background:rgba(251,253,255,.9);
}
ai g>d>i{
color:var(--muted);
font-size:10px;
font-style:normal;
font-weight:400;
}
ai v{
display:block;
padding:4px 10px;
}
ai v>b{
display:block;
color:#506376;
font-size:11px;
}
ai v>meter{
display:block;
width:100%;
height:8px;
margin-top:2px;
border:0;
border-radius:8px;
background:#dfe7ec;
}
ai v>meter::-webkit-meter-bar{
border:0;
border-radius:8px;
background:#dfe7ec;
}
ai v>meter::-webkit-meter-optimum-value{
border-radius:8px;
background:linear-gradient(90deg,var(--blue),var(--cyan));
}
ai v>meter::-webkit-meter-suboptimum-value{
border-radius:8px;
background:linear-gradient(90deg,var(--amber),#f1c562);
}
ai v>meter::-webkit-meter-even-less-good-value{
border-radius:8px;
background:linear-gradient(90deg,var(--red),var(--amber));
}
ai details>l{
display:grid;
grid-template-columns:minmax(76px,24%) 1fr;
gap:8px;
padding:7px 11px;
color:#697687;
font-size:12px;
border-top:1px dashed rgba(56,81,104,.1);
overflow-wrap:anywhere;
}
ai details>l>b{color:#36526b}
ai details>r{
display:flex;
align-items:center;
gap:9px;
margin:0 9px;
padding:7px 2px;
border-bottom:1px solid rgba(51,76,99,.09);
}
ai details>r:last-child{border-bottom:0}
ai details>r>av{
display:grid;
place-items:center;
width:36px;
height:36px;
flex:0 0 auto;
font-size:12px;
font-weight:700;
border-radius:11px;
}
ai details>r>q{
display:flex;
min-width:0;
flex:1;
flex-direction:column;
line-height:1.45;
}
ai details>r>q>b{font-size:12px}
ai details>r>q>i{
color:var(--muted);
font-size:9px;
font-style:normal;
}
ai details>r>q>span{
overflow:hidden;
color:#5e6d7d;
font-size:11px;
text-overflow:ellipsis;
white-space:nowrap;
}
ai details>n{
display:grid;
grid-template-columns:45px 1fr;
gap:0 8px;
padding:8px 10px;
border-bottom:1px solid rgba(51,76,99,.09);
}
ai details>n>i{
grid-row:1/3;
align-self:start;
padding:2px 5px;
color:#fff;
font-size:9px;
font-style:normal;
text-align:center;
border-radius:5px;
background:linear-gradient(135deg,var(--blue),var(--cyan));
}
ai details>n:nth-of-type(2)>i{background:linear-gradient(135deg,#48aeb4,#54c8a0)}
ai details>n:nth-of-type(3)>i{background:linear-gradient(135deg,var(--purple),#9b72c9)}
ai details>n:nth-of-type(4)>i{background:linear-gradient(135deg,var(--red),#9b456b)}
ai details>n>b{font-size:12px}
ai details>n>span{
color:var(--muted);
font-size:10px;
}
ai details>e{
display:grid;
position:relative;
grid-template-columns:64px 1fr;
gap:0 9px;
margin:0 10px;
padding:7px 3px 7px 16px;
}
ai details>e:before{
content:"";
position:absolute;
left:3px;
top:14px;
width:6px;
height:6px;
border:2px solid var(--cyan);
border-radius:50%;
background:#fff;
}
ai details>e:not(:last-of-type):after{
content:"";
position:absolute;
left:7px;
top:23px;
bottom:-8px;
width:1px;
background:linear-gradient(var(--cyan),rgba(49,184,200,.08));
}
ai details>e>time{
grid-row:1/3;
color:var(--blue);
font-size:10px;
font-weight:700;
}
ai details>e>b{font-size:12px}
ai details>e>span{
color:var(--muted);
font-size:10px;
}
ai clue{
display:flex;
position:relative;
margin:8px 9px;
padding:8px 9px 8px 13px;
flex-direction:column;
overflow:hidden;
border:1px solid rgba(61,84,105,.1);
border-radius:9px;
background:rgba(255,255,255,.75);
}
ai clue:before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:4px;
background:#8798a8;
}
ai clue[lv="3"]:before{
background:var(--red);
box-shadow:0 0 8px rgba(231,98,108,.45);
}
ai clue[lv="2"]:before{background:var(--amber)}
ai clue[lv="1"]:before{background:var(--cyan)}
ai clue>b{font-size:12px}
ai clue>span{
color:#586878;
font-size:11px;
}
ai clue>i{
color:var(--muted);
font-size:9px;
font-style:normal;
}
ai mem{
display:grid;
grid-template-columns:75px 1fr;
gap:8px;
padding:8px 11px;
color:#5f6e7d;
font-size:11px;
border-bottom:1px dashed rgba(51,77,100,.11);
}
ai mem>time{
color:var(--purple);
font-size:10px;
font-weight:700;
}
@keyframes aiPulse{
0%,100%{opacity:.65;transform:scale(.85)}
50%{opacity:1;transform:scale(1.1)}
}
@keyframes aiDanger{
0%{box-shadow:0 0 0 0 rgba(231,98,108,.5)}
100%{box-shadow:0 0 0 14px rgba(231,98,108,0)}
}
@keyframes aiRoute{
from{transform:translateX(-10px)}
to{transform:translateX(10px)}
}
@keyframes aiGlitch{
0%,91%,100%{transform:none;filter:none}
92%{transform:translateX(1px);filter:hue-rotate(18deg)}
93%{transform:translateX(-1px)}
94%{transform:none}
}
@keyframes aiAppFocus{
0%{filter:brightness(.95);opacity:.88}
100%{filter:brightness(1);opacity:1}
}
@media(max-width:600px){
ai{
width:100%;
border-radius:14px;
}
ai>hd{
padding:9px 11px;
align-items:flex-start;
}
ai>hd>b{font-size:13px}
ai>hd>i{
max-width:52%;
font-size:10px;
}
ai>scene{
margin:8px 8px 7px;
padding:13px 12px 11px;
border-radius:13px;
}
ai scene h1{font-size:19px}
ai>article{
padding:2px 12px 7px;
font-size:14px;
}
ai talk,ai think{padding:8px 10px}
ai ph{
width:calc(100% - 16px);
max-width:390px;
margin:12px auto 16px;
border-width:5px;
border-radius:31px;
}
ai ph:before{
top:5px;
width:78px;
height:18px;
}
ai ph:after{top:10px}
ai apps{height:500px}
ai top{height:28px}
ai pn{height:50px}
ai cover{min-height:118px}
ai pics{
min-height:84px;
font-size:34px;
}
ai>details{
margin:8px;
border-radius:11px;
}
}
@media(max-width:380px){
ai>scene{margin:6px}
ai>article{
padding-left:10px;
padding-right:10px;
}
ai ph{
width:calc(100% - 8px);
margin:10px auto 14px;
border-width:4px;
border-radius:27px;
}
ai apps{height:475px}
ai m{
margin-left:8px;
margin-right:8px;
}
ai m>q{max-width:79%}
ai m[me]>q{max-width:84%}
ai post{
margin-left:8px;
margin-right:8px;
padding-left:40px;
}
ai pics{max-width:190px}
ai mp{
height:205px;
margin:8px;
}
ai route>l{grid-template-columns:70px 1fr}
ai g{grid-template-columns:1fr}
ai details>l{grid-template-columns:72px 1fr}
}
@media(prefers-reduced-motion:reduce){
ai apps{scroll-behavior:auto}
ai apps>tab:target{animation:none}
ai>hd:before,
ai m[unknown]>q>span,
ai pt[k="x"]:before,
ai mp road:after{animation:none}
}

/* ===== 未知角色：红色警戒主题补丁（头像无光圈版） ===== */

/* 头像 */
ai av[g="u"],
ai av[g="u"]:hover,
ai av[g="u"]:focus,
ai av[g="u"]:focus-visible,
ai av[g="u"]:active{
  color:#fff;
  background:linear-gradient(
    135deg,
    #ff9aa3 0%,
    #e7626c 48%,
    #b92f45 100%
  )!important;
  border-color:rgba(255,222,225,.94)!important;
  box-shadow:none!important;
  outline:none!important;
  filter:none!important;
}

/* 清除头像伪元素可能自带的外圈光效 */
ai av[g="u"]::before,
ai av[g="u"]::after,
ai av[g="u"]:hover::before,
ai av[g="u"]:hover::after,
ai av[g="u"]:focus::before,
ai av[g="u"]:focus::after,
ai av[g="u"]:active::before,
ai av[g="u"]:active::after{
  box-shadow:none!important;
  outline:none!important;
  filter:none!important;
}

/* 角色名称 */
ai m[unknown]>q>b{
  color:#b9364a;
  font-weight:700;
}

/* 角色信息气泡 */
ai m[unknown]>q>span{
  color:#702333;
  border-color:rgba(213,58,79,.32);
  background:linear-gradient(
    135deg,
    #fff7f7 0%,
    #ffe4e6 58%,
    #ffd5d9 100%
  );
  box-shadow:
    0 3px 10px rgba(177,42,62,.12),
    0 0 14px rgba(231,98,108,.13);
}

/* 辅助文字 */
ai m[unknown]>q>i{
  color:#b76a75;
}

/* 对话气泡 */
ai talk[g="u"]{
  border-color:rgba(213,58,79,.22);
  background:linear-gradient(
    105deg,
    rgba(231,98,108,.17),
    rgba(255,248,248,.8)
  );
  box-shadow:0 4px 13px rgba(169,42,61,.09);
}

/* 对话气泡侧边装饰 */
ai talk[g="u"]::before{
  background:linear-gradient(
    #ff7d88,
    #d53a4f 55%,
    #a9243b
  );
  box-shadow:0 0 9px rgba(231,98,108,.4);
}

/* 对话标题 */
ai talk[g="u"]>b{
  background:linear-gradient(
    135deg,
    #ef707b,
    #d53a4f 55%,
    #ab2940
  );
  box-shadow:0 2px 7px rgba(177,41,62,.22);
}

/* 对话正文 */
ai talk[g="u"]>span{
  color:#762838;
}

/* =========================================================
   正文、角色气泡、聊天气泡与交互控件：扫光与点击反馈
   直接添加到原 CSS 最末尾
========================================================= */

/* ---------------------------------------------------------
   1. 需要产生扫光效果的内容容器
--------------------------------------------------------- */
ai article>p,
ai talk,
ai think,
ai talk>b,
ai think>b,
ai m>q>span,
ai m[sys],
ai send>span,
ai send>b,
ai navs>a,
ai tab>acts>a,
ai post meta a,
ai>details>summary,
ai dock>a{
position:relative;
overflow:hidden;
isolation:isolate;
-webkit-tap-highlight-color:transparent;
}

/* 正文段落、角色大气泡、姓名小气泡、聊天气泡可点击 */
ai article>p,
ai talk,
ai think,
ai talk>b,
ai think>b,
ai m>q>span,
ai m[sys]{
cursor:pointer;
touch-action:manipulation;
}

/* 姓名标签保持和后面的正文处于同一行 */
ai talk>b,
ai think>b{
display:inline-block;
vertical-align:baseline;
}

/* 系统消息需要建立定位上下文 */
ai m[sys]{
position:relative;
overflow:hidden;
}

/* 手机聊天气泡裁切扫光 */
ai m>q>span{
overflow:hidden;
}

/* ---------------------------------------------------------
   2. 正文段落和气泡的统一过渡
--------------------------------------------------------- */
ai article>p,
ai talk,
ai think,
ai m>q>span,
ai m[sys]{
transition:
transform .18s cubic-bezier(.2,.7,.3,1),
filter .18s ease,
box-shadow .22s ease,
border-color .22s ease,
background-color .22s ease;
}

/* 姓名小气泡的独立过渡 */
ai talk>b,
ai think>b{
transition:
transform .18s cubic-bezier(.2,.7,.3,1),
filter .18s ease,
box-shadow .22s ease;
}

/* 按钮与其他交互控件过渡 */
ai send>span,
ai send>b,
ai navs>a,
ai tab>acts>a,
ai post meta a,
ai>details>summary,
ai dock>a{
transition:
transform .18s cubic-bezier(.2,.7,.3,1),
filter .18s ease,
box-shadow .22s ease,
background-color .22s ease,
color .22s ease,
border-color .22s ease;
}

/* ---------------------------------------------------------
   3. 正文、角色气泡、姓名气泡、聊天气泡扫光层
   使用 ::after，避免覆盖原有 ::before 装饰
--------------------------------------------------------- */
ai article>p::after,
ai talk::after,
ai think::after,
ai talk>b::after,
ai think>b::after,
ai m>q>span::after,
ai m[sys]::after{
content:"";
position:absolute;
z-index:3;
top:-25%;
left:-120%;
width:58%;
height:150%;
pointer-events:none;
opacity:0;
border-radius:inherit;
background:linear-gradient(
90deg,
transparent 0%,
rgba(255,255,255,.04) 18%,
rgba(255,255,255,.28) 42%,
rgba(255,255,255,.68) 50%,
rgba(255,255,255,.28) 58%,
rgba(255,255,255,.04) 82%,
transparent 100%
);
filter:blur(.2px);
transform:skewX(-20deg);
transition:
left .68s cubic-bezier(.4,0,.2,1),
opacity .16s ease;
}

/* 正文使用稍柔和的扫光，避免白底过亮 */
ai article>p::after{
background:linear-gradient(
90deg,
transparent 0%,
rgba(107,218,226,.02) 18%,
rgba(255,255,255,.32) 42%,
rgba(160,238,240,.48) 50%,
rgba(255,255,255,.28) 58%,
rgba(119,203,220,.02) 82%,
transparent 100%
);
}

/* 男性角色气泡使用蓝色高光 */
ai talk[g="m"]::after,
ai talk[g="m"]>b::after{
background:linear-gradient(
90deg,
transparent 0%,
rgba(255,255,255,.05) 18%,
rgba(212,236,255,.38) 40%,
rgba(255,255,255,.76) 50%,
rgba(190,226,255,.34) 60%,
transparent 100%
);
}

/* 女性角色气泡使用粉色高光 */
ai talk[g="f"]::after,
ai talk[g="f"]>b::after{
background:linear-gradient(
90deg,
transparent 0%,
rgba(255,255,255,.05) 18%,
rgba(255,218,234,.38) 40%,
rgba(255,255,255,.76) 50%,
rgba(255,206,226,.34) 60%,
transparent 100%
);
}

/* 自身角色气泡使用青色高光 */
ai talk[g="me"]::after,
ai talk[g="me"]>b::after{
background:linear-gradient(
90deg,
transparent 0%,
rgba(255,255,255,.05) 18%,
rgba(198,255,247,.38) 40%,
rgba(255,255,255,.76) 50%,
rgba(184,247,243,.34) 60%,
transparent 100%
);
}

/* 心理活动使用紫色高光 */
ai think::after,
ai think>b::after{
background:linear-gradient(
90deg,
transparent 0%,
rgba(255,255,255,.04) 18%,
rgba(226,218,255,.36) 40%,
rgba(255,255,255,.72) 50%,
rgba(209,200,255,.32) 60%,
transparent 100%
);
}

/* 自己发送的手机消息使用青绿色高光 */
ai m[me]>q>span::after{
background:linear-gradient(
90deg,
transparent 0%,
rgba(255,255,255,.04) 18%,
rgba(225,255,250,.44) 40%,
rgba(255,255,255,.8) 50%,
rgba(199,249,242,.38) 60%,
transparent 100%
);
}

/* 未知账号手机消息使用紫色异常高光 */
ai m[unknown]>q>span::after{
background:linear-gradient(
90deg,
transparent 0%,
rgba(255,255,255,.03) 18%,
rgba(227,217,255,.42) 40%,
rgba(255,255,255,.76) 50%,
rgba(205,191,255,.36) 60%,
transparent 100%
);
}

/* ---------------------------------------------------------
   4. 按钮、输入区域和其他控件扫光层
   普通控件使用 ::before
--------------------------------------------------------- */
ai send>span::before,
ai send>b::before,
ai navs>a::before,
ai tab>acts>a::before,
ai post meta a::before,
ai>details>summary::before,
ai dock>a::before{
content:"";
position:absolute;
z-index:1;
top:-25%;
left:-120%;
width:58%;
height:150%;
pointer-events:none;
opacity:0;
border-radius:inherit;
background:linear-gradient(
90deg,
transparent 0%,
rgba(255,255,255,.04) 18%,
rgba(255,255,255,.3) 40%,
rgba(255,255,255,.7) 50%,
rgba(255,255,255,.3) 60%,
transparent 100%
);
transform:skewX(-20deg);
transition:
left .68s cubic-bezier(.4,0,.2,1),
opacity .16s ease;
}

/* 保证折叠按钮图标位于扫光上方 */
ai>details>summary::after{
z-index:4;
}

/* 保证底部导航未读数字位于扫光上方 */
ai dock>a>b{
z-index:4;
}

/* ---------------------------------------------------------
   5. 鼠标悬停或手指按下时执行扫光
--------------------------------------------------------- */
ai article>p:hover::after,
ai article>p:active::after,
ai talk:hover::after,
ai talk:active::after,
ai think:hover::after,
ai think:active::after,
ai talk>b:hover::after,
ai talk>b:active::after,
ai think>b:hover::after,
ai think>b:active::after,
ai m>q>span:hover::after,
ai m>q>span:active::after,
ai m[sys]:hover::after,
ai m[sys]:active::after{
left:145%;
opacity:1;
}

/* 控件扫光 */
ai send>span:hover::before,
ai send>span:active::before,
ai send>b:hover::before,
ai send>b:active::before,
ai navs>a:hover::before,
ai navs>a:active::before,
ai tab>acts>a:hover::before,
ai tab>acts>a:active::before,
ai post meta a:hover::before,
ai post meta a:active::before,
ai>details>summary:hover::before,
ai>details>summary:active::before,
ai dock>a:hover::before,
ai dock>a:active::before{
left:145%;
opacity:1;
}

/* ---------------------------------------------------------
   6. 每段正文的悬停与点击反馈
--------------------------------------------------------- */
ai article>p{
border:1px solid transparent;
border-radius:10px;
}

/* 鼠标经过正文段落 */
ai article>p:hover{
filter:brightness(1.025);
border-color:rgba(32,185,191,.1);
background-color:rgba(255,255,255,.28);
box-shadow:
0 6px 18px rgba(35,70,91,.07),
inset 0 0 16px rgba(255,255,255,.2);
transform:translateY(-1px);
}

/* 点击正文段落 */
ai article>p:active{
filter:brightness(.97);
border-color:rgba(32,185,191,.2);
background-color:rgba(226,246,247,.4);
box-shadow:
0 2px 8px rgba(35,70,91,.06),
inset 0 2px 6px rgba(39,86,102,.07);
transform:scale(.985);
transition-duration:.08s;
}

/* ---------------------------------------------------------
   7. 角色对白大气泡和心理气泡反馈
--------------------------------------------------------- */
ai talk:hover,
ai think:hover{
filter:brightness(1.045) saturate(1.035);
border-color:rgba(74,111,143,.22);
box-shadow:
0 9px 22px rgba(35,60,83,.12),
inset 0 0 18px rgba(255,255,255,.2);
transform:translateY(-2px);
}

/* 男性对白悬停边框 */
ai talk[g="m"]:hover{
border-color:rgba(67,136,232,.3);
box-shadow:
0 9px 22px rgba(47,118,209,.14),
inset 0 0 18px rgba(255,255,255,.22);
}

/* 女性对白悬停边框 */
ai talk[g="f"]:hover{
border-color:rgba(240,127,168,.32);
box-shadow:
0 9px 22px rgba(211,77,130,.13),
inset 0 0 18px rgba(255,255,255,.22);
}

/* 自身对白悬停边框 */
ai talk[g="me"]:hover{
border-color:rgba(32,185,191,.32);
box-shadow:
0 9px 22px rgba(20,157,165,.14),
inset 0 0 18px rgba(255,255,255,.22);
}

/* 心理活动悬停边框 */
ai think:hover{
border-color:rgba(119,103,216,.3);
box-shadow:
0 9px 22px rgba(85,64,172,.13),
inset 0 0 18px rgba(255,255,255,.22);
}

/* 点击角色大气泡 */
ai talk:active,
ai think:active{
filter:brightness(.95) saturate(.98);
box-shadow:
0 2px 9px rgba(32,55,75,.09),
inset 0 2px 8px rgba(30,53,74,.07);
transform:scale(.982);
transition-duration:.08s;
}

/* ---------------------------------------------------------
   8. 角色姓名小气泡反馈
--------------------------------------------------------- */
ai talk>b:hover,
ai think>b:hover{
filter:brightness(1.1) saturate(1.08);
box-shadow:
0 5px 13px rgba(35,60,83,.18),
inset 0 0 8px rgba(255,255,255,.2);
transform:translateY(-1px) scale(1.025);
}

/* 点击姓名时只压缩姓名小气泡 */
ai talk>b:active,
ai think>b:active{
filter:brightness(.9);
box-shadow:
0 1px 5px rgba(35,60,83,.12),
inset 0 2px 5px rgba(0,0,0,.08);
transform:scale(.94);
transition-duration:.07s;
}

/* ---------------------------------------------------------
   9. 手机聊天气泡悬停反馈
--------------------------------------------------------- */
ai m>q>span:hover{
filter:brightness(1.04) saturate(1.025);
border-color:rgba(67,136,232,.2);
box-shadow:
0 7px 18px rgba(30,52,72,.13),
inset 0 0 13px rgba(255,255,255,.18);
transform:translateY(-2px);
}

/* 自己发送的消息 */
ai m[me]>q>span:hover{
border-color:rgba(32,185,191,.34);
box-shadow:
0 7px 18px rgba(20,157,165,.16),
inset 0 0 13px rgba(255,255,255,.23);
}

/* 未知账号消息 */
ai m[unknown]>q>span:hover{
border-color:rgba(119,103,216,.4);
box-shadow:
0 7px 20px rgba(85,64,172,.18),
0 0 14px rgba(104,80,194,.12),
inset 0 0 13px rgba(255,255,255,.22);
}

/* 点击手机聊天气泡 */
ai m>q>span:active{
filter:brightness(.94) saturate(.98);
box-shadow:
0 2px 7px rgba(30,52,72,.09),
inset 0 2px 6px rgba(28,56,76,.08);
transform:scale(.965);
transition-duration:.07s;
}

/* 点击未知账号消息时暂停原有轻微故障动画 */
ai m[unknown]>q>span:active{
animation-play-state:paused;
transform:scale(.965);
}

/* ---------------------------------------------------------
   10. 手机系统消息反馈
--------------------------------------------------------- */
ai m[sys]:hover{
color:#667584;
filter:brightness(1.04);
background:rgba(99,119,136,.16);
box-shadow:
0 5px 13px rgba(31,53,72,.09),
inset 0 0 10px rgba(255,255,255,.2);
transform:translateY(-1px);
}

/* 点击系统消息 */
ai m[sys]:active{
filter:brightness(.92);
background:rgba(99,119,136,.2);
box-shadow:
0 1px 5px rgba(31,53,72,.08),
inset 0 2px 5px rgba(40,62,81,.07);
transform:scale(.97);
transition-duration:.07s;
}

/* ---------------------------------------------------------
   11. 手机输入框与发送按钮反馈
--------------------------------------------------------- */
ai send>span:hover{
color:#73808d;
border-color:rgba(32,185,191,.24);
background:#fff;
box-shadow:
0 5px 13px rgba(29,72,86,.09),
inset 0 0 10px rgba(32,185,191,.04);
transform:translateY(-1px);
}

/* 点击输入区域 */
ai send>span:active{
filter:brightness(.96);
box-shadow:
0 1px 5px rgba(29,72,86,.08),
inset 0 2px 5px rgba(29,72,86,.06);
transform:scale(.985);
}

/* 发送按钮悬停 */
ai send>b:hover{
filter:brightness(1.08) saturate(1.07);
box-shadow:
0 6px 14px rgba(37,168,124,.25),
inset 0 0 8px rgba(255,255,255,.16);
transform:translateY(-1px);
}

/* 发送按钮点击 */
ai send>b:active{
filter:brightness(.9);
box-shadow:
0 2px 6px rgba(37,168,124,.18),
inset 0 2px 6px rgba(0,0,0,.1);
transform:scale(.93);
transition-duration:.07s;
}

/* ---------------------------------------------------------
   12. 路线按钮与快捷行动反馈
--------------------------------------------------------- */
ai navs>a:hover{
filter:brightness(1.09) saturate(1.06);
box-shadow:
0 8px 18px rgba(54,96,178,.22);
transform:translateY(-2px);
}

ai navs>a:active{
filter:brightness(.91);
box-shadow:
0 2px 7px rgba(54,96,178,.14),
inset 0 2px 6px rgba(0,0,0,.09);
transform:scale(.96);
transition-duration:.07s;
}

ai tab>acts>a:hover{
filter:brightness(1.035);
border-color:rgba(32,185,191,.42);
background:rgba(255,255,255,.94);
box-shadow:
0 8px 19px rgba(44,113,132,.14),
inset 0 0 14px rgba(255,255,255,.2);
transform:translateY(-2px);
}

ai tab>acts>a:active{
filter:brightness(.94);
border-color:rgba(32,185,191,.5);
box-shadow:
0 2px 7px rgba(44,113,132,.09),
inset 0 2px 7px rgba(42,90,105,.07);
transform:scale(.975);
transition-duration:.07s;
}

/* ---------------------------------------------------------
   13. 朋友圈点赞和评论按钮反馈
--------------------------------------------------------- */
ai post meta a:hover{
filter:brightness(1.06);
color:#fff;
background:#637b93;
box-shadow:0 4px 10px rgba(52,81,108,.16);
transform:translateY(-1px);
}

ai post meta a:active{
filter:brightness(.88);
box-shadow:
0 1px 4px rgba(52,81,108,.12),
inset 0 2px 4px rgba(0,0,0,.09);
transform:scale(.9);
transition-duration:.07s;
}

/* ---------------------------------------------------------
   14. 折叠面板标题反馈
--------------------------------------------------------- */
ai>details>summary:hover{
filter:brightness(1.035);
color:#1f5279;
background:
linear-gradient(
90deg,
rgba(54,120,212,.14),
rgba(49,184,200,.07),
transparent
);
box-shadow:inset 0 0 16px rgba(255,255,255,.2);
}

ai>details>summary:active{
filter:brightness(.94);
box-shadow:
inset 0 2px 8px rgba(31,68,95,.08);
transform:scale(.992);
transition-duration:.07s;
}

/* ---------------------------------------------------------
   15. 手机底部导航反馈
--------------------------------------------------------- */
ai dock>a:hover{
filter:brightness(1.05);
color:var(--blue);
background:rgba(54,120,212,.075);
box-shadow:inset 0 0 12px rgba(54,120,212,.035);
transform:translateY(-2px);
}

ai dock>a:active{
filter:brightness(.88);
background:rgba(54,120,212,.12);
box-shadow:
inset 0 2px 8px rgba(46,89,132,.09);
transform:scale(.9);
transition-duration:.07s;
}

/* ---------------------------------------------------------
   16. 键盘聚焦反馈
--------------------------------------------------------- */
ai navs>a:focus-visible,
ai tab>acts>a:focus-visible,
ai post meta a:focus-visible,
ai dock>a:focus-visible,
ai>details>summary:focus-visible{
outline:2px solid rgba(32,185,191,.75);
outline-offset:2px;
}

/* ---------------------------------------------------------
   17. 触屏设备：加强按压反馈
--------------------------------------------------------- */
@media(hover:none) and (pointer:coarse){
ai article>p:hover,
ai talk:hover,
ai think:hover,
ai talk>b:hover,
ai think>b:hover,
ai m>q>span:hover,
ai m[sys]:hover{
filter:none;
transform:none;
}

/* 手指按住正文 */
ai article>p:active{
filter:brightness(.96);
background-color:rgba(226,246,247,.46);
box-shadow:
0 2px 8px rgba(35,70,91,.07),
inset 0 2px 7px rgba(39,86,102,.08);
transform:scale(.982);
}

/* 手指按住角色大气泡 */
ai talk:active,
ai think:active{
filter:brightness(.94);
box-shadow:
0 2px 8px rgba(32,55,75,.1),
inset 0 2px 8px rgba(30,53,74,.08);
transform:scale(.978);
}

/* 手指按住聊天气泡 */
ai m>q>span:active{
filter:brightness(.93);
box-shadow:
0 2px 7px rgba(30,52,72,.1),
inset 0 2px 7px rgba(28,56,76,.09);
transform:scale(.958);
}

/* 触屏扫光速度稍快 */
ai article>p::after,
ai talk::after,
ai think::after,
ai talk>b::after,
ai think>b::after,
ai m>q>span::after,
ai m[sys]::after,
ai send>span::before,
ai send>b::before,
ai navs>a::before,
ai tab>acts>a::before,
ai post meta a::before,
ai>details>summary::before,
ai dock>a::before{
transition:
left .5s cubic-bezier(.4,0,.2,1),
opacity .1s ease;
}
}

/* ---------------------------------------------------------
   18. 减少动态效果设置
--------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
ai article>p,
ai talk,
ai think,
ai talk>b,
ai think>b,
ai m>q>span,
ai m[sys],
ai send>span,
ai send>b,
ai navs>a,
ai tab>acts>a,
ai post meta a,
ai>details>summary,
ai dock>a{
transition:
filter .12s ease,
box-shadow .12s ease,
background-color .12s ease,
color .12s ease,
border-color .12s ease;
}

/* 关闭扫光移动，保留轻微亮度反馈 */
ai article>p::after,
ai talk::after,
ai think::after,
ai talk>b::after,
ai think>b::after,
ai m>q>span::after,
ai m[sys]::after,
ai send>span::before,
ai send>b::before,
ai navs>a::before,
ai tab>acts>a::before,
ai post meta a::before,
ai>details>summary::before,
ai dock>a::before{
display:none;
}

/* 减少位移和缩放 */
ai article>p:hover,
ai article>p:active,
ai talk:hover,
ai talk:active,
ai think:hover,
ai think:active,
ai talk>b:hover,
ai talk>b:active,
ai think>b:hover,
ai think>b:active,
ai m>q>span:hover,
ai m>q>span:active,
ai m[sys]:hover,
ai m[sys]:active,
ai send>span:hover,
ai send>span:active,
ai send>b:hover,
ai send>b:active,
ai navs>a:hover,
ai navs>a:active,
ai tab>acts>a:hover,
ai tab>acts>a:active,
ai post meta a:hover,
ai post meta a:active,
ai>details>summary:hover,
ai>details>summary:active,
ai dock>a:hover,
ai dock>a:active{
transform:none;
}
}

/* ===== 未知聊天消息气泡：悬浮与点击改为红色反馈 ===== */

/* 鼠标悬浮：由紫色改为气泡同款红色 */
ai m[unknown]>q>span:hover{
  border-color:rgba(213,58,79,.42);
  box-shadow:
    0 7px 20px rgba(177,42,62,.18),
    0 0 14px rgba(231,98,108,.13),
    inset 0 0 13px rgba(255,255,255,.22);
}

/* 鼠标点击或手指按压：使用红色反馈 */
ai m[unknown]>q>span:active{
  animation-play-state:paused;
  border-color:rgba(213,58,79,.48);
  box-shadow:
    0 2px 7px rgba(177,42,62,.14),
    0 0 10px rgba(231,98,108,.12),
    inset 0 2px 6px rgba(142,32,49,.09);
  transform:scale(.965);
}

/* 变量定义：继承冷调科技蓝、青色辉光与紫色能量色彩 */
:root {
  --paper: rgba(250, 252, 255, 0.94);
  --ink: #17202c;
  --muted: #687486;
  --line: rgba(44, 67, 91, 0.14);

  --blue: #3678d4;
  --cyan: #31b8c8;
  --purple: #7066d8;
  --red: #e7626c;
  --amber: #e3a43f;
  --green: #35a879;

  --winter-pure-white: #ffffff;
  --winter-light-gray: #f4f7fa;
  --winter-subtle-gray: #e8eef3;
  --winter-accent-gray: #dfe7ed;
  --text-color: var(--ink);

  --frost-border: rgba(54, 120, 212, 0.18);
  --frost-highlight: rgba(255, 255, 255, 0.82);
  --cyan-glow: rgba(49, 184, 200, 0.34);
  --blue-shadow: rgba(54, 120, 212, 0.2);
  --purple-shadow: rgba(112, 102, 216, 0.18);
}

/* 按钮与输入框共有基础样式 */
.btn,
button,
input,
textarea,
.input-field {
  box-sizing: border-box;
  position: relative;
  padding: 12px 20px;
  color: var(--text-color);
  font: inherit;
  font-weight: 600;
  border: 1px solid var(--frost-border);
  border-radius: 12px;
  outline: none;
  overflow: hidden;

  /* 冷白冰面叠加科技蓝灰层次 */
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(49, 184, 200, 0.13),
      transparent 35%
    ),
    radial-gradient(
      circle at 95% 12%,
      rgba(112, 102, 216, 0.1),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      var(--winter-pure-white) 0%,
      var(--winter-light-gray) 42%,
      var(--winter-subtle-gray) 100%
    );

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* 冰霜内光、冷蓝投影与细腻悬浮感 */
  box-shadow:
    inset 0 1px 0 var(--frost-highlight),
    inset 0 -1px 2px rgba(44, 67, 91, 0.06),
    0 4px 10px rgba(19, 35, 55, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.24);

  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.25s ease,
    filter 0.25s ease;
}

/* 悬停/聚焦状态：青蓝冰光外溢并混入紫色能量辉光 */
.btn:hover,
button:hover,
input:hover,
textarea:hover,
.input-field:hover,
input:focus,
textarea:focus,
.input-field:focus {
  border-color: rgba(49, 184, 200, 0.56);
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(49, 184, 200, 0.2),
      transparent 42%
    ),
    radial-gradient(
      circle at 92% 15%,
      rgba(112, 102, 216, 0.14),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      var(--winter-pure-white) 0%,
      #f6fbff 48%,
      #edf5f8 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 0 0 3px rgba(49, 184, 200, 0.08),
    0 0 18px var(--cyan-glow),
    0 9px 22px var(--blue-shadow),
    0 4px 14px var(--purple-shadow);

  filter: saturate(1.06) brightness(1.02);
  transform: translateY(-2px);
}

/* 键盘聚焦状态：增强可访问性的青蓝轮廓 */
.btn:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.input-field:focus-visible {
  border-color: var(--cyan);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 0 0 3px rgba(49, 184, 200, 0.15),
    0 0 20px rgba(49, 184, 200, 0.3),
    0 8px 20px rgba(54, 120, 212, 0.18);
}

/* 扫光特效定义 */
.btn::before,
button::before,
.input-field::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -20%;
  left: -125%;
  width: 70%;
  height: 140%;
  pointer-events: none;

  /* 青白冰霜高光带 */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(199, 246, 255, 0.25),
    rgba(255, 255, 255, 0.9),
    rgba(114, 239, 240, 0.38),
    transparent
  );

  filter: blur(1px);
  transform: skewX(-18deg);
  transition: left 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 触发扫光效果 */
.btn:hover::before,
button:hover::before,
.input-field:hover::before,
.input-field:focus::before {
  left: 145%;
}

/* 点击特效：冰面下沉并形成深冷蓝灰阴影 */
.btn:active,
button:active,
input:active,
textarea:active,
.input-field:active {
  border-color: rgba(54, 120, 212, 0.32);
  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(49, 184, 200, 0.1),
      transparent 48%
    ),
    linear-gradient(
      145deg,
      #dfe7ed 0%,
      #d5e0e8 54%,
      #c9d5df 100%
    );

  box-shadow:
    inset 0 3px 8px rgba(23, 32, 44, 0.18),
    inset 0 0 12px rgba(54, 120, 212, 0.08),
    0 1px 4px rgba(19, 35, 55, 0.12);

  filter: saturate(0.96);
  transform: translateY(1px) scale(0.995);
}

/* 输入框特有优化 */
input,
textarea,
.input-field {
  cursor: text;
  font-weight: 500;
  caret-color: var(--cyan);
}

/* 输入框聚焦时保持稳定，避免编辑过程中明显位移 */
input:focus,
textarea:focus,
.input-field:focus {
  transform: translateY(-1px);
}

/* 占位符颜色调整 */
input::placeholder,
textarea::placeholder,
.input-field::placeholder {
  color: rgba(104, 116, 134, 0.62);
  font-weight: 400;
  transition:
    color 0.25s ease,
    opacity 0.25s ease;
}

input:focus::placeholder,
textarea:focus::placeholder,
.input-field:focus::placeholder {
  color: rgba(54, 120, 212, 0.42);
  opacity: 0.72;
}

/* --- 差异化处理：按钮 --- */
.btn,
button {
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
}

/* 按钮内容保持在扫光层之上 */
.btn > *,
button > * {
  position: relative;
  z-index: 2;
}

/* 按钮悬停时强化青蓝渐变边缘 */
.btn:hover,
button:hover {
  color: #24435f;
  border-color: rgba(49, 184, 200, 0.5);
}

/* --- 差异化处理：输入 / 输出 / 编辑框 --- */
input,
textarea,
.input-field,
.output-field,
.output-box {
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--ink);
  border: 1px solid var(--frost-border);
  border-radius: 12px;
  background:
    linear-gradient(
      rgba(250, 252, 255, 0.95),
      rgba(237, 242, 246, 0.96)
    ),
    radial-gradient(
      circle at 8% 0%,
      rgba(49, 184, 200, 0.09),
      transparent 35%
    );
  box-shadow:
    inset 0 1px 3px rgba(44, 67, 91, 0.06),
    0 3px 10px rgba(19, 35, 55, 0.07);
  cursor: text;
}

/* 输出框只读状态 */
.output-field,
.output-box {
  padding: 12px 20px;
  color: var(--ink);
  font-weight: 500;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 禁用状态 */
.btn:disabled,
button:disabled,
input:disabled,
textarea:disabled,
.input-field:disabled {
  color: rgba(104, 116, 134, 0.72);
  border-color: rgba(44, 67, 91, 0.09);
  background: linear-gradient(145deg, #f2f5f7, #e4e9ed);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.7),
    0 2px 5px rgba(19, 35, 55, 0.04);
  filter: grayscale(0.32);
  transform: none;
  cursor: not-allowed;
  opacity: 0.68;
}

/* 滚动条样式：继承冷蓝、青色和紫色渐变 */
textarea,
.input-field,
.output-field,
.output-box {
  scrollbar-width: thin;
  scrollbar-color: rgba(54, 120, 212, 0.38) transparent;
}

textarea::-webkit-scrollbar,
.input-field::-webkit-scrollbar,
.output-field::-webkit-scrollbar,
.output-box::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

textarea::-webkit-scrollbar-track,
.input-field::-webkit-scrollbar-track,
.output-field::-webkit-scrollbar-track,
.output-box::-webkit-scrollbar-track {
  background: rgba(104, 116, 134, 0.06);
  border-radius: 6px;
}

textarea::-webkit-scrollbar-thumb,
.input-field::-webkit-scrollbar-thumb,
.output-field::-webkit-scrollbar-thumb,
.output-box::-webkit-scrollbar-thumb {
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  background: linear-gradient(
    180deg,
    rgba(54, 120, 212, 0.48),
    rgba(49, 184, 200, 0.52),
    rgba(112, 102, 216, 0.42)
  );
}

textarea::-webkit-scrollbar-thumb:hover,
.input-field::-webkit-scrollbar-thumb:hover,
.output-field::-webkit-scrollbar-thumb:hover,
.output-box::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    var(--blue),
    var(--cyan),
    var(--purple)
  );
  box-shadow: 0 0 8px rgba(49, 184, 200, 0.38);
}

/* 减少动态效果偏好 */
@media (prefers-reduced-motion: reduce) {
  .btn,
  button,
  input,
  textarea,
  .input-field,
  .output-field,
  .output-box,
  .btn::before,
  button::before,
  .input-field::before {
    transition: none;
  }

  .btn:hover,
  button:hover,
  input:hover,
  textarea:hover,
  .input-field:hover,
  input:focus,
  textarea:focus,
  .input-field:focus {
    transform: none;
  }
}