/* DreamPhone · 猫咪雾面装扮层。保留基础组件、手机尺寸和全部交互。 */
:root {
  --font-family: "YouYuan", "幼圆", "Microsoft YaHei UI", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --font-size-title: 19px;
  --font-size-hero: 30px;
  --color-bg: #F3EFF0;
  --color-surface: #FFFDFC;
  --color-primary: #B7A6BE;
  --color-primary-hover: #C3B3C9;
  --color-text: #3E3540;
  --color-text-muted: #70636D;
  --color-text-caption: #625460;
  --color-primary-ink: #66506D;
  --color-on-primary: #302635;
  --color-border: #DDD3DB;
  --color-user-bubble: #EBDFEC;
  --color-user-border: #D8C4DB;
  --color-ai-bubble: #FFFDFB;
  --color-primary-soft: #EAE0ED;
  --color-secondary-soft: #E8E6E2;
  --color-accent-soft: #F1E7DE;
  --color-secondary-ink: #5D6055;
  --color-accent-ink: #78604D;
  --color-scrollbar: #C7B7C9;
  --color-shell-mid: #DBD5DA;
  --color-shell-edge: #EAE4E6;
  --color-focus: #74547E;
  --color-surface-soft: #EBE4E9;
  --color-hover: #EDE5ED;
  --glass-panel: rgb(255 253 253 / 66%);
  --glass-strong: rgb(255 253 253 / 86%);
  --glass-edge: rgb(255 255 255 / 90%);
  --glass-blur: 15px;
  --glass-shadow: 0 8px 24px rgb(88 64 88 / 7%), inset 0 1px 0 rgb(255 255 255 / 90%);
  --bubble-outline: #C8B3CC;
  --lace-ink: rgb(132 103 131 / 16%);
  --particle-color: #FFFDF2;
  --particle-glow: rgb(215 180 194 / 75%);
  --gradient-page: radial-gradient(ellipse at 15% 20%, #E5DEDF 0, transparent 60%), radial-gradient(ellipse at 90% 70%, #E8DBE9 0, transparent 65%);
  --gradient-screen: radial-gradient(ellipse at 5% 8%, #F9F5F1 0, transparent 55%), linear-gradient(145deg, #E4DEE6 0%, #F5EEED 45%, #DFD7E5 100%);
  --gradient-chat: radial-gradient(ellipse at 0% 38%, #DDD6E4 0, transparent 66%), radial-gradient(ellipse at 100% 75%, #EEDBD9 0, transparent 58%), linear-gradient(160deg, #F3ECEE, #ECE7F0);
  --gradient-story: radial-gradient(ellipse at 100% 20%, #D9D0E1 0, transparent 64%), radial-gradient(ellipse at 10% 90%, #EADCD8 0, transparent 62%), linear-gradient(160deg, #EAE3EB, #F0E7E5);
  --gradient-home-card: linear-gradient(125deg, #DCD2E1, #F1E9E5 52%, #DFD4DD);
  --shadow-bubble: 0 4px 12px rgb(85 61 86 / 6%), inset 0 1px 0 rgb(255 255 255 / 85%);
  --shadow-card: var(--glass-shadow);
}

/* 两种可选择的色调；主题只覆盖变量，不改角色资料和聊天记录。 */
:root[data-theme=rose] {
  --color-bg: #F7EEEF;
  --color-primary: #C2A5AE;
  --color-primary-hover: #CEB5BD;
  --color-user-bubble: #F2E0E5;
  --color-user-border: #DFC1CB;
  --color-primary-soft: #F1E2E8;
  --color-primary-ink: #704D5E;
  --color-focus: #80556C;
  --bubble-outline: #D2ACBC;
  --color-scrollbar: #CFB0BD;
  --gradient-screen: radial-gradient(ellipse at 0% 10%, #FFF7EE 0, transparent 55%), linear-gradient(145deg, #E9D7DE 0%, #F8EEEB 45%, #E5D3DE 100%);
  --gradient-chat: radial-gradient(ellipse at 0% 38%, #E9D2DB 0, transparent 66%), radial-gradient(ellipse at 100% 75%, #F2DFD5 0, transparent 58%), linear-gradient(160deg, #F8EBED, #EBDDE6);
  --gradient-story: radial-gradient(ellipse at 100% 20%, #E2CDDB 0, transparent 64%), radial-gradient(ellipse at 10% 90%, #F0D9D3 0, transparent 62%), linear-gradient(160deg, #EFE0E8, #F7ECE6);
  --gradient-home-card: linear-gradient(125deg, #E4CDD8, #F9EEE5 52%, #E9D8DE);
}
:root[data-theme=tea] {
  --color-bg: #F3F1E9;
  --color-primary: #B0B49F;
  --color-primary-hover: #BEC2AE;
  --color-user-bubble: #E6E8DA;
  --color-user-border: #CBD0B8;
  --color-primary-soft: #E5E9DC;
  --color-primary-ink: #536044;
  --color-focus: #596746;
  --bubble-outline: #BBC4A6;
  --color-scrollbar: #BCC2A9;
  --gradient-screen: radial-gradient(ellipse at 0% 10%, #FAF6E9 0, transparent 55%), linear-gradient(145deg, #DDE1D2 0%, #F5F1E6 45%, #DDE1D6 100%);
  --gradient-chat: radial-gradient(ellipse at 0% 38%, #D8DFCD 0, transparent 66%), radial-gradient(ellipse at 100% 75%, #EDE2CA 0, transparent 58%), linear-gradient(160deg, #F3F0E6, #E3E7DB);
  --gradient-story: radial-gradient(ellipse at 100% 20%, #D2DCC8 0, transparent 64%), radial-gradient(ellipse at 10% 90%, #E9DCC4 0, transparent 62%), linear-gradient(160deg, #E6E9DC, #F1EADD);
  --gradient-home-card: linear-gradient(125deg, #D5DDC8, #F3EBD8 52%, #E3E6D5);
}

/* 雾面玻璃和纸张肌理：透明层不降低文字本身的透明度。 */
.screen { position: relative; isolation: isolate; background: var(--gradient-screen); }
.status-bar, .view, .bottom-bar { position: relative; z-index: 1; }
.status-bar { background: var(--glass-panel); }
.view { min-width: 0; }
.page-header { background: var(--glass-panel); border-bottom-color: var(--glass-edge); }
.character-card, .settings-card, .detail-fields { background: var(--glass-panel); border-color: var(--glass-edge); box-shadow: var(--glass-shadow); }
.home-panel { border: 1px solid var(--glass-edge); border-radius: var(--radius-xl); background: var(--glass-panel); box-shadow: var(--glass-shadow); }
@supports (backdrop-filter: blur(1px)) {
  .page-header, .home-panel, .status-bar, .character-card, .settings-card, .detail-fields, .theme-choice, .composer { backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); }
}

/* 首页：保留三枚应用入口，卡片按模块顺序在手机内部滚动。 */
.home-view { padding: 22px 20px var(--space-5); }
.home-view > * { flex-shrink: 0; }
.home-topline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.home-topline .eyebrow { font-size: 11px; letter-spacing: 1px; }
.home-theme-link { border: 1px solid var(--glass-edge); background: var(--glass-panel); border-radius: var(--radius-pill); padding: 5px 9px; font-size: 11px; }
.home-heading h1 { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; margin: 10px 0 7px; }
.brand-paw { font-size: 17px; color: var(--color-primary-ink); }
.home-heading p { line-height: 1.8; font-size: 12px; }
.dream-card { margin-top: 19px; min-height: 158px; padding: 22px 19px; border-color: var(--glass-edge); overflow: hidden; }
.dream-card p { font-size: 22px; line-height: 1.65; letter-spacing: 1px; margin: 9px 0 10px; }
.hero-stamp { position: relative; z-index: 1; font-size: 9px; letter-spacing: 2px; color: var(--color-primary-ink); }
.card-caption { font-size: 10px; letter-spacing: .5px; }
.card-moon { font-size: 100px; top: 0; right: 8px; opacity: .6; }
.card-star { font-size: 23px; right: 80px; top: 28px; color: var(--color-primary-ink); opacity: .65; }
.lace-card::after { content: ""; position: absolute; inset: 7px; border: 1px dashed rgb(255 255 255 / 90%); border-radius: 21px; pointer-events: none; }
.lace-card::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: radial-gradient(circle at 6px 0, transparent 5px, rgb(255 255 255 / 64%) 5.5px, rgb(255 255 255 / 64%) 6px, transparent 6.5px) 0 0 / 12px 10px repeat-x; pointer-events: none; }
.paper-cat { position: absolute; width: 65px; height: 57px; right: 19px; bottom: 22px; border-radius: 43% 43% 44% 44%; background: var(--color-surface); border: 1px solid var(--bubble-outline); transform: rotate(-7deg); box-shadow: var(--shadow-control); }
.paper-cat::before, .paper-cat::after { content: ""; position: absolute; top: -12px; width: 23px; height: 27px; border: 1px solid var(--bubble-outline); border-radius: 5px 80% 0 0; background: var(--color-surface); z-index: -1; }
.paper-cat::before { left: 1px; transform: rotate(-12deg); }
.paper-cat::after { right: 1px; transform: scaleX(-1) rotate(-12deg); }
.paper-cat i { display: block; position: absolute; left: 18px; top: 24px; width: 4px; height: 5px; border-radius: 50%; background: var(--color-text-caption); box-shadow: 22px 0 0 var(--color-text-caption); }
.paper-cat i::after { content: "ω"; position: absolute; top: 6px; left: 7px; font-size: 12px; font-style: normal; color: var(--color-primary-ink); }
.home-view .app-grid { margin-top: 20px; gap: 12px; }
.home-view .app-icon { width: 58px; height: 58px; border-radius: 20px; border-color: var(--glass-edge); box-shadow: var(--glass-shadow); background: var(--glass-panel); }
.app-entry { gap: 8px; }
.home-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 23px 0 12px; }
.home-section-heading h2 { margin: 0; font-size: 15px; font-weight: 600; }
.home-section-heading > span { color: var(--color-text-caption); font-size: 9px; }
.module-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.module-heading h3, .home-module h3, .music-panel h3, .motion-setting h3 { margin: 0; font-size: 13px; font-weight: 600; }
.module-heading > span, .tiny-label { color: var(--color-text-caption); font-size: 10px; }
.mood-panel, .quick-panel, .recent-panel { padding: 14px; margin-bottom: 12px; }
.mood-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.mood-options button { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; background: transparent; border: 1px solid transparent; border-radius: 13px; padding: 8px 2px; font-size: 10px; }
.mood-options button > span { font-size: 21px; }
.mood-options button[aria-pressed=true] { border-color: var(--bubble-outline); background: var(--glass-strong); box-shadow: var(--shadow-control); }
.module-feedback { color: var(--color-primary-ink); margin: 8px 0 0; font-size: 11px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.module-feedback:empty { display: none; }
.quick-panel .text-button { font-size: 10px; padding: 0; }
.quick-characters { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: thin; margin-top: 12px; padding-bottom: 2px; }
.quick-character { flex: 0 0 56px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; border: 0; background: transparent; padding: 2px; font-size: 11px; }
.quick-character > span:last-child { display: block; width: 54px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.quick-character .avatar { border: 1px solid var(--glass-edge); box-shadow: var(--shadow-control); }
.home-modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.home-module { position: relative; min-width: 0; padding: 15px 12px; text-align: left; overflow: hidden; }
.home-module p { font-size: 11px; line-height: 1.8; margin: 6px 0 10px; color: var(--color-text-caption); overflow-wrap: anywhere; }
.home-module .module-icon { display: block; font-size: 25px; color: var(--color-primary-ink); margin-bottom: 9px; }
.module-link { font-size: 9px; line-height: 1.8; color: var(--color-primary-ink); }
.theme-module { background: linear-gradient(135deg, var(--glass-strong), var(--color-primary-soft)); }
.world-module { background: linear-gradient(135deg, var(--glass-strong), var(--color-accent-soft)); }
.recent-conversation { display: flex; gap: 10px; align-items: center; width: 100%; border: 0; background: transparent; padding: 12px 0 0; text-align: left; }
.recent-copy { flex: 1; min-width: 0; }
.recent-copy strong { display: block; font-size: 12px; margin-bottom: 5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-copy > span { display: block; color: var(--color-text-caption); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.days-module { border-style: dashed; }
.days-number { display: block; font-size: 25px; font-weight: 500; letter-spacing: 1px; margin: 12px 0 9px; overflow-wrap: anywhere; }
.days-module p { font-size: 10px; margin-bottom: 0; }
.memo-module p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.music-panel { display: flex; align-items: center; gap: 12px; padding: 14px; }
.music-panel > div { flex: 1; min-width: 0; }
.music-panel p { margin: 5px 0 0; font-size: 10px; line-height: 1.7; color: var(--color-text-caption); }
.record-disc { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: repeating-radial-gradient(circle, var(--color-primary-soft) 0 3px, var(--glass-strong) 4px 5px); border: 1px solid var(--bubble-outline); color: var(--color-primary-ink); font-size: 20px; }
.music-bars { font-size: 15px; letter-spacing: 2px; color: var(--color-primary-ink); }
.home-view .home-note { margin: 20px 0; }
.home-view .dock { min-height: 50px; margin-top: 0; background: var(--glass-panel); border-color: var(--glass-edge); }

/* 装扮与笔记：都使用原来的 view 切换和手机内部滚动。 */
.decor-content { display: flex; flex-direction: column; gap: 16px; }
.decor-intro { margin: 0 0 5px; }
.decor-intro h3 { font-size: 19px; font-weight: 500; line-height: 1.7; margin: 9px 0; }
.decor-intro p { font-size: 12px; line-height: 1.9; color: var(--color-text-caption); margin: 0; }
.theme-options { display: flex; flex-direction: column; gap: 12px; }
.theme-choice { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1px solid var(--glass-edge); border-radius: 19px; background: var(--glass-panel); text-align: left; box-shadow: var(--glass-shadow); }
.theme-choice > span:nth-child(2) { min-width: 0; flex: 1; }
.theme-choice strong { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.theme-choice small { font-size: 11px; color: var(--color-text-caption); }
.theme-check { font-size: 15px; color: var(--color-primary-ink); visibility: hidden; }
.theme-choice[aria-pressed=true] { border-color: var(--bubble-outline); background: var(--glass-strong); }
.theme-choice[aria-pressed=true] .theme-check { visibility: visible; }
.theme-swatch { display: block; width: 55px; height: 60px; border-radius: 12px; border: 1px solid rgb(255 255 255 / 95%); box-shadow: inset 0 0 0 4px rgb(255 255 255 / 45%); }
.pearl-swatch { background: linear-gradient(135deg, #DAD2E2, #F5EDE8 50%, #DDCEDC); }
.rose-swatch { background: linear-gradient(135deg, #E4C8D6, #F8E8DE 50%, #E1C5D6); }
.tea-swatch { background: linear-gradient(135deg, #CEDABF, #F4E9D3 50%, #D8DECA); }
.motion-setting { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px; }
.motion-setting p { margin: 7px 0 0; font-size: 11px; line-height: 1.8; color: var(--color-text-caption); }
.motion-switch { position: relative; display: block; flex-shrink: 0; width: 42px; height: 25px; cursor: pointer; }
.motion-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.motion-switch > span:not(.sr-only) { position: absolute; inset: 0; background: var(--color-surface-soft); border: 1px solid var(--color-border); border-radius: 99px; }
.motion-switch > span:not(.sr-only)::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow-control); transition: transform .2s; }
.motion-switch input:checked + span { background: var(--color-primary); }
.motion-switch input:checked + span::after { transform: translateX(17px); }
.motion-switch input:focus-visible + span { outline: var(--focus-ring); outline-offset: 3px; }
#worldbook-text, #memo-text { background: repeating-linear-gradient(transparent 0 28px, var(--lace-ink) 28px 29px), var(--glass-strong); line-height: 29px; }

/* 聊天的三层背景：底色与柔和渐变 / 猫咪或蕾丝纹样 / 透明玻璃面板。 */
.conversation-view { position: relative; isolation: isolate; background: var(--gradient-chat); }
.conversation-view[data-mode=story] { background: var(--gradient-story); }
.conversation-view::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='130' viewBox='0 0 150 130'%3E%3Cg fill='none' stroke='%23857287' opacity='.17' stroke-width='1'%3E%3Cpath d='M28 34L27 23L37 29Q43 26 49 29L59 23L58 35C65 53 22 54 28 34Z'/%3E%3Cpath d='M37 38h1m10 0h1m-8 5q2 2 4 0M102 80v9m-4-4h8M114 101v5m-3-2h6'/%3E%3Ccircle cx='87' cy='28' r='1'/%3E%3Ccircle cx='34' cy='95' r='1'/%3E%3C/g%3E%3C/svg%3E"); }
.conversation-view[data-mode=story]::before { background-image: radial-gradient(circle at 50% 50%, transparent 21px, var(--lace-ink) 21.5px, transparent 22.5px), radial-gradient(circle at 50% 50%, transparent 29px, var(--lace-ink) 29.5px, transparent 30.5px), radial-gradient(circle at 0 0, var(--lace-ink) 1px, transparent 1.5px); background-size: 110px 110px, 110px 110px, 13px 13px; opacity: .6; }
.conversation-header { background: var(--glass-panel); }
.conversation-title h2 { font-size: 17px; }
.conversation-title span { font-size: 11px; }
.chat-toolbar { padding-top: 10px; padding-bottom: 5px; }
.mode-switch { border-color: var(--glass-edge); border-radius: 99px; background: rgb(255 255 255 / 40%); box-shadow: inset 0 1px 5px rgb(94 72 94 / 8%); padding: 4px; gap: 3px; }
.mode-switch button { border-radius: 99px; padding: 6px 18px; font-size: 12px; }
.mode-switch button[aria-pressed=true] { border-color: var(--glass-edge); background: var(--glass-strong); box-shadow: 0 3px 9px rgb(89 65 95 / 12%); }
.simulation-notice { font-size: 10px; margin-top: 5px; margin-bottom: 8px; }
.messages { padding-top: 17px; gap: 20px; }
.message-bubble { position: relative; isolation: isolate; margin-top: 7px; border-radius: 19px 19px 19px 8px; line-height: 1.9; padding: 13px 14px; }
.user .message-bubble { border-radius: 19px 19px 8px 19px; }
/* 耳朵和尾巴是纯装饰伪元素，不占用文本或拦截消息操作。 */
.message-bubble::before { content: ""; position: absolute; top: -9px; left: 13px; width: 34px; height: 14px; background: var(--color-ai-bubble); clip-path: polygon(0 100%, 0 0, 34% 65%, 66% 65%, 100% 0, 100% 100%); filter: drop-shadow(0 -1px 0 var(--color-border)); pointer-events: none; z-index: -1; }
.user .message-bubble::before { left: auto; right: 13px; background: var(--color-user-bubble); width: 29px; }
.message-bubble::after { content: ""; position: absolute; left: -8px; bottom: 8px; width: 10px; height: 15px; border: 2px solid var(--bubble-outline); border-right: 0; border-top-color: transparent; border-radius: 12px 0 0 12px; transform: rotate(-16deg); pointer-events: none; }
.user .message-bubble::after { left: auto; right: -8px; border: 2px solid var(--bubble-outline); border-left: 0; border-top-color: transparent; border-radius: 0 12px 12px 0; transform: rotate(16deg); }
.message-avatar { border: 1px solid var(--glass-edge); box-shadow: var(--shadow-control); }
.message time { font-size: 11px; color: var(--color-text-caption); margin-top: 7px; }
.message-actions button { background: rgb(255 255 255 / 32%); padding: 4px 7px; border-radius: 8px; }
.message-date { border: 1px solid var(--glass-edge); background: var(--glass-panel); color: var(--color-text-caption); }
.composer { margin: 5px 9px 0; padding: 6px; border: 1px solid var(--glass-edge); border-radius: 23px; background: var(--glass-panel); box-shadow: var(--glass-shadow); }
.composer textarea { border-color: transparent; background: var(--glass-strong); border-radius: 17px; font-size: 13px; }
.composer button { border: 1px solid var(--glass-edge); border-radius: 17px; min-width: 54px; padding-inline: 10px; background: linear-gradient(145deg, var(--color-primary-hover), var(--color-primary)); background-color: var(--color-primary); }
.composer-hint { font-size: 10px; margin-top: 5px; }
.message-editing { background: var(--glass-strong); }

/* 多数粒子沿边缘分布，中央只留少量光点；任何层都不接收点击。 */
.ambient-layer { position: absolute; inset: 48px 0 25px; z-index: 3; overflow: hidden; pointer-events: none; border-radius: inherit; container-type: size; }
.ambient-particle { position: absolute; top: -20px; width: var(--particle-size); height: var(--particle-size); border-radius: 50%; background: var(--particle-color); box-shadow: 0 0 8px var(--particle-glow); color: var(--ambient-ink, #AC87AA); opacity: 0; animation: drift-down var(--fall-duration) linear var(--fall-delay) infinite; }
.particle-star, .particle-heart, .particle-cat { background: none; box-shadow: none; border-radius: 0; font: var(--particle-size)/1 Georgia, serif; }
.particle-heart { color: #BB8D9F; }
.particle-cat svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.particle-light { background: #FFFEF5; box-shadow: 0 0 8px 2px rgb(232 207 191 / 60%); }
.particle-dot { background: #BDA5C6; }
.ambient-layer[hidden] .ambient-particle { animation-play-state: paused; }
@keyframes drift-down { 0% { transform: translate3d(0,-20px,0) rotate(-12deg); opacity: 0; } 10% { opacity: .64; } 82% { opacity: .38; } 100% { transform: translate3d(var(--fall-drift), var(--fall-distance,810px),0) rotate(25deg); opacity: 0; } }
@supports (height: 1cqh) { .ambient-particle { --fall-distance: calc(100cqh + 40px); } }
@media (max-width: 350px) { .home-view { padding-inline: 14px; } .home-section-heading > span { display: none; } .home-modules { gap: 8px; } .module-heading { flex-wrap: wrap; } .home-heading h1 { font-size: 28px; } .paper-cat { right: 12px; transform: scale(.85) rotate(-7deg); transform-origin: bottom right; } }
@media (max-height: 620px) { .conversation-header { padding-block: 7px; } .chat-toolbar { padding-top: 5px; } .simulation-notice { margin-block: 3px; } .composer-hint { margin-top: 2px; } }
@media (prefers-reduced-motion: reduce) { .ambient-layer { display: none !important; } .ambient-particle { animation: none !important; } }

/* 心情邮票：两排横向展开，固定卡宽让长文案也能完整阅读。 */
.home-mood-caption { display: block; margin-top: 11px; padding-left: 10px; border-left: 2px solid var(--color-primary); color: var(--color-primary-ink); font-size: 10px; line-height: 1.9; overflow-wrap: anywhere; }
.mood-panel .module-heading { flex-wrap: wrap; row-gap: 7px; }
.mood-options { grid-template-columns: none; grid-template-rows: repeat(2,auto); grid-auto-flow: column; grid-auto-columns: 107px; gap: 9px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--color-primary) transparent; padding: 3px 2px 10px; margin-top: 15px; }
.mood-options button { position: relative; align-items: flex-start; text-align: left; gap: 5px; padding: 12px 9px; border: 1px solid var(--glass-edge); background: linear-gradient(145deg,var(--glass-strong),var(--glass-panel)); border-radius: 18px; scroll-snap-align: start; transition: border-color .2s, background .2s, box-shadow .2s; }
.mood-options button > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 11px; font-size: 22px; color: var(--color-primary-ink); background: var(--color-primary-soft); }
.mood-options button strong { font-size: 12px; font-weight: 500; line-height: 1.8; }
.mood-options button small { font-size: 9px; color: var(--color-text-caption); line-height: 1.8; white-space: nowrap; }
.mood-options button[aria-pressed=true] { border-color: var(--color-primary); background: linear-gradient(145deg,var(--color-primary-soft),var(--glass-strong)); box-shadow: inset 0 0 0 1px var(--glass-edge),var(--shadow-control); }
.mood-options button[aria-pressed=true]::after { content: "✓"; position: absolute; right: 8px; top: 10px; font-size: 12px; color: var(--color-primary-ink); }