/* 增量桌面层：不改变手机机身尺寸，不依赖框架或网络素材。 */
:root, :root[data-theme=pearl] {
  --gradient-chat: radial-gradient(ellipse at 0% 10%, #DCD3E5 0, transparent 62%), radial-gradient(ellipse at 100% 85%, #F0DCD9 0, transparent 64%), linear-gradient(145deg, #F7F1EF, #E8E0ED 60%, #EFE5E4);
  --gradient-story: radial-gradient(ellipse at 100% 10%, #D6CBDF 0, transparent 68%), radial-gradient(ellipse at 0% 90%, #EAD8D0 0, transparent 66%), linear-gradient(155deg, #EAE2ED, #F2E8E5);
  --bubble-glass-ai: rgb(255 253 251 / 87%);
  --bubble-glass-user: rgb(235 223 236 / 88%);
}
:root[data-theme=rose] { --bubble-glass-user: rgb(242 224 229 / 89%); }
:root[data-theme=tea] { --bubble-glass-user: rgb(230 232 218 / 90%); }
:root { --font-system: "Microsoft YaHei", "Microsoft YaHei UI", system-ui, "PingFang SC", sans-serif; --font-heading: var(--font-family); --font-handwritten: "KaiTi", "楷体", "STKaiti", "Microsoft YaHei", sans-serif; }
:root[data-font=system] { --font-family: var(--font-system); }
:root[data-font=round] { --font-family: "YouYuan", "幼圆", "Microsoft YaHei UI", "PingFang SC", "Hiragino Sans GB", sans-serif; }
:root[data-font=xingkai] { --font-family: "STXingkai", "华文行楷", var(--font-handwritten); }
:root[data-font=cursive] { --font-family: "STCaoShu", "华文草书", var(--font-handwritten); }
:root[data-font=book] { --font-family: var(--font-system); --font-heading: Georgia, "Songti SC", "SimSun", serif; }
h1, h2, h3, .dream-card > p { font-family: var(--font-heading); }

/* 气泡文字保持完全不透明，柔雾来自表面和独立蒙层。 */
.message-bubble { background-color: var(--bubble-glass-ai); border-color: rgb(255 255 255 / 88%); border-radius: 22px 22px 22px 10px; box-shadow: 0 4px 15px rgb(86 64 93 / 5%), inset 0 1px 0 rgb(255 255 255 / 86%); }
.user .message-bubble { background-color: var(--bubble-glass-user); border-color: rgb(255 255 255 / 75%); border-radius: 22px 22px 10px 22px; }
@supports (backdrop-filter: blur(1px)) { .message-bubble { backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } }
.message-bubble::before { height: 10px; top: -6px; width: 30px; border-radius: 7px; background: var(--bubble-glass-ai); clip-path: polygon(0 100%, 5% 0, 34% 72%, 66% 72%, 95% 0, 100% 100%); opacity: .9; }
.user .message-bubble::before { background: var(--bubble-glass-user); }
/* 单条连续曲线画卷尾，替代原来生硬的半圆边框。 */
.message-bubble::after, .user .message-bubble::after { width: 23px; height: 27px; bottom: 1px; border: 0; border-radius: 0; background: var(--bubble-outline); opacity: .7; pointer-events: none; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M22 23C7 27 0 17 4 9C7 2 17 3 16 10C16 14 10 15 9 11' fill='none' stroke='white' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M22 23C7 27 0 17 4 9C7 2 17 3 16 10C16 14 10 15 9 11' fill='none' stroke='white' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.message-bubble::after { left: -15px; right: auto; transform: rotate(-7deg); }
.user .message-bubble::after { left: auto; right: -15px; transform: scaleX(-1) rotate(-7deg); }
:root[data-bubble=soft] .message-bubble { border-radius: 24px; }
:root[data-bubble=plain] .message-bubble { border-radius: 12px; box-shadow: none; }
:root[data-bubble=soft] .message-bubble::before, :root[data-bubble=soft] .message-bubble::after, :root[data-bubble=plain] .message-bubble::before, :root[data-bubble=plain] .message-bubble::after { display: none; }
.conversation-view::before { background-size: 190px 170px; opacity: .75; }
.conversation-view[data-mode=story]::before { background-size: 150px 150px, 150px 150px, 19px 19px; opacity: .45; }
.conversation-view::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; display: none; background: linear-gradient(rgb(255 253 251 / 85%), rgb(255 253 251 / 85%)), var(--imported-wallpaper); background-position: center; background-size: cover; }
:root[data-wallpaper=custom] .conversation-view::after { display: block; }
.composer { background: rgb(255 253 253 / 70%); border-radius: 25px; box-shadow: 0 5px 22px rgb(85 61 86 / 7%), inset 0 1px 0 var(--glass-edge); }
.composer textarea { border-radius: 19px; background: rgb(255 253 253 / 88%); }
.composer button { border-radius: 19px; box-shadow: 0 3px 9px rgb(99 70 106 / 13%); }

/* 三页桌面：水平翻页，各页垂直滚动，底部页签与常用栏保持可见。 */
/* 品牌展示只使用语义色；图标不带猫耳等主题专属形态，便于未来主题复用。 */
:root { --brand-icon-size: 24px; --brand-icon-stroke: 1.65; --brand-name-size: 9px; --brand-name-tracking: .12em; }
.brand-icon { display: inline-block; width: var(--brand-icon-size); height: var(--brand-icon-size); flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: var(--brand-icon-stroke); stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; pointer-events: none; }
.app-icon .brand-icon { width: calc(var(--brand-icon-size) + 4px); height: calc(var(--brand-icon-size) + 4px); }
.desktop-dock .brand-icon { display: block; width: 22px; height: 22px; margin-inline: auto; }
.desktop-app > span, .future-entry > span { line-height: 1; font-weight: 400; }
.future-entry > span { display: grid; place-items: center; min-width: var(--brand-icon-size); height: var(--brand-icon-size); }
.home-heading .brand-name-en { font-family: var(--font-system, system-ui); color: var(--color-text-caption); font-size: var(--brand-name-size); font-weight: 500; line-height: 1.4; letter-spacing: var(--brand-name-tracking); }
.home-view { padding: 0 12px; overflow: hidden; }
.home-view > .desktop-pager { flex: 1 1 auto; min-height: 0; }
.desktop-pager { display: flex; min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.desktop-pager::-webkit-scrollbar { display: none; }
.desktop-pager.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.desktop-page { flex: 0 0 100%; height: 100%; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; scroll-snap-align: start; scroll-snap-stop: always; padding: 20px 8px 24px; scrollbar-width: thin; scrollbar-color: var(--color-scrollbar) transparent; overscroll-behavior-y: contain; }
.desktop-page > * { flex-shrink: 0; }
.desktop-heading { padding: 3px 2px 19px; }
.desktop-heading h2 { margin: 9px 0; font-size: 25px; font-weight: 500; }
.desktop-heading p { font-size: 12px; color: var(--color-text-caption); line-height: 1.8; margin: 0; }
.desktop-tabs { display: flex; justify-content: center; gap: 15px; padding: 7px 0 8px; }
.desktop-tabs button { display: flex; gap: 5px; align-items: center; border: 0; background: none; color: var(--color-text-caption); padding: 5px; font-size: 10px; }
.desktop-tabs i { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--bubble-outline); }
.desktop-tabs [aria-selected=true] { color: var(--color-primary-ink); font-weight: 600; }
.desktop-tabs [aria-selected=true] i { width: 12px; border-radius: 8px; background: var(--color-primary-ink); }
.desktop-dock { display: flex; justify-content: space-around; flex-shrink: 0; border: 1px solid var(--glass-edge); border-radius: 22px; padding: 7px 10px; background: var(--glass-panel); box-shadow: var(--glass-shadow); }
.desktop-dock button { background: none; border: 0; border-radius: 10px; padding: 1px 14px; font-size: 22px; color: var(--color-primary-ink); }
.desktop-dock button span { display: block; font-size: 9px; margin-top: 3px; }
.home-view .app-grid { margin-bottom: 20px; }
.home-view .quick-panel { margin-top: 12px; }
.cat-mark { position: absolute; right: 3px; bottom: 5px; width: 126px; height: 108px; pointer-events: none; }
.dream-card { padding-bottom: 24px; }
.dream-card p { position: relative; max-width: 72%; }
.dream-card .card-caption { display: block; max-width: 61%; font-size: 10px; line-height: 1.8; }
.desktop-apps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 19px 7px; padding: 5px 0 22px; }
.desktop-app { min-width: 0; padding: 0; border: 0; background: none; display: flex; align-items: center; flex-direction: column; gap: 8px; }
.desktop-app > span { display: grid; place-items: center; width: 49px; height: 49px; border-radius: 17px; border: 1px solid var(--glass-edge); background: var(--glass-panel); color: var(--color-primary-ink); box-shadow: var(--glass-shadow); font-size: 25px; }
.desktop-app strong { font-size: 10px; font-weight: 400; line-height: 1.6; }
.future-entries { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.future-entry { min-width: 0; display: flex; align-items: center; flex-direction: column; gap: 7px; padding: 13px 5px; border: 1px solid var(--glass-edge); border-radius: 18px; background: var(--glass-panel); }
.future-entry > span { font-size: 22px; color: var(--color-primary-ink); }
.future-entry strong { font-size: 11px; font-weight: 500; line-height: 1.6; }
.future-entry small { font-size: 9px; color: var(--color-text-caption); }
.life-weather { width: 100%; margin: 12px 0; display: flex; align-items: center; gap: 12px; padding: 15px; text-align: left; }
.life-weather > span:first-child { font-size: 26px; color: var(--color-accent-ink); }
.life-weather > span:nth-child(2) { flex: 1; min-width: 0; }
.life-weather strong, .music-copy strong { display: block; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.life-weather small, .music-copy > span { display: block; margin-top: 7px; color: var(--color-text-caption); font-size: 10px; line-height: 1.8; }
.music-panel { width: 100%; text-align: left; }
.music-copy { flex: 1; min-width: 0; }

/* 可用生活页面和明确的功能预留。 */
.entry-list { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.entry-card { padding: 17px; min-width: 0; }
.entry-card h3 { margin: 0 0 8px; font-size: 15px; overflow-wrap: anywhere; }
.entry-card time { font-size: 11px; color: var(--color-text-caption); }
.entry-card p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.9; }
.entry-actions { display: flex; gap: 12px; }
.entry-actions button { border: 0; background: transparent; color: var(--color-primary-ink); padding: 6px 0; font-size: 11px; }
.entry-form-actions { display: flex; gap: 10px; }
.entry-form-actions > * { flex: 1; }
.note-wall .entry-card { border-radius: 5px 18px 18px 18px; transform: rotate(-.4deg); background: linear-gradient(135deg,var(--glass-strong),var(--color-accent-soft)); }
.note-wall .entry-card:nth-child(even) { transform: rotate(.4deg); background: linear-gradient(135deg,var(--glass-strong),var(--color-primary-soft)); }
.memory-search { display: flex; gap: 7px; }
.memory-search input { min-width: 0; width: 100%; flex: 1; padding: 12px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--glass-strong); color: var(--color-text); }
.memory-search button { flex-shrink: 0; }
.memory-hit { text-align: left; padding: 16px; }
.memory-hit strong { display: block; font-size: 12px; margin-bottom: 9px; }
.memory-hit > span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: 12px; white-space: pre-wrap; line-height: 1.9; }
.memory-highlight .message-bubble { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.future-detail { padding: 30px 22px; text-align: center; }
.future-detail > span { font-size: 45px; color: var(--color-primary-ink); }
.future-detail h3 { font-size: 20px; font-weight: 500; margin: 20px 0; }
.future-detail p { font-size: 13px; line-height: 1.9; margin: 18px 0; }
.future-detail .field-hint { font-size: 11px; }
.music-load { margin-top: 22px; width: 100%; }
#music-player { display: block; width: 100%; margin-top: 18px; }

/* 新设置只覆盖界面，不修改主控人设和角色存储。 */
.editor-form select { font: inherit; font-size: 12px; color: var(--color-text); display: block; width: 100%; min-width: 0; padding: 12px; margin-top: 8px; border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-surface); }
select:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.settings-editor > .decor-intro .secondary-button { margin-top: 14px; }
.settings-group { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--glass-edge); border-radius: 20px; background: var(--glass-panel); }
.settings-group legend { padding: 0 6px; font-size: 13px; }
.settings-group > label { display: block; font-size: 12px; margin-top: 12px; line-height: 1.8; }
.settings-group input[type=file] { display: block; width: 100%; font-size: 11px; margin: 9px 0; }
.settings-group > .secondary-button { margin-top: 14px; }
.wallpaper-preview { display: block; width: 100%; max-height: 130px; object-fit: cover; border-radius: 15px; margin-top: 10px; }
.editor-form .setting-check { display: flex; align-items: center; gap: 10px; }
.editor-form .setting-check input { width: 17px; margin: 0; accent-color: var(--color-primary-ink); }
:root[data-user-frame=pearl] .message.user .avatar { outline: 2px solid var(--glass-edge); box-shadow: 0 0 0 3px var(--bubble-outline); }
:root[data-user-frame=lace] .message.user .avatar { outline: 2px dotted var(--bubble-outline); outline-offset: 2px; }
:root[data-role-frame=pearl] :is(.message.assistant .avatar,#conversation-avatar,#detail-avatar,.character-card .avatar,.quick-character .avatar) { outline: 2px solid var(--glass-edge); box-shadow: 0 0 0 3px var(--bubble-outline); }
:root[data-role-frame=lace] :is(.message.assistant .avatar,#conversation-avatar,#detail-avatar,.character-card .avatar,.quick-character .avatar) { outline: 2px dotted var(--bubble-outline); outline-offset: 2px; }
:root[data-island=clock] .camera::before { content: attr(data-label); position: absolute; left: 12px; top: 4px; font-family: var(--font-family); font-size: 10px; color: #FFFDF8; line-height: 1.5; }
.desktop-pet { position: absolute; right: 1px; bottom: 108px; z-index: 4; width: 36px; height: 36px; pointer-events: none; filter: drop-shadow(0 3px 6px rgb(80 60 80 / 12%)); }
.desktop-pet svg { width: 100%; height: 100%; }
@media (max-width: 350px) { .home-view { padding-inline: 9px; } .desktop-page { padding-inline: 6px; } .desktop-apps { gap: 18px 5px; } .desktop-app > span { width: 43px; height: 43px; } .cat-mark { width: 108px; right: -3px; } .dream-card .card-caption { max-width: 60%; font-size: 9px; } .desktop-tabs { padding-block: 3px; } }

/* 奶油工具箱与字体试衣卡：保持原导航和网格列数。 */
.font-preview { padding: 19px 17px; border: 1px solid var(--glass-edge); border-radius: 22px; background: radial-gradient(ellipse at 100% 0,var(--color-accent-soft),transparent 75%),linear-gradient(135deg,var(--glass-strong),var(--color-primary-soft)); box-shadow: var(--shadow-card); }
.font-preview h3 { margin: 15px 0 10px; font-weight: 500; font-size: 20px; line-height: 1.8; }
.font-preview p { margin: 0; font-size: 13px; line-height: 2; overflow-wrap: anywhere; }
.settings-editor > .motion-setting { margin-top: 4px; padding: 15px; }
.desktop-heading { padding-bottom: 4px; }
.desktop-app > span { background: linear-gradient(150deg,var(--glass-strong),var(--color-primary-soft)); box-shadow: inset 0 1px 0 var(--glass-edge),0 5px 12px rgb(105 83 111 / 6%); }
.desktop-app:nth-child(3n+2) > span { background: linear-gradient(150deg,var(--glass-strong),var(--color-accent-soft)); }
.desktop-app:nth-child(3n) > span { background: linear-gradient(150deg,var(--glass-strong),var(--color-secondary-soft)); }
.home-panel { box-shadow: inset 0 1px 0 var(--glass-edge),var(--shadow-card); }
.desktop-app, .companion-launchers button, .pet-actions button { transition: transform .2s, box-shadow .2s; }
@media (hover:hover) { .desktop-app:hover { transform: translateY(-2px); } .pet-actions button:hover { transform: translateY(-2px); } }
button:focus-visible, .mood-options:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }

/* 只调整表面与留白；消息操作及聊天数据仍复用原有实现。 */
.message-bubble { padding: 13px 15px; border-radius: 24px 24px 24px 12px; background-image: linear-gradient(145deg,rgb(255 255 255 / 22%),transparent 75%); box-shadow: inset 0 1px 0 var(--glass-edge),0 5px 18px rgb(102 80 111 / 6%); }
.user .message-bubble { border-radius: 24px 24px 12px 24px; }
.message-bubble { line-height: 1.95; }
.conversation-view::before { opacity: .52; background-size: 210px 185px; }
.mode-switch { padding: 5px; box-shadow: inset 0 1px 4px rgb(105 83 111 / 7%),0 2px 7px rgb(255 253 249 / 40%); }
.mode-switch button[aria-pressed=true] { background: linear-gradient(145deg,var(--color-surface),var(--color-primary-soft)); box-shadow: 0 2px 7px rgb(105 83 111 / 10%); }
.composer { border-color: var(--glass-edge); background: linear-gradient(135deg,var(--glass-strong),var(--glass-panel)); }
.composer textarea { box-shadow: inset 0 1px 4px rgb(105 83 111 / 4%); }
.composer textarea:focus { border-color: var(--color-primary); }
.composer button { background-image: linear-gradient(145deg,var(--color-primary-hover),var(--color-primary)); box-shadow: inset 0 1px 0 var(--glass-edge),0 3px 10px rgb(105 83 111 / 13%); }
@media (prefers-reduced-motion:reduce) { .desktop-app, .companion-launchers button, .pet-actions button { transition: none; } }
@media (prefers-reduced-motion: reduce) { .desktop-pager { scroll-behavior: auto; } }