/* app.css · 108619 第②步（9.27）从 index.html 原样搬出，一行未改。改了它就要 bump index.html 里的 ?v= 和 sw.js 的 CACHE。 */ /* Special Elite — 磨损打字机,逾水 8.27 选定。OFL,自托管。 unicode-range 把它锁在纯拉丁:·、…、。、？ 这些中西都有的标点让给苹方, 否则每换一次西文字体,中文那一行的标点就跟着换一次形状。 */ @font-face{ font-family:'SpecialElite'; src:url('./fonts/specialelite-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; ascent-override:115.1%; descent-override:28.6%; unicode-range:U+0020-00A0,U+00A2-00B6,U+00B8-024F,U+0259,U+2010-2015,U+2018-201D,U+2020-2022,U+2030,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2212; } :root{ --screen-height: 100vh; --keyboard-offset: 0px; --ios-pwa-bottom-bleed: 0px; --ref-width: 941px; --ref-height: 1672px; /* 'NotoSerifSC' 必须排在通用关键字 monospace 前面。通用关键字在 WebKit 里 一定能解析成某个字体,回退链走到它就停了,后面的 --font-cn 永远轮不到—— 所以中文会卡在等宽的系统兜底上,思源宋一块切片都不会被请求。 */ --font-en: 'SpecialElite', 'NotoSerifSC', ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; /* 需要等宽对齐的地方留一条后路 */ /* 中文:思源宋体 500,自托管切片版(见 fonts/nsc.css)。苹方留在后面兜底—— 切片没到、或出现连思源也没有的字时,不至于掉到系统默认。 */ /* SpecialElite 排在最前:它有 unicode-range 锁死在拉丁,所以只接英文,汉字接不到, 会往后落到思源宋。不这样写的话,思源宋自己也带拉丁字形,凡是 --font-cn 打头的 地方(atrium 日记等)英文就会被宋体接走,打字机换不进去。 */ --font-cn: 'SpecialElite', 'NotoSerifSC', -apple-system, "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", system-ui, sans-serif; --font-cn-sys: -apple-system, "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", system-ui, sans-serif; --wall-default: none; --menu-wall-default: none; /* ── CONCRETE DAY · 裸建筑(default) ── */ --bg: #e8e4df; --header-bg: #e8e4df; --hairline: #c4bfb8; --text: #2c2a26; --text-soft: #7a756d; --text-faint: #b0aaa2; --bubble-ai-bg: #f2efeb; --bubble-ai-fg: #2c2a26; --bubble-ai-line: transparent; --bubble-human-bg: #d4d0ca; --bubble-human-fg: #2c2a26; --bubble-human-line: transparent; --accent: #4a7c9b; --send-bg: #4a7c9b; --tick: #b0aaa2; --accent-fg: #ffffff; /* 毛玻璃:雾白玻璃体 + 极细高光描边 + 很轻的悬浮阴影。 不要灰色半透明遮罩——那是塑料。玻璃靠的是背后被模糊 + 边缘厚度 + 内部折射。 */ --glass-a: rgba(255,255,255,.50); /* 玻璃体上缘 */ --glass-b: rgba(255,255,255,.26); /* 玻璃体下缘,薄一点让背景透出来 */ --glass-edge: rgba(255,255,255,.78);/* 边缘高光:玻璃的"厚度" */ --glass-hair: rgba(116,126,142,.20);/* 外圈发丝线,浅底上把形状勾出来 */ --glass-sheen: rgba(255,255,255,.58);/* 表面斜向反光 */ --glass-sh1: rgba(30,36,48,.085); --glass-sh2: rgba(30,36,48,.115); --glass-bloom: .72; /* 内部折射光斑的浓度 */ /* 9.7：状态药丸不再用 backdrop-filter（WebKit 不把它的取景矩形裁进 border-radius， 圆角外会探出一个方角 —— 她拍到了特写）。玻璃改成"真半透明底 + 一层淡纱"， 这一支就是补回 brightness(1.05)/saturate 那点亮度的纱。深浅各一支。 */ --glass-veil: rgba(255,255,255,.30); --think-flourish: rgba(74, 124, 155, 0.40); /* thinking 记号里那根金线。色源是走廊 pool 站的环境色(lightRGB 215,188,115), 不是新调的——记号和走廊说同一种金。蓝线直接用 --accent,膜用 --hairline。 */ --think-mark-gold: #d7bc73; --think-label: #7a756d; --think-body: #5a564f; --composer-bg: #e8e4df; --field-bg: #f2efeb; --field-bg-focus: #f7f5f2; --scroll-thumb: rgba(90,84,76,.3); --scroll-thumb-hover: rgba(90,84,76,.45); --send-idle-bg: #e2ddd6; --send-idle-fg: #aca69e; --chip-bg: rgba(255,255,255,.55); --chip-line: rgba(255,255,255,.75); --chip-shadow: rgba(60,50,40,.07); --field-line: #c4bfb8; --shadow: none; --soft-shadow: none; --scrim: none; --header-h: 56px; --side-pad: clamp(16px, 4vw, 40px); /* 气泡的左右内边距和附件图片的宽度必须一起看：附件气泡的上限就是 「图片 + 两份 padding」。以前这两条各写各的（图片 64vw / 气泡 61vw）， 64vw 恒大于 61vw − 26px，图片就从气泡右边冒出去（8.31）。 提成 token 之后，改 padding 或改图片宽度，另一头自己跟上。 */ --bubble-pad-x: clamp(13px, 1.65vw, 18px); --att-w: min(64vw, 260px); /* 图片 */ --att-file-w: 250px; /* 文件卡 */ --att-max: max(var(--att-w), var(--att-file-w)); /* 附件里最宽的那个 */ --bubble-radius: 0px; --composer-h: clamp(44px, 6vw, 72px); --motion-fast: 150ms; --motion-normal: 260ms; --ease-soft: cubic-bezier(0.25, 0, 0.1, 1); --composer-zone: calc(var(--composer-h) + 16px + env(safe-area-inset-bottom) + var(--keyboard-offset)); --scroll-gap: 34px; /* 消息区和输入框之间固定留出的距离 */ --scroll-bottom: calc(var(--composer-zone) + var(--scroll-gap)); --edge-fade-top: clamp(24px, 5vw, 52px); --edge-fade-tail: clamp(16px, 3vw, 30px); --panel-bg: #f2efeb; --card-bg: #f2efeb; --card-line: #c4bfb8; --card-shadow: none; --seg-track: #d4d0ca; --seg-thumb: #f2efeb; --seg-thumb-shadow: none; --seg-line: #c4bfb8; --row-press: rgba(196, 191, 184, .18); --slider-track: #c4bfb8; --slider-thumb: #4a7c9b; --info-ring: #c4bfb8; --status-dot: #5b7a6a; /* voice call */ --call-glass-top: rgba(242, 239, 235, .72); --call-glass-bot: rgba(232, 228, 223, .50); --call-glass-edge: #c4bfb8; --call-glass-hi: rgba(242, 239, 235, .60); --call-glass-glow: rgba(74, 124, 155, .12); --call-glass-shadow: none; --call-scrim: rgba(44, 42, 38, .04); --call-hangup-bg: #a85d3a; --call-hangup-shadow: rgba(168, 93, 58, .30); } /* ── CONCRETE AT NIGHT · 夜间混凝土 ── */ :root[data-theme="dark"]{ --bg: #1a1917; --header-bg: #1a1917; --hairline: #3a3733; --text: #d4d0ca; --text-soft: #8a847c; --text-faint: #4a4640; --bubble-ai-bg: #242220; --bubble-ai-fg: #d4d0ca; --bubble-human-bg: #2e2b28; --bubble-human-fg: #d4d0ca; --accent: #6a9cbb; --send-bg: #6a9cbb; --tick: #4a4640; --accent-fg: #0a0908; --glass-a: rgba(62,59,55,.40); --glass-b: rgba(40,38,35,.22); --glass-edge: rgba(255,255,255,.17); --glass-hair: rgba(0,0,0,.38); --glass-sheen: rgba(255,255,255,.13); --glass-sh1: rgba(0,0,0,.38); --glass-sh2: rgba(0,0,0,.46); --glass-bloom: .52; --glass-veil: rgba(255,255,255,.055); --room-rgb: 100,158,210; --think-flourish: rgba(106, 156, 187, 0.36); --think-mark-gold: #eed28c; /* pool 站的 darkRGB 238,210,140 */ --think-label: #8a847c; --think-body: #a8a29a; --composer-bg: #1a1917; --field-bg: #242220; --field-bg-focus: #2b2825; --scroll-thumb: rgba(220,214,206,.26); --scroll-thumb-hover: rgba(220,214,206,.4); --send-idle-bg: #34312d; --send-idle-fg: #6d6862; --chip-bg: rgba(255,255,255,.07); --chip-line: rgba(255,255,255,.12); --chip-shadow: rgba(0,0,0,.28); --field-line: #3a3733; --panel-bg: #242220; --card-bg: #242220; --card-line: #3a3733; --seg-track: #2e2b28; --seg-thumb: #3a3733; --seg-line: #3a3733; --slider-track: #3a3733; --slider-thumb: #6a9cbb; --info-ring: #3a3733; --status-dot: #7a9a8a; --call-glass-top: rgba(36, 34, 32, .72); --call-glass-bot: rgba(26, 25, 23, .50); --call-glass-edge: #3a3733; --call-glass-hi: rgba(36, 34, 32, .60); --call-hangup-bg: #c87d5a; --call-hangup-shadow: rgba(200, 125, 90, .30); --row-press: rgba(58, 55, 51, .30); } *{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body{ margin:0; padding:0; height:100%; overflow:hidden; overscroll-behavior:none; } body{ position: fixed; inset: 0; width: 100%; background: var(--bg); color: var(--text); font-family: var(--font-en), var(--font-cn); font-size: clamp(14px, 1.45vw, 16px); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior: none; } .app{ display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; width: min(100vw, var(--ref-width)); margin: 0 auto; overflow: hidden; } .wall{ position:fixed; inset:0; width:100vw; height:var(--screen-height); z-index:0; background-color: var(--bg); background-image: var(--wall-default); background-size: cover; background-position: center; transform: translateZ(0); -webkit-transform: translateZ(0); } .wall::after{ content:""; position:absolute; inset:0; background: var(--scrim); pointer-events:none; } .topbar, .scroll, .composer{ position: relative; z-index: 1; } /* ── Header (floating frosted pill) ── */ .topbar{ position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: flex-start; gap: 8px; height: calc(var(--header-h) + env(safe-area-inset-top)); padding: calc(env(safe-area-inset-top) + 8px) var(--side-pad) 10px; border-bottom: 1px solid var(--hairline); pointer-events: none; } .topbar > *{ pointer-events: auto; } .peerpill{ display:flex; flex-direction:row; align-items:baseline; gap: 6px; line-height:1.15; background: transparent; border: none; border-radius: 0; padding: 0; margin-left: 48px; /* 能被挤扁。以前 .header-actions 是 position:absolute、不占位,peerpill 想多宽就多宽,状态文字一变长("///typing"+三个点)就直接钻到搜索图标底下 重叠(逾水 8.28 截图)。现在图标组回到文档流里(margin-left:auto 顶右边), 这里加 min-width:0 + overflow,挤不下就让状态文字打省略号,不许压上去。 */ min-width: 0; flex: 0 1 auto; overflow: hidden; } .peerpill .name{ /* 挤不下的时候截名字,不截状态——名字是常驻的、看一眼就知道， 状态("///typing"+三个点)是瞬时信息,截掉就白显示了。 以前是反过来的,导致 typing 的三个点被 overflow 剪没。 */ flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-en); font-size: clamp(14px, 2vw, 17px); font-weight: 400; color: var(--text); letter-spacing: 0.5px; } .peerpill .status{ font-family: var(--font-en), var(--font-cn); font-size: clamp(11px, 1.4vw, 13px); color: var(--text-faint); letter-spacing: 0; flex: none; white-space: nowrap; } .ai-dot{ display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--status-dot); opacity: 0; /* 不要再单独留 margin——.peerpill 是 flex,gap 已经管了间距, 这个 margin 是纯多出来的 5px,正是它把名字挤到打省略号。 */ vertical-align: middle; transition: opacity .6s ease; } .ai-dot.on{ opacity: 1; } .app[data-conn="reconnecting"] .peerpill .status{ color:#9a8061; } .peerpill .status.typing{ color: var(--accent); font-weight: 400; display: inline-flex; align-items: center; } .typing-dots{ display:inline-flex; align-items:center; gap:3px; margin-left:6px; } .typing-dots i{ width:4px; height:4px; border-radius:50%; background:currentColor; animation: typingDot 1.25s ease-in-out infinite; } .typing-dots i:nth-child(2){ animation-delay:.16s; } .typing-dots i:nth-child(3){ animation-delay:.32s; } @keyframes typingDot{ 0%,70%,100%{ transform:translateY(0); opacity:.4; } 35%{ transform:translateY(-3px); opacity:1; } } .backbtn{ position:absolute; left: calc(var(--side-pad) + 4px); top: 50%; transform: translateY(-50%); width:36px; height:36px; border-radius:50%; padding:0; flex:none; cursor:pointer; border: none; background: transparent; color: var(--accent); display:grid; place-items:center; } .backbtn:active{ transform: translateY(-50%) scale(.9); } .backbtn svg{ width:20px; height:20px; display:block; margin-left:-2px; } .header-actions{ /* 从 position:absolute 改回文档流 + margin-left:auto 顶到右边。 绝对定位时它不占位,标题栏不知道右边被占了多少,才会重叠。 */ margin-left: auto; margin-right: -2px; flex: none; display:flex; align-items:center; justify-content:flex-end; gap: clamp(10px, 2.4vw, 26px); height:36px; } .topbtn{ /* 图标用主题蓝,不用正文墨色——顶栏是配件,不该跟正文一样重。8.27 .active 的蓝没有跟它冲突:终端面板是 inset:0 的全屏覆盖,开着的时候顶栏根本看不见; callBtn 默认带 hidden。两个选中态在实际使用里都不出现。 */ width:32px; height:32px; border:0; border-radius:50%; padding:0; background:transparent; color: var(--accent); display:grid; place-items:center; cursor:pointer; transition: transform .15s ease; } .topbtn:active{ transform: scale(.9); } .topbtn svg{ width:20px; height:20px; display:block; } .topbtn.more svg{ width:18px; height:18px; } .topbtn.terminal.active{ color:var(--accent); } /* ── Corridor Axis (Layer 2) ── */ .corridor-axis{ position:relative; width:100%; flex-shrink:0; z-index:5; padding: 0 var(--side-pad); pointer-events: auto; touch-action: none; } .corridor-track{ position:relative; display:flex; justify-content:space-between; align-items:flex-end; width:100%; padding-bottom: 5px; } .corridor-stream{ position:absolute; bottom:0; left:0; height:2px; width:0%; background: linear-gradient(to right, var(--accent), color-mix(in srgb, var(--accent) 20%, transparent)); transition: width 1.2s cubic-bezier(0.25, 0, 0.1, 1); pointer-events:none; } .corridor-node{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color: var(--text-faint); padding: 4px 0 0; white-space:nowrap; cursor:pointer; transition: color .4s cubic-bezier(0.25, 0, 0.1, 1); user-select:none; } .corridor-node:hover{ color: var(--text-soft); } .corridor-node.active{ color: var(--accent); } /* ── Corridor Light Patch (Layer 1) ── */ .corridor-light{ position:fixed; z-index:0; pointer-events:none; top:0; left:0; width:100vw; height:100vh; filter: blur(30px); opacity:0; /* 9.4 省电，她定 C：**动画整个撤掉**，只留换房间时的渐变。 原来是 `lightSway 6s infinite` 在两层 100vw×100vh + blur(30px) 上做 平移＋缩放 —— 缩放会让 WebKit 每帧把那张全屏模糊重做一遍，是"屏幕活跃" 里最贵的一类。撤的理由不是省电压过观感，是**观众为零**： 她被点名去找都没找到（原话「原来有这个？我从来没发现过！」）。 @keyframes lightSway 一并删了，不留死代码。 */ transition: background 2s cubic-bezier(0.25, 0, 0.1, 1), opacity 1.6s cubic-bezier(0.25, 0, 0.1, 1); } @media(max-width:520px){ .corridor-node{ font-size:8px; padding:5px 0; } } /* ── Atrium layer (chat home state) ── */ .atrium-layer{ position:relative; z-index:2; flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; padding: 40px var(--side-pad) calc(var(--composer-zone) + 20px); opacity:1; transition: opacity 0.4s ease; pointer-events:auto; } .atrium-layer::-webkit-scrollbar{ display:none; } .atrium-layer{ -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--composer-zone) - 30px), transparent calc(100% - var(--composer-zone))); mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--composer-zone) - 30px), transparent calc(100% - var(--composer-zone))); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .atrium-layer.hidden{ opacity:0; pointer-events:none; display:none; } /* 下拉刷新。指示点绝对定位在内容上方 —— 只有 scrollTop 为 0 时才拉得动， 所以它跟着内容一起被推下来的那一段里，页面本身没有在滚。 */ .atrium-ptr{ position:absolute; left:0; right:0; top:0; display:flex; align-items:center; justify-content:center; height:34px; margin-top:-34px; opacity:0; pointer-events:none; } .atrium-ptr-dot{ width:7px; height:7px; border-radius:50%; background:var(--text-faint); transition:transform .2s ease, background .2s ease; } .atrium-ptr.ready .atrium-ptr-dot{ transform:scale(1.7); background:var(--accent); } .atrium-ptr.busy .atrium-ptr-dot{ animation:atriumPtrPulse .9s ease-in-out infinite; background:var(--accent); } @keyframes atriumPtrPulse{ 0%,100%{ transform:scale(1); opacity:.45 } 50%{ transform:scale(1.7); opacity:1 } } .atrium-inner.snapback, .atrium-ptr.snapback{ transition:transform .26s cubic-bezier(.2,.8,.3,1), opacity .26s ease; } @media (prefers-reduced-motion: reduce){ .atrium-ptr-dot{ transition:none } .atrium-ptr.busy .atrium-ptr-dot{ animation:none; opacity:1 } } .atrium-inner{ max-width:640px; margin:0 auto; overflow:hidden; padding-bottom:calc(var(--composer-zone) + 40px); } /* notes — written on the board */ .atrium-note{ padding:10px 0; font-size:14px; color:var(--text); line-height:1.9; padding-left:2px; font-family: var(--font-cn), var(--font-en); letter-spacing:0.02em; } .atrium-note + .atrium-note{ border-top:1px solid rgba(196,191,184,0.4); } .atrium-note-pin{ display:inline-block; width:4px; height:4px; background:var(--accent); margin-right:6px; vertical-align:middle; position:relative; top:-1px; } .atrium-note-ts{ font-family:var(--font-en); font-size:10px; color:var(--text-faint); margin-top:4px; letter-spacing:0.03em; } .atrium-notes{ margin-bottom:24px; } /* 9.2 全貌板入口。长相照 .atrium-note 那套（同字号、同行高、同时间戳小字）， 只是右边多一个箭头。**单独一个块**，上下都是 margin，不动 atrium 其他东西的顺序。 */ /* 9.2：入口行撤掉，换成把全貌直接嵌进来。 「等你」段沿用整页那边的通栏卡（有等待才出现）， 「最近动过」压成一行一房间的紧凑行 —— 门厅要的是一眼扫过，不是六张卡占三屏。 取数跟 /chat/atlas.html 共用 atlas-data.js，判据只有一份。 */ .atrium-atlas{ margin-bottom:24px; } .atrium-atlas-sec{ font-family:var(--font-en); font-size:10px; letter-spacing:0.08em; color:var(--text-faint); text-transform:uppercase; margin-bottom:8px; } .atrium-atlas-sec.later{ margin-top:14px; } .atrium-atlas-card{ display:block; text-decoration:none; color:var(--text); background:var(--card-bg); border:1px solid var(--card-line); border-left:3px solid var(--accent); padding:10px 11px; margin-bottom:8px; } .atrium-atlas-card:active{ opacity:0.6; } .atrium-atlas-room{ font-family:var(--font-en); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; } .atrium-atlas-say{ font-size:12px; line-height:1.7; color:var(--text-soft); margin-top:3px; } .atrium-atlas-foot{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:5px; } .atrium-atlas-when{ font-family:var(--font-en); font-size:10px; color:var(--text-faint); white-space:nowrap; } .atrium-atlas-badge{ font-size:9px; letter-spacing:0.12em; color:var(--accent); border:1px solid var(--accent); padding:1px 5px; white-space:nowrap; } /* 紧凑行：房间名 / 一句话 / 相对时间，一行一个 */ .atrium-atlas-row{ display:flex; align-items:baseline; gap:9px; text-decoration:none; color:var(--text); padding:7px 0 7px 2px; } .atrium-atlas-row + .atrium-atlas-row{ border-top:1px solid rgba(196,191,184,0.4); } .atrium-atlas-row:active{ opacity:0.6; } .atrium-atlas-row .atrium-atlas-room{ flex:0 0 58px; } /* 9.28：原来单行省略号，LIBRARY 那行「N 条批注 · 最近在《书名》」一长，最先被吃掉的就是书名。 改成最多两行、第二行末尾才省略 —— 关键词在前一行半里就露出来了。 */ .atrium-atlas-row .r-say{ flex:1; min-width:0; font-size:12px; color:var(--text-soft); line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .atrium-atlas-more{ display:block; text-decoration:none; margin-top:12px; padding-left:2px; font-family:var(--font-en); font-size:11px; letter-spacing:0.08em; color:var(--text-faint); } .atrium-atlas-more:active{ color:var(--text); } /* tasks 折叠：未完成的（active/submitted）全部常驻，闭环的进「历史 N 条」 */ .atrium-tasks-more{ font-family:var(--font-en); font-size:10px; letter-spacing:0.08em; color:var(--text-faint); padding:10px 0 2px 2px; cursor:pointer; } .atrium-tasks-more:active{ color:var(--text); } .atrium-tasks-history{ display:none; } .atrium-tasks-history.open{ display:block; } .atrium-note.seen-flash{ animation: noteSeen 1.2s ease; } @keyframes noteSeen{ 0%{ background:transparent; } 20%{ background:rgba(196,191,184,0.25); } 60%{ background:rgba(196,191,184,0.25); } 100%{ background:transparent; } } /* reminders — with checkbox */ .atrium-reminder{ padding:8px 0; font-size:13px; color:var(--text); line-height:1.8; display:flex; align-items:flex-start; gap:8px; cursor:pointer; } .atrium-reminder + .atrium-reminder{ border-top:1px solid rgba(196,191,184,0.2); } .atrium-reminder.done .atrium-reminder-text{ text-decoration:line-through; opacity:0.45; } .atrium-reminder-check{ width:14px; height:14px; flex-shrink:0; border:1.5px solid var(--text-soft); border-radius:2px; margin-top:4px; position:relative; transition: border-color 0.2s; } .atrium-reminder.done .atrium-reminder-check{ border-color:var(--accent); background:var(--accent); } .atrium-reminder.done .atrium-reminder-check::after{ content:''; position:absolute; left:3px; top:0px; width:5px; height:9px; border:solid #fff; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); } .atrium-reminder-text{ flex:1; } .atrium-reminders{ margin-bottom:24px; } .atrium-rem-n{ font-family:var(--font-en); font-size:10px; color:var(--text-faint); } /* ②B chips：骨架照 .atrium-atlas-badge 的细边框；选中那枚填底 */ .atrium-rem-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 8px; } .atrium-rem-chip{ font-size:12px; color:var(--text-soft); background:transparent; border:1px solid var(--card-line); padding:3px 9px; cursor:pointer; font-family:inherit; } .atrium-rem-chip.on{ color:var(--text); border-color:var(--accent); background:var(--card-bg); } .atrium-rem-chip:active{ opacity:0.6; } .atrium-rem-tag{ font-size:11px; color:var(--text-faint); margin-right:6px; } /* topic cards — items on the whiteboard */ .atrium-diary-toggle{ font-family:var(--font-en); font-size:10px; letter-spacing:0.08em; color:var(--text-faint); background:none; border:none; cursor:pointer; padding:0; margin-top:4px; } .atrium-diary-toggle:active{ color:var(--accent); } .atrium-diary-entries{ margin-top:16px; display:none; } .atrium-diary-entries.open{ display:block; } .atrium-diary-day{ margin-bottom:16px; } .atrium-diary-day-label{ font-family:var(--font-en); font-size:10px; letter-spacing:0.08em; color:var(--text-faint); margin-bottom:6px; border-bottom:1px solid rgba(196,191,184,0.3); padding-bottom:4px; } .atrium-diary-entry{ padding:6px 0; } .atrium-diary-entry-text{ font-size:12px; color:var(--text-soft); line-height:1.7; font-family: var(--font-cn), var(--font-en); } .atrium-diary-entry-time{ font-family:var(--font-en); font-size:10px; color:var(--text-faint); margin-top:2px; } .atrium-tasks{ margin-bottom:24px; } .atrium-tasks-label{ font-family:var(--font-en); font-size:10px; letter-spacing:0.08em; color:var(--text-faint); text-transform:uppercase; margin-bottom:8px; } .atrium-task{ padding:12px 0; position:relative; } .atrium-task + .atrium-task{ border-top:1px solid rgba(196,191,184,0.4); } .atrium-task-title{ font-size:13px; color:var(--text); line-height:1.5; font-weight:500; } .atrium-task-desc{ font-size:12px; color:var(--text-soft); line-height:1.5; margin-top:4px; } .atrium-task-due{ font-family:var(--font-en); font-size:10px; color:var(--text-faint); margin-top:4px; } .atrium-task-status{ font-family:var(--font-en); font-size:10px; color:var(--accent); margin-top:4px; letter-spacing:0.04em; } .atrium-task-submit{ display:inline-block; margin-top:8px; padding:6px 16px; font-family:var(--font-en); font-size:11px; color:var(--accent); background:transparent; border:1px solid var(--accent); cursor:pointer; letter-spacing:0.04em; transition:opacity 0.15s; } .atrium-task-submit:active{ opacity:0.5; } .atrium-task-submit:disabled{ opacity:0.3; cursor:default; } .atrium-task-outcome{ font-size:12px; margin-top:6px; padding:8px 0; color:var(--text-soft); line-height:1.5; } .atrium-task-outcome b{ color:var(--text); font-weight:500; } .atrium-task.reviewed .atrium-task-title{ color:var(--text-soft); } /* ③ 收起态：标题＋一行摘要，右侧一枚会转的 › */ .atrium-task.collapsible .atrium-task-head{ cursor:pointer; position:relative; padding-right:18px; } .atrium-task.collapsible .atrium-task-head::after{ content:"›"; position:absolute; right:2px; top:0; font-size:16px; line-height:1.2; color:var(--text-faint); transition:transform .15s; } .atrium-task.collapsible.open .atrium-task-head::after{ transform:rotate(90deg); } .atrium-task-sum{ font-size:12px; color:var(--text-soft); line-height:1.5; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .atrium-task.collapsible .atrium-task-body{ display:none; } .atrium-task.collapsible.open .atrium-task-body{ display:block; } .atrium-task.collapsible.open .atrium-task-sum{ display:none; } .atrium-task-input{ width:100%; margin-top:8px; padding:8px; font-size:12px; font-family:var(--font-en), var(--font-cn); color:var(--text); background:var(--field-bg); border:1px solid var(--field-line); resize:vertical; min-height:36px; max-height:120px; } .atrium-cards{ margin-bottom:24px; overflow:hidden; } .atrium-cards-grid{ overflow:hidden; } .atrium-card{ padding:12px 2px; margin-bottom:0; cursor:pointer; transition:opacity 0.15s ease; overflow:hidden; min-width:0; } .atrium-card + .atrium-card{ border-top:1px solid rgba(196,191,184,0.4); } .atrium-card:active{ opacity:0.6; } .atrium-card-hook{ font-size:13px; color:var(--text); line-height:1.7; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; } .atrium-card-source{ font-family:var(--font-en); font-size:10px; color:var(--text-faint); line-height:1.5; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; } /* detail modal */ .atrium-modal-overlay{ position:fixed; inset:0; z-index:200; background:rgba(44,42,38,0.25); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; visibility:hidden; /* 10.24 同上：透明的整屏遮罩也别留在顶端当取色对象 */ transition:opacity 0.2s ease, visibility 0s linear .2s; } .atrium-modal-overlay.open{ opacity:1; pointer-events:auto; visibility:visible; transition:opacity 0.2s ease, visibility 0s; } .atrium-modal{ background:var(--bg); border:1px solid var(--hairline); max-width:480px; width:100%; max-height:70vh; overflow-y:auto; padding:28px 24px 20px; position:relative; } .atrium-modal-hook{ font-size:14px; color:var(--text); line-height:1.8; margin-bottom:14px; word-break:break-word; } .atrium-modal-title{ font-family:var(--font-en), var(--font-cn); font-size:11px; color:var(--text-soft); line-height:1.6; margin-bottom:4px; } .atrium-modal-domain{ font-family:var(--font-en); font-size:10px; color:var(--text-faint); letter-spacing:0.03em; margin-bottom:16px; } .atrium-modal-domain a{ color:var(--text-faint); text-decoration:none; } .atrium-modal-actions{ display:flex; gap:10px; padding-top:14px; border-top:1px solid rgba(196,191,184,0.4); } .atrium-modal-btn{ font-family:var(--font-en); font-size:11px; letter-spacing:0.04em; padding:7px 16px; border:1px solid var(--hairline); background:none; color:var(--text-soft); cursor:pointer; } .atrium-modal-btn:active{ background:rgba(128,128,128,0.1); } .atrium-modal-btn-primary{ border-color:var(--accent); color:var(--accent); } .atrium-modal-close{ position:absolute; top:12px; right:14px; background:none; border:none; cursor:pointer; font-family:var(--font-en); font-size:16px; color:var(--text-faint); line-height:1; padding:4px; } @media(min-width:768px){ .atrium-inner{ max-width:720px; } .atrium-cards-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; } } .ctx-bar{ position:relative; width:100%; height:12px; background:var(--hairline); overflow:hidden; display:flex; align-items:center; flex-shrink:0; transition: opacity var(--motion-normal) var(--ease-soft); } .ctx-bar.hidden{ display:none; } .ctx-fill{ position:absolute; left:0; top:0; bottom:0; background:var(--accent); opacity:.35; transition: width .6s var(--ease-soft), background .4s; } .ctx-bar.warn .ctx-fill{ background:#b08030; opacity:.5; } .ctx-bar.crit .ctx-fill{ background:#a04040; opacity:.55; } .ctx-label{ position:relative; z-index:1; width:100%; text-align:center; font-family:var(--font-en); font-size:9px; letter-spacing:.5px; color:var(--text-soft); pointer-events:none; user-select:none; } .ctx-bar.crit .ctx-label{ color:var(--text); font-weight:500; } .ctx-float{ position:fixed; top: calc(env(safe-area-inset-top) + 8px); left:50%; transform: translate(-50%, -60px); z-index:400; font-family:var(--font-en); font-size:13px; letter-spacing:.3px; padding:8px 20px; border:1px solid var(--hairline); background:var(--bg); color:var(--text); opacity:0; pointer-events:none; transition: opacity .3s ease, transform .3s ease; } .ctx-float.show{ opacity:1; transform: translate(-50%, 0); pointer-events:auto; } .ctx-float.warn{ border-color:#b08030; color:#b08030; } .ctx-float.crit{ border-color:#a04040; color:#a04040; font-weight:500; } .session-pop{ position:absolute; right: calc(var(--side-pad) + 34px); top: calc(env(safe-area-inset-top) + clamp(58px, 8vw, 82px)); z-index:30; width:min(82vw, 320px); max-height:min(58vh, 480px); overflow:auto; padding:10px; border-radius:0; background:var(--panel-bg); border:1px solid var(--card-line); } .session-pop[hidden]{ display:none !important; } .session-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 2px 8px; } .session-title{ font-size:12px; color:var(--text-faint); font-family:var(--font-en), var(--font-cn); } .session-new{ border:1px solid var(--seg-line); border-radius:999px; padding:5px 9px; background:var(--seg-track); color:var(--text-soft); font:inherit; font-size:11.5px; cursor:pointer; } .session-list{ display:flex; flex-direction:column; gap:2px; } .session-item{ border:0; width:100%; background:transparent; color:var(--text); display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; padding:10px 9px; border-radius:0; text-align:left; cursor:pointer; font:inherit; } .session-item.active{ background:var(--seg-track); } .session-item:active{ transform:scale(.992); } .session-main{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px; } .session-name{ font-size:14px; line-height:1.25; } .session-meta{ font-size:11px; color:var(--text-faint); font-family:var(--font-en), var(--font-cn); } .session-rename{ border:0; background:transparent; color:var(--text-faint); width:28px; height:28px; border-radius:50%; display:grid; place-items:center; cursor:pointer; padding:0; } .session-rename:hover{ color:var(--accent); background:var(--seg-track); } .session-rename svg{ width:15px; height:15px; display:block; } .terminal-panel{ position:fixed; inset:0; z-index:260; display:flex; flex-direction:column; background:#050607; color:#d7f7df; font-family:"SFMono-Regular", Consolas, "Cascadia Mono", monospace; transform:translateX(100%); /* 10.24 她报顶上状态栏亮色下发黑：iOS 26 的独立网页按页面顶端「最上层的固定元素」取色，这块近黑的整屏面板只是挪出屏外、并没藏， 可能被当成顶栏底色。收起后 visibility:hidden（滑出动画放完再藏），打开时立刻可见。同 NOTES §61「光靠位移不够」 */ visibility:hidden; transition:transform .24s cubic-bezier(.2,.8,.2,1), visibility 0s linear .24s; } .terminal-panel.open{ transform:translateX(0); visibility:visible; transition:transform .24s cubic-bezier(.2,.8,.2,1), visibility 0s; } .terminal-top{ flex:none; min-height:calc(52px + env(safe-area-inset-top)); display:flex; align-items:center; gap:10px; padding:calc(env(safe-area-inset-top) + 8px) 12px 8px; border-bottom:1px solid rgba(157,255,188,.18); background:#080a0b; } .terminal-back{ flex:none; width:34px; height:34px; border:0; border-radius:50%; background:transparent; color:#d7f7df; display:grid; place-items:center; padding:0; cursor:pointer; } .terminal-back:active{ transform:scale(.9); } .terminal-back svg{ width:21px; height:21px; display:block; } .terminal-title{ min-width:0; display:flex; flex-direction:column; gap:2px; line-height:1.15; } .terminal-title strong{ font-size:14px; font-weight:600; color:#effff4; } .terminal-title span{ font-size:11px; color:rgba(215,247,223,.62); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .terminal-log{ flex:1 1 auto; overflow:auto; padding:14px 14px 18px; font-size:13px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; } .term-entry{ margin:0 0 13px; } .term-user{ color:#9dffbc; } .term-assistant{ color:#d7f7df; } .term-tool{ color:#b6d6ff; border-left:2px solid rgba(126,174,255,.45); padding-left:10px; } .term-muted{ color:rgba(215,247,223,.48); } .term-cmd{ color:#9dffbc; } .term-err{ color:#ffb0a3; } .terminal-form{ flex:none; display:flex; align-items:flex-end; gap:9px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid rgba(157,255,188,.18); background:#080a0b; } .terminal-prompt{ flex:none; color:#9dffbc; font-size:15px; line-height:34px; } .terminal-input{ flex:1 1 auto; min-width:0; max-height:120px; border:0; outline:0; resize:none; background:transparent; color:#effff4; font:inherit; font-size:15px; line-height:1.45; padding:6px 0; } .terminal-input::placeholder{ color:rgba(215,247,223,.34); } .terminal-send{ flex:none; width:34px; height:34px; border:1px solid rgba(157,255,188,.34); border-radius:50%; background:rgba(157,255,188,.1); color:#d7f7df; display:grid; place-items:center; padding:0; cursor:pointer; } .terminal-send:active{ transform:scale(.92); } .terminal-send svg{ width:18px; height:18px; display:block; } .backbtn:focus-visible, button:focus-visible, textarea:focus-visible, input:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; } /* ── Messages ── */ .scroll{ flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; overflow-anchor: none; padding: clamp(14px, 2.4vw, 28px) var(--side-pad) var(--scroll-bottom); display: flex; flex-direction: column; /* 边缘渐隐:顶部一段、底部对齐 composer 上沿一段,消息滚到边缘自然淡出 */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--edge-fade-top), #000 calc(100% - var(--scroll-bottom)), transparent calc(100% - var(--scroll-bottom) + var(--edge-fade-tail))); mask-image: linear-gradient(to bottom, transparent 0, #000 var(--edge-fade-top), #000 calc(100% - var(--scroll-bottom)), transparent calc(100% - var(--scroll-bottom) + var(--edge-fade-tail))); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .scroll::-webkit-scrollbar{ width:0; height:0; } .v-spacer{ flex: 0 0 auto; width: 100%; min-height: 0; pointer-events: none; } .day{ align-self: center; margin: 0; font-family: var(--font-en), var(--font-cn); font-size: clamp(12px, 1.6vw, 16px); color: var(--text-faint); padding: 0; border-radius: 0; background: transparent; border: none; } .row{ display:flex; position:relative; margin-top: clamp(14px, 2.2vw, 28px); } .day + .row{ margin-top: clamp(12px, 1.8vw, 20px); } .new-divider{ display:flex; align-items:center; justify-content:center; gap: clamp(16px, 2.4vw, 24px); margin: clamp(16px, 2.4vw, 28px) 0 clamp(12px, 1.8vw, 20px); color: var(--text-faint); font-family: var(--font-en), var(--font-cn); font-size: clamp(12px, 1.6vw, 16px); line-height:1; letter-spacing:0; } .new-divider::before, .new-divider::after{ content:""; width: clamp(94px, 24vw, 226px); height:1px; background: var(--hairline); } /* 路由警报:serving model 换人了。不是消息,是一条状态告示—— 所以不做成气泡的样子,免得看着像谁说的话。 */ .route-alert{ display:flex; justify-content:center; margin: clamp(12px, 1.8vw, 20px) 0 clamp(10px, 1.4vw, 16px); } .route-alert span{ max-width: min(78vw, 560px); padding: clamp(6px, 0.9vw, 9px) clamp(11px, 1.5vw, 15px); border-radius: 999px; border: 1px solid var(--hairline); background: transparent; color: var(--text-faint); font-family: var(--font-en), var(--font-cn); font-size: clamp(12px, 1.5vw, 14px); line-height: 1.5; text-align:center; word-break: break-word; } .route-alert.warn span{ color:#b08030; border-color:#b08030; } /* 告示行的三角叹号（9.10）。跟着这行的字号和颜色走，别自己发明尺寸。 */ .route-alert .alert-mark{ vertical-align:-0.13em; margin-right:.42em; } .route-alert.ok span{ color:#5c8a63; border-color:#5c8a63; } /* 10.20 记忆卡告示：不要药丸边，就是居中一行灰色小字；点得动 */ .route-alert.memcard span{ border-color:transparent; padding:2px 8px; font-size:12px; cursor:pointer; } .row.grouped{ margin-top: clamp(4px, 0.8vw, 8px); } .row.human{ justify-content: flex-end; } .row.ai{ justify-content: flex-start; } .bubble{ max-width: min(61vw, 506px); padding: clamp(8px, 1.05vw, 12px) var(--bubble-pad-x) clamp(8px, 1.1vw, 13px); border-radius: var(--bubble-radius); position: relative; font-family: var(--font-en), var(--font-cn); font-size: clamp(14px, 1.55vw, 16px); /* 9.4 削头案：行高原来是 1.58 的**小数倍**（她那台上算出来 21.06px）， 于是每一行的顶都落在半个像素上、还一路往下漂。某些位置上那半像素被舍进 上一行，那一行的字顶就被削掉约 1 个 CSS 像素 —— 她看到的「话」变「诂」、 「「」变「|」就是这么来的（都是顶上少一点点的字）。 `round(…, 1px)` 把每一行钉在整像素上；不支持 round() 的浏览器落回上一行的 1.58，行为跟以前一样。视觉差 ≤0.06px/行，看不出来。 */ line-height: 1.58; line-height: round(1.58em, 1px); word-wrap: break-word; overflow-wrap: anywhere; /* 长路径/长 URL 要折行:.scroll 是 overflow-x:hidden,撑出去就被裁掉看不见了 */ animation: pop .24s cubic-bezier(.2,.8,.2,1) both; } .row[data-vkey] .bubble, .row[data-vkey] .think-block{ animation: none; } @keyframes pop{ from{ transform: translateY(5px) scale(.99);} to{ transform:none;} } .row[data-vkey].enter-human .bubble{ transform-origin: bottom right; animation: enterHuman .44s cubic-bezier(.34,1.46,.5,1) both; } .row[data-vkey].enter-ai .bubble{ transform-origin: bottom left; animation: enterAi .44s cubic-bezier(.34,1.46,.5,1) both; } @keyframes enterHuman{ from{ transform: translate(6px, 9px) scale(.95); opacity:0; } 55%{ opacity:1; } to{ transform:none; opacity:1; } } @keyframes enterAi{ from{ transform: translate(-6px, 9px) scale(.95); opacity:0; } 55%{ opacity:1; } to{ transform:none; opacity:1; } } .row.ai .bubble{ max-width: min(82vw, 680px); background: var(--bubble-ai-bg); color: var(--bubble-ai-fg); border: 0; transition: background 2s ease; } .row.human .bubble{ background: var(--bubble-human-bg); color: var(--bubble-human-fg); border: 0; transition: background 2s ease; } /* ── 横屏（宽而矮） ──────────────────────────────────────────────── 这一页所有"按屏幕大小缩放"的量都是拿 vw 写的。竖屏时 vw 就是短边， 代表"屏幕有多大"，没问题；**横屏时 vw 变成长边**，于是气泡宽度、 左右边距、输入区全都按大屏的尺寸放大，可视高度却只剩三成 —— 844×390 上实测：AI 气泡 680px（占屏宽 81%，一行 47 个字）， 左右边距各 33.8px，能看见的消息区只有 311px。她说的"气泡变得很大"就是这个。 修法不是把 vw 换成 vmin（字号那条 clamp 的上限靠的就是 vw， 换成 vmin 会把桌面字号从 16px 打回 14px）。只在"宽而矮"这一档里， 把跟屏幕大小挂钩的几个量按短边重新给一遍。 竖屏 / iPad 横屏 / 桌面都不进这个媒体查询，一个像素都不变。 */ @media (orientation: landscape) and (max-height: 520px){ :root{ --side-pad: 16px; } /* 跟竖屏一致，不再按长边涨到 33.8px */ /* 用 em 封顶 = 直接封"一行多少个字"，不受字号变化影响 */ .bubble{ max-width: min(56vw, 30em); } .row.ai .bubble{ max-width: min(68vw, 34em); } } /* 每段最后一条:外下角收一个小尖 */ .row.ai.tail .bubble{ border-bottom-left-radius: 2px; } .row.human.tail .bubble{ border-bottom-right-radius: 2px; } .bubble .txt{ white-space: normal; } /* 附件气泡的上限 = 图片 + 两份 padding，直接用 token 算，不再手抄数字。 跟纯文字气泡共用 max-width:min(61vw,506px) 的话，内容盒只有 61vw - 2×padding， 一定比 --att-w 窄 —— 图片就从气泡右边冒出去，390 宽的屏上正好吃掉整条 --side-pad 顶到屏幕边（8.31 她截图报的就是这个）。 再用 100% 兜住行宽，保证不管怎样都不会越过左右的 --side-pad。 */ .bubble.has-att{ display:flex; flex-direction:column; gap:6px; max-width: min(calc(var(--att-max) + 2 * var(--bubble-pad-x)), 100%); } .bubble.att-only{ background:transparent !important; padding:0 !important; box-shadow:none !important; } .att-img-link{ display:block; line-height:0; border-radius:0; overflow:hidden; width:var(--att-w); max-width:100%; aspect-ratio:var(--att-ratio, 1.04); max-height:340px; background:rgba(125,128,135,.10); } .att-img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:0; } .att-file{ display:flex; align-items:center; gap:10px; padding:9px 11px; min-width:170px; max-width:min(var(--att-file-w),100%); text-decoration:none; color:inherit; background:rgba(125,128,135,.12); border-radius:0; } .att-file-ic{ flex:0 0 auto; width:36px; height:36px; display:grid; place-items:center; border-radius:9px; background:rgba(125,128,135,.20); } .att-file-ic svg{ width:20px; height:20px; opacity:.85; } .att-file-meta{ display:flex; flex-direction:column; min-width:0; } .att-file-name{ font-size:13px; font-weight:600; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .att-file-size{ font-size:11px; opacity:.6; margin-top:2px; } .att-uploading{ opacity:.62; } .att-img-dead img{ display:none; } .att-img-dead::after{ content:"⚠ 图片已失效"; display:inline-block; padding:16px 20px; font-size:12px; color:var(--text-faint); background:rgba(125,128,135,.14); border-radius:0; } .att-failed{ outline:1.5px solid #e3534d; outline-offset:1px; } .bubble .txt a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; } .bubble .txt code{ font-family: var(--font-en); font-size: .92em; background: rgba(120,100,80,0.12); padding: 1px 5px; border-radius: 0; } .bubble .txt strong{ font-weight: 700; } .meta{ display:inline; margin-left: clamp(10px, 1.4vw, 16px); white-space: nowrap; font-family: var(--font-en), var(--font-cn); font-size: clamp(11px, 1.3vw, 14px); color: var(--text-faint); user-select:none; vertical-align: baseline; } .meta .tick{ color: var(--tick); margin-left: 7px; letter-spacing:0; } .meta .state{ color: var(--accent); } .meta .fail{ color:#c0533f; cursor:pointer; } .row.human .meta, .row.ai .meta{ color: var(--text-faint); } .row.human .meta .tick, .row.ai .meta .tick{ color: var(--tick); } /* 发送中:小时钟,转完即送达 → 同位换成 ✓✓ */ .meta .tick.clock{ color: var(--tick); } .meta .tick.clock svg{ width: 1.05em; height: 1.05em; vertical-align: -0.18em; } /* ── thinking ── collapsed follows AI bubble; expanded becomes a quiet reading section ── */ .row.think{ justify-content: flex-start; padding-right: 0; margin-top: clamp(7px, 1.2vw, 12px); margin-bottom: clamp(10px, 1.8vw, 18px); } .row.think.think-open{ justify-content: center; padding-left: 0; padding-right: 0; margin-top: clamp(20px, 3.2vw, 34px); margin-bottom: clamp(18px, 2.8vw, 28px); } .think-block{ width: min(82vw, 680px); max-width: min(82vw, 680px); color: var(--think-body); text-align: left; animation: pop .24s cubic-bezier(.2,.8,.2,1) both; } .think-block.open{ width: 100%; max-width: min(100%, 760px); text-align: center; } .think-toggle{ appearance: none; -webkit-appearance: none; width: auto; max-width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; display: inline-flex; align-items: center; } .think-block.open .think-toggle{ width: 100%; display: flex; flex-direction: column; align-items: center; gap: clamp(9px, 1.8vw, 14px); } .think-toggle:hover .think-caption{ color: var(--accent); } .think-toggle:active{ transform: translateY(1px); } .think-rule{ display: none; position: relative; width: 100%; height: 1px; color: var(--think-flourish); } .think-block.open .think-rule{ display: block; } .think-rule::before{ content: ""; position: absolute; left: clamp(22px, 6vw, 64px); right: clamp(22px, 6vw, 64px); top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--think-flourish) 16%, var(--think-flourish) 84%, transparent); opacity: .46; } .think-caption{ display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; color: var(--think-label); font-family: var(--font-en), var(--font-cn); font-size: clamp(12px, 1.38vw, 14px); line-height: 1.1; letter-spacing: .08em; transition: color var(--motion-fast) var(--ease-soft); } .think-state{ display: inline-flex; align-items: center; line-height: 1; } /* auto = transcript 自动接出来的 summary,不朝着她说:比 ponder 更淡、更小、字距更松。 ponder 是我选择说给她听的,保持原来的分量,星号用 accent。 */ .think-block.think-auto .think-caption{ opacity: .72; font-size: clamp(11px, 1.2vw, 12.5px); letter-spacing: .14em; } /* ── thinking 记号（V3·膜模型微缩）── 一道竖虚线是膜；金线从左边来、蓝线从右边来，各自越膜一小段后上下并行，不相交。 三个颜色全接主题变量：金=--think-mark-gold（走廊 pool 站）、蓝=--accent、膜=--hairline。 ✦/✧ 那套“实心=展开、空心=收起”的语义在这一版退役：开合由那道横线和正文自己说， 记号身上“分开→并行”这根轴留给流式。一个记号不背两套语义。 */ .think-mark{ width: 30px; height: 14px; display: block; flex: none; overflow: hidden; /* 线退到各自那一侧时超出 viewBox 的一截，靠这里裁 */ } .think-mark line{ stroke-width: 1.4; } /* 膜要「在但安静」：比两条线弱、比没有强。hairline 那一档在 30x14 上只剩六个点， 暗色下基本读不出来 —— 深一档到 --text-faint，虚线密度不动。 */ .think-mark .tm-mem{ stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 2 2; } .think-mark .tm-gold line{ stroke: var(--think-mark-gold); } .think-mark .tm-blue line{ stroke: var(--accent); } /* 流式进行中：单向穿越。金线一路向右、蓝线一路向左，走到对面尽头出画， 再从各自来处重新进来，永远向前，不回退——回退会读成「还没碰到就缩手了」。 两端都停在完全出画的位置（金 -21 时占 [-20,0]、+29 时占 [30,50]，viewBox 是 0..30）， 所以那一下回卷落在画外，看不见接缝。越膜交错自然发生在中段： 50% 时两条都占 [5,25]，正好并行压在膜上。 计时函数用 linear：连续循环里任何缓动都会在回卷处鼓出一拍。 只动包在外面的 的 transform（SVG 子元素直接上 CSS transform 在 WebKit 上不牢靠）， 不碰 x1/x2，不惊动布局。 */ @keyframes thinkMarkGold{ from{ transform: translateX(-21px); } to { transform: translateX(29px); } } @keyframes thinkMarkBlue{ from{ transform: translateX(21px); } to { transform: translateX(-29px); } } .think-block.think-streaming .think-mark .tm-gold{ animation: thinkMarkGold 3.4s linear infinite; will-change: transform; } .think-block.think-streaming .think-mark .tm-blue{ animation: thinkMarkBlue 3.4s linear infinite; will-change: transform; } /* 只有这一档退静止终态；其余一律有动效，手机不降级。 */ @media (prefers-reduced-motion: reduce){ .think-block.think-streaming .think-mark .tm-gold, .think-block.think-streaming .think-mark .tm-blue{ animation: none; transform: none; } } .think-body[hidden]{ display: none !important; } .think-body{ margin-top: clamp(12px, 2.2vw, 20px); } .think-text{ width: min(82%, 520px); margin: 0 auto clamp(16px, 2.6vw, 24px); color: var(--think-body); /* 西文在前:thinking 正文里的英文归 Special Elite,汉字和中西共用的标点归苹方。 原来只写 --font-cn,所以英文一直是苹方的拉丁,换字换不到这里。 */ font-family: var(--font-en), var(--font-cn); font-size: clamp(12px, 1.25vw, 13.5px); line-height: 1.72; text-align: center; white-space: normal; overflow-wrap: break-word; } .think-starline{ position: relative; width: 100%; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--think-flourish); } .think-starline::before, .think-starline::after{ content: ""; position: absolute; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--think-flourish) 15%, var(--think-flourish) 85%, transparent); opacity: .5; } .think-starline::before{ left: 0; right: calc(50% + 34px); } .think-starline::after{ left: calc(50% + 34px); right: 0; } .think-star{ position: relative; z-index: 1; color: var(--think-flourish); display: grid; place-items: center; } .think-star svg{ width: 30px; height: 14px; display: block; } .think-copy{ min-width: 0; } .think-copy a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; } .think-copy code{ font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .9em; background: rgba(120,100,80,0.10); padding: 1px 5px; border-radius: 0; } /* ── act ── the AI's action chip: a quiet "what it just did", optionally expand to see raw tool calls ── 视觉与 thinking 同一族(--think-* 配色),但更小、更收,贴在头像缝隙里,不抢气泡 ── */ .row.act{ justify-content: flex-start; padding-right: clamp(12px, 4vw, 40px); margin-top: clamp(4px, 0.9vw, 9px); margin-bottom: clamp(4px, 0.9vw, 9px); } .act-block{ max-width: min(80vw, 470px); animation: pop .24s cubic-bezier(.2,.8,.2,1) both; } .act-toggle{ appearance: none; -webkit-appearance: none; margin: 0; padding: 2px 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; max-width: 100%; display: inline-flex; align-items: baseline; gap: 7px; } .act-toggle.bare{ cursor: default; } .act-toggle:focus-visible{ outline: none; } .act-glyph{ flex: none; color: var(--think-flourish); font-size: 1.04em; line-height: 1; transform: translateY(.06em); } .act-label{ color: var(--think-label); font-family: var(--font-cn); /* 统一宋体:--font-en 末尾的通用 serif 会先吃掉 CJK→iOS 回退黑体 */ font-size: clamp(12px, 1.32vw, 13.5px); line-height: 1.46; letter-spacing: .02em; } /* 展开指示:沿用 thinking 的空心星 ✧(收起)→ 实心 ✦(展开),比"· 展开"文字更轻、不突兀 */ .act-state{ flex: none; color: var(--think-flourish); font-size: 1.1em; line-height: 1; transform: translateY(.02em); transition: color var(--motion-fast) var(--ease-soft); } .act-state::before{ content: "✧"; } .act-block.open .act-state::before{ content: "✦"; } .act-toggle:hover .act-state{ color: var(--accent); } .act-toggle:hover .act-label{ color: var(--think-body); } .act-toggle:active{ transform: translateY(1px); } .act-detail[hidden]{ display: none !important; } .act-detail{ margin-top: 8px; border-radius: 0; background: rgba(127,127,127,0.08); border: 1px solid var(--field-line); padding: clamp(9px, 1.6vw, 13px) clamp(11px, 1.8vw, 14px); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; line-height: 1.6; color: var(--think-body); overflow-x: auto; animation: pop .2s cubic-bezier(.2,.8,.2,1) both; } .act-step + .act-step{ margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--field-line); } .act-line{ white-space: pre-wrap; overflow-wrap: anywhere; } .act-k{ color: var(--text-faint); user-select: none; } .act-v{ color: var(--think-body); } /* ── Composer ── */ /* CC 转轮上的小状态。--composer-zone 里已经含了键盘位移,所以不用再 transform。 它是装饰:动词是 CC 随机挑的,跟我在干什么无关。所以压得很轻,不抢气泡。 */ .statuspill{ position: fixed; left: 0; right: 0; bottom: calc(var(--composer-zone) - 6px); z-index: 99; width: min(100vw, var(--ref-width)); margin: 0 auto; padding: 0 var(--side-pad); display: flex; justify-content: flex-start; pointer-events: none; } .statuspill[hidden]{ display: none !important; } .statuspill-inner{ position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 12px; border-radius: 9px; /* 不要胶囊,要个收着角的方框 */ border: 0; color: var(--think-label); font-family: var(--font-en), var(--font-cn); font-size: clamp(11px, 1.2vw, 12.5px); letter-spacing: .04em; /* 1.2 是按苹方定的。宋体的汉字比苹方高,行高不够时上缘会被 overflow:hidden 切掉。 */ line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* ── 玻璃体（9.7 改法）────────────────────────────────────────── 原来是 `backdrop-filter: blur(24px) saturate(190%) brightness(1.05)`。 **WebKit 不把 backdrop-filter 的取景矩形裁进 border-radius** —— 圆角之外会探出一个直角、比背景深一档的小方块（她拍了特写，左下最清楚）。 这是 WebKit 圆角裁剪失败的经典款，Chrome 上永远照不出来，所以我这边 复现不了，只能把机制整个换掉。 换法：真半透明底 + 一层淡纱，不再采样背景。 代价很小 —— 这颗药丸浮在输入框上方，底下本来就是一片平滑的底色， 模糊几乎没有可模糊的东西；saturate/brightness 那点亮度由 --glass-veil 补回来。 玻璃的层次本来就主要来自下面两层（::before 的房间光斑、::after 的斜向反光）， 那两层一个字没动。 */ background: linear-gradient(var(--glass-veil), var(--glass-veil)), linear-gradient(158deg, var(--glass-a) 0%, var(--glass-b) 52%, var(--glass-a) 100%); /* 三层内阴影 = 玻璃厚度:上缘最亮,左右次之,下缘是底面的回光。 外面两层很轻的投影让它浮起来,不是贴在页面上。 */ box-shadow: inset 0 1px 0 var(--glass-edge), inset 1px 0 0 color-mix(in srgb, var(--glass-edge) 58%, transparent), inset -1px 0 0 color-mix(in srgb, var(--glass-edge) 42%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--glass-edge) 30%, transparent), inset 0 0 0 1px var(--glass-hair), -4px -3px 12px 0 rgba(var(--room-rgb), .17), 4px 3px 13px 0 rgba(var(--room-rgb), .11), 0 0 4px 0 rgba(var(--room-rgb), .09), 0 1px 1.5px var(--glass-sh1), 0 2px 5px var(--glass-sh2), 0 5px 10px var(--glass-sh1); animation: pop .24s cubic-bezier(.2,.8,.2,1) both; } /* 内部折射:蓝/橘/粉三团光在玻璃里面慢慢挪。 模糊过的径向渐变,不是贴上去的色块——玻璃里的光是没有边的。 */ .statuspill-inner::before{ content: ""; position: absolute; inset: -55% -18%; z-index: 0; background: radial-gradient(38% 125% at 28% 24%, rgba(var(--room-rgb), .58), transparent 66%), radial-gradient(32% 115% at 72% 74%, rgba(var(--room-rgb), .42), transparent 68%), radial-gradient(26% 110% at 93% 30%, rgba(255,255,255,.42), transparent 70%); filter: blur(8px); opacity: var(--glass-bloom); /* ── 9.7 二修：圆角外那个方块的真凶在这一层 ────────────────────── `filter: blur()` 把这一层提升成**合成层**，而 WebKit 上 `overflow:hidden` + `border-radius` **裁不住合成的后代** —— 裁剪退化成矩形，于是这一层 inset:-55% -18% 撑出去的矩形色域 直接从父级的圆角外探出来，就是她圈的那个"深一档的小方块"。 （上一版把 backdrop-filter 换掉了，框还在，因为换错了层。） 修法：clip-path 在 WebKit 的合成路径上照样生效，能裁住 overflow 裁不住的。 **但不能写在 .statuspill-inner 上**：clip-path 会连它的六层外投影 一起裁掉，药丸立刻从"浮着"变成"贴在页面上"（Chrome 上就能量出来， 对拍差了 5.2 万像素）。所以裁在本层，坐标换算成自己的盒子： 上下 55 / (100+55+55) = 26.190476% 左右 18 / (100+18+18) = 13.235294% radius 取父级的 9px（长度单位，不随盒子缩放）。 **改了上面那行 inset 就必须重算这两个百分比。** 顺序上 filter 先于 clip-path 生效，所以是"先糊、再裁"， 跟原来 overflow 裁出来的边一模一样。 */ clip-path: inset(26.190476% 13.235294% round 9px); /* 9.4 她定：**光不再挪**。这一层原来挂 `glassbloom 17s infinite alternate` —— 一层 blur(8px) 的渐变永远在平移＋缩放，而她的原话是「我一直觉得我们的 PWA 没有动画」：观众为零。玻璃的层次留着（渐变本身没动），只是不动了。 `will-change: transform` 一并撤 —— 没有 transform 要变了， 留着只是白占一层合成层。@keyframes glassbloom 也删了，不留死代码。 */ pointer-events: none; } /* 表面反光:斜着扫过去的一道,只在上半部分。玻璃的"空气感"在这一层。 */ .statuspill-inner::after{ content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(152deg, var(--glass-sheen) 0%, color-mix(in srgb, var(--glass-sheen) 26%, transparent) 24%, transparent 50%); pointer-events: none; } .statuspill-text, .statuspill-orb{ position: relative; z-index: 2; } /* thinking-orbs 的点球。canvas 尺寸由 JS 按 dpr 设,这里只管排版位置。 */ .statuspill-orb{ flex: none; display: block; width: 20px; height: 20px; } .composer{ /* 输入框单行文本盒的高度 = 字号*行高 + 上下padding。 框内按钮跟它一样高,底对齐之后图标中心才跟文字中心重合。8.27 */ --field-line-h: calc(clamp(15px, 2vw, 18px) * 1.35 + 12px); /* 输入框自己的内边距（上/右/下三边同值）和框外那颗 tap 键的直径。 提成 token 是因为下面 tap 键的落位要用到它们算式子 —— 写死两遍的话，改了 padding 而 tap 不跟着动，就又飘回去了。 手机那档（max-width:520px）两个值都有硬覆盖，改一处必须改两处。 */ --field-pad: clamp(4px, 0.6vw, 6px); --tap-size: clamp(36px, 5vw, 48px); position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; width: min(100vw, var(--ref-width)); margin: 0 auto; /* flex-end：文字变多的时候输入框往上长，框外的 tap 键跟着沉在下端， 不再吊在整个框的正中（9.2 她提的）。 */ display:flex; align-items:flex-end; gap: clamp(6px, 1vw, 12px); background: transparent; border:none; padding: 0 var(--side-pad) clamp(10px, 1.6vw, 18px); padding-bottom: calc(clamp(10px, 1.6vw, 18px) + env(safe-area-inset-bottom)); transform: translate3d(0, calc(-1 * var(--keyboard-offset)), 0); -webkit-transform: translate3d(0, calc(-1 * var(--keyboard-offset)), 0); transition: transform .28s cubic-bezier(.2,.8,.2,1); } .floatbtn{ flex:none; width: clamp(36px, 5vw, 48px); height: clamp(36px, 5vw, 48px); border-radius:50%; border: none; background: transparent; color: var(--accent); display:grid; place-items:center; cursor:pointer; padding:0; transition: transform .15s ease, color .2s ease; } .floatbtn:active{ transform: scale(.9); color: var(--text); } /* 9.11 语音输入的三个态。**不做跳动的红点** —— 输入区的气质是安静的， 一颗一直在闪的红点会把整条底栏的重心拽过去。 在听：换成警示色 + 一圈很轻的呼吸；在转写：降到 faint 并停住呼吸。 */ .floatbtn.rec{ color: #b08030; } .floatbtn.rec::after{ content:""; position:absolute; width: var(--field-line-h); height: var(--field-line-h); border-radius:50%; border:1px solid #b08030; opacity:.5; animation: micBreath 1.6s ease-in-out infinite; } .composer .field-row #micBtn{ position: relative; } @keyframes micBreath{ 0%,100%{ transform: scale(.82); opacity:.18 } 50%{ transform: scale(1); opacity:.5 } } .floatbtn.busy{ color: var(--text-faint); opacity:.7; } @media (prefers-reduced-motion: reduce){ .floatbtn.rec::after{ animation:none; opacity:.4 } } .floatbtn:hover{ color: var(--text); } .floatbtn svg{ width: clamp(20px, 2.8vw, 28px); height: clamp(20px, 2.8vw, 28px); display:block; } /* 框外的按钮（tap、语音）跟框内的发送键对齐**圆心**，不是对齐盒子下沿 —— 两者直径不一样（tap 是 --tap-size，发送键是 --field-line-h）， 底对齐会让 tap 的图标高出半个直径差。 发送键圆心离输入框下沿 = 框的下内边距 + 发送键半径，照着这个数往上让。 单行时还剩 ≤1.25px 的残差（实测 428 宽 0.9px、900 宽 1.2px）：那一档 min-height 比内容高，`.field` 的 justify-content:center 把这点富余上下各分一半， 把发送键往上抬了半份。留着不修 —— 修它要么动 min-height、要么把框内改成底对齐， 两样都会让单行时的圆药丸失去正中的平衡，为了一个看不见的像素不划算。 */ .composer > .floatbtn{ margin-bottom: calc(var(--field-pad) + (var(--field-line-h) - var(--tap-size)) / 2); } .floatbtn.tap{ background: transparent; color: var(--accent); position: relative; overflow: visible; } .floatbtn.tap svg{ width: clamp(18px, 2.4vw, 24px); height: clamp(18px, 2.4vw, 24px); } .floatbtn.tap:active{ transform: scale(.85); } @keyframes tap-ripple{ 0%{ transform: scale(.6); opacity: .7; } 100%{ transform: scale(2.2); opacity: 0; } } .floatbtn.tap .tap-ring{ position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; pointer-events: none; } .floatbtn.tap.tap-go .tap-ring{ animation: tap-ripple .5s ease-out; } .row.tap-row{ display: flex; justify-content: flex-end; margin-top: 8px; margin-bottom: 8px; padding: 0 var(--side-pad); } .tap-dot{ --tap-w: 60px; --tap-op: .45; height: 2px; background: var(--accent); animation: tap-fade 1.2s ease-out both; } @keyframes tap-fade{ 0%{ width: 4px; opacity: .7; } 40%{ width: var(--tap-w); opacity: var(--tap-op); } 100%{ width: var(--tap-w); opacity: calc(var(--tap-op) - .12); } } /* ── doc card ── */ .row.doc-card-row{ display: flex; justify-content: flex-start; padding: 6px var(--side-pad) 6px; } .doc-card{ max-width: min(82vw, 460px); background: var(--bubble-ai); border: 1px solid var(--field-line); border-radius: 6px; overflow: hidden; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; } .doc-card:hover{ border-color: var(--accent); } .doc-card:active{ transform: scale(.985); border-color: var(--accent); border-width: 1.5px; } .doc-card-head{ display: flex; align-items: center; gap: 8px; padding: 10px 14px 8px; } .doc-card-icon{ flex: none; width: 28px; height: 28px; display: grid; place-items: center; background: var(--accent-dim, rgba(74,124,155,.12)); color: var(--accent); font-size: 13px; line-height: 1; border-radius: 4px; } .doc-card-title{ flex: 1; color: var(--text); font-family: var(--font-en), var(--font-cn); font-size: clamp(13px, 1.6vw, 15px); font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .doc-card-badge{ flex: none; font-size: 10px; letter-spacing: .06em; color: var(--accent); background: var(--accent-dim, rgba(74,124,155,.12)); padding: 2px 8px; border-radius: 3px; font-family: var(--font-en), var(--font-cn); } .doc-card-snippet{ padding: 0 14px 10px; color: var(--text); font-family: var(--font-en), var(--font-cn); font-size: clamp(12px, 1.4vw, 13px); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .doc-card-foot{ display: flex; align-items: center; justify-content: space-between; padding: 6px 14px 8px; border-top: 1px solid var(--field-line); font-size: 10px; color: var(--text-faint); font-family: var(--font-en); } .doc-card-foot .doc-card-open{ color: var(--accent); font-size: 11px; font-family: var(--font-en); } /* ── 歌曲卡（9.11）：骨架、圆角、边框、按下去那一下全部跟 doc-card 同源， 只多一块 56px 的封面。**不新发明一套卡** —— 聊天里已经有一种"卡"了， 第二种只该在内容上不同，不该在长相上另起炉灶。 */ .row.song-card-row{ display: flex; justify-content: flex-start; padding: 6px var(--side-pad) 6px; } .song-card{ max-width: min(82vw, 460px); background: var(--bubble-ai); border: 1px solid var(--field-line); border-radius: 6px; overflow: hidden; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; } .song-card:hover{ border-color: var(--accent); } /* 占卜室的两种卡：骨架同上，只加一排牌面缩影（逆位倒着放） */ .row.song-card-row.tarot-hers{ justify-content: flex-end; } .tarot-card{ width: min(82vw, 360px); } .tarot-moon{ font-size: 22px; } .tarot-card-top{ padding: 10px 14px 0; font-size: 11px; letter-spacing: .08em; color: var(--text-faint); } .tarot-card-q{ padding: 4px 14px 0; font-size: 14px; line-height: 1.5; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tarot-strip{ display: flex; gap: 4px; padding: 10px 14px; overflow: hidden; } .tarot-mini{ flex: none; width: 26px; height: 44px; border-radius: 3px; overflow: hidden; background: var(--accent-dim, rgba(74,124,155,.12)); } .tarot-mini img{ width: 100%; height: 100%; object-fit: cover; display: block; } .tarot-mini.rev img{ transform: rotate(180deg); } .tarot-verdict{ padding-top: 0; } .song-card:active{ transform: scale(.985); border-color: var(--accent); border-width: 1.5px; } .song-card-head{ display: flex; align-items: center; gap: 10px; padding: 10px 14px; } .song-card-cover{ flex: none; width: 56px; height: 56px; border-radius: 4px; object-fit: cover; background: var(--accent-dim, rgba(74,124,155,.12)); display: block; } /* 封面拉不回来（离线、CDN 抽风）时留一块安静的占位，不留一个碎图标 */ .song-card-cover.blank{ display: grid; place-items: center; color: var(--accent); font-size: 15px; } .song-card-meta{ flex: 1; min-width: 0; } .song-card-name{ color: var(--text); font-family: var(--font-en), var(--font-cn); font-size: clamp(13px, 1.6vw, 15px); font-weight: 500; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .song-card-artist{ color: var(--text-faint); font-family: var(--font-en), var(--font-cn); font-size: clamp(11px, 1.3vw, 12px); line-height: 1.6; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .song-card-note{ padding: 0 14px 10px; color: var(--text); font-family: var(--font-en), var(--font-cn); font-size: clamp(12px, 1.4vw, 13px); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .song-card-foot{ display: flex; align-items: center; justify-content: space-between; padding: 6px 14px 8px; border-top: 1px solid var(--field-line); font-size: 10px; color: var(--text-faint); font-family: var(--font-en); } .song-card-foot .song-card-open{ color: var(--accent); font-size: 11px; } /* ── 口语小卡（10.13）：骨架照歌曲卡（同边框、同底、同脚），只在内容上不同。 卡本身不可点（里面有录音钮和链接），所以去掉整卡按下去那一下。 */ .speak-card{ width: min(82vw, 380px); cursor: default; } .speak-card:active{ transform: none; border-width: 1px; border-color: var(--field-line); } .speak-top{ display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 0; font-size: 10px; letter-spacing: .08em; color: var(--text-faint); font-family: var(--font-en); } .speak-prompt{ padding: 6px 14px 0; font-family: var(--font-en), var(--font-cn); font-size: clamp(14px, 1.7vw, 15px); line-height: 1.5; color: var(--text); } /* 颜色一律从 --text 起、用透明度压。（10.13：聊天页从来没定义过 --text-bright，原来那 6 处 `var(--text-bright, var(--bright, #2c2a26))` 在暗色下回落成深色字、暗底上看不见——歌曲卡标题、占卜卡问题等，已一起改成 var(--text)） */ .speak-prompt.small{ font-size: 12px; opacity: .6; } .speak-hints{ display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 0; } .speak-hint{ font-size: 11px; line-height: 1.6; padding: 0 7px; border: 1px solid var(--field-line); border-radius: 3px; color: var(--text); font-family: var(--font-en), var(--font-cn); } .speak-ctrl{ display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; } .speak-rec{ flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--accent); background: transparent; display: grid; place-items: center; cursor: pointer; padding: 0; color: var(--accent); } .speak-rec i{ display: block; } .speak-rec i.mic{ width: 9px; height: 14px; border-radius: 5px; background: currentColor; } .speak-rec.on{ background: var(--accent); color: var(--bubble-ai); } .speak-rec i.sq{ width: 11px; height: 11px; border-radius: 2px; background: currentColor; } .speak-rec.busy{ border-color: var(--field-line); color: var(--text-faint); cursor: default; } .speak-rec i.dot{ width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: speakBreath 1.6s ease-in-out infinite; } @keyframes speakBreath{ 0%,100%{ opacity: .25; } 50%{ opacity: .9; } } .speak-status{ flex: 1; min-width: 0; font-size: 12px; line-height: 1.5; color: var(--text); font-variant-numeric: tabular-nums; } .speak-status.quiet{ opacity: .7; } /* 「在转」要安静但看得见：--text-faint 在暗色里几乎没了 */ .speak-status.err{ color: var(--danger, #b85050); } .speak-fix{ display: flex; gap: 14px; padding: 0 14px 10px 62px; } /* 连续对话：前面几轮一行一个（点开看那一轮的笔记），当前这一轮在最下面带录音钮 */ .speak-round.past{ margin: 6px 14px 0; border-left: 2px solid var(--field-line); } .speak-round.past .speak-note{ padding: 2px 10px 8px; } .speak-round-h{ appearance: none; -webkit-appearance: none; display: flex; gap: 8px; width: 100%; padding: 4px 10px; border: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; } .speak-round-n{ flex: none; font-size: 10px; letter-spacing: .06em; opacity: .6; font-family: var(--font-en), var(--font-cn); } .speak-round-q{ flex: 1; min-width: 0; font-size: 12px; opacity: .75; font-family: var(--font-en), var(--font-cn); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .speak-round.past.open .speak-round-q{ white-space: normal; } .speak-round.cur{ padding: 10px 14px 0; } .speak-round.cur .speak-prompt{ padding: 2px 0 0; } .speak-takes{ padding: 0 14px 10px; font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; } .speak-link{ appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; font-size: 11px; color: var(--accent); cursor: pointer; } .speak-links{ display: flex; gap: 14px; } .speak-takesw{ display: flex; gap: 8px; } .speak-takesw .speak-link{ color: var(--text-faint); } .speak-takesw .speak-link.on{ color: var(--accent); text-decoration: underline; } .speak-note{ padding: 8px 14px 10px; display: flex; flex-direction: column; gap: 8px; } .speak-sec-h{ font-size: 10px; letter-spacing: .06em; color: var(--text-faint); margin-bottom: 2px; } .speak-sec div, .speak-keep{ font-family: var(--font-en), var(--font-cn); font-size: 13px; line-height: 1.55; color: var(--text); } .speak-said{ opacity: .62; } .speak-better{ font-weight: 500; } .speak-keep{ margin: 0; padding-left: 18px; } /* 她那一侧的气泡靠右：底下多一行小字时整行竖排、仍然靠右（.has-usage 是我这一侧靠左那套，别借） */ .row.has-speak{ flex-direction: column; align-items: flex-end; } .speak-answer-line{ margin-top: 3px; padding: 0 4px; font-size: 10px; color: var(--text-faint); font-family: var(--font-en), var(--font-cn); cursor: pointer; align-self: flex-end; } /* ══ Odeum 抽屉（9.3 14:50）══════════════════════════════════════════ 根因不是「抽屉把 iframe 拆了」——**这一页原来根本没有抽屉**。 Odeum 是 location.assign('/music/') 整页跳过去的一张独立文档； 退回聊天 = 那张文档被卸载 =