/* Windows 桌面通讯参考：浅灰三栏、无装饰正文。只作用于游戏中的通讯窗口。 */
body[data-surface="chat"] { background:#e4e7eb; color:#161616; font-family:"Microsoft YaHei UI","Microsoft YaHei","Segoe UI",sans-serif; }
body[data-surface="chat"] #app { display:flow-root; }
body[data-surface="chat"] .chat-desktop { width:calc(100% - 64px); max-width:1100px; margin:24px auto; }
body[data-surface="chat"] .chat-window { height:min(790px,calc(100svh - 100px)); min-height:520px; display:grid; grid-template-columns:60px 254px minmax(0,1fr); grid-template-rows:30px minmax(0,1fr); border:1px solid #bbbfc5; border-radius:7px; box-shadow:0 9px 35px #19212d24; background:#f5f5f5; }
.chat-titlebar { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; height:30px; padding-left:17px; background:#f3f3f3; color:#777; font:12px "Microsoft YaHei UI",sans-serif; user-select:none; }
.window-glyphs { display:flex; align-self:stretch; color:#555; }
.window-glyphs i { display:flex; align-items:center; justify-content:center; width:43px; font:15px/1 "Segoe UI",sans-serif; }
body[data-surface="chat"] .chat-rail { background:#ededed; padding-top:17px; gap:17px; border-right:1px solid #dedede; }
.rail-account { display:flex; padding:0; margin-bottom:6px; }
body[data-surface="chat"] .rail-avatar { width:34px; height:34px; margin:0; border:0; border-radius:4px; }
body[data-surface="chat"] .rail-button { color:#545454; width:36px; height:35px; padding:7px; border-radius:6px; }
body[data-surface="chat"] .rail-button.active { color:#07b75a; background:#dfdfdf; }
body[data-surface="chat"] .rail-button:hover { background:#dedede; color:#151515; }
body[data-surface="chat"] .rail-button.active:hover { color:#07b75a; }
body[data-surface="chat"] .rail-button .icon { width:24px; height:24px; stroke-width:1.6; }
body[data-surface="chat"] .rail-bottom { margin-bottom:18px; }
body[data-surface="chat"] .contacts-panel { background:#f7f7f7; border-right:1px solid #dedede; }
body[data-surface="chat"] .contacts-search { height:65px; flex-shrink:0; gap:9px; padding:0 13px; }
body[data-surface="chat"] .contacts-search label { flex:1; height:28px; background:#e9e9e9; border:1px solid transparent; border-radius:5px; padding:0 8px; }
body[data-surface="chat"] .contacts-search label:focus-within { border-color:#aaa; outline:0; background:white; }
body[data-surface="chat"] .contacts-search .icon { color:#8c8c8c; width:13px; height:13px; }
body[data-surface="chat"] .contacts-search input { font-size:12px; color:#222; }
body[data-surface="chat"] .contacts-search input::placeholder { color:#888; }
body[data-surface="chat"] .contacts-search > button { background:#e9e9e9; border-radius:5px; color:#555; font:21px/28px Arial,sans-serif; width:28px; }
body[data-surface="chat"] .contacts-list { min-height:0; overflow-y:auto; }
body[data-surface="chat"] .contact-item { min-height:72px; padding:12px 13px; gap:11px; }
body[data-surface="chat"] .contact-item.pinned { background:#eeeeee; }
body[data-surface="chat"] .contact-item:hover { background:#e6e6e6; }
body[data-surface="chat"] .contact-item.active { background:#dcdcdc; }
body[data-surface="chat"] .contact-item .avatar { width:40px; height:40px; border-radius:4px; }
body[data-surface="chat"] .contact-copy > strong { font-size:14px; font-weight:400; color:#111; padding-right:25px; line-height:1.6; }
body[data-surface="chat"] .contact-copy > small { color:#999; font-size:12px; line-height:1.5; margin-top:4px; }
body[data-surface="chat"] .contact-item time { color:#999; font:10px/1.6 "Microsoft YaHei UI",sans-serif; top:14px; right:12px; }
body[data-surface="chat"] .unread-count { background:#fa5151; font-size:10px; }
body[data-surface="chat"] .conversation { background:#f5f5f5; }
body[data-surface="chat"] .conversation-header { height:65px; padding:0 24px; border-bottom:1px solid #e5e5e5; justify-content:flex-start; gap:10px; }
body[data-surface="chat"] .conversation-header h2 { color:#111; font-size:18px; font-weight:400; }
body[data-surface="chat"] .conversation-header h2 > span { color:inherit; font-size:16px; }
body[data-surface="chat"] .conversation-header > .icon-button { margin-left:auto; color:#272727; }
.group-announcement { display:flex; align-items:center; gap:9px; text-align:left; flex-shrink:0; padding:8px 22px; border-bottom:1px solid #e7e7e7; font-size:12px; background:#f7f7f7; color:#777; }
.group-announcement > span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.group-announcement .icon { width:14px; height:14px; }
body[data-surface="chat"] .messages { padding:5px 25px 26px; scrollbar-color:#cecece transparent; }
body[data-surface="chat"] .chat-time { color:#aaa; font:12px/1.4 "Microsoft YaHei UI",sans-serif; margin:19px 0 25px; }
body[data-surface="chat"] .message-row { gap:11px; margin-top:19px; }
body[data-surface="chat"] .message-row > .avatar,body[data-surface="chat"] .message-avatar-link .avatar { width:36px; height:36px; border-radius:4px; }
body[data-surface="chat"] .message-stack { max-width:calc(100% - 78px); }
body[data-surface="chat"] .message-name { color:#a0a0a0; font-size:11px; margin:0 0 5px 1px; }
body[data-surface="chat"] .message-bubble { background:#fff; border:1px solid #e9e9e9; border-radius:4px; color:#161616; padding:8px 12px; font-size:14px; line-height:1.6; }
body[data-surface="chat"] .message-bubble:before { border-color:#e9e9e9; background:white; }
body[data-surface="chat"] .chat-image-message { display:block; width:170px; max-width:100%; padding:0; border:1px solid #e7e7e7; border-radius:5px; overflow:hidden; background:#fafafa; cursor:pointer; }
.chat-image-message img { display:block; width:100%; height:auto; }
body[data-surface="chat"] .chat-image-message:hover { border-color:#d4d4d4; }
body[data-surface="chat"] .chat-image-message:focus-visible { outline:2px solid #7b8b97; outline-offset:2px; }
body[data-surface="chat"] .own .message-bubble { background:#95ec69; border-color:#89e45e; color:#111; }
body[data-surface="chat"] .own .message-bubble:before { background:#95ec69; border-color:#89e45e; }
body[data-surface="chat"] .chat-link-card { width:285px; border:1px solid #e6e6e6; border-radius:4px; padding:12px 12px 0; gap:10px; }
body[data-surface="chat"] .chat-link-card strong { color:#222; font-size:14px; line-height:1.5; }
body[data-surface="chat"] .chat-link-card small { color:#999; font-size:11px; line-height:1.5; }
body[data-surface="chat"] .chat-link-card footer { color:#999; font-size:10px; border-color:#eee; }
body[data-surface="chat"] .chat-composer { height:190px; padding:11px 23px 12px; background:#fff; border-top:1px solid #e6e6e6; }
body[data-surface="chat"] .composer-tools { height:24px; color:#444; gap:17px; }
body[data-surface="chat"] .composer-tools > span,body[data-surface="chat"] .composer-tools > button { display:inline-flex; align-items:center; padding:0; }
body[data-surface="chat"] .composer-tools .icon { width:20px; height:20px; stroke-width:1.6; }
body[data-surface="chat"] .composer-tools > button:hover { color:#07b75a; }
body[data-surface="chat"] .composer-tools .composer-call { margin-left:auto; gap:19px; }
.chat-editor { height:95px; width:100%; overflow-y:auto; padding:9px 0 5px; color:#161616; font:14px/1.7 "Microsoft YaHei UI","Microsoft YaHei","Segoe UI",sans-serif; white-space:pre-wrap; overflow-wrap:anywhere; cursor:text; outline:0; }
.chat-editor:focus-visible { outline:0; }
.chat-composition { text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; }
.chat-caret { display:inline-block; vertical-align:-3px; height:17px; border-left:1px solid #151515; width:1px; animation:chat-caret-blink 1s steps(1,end) infinite; }
body[data-surface="chat"] .composer-bottom { margin-top:2px; min-height:30px; }
.skip-opening { padding:3px 0; color:#999; font:11px "Microsoft YaHei UI",sans-serif; }
.skip-opening:hover { color:#555; text-decoration:underline; }
.composer-send { display:flex; align-items:center; gap:13px; }
.send-key-hint { color:#b2b2b2; font-size:11px; }
body[data-surface="chat"] .send-button { background:#e9e9e9; border:1px solid #e6e6e6; color:#07a948; font:13px/1.6 "Microsoft YaHei UI",sans-serif; border-radius:4px; padding:3px 10px 3px 18px; min-width:90px; }
body[data-surface="chat"] .send-button > span { color:#b4b4b4; border-left:1px solid #ccc; padding-left:7px; margin-left:10px; font-size:12px; }
body[data-surface="chat"] .send-button:disabled { color:#a7c5b0; }
body[data-surface="chat"] .send-button:not(:disabled):hover,body[data-surface="chat"] .send-button.is-sending { background:#07b75a; border-color:#07b75a; color:white; }
.chat-ime { position:absolute; z-index:6; min-width:220px; max-width:calc(100% - 20px); border:1px solid #d1d1d1; border-radius:7px; padding:8px 8px 7px; box-shadow:0 3px 10px #0002; color:#151515; background:#fdfdfd; font:14px/1.6 "Microsoft YaHei UI","Segoe UI",sans-serif; pointer-events:none; }
.ime-reading { font-size:13px; padding:0 6px 5px; color:#333; white-space:nowrap; }
.ime-candidates { display:flex; align-items:center; gap:3px; white-space:nowrap; overflow:hidden; }
.ime-candidates > span { padding:3px 7px; border-radius:4px; }
.ime-candidates > span.selected { color:#fff; background:#0067c0; }
.ime-candidates small { font-size:11px; opacity:.65; margin-right:7px; }
body[data-surface="chat"] .contact-info { color:#333; background:#fafafa; border-color:#ddd; z-index:8; }
body[data-surface="chat"] .game-taskbar { background:#e4e6e9f0; color:#555; border-color:#ccc; }
body[data-surface="chat"] .taskbar-app.active { background:#f4f4f4; color:#222; border-bottom-color:#07b75a; }
body[data-surface="chat"] .taskbar-app > .icon { color:#07a948; }
body[data-surface="chat"] .desktop-clock { color:#444; }
body[data-surface="chat"] .desktop-clock small { color:#777; }
body[data-surface="chat"] .chat-desktop-caption { color:#555; letter-spacing:0; }
body[data-surface="chat"] .chat-desktop-caption > small { color:#777; }
body[data-surface="chat"] .moments-window { border-color:#c6c6c6; box-shadow:0 9px 35px #19212d24; }
@keyframes chat-caret-blink { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
@media(prefers-reduced-motion:reduce) { .chat-caret { animation:none; } }
@media(max-width:850px) {
 body[data-surface="chat"] .chat-desktop { width:calc(100% - 24px); margin:12px auto; }
 body[data-surface="chat"] .chat-window { grid-template-columns:52px 215px minmax(0,1fr); height:calc(100svh - 74px); }
 body[data-surface="chat"] .contact-copy > strong { font-size:13px; }
 .send-key-hint { display:none; }
}
@media(max-width:650px) {
 body[data-surface="chat"] .chat-desktop { width:100%; margin:0; }
 body[data-surface="chat"] .chat-window { height:calc(100svh - 48px); min-height:420px; display:block; position:relative; border:0; border-radius:0; box-shadow:none; padding-top:28px; }
 .chat-titlebar { position:absolute; left:0; right:0; top:0; height:28px; padding-left:14px; border-bottom:1px solid #e7e7e7; }
 .window-glyphs { display:none; }
 body[data-surface="chat"] .chat-window > .chat-rail { display:none; }
 body[data-surface="chat"] .conversation { height:100%; }
 body[data-surface="chat"] .conversation-header { height:55px; padding:0 14px; }
 body[data-surface="chat"] .conversation-header h2 { font-size:17px; }
 body[data-surface="chat"] .mobile-contacts { display:flex; align-items:center; padding:0 4px 0 0; color:#333; }
 body[data-surface="chat"] .mobile-contacts .icon { transform:rotate(180deg); width:20px; height:20px; }
 body[data-surface="chat"] .contacts-panel { display:none; }
 body[data-surface="chat"] .chat-window.show-contacts .contacts-panel { display:flex; position:absolute; inset:28px 0 0; z-index:12; border:0; }
 body[data-surface="chat"] .chat-window.show-contacts .conversation { visibility:hidden; }
 body[data-surface="chat"] .contacts-search { height:57px; }
 body[data-surface="chat"] .message-stack { max-width:calc(100% - 55px); }
 body[data-surface="chat"] .messages { padding:3px 16px 22px; }
 body[data-surface="chat"] .chat-composer { height:179px; padding:10px 15px; }
 .chat-editor { height:85px; font-size:14px; }
 .chat-ime { min-width:200px; font-size:13px; }
 .ime-candidates > span { padding:3px 5px; }
 .ime-candidates small { margin-right:4px; }
 body[data-surface="chat"] .chat-link-card { width:100%; min-width:0; }
 .group-announcement { padding:8px 16px; }
}
/* 消息表情不使用文字气泡底色；固定图格避免图片载入后挤动聊天。 */
.message-content.has-sticker{display:flex;flex-direction:column;align-items:flex-start}
.message-row.own .message-content.has-sticker,.message-row.self .message-content.has-sticker{align-items:flex-end}
.chat-sticker{width:112px;margin:7px 0 3px;flex-shrink:0;text-align:center}
.sticker-message-row .chat-sticker{margin:0}
.chat-sticker-frame{position:relative;display:block;width:112px;height:112px;overflow:hidden}
.chat-sticker-frame img{position:absolute;width:300%;height:200%;max-width:none;object-fit:fill}
@media(max-width:650px){.chat-sticker,.chat-sticker-frame{width:96px}.chat-sticker-frame{height:96px}}

/* 朋友圈看图覆盖当前通讯窗口；以用户提供的浅灰蒙层截图为准。 */
.image-dialog.chat-photo-viewer{position:fixed;inset:auto;left:var(--photo-left,0px);top:var(--photo-top,0px);width:var(--photo-width,100vw);height:var(--photo-height,100svh);max-width:none;max-height:none;margin:0;padding:0;border:1px solid #c0c1c3;border-radius:7px;background:rgba(223,224,226,.92);backdrop-filter:blur(1px);overflow:hidden;box-shadow:none;outline:none}
.image-dialog.chat-photo-viewer::backdrop{background:transparent;backdrop-filter:none}
.chat-photo-close{position:absolute;z-index:3;top:13px;right:14px;width:34px;height:32px;padding:0;display:flex;justify-content:center;align-items:center;color:#62656a;border:0;border-radius:4px;background:transparent}
.chat-photo-close .icon{width:20px;height:20px}
.chat-photo-close:hover{color:#333;background:#0000000b}
.chat-photo-close:focus-visible,.chat-photo-toolbar button:focus-visible,.chat-photo-arrow:focus-visible{outline:2px solid #7b8b97;outline-offset:1px}
.chat-photo-stage{position:absolute;inset:64px 74px 74px;display:flex;justify-content:center;align-items:center;overflow:hidden;touch-action:none}
.chat-photo-stage>.lightbox-image{display:block;flex:none;width:auto;height:auto;max-width:none;max-height:none;object-fit:contain;background:transparent;transform-origin:50% 50%;user-select:none;pointer-events:none}
.chat-photo-arrow{position:absolute;z-index:3;top:calc(50% - 22px);width:38px;height:44px;border:0;border-radius:4px;background:transparent;color:#6d7075;display:flex;justify-content:center;align-items:center}
.chat-photo-arrow[hidden]{display:none}
.chat-photo-arrow.previous{left:14px}.chat-photo-arrow.previous .icon{transform:rotate(180deg)}
.chat-photo-arrow.next{right:14px}.chat-photo-arrow .icon{width:20px;height:20px}
.chat-photo-arrow:hover:not(:disabled){background:#00000008;color:#333}.chat-photo-arrow:disabled{opacity:.16;cursor:default}
.chat-photo-toolbar{position:absolute;z-index:3;left:50%;bottom:16px;transform:translateX(-50%);height:46px;padding:0 13px;display:flex;align-items:center;gap:0;border-radius:25px;background:#ffffffed;box-shadow:0 1px 2px #00000005}
.chat-photo-toolbar button{display:flex;align-items:center;justify-content:center;width:39px;height:34px;padding:0;border:0;border-radius:5px;background:transparent;color:#50545a}
.chat-photo-toolbar button:hover{background:#eceeef}.chat-photo-toolbar .icon{width:21px;height:21px}
.chat-photo-ratio{font:10px/17px Arial,sans-serif;border:1px solid currentColor;width:21px;height:17px}
@media(max-width:650px){.chat-photo-stage{inset:55px 36px 74px}.chat-photo-arrow.previous{left:0}.chat-photo-arrow.next{right:0}.chat-photo-close{right:7px;top:8px}.chat-photo-toolbar{bottom:15px}}