/* ===== 微信聊天UI - 经典浅色模式 ===== */
.wechat-phone {
    width: 340px;
    max-width: 92%;
    margin: 15px auto;
    background: #ededed; /* 微信经典浅灰背景 */
    border-radius: 12px;
    overflow: hidden;
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid #dcdcdc;
}

/* 顶部标题栏 */
.wechat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 14px;
    background: #ededed;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 1px solid #d6d6d6;
}
.wechat-header .back-btn {
    font-size: 24px;
    color: #333;
    line-height: 1;
    cursor: pointer;
}
.wechat-header .chat-name {
    flex: 1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 10px;
}
.wechat-header .more-btn {
    font-size: 22px;
    color: #333;
    cursor: pointer;
}

/* 聊天主体 */
.wechat-body {
    padding: 16px 12px;
    background: #ededed; /* 微信标准聊天背景色 */
    min-height: 60px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 时间戳 */
.wechat-time {
    text-align: center;
    font-size: 12px;
    color: #b2b2b2;
    margin: 12px 0 8px;
}

/* 系统提示/撤回 */
.wechat-notice {
    text-align: center;
    font-size: 12px;
    color: #888;
    margin: 8px auto;
    background: rgba(0,0,0,0.05);
    padding: 2px 8px;
    border-radius: 4px;
    width: fit-content;
}

/* 左侧消息(对方) */
.msg-left {
    display: flex;
    align-items: flex-start;
    margin: 8px 0;
    justify-content: flex-start;
}
/* 右侧消息(自己) */
.msg-right {
    display: flex;
    align-items: flex-start;
    margin: 8px 0;
    justify-content: flex-end;
}

/* 头像通用 */
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 5px; /* 微信圆角矩形头像 */
    flex-shrink: 0;
    object-fit: cover;
    background-color: #ccc;
    background-size: cover;
    background-position: center;
}

/* 文字色块头像 */
.avatar-text {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 40px;
    text-align: center;
}
.avatar-xieyu { background-color: #5a7fb5; }
.avatar-tao { background-color: #e896a8; }
.avatar-lin { background-color: #9b8bc4; }
.avatar-player { background-color: #7a7a7a; }
.avatar-other { background-color: #6ba58a; }

/* 左侧气泡(白色) */
.bubble-left {
    position: relative;
    max-width: 210px;
    margin-left: 10px;
    padding: 10px 13px;
    background: #ffffff; /* 白色气泡 */
    color: #000;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.5;
    word-break: break-word;
    box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}
/* 左侧小三角(白) */
.bubble-left::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 13px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 6px solid #ffffff;
}

/* 右侧气泡(微信绿) */
.bubble-right {
    position: relative;
    max-width: 210px;
    margin-right: 10px;
    padding: 10px 13px;
    background: #95EC69; /* 微信标志浅绿 */
    color: #000;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.5;
    word-break: break-word;
    box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}
/* 右侧小三角(绿) */
.bubble-right::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 13px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid #95EC69;
}

/* 群聊发送者昵称 */
.group-sender {
    display: block;
    font-size: 12px;
    color: #9a9a9a;
    margin-bottom: 4px;
}

/* 特殊消息：语音条 */
.voice-msg {
    display: flex;
    align-items: center;
    min-width: 60px;
    cursor: pointer;
}

/* 特殊消息：图片 */
.img-msg {
    background: #fff !important;
    color: #999 !important;
    font-style: italic;
    border: 1px dashed #ccc;
}

/* 特殊消息：表情包 */
.emoji-msg {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    font-size: 40px !important;
}
.emoji-msg::before { display: none !important; }

/* 移动端适配 */
@media (max-width: 480px) {
    .wechat-phone { width: 100%; }
    .bubble-left, .bubble-right { max-width: 65vw; }
}

ai{--wood:#6b4f3a;--wood2:#5a4130;--ink:#2b3440;--blue:#0078d4;--blue2:#4aa3e0;--lightblue:#e8f2fb;--paper:#fafaf7;--card:#fff;--gray:#6b7280;--line:#d8dee6;--red:#c8322e;--green:#16a34a;--mono:'Consolas','SFMono-Regular','Courier New',monospace;--pixel:'Courier New',monospace;box-sizing:border-box;display:block;width:100%;max-width:100%;background:linear-gradient(135deg,#6b4f3a,#5a4130);background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 2px,transparent 2px,transparent 5px),repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0,rgba(255,255,255,.02) 1px,transparent 1px,transparent 90px),linear-gradient(135deg,#6b4f3a,#5a4130);color:var(--ink);font-family:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;font-size:15px;line-height:1.55;padding:16px 12px;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 60px rgba(0,0,0,.4)}
ai *{box-sizing:border-box}
ai hd{display:flex;flex-direction:column;align-items:flex-end;gap:2px;width:fit-content;margin:0 0 14px auto;padding:8px 16px;border-radius:6px;background:linear-gradient(180deg,#2d3642,#1f272f);border:1px solid #3a4552;box-shadow:0 4px 12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1);color:#e8eef5}
ai hd t:first-child{font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:2px;color:#fff;text-shadow:0 0 8px rgba(74,163,224,.6);line-height:1.1;font-variant-numeric:tabular-nums}
ai hd t:not(:first-child){font-size:11px;color:#9fb0c0;letter-spacing:.5px}
ai hd t:nth-child(2)::before{content:"📍";margin-right:3px;font-size:10px}
ai hd t:nth-child(3)::before{content:"☁";margin-right:3px}
ai hd t[c=r]{color:#ff8a8a}
ai hd t[c=r]::before{content:"●";color:var(--red);margin-right:4px;animation:blink 1.5s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
ai text,ai>div:first-of-type{display:block;padding:10px 14px;margin:0 0 12px;background:rgba(250,250,247,.95);border-radius:8px;box-shadow:0 3px 10px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.5)}
ai text p,ai>div:first-of-type p{margin:8px 0;letter-spacing:.2px}
ai say{display:block;margin:9px 0;padding:6px 12px;border-radius:4px;border-left:4px solid var(--gray);background:#f0f3f7;position:relative;font-size:14.5px;font-weight:500}
ai say::before{display:block;font-size:11px;font-weight:700;letter-spacing:.5px;margin-bottom:1px;font-family:var(--mono)}
ai say[w=zx]{border-color:#d6336c;background:#fdf0f4;color:#8a2748}
ai say[w=zx]::before{content:"竺星晚";color:#d6336c}
ai say[w=me]{border-color:var(--blue);background:var(--lightblue);color:#1a4971}
ai say[w=me]::before{content:"我";color:var(--blue)}
ai say[w=x]{border-color:#5a7fb5;background:#eef2f8;color:#3a5578}
ai say[w=x]::before{content:"谢屿";color:#5a7fb5}
ai say[w=o]{border-color:var(--gray);background:#f2f2f0;color:#4b5563}
ai say[w=o]::before{content:"旁人";color:var(--gray)}
ai in{display:block;margin:7px 0;padding-left:14px;font-style:italic;font-size:13.5px;color:#8b7f6b;border-left:2px dashed #c9beac;letter-spacing:.3px}
ai details{margin:12px 0;border-radius:8px;overflow:hidden;position:relative;box-shadow:0 5px 16px rgba(0,0,0,.4);transition:box-shadow .25s,transform .25s}
ai details:hover{box-shadow:0 8px 24px rgba(0,0,0,.5)}
ai summary{cursor:pointer;list-style:none;padding:9px 14px;font-weight:800;position:relative;font-family:'Segoe UI','Microsoft YaHei';transition:filter .2s,transform .1s;user-select:none}
ai summary::-webkit-details-marker{display:none}
ai summary:hover{filter:brightness(1.08)}
ai summary:active{transform:scale(.985)}
ai details[open]>summary{animation:pop .25s ease}
@keyframes pop{0%{transform:scale(.97)}60%{transform:scale(1.01)}100%{transform:scale(1)}}
ai details>*:not(summary){animation:slidein .32s cubic-bezier(.22,.9,.3,1)}
@keyframes slidein{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
ai d{display:block;margin:5px 12px;font-size:13.5px;line-height:1.5}
ai d[l]::before{content:attr(l);display:inline-block;min-width:2.6em;margin-right:7px;padding:1px 6px;font-size:11px;text-align:center;border-radius:3px;background:var(--lightblue);color:var(--blue);border:1px solid var(--blue2)}
ai f{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:.5px}
ai details:nth-of-type(1){background:linear-gradient(115deg,#0a4d8c 0%,#0078d4 40%,#2b93e0 55%,#0078d4 70%,#0a4d8c 100%);border-radius:16px;box-shadow:0 8px 22px rgba(0,40,90,.55),inset 0 2px 3px rgba(255,255,255,.5),inset 0 -3px 6px rgba(0,0,0,.3);transform:rotate(-.6deg)}
ai details:nth-of-type(1):hover{transform:rotate(0) translateY(-3px) scale(1.01)}
ai details:nth-of-type(1)::before{content:"";position:absolute;inset:0;border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.28) 0%,transparent 30%,transparent 60%,rgba(255,255,255,.12) 100%),repeating-linear-gradient(60deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 1px,transparent 4px);pointer-events:none;z-index:1}
ai details:nth-of-type(1)::after{content:"";position:absolute;top:-60%;left:-40%;width:50%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transform:rotate(22deg);pointer-events:none;z-index:2;animation:shine 6s ease-in-out infinite}
@keyframes shine{0%,80%,100%{left:-40%}88%{left:130%}}
ai details:nth-of-type(1)>summary{color:#fff;letter-spacing:2px;text-shadow:0 1px 3px rgba(0,0,0,.4);padding-right:60px;position:relative;z-index:3;font-size:13px}
ai details:nth-of-type(1)>summary::before{content:"★ 星河网咖  V I P";font-weight:800}
ai details:nth-of-type(1)>summary::after{content:"";position:absolute;right:16px;top:7px;width:38px;height:29px;border-radius:5px;background:linear-gradient(135deg,#ffe9a0,#f5d76e 40%,#c9a227);box-shadow:inset 0 0 0 1px rgba(120,90,0,.4),0 1px 3px rgba(0,0,0,.4);background-image:linear-gradient(90deg,transparent 30%,rgba(120,90,0,.3) 31%,rgba(120,90,0,.3) 33%,transparent 34%,transparent 66%,rgba(120,90,0,.3) 67%,rgba(120,90,0,.3) 69%,transparent 70%),linear-gradient(0deg,transparent 40%,rgba(120,90,0,.3) 41%,rgba(120,90,0,.3) 43%,transparent 44%,transparent 56%,rgba(120,90,0,.3) 57%,rgba(120,90,0,.3) 59%,transparent 60%)}
ai card{display:block;position:relative;z-index:3;padding:8px 16px 34px;color:#eaf4ff}
ai card::before{content:"";position:absolute;left:16px;right:16px;bottom:34px;height:1px;background:rgba(255,255,255,.25)}
ai card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26px;background:linear-gradient(180deg,#08182b,#0a2540);box-shadow:inset 0 2px 4px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.05)}
ai card f{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4);letter-spacing:1px}
ai card d{color:#dce9f7}
ai card d[l]::before{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.4)}
ai bal{display:inline-block;margin:6px 0 4px;padding:2px 14px;font-family:var(--mono);font-size:23px;font-weight:700;color:#fff;letter-spacing:2px;text-shadow:0 0 10px rgba(160,220,255,.9),1px 1px 0 rgba(0,0,0,.4);font-variant-numeric:tabular-nums}
ai bal u{font-size:13px;opacity:.7}
ai tag{display:inline-block;margin:3px 4px 0 0;padding:2px 11px;font-size:12px;border-radius:4px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.45);color:#fff;transition:.2s;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
ai tag:hover{background:rgba(255,255,255,.3);transform:translateY(-1px)}
ai details:nth-of-type(2){background:#f7f9fb;border:1px solid #cdd6e0;border-top:none;border-radius:6px;margin-top:26px;box-shadow:0 8px 22px rgba(0,0,0,.45)}
ai details:nth-of-type(2)::before{content:"";position:absolute;top:-24px;left:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:#e8eef4;border:2px solid #9aa8b5;box-shadow:inset 0 1px 2px rgba(0,0,0,.3);z-index:3}
ai details:nth-of-type(2)::after{content:"";position:absolute;top:-22px;left:0;right:0;height:24px;background:linear-gradient(180deg,transparent 40%,#1a6bb5 40%,#1a6bb5 60%,transparent 60%);clip-path:polygon(50% 100%,42% 0,44% 0,50% 90%,56% 0,58% 0);z-index:0}
ai details:nth-of-type(2)>summary{background:linear-gradient(180deg,#0078d4,#005a9e);color:#fff;letter-spacing:3px;text-align:center;padding:8px}
ai details:nth-of-type(2)>summary::before{content:"★ 星河网咖 · 员工证 STAFF ★";font-size:12.5px}
ai details:nth-of-type(2)>summary::after{content:"▼";position:absolute;right:12px;top:8px;font-size:11px}
ai details:nth-of-type(2)[open]>summary::after{content:"▲"}
ai zx{display:block;padding:14px 12px 8px;text-align:center}
ai pic{display:block;width:100%;max-width:200px;margin:0 auto 12px}
ai pic img{display:block;width:100%;max-height:220px;aspect-ratio:3/4;object-fit:cover;object-position:center top;background:#fff;padding:5px;border:1px solid #cdd6e0;border-radius:3px;box-shadow:0 4px 12px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.8) inset;transition:.3s}
ai pic img:hover{transform:scale(1.03) rotate(.5deg);box-shadow:0 8px 20px rgba(0,0,0,.4)}
ai info{display:block;text-align:left;padding:0 4px}
ai info f{font-size:21px;color:#005a9e;letter-spacing:1px}
ai info>d:first-of-type,ai info d[l=情]{color:var(--gray)}
ai bar{display:block;margin:8px 0;position:relative;height:19px;border-radius:3px;background:#e2e8f0;border:1px solid #cbd5e1;overflow:hidden;transition:box-shadow .3s}
ai bar:hover{box-shadow:0 0 8px rgba(0,120,212,.4)}
ai bar::before{content:attr(t);position:absolute;left:7px;top:50%;transform:translateY(-50%);z-index:3;font-size:11px;font-weight:700;color:var(--ink)}
ai bar i{display:block;height:100%;position:relative}
ai bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:flow 2.5s linear infinite}
@keyframes flow{0%{transform:translateX(-100%)}100%{transform:translateX(220%)}}
ai bar[k=fav] i{background:linear-gradient(90deg,#f783ac,#d6336c)}
ai bar[k=obe] i{background:linear-gradient(90deg,#4aa3e0,#0078d4)}
ai bar n{position:absolute;right:7px;top:50%;transform:translateY(-50%);z-index:3;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
ai bar n e{font-size:9.5px;font-weight:400;color:#5b6470;font-style:italic}
ai seal{display:inline-block;margin:6px 8px;padding:4px 12px;font-size:12.5px;font-weight:800;letter-spacing:1px;border-radius:5px;position:relative;transform:rotate(-6deg);opacity:.88;mix-blend-mode:multiply;font-family:'Microsoft YaHei';transition:.25s}
ai seal:hover{opacity:1;transform:rotate(0) scale(1.05)}
ai seal[s=intact]{color:#1a6bb5;border:2.5px solid #1a6bb5;box-shadow:0 0 0 1px #1a6bb5 inset}
ai seal[s=intact]::before{content:"✔ "}
ai seal[s=crack]{color:#b7791f;border:2.5px double #b7791f}
ai seal[s=crack]::before{content:"! "}
ai seal[s=waver]{color:#c2410c;border:2.5px dashed #c2410c;animation:blink 1.3s infinite}
ai seal[s=waver]::before{content:"⚡ "}
ai seal[s=broken]{color:var(--red);border:2.5px solid var(--red);text-decoration:line-through;transform:rotate(-11deg);opacity:.95}
ai seal[s=broken]::before{content:"✘ 作废 "}
ai zx~d{margin-left:12px;color:#4b5563}
ai details:nth-of-type(2) details{margin:8px 10px;border:none;box-shadow:0 3px 10px rgba(0,0,0,.2);border-radius:2px;transform:rotate(.5deg);background:linear-gradient(#f4ecd8,#efe6cf)}
ai details:nth-of-type(2) details>summary{background:repeating-linear-gradient(0deg,#f4ecd8,#f4ecd8 3px,#ece2c8 3px,#ece2c8 4px);color:#7a3b32;letter-spacing:2px;border-bottom:1px dashed #c9b98f;padding:7px 12px}
ai details:nth-of-type(2) details>summary::after{content:"📎";position:absolute;right:10px;top:5px;font-size:14px}
ai secret{display:block;padding:10px 12px;background:linear-gradient(#f4ecd8,#efe6cf);position:relative;font-family:var(--mono);letter-spacing:.3px}
ai secret::before{content:"机 密";position:absolute;right:10px;top:6px;color:rgba(200,50,46,.65);border:2px solid rgba(200,50,46,.6);padding:2px 6px;font-size:11px;font-weight:800;transform:rotate(12deg);border-radius:3px}
ai secret d{color:#5a4632;font-size:12.5px}
ai secret d[l]::before{background:#e0d3af;color:#7a3b32;border-color:#c9b98f}
ai details:nth-of-type(3){background:transparent;box-shadow:none;border-radius:0}
ai details:nth-of-type(3)>summary{background:#4a5568;color:#fff;border-radius:5px 5px 0 0;letter-spacing:2px;box-shadow:0 3px 8px rgba(0,0,0,.4)}
ai details:nth-of-type(3)>summary::before{content:"📌 ";font-size:13px}
ai details:nth-of-type(3)>summary::after{content:"便签墙";position:absolute;right:14px;font-size:11px;opacity:.7}
ai track{display:block;padding:14px 8px 8px}
ai who{display:block;position:relative;padding:14px 12px 12px;margin:0 0 -6px;font-family:'Comic Sans MS','Segoe Print',cursive;box-shadow:2px 4px 8px rgba(0,0,0,.35);transition:.2s}
ai who::after{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(-2deg);width:50px;height:16px;background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.5)}
ai who[a=谢]{background:#cfe4f7;transform:rotate(-1.5deg);color:#26456b}
ai who[a=桃]{background:#f9d9e7;transform:rotate(1.8deg);color:#8a2f52}
ai who[a=客]{background:#fdf0c4;transform:rotate(-1deg);color:#7a5c1a}
ai who:hover{filter:brightness(1.04);box-shadow:3px 6px 12px rgba(0,0,0,.4);z-index:5}
ai details:nth-of-type(3):hover who[a=谢]{transform:rotate(-2.5deg) translateY(-2px)}
ai details:nth-of-type(3):hover who[a=桃]{transform:rotate(2.8deg) translateY(-2px)}
ai nm{display:block;font-weight:700;font-size:15px;letter-spacing:.5px}
ai st{display:block;font-size:12.5px;margin-top:3px;opacity:.85}
ai heart{display:inline-block;margin-left:4px}
ai heart::before{content:"♥";color:var(--blue);font-size:14px;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}
ai details:nth-of-type(4){background:#15171a;border:8px solid #1c1e22;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.6),inset 0 0 0 2px #000}
ai details:nth-of-type(4):active{transform:scale(.997)}
ai details:nth-of-type(4)::after{content:"";position:absolute;bottom:-6px;right:14px;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
ai details:nth-of-type(4)>summary{background:#000;color:#5fffa0;font-family:var(--mono);letter-spacing:2px;border-bottom:1px solid #0a3a20}
ai details:nth-of-type(4)>summary::before{content:"◉ ";color:var(--red)}
ai details:nth-of-type(4)>summary::after{content:"⏻";position:absolute;right:14px;top:8px;width:18px;height:18px;line-height:16px;text-align:center;border:1px solid #2a5a3a;border-radius:50%;font-size:12px;color:#5fffa0}
ai details:nth-of-type(4):not([open])>summary::after{color:#333;border-color:#333;box-shadow:none}
ai details:nth-of-type(4):not([open])>summary{color:#2a3a30}
ai crt{display:block;position:relative;padding:14px 12px;background:#020806;overflow:hidden}
ai crt::before{content:"";position:absolute;inset:6px;border:1px solid rgba(95,255,160,.3);pointer-events:none;clip-path:polygon(0 0,18px 0,18px 2px,2px 2px,2px 18px,0 18px,0 100%,18px 100%,18px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 18px),0 calc(100% - 18px))}
ai crt::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,255,120,.06) 0,rgba(0,255,120,.06) 1px,transparent 2px,transparent 4px);animation:scan 8s linear infinite}
@keyframes scan{0%{background-position:0 0}100%{background-position:0 40px}}
ai crt d{color:#5fffa0;font-family:var(--mono);font-size:12.5px;text-shadow:0 0 5px rgba(95,255,160,.5);margin:6px 10px;letter-spacing:.6px}
ai crt d[l]::before{background:rgba(0,255,120,.12);color:#7fffb0;border-color:rgba(0,255,120,.35)}
ai crt d[b]{filter:blur(.5px);opacity:.65}
ai rec{position:absolute;right:14px;top:10px;font-family:var(--mono);font-size:11px;color:var(--red);text-shadow:0 0 8px var(--red);animation:blink 1.2s infinite;z-index:2;letter-spacing:.6px}
ai details:nth-of-type(5){background:linear-gradient(180deg,#c8ccd2,#a8adb5);border:1px solid #888e96;border-radius:5px;box-shadow:0 6px 16px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.6)}
ai details:nth-of-type(5)>summary{background:linear-gradient(180deg,#e8eaed,#c4c8ce);color:#2b3440;font-family:var(--mono);letter-spacing:1px;border-bottom:1px solid #9aa0a8;text-shadow:0 1px 0 #fff;text-transform:uppercase}
ai details:nth-of-type(5)>summary::before{content:"💾 STORAGE ";font-family:'Segoe UI'}
ai details:nth-of-type(5)>summary::after{content:"";position:absolute;right:14px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:blink .8s infinite}
ai details:nth-of-type(5)>summary:active::after{background:var(--red);box-shadow:0 0 8px var(--red)}
ai log{display:block;padding:8px 10px;background:#0d1117;margin:2px;border-radius:3px}
ai hh{display:block;margin:8px 0 4px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:1px;color:#58c4ff;border-bottom:1px solid rgba(88,196,255,.3);padding-bottom:3px;text-transform:uppercase}
ai row{display:grid;grid-template-columns:24px 1fr;gap:1px 8px;padding:6px 4px;border-bottom:1px dashed rgba(88,196,255,.18);font-size:12px;font-family:var(--mono);transition:background .2s}
ai row:hover{background:rgba(88,196,255,.08)}
ai no{grid-row:span 3;display:flex;align-items:center;justify-content:center;color:#58c4ff;font-weight:700;border:1px solid rgba(88,196,255,.35);border-radius:3px;background:rgba(88,196,255,.08);font-variant-numeric:tabular-nums}
ai tm{color:#8fd4ff;font-size:11px;font-variant-numeric:tabular-nums}
ai sc{color:#a0a8b5;font-size:11px}
ai ev{color:#d0d6dd}
ai row[st] no{color:var(--green);border-color:rgba(22,163,74,.5);background:rgba(22,163,74,.12)}
ai row[st] tm{color:#7fffb0}
ai details:nth-of-type(6){background:#000;border:none;border-radius:0;box-shadow:0 0 0 3px #000,0 0 0 6px #fff,0 0 0 9px #000,0 8px 20px rgba(0,0,0,.5)}
ai details:nth-of-type(6)>summary{background:#0056b3;color:#fff;font-family:var(--pixel);font-weight:700;letter-spacing:2px;text-shadow:2px 2px 0 #002a5c;border-bottom:3px solid #002a5c}
ai details:nth-of-type(6)>summary::before{content:"▶ SELECT ACTION"}
ai details:nth-of-type(6)>summary::after{content:"■";position:absolute;right:14px;color:#fff;text-shadow:2px 2px 0 #002a5c}
ai details:nth-of-type(6)[open]>summary::after{content:"▼"}
ai act{display:block;padding:12px;counter-reset:n;background:#000}
ai b{display:block;margin:8px 0;padding:10px 12px 10px 40px;position:relative;background:#1a1a2e;border:none;box-shadow:3px 3px 0 #000,inset -3px -3px 0 #0a0a18,inset 3px 3px 0 #33334d;color:#e8e8f0;font-family:var(--pixel);font-size:13.5px;font-weight:700;letter-spacing:1px;cursor:pointer;image-rendering:pixelated;counter-increment:n;text-shadow:1px 1px 0 rgba(0,0,0,.5);transition:transform .08s}
ai b::before{content:counter(n);position:absolute;left:10px;top:50%;transform:translateY(-50%);width:20px;height:20px;line-height:20px;text-align:center;background:#f0c419;color:#000;box-shadow:2px 2px 0 #000;font-family:var(--pixel)}
ai b:hover{background:#0056b3;color:#fff;box-shadow:1px 1px 0 #000,inset -3px -3px 0 #003a7a,inset 3px 3px 0 #3a86e0;transform:translate(2px,2px)}
ai b:hover::before{content:"►";background:#fff;color:#0056b3;animation:blink .5s infinite}
@media(max-width:480px){
ai{font-size:14px;padding:12px 8px}
ai hd t:first-child{font-size:19px}
ai zx{padding:10px 8px 6px}
ai pic{max-width:150px}
ai pic img{max-height:180px}
ai info f{font-size:19px}
ai d{margin:5px 8px;font-size:13px}
ai bal{font-size:20px}
ai bar{height:18px}
ai bar n e{display:none}
ai card{padding:8px 12px 32px}
ai b{font-size:12.5px;padding:9px 10px 9px 36px}
ai crt d,ai row{font-size:11.5px}
ai details:nth-of-type(1),ai details:nth-of-type(2){transform:none}
ai who{padding:12px 10px 10px}
ai details{margin:10px 0}
}

/* ==========================================
 * FC红白机完整界面美化方案 v2.0
 * 导航栏 + 输入区 + 动效优化
 * ========================================== */

/* ========== 1. 顶部导航栏 ========== */
/* 导航主容器 - 红白机经典红底黑边 */
nav.sticky.top-0.backdrop-blur {
    background: linear-gradient(180deg, #E52521 0%, #CC1F1C 100%) !important;
    border-bottom: 4px solid #000000 !important;
    box-shadow: 0 4px 0 rgba(0,0,0,0.3) !important;
}

/* 导航栏header容器 */
nav.sticky header.flex {
    padding: 8px 16px !important;
}

/* 左侧侧边栏按钮 */
div#nav-left button[data-sidebar="trigger"] {
    background-color: #000000 !important;
    border: 2px solid #FFFFFF !important;
    border-radius: 0px !important;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.6) !important;
    transition: all 0.1s steps(2) !important;
}

div#nav-left button[data-sidebar="trigger"]:hover {
    background-color: #0047BB !important;
    transform: translate(2px, 2px) !important;
    box-shadow: 0px 0px 0px #000000 !important;
}

div#nav-left button[data-sidebar="trigger"] svg {
    color: #FFFFFF !important;
    filter: drop-shadow(1px 1px 0px #E52521) !important;
}

/* 右侧功能按钮组 */
div#nav-right button {
    background-color: #000000 !important;
    border: 2px solid #FFFFFF !important;
    border-radius: 0px !important;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.6) !important;
    transition: all 0.1s steps(2) !important;
    position: relative !important;
}

div#nav-right button:hover {
    background-color: #E52521 !important;
    transform: translate(2px, 2px) !important;
    box-shadow: 0px 0px 0px #000000 !important;
}

/* 按钮图标 */
div#nav-right button svg {
    color: #FFFFFF !important;
    filter: drop-shadow(1px 1px 0px #000000) !important;
}

/* 系统公告按钮特殊标识（小红点动效） */
div#nav-right button[aria-label="系统公告"]::after {
    content: '' !important;
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    width: 6px !important;
    height: 6px !important;
    background-color: #39FF14 !important;
    border: 1px solid #000000 !important;
    animation: blink 1s steps(2) infinite !important;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* 通知按钮铃铛摇晃效果 */
div#nav-right button[aria-label="通知"]:hover svg {
    animation: ring 0.5s steps(4) !important;
}

@keyframes ring {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg); }
    75% { transform: rotate(15deg); }
}

/* ========== 2. 输入区域主容器 ========== */
/* 最外层input-group容器 - 灰色卡带底座 */
div[data-slot="input-group"][role="group"] {
    background-color: #D3D3D3 !important;
    border: 3px solid #000000 !important;
    border-radius: 0px !important;
    box-shadow: 4px 4px 0px #000000, 8px 8px 0px rgba(0,0,0,0.3) !important;
    position: relative !important;
}

/* 容器装饰条纹（模拟卡带标签） */
div[data-slot="input-group"][role="group"]::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: repeating-linear-gradient(
        90deg,
        #E52521 0px,
        #E52521 10px,
        #000000 10px,
        #000000 12px
    ) !important;
}

/* ========== 3. 顶部按钮栏 (模组/评论/滚动/图片) ========== */
/* 顶部addon区域背景 */
div#prompt-input-header {
    background: linear-gradient(180deg, #2A2A2A 0%, #333333 100%) !important;
    border-bottom: 2px solid #000000 !important;
    padding: 8px !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.1) !important;
}

/* 所有顶部按钮 - FC蓝键样式 */
div#prompt-input-header button {
    background: linear-gradient(180deg, #0057DD 0%, #0047BB 100%) !important;
    border: 2px solid #000000 !important;
    border-radius: 0px !important;
    color: #FFFFFF !important;
    font-family: 'Press Start 2P', 'Courier New', monospace !important;
    box-shadow: inset -1px -1px 0px rgba(0,0,0,0.5), 
                inset 1px 1px 0px rgba(255,255,255,0.2),
                2px 2px 0px #000000 !important;
    transition: all 0.1s steps(2) !important;
    text-shadow: 1px 1px 0px #000000 !important;
}

div#prompt-input-header button:hover {
    background: linear-gradient(180deg, #FF5555 0%, #E52521 100%) !important;
    transform: translate(2px, 2px) !important;
    box-shadow: inset -1px -1px 0px rgba(0,0,0,0.5), 
                inset 1px 1px 0px rgba(255,255,255,0.2),
                0px 0px 0px #000000 !important;
}

/* 顶部按钮图标 */
div#prompt-input-header button svg {
    color: #FFFFFF !important;
    filter: drop-shadow(1px 1px 0px #000000) !important;
}

/* 按钮文字 */
div#prompt-input-header button span {
    font-family: 'Press Start 2P', 'Courier New', monospace !important;
    color: #FFFFFF !important;
    text-transform: uppercase !important;
    font-size: 8px !important;
    letter-spacing: 0.5px !important;
}

/* 模组按钮图标容器特殊样式 */
div#prompt-input-header button div.size-4 {
    background-color: transparent !important;
}

/* ========== 4. 输入框核心区域 ========== */
/* textarea主体 - 街机终端黑底绿字 */
textarea[data-slot="input-group-control"] {
    background: radial-gradient(circle at center, #000000 0%, #0A0A0A 100%) !important;
    color: #39FF14 !important;
    font-family: 'Press Start 2P', 'Courier New', monospace !important;
    font-weight: bold !important;
    border: none !important;
    box-shadow: inset 4px 4px 8px rgba(0,0,0,0.8) !important;
    padding: 14px !important;
    font-size: 11px !important;
    line-height: 1.8 !important;
    text-shadow: 0 0 2px #39FF14 !important;
}

textarea[data-slot="input-group-control"]::placeholder {
    color: #006600 !important;
    font-weight: normal !important;
    text-shadow: none !important;
}

textarea[data-slot="input-group-control"]::selection {
    background-color: #E52521 !important;
    color: #FFFFFF !important;
    text-shadow: 1px 1px 0px #000000 !important;
}

/* ========== 5. 底部按钮栏 ========== */
/* 底部addon背景 */
div#prompt-input-footer {
    background: linear-gradient(180deg, #333333 0%, #2A2A2A 100%) !important;
    border-top: 2px solid #000000 !important;
    padding: 10px !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.1) !important;
}

/* 设置与信息按钮 */
div#prompt-input-footer > div > div.flex.items-center button.size-7 {
    background-color: #000000 !important;
    border: 2px solid #FFFFFF !important;
    border-radius: 0px !important;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.6) !important;
    transition: all 0.1s steps(2) !important;
}

div#prompt-input-footer > div > div.flex.items-center button.size-7:hover {
    background-color: #E52521 !important;
    transform: translate(2px, 2px) !important;
    box-shadow: 0px 0px 0px #000000 !important;
}

div#prompt-input-footer > div > div.flex.items-center button.size-7 svg {
    color: #FFFFFF !important;
    filter: drop-shadow(1px 1px 0px #000000) !important;
}

/* 模型选择器按钮 */
div#prompt-input-footer button:has(img[alt="google logo"]) {
    background: linear-gradient(180deg, #1A1A1A 0%, #000000 100%) !important;
    border: 2px solid #39FF14 !important;
    border-radius: 0px !important;
    font-family: 'Press Start 2P', 'Courier New', monospace !important;
    box-shadow: inset 0 0 6px rgba(57,255,20,0.3), 2px 2px 0px #000000 !important;
    padding: 6px 12px !important;
    transition: all 0.1s steps(2) !important;
}

div#prompt-input-footer button:has(img[alt="google logo"]):hover {
    background: linear-gradient(180deg, #E52521 0%, #CC1F1C 100%) !important;
    border-color: #FFFFFF !important;
    transform: translate(2px, 2px) !important;
    box-shadow: inset 0 0 6px rgba(255,255,255,0.3), 0px 0px 0px #000000 !important;
}

/* 模型名称文字 */
div#prompt-input-footer button:has(img[alt="google logo"]) span {
    color: #39FF14 !important;
    font-family: 'Press Start 2P', 'Courier New', monospace !important;
    font-size: 8px !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 3px #39FF14 !important;
    letter-spacing: 0.5px !important;
}

/* Google logo图标发光效果 */
div#prompt-input-footer button img[alt="google logo"] {
    filter: brightness(0) invert(1) drop-shadow(0 0 4px #39FF14) !important;
}

/* 回复模式按钮 */
div#prompt-input-footer button[aria-label="回复模式"] {
    background: linear-gradient(180deg, #0057DD 0%, #0047BB 100%) !important;
    border: 2px solid #000000 !important;
    border-radius: 0px !important;
    color: #FFFFFF !important;
    box-shadow: inset -1px -1px 0px rgba(0,0,0,0.5), 
                inset 1px 1px 0px rgba(255,255,255,0.2),
                2px 2px 0px #000000 !important;
    font-family: 'Press Start 2P', 'Courier New', monospace !important;
    transition: all 0.1s steps(2) !important;
}

div#prompt-input-footer button[aria-label="回复模式"]:hover {
    background: linear-gradient(180deg, #FF5555 0%, #E52521 100%) !important;
    transform: translate(2px, 2px) !important;
    box-shadow: inset -1px -1px 0px rgba(0,0,0,0.5), 
                inset 1px 1px 0px rgba(255,255,255,0.2),
                0px 0px 0px #000000 !important;
}

div#prompt-input-footer button[aria-label="回复模式"] svg,
div#prompt-input-footer button[aria-label="回复模式"] span {
    color: #FFFFFF !important;
    font-size: 8px !important;
    text-shadow: 1px 1px 0px #000000 !important;
}

/* 发送按钮 - FC Start键红色强化版 */
div#prompt-input-footer button[type="submit"] {
    background: linear-gradient(180deg, #FF5555 0%, #E52521 100%) !important;
    border: 2px solid #000000 !important;
    border-radius: 0px !important;
    box-shadow: inset -1px -1px 0px rgba(0,0,0,0.6), 
                inset 1px 1px 0px rgba(255,255,255,0.3),
                3px 3px 0px #000000 !important;
    transition: all 0.1s steps(2) !important;
    position: relative !important;
}

div#prompt-input-footer button[type="submit"]::before {
    content: '' !important;
    position: absolute !important;
    inset: 2px !important;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2) 0%, transparent 60%) !important;
    pointer-events: none !important;
}

div#prompt-input-footer button[type="submit"]:hover {
    background: linear-gradient(180deg, #FF3333 0%, #CC0000 100%) !important;
    transform: translate(3px, 3px) !important;
    box-shadow: inset -1px -1px 0px rgba(0,0,0,0.6), 
                inset 1px 1px 0px rgba(255,255,255,0.3),
                0px 0px 0px #000000 !important;
    animation: pulse 0.6s steps(3) infinite !important;
}

@keyframes pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
}

div#prompt-input-footer button[type="submit"] svg {
    color: #FFFFFF !important;
    filter: drop-shadow(1px 1px 0px #000000) !important;
}

/* ========== 6. 滚动条美化 ========== */
textarea[data-slot="input-group-control"]::-webkit-scrollbar {
    width: 14px !important;
    background-color: #000000 !important;
    border-left: 2px solid #FFFFFF !important;
}

textarea[data-slot="input-group-control"]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #E52521 0%, #CC1F1C 100%) !important;
    border: 2px solid #000000 !important;
    box-shadow: inset 1px 1px 0px rgba(255,255,255,0.3) !important;
}

textarea[data-slot="input-group-control"]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #FF5555 0%, #E52521 100%) !important;
}

textarea[data-slot="input-group-control"]::-webkit-scrollbar-track {
    background: repeating-linear-gradient(
        180deg,
        #1A1A1A 0px,
        #1A1A1A 4px,
        #000000 4px,
        #000000 6px
    ) !important;
    border-left: 2px solid #FFFFFF !important;
}

/* ========== 7. 响应式优化 ========== */
@media (max-width: 768px) {
    /* 移动端按钮文字隐藏优化 */
    div#prompt-input-header button span,
    div#prompt-input-footer button[aria-label="回复模式"] span.hidden {
        display: none !important;
    }
    
    /* 移动端导航栏高度调整 */
    nav.sticky header.flex {
        height: 48px !important;
    }
    
    /* 移动端按钮尺寸微调 */
    div#nav-right button {
        width: 32px !important;
        height: 32px !important;
    }
}

/* ========== 8. 焦点状态优化 ========== */
textarea[data-slot="input-group-control"]:focus {
    outline: none !important;
    box-shadow: inset 4px 4px 8px rgba(0,0,0,0.8), 
                0 0 0 2px #39FF14 !important;
}

/* 按钮聚焦环 */
button:focus-visible {
    outline: 2px dashed #39FF14 !important;
    outline-offset: 2px !important;
}