:root { color-scheme: light only; --primary: #07c160; --bg-grey: #f2f2f2; --border: #e5e5e5; --bubble-right: #ffb6c1; --bubble-left: #ffffff; --red: #fa5151; --pink: #ff758c; --pink-bg: #ffeef1; --link: #576b95; --text-main: #111; --text-sub: #777; --text-desktop: #262626; --font-size-main: 16px; --font-size-sub: 14px; --radius-box: 12px; --radius-btn: 6px; --bubble-size: min(200px, calc(100vw - 120px)); --bubble-padding: 5px; --bubble-spacing: 1.5; --bubble-radius: 20px; --bubble-border: none; --bubble-border-me: none; --bubble-border-other: none; --bubble-shadow: 0 1px 4px rgba(0,0,0,0.07); --bubble-font-size: 12px; --bubble-gap: 0px; --avatar-size: 40px; --avatar-radius: 8px; --list-avatar-size: 34px; --list-avatar-radius: 8px; --app-icon-size: 36px; --app-name-size: 11px; --dock-icon-size: 44px; --dock-name-size: 11px; --p1-photo-width: 170px; /* [NEW-第一页app+图片行高度] 用户可在"美化app布局"里调整，默认180px */ --p1-apps-height: 180px; } /* ╔══════════════════════════════════════════════════════════════════╗ ║ 🎨 全局主题自定义指南 / THEME GUIDE ║ ╚══════════════════════════════════════════════════════════════════╝ ═══ 1. 核心颜色变量 (Core Color Variables) ═══ 修改 :root 中的变量即可全局生效： --primary: #07c160 → 主色调（微信绿），影响按钮、开关、进度条、标签高亮 --bg-grey: #f2f2f2 → 通用灰色背景 --border: #e5e5e5 → 边框颜色 --bubble-right: #95ec69 → 自己发送的聊天气泡背景 --bubble-left: #fff → 对方聊天气泡背景 --red: #fa5151 → 警告/删除/错误色 --pink: #ff758c → 线下模式/情侣模块强调色 --pink-bg: #ffeef1 → 粉色浅背景 --link: #576b95 → 链接/引用文字色 --text-main: #111 → 主文字颜色 --text-sub: #777 → 次要文字颜色 --text-desktop: #262626 → 桌面页文字色 --font-size-main: 16px → 主字号 --font-size-sub: 14px → 次要字号 --radius-box: 12px → 卡片圆角 --radius-btn: 6px → 按钮圆角 示例 — 切换为暗色主题： :root { --primary: #1aad19; --bg-grey: #1a1a1a; --border: #333; --bubble-right: #2b5e2b; --bubble-left: #2a2a2a; --text-main: #e0e0e0; --text-sub: #999; --text-desktop: #ddd; } ═══ 2. 聊天界面顶部导航栏 (Chat Top Nav Bar) ═══ 选择器: #layer-chat > .nav-bar → 聊天界面顶部栏（推荐） 选择器: .nav-bar → 所有页面顶部栏 可修改属性: background, border-bottom, box-shadow, .nav-title(color/font-size/font-weight), .nav-icon(color) ▶ 预置主题代码在本文件末尾 "聊天顶部栏 & 输入栏自定义" 区域，取消注释即可使用。 ═══ 3. 聊天输入栏 & 底部工具栏 (Chat Input Bar & Bottom Toolbar) ═══ 选择器: #layer-chat .input-bar → 输入栏整体背景/边框 选择器: .input-field → 文字输入框本身 选择器: .btn-act → 语音/表情/更多图标 选择器: .btn-send → 发送按钮图标 选择器: .btn-gen → AI生成按钮图标 选择器: .btn-thought → 心声按钮图标 选择器: .toolbar → 底部工具栏整行（相机/图片/红包等） 选择器: .toolbar i → 底部工具栏每个图标（改颜色/大小） ▶ 预置主题代码在本文件末尾 "聊天顶部栏 & 输入栏自定义" 区域，取消注释即可使用。 ═══ 4. 聊天气泡 (Chat Bubbles) ═══ 选择器: .bubble / .msg-row.me .bubble - --bubble-left → 对方气泡背景 - --bubble-right → 自己气泡背景 - --bubble-size → 气泡最大宽度 - --bubble-padding → 气泡内边距 - --bubble-spacing → 行高 - --bubble-radius: 20px → 气泡圆角（支持CSS变量修改） - --bubble-border: none → 气泡边框（如 "2px solid #ff69b4"） - --bubble-border-me: none → 自己气泡边框（覆盖--bubble-border） - --bubble-border-other: none → 对方气泡边框（覆盖--bubble-border） - --bubble-shadow → 气泡阴影 示例 — 给气泡加粉色边框和圆角贴图： :root { --bubble-border: 2px solid #ffb6c1; --bubble-border-me: 2px solid #ff69b4; --bubble-radius: 16px; } ⚠️ 气泡已设置 overflow:visible，贴图不会被裁切。 ═══ 5. 线下模式界面 (Offline Mode) ═══ 选择器: .offline-fixed-header - background: linear-gradient(135deg, #ffeef1, #fff0f5) → 顶部渐变背景 - .offline-nav-area { color: #ff758c } → 导航按钮颜色 - .offline-heart-rate { color: #ff758c } → 心率文字色 选择器: .offline-input-bar - background: rgba(255,255,255,0.9) → 底部输入栏背景 - input { border, border-radius } → 输入框样式 选择器: .offline-msg-box - background: #fff → 消息卡片背景 - border-radius: 16px → 卡片圆角 - .offline-msg-header { background } → 消息头部背景 - .offline-msg-body { color, font-size, line-height } → 正文样式 ═══ 6. 论坛私信聊天 (Forum DM Chat) ═══ 选择器: .forum-dm-input-bar - background: #f7f7f7 → 输入栏背景 - input { border-radius: 18px } → 输入框圆角 - button { background: var(--primary) } → 发送按钮背景 选择器: .forum-dm-bubble - .forum-dm-bubble.me { background: var(--primary) } → 自己消息背景 - .forum-dm-bubble.other { background: #fff } → 对方消息背景 - border-radius: 16px → 气泡圆角 ═══ 7. 桌面与应用图标 (Desktop & App Icons) ═══ 选择器: .app-icon - width/height: 60px → 图标尺寸 - border-radius: 14px → 图标圆角 - box-shadow → 图标阴影 选择器: .app-name - font-size: 12px → 应用名字号 - color: var(--text-desktop) → 应用名颜色 选择器: .dock-icon - width/height: 50px → 底部导航栏图标尺寸 - border-radius: 12px → 导航栏图标圆角 选择器: .bottom-nav - background: rgba(255,255,255,0.45) → 底部胶囊导航背景 - backdrop-filter: blur(15px) → 毛玻璃效果 - border-radius: 35px → 胶囊圆角 ═══ 8. 通用按钮与表单 (Buttons & Forms) ═══ - .full-btn { background: var(--primary) } → 全宽按钮 - select { background, border, border-radius } → 下拉选择框 - .switch / input:checked + .slider { background: var(--primary) } → 开关 ═══ 9. Toast 提示 (Toast Notifications) ═══ 选择器: #toast - background: rgba(0,0,0,0.75) → 默认背景 - #toast.success { background: var(--primary) } → 成功提示 - #toast.error { background: var(--red) } → 错误提示 ═══ 快速自定义示例 ═══ 在 styles.css 末尾添加覆盖规则即可，无需修改原有代码： /* 自定义：将导航栏改为白色 — 支持CSS变量自定义 */ .nav-bar { background: var(--chat-nav-bg, #fff); border-bottom-color: #eee; } /* 自定义：将气泡改为蓝色系 */ :root { --bubble-right: #95d5f5; } .msg-row.me .bubble { border-color: #6bc0e0; } /* 自定义：线下模式改为紫色系 */ .offline-fixed-header { background: linear-gradient(135deg, #f0e6ff, #e8d5ff); } .offline-nav-area { color: #9b59b6; } ══════════════════════════════════════════════════════════════════ */ /* ====== PERFORMANCE OPTIMIZATIONS ====== */ /* 1. Reduce backdrop-filter cost: promote blurred elements to own layer */ .bottom-nav, .user-info-card, .couple-module-card, .offline-input-bar, .cp-dock, .dating-card, .dating-settings-overlay, #listen-player-modal, #listen-float-ball, #listen-playlist-drawer, #layer-voice-call, #layer-video-call, .vc-btn, .vidcall-btn, .vc-text-input-area, .st-time-bar, .st-input-bar, .status-nav-bar .nav-icon, .status-nav-btn, .status-mood-bar, .status-vital-card, .status-bubble, .status-detail-panel { will-change: transform; contain: layout style; } /* 2. Contain layout on heavy scroll containers */ .scroll-y, #moments-feed, #contact-list, .couple-modules-scroll, .offline-scroll-container, .st-scene-container, .dating-scroll, .secret-page, .status-scroll-area, .ff-body2, .gacha-body, .memorial-body, #chat-history { contain: content; } /* 2b. [OPT-聊天性能] 聊天容器GPU加速 + 消息行布局隔离 */ #chat-history { will-change: scroll-position; -webkit-overflow-scrolling: touch; } .msg-row { contain: layout style; } /* 3. Pause off-screen animations: layers not visible get paused */ .layer:not(.show) *, .page:not(.active) *, .forum-tab:not(.active) *, .study-tab:not(.active) *, .couple-subpage:not(.show) * { animation-play-state: paused !important; } /* [FIX-wx-tab穿透生成/心声-2026-06-06-根治v2] 未显示的layer内所有元素强制禁止接收点击。 根因：用户自定义美化CSS常把 #chat-input-bar/.input-bar 设为 position:fixed， 使其脱离 .layer 容器的 translateX/visibility 隐藏控制，永久悬浮在视口底部。 聊天关闭后(layer-chat无.show)，输入栏的"生成/心声"按钮(z-index:5001)仍浮在 微信主界面悬浮tab栏(wx-tab-bar, z-index:1001)之上，点tab栏就穿透触发聊天按钮。 pointer-events与z-index无关：元素本身为none就绝不接收点击。 用 html body 前缀提高特异性，确保压过 head 末尾注入的自定义美化CSS。 */ html body .layer:not(.show), html body .layer:not(.show) *, html body #layer-chat:not(.show) #chat-input-bar, html body #layer-chat:not(.show) #chat-input-bar * { pointer-events: none !important; } /* 兜底：未显示的聊天layer，强制把输入栏移出可视区并隐藏， 即使自定义CSS用 position:fixed 也无法浮在微信主界面上接收点击。 */ html body #layer-chat:not(.show) #chat-input-bar, html body #layer-chat:not(.show) .input-bar { visibility: hidden !important; opacity: 0 !important; } /* 4. Respect user preference for reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* 5. GPU-hint for frequently animated elements */ .gacha-capsule-machine, #listen-vinyl, .p2-album-disc, .vc-avatar-pulse, .offline-heart-rate i, .dating-hero-icon, .ach-float-btn, .status-bubble { transform: translateZ(0); } * { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } input, textarea, select, [contenteditable="true"] { user-select: text; -webkit-user-select: text; touch-action: auto; -webkit-touch-callout: default; } .modal-mask input, .modal-mask textarea, .modal-mask select { user-select: text !important; -webkit-user-select: text !important; pointer-events: auto !important; touch-action: auto !important; -webkit-appearance: none; } /* [FIX-iOS粘贴] 弹窗/设置面板内的输入框恢复 iOS 长按 callout（复制/粘贴菜单），并放开文本选择 */ .modal-mask input, .modal-mask textarea, .settings-sheet input, .settings-sheet textarea, .settings-sheet-mask input, .settings-sheet-mask textarea, .ff-modal-wrap input, .ff-modal-wrap textarea { -webkit-touch-callout: default !important; -webkit-user-select: text !important; user-select: text !important; } /* [FIX-iOS粘贴] 粘贴按钮统一样式 */ .paste-inline-btn { display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border:1px solid #d0d0d0; background:#f7f7f7; color:#555; border-radius:8px; font-size:12px; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; } .paste-inline-btn:active { background:#ececec; } /* [FIX-长按菜单v2] 强制禁止聊天气泡的文本选择和系统长按菜单，确保自定义长按菜单优先 */ /* [FIX-长消息滑不动v2] 添加touch-action:pan-y允许气泡区域内的垂直滚动穿透 */ .bubble, [class*="bubble-"], .fd-gift-bubble { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; touch-action: pan-y !important; } .modal-mask input[type="checkbox"] { -webkit-appearance: checkbox !important; appearance: checkbox !important; width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary, #07c160); } /* iOS/Android/HarmonyOS Viewport Fixes */ html { width: 100%; /* [FIX-旧版iOS白条] 使用100%作为基础高度，兼容所有iOS版本 */ height: 100%; overflow: hidden; position: fixed; color-scheme: light only; /* iOS全屏适配 */ -webkit-text-size-adjust: 100%; /* [FIX-iOS底部白条] 设置html背景色，防止viewport边缘露出浏览器白色canvas */ background-color: #ededed; } body { background: #ededed; width: 100%; /* [JS适配] 高度由device-adapter.js动态设置 */ height: var(--app-height, 100vh); position: fixed; overflow: hidden; margin: 0; padding: 0; top: 0; left: 0; display: flex; justify-content: center; align-items: flex-start; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif; -webkit-text-size-adjust: 100%; overscroll-behavior: none; -webkit-overflow-scrolling: touch; touch-action: manipulation; } #device { width: 100%; /* [FIX-上传挤压v13] min-width防止GPU合成层bug导致的宽度坍缩 */ min-width: 100vw !important; /* [JS适配] 高度由device-adapter.js动态设置 */ height: var(--app-height, 100vh); background: #ededed; position: relative; overflow: hidden; border: none; border-radius: 0; box-shadow: none; max-width: 100%; max-height: none; } .hidden { display: none !important; } /* Toast */ #toast { position: fixed; top: 50px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.75); color: #fff; padding: 12px 22px; border-radius: 8px; font-size: 14px; font-weight: 500; z-index: 10000; text-align: center; opacity: 0; transition: top 0.4s ease-out, opacity 0.4s ease-out; display: block; pointer-events: none; max-width: 80%; } #toast.show { top: 70px; opacity: 1; } #toast.success { background: var(--primary); } #toast.error { background: var(--red); } /* Nav & Containers */ .page { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #fff; display: none; flex-direction: column; padding-top: 0; } .page.active { display: flex !important; } /* Layers (Apps) - [OPT-GPU加速] 使用transform替代left做滑入动画，大幅提升流畅度 */ /* [JS适配] 高度由device-adapter.js动态设置 */ /* transform:translateX(100%) 将layer移到屏幕右侧外，.show时translateX(0)滑入 */ /* [FIX-iOS层叠] 增加opacity:0作为隐藏的双重保险，防止iOS Safari上多个同z-index的layer渲染层叠混乱 */ /* [FIX-网页版layer透出-2026-07-10] 加 min-height:100% 确保layer始终覆盖其父容器 #device 的全部高度。 根因：--app-height 由 device-adapter.js 在 init 时设为 window.innerHeight，但网页版（非APK） 手机浏览器地址栏收起后实际视口变高，而 --app-height 可能未及时同步更新，导致 layer 比 #device 矮， 底部露出主界面（白色+主内容透出）。APK 通过 apk-statusbar.css 的 min-height:100% 避免了此问题。 此修复让 layer 至少和 #device 一样高，彻底消除透出。 */ .layer { position: absolute; top: 0; left: 0; width: 100%; height: var(--app-height, 100vh); min-height: 100%; background: #efeff4; transform: translateX(100%); transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.2s, opacity 0s 0.2s; z-index: 5000; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: hidden; pointer-events: none; visibility: hidden; opacity: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; contain: layout style; } /* [FIX-白屏v3] 加!important防止自定义CSS覆盖layer可见性 */ .layer.show { transform: translateX(0) !important; pointer-events: auto !important; visibility: visible !important; opacity: 1 !important; display: flex !important; flex-direction: column !important; transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0s, opacity 0s 0s; will-change: transform; content-visibility: visible !important; } /* [FIX-返回残影] 关闭事务的确定状态，覆盖回前台修复和用户主题留下的高优先级样式。 */ .layer.yan-layer-closing:not(.show) { transform: translate3d(100%, 0, 0) !important; pointer-events: none !important; visibility: visible !important; opacity: 1 !important; content-visibility: visible !important; transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1) !important; will-change: transform; } /* [FIX-iOS Chrome偏移] 当layer处于show状态且键盘未激活时，强制确保正确定位 */ html:not(.keyboard-active) .layer.show { position: absolute; top: 0; left: 0; width: 100%; } /* [FIX-悬浮底栏白色] 让聊天layer背景与chat-history一致，用户做悬浮底栏时底部不会露出白色/灰色 */ #layer-chat { background: var(--chat-bg-color, #ededed); } /* [FIX-聊天设置打字跳转] 聊天设置layer在layer-chat之上，防止键盘弹出时被layer-chat覆盖 */ #layer-chat-settings.show { z-index: 5100; } /* [FIX-键盘层叠] 从聊天界面打开的子layer需要更高z-index，防止键盘弹出时被layer-chat覆盖 */ #layer-memory-system.show { z-index: 5100; } #layer-fooddelivery.show { z-index: 5100; } #layer-contact-profile.show { z-index: 5100; } #layer-offline-mode.show { z-index: 5100; } #layer-online-mode.show { z-index: 5100; } /* [FIX-直播弹幕键盘跳转] 直播间发弹幕时键盘弹出，layer-live-room 与底层 layer 同为 5000， 在部分安卓 WebView 上会被下层界面（直播广场/聊天）覆盖，表现为"键盘一弹就跳转、放下键盘恢复"。 抬高到 5100，确保带输入框的直播间始终盖在下层之上。 */ #layer-live-room.show { z-index: 5100; } /* Nav Bar - [JS适配] padding-top由device-adapter.js动态设置 */ .nav-bar { height: 44px; background: #ededed; display: flex; align-items: center; justify-content: space-between; padding: 0px 15px 0 15px; padding-top: 0px; border-bottom: 1px solid #d1d1d1; font-size: 17px; position: relative; z-index: 100; flex-shrink: 0; margin-top: 0; } /* 朋友圈导航栏：默认透明状态，防止exitApp/switchTab清除inline样式后露出白条 */ /* [FIX-朋友圈白条] 使用更高优先级选择器确保透明，覆盖所有可能的缓存/inline样式 */ #tab-moments > .nav-bar, #tab-moments .nav-bar { background: transparent !important; border: none !important; border-bottom: none !important; border-top: none !important; box-shadow: none !important; position: absolute; top: 0; width: 100%; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); margin-top: 0; z-index: 200; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #tab-moments > .nav-bar .nav-icon, #tab-moments .nav-bar .nav-icon { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.5); } #tab-moments > .nav-bar .nav-title, #tab-moments .nav-bar .nav-title { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.5); } /* 朋友圈滚动后切换为白底深色 */ #tab-moments.moments-scrolled > .nav-bar, #tab-moments.moments-scrolled .nav-bar { background: #fff !important; color: #000 !important; text-shadow: none !important; border-bottom: 1px solid #d1d1d1 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #tab-moments.moments-scrolled > .nav-bar .nav-icon, #tab-moments.moments-scrolled .nav-bar .nav-icon { color: #000 !important; text-shadow: none !important; } #tab-moments.moments-scrolled > .nav-bar .nav-title, #tab-moments.moments-scrolled .nav-bar .nav-title { color: #000 !important; text-shadow: none !important; } .nav-title { font-weight: 600; font-size: 17px; color: var(--text-main); position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 75%; text-align: center; pointer-events: none; } /* [FIX-iOS私聊标题偏右] 确保flex column容器宽度收缩到内容宽度，translateX(-50%)才能正确居中 */ #chat-title { width: -webkit-fit-content; width: fit-content; max-width: 70%; } /* [FIX-美化名字消失/歪位 2026-07-11] 根因：0618版聊天导航栏新增了 .nav-name/.nav-status 元素（openChat时JS填入联系人名字， 默认 left:-9999px 藏在屏幕外），同时主题CSS对 .nav-title 做了"让步"（去掉color/font-size 的!important）。老美化模板里通常有 `#layer-chat .nav-title{font-size:0;color:transparent}` 来隐藏默认标题——在0519这句被主题!important压住无害，但在0618生效后标题被隐藏， 名字改由新增的 .nav-name 显示；老模板要么没写 .nav-name 规则(→名字停在-9999px消失)， 要么写了 `.nav-name{left:55px}`(→名字跑到左边不居中)。 修复(方案A)：仅当用户有自定义全局CSS时，用3个ID的高特异性选择器([3,2,2]>用户的[1,1,0]) 强制恢复 #chat-title 居中显示、并把新增的 .nav-name/.nav-status 拉回屏幕外隐藏， 恢复0519的"标题居中显示名字"效果。不影响没加自定义CSS的普通主题用户。 注意：必须写在 styles-part1.css（首屏同步加载），styles.css 未被 index.html 引用。 */ html body.has-custom-global-css #layer-chat > .nav-bar#chat-nav-bar > #chat-title { position: absolute !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; font-size: var(--nav-font-size, 17px) !important; color: var(--text-main, #1a1a1a) !important; opacity: 1 !important; visibility: visible !important; max-width: 60% !important; z-index: 2 !important; } html body.has-custom-global-css #layer-chat > .nav-bar#chat-nav-bar > #chat-title > #chat-title-name { font-size: var(--nav-font-size, 17px) !important; color: var(--text-main, #1a1a1a) !important; opacity: 1 !important; visibility: visible !important; } html body.has-custom-global-css #layer-chat > .nav-bar#chat-nav-bar > #chat-nav-name, html body.has-custom-global-css #layer-chat > .nav-bar#chat-nav-bar > #chat-nav-status { left: -9999px !important; right: auto !important; opacity: 0 !important; pointer-events: none !important; } .nav-icon { font-size: 20px; padding: 10px; cursor: pointer; color: var(--text-main); z-index: 2; min-width: 44px; min-height: 44px; text-align: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .nav-icon:active { opacity: 0.6; transition: opacity 0.05s; } .scroll-y { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; -webkit-overflow-scrolling: touch; } /* Desktop */ /* [改版-韩系灰调v2] 桌面默认背景：很浅很淡的冷调灰，灰蒙蒙但通透（韩系） */ #layer-desktop { background-color: #f1f1f4; background-image: linear-gradient(180deg, #f6f6f8 0%, #eeeef1 55%, #e9e9ee 100%); background-size: cover; background-position: center; } /* [FIX-背景穿透] 确保所有桌面中间层容器背景透明，让#layer-desktop的背景图在两页都能显示 */ #desktop-swipe-container { width: 100%; height: 100%; overflow: hidden; position: relative; background: transparent !important; touch-action: pan-y; } #desktop-swipe-wrapper { display: flex; width: 300%; height: 100%; transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1); will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: transparent !important; } .desktop-page { width: 33.333%; height: 100%; flex-shrink: 0; overflow: hidden; background: transparent !important; } #desktop-page2-scroll, #desktop-page3-scroll { background: transparent !important; } /* Disable upward overscroll on main desktop pages */ #desktop, #desktop-page2-scroll, #desktop-page3-scroll { overscroll-behavior-y: none; } /* [FIX-桌面第一页禁止滚动] 第一页内容应固定不可滚动，scroll-y类的overflow-y:auto在此处不需要 */ #desktop { overflow-y: hidden !important; } /* [FIX-第二页禁止上下滑动] 第二页内容固定铺满，不可滚动 */ #desktop-page2-scroll { overflow-y: hidden !important; } /* iOS全屏适配：桌面页面指示点 */ .desktop-page-dots { position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 500; } .desktop-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,0.2); transition: all 0.3s; } .desktop-dot.active { background: rgba(0,0,0,0.6); width: 16px; border-radius: 4px; } /* [FIX-背景穿透] 确保桌面滚动容器始终透明，让layer-desktop的背景图在所有页面可见 */ /* ★ [FIX-状态栏适配v2] padding-top加上状态栏高度，确保桌面内容从状态栏下方开始 */ #desktop { background: transparent !important; padding-top: 60px; } /* [改版] 应用网格基类：紧凑间距，与韩系改版一致 */ .app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 2px; padding: 18px 16px; } /* 第1页应用网格：2列2行（具体 padding/gap 由 #desktop-grid flex 子项定义覆盖） */ #desktop-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); } /* 第1页大照片卡片：弹性填满但限制最大高度，避免太大 */ /* [FIX-大图缩小-2026-06-16] max-height再缩小10px到205px */ .p1-hero-photo { margin: 0 auto 10px; width: 92%; height: 100%; max-height: 205px; border-radius: 20px; background: rgba(0,0,0,0.03); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; } .p1-hero-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-desktop); } #desktop-page2-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, auto); gap: 8px 2px; padding: 0; align-content: start; } #desktop-page3-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, auto); gap: 10px 8px; padding: 0; } /* [已清理] 第2页音乐/歌词/进度条样式统一由 styles-part2.css 定义，此处仅保留图片上传区兜底 */ .p2-photo-upload { width: 100%; height: 100px; border-radius: 16px; overflow: hidden; background: rgba(245,245,245,0.6); border: 2px dashed rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; } .p2-photo-upload img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; } .p2-photo-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(0,0,0,0.3); font-size: 14px; } /* 第2页：Daily Record 横向大图卡片（图片填满，文字浮层） */ .p2-daily-record { position: relative; width: 100%; height: 170px; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 2px 12px rgba(0,0,0,0.05); cursor: pointer; } .p2-daily-record img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .p2-daily-overlay { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 12px 16px; z-index: 2; } .p2-daily-title { font-size: 15px; font-weight: 600; color: var(--text-desktop); letter-spacing: 0.5px; } .p2-daily-date { font-size: 12px; color: var(--text-sub); } /* 有图时文字加浮层底色保证可读 */ .p2-daily-record.has-img .p2-daily-overlay { background: linear-gradient(0deg, rgba(0,0,0,0.45), rgba(0,0,0,0)); } .p2-daily-record.has-img .p2-daily-title { color: #fff; } .p2-daily-record.has-img .p2-daily-date { color: rgba(255,255,255,0.85); } .p2-daily-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(0,0,0,0.3); font-size: 13px; gap: 6px; z-index: 1; } .p2-daily-placeholder i { font-size: 30px; font-weight: 300; } /* 第3页：日历组件（清爽白卡，与整体韩系风格统一） */ .p3-calendar-widget { background: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.6); border-radius: 18px; padding: 16px 18px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); } .p3-cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .p3-cal-month { font-size: 16px; font-weight: 500; letter-spacing: 0.5px; color: var(--text-desktop); } .p3-cal-nav { display: flex; gap: 16px; } .p3-cal-nav i { cursor: pointer; color: rgba(0,0,0,0.35); padding: 4px; font-size: 13px; } .p3-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; color: rgba(0,0,0,0.35); margin-bottom: 8px; } .p3-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 13px; gap: 4px 2px; color: var(--text-desktop); } .p3-cal-days span { width: 28px; height: 28px; line-height: 28px; padding: 0; margin: 0 auto; border-radius: 50%; cursor: pointer; } .p3-cal-days span.today { background: #8a8580; color: #fff; font-weight: 500; } /* 第3页：Today 待办（白卡描边，与日历一致） */ .p3-todo-widget { background: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.6); border-radius: 18px; padding: 16px 18px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); } .p3-todo-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .p3-todo-title { font-size: 15px; font-weight: 500; letter-spacing: 0.5px; color: var(--text-desktop); } .p3-todo-add { cursor: pointer; color: rgba(0,0,0,0.35); font-size: 16px; padding: 4px; } .p3-todo-list { min-height: 40px; } .p3-todo-empty { font-size: 13px; color: rgba(0,0,0,0.3); text-align: center; padding: 12px 0; } .p3-todo-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.05); font-size: 14px; color: var(--text-main); } .p3-todo-item span { flex: 1; min-width: 0; word-break: break-all; } .p3-todo-item.done span { text-decoration: line-through; } .p3-todo-item.done { opacity: 0.5; } .p3-todo-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: #8a8580; } .p3-todo-del { margin-left: auto; color: rgba(0,0,0,0.25); font-size: 12px; cursor: pointer; padding: 4px 6px; border-radius: 4px; transition: color 0.15s, background 0.15s; flex-shrink: 0; } .p3-todo-del:active { color: #e74c3c; background: rgba(231,76,60,0.08); } .app-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; gap: 2px; } .app-icon { width: var(--app-icon-size); height: var(--app-icon-size); border-radius: 14px; display: flex; justify-content: center; align-items: center; font-size: calc(var(--app-icon-size) * 0.5); margin-bottom: 2px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: transform 0.1s, width 0.2s, height 0.2s, font-size 0.2s; background-size: 100% 100%; background-position: center center; position: relative; overflow: hidden; background-repeat: no-repeat; } .app-icon:active { transform: scale(0.95); } .app-name { font-size: var(--app-name-size); font-weight: 500; color: var(--text-desktop) !important; transition: font-size 0.2s; } /* [改版-清爽风] 桌面图标统一为白色圆角卡片 + 细线图标 仅作用于未自定义图标的 app-icon（自定义图标会带 data-icon-url 属性，保持原样） 需要 !important 覆盖 HTML 内联的 background-color:transparent / box-shadow:none */ /* 第1/2/3页：图标坐在灰背景上，用白色圆角小卡片 [FIX-第1页小框] 第1页只去掉外层"大框"(容器卡片)，每个app仍保留各自的白色小卡片， 与第2/3页保持一致（之前误把小框也去掉了）。 */ #desktop-grid .app-item .app-icon:not([data-icon-url]), #desktop-page2-grid .app-item .app-icon:not([data-icon-url]), #desktop-page3-grid .app-item .app-icon:not([data-icon-url]) { background-color: #ffffff !important; background-image: none !important; border-radius: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important; border: 1px solid rgba(0,0,0,0.05); color: #4a4a4a !important; font-weight: 300; } #desktop-grid .app-item .app-icon:not([data-icon-url]):active, #desktop-page2-grid .app-item .app-icon:not([data-icon-url]):active, #desktop-page3-grid .app-item .app-icon:not([data-icon-url]):active { box-shadow: 0 1px 5px rgba(0,0,0,0.08) !important; } /* 第1页app项：限制溢出 */ #desktop-grid .app-item { overflow: hidden; min-width: 0; } /* 应用名字：参考图为灰色小号居中，限宽防溢出 */ /* [FIX-字体颜色跟随] 确保app名字始终跟随--text-desktop变量 */ #desktop-grid .app-name, #desktop-page2-grid .app-name, #desktop-page3-grid .app-name, .dock-item .app-name, .bottom-nav-item .app-name { color: var(--text-desktop, #6b6b6b) !important; margin-top: 4px; } #desktop-grid .app-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; } /* ====== 区块化布局系统 ====== */ .desktop-block { width: 100%; box-sizing: border-box; } /* 第1页区块布局 */ #desktop .desktop-block[data-block="p1-time"] { flex-shrink: 0; } #desktop .desktop-block[data-block="p1-hero"] { flex-shrink: 0; } #desktop .desktop-block[data-block="p1-apps"] { flex-shrink: 0; } /* 第2页区块布局 */ /* [FIX] 第二页整体下调20px（顶部 padding 70→90） */ #desktop-page2-scroll { display: flex; flex-direction: column; padding: 90px 16px 20px; box-sizing: border-box; } #desktop-page2-scroll .desktop-block[data-block="p2-album"] { flex-shrink: 0; } #desktop-page2-scroll .desktop-block[data-block="p2-apps"] { flex-shrink: 0; margin-top: 10px; } /* [FIX] 图片组件(p2-daily)在整体下调基础上再额外下调20px（20→40） */ #desktop-page2-scroll .desktop-block[data-block="p2-daily"] { flex-shrink: 0; margin-top: 40px; } /* 第3页区块布局 */ /* [FIX] 第三页整体提高10px（顶部 padding 70→60） */ #desktop-page3-scroll { display: flex; flex-direction: column; padding: 45px 20px 20px; box-sizing: border-box; } #desktop-page3-scroll .desktop-block[data-block="p3-calendar"] { flex-shrink: 0; } #desktop-page3-scroll .desktop-block[data-block="p3-apps"] { flex-shrink: 0; margin-top: 14px; } #desktop-page3-scroll .desktop-block[data-block="p3-todo"] { flex-shrink: 0; margin-top: 14px; } /* New Desktop Styles — 韩系清爽风第一页 */ .desktop-time-date-area { text-align: center; color: var(--text-desktop); padding: 18px 0 4px; text-shadow: none; } /* 日期行：06 / 12 Friday */ .desktop-date { font-size: 13px; font-weight: 400; letter-spacing: 2px; opacity: 0.55; margin-bottom: 2px; } /* 时间：细体大字（韩系高级感：衬线细体 + 微字距） */ .desktop-time { font-size: 54px; font-weight: 300; letter-spacing: 3px; line-height: 1.05; color: var(--text-desktop); font-family: 'Times New Roman', 'Songti SC', 'Noto Serif SC', Georgia, serif; font-variant-numeric: lining-nums; white-space: nowrap; } /* 副标题（原签名）：居中小号灰字 */ /* [FIX-签名按钮点不动] 扩大点击热区：改为 inline-block 贴合文字并加内边距， 保证触摸区域 ≥40px；提高不透明度并加圆角/按下反馈，提升可点性与可发现性 */ .p1-subtitle { font-size: 13px; font-weight: 300; letter-spacing: 1px; opacity: 0.72; margin-top: 4px; cursor: pointer; display: inline-block; padding: 10px 18px; border-radius: 14px; transition: background 0.2s ease, opacity 0.2s ease; -webkit-tap-highlight-color: transparent; } .p1-subtitle:active { background: rgba(128,128,128,0.18); opacity: 1; } /* 分隔线（已融入区块间距，保留兼容） */ .p1-divider { display: none; } /* 底部行：左侧应用卡片 + 右侧图片卡片（强制等高对称） [FIX] 增大到 160px，避免应用图标+名字被卡片裁切遮挡 */ .p1-bottom-row { display: flex; flex-direction: row; gap: 12px; padding: 0 20px; align-items: stretch; /* [NEW-高度可调] 由 --p1-apps-height 控制（用户在"美化app布局"里调整） */ height: var(--p1-apps-height, 180px) !important; max-height: var(--p1-apps-height, 180px) !important; min-height: var(--p1-apps-height, 180px) !important; } /* 应用卡片：白底圆角，2列紧凑 */ #desktop-grid { order: 1; flex: 1; min-width: 0; height: 100% !important; max-height: var(--p1-apps-height, 180px) !important; /* [FIX-去掉外框] 四个app仍在同一容器(一体)，但去掉卡片背景/边框/阴影，表面上看起来是分开的 */ background: transparent !important; border-radius: 20px; padding: 10px 12px !important; gap: 6px 6px !important; box-shadow: none !important; border: none !important; align-content: center; overflow: hidden; grid-template-rows: repeat(2, 1fr) !important; grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 0 !important; } /* [v2] page1 app 位置由 app-desktop-edit.js 通过内联 grid 样式管理， 不再用 nth-child !important 强制，否则会导致编辑模式无法拖动 */ /* 右侧图片卡片（与左侧强制等高） */ .p1-square-upload { order: 2; flex: 0 0 var(--p1-photo-width, 170px); width: var(--p1-photo-width, 170px); max-width: none; height: 100% !important; max-height: var(--p1-apps-height, 180px) !important; border-radius: 20px; background: rgba(255,255,255,0.62); border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 2px 12px rgba(0,0,0,0.04); display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; position: relative; } .p1-square-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(0,0,0,0.3); font-size: 12px; } .p1-square-placeholder i { font-size: 28px; font-weight: 300; } .custom-widget { grid-column: span 2; grid-row: span 2; background-color: #f0f0f0; border-radius: 20px; cursor: pointer; min-height: 150px; border: 1px solid rgba(0,0,0,0.04); position: relative; overflow: hidden; } .widget-slideshow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .widget-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease-in-out; } .widget-slide.active { opacity: 1; } .widget-dots { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 2; } .widget-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.4); transition: all 0.3s; } .widget-dot.active { background: rgba(255,255,255,0.9); width: 14px; border-radius: 3px; } .widget-empty-hint { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--text-desktop); z-index: 1; } .widget-manager-item { display: flex; align-items: center; gap: 10px; padding: 8px; background: #f9f9f9; border-radius: 10px; border: 1px solid #eee; } .widget-manager-thumb { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; flex-shrink: 0; } /* [FIX-底部导航栏v5] 使用fixed定位 + CSS class驱动显隐，消除inline style竞争 */ .bottom-nav { position: fixed; bottom: calc(40px + env(safe-area-inset-bottom, 0px) + var(--bottom-nav-offset, 0px)); left: 50%; transform: translateX(-50%); width: 85%; max-width: 340px; height: 70px; background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-radius: 28px; box-shadow: 0 5px 20px rgba(0,0,0,0.15); display: flex; justify-content: space-around; align-items: center; z-index: 1000; padding: 0 10px; /* [FIX-底部导航栏v5] 用 opacity+visibility+transform 代替 display:none 避免多处JS的inline style竞争导致显隐状态混乱 */ transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease; } /* [FIX-底部导航栏v6] 统一隐藏逻辑：有任何"应该隐藏胶囊栏"的class时隐藏 layer-open/wechat-active 在 body 上，keyboard-active 在 html 上 [FIX-底栏穿透v3] 改用display:none彻底移除，防止键盘弹出时opacity/pointer-events失效导致穿透 */ body.layer-open .bottom-nav, body.wechat-active .bottom-nav, html.keyboard-active .bottom-nav { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; z-index: -1 !important; } /* [FIX-底栏穿透v3] 兜底：任何layer.show存在时无条件隐藏底栏 */ body:has(.layer.show) .bottom-nav, html:has(.layer.show) .bottom-nav { display: none !important; visibility: hidden !important; pointer-events: none !important; z-index: -1 !important; } .bottom-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; /* [FIX-胶囊栏图标垂直居中] 沿纵向居中图标 */ gap: 0; color: var(--text-desktop); font-size: var(--dock-name-size); font-weight: 500; cursor: pointer; position: relative; /* [FIX-胶囊栏图标垂直居中] 作为标签绝对定位的参照 */ height: 100%; /* [FIX-胶囊栏图标垂直居中] 占满胶囊高度，图标才能真正居中 */ } /* [FIX-胶囊栏图标垂直居中] 文字标签绝对定位到底部，不再把图标向上顶； 这样图标无论放多大都在胶囊内垂直居中，而不会偏上/溢出顶边。*/ .bottom-nav-item > span { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; line-height: 1; white-space: nowrap; pointer-events: none; } .dock-icon { width: var(--dock-icon-size); height: var(--dock-icon-size); border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: calc(var(--dock-icon-size) * 0.48); box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.1s, width 0.2s, height 0.2s, font-size 0.2s; background-size: cover; background-position: center; background-color: rgba(255,255,255,0.8); color: var(--text-desktop); } .dock-icon:active { transform: scale(0.95); } .dock-icon.dock-icon-ins { background-color: transparent !important; box-shadow: none !important; color: var(--text-desktop); font-size: calc(var(--dock-icon-size) * 0.52); } /* 当dock图标有自定义背景图时，确保图片可见且填充拉伸 */ .dock-icon.has-custom-icon { background-color: transparent !important; background-size: 100% 100% !important; background-position: center center !important; background-repeat: no-repeat !important; overflow: hidden; border-radius: 12px; } /* Chat UI */ /* [FIX-问题1] 移除 overflow:hidden，改用 z-index 控制层级；overflow:hidden 会导致某些浮层被裁断 */ .msg-row { display: flex; gap: 10px; padding: 4px 15px; position: relative; flex-shrink: 0; max-width: 100%; overflow: visible; align-items: flex-start; margin-bottom: var(--bubble-gap, 0px); } .msg-row.me { flex-direction: row-reverse; } #layer-chat .msg-row .avatar { width: var(--avatar-size, 40px); height: var(--avatar-size, 40px); min-width: var(--avatar-size, 40px); min-height: var(--avatar-size, 40px); border-radius: var(--avatar-radius, 8px); } .bubble { background: var(--bubble-left); padding: var(--bubble-padding); border-radius: var(--bubble-radius, 20px); font-size: var(--bubble-font-size, var(--font-size-main)); line-height: var(--bubble-spacing); word-wrap: break-word; overflow-wrap: break-word; border: var(--bubble-border, none); max-width: var(--bubble-size); position: relative; min-height: 28px; color: var(--text-main); box-shadow: var(--bubble-shadow, 0 1px 4px rgba(0,0,0,0.07)); overflow: visible !important; outline: none !important; } .bubble:focus, .bubble:focus-visible, .bubble:active, .msg-row:focus, .msg-row *:focus { outline: none !important; -webkit-tap-highlight-color: transparent !important; } .bubble.loading { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 60px; } .dot { width: 8px; height: 8px; background: #bbb; border-radius: 50%; animation: dot-blink 1.4s infinite ease-in-out both; display: inline-block; } .dot:nth-child(1) { animation-delay: -0.32s; } .dot:nth-child(2) { animation-delay: -0.16s; } @keyframes dot-blink { 0%, 80%, 100% { transform: scale(0); opacity: 0; } 40% { transform: scale(1); opacity: 1; } } /* [FIX-粉色边框] 用户气泡的border不再回退到--bubble-border，避免偶尔继承到对方气泡的粉色边框 */ /* 如需给自己的气泡加边框，请单独设置 --bubble-border-me */ .msg-row.me .bubble { background: var(--bubble-right); border: var(--bubble-border-me, none); color: #333; overflow: visible !important; } .msg-row:not(.me) .bubble { background: var(--bubble-left); border: var(--bubble-border-other, var(--bubble-border, none)); overflow: visible !important; } /* [FIX-问题1] 气泡内图片强制不超过气泡宽度，防止溢出覆盖头像 */ /* [FIX-表情包过大] 加!important防止主题CSS覆盖尺寸限制 */ .bubble img { max-width: 140px !important; max-height: 200px !important; border-radius: 4px; display: block; width: auto; height: auto; } .bubble.voice { display: flex; align-items: center; gap: 5px; cursor: pointer; min-width: 80px; position: relative; } .bubble.voice .voice-duration-bar { position: absolute; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg, #4facfe, #00f2fe); border-radius: 0 0 8px 8px; transition: width 0.3s; } .bubble.voice .voice-sec { font-size: 11px; color: #999; margin-left: 4px; white-space: nowrap; } .msg-row .bubble.voice .voice-wave-anim { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; } .msg-row .bubble.voice .voice-wave-anim span { display: inline-block; width: 2px; background: #07c160; border-radius: 1px; animation: vw 0.6s ease-in-out infinite alternate; } .msg-row.me .bubble.voice .voice-wave-anim span { background: #fff; } .msg-row .bubble.voice .voice-wave-anim span:nth-child(1) { height: 6px; animation-delay: 0s; } .msg-row .bubble.voice .voice-wave-anim span:nth-child(2) { height: 12px; animation-delay: 0.15s; } .msg-row .bubble.voice .voice-wave-anim span:nth-child(3) { height: 8px; animation-delay: 0.3s; } @keyframes vw { to { height: 4px; } } /* [FIX-预览呼吸] 聊天美化预览区域禁用语音波浪动画，防止预览界面整体"呼吸"抖动 */ #bubble-preview-area .voice-wave-anim { height: 16px; overflow: hidden; } #bubble-preview-area .voice-wave-anim span { animation: none !important; } .heart-indicator { display: inline-block; width: 8px; height: 8px; background: #ff6b81; border-radius: 50%; margin-left: 6px; vertical-align: middle; animation: heart-pulse 1.5s infinite; } @keyframes heart-pulse { 0%,100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.3); opacity: 1; } } @keyframes heartPulse { 0%,100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.3); opacity: 1; } } .loc-map { position: relative; } .loc-map::after { content: '\f3c5'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 28px; color: #e74c3c; text-shadow: 0 2px 6px rgba(0,0,0,0.3); } .loc-map-gradient { position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(transparent, rgba(0,0,0,0.15)); } /* 时间戳样式 */ .chat-time-separator { font-size: 11px; color: #a89b91; font-style: oblique; padding: 8px 0 4px; letter-spacing: 0.3px; } /* 拍一拍消息样式 */ .poke-msg { text-align: center; font-size: 12px; color: #b8a08a; font-style: italic; padding: 6px 0; letter-spacing: 0.3px; } .avatar-time-label { font-size: 10px; color: #a89b91; font-style: oblique; margin-top: 3px; letter-spacing: 0.3px; } .bubble-time-label { font-size: 10px; color: #a89b91; font-style: oblique; margin-top: 3px; letter-spacing: 0.3px; } .bubble-transfer { width: 235px; border-radius: 8px; overflow: hidden; cursor: pointer; position: relative; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(0,0,0,0.05); background: #f79c45; } .bubble-transfer.done { background: #f9e1c4; opacity: 0.9; } .transfer-top { padding: 16px 12px; display: flex; align-items: center; gap: 12px; color: #fff; min-height: 72px; } .transfer-icon { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } .transfer-info { display: flex; flex-direction: column; justify-content: center; flex: 1; } .transfer-amt { font-size: 17px; font-weight: 500; margin-bottom: 2px; } .transfer-desc { font-size: 13px; opacity: 0.9; } .transfer-bottom { background: #fff; padding: 8px 12px; font-size: 11px; color: #999; border-top: 1px solid #f5f5f5; display: flex; align-items: center; gap: 5px; opacity: 0.8; } .bubble-transfer.done .transfer-bottom { background: #fff; opacity: 0.6; } .bubble-transfer-status { background: #fff; padding: 12px; border-radius: 8px; width: 230px; font-size: 14px; color: #999; display: flex; align-items: center; gap: 8px; border: 1px solid #e5e5e5; } .bubble-redpacket { width: 260px; border-radius: 8px; overflow: hidden; cursor: pointer; position: relative; display: flex; flex-direction: column; background: linear-gradient(135deg, #c0392b, #a93226); padding: 0 !important; } .bubble-redpacket .rp-top { padding: 20px 18px; display: flex; align-items: center; min-height: 60px; position: relative; } .bubble-redpacket .rp-top::after { content: ''; position: absolute; bottom: 0; left: 10%; width: 80%; height: 1px; background: rgba(255,255,255,0.15); } .bubble-redpacket .rp-info { flex: 1; min-width: 0; } .bubble-redpacket .rp-greeting { color: #fff; font-size: 15px; font-weight: 500; line-height: 1.5; word-break: break-all; } .bubble-redpacket .rp-status { color: rgba(255,255,255,0.6); font-size: 12px; margin-top: 6px; } .bubble-redpacket .rp-bottom { background: rgba(0,0,0,0.15); color: rgba(255,255,255,0.5); font-size: 11px; padding: 6px 18px; text-align: left; } .bubble-redpacket.rp-done { opacity: 0.7; background: linear-gradient(135deg, #999, #777); } .bubble-redpacket.rp-done .rp-bottom { background: rgba(0,0,0,0.1); } .bubble-location { background: #fff; border-radius: 8px; width: 240px; overflow: hidden; border: 1px solid #e5e5e5; padding: 0; display: flex; flex-direction: column; } .loc-map { height: 120px; background: url('https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/121.47,31.23,12,0/400x200?access_token=pk.eyJ1IjoiZXhhbXBsZSIsImEiOiJja2xsbmN5ZGMwMzBzMm1tZ3Z5cmZ5b3poIn0.example') center/cover; background-color: #eee; position: relative; } .loc-map::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 20px; height: 20px; background: red; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.3); } .loc-info { padding: 10px 12px; } .loc-name { font-size: 16px; font-weight: 500; color: #333; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .loc-addr { font-size: 12px; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Shared Post Bubble */ .bubble-shared-post { background: #fff; border-radius: 8px; width: min(240px, var(--bubble-size)); overflow: hidden; border: 1px solid #e5e5e5; padding: 0; display: flex; flex-direction: column; cursor: pointer; } .msg-row.me .bubble-shared-post { border-color: #f5a0b8; } .shared-post-label { font-size: 12px; color: #999; margin-bottom: 4px; } .bubble-shared-post .sp-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; } .bubble-shared-post .sp-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .bubble-shared-post .sp-author { font-size: 12px; color: #576b95; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bubble-shared-post .sp-title { font-size: 14px; font-weight: 600; color: #333; padding: 0 12px 4px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bubble-shared-post .sp-text { font-size: 12px; color: #666; padding: 0 12px 10px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .bubble-shared-post .sp-footer { background: #fafafa; padding: 6px 12px; font-size: 11px; color: #999; border-top: 1px solid #f0f0f0; } .bubble-shared-post.selected { position: relative; } /* Fav Product Bubble */ .bubble-fav-product { background:#fff !important; border:1px solid #ff4d4f; border-radius:12px; overflow:hidden; min-width:200px; } .bubble-fav-product .fav-prod-top { padding:12px 14px; display:flex; align-items:center; gap:10px; } .bubble-fav-product .fav-prod-info { flex:1; min-width:0; } .bubble-fav-product .fav-prod-title { font-size:13px; color:#333; font-weight:600; } .bubble-fav-product .fav-prod-name { font-size:12px; color:#666; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bubble-fav-product .fav-prod-bottom { background:#fff0f0; padding:8px 14px; font-size:12px; color:#ff4d4f; border-top:1px solid #ffe0e0; display:flex; align-items:center; } .bubble.selected { position: relative; } /* [FIX-特殊消息选中阴影] 为所有特殊气泡添加选中状态定位 */ .bubble-transfer.selected, .bubble-redpacket.selected, .bubble-location.selected, .bubble-copay.selected, .bubble-contact-card.selected, .bubble-gift-delivery.selected, .bubble-fav-product.selected, .bubble-literature.selected, .bubble-literature-frag.selected, .bubble-merge-forward.selected, .go-offline-bubble.selected { position: relative; } /* [FIX-多选遮罩v2] 使用真实DOM .select-overlay 代替::after伪元素，避免与小尖角冲突 */ .select-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; z-index: 10; pointer-events: none; } /* [FIX-多选不旋转尖角] 选中时不改变::before（保留气泡小尖角原样），不再显示勾号 */ .bubble.recalled { background: #e0e0e0; color: #888; font-style: italic; font-size: 13px; text-align: center; } .msg-row:has(.recalled) { justify-content: center; } .msg-row:has(.recalled) .avatar-wrapper-chat, .msg-row:has(.recalled) .avatar { display: none !important; } /* Quote Bubble Style - 上下结构：引用在上，回复在下 */ .bubble-quote { margin-bottom: 6px; padding: 6px 10px; background: rgba(0,0,0,0.06); border-left: 3px solid rgba(0,0,0,0.2); border-radius: 0 6px 6px 0; font-size: 12px; color: inherit; opacity: 0.75; white-space: pre-wrap; display: block !important; width: 100%; box-sizing: border-box; line-height: 1.4; position: relative; max-height: 60px; overflow: hidden; text-overflow: ellipsis; } .bubble-quote::before { content: ''; display: block; width: 100%; height: 0; } /* [FIX-引用纯文本-2026-05-20] 引用内容包裹器样式，确保在flex column中正确显示 */ .bubble-quote-content { display: block; width: 100%; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; line-height: var(--bubble-spacing, 1.6); } /* [FIX-引用纯文本-2026-05-20] 有引用的气泡强制flex column布局（CSS兜底，防止inline style丢失） */ .bubble:has(.bubble-quote) { display: flex !important; flex-direction: column !important; } /* ===== Memory System UI - Minimal B&W ===== */ #layer-memory-system { background: #f5f5f5; } #layer-memory-system > .scroll-y { background: #f5f5f5 !important; padding: 0 !important; } /* 旧版列表项兜底（legacy fallback） */ #layer-memory-system .list-item { background: #fff; margin: 10px 14px; border-radius: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.04); } #layer-memory-system .memo-content { font-size: 14.5px; color: #222; margin-top: 8px; line-height: 1.65; } #layer-memory-system .memo-date { font-size: 12px; color: #999; } #layer-memory-system .memo-actions { display: flex; gap: 14px; font-size: 14px; color: #888; } #layer-memory-system .memo-actions i { cursor: pointer; } /* 头部容器 */ .mem-head { background: #fff; margin: 12px 14px 0; padding: 14px 14px 10px; border-radius: 18px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.04); } /* Tab 栏 */ .mem-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .mem-tabs::-webkit-scrollbar { display: none; } .mem-tab { flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; color: #8a8a8a; background: transparent; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: all 0.18s ease; user-select: none; display: inline-flex; align-items: center; gap: 6px; } .mem-tab:hover { color: #333; } .mem-tab.active { background: #111; color: #fff; font-weight: 600; } .mem-tab-count { font-size: 11px; opacity: 0.55; font-weight: inherit; } .mem-tab.active .mem-tab-count { opacity: 0.7; } .mem-stat-line { margin-top: 10px; font-size: 12px; color: #999; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .mem-stat-line .mem-stat-dot { width: 3px; height: 3px; border-radius: 50%; background: #ccc; display: inline-block; } /* 卡片 */ .mem-card { background: #fff; margin: 12px 14px 0; padding: 16px 16px 12px; border-radius: 18px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.04); position: relative; transition: box-shadow 0.2s ease, transform 0.2s ease; } .mem-card:active { transform: scale(0.995); } .mem-card.is-archive { opacity: 0.72; } .mem-card.is-fictional { border-style: dashed; border-color: rgba(0,0,0,0.15); } /* ===== 用户画像（黑白灰韩系·无渐变·无emoji） ===== */ .mem-viewswitch { display: flex; gap: 0; padding: 10px 14px 4px; background: #fff; border-bottom: 1px solid #ececec; } .mem-viewswitch-btn { flex: 1; text-align: center; font-size: 13px; letter-spacing: 1px; color: #8a8a8a; padding: 9px 0; cursor: pointer; border: 1px solid #e3e3e3; background: #fff; transition: background .18s ease, color .18s ease; } .mem-viewswitch-btn:first-child { border-radius: 8px 0 0 8px; border-right: none; } .mem-viewswitch-btn:last-child { border-radius: 0 8px 8px 0; } .mem-viewswitch-btn.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; } #portrait-list { background: #fff; } .pt-topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 12px; } .pt-topbar-title { font-size: 15px; font-weight: 600; color: #1a1a1a; letter-spacing: .5px; } .pt-rederive { font-size: 12px; color: #1a1a1a; letter-spacing: .5px; background: #fff; border: 1px solid #1a1a1a; border-radius: 18px; padding: 6px 14px; cursor: pointer; } .pt-rederive:active { background: #1a1a1a; color: #fff; } .pt-board { border-top: 1px solid #f0f0f0; padding: 6px 0 4px; } .pt-board-head { display: flex; align-items: center; gap: 8px; padding: 12px 18px 8px; } .pt-board-name { font-size: 13px; font-weight: 600; color: #1a1a1a; letter-spacing: 1.5px; } .pt-board-count { font-size: 11px; color: #9a9a9a; min-width: 18px; height: 18px; line-height: 18px; text-align: center; background: #f4f4f4; border-radius: 9px; padding: 0 5px; } .pt-board-add { margin-left: auto; font-size: 12px; color: #8a8a8a; cursor: pointer; letter-spacing: .5px; } .pt-board-add:active { color: #1a1a1a; } .pt-board-body { padding: 0 14px; } .pt-board-empty { font-size: 12px; color: #c0c0c0; padding: 4px 4px 12px; letter-spacing: .5px; } .pt-item { padding: 12px 4px; border-bottom: 1px solid #f4f4f4; } .pt-item:last-child { border-bottom: none; } .pt-item.is-faded { opacity: .5; } .pt-item-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 14px; color: #1a1a1a; } .pt-key { color: #8a8a8a; font-size: 13px; min-width: 56px; } .pt-val { color: #1a1a1a; font-weight: 500; } .pt-reason { color: #9a9a9a; font-size: 12px; margin-left: 6px; } .pt-freq { color: #9a9a9a; font-size: 12px; } .pt-tag { font-size: 11px; color: #1a1a1a; border: 1px solid #1a1a1a; border-radius: 4px; padding: 1px 6px; letter-spacing: .5px; } .pt-tag-dislike { color: #fff; background: #1a1a1a; } .pt-tag-meme { color: #fff; background: #6b6b6b; border-color: #6b6b6b; } .pt-item-meta { display: flex; align-items: center; gap: 12px; margin-top: 9px; } .pt-conf { display: inline-block; width: 88px; height: 3px; background: #ececec; border-radius: 2px; overflow: hidden; } .pt-conf-fill { display: block; height: 100%; background: #1a1a1a; } .pt-ev-toggle { font-size: 11px; color: #9a9a9a; cursor: pointer; letter-spacing: .3px; } .pt-ev-toggle:active { color: #1a1a1a; } .pt-ev { margin-top: 8px; padding: 8px 10px; background: #fafafa; border-radius: 6px; } .pt-ev-item { font-size: 12px; color: #777; line-height: 1.7; } .pt-item-actions { display: flex; gap: 16px; margin-top: 10px; } .pt-act { font-size: 12px; color: #9a9a9a; cursor: pointer; letter-spacing: .5px; } .pt-act:active { color: #1a1a1a; } .pt-act.is-on { color: #1a1a1a; font-weight: 600; } .pt-act-del:active { color: #1a1a1a; } .pt-faded-head { font-size: 12px; color: #b0b0b0; padding: 12px 4px 8px; cursor: pointer; letter-spacing: .5px; } .pt-faded-body { } .pt-empty { text-align: center; color: #b0b0b0; padding: 60px 30px; font-size: 14px; line-height: 1.9; letter-spacing: .5px; } .pt-empty-sub { font-size: 12px; color: #c8c8c8; } /* 画像编辑弹层 */ .pt-editor-mask { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; padding: 30px; transform: translateZ(0); } .pt-editor { width: 100%; max-width: 340px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.2); } .pt-editor-title { font-size: 14px; font-weight: 600; color: #1a1a1a; padding: 18px 18px 6px; letter-spacing: .5px; } .pt-editor-body { padding: 6px 18px 4px; } .pt-f-label { display: block; font-size: 12px; color: #9a9a9a; margin: 12px 0 6px; letter-spacing: .5px; } .pt-f-input { width: 100%; box-sizing: border-box; font-size: 14px; color: #1a1a1a; border: 1px solid #e3e3e3; border-radius: 8px; padding: 9px 11px; outline: none; background: #fff; } .pt-f-input:focus { border-color: #1a1a1a; } .pt-f-seg { display: flex; border: 1px solid #e3e3e3; border-radius: 8px; overflow: hidden; } .pt-seg-opt { flex: 1; text-align: center; font-size: 13px; color: #8a8a8a; padding: 9px 0; cursor: pointer; } .pt-seg-opt.active { background: #1a1a1a; color: #fff; } .pt-editor-actions { display: flex; border-top: 1px solid #f0f0f0; margin-top: 16px; } .pt-editor-btn { flex: 1; font-size: 14px; padding: 14px 0; background: #fff; border: none; cursor: pointer; color: #8a8a8a; letter-spacing: 1px; } .pt-editor-btn:active { background: #fafafa; } .pt-editor-btn + .pt-editor-btn { border-left: 1px solid #f0f0f0; } .pt-editor-save { color: #1a1a1a; font-weight: 600; } /* 卡片顶部：层级标签 + 来源 */ .mem-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .mem-tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.2px; background: #111; color: #fff; line-height: 1; } .mem-tag.tier-long { background: #333; } .mem-tag.tier-short { background: #fff; color: #111; border: 1px solid #111; } .mem-tag.tier-archive { background: #f0f0f0; color: #666; } .mem-tag-ext { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 500; background: #f2f2f2; color: #666; margin-left: 6px; line-height: 1; } .mem-tag-ext.is-core-event { background: #111; color: #fff; } .mem-tag-ext.is-fictional { background: #fff; color: #888; border: 1px solid #e0e0e0; } .mem-card-scene { font-size: 11px; color: #999; display: inline-flex; align-items: center; gap: 4px; } /* 卡片内容区：折叠/展开 */ .mem-card-body { font-size: 14.5px; line-height: 1.65; color: #222; word-break: break-word; white-space: pre-wrap; max-height: 4.95em; /* 约3行 */ overflow: hidden; position: relative; transition: max-height 0.25s ease; } .mem-card-body.expanded { max-height: 9999px; } .mem-card-body:not(.expanded).is-clamped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2em; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%); pointer-events: none; } .mem-expand-toggle { display: inline-block; margin-top: 6px; padding: 3px 0; font-size: 12.5px; color: #111; font-weight: 600; cursor: pointer; background: none; border: none; user-select: none; } .mem-expand-toggle:hover { opacity: 0.7; } /* 强度条 */ .mem-strength { margin-top: 14px; display: flex; align-items: center; gap: 8px; } .mem-strength-bar { flex: 1; height: 3px; background: #eee; border-radius: 2px; overflow: hidden; } .mem-strength-fill { height: 100%; background: #111; border-radius: 2px; transition: width 0.3s ease; } .mem-strength-val { font-size: 11px; color: #999; font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; } /* 卡片元信息 */ .mem-card-meta { margin-top: 8px; font-size: 11.5px; color: #999; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .mem-card-meta .dot { width: 2.5px; height: 2.5px; border-radius: 50%; background: #ccc; display: inline-block; } /* 操作按钮行 */ .mem-actions { margin-top: 14px; padding-top: 12px; border-top: 1px solid #f2f2f2; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .mem-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; color: #333; background: transparent; border: none; cursor: pointer; transition: background 0.15s ease; line-height: 1; } .mem-btn:hover { background: #f5f5f5; } .mem-btn i { font-size: 11px; opacity: 0.7; } .mem-btn.mem-btn-primary { background: #111; color: #fff; } .mem-btn.mem-btn-primary:hover { background: #333; } .mem-btn.mem-btn-danger { color: #c33; } .mem-btn.mem-btn-danger:hover { background: #fdeded; } .mem-btn.mem-btn-pinned { background: #111; color: #fff; } .mem-btn.mem-btn-pinned i { opacity: 1; } /* 空状态 */ .mem-empty { text-align: center; padding: 60px 20px; color: #aaa; font-size: 13px; line-height: 1.8; } .mem-empty-icon { font-size: 34px; opacity: 0.25; margin-bottom: 10px; } /* iOS全屏适配：聊天滚动到底部按钮 */ .chat-scroll-bottom-btn { position: absolute; bottom: 70px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff; display: flex; align-items: center; justify-content: center; cursor: move; z-index: 5002; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: box-shadow 0.2s; font-size: 14px; touch-action: none; user-select: none; } .chat-scroll-bottom-btn:active { background: rgba(0,0,0,0.7); box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .chat-scroll-bottom-btn.dragging { transition: none; opacity: 0.9; } /* 反向查岗样式 - 简洁风格 */ .rc-monitor { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; max-height: 85vh; background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); z-index: 9999; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e0e0e0; } .rc-monitor-header { background: #333; color: #fff; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; } .rc-monitor-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; } .rc-monitor-close { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; } .rc-monitor-close:hover { background: rgba(255,255,255,0.35); } .rc-monitor-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; min-height: 0; } .rc-phone-screen { background: #222; border-radius: 16px; padding: 6px; border: 2px solid #444; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .rc-phone-statusbar { background: #1a1a1a; color: #fff; padding: 6px 14px; border-radius: 12px 12px 0 0; display: flex; justify-content: space-between; align-items: center; font-size: 11px; flex-shrink: 0; } .rc-phone-statusbar i { font-size: 10px; margin-left: 4px; } .rc-phone-content { background: #f8f8f8; min-height: 120px; max-height: 45vh; overflow-y: auto; border-radius: 0 0 12px 12px; padding: 14px; flex: 1; } .rc-current-app { text-align: center; padding: 14px; background: #fff; border-radius: 10px; margin-bottom: 10px; border: 1px solid #e8e8e8; } .rc-app-icon { font-size: 28px; color: #555; margin-bottom: 6px; } .rc-app-name { font-size: 13px; font-weight: 600; color: #333; } .rc-viewing-list { display: flex; flex-direction: column; gap: 6px; } .rc-viewing-item { background: #fff; padding: 9px 12px; border-radius: 8px; font-size: 13px; color: #555; display: flex; align-items: center; gap: 8px; animation: rcSlideIn 0.3s ease-out; border: 1px solid #eee; } @keyframes rcSlideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .rc-viewing-item i { color: #888; font-size: 13px; } /* 联系人反问气泡 */ .rc-question-bubble { background: #f0f0f0; padding: 9px 12px; border-radius: 12px 12px 12px 4px; font-size: 13px; color: #333; display: flex; align-items: flex-start; gap: 8px; animation: rcBubbleIn 0.4s ease-out; border: 1px solid #e0e0e0; margin-top: 4px; } .rc-question-bubble .rc-q-avatar { width: 24px; height: 24px; border-radius: 50%; background: #666; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; flex-shrink: 0; } @keyframes rcBubbleIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } } .rc-activity-log { background: #fafafa; border-radius: 10px; padding: 12px; max-height: 150px; overflow-y: auto; border: 1px solid #e8e8e8; } .rc-log-title { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 10px; } .rc-log-content { display: flex; flex-direction: column; gap: 5px; } .rc-log-item { font-size: 12px; color: #777; padding: 5px 10px; background: #fff; border-radius: 6px; border-left: 3px solid #bbb; } .rc-log-time { color: #aaa; font-size: 11px; margin-right: 6px; } /* 反向查岗邀请气泡样式 */ .bubble-rc-invite { background: #f5f5f5 !important; border: 1px solid #ddd !important; border-radius: 10px !important; padding: 12px !important; text-align: center; } .bubble-rc-invite .rc-invite-icon { font-size: 28px; margin-bottom: 6px; } .bubble-rc-invite .rc-invite-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 4px; } .bubble-rc-invite .rc-invite-desc { font-size: 12px; color: #999; } /* 反向查岗邀请/请求弹窗 */ #modal-reverse-check-invite .modal-box, #modal-reverse-check-request .modal-box { border-radius: 12px !important; } /* [FIX-聊天输入栏-v4] 贴底通栏风格（全局基线）— 支持CSS变量自定义 根因修复：此前默认为悬浮胶囊，而"贴底通栏"新UI只写在 default-theme.css， 切换主题 / 应用自定义CSS / 美化包时 default-theme 被禁用，胶囊便露出（闪回旧UI）。 现将贴底通栏设为全局默认基线，任何主题下都保持一致，彻底消除闪回。 如需悬浮胶囊，主题仍可通过 --chat-input-radius / --chat-input-shadow 覆盖。 */ .input-bar { /* [FIX-SVG底栏v2] 用 background-color 代替 background 简写 */ background-color: var(--chat-input-bg, #f7f7f7); border-top: var(--chat-input-border, 1px solid #ededed); border-radius: var(--chat-input-radius, 0); margin: 0; margin-bottom: 0; padding: 8px 12px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; position: relative; z-index: 5001; box-shadow: var(--chat-input-shadow, none); /* [FIX-v2] 不使用transition，避免键盘弹出时的延迟和闪烁 */ /* [FIX-SVG底栏v1] 支持 --chat-input-bg-image 独立图层覆盖 当主题设置了贴纸/SVG背景时，用 background-image 单独设置 不会被 background 简写属性覆盖 */ background-image: var(--chat-input-bg-image, none); /* [FIX-贴图不完整-2026-07-12] 默认由 cover(会裁切边缘) 改为 100% 100%： 整张贴图完整铺满输入栏、不再被裁掉一部分。用户仍可用 --chat-input-bg-size 自行覆盖（如需不拉伸留白可设 contain，需平铺可设 auto + --chat-input-bg-repeat:repeat）。 */ background-size: var(--chat-input-bg-size, 100% 100%); background-position: var(--chat-input-bg-position, center); background-repeat: var(--chat-input-bg-repeat, no-repeat); } /* [FIX-SVG底栏v1] 当设置了 --chat-input-bg-image 时，确保图片层在最上方 通过 ::before 伪元素叠加，避免被主题 background !important 覆盖 */ .input-bar[style*="--chat-input-bg-image"], .input-bar.has-bg-image { position: relative; } .input-bar[style*="--chat-input-bg-image"]::before, .input-bar.has-bg-image::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: var(--chat-input-bg-image); /* [FIX-贴图不完整-2026-07-12] 同上：默认整图铺满不裁切 */ background-size: var(--chat-input-bg-size, 100% 100%); background-position: var(--chat-input-bg-position, center); background-repeat: var(--chat-input-bg-repeat, no-repeat); border-radius: inherit; z-index: 0; pointer-events: none; } .input-bar[style*="--chat-input-bg-image"] > *, .input-bar.has-bg-image > * { position: relative; z-index: 1; } .quote-preview { background: #ededed; padding: 8px 12px; font-size: 13px; color: #666; border-left: 3px solid #ccc; margin-bottom: 5px; display: none; justify-content: space-between; align-items: center; border-radius: 4px; } .input-row { display: flex; gap: 4px; align-items: center; margin-bottom: 0px; min-height: 36px; } .input-field { flex: 1; min-height: 36px; max-height: 120px; border: 1px solid #e8e8e8; border-radius: 20px; padding: 7px 14px; font-size: 15px; background: #f5f5f5; min-width: 0; line-height: 1.4; resize: none; overflow-y: hidden; font-family: inherit; box-sizing: border-box; } .voice-hold-btn { flex: 1; height: 36px; border: 1px solid #ddd; border-radius: 20px; font-size: 15px; background: #f5f5f5; font-weight: bold; display: none; align-items: center; justify-content: center; cursor: pointer; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .voice-hold-btn:active { background: #e8f5e9; color: #2e7d32; } .btn-act { padding: 0; height: 32px; width: 32px; border-radius: 50%; border: none; background: transparent; font-size: 20px; color: #555; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .btn-act svg { display: block; } .btn-act:active { opacity: 0.5; } .btn-gen { color: #555; } .btn-thought { color: #e74c6f; } .btn-send { color: #07c160; } /* [JS适配] toolbar底部padding由device-adapter.js动态设置 */ /* [FIX-底栏居中v1] padding上下均衡: 4px 0 4px 0，内容垂直居中 */ .toolbar { display: flex; justify-content: space-around; padding: 4px 0 4px 0; padding-bottom: 4px; color: #555; font-size: 22px; align-items: center; } .toolbar i { padding: 10px; cursor: pointer; position: relative; z-index: 5002; } /* [FIX-SVG贴图兼容v2-CSS兜底] 当按钮通过inline style设置了background-image时，隐藏内部SVG */ #layer-chat .input-bar .btn-act[style*="background-image"] > svg, #layer-chat .input-bar .btn-gen[style*="background-image"] > svg, #layer-chat .input-bar .btn-thought[style*="background-image"] > svg, #layer-chat .input-bar .btn-send[style*="background-image"] > svg, #layer-chat .input-bar .btn-act[style*="background-image"] > i, #layer-chat .input-bar .btn-gen[style*="background-image"] > i, #layer-chat .input-bar .btn-thought[style*="background-image"] > i, #layer-chat .input-bar .btn-send[style*="background-image"] > i { display: none !important; } /* New Offline Chat Styles */ .offline-scroll-container { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; /* [FIX-iOS线下跳顶v6] 阻止滚动事件冒泡到父级容器(chat-history/layer) */ overscroll-behavior: contain; overscroll-behavior-y: contain; display: flex; flex-direction: column; /* 黑白动漫风格：淡灰底色 + 方格纹理 */ background-color: #f5f5f5; background-image: linear-gradient(rgba(180,180,180,0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(180,180,180,0.18) 1px, transparent 1px); background-size: 24px 24px; padding-top: 220px; /* 增大：给顶部栏高度 + 头像溢出空间 */ } /* [FIX-线下模式头部] 完整的顶部安全区域适配 */ .offline-fixed-header { position: absolute; top: 0; left: 0; width: 100%; z-index: 1000; background: linear-gradient(135deg, #ffeef1 0%, #fff0f5 100%); box-shadow: 0 2px 8px rgba(255,117,140,0.18); border-bottom: 2px solid rgba(255,117,140,0.35); transition: all 0.3s; } /* 顶部导航按钮区域 — 保留彩色粉色风 */ .offline-nav-area { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; color: #ff758c; font-size: 17px; font-weight: 600; position: relative; } /* [FIX-顶栏重合] 线下模式顶栏内的标题限制宽度，防止和右侧按钮组重叠 */ .offline-nav-area .nav-title { max-width: 50%; overflow: hidden; text-overflow: ellipsis; } .offline-nav-icon { padding: 10px; cursor: pointer; color: #ff758c; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .offline-info-bar { padding: 5px 20px 12px 20px; display: flex; justify-content: space-between; align-items: center; position: relative; border-top: 1px solid rgba(255,117,140,0.15); } .offline-avatar-group { display: flex; flex-direction: column; align-items: center; width: 60px; } .offline-avatar-group img { width: 48px; height: 48px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); object-fit: cover; } .offline-heart-rate { font-size: 12px; color: #ff758c; margin-top: 5px; font-weight: bold; display: flex; align-items: center; gap: 3px; } .offline-heart-rate i { animation: heartBeat 1s infinite; color: #ff758c; } @keyframes heartBeat { 0% { transform: scale(1); } 15% { transform: scale(1.3); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } 60% { transform: scale(1); } } .offline-connect-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 10px; } .offline-distance-badge { background: #fff5f7; border: 1.5px solid #ff758c; padding: 3px 10px; border-radius: 20px; font-size: 10px; color: #ff758c; margin-top: 5px; display: flex; align-items: center; gap: 4px; font-family: 'Courier New', monospace; font-weight: 700; letter-spacing: 0.5px; } .offline-wave-line { width: 100%; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 16' preserveAspectRatio='none'%3E%3Cpath d='M0,8 Q25,16 50,8 T100,8' fill='none' stroke='%23ff758c' stroke-width='1.5' stroke-dasharray='4,3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-size: 200% 100%; animation: waveMove 3s linear infinite; opacity: 0.7; } @keyframes waveMove { 0% { background-position: 0 0; } 100% { background-position: -200% 0; } } /* ===== 群聊成员管理样式 ===== */ .gc-member-item { display: flex; align-items: center; padding: 10px 12px; border-bottom: 1px solid #f5f5f5; cursor: pointer; transition: background 0.15s; } .gc-member-item:hover, .gc-member-item:active { background: #f9f9f9; } .gc-member-avatar { width: 42px; height: 42px; border-radius: var(--avatar-radius, 8px); object-fit: cover; margin-right: 12px; flex-shrink: 0; } .gc-member-info { flex: 1; min-width: 0; } .gc-member-name { font-size: 15px; color: #333; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .gc-member-sub { font-size: 12px; color: #999; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gc-member-title { display: inline-block; background: linear-gradient(135deg, #9b59b6, #8e44ad); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 3px; margin-left: 4px; font-weight: 500; line-height: 1.4; vertical-align: middle; letter-spacing: 0.5px; } .gc-chat-title-badge { display: inline-block; background: linear-gradient(135deg, #9b59b6, #8e44ad); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; font-weight: 500; line-height: 1.4; letter-spacing: 0.5px; } /* 群聊线下模式：成员状态弹窗 */ .group-member-popup { background: linear-gradient(135deg, #fff0f3 0%, #fce4ec 50%, #f3e5f5 100%); border-radius: 18px; width: 85%; max-width: 360px; max-height: 70vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(255,117,140,0.25); padding: 0; } .group-member-popup-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; font-size: 15px; font-weight: 600; color: #ff758c; border-bottom: 1px solid rgba(255,117,140,0.15); } .group-member-popup-close { font-size: 22px; cursor: pointer; color: #ccc; line-height: 1; } .group-member-popup-list { padding: 10px 14px 14px; } .group-member-popup-item { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid rgba(255,117,140,0.08); } .group-member-popup-item:last-child { border-bottom: none; } .group-member-popup-item img { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #ffb6c1; object-fit: cover; flex-shrink: 0; } .group-member-popup-info { flex: 1; min-width: 0; } .group-member-popup-name { font-size: 14px; font-weight: 500; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .group-member-popup-stats { display: flex; gap: 12px; margin-top: 4px; font-size: 12px; color: #ff758c; } .offline-ai-avatar-clickable { cursor: pointer; position: relative; } .offline-ai-avatar-clickable::after { content: ''; position: absolute; bottom: -2px; right: -2px; width: 14px; height: 14px; background: #ff758c; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 8px; color: #fff; } /* ===== 线下模式 黑白动漫二次元便签风格 ===== */ .offline-chat-history { padding: 16px 14px 28px 14px; /* 顶部留空，避免第一楼头像被遮 */ display: flex; flex-direction: column; gap: 52px; /* 增大间距，给头像溢出留空间 */ } /* 独立线下页有界历史窗口：按钮只切换当前 DOM 窗口，不删除任何记录。 */ .offline-history-window-control { align-self: center; max-width: calc(100% - 24px); min-height: 30px; padding: 6px 14px; border: 1px solid rgba(26, 26, 26, 0.2); border-radius: 16px; background: rgba(255, 255, 255, 0.92); color: #666; font-size: 12px; line-height: 1.4; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .offline-history-window-control:active { background: rgba(26, 26, 26, 0.08); } /* 便签主容器：黑白手绘风 */ .offline-msg-box { position: relative; width: 100%; border-radius: 2px; overflow: visible; background: #fff; border: 2px solid #1a1a1a; box-shadow: 4px 4px 0px #1a1a1a; /* 硬阴影，二次元感 */ padding-top: 36px; /* 给头像溢出区腾位置 */ -webkit-tap-highlight-color: transparent; /* [FIX-线下长消息翻不动] 确保卡片不阻塞触摸滚动 */ touch-action: pan-y; } /* 用户便签 */ .offline-msg-box.offline-note-user { background: #fff; border-color: #1a1a1a; } /* AI便签 */ .offline-msg-box.offline-note-ai { background: #f7f7f7; border-color: #1a1a1a; } /* 楼层标签：左上角 [FIX-楼层标签可美化] 支持 CSS 变量和自定义CSS覆盖 美化选择器: .offline-floor-badge 可用CSS变量: --offline-floor-bg 背景色/渐变 (默认 #1a1a1a) --offline-floor-color 文字颜色 (默认 #fff) --offline-floor-font-size 字号 (默认 10px) --offline-floor-font 字体 (默认 'Courier New', monospace) --offline-floor-padding 内边距 (默认 2px 7px) --offline-floor-radius 圆角 (默认 0) --offline-floor-border 边框 (默认 none) --offline-floor-shadow 阴影 (默认 none) */ .offline-floor-badge { position: absolute; top: var(--offline-floor-top, -2px); left: var(--offline-floor-left, -2px); background: var(--offline-floor-bg, #1a1a1a); color: var(--offline-floor-color, #fff); font-size: var(--offline-floor-font-size, 10px); font-weight: 900; font-family: var(--offline-floor-font, 'Courier New', monospace); padding: var(--offline-floor-padding, 2px 7px); letter-spacing: 0.5px; z-index: 10; line-height: 1.6; border-radius: var(--offline-floor-radius, 0); border: var(--offline-floor-border, none); box-shadow: var(--offline-floor-shadow, none); transition: background 0.2s, color 0.2s, border-radius 0.2s, box-shadow 0.2s; } /* [撤销重回] 版本徽章：右上角，和"更多"按钮左侧，表示当前是第几版 */ .offline-version-badge { position: absolute; top: 8px; right: 42px; background: rgba(26, 26, 26, 0.08); color: #666; font-size: 10px; font-weight: 600; font-family: 'Courier New', monospace; padding: 2px 6px; border-radius: 8px; letter-spacing: 0.3px; z-index: 9; line-height: 1.4; pointer-events: none; user-select: none; } /* 头像区域：绝对定位，从顶部中心横切溢出 */ .offline-note-avatar-wrap { position: absolute; top: -42px; /* 头像往上移，第一楼效果更明显 */ left: 50%; transform: translateX(-50%); z-index: 5; display: flex; justify-content: center; } .offline-note-avatar { width: 64px; height: 64px; border-radius: 50%; border: 3px solid #1a1a1a; box-shadow: 3px 3px 0px #1a1a1a; object-fit: cover; background: #eee; } .offline-note-user .offline-note-avatar { border-color: #1a1a1a; box-shadow: 3px 3px 0px #555; } .offline-note-ai .offline-note-avatar { border-color: #1a1a1a; box-shadow: 3px 3px 0px #555; filter: grayscale(30%); } /* 顶部区域：名字+时间（在头像下方，绝对居中） */ .offline-note-top-bar { position: relative; padding: 6px 0 0 0; min-height: 32px; display: flex; justify-content: center; align-items: center; width: 100%; } /* 时间+名字区域：绝对居中 */ .offline-note-meta { display: flex; flex-direction: column; align-items: center; gap: 1px; padding-bottom: 0; width: 100%; text-align: center; } .offline-note-name { font-size: 13px; font-weight: 900; color: #1a1a1a; letter-spacing: 1px; font-family: 'Courier New', monospace; text-align: center; width: 100%; } .offline-note-time { font-size: 10px; color: #888; letter-spacing: 1px; font-family: 'Courier New', monospace; text-align: center; width: 100%; } /* 虚线分隔线：中间横穿 */ .offline-note-divider { width: calc(100% - 28px); margin: 8px 14px; border: none; border-top: 2px dashed #bbb; position: relative; } /* 虚线两端装饰点 */ .offline-note-divider::before, .offline-note-divider::after { content: '◆'; position: absolute; top: -8px; font-size: 7px; color: #bbb; } .offline-note-divider::before { left: -2px; } .offline-note-divider::after { right: -2px; } /* 正文区域 */ .offline-msg-body { padding: 8px 16px 20px 16px; font-size: var(--main-font-size, 16px); line-height: 1.85; word-wrap: break-word; color: #1a1a1a; font-family: inherit; } .offline-msg-body.short-text { font-size: var(--main-font-size, 16px); font-weight: 600; padding: 10px 16px 24px 16px; color: #1a1a1a; text-align: center; letter-spacing: 0.5px; } /* [FIX-线下框自适应v2] 移除固定高度限制，让框随内容自然撑开 之前 max-height:55vh 导致长文本被截断在固定高度框内， 现在改为 max-height:none，由外层页面滚动控制 */ .offline-msg-body.offline-long-text { position: relative; max-height: none; overflow-y: visible; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; } /* 右上角"更多"按钮 */ .offline-more-btn { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 1.5px solid #1a1a1a; background: #fff; border-radius: 0; color: #1a1a1a; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: background 0.15s; z-index: 20; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .offline-more-btn:hover { background: #1a1a1a; color: #fff; } .offline-more-btn:active { background: #333; color: #fff; } /* 更多菜单下拉 - 极简卡片风格 */ .offline-more-menu { position: absolute; top: 38px; right: 8px; background: #ffffff; border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.04); z-index: 100; min-width: 140px; overflow: hidden; padding: 6px 0; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); animation: offlineMenuFadeIn 0.18s ease-out; } @keyframes offlineMenuFadeIn { from { opacity: 0; transform: translateY(-6px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .offline-more-item { padding: 11px 16px; font-size: 13px; color: #1a1a1a; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: background 0.15s ease; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; letter-spacing: 0; border-radius: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .offline-more-item i { width: 18px; text-align: center; font-size: 13px; color: #666; } .offline-more-item:hover, .offline-more-item:active { background: #f5f5f5; color: #1a1a1a; } .offline-more-item.offline-more-delete { color: #ff3b30; border-top: 1px solid #f0f0f0; margin-top: 2px; padding-top: 11px; } .offline-more-item.offline-more-delete i { color: #ff3b30; } .offline-more-item.offline-more-delete:hover, .offline-more-item.offline-more-delete:active { background: #fff5f5; color: #ff3b30; } /* 兼容旧CSS选择器（防止自定义CSS失效） */ .offline-msg-header { display: none; } .offline-delete-btn { display: none; } .offline-sender .avatar { display: none; } .offline-meta { display: none; } /* 私聊线下模式：宽文本块样式 */ .bubble.offline-text-block { max-width: 100% !important; width: 100%; background: #f8f6f0; border: 1px solid #e8e4d8; border-radius: 12px; padding: 16px 18px; font-size: 15px; line-height: 1.8; text-align: justify; color: #333; white-space: pre-wrap; word-wrap: break-word; } .msg-row.me .bubble.offline-text-block { background: #f0f7e6; border-color: #d4e8c0; } /* 让包含offline-text-block的bubbleContainer也撑满 */ .msg-row:has(.offline-text-block) > div:last-child { max-width: 85% !important; } /* [FIX-生成后字号变大] 线下正文字号由稳定根变量统一控制。 消息生成会替换或追加 DOM，不能只给当前节点写一次 inline 样式。 完整覆盖独立页、嵌入式私聊、群聊和原文/译文，不触碰姓名、 时间、头像、按钮等非正文元素。 */ html body #layer-offline-mode .offline-msg-body, html body #layer-offline-mode .offline-msg-body .offline-translate-original, html body #layer-offline-mode .offline-msg-body .offline-translate-result, html body #layer-chat .bubble.offline-text-block, html body #layer-chat .bubble.offline-text-block .offline-translate-original, html body #layer-chat .bubble.offline-text-block .offline-translate-result, html body #layer-chat .go-offline-bubble .go-bubble-content, html body #layer-chat .go-offline-bubble .go-bubble-content .offline-translate-original, html body #layer-chat .go-offline-bubble .go-bubble-content .offline-translate-result, html body #layer-chat .go-offline-bubble .go-foreign-original, html body #layer-chat .go-offline-bubble .go-foreign-translated { font-size: var(--offline-body-font-size, 15px) !important; } /* 线下模式在私聊界面中的视觉区分 - 背景变为淡粉色 */ #chat-history.offline-chat-active { background: linear-gradient(180deg, #fff5f7 0%, #ffeef1 100%) !important; } /* 线下模式浮动提示标签 */ #chat-history.offline-chat-active::before { content: '🔴 线下模式'; position: sticky; top: 0; display: block; text-align: center; padding: 4px 0; font-size: 12px; color: #ff758c; background: rgba(255,240,245,0.9); border-bottom: 1px solid rgba(255,117,140,0.2); z-index: 10; } /* [FIX-线下白条] 线下模式时layer-chat底色匹配粉色渐变，消除输入栏下方白色长条 */ #layer-chat:has(#chat-history.offline-chat-active) { background-color: #ffeef1 !important; } .offline-text-center { text-align: center; } .offline-text-left { text-align: left; text-indent: 2em; } .offline-highlight { font-weight: 900; /* 黑白风格：下划线高亮代替彩色 */ background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,0.18) 55%); padding: 0 3px; color: #000; text-decoration: underline; text-decoration-style: wavy; text-underline-offset: 2px; } /* [FIX-线下输入栏] 添加底部安全区域适配 */ .offline-input-bar { background: #fff; border-top: 2px solid #1a1a1a; padding: 10px 12px 10px 10px; display: flex; align-items: flex-end; gap: 8px; box-shadow: 0 -3px 0px #1a1a1a; max-width: 100%; box-sizing: border-box; overflow: visible; /* [FIX-线下输入键盘] 确保输入栏始终可见，不被键盘遮挡 */ flex-shrink: 0; position: relative; z-index: 1001; } .offline-input-bar input, .offline-input-bar textarea { flex: 1; min-width: 0; min-height: 36px; max-height: 120px; height: 36px; border: 1.5px solid #1a1a1a; border-radius: 0; padding: 8px 10px; font-size: 14px; background: #f9f9f9; font-family: inherit; color: #1a1a1a; resize: none; line-height: 1.4; overflow-y: hidden; box-sizing: border-box; } .offline-input-bar input:focus, .offline-input-bar textarea:focus { outline: none; background: #fff; box-shadow: 2px 2px 0px #1a1a1a; } .offline-icon-btn { background: none !important; border: none !important; box-shadow: none !important; font-size: 17px; color: #1a1a1a; padding: 6px; cursor: pointer; transition: transform 0.15s, color 0.15s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .offline-icon-btn:hover { color: #555; } .offline-icon-btn:active { transform: scale(0.85); opacity: 0.6; } /* ===== 线下模式编辑弹窗 [FIX-键盘遮挡v2] ===== */ /* [FIX-键盘遮挡v3] 弹窗改为屏幕居中，避免底部弹出被键盘遮挡 */ .offline-edit-modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; animation: offEditMaskIn 0.2s ease; box-sizing: border-box; } /* [FIX-键盘遮挡v3] 键盘弹出时，弹窗 mask 缩小到可见视口高度 * JS(editOfflineMessage)会通过visualViewport实时设置mask的height/top * 这里用CSS变量作为兜底方案，确保弹窗始终在可见区域内居中 */ html.keyboard-active .offline-edit-modal-mask { bottom: auto !important; height: var(--vv-height, 100%) !important; top: var(--vv-offset-top, 0px) !important; } html.keyboard-active .offline-edit-modal { max-height: 90% !important; } html.keyboard-active .offline-edit-modal-original { max-height: 80px !important; flex: 0 0 auto !important; } .offline-edit-modal-mask.offline-edit-modal-closing { opacity: 0; transition: opacity 0.2s ease; } @keyframes offEditMaskIn { from { opacity: 0; } to { opacity: 1; } } .offline-edit-modal { width: 100%; max-width: 500px; max-height: 70vh; background: #fff; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; animation: offEditSlideUp 0.25s ease; } @keyframes offEditSlideUp { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } .offline-edit-modal-closing .offline-edit-modal { transform: scale(0.95); opacity: 0; transition: all 0.2s ease; } .offline-edit-modal-title { padding: 14px 16px 8px; font-size: 15px; font-weight: 600; color: #333; text-align: center; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; } .offline-edit-modal-original { flex: 0 1 auto; max-height: 30vh; overflow-y: auto; padding: 12px 16px; font-size: 14px; line-height: 1.7; color: #666; background: #f8f8f8; border-bottom: 1px solid #eee; -webkit-overflow-scrolling: touch; word-break: break-word; } .offline-edit-modal-textarea { flex: 1 1 auto; min-height: 100px; max-height: 35vh; padding: 12px 16px; font-size: 15px; line-height: 1.7; color: #333; border: none; outline: none; resize: none; font-family: inherit; background: #fff; box-sizing: border-box; width: 100%; } .offline-edit-modal-textarea:focus { background: #fafffe; } .offline-edit-modal-btns { display: flex; border-top: 1px solid #f0f0f0; flex-shrink: 0; padding-bottom: env(safe-area-inset-bottom, 0px); } .offline-edit-modal-cancel, .offline-edit-modal-confirm { flex: 1; padding: 14px 0; font-size: 15px; border: none; cursor: pointer; font-family: inherit; transition: background 0.15s; } .offline-edit-modal-cancel { background: #f5f5f5; color: #666; border-right: 1px solid #eee; border-radius: 0; } .offline-edit-modal-cancel:active { background: #e8e8e8; } .offline-edit-modal-confirm { background: #fff; color: var(--primary, #07c160); font-weight: 600; border-radius: 0; } .offline-edit-modal-confirm:active { background: #f0faf5; } /* ===== 线下模式多选删除 ===== */ .offline-batch-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; padding-bottom: 10px; background: #fff; border-top: 1px solid #eee; position: relative; z-index: 10; } .offline-batch-btn { padding: 8px 16px; border: 1.5px solid #1a1a1a; background: transparent; color: #1a1a1a; border-radius: 20px; font-size: 13px; cursor: pointer; font-weight: 500; } .offline-batch-btn:active { opacity: 0.7; } .offline-batch-delete { background: #fa5151; color: #fff; border-color: #fa5151; } .offline-batch-cancel { background: transparent; color: #999; border-color: #ccc; } .offline-batch-selected { outline: 2.5px solid #fa5151 !important; outline-offset: -2px; } .offline-batch-checkbox { position: absolute; top: 8px; right: 8px; z-index: 5; font-size: 20px; color: #ccc; pointer-events: none; } .offline-batch-checkbox.checked { color: #fa5151; } /* ===== 线下模式折叠工具栏 ===== */ .offline-toolbar { display: flex; justify-content: space-around; align-items: center; padding: 10px 16px; background: rgba(255,255,255,0.95); border-top: 1px solid #eee; } .offline-toolbar i { font-size: 22px; color: #555; padding: 8px 12px; cursor: pointer; border-radius: 8px; } .offline-toolbar i:active { background: rgba(0,0,0,0.05); } /* Popups */ .pop-menu { position: absolute; z-index: 6000; background: #4c4c4c; border-radius: 8px; padding: 4px 6px; display: none; box-shadow: 0 5px 15px rgba(0,0,0,0.3); min-width: 280px; } .pop-menu-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; } .pop-opt { color: #fff; padding: 6px 6px; font-size: 11px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: 4px; } .pop-opt:active { background: rgba(255,255,255,0.15); } .pop-opt i { font-size: 15px; } .pop-opt span { white-space: nowrap; } /* 置顶消息区域 - 微信风格横幅 */ .pinned-msgs-container { background: #f5f6f7; border-radius: 12px; margin: 6px 10px 4px 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border: 0.5px solid #e8e8e8; } .pinned-msg-item { display: flex; align-items: center; padding: 10px 16px; background: #f5f6f7; cursor: pointer; transition: background 0.15s; gap: 10px; border-bottom: 0.5px solid #e8e8e8; } .pinned-msg-item:first-child { border-radius: 12px 12px 0 0; } .pinned-msg-item:last-child { border-radius: 0 0 12px 12px; border-bottom: none; } .pinned-msg-item:only-child { border-radius: 12px; } .pinned-msg-item:active { background: #eaebec; } .pinned-msg-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pinned-msg-icon i { color: #b0b0b0; font-size: 13px; transform: rotate(45deg); } .pinned-msg-body { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: baseline; gap: 6px; } .pinned-msg-sender { display: none; font-size: 13px; color: #576b95; white-space: nowrap; flex-shrink: 0; font-weight: 500; } .pinned-msg-text { font-size: 13px; color: #888; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pinned-msg-close { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; color: #c0c0c0; font-size: 11px; cursor: pointer; transition: all 0.15s; } .pinned-msg-close:hover { background: #e8e8e8; color: #999; } .pinned-msg-close:active { background: #ddd; color: #666; } .contact-menu { position: absolute; z-index: 6000; background: #4c4c4c; border-radius: 8px; padding: 5px 0; display: none; flex-direction: column; min-width: 120px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); } .contact-menu-item { color: #fff; padding: 12px 20px; font-size: 15px; border-bottom: 1px solid #5d5d5d; cursor: pointer; text-align: center; } .contact-menu-item:last-child { border: none; } .add-menu { position: absolute; top: 44px; right: 10px; width: 160px; background: #4c4c4c; border-radius: 8px; display: none; flex-direction: column; z-index: 6100; } .add-item { color: #fff; padding: 12px 15px; border-bottom: 1px solid #5d5d5d; font-size: 15px; display: flex; gap: 10px; align-items: center; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; } .add-item:active { background: rgba(255,255,255,0.1); } /* 新的加号菜单展开面板样式 - ins简洁风 */ .ext-menu-panel { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 12px 20px 12px; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 5003; display: none; max-height: 55vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .ext-menu-panel.show { display: block; transform: translateY(0); } .ext-menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-width: 400px; margin: 0 auto; } .ext-menu-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; background: transparent; cursor: pointer; transition: all 0.2s; } .ext-menu-item:active { transform: scale(0.92); opacity: 0.6; } .ext-menu-item i { font-size: 17px; color: #262626; } .ext-menu-item span { font-size: 10px; color: #262626; font-weight: 400; } .ext-menu-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: transparent; z-index: 5002; display: none; } .ext-menu-overlay.show { display: block; } /* 输入栏上移动画 */ .input-bar.ext-menu-active { transform: translateY(-100%); transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .sticker-panel { height: 220px; background: #f2f2f2; overflow-y: auto; overflow-x: hidden; padding: 10px; display: none; grid-template-columns: repeat(4, calc(25% - 8px)); gap: 10px; border-top: 1px solid #ddd; box-sizing: border-box; -webkit-box-sizing: border-box; width: 100%; } /* [表情包顶部分类切换] 面板内顶部一排可横向滑动的分类tab + 下方表情grid */ .sticker-panel-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 0 0 8px; flex: 0 0 auto; border-bottom: 1px solid #e6e6e6; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-behavior: smooth; } .sticker-panel-tabs::-webkit-scrollbar { display: none; } .sticker-panel-tab { flex: 0 0 auto; padding: 5px 14px; font-size: 13px; color: #666; background: #fff; border-radius: 14px; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s; } .sticker-panel-tab.active { background: var(--primary, #07c160); color: #fff; font-weight: 600; } .sticker-panel-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; display: grid; grid-template-columns: repeat(3, calc(33.33% - 7px)); gap: 8px; padding: 8px 0 8px; align-content: start; animation: stickerGridFade .22s ease; } @keyframes stickerGridFade { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } /* [FIX-问题2] 增加 min-height 至 76px，overflow 改为 visible，让名称标签完整显示不被截断 */ /* [FIX-iOS/鸿蒙表情宽度] 添加min-width:0 + max-width:100%防止grid子项撑破列宽 */ .sticker-item { font-size: 28px; background: #fff; border-radius: 8px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; min-height: 76px; cursor: pointer; object-fit: contain; overflow: visible; position: relative; padding: 4px 2px 4px; min-width: 0; max-width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; } .sticker-item img { width: 100%; max-width: 100%; height: 50px; object-fit: contain; flex-shrink: 0; } /* [FIX-问题2] line-height 改为 1.4，padding 补足底部，确保文字不被行高截断 */ .sticker-item-name { font-size: 10px; color: #888; line-height: 1.4; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 2px 2px; flex-shrink: 0; } .sticker-layout { display: flex; flex: 1; min-height: 0; overflow: hidden; } .sticker-sidebar { width: 80px; background: #f7f7f7; border-right: 1px solid #eee; display: flex; flex-direction: column; overflow-y: auto; } .sticker-cate-tab { padding: 15px 5px; text-align: center; font-size: 13px; color: #666; cursor: pointer; border-bottom: 1px solid #f0f0f0; word-break: break-all; } .sticker-cate-tab.active { background: #fff; color: var(--primary); border-left: 3px solid var(--primary); font-weight: bold; } /* [FIX-问题3] padding-bottom 改为 60px，确保最后一行表情包不被底部管理栏遮挡 */ .sticker-content { flex: 1; min-height: 0; background: #fff; padding: 10px 10px 60px; overflow-y: auto; } /* Settings & Forms */ .group-box { background: #fff; margin-bottom: 12px; border-radius: var(--radius-box); overflow: hidden; margin: 10px; } .form-cell { display: flex; align-items: center; padding: 14px; border-bottom: 1px solid #f5f5f5; font-size: 16px; cursor: pointer; position: relative; } /* 模式选择卡片 */ .mode-choice-card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 20px; margin-bottom: 15px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 15px; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; position: relative; z-index: 1; } .mode-choice-card:active { background: #f9f9f9; transform: scale(0.98); } .mode-icon { width: 50px; height: 50px; border-radius: 50%; background: #ffeef1; color: #ff758c; display: flex; justify-content: center; align-items: center; font-size: 24px; } /* Message Animation (Disabled per user request to prevent shaking) */ .msg-row { /* animation: msgPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); */ } #chat-history.multi-select-mode .msg-row { animation: none !important; } .form-label { flex: 1; color: var(--text-main); } .form-val { color: var(--text-sub); font-size: 15px; max-width: 60%; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .switch { position: relative; width: 50px; height: 28px; } .switch input { opacity: 0; width: 100%; height: 100%; position: absolute; z-index: 10; cursor: pointer; top:0; left:0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; pointer-events: none; } .slider:before { position: absolute; content: ""; height: 24px; width: 24px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .slider { background-color: var(--primary); } input:checked + .slider:before { transform: translateX(22px); } /* Lists */ .list-item { display: flex; align-items: center; padding: 15px; background: #fff; border-bottom: 1px solid #f0f0f0; cursor: pointer; } .list-item > i { width: 24px; text-align: center; flex-shrink: 0; } .avatar { width: var(--list-avatar-size, 34px); height: var(--list-avatar-size, 34px); border-radius: var(--list-avatar-radius, 8px); object-fit: cover; background: #eee; flex-shrink: 0; } .unread-badge { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; background:#ff3b30; color:#fff; border-radius:9px; font-size:11px; display:flex; align-items:center; justify-content:center; padding:0 5px; border:2px solid #fff; font-weight:600; box-sizing:border-box; z-index:2; } .list-content { flex: 1; margin-left: 14px; } .list-title { font-size: var(--font-size-main); font-weight: 500; color: var(--text-main); } .list-sub { font-size: var(--font-size-sub); color: var(--text-sub); margin-top: 4px; } /* [FIX-气泡持久化v4] 联系人列表"正在输入"打字动效 */ .contact-typing-dots { display:inline; } .contact-typing-dots span { animation: contactTypingDot 1.4s infinite; opacity: 0; } .contact-typing-dots span:nth-child(2) { animation-delay: 0.2s; } .contact-typing-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes contactTypingDot { 0%, 60%, 100% { opacity: 0; } 30% { opacity: 1; } } .wb-category-bar { display: flex; overflow-x: auto; background: #fff; padding: 10px; gap: 10px; border-bottom: 1px solid #eee; white-space: nowrap; } .wb-cate-chip { padding: 4px 12px; background: #f2f2f2; border-radius: 16px; font-size: 13px; color: #666; cursor: pointer; } .wb-cate-chip.active { background: var(--primary); color: #fff; } /* [FIX-世界书展开] 覆盖 .group-box 的 overflow:hidden，确保世界书内容完全展开可见 */ .wb-item { overflow: visible !important; } .wb-item .wb-content { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f5f5f5; white-space: pre-wrap; word-break: break-word; } .wb-item.collapsed .wb-content { display: none; } .wb-item.collapsed .wb-edit-area { display: none !important; } /* [FIX-世界书展开] 非折叠非编辑状态：确保编辑按钮始终可见 */ .wb-item .wb-btn.edit { display: inline-block; } .wb-edit-area { display: none; margin-top: 10px; } /* [FIX-世界书编辑] 编辑模式：隐藏内容，显示编辑区，隐藏编辑按钮 */ .wb-item.wb-editing .wb-content { display: none !important; } .wb-item.wb-editing .wb-edit-area { display: block !important; } .wb-item.wb-editing .wb-btn.edit { display: none !important; } .wb-edit-area textarea { width: 100%; height: 100px; padding: 8px; border: 1px solid #ddd; border-radius: 6px; resize: vertical; } .wb-btn-row { display: flex; gap: 10px; margin-top: 10px; justify-content: flex-end; } .wb-btn { padding: 4px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; color: #fff; border: none; } .wb-btn.edit { background: var(--link); } .wb-btn.del { background: var(--red); } .wb-btn.save { background: var(--primary); } .wb-btn.cancel { background: #999; } /* Couple App New Style */ .couple-list-page { flex: 1; overflow-y: auto; background: #f5f5f7; padding: 20px 16px; } .couple-list-card { background: #fff; border-radius: 16px; padding: 18px; margin-bottom: 12px; display: flex; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.04); cursor: pointer; transition: transform 0.1s; border: 1px solid rgba(0,0,0,0.03); } .couple-list-card:active { transform: scale(0.98); } .couple-list-avatars { position: relative; width: 70px; height: 50px; flex-shrink: 0; } .couple-list-avatars img { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; position: absolute; top: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } .couple-list-avatars img:first-child { left: 0; z-index: 2; } .couple-list-avatars img:last-child { left: 24px; z-index: 1; } .couple-list-info { flex: 1; margin-left: 10px; overflow: hidden; } .couple-list-name { font-size: 16px; font-weight: 600; color: #1d1d1f; margin-bottom: 4px; } .couple-list-days { font-size: 13px; color: #ff758c; } /* Couple Detail Page */ .couple-detail-container { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; } .couple-detail-bg { position: absolute; top: 0; left: 0; right: 0; height: 280px; background-size: cover; background-position: center; background-color: #ffeef1; z-index: 0; } .couple-detail-bg::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.02) 40%, rgba(255,255,255,0.6) 80%, rgba(255,255,255,1) 100%); } .couple-detail-nav { position: relative; z-index: 10; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; margin-top: 0; } .couple-detail-nav .nav-icon { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.3); font-size: 20px; padding: 10px; cursor: pointer; z-index: 2; min-width: 40px; text-align: center; } .couple-detail-hero { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; padding: 20px 0 10px; } .couple-hero-avatars { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; } .couple-hero-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.15); } .couple-hero-heart { font-size: 24px; color: #ff4d6a; animation: heartBeat 1.5s infinite; text-shadow: 0 2px 8px rgba(255,77,106,0.3); } .couple-hero-days { font-size: 18px; font-weight: 500; margin-bottom: 6px; text-shadow: 0 1px 3px rgba(0,0,0,0.1); white-space: nowrap; } .couple-hero-names { font-size: 14px; opacity: 0.85; text-shadow: 0 1px 3px rgba(0,0,0,0.1); } /* Couple Detail Modules */ .couple-modules-scroll { position: relative; z-index: 10; flex: 1; overflow-y: auto; padding: 15px 16px 30px; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; background: #fff; } .couple-modules-scroll::-webkit-scrollbar { display: none; } .couple-module-card { background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 16px; padding: 16px 18px; margin-bottom: 12px; display: flex; align-items: center; cursor: pointer; transition: transform 0.1s; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid rgba(255,255,255,0.6); } .couple-module-card:active { transform: scale(0.98); } .couple-module-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 22px; margin-right: 14px; flex-shrink: 0; color: #262626; background: transparent !important; box-shadow: none; } .couple-module-text { flex: 1; overflow: hidden; } .couple-module-title { font-size: 16px; font-weight: 600; color: #1d1d1f; margin-bottom: 3px; } .couple-module-desc { font-size: 12px; color: #86868b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .couple-module-arrow { color: #c7c7cc; font-size: 14px; margin-left: 8px; flex-shrink: 0; } /* Couple Detail Text Color */ .couple-detail-hero .couple-hero-days, .couple-detail-hero .couple-hero-names { color: var(--couple-text-color, #fff); } /* Couple Settings Modal */ .couple-settings-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 100; display: none; justify-content: center; align-items: flex-end; } .couple-settings-overlay.show { display: flex; } .couple-settings-sheet { width: 100%; background: #fff; border-radius: 20px 20px 0 0; padding: 20px; max-height: 70%; overflow-y: auto; } .couple-settings-sheet h3 { text-align: center; margin-bottom: 20px; font-size: 17px; } /* ========== DATING MODULE ========== */ .dating-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #f7f7fa; display: flex; flex-direction: column; overflow: hidden; } .dating-nav { position: relative; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 6px 16px 12px; background: #fff; border-bottom: 1px solid #f0f0f0; } .dating-nav .nav-icon { color: #333; font-size: 18px; cursor: pointer; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; } .dating-nav-title { color: #333; font-size: 17px; font-weight: 600; letter-spacing: 1px; } .dating-stars { display: none; } .dating-star { display: none; } @keyframes datingStar { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } } .dating-scroll { flex: 1; overflow-y: auto; padding: 0 16px 30px; position: relative; z-index: 5; -webkit-overflow-scrolling: touch; } .dating-scroll::-webkit-scrollbar { display: none; } /* Hero section */ .dating-hero { text-align: center; padding: 10px 0 25px; } .dating-hero-icon { width: 80px; height: 80px; margin: 0 auto 15px; background: linear-gradient(135deg, #ff6b8a 0%, #ff8e53 50%, #ffd26f 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #fff; box-shadow: 0 8px 30px rgba(255,107,138,0.25); animation: datingHeroFloat 4s ease-in-out infinite; } @keyframes datingHeroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .dating-hero h2 { color: #333; font-size: 22px; font-weight: 700; margin-bottom: 6px; letter-spacing: 0.5px; } .dating-hero p { color: #999; font-size: 13px; } /* Generate button */ .dating-gen-btn { width: 100%; padding: 16px; border: none; border-radius: 16px; font-size: 16px; font-weight: 700; color: #fff; background: #333; box-shadow: 0 4px 15px rgba(0,0,0,0.12); cursor: pointer; letter-spacing: 1px; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; } .dating-gen-btn:active { transform: scale(0.97); box-shadow: 0 3px 15px rgba(255,107,138,0.2); } .dating-gen-btn.loading { opacity: 0.7; pointer-events: none; } .dating-gen-btn .spinner-small { width: 20px; height: 20px; border: 3px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Category tabs */ .dating-category-tabs { display: flex; gap: 8px; margin-bottom: 18px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .dating-category-tabs::-webkit-scrollbar { display: none; } .dating-cat-tab { padding: 8px 18px; border-radius: 20px; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: all 0.3s; border: 1px solid #e0e0e0; color: #666; background: #fff; } .dating-cat-tab.active { background: linear-gradient(135deg, #ff6b8a 0%, #c471f5 100%); color: #fff; border-color: transparent; box-shadow: 0 3px 12px rgba(255,107,138,0.2); } /* Date cards */ .dating-cards-area { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; } .dating-card { background: #fff; border-radius: 20px; padding: 20px; border: 1px solid #f0f0f0; transition: all 0.3s; cursor: pointer; position: relative; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.04); } .dating-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #ff6b8a, #c471f5, #ffd26f); opacity: 0; transition: opacity 0.3s; } .dating-card:active::before, .dating-card.expanded::before { opacity: 1; } .dating-card-header { display: flex; align-items: flex-start; gap: 14px; } .dating-card-emoji { width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; background: linear-gradient(135deg, #fff0f3, #f5eeff); } .dating-card-info { flex: 1; min-width: 0; } .dating-card-name { color: #333; font-size: 16px; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; } .dating-card-tag { font-size: 10px; padding: 2px 8px; border-radius: 10px; background: #fff0f3; color: #ff6b8a; font-weight: 600; } .dating-card-location { color: #999; font-size: 12px; display: flex; align-items: center; gap: 4px; margin-bottom: 8px; } .dating-card-desc { color: #666; font-size: 13px; line-height: 1.6; } .dating-card-meta { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; } .dating-meta-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #999; background: #f7f7fa; padding: 5px 10px; border-radius: 8px; } .dating-meta-item i { font-size: 12px; color: #ff8fa3; } /* Card expanded detail */ .dating-card-detail { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, margin-top 0.3s ease, opacity 0.3s ease; opacity: 0; } .dating-card.expanded .dating-card-detail { max-height: 500px; margin-top: 16px; opacity: 1; } .dating-detail-section { margin-bottom: 14px; } .dating-detail-title { color: #aaa; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; } .dating-detail-text { color: #555; font-size: 13px; line-height: 1.7; } .dating-card-actions { display: flex; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #f0f0f0; } .dating-action-btn { flex: 1; padding: 10px; border: none; border-radius: 12px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.2s; } .dating-action-btn.primary { background: #333; color: #fff; box-shadow: 0 3px 12px rgba(0,0,0,0.12); } .dating-action-btn.secondary { background: #f7f7fa; color: #666; border: 1px solid #e0e0e0; } .dating-action-btn:active { transform: scale(0.96); } /* Saved dates section */ .dating-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .dating-section-title { color: #333; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .dating-section-title i { color: #ff8fa3; font-size: 14px; } .dating-section-count { color: #aaa; font-size: 12px; } .dating-saved-card { background: #fff; border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; border: 1px solid #f0f0f0; cursor: pointer; transition: all 0.2s; box-shadow: 0 1px 6px rgba(0,0,0,0.03); } .dating-saved-card:active { background: #f9f9fb; } .dating-saved-emoji { font-size: 28px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #f7f7fa; border-radius: 12px; flex-shrink: 0; } .dating-saved-info { flex: 1; min-width: 0; } .dating-saved-name { color: #333; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dating-saved-date { color: #aaa; font-size: 11px; margin-top: 3px; } .dating-saved-del { color: #ccc; font-size: 14px; padding: 8px; cursor: pointer; transition: color 0.2s; } .dating-saved-del:active { color: #ff6b8a; } /* Empty state */ .dating-empty { text-align: center; padding: 40px 20px; } .dating-empty-icon { font-size: 48px; margin-bottom: 15px; opacity: 0.6; } .dating-empty-text { color: #999; font-size: 14px; line-height: 1.6; } /* Divider */ .dating-divider { height: 1px; background: linear-gradient(90deg, transparent, #e0e0e0, transparent); margin: 24px 0; } /* Loading skeleton */ .dating-skeleton { background: #fff; border-radius: 20px; padding: 20px; margin-bottom: 14px; border: 1px solid #f0f0f0; } .dating-skeleton-line { height: 14px; background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); background-size: 200% 100%; border-radius: 7px; margin-bottom: 10px; animation: shimmer 1.5s infinite; } .dating-skeleton-line:last-child { margin-bottom: 0; } .dating-skeleton-line.short { width: 60%; } .dating-skeleton-line.medium { width: 80%; } /* Dating Settings Overlay */ .dating-settings-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: none; justify-content: center; align-items: flex-end; z-index: 100; opacity: 0; transition: opacity 0.3s; } .dating-settings-overlay.show { opacity: 1; } .dating-settings-sheet { width: 100%; max-width: 400px; background: #fff; border-radius: 20px 20px 0 0; padding: 24px 20px 30px; transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .dating-settings-overlay.show .dating-settings-sheet { transform: translateY(0); } .dating-settings-sheet select option { background: #fff; color: #333; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Couple Sub Pages */ .couple-subpage { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #f5f5f7; z-index: 50; display: none; flex-direction: column; } .couple-subpage.show { display: flex; } /* Other Apps */ .weather-card { background: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%); color: #fff; padding: 20px; border-radius: 12px; margin: 15px; position: relative; } /* Calendar System */ .calendar-container { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); } .calendar-header { display: flex; align-items: center; gap: 8px; padding: 14px 16px; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; } .cal-month-title { flex: 1; text-align: center; font-size: 16px; font-weight: 600; letter-spacing: 1px; } .cal-nav-btn { background: rgba(255,255,255,0.2); border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; transition: background 0.2s; } .cal-nav-btn:hover { background: rgba(255,255,255,0.35); } .cal-today-btn { background: rgba(255,255,255,0.25); border: none; color: #fff; padding: 4px 12px; border-radius: 14px; font-size: 12px; cursor: pointer; font-weight: 500; transition: background 0.2s; } .cal-today-btn:hover { background: rgba(255,255,255,0.4); } .calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; padding: 10px 8px 6px; font-size: 12px; color: #999; font-weight: 500; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 8px 10px; gap: 2px; } .cal-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 40px; border-radius: 10px; cursor: pointer; font-size: 14px; color: #333; transition: all 0.15s; } .cal-day:hover { background: #f0f0ff; } .cal-day.today { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; font-weight: 700; box-shadow: 0 2px 8px rgba(102,126,234,0.35); } .cal-day.other-month { color: #ccc; } .cal-day.selected { outline: 2px solid #667eea; outline-offset: -2px; } .cal-day.has-holiday .cal-dot { background: #ff4757; } .cal-day.has-special .cal-dot { background: #ffa502; } .cal-day.has-both .cal-dot { background: linear-gradient(90deg, #ff4757, #ffa502); width: 12px; } .cal-dot { width: 5px; height: 5px; border-radius: 3px; position: absolute; bottom: 3px; } .cal-day.today .cal-dot { background: rgba(255,255,255,0.7); } .calendar-events { padding: 10px 14px 14px; max-height: 180px; overflow-y: auto; } .cal-event-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; margin-bottom: 6px; font-size: 13px; background: #f8f8ff; transition: background 0.15s; } .cal-event-item:hover { background: #eef0ff; } .cal-event-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .cal-event-dot.holiday { background: #ff4757; } .cal-event-dot.special { background: #ffa502; } .cal-event-dot.greeting { background: #2ed573; } .cal-event-info { flex: 1; } .cal-event-name { font-weight: 500; color: #333; } .cal-event-date { font-size: 11px; color: #999; margin-top: 2px; } .cal-event-actions { display: flex; gap: 6px; } .cal-event-actions i { font-size: 13px; color: #bbb; cursor: pointer; padding: 4px; transition: color 0.15s; } .cal-event-actions i:hover { color: #ff4757; } .cal-no-events { text-align: center; color: #bbb; font-size: 13px; padding: 15px 0; } .cal-greeting-badge { display: inline-flex; align-items: center; gap: 3px; background: #e8f8f0; color: #2ed573; font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-left: 6px; } .phone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 15px; } .phone-card { background: #fff; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; aspect-ratio: 1; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .full-btn { width: 90%; margin: 20px 5%; padding: 12px; background: var(--primary); color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; } .red { background: var(--red); } /* ===== Check Phone - Realistic Phone UI ===== */ #layer-checkphone { background: #fff !important; display: flex; flex-direction: column; } #layer-checkphone .nav-bar { display: none !important; } .cp-phone-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 16px; overflow: hidden; background: #fff; } .cp-back-btn { color: #333; font-size: 13px; margin-bottom: 8px; cursor: pointer; align-self: flex-start; padding: 4px 8px; border-radius: 6px; transition: color .2s; } .cp-back-btn:active { color: #fff; } .cp-phone-frame { width: 100%; max-width: 360px; flex: 1; max-height: 88vh; min-height: 0; background: #000; border-radius: 52px; border: 4px solid #111; box-shadow: 0 0 0 2px #ddd, 0 20px 60px rgba(0,0,0,0.15); display: flex; flex-direction: column; overflow: hidden; position: relative; } .cp-notch { display: none; width: 120px; height: 30px; background: #000; border-radius: 0 0 18px 18px; margin: 0 auto; position: relative; z-index: 2; } .cp-notch::after { content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background: #1a1a1a; box-shadow: 0 0 2px rgba(255,255,255,0.08); } .cp-status-bar { display: flex; justify-content: space-between; align-items: center; padding: 0 24px; height: 18px; margin-top: -4px; position: relative; z-index: 1; } .cp-time-small { color: #333; font-size: 12px; font-weight: 600; } .cp-status-icons { display: flex; gap: 5px; color: #333; font-size: 10px; } .cp-screen { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; background: #fff; margin: 2px 4px 0; border-radius: 6px 6px 0 0; display: flex; flex-direction: column; -webkit-overflow-scrolling: touch; } .cp-screen::-webkit-scrollbar { display: none; } .cp-home-indicator { width: 130px; height: 5px; background: #444; border-radius: 3px; margin: 8px auto 10px; flex-shrink: 0; } /* Lock screen / select prompt */ .cp-select-prompt { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 20px; background: #fff; } .cp-select-btn { padding: 10px 28px; background: #222; color: #fff; border: none; border-radius: 20px; font-size: 14px; cursor: pointer; transition: all .2s; } .cp-select-btn:active { background: #444; } /* Big clock + date */ .cp-clock-area { text-align: center; padding: 60px 0 10px; margin-top: auto; } .cp-big-time { font-size: 56px; font-weight: 200; color: #111; letter-spacing: 2px; line-height: 1; } .cp-date-line { font-size: 13px; color: #888; margin-top: 4px; letter-spacing: 0.5px; } /* Owner label */ .cp-owner-label { text-align: center; color: #aaa; font-size: 11px; padding: 8px 0 0; letter-spacing: 1px; } /* App icon grid */ .cp-app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 0; padding: 14px 28px 10px; margin-bottom: auto; } .cp-app-icon { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; } .cp-app-icon span { color: #555; font-size: 10px; text-align: center; } .cp-app-icon-box { width: 52px; height: 52px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; transition: transform .15s; } .cp-app-icon:active .cp-app-icon-box { transform: scale(0.88); } /* Dock bar */ .cp-dock { display: flex; justify-content: center; gap: 20px; padding: 10px 0 12px; background: rgba(245,245,245,0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid #e0e0e0; flex-shrink: 0; } .cp-dock-icon { width: 46px; height: 46px; border-radius: 13px; background: #333; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; cursor: pointer; transition: transform .15s; } .cp-dock-icon:active { transform: scale(0.88); } /* --- Phone Translation UI --- */ .phone-tl-btn { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #576b95; cursor: pointer; padding: 2px 8px; margin-top: 4px; border: 1px solid rgba(87,107,149,0.3); border-radius: 10px; background: rgba(87,107,149,0.06); transition: all 0.2s; } .phone-tl-btn:active { background: rgba(87,107,149,0.15); } .phone-tl-btn i { font-size: 10px; } .phone-tl-text { display: none; font-size: 12px; color: #888; margin-top: 4px; padding: 6px 10px; background: rgba(0,0,0,0.03); border-radius: 8px; border-left: 2px solid #576b95; line-height: 1.5; } .phone-tl-text.show { display: block; } /* 外语联系人标识 */ .phone-lang-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #fff; padding: 2px 8px; border-radius: 10px; background: linear-gradient(135deg, #667eea, #764ba2); } /* Contact selector modal */ .cp-contact-modal { background: #fff; border-radius: 16px; width: 85%; max-width: 340px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .cp-contact-modal-title { padding: 18px 20px 12px; font-size: 16px; font-weight: 600; color: #222; text-align: center; border-bottom: 1px solid #eee; } .cp-contact-item { display: flex; align-items: center; padding: 12px 16px; gap: 12px; cursor: pointer; transition: background .15s; border-bottom: 1px solid #f0f0f0; } .cp-contact-item:active { background: #f5f5f5; } .cp-contact-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #e0e0e0; } .cp-contact-name { flex: 1; color: #333; font-size: 15px; } .cp-contact-modal-cancel { padding: 14px; text-align: center; color: #999; font-size: 15px; cursor: pointer; border-top: 1px solid #eee; } .cp-contact-modal-cancel:active { background: #f5f5f5; } /* Timeline UI */ .timeline-container { padding: 20px 10px; } .timeline-item { position: relative; padding-left: 30px; padding-bottom: 25px; border-left: 2px dashed #ddd; margin-left: 10px; } .timeline-item:last-child { border-left: none; } .timeline-dot { position: absolute; left: -8px; top: 0; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); } .timeline-time { font-size: 13px; font-weight: bold; color: #333; margin-bottom: 4px; } .timeline-content { background: #fff; padding: 12px; border-radius: 8px; font-size: 14px; color: #555; box-shadow: 0 1px 3px rgba(0,0,0,0.05); } /* Shopping UI */ .shopping-card { background: #fff; border-radius: 12px; padding: 15px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); display: flex; gap: 12px; } .shop-icon { width: 50px; height: 50px; background: #f7f7f7; border-radius: 8px; display: flex; justify-content: center; align-items: center; font-size: 24px; color: #aaa; flex-shrink: 0; } .shop-info { flex: 1; } .shop-title { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 4px; line-height: 1.4; } .shop-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #888; margin-bottom: 6px; } .shop-note { font-size: 12px; color: #ff758c; background: #fff0f3; padding: 4px 8px; border-radius: 4px; display: inline-block; } /* Interest Radar UI */ .interest-cloud { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 0; justify-content: center; } .interest-tag { padding: 8px 16px; border-radius: 20px; font-size: 14px; background: rgba(255,255,255,0.8); border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 2px 5px rgba(0,0,0,0.05); color: #555; transition: all 0.2s; cursor: pointer; } .interest-tag.hot { background: #ffeef1; color: #ff758c; border-color: #ffcdd2; font-weight: bold; transform: scale(1.1); } .interest-tag:active { transform: scale(0.95); } .interest-evidence { margin-top: 20px; border-top: 1px solid #eee; padding-top: 15px; display: none; } .evidence-box { background: #f9f9f9; padding: 10px; border-radius: 8px; font-size: 13px; color: #666; margin-top: 8px; font-style: italic; } /* Expanded Search UI */ .search-expand-panel { background: #f9f9f9; padding: 12px; border-radius: 8px; margin-top: 8px; display: none; border: 1px solid #eee; } .search-res-title { color: #1a0dab; font-size: 15px; margin-bottom: 4px; text-decoration: underline; font-weight: 500; } .search-res-desc { color: #545454; font-size: 13px; line-height: 1.5; } .search-ai-note { margin-top: 8px; font-size: 12px; color: #ff9a9e; display: flex; align-items: center; gap: 5px; } .search-read-btn { margin-top: 10px; padding: 8px 14px; background: #576b95; color: #fff; border-radius: 6px; font-size: 13px; text-align: center; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; } .search-read-btn:active { background: #3d5a80; } /* Shopping Section */ .shop-section-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } /* Assets UI - 极简白卡片风格 */ .asset-section { background: #ffffff; border-radius: 16px; padding: 20px; margin-bottom: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.04); } .asset-section-header { font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; letter-spacing: 0.3px; } .asset-section-header i { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #f5f5f5; font-size: 14px; } .asset-wallet-balance { font-size: 36px; font-weight: 600; color: #1a1a1a; text-align: center; padding: 16px 0 8px; letter-spacing: -0.5px; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif; } .asset-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid #f2f2f2; } .asset-item:last-child { border-bottom: none; } .asset-item-name { font-size: 14px; color: #1a1a1a; flex: 1; font-weight: 500; } .asset-item-detail { font-size: 12px; color: #999; flex: 1; text-align: center; } .asset-item-value { font-size: 14px; font-weight: 600; text-align: right; min-width: 80px; } .asset-item-value.up { color: #1a1a1a; } .asset-item-value.down { color: #999; } .asset-card-item { background: #1a1a1a; border-radius: 14px; padding: 18px; margin-bottom: 10px; color: #fff; position: relative; overflow: hidden; } .asset-card-item::after { content: ''; position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.06); } .asset-card-bank { font-size: 15px; font-weight: 600; margin-bottom: 8px; letter-spacing: 0.5px; } .asset-card-type { font-size: 12px; opacity: 0.6; margin-bottom: 12px; letter-spacing: 2px; font-family: 'SF Mono', 'Courier New', monospace; } .asset-card-balance { font-size: 22px; font-weight: 300; text-align: right; letter-spacing: 0.5px; } .asset-house-item { background: #ffffff; border-radius: 14px; padding: 16px; margin-bottom: 10px; border: 1px solid #f0f0f0; transition: box-shadow 0.2s; } .asset-house-item:active { box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .asset-house-addr { font-size: 14px; color: #1a1a1a; font-weight: 600; margin-bottom: 6px; } .asset-house-info { font-size: 12px; color: #999; margin-bottom: 6px; } .asset-house-value { font-size: 15px; color: #1a1a1a; font-weight: 700; } .asset-car-item { background: #ffffff; border-radius: 14px; padding: 16px; margin-bottom: 10px; border: 1px solid #f0f0f0; transition: box-shadow 0.2s; } .asset-car-item:active { box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .asset-car-brand { font-size: 15px; color: #1a1a1a; font-weight: 600; margin-bottom: 4px; } .asset-car-info { font-size: 12px; color: #999; } /* SMS UI - iOS Messages 风格 */ .sms-list { background: #fff; } .sms-item { display: flex; align-items: center; padding: 12px 16px; border-bottom: 0.5px solid #e5e5ea; position: relative; cursor: pointer; } .sms-item:active { background: #f2f2f7; } .sms-unread .sms-sender { font-weight: 600; } .sms-unread-dot { width: 10px; height: 10px; border-radius: 50%; background: #007aff; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); } .sms-avatar { width: 44px; height: 44px; border-radius: 50%; background: #c7c7cc; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 500; margin-right: 12px; flex-shrink: 0; } .sms-body { flex: 1; min-width: 0; } .sms-header { display: flex; justify-content: space-between; align-items: center; } .sms-sender { font-size: 16px; color: #000; } .sms-time { font-size: 14px; color: #8e8e93; flex-shrink: 0; } .sms-preview { font-size: 14px; color: #8e8e93; margin-top: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .sms-chevron { color: #c7c7cc; font-size: 14px; margin-left: 8px; } .sms-detail-bg { background: #fff; padding: 16px; } .sms-detail-header { text-align: center; font-size: 17px; font-weight: 600; color: #000; padding: 8px 0 4px; } .sms-time-divider { text-align: center; font-size: 12px; color: #8e8e93; padding: 8px 0; } .sms-detail-bubbles { display: flex; flex-direction: column; gap: 6px; } .sms-bubble-left { background: #e5e5ea; color: #000; border-radius: 18px; padding: 10px 14px; max-width: 80%; align-self: flex-start; font-size: 15px; line-height: 1.4; } .sms-bubble-right { background: #007aff; color: #fff; border-radius: 18px; padding: 10px 14px; max-width: 80%; align-self: flex-end; font-size: 15px; line-height: 1.4; } /* Phone Check UI Specifics */ .phone-chat-time { text-align: center; font-size: 12px; color: #999; margin: 15px 0 5px; } .memo-item { background: #fff9c4; padding: 15px; border-radius: 8px; margin-bottom: 10px; border-left: 4px solid #fbc02d; cursor: pointer; } .memo-title { font-weight: bold; font-size: 16px; margin-bottom: 5px; color: #333; } .memo-date { font-size: 12px; color: #888; } .memo-detail-view { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff9c4; z-index: 6100; padding: 20px; display: none; flex-direction: column; padding-top: 64px; /* Added padding to avoid status bar */ } .browser-item { padding: 15px; border-bottom: 1px solid #eee; background: #fff; cursor: pointer; transition: background 0.2s; } .browser-item:active { background: #f9f9f9; } .browser-header { display: flex; align-items: center; } .browser-icon { width: 32px; height: 32px; background: #f2f2f2; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 12px; color: #999; flex-shrink: 0; } .browser-info { flex: 1; overflow: hidden; } .browser-query { font-size: 16px; color: #333; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .browser-url { font-size: 12px; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fake-input-bar { height: 50px; background: #f7f7f7; border-top: 1px solid #d1d1d1; display: flex; align-items: center; padding: 0 10px; gap: 10px; flex-shrink: 0; } .fake-input { flex: 1; height: 36px; background: #fff; border-radius: 4px; border: 1px solid #ddd; } .fake-icon { font-size: 24px; color: #7f7f7f; } /* ========== Check Phone v2 - 黑白灰极简风 ========== */ /* App Grid v2 */ .cp-app-grid-v2 { grid-template-columns: repeat(4, 1fr) !important; gap: 16px 8px !important; padding: 16px 12px 24px !important; } .cp-app-grid-v2 .cp-app-icon-box { background: #f5f5f5 !important; color: #333 !important; display: flex; align-items: center; justify-content: center; } .cp-app-grid-v2 .cp-app-icon-box svg { stroke: #333; } .cp-app-grid-v2 .cp-app-icon span { color: #555 !important; font-size: 10px; } /* AI评论气泡 — [FIX-弹性保护带] bottom从保护带出发 */ .cp-comment-bubble { position: fixed; bottom: calc(var(--guard-bottom, 12px) + 60px); left: 50%; transform: translateX(-50%) translateY(20px); z-index: 99999; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e0e0e0; border-radius: 16px; padding: 10px 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); max-width: 320px; opacity: 0; transition: all 0.4s cubic-bezier(.4,0,.2,1); pointer-events: none; } .cp-comment-bubble.show { opacity: 1; transform: translateX(-50%) translateY(0); } .cp-comment-bubble.hide { opacity: 0; transform: translateX(-50%) translateY(20px); } .cp-comment-avatar { width: 32px; height: 32px; border-radius: 50%; background: #eee; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #666; flex-shrink: 0; overflow: hidden; } .cp-comment-avatar img { width: 100%; height: 100%; object-fit: cover; } .cp-comment-text { font-size: 13px; color: #333; line-height: 1.5; } /* ===== 相册 ===== */ .cp-photos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .cp-photo-card { cursor: pointer; border-radius: 4px; overflow: hidden; } .cp-photo-card:active { opacity: 0.8; } .cp-photo-thumb { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: #f5f5f5; } .cp-photo-meta { padding: 4px 6px; display: flex; justify-content: space-between; font-size: 10px; color: #999; background: #fafafa; } .cp-photo-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; } .cp-photo-detail { background: #fff; border-radius: 12px; width: 90%; max-width: 360px; overflow: hidden; position: relative; } .cp-photo-detail-close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; z-index: 5; } .cp-photo-detail-img { width: 100%; aspect-ratio: 4/3; background: #f0f0f0; display: flex; align-items: center; justify-content: center; } .cp-photo-detail-info { padding: 16px; } /* ===== 通话记录 ===== */ .cp-calllog-list { padding: 0; } .cp-call-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #f0f0f0; } .cp-call-item:active { background: #f8f8f8; } .cp-call-icon { width: 36px; height: 36px; border-radius: 50%; background: #f5f5f5; display: flex; align-items: center; justify-content: center; font-size: 14px; } .cp-call-info { flex: 1; min-width: 0; } .cp-call-name { font-size: 15px; font-weight: 500; color: #333; } .cp-call-meta { font-size: 12px; color: #999; margin-top: 2px; } .cp-call-time { font-size: 13px; color: #999; flex-shrink: 0; } /* ===== 位置足迹 ===== */ .cp-loc-timeline { position: relative; padding-left: 24px; } .cp-loc-item { position: relative; display: flex; gap: 12px; padding-bottom: 20px; border-left: 2px solid #e0e0e0; margin-left: 6px; padding-left: 20px; } .cp-loc-item:last-child { border-left-color: transparent; } .cp-loc-dot { position: absolute; left: -14px; top: 0; width: 26px; height: 26px; border-radius: 50%; background: #f5f5f5; border: 2px solid #ddd; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #666; } .cp-loc-body { flex: 1; } .cp-loc-header { display: flex; justify-content: space-between; align-items: center; } .cp-loc-name { font-size: 14px; font-weight: 600; color: #333; } .cp-loc-time { font-size: 12px; color: #999; } .cp-loc-addr { font-size: 12px; color: #888; margin-top: 3px; } .cp-loc-dur { display: inline-block; font-size: 11px; color: #666; background: #f0f0f0; padding: 2px 8px; border-radius: 10px; margin-top: 4px; } /* ===== 最近删除 ===== */ .cp-deleted-list { display: flex; flex-direction: column; gap: 8px; } .cp-deleted-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: #fafafa; border: 1px solid #eee; border-radius: 10px; cursor: pointer; } .cp-deleted-item:active { background: #f0f0f0; } .cp-deleted-icon { width: 36px; height: 36px; border-radius: 8px; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #999; flex-shrink: 0; } .cp-deleted-body { flex: 1; min-width: 0; } .cp-deleted-type { font-size: 11px; color: #999; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .cp-deleted-preview { font-size: 13px; color: #555; margin-top: 3px; line-height: 1.5; background: repeating-linear-gradient(0deg, transparent, transparent 14px, rgba(0,0,0,0.03) 14px, rgba(0,0,0,0.03) 15px); } .cp-deleted-meta { font-size: 11px; color: #bbb; margin-top: 4px; } .cp-deleted-recover { font-size: 10px; color: #999; background: #eee; padding: 2px 8px; border-radius: 8px; flex-shrink: 0; align-self: center; } .cp-deleted-reason { padding: 10px 14px; background: #f5f5f5; border-radius: 0 0 10px 10px; margin-top: -4px; border: 1px solid #eee; border-top: none; } /* ===== 手机管家 ===== */ .cp-mgr-page { display: flex; flex-direction: column; gap: 16px; } .cp-mgr-rings { display: flex; justify-content: space-around; padding: 20px 0; background: #fff; border-radius: 12px; } .cp-mgr-ring-item { display: flex; flex-direction: column; align-items: center; gap: 6px; } .cp-mgr-ring-sub { font-size: 11px; color: #999; } .cp-mgr-section { background: #fff; border-radius: 12px; padding: 16px; } .cp-mgr-section-title { font-size: 13px; font-weight: 700; color: #333; margin-bottom: 12px; letter-spacing: 0.5px; } .cp-mgr-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .cp-mgr-bar-label { font-size: 12px; color: #666; width: 56px; flex-shrink: 0; } .cp-mgr-bar-track { flex: 1; height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden; } .cp-mgr-bar-fill { height: 100%; background: #333; border-radius: 4px; transition: width 0.6s ease; } .cp-mgr-bar-val { font-size: 11px; color: #999; width: 48px; text-align: right; flex-shrink: 0; } .cp-mgr-app-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f5f5f5; } .cp-mgr-app-row:last-child { border-bottom: none; } .cp-mgr-app-rank { width: 20px; height: 20px; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #666; flex-shrink: 0; } .cp-mgr-app-name { flex: 1; font-size: 13px; color: #333; font-weight: 500; } .cp-mgr-app-cat { font-size: 11px; color: #bbb; } .cp-mgr-app-time { font-size: 12px; color: #666; font-weight: 600; flex-shrink: 0; } .cp-mgr-net-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 13px; color: #555; } .cp-mgr-net-row:last-child { border-bottom: none; } /* ===== 使用简报 v2 增强 ===== */ .cp-usage-dashboard { padding: 0 4px 16px; } .cp-usage-stats { display: flex; justify-content: space-around; padding: 20px 0; background: #fff; border-radius: 12px; margin-bottom: 12px; } .cp-usage-stat-card { display: flex; flex-direction: column; align-items: center; } .cp-usage-rank { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; } .cp-usage-rank-title { font-size: 13px; font-weight: 700; color: #333; margin-bottom: 12px; } .cp-usage-rank-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .cp-usage-rank-num { width: 20px; height: 20px; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #666; flex-shrink: 0; } .cp-usage-rank-name { font-size: 13px; color: #333; width: 80px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-usage-rank-bar { flex: 1; height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden; } .cp-usage-rank-fill { height: 100%; background: #333; border-radius: 4px; } .cp-usage-heatmap { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; } .cp-heatmap-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; } .cp-heatmap-cell { aspect-ratio: 1; border-radius: 3px; display: flex; align-items: center; justify-content: center; } .cp-heatmap-cell span { font-size: 8px; color: #999; } .cp-heat-0 { background: #f5f5f5; } .cp-heat-1 { background: #ddd; } .cp-heat-1 span { color: #888; } .cp-heat-2 { background: #999; } .cp-heat-2 span { color: #fff; } .cp-heat-3 { background: #333; } .cp-heat-3 span { color: #fff; } .cp-usage-timeline-title { font-size: 13px; font-weight: 700; color: #333; padding: 8px 4px; } /* ===== 兴趣雷达 v2 增强 ===== */ .cp-interest-page { display: flex; flex-direction: column; gap: 16px; } .cp-interest-radar { display: flex; justify-content: center; padding: 12px 0; } .cp-interest-summary { background: #f8f8f8; border-radius: 10px; padding: 14px 16px; } .cp-interest-summary-title { font-size: 12px; font-weight: 700; color: #999; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; } .cp-interest-summary-text { font-size: 13px; color: #555; line-height: 1.6; } .cp-interest-tags { display: flex; flex-direction: column; gap: 6px; } .cp-interest-tag-v2 { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fafafa; border: 1px solid #eee; border-radius: 10px; cursor: pointer; transition: all 0.2s; } .cp-interest-tag-v2:active { background: #f0f0f0; } .cp-interest-tag-v2.hot { border-color: #ddd; background: #f5f5f5; } .cp-itag-kw { font-size: 14px; font-weight: 600; color: #333; flex: 1; } .cp-itag-bar { width: 60px; height: 6px; background: #eee; border-radius: 3px; overflow: hidden; } .cp-itag-bar-fill { height: 100%; background: #333; border-radius: 3px; } .cp-interest-tag-v2.hot .cp-itag-bar-fill { background: #111; } .cp-itag-heat { font-size: 12px; color: #999; font-weight: 600; width: 30px; text-align: right; } /* [FIX-弹窗适配] 模态框完整适配iOS安全区域 */ /* [FIX-全局美化穿透] 确保弹窗不受父容器transform/filter创建的stacking context影响 */ .modal-mask { position: fixed; top: 0; left: 0; width: 100%; height: var(--app-height, 100%); background: rgba(0,0,0,0.5); z-index: 8000; display: none; justify-content: center; align-items: center; padding: 0; /* [FIX-全局美化] 防止继承父容器的transform/filter导致fixed定位失效 */ transform: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; contain: none !important; } /* [FIX-全局美化穿透] 弹窗显示时确保pointer-events和交互正常 */ .modal-mask[style*="display: flex"], .modal-mask[style*="display:flex"] { pointer-events: auto !important; visibility: visible !important; opacity: 1 !important; } .modal-mask[style*="display: flex"] .modal-box, .modal-mask[style*="display:flex"] .modal-box { pointer-events: auto !important; position: relative !important; z-index: 1 !important; } #modal-confirm { z-index: 9800; } .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: var(--app-height, 100%); background: rgba(0,0,0,0.5); z-index: 7000; display: none; justify-content: center; align-items: center; padding: 0; } /* [FIX-上传modal层级] 提高z-index确保在所有layer之上，包括聊天设置界面 */ #modal-img-upload { z-index: 10500 !important; } .modal-box { background: #fff; width: 85%; max-width: 500px; border-radius: 16px; overflow: hidden; max-height: 80%; overflow-y: auto; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); margin: 10px; box-sizing: border-box; } .modal-box * { box-sizing: border-box; } /* ===== [FIX-CSS遗漏] Settings Sheet 样式（从styles.css拆分时遗漏） ===== */ .style-manage-item .style-name { font-size: 13px; font-weight: 500; color: #1a1a1a; } .style-manage-item .style-desc { font-size: 11px; color: #888; margin-top: 2px; word-break: break-all; } .style-manage-item .style-actions { display: flex; gap: 6px; flex-shrink: 0; } .style-manage-item .style-actions button { padding: 5px 9px; border: none; border-radius: 8px; font-size: 11px; cursor: pointer; background: #f0f0f0; color: #333; } /* 设置提示文字 */ .settings-hint { font-size: 11px; color: #999; line-height: 1.5; padding: 4px 14px 8px; } /* ===== Settings Sheet 弹窗（单页滚动式，黑白灰极简） ===== */ .settings-sheet-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.35); z-index: 9000; display: none; justify-content: center; align-items: flex-end; } .settings-sheet-mask.show { display: flex; } .settings-sheet { width: 100%; max-width: 420px; max-height: 88vh; background: #f5f5f5; border-radius: 24px 24px 0 0; overflow: hidden; display: flex; flex-direction: column; animation: sheetSlideUp 0.32s cubic-bezier(0.32, 0.72, 0, 1); } .settings-sheet.closing { animation: sheetSlideDown 0.25s cubic-bezier(0.32, 0.72, 0, 1) forwards; } @keyframes sheetSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes sheetSlideDown { from { transform: translateY(0); } to { transform: translateY(100%); } } /* 顶栏：关闭按钮 + 标题 */ .settings-sheet-header { display: flex; align-items: center; justify-content: center; position: relative; padding: 18px 20px 10px; flex-shrink: 0; } .settings-sheet-close { position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; background: #e8e8e8; border-radius: 50%; cursor: pointer; padding: 0; transition: background 0.15s; } .settings-sheet-close:active { background: #d5d5d5; } .settings-sheet-close svg { width: 14px; height: 14px; stroke: #333; stroke-width: 2.5; } .settings-sheet-title { font-size: 16px; font-weight: 600; color: #1a1a1a; letter-spacing: 0.3px; } /* 滚动区域 */ .settings-sheet-body { flex: 1; min-height: 0; /* [FIX-设置底部被吞v1] flex子元素必须min-height:0才能正确约束overflow */ overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 16px 24px; } /* 分组标题 */ .settings-section-title { font-size: 12px; font-weight: 500; color: #999; letter-spacing: 2px; padding: 16px 4px 6px; text-transform: uppercase; } .settings-section-title:first-child { padding-top: 8px; } /* 白色卡片 */ .settings-group { background: #fff; border-radius: 16px; overflow: hidden; } /* 每行 */ .settings-row { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; } .settings-row + .settings-row { border-top: 0.5px solid #e8e8e8; } .settings-row-label { font-size: 14px; color: #1a1a1a; white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; gap: 6px; } .settings-row-label svg { width: 16px; height: 16px; stroke: #666; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .settings-row-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .settings-row-right select { border: 1px solid #e0e0e0; border-radius: 12px; padding: 7px 12px; font-size: 13px; color: #1a1a1a; background: #fafafa; text-align: center; text-align-last: center; -webkit-appearance: none; appearance: none; min-width: 100px; cursor: pointer; } .settings-row-right select:focus { outline: none; border-color: #999; } .settings-row-right input[type="number"] { width: 56px; text-align: center; border: 1px solid #e0e0e0; border-radius: 12px; padding: 7px 4px; font-size: 13px; color: #1a1a1a; background: #fafafa; } .settings-row-right input[type="number"]:focus { outline: none; border-color: #999; } .settings-row-right input[type="range"] { flex: 1; min-width: 80px; } .settings-row-right input[type="color"] { width: 32px; height: 32px; border: 1px solid #e0e0e0; border-radius: 10px; padding: 2px; cursor: pointer; background: none; } .settings-row-right .settings-val-text { font-size: 13px; color: #999; } .settings-row-right .settings-val-badge { font-size: 13px; color: #666; background: #f0f0f0; padding: 4px 10px; border-radius: 10px; } /* 可点击行（带箭头） */ .settings-row.clickable { cursor: pointer; } .settings-row.clickable:active { background: #f8f8f8; } .settings-row .settings-chevron { width: 14px; height: 14px; stroke: #ccc; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; margin-left: 2px; } /* 描述文字行 */ .settings-desc-row { padding: 0 16px 10px; font-size: 12px; color: #999; line-height: 1.5; /* [FIX-文风折叠v2] 长文风描述默认折叠，max-height限制 */ max-height: 4.5em; overflow: hidden; position: relative; transition: max-height 0.3s ease; } .settings-desc-row.expanded { max-height: 2000px; overflow: visible; padding-bottom: 22px; } .settings-desc-row.truncated:not(.expanded)::after { content: '… 点击展开'; position: absolute; bottom: 0; left: 0; right: 0; height: 2em; background: linear-gradient(transparent, #fff 70%); display: flex; align-items: flex-end; justify-content: center; font-size: 11px; color: #667eea; cursor: pointer; padding-bottom: 2px; } .settings-desc-row.expanded::after { content: '收起 ▲'; position: absolute; bottom: 2px; left: 0; right: 0; display: block; text-align: center; font-size: 11px; color: #667eea; cursor: pointer; } /* 分组底部提示 */ .settings-group-hint { font-size: 11px; color: #aaa; line-height: 1.5; padding: 6px 4px 0; } /* 文风展开面板 */ .settings-style-expand { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; } .settings-style-expand.open { max-height: 300px; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* [FIX] 弹出式文风选择器样式 */ .offline-style-picker-item { padding: 12px 14px; margin-bottom: 4px; border-radius: 10px; cursor: pointer; transition: background 0.15s; } .offline-style-picker-item:hover, .offline-style-picker-item:active { background: #f0f0f5; } .offline-style-picker-item.active { background: #f0f0f0; border: 1px solid #666; } .settings-style-inner { padding: 10px 16px 14px; border-top: 0.5px solid #e8e8e8; } .settings-style-item { display: flex; align-items: flex-start; justify-content: space-between; padding: 10px 12px; margin-bottom: 6px; background: #f5f5f5; border-radius: 12px; } .settings-style-item .ssi-info { flex: 1; min-width: 0; margin-right: 8px; } .settings-style-item .ssi-name { font-size: 13px; font-weight: 500; color: #1a1a1a; } .settings-style-item .ssi-desc { font-size: 11px; color: #888; margin-top: 2px; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; } .settings-style-item .ssi-actions { display: flex; gap: 6px; flex-shrink: 0; } .settings-style-item .ssi-actions button { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 8px; cursor: pointer; background: #e8e8e8; color: #333; } .settings-style-item .ssi-actions button.del { background: #f5e0e0; color: #c00; } .settings-style-item .ssi-actions button svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .settings-style-add { border-top: 0.5px solid #e8e8e8; padding-top: 10px; margin-top: 4px; } .settings-style-add-title { font-size: 13px; font-weight: 500; color: #1a1a1a; margin-bottom: 8px; display: flex; align-items: center; gap: 4px; } .settings-style-add-title svg { width: 14px; height: 14px; stroke: #1a1a1a; fill: none; stroke-width: 2; } .settings-style-add input, .settings-style-add textarea { width: 100%; padding: 9px 12px; border: 1px solid #e0e0e0; border-radius: 12px; font-size: 13px; color: #1a1a1a; background: #fafafa; margin-bottom: 6px; font-family: inherit; } .settings-style-add textarea { min-height: 48px; resize: vertical; } .settings-style-add input:focus, .settings-style-add textarea:focus { outline: none; border-color: #999; } .settings-style-add-btn { padding: 8px 18px; border: none; background: #1a1a1a; color: #fff; border-radius: 20px; font-size: 13px; cursor: pointer; margin-top: 2px; } .settings-style-add-btn:active { opacity: 0.85; } /* 底部按钮 */ .settings-sheet-footer { padding: 12px 16px 20px; padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)); /* [FIX-设置底部被吞v1] 兼容iPhone底部安全区 */ flex-shrink: 0; background: #f5f5f5; /* [FIX-设置底部被吞v1] 防止footer背景透明被body内容穿透 */ } .settings-sheet-done { width: 100%; padding: 14px 0; border: none; background: #1a1a1a; color: #fff; border-radius: 24px; font-size: 15px; font-weight: 500; letter-spacing: 0.5px; cursor: pointer; transition: opacity 0.15s; } .settings-sheet-done:active { opacity: 0.85; } /* ===== Unified Panel 统一功能面板（居中弹窗，黑白灰极简） ===== */ .unified-panel-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.45); z-index: 8000; display: none; justify-content: center; align-items: center; } .unified-panel-mask.show { display: flex; } .unified-panel { width: 82%; max-width: 360px; max-height: 75vh; background: #f5f5f5; border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; animation: unifiedPanelIn 0.2s ease-out; } @keyframes unifiedPanelIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } .unified-panel.closing { animation: unifiedPanelOut 0.18s ease-in forwards; } @keyframes unifiedPanelOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.92); } } .unified-panel-header { display: flex; align-items: center; justify-content: center; position: relative; padding: 16px 16px 12px; border-bottom: 0.5px solid #ddd; background: #fff; } .unified-panel-title { font-size: 16px; font-weight: 600; color: #1a1a1a; } .unified-panel-close { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; border: none; background: #e8e8e8; display: flex; align-items: center; justify-content: center; cursor: pointer; } .unified-panel-close:active { background: #d5d5d5; } .unified-panel-close svg { width: 13px; height: 13px; stroke: #666; stroke-width: 2.2; stroke-linecap: round; } .unified-panel-body { flex: 1; overflow-y: auto; padding: 4px 0 16px; -webkit-overflow-scrolling: touch; } .unified-section-title { font-size: 12px; color: #999; font-weight: 500; padding: 12px 16px 6px; text-transform: uppercase; letter-spacing: 0.5px; } .unified-section-title:first-child { padding-top: 8px; } .unified-group { background: #fff; margin: 0 12px; border-radius: 10px; overflow: hidden; } .unified-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; cursor: pointer; transition: background 0.1s; } .unified-row:active { background: #f0f0f0; } .unified-row + .unified-row { border-top: 0.5px solid #e8e8e8; } .unified-row-label { font-size: 14px; color: #333; display: flex; align-items: center; gap: 10px; } .unified-row-label svg { width: 18px; height: 18px; stroke: #666; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none; flex-shrink: 0; } .unified-row-label.unified-danger { color: #ff3b30; } .unified-row-label.unified-danger svg { stroke: #ff3b30; } .unified-chevron { width: 14px; height: 14px; stroke: #ccc; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; flex-shrink: 0; } .img-preview-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 9999; display: none; justify-content: center; align-items: center; flex-direction: column; } .img-preview-box { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: auto; } .img-preview-box img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.3s; } /* iOS全屏适配：微信底部标签栏 */ .wx-tab-bar { height: 50px; padding-bottom: 0px; border-top: 1px solid #d1d1d1; display: flex; align-items: center; background: #f7f7f7; position: absolute; bottom: 0; width: 100%; z-index: 600; /* iOS全屏适配：左右安全区域 */ padding-left: 0px; padding-right: 0px; } .nav-tab { flex: 1; text-align: center; color: #999; font-size: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 100%; cursor: pointer; } .nav-tab i { font-size: 20px; margin-bottom: 2px; } .nav-tab.active { color: #07c160; } /* Voice Call UI */ #layer-voice-call { --vc-call-font-size: 15px; --vc-call-font-color: #ffffff; background: rgba(30, 30, 30, 0.85); touch-action: manipulation; backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); color: #fff; display: flex; flex-direction: column; z-index: 8000; } .vc-log-item { margin-bottom: 12px; display: flex; flex-direction: column; } #layer-voice-call .vc-log-sender { font-size: calc(var(--vc-call-font-size) - 3px); color: var(--vc-call-font-color); margin-bottom: 2px; } #layer-voice-call .vc-log-sender.me { color: var(--vc-call-font-color); align-self: flex-end; } #layer-voice-call .vc-log-sender.ai { color: var(--vc-call-font-color); align-self: flex-start; } #layer-voice-call .vc-log-action { font-size: calc(var(--vc-call-font-size) - 2px); color: var(--vc-call-font-color); font-style: italic; margin-bottom: 2px; font-family: "KaiTi", "楷体", serif; } #layer-voice-call .vc-log-text { font-size: var(--vc-call-font-size); color: var(--vc-call-font-color); line-height: 1.4; font-family: sans-serif; } .vc-log-content { background: rgba(255,255,255,0.1); padding: 8px 12px; border-radius: 12px; max-width: 80%; } .vc-log-item.me .vc-log-content { align-self: flex-end; background: rgba(7, 193, 96, 0.2); } .vc-log-item.ai .vc-log-content { align-self: flex-start; } /* iOS全屏适配：语音通话头部 */ .vc-header { padding: 50px 20px 10px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; opacity: 0.8; } .vc-avatar-area { flex: 1; display: flex; flex-direction: column; align-items: center; /* [重构-头像往上挪] 头像不再垂直居中，整体靠上，给下方对话流/按钮留出空间 */ justify-content: flex-start; padding-top: clamp(48px, 13vh, 120px); position: relative; padding-bottom: 50px; } /* 语音通话：底部渐变暗罩，让沉浸字幕对话流更清晰 */ .vc-avatar-area::after { content: ''; position: absolute; left: 0; right: 0; bottom: -60px; height: 320px; background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0.12) 50%, transparent); pointer-events: none; z-index: 1; } .vc-avatar-container { width: 120px; height: 120px; border-radius: 50%; border: 4px solid rgba(255,255,255,0.2); position: relative; margin-bottom: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); z-index: 2; } .vc-avatar-container img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .vc-avatar-pulse { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5); animation: pulse 2s infinite; opacity: 0; pointer-events: none; } .vc-avatar-pulse.speaking { animation: pulse-speak 1.5s infinite; } @keyframes pulse-speak { 0% { transform: scale(1); opacity: 0.8; border-color: #fff; } 100% { transform: scale(1.5); opacity: 0; border-color: rgba(255,255,255,0); } } .vc-status-text { font-size: calc(var(--vc-call-font-size) + 3px); color: var(--vc-call-font-color); font-weight: 500; margin-bottom: 10px; text-shadow: 0 2px 4px rgba(0,0,0,0.4); position: relative; z-index: 2; } .vc-subtitle-text { font-size: var(--vc-call-font-size); color: var(--vc-call-font-color); opacity: 0.8; max-width: 80%; text-align: center; min-height: 20px; transition: opacity 0.25s ease; position: relative; z-index: 2; text-shadow: 0 1px 5px rgba(0,0,0,0.6); } .vc-subtitle-text.fade-out { opacity: 0; } .vc-subtitle-text.fade-in { opacity: 0.8; } /* [重构] 旧的单独挂断行已并入底部按钮排，隐藏 */ .vc-controls { display: none; } .vc-btn { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 24px; color: #fff; cursor: pointer; transition: transform 0.1s, background 0.2s; } .vc-btn:active { transform: scale(0.95); background: rgba(255,255,255,0.3); } .vc-btn.active { background: #fff; color: #333; } .vc-btn.hangup { background: #fa5151; width: 70px; height: 70px; box-shadow: 0 5px 15px rgba(250, 81, 81, 0.4); position: relative; overflow: visible; } .vc-btn.hangup::before, .vc-btn.hangup::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5); transform: translate(-50%, -50%); animation: hangup-wave 2s ease-out infinite; pointer-events: none; } .vc-btn.hangup::after { animation-delay: 1s; } @keyframes hangup-wave { 0% { width: 100%; height: 100%; opacity: 0.8; } 100% { width: 180%; height: 180%; opacity: 0; } } .vc-btn-label { font-size: 12px; margin-top: 5px; opacity: 0.8; } /* [FIX-发送键溢出] 和视频通话一样加max-width+box-sizing防止溢出 */ .vc-text-input-area { position: absolute; bottom: 84px; left: 20px; right: 20px; max-width: calc(100vw - 40px); box-sizing: border-box; overflow: hidden; background: rgba(0,0,0,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 25px; padding: 10px 12px; display: none; align-items: center; z-index: 10; gap: 8px; } .vc-text-input-area input { flex: 1; min-width: 0; background: transparent; border: none; color: #fff; font-size: 16px; outline: none; } .vc-text-input-area > div { cursor: pointer; user-select: none; -webkit-user-select: none; flex-shrink: 0; } .vc-text-input-area > div:active { opacity: 0.7; transform: scale(0.95); } .vc-mic-wave { position: absolute; bottom: 220px; left: 50%; transform: translateX(-50%); height: 40px; display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity 0.3s; z-index: 6; } .vc-mic-wave.active { opacity: 1; } .vc-wave-bar { width: 4px; background: #fff; border-radius: 2px; animation: wave 0.5s infinite ease-in-out; } .vc-wave-bar:nth-child(1) { height: 10px; animation-delay: 0.1s; } .vc-wave-bar:nth-child(2) { height: 20px; animation-delay: 0.2s; } .vc-wave-bar:nth-child(3) { height: 30px; animation-delay: 0.3s; } .vc-wave-bar:nth-child(4) { height: 20px; animation-delay: 0.4s; } .vc-wave-bar:nth-child(5) { height: 10px; animation-delay: 0.5s; } @keyframes wave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(2); } } /* Voice Call: 实时语音识别文字显示 */ .vc-live-transcript { width: 85%; max-height: 80px; overflow-y: auto; margin-top: 10px; padding: 8px 14px; background: rgba(255,255,255,0.1); backdrop-filter: blur(8px); border-radius: 12px; display: none; } .vc-live-transcript.active { display: block; } #layer-voice-call .vc-live-transcript-content { font-size: var(--vc-call-font-size); color: var(--vc-call-font-color); line-height: 1.5; text-align: center; word-break: break-all; } #layer-voice-call .vc-live-transcript-content .interim { color: var(--vc-call-font-color); } #layer-voice-call .vc-live-transcript-content .final { color: var(--vc-call-font-color); } /* [重构-参考视频通话] 语音通话底部按钮区：单排、绝对定位贴底 （静音 / 免提 / 按住说话 / 键盘 / 更多 / 挂断） */ .vc-ptt-area { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-evenly; align-items: center; gap: 0; z-index: 5; padding: 0 16px; padding-bottom: env(safe-area-inset-bottom, 16px); width: 100%; position: absolute; bottom: 0; left: 0; right: 0; height: 70px; } .vc-ptt-area .vc-btn { width: 46px; height: 46px; font-size: 18px; margin: 0; flex-shrink: 0; } /* 挂断并入按钮排：红色、去掉旧的扩散波纹，和视频通话一致的纯按压反馈 */ .vc-ptt-area .vc-btn.hangup { width: 46px; height: 46px; background: #e53935; box-shadow: none; overflow: hidden; } .vc-ptt-area .vc-btn.hangup::before, .vc-ptt-area .vc-btn.hangup::after { display: none; } .vc-ptt-area .vc-btn.hangup:active { transform: scale(0.9); background: #c62828; } .vc-ptt-btn { width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border: 2px solid rgba(255,255,255,0.3); display: flex; justify-content: center; align-items: center; font-size: 20px; color: #fff; cursor: pointer; transition: all 0.15s ease; user-select: none; -webkit-user-select: none; touch-action: none; flex-shrink: 0; } .vc-ptt-btn:active, .vc-ptt-btn.pressing { transform: scale(1.1); background: rgba(7, 193, 96, 0.5); border-color: #07c160; box-shadow: 0 0 30px rgba(7, 193, 96, 0.4); } /* "按住说话"文字提示隐藏，保持单排整洁（与视频通话一致） */ .vc-ptt-hint { display: none; } .vc-ptt-hint.recording { color: #07c160; } /* Voice Call Mini Bubble */ #vc-mini-bubble { touch-action: none; } @keyframes vc-bubble-pulse { 0%, 100% { box-shadow: 0 4px 15px rgba(79,172,254,0.3); } 50% { box-shadow: 0 4px 25px rgba(79,172,254,0.6), 0 0 0 8px rgba(79,172,254,0.15); } } /* Loading Spinner */ #loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 9999; display: none; } .spinner { border: 4px solid rgba(0,0,0,0.1); border-left-color: var(--primary); border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* iOS全屏适配：全局音乐播放器 */ #global-music-player { position: fixed; bottom: 60px; left: 0; right: 0; height: 60px; background: linear-gradient(to right, #ff9a9e, #fecfef); display: none; align-items: center; padding: 0 15px; z-index: 7000; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); /* iOS全屏适配：左右安全区域 */ padding-left: 15px; padding-right: 15px; } .css-input { width: 100%; height: 150px; border: 1px solid #ddd; border-radius: 4px; padding: 10px; font-family: monospace; font-size: 13px; resize: vertical; background: #f9f9f9; } .music-info { flex: 1; color: #fff; overflow: hidden; } .music-title { font-size: 14px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .music-controls { display: flex; gap: 15px; align-items: center; color: #fff; font-size: 20px; } .music-controls i { cursor: pointer; } /* Cropper Modal */ .cropper-container-box { height: 400px; width: 100%; background: #000; margin-bottom: 15px; overflow: hidden; border-radius: 8px; } #cropper-img { max-width: 100%; display: block; } /* Vinyl Circular Cropper */ .vinyl-cropper-container { position: relative; width: 100%; height: 350px; background: #000; border-radius: 12px; overflow: hidden; } .vinyl-cropper-container img { max-width: 100%; display: block; } .vinyl-cropper-circle-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 260px; height: 260px; border-radius: 50%; border: 2px dashed rgba(255,255,255,0.6); box-shadow: 0 0 0 9999px rgba(0,0,0,0.5); pointer-events: none; z-index: 10; } /* --- Listen Together Player Styles --- */ .listen-connect-wave { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 40px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0,10 Q25,20 50,10 T100,10' fill='none' stroke='%23ff758c' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-size: 200% 100%; animation: waveMove 2s linear infinite; opacity: 0; transition: opacity 0.5s; z-index: 0; pointer-events: none; } .listen-connect-wave.active { opacity: 0.8; } #listen-player-modal { /* [FIX-上传挤压v14] 移除 transform:translate(-50%,-50%) 居中方式。 根因：transform 会创建新的 containing block + GPU 合成层， 文件选择器弹出时该合成层以坍缩尺寸渲染，拖垮整个 #device 布局。 改用 inset + margin:auto 实现居中，不创建合成层。 */ position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 92%; height: 75%; margin: auto; background: rgba(18, 18, 18, 0.97); backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 20px; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 20px 50px rgba(0,0,0,0.5); z-index: 8000; display: none; flex-direction: column; color: var(--text-sub); transition: opacity 0.3s; overflow: hidden; } #listen-player-header { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; margin-top: 0; border-bottom: 1px solid rgba(255,255,255,0.05); flex-shrink: 0; min-height: 44px; position: relative; z-index: 10; background: transparent; /* 透明背景，与弹窗整体背景一致 */ } #listen-minimize-btn, #listen-close-btn { font-size: 20px; padding: 10px; cursor: pointer; opacity: 0.8; } #listen-avatars-area { height: 80px; position: relative; display: flex; justify-content: center; align-items: center; margin-top: 25px; flex-shrink: 0; /* 防止压缩 */ } .listen-avatar-box { width: 50px; height: 50px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); overflow: visible; position: absolute; transition: transform 0.3s; background: #000; } .listen-avatar-box img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .listen-avatar-box.me { left: 50%; transform: translate(-140%, 10px); z-index: 2; } .listen-avatar-box.partner { left: 50%; transform: translate(40%, 10px); z-index: 1; } .listen-avatar-box.glow { box-shadow: 0 0 15px var(--primary); animation: breathe 3s infinite ease-in-out; border-color: var(--primary); } @keyframes breathe { 0%, 100% { box-shadow: 0 0 10px rgba(7, 193, 96, 0.5); } 50% { box-shadow: 0 0 25px rgba(7, 193, 96, 0.9); } } .listen-bubble-permanent { position: absolute; bottom: 60px; /* 适应更小的头像 */ background: #fff; color: #000; padding: 6px 10px; border-radius: 8px; font-size: 12px; min-width: 100px; width: auto; max-width: 200px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.2); z-index: 10; cursor: pointer; word-break: break-word; } /* 己方气泡居中 */ .listen-avatar-box.me .listen-bubble-permanent { left: 50%; transform: translateX(-50%); } /* 对方气泡居中 */ .listen-avatar-box.partner .listen-bubble-permanent { right: auto; left: 50%; transform: translateX(-50%); } .listen-bubble-permanent::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); border-top: 5px solid #fff; border-left: 5px solid transparent; border-right: 5px solid transparent; } .listen-bubble-input { width: 100%; border: none; outline: none; background: transparent; text-align: center; font-size: 12px; font-family: inherit; pointer-events: none; /* 禁止直接输入 */ } #listen-info-text { text-align: center; margin-top: 10px; color: rgba(255,255,255,0.9); font-size: 13px; flex-shrink: 0; } /* Swiper Container */ #listen-swipe-container { flex: 1; overflow: hidden; width: 100%; position: relative; margin-bottom: 10px; touch-action: pan-y; } #listen-swipe-wrapper { display: flex; width: 200%; height: 100%; transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1); will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .listen-page { width: 50%; height: 100%; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; } /* Page 1: Vinyl */ #listen-vinyl-area { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; } #listen-vinyl { width: 200px; height: 200px; /* Adjust Vinyl Size */ max-width: 60vw; max-height: 60vw; border-radius: 50%; background-image: url('https://png.pngtree.com/png-vector/20220623/ourmid/pngtree-vinyl-record-png-image_5323868.png'); background-size: cover; background-position: center center; background-repeat: no-repeat; box-shadow: 0 5px 25px rgba(0,0,0,0.5); animation: rotate 10s linear infinite; animation-play-state: paused; border: 4px solid rgba(255,255,255,0.1); cursor: pointer; flex-shrink: 0; overflow: hidden; } #listen-vinyl.playing { animation-play-state: running; } @keyframes rotate { 100% { transform: rotate(360deg); } } .listen-emoji { position: absolute; font-size: 24px; animation: floatUp 2s ease-out forwards; pointer-events: none; } @keyframes floatUp { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-100px) scale(1.5); } } #listen-timer-badge { margin: 10px auto; background: rgba(255,255,255,0.15); padding: 6px 16px; border-radius: 20px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; backdrop-filter: blur(5px); } /* Page 2: Full Lyrics */ #listen-lyrics-page { width: 100%; height: 100%; overflow-y: auto; text-align: center; padding: 20px 0; -webkit-overflow-scrolling: touch; touch-action: pan-y; mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent); scrollbar-width: none; /* Firefox */ } #listen-lyrics-page::-webkit-scrollbar { display: none; /* Chrome/Safari */ } #listen-lyrics-full-content { padding: 100px 0; /* Space for scrolling */ transition: transform 0.3s ease-out; } .lyric-line-full { min-height: 36px; line-height: 1.5; font-size: 15px; color: rgba(255,255,255,0.5); padding: 8px 20px; transition: all 0.3s; cursor: pointer; } .lyric-line-full.active { color: #fff; font-size: 18px; font-weight: bold; text-shadow: 0 0 10px rgba(255,255,255,0.3); transform: scale(1.05); } /* Pagination Dots */ .listen-pagination { display: flex; justify-content: center; gap: 8px; margin-bottom: 10px; } .listen-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.3); transition: all 0.3s; } .listen-dot.active { background: #fff; width: 12px; border-radius: 4px; } #listen-controls { padding: 0 20px 12px; flex-shrink: 0; } .listen-progress-bar { width: 100%; height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; position: relative; cursor: pointer; margin-bottom: 18px; overflow: hidden; } .listen-progress-fill { width: 0%; max-width: 100%; height: 100%; background: var(--primary); border-radius: 2px; position: relative; transition: width 0.15s linear; } .listen-progress-handle { width: 12px; height: 12px; background: #fff; border-radius: 50%; position: absolute; right: -6px; top: -4px; box-shadow: 0 0 5px rgba(0,0,0,0.5); transform: scale(0); transition: transform 0.2s; } .listen-progress-bar:hover .listen-progress-handle { transform: scale(1); } .listen-btn-row { display: flex; justify-content: center; align-items: center; gap: 20px; } .listen-btn { font-size: 22px; color: rgba(255,255,255,0.9); cursor: pointer; width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; border-radius: 50%; transition: background 0.2s; } .listen-btn:active { background: rgba(255,255,255,0.1); } .listen-play-btn { font-size: 26px; width: 50px; height: 50px; background: #fff; color: #000; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 5px 20px rgba(255,255,255,0.3); transition: transform 0.1s; } .listen-play-btn:active { transform: scale(0.95); } #listen-float-ball { position: fixed; top: 120px; left: 100%; width: 50px; height: 50px; border-radius: 25px 0 0 25px; background: rgba(20,20,20,0.85); backdrop-filter: blur(15px); z-index: 9000; display: none; justify-content: center; align-items: center; box-shadow: -2px 5px 15px rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); border-right: none; overflow: hidden; cursor: grab; transition: left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } #listen-float-ball.show { left: calc(100% - 50px); } #listen-float-ball:active { cursor: grabbing; } #listen-float-ball img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,0.3); } #listen-float-ball.playing img { animation: rotate 8s linear infinite; } .float-ball-hover-info { position: absolute; right: 60px; background: rgba(0,0,0,0.8); color: #fff; padding: 6px 12px; border-radius: 8px; font-size: 13px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s; transform: translateX(10px); } #listen-float-ball:active .float-ball-hover-info { opacity: 1; transform: translateX(0); } #listen-playlist-drawer { position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; background: rgba(30,30,30,0.98); backdrop-filter: blur(20px); border-radius: 24px 24px 0 0; z-index: 8010; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; color: var(--text-sub); box-shadow: 0 -5px 30px rgba(0,0,0,0.3); visibility: hidden; } #listen-playlist-drawer.show { transform: translateY(0); visibility: visible; } #listen-playlist-drawer .list-item { background: transparent !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; } .achievement-badge { width: 18px; height: 18px; display: inline-flex; justify-content: center; align-items: center; background: #f6c02d; color: #fff; border-radius: 50%; font-size: 10px; margin-left: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } /* Optimized Dropdown Styles */ select { appearance: none; -webkit-appearance: none; background-color: #fff !important; border: 1px solid #e5e5e5 !important; border-radius: 8px !important; padding: 8px 30px 8px 12px !important; font-size: 14px; color: #333; text-align: center; text-align-last: center; min-width: 100px; height: 36px; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 8px center !important; background-size: 14px !important; cursor: pointer; } select:focus { border-color: var(--primary) !important; outline: none; } /* [JS适配] 通用浏览器适配 - min-height由device-adapter.js动态设置 */ #desktop { padding-bottom: 110px; display: flex; flex-direction: column; justify-content: space-between; min-height: var(--app-height, 100vh); box-sizing: border-box; } /* 区块间距控制（第1页） */ #desktop .desktop-block[data-block="p1-time"] { flex-shrink: 0; } #desktop .desktop-block[data-block="p1-hero"] { flex: 1 1 auto; display: flex; align-items: center; } #desktop .desktop-block[data-block="p1-apps"] { flex-shrink: 0; } /* 防止时间区域被过度压缩 */ .desktop-time-date-area { flex-shrink: 0; margin-top: 2vh; } /* 防止用户信息卡片被压缩 */ .user-info-card { flex-shrink: 0; } /* 应用网格区域 */ .app-grid { align-content: center; } /* [iOS适配] 底部导航栏 - 不再重复定义，使用上方580行的统一定义 */ /* [FIX-底部导航栏v5] 键盘弹出时隐藏 — 现在由body.keyboard-active class控制 */ /* 保留 .keyboard-open 选择器兼容旧逻辑，但用opacity方案替代display:none */ .bottom-nav.keyboard-open { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateX(-50%) translateY(20px) !important; } /* ====== Beauty Page - Categorized Navigation ====== */ .beauty-menu-list { display: flex; flex-direction: column; gap: 12px; } .beauty-menu-item { display: flex; align-items: center; background: #fff; border-radius: 16px; padding: 18px 16px; cursor: pointer; transition: transform 0.1s, box-shadow 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.03); } .beauty-menu-item:active { transform: scale(0.98); box-shadow: 0 1px 4px rgba(0,0,0,0.08); } .beauty-menu-icon { width: 44px; height: 44px; border-radius: 0; display: flex; justify-content: center; align-items: center; font-size: 22px; margin-right: 14px; flex-shrink: 0; background: none; box-shadow: none; color: #262626; } .beauty-menu-text { flex: 1; overflow: hidden; } .beauty-menu-title { font-size: 17px; font-weight: 600; color: #1d1d1f; margin-bottom: 4px; } .beauty-menu-desc { font-size: 13px; color: #86868b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .beauty-menu-arrow { color: #c7c7cc; font-size: 14px; margin-left: 8px; flex-shrink: 0; } /* Beauty Component Tabs */ .beauty-comp-tabs { display: flex; gap: 0; background: #fff; border-radius: 12px; overflow: hidden; margin-bottom: 16px; border: 1px solid #e8e8e8; } .beauty-comp-tab { flex: 1; text-align: center; padding: 10px 0; font-size: 13px; font-weight: 500; color: #999; cursor: pointer; transition: all 0.2s; border-right: 1px solid #e8e8e8; } .beauty-comp-tab:last-child { border-right: none; } .beauty-comp-tab.active { background: var(--primary); color: #fff; font-weight: 600; } /* Beauty Component Panels */ .beauty-comp-panel { display: none; } .beauty-comp-panel.active { display: block; } /* Beauty Mode Toggle */ .beauty-mode-toggle { display: flex; gap: 0; background: #f0f0f0; border-radius: 10px; overflow: hidden; margin-bottom: 14px; } .beauty-mode-btn { flex: 1; text-align: center; padding: 8px 0; font-size: 13px; color: #888; cursor: pointer; transition: all 0.2s; } .beauty-mode-btn.active { background: #fff; color: var(--primary); font-weight: 600; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); } /* Beauty Color/Image Controls */ .beauty-color-controls, .beauty-image-controls { margin-top: 8px; } /* Component Image Preview */ .comp-img-preview { width: 100%; height: 100px; border-radius: 10px; border: 2px dashed #ddd; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fafafa; position: relative; } .comp-img-preview img { width: 100%; height: 100%; object-fit: cover; } /* Beauty Sub Pages */ .beauty-subpage { display: none; position: absolute; top: 44px; left: 0; width: 100%; bottom: 0; background: #f5f5f7; z-index: 10; animation: beautySlideIn 0.25s ease-out; } .beauty-subpage.active { display: flex; flex-direction: column; } @keyframes beautySlideIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } /* Beauty Section Cards */ .beauty-section-card { background: #fff; border-radius: 16px; margin-bottom: 16px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.03); } .beauty-section-header { padding: 14px 16px; font-size: 15px; font-weight: 600; color: #1d1d1f; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: space-between; } /* Beauty Action Buttons */ .beauty-action-btn { width: 100%; padding: 14px; border: none; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform 0.1s, opacity 0.2s; background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(7, 193, 96, 0.25); } .beauty-action-btn:active { transform: scale(0.98); opacity: 0.9; } .beauty-action-btn.mini { flex: 1; padding: 10px 8px; font-size: 13px; border-radius: 10px; /* [FIX-iOS按钮等宽] 覆盖width:100%，用min-width:0确保flex等分，iOS Safari需要明确设置 */ width: auto; min-width: 0; } /* [FIX-iOS按钮等宽] iOS Safari上flex:1不够确保等宽，使用@supports确保只影响iOS */ @supports (-webkit-touch-callout: none) { .beauty-action-btn.mini { flex: 1 1 0%; } } .beauty-action-btn.preset { background: #576b95; box-shadow: 0 2px 8px rgba(87, 107, 149, 0.25); } .beauty-action-btn.reset { background: #e5e5ea; color: #1d1d1f; box-shadow: none; } /* STT Provider Buttons */ .stt-provider-btn { padding: 8px 16px; border: 1px solid #e0e0e0; border-radius: 20px; background: #f5f5f7; color: #666; font-size: 13px; cursor: pointer; transition: all 0.2s; } .stt-provider-btn:active { transform: scale(0.96); } .stt-provider-btn.active { background: #e74c3c; color: #fff; border-color: #e74c3c; box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3); } /* Image Generation Provider Buttons */ .imggen-provider-btn { padding: 8px 16px; border: 1px solid #e0e0e0; border-radius: 20px; background: #f5f5f7; color: #666; font-size: 13px; cursor: pointer; transition: all 0.2s; } .imggen-provider-btn:active { transform: scale(0.96); } .imggen-provider-btn.active { background: #9b59b6; color: #fff; border-color: #9b59b6; box-shadow: 0 2px 8px rgba(155, 89, 182, 0.3); } /* [FIX-生图管理溢出] 生图设置区域所有输入框强制box-sizing */ #settings-page-imagegen input, #settings-page-imagegen select { box-sizing: border-box; } #settings-page-imagegen .beauty-section-card > div { overflow: hidden; } /* Font Preset Items */ .font-preset-item { display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #f9f9f9; border-radius: 10px; margin-bottom: 8px; border: 1px solid #eee; } .font-preset-item .fp-name { font-size: 14px; font-weight: 500; color: #333; flex: 1; } .font-preset-item .fp-actions { display: flex; gap: 8px; } .font-preset-item .fp-actions button { padding: 6px 12px; border: none; border-radius: 8px; font-size: 12px; cursor: pointer; font-weight: 500; } .fp-load-btn { background: var(--primary); color: #fff; } .fp-del-btn { background: #fee; color: var(--red); } /* ====== Settings Page - Categorized Navigation ====== */ .settings-nav-list { display: flex; flex-direction: column; gap: 12px; } .settings-nav-item { display: flex; align-items: center; background: #fff; border-radius: 16px; padding: 18px 16px; cursor: pointer; transition: transform 0.1s, box-shadow 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.03); } .settings-nav-item:active { transform: scale(0.98); box-shadow: 0 1px 4px rgba(0,0,0,0.08); } .settings-nav-icon-i { width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; font-size: 20px; margin-right: 14px; flex-shrink: 0; color: #555; background: #f5f5f7; border-radius: 12px; } .settings-nav-text { flex: 1; overflow: hidden; } .settings-nav-title-text { font-size: 17px; font-weight: 600; color: #1d1d1f; margin-bottom: 4px; } .settings-nav-desc { font-size: 13px; color: #86868b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .settings-nav-arrow { color: #c7c7cc; font-size: 14px; margin-left: 8px; flex-shrink: 0; } /* Settings Sub Pages */ .settings-subpage { display: none; position: absolute; top: 44px; left: 0; width: 100%; bottom: 0; background: #f5f5f7; z-index: 10; animation: settingsSlideIn 0.25s ease-out; } .settings-subpage.active { display: flex; flex-direction: column; } @keyframes settingsSlideIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } /* Clear All Data Confirmation Modal */ .clear-data-warning { background: #fff5f5; border: 1px solid #ffcdd2; border-radius: 12px; padding: 16px; margin-bottom: 16px; text-align: center; } .clear-data-warning i { font-size: 48px; color: #fa5151; margin-bottom: 12px; display: block; } .clear-data-warning h3 { color: #fa5151; margin-bottom: 8px; } .clear-data-warning p { font-size: 13px; color: #999; line-height: 1.5; } /* ========================================== SPACETIME SYSTEM (时空系统) STYLES ========================================== */ /* --- Home Page --- */ .st-hero { position: relative; padding: 50px 20px 30px; text-align: center; overflow: hidden; } .st-hero-particles { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: none; pointer-events: none; } .st-hero-icon { width: 80px; height: 80px; margin: 0 auto 20px; background: #f0f0f0; border: 1px solid #e0e0e0; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 32px; color: #333333; animation: stPulse 3s ease-in-out infinite; } @keyframes stPulse { 0%, 100% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.06); transform: scale(1); } 50% { box-shadow: 0 0 40px rgba(0, 0, 0, 0.1); transform: scale(1.05); } } .st-hero-title { font-size: 22px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; letter-spacing: 1px; } .st-hero-sub { font-size: 14px; color: #666666; } /* --- Era Selection Grid --- */ .st-era-grid { padding: 0 16px 20px; } .st-era-card { display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 10px; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 14px; cursor: pointer; transition: all 0.25s ease; } .st-era-card:hover, .st-era-card:active { background: #f5f5f5; border-color: #cccccc; transform: translateX(4px); } .st-era-icon { font-size: 32px; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; background: #f5f5f5; border-radius: 12px; flex-shrink: 0; } .st-era-info { flex: 1; min-width: 0; } .st-era-name { font-size: 16px; font-weight: 600; color: #1a1a1a; margin-bottom: 2px; } .st-era-year { font-size: 12px; color: #666666; margin-bottom: 4px; } .st-era-desc { font-size: 12px; color: #999999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- Section Title --- */ .st-section-title { padding: 20px 16px 10px; font-size: 14px; font-weight: 600; color: #666666; display: flex; align-items: center; gap: 8px; } /* --- Memory Preview Chips --- */ .st-memories-preview { padding: 0 16px 20px; display: flex; flex-direction: column; gap: 8px; } .st-memory-chip { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 10px; cursor: pointer; transition: background 0.2s; } .st-memory-chip:active { background: #f0f0f0; } .st-memory-era { font-size: 12px; font-weight: 600; color: #333333; background: #f0f0f0; padding: 3px 8px; border-radius: 6px; white-space: nowrap; } .st-memory-summary { font-size: 13px; color: #666666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } /* --- Active Scene --- */ .st-active-nav { flex-shrink: 0; } .st-scene-container { flex: 1; overflow-y: auto; background: #f5f5f5; padding-bottom: 10px; min-height: 0; } /* Time Bar */ .st-time-bar { padding: 12px 16px; background: #ffffff; border-bottom: 1px solid #e0e0e0; position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); } .st-time-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 12px; color: #666666; } .st-era-badge { background: #f0f0f0; color: #333333; padding: 3px 10px; border-radius: 20px; font-size: 11px; } .st-progress-track { width: 100%; height: 4px; background: #e0e0e0; border-radius: 2px; overflow: hidden; } .st-progress-fill { height: 100%; background: #333333; border-radius: 2px; transition: width 1s linear; } /* Dialog Area */ .st-dialog-area { padding: 16px; display: flex; flex-direction: column; gap: 16px; min-height: calc(100% - 80px); } .st-dialog-item { animation: stFadeIn 0.5s ease; display: flex; flex-direction: column; } .st-dialog-item.user { align-items: flex-end; align-self: flex-end; } .st-dialog-item.partner { align-items: flex-start; align-self: flex-start; } .st-dialog-item.narrator, .st-dialog-item.system { align-self: stretch; } @keyframes stFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Narrator Box */ .st-narrator-box { background: #ffffff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 16px 18px; font-size: 14px; line-height: 1.8; color: #333333; position: relative; } .st-narrator-box::before { content: '✦'; position: absolute; top: -8px; left: 16px; font-size: 14px; color: #666666; background: #f5f5f5; padding: 0 6px; } /* Partner Message */ .st-partner-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 85%; } .st-partner-name { font-size: 11px; color: #666666; margin-bottom: 4px; padding-left: 4px; } .st-partner-bubble { background: #f0f0f0; border: 1px solid #e0e0e0; color: #1a1a1a; padding: 10px 14px; border-radius: 4px 16px 16px 16px; font-size: 14px; line-height: 1.6; } /* User Message */ .st-user-msg { display: flex; flex-direction: column; align-items: flex-end; max-width: 85%; align-self: flex-end; } .st-user-bubble { background: #ffffff; color: #1a1a1a; border: 1px solid #e0e0e0; padding: 10px 14px; border-radius: 16px 4px 16px 16px; font-size: 14px; line-height: 1.6; } /* System Message */ .st-system-msg { text-align: center; font-size: 12px; color: #999999; padding: 8px 0; } /* Generating Indicator */ .st-generating { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #999999; font-size: 13px; } .st-gen-dots { display: flex; gap: 4px; } .st-gen-dots span { width: 6px; height: 6px; background: #999999; border-radius: 50%; animation: stDotBounce 1.2s infinite ease-in-out; } .st-gen-dots span:nth-child(2) { animation-delay: 0.15s; } .st-gen-dots span:nth-child(3) { animation-delay: 0.3s; } @keyframes stDotBounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } /* --- Input Bar --- */ .st-input-bar { flex-shrink: 0; background: #ffffff; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-top: 1px solid #e0e0e0; padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 100; box-sizing: border-box; max-width: 100%; overflow: hidden; } .st-action-btns { display: flex; gap: 8px; } .st-action-btn { flex: 1; padding: 12px 8px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 12px; color: #333333; font-size: 13px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: all 0.2s; } .st-action-btn:active { background: #e0e0e0; border-color: #cccccc; color: #1a1a1a; transform: scale(0.96); } .st-action-btn i { font-size: 18px; } /* Custom Input */ .st-custom-input { display: flex; gap: 8px; align-items: center; box-sizing: border-box; width: 100%; max-width: 100%; overflow: hidden; } .st-text-input { flex: 1; min-width: 0; padding: 12px 16px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 24px; color: #1a1a1a; font-size: 14px; outline: none; box-sizing: border-box; } .st-text-input::placeholder { color: #999999; } .st-send-btn { width: 44px; height: 44px; background: #333333; border: none; border-radius: 50%; color: #ffffff; font-size: 16px; cursor: pointer; display: flex; justify-content: center; align-items: center; flex-shrink: 0; transition: transform 0.1s; } .st-send-btn:active { transform: scale(0.92); } .st-cancel-btn { width: 44px; height: 44px; background: #f0f0f0; border: none; border-radius: 50%; color: #666666; font-size: 16px; cursor: pointer; display: flex; justify-content: center; align-items: center; flex-shrink: 0; } /* --- Message Action Buttons (重回/撤回/修改/扩写) --- */ .st-msg-actions { display: flex; gap: 4px; justify-content: flex-end; margin-bottom: 6px; opacity: 0; transition: opacity 0.2s ease; position: relative; z-index: 5; } .st-narrator-box:hover .st-msg-actions, .st-partner-bubble:hover .st-msg-actions, .st-user-bubble:hover .st-msg-actions, .st-narrator-box .st-msg-actions:focus-within, .st-partner-bubble .st-msg-actions:focus-within, .st-user-bubble .st-msg-actions:focus-within { opacity: 1; } /* For touch devices, always show actions */ @media (hover: none) { .st-msg-actions { opacity: 0.6; } } .st-msg-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: #f0f0f0; color: #666666; font-size: 11px; cursor: pointer; transition: all 0.15s ease; border: 1px solid #e0e0e0; } .st-msg-action-btn:hover { background: #e0e0e0; color: #333333; border-color: #cccccc; transform: scale(1.1); } .st-msg-action-btn:active { transform: scale(0.95); } .st-msg-action-btn i { font-size: 10px; } /* --- Memory Cards (Memory List Page) --- */ .st-memory-card { background: #ffffff; border: 1px solid #e0e0e0; border-radius: 14px; margin-bottom: 12px; overflow: hidden; transition: border-color 0.2s; } .st-memory-card:hover { border-color: #cccccc; } .st-memory-card-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px; border-bottom: 1px solid #e0e0e0; } .st-memory-card-title { font-size: 16px; font-weight: 600; color: #1a1a1a; margin-bottom: 4px; } .st-memory-card-year { font-size: 12px; color: #999999; } .st-memory-card-actions { display: flex; gap: 6px; } .st-mem-btn { width: 32px; height: 32px; border: none; border-radius: 8px; background: #f0f0f0; color: #666666; font-size: 13px; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.2s; } .st-mem-btn:hover, .st-mem-btn:active { background: #e0e0e0; color: #1a1a1a; } .st-mem-btn.del:hover, .st-mem-btn.del:active { background: rgba(250,81,81,0.2); color: #ff6b6b; } .st-memory-card-body { padding: 14px 16px; font-size: 14px; line-height: 1.6; color: #666666; } .st-memory-card-footer { display: flex; justify-content: space-between; padding: 10px 16px; background: #f5f5f5; font-size: 12px; color: #999999; } .st-memory-card-footer i { margin-right: 4px; } /* --- Memory Read Page --- */ .st-read-summary { font-size: 16px; font-style: italic; color: #333333; text-align: center; padding: 20px; border-bottom: 1px solid #e0e0e0; margin-bottom: 16px; line-height: 1.6; } .st-read-meta { text-align: center; font-size: 12px; color: #999999; margin-bottom: 24px; } .st-read-dialog-list { padding: 0 4px; } /* --- Couple Detail Container Fix for Spacetime --- */ .couple-detail-container .st-scene-container { padding-bottom: 10px; } /* Spacetime home scroll extra bottom padding for "重新生成" button */ .st-home-scroll { padding-bottom: 80px !important; } /* ====== TA的秘密 Secret Page Styles ====== */ .secret-page { flex: 1; overflow-y: auto; background: linear-gradient(180deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%); padding: 0; position: relative; } .secret-page::-webkit-scrollbar { display: none; } .secret-page { scrollbar-width: none; } .secret-header-area { position: relative; padding: 20px 20px 15px; text-align: center; } .secret-header-particles { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 40%, rgba(255, 75, 145, 0.12) 0%, transparent 50%), radial-gradient(circle at 70% 60%, rgba(147, 51, 234, 0.1) 0%, transparent 50%); pointer-events: none; } .secret-header-icon { width: 64px; height: 64px; margin: 0 auto 14px; background: linear-gradient(135deg, rgba(255,75,145,0.2), rgba(147,51,234,0.15)); border: 1px solid rgba(255,75,145,0.2); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 26px; color: #ff4b91; animation: secretPulse 3s ease-in-out infinite; } @keyframes secretPulse { 0%, 100% { box-shadow: 0 0 15px rgba(255,75,145,0.2); transform: scale(1); } 50% { box-shadow: 0 0 30px rgba(255,75,145,0.4); transform: scale(1.06); } } .secret-header-title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 6px; letter-spacing: 1px; } .secret-header-sub { font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.5; } .secret-nav-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 15px; height: 44px; margin-top: 0; position: relative; z-index: 10; } .secret-nav-bar .nav-icon { color: rgba(255,255,255,0.8); text-shadow: 0 1px 3px rgba(0,0,0,0.3); } .secret-nav-actions { display: flex; align-items: center; gap: 4px; } .secret-nav-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.75); display: flex; justify-content: center; align-items: center; font-size: 15px; cursor: pointer; transition: all 0.2s; backdrop-filter: blur(5px); } .secret-nav-btn:active { background: rgba(255,75,145,0.25); transform: scale(0.92); } .secret-nav-btn.spinning i { animation: spin 0.8s linear infinite; } .secret-cards-area { padding: 0 16px 30px; display: flex; flex-direction: column; gap: 14px; } .secret-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; overflow: hidden; animation: secretCardIn 0.5s ease-out both; transition: border-color 0.3s; } .secret-card:nth-child(1) { animation-delay: 0.05s; } .secret-card:nth-child(2) { animation-delay: 0.15s; } .secret-card:nth-child(3) { animation-delay: 0.25s; } .secret-card:nth-child(4) { animation-delay: 0.35s; } .secret-card:nth-child(5) { animation-delay: 0.45s; } @keyframes secretCardIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .secret-card-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; } .secret-card-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 16px; flex-shrink: 0; } .secret-card-icon.thought { background: rgba(255,75,145,0.15); color: #ff4b91; } .secret-card-icon.action { background: rgba(147,51,234,0.15); color: #9333ea; } .secret-card-icon.desire { background: rgba(249,115,22,0.15); color: #f97316; } .secret-card-icon.memory { background: rgba(59,130,246,0.15); color: #3b82f6; } .secret-card-icon.confession { background: rgba(236,72,153,0.15); color: #ec4899; } .secret-card-tag { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); } .secret-card-time { font-size: 11px; color: rgba(255,255,255,0.3); margin-left: auto; } .secret-card-body { padding: 0 16px 16px; font-size: 14px; line-height: 1.8; color: rgba(255,255,255,0.7); word-break: break-word; } .secret-card-footer { padding: 10px 16px; background: rgba(0,0,0,0.15); display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255,255,255,0.3); } .secret-card-footer i { font-size: 10px; } /* Secret Loading */ .secret-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; gap: 16px; } .secret-loading-lock { font-size: 36px; color: #ff4b91; animation: secretUnlock 2s ease-in-out infinite; } @keyframes secretUnlock { 0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.7; } 25% { transform: rotate(-10deg) scale(1.1); opacity: 1; } 50% { transform: rotate(10deg) scale(1.05); opacity: 0.9; } 75% { transform: rotate(-5deg) scale(1.08); opacity: 1; } } .secret-loading-text { font-size: 14px; color: rgba(255,255,255,0.5); text-align: center; } .secret-loading-dots { display: flex; gap: 6px; } .secret-loading-dots span { width: 8px; height: 8px; background: #ff4b91; border-radius: 50%; animation: secretDotBounce 1.4s infinite ease-in-out; } .secret-loading-dots span:nth-child(2) { animation-delay: 0.2s; } .secret-loading-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes secretDotBounce { 0%, 80%, 100% { transform: scale(0.5); opacity: 0.3; } 40% { transform: scale(1); opacity: 1; } } /* Secret Settings Modal */ .secret-settings-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 100; display: none; justify-content: center; align-items: flex-end; backdrop-filter: blur(3px); } .secret-settings-overlay.show { display: flex; } .secret-settings-sheet { width: 100%; background: #1e1e3a; border-radius: 20px 20px 0 0; padding: 24px 20px 30px; max-height: 70%; overflow-y: auto; border-top: 1px solid rgba(255,75,145,0.2); } .secret-settings-sheet h3 { text-align: center; color: #fff; margin-bottom: 6px; font-size: 17px; } .secret-settings-sub { text-align: center; color: rgba(255,255,255,0.4); font-size: 12px; margin-bottom: 20px; } .secret-level-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .secret-level-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(255,255,255,0.05); border: 2px solid rgba(255,255,255,0.08); border-radius: 14px; cursor: pointer; transition: all 0.25s; } .secret-level-item.active { border-color: #ff4b91; background: rgba(255,75,145,0.1); } .secret-level-item:active { transform: scale(0.98); } .secret-level-emoji { font-size: 24px; width: 40px; text-align: center; } .secret-level-info { flex: 1; } .secret-level-name { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 3px; } .secret-level-desc { font-size: 12px; color: rgba(255,255,255,0.4); } .secret-level-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); display: flex; justify-content: center; align-items: center; font-size: 12px; color: transparent; transition: all 0.2s; } .secret-level-item.active .secret-level-check { background: #ff4b91; border-color: #ff4b91; color: #fff; } .secret-settings-close { width: 100%; padding: 14px; background: rgba(255,255,255,0.08); border: none; border-radius: 12px; color: rgba(255,255,255,0.7); font-size: 15px; cursor: pointer; transition: background 0.2s; } .secret-settings-close:active { background: rgba(255,255,255,0.15); } /* ====== TA的状态 Status Module ====== */ .status-page-container { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(180deg, #fef7ff 0%, #fce7f3 25%, #f0e6ff 55%, #e8eaff 100%); } /* Animated background particles */ .status-page-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 15% 20%, rgba(236,72,153,0.08) 0%, transparent 50%), radial-gradient(circle at 85% 30%, rgba(167,139,250,0.08) 0%, transparent 50%), radial-gradient(circle at 50% 80%, rgba(251,191,36,0.05) 0%, transparent 40%); pointer-events: none; z-index: 0; } .status-nav-bar { display: flex; align-items: center; padding: 12px 16px; padding-top: 12px; background: transparent; z-index: 10; position: relative; } .status-nav-bar .nav-icon { color: #6b7280; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.65); backdrop-filter: blur(12px); cursor: pointer; transition: all 0.2s; font-size: 16px; } .status-nav-bar .nav-icon:active { transform: scale(0.9); } .status-nav-actions { display: flex; gap: 10px; } .status-nav-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.65); backdrop-filter: blur(12px); color: #6b7280; cursor: pointer; transition: all 0.3s; font-size: 15px; } .status-nav-btn:active { transform: scale(0.88); background: rgba(236,72,153,0.15); } .status-nav-btn.spinning i { animation: statusSpin 0.8s linear infinite; } @keyframes statusSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .status-scroll-area { flex: 1; overflow-y: auto; padding: 0 16px 40px; -webkit-overflow-scrolling: touch; position: relative; z-index: 1; } /* Status Loading */ .status-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; animation: statusFadeIn 0.5s ease; } @keyframes statusFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .status-loading-icon { font-size: 52px; color: #ec4899; animation: statusPulse 1.5s ease-in-out infinite; } @keyframes statusPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.6; } } .status-loading-text { font-size: 15px; color: #9ca3af; margin-top: 18px; text-align: center; line-height: 1.7; } .status-loading-dots { display: flex; gap: 8px; margin-top: 22px; } .status-loading-dots span { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #ec4899, #a78bfa); animation: statusDotBounce 1.4s infinite ease-in-out both; } .status-loading-dots span:nth-child(2) { animation-delay: 0.2s; } .status-loading-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes statusDotBounce { 0%, 80%, 100% { transform: scale(0); opacity: 0.3; } 40% { transform: scale(1); opacity: 1; } } /* Status Hero Area */ .status-hero-area { display: flex; flex-direction: column; align-items: center; padding: 5px 0 18px; animation: statusFadeIn 0.6s ease; } .status-avatar-wrap { position: relative; width: 84px; height: 84px; } .status-hero-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 6px 24px rgba(236, 72, 153, 0.25); } .status-avatar-pulse-ring { position: absolute; top: -8px; left: -8px; width: 100px; height: 100px; border-radius: 50%; border: 2px solid rgba(236, 72, 153, 0.35); animation: statusRingPulse 2.5s ease-in-out infinite; } .status-avatar-pulse-ring::after { content: ''; position: absolute; top: -4px; left: -4px; width: 108px; height: 108px; border-radius: 50%; border: 1.5px solid rgba(167, 139, 250, 0.2); animation: statusRingPulse 2.5s ease-in-out infinite 0.5s; } @keyframes statusRingPulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.12); opacity: 0; } } .status-hero-name { font-size: 19px; font-weight: 700; color: #1f2937; margin-top: 10px; } .status-hero-mood { font-size: 13px; color: #9ca3af; margin-top: 3px; letter-spacing: 0.5px; } /* Mood Bar */ .status-mood-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: rgba(255,255,255,0.75); backdrop-filter: blur(14px); border-radius: 18px; margin-bottom: 14px; animation: statusFadeIn 0.7s ease; box-shadow: 0 2px 12px rgba(0,0,0,0.04); border: 1px solid rgba(255,255,255,0.5); } .status-mood-item { display: flex; align-items: center; gap: 8px; } .status-mood-emoji { font-size: 24px; } .status-mood-text { font-size: 15px; font-weight: 600; color: #374151; } .status-scene-tag { font-size: 12px; color: #8b5cf6; background: rgba(139,92,246,0.08); padding: 5px 12px; border-radius: 20px; border: 1px solid rgba(139,92,246,0.12); } .status-scene-tag i { margin-right: 4px; color: #ec4899; } /* Vitals Grid */ .status-vitals-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; animation: statusFadeIn 0.8s ease; } .status-vital-card { background: rgba(255,255,255,0.8); backdrop-filter: blur(12px); border-radius: 18px; padding: 14px 12px; text-align: center; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 2px 12px rgba(0,0,0,0.04); border: 1px solid rgba(255,255,255,0.6); position: relative; overflow: hidden; } .status-vital-card.changed { animation: statusVitalPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes statusVitalPop { 0% { transform: scale(1); } 50% { transform: scale(1.06); box-shadow: 0 4px 20px rgba(236,72,153,0.15); } 100% { transform: scale(1); } } .status-vital-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--vital-accent, #ec4899); opacity: 0.6; border-radius: 18px 18px 0 0; } .status-vital-icon { font-size: 20px; margin-bottom: 6px; } .status-vital-value { font-size: 28px; font-weight: 800; color: #1f2937; line-height: 1.2; transition: all 0.3s; } .status-vital-value.highlight { color: #ec4899; text-shadow: 0 0 12px rgba(236,72,153,0.2); } .status-vital-label { font-size: 11px; color: #9ca3af; margin-top: 3px; font-weight: 500; } .status-vital-delta { font-size: 11px; font-weight: 600; margin-top: 2px; min-height: 16px; transition: all 0.3s; } .status-vital-delta.up { color: #ef4444; } .status-vital-delta.down { color: #3b82f6; } .status-vital-delta.neutral { color: #9ca3af; } /* Section Title */ .status-section-title { font-size: 14px; font-weight: 600; color: #6b7280; margin-bottom: 12px; padding-left: 4px; animation: statusFadeIn 0.9s ease; display: flex; align-items: center; } .status-section-title i { color: #ec4899; margin-right: 6px; font-size: 13px; } .status-section-hint { font-size: 11px; color: #d1d5db; font-weight: 400; margin-left: auto; } /* Bubbles Area */ .status-bubbles-area { position: relative; min-height: 200px; padding: 15px 0 20px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; } .status-bubble { width: var(--bub-size, 68px); height: var(--bub-size, 68px); border-radius: 50%; background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 4px 16px rgba(0,0,0,0.06); border: 2px solid transparent; position: relative; animation: statusBubbleAppear 0.5s ease both, statusBubbleFloat var(--float-dur, 3s) var(--float-ease, ease-in-out) infinite; animation-delay: var(--float-delay, 0s), var(--float-delay, 0s); } @keyframes statusBubbleAppear { from { opacity: 0; transform: scale(0.3) rotate(-20deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } } @keyframes statusBubbleFloat { 0%, 100% { transform: translateY(0) translateX(0); } 25% { transform: translateY(calc(var(--float-y, -6px))) translateX(calc(var(--float-x, 3px))); } 50% { transform: translateY(calc(var(--float-y, -6px) * 0.5)) translateX(calc(var(--float-x, 3px) * -1)); } 75% { transform: translateY(calc(var(--float-y, -6px) * 1.2)) translateX(calc(var(--float-x, 3px) * 0.5)); } } .status-bubble::after { content: ''; position: absolute; bottom: -2px; right: -2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bubble-color, #ec4899); opacity: 0; transition: all 0.3s; transform: scale(0); } .status-bubble:active { transform: scale(0.85) !important; } .status-bubble.selected { border-color: var(--bubble-color, #ec4899); background: rgba(255,255,255,0.98); box-shadow: 0 6px 28px color-mix(in srgb, var(--bubble-color, #ec4899) 25%, transparent); animation: statusBubbleSelected 0.6s ease forwards; z-index: 5; } .status-bubble.selected::after { opacity: 1; transform: scale(1); } @keyframes statusBubbleSelected { 0% { transform: scale(1); } 40% { transform: scale(1.2); } 100% { transform: scale(1.12); } } .status-bubble-emoji { font-size: 22px; line-height: 1; transition: transform 0.3s; } .status-bubble.selected .status-bubble-emoji { transform: scale(1.15); } .status-bubble-name { font-size: 10px; color: #6b7280; margin-top: 2px; font-weight: 500; max-width: 56px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Private/intimate bubble glow */ .status-bubble.intimate { background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(252,231,243,0.9)); box-shadow: 0 4px 16px rgba(236,72,153,0.1); } .status-bubble.intimate.selected { box-shadow: 0 6px 30px rgba(236,72,153,0.25); } /* Detail Panel */ .status-detail-panel { background: rgba(255,255,255,0.92); backdrop-filter: blur(18px); border-radius: 22px; padding: 0; margin-top: 14px; margin-bottom: 10px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.08); animation: statusDetailSlide 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); border: 1px solid rgba(255,255,255,0.5); } @keyframes statusDetailSlide { from { opacity: 0; transform: translateY(25px) scale(0.92); } to { opacity: 1; transform: translateY(0) scale(1); } } .status-detail-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: linear-gradient(135deg, rgba(252,231,243,0.8), rgba(237,233,254,0.6)); border-bottom: 1px solid rgba(0,0,0,0.04); } .status-detail-emoji { font-size: 30px; } .status-detail-part { font-size: 17px; font-weight: 700; color: #1f2937; flex: 1; } .status-detail-state-inline { font-size: 12px; color: #ec4899; background: rgba(236,72,153,0.08); padding: 3px 10px; border-radius: 12px; font-weight: 500; } .status-detail-close { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,0,0,0.05); color: #9ca3af; cursor: pointer; font-size: 12px; transition: all 0.2s; } .status-detail-close:active { background: rgba(0,0,0,0.1); transform: scale(0.9); } .status-detail-body { padding: 18px 20px; } .status-detail-state { margin-bottom: 12px; } .status-detail-state-label { font-size: 12px; color: #9ca3af; margin-bottom: 4px; } .status-detail-state-value { font-size: 16px; font-weight: 600; color: #ec4899; } .status-detail-desc { font-size: 14px; color: #4b5563; line-height: 1.8; margin-bottom: 14px; } .status-detail-data { background: linear-gradient(135deg, #fdf2f8, #f5f3ff); border-radius: 14px; padding: 14px 16px; border: 1px solid rgba(236,72,153,0.08); } .status-detail-data-label { font-size: 12px; color: #a855f7; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; } .status-detail-data-label i { margin-right: 6px; font-size: 11px; } .status-detail-data-value { font-size: 14px; color: #6b7280; line-height: 1.6; } /* Vitals mini bar inside detail panel */ .status-detail-vitals-mini { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } .status-detail-vital-tag { display: flex; align-items: center; gap: 5px; padding: 5px 10px; background: rgba(0,0,0,0.03); border-radius: 10px; font-size: 12px; color: #6b7280; } .status-detail-vital-tag i { font-size: 11px; } .status-detail-vital-tag .delta { font-weight: 600; } .status-detail-vital-tag .delta.up { color: #ef4444; } .status-detail-vital-tag .delta.down { color: #3b82f6; } /* ====== GLOBAL SCROLLBAR HIDE (keep scroll functional) ====== */ #device * { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ } #device *::-webkit-scrollbar { display: none; /* Chrome/Safari/Opera */ } /* ====== Spacetime Category Headers & Divider ====== */ .st-category-header { display: flex; align-items: center; gap: 14px; padding: 20px 20px 10px; position: relative; } .st-category-header::before { content: ''; position: absolute; left: 20px; right: 20px; top: 0; height: 1px; background: #e0e0e0; } .st-category-icon { font-size: 32px; width: 52px; height: 52px; display: flex; justify-content: center; align-items: center; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 16px; flex-shrink: 0; } .st-category-info { flex: 1; min-width: 0; } .st-category-title { font-size: 20px; font-weight: 700; color: #1a1a1a; margin-bottom: 3px; letter-spacing: 0.5px; } .st-category-subtitle { font-size: 13px; color: #666666; } /* IF线 header 颜色变体 */ .st-category-header-if .st-category-icon { background: #f0f0f0; border-color: #e0e0e0; } /* 现实一生卡片左侧渐变条 */ .st-era-card-reality { border-left: 3px solid #cccccc; } .st-era-card-reality:hover, .st-era-card-reality:active { border-left-color: #999999; background: #f5f5f5 !important; } /* IF线卡片左侧渐变条 */ .st-era-card-if { border-left: 3px solid #999999; } .st-era-card-if:hover, .st-era-card-if:active { border-left-color: #666666; background: #f5f5f5 !important; } /* 分隔线 */ .st-category-divider { display: flex; align-items: center; gap: 16px; padding: 24px 24px 8px; } .st-divider-line { flex: 1; height: 1px; background: #e0e0e0; } .st-divider-text { font-size: 12px; color: #999999; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; } /* ========== Spacetime More Menu ========== */ .st-more-menu { position: absolute; top: 100%; right: 0; min-width: 150px; background: #ffffff; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 12px; border: 1px solid #e0e0e0; box-shadow: 0 8px 32px rgba(0,0,0,0.12); z-index: 100; overflow: hidden; animation: stMenuFadeIn 0.15s ease; } @keyframes stMenuFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .st-more-menu-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: #1a1a1a; font-size: 14px; cursor: pointer; transition: background 0.15s; white-space: nowrap; } .st-more-menu-item:hover, .st-more-menu-item:active { background: #f5f5f5; } .st-more-menu-item i { width: 18px; text-align: center; font-size: 14px; opacity: 0.7; } .st-more-menu-item + .st-more-menu-item { border-top: 1px solid #e0e0e0; } /* ========== Spacetime Task System ========== */ .st-task-nav-icon { position: relative; display: flex; align-items: center; justify-content: center; } .st-task-nav-icon .st-task-mini-countdown { font-size: 9px; color: #999; position: absolute; bottom: 0; right: -2px; } /* ========== Spacetime Choice & Ending System ========== */ .st-choice-option:hover { background: #e8e8e8 !important; border-color: #333 !important; } .st-choice-option:active { background: #d0d0d0 !important; } /* ========== DESKTOP SWIPE ========== */ #desktop-swipe-container { flex: 1; overflow: hidden; position: relative; touch-action: pan-y; } #desktop-swipe-wrapper { display: flex; width: 300%; height: 100%; transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1); will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .desktop-page { width: 33.333%; height: 100%; flex-shrink: 0; overflow: hidden; /* [FIX-背景穿透] 确保透明，让layer-desktop背景图在所有页面可见 */ background: transparent !important; } /* [FIX-第二页壁纸] 确保第二页滚动区域和网格都透明，不挡住layer-desktop壁纸 */ #desktop-page2-scroll { background: transparent !important; } #desktop-page2-scroll .p2-grid { background: transparent !important; } .desktop-page-dots { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 10; } .desktop-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,0.15); transition: all 0.3s; } .desktop-dot.active { background: rgba(0,0,0,0.5); width: 16px; border-radius: 3px; } /* ========== FORUM STYLES ========== */ /* Forum Tabs */ #layer-forum { display: flex; flex-direction: column; overflow: hidden; max-width: 100%; width: 100%; box-sizing: border-box; } .forum-tab { display: none; flex-direction: column; flex: 1; overflow: hidden; overflow-x: hidden; position: relative; max-width: 100%; width: 100%; box-sizing: border-box; } .forum-tab.active { display: flex; } /* Forum Feed Tabs */ .forum-feed-tabs { display: flex; align-items: center; justify-content: center; gap: 0; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; padding: 0 20px; } .forum-feed-tab { flex: 1; text-align: center; padding: 10px 0; font-size: 14px; color: #999; cursor: pointer; position: relative; transition: color 0.2s; } .forum-feed-tab.active { color: var(--primary); font-weight: 600; } .forum-feed-tab.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; background: var(--primary); border-radius: 2px; } /* iOS全屏适配：论坛底部导航 - constant()兼容旧版iOS */ .forum-bottom-nav { display: flex; align-items: center; justify-content: space-around; height: 50px; height: 50px; background: #fff; border-top: 1px solid #eee; flex-shrink: 0; padding-bottom: 0px; padding-bottom: 0px; /* iOS全屏适配：左右安全区域 */ padding-left: 0px; padding-left: 0px; padding-right: 0px; padding-right: 0px; } .forum-bottom-item { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: #999; cursor: pointer; position: relative; padding: 4px 16px; } .forum-bottom-item i { font-size: 20px; } .forum-bottom-item.active { color: var(--primary); } .forum-msg-dot { position: absolute; top: 2px; right: 10px; width: 8px; height: 8px; background: #ff3b30; border-radius: 50%; } /* iOS全屏适配：论坛浮动按钮 */ .forum-fab-group { position: absolute; bottom: 20px; right: 16px; display: flex; flex-direction: column; gap: 12px; z-index: 10; } .forum-fab { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); cursor: pointer; transition: transform 0.15s; } .forum-fab:active { transform: scale(0.9); } .forum-fab-refresh { background: #666; } .forum-fab-post { background: var(--primary); } /* Forum Post Card */ .forum-post-card { background: #fff; border-radius: 16px; padding: 16px; margin: 8px 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; overflow: hidden; max-width: 100%; box-sizing: border-box; } .forum-post-card:first-child { margin-top: 12px; } .forum-post-card:active { transform: scale(0.98); box-shadow: 0 1px 4px rgba(0,0,0,0.04); } .forum-post-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .forum-post-header img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #f0f0f0; } .forum-post-author { font-size: 14px; font-weight: 600; color: #1d1d1f; } .forum-post-time { font-size: 11px; color: #aaa; } .forum-post-title { font-size: 16px; font-weight: 700; color: #1d1d1f; margin-bottom: 6px; line-height: 1.4; } .forum-post-preview { font-size: 14px; color: #555; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .forum-post-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid #f0f0f0; font-size: 13px; color: #aaa; } .forum-post-footer span { display: flex; align-items: center; gap: 5px; cursor: pointer; padding: 4px 8px; border-radius: 8px; transition: background 0.15s, color 0.15s; } .forum-post-footer span:active { background: #f5f5f5; } .forum-post-footer span.liked { color: #ff4d6a; } .forum-post-footer span.starred { color: #f5a623; } /* Forum Detail */ .forum-detail-post { padding: 20px; border-bottom: 1px solid #f0f0f0; } .forum-detail-author-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .forum-detail-author-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #f0f0f0; } .forum-detail-author-info { flex: 1; } .forum-detail-author-name { font-size: 15px; font-weight: 600; color: #1d1d1f; } .forum-detail-author-time { font-size: 12px; color: #aaa; margin-top: 2px; } .forum-follow-btn { padding: 6px 16px; border: 2px solid var(--primary); background: var(--primary); color: #fff; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; display: flex; align-items: center; gap: 4px; } .forum-follow-btn.followed { background: transparent; color: #999; border-color: #ddd; } .forum-follow-btn:active { transform: scale(0.95); } .forum-detail-title { font-size: 20px; font-weight: 700; color: #1d1d1f; margin-bottom: 12px; line-height: 1.4; } .forum-detail-content { font-size: 16px; color: #333; line-height: 1.8; white-space: pre-wrap; } .forum-detail-meta { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #f0f0f0; } .forum-detail-meta img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .forum-detail-stats-bar { display: flex; align-items: center; justify-content: space-around; padding: 10px 16px; background: #fff; border-bottom: 1px solid #f0f0f0; } .forum-detail-stat { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 14px; color: #888; cursor: pointer; border-radius: 10px; transition: background 0.15s, color 0.15s; } .forum-detail-stat:active { background: #f5f5f5; } .forum-detail-stat.liked { color: #ff4d6a; } .forum-detail-stat.liked i { color: #ff4d6a; } .forum-detail-stat.starred { color: #f5a623; } .forum-detail-stat.starred i { color: #f5a623; } .forum-detail-actions { display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px; background: #fafafa; border-top: 1px solid #eee; flex-shrink: 0; overflow: hidden; } .forum-detail-act { display: flex; align-items: center; gap: 2px; padding: 6px 4px; font-size: 13px; color: #666; cursor: pointer; flex-shrink: 0; } .forum-detail-act.liked i, .forum-detail-act.liked { color: #ff4d6a; } .forum-detail-act.starred i, .forum-detail-act.starred { color: #f5a623; } .forum-detail-act-input { flex: 1; min-width: 0; display: flex; gap: 6px; align-items: center; } .forum-detail-act-input input { flex: 1; min-width: 0; height: 36px; border: 1px solid #ddd; border-radius: 18px; padding: 0 12px; font-size: 14px; background: #fff; } .forum-detail-act-input button { flex-shrink: 0; padding: 8px 12px; border: none; background: var(--primary); color: #fff; border-radius: 18px; font-size: 14px; cursor: pointer; white-space: nowrap; } /* Forum Comments */ .forum-comments-section { padding: 16px 20px; } .forum-comments-title { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 12px; } .forum-comment-item { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid #f5f5f5; } .forum-comment-item img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .forum-comment-body { flex: 1; } .forum-comment-name { font-size: 13px; font-weight: 600; color: #576b95; margin-bottom: 4px; } .forum-comment-text { font-size: 14px; color: #333; line-height: 1.5; } .forum-comment-time { font-size: 11px; color: #bbb; margin-top: 4px; } /* Forum Notification Bar */ .forum-notif-bar { display: flex; justify-content: space-around; padding: 16px 10px; background: #fff; margin-bottom: 10px; } .forum-notif-item { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: #666; cursor: pointer; position: relative; } .forum-notif-icon { width: 44px; height: 44px; border-radius: 50%; background: #f5f5f5; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #666; } .forum-notif-badge { position: absolute; top: -2px; right: 8px; min-width: 16px; height: 16px; background: #ff3b30; color: #fff; font-size: 10px; border-radius: 8px; display: none; align-items: center; justify-content: center; padding: 0 4px; } .forum-section-title { font-size: 14px; font-weight: 600; color: #333; padding: 12px 16px 8px; background: #fff; border-bottom: 1px solid #f0f0f0; } /* Forum DM List */ .forum-dm-item { display: flex; align-items: center; padding: 14px 16px; margin: 6px 10px; background: #fff; border-radius: 14px; border: 1px solid #f0f0f5; cursor: pointer; transition: background 0.15s, box-shadow 0.15s; } .forum-dm-item:active { background: #f5f5f5; } .forum-dm-item-avatar-wrap { position: relative; flex-shrink: 0; margin-right: 12px; } .forum-dm-item-avatar-wrap img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .forum-dm-item-unread-dot { position: absolute; top: 0; right: 0; width: 10px; height: 10px; background: #f44; border-radius: 50%; border: 2px solid #fff; } .forum-dm-item-info { flex: 1; min-width: 0; overflow: hidden; } .forum-dm-item-top { display: flex; justify-content: space-between; align-items: center; } .forum-dm-item-name { font-weight: 600; font-size: 15px; color: #1a1a2e; } .forum-dm-item-time { font-size: 11px; color: #b0b0b0; flex-shrink: 0; } .forum-dm-item-last { font-size: 13px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; } /* Forum DM Chat Body - constrain all avatars */ #forum-dm-chat-body img { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; max-width: 32px !important; max-height: 32px !important; border-radius: var(--avatar-radius, 50%); object-fit: cover !important; flex-shrink: 0 !important; } /* Forum DM Chat Typing Indicator */ .forum-dm-typing { display: flex; align-items: flex-start; margin-bottom: 14px; } .forum-dm-typing img { width: 36px; height: 36px; border-radius: 50%; margin-right: 10px; flex-shrink: 0; } .forum-dm-typing-bubble { padding: 12px 18px; background: #fff; border-radius: 4px 16px 16px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); display: flex; align-items: center; gap: 4px; } .forum-dm-typing-bubble .typing-dot { width: 7px; height: 7px; background: #b0b0b0; border-radius: 50%; animation: forumTypingBounce 1.4s infinite ease-in-out; } .forum-dm-typing-bubble .typing-dot:nth-child(1) { animation-delay: 0s; } .forum-dm-typing-bubble .typing-dot:nth-child(2) { animation-delay: 0.2s; } .forum-dm-typing-bubble .typing-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes forumTypingBounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } .forum-dm-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: #fff; border-radius: 10px; margin-bottom: 8px; cursor: pointer; } .forum-dm-card img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .forum-dm-info { flex: 1; overflow: hidden; } .forum-dm-name { font-size: 15px; font-weight: 600; color: #333; } .forum-dm-last { font-size: 13px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .forum-dm-time { font-size: 11px; color: #bbb; flex-shrink: 0; } /* Forum DM Chat */ .forum-dm-input-bar { display: flex; align-items: center; gap: 10px; padding: 10px 15px 15px; background: #f7f7f7; border-top: 1px solid #e5e5e5; flex-shrink: 0; } .forum-dm-input-bar input { flex: 1; height: 36px; border: 1px solid #ddd; border-radius: 18px; padding: 0 15px; font-size: 14px; background: #fff; } .forum-dm-input-bar button { padding: 8px 16px; border: none; background: var(--primary); color: #fff; border-radius: 18px; font-size: 14px; cursor: pointer; } .forum-dm-bubble { max-width: 70%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; margin-bottom: 8px; word-break: break-word; } .forum-dm-bubble.me { background: var(--primary); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; } .forum-dm-bubble.other { background: #fff; color: #333; margin-right: auto; border-bottom-left-radius: 4px; } /* Forum DM Bubble Pop-in Animation */ @keyframes forumBubbleIn { 0% { opacity: 0; transform: scale(0.6) translateY(10px); } 50% { transform: scale(1.05) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } .forum-dm-bubble-anim { animation: forumBubbleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } /* Forum DM Typing Indicator */ .forum-dm-typing { display: flex; align-items: center; gap: 8px; padding: 8px 12px; opacity: 0; transition: opacity 0.25s; pointer-events: none; } .forum-dm-typing.show { opacity: 1; } .forum-dm-typing-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .forum-dm-typing-bubble { background: #fff; border-radius: 4px 16px 16px 16px; padding: 10px 16px; display: flex; align-items: center; gap: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); font-size: 13px; color: #999; } .forum-dm-typing-dots { display: flex; gap: 3px; margin-left: 4px; } .forum-dm-typing-dots span { width: 5px; height: 5px; border-radius: 50%; background: #bbb; animation: forumTypingDot 1.2s infinite; } .forum-dm-typing-dots span:nth-child(2) { animation-delay: 0.2s; } .forum-dm-typing-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes forumTypingDot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } } /* Forum Profile */ .forum-profile-header { background: #fff; padding: 0 20px 24px; text-align: center; } .forum-profile-bg { border-radius: 0 0 16px 16px; background-size: cover; background-position: center; overflow: hidden; } .forum-profile-avatar { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 12px; position: relative; overflow: hidden; cursor: pointer; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .forum-profile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .forum-avatar-edit { position: absolute; bottom: 0; left: 0; right: 0; height: 24px; background: rgba(0,0,0,0.4); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; } .forum-profile-name { font-size: 18px; font-weight: 700; color: #1d1d1f; margin-bottom: 4px; cursor: pointer; } .forum-profile-bio { font-size: 13px; color: #999; margin-bottom: 16px; cursor: pointer; } .forum-profile-stats { display: flex; justify-content: center; gap: 40px; } .forum-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: #999; } .forum-stat-num { font-size: 18px; font-weight: 700; color: #1d1d1f; } /* Forum Me Tabs */ .forum-me-tabs { display: flex; background: #fff; border-bottom: 1px solid #eee; margin-top: 10px; } .forum-me-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: #999; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; } .forum-me-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; } /* Forum Notification Items */ .forum-notif-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: #fff; border-radius: 10px; margin-bottom: 8px; } .forum-notif-card img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .forum-notif-card-text { flex: 1; font-size: 14px; color: #333; line-height: 1.4; } .forum-notif-card-time { font-size: 11px; color: #bbb; } .forum-empty { text-align: center; padding: 80px 20px; color: #999; } .forum-empty i { font-size: 48px; color: #ddd; margin-bottom: 15px; display: block; } /* 拉黑消息样式 */ .msg-blocked-warn { display: flex; align-items: center; justify-content: center; color: #fa5151; font-size: 18px; cursor: pointer; padding: 0 6px; flex-shrink: 0; } .msg-blocked .bubble { opacity: 0.6; } /* [已移除] 强制竖屏CSS transform - 在平板键盘弹出时会误判为横屏，故完全移除 */ /* ===== 拉黑系统消息样式 ===== */ /* [FIX-拉黑重叠] 改用 display:block + margin:auto 居中，避免 inline-block + left:50% 导致连续消息重叠 */ .block-system-msg { text-align: center; padding: 6px 16px; margin: 8px auto; font-size: 12px; color: #999; background: rgba(0,0,0,0.04); border-radius: 4px; display: block; max-width: 80%; width: fit-content; } .block-system-msg.block-msg { color: #fa5151; background: rgba(250,81,81,0.08); } .block-system-msg.unblock-msg { color: #07c160; background: rgba(7,193,96,0.08); } /* 解除拉黑申请记录（联系人主动求情，持久化到聊天） */ .block-system-msg.block-plead-msg { color: #e8685a; background: rgba(232,104,90,0.08); max-width: 86%; line-height: 1.5; text-align: left; } /* 拉黑状态下联系人消息的红色感叹号（被用户拉黑） */ .msg-blocked-by-me-warn { display: flex; align-items: center; justify-content: center; color: #fa5151; font-size: 18px; cursor: pointer; padding: 0 6px; flex-shrink: 0; } .msg-blocked-by-me .bubble { opacity: 0.6; } /* 翻译按钮和翻译结果 */ .msg-translate-btn { display: inline-block; font-size: 11px; color: #576b95; cursor: pointer; padding: 2px 0; margin-top: 2px; user-select: none; } .msg-translate-btn:hover { text-decoration: underline; } .msg-translate-btn.active { color: #999; } /* 小铅笔格式修正按钮 */ .msg-edit-format-btn { transition: opacity 0.2s, color 0.2s; flex-shrink: 0; } .msg-row:hover .msg-edit-format-btn, .msg-edit-format-btn:active { opacity: 0.75 !important; color: #888 !important; } .msg-edit-format-btn:hover { opacity: 1 !important; color: #576b95 !important; } /* 格式修正弹窗 - 类型选项 */ .edit-format-type-opt { transition: all 0.15s; } .edit-format-type-opt:hover { border-color: #07c160 !important; } .edit-format-type-opt.active { background: #07c160 !important; color: #fff !important; border-color: #07c160 !important; } /* 翻译结果 - 在气泡内部，横线分隔 */ .msg-translation { margin-top: 8px; animation: fadeInTranslation 0.2s ease; } .msg-translation-line { height: 1px; background: rgba(0, 0, 0, 0.1); margin-bottom: 6px; } .msg-translation-text { font-size: 13px; color: #666; line-height: 1.5; } /* 深色模式下横线和文字颜色适配 */ .me .msg-translation-line { background: rgba(255, 255, 255, 0.15); } .me .msg-translation-text { color: rgba(255, 255, 255, 0.75); } @keyframes fadeInTranslation { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ===== 线下模式 & 心声翻译UI（韩系极简） ===== */ /* 线下文本块翻译图标按钮 */ .offline-translate-icon { position: absolute; right: 8px; bottom: 8px; font-size: 11px; color: rgba(0,0,0,0.25); cursor: pointer; padding: 4px; border-radius: 50%; transition: color 0.2s, background 0.2s; z-index: 2; line-height: 1; } .offline-translate-icon:active { color: rgba(0,0,0,0.5); background: rgba(0,0,0,0.05); } .offline-translate-icon.active { color: #333; } /* 线下模式标签页切换 */ .offline-translate-tabs { display: flex; gap: 0; margin-top: 10px; border-top: 1px solid rgba(0,0,0,0.06); padding-top: 0; } .offline-translate-tab { flex: 1; text-align: center; font-size: 11px; color: #b0b0b0; padding: 8px 0 6px; cursor: pointer; letter-spacing: 0.5px; transition: color 0.2s; border-bottom: 2px solid transparent; user-select: none; } .offline-translate-tab.active { color: #333; border-bottom-color: #333; font-weight: 500; } /* 线下翻译内容区域 */ .offline-translate-body { position: relative; min-height: 40px; } .offline-translate-original, .offline-translate-result { transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .offline-translate-result { display: none; color: #555; line-height: 1.75; } .offline-translate-result.show { display: block; animation: fadeInTranslation 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .offline-translate-original.hide { display: none; } .offline-translate-loading { text-align: center; padding: 20px 0; color: #b0b0b0; font-size: 12px; letter-spacing: 1px; } /* 心声翻译展开按钮 */ .heart-translate-toggle { text-align: center; font-size: 11px; color: #b0b0b0; padding: 8px 0 2px; cursor: pointer; letter-spacing: 0.5px; user-select: none; transition: color 0.2s; } .heart-translate-toggle:active { color: #666; } .heart-translate-toggle i { font-size: 9px; margin-right: 3px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: inline-block; } .heart-translate-toggle.expanded i { transform: rotate(180deg); } /* 心声译文抽屉区域 */ .heart-translation-area { max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; opacity: 0; } .heart-translation-area.show { max-height: 600px; opacity: 1; } .heart-translation-content { background: rgba(0,0,0,0.025); border-radius: 8px; padding: 10px 12px; margin-top: 6px; font-size: 13px; color: #555; line-height: 1.65; border-left: 2px solid rgba(0,0,0,0.08); } .heart-translation-loading { padding: 10px 12px; margin-top: 6px; font-size: 12px; color: #b0b0b0; text-align: center; } /* 心声标签行内翻译 */ .heart-tag-translated { font-size: 11px; color: #999; margin-left: 2px; flex-basis: 100%; width: 100%; padding-left: 30px; box-sizing: border-box; word-break: break-word; } /* Edge browser forced-colors / auto-dark-mode compatibility */ @media (forced-colors: active) { .app-name, .app-icon, .user-name, .user-signature, .user-location, .desktop-time, .desktop-date, .bottom-nav-item, .dock-icon, .nav-title, .nav-icon, .list-title, .list-sub, .form-label { forced-color-adjust: none; } .dot { forced-color-adjust: none; background: GrayText !important; } .bubble.loading { forced-color-adjust: none; } } /* 工具栏折叠切换按钮 */ .btn-toolbar-toggle { color: #07c160 !important; font-size: 18px !important; padding: 4px 6px !important; background: none !important; border: none !important; cursor: pointer; transition: transform 0.2s; } .btn-toolbar-toggle:active { transform: scale(0.85); } /* ====== [FIX-底部导航栏保护v5] 防止自定义CSS隐藏底部工具栏 ====== */ /* 保护逻辑：当body上没有任何"隐藏胶囊栏"的class时，强制可见 */ /* 不再使用 display:flex!important（与inline style竞争），改用 opacity+visibility */ /* html:not(.keyboard-active) 确保键盘弹出时不强制显示 */ html:not(.keyboard-active) body:not(.layer-open):not(.wechat-active) .bottom-nav:not(.keyboard-open) { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; min-height: 60px !important; clip: auto !important; clip-path: none !important; z-index: 1000 !important; position: fixed !important; } html:not(.keyboard-active) body:not(.layer-open):not(.wechat-active) .bottom-nav:not(.keyboard-open) .bottom-nav-item { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } html:not(.keyboard-active) body:not(.layer-open):not(.wechat-active) .bottom-nav:not(.keyboard-open) .dock-icon { display: flex !important; visibility: visible !important; opacity: 1 !important; } /* [FIX-底部导航栏v5] keyboard-open 兼容旧逻辑 */ .bottom-nav.keyboard-open { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* ===== QQ风格联系人分组样式 ===== */ .cg-header { display: flex; align-items: center; padding: 10px 16px; background: #f7f7f7; border-bottom: 1px solid #ececec; border-radius: 10px 10px 0 0; margin: 4px 10px 0; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: background 0.15s; } /* 折叠状态：恢复全圆角 */ .cg-header.cg-collapsed { border-radius: 10px; margin-bottom: 0; } .cg-header:active { background: #ebebeb; } .cg-arrow { font-size: 10px; color: #999; margin-right: 8px; transition: transform 0.25s ease; width: 12px; text-align: center; flex-shrink: 0; } .cg-collapsed .cg-arrow { transform: rotate(0deg); } .cg-name { flex: 1; font-size: 13px; font-weight: 500; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cg-count { font-size: 12px; color: #bbb; margin-left: 6px; flex-shrink: 0; } .cg-count::before { content: '('; } .cg-count::after { content: ')'; } .cg-unread { font-size: 10px; color: #fff; background: #ff3b30; border-radius: 10px; padding: 1px 6px; margin-left: 6px; min-width: 16px; text-align: center; flex-shrink: 0; line-height: 16px; } .cg-body { margin: 0 10px 4px; border-radius: 0 0 10px 10px; overflow: hidden; background: #fff; } .cg-header + .cg-body { margin-top: -4px; } .cg-body .list-item { border-bottom: 1px solid #f5f5f5; } .cg-body .list-item:last-child { border-bottom: none; } .cg-manage-btn { text-align: center; padding: 16px; color: #576b95; font-size: 14px; cursor: pointer; border-top: 8px solid #f5f5f5; -webkit-tap-highlight-color: transparent; } .cg-manage-btn:active { background: #f0f0f0; } /* 联系人搜索面板 */ #contact-search-bar { border-bottom: 1px solid #e5e5e5; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } #contact-search-results .list-item { border-bottom: 1px solid #f5f5f5; } #contact-search-results .list-item:active { background: #f0f0f0; } /* ========== [FIX-iOS底部白条-2026-07-04] ========== 已改用 apple-mobile-web-app-status-bar-style=default， 内容不再延伸到状态栏/Home指示条区域，无需 safe-area-inset-top 避让。 ========== */ /* ========== 模拟iOS状态栏（真实iOS风格） ========== */ #fake-ios-statusbar { position: fixed; top: 0; left: 0; right: 0; height: 28px; z-index: 999999; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: var(--chat-nav-bg, #ffffff); color: #000; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif; font-size: 14px; font-weight: 600; user-select: none; -webkit-user-select: none; pointer-events: none; transition: background-color 0.3s ease, color 0.3s ease; } #fake-ios-statusbar .fsb-left { flex: 1; display: flex; align-items: center; } #fake-ios-statusbar .fsb-time { font-size: 15px; font-weight: 600; letter-spacing: -0.3px; } #fake-ios-statusbar .fsb-right { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 5px; } /* 信号格 - iOS风格4根递增柱 */ #fake-ios-statusbar .fsb-signal { display: flex; align-items: flex-end; gap: 1.5px; height: 12px; } #fake-ios-statusbar .fsb-signal-bar { width: 3px; background: currentColor; border-radius: 1px; opacity: 0.9; } /* WiFi图标 */ #fake-ios-statusbar .fsb-wifi { color: currentColor; margin: 0 1px; } /* 电池 - iOS风格 */ #fake-ios-statusbar .fsb-battery { display: flex; align-items: center; gap: 1px; margin-left: 2px; } #fake-ios-statusbar .fsb-battery-body { width: 22px; height: 11px; border: 1.5px solid currentColor; border-radius: 3px; padding: 1.5px; opacity: 0.85; } #fake-ios-statusbar .fsb-battery-level { width: 65%; height: 100%; background: currentColor; border-radius: 1px; } #fake-ios-statusbar .fsb-battery-cap { width: 1.5px; height: 4px; background: currentColor; border-radius: 0 1px 1px 0; opacity: 0.5; } /* ===== 状态栏避让方案（浮层不占位 + 容器顶部留安全区） ===== 设计原理：状态栏 #fake-ios-statusbar 为 fixed 浮层，悬于最顶层、不占布局空间。 页面容器一律保持原有全屏定位与高度不变，仅通过 padding-top + border-box 让页面内部的导航栏/内容向下避开状态栏高度（28px）。 这样做的好处： 1) 不修改任何页面的 top / height，因此不会与 layer 的 transform 滑入动画、 device-adapter 动态设置的视口高度产生冲突（之前改 top/height 正是联系人 等界面错位的根因）； 2) 嵌套子页面（联系人 / 朋友圈 / 我 等）随父容器一同避让，无需逐个适配。 */ /* 1. 应用层（聊天 / 设置 / 各 App）：自身为 flex 纵向容器，padding-top 让首个 流式子元素（导航栏）整体下移，border-box 保证总高不变、底部不溢出灰条 */ body.has-fake-statusbar #device > .layer { padding-top: 28px; box-sizing: border-box; } /* 2. 微信主界面：内容区为绝对定位（padding 对其无效），改用 top 偏移， 让其内部的联系人 / 聊天 / 发现 / 我 等所有标签页统一避开状态栏 */ body.has-fake-statusbar #wx-content-area { top: 28px !important; } /* 3. 锁屏：绝对定位全屏覆盖，下移避开状态栏 */ body.has-fake-statusbar #lock-screen { top: 28px !important; height: calc(100% - 28px) !important; } /* 4. 独立全屏模块（关系网 / 相册 / 票夹）为 fixed 定位（包含块是视口，不受 #device 影响），单独下移并减高 */ body.has-fake-statusbar #layer-relation-network, body.has-fake-statusbar #layer-relation-network-portrait, body.has-fake-statusbar #layer-photo-album, body.has-fake-statusbar #layer-ticket-wallet, body.has-fake-statusbar #layer-ticket-purchase { top: 28px !important; height: calc(var(--app-height, 100vh) - 28px) !important; } /* 5. 购物/学习/精灵/泡泡/美化/设置app详情页： has-fake-statusbar下layer有padding-top:28px， 子页面/详情页的top需要从nav-bar底部开始(44px)， 但实际nav-bar已经被推下28px，所以子页面top需要是44+28=72px */ body.has-fake-statusbar .beauty-subpage { top: 72px !important; } body.has-fake-statusbar .settings-subpage { top: 72px !important; } body.has-fake-statusbar .shop-tab-content { top: 72px !important; } body.has-fake-statusbar .spirit-detail-header { top: 72px !important; } body.has-fake-statusbar .pp-bubble-header-top { padding-top: 36px !important; } /* [FIX-学习app遮挡-2026-06-14] study-tab是position:absolute;top:0，会忽略layer的padding-top， 需要手动设置top:28px让其避开fake-statusbar */ body.has-fake-statusbar #layer-study .study-tab { top: 28px !important; height: calc(100% - 28px) !important; } /* 学习app的nav-bar增加padding-top避开fake-statusbar区域 */ body.has-fake-statusbar #layer-study .study-tab > .nav-bar { padding-top: 0 !important; } /* 学习app的scroll-y需要额外顶部间距避免被nav-bar遮挡 */ body.has-fake-statusbar #layer-study .scroll-y { padding-top: 8px; } /* 地图layer不需要padding-top（已全屏fixed），但返回按钮需要避让 */ body.has-fake-statusbar #layer-map { padding-top: 0 !important; } /* [FIX-地图状态栏黑线+底部溢出-2026-07-12] 根因：#layer-map.show 用 top:0 + height:100vh 铺满视口，与 28px 模拟状态栏叠层后 顶部露出 #000 背景细缝，且总高度超出 --app-height 导致底部黑条溢出。 方案：与关系网/相册等 fixed 层一致，从状态栏下方起算高度。 */ body.has-fake-statusbar html:not(.ow-portrait-rotate) #layer-map.show, body.has-fake-statusbar html.is-ios:not(.ow-portrait-rotate) #layer-map.show { top: 28px !important; height: calc(var(--app-height, 100vh) - 28px) !important; min-height: calc(var(--app-height, 100vh) - 28px) !important; max-height: calc(var(--app-height, 100vh) - 28px) !important; } body.has-fake-statusbar html:not(.ow-portrait-rotate) #layer-map.show #map-content, body.has-fake-statusbar html.is-ios:not(.ow-portrait-rotate) #layer-map.show #map-content { height: calc(var(--app-height, 100vh) - 28px) !important; min-height: calc(var(--app-height, 100vh) - 28px) !important; } body.has-fake-statusbar html.keyboard-active:not(.ow-portrait-rotate) #layer-map.show { top: 28px !important; height: calc(var(--app-height, 100vh) - 28px) !important; min-height: calc(var(--app-height, 100vh) - 28px) !important; } /* [FIX-地图遮挡-2026-06-14] 地图所有子页面header统一加padding-top避让fake-statusbar */ body.has-fake-statusbar #layer-map .ow-back-btn { margin-top: 32px !important; } body.has-fake-statusbar #layer-map .ow-status-header, body.has-fake-statusbar #layer-map .ow-ach-header, body.has-fake-statusbar #layer-map .ow-shop-header, body.has-fake-statusbar #layer-map .ow-locmgr-header { padding-top: 28px !important; } /* 6. [FIX-返回按钮遮挡] 泡泡/学习/精灵/地图的自定义导航栏返回按钮被fake-statusbar遮挡 这些导航栏不是标准.nav-bar，需要单独添加padding-top避开28px的fake-statusbar */ /* 泡泡app自定义导航栏 */ body.has-fake-statusbar .pp-nav-bar { padding-top: 28px !important; } /* 精灵app列表页导航栏 */ body.has-fake-statusbar .spirit-list-nav { padding-top: 28px !important; height: calc(44px + 28px) !important; } /* 精灵app详情页顶部导航栏（position:sticky top:0 会粘在layer padding区域上边缘） */ body.has-fake-statusbar .spirit-detail-topbar { padding-top: 28px !important; height: calc(44px + 28px) !important; } /* 地图HUD：layer-map 已从 top:28px 起算，HUD 在地图内贴顶即可 */ body.has-fake-statusbar .ow-hud-top { top: 0 !important; } /* 7. 线下模式独立界面：.offline-fixed-header 是 absolute+top:0， 收不到 #device > .layer 的 padding-top:28px 下移（那只对流式元素有效）， 会贴在屏幕顶端被 fixed 的 #fake-ios-statusbar(28px) 盖住 → 顶部遮挡。 故让其自己在内容安全区(44px)基础上额外叠加状态栏高度(28px)。 */ body.has-fake-statusbar #layer-offline-mode .offline-fixed-header { padding-top: calc(44px + 28px) !important; box-sizing: border-box; } /* ===== 暗色模式适配 ===== */ body.dark-mode #fake-ios-statusbar, .wechat-dark-mode #fake-ios-statusbar { background: #1c1c1e; color: #fff; } /* ===== 第1页图片组件宽度 - 窄屏自适应 ===== */ @media (max-width: 400px) { :root { --p1-photo-width: 140px; } } @media (max-width: 360px) { :root { --p1-photo-width: 120px; } }