现代手机聊天

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);
backd

/* 预览已截断；下载 CSS 可查看完整内容。 */

本页只展示本地导出中可核验的公开字段。下载 JSON 可查看完整原始记录。