/* Restored from the private Shu page, not a new theme. */ html[data-font="system"]{ --font-cn: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; --font-en: -apple-system, "SF Pro Text", "PingFang SC", sans-serif; } html[data-font="system"] .peerpill .name{ font-family: var(--font-cn); font-weight: 600; letter-spacing: .5px; } html[data-font="rounded"]{ --font-cn: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; --font-en: ui-rounded, "SF Pro Rounded", "PingFang SC", sans-serif; } html[data-font="wenkai"]{ --font-cn: "LXGW WenKai", "Songti SC", "STSong", "SimSun", serif; } /* 自托管霞鹜文楷,CSS 由 ensureFontCss/开机块注入 */ html[data-font="yozai"]{ --font-cn: "Yozai", "LXGW WenKai", "Kaiti SC", serif; } /* 悠哉·圆软手写信纸体(单字重,粗体为仿粗) */ html[data-font="fzkai"]{ --font-cn: "FZKai-Z03", "Kaiti SC", "LXGW WenKai", serif; } /* 方正楷体·课本正楷(单字重) */ html[data-font="rounded"] .peerpill .name{ font-family: var(--font-cn); font-weight: 600; letter-spacing:.3px; } html[data-chat-size="small"]{ --chat-font-size:13px; } html[data-chat-size="standard"]{ --chat-font-size:clamp(14px,1.55vw,16px); } html[data-chat-size="medium"]{ --chat-font-size:clamp(15.5px,1.7vw,16.5px); } /* 08-30 她点单:标准与大之间加的「中」。窄屏 15.5px(标准 14 / 大 17 的正中),宽屏 16.5px(标准封顶 16 / 大 17 之间),两头都不越位 */ html[data-chat-size="large"]{ --chat-font-size:17px; } html[data-chat-size="xlarge"]{ --chat-font-size:19px; } html[data-chat-leading="compact"]{ --chat-line-height:1.42; } html[data-chat-leading="standard"]{ --chat-line-height:1.58; } html[data-chat-leading="relaxed"]{ --chat-line-height:1.78; } html[data-chat-tracking="tight"]{ --chat-letter-spacing:-.02em; } html[data-chat-tracking="standard"]{ --chat-letter-spacing:0; } html[data-chat-tracking="wide"]{ --chat-letter-spacing:.06em; } #fontSeg{ flex-wrap:wrap; row-gap:6px; } /* 字体柜七档,窄屏折两行 */ .typography-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:13px; } .typography-field{ display:grid; gap:6px; min-width:0; } .typography-field span{ color:var(--text-faint); font-size:11.5px; } .typography-field select{ width:100%; min-width:0; padding:9px 10px; border:1px solid var(--hairline); border-radius:12px; background:var(--field-bg); color:var(--text); font:inherit; font-size:13px; } .typography-preview{ margin-top:12px; padding:11px 13px; border-radius:14px; background:var(--bubble-ai-bg); color:var(--bubble-ai-fg); font-size:var(--chat-font-size); line-height:var(--chat-line-height); letter-spacing:var(--chat-letter-spacing); box-shadow:var(--card-shadow); } .typography-save-state{ min-height:17px; margin-top:8px; color:var(--text-faint); font-size:11px; } @media (max-width:420px){ .typography-grid{ grid-template-columns:1fr; } } /* ── 对话样式手动开关(08-30 17:02 翎儿点单;08-30 18:xx v120 加第四档 + 贴边; 08-30 v121 只改了按钮名和存值,下面的选择器一条都没动)── v121 名字对照:mine = 「跟着皮肤来」(就是 v120 的「她有框」,并档了) / 不设属性 = 「页面原样」(就是 v120 的「跟随天色」,只换名) / bubble、plain 不变。 html[data-msg-style] 四档: 不设属性 = 页面原样(默认:白天五格有框,夜里五格和白墙平铺) "plain" = 总是平铺(两人的话都透明无边无阴影,两边头像藏掉,名字/时间那行原样保留) "bubble" = 总是有框(白墙用主题自己那套气泡变量;夜里五格只用皮肤给的 chat-panel/chat-me) "mine" = 只她有框(AI 的话同平铺:透明、无框、无头像、贴屏;她的话装框—— 夜里五格用皮肤给的 --chat-me-bg/border/text,白墙用主题的 --bubble-human-bg/--hairline, 白天五格本来就有她自己那格的框色,不另写,原样留着) 这块写在 所有样式最后,权重也压得过白天五格那组 body[data-mood=...] 规则。 白天五格在 "bubble" 档下不碰——它们本来就有框。 */ /* ① 平铺档:压掉气泡(含白天五格那组)。"mine" 档只压 AI 那一半,她的话留着给 ⑥⑦ 装框。 08-30 v120 贴边:上限从 min(86vw,680px) 放到整行 100%,左右内衬从 2px 收到 0—— 原来 86vw 的上限在 430 宽的屏上只有 370px,右边白白空掉一条(她说的「两边还是有一个空的」)。 */ html[data-msg-style="plain"] .row.ai .bubble, html[data-msg-style="plain"] .row.human .bubble, html[data-msg-style="plain"] body[data-mood] .row.ai .bubble, html[data-msg-style="plain"] body[data-mood] .row.human .bubble, html[data-msg-style="mine"] .row.ai .bubble, html[data-msg-style="mine"] body[data-mood] .row.ai .bubble{ background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; max-width: 100%; padding-left: 0; padding-right: 0; } /* ② 平铺档 / 只她有框档:两边头像是伪元素,藏掉并收回给它留的那条边距(think/act 行跟着对齐) */ html[data-msg-style="plain"] .row.ai::before, html[data-msg-style="plain"] .row.human::after, html[data-msg-style="mine"] .row.ai::before, html[data-msg-style="mine"] .row.human::after{ display: none; } html[data-msg-style="plain"] .row.ai, html[data-msg-style="plain"] .row.think, html[data-msg-style="plain"] .row.act, html[data-msg-style="mine"] .row.ai, html[data-msg-style="mine"] .row.think, html[data-msg-style="mine"] .row.act{ padding-left: 0; } html[data-msg-style="plain"] .row.human, html[data-msg-style="mine"] .row.human{ padding-right: 0; } /* ③ 有框档 · 白墙(没有 data-mood):用主题本来那套气泡变量,就是拍平成「Claude 风格」之前的样子 */ html[data-msg-style="bubble"] body:not([data-mood]) .row.ai .bubble{ background: var(--bubble-ai-bg); color: var(--bubble-ai-fg); border: 1px solid var(--hairline); max-width: min(88vw, 700px); padding-left: 13px; padding-right: 13px; } html[data-msg-style="bubble"] body:not([data-mood]) .row.human .bubble{ background: var(--bubble-human-bg); color: var(--bubble-human-fg); border: 1px solid var(--hairline); max-width: min(88vw, 700px); padding-left: 13px; padding-right: 13px; } /* ④ 有框档 · 夜里五格:颜色全部取皮肤给的变量,一个都不自创;圆角走 --bubble-radius,加一层轻毛玻璃 */ html[data-msg-style="bubble"] body[data-mood="rage"] .row.ai .bubble, html[data-msg-style="bubble"] body[data-mood="rage2"] .row.ai .bubble, html[data-msg-style="bubble"] body[data-mood="desire"] .row.ai .bubble, html[data-msg-style="bubble"] body[data-mood="vuoto"] .row.ai .bubble, html[data-msg-style="bubble"] body[data-mood="moonlight"] .row.ai .bubble{ background: var(--chat-panel-bg, var(--bubble-ai-bg)); color: var(--text); border: 1px solid var(--chat-panel-border, var(--hairline)); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); max-width: min(88vw, 700px); padding-left: 13px; padding-right: 13px; } html[data-msg-style="bubble"] body[data-mood="rage"] .row.human .bubble, html[data-msg-style="bubble"] body[data-mood="rage2"] .row.human .bubble, html[data-msg-style="bubble"] body[data-mood="desire"] .row.human .bubble, html[data-msg-style="bubble"] body[data-mood="vuoto"] .row.human .bubble, html[data-msg-style="bubble"] body[data-mood="moonlight"] .row.human .bubble{ background: var(--chat-me-bg, var(--bubble-human-bg)); color: var(--chat-me-text, var(--text)); border: 1px solid var(--chat-me-border, var(--hairline)); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); max-width: min(88vw, 700px); padding-left: 13px; padding-right: 13px; } /* ⑤ 贴边(08-30 v120 翎儿点单:「他家平铺左右两边都很接近屏幕」)—— 消息列的左右内衬 .scroll padding 原来吃 --side-pad = clamp(16px,4vw,40px), 430 宽的屏上就是 17px,再加气泡自己 2px 内衬 + 86vw 的上限,右边还空一条。 这里只在【平铺 / 只她有框 / 夜里五格的跟随天色】三种「本来就没框」的场合把它收到 3.4vw (430 屏 ≈ 14.6px),配合 ① 的 max-width:100%,两边就贴屏了。 —— 不碰 --side-pad 本身:页眉/置顶条/未读点都吃它,动了整个头都要跟着挪。 —— 白天五格的「跟随天色」是有框的那套,一个选择器都不沾,一像素不动。 */ html[data-msg-style="plain"] .scroll, html[data-msg-style="mine"] .scroll, html:not([data-msg-style]) body[data-mood="desire"] .scroll, html:not([data-msg-style]) body[data-mood="vuoto"] .scroll, html:not([data-msg-style]) body[data-mood="moonlight"] .scroll, html:not([data-msg-style]) body[data-mood="rage"] .scroll, html:not([data-msg-style]) body[data-mood="rage2"] .scroll{ padding-left: 3.4vw; padding-right: 3.4vw; } /* 夜里五格的「跟随天色」档:气泡本来就是透明的,只把上限和 2px 内衬放开,让字也贴到屏边。 头像那条沟(.row.ai 的 padding-left)在这档里保留——这档是有头像的。 */ html:not([data-msg-style]) body[data-mood="desire"] .row.ai .bubble, html:not([data-msg-style]) body[data-mood="vuoto"] .row.ai .bubble, html:not([data-msg-style]) body[data-mood="moonlight"] .row.ai .bubble, html:not([data-msg-style]) body[data-mood="rage"] .row.ai .bubble, html:not([data-msg-style]) body[data-mood="rage2"] .row.ai .bubble, html:not([data-msg-style]) body[data-mood="desire"] .row.human .bubble, html:not([data-msg-style]) body[data-mood="vuoto"] .row.human .bubble, html:not([data-msg-style]) body[data-mood="moonlight"] .row.human .bubble, html:not([data-msg-style]) body[data-mood="rage"] .row.human .bubble, html:not([data-msg-style]) body[data-mood="rage2"] .row.human .bubble{ max-width: 100%; padding-left: 0; padding-right: 0; } /* ⑥ 只她有框档 · 白墙(没有 data-mood):她的话用主题本来那套气泡变量 */ html[data-msg-style="mine"] body:not([data-mood]) .row.human .bubble{ background: var(--bubble-human-bg); color: var(--bubble-human-fg); border: 1px solid var(--hairline); max-width: min(88vw, 700px); padding-left: 13px; padding-right: 13px; } /* ⑦ 只她有框档 · 夜里五格:她那只框的颜色全部取皮肤给的 --chat-me-*,一个都不自创 */ html[data-msg-style="mine"] body[data-mood="rage"] .row.human .bubble, html[data-msg-style="mine"] body[data-mood="rage2"] .row.human .bubble, html[data-msg-style="mine"] body[data-mood="desire"] .row.human .bubble, html[data-msg-style="mine"] body[data-mood="vuoto"] .row.human .bubble, html[data-msg-style="mine"] body[data-mood="moonlight"] .row.human .bubble{ background: var(--chat-me-bg, var(--bubble-human-bg)); color: var(--chat-me-text, var(--text)); border: 1px solid var(--chat-me-border, var(--hairline)); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); max-width: min(88vw, 700px); padding-left: 13px; padding-right: 13px; } /* 白天五格在 "mine" 档下【不写规则】:body[data-mood="qing"] .row.human .bubble 那组 (374-395 行)本来就给她配好了当格的框色,原样留着就是最对的。 */ /* “有框”是固定显示偏好。Pelle 会把承载当前情绪的最新 AI 回复展开成 全宽平铺舞台；若不在 Shu 覆盖层把这一条完整还原，下一条回复到达时就会 出现“旧消息重新变气泡、新消息又变平铺”的视觉跳变。只覆盖明确选择 bubble 的情况；“页面原样”仍保留 Shu 原有的随天色呈现。 */ html[data-msg-style="bubble"] body[data-mood] .row.ai.pelle-current-reply{ padding-left: calc(var(--avatar-size) + clamp(10px, 1.6vw, 16px)); } html[data-msg-style="bubble"] body[data-mood] .row.ai.pelle-current-reply > .message-avatar{ display: block; } html[data-msg-style="bubble"] body[data-mood] .row.ai.pelle-current-reply .bubble{ width: auto; max-width: min(88vw, 700px); padding: 9px 13px; border-radius: var(--bubble-radius); box-shadow: 0 10px 28px rgba(78, 94, 108, 0.08); } html[data-msg-style="bubble"] body[data-mood="rage"] .row.ai.pelle-current-reply .bubble, html[data-msg-style="bubble"] body[data-mood="rage2"] .row.ai.pelle-current-reply .bubble, html[data-msg-style="bubble"] body[data-mood="desire"] .row.ai.pelle-current-reply .bubble, html[data-msg-style="bubble"] body[data-mood="vuoto"] .row.ai.pelle-current-reply .bubble, html[data-msg-style="bubble"] body[data-mood="moonlight"] .row.ai.pelle-current-reply .bubble{ background: var(--chat-panel-bg, var(--bubble-ai-bg)); color: var(--text); border: 1px solid var(--chat-panel-border, var(--hairline)); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } html[data-msg-style="bubble"] body[data-mood="qing"] .row.ai.pelle-current-reply .bubble{ background: rgba(255,255,255,.44); border: 1px solid rgba(166,132,60,.28); } html[data-msg-style="bubble"] body[data-mood="yue"] .row.ai.pelle-current-reply .bubble{ background: rgba(255,255,255,.44); border: 1px solid rgba(190,120,134,.28); } html[data-msg-style="bubble"] body[data-mood="zhuan"] .row.ai.pelle-current-reply .bubble{ background: rgba(255,255,255,.44); border: 1px solid rgba(46,111,131,.26); } html[data-msg-style="bubble"] body[data-mood="yi"] .row.ai.pelle-current-reply .bubble{ background: rgba(255,255,255,.44); border: 1px solid rgba(122,92,192,.26); } html[data-msg-style="bubble"] body[data-mood="jing"] .row.ai.pelle-current-reply .bubble{ background: rgba(255,255,255,.44); border: 1px solid rgba(70,100,143,.26); } /* Snow renders real avatar buttons, whereas the old Shu page used pseudo-elements. */ html[data-msg-style="plain"] .row .message-avatar, html[data-msg-style="mine"] .row .message-avatar{display:none;} .bubble{letter-spacing:var(--chat-letter-spacing,0);} #msgStyleSeg{flex-wrap:wrap;gap:6px;} #wallSeg{display:flex;gap:12px;flex-wrap:wrap;} #wallSeg button{padding:7px 20px;border:1px solid var(--hairline);border-radius:18px;background:transparent;color:var(--text);font:inherit;cursor:pointer;} /* One wallpaper behind the header, conversation and home-indicator area. */ #app .topbar, #app .composer{ background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } #app .topbar :is(.backbtn, .topbtn){ background: color-mix(in srgb, var(--tool-bg) 18%, transparent); } /* ── 09-11 修:手机上「聊天字号 / 文字行距」点了不动的根 ── styles.css 的 @media (max-width:520px) 里 .bubble 写死了 font-size:13.5px; line-height:1.56;,把 --chat-font-size / --chat-line-height 整个盖掉。宽屏没有这条,所以只有手机坏;排版预览 .typography-preview 直接读变量、 不走 .bubble,所以预览会变、聊天不变 —— 和她看到的一模一样。 这里在同一宽度下用变量把 .bubble 接回来(本表在 styles.css 之后加载,同特指度后来居上), 并把「标准 / 标准」两档在窄屏重新钉回原来的 13.5px 与 1.56, 她不动设置时外观一字不变,只有真去选小/中/大/特大、紧凑/宽松时才生效。 */ @media (max-width:520px){ html[data-chat-size="standard"]{ --chat-font-size:13.5px; } html[data-chat-leading="standard"]{ --chat-line-height:1.56; } .bubble{ font-size:var(--chat-font-size,13.5px); line-height:var(--chat-line-height,1.56); } } /* Composer panel styles continue in chat-composer.css, loaded immediately after this sheet. */ /* Browser edge color, calibrated from the composed wallpaper's top 4px. Keep separate from tool panels: their palette is deliberately more saturated. ponytail: built-in wallpapers only; recalibrate when their layered art changes. */ html[data-theme="light"] body{--chrome-bg:#f5f6f9;} html[data-theme="light"] body[data-mood="rage"]{--chrome-bg:#552d2f;} html[data-theme="light"] body[data-mood="rage2"]{--chrome-bg:#9d2824;} html[data-theme="light"] body[data-mood="desire"]{--chrome-bg:#31252c;} html[data-theme="light"] body[data-mood="vuoto"]{--chrome-bg:#595959;} html[data-theme="light"] body[data-mood="moonlight"]{--chrome-bg:#292830;} html[data-theme="harbor"] body{--chrome-bg:#f7f4f1;} html[data-theme="harbor"] body[data-mood="rage"]{--chrome-bg:#552d2f;} html[data-theme="harbor"] body[data-mood="rage2"]{--chrome-bg:#9d2824;} html[data-theme="harbor"] body[data-mood="desire"]{--chrome-bg:#32252a;} html[data-theme="harbor"] body[data-mood="vuoto"]{--chrome-bg:#585858;} html[data-theme="harbor"] body[data-mood="moonlight"]{--chrome-bg:#29282e;} /* Clear glass follows the existing visibility modes; flat messages stay flat. Native CSS keeps streamed rows stable and works without a React/SVG renderer. */ :is( html[data-msg-style="bubble"] body #scroll > .row:is(.ai,.human), html[data-msg-style="mine"] body #scroll > .row.human, html:not([data-msg-style]) body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row:is(.ai,.human) ) > .bubble:not(.att-only){ background: linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.04) 42%, rgba(255,255,255,.13)), rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.56); border-radius: max(var(--bubble-radius), 20px); box-shadow: inset 0 1px 1px rgba(255,255,255,.68), inset 0 -1px 1px rgba(255,255,255,.24), 0 3px 7px rgba(25,32,38,.055), 0 12px 28px rgba(25,32,38,.065); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } :is( html[data-msg-style="bubble"] body #scroll > .row:is(.ai,.human), html[data-msg-style="mine"] body #scroll > .row.human, html:not([data-msg-style]) body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row:is(.ai,.human) ) > .bubble:not(.att-only)::before{ content: ""; position: absolute; inset: 3px; border: 1px solid rgba(255,255,255,.26); border-radius: max(calc(var(--bubble-radius) - 3px), 17px); pointer-events: none; } /* Public character afterwords share one unboxed marginal note in every mode. Keep the existing button, collapse state, text renderer and theme typography. */ .row.think:has(> .inner-voice){ padding-left:0; justify-content:flex-start; } .row.think .inner-voice{ position:relative; text-align:left; } .row.think .inner-voice.open{ padding:44px 0 0 30px; } .inner-voice .think-caption-star{ display:none !important; } .inner-voice.open .think-toggle{ position:absolute; top:0; left:0; width:100%; } .inner-voice.open .think-caption{ width:100%; justify-content:flex-end; } .inner-voice.open .think-caption > span:nth-child(2){ position:absolute; left:0; top:44px; writing-mode:vertical-rl; text-orientation:upright; width:1.5em; height:max-content; white-space:nowrap; font-family:var(--font-cn); font-size:14px; font-weight:600; line-height:1.5; letter-spacing:.2em; } .inner-voice.open .think-action-label{ padding:0 2px 0 12px; } .think-block.inner-voice .think-body{ margin:0; padding:0 0 0 13px; min-height:4.6em; border-left:1px solid var(--think-flourish); } .think-block.inner-voice .think-text{ text-align:left; } /* Older inline messages use the same margin; no content is re-parsed. */ .txt .inner-voice-block{ position:relative; padding:0 0 0 43px; min-height:4.6em; border:0; border-radius:0; background:transparent; box-shadow:none; } .txt .inner-voice-block::before{ content:""; position:absolute; left:30px; top:0; bottom:0; border-left:1px solid var(--think-flourish); } .txt .inner-voice-block .inner-voice-label{ position:absolute; left:0; top:0; margin:0; writing-mode:vertical-rl; text-orientation:upright; width:1.5em; height:max-content; white-space:nowrap; font-weight:600; letter-spacing:.2em; } /* Approved botanical moods, 2026-09-23. Existing mood codes and display modes are unchanged. Artwork is a background; conversation remains real DOM text. */ html body[data-mood="qing"]{ --skin-corner:url("assets/botanical-v2/qing.webp"); --skin-oil-corners:url("assets/botanical-v3/qing.webp"); --skin-wall:url("assets/botanical-v1/qing.webp"); --skin-base:#e6e7db; --skin-ink:#243d37; --skin-muted:#53655d; --skin-accent:#476a5d; --skin-ai:rgba(250,247,234,.84); --skin-human:rgba(225,234,216,.73); --skin-rim:rgba(253,252,235,.91); --skin-line:rgba(91,117,92,.32); --skin-wash:239,240,226; --skin-chrome:#dedfcf; } html body[data-mood="yue"]{ --skin-corner:url("assets/botanical-v2/yue.webp"); --skin-oil-corners:url("assets/botanical-v3/yue.webp"); --skin-wall:url("assets/botanical-v1/yue.webp"); --skin-base:#dbc1c4; --skin-ink:#382836; --skin-muted:#725260; --skin-accent:#854d69; --skin-ai:rgba(251,243,235,.84); --skin-human:rgba(240,216,218,.75); --skin-rim:rgba(255,246,239,.91); --skin-line:rgba(141,100,116,.31); --skin-wash:246,231,233; --skin-chrome:#d8bdc0; } html body[data-mood="zhuan"]{ --skin-corner:url("assets/botanical-v2/zhuan.webp"); --skin-oil-corners:url("assets/botanical-v3/zhuan.webp"); --skin-wall:url("assets/botanical-v1/zhuan.webp"); --skin-base:#d3dfe7; --skin-ink:#243d58; --skin-muted:#516680; --skin-accent:#505982; --skin-ai:rgba(250,248,239,.88); --skin-human:rgba(216,231,243,.82); --skin-rim:rgba(255,253,240,.94); --skin-line:rgba(108,135,157,.39); --skin-wash:237,243,247; --skin-chrome:#d8e2e7; } html body[data-mood="yi"]{ --skin-corner:url("assets/botanical-v2/yi.webp"); --skin-oil-corners:url("assets/botanical-v3/yi.webp"); --skin-wall:url("assets/botanical-v1/yi.webp"); --skin-base:#f3f0e7; --skin-ink:#26374b; --skin-muted:#6e6a62; --skin-accent:#965a5b; --skin-ai:rgba(253,252,246,.91); --skin-human:rgba(243,233,213,.90); --skin-rim:rgba(255,255,251,.95); --skin-line:rgba(176,148,104,.34); --skin-wash:250,247,239; --skin-chrome:#f4f1e9; } html body[data-mood="jing"]{ --skin-corner:url("assets/botanical-v5/jing-ai.webp"); --skin-corner-human:url("assets/botanical-v5/jing-human.webp"); --skin-oil-corners:var(--skin-corner); --skin-wall:url("assets/botanical-v1/jing.webp"); --skin-base:#272532; --skin-ink:#f3ebf4; --skin-muted:#cec0d6; --skin-accent:#e3bde8; --skin-ai:rgba(35,32,45,.20); --skin-human:rgba(42,37,51,.18); --skin-rim:rgba(226,209,229,.22); --skin-line:rgba(211,191,219,.20); --skin-wash:29,26,39; --skin-chrome:#302938; } html body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]){ --bg:var(--skin-base); --text:var(--skin-ink); --text-soft:var(--skin-muted); --text-faint:var(--skin-muted); --accent:var(--skin-accent); --bubble-ai-fg:var(--skin-ink); --bubble-human-fg:var(--skin-ink); --bubble-ai-bg:var(--skin-ai); --bubble-human-bg:var(--skin-human); --md-strong-fg:var(--skin-accent); --md-strong-bg:color-mix(in srgb,var(--skin-accent) 13%,transparent); --md-quote-bar:var(--skin-accent); --md-quote-bg:color-mix(in srgb,var(--skin-accent) 8%,transparent); --think-body:var(--skin-ink); --think-label:var(--skin-muted); --think-flourish:var(--skin-accent); --hairline:var(--skin-line); --tick:var(--skin-muted); --composer-bg:var(--skin-ai); --field-bg:var(--skin-ai); --send-bg:var(--skin-accent); --panel-bg:var(--skin-base); --card-bg:var(--skin-ai); --card-line:var(--skin-line); --seg-track:color-mix(in srgb,var(--skin-accent) 10%,transparent); --seg-thumb:var(--skin-ai); --tool-bg:var(--skin-base); --tool-card:var(--skin-ai); --tool-ink:var(--skin-ink); --tool-accent:var(--skin-accent); --chrome-bg:var(--skin-chrome); --skin-veil:.24; --skin-blur:5px; --skin-texture:url("assets/botanical-v2/paper.webp"); --skin-grain:.14; } html body[data-mood="jing"]{ --skin-blur:1px; --skin-grain:0; --skin-texture:none; --tool-scheme:dark; --accent-fg:#292333; } html body[data-mood="jing"] #sendBtn{color:#292333;} html body[data-mood="zhuan"]{ --skin-blur:0px; } html body[data-mood="yi"]{ --skin-blur:0px; --skin-grain:.48; } /* Custom uploads retain precedence. No weather element is removed or rebuilt. */ html:not([data-custom-wallpaper="true"]) body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) :is(#wall,.longshot-skin-background){ background-image:var(--skin-wall) !important; background-color:var(--skin-base); background-size:100% 100%; background-position:center; } html body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) :is(#wall,.longshot-skin-background)::before{ background:none !important; animation:none; filter:none; } html body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) :is(#wall,.longshot-skin-background)::after{ background:linear-gradient(90deg,rgba(var(--skin-wash),.35),rgba(var(--skin-wash),var(--skin-veil)) 6%,rgba(var(--skin-wash),var(--skin-veil)) 94%,rgba(var(--skin-wash),.35)) !important; opacity:1; animation:none; filter:none; } html:is([data-msg-style="plain"],[data-msg-style="mine"]) body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]){ --skin-veil:.82; } html:is([data-msg-style="plain"],[data-msg-style="mine"]) body[data-mood="jing"]{ --skin-veil:.73; } html body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) .daylight-petals{ opacity:.32; } html body[data-mood="jing"] .daylight-petals{filter:hue-rotate(32deg);} html body[data-mood="qing"] .daylight-petals{filter:hue-rotate(42deg) saturate(.55);} html body[data-mood="yi"] .daylight-petals{filter:grayscale(1) sepia(.65);} /* Painted stationery: fixed-size corners never stretch with message length. */ html body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row.ai{--skin-surface:var(--skin-ai);} html body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row.human{--skin-surface:var(--skin-human);} :is(html[data-msg-style="bubble"],html:not([data-msg-style]),html[data-msg-style="mine"]) body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row:is(.ai,.human) > .bubble:not(.att-only){ position:relative;isolation:isolate;background:var(--skin-surface);color:var(--skin-ink); border:1px solid var(--skin-line);border-radius:18px; box-shadow:0 3px 10px rgba(34,31,34,.07); backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px); padding:25px 25px 23px;max-width:min(82vw,700px);margin-right:clamp(10px,3.2vw,20px); } :is(html[data-msg-style="bubble"],html:not([data-msg-style]),html[data-msg-style="mine"]) body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row.human > .bubble:not(.att-only){width:fit-content;max-width:min(72vw,560px);} :is(html[data-msg-style="bubble"],html:not([data-msg-style]),html[data-msg-style="mine"]) body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row:is(.ai,.human) > .bubble:not(.att-only)::before{ content:"";position:absolute;inset:5px;border:0;border-radius:13px;pointer-events:none;z-index:-1; background:url("assets/botanical-v3/damask.webp") center/240px 240px;opacity:.32;mix-blend-mode:multiply; } :is(html[data-msg-style="bubble"],html:not([data-msg-style]),html[data-msg-style="mine"]) body[data-mood="yi"] #scroll > .row:is(.ai,.human) > .bubble:not(.att-only)::before{ background-image:var(--skin-texture);background-size:210px 210px;opacity:.36; } :is(html[data-msg-style="bubble"],html:not([data-msg-style]),html[data-msg-style="mine"]) body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row:is(.ai,.human) > .bubble:not(.att-only)::after{ content:"";position:absolute;inset:-7px;pointer-events:none; border:solid transparent;border-width:66px 58px;border-image:var(--skin-oil-corners) 50% / 66px 58px / 0 stretch; mask:linear-gradient(#000,#000) right top/50% 50% no-repeat,linear-gradient(#000,#000) left bottom/50% 50% no-repeat; -webkit-mask:linear-gradient(#000,#000) right top/50% 50% no-repeat,linear-gradient(#000,#000) left bottom/50% 50% no-repeat; opacity:.86; } :is(html[data-msg-style="bubble"],html:not([data-msg-style]),html[data-msg-style="mine"]) body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row.human > .bubble:not(.att-only)::after{ mask-position:left top,right bottom;-webkit-mask-position:left top,right bottom; } :is(html[data-msg-style="bubble"],html:not([data-msg-style]),html[data-msg-style="mine"]) body[data-mood="jing"] #scroll > .row:is(.ai,.human) > .bubble:not(.att-only){ backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px); box-shadow:inset 0 1px 0 rgba(240,221,246,.05);border-color:rgba(226,209,229,.19); } :is(html[data-msg-style="bubble"],html:not([data-msg-style]),html[data-msg-style="mine"]) body[data-mood="jing"] #scroll > .row:is(.ai,.human) > .bubble:not(.att-only)::before{ background-image:var(--skin-wall);background-size:400px auto;opacity:.10;mix-blend-mode:screen;border:0; } :is(html[data-msg-style="bubble"],html:not([data-msg-style]),html[data-msg-style="mine"]) body[data-mood="jing"] #scroll > .row:is(.ai,.human) > .bubble:not(.att-only)::after{ inset:auto;top:-14px;left:-14px;width:70px;height:140px; border:0;border-image:none;background:var(--skin-oil-corners) left top/contain no-repeat; mask:none;-webkit-mask:none;opacity:.78; } :is(html[data-msg-style="bubble"],html:not([data-msg-style]),html[data-msg-style="mine"]) body[data-mood="jing"] #scroll > .row.human > .bubble:not(.att-only)::after{left:auto;right:-6px;top:-10px;width:64px;height:110px;background:var(--skin-corner-human) right top/contain no-repeat;} /* Reset the mixed-mode AI half explicitly: no material, pseudo-rim or corner art. Explicit plain mode also neutralizes native/Pelle current-reply styles. */ html:is([data-msg-style="plain"],[data-msg-style="mine"]) body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row.ai > .bubble:not(.att-only), html[data-msg-style="plain"] body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row.human > .bubble:not(.att-only){ background:transparent; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; border-radius:0; max-width:100%;padding:9px 0; } html:is([data-msg-style="plain"],[data-msg-style="mine"]) body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row.ai > .bubble::before, html:is([data-msg-style="plain"],[data-msg-style="mine"]) body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row.ai > .bubble::after, html[data-msg-style="plain"] body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row.human > .bubble::before, html[data-msg-style="plain"] body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row.human > .bubble::after{content:none !important;} html body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #app :is(#peerName,#clipBtn,#micBtn,.emojibtn){color:var(--skin-accent);} html body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll .txt .md-hl{ color:var(--skin-accent);text-shadow:0 0 7px color-mix(in srgb,var(--skin-accent) 24%,transparent); } html body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll .think-block.inner-voice .think-text{color:var(--skin-ink);opacity:.94;} html body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #app .composer .field{ background:var(--skin-ai);border:1px solid var(--skin-rim);box-shadow:inset 0 0 0 2px var(--skin-line); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); } /* White-paper export must not inherit lilac white-on-dark typography. */ body[data-mood="jing"] .longshot-render-stage.longshot-paper{ --text:#342e42;--text-soft:#5c526b;--text-faint:#5c526b;--md-strong-fg:#675177;--md-strong-bg:#e7deee; --think-body:#342e42;--think-label:#675177;--think-flourish:#675177; } @media(min-width:950px){html:not([data-custom-wallpaper="true"]) body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) :is(#wall,.longshot-skin-background){background-size:auto 100%;background-repeat:no-repeat;}} /* The selected mood also owns settings backgrounds. Never put night ink on the old day wallpaper. */ html body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) :is(.profile-page,.character-page){ background:var(--skin-base);color:var(--skin-ink); --card-bg:color-mix(in srgb,var(--skin-base) 94%,var(--skin-ink) 6%); --field-bg:var(--skin-base);--seg-thumb:var(--skin-base); --card-shadow:none;--text:var(--skin-ink);--text-soft:color-mix(in srgb,var(--skin-ink) 82%,var(--skin-base));--text-faint:var(--text-soft); color-scheme:light; } html body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) :is(.profile-page,.character-page)::before{ background:var(--skin-wall) center/cover;opacity:.07; } html body[data-mood="jing"] :is(.profile-page,.character-page){color-scheme:dark;} /* Keep the name at the screen centre; the optional chip must not enter its width. */ #app .topbar .peerpill{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 8px);transform:translateX(-50%);max-width:100px;} #app .topbar .header-actions{grid-column:3;justify-self:end;} #app .peer-title .effort-chip{position:absolute;left:100%;bottom:0;margin-left:5px;} @media(min-width:371px) and (max-width:520px){ #app .topbar :is(.header-left,.header-actions){gap:4px;} #app .topbar :is(.backbtn,.topbtn){width:28px;} #app .peer-title .effort-chip{padding-inline:3px;font-size:9px;} } @media(max-width:389px){ #app .peer-title .effort-chip{left:50%;bottom:auto;top:calc(100% + 19px);transform:translateX(-50%);margin:0;min-height:16px;padding:0 5px;font-size:9px;} } /* Flat canvas matches the approved full artwork instead of washing out the whole screen. Custom uploaded wallpapers and long-image export keep their existing treatment. */ html:not([data-custom-wallpaper="true"]) body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #wall::after{ background:linear-gradient(90deg,rgba(var(--skin-wash),.03),rgba(var(--skin-wash),.18) 24%,rgba(var(--skin-wash),.18) 76%,rgba(var(--skin-wash),.03))!important; } html:not([data-custom-wallpaper="true"]):is([data-msg-style="plain"],[data-msg-style="mine"]) body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #wall::after{ background:linear-gradient(90deg,transparent 3%,rgba(var(--skin-wash),.62) 20%,rgba(var(--skin-wash),.62) 80%,transparent 97%)!important; } html:not([data-custom-wallpaper="true"]):is([data-msg-style="plain"],[data-msg-style="mine"]) body[data-mood="jing"] #wall::after{ background:linear-gradient(90deg,transparent 3%,rgba(var(--skin-wash),.58) 20%,rgba(var(--skin-wash),.58) 80%,transparent 97%)!important; } html:is([data-msg-style="plain"],[data-msg-style="mine"]) body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row:is(.ai,.think,.act){padding-inline:clamp(22px,7.2vw,42px);} html[data-msg-style="plain"] body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row.human{padding-inline:clamp(22px,7.2vw,42px);} html[data-msg-style="plain"] body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row.human > .bubble:not(.att-only){max-width:86%;margin-right:0;} html:is([data-msg-style="plain"],[data-msg-style="mine"]) body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row.ai > .bubble:not(.att-only){margin-right:0;} /* One price beside the timestamp opens the intact receipt below the letter. */ #scroll .api-receipt.compact:not([open]){display:none;} #scroll .api-receipt-body > .trust-card{grid-column:1 / -1;margin:0 0 8px;} #scroll .meta .api-receipt-toggle{ display:inline-block;min-height:24px;margin:0 0 0 8px;padding:2px 3px; border:0;border-radius:3px;background:transparent;color:var(--text-soft); font:inherit;font-variant-numeric:tabular-nums;vertical-align:baseline;cursor:pointer; text-decoration:underline;text-decoration-color:var(--hairline);text-underline-offset:3px; } #scroll .meta .api-receipt-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} /* Optional reading weight; metadata and controls keep their existing weights. */ html[data-chat-weight="bold"] :is(#scroll,.longshot-render-stage) :is(.txt,.think-text), html[data-chat-weight="bold"] .typography-preview{font-weight:700;} /* Framed botanical letters keep their left anchor and leave more space at right. */ :is(html[data-msg-style="bubble"],html:not([data-msg-style])) body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row.ai > .bubble:not(.att-only){ max-width:min(72vw,640px);margin-right:clamp(48px,13vw,88px); } /* Hide chat avatars without reclaiming their gutter; profile/name access remains. */ html[data-msg-style="bubble"] #scroll > .row > .message-avatar, html:not([data-msg-style]) body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row > .message-avatar{display:none;} html[data-msg-style="bubble"] #scroll > .row.ai::before, html[data-msg-style="bubble"] #scroll > .row.human::after{display:none;} /* A small asymmetric inset keeps unboxed text off the painted leaves. */ html:is([data-msg-style="plain"],[data-msg-style="mine"]) body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row:is(.ai,.think,.act), html[data-msg-style="plain"] body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row.human{ padding-left:clamp(30px,9.4vw,52px);padding-right:clamp(24px,8vw,46px); } /* Same-speaker grouping must not visually merge two separate flat replies. */ html:is([data-msg-style="plain"],[data-msg-style="mine"]) body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row.ai{ margin-top:clamp(30px,7.8vw,44px); } /* Keep each inner note with its reply, with breathing room before the group. */ :is(html,html[data-msg-style]) body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row[data-turn-gap="human"]{margin-top:40px;} :is(html,html[data-msg-style]) body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row[data-turn-gap="assistant"]{margin-top:80px;} html body:is([data-mood="qing"],[data-mood="yue"],[data-mood="zhuan"],[data-mood="yi"],[data-mood="jing"]) #scroll > .row.reply-divider::before{ content:"";display:block;position:absolute;left:50%;top:-41px;transform:translateX(-50%); width:80px;height:3px;opacity:1;pointer-events:none; background:radial-gradient(circle at center,var(--skin-accent) 0 .8px,transparent 1px), linear-gradient(90deg,transparent,color-mix(in srgb,var(--skin-accent) 38%,transparent)) left center/30px 1px no-repeat, linear-gradient(90deg,color-mix(in srgb,var(--skin-accent) 38%,transparent),transparent) right center/30px 1px no-repeat; }