/* * 方案 D「Talky Glass · 液态玻璃」聊天区（web-chat 线）：悬浮玻璃顶栏（返回钮 / 中间胶囊 / 右侧按钮组）、置顶 / 翻译玻璃条、 * 光斑背景、气泡（对方 90% 白玻璃、自己电光蓝竖向三段渐变 + iMessage 小尾巴 +「已送达」）、引用 / 译文 / 回应 / * 文件 / 图片 / 语音 / 投票 / 贴纸、日期胶囊、未读分隔线、正在输入、回到底部玻璃钮、三段悬浮玻璃输入栏、 * 长按 / 右键玻璃 tapback 条 + 226 宽 4 组玻璃菜单、转发弹窗。 * 设计稿：TalkyMobile/docs/ui-redesign/v2/parts/set-d.html（.scr-d 下 03 单聊、04 群聊、08 长按菜单）。 * 选择器统一以 #chat-app（转发弹窗是 #modal）开头，压过 site.css / theme-dark.css / appearance.css 里的旧聊天样式； * 颜色用 play-tokens.css 的 --pf-* 令牌（深色、8 种强调色自动跟随），设计稿里的少量固定色收在下面的 --pfd-* 里。 * 布局：聊天时顶栏不占行，消息铺满整屏滚到悬浮玻璃件下面；顶部 / 底部留白由 chat.js 量出来写进 * --pfd-top-h / --pfd-compose-h。悬浮件外层容器都 pointer-events: none，只有玻璃件本身接收点击。 */ :root { --pfd-head: calc(max(10px, env(safe-area-inset-top)) + 52px); --pfd-fade: color-mix(in srgb, var(--pf-bg) 94%, transparent); --pfd-fade2: color-mix(in srgb, var(--pf-bg) 98.5%, transparent); --pfd-hl: color-mix(in srgb, var(--pf-pri) 14%, transparent); --pfd-pri-line: color-mix(in srgb, var(--pf-pri) 38%, transparent); --pfd-out-q: rgba(255,255,255,.2); --pfd-out-line: rgba(255,255,255,.28); --pfd-out-sh: 0 8px 18px -12px color-mix(in srgb, var(--pf-out-m) 90%, transparent); --pfd-menu-sep: rgba(14,20,44,.06); --pfd-lift-sh: 0 22px 40px -14px rgba(10,20,60,.45), 0 2px 6px rgba(10,20,60,.1); --pfd-media-meta-bg: rgba(10,14,30,.46); --pfd-tone-1: #E2731D; --pfd-tone-2: #D63F86; --pfd-tone-3: #109A63; --pfd-file-sheet: linear-gradient(150deg, #45D98A, #109A5A); --pfd-file-doc: linear-gradient(150deg, #5CA8FF, #2F67F0); --pfd-file-pdf: linear-gradient(150deg, #FF7A7A, #E5364B); --pfd-file-slide: linear-gradient(150deg, #FFB45C, #F0731D); --pfd-file-archive: linear-gradient(150deg, #B39CFF, #6A48FF); --pfd-file-audio: linear-gradient(150deg, #F7A9D6, #D9479A); --pfd-file-app: linear-gradient(150deg, #6EE6F7, #0EA2C0); --pfd-file-other: linear-gradient(150deg, #A8AEBD, #5A6274); --pfd-on-file: #FFFFFF; --pfd-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 5 7 7-7 7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --pfd-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.6 9 17.1 19.5 6.6' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --pfd-checks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.8 12.8 6 17 15.6 7.4M11 16.4l.6.6 9.6-9.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --pfd-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 8v4.2l2.6 1.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); --pfd-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.8' r='1.4' fill='%23fff'/%3E%3C/svg%3E"); --pfd-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 8.5 8 12l4-6.5 4 6.5 4.5-3.5L19 18H5z' fill='%23000'/%3E%3C/svg%3E"); } html[data-theme="dark"] { --pfd-fade: color-mix(in srgb, var(--pf-bg) 88%, transparent); --pfd-fade2: color-mix(in srgb, var(--pf-bg) 97%, transparent); --pfd-hl: color-mix(in srgb, var(--pf-pri) 22%, transparent); --pfd-pri-line: color-mix(in srgb, var(--pf-pri) 55%, transparent); --pfd-out-q: rgba(255,255,255,.16); --pfd-menu-sep: rgba(255,255,255,.06); --pfd-lift-sh: 0 22px 40px -12px rgba(0,0,0,.9), 0 0 0 .5px rgba(255,255,255,.1); --pfd-tone-1: #FFA35C; --pfd-tone-2: #FF84BD; --pfd-tone-3: #4ADE9E; } /* 深色 + 非默认强调色：自己的气泡用压暗的主色渐变，白字才看得清。 */ html[data-theme="dark"][data-accent]:not([data-accent="blue"]) { --pf-out-a: color-mix(in srgb, var(--pf-pri) 70%, #000); --pf-out-m: color-mix(in srgb, var(--pf-pri) 58%, #000); --pf-out-b: color-mix(in srgb, var(--pf-pri) 46%, #000); --pf-out: linear-gradient(160deg, var(--pf-out-a) 0%, var(--pf-out-m) 56%, var(--pf-out-b) 100%); } /* ===================================================================== 玻璃材质 四层：半透明 + 背景模糊 20 + 顶部内高光 + 145° 渐变高光描边（::before 遮罩）+ 上半截光泽（::after）。 悬浮件用实时模糊；消息流里大量出现的小件（日期、回应胶囊）用 --pf-glass2 静态玻璃，手机上滚动不卡。 */ #chat-app .main-view.is-chat .header-start, #chat-app .main-view.is-chat .header-title-wrap, #chat-app .main-view.is-chat .header-actions, #chat-app .chat-screen .chat-translation-bar, #chat-app .chat-screen .chat-pinned-message, #chat-app .chat-screen .chat-compose > .composer-attachment-button, #chat-app .chat-screen .chat-compose > .composer-edit-mark, #chat-app .chat-screen .chat-compose > .voice-record-button, #chat-app .chat-screen .composer-pill, #chat-app .chat-screen .new-message-jump-button, #chat-app .chat-screen .mention-jump-button, #chat-app .chat-screen .composer-reply, #chat-app .chat-screen .message-selection-toolbar, #chat-app .chat-screen .mention-picker, #chat-app .chat-screen .composer-panel, #chat-app .message-menu-layer .message-action-reactions, #chat-app .message-menu-layer .message-action-menu { position: relative; isolation: isolate; border: 0; background: var(--pf-glass); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); box-shadow: var(--pf-glass-in), var(--pf-glass-sh); } #chat-app .main-view.is-chat .header-start::before, #chat-app .main-view.is-chat .header-title-wrap::before, #chat-app .main-view.is-chat .header-actions::before, #chat-app .chat-screen .chat-translation-bar::before, #chat-app .chat-screen .chat-pinned-message::before, #chat-app .chat-screen .chat-compose > .composer-attachment-button::before, #chat-app .chat-screen .chat-compose > .composer-edit-mark::before, #chat-app .chat-screen .chat-compose > .voice-record-button::before, #chat-app .chat-screen .composer-pill::before, #chat-app .chat-screen .new-message-jump-button::before, #chat-app .chat-screen .mention-jump-button::before, #chat-app .chat-screen .composer-reply::after, #chat-app .chat-screen .message-selection-toolbar::before, #chat-app .message-menu-layer .message-action-reactions::before, #chat-app .message-menu-layer .message-action-menu::before { position: absolute; z-index: -1; inset: 0; padding: 1px; border-radius: inherit; background: var(--pf-rim); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; content: ""; pointer-events: none; } #chat-app .main-view.is-chat .header-start::after, #chat-app .main-view.is-chat .header-title-wrap::after, #chat-app .main-view.is-chat .header-actions::after, #chat-app .chat-screen .chat-translation-bar::after, #chat-app .chat-screen .chat-pinned-message::after, #chat-app .chat-screen .chat-compose > .composer-attachment-button::after, #chat-app .chat-screen .chat-compose > .voice-record-button::after, #chat-app .chat-screen .composer-pill::after, #chat-app .chat-screen .new-message-jump-button::after, #chat-app .chat-screen .mention-jump-button::after, #chat-app .message-menu-layer .message-action-reactions::after { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--pf-sheen); content: ""; pointer-events: none; } /* 按下玻璃件缩到 0.94，松手弹回（设计稿「玻璃形变」）。 */ #chat-app .main-view.is-chat .header-start, #chat-app .main-view.is-chat .header-actions .icon-button, #chat-app .chat-screen .chat-compose > .composer-attachment-button, #chat-app .chat-screen .chat-compose > .voice-record-button, #chat-app .chat-screen .chat-compose > .send-button, #chat-app .chat-screen .new-message-jump-button, #chat-app .chat-screen .mention-jump-button { transition: transform .32s var(--pf-bounce), background .16s ease; } #chat-app .main-view.is-chat .header-start:active, #chat-app .main-view.is-chat .header-actions .icon-button:active, #chat-app .chat-screen .chat-compose > .composer-attachment-button:active:not(:disabled), #chat-app .chat-screen .new-message-jump-button:active, #chat-app .chat-screen .mention-jump-button:active { transform: scale(.94); transition-duration: .12s; } /* ===================================================================== 布局：顶栏悬浮，消息铺满整屏 */ #chat-app .main-view.is-chat { grid-template-rows: auto minmax(0, 1fr); background: var(--pf-bg); } #chat-app .main-view.is-chat > .page-content { grid-row: 1 / -1; grid-column: 1; } #chat-app .main-view.is-chat > .bottom-nav { display: none; } /* ===================================================================== 顶栏：左返回玻璃钮（带未读数）· 中间玻璃胶囊 · 右侧玻璃按钮组 */ #chat-app .main-view.is-chat > .app-header { position: relative; z-index: 8; display: flex; grid-row: 1; grid-column: 1; min-width: 0; height: var(--pfd-head); align-items: center; gap: 8px; padding-block: max(10px, env(safe-area-inset-top)) 0; padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right)); border: 0; border-radius: 0; color: var(--pf-fg); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; } #chat-app .main-view.is-chat > .app-header > * { pointer-events: auto; } #chat-app .main-view.is-chat .app-header .icon-button { display: grid; place-items: center; padding: 0; border: 0; color: var(--pf-fg); background: transparent; box-shadow: none; } #chat-app .main-view.is-chat .app-header .icon-button svg { width: 22px; height: 22px; stroke-width: 1.8; } /* 返回：42 高玻璃圆钮，有其他会话未读时变成「< 7」胶囊；整块都能点（按钮铺满胶囊，数字只是显示）。 */ #chat-app .main-view.is-chat .header-start { display: flex; min-width: 42px; height: 42px; flex: 0 0 auto; align-items: center; gap: 0; padding: 0; border-radius: 21px; } #chat-app .main-view.is-chat .header-start > [data-action="back-chat"] { position: absolute; z-index: 0; inset: 0; display: flex; width: 100%; height: 100%; justify-content: flex-start; padding-inline-start: 8px; border-radius: inherit; } #chat-app .main-view.is-chat .header-start > [data-action="back-chat"] svg { width: 26px; height: 26px; stroke-width: 2; } #chat-app .main-view.is-chat .header-start:has(.chat-header-unread-badge) { padding-inline: 33px 13px; } #chat-app .main-view.is-chat .chat-header-unread-badge { position: relative; z-index: 1; display: block; min-width: 0; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; color: var(--pf-fg); background: transparent; box-shadow: none; font: 700 15px/42px var(--pf-display); font-style: normal; pointer-events: none; } #chat-app .main-view.is-chat .header-start > [data-action="back-chat"]:focus-visible { outline: 3px solid color-mix(in srgb, var(--pf-pri) 35%, transparent); outline-offset: 2px; } /* 中间胶囊：头像 32 + 名字（14.5/700，带 VIP / 认证标）+ 状态（在线绿色 / 正在输入主色）。 */ #chat-app .main-view.is-chat .header-title-wrap { display: grid; min-width: 0; height: 42px; flex: 0 1 auto; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 8px; margin-inline: auto; padding: 0 14px 0 5px; border-radius: 21px; text-align: start; } #chat-app .main-view.is-chat .header-title-wrap h1 { display: contents; } #chat-app .main-view.is-chat .header-title-wrap .chat-info-avatar-button { display: grid; width: 32px; height: 32px; grid-column: 1; grid-row: 1 / span 2; align-self: center; place-items: center; padding: 0; overflow: visible; border: 0; border-radius: 50%; background: transparent; } #chat-app .main-view.is-chat .header-title-wrap .chat-info-avatar-button:hover { filter: brightness(.97); } #chat-app .main-view.is-chat .chat-info-avatar-button .avatar { width: 32px; height: 32px; flex: 0 0 32px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -6px 12px -6px rgba(0,0,0,.18); font-size: 13px; font-weight: 700; } #chat-app .main-view.is-chat .chat-info-avatar-button .group-avatar { border-radius: 50%; } #chat-app .main-view.is-chat .chat-info-avatar-button .presence { display: none; } #chat-app .main-view.is-chat .chat-header-copy-name { display: flex; min-width: 0; grid-column: 2; grid-row: 1; justify-content: flex-start; padding: 0; color: var(--pf-fg); font: 700 14.5px/1.15 var(--pf-font); letter-spacing: -.003em; } #chat-app .main-view.is-chat .chat-header-title-identity { min-width: 0; justify-content: flex-start; gap: 4px; } #chat-app .main-view.is-chat .chat-header-title-identity > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #chat-app .main-view.is-chat .header-subtitle { grid-column: 2; grid-row: 2; min-width: 0; margin: 1px 0 0; overflow: hidden; color: var(--pf-fg2); font: 500 11px/1.15 var(--pf-font); text-overflow: ellipsis; white-space: nowrap; } #chat-app .main-view.is-chat .header-subtitle.is-online { color: var(--pf-min); font-weight: 700; } #chat-app .main-view.is-chat .header-subtitle.is-activity { color: var(--pf-pri); font-weight: 700; } #chat-app .main-view.is-chat .chat-header-title-identity .vip-level-badge { display: inline-flex; height: 16px; flex: none; align-items: center; gap: 2px; padding: 0 5px 0 4px; border: 0; border-radius: 6px; color: #6A4200; background: linear-gradient(135deg, #FFE9A8, #F5B73A); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(150,96,0,.25); font: 800 9.5px/16px var(--pf-display); letter-spacing: .02em; } #chat-app .main-view.is-chat .chat-header-title-identity .vip-level-badge::before { width: 10px; height: 10px; background: currentColor; -webkit-mask: var(--pfd-crown) center / contain no-repeat; mask: var(--pfd-crown) center / contain no-repeat; content: ""; } #chat-app .main-view.is-chat .chat-header-title-identity .official-account-badge { width: 16px; height: 16px; flex: none; color: var(--pf-vblue); } #chat-app .main-view.is-chat .chat-header-title-identity .official-account-badge svg { width: 16px; height: 16px; } /* 右侧按钮组：一块玻璃胶囊，里面 38 宽的按钮（电话 / 视频 / 媒体 / 搜索）。 */ #chat-app .main-view.is-chat .header-actions { display: flex; height: 42px; flex: 0 0 auto; align-items: center; gap: 0; padding: 0 5px; border-radius: 21px; } #chat-app .main-view.is-chat .header-actions:empty { display: none; } #chat-app .main-view.is-chat .header-actions .icon-button { width: 38px; height: 42px; flex: 0 0 38px; border-radius: 19px; } #chat-app .main-view.is-chat .header-actions .icon-button:hover, #chat-app .main-view.is-chat .header-actions .icon-button:focus-visible { background: var(--pfd-hl); outline: 0; } #chat-app .main-view.is-chat .header-actions:has(.icon-button:only-child) { width: 42px; padding: 0; } #chat-app .main-view.is-chat .header-actions:has(.icon-button:only-child) .icon-button { width: 42px; flex-basis: 42px; border-radius: 50%; } @media (max-width: 420px) { #chat-app .main-view.is-chat > .app-header { gap: 6px; padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); } #chat-app .main-view.is-chat .header-actions { padding: 0 3px; } #chat-app .main-view.is-chat .header-actions .icon-button { width: 35px; flex-basis: 35px; } #chat-app .main-view.is-chat .header-title-wrap { padding-inline-end: 12px; } } /* ===================================================================== 背景：三团光斑（用户设了聊天背景时按用户的） */ #chat-app .main-view.is-chat .chat-screen { position: relative; display: block; height: 100%; isolation: isolate; overflow: hidden; background: radial-gradient(260px 240px at 106% 8%, var(--pf-blob-b), transparent 72%), radial-gradient(240px 220px at -8% 44%, var(--pf-blob-a), transparent 72%), radial-gradient(280px 240px at 100% 84%, var(--pf-blob-c), transparent 72%), radial-gradient(200px 180px at 0% 100%, var(--pf-blob-b), transparent 72%), var(--pf-bg); } @media (min-width: 601px) { #chat-app .main-view.is-chat .chat-screen { background: radial-gradient(360px 320px at 104% 6%, var(--pf-blob-b), transparent 72%), radial-gradient(320px 300px at -6% 42%, var(--pf-blob-a), transparent 72%), radial-gradient(380px 320px at 100% 86%, var(--pf-blob-c), transparent 72%), radial-gradient(280px 240px at 0% 100%, var(--pf-blob-b), transparent 72%), var(--pf-bg); } } #chat-app .main-view.is-chat .chat-screen.has-ap-bg { background: transparent; --pfd-fade: color-mix(in srgb, var(--pf-bg) 30%, transparent); --pfd-fade2: color-mix(in srgb, var(--pf-bg) 45%, transparent); } /* 消息层铺满；顶部 / 底部滚动边缘渐隐（叠在消息上、玻璃件下，不接收点击）。 */ #chat-app .chat-screen .messages-layer { position: absolute; z-index: 1; inset: 0; min-height: 0; overflow: hidden; } #chat-app .chat-screen .messages-layer::before, #chat-app .chat-screen .messages-layer::after { position: absolute; z-index: 2; inset-inline: 0; content: ""; pointer-events: none; } /* 顶部渐隐只用静态半透明渐变：整条宽度的实时模糊叠在滚动的消息上，每滚一帧都要重新模糊，手机上很卡。 去掉模糊后最上面一段再实一点（和页面底色混合），滚上去的消息不透出来；自定义聊天背景时仍保留轻模糊（见下）。 */ #chat-app .chat-screen .messages-layer::before { inset-block-start: 0; height: calc(var(--pfd-top-h, var(--pfd-head)) + 22px); background: linear-gradient(var(--pf-bg) 0%, color-mix(in srgb, var(--pf-bg) 50%, var(--pfd-fade)) 38%, transparent); -webkit-mask: linear-gradient(#000 50%, transparent); mask: linear-gradient(#000 50%, transparent); } #chat-app .chat-screen.has-ap-bg .messages-layer::before { background: linear-gradient(var(--pfd-fade) 0%, var(--pfd-fade) 38%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } #chat-app .chat-screen .messages-layer::after { inset-block-end: 0; height: calc(var(--pfd-compose-h, 78px) + 26px); background: linear-gradient(transparent, var(--pfd-fade) 46%, var(--pfd-fade2) 78%); } #chat-app .chat-screen .messages-stream { position: relative; z-index: 1; display: flex; height: 100%; flex-direction: column; padding-block: calc(var(--pfd-top-h, var(--pfd-head)) + 10px) calc(var(--pfd-compose-h, 78px) + 12px); padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); scroll-padding-block: calc(var(--pfd-top-h, var(--pfd-head)) + 10px) calc(var(--pfd-compose-h, 78px) + 12px); background: transparent; } #chat-app .chat-screen.chat-type-group .messages-stream { padding-inline-start: max(10px, env(safe-area-inset-left)); } #chat-app .chat-screen .messages-layer.has-typing .messages-stream { padding-block-end: calc(var(--pfd-compose-h, 78px) + 46px); } /* 消息少的时候贴着底部排（照设计稿和 iMessage），多了照常从上往下滚。 */ #chat-app .chat-screen .messages-stream > :first-child { margin-block-start: auto; } #chat-app .chat-screen .messages-stream > .message-line, #chat-app .chat-screen .messages-stream > .system-message-line, #chat-app .chat-screen .messages-stream > .date-divider, #chat-app .chat-screen .messages-stream > .unread-divider { flex: 0 0 auto; } /* ===================================================================== 置顶条 / 翻译条：顶栏下方的玻璃条 */ #chat-app .chat-screen .chat-top-stack { position: absolute; z-index: 6; inset-block-start: var(--pfd-head); inset-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); display: grid; gap: 8px; padding-block-start: 6px; pointer-events: none; } #chat-app .chat-screen .chat-top-stack > * { pointer-events: auto; } #chat-app .chat-screen .chat-pinned-message { display: flex; min-width: 0; min-height: 46px; align-items: center; gap: 4px; padding: 0 6px 0 10px; border-radius: 18px; color: var(--pf-fg); } #chat-app .chat-screen .chat-pinned-message-target { display: flex; min-width: 0; min-height: 46px; flex: 1; align-items: center; gap: 10px; padding: 0; border: 0; border-radius: 14px; color: inherit; background: transparent; text-align: start; } #chat-app .chat-screen .chat-pinned-message:not(:has(.chat-pinned-message-unpin)) .chat-pinned-message-target::after { width: 18px; height: 18px; flex: 0 0 18px; margin-inline-end: 4px; background: var(--pf-fg3); -webkit-mask: var(--pfd-chev) center / contain no-repeat; mask: var(--pfd-chev) center / contain no-repeat; content: ""; } html[dir="rtl"] #chat-app .chat-screen .chat-pinned-message-target::after { transform: scaleX(-1); } #chat-app .chat-screen .chat-pinned-message-target:hover .chat-pinned-message-copy, #chat-app .chat-screen .chat-pinned-message-target:focus-visible .chat-pinned-message-copy { opacity: .78; } #chat-app .chat-screen .chat-pinned-message-icon { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 9px; color: var(--pf-on-pri-c); background: var(--pf-pri-c); -webkit-mask: none; mask: none; } #chat-app .chat-screen .chat-pinned-message-icon svg { width: 16px; height: 16px; stroke-width: 2.2; transform: none; } #chat-app .chat-screen .chat-pinned-message-copy { display: grid; min-width: 0; flex: 1; gap: 0; line-height: 1.25; } #chat-app .chat-screen .chat-pinned-message-copy strong { overflow: hidden; color: var(--pf-on-pri-c); font-size: 11.5px; font-weight: 700; line-height: 15px; text-overflow: ellipsis; white-space: nowrap; } #chat-app .chat-screen .chat-pinned-message-copy small { overflow: hidden; color: var(--pf-fg); font-size: 13.5px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; } #chat-app .chat-screen .chat-pinned-message-unpin { position: static; display: grid; width: 32px; height: 32px; flex: 0 0 32px; margin: 0; place-items: center; border-radius: 50%; color: var(--pf-fg3); background: transparent; opacity: 1; } #chat-app .chat-screen .chat-pinned-message-unpin:hover { color: var(--pf-fg); background: var(--pfd-hl); } #chat-app .chat-screen .chat-pinned-message-unpin svg { width: 18px; height: 18px; stroke-width: 2.2; transform: rotate(45deg); } #chat-app .chat-screen .chat-translation-bar { display: flex; min-width: 0; min-height: 46px; align-items: center; gap: 6px; padding: 0 8px 0 0; border-radius: 18px; color: var(--pf-fg); } #chat-app .chat-screen .chat-translation-settings { display: flex; min-width: 0; min-height: 46px; flex: 1; align-items: center; gap: 10px; padding: 0 2px 0 10px; border-radius: 18px; color: inherit; background: transparent; } #chat-app .chat-screen .chat-translation-settings:hover, #chat-app .chat-screen .chat-translation-settings:focus-visible { background: transparent; } #chat-app .chat-screen .chat-translation-icon { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; color: var(--pf-fg2); background: var(--pf-glass2); } #chat-app .chat-screen .chat-translation-icon svg { width: 16px; height: 16px; stroke-width: 2; } #chat-app .chat-screen .chat-translation-bar.is-enabled .chat-translation-icon { color: var(--pf-on-pri-c); background: var(--pf-pri-c); } #chat-app .chat-screen .chat-translation-copy { gap: 0; line-height: 1.25; } #chat-app .chat-screen .chat-translation-copy strong { color: var(--pf-fg); font-size: 12.5px; font-weight: 700; } #chat-app .chat-screen .chat-translation-copy small { color: var(--pf-fg2); font-size: 11.5px; } #chat-app .chat-screen .chat-translation-bar.is-enabled .chat-translation-copy small { color: var(--pf-on-pri-c); font-weight: 600; } #chat-app .chat-screen .chat-translation-settings > i { color: var(--pf-fg3); } #chat-app .chat-screen .chat-translation-provider { height: 30px; margin-inline-end: 0; padding-inline: 10px 6px; border: 0; border-radius: 15px; color: var(--pf-fg2); background: var(--pf-glass2); box-shadow: inset 0 0 0 .5px var(--pf-line2); } #chat-app .chat-screen .chat-translation-provider:focus-within { box-shadow: 0 0 0 2px var(--pfd-pri-line); } /* ===================================================================== 日期胶囊、系统消息、未读分隔线 */ #chat-app .chat-screen .date-divider { display: table; height: 24px; margin: 2px auto 8px; padding: 0 11px; border-radius: 12px; color: var(--pf-fg2); background: var(--pf-glass2); box-shadow: var(--pf-glass-in), 0 4px 12px -8px rgba(30,44,100,.3); font: 700 12px/24px var(--pf-font); text-shadow: none; } #chat-app .chat-screen .system-message-line { margin-block: 4px 10px; } #chat-app .chat-screen .system-message-pill { padding: 4px 12px; border-radius: 12px; color: var(--pf-fg2); background: var(--pf-glass2); box-shadow: var(--pf-glass-in), 0 4px 12px -8px rgba(30,44,100,.3); font-size: 12px; font-weight: 500; text-shadow: none; } #chat-app .chat-screen .unread-divider { display: flex; height: auto; margin: 6px 4px 10px; padding: 0; align-items: center; gap: 10px; color: var(--pf-on-pri-c); background: transparent; font: 700 12px/16px var(--pf-font); } #chat-app .chat-screen .unread-divider::before, #chat-app .chat-screen .unread-divider::after { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--pfd-pri-line)); content: ""; } #chat-app .chat-screen .unread-divider::after { background: linear-gradient(90deg, var(--pfd-pri-line), transparent); } #chat-app .chat-screen .unread-divider svg { display: none; } /* ===================================================================== 消息行 同一人连发算一组：组内间距 3，组间 10；群里头像、名字只在组的第一条，尾巴只在组的最后一条。 */ #chat-app .chat-screen .message-line { align-items: flex-start; gap: 7px; margin-block-end: 3px; border-radius: 20px; } #chat-app .chat-screen .message-line.is-run-end { margin-block-end: 10px; } #chat-app .chat-screen .message-line > .avatar, #chat-app .chat-screen .message-line > .message-avatar-button { flex: 0 0 30px; width: 30px; height: 30px; margin-block-start: 1px; } #chat-app .chat-screen .message-line.is-run-start > .avatar, #chat-app .chat-screen .message-line.is-run-start > .message-avatar-button { margin-block-start: 18px; } #chat-app .chat-screen .message-line > .avatar, #chat-app .chat-screen .message-line > .message-avatar-button .avatar { width: 30px; height: 30px; flex-basis: 30px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -6px 12px -6px rgba(0,0,0,.18); font-size: 12px; font-weight: 700; } #chat-app .chat-screen .message-line:not(.is-run-start) > .avatar, #chat-app .chat-screen .message-line:not(.is-run-start) > .message-avatar-button { visibility: hidden; height: 1px; } #chat-app .chat-screen .message-line.mine > .avatar, #chat-app .chat-screen .message-line.mine > .message-avatar-button, #chat-app .chat-screen:not(.chat-type-group) .message-line > .avatar, #chat-app .chat-screen:not(.chat-type-group) .message-line > .message-avatar-button { display: none; } #chat-app .chat-screen .message-line .avatar .presence { display: none; } #chat-app .chat-screen .message-body { max-width: min(76%, 480px); } #chat-app .chat-screen.chat-type-group .message-line:not(.mine) .message-body { max-width: min(calc(84% - 37px), 480px); } #chat-app .chat-screen .message-line.is-pinned-target { border-radius: 22px; } /* 群成员名：气泡上方 12/700，按人着色；后面跟灰色小标签（群主 / 管理员 / 头衔）。 */ #chat-app .chat-screen .message-sender-tone { display: flex; max-width: 100%; align-items: center; gap: 5px; margin: 0 0 3px 12px; font: 700 12px/15px var(--pf-font); white-space: nowrap; } #chat-app .chat-screen .message-sender-tone .sender-name { display: inline-flex; min-width: 0; align-items: center; gap: 5px; overflow: hidden; margin: 0; color: inherit; font: inherit; text-overflow: ellipsis; text-shadow: none; } #chat-app .chat-screen .message-sender-tone .sender-title { flex: none; padding: 1px 5px; border-radius: 5px; color: var(--pf-fg2); background: var(--pf-glass2); font-size: 10px; font-style: normal; font-weight: 700; line-height: 13px; } #chat-app .chat-screen .tone-1 { --pfd-tone: var(--pfd-tone-1); } #chat-app .chat-screen .tone-2 { --pfd-tone: var(--pfd-tone-2); } #chat-app .chat-screen .tone-3 { --pfd-tone: var(--pfd-tone-3); } #chat-app .chat-screen .message-sender-tone { color: var(--pfd-tone, var(--pf-pri)); background: transparent; } /* ===================================================================== 气泡 对方：90% 白玻璃（深色 #262834）；自己：电光蓝 160° 三段渐变、白字。圆角 21，组里最后一条带 iMessage 小尾巴（尾角 5）。 */ #chat-app .chat-screen .message-bubble { position: relative; max-width: 100%; padding: 8px 13px; border: 0; border-radius: var(--pf-r-bubble); color: var(--pf-fg); background: var(--pf-in); box-shadow: var(--pf-sh1); font-size: calc(15px * var(--ap-chat-font-scale, 1)); line-height: 1.4; overflow-wrap: anywhere; transition: transform .26s var(--pf-spring), filter .18s ease; } #chat-app .chat-screen .message-line.mine .message-bubble { color: var(--pf-out-fg); background: var(--pf-out); box-shadow: var(--pfd-out-sh); } #chat-app .chat-screen .message-line.is-run-end:not(.mine) .message-bubble { border-end-start-radius: var(--pf-r-tail); } #chat-app .chat-screen .message-line.mine.is-run-end .message-bubble { border-end-end-radius: var(--pf-r-tail); } #chat-app .chat-screen .message-line.is-run-end .message-bubble:not(.has-sticker, .has-emoji, .has-video-note)::after { position: absolute; inset-block-end: 0; width: 11px; height: 17px; content: ""; pointer-events: none; } #chat-app .chat-screen .message-line.is-run-end:not(.mine) .message-bubble:not(.has-sticker, .has-emoji, .has-video-note)::after { inset-inline-start: -9px; background: var(--pf-in); -webkit-mask: radial-gradient(circle 21px at -10px -3px, transparent 20.5px, #000 21px); mask: radial-gradient(circle 21px at -10px -3px, transparent 20.5px, #000 21px); } #chat-app .chat-screen .message-line.mine.is-run-end .message-bubble:not(.has-sticker, .has-emoji, .has-video-note)::after { inset-inline-end: -9px; background: var(--pf-out-b); -webkit-mask: radial-gradient(circle 21px at 21px -3px, transparent 20.5px, #000 21px); mask: radial-gradient(circle 21px at 21px -3px, transparent 20.5px, #000 21px); } html[dir="rtl"] #chat-app .chat-screen .message-line.is-run-end .message-bubble::after { transform: scaleX(-1); } #chat-app .chat-screen .message-line.is-long-pressed .message-bubble { transform: scale(.97); filter: brightness(.97); } #chat-app .chat-screen .message-line.is-failed .message-bubble { opacity: .92; } #chat-app .chat-screen .message-link { color: var(--pf-on-pri-c); font-weight: 600; } #chat-app .chat-screen .message-line.mine .message-link { color: var(--pf-out-fg); } #chat-app .chat-screen .message-line.mine .message-selectable-text::selection, #chat-app .chat-screen .message-line.mine .message-selectable-text *::selection { color: var(--pf-pri); background: #FFFFFF; } #chat-app .chat-screen .bot-mention, #chat-app .chat-screen .message-mention { color: var(--pf-on-pri-c); font-weight: 700; } #chat-app .chat-screen .message-line.mine .bot-mention, #chat-app .chat-screen .message-line.mine .message-mention { color: inherit; } #chat-app .chat-screen .message-line.mine .bot-mention { text-decoration: underline; } /* 时间 / 已编辑 / 勾：浮在正文最后一行右边，放不下就换到下一行靠右。勾：发送中钟表、已发送 / 已送达单勾、已读双勾。 */ #chat-app .chat-screen .message-time { position: relative; display: inline-flex; float: right; align-items: center; gap: 2px; margin-block: 7px -3px; margin-inline: 10px -3px; color: var(--pf-fg3); font: 500 11px/13px var(--pf-font); font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: none; } html[dir="rtl"] #chat-app .chat-screen .message-time { float: left; } #chat-app .chat-screen .message-line.mine .message-time { color: var(--pf-out-sub); } #chat-app .chat-screen .message-time .edited-status { margin-inline-end: 3px; font-style: italic; } #chat-app .chat-screen .message-time .read-status { display: inline-flex; align-items: center; color: inherit; font-size: 0; text-shadow: none; } #chat-app .chat-screen .message-time .read-status::after { width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--pfd-check) center / contain no-repeat; mask: var(--pfd-check) center / contain no-repeat; content: ""; } #chat-app .chat-screen .message-time .read-status[data-read-state="read"]::after { width: 16px; -webkit-mask-image: var(--pfd-checks); mask-image: var(--pfd-checks); } #chat-app .chat-screen .message-line.mine .message-time .read-status[data-read-state="read"] { color: var(--pf-out-fg); } #chat-app .chat-screen .message-time .read-status[data-read-state="sending"]::after { width: 13px; height: 13px; -webkit-mask-image: var(--pfd-clock); mask-image: var(--pfd-clock); } #chat-app .chat-screen .message-time .read-status[data-read-state="failed"] { gap: 3px; margin-inline-start: 3px; padding: 0 6px 0 3px; border-radius: 8px; color: #FFFFFF; background: var(--pf-dan); font-size: 10.5px; font-weight: 700; line-height: 16px; } #chat-app .chat-screen .message-time .read-status[data-read-state="failed"]::after { order: -1; width: 12px; height: 12px; -webkit-mask-image: var(--pfd-alert); mask-image: var(--pfd-alert); } #chat-app .chat-screen .message-line.is-sending .read-status { opacity: .8; } #chat-app .chat-screen .message-time .safety-review-status { margin-inline-start: 3px; color: inherit; } #chat-app .chat-screen .message-line.is-under-review .message-time .safety-review-status { color: var(--pf-on-lem); } #chat-app .chat-screen .message-line.mine.is-under-review .message-time .safety-review-status { color: #FFE9A8; } #chat-app .chat-screen .safety-review-status.is-rejected { color: var(--pf-dan); } #chat-app .chat-screen .message-line.mine .safety-review-status.is-rejected { color: #FFD3CC; } /* 单聊里自己最后一条消息下方的「已送达 / 已读」小字（iMessage）：文案在聊天页的 --pfd-receipt-* 里，跟着勾的状态实时变。 */ #chat-app .chat-screen.chat-type-friend .message-line.mine:has(.read-status[data-read-state="sent"]) { --pfd-receipt: var(--pfd-receipt-sent); } #chat-app .chat-screen.chat-type-friend .message-line.mine:has(.read-status[data-read-state="delivered"]) { --pfd-receipt: var(--pfd-receipt-delivered); } #chat-app .chat-screen.chat-type-friend .message-line.mine:has(.read-status[data-read-state="read"]) { --pfd-receipt: var(--pfd-receipt-read); } #chat-app .chat-screen.chat-type-friend .message-line.mine:not(:has(~ .message-line.mine)) .message-body::after { margin: 3px 4px 0 0; color: var(--pf-fg3); font: 500 11px/14px var(--pf-font); content: var(--pfd-receipt, none); } #chat-app .chat-screen.has-ap-bg.chat-type-friend .message-line.mine .message-body::after { color: var(--pf-fg); text-shadow: 0 0 3px var(--pf-bg), 0 0 6px var(--pf-bg); } /* 回应：气泡下方一排玻璃胶囊，自己选的那个高亮主色描边（照设计稿 👍3 ❤️1）。 */ #chat-app .chat-screen .message-reactions { display: flex; max-width: 100%; flex-wrap: wrap; gap: 5px; margin: 5px 6px 0; } #chat-app .chat-screen .message-reaction-pill { min-width: 0; height: 26px; gap: 4px; padding: 0 9px 0 7px; border: 0; border-radius: 13px; color: var(--pf-fg); background: var(--pf-glass2); box-shadow: var(--pf-glass-in), 0 4px 10px -6px rgba(30,44,100,.35); font: 700 13px/26px var(--pf-display); transition: transform .18s var(--pf-bounce), background .16s ease; } #chat-app .chat-screen .message-reaction-pill:hover, #chat-app .chat-screen .message-reaction-pill:focus-visible { border: 0; background: color-mix(in srgb, var(--pf-glass2) 80%, var(--pf-pri-c)); } #chat-app .chat-screen .message-reaction-pill:active { transform: scale(.94); } #chat-app .chat-screen .message-reaction-pill.is-selected { color: var(--pf-on-pri-c); background: var(--pfd-hl); box-shadow: inset 0 0 0 1px var(--pfd-pri-line); } #chat-app .chat-screen .message-reaction-pill strong { min-width: 0; font: inherit; } #chat-app .chat-screen .message-reaction-emoji { font-size: 15px; } #chat-app .chat-screen .message-reaction-pill .reaction-emoji-image { width: 17px; height: 17px; } #chat-app .chat-screen .message-reaction-pill .message-reaction-avatars { display: none; } /* 回复引用：气泡里圆角 13 的小块，左侧 3px 竖线；对方气泡里主色，自己气泡里白色。 */ #chat-app .chat-screen .message-reply-preview { position: relative; display: grid; width: calc(100% + 10px); min-width: 0; gap: 0; margin-block: 1px 6px; margin-inline: -5px; padding-block: 5px; padding-inline: 12px 9px; overflow: hidden; border: 0; border-radius: 13px; color: inherit; background: var(--pf-pri-c); line-height: 1.25; } #chat-app .chat-screen .message-reply-preview::before { position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--pf-pri); content: ""; } #chat-app .chat-screen .message-reply-preview strong { overflow: hidden; color: var(--pf-on-pri-c); font-size: 12.5px; font-weight: 700; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } #chat-app .chat-screen .message-reply-preview span { max-width: 260px; overflow: hidden; font-size: 12.5px; line-height: 16px; opacity: .86; text-overflow: ellipsis; white-space: nowrap; } #chat-app .chat-screen .message-line.mine .message-reply-preview { color: var(--pf-out-fg); background: var(--pfd-out-q); } #chat-app .chat-screen .message-line.mine .message-reply-preview::before { background: #FFFFFF; } #chat-app .chat-screen .message-line.mine .message-reply-preview strong { color: var(--pf-out-fg); } #chat-app .chat-screen .message-bubble:is(.has-image, .has-videos, .has-location) .message-reply-preview { width: calc(100% - 4px); margin: 2px 2px 5px; } #chat-app .chat-screen .message-forwarded { margin-block-end: 3px; color: var(--pf-on-pri-c); font-size: 12.5px; font-weight: 700; } #chat-app .chat-screen .message-line.mine .message-forwarded { color: var(--pf-out-fg); opacity: .92; } #chat-app .chat-screen .message-link-preview { position: relative; margin-block-start: 6px; padding: 6px 10px 6px 12px; overflow: hidden; border: 0; border-radius: 13px; background: var(--pf-pri-c); } #chat-app .chat-screen .message-link-preview::before { position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--pf-pri); content: ""; } #chat-app .chat-screen .message-line.mine .message-link-preview { background: var(--pfd-out-q); } #chat-app .chat-screen .message-line.mine .message-link-preview::before { background: #FFFFFF; } #chat-app .chat-screen .message-link-preview .link-preview-site { color: var(--pf-on-pri-c); font-weight: 700; } #chat-app .chat-screen .message-line.mine .message-link-preview .link-preview-site { color: var(--pf-out-fg); } /* 译文：上面一段（次要色）、细线、下面一段，两段直接显示，不带标签和切换按钮。 */ #chat-app .chat-screen .message-translation { display: block; min-width: min(190px, 50vw); white-space: pre-wrap; } #chat-app .chat-screen .message-translation-original { display: block; color: var(--pf-fg2); } #chat-app .chat-screen .message-line.mine .message-translation-original { color: var(--pf-out-sub); } #chat-app .chat-screen .message-translation-block { display: block; margin: 6px 0 0; padding: 6px 0 0; border-block-start: .5px solid var(--pf-line2); border-radius: 0; color: inherit; background: transparent; } #chat-app .chat-screen .message-line.mine .message-translation-block { border-block-start-color: var(--pfd-out-line); } #chat-app .chat-screen .message-translation-text { display: inline; } #chat-app .chat-screen .message-translation-loading { display: inline-block; min-height: 1.4em; color: var(--pf-on-pri-c); } #chat-app .chat-screen .message-line.mine .message-translation-loading { color: var(--pf-out-fg); } /* ===================================================================== 各类消息 */ /* 图片：气泡留 4px 白边（自己的是渐变边），图片圆角 15；没有说明文字时时间压在图上。 */ #chat-app .chat-screen .message-bubble.has-image { width: min(240px, 64vw); padding: 4px; overflow: visible; } #chat-app .chat-screen .message-bubble.has-image.has-multiple-images { width: min(320px, 74vw); } #chat-app .chat-screen .image-message-grid { gap: 3px; overflow: hidden; border-radius: 15px; } #chat-app .chat-screen .image-message { border-radius: 5px; background: var(--pf-sf2); } #chat-app .chat-screen .image-message-grid.count-1 .image-message { border-radius: 15px; } #chat-app .chat-screen .attachment-caption { padding: 6px 9px 3px; color: inherit; } #chat-app .chat-screen .message-bubble.has-files .attachment-caption { margin-block-start: 6px; padding: 6px 0 0; border-block-start: .5px solid var(--pf-line2); } #chat-app .chat-screen .message-line.mine .message-bubble.has-files .attachment-caption { border-block-start-color: var(--pfd-out-line); } #chat-app .chat-screen .message-bubble.has-videos { width: min(340px, 78vw); padding: 4px; overflow: visible; } #chat-app .chat-screen .message-bubble.has-videos .video-message { border-radius: 15px; } #chat-app .chat-screen .message-bubble.has-videos .attachment-caption { margin: 0; padding: 6px 9px 3px; border: 0; } #chat-app .chat-screen .message-bubble:is(.has-image, .has-videos, .has-video-note, .has-sticker, .has-emoji):not(.has-caption-meta) > .message-time { position: absolute; z-index: 4; inset-block-end: 10px; inset-inline-end: 10px; float: none; height: 20px; margin: 0; padding: 0 7px; border-radius: 10px; color: #FFFFFF; /* 图片 / 视频上的时间角标在滚动的消息里大量出现：静态半透明底，不做实时模糊。 */ background: var(--pfd-media-meta-bg); } #chat-app .chat-screen .message-bubble:is(.has-sticker, .has-emoji):not(.has-caption-meta) > .message-time { inset-block-end: 2px; inset-inline-end: 2px; color: var(--pf-fg2); background: var(--pf-glass2); box-shadow: var(--pf-glass-in), var(--pf-sh1); } #chat-app .chat-screen .message-bubble.has-video-note:not(.has-caption-meta) > .message-time { inset-block-end: 6px; inset-inline-end: 6px; } #chat-app .chat-screen .message-bubble:is(.has-image, .has-videos, .has-video-note):not(.has-caption-meta) .read-status { color: inherit !important; } #chat-app .chat-screen .message-bubble.has-emoji, #chat-app .chat-screen .message-bubble.has-sticker, #chat-app .chat-screen .message-line.mine .message-bubble.has-emoji, #chat-app .chat-screen .message-line.mine .message-bubble.has-sticker, #chat-app .chat-screen .message-bubble.has-video-note, #chat-app .chat-screen .message-line.mine .message-bubble.has-video-note { padding: 0; color: var(--pf-fg); background: transparent; box-shadow: none; } #chat-app .chat-screen .message-bubble.has-video-note .attachment-caption { margin-block-start: 6px; padding: 6px 10px; border-radius: 16px; color: var(--pf-fg); background: var(--pf-in); box-shadow: var(--pf-sh1); } /* 文件：左侧按类型着色的文件图标（折角 + 扩展名），文件名 + 「2.4 MB · 10:41」，右侧主色浅底下载圆钮。 */ #chat-app .chat-screen .message-bubble.has-files { width: min(290px, 78vw); padding: 8px 10px 8px 8px; } #chat-app .chat-screen .file-message-list { gap: 8px; } #chat-app .chat-screen .file-message { display: flex; min-width: min(194px, 52vw); align-items: center; gap: 10px; padding: 2px 0; color: inherit; text-decoration: none; } #chat-app .chat-screen .file-message + .file-message { padding-block-start: 8px; border-block-start: .5px solid var(--pf-line2); } #chat-app .chat-screen .message-line.mine .file-message + .file-message { border-block-start-color: var(--pfd-out-line); } #chat-app .chat-screen .file-message-icon { position: relative; display: grid; width: 42px; height: 46px; flex: 0 0 42px; place-items: end center; padding-block-end: 6px; overflow: hidden; border-radius: 11px; color: var(--pfd-on-file); background: var(--pfd-file-other); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); font: 800 10px/1 var(--pf-display); letter-spacing: .02em; } #chat-app .chat-screen .file-message-icon::before { position: absolute; inset-block-start: 0; inset-inline-end: 0; width: 12px; height: 12px; border-radius: 0 11px 0 6px; background: rgba(255,255,255,.4); content: ""; } #chat-app .chat-screen .file-message-icon.file-kind-sheet { background: var(--pfd-file-sheet); } #chat-app .chat-screen .file-message-icon.file-kind-doc { background: var(--pfd-file-doc); } #chat-app .chat-screen .file-message-icon.file-kind-pdf { background: var(--pfd-file-pdf); } #chat-app .chat-screen .file-message-icon.file-kind-slide { background: var(--pfd-file-slide); } #chat-app .chat-screen .file-message-icon.file-kind-archive { background: var(--pfd-file-archive); } #chat-app .chat-screen .file-message-icon.file-kind-audio { background: var(--pfd-file-audio); } #chat-app .chat-screen .file-message-icon.file-kind-app { background: var(--pfd-file-app); } #chat-app .chat-screen .file-message-copy { display: grid; min-width: 0; flex: 1; gap: 1px; line-height: 1.3; } #chat-app .chat-screen .file-message-copy strong { overflow: hidden; font-size: 14.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } #chat-app .chat-screen .file-message-copy small { display: flex; min-width: 0; align-items: center; color: var(--pf-fg2); font-size: 12px; opacity: 1; white-space: nowrap; } #chat-app .chat-screen .message-line.mine .file-message-copy small { color: var(--pf-out-sub); } #chat-app .chat-screen .file-message-copy small > .message-time { float: none; margin: 0; color: inherit; font: inherit; } #chat-app .chat-screen .file-message-meta-dot { padding-inline: 4px; } #chat-app .chat-screen .file-message-download { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 50%; color: var(--pf-on-pri-c); background: var(--pf-pri-c); } #chat-app .chat-screen .file-message-download svg { width: 16px; height: 16px; stroke-width: 2.3; } #chat-app .chat-screen .message-line.mine .file-message-download { color: var(--pf-out-fg); background: var(--pfd-out-q); } #chat-app .chat-screen .file-message:hover .file-message-download { filter: brightness(.96); } #chat-app .chat-screen .message-bubble.has-files:not(.has-caption-meta) > .message-time { margin-block-start: 4px; } /* 语音：渐变圆形播放键 + 波形（已播放部分主色）+ 时长，时间在右下。 */ #chat-app .chat-screen .message-bubble.has-audio { padding: 8px 13px 8px 9px; } #chat-app .chat-screen .audio-message { min-width: min(212px, 56vw); min-height: 34px; gap: 9px; padding: 2px 46px 2px 0; border: 0; color: inherit; background: transparent; } #chat-app .chat-screen .audio-message > svg { width: 34px; height: 34px; flex: 0 0 34px; padding: 10px 9px 10px 11px; border-radius: 50%; color: #FFFFFF; background: var(--pf-out); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); fill: currentColor; stroke-width: 1.5; } #chat-app .chat-screen .message-line.mine .audio-message > svg { color: var(--pf-pri); background: #FFFFFF; } #chat-app .chat-screen .audio-wave { height: 26px; gap: 2px; } #chat-app .chat-screen .audio-wave i { width: 2.6px; height: 8px; border-radius: 2px; background: var(--pf-fg3); opacity: .55; } #chat-app .chat-screen .message-line.mine .audio-wave i { background: var(--pf-out-fg); } #chat-app .chat-screen .audio-wave i:nth-child(4n+1) { height: 12px; } #chat-app .chat-screen .audio-wave i:nth-child(4n+2) { height: 20px; } #chat-app .chat-screen .audio-wave i:nth-child(4n+3) { height: 24px; } #chat-app .chat-screen .audio-wave i:nth-child(5n) { height: 14px; } #chat-app .chat-screen .audio-wave i:nth-child(7n) { height: 7px; } #chat-app .chat-screen .audio-wave i:nth-child(-n+6) { background: var(--pf-pri); opacity: 1; } #chat-app .chat-screen .message-line.mine .audio-wave i:nth-child(-n+6) { background: var(--pf-out-fg); opacity: 1; } #chat-app .chat-screen .audio-message > strong { min-width: 0; margin-inline-start: 2px; color: var(--pf-fg2); font: 700 12px/14px var(--pf-display); text-align: start; } #chat-app .chat-screen .message-line.mine .audio-message > strong { color: var(--pf-out-fg); } #chat-app .chat-screen .message-bubble.has-audio:not(.has-caption-meta) > .message-time { position: absolute; inset-block-end: 8px; inset-inline-end: 12px; float: none; margin: 0; } #chat-app .chat-screen .audio-caption { margin-block-start: 4px; padding: 4px 3px 0; } /* 投票：玻璃里的单选圆圈 + 主色进度条；自己的气泡里白色。 */ #chat-app .chat-screen .message-bubble.has-poll { width: min(300px, 78vw); padding: 10px 13px 8px; } #chat-app .chat-screen .poll-question { font-size: 15px; font-weight: 700; } #chat-app .chat-screen .poll-type { color: var(--pf-fg2); font-size: 12px; } #chat-app .chat-screen .poll-card.is-mine .poll-type, #chat-app .chat-screen .poll-card.is-mine .poll-footer { color: var(--pf-out-sub); } #chat-app .chat-screen .poll-card:not(.is-mine) .poll-footer { color: var(--pf-fg3); } #chat-app .chat-screen .poll-option { min-height: 40px; padding: 7px 8px; border-radius: 13px; } #chat-app .chat-screen .poll-option:hover:not(:disabled) { background: var(--pfd-hl); } #chat-app .chat-screen .poll-card.is-mine .poll-option:hover:not(:disabled) { background: var(--pfd-out-q); } #chat-app .chat-screen .poll-check { width: 21px; height: 21px; flex-basis: 21px; border-color: var(--pf-pri); color: var(--pf-pri); opacity: .9; } #chat-app .chat-screen .poll-card.is-mine .poll-check { border-color: currentColor; color: inherit; } #chat-app .chat-screen .poll-bar { height: 6px; border-radius: 3px; background: var(--pf-pri-c); } #chat-app .chat-screen .poll-bar i { border-radius: 3px; background: var(--pf-out); } #chat-app .chat-screen .poll-card.is-mine .poll-bar { background: var(--pfd-out-q); } #chat-app .chat-screen .poll-card.is-mine .poll-bar i { background: #FFFFFF; } #chat-app .chat-screen .poll-result.is-correct .poll-bar i { background: var(--pf-min); } #chat-app .chat-screen .poll-result.is-wrong .poll-bar i { background: var(--pf-dan); } #chat-app .chat-screen .poll-percent { font: 800 12.5px/18px var(--pf-display); } #chat-app .chat-screen .poll-mark { background: var(--pf-pri); } #chat-app .chat-screen .poll-link { color: var(--pf-on-pri-c); font-weight: 700; } #chat-app .chat-screen .poll-card.is-mine .poll-link { color: #FFFFFF; } #chat-app .chat-screen .poll-explanation { border-radius: 13px; color: var(--pf-fg); background: var(--pf-pri-c); } #chat-app .chat-screen .poll-card.is-mine .poll-explanation { color: inherit; background: var(--pfd-out-q); } /* 位置、名片、通话记录 */ #chat-app .chat-screen .message-bubble.has-location { width: min(270px, 72vw); padding: 4px; overflow: visible; } #chat-app .chat-screen .location-message, #chat-app .chat-screen .live-location-card { border-radius: 15px; color: var(--pf-fg); background: var(--pf-sf); } #chat-app .chat-screen .location-message-copy span, #chat-app .chat-screen .location-message-copy small { color: var(--pf-fg2); } #chat-app .chat-screen .message-bubble.has-location > .message-time { margin: 3px 8px 3px 10px; } #chat-app .chat-screen .live-ring::before { background: var(--pf-sf2); } #chat-app .chat-screen .message-bubble.has-contact { min-width: min(230px, 64vw); padding: 9px 13px 8px 9px; } #chat-app .chat-screen .contact-message .avatar { width: 42px; height: 42px; flex-basis: 42px; box-shadow: none; } #chat-app .chat-screen .message-bubble.has-call { padding: 9px 13px 8px; } #chat-app .chat-screen .call-history-message svg { width: 32px; height: 32px; flex-basis: 32px; padding: 7px; border-radius: 50%; color: #FFFFFF; background: var(--pf-out); } #chat-app .chat-screen .message-line.mine .call-history-message svg { color: var(--pf-pri); background: #FFFFFF; } /* 机器人内联按钮、多选 */ #chat-app .chat-screen .bot-inline-button { border: 0; border-radius: 14px; color: var(--pf-on-pri-c); background: var(--pf-glass2); box-shadow: var(--pf-glass-in), var(--pf-sh1); } #chat-app .chat-screen .message-select-indicator { border-color: var(--pf-mute); background: var(--pf-sf); box-shadow: var(--pf-sh1); } #chat-app .chat-screen .message-line.is-selected .message-select-indicator { border-color: var(--pf-pri); color: #FFFFFF; background: var(--pf-pri); } #chat-app .chat-screen.is-selecting-messages .message-line.is-selected { background: var(--pfd-hl); } /* ===================================================================== 正在输入、回到底部、@ 跳转、历史加载 */ #chat-app .chat-screen .chat-typing-indicator { position: absolute; z-index: 5; display: flex; max-width: calc(100% - 90px); height: 28px; align-items: center; gap: 7px; inset-block-end: calc(var(--pfd-compose-h, 78px) + 8px); inset-inline-start: max(12px, env(safe-area-inset-left)); padding: 0; overflow: hidden; border-radius: 0; color: var(--pf-fg2); background: transparent; font: 500 12px/28px var(--pf-font); white-space: nowrap; pointer-events: none; } #chat-app .chat-screen.chat-type-group .chat-typing-indicator { inset-inline-start: max(10px, env(safe-area-inset-left)); } #chat-app .chat-screen .chat-typing-indicator[hidden] { display: none; } #chat-app .chat-screen .chat-typing-indicator > .avatar { width: 22px; height: 22px; flex: 0 0 22px; font-size: 10px; box-shadow: none; } #chat-app .chat-screen .chat-typing-indicator > .avatar .presence { display: none; } #chat-app .chat-screen .chat-typing-indicator i { display: flex; height: 28px; flex: none; align-items: center; gap: 4px; padding: 0 10px; border-radius: 14px; background: var(--pf-in); box-shadow: var(--pf-sh1); } #chat-app .chat-screen .chat-typing-indicator i b { width: 6px; height: 6px; border-radius: 50%; background: var(--pf-fg3); animation: pfdTypingDot 1.2s ease-in-out infinite; } #chat-app .chat-screen .chat-typing-indicator i b:nth-child(2) { animation-delay: .15s; } #chat-app .chat-screen .chat-typing-indicator i b:nth-child(3) { animation-delay: .3s; } #chat-app .chat-screen .chat-typing-indicator em { flex: none; color: var(--pf-fg2); font-style: normal; font-weight: 500; } #chat-app .chat-screen .chat-typing-indicator span { overflow: hidden; text-overflow: ellipsis; } @keyframes pfdTypingDot { 0%, 100% { opacity: .4; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } } #chat-app .chat-screen .new-message-jump-button { display: grid; width: 42px; height: 42px; inset-block-end: calc(var(--pfd-compose-h, 78px) + 10px); inset-inline-end: max(14px, env(safe-area-inset-right)); place-items: center; padding: 0; border-radius: 50%; color: var(--pf-fg); } #chat-app .chat-screen .new-message-jump-button:hover { background: var(--pf-glass2); transform: translateY(-1px); } #chat-app .chat-screen .new-message-jump-icon { width: 22px; height: 22px; } #chat-app .chat-screen .new-message-jump-icon svg { width: 22px; height: 22px; stroke-width: 2; transform: none; } #chat-app .chat-screen .new-message-jump-button i, #chat-app .chat-screen .mention-jump-button span { position: absolute; display: grid; min-width: 20px; height: 20px; inset-block-start: -8px; inset-inline-start: 50%; inset-inline-end: auto; place-items: center; margin-inline-start: -10px; padding: 0 5px; border: 0; border-radius: 10px; color: #FFFFFF; background: linear-gradient(160deg, #4AA8FF, #3D6CFF 60%, #5A4BFF); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.08), 0 3px 8px -3px rgba(61,108,255,.7); font: 800 11px/20px var(--pf-display); font-style: normal; text-align: center; } html[data-accent]:not([data-accent="blue"]) #chat-app .chat-screen :is(.new-message-jump-button i, .mention-jump-button span) { background: var(--pf-out); } #chat-app .chat-screen .mention-jump-button { display: grid; width: 42px; min-width: 42px; height: 42px; inset-block-end: calc(var(--pfd-compose-h, 78px) + 10px); inset-inline-end: max(14px, env(safe-area-inset-right)); place-items: center; padding: 0; border-radius: 50%; color: var(--pf-on-pri-c); } #chat-app .chat-screen .mention-jump-button.has-new-messages { inset-block-end: calc(var(--pfd-compose-h, 78px) + 64px); } #chat-app .chat-screen .mention-jump-button strong { font: 800 20px/1 var(--pf-display); } #chat-app .chat-screen .history-loader-spinner { border-color: var(--pf-sf3); border-block-start-color: var(--pf-pri); } #chat-app .chat-screen .load-earlier-button { border-radius: 14px; color: var(--pf-on-pri-c); background: var(--pf-glass2); box-shadow: var(--pf-glass-in), var(--pf-sh1); font-size: 12px; font-weight: 700; } #chat-app .chat-screen .chat-drop-overlay { border-color: var(--pfd-pri-line); border-radius: var(--pf-r-sheet); color: var(--pf-pri); background: color-mix(in srgb, var(--pf-bg) 90%, transparent); } #chat-app .chat-screen .chat-drop-overlay span { border-radius: 50%; background: var(--pf-pri-c); } #chat-app .chat-screen .empty-state p { display: table; margin: 24px auto; padding: 6px 14px; border-radius: 14px; color: var(--pf-fg2); background: var(--pf-glass2); box-shadow: var(--pf-glass-in), var(--pf-sh1); } /* ===================================================================== 输入栏：三段悬浮玻璃 左 46 圆钮「+」（附件）· 中间 46 高玻璃胶囊（输入框 + 右侧表情）· 右 46 圆钮语音，有字时变电光蓝渐变发送钮。 */ #chat-app .chat-screen .chat-compose-wrap { position: absolute; z-index: 6; inset-inline: 0; inset-block-end: 0; display: grid; gap: 8px; overflow: visible; padding-block-start: 6px; border: 0; background: transparent; box-shadow: none; pointer-events: none; } #chat-app .chat-screen .chat-compose-wrap > * { pointer-events: auto; } #chat-app .chat-screen .chat-compose-wrap > [hidden] { display: none; } #chat-app .chat-screen .chat-compose { position: relative; display: flex; min-width: 0; align-items: flex-end; gap: 8px; padding-block: 0 max(14px, env(safe-area-inset-bottom)); padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); border: 0; background: transparent; pointer-events: none; } #chat-app .chat-screen .chat-compose > * { pointer-events: auto; } #chat-app .chat-screen .chat-compose > .composer-attachment-button, #chat-app .chat-screen .chat-compose > .composer-edit-mark { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; padding: 0; border-radius: 50%; color: var(--pf-fg); } #chat-app .chat-screen .chat-compose > .composer-attachment-button svg { width: 23px; height: 23px; stroke-width: 1.9; transform: none; } #chat-app .chat-screen .chat-compose > .composer-attachment-button:hover { color: var(--pf-pri); } #chat-app .chat-screen .chat-compose > .composer-edit-mark { color: var(--pf-pri); } #chat-app .chat-screen .chat-compose > .composer-edit-mark svg { width: 21px; height: 21px; } #chat-app .chat-screen .composer-pill { display: flex; min-width: 0; min-height: 46px; flex: 1 1 auto; align-items: flex-end; gap: 2px; padding: 0 5px 0 17px; border-radius: 23px; color: var(--pf-fg2); } #chat-app .chat-screen .composer-pill .icon-button { display: grid; width: 36px; height: 46px; flex: 0 0 36px; place-items: center; padding: 0; border: 0; border-radius: 18px; color: var(--pf-fg2); background: transparent; } #chat-app .chat-screen .composer-pill .icon-button:hover { color: var(--pf-pri); } #chat-app .chat-screen .composer-pill .icon-button svg { width: 23px; height: 23px; stroke-width: 1.8; } #chat-app .chat-screen .chat-compose .composer-scheduled-button, #chat-app .chat-screen .chat-compose .composer-bot-keyboard-button.is-active { color: var(--pf-pri); } #chat-app .chat-screen .composer-scheduled-count { inset-block-start: 6px; inset-inline-end: 0; color: #FFFFFF; background: var(--pf-pri); font-family: var(--pf-display); } #chat-app .chat-screen .composer-input-stack { min-width: 0; flex: 1 1 auto; gap: 4px; align-self: stretch; padding-block-start: 0; } #chat-app .chat-screen .composer-translation-preview:not([hidden]) { margin: 6px 0 0; } #chat-app .chat-screen .message-input-shell { border-radius: 0; background: transparent; } #chat-app .chat-screen .message-input, #chat-app .chat-screen .chat-compose .message-input { height: 46px; min-height: 46px; max-height: 120px; padding: 13px 2px 13px 0; border: 0; border-radius: 0; color: var(--pf-fg); background: transparent; box-shadow: none; font: 400 15.5px/20px var(--pf-font); } #chat-app .chat-screen .message-input::placeholder { color: var(--pf-fg3); } #chat-app .chat-screen .message-input:focus-visible { outline: 0; } #chat-app .chat-screen .message-input { caret-color: var(--pf-pri); } #chat-app .chat-screen .message-input-emoji-preview { padding: 13px 2px 13px 0; border: 0; font: 400 15.5px/20px var(--pf-font); } #chat-app .chat-screen .chat-compose .message-input:disabled { color: var(--pf-fg3); background: transparent; } #chat-app .chat-screen .composer-pill:focus-within { box-shadow: var(--pf-glass-in), 0 0 0 2px var(--pfd-pri-line), var(--pf-glass-sh); } #chat-app .chat-screen .composer-translation-preview { padding: 6px 10px; border: 0; border-radius: 14px; color: var(--pf-fg); background: var(--pf-pri-c); font-size: 13px; } #chat-app .chat-screen .composer-translation-preview small { color: var(--pf-on-pri-c); font-size: 10.5px; } #chat-app .chat-screen .composer-translation-preview.is-failed { color: var(--pf-on-dan); background: var(--pf-dan-c); } /* 右侧主键：空着是玻璃语音钮，有字是渐变发送钮（向上箭头），编辑时是保存。两个叠在同一个位置做缩放旋转切换。 */ #chat-app .chat-screen .chat-compose > .voice-record-button, #chat-app .chat-screen .chat-compose > .send-button { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; padding: 0; border-radius: 50%; } #chat-app .chat-screen .chat-compose > .voice-record-button { color: var(--pf-fg); } #chat-app .chat-screen .chat-compose > .voice-record-button svg { width: 23px; height: 23px; stroke-width: 1.9; } #chat-app .chat-screen .chat-compose > .send-button { border: 0; color: #FFFFFF; background: var(--pf-out); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 20px -10px color-mix(in srgb, var(--pf-out-m) 90%, transparent); } #chat-app .chat-screen .chat-compose > .send-button svg { width: 22px; height: 22px; stroke-width: 2.6; margin: 0; } #chat-app .chat-screen .chat-compose:not(.is-editing) > .send-button { position: absolute; z-index: 1; inset-block-end: max(14px, env(safe-area-inset-bottom)); inset-inline-end: max(12px, env(safe-area-inset-right)); } #chat-app .chat-screen .chat-compose.has-composer-text > .send-button, #chat-app .chat-screen .chat-compose.is-editing > .send-button { opacity: 1; transform: none; visibility: visible; transition: transform .32s var(--pf-bounce), opacity .16s ease, visibility 0s; } #chat-app .chat-screen .chat-compose:not(.has-composer-text) > .voice-record-button { opacity: 1; transform: none; visibility: visible; transition: transform .32s var(--pf-bounce), opacity .16s ease, visibility 0s; } #chat-app .chat-screen .chat-compose > .send-button:disabled, #chat-app .chat-screen .chat-compose > .voice-record-button:disabled { opacity: .5; } #chat-app .chat-screen .chat-compose:not(.has-composer-text):not(.is-editing) > .send-button { opacity: 0; transform: scale(.6) rotate(-35deg); visibility: hidden; pointer-events: none; transition: transform .16s var(--pf-spring), opacity .16s ease, visibility 0s linear .16s; } #chat-app .chat-screen .chat-compose.has-composer-text > .voice-record-button { opacity: 0; transform: scale(.6) rotate(35deg); visibility: hidden; pointer-events: none; transition: transform .16s var(--pf-spring), opacity .16s ease, visibility 0s linear .16s; } #chat-app .chat-screen .chat-compose > .send-button:active:not(:disabled), #chat-app .chat-screen .chat-compose > .voice-record-button:active:not(:disabled) { transform: scale(.94); } #chat-app .chat-screen .chat-compose > .voice-record-button.is-recording { color: #FFFFFF; background: var(--pf-dan); transform: scale(1.12); animation: pfdRecordingPulse 1.1s ease-in-out infinite; } #chat-app .chat-screen .chat-compose > .voice-record-button.is-cancelling { background: var(--pf-mute); animation: none; transform: scale(.94); } @keyframes pfdRecordingPulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--pf-dan) 18%, transparent); } } #chat-app .chat-screen .chat-compose.is-voice-recording .voice-recording-strip { display: flex; min-height: 46px; align-self: stretch; margin-inline-start: -8px; padding: 0 8px; border: 0; border-radius: 0; color: var(--pf-dan); background: transparent; } #chat-app .chat-screen .chat-compose.is-voice-recording .composer-scheduled-button, #chat-app .chat-screen .chat-compose.is-voice-recording .composer-bot-keyboard-button { display: none; } #chat-app .chat-screen .voice-recording-strip.is-cancelling { border-radius: 18px; color: #FFFFFF; background: var(--pf-dan); } #chat-app .chat-screen .voice-recording-hint { color: var(--pf-fg3); } /* 回复 / 编辑条、发送受限、多选工具条、@ 成员：浮在输入栏上方的玻璃卡片 */ #chat-app .chat-screen .composer-reply { gap: 10px; margin-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); padding: 6px 6px 6px 8px; border-radius: 18px; color: var(--pf-fg); background: var(--pf-glass2); } #chat-app .chat-screen .composer-reply::before { position: absolute; z-index: 1; inset-block: 10px; inset-inline-start: 48px; width: 3px; border-radius: 2px; background: var(--pf-pri); content: ""; } #chat-app .chat-screen .composer-reply > span:nth-child(2) { padding-inline-start: 10px; } #chat-app .chat-screen .composer-reply-mark { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; color: var(--pf-on-pri-c); background: var(--pf-pri-c); } #chat-app .chat-screen .composer-reply strong { color: var(--pf-on-pri-c); font-size: 12.5px; font-weight: 700; } #chat-app .chat-screen .composer-reply small { color: var(--pf-fg2); font-size: 12.5px; } #chat-app .chat-screen .composer-reply .icon-button { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; color: var(--pf-fg2); background: var(--pfd-hl); } #chat-app .chat-screen .composer-edit { border-inline-start: 0; } #chat-app .chat-screen .composer-edit .composer-reply-mark { color: var(--pf-on-lem); background: var(--pf-lem-c); } #chat-app .chat-screen .composer-edit::before { background: var(--pf-lem); } #chat-app .chat-screen .chat-send-disabled { margin: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); padding: 8px 14px; border: 0; border-radius: 16px; color: var(--pf-on-dan); background: color-mix(in srgb, var(--pf-glass2) 70%, var(--pf-dan-c)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--pf-glass-in), var(--pf-glass-sh); font-size: 12.5px; } #chat-app .chat-screen .message-selection-toolbar { position: absolute; z-index: 6; inset-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); inset-block-end: max(14px, env(safe-area-inset-bottom)); min-height: 56px; margin: 0; padding: 4px 8px; border-radius: 28px; color: var(--pf-fg); } #chat-app .chat-screen .message-selection-toolbar > strong { color: var(--pf-fg); font-family: var(--pf-display); font-weight: 700; } #chat-app .chat-screen .message-selection-toolbar .icon-button { width: 42px; height: 42px; border-radius: 50%; color: var(--pf-pri); background: transparent; } #chat-app .chat-screen .message-selection-toolbar .icon-button:hover { background: var(--pfd-hl); } #chat-app .chat-screen .message-selection-toolbar .icon-button.danger { color: var(--pf-dan); } #chat-app .chat-screen .message-selection-toolbar .icon-button.danger:hover { background: var(--pf-dan-c); } #chat-app .chat-screen .message-selection-cancel { color: var(--pf-fg2) !important; } #chat-app .chat-screen .mention-picker { margin: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); padding: 6px; border-radius: 22px; background: var(--pf-glass2); } #chat-app .chat-screen .mention-picker-item { border-radius: 14px; color: var(--pf-fg); } #chat-app .chat-screen .mention-picker-item.is-active, #chat-app .chat-screen .mention-picker-item:hover { background: var(--pfd-hl); } #chat-app .chat-screen .mention-picker-item small { color: var(--pf-fg3); } #chat-app .chat-screen .bot-reply-keyboard { margin: 0 max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); padding: 8px; border: 0; border-radius: 22px; background: var(--pf-glass2); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--pf-glass-in), var(--pf-glass-sh); } #chat-app .chat-screen .bot-reply-button { border: 0; border-radius: 14px; color: var(--pf-fg); background: var(--pf-in); box-shadow: var(--pf-sh1); } #chat-app .chat-screen .chat-compose-wrap:has(.bot-reply-keyboard) .chat-compose, #chat-app .chat-screen .chat-compose-wrap:has(.composer-panel:not([hidden])) .chat-compose { padding-block-end: 0; } /* 表情 / 贴纸 / 附件面板：输入栏下方的玻璃底板（圆角 26） */ #chat-app .chat-screen .composer-panel { margin: 0 max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); padding: 12px; border-radius: 26px; color: var(--pf-fg); background: var(--pf-glass2); } #chat-app .chat-screen .composer-panel .emoji-category-tabs { inset-block-start: -12px; margin: -12px -12px 0; padding: 10px 12px 8px; border: 0; border-radius: 26px 26px 0 0; background: transparent; } #chat-app .chat-screen .composer-panel .emoji-category-tab { width: 40px; height: 40px; flex-basis: 40px; border: 0; border-radius: 20px; background: transparent; box-shadow: none; } #chat-app .chat-screen .composer-panel .emoji-category-tab:hover { background: var(--pfd-hl); } #chat-app .chat-screen .composer-panel .emoji-category-tab.is-active { background: var(--pf-lens); box-shadow: var(--pf-lens-sh); } #chat-app .chat-screen .composer-panel .emoji-grid { gap: 6px; } #chat-app .chat-screen .composer-panel .emoji-grid button, #chat-app .chat-screen .composer-panel .sticker-grid > button { border-radius: 14px; background: transparent; } #chat-app .chat-screen .composer-panel .emoji-grid button:hover, #chat-app .chat-screen .composer-panel .sticker-grid > button:hover { background: var(--pfd-hl); } #chat-app .chat-screen .composer-panel .attachment-grid { gap: 10px; } #chat-app .chat-screen .composer-panel .attachment-grid button { gap: 7px; padding: 12px 6px; border: 0; border-radius: 20px; color: var(--pf-fg2); background: var(--pf-in); box-shadow: var(--pf-sh1); font-size: 12px; font-weight: 600; } #chat-app .chat-screen .composer-panel .attachment-grid button:hover { color: var(--pf-on-pri-c); background: color-mix(in srgb, var(--pf-in) 70%, var(--pf-pri-c)); } #chat-app .chat-screen .composer-panel .attachment-grid svg { width: 44px; height: 44px; padding: 11px; border-radius: 14px; color: #FFFFFF; background: linear-gradient(140deg, #5CD2FF, #3A74FF); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); } #chat-app .chat-screen .composer-panel .attachment-grid [data-attachment-kind="file"] svg { background: linear-gradient(140deg, #74E8B8, #12B57E); } #chat-app .chat-screen .composer-panel .attachment-grid [data-action="location"] svg { background: linear-gradient(140deg, #FFB79C, #FF5F86); } #chat-app .chat-screen .composer-panel .attachment-grid [data-action="poll"] svg { background: linear-gradient(140deg, #FFD27E, #FF8640); } #chat-app .chat-screen .composer-panel .attachment-grid [data-video-note-record] svg { background: linear-gradient(140deg, #F7A9D6, #D9479A); } #chat-app .chat-screen .composer-panel .attachment-grid [data-action="voice-call"] svg, #chat-app .chat-screen .composer-panel .attachment-grid [data-action="video-call"] svg { background: linear-gradient(140deg, #6EE6F7, #0EA2C0); } #chat-app .chat-screen .composer-panel .sticker-store-tabs, #chat-app .chat-screen .composer-panel .gif-panel-search, #chat-app .chat-screen .composer-panel .sticker-store-search { border-radius: 18px; } /* ===================================================================== 长按（手机）/ 右键（电脑）菜单 背景压暗 + 模糊 16，被长按的气泡原位浮起放大 1.03；上方玻璃 tapback 条（6 个表情 + 展开），下方 226 宽 4 组玻璃菜单。 */ #chat-app .message-menu-layer { z-index: 70; } #chat-app .message-menu-layer .message-action-scrim { background: var(--pf-scrim); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); animation: pfdScrimIn .2s ease both; } @keyframes pfdScrimIn { from { opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } } #chat-app .message-menu-layer .message-action-lift { position: absolute; z-index: 2; overflow: visible; border-radius: var(--pf-r-bubble); pointer-events: none; animation: pfdLift .26s var(--pf-spring) both; transform: scale(1.03); transform-origin: 0 60%; } #chat-app .message-menu-layer .message-action-lift.is-mine { transform-origin: 100% 60%; } #chat-app .message-menu-layer .message-action-lift.is-clipped { overflow: hidden; -webkit-mask: linear-gradient(#000 calc(100% - 28px), transparent); mask: linear-gradient(#000 calc(100% - 28px), transparent); } @keyframes pfdLift { from { transform: none; } to { transform: scale(1.03); } } #chat-app .message-menu-layer .message-action-lift .chat-screen { display: block; width: 100%; height: auto; overflow: visible; background: transparent; isolation: auto; } #chat-app .message-menu-layer .message-action-lift .chat-screen::before, #chat-app .message-menu-layer .message-action-lift .chat-screen::after { display: none; } #chat-app .message-menu-layer .message-action-lift .message-line { display: block; margin: 0; padding: 0; } #chat-app .message-menu-layer .message-action-lift .chat-screen.message-action-lift-screen .message-line .message-body { width: 100%; max-width: none; } #chat-app .message-menu-layer .message-action-lift .chat-screen.message-action-lift-screen .message-line .message-bubble { max-width: none; box-shadow: var(--pfd-lift-sh); } #chat-app .message-menu-layer .message-action-lift .message-bubble:is(.has-sticker, .has-emoji, .has-video-note) { box-shadow: none !important; } #chat-app .message-menu-layer .message-action-reactions { position: absolute; z-index: 3; display: flex; max-width: calc(100% - 20px); height: 50px; align-items: center; gap: 1px; padding: 0 5px; border-radius: 25px; color: var(--pf-fg); transform-origin: 0 100%; animation: pfdPopIn .26s var(--pf-bounce) both; } #chat-app .message-menu-layer .message-action-reactions.opens-left { transform-origin: 100% 100%; } #chat-app .message-menu-layer .message-action-reactions-scroll { gap: 1px; } #chat-app .message-menu-layer .message-action-reactions button { width: 39px; height: 40px; flex: 0 0 39px; border-radius: 20px; font-size: 24px; animation: pfdPopIn .26s var(--pf-bounce) both; } #chat-app .message-menu-layer .message-action-reactions-scroll button:nth-child(2) { animation-delay: .02s; } #chat-app .message-menu-layer .message-action-reactions-scroll button:nth-child(3) { animation-delay: .04s; } #chat-app .message-menu-layer .message-action-reactions-scroll button:nth-child(4) { animation-delay: .06s; } #chat-app .message-menu-layer .message-action-reactions-scroll button:nth-child(5) { animation-delay: .08s; } #chat-app .message-menu-layer .message-action-reactions-scroll button:nth-child(6) { animation-delay: .1s; } #chat-app .message-menu-layer .message-action-reactions button .reaction-emoji-image { width: 28px; height: 28px; } #chat-app .message-menu-layer .message-action-reactions button:hover, #chat-app .message-menu-layer .message-action-reactions button:focus-visible { background: var(--pfd-hl); transform: scale(1.12); outline: 0; } #chat-app .message-menu-layer .message-action-reactions button.is-selected { background: var(--pfd-hl); box-shadow: inset 0 0 0 1px var(--pfd-pri-line); } #chat-app .message-menu-layer .message-action-reactions .message-action-reactions-more { width: 34px; height: 34px; flex: 0 0 34px; margin-inline-start: 3px; border-radius: 50%; color: var(--pf-fg2); background: var(--pf-glass2); } #chat-app .message-menu-layer .message-action-reactions-more svg { width: 18px; height: 18px; stroke-width: 2.4; } #chat-app .message-menu-layer .message-action-menu { z-index: 3; display: flex; width: 226px; max-width: calc(100% - 20px); flex-direction: column; gap: 0; padding: 0; overflow: hidden; border-radius: 24px; color: var(--pf-fg); background: var(--pf-glass2); transform-origin: 0 0; animation: pfdPopIn .2s var(--pf-spring) both; } #chat-app .message-menu-layer .message-action-menu.opens-left { transform-origin: 100% 0; } @keyframes pfdPopIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } } #chat-app .message-menu-layer .message-action-group { display: grid; padding: 0; border-radius: 0; background: transparent; box-shadow: none; } #chat-app .message-menu-layer .message-action-group + .message-action-group { border-block-start: 7px solid var(--pfd-menu-sep); } #chat-app .message-menu-layer .message-action-item { display: flex; min-height: 40px; align-items: center; gap: 12px; padding: 0 16px; border: 0; border-radius: 0; color: var(--pf-fg); background: transparent; font: 500 15.5px/1.2 var(--pf-font); text-align: start; transition: background .14s ease; } #chat-app .message-menu-layer .message-action-item + .message-action-item { border-block-start: .5px solid var(--pf-line); } #chat-app .message-menu-layer .message-action-item svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--pf-fg); stroke-width: 1.8; } #chat-app .message-menu-layer .message-action-item:hover, #chat-app .message-menu-layer .message-action-item:focus-visible { color: var(--pf-fg); background: var(--pfd-hl); outline: 0; } #chat-app .message-menu-layer .message-action-item.danger, #chat-app .message-menu-layer .message-action-item.danger svg { color: var(--pf-dan); } #chat-app .message-menu-layer .message-action-item.danger:hover, #chat-app .message-menu-layer .message-action-item.danger:focus-visible { color: var(--pf-dan); background: var(--pf-dan-c); } #chat-app .message-menu-layer .message-action-menu.is-reaction-picker { width: min(316px, calc(100% - 20px)); padding: 6px; border-radius: 24px; } #chat-app .message-menu-layer .message-reaction-picker button { border-radius: 14px; } #chat-app .message-menu-layer .message-reaction-picker button:hover, #chat-app .message-menu-layer .message-reaction-picker button:focus-visible { background: var(--pfd-hl); } #chat-app .message-menu-layer .message-reaction-picker button.is-selected { background: var(--pfd-hl); box-shadow: inset 0 0 0 1px var(--pfd-pri-line); } /* 发送钮长按 / 右键的「静默发送 / 定时发送」小菜单：同样的玻璃卡片 */ html body .send-options-layer .send-options-menu { overflow: hidden; padding: 0; border: 0; border-radius: 22px; color: var(--pf-fg); background: var(--pf-glass2); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); box-shadow: var(--pf-glass-in), var(--pf-glass-sh); } html body .send-options-layer .send-options-item { min-height: 44px; border: 0; border-radius: 0; color: var(--pf-fg); font-size: 15px; } html body .send-options-layer .send-options-item + .send-options-item { border-block-start: .5px solid var(--pf-line); } html body .send-options-layer .send-options-item:hover, html body .send-options-layer .send-options-item:focus-visible { color: var(--pf-fg); background: var(--pfd-hl); } html body .send-options-layer .send-options-item svg { color: var(--pf-fg); } /* ===================================================================== 转发弹窗（选会话）：玻璃搜索框、纯黑选中胶囊、52 头像行 */ #modal .conversation-picker { gap: 10px; } #modal .conversation-picker-search { height: 44px; padding: 0 14px; border: 0; border-radius: 22px; color: var(--pf-fg); background: var(--pf-glass2); box-shadow: var(--pf-glass-in), inset 0 0 0 .5px var(--pf-line2); } #modal .conversation-picker-search:focus-within { box-shadow: var(--pf-glass-in), 0 0 0 2px var(--pfd-pri-line); } #modal .conversation-picker-search > svg { color: var(--pf-fg3); } #modal .conversation-picker-search input { color: var(--pf-fg); } #modal .conversation-picker-search input:focus-visible { outline: 0; } #modal .conversation-picker-search input::placeholder { color: var(--pf-fg3); } #modal .conversation-picker-multi { height: 34px; padding: 0 14px; border: 0; border-radius: 17px; color: var(--pf-fg); background: var(--pf-glass2); box-shadow: var(--pf-glass-in), inset 0 0 0 .5px var(--pf-line2); font-weight: 700; } #modal .conversation-picker-tabs .chat-folder-tab { min-height: 32px; padding: 5px 14px; border: 0; border-radius: 16px; color: var(--pf-fg); background: var(--pf-glass2); box-shadow: var(--pf-glass-in), inset 0 0 0 .5px var(--pf-line2); font-weight: 600; } #modal .conversation-picker-tabs .chat-folder-tab.is-active { color: var(--pf-chip-on-fg); background: var(--pf-chip-on); box-shadow: none; font-weight: 700; } #modal .conversation-picker-list { gap: 0; } #modal .conversation-picker-section { margin: 10px 8px 4px; color: var(--pf-fg2); font-size: 12px; font-weight: 700; } #modal .conversation-picker .forward-target { min-height: 68px; gap: 12px; padding: 8px 10px; border: 0; border-radius: 18px; color: var(--pf-fg); background: transparent; } #modal .conversation-picker .forward-target:hover, #modal .conversation-picker .forward-target:focus-visible { background: var(--pfd-hl); } #modal .conversation-picker .forward-target.is-highlighted, #modal .conversation-picker .forward-target.is-selected { background: var(--pfd-hl); } #modal .conversation-picker .forward-target .avatar { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -6px 12px -6px rgba(0,0,0,.18); font-size: 19px; } #modal .conversation-picker .forward-target .group-avatar { border-radius: 50%; } #modal .conversation-picker .forward-target strong { font-size: 16px; font-weight: 700; } #modal .conversation-picker .forward-target small { color: var(--pf-fg2); font-size: 13px; } #modal .conversation-picker-check { width: 24px; height: 24px; flex-basis: 24px; border: 2px solid var(--pf-mute); } #modal .conversation-picker-check.is-checked { border-color: transparent; color: #FFFFFF; background: var(--pf-out); } #modal .conversation-picker-bar { padding-top: 10px; border-top: 0; } #modal .conversation-picker-count { color: var(--pf-fg2); font-weight: 700; } #modal .conversation-picker-bar .primary-button { min-height: 46px; border-radius: 23px; color: #FFFFFF; background: var(--pf-out); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 20px -10px color-mix(in srgb, var(--pf-out-m) 90%, transparent); } @media (prefers-reduced-motion: reduce) { #chat-app .chat-screen .chat-compose > .send-button, #chat-app .chat-screen .chat-compose > .voice-record-button, #chat-app .message-menu-layer .message-action-scrim, #chat-app .message-menu-layer .message-action-lift, #chat-app .message-menu-layer .message-action-reactions, #chat-app .message-menu-layer .message-action-reactions button, #chat-app .message-menu-layer .message-action-menu, #chat-app .chat-screen .chat-typing-indicator i b { animation: none; transition: none; } } /* 系统「降低透明度」：玻璃件改实色（令牌已换成 96% 不透明），去掉模糊。 */ @media (prefers-reduced-transparency: reduce) { #chat-app .main-view.is-chat .header-start, #chat-app .main-view.is-chat .header-title-wrap, #chat-app .main-view.is-chat .header-actions, #chat-app .chat-screen .chat-top-stack > *, #chat-app .chat-screen .chat-compose > *, #chat-app .chat-screen .composer-pill, #chat-app .chat-screen .messages-layer::before, #chat-app .message-menu-layer .message-action-scrim, #chat-app .message-menu-layer .message-action-reactions, #chat-app .message-menu-layer .message-action-menu { -webkit-backdrop-filter: none; backdrop-filter: none; } }