/* style.css */
/* imports: none */

/* ═══════════════════════════════════════ */
/* 【全局软萌主题变量】运行时由 core/theme.js 覆盖 */
/* ═══════════════════════════════════════ */

:root {
  --bg-main: #F9F4F4;
  --bg-light: #F3ECEE;
  --bg-primary: var(--bg-main);
  --bg-secondary: var(--bg-light);
  --bg-card: #FFFCFB;
  --surface: var(--bg-card);
  --surface-soft: color-mix(in srgb, var(--bg-card) 85%, transparent);
  --surface-glass: color-mix(in srgb, var(--bg-primary) 84%, transparent);
  --surface-muted: #F6EEF0;
  --surface-paper: #FFFBFA;
  --surface-charm: #F5DDE1;
  --bg-overlay: color-mix(in srgb, var(--text-primary) 22%, transparent);
  --accent: #D4889A;
  --accent-light: #F0D1D9;
  --accent-dark: #9A5560;
  --accent-strong: #C07080;
  --color-accent: var(--accent);
  --text-primary: #3A2D2F;
  --text-secondary: #8B7578;
  --text-hint: #C0A8AC;
  --text-soft: color-mix(in srgb, var(--text-primary) 68%, var(--text-secondary));
  --color-text: var(--text-primary);
  --color-success: #8FBCA0;
  --color-danger: #D98C8C;
  --color-warning: #C07080;
  --border-soft: #E8D0D8;
  --border-charm: color-mix(in srgb, var(--accent-dark) 20%, var(--bg-card));
  --icon-color: var(--icon-line-stable);
  --icon-tile-bg: var(--surface-paper);
  --icon-tile-alt-cool: color-mix(in srgb, var(--decor-blue) 40%, var(--bg-card));
  --icon-tile-alt-warm: color-mix(in srgb, var(--decor-pink) 44%, var(--bg-card));
  --icon-detail: var(--icon-line-stable);
  --icon-body-stable: color-mix(in srgb, var(--surface-paper) 82%, var(--decor-pink));
  --icon-line-stable: var(--accent-dark);
  --icon-layer-stable: color-mix(in srgb, var(--bg-card) 88%, var(--decor-pink));
  --icon-highlight-stable: color-mix(in srgb, var(--bg-card) 84%, white);
  --icon-charm-theme: color-mix(in srgb, var(--accent) 60%, var(--bg-card));
  --button-primary-bg: linear-gradient(180deg, var(--accent-light), var(--accent));
  --button-primary-text: #fff;
  --button-soft-bg: color-mix(in srgb, var(--surface-paper) 86%, var(--accent-light));
  --badge-bg: var(--accent-strong);
  --badge-text: #fff;
  --decoration-spot: var(--accent-dark);
  --illustration-line: var(--icon-detail);
  --illustration-fill: var(--surface-paper);
  --illustration-accent: var(--accent-light);
  --decor-blue: #D0DAE2;
  --decor-yellow: #F5E8D6;
  --decor-pink: #F0D1D9;
  --decor-green: #CFDCC8;
  --decor-lilac: #DDD4E6;
  --decor-cream: var(--bg-card);
  --media-ink: color-mix(in srgb, var(--text-primary) 76%, var(--bg-primary));
  --media-ink-deep: color-mix(in srgb, var(--text-primary) 88%, var(--bg-primary));
  --media-on-dark: var(--bg-card);
  --media-highlight: color-mix(in srgb, var(--decor-pink) 72%, var(--bg-card));
  --media-overlay-soft: color-mix(in srgb, var(--text-primary) 18%, transparent);
  --media-overlay: color-mix(in srgb, var(--text-primary) 36%, transparent);
  --bubble-user-bg: #F0D1D9;
  --bubble-user-text: #6A3A45;
  --bubble-ai-bg: var(--surface-paper);
  --bubble-ai-text: var(--text-primary);
  --bubble-radius: 22px;
  --bubble-radius-tail: 8px;
  --font-main: 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-base: 15px;
  --font-size-small: 13px;
  --font-size-title: 17px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-xl: 42px;
  --radius-full: 999px;
  --shadow-color: #9A5560;
  --shadow-sm: 0 2px 8px color-mix(in srgb, var(--shadow-color) 6%, transparent);
  --shadow-md: 0 6px 20px color-mix(in srgb, var(--shadow-color) 7%, transparent);
  --shadow-lg: 0 12px 36px color-mix(in srgb, var(--shadow-color) 8%, transparent);
  --shadow-card: 0 4px 14px color-mix(in srgb, var(--shadow-color) 5%, transparent);
  --shadow-float: 0 10px 28px color-mix(in srgb, var(--shadow-color) 8%, transparent);
  --inner-highlight: inset 0 0.5px 0 rgba(255,255,255,0.6);
  --toy-border: 1px solid color-mix(in srgb, var(--border-soft) 76%, transparent);
  --press-scale: .97;
  --motion: all 240ms cubic-bezier(.2,.8,.2,1);
  --chat-icon-line: var(--icon-detail);
  --chat-icon-paper: var(--surface-paper);
  --chat-icon-fill: var(--accent-light);
  --chat-icon-dot: var(--accent-dark);
  --chat-fold-card-bg: var(--surface-paper);
  --chat-fold-card-open-bg: color-mix(in srgb, var(--accent-light) 54%, var(--bg-card));
  --chat-fold-detail-bg: color-mix(in srgb, var(--bg-card) 76%, var(--surface-muted));
  --chat-fold-line: var(--accent-strong);
  --chat-fold-summary-color: var(--text-secondary);
  --chat-fold-title-color: var(--text-primary);
  --chat-fold-code-color: var(--text-secondary);
  --chat-fold-divider: color-mix(in srgb, var(--accent-light) 72%, transparent);
  --chat-tool-breath-shadow: var(--shadow-sm);
  --chat-tool-breath-shadow-strong: var(--shadow-md);
}

/* ═══════════════════════════════════════ */

html,
body {
  overflow: hidden;
  position: fixed;
  top: var(--app-viewport-top, 0px);
  right: 0;
  bottom: auto;
  left: 0;
  width: 100vw;
  height: 100dvh;
  height: var(--app-viewport-height, 100dvh);
  margin: 0;
  padding: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: var(--font-size-base);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body {
  user-select: none;
  -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

img,
svg,
canvas,
video {
  max-width: 100%;
  display: block;
}

button,
input,
textarea,
select {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  color: inherit;
  outline: transparent solid 2px;
  outline-offset: 2px;
}

button {
  cursor: pointer;
  background: none;
  padding: 0;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
.app-back:focus-visible,
.icon-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-light) 72%, transparent);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-light) 28%, transparent), var(--shadow-sm);
}

/* 触摸设备不要 focus 光圈 — 椭圆框来源就是这层 outline */
@media (pointer: coarse) {
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  [role="button"]:focus-visible,
  .app-back:focus-visible,
  .icon-button:focus-visible,
  .desktop-icon:focus-visible,
  .desktop-icon-art:focus-visible {
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
  }
  /* 桌面图标 focus 时不要摇晃 */
  .desktop-icon:focus-visible .cozy-app-icon {
    animation: none !important;
  }
}

button,
[role="button"],
.btn-primary,
.btn-ghost,
.icon-button,
.card-action,
.desktop-icon {
  transition: var(--motion);
}

button:active,
[role="button"]:active,
.btn-primary:active,
.btn-ghost:active,
.icon-button:active,
.card-action:active,
.desktop-icon:active {
  transform: scale(var(--press-scale));
}

input,
textarea,
select {
  background: none;
  min-width: 0;
  font-size: 16px;
  line-height: 1.6;
  transform: translateZ(0);
  user-select: text;
  -webkit-user-select: text;
  touch-action: manipulation;
}

input:focus,
textarea:focus,
select:focus {
  font-size: 16px;
}

textarea {
  resize: none;
  line-height: 1.6;
}

@supports (-webkit-touch-callout: none) {
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}

a {
  color: inherit;
  text-decoration: none;
}

.hidden {
  display: none !important;
}

.is-muted {
  color: var(--text-secondary);
}

.is-hint {
  color: var(--text-hint);
}
/* ═══════════════════════════════════════ */
/* 【布局】应用壳 / 导航栏 / 内容区 */
/* ═══════════════════════════════════════ */

.app-screen {
  position: fixed;
  top: var(--app-viewport-top, 0px);
  right: 0;
  bottom: auto;
  left: 0;
  height: 100dvh;
  height: var(--app-viewport-height, 100dvh);
  z-index: 10;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary);
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: calc(56px + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: env(safe-area-inset-top) 20px 0;
  background: var(--surface-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.nav-title {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-title);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-subtitle {
  margin-top: 2px;
  font-size: var(--font-size-small);
  font-weight: 400;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-area {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: calc(56px + env(safe-area-inset-top) + var(--spacing-md)) 20px calc(88px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

.content-narrow {
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}

.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ═══════════════════════════════════════ */
/* 【组件】卡片 / 卡片堆叠 / 操作行 */
/* ═══════════════════════════════════════ */

.card,
.section-card,
.form-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card {
  padding: var(--spacing-md);
}

.card-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.card-title {
  font-size: var(--font-size-title);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}

.card-text {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--text-soft);
}

.card-action {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  width: 100%;
  padding: 0 var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════ */
/* 【组件】按钮 */
/* ═══════════════════════════════════════ */

.btn-primary {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--bubble-user-text);
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1;
  box-shadow: var(--shadow-sm);
}

.btn-primary.subtle {
  background: var(--accent-light);
  color: var(--accent-dark);
}

.btn-ghost {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  background: transparent;
}

.btn-ghost.is-active {
  color: var(--accent-dark);
  background: var(--accent-light);
}

.icon-button {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  background: transparent;
}

.icon-button.soft {
  background: var(--surface-muted);
}

.icon-button.accent {
  color: var(--bubble-user-text);
  background: var(--accent);
}

/* ═══════════════════════════════════════ */
/* 【组件】底部抽屉 */
/* ═══════════════════════════════════════ */

.sheet-overlay {
  position: fixed;
  top: var(--app-viewport-top, 0px);
  right: 0;
  bottom: auto;
  left: 0;
  height: var(--app-viewport-height, 100dvh);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  background: var(--bg-overlay);
  transition: var(--motion);
}

.sheet-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.bottom-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  max-height: var(--app-viewport-height, 82dvh);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 20px calc(var(--spacing-lg) + env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
  transform: translateY(100%);
  transition: var(--motion);
  -webkit-overflow-scrolling: touch;
}

.bottom-sheet.open {
  transform: translateY(0);
}

.sheet-handle {
  width: 40px;
  height: 5px;
  margin: 0 auto var(--spacing-lg);
  border-radius: 99px;
  background: var(--bg-secondary);
}

.sheet-title {
  margin-bottom: var(--spacing-md);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.sheet-description {
  margin: calc(var(--spacing-sm) * -1) 0 var(--spacing-lg);
  color: var(--text-secondary);
  font-size: var(--font-size-small);
}

/* ═══════════════════════════════════════ */
/* 【组件】Toast 提示 */
/* ═══════════════════════════════════════ */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 300;
  max-width: calc(100vw - 40px);
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--text-primary);
  color: var(--bg-card);
  box-shadow: var(--shadow-md);
  font-size: var(--font-size-small);
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  transition: var(--motion);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════ */
/* 【组件】折叠面板 / Section */
/* ═══════════════════════════════════════ */

.section-card {
  overflow: hidden;
}

.section-header {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  width: 100%;
  padding: 0 var(--spacing-md);
  cursor: pointer;
}

.section-title {
  font-size: var(--font-size-title);
  font-weight: 600;
  line-height: 1.35;
}

.section-meta {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: var(--font-size-small);
  line-height: 1.4;
}

.section-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: var(--motion);
}

.section-content.open {
  max-height: 72dvh;
  opacity: 1;
  transform: translateY(0);
}

.section-body {
  padding: 0 var(--spacing-md) var(--spacing-md);
}

/* ═══════════════════════════════════════ */
/* 【组件】表单 */
/* ═══════════════════════════════════════ */

.form-card {
  padding: var(--spacing-sm);
}

.form-row {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: 8px;
  border-radius: var(--radius-md);
}

.form-row + .form-row {
  margin-top: var(--spacing-xs);
}

.form-label {
  flex: 0 0 auto;
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

.form-note {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: var(--font-size-small);
  line-height: 1.45;
}

.form-control {
  flex: 1;
  min-width: 0;
  text-align: right;
  color: var(--text-secondary);
}

.input-card {
  width: 100%;
  min-height: 46px;
  padding: 10px var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--text-primary);
  font-size: 16px;
}

.input-card::placeholder {
  color: var(--text-hint);
}

.textarea-card {
  width: 100%;
  min-height: 128px;
  padding: 12px var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--text-primary);
  font-size: 16px;
}

.field-label {
  display: block;
  margin: 0 0 var(--spacing-sm);
  color: var(--text-secondary);
  font-size: var(--font-size-small);
  line-height: 1.4;
}

/* ═══════════════════════════════════════ */
/* 【组件】列表 / 网格 / 空状态 */
/* ═══════════════════════════════════════ */

.list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-lg) var(--spacing-md);
}

.empty-state {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  color: var(--text-secondary);
  text-align: center;
}

.empty-state-title {
  color: var(--text-primary);
  font-size: var(--font-size-title);
  font-weight: 600;
}

.empty-state-text {
  max-width: 260px;
  font-size: var(--font-size-small);
  line-height: 1.6;
}

/* ═══════════════════════════════════════ */
/* 【组件】角标 / 头像 / 分割线 */
/* ═══════════════════════════════════════ */

.badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent-dark);
  color: var(--bubble-user-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  box-shadow: var(--shadow-sm);
}

.avatar {
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-sm);
}

.avatar.sm {
  width: 32px;
  height: 32px;
}

.avatar.md {
  width: 44px;
  height: 44px;
}

.avatar.lg {
  width: 72px;
  height: 72px;
}

.divider {
  height: 8px;
}

/* ═══════════════════════════════════════ */
/* 【组件】开关 / 分段选择器 */
/* ═══════════════════════════════════════ */

.switch {
  position: relative;
  width: 46px;
  height: 28px;
  flex: 0 0 46px;
  border-radius: 999px;
  background: var(--bg-secondary);
  transition: var(--motion);
}

.switch::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transition: var(--motion);
}

.switch.active {
  background: var(--accent);
}

.switch.active::after {
  transform: translateX(18px);
}

.segmented {
  display: flex;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

.segmented button {
  flex: 1;
  min-height: 34px;
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: var(--font-size-small);
  font-weight: 500;
}

.segmented button.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}
/* ═══════════════════════════════════════ */
/* 【桌面】页面 / 图标网格 / Dock */
/* ═══════════════════════════════════════ */

.desktop-page {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.desktop-grid {
  position: relative;
  width: 100%;
  height: 100%;
  padding: var(--spacing-md) 20px;
}

.desktop-icon {
  position: relative;
  width: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-primary);
}

.desktop-icon-art {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: var(--surface-soft);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.desktop-icon-name {
  width: 78px;
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desktop-delete-dot {
  position: absolute;
  top: -5px;
  right: 4px;
  width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-dark);
  color: var(--bubble-user-text);
  box-shadow: var(--shadow-sm);
}

.desktop-icon.editing .desktop-delete-dot {
  display: flex;
}

.dock {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 8;
  min-height: 76px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-items: center;
  padding: 10px 14px;
  border-radius: 28px;
  background: var(--surface-soft);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.page-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

.page-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--text-hint);
  transition: var(--motion);
}

.page-dot.active {
  width: 18px;
  background: var(--accent);
}

/* ═══════════════════════════════════════ */
/* 【聊天】消息列表 / 气泡 */
/* ═══════════════════════════════════════ */

.message-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.message-row {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-sm);
}

.message-row.user {
  justify-content: flex-end;
}

.message-row.assistant {
  justify-content: flex-start;
}

.message-bubble {
  max-width: min(76vw, 520px);
  padding: 10px 14px;
  font-size: var(--font-size-base);
  line-height: 1.6;
  word-break: break-word;
  box-shadow: var(--shadow-sm);
}

.message-row.user .message-bubble {
  border-radius: var(--bubble-radius) var(--bubble-radius-tail) var(--bubble-radius) var(--bubble-radius);
  background: var(--bubble-user-bg);
  color: var(--bubble-user-text);
}

.message-row.assistant .message-bubble {
  border-radius: var(--bubble-radius-tail) var(--bubble-radius) var(--bubble-radius) var(--bubble-radius);
  background: var(--bubble-ai-bg);
  color: var(--bubble-ai-text);
}

.message-name {
  margin: 0 0 4px 4px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.3;
}

/* ═══════════════════════════════════════ */
/* 【聊天】思维链 / 工具调用折叠卡片 */
/* ═══════════════════════════════════════ */

.chat-reasoning-stack {
  width: min(100%, 310px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 2px 0 1px;
}

.chat-message-row.mode-dialog .chat-reasoning-stack {
  width: min(100%, 360px);
}

.chat-fold-card {
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: var(--chat-fold-card-bg);
  box-shadow: var(--shadow-sm);
  transform: translateZ(0);
  transition: var(--motion);
}

.chat-fold-card[data-open="true"] {
  background: var(--chat-fold-card-open-bg);
}

.chat-fold-toggle {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: transparent;
  color: var(--chat-fold-summary-color);
  font: inherit;
  text-align: left;
  transition: var(--motion);
}

.chat-fold-toggle:active {
  transform: scale(0.98);
}

.chat-fold-left {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-fold-left svg {
  flex: 0 0 auto;
  color: var(--chat-fold-line);
}

.chat-fold-summary,
.chat-tool-name,
.chat-tool-status-text {
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-fold-summary {
  color: var(--chat-fold-summary-color);
}

.chat-tool-name {
  flex: 0 0 auto;
  max-width: 96px;
  color: var(--chat-fold-title-color);
  font-weight: 600;
}

.chat-tool-status-text {
  color: var(--chat-fold-summary-color);
}

.chat-fold-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-hint);
  transition: transform 200ms ease;
}

.chat-fold-card[data-open="true"] .chat-fold-arrow {
  transform: rotate(90deg);
}

.chat-fold-detail {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 300ms ease, opacity 220ms ease;
}

.chat-fold-card[data-open="true"] .chat-fold-detail {
  max-height: 420px;
  opacity: 1;
}

.chat-fold-detail-inner {
  margin: 0 10px 10px;
  padding: 10px;
  border-radius: 14px;
  background: var(--chat-fold-detail-bg);
}

.chat-fold-detail-inner.thinking {
  margin-top: 8px;
}

.chat-thinking-detail {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 8px;
  min-width: 0;
}

.chat-thinking-line {
  width: 2px;
  min-height: 100%;
  border-radius: 999px;
  background: var(--chat-fold-line);
}

.chat-thinking-pre,
.chat-tool-pre {
  margin: 0;
  color: var(--chat-fold-code-color);
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-tool-detail {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.chat-tool-block {
  position: relative;
  padding: 0 0 10px;
  margin: 0 0 10px;
}

.chat-tool-block::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--chat-fold-divider);
  opacity: 0.78;
}

.chat-tool-block:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.chat-tool-block:last-child::after {
  display: none;
}

.chat-tool-label {
  margin-bottom: 6px;
  color: var(--chat-fold-title-color);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.chat-tool-status-mark {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--chat-fold-line);
}

.chat-tool-status-mark.running {
  border-radius: 999px;
  background: var(--chat-fold-line);
  animation: chatToolBreath 1300ms ease-in-out infinite;
}

.chat-tool-status-mark.done svg,
.chat-tool-status-mark.error svg {
  width: 12px;
  height: 12px;
}

.chat-tool-card.status-running {
  animation: chatSoftPulse 1800ms ease-in-out infinite;
}

/* ═══════════════════════════════════════ */
/* 【聊天】Thinking 卡片 / 代码块 */
/* ═══════════════════════════════════════ */

.thinking-card {
  margin-bottom: var(--spacing-sm);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: var(--font-size-small);
  font-style: italic;
  line-height: 1.6;
}

.code-block {
  position: relative;
  max-height: 128px;
  overflow: hidden;
  margin: var(--spacing-sm) 0;
  padding: 36px 12px 12px;
  border-radius: var(--radius-md);
  background: var(--text-primary);
  color: var(--bg-card);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
}

.code-block.expanded {
  max-height: none;
}

.code-block-label {
  position: absolute;
  top: 10px;
  left: 12px;
  color: var(--text-hint);
  font-size: 11px;
}

.code-block-copy {
  position: absolute;
  top: 7px;
  right: 8px;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 10px;
  color: var(--bg-card);
  background: color-mix(in srgb, var(--bg-card) 12%, transparent);
  font-size: 11px;
}

/* ═══════════════════════════════════════ */
/* 【组件】打字动画 */
/* ═══════════════════════════════════════ */

.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
}

.typing-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-hint);
  animation: typing-dot 900ms ease-in-out infinite;
}

.typing-dots span:nth-child(2) {
  animation-delay: 120ms;
}

.typing-dots span:nth-child(3) {
  animation-delay: 240ms;
}

/* ═══════════════════════════════════════ */
/* 【组件】安装提示 */
/* ═══════════════════════════════════════ */

.install-tip {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 260;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
}

.install-tip p {
  flex: 1;
  margin: 0;
  color: var(--text-soft);
  font-size: var(--font-size-small);
  line-height: 1.6;
}

/* ═══════════════════════════════════════ */
/* 【组件】引导弹窗 / 对话框 */
/* ═══════════════════════════════════════ */

.guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg-overlay);
}

.guide-card {
  width: min(100%, 420px);
  padding: var(--spacing-lg);
  border-radius: 28px;
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
}

.guide-title {
  margin: 0 0 var(--spacing-sm);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.guide-text {
  margin: 0 0 var(--spacing-lg);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: 1.7;
}

/* ═══════════════════════════════════════ */
/* 【动画】按键帧 */
/* ═══════════════════════════════════════ */

@keyframes typing-dot {
  0%,
  70%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  35% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

@keyframes icon-wiggle {
  0%,
  100% {
    transform: rotate(-1.2deg);
  }
  50% {
    transform: rotate(1.2deg);
  }
}

@keyframes soft-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.72;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes chatToolBreath {
  0%,
  100% {
    opacity: 0.42;
    transform: scale(0.82);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes chatSoftPulse {
  0%,
  100% {
    box-shadow: var(--chat-tool-breath-shadow);
  }
  50% {
    box-shadow: var(--chat-tool-breath-shadow-strong);
  }
}

.edit-wiggle {
  animation: icon-wiggle 180ms ease-in-out infinite;
}

.soft-pulse {
  animation: soft-pulse 1600ms ease-in-out infinite;
}

/* ═══════════════════════════════════════ */
/* 【辅助】减少动画偏好 */
/* ═══════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* 依赖：无 */

/* ═══════════════════════════════════════ */
/* 【软萌视觉语言】全应用统一的奶油卡片与手账触感 */
/* ═══════════════════════════════════════ */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .34;
  background-image:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--accent-light) 52%, transparent) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--decor-yellow) 44%, transparent) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 78%, color-mix(in srgb, var(--decor-blue) 42%, transparent) 0 1px, transparent 2px);
  background-size: 38px 38px, 52px 52px, 31px 31px;
}

.app-screen,
.app-content,
.screen,
.page {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.app-header,
.nav-bar,
.top-bar,
.toolbar {
  background: color-mix(in srgb, var(--bg-primary) 94%, var(--bg-card));
  border-bottom-color: color-mix(in srgb, var(--border-soft) 60%, transparent);
  box-shadow: none;
}

.app-title,
.nav-title,
.section-title,
.card-title {
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: .03em;
}

.card,
.list-item,
.setting-item,
.form-group,
.section-card,
.empty-state {
  border: 1px solid color-mix(in srgb, var(--border-soft) 72%, transparent);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.card-action,
.list-row,
.setting-row {
  min-height: 54px;
  border-radius: var(--radius-md);
}

.card-action + .card-action,
.list-row + .list-row,
.setting-row + .setting-row {
  border-top-color: color-mix(in srgb, var(--border-soft) 58%, transparent);
}

button,
.btn-primary,
.btn-ghost,
.icon-button,
.app-back {
  border-radius: var(--radius-full);
}

.btn-primary {
  background: var(--accent);
  color: var(--bubble-user-text);
  border-color: transparent;
  box-shadow: none;
  font-weight: 700;
}

.btn-ghost,
.icon-button,
.app-back {
  background: var(--accent-light);
  color: var(--icon-color);
  border-color: transparent;
  box-shadow: none;
}

input,
textarea,
select,
.input,
.form-input {
  border: 1px solid color-mix(in srgb, var(--border-soft) 76%, transparent);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--text-primary);
  box-shadow: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-hint);
}

.badge,
.tag,
.chip,
.pill {
  border: 0;
  border-radius: var(--radius-full);
  background: var(--accent-light);
  color: var(--accent-dark);
}

.bottom-sheet,
.sheet-panel,
.modal,
.dialog,
.install-prompt,
.guide-dialog {
  border: 1px solid color-mix(in srgb, var(--border-soft) 70%, transparent);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--bg-card);
  box-shadow: var(--shadow-float);
}

.avatar,
.avatar img {
  border-radius: 42% 48% 44% 50%;
}

.avatar {
  padding: 3px;
  background: var(--accent-light);
  color: var(--icon-color);
}

svg {
  color: var(--icon-color);
  overflow: visible;
  transition: transform 180ms ease, color 180ms ease;
}

.toggle,
.switch {
  background: var(--bg-secondary);
  border-color: var(--border-soft);
}

.toggle.is-on,
.switch.is-on,
input:checked + .toggle,
input:checked + .switch {
  background: var(--accent);
}

.toast {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
}

.message-bubble,
.chat-bubble {
  border: 1px solid color-mix(in srgb, var(--border-soft) 55%, transparent);
  box-shadow: none;
}

.desktop-icon-art {
  border: 1px solid color-mix(in srgb, var(--border-soft) 72%, transparent);
  border-radius: 34% 42% 36% 44%;
  background: var(--icon-tile-bg);
  color: var(--icon-color);
  box-shadow: none;
}

.desktop-icon-art:not(.has-custom-image):has(.cozy-app-icon) {
  background: var(--icon-tile-bg);
  box-shadow: none;
}

.desktop-icon:nth-child(3n + 2) .desktop-icon-art {
  background: var(--icon-tile-alt-cool);
}

.desktop-icon:nth-child(3n) .desktop-icon-art {
  background: var(--icon-tile-alt-warm);
}

.dock {
  border: 1px solid color-mix(in srgb, var(--border-soft) 68%, transparent);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--bg-card) 94%, transparent);
  box-shadow: none;
}


@media (prefers-reduced-motion: no-preference) {
  .desktop-icon-art,
  .empty-state svg,
  .placeholder-icon svg {
    animation: soft-breathe 4.8s ease-in-out infinite;
  }

  .desktop-icon:nth-child(2n) .desktop-icon-art { animation-delay: -2.1s; }
}

@keyframes soft-breathe {
  0%, 100% { transform: translateY(0) rotate(-.4deg); }
  50% { transform: translateY(-3px) rotate(.4deg); }
}

/* ═══════════════════════════════════════ */
/* 【全局黄系小玩具视觉层】 */
/* ═══════════════════════════════════════ */

body {
  background:
    radial-gradient(circle at 12% 9%, color-mix(in srgb, var(--accent-light) 38%, transparent) 0 120px, transparent 260px),
    radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--decor-pink) 24%, transparent) 0 92px, transparent 240px),
    linear-gradient(180deg, var(--bg-primary), color-mix(in srgb, var(--bg-primary) 84%, var(--bg-secondary)));
}

.app-screen,
.phone-desktop {
  background: linear-gradient(180deg, var(--bg-primary), color-mix(in srgb, var(--bg-primary) 88%, var(--bg-secondary)));
}

.nav-bar,
.bottom-bar,
.bottom-sheet,
.card,
.section-card,
.form-card,
.card-action,
.empty-state,
.chat-message-bubble,
.message-bubble,
.input-card,
.textarea-card,
.chat-thread-input,
.chat-call-input,
.chat-quote-preview,
.chat-message-quote,
.chat-message-code,
.chat-game-card {
  border: var(--toy-border);
  box-shadow: var(--shadow-card);
}

.nav-bar,
.bottom-bar,
.chat-thread-header,
.chat-thread-input-bar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 88%, transparent), color-mix(in srgb, var(--bg-primary) 78%, transparent));
  border-bottom: 1px solid color-mix(in srgb, var(--border-soft) 46%, transparent);
}

.bottom-bar,
.chat-thread-input-bar {
  border-top: 1px solid color-mix(in srgb, var(--border-soft) 54%, transparent);
  border-bottom: 0;
}

.card,
.section-card,
.form-card,
.bottom-sheet,
.empty-state {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--bg-card) 96%, transparent), color-mix(in srgb, var(--surface-muted) 42%, var(--bg-card)));
}

.card-title,
.section-title,
.sheet-title,
.nav-title {
  letter-spacing: .01em;
}

.card::before,
.section-card::before,
.form-card::before,
.empty-state::before,
.chat-fold-card::before,
.chat-sub-agent-card::before {
  content: "";
  position: absolute;
  width: 28px;
  height: 16px;
  right: 16px;
  top: 10px;
  pointer-events: none;
  opacity: .28;
  background:
    radial-gradient(circle at 4px 8px, var(--accent-dark) 0 2px, transparent 2.6px),
    radial-gradient(circle at 12px 4px, var(--accent-dark) 0 2px, transparent 2.6px),
    radial-gradient(circle at 20px 8px, var(--accent-dark) 0 2px, transparent 2.6px),
    radial-gradient(ellipse at 12px 12px, var(--accent-dark) 0 5px, transparent 5.6px);
}

.card,
.section-card,
.form-card,
.empty-state,
.chat-fold-card,
.chat-sub-agent-card {
  position: relative;
}

.btn-primary,
.icon-button.accent,
.chat-edit-btn.primary,
.chat-call-send,
.chat-call-control.primary,
.chat-call-control.danger {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  border: 1px solid color-mix(in srgb, var(--accent-dark) 24%, transparent);
  box-shadow: var(--shadow-sm);
}

.btn-ghost,
.icon-button,
.icon-button.soft,
.chat-action-sheet-item,
.chat-edit-btn,
.chat-thread-sheet-item,
.chat-thread-tool-page-btn,
.chat-message-action-btn,
.chat-message-code-action,
.chat-message-code-toggle,
.segmented,
.switch,
.badge {
  border: var(--toy-border);
  box-shadow: var(--shadow-sm);
}

.btn-ghost,
.icon-button.soft,
.chat-action-sheet-item,
.chat-edit-btn,
.chat-thread-sheet-item,
.chat-thread-tool-page-btn,
.chat-message-action-btn,
.chat-message-code-action,
.chat-message-code-toggle {
  background: var(--button-soft-bg);
}

.input-card,
.textarea-card,
.chat-thread-input,
.chat-call-input {
  background: color-mix(in srgb, var(--bg-card) 78%, var(--surface-muted));
}

.badge,
.page-dot.active,
.chat-thread-tool-dot[data-active="true"] {
  background: var(--badge-bg);
}

.toast {
  background: color-mix(in srgb, var(--text-primary) 86%, var(--accent-dark));
  color: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--accent-light) 34%, transparent);
}

.switch::after {
  background:
    radial-gradient(circle at 50% 48%, var(--accent-light) 0 3px, transparent 3.6px),
    var(--bg-card);
}

.switch.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--decor-green) 64%, var(--bg-card)), var(--accent-light));
}

.chat-kawaii-icon .paper { fill: var(--chat-icon-paper); }
.chat-kawaii-icon .fill { fill: var(--chat-icon-fill); stroke: var(--chat-icon-line); }
.chat-kawaii-icon .dot { fill: var(--chat-icon-dot); stroke: none; }

@keyframes charmFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.desktop-icon:hover .desktop-icon-art,
.chat-thread-tool-card:hover .chat-thread-tool-icon,
.icon-button:hover svg {
  animation: charmFloat 1.8s ease-in-out infinite;
}

/* ═══════════════════════════════════════ */
/* ═══════════════════════════════════════ */
/* 夜间模式：软萌小玩具，不要 3D 立体感 */
/* ═══════════════════════════════════════ */

/* 1. 抹掉内高光 —— 塑料球体感的来源 */
:root[data-theme="cocoa-night"] *, :root[data-theme="teddy-nest"] *, :root[data-theme="blueberry-moon"] * {
  --inner-highlight: none !important;
}

/* 2. 夜间不用多层光晕装饰叠层 */
:root[data-theme="cocoa-night"] :is(.desktop-soft-layer, .settings-soft-layer, .chat-soft-layer), :root[data-theme="teddy-nest"] :is(.desktop-soft-layer, .settings-soft-layer, .chat-soft-layer), :root[data-theme="blueberry-moon"] :is(.desktop-soft-layer, .settings-soft-layer, .chat-soft-layer) {
  background: none !important;
  opacity: 0 !important;
}

/* 3. 卡片/组件：极淡同色投影，不做立体凸起 */
:root[data-theme="cocoa-night"] :is(.settings-card, .desktop-widget, .desktop-icon-art, .theme-center-card, .card, .section-card, .form-card, .bottom-sheet, .chat-message-bubble), :root[data-theme="teddy-nest"] :is(.settings-card, .desktop-widget, .desktop-icon-art, .theme-center-card, .card, .section-card, .form-card, .bottom-sheet, .chat-message-bubble), :root[data-theme="blueberry-moon"] :is(.settings-card, .desktop-widget, .desktop-icon-art, .theme-center-card, .card, .section-card, .form-card, .bottom-sheet, .chat-message-bubble) {
  box-shadow: 0 2px 10px color-mix(in srgb, var(--shadow-color) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border-soft) 52%, transparent);
}

/* 4. 大圆角 —— 小玩具的圆润感 */
:root[data-theme="cocoa-night"] :is(.settings-card, .card, .section-card, .form-card, .theme-center-card), :root[data-theme="teddy-nest"] :is(.settings-card, .card, .section-card, .form-card, .theme-center-card), :root[data-theme="blueberry-moon"] :is(.settings-card, .card, .section-card, .form-card, .theme-center-card) {
  border-radius: 22px !important;
}

:root[data-theme="cocoa-night"] .desktop-widget, :root[data-theme="teddy-nest"] .desktop-widget, :root[data-theme="blueberry-moon"] .desktop-widget {
  border-radius: 26px !important;
}

:root[data-theme="cocoa-night"] .desktop-icon-art, :root[data-theme="teddy-nest"] .desktop-icon-art, :root[data-theme="blueberry-moon"] .desktop-icon-art {
  border-radius: 24px !important;
}

/* 【全应用软萌组件层】所有内置 App 共用，不介入业务结构 */
/* ═══════════════════════════════════════ */

#app-layer {
  top: var(--app-viewport-top, 0px);
  bottom: auto;
  height: var(--app-viewport-height, 100dvh);
  transform: translateZ(0);
  --app-cute-surface: color-mix(in srgb, var(--bg-card) 94%, transparent);
  --app-cute-surface-soft: color-mix(in srgb, var(--accent-light) 42%, var(--bg-card));
  --app-cute-surface-mini: color-mix(in srgb, var(--bg-card) 76%, var(--accent-light));
  --app-cute-line: color-mix(in srgb, var(--border-soft) 78%, transparent);
}

#app-layer > * {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.phone-desktop.has-image .desktop-soft-layer {
  display: none;
}

/* 每个 App 的导航都使用同一组柔软卡片和猫耳轮廓。 */
#app-layer :is([class$="-nav"], [class$="-topbar"], .app-topbar) {
  position: relative;
  border-bottom: 1px solid var(--app-cute-line);
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  box-shadow: none;
}

#app-layer :is([class$="-nav"], [class$="-topbar"], .app-topbar)::before,
#app-layer :is([class$="-nav"], [class$="-topbar"], .app-topbar)::after {
  content: '';
  position: absolute;
  bottom: -1px;
  width: 13px;
  height: 13px;
  border: 1px solid var(--app-cute-line);
  border-bottom: 0;
  background: var(--accent-light);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

#app-layer :is([class$="-nav"], [class$="-topbar"], .app-topbar)::before { left: 18px; }
#app-layer :is([class$="-nav"], [class$="-topbar"], .app-topbar)::after { right: 18px; }

/* 各 App 自有卡片仍保留内容和布局，只统一材质、圆角与层次。 */
#app-layer :is(
  [class$="-card"], .settings-card, .character-card, .placeholder-card,
  .tts-settings-section, .wallet-section, .ann-section, .dg-section
) {
  border: 1px solid var(--app-cute-line);
  border-radius: 30px 34px 28px 36px;
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--accent-light) 52%, transparent), transparent 22%),
    var(--app-cute-surface);
  box-shadow: none;
}

#app-layer :is(
  input:not([type="checkbox"]):not([type="radio"]), textarea, select,
  .input-card, .textarea-card, .chat-input-card,
  [class$="-field"]
) {
  border: 1px solid var(--app-cute-line) !important;
  border-radius: var(--radius-md);
  background: var(--app-cute-surface-soft);
  color: var(--text-primary);
  box-shadow: none;
}

#app-layer :is(
  button[class*="btn"], .icon-button, .settings-nav-item,
  .app-back, [role="button"][class*="button"]
) {
  border: 1px solid var(--app-cute-line) !important;
  border-radius: var(--radius-full);
  background: var(--app-cute-surface-soft);
  color: var(--icon-color);
  box-shadow: none;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), background 180ms ease, color 180ms ease;
}

#app-layer :is(
  button[class*="btn"], .icon-button, .settings-nav-item,
  .app-back, [role="button"][class*="button"]
):active {
  transform: scale(var(--press-scale));
}

#app-layer :is(
  .btn-primary, [class$="-primary"], [class$="-save-btn"],
  [class$="-submit-btn"], [class$="-buy-btn"]
) {
  background: var(--accent);
  color: var(--bubble-user-text);
}

/* 小卡片：列表项和紧凑信息块使用更轻的奶油材质，不改变原有排版。 */
#app-layer :is(
  [class$="-item"], [class$="-mini"], [class$="-compact"]
) {
  border: 1px solid var(--app-cute-line);
  border-radius: 22px 25px 20px 27px;
  background:
    radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--decor-pink) 44%, transparent), transparent 24%),
    var(--app-cute-surface);
  box-shadow: none;
}

/* 小胶囊：标签、状态、筛选项及徽章统一为带柔和高光的主题胶囊。 */
#app-layer :is(
  [class$="-chip"], [class$="-pill"], [class$="-tag"], [class$="-badge"]
) {
  border: 1px solid var(--app-cute-line);
  border-radius: var(--radius-full);
  background:
    radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--bg-card) 80%, transparent) 0 2px, transparent 3px),
    var(--app-cute-surface-mini);
  color: var(--text-secondary);
  box-shadow: none;
  font-weight: 650;
}

#app-layer :is(
  [class$="-chip"], [class$="-pill"], [class$="-tag"], [class$="-badge"]
):is(.active, .is-active, [aria-selected="true"], [aria-pressed="true"]) {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--border-soft));
  background: var(--accent);
  color: var(--bubble-user-text);
}

/* mini/small 操作保持紧凑尺寸，增加蝴蝶结般的双侧柔软弧面。 */
#app-layer :is(button, [role="button"]):is([class*="mini-btn"], [class*="small-btn"]) {
  border: 1px solid var(--app-cute-line) !important;
  border-radius: var(--radius-full);
  background: var(--app-cute-surface-mini);
  color: var(--icon-color);
  box-shadow: none;
}

#app-layer :is(button, [role="button"]):is([class*="mini-btn"], [class*="small-btn"]) > svg {
  width: 18px;
  height: 18px;
}

#app-layer :is([class$="-empty"], .empty-state) {
  border: 1px dashed var(--app-cute-line);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--bg-card) 72%, transparent);
}

#app-layer :is([class$="-empty-icon"], .empty-state svg, .placeholder-icon) {
  border-radius: 42% 48% 44% 50%;
  background: var(--app-cute-surface-soft);
  color: var(--icon-color);
  box-shadow: none;
}

#app-layer :is([class$="-empty-icon"], .empty-state svg, .placeholder-icon) svg,
#app-layer :is(button, [role="button"]) > svg {
  width: max(1.35em, 22px);
  height: max(1.35em, 22px);
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  #app-layer *,
  #app-layer *::before,
  #app-layer *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}



/* 桌面 APP 图标：双层纯色（深线条层 + 浅填充层），无描边。
   两个色槽由 core/theme.js 的 --app-icon-ink / --app-icon-fill 推导，跟随换肤。 */
.cozy-app-icon {
  overflow: visible;
}

.cozy-app-icon g {
  fill: none;
  stroke: none;
}


/* 默认隐藏 SVG 外框，由公共软萌主题变量统一打开。 */
/* ═══════════════════════════════════════ */
/* 【公共软萌主题补齐层】只重绘视觉，不改变布局与事件 */
/* ═══════════════════════════════════════ */

:root {
  --bg-main: var(--bg-primary);
  --bg-light: var(--bg-secondary);
  --icon-tile-bg: var(--surface-paper);
  --bubble-ai-bg: var(--surface-paper);
  --bubble-radius: 22px;
  --cream-bell-check: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 24%, transparent), transparent 46%);
  --toy-border: 1.5px solid color-mix(in srgb, var(--border-soft) 70%, transparent);
}

:root body {
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--accent-light) 54%, transparent), transparent 190px),
    radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 170px),
    radial-gradient(circle at 70% 86%, color-mix(in srgb, var(--surface-charm) 28%, transparent), transparent 210px),
    linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

:root body::before {
  content: none;
  display: none;
}

:root .phone-desktop,
:root .app-screen,
:root #app-layer > * {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 44%, transparent), transparent 26%),
    radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--accent-light) 48%, transparent), transparent 150px),
    radial-gradient(circle at 88% 24%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 180px),
    var(--bg-primary);
}

:root .phone-desktop::before {
  content: none;
  display: none;
}

:root .desktop-icon-art {
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--border-soft) 72%, transparent);
  border-radius: calc(18px * var(--desktop-icon-scale));
  background: color-mix(in srgb, var(--surface-paper) 88%, var(--accent-light));
  box-shadow: none;
}

:root .desktop-icon-name {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  font-weight: 600;
  text-shadow: none;
}

:root .cozy-app-icon {
  filter: none;
}
:root .cozy-app-icon .bow { fill: var(--accent-dark); stroke: var(--text-primary); }
:root .cozy-app-icon .bell { display: none; }

:root .dock {
  border: 2px solid color-mix(in srgb, var(--border-soft) 62%, var(--bg-card));
  border-radius: 34px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 92%, transparent), color-mix(in srgb, var(--accent-light) 56%, var(--surface-paper)));
  box-shadow: none;
}

:root .card,
:root .section-card,
:root .form-card,
:root .empty-state,
:root #app-layer :is([class$="-card"], .settings-card, .character-card, .placeholder-card, .tts-settings-section, .wallet-section, .ann-section, .dg-section),
:root .chat-fold-card,
:root .thinking-card,
:root .chat-game-card,
:root .chat-message-code,
:root .chat-sub-agent-card {
  border: 1.5px dashed color-mix(in srgb, var(--border-soft) 62%, transparent);
  border-radius: 28px 32px 27px 34px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 55%, transparent), transparent 38%),
    var(--surface-paper);
  box-shadow: none;
}

:root .card-title::before,
:root .section-title::before,
:root .sheet-title::before,
:root .nav-title::before,
:root .chat-thread-tool-title::before {
  content: '';
  display: inline-block;
  width: .72em;
  height: .72em;
  margin-right: .38em;
  border-radius: 45% 55% 48% 52%;
  border: 1.5px solid var(--accent-dark);
  background: radial-gradient(circle at 50% 50%, var(--accent-dark) 0 18%, var(--accent-light) 19% 48%, var(--accent) 49%);
  vertical-align: -.06em;
}

:root .btn-primary,
:root #app-layer :is(.btn-primary, [class$="-primary"], [class$="-save-btn"], [class$="-submit-btn"], [class$="-buy-btn"]) {
  border: 1.5px solid color-mix(in srgb, var(--accent-dark) 42%, transparent) !important;
  border-radius: 18px 22px 18px 22px;
  background:
    radial-gradient(circle at 12px 50%, color-mix(in srgb, var(--surface-paper) 65%, transparent) 0 3px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 12px) 50%, color-mix(in srgb, var(--surface-paper) 65%, transparent) 0 3px, transparent 3.6px),
    linear-gradient(180deg, var(--accent), var(--accent-strong));
  color: var(--bg-card);
  box-shadow: none;
}

:root .btn-ghost,
:root .icon-button,
:root .card-action,
:root #app-layer :is(button[class*="btn"], .icon-button, .settings-nav-item, .app-back, [role="button"][class*="button"]),
:root #app-layer :is([class$="-chip"], [class$="-pill"], [class$="-tag"], [class$="-badge"]) {
  border: 1.5px solid color-mix(in srgb, var(--border-soft) 58%, transparent) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 48%, transparent), transparent),
    var(--button-soft-bg);
  box-shadow: none;
}

:root .switch,
:root .toggle {
  border: 1.5px solid color-mix(in srgb, var(--border-soft) 72%, transparent);
  background: color-mix(in srgb, var(--bg-secondary) 68%, var(--bg-card));
  box-shadow: none;
}
:root .switch::after,
:root .toggle::after {
  border: 1.5px solid color-mix(in srgb, var(--accent-dark) 28%, transparent);
  background:
    radial-gradient(circle at 50% 48%, var(--accent-dark) 0 2px, transparent 2.5px),
    radial-gradient(circle at 50% 50%, var(--accent-light) 0 8px, var(--bg-card) 8.5px);
}

:root .chat-message-bubble,
:root .message-bubble {
  position: relative;
  border: 1.5px solid color-mix(in srgb, var(--border-soft) 64%, transparent);
  border-radius: 20px 24px 21px 25px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 52%, transparent), transparent 45%),
    var(--surface-paper);
  box-shadow: none;
}
:root .chat-message-bubble:not(.sticker-bubble):not(.image-bubble)::before,
:root .message-bubble::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 18px;
  width: 42px;
  height: 10px;
  border: 1px solid color-mix(in srgb, var(--border-soft) 60%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-paper) 78%, transparent);
  transform: rotate(-2deg);
}
:root .chat-message-bubble.role-user,
:root .message-row.user .message-bubble {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 40%, transparent), transparent 45%), var(--bubble-user-bg);
  border-style: solid;
}
:root .chat-message-bubble.role-ai,
:root .message-row.assistant .message-bubble {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 58%, transparent), transparent 42%), var(--bubble-ai-bg);
}

:root .chat-thread-tool-card,
:root .chat-thread-tool-page-btn,
:root .chat-thread-tool-icon {
  border: 1.5px dashed color-mix(in srgb, var(--border-soft) 64%, transparent) !important;
  border-radius: 24px 27px 23px 29px !important;
  background:
    linear-gradient(145deg, var(--bg-card), color-mix(in srgb, var(--accent-light) 52%, var(--surface-paper))) !important;
  box-shadow: none;
}
:root .chat-thread-tool-icon svg,
:root .chat-kawaii-icon { color: var(--icon-detail); }
:root .chat-kawaii-icon .paper { fill: var(--surface-paper); }
:root .chat-kawaii-icon .fill { fill: var(--accent); stroke: var(--accent-dark); }
:root .chat-kawaii-icon .dot { fill: var(--accent-dark); }

:root .chat-fold-card,
:root .thinking-card,
:root .chat-sub-agent-card { overflow: hidden; }
:root .chat-fold-card::after,
:root .thinking-card::after,
:root .chat-sub-agent-card::after,
:root .theme-center::before,
:root .theme-studio::before,
:root .dream-soft,
:root .dream-hero::before {
  content: none;
  display: none;
}
:root .chat-sub-agent-mark {
  border-radius: 50% !important;
  border-style: dashed !important;
  background:
    radial-gradient(circle at 50% 52%, var(--accent-dark) 0 2px, transparent 2.8px),
    radial-gradient(circle at 50% 50%, var(--surface-paper) 0 42%, var(--accent) 43% 100%) !important;
}

:root .code-block,
:root .chat-message-code {
  border: 1.5px solid var(--accent-dark);
  border-radius: 22px 26px 22px 26px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--text-primary) 82%, var(--accent-dark)), var(--text-primary));
  color: var(--bg-card);
}
:root .code-block-label,
:root .code-block-copy,
:root .chat-message-code-action,
:root .chat-message-code-toggle { color: var(--surface-paper); }

:root :is(input, textarea, select) {
  border-color: color-mix(in srgb, var(--border-soft) 64%, transparent);
  background: color-mix(in srgb, var(--bg-card) 86%, transparent);
  color: var(--text-primary);
  box-shadow: none;
}

:root :is(.app-header, .chat-thread-header, .settings-header, .sheet-header, .modal-header) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 82%, transparent), color-mix(in srgb, var(--surface-paper) 62%, transparent));
  border-bottom: 1px dashed color-mix(in srgb, var(--border-soft) 58%, transparent);
  box-shadow: none;
}

:root :is(.bottom-sheet, .modal, .dialog, .popup, .sheet) {
  border: 1.5px solid color-mix(in srgb, var(--border-soft) 70%, transparent);
  border-radius: 30px 34px 30px 36px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 56%, transparent), transparent 36%), var(--surface-paper);
  box-shadow: none;
}

:root :is(.desktop-widget, .widget-card, .weather-widget, .time-widget, .anniversary-widget, .vinyl-widget) {
  border: 1.5px dashed color-mix(in srgb, var(--border-soft) 62%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 52%, transparent), transparent 40%), color-mix(in srgb, var(--surface-paper) 92%, transparent);
  box-shadow: none;
}

@media (prefers-reduced-motion: no-preference) {
  :root .cozy-app-icon .bell,
  :root .chat-kawaii-icon .fill {
    transform-origin: 50% 15%;
    animation: creamBellSway 2.8s ease-in-out infinite;
  }
}

@keyframes creamBellSway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

/* 公共软萌主题补齐层：所有主题共享同一套软圆拼贴画风 */
:root {
  --soft-preview-stitch: color-mix(in srgb, var(--accent-dark) 30%, transparent);
  --soft-preview-glow: color-mix(in srgb, var(--accent-light) 28%, transparent);
  --pudding-gloss: color-mix(in srgb, var(--bg-card) 72%, transparent);
  --cream-bell-check: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 24%, transparent), transparent 46%);
}

:root body::before,
:root .phone-desktop::before,
:root .desktop-icon-art::before,
:root .desktop-icon-art::after,
:root .chat-fold-card::after,
:root .thinking-card::after,
:root .chat-sub-agent-card::after,
:root .theme-center::before,
:root .theme-studio::before,
:root .dream-soft,
:root .dream-hero::before {
  content: none;
  display: none;
}

:root .phone-desktop,
:root .placeholder-app,
:root .app-page,
:root .chat-page,
:root .settings-page,
:root .theme-center-page,
:root .theme-studio-page,
:root #app-layer > *,
:root .chat-thread-page,
:root .theme-center,
:root .theme-studio,
:root .dream-app {
  background: var(--bg-primary);
}

:root .desktop-journal-layer {
  background: var(--bg-primary);
  opacity: 1;
}

:root .desktop-widget-area {
  background-color: transparent;
  box-shadow: none;
}

:root #app-layer :is([class$="-nav"], [class$="-topbar"], .app-topbar)::before,
:root #app-layer :is([class$="-nav"], [class$="-topbar"], .app-topbar)::after {
  content: none;
  display: none;
}

:root :is(.status-cute-pill, .dock, .app-topbar, .chat-thread-header, .chat-thread-input-bar, .bottom-sheet, .modal-content, .dialog, .popup, .toast, .sheet-panel) {
  border: var(--toy-border);
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  box-shadow: none;
}

:root :is(.desktop-widget, .placeholder-card, .card, .setting-card, .panel-card, .chat-thread-sheet-item, .chat-thread-tool-card, .lock-key, .loading-card, input, textarea, select, .search-input, .chat-thread-input) {
  border: var(--toy-border);
  background: color-mix(in srgb, var(--bg-card) 90%, transparent);
  box-shadow: none;
}

:root :is(.desktop-widget, .placeholder-card, .card, .setting-card, .panel-card, .chat-thread-tool-card) {
  position: relative;
  border-radius: var(--radius-lg);
}

:root :is(.desktop-widget, .placeholder-card, .card, .setting-card, .panel-card)::after {
  content: "";
  position: absolute;
  inset: 9px;
  pointer-events: none;
  border-radius: inherit;
  border: 1px dashed var(--soft-preview-stitch);
  opacity: .52;
  background: none;
}

:root :is(.btn-primary, .primary-button, .chat-thread-send, button[type="submit"]) {
  border: var(--toy-border);
  border-radius: var(--radius-full);
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  box-shadow: none;
}

:root :is(.btn-ghost, .secondary-button, .icon-button, .app-back, .chat-token-pill) {
  border: var(--toy-border);
  border-radius: var(--radius-full);
  background: var(--button-soft-bg);
  color: var(--text-primary);
  box-shadow: none;
}

:root .cozy-app-icon {
  filter: none;
  --icon-line: var(--icon-line-stable);
  --icon-fur: var(--icon-body-stable);
  --icon-accent: var(--icon-charm-theme);
  --icon-soft: var(--icon-layer-stable);
}

:root .cozy-app-icon .badge-soft-half { fill: color-mix(in srgb, var(--decor-blue) 50%, transparent); stroke: none; }
:root .cozy-app-icon .icon-decoration .bow,
:root .cozy-app-icon .icon-decoration .bell { display: none; }

:root :is(.desktop-icon-art:not(.has-custom-image):has(.cozy-app-icon), .dock .desktop-icon-art:not(.has-custom-image):has(.cozy-app-icon)) {
  background: transparent;
  box-shadow: none;
}

:root :is(.message-bubble, .chat-message-bubble, .bubble) {
  border: var(--toy-border);
  box-shadow: none;
}

:root :is(.message-row.user .message-bubble, .chat-message-row.user .chat-message-bubble, .bubble.user) {
  background: var(--bubble-user-bg);
  color: var(--bubble-user-text);
}

:root :is(.message-row.ai .message-bubble, .chat-message-row.ai .chat-message-bubble, .bubble.ai) {
  background: var(--bubble-ai-bg);
  color: var(--bubble-ai-text);
}

:root :is(.page-dot.active, .lock-dot.filled) {
  background: var(--accent);
}

:root :is(.switch, .toggle, input[type="checkbox"]) {
  accent-color: var(--accent);
}


/* 默认图标贴近 man/图标预览.html：半透明圆角底盘、左侧冷色拼片、内圈虚线缝线。 */
:root :is(.desktop-icon-art:not(.has-custom-image):has(.cozy-app-icon), .dock .desktop-icon-art:not(.has-custom-image):has(.cozy-app-icon)) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
:root .cozy-app-icon .badge-soft-half {
  fill: color-mix(in srgb, var(--decor-blue) 48%, transparent);
  stroke: none;
}
:root .cozy-app-icon .icon-character {
  stroke: var(--icon-line-stable);
  stroke-width: 5.4;
}
:root .cozy-app-icon .icon-character .fur,
:root .cozy-app-icon .icon-character .paper,
:root .cozy-app-icon .icon-character .highlight {
  fill: none;
  stroke: var(--icon-line-stable);
}
:root .cozy-app-icon .icon-character .line-only {
  stroke: var(--icon-line-stable);
}
:root .cozy-app-icon .icon-decoration { display: none; }

/* ═══════════════════════════════════════ */
/* 【第一阶段：精致小玩具店视觉骨架】 */
/* 只覆盖视觉 token 和共用皮肤，不改 DOM 与业务状态。 */
/* ═══════════════════════════════════════ */

:root {
  --ui-ink-soft: color-mix(in srgb, var(--text-primary) 82%, var(--accent-dark));
  --ui-line: color-mix(in srgb, var(--border-soft) 72%, var(--text-primary) 10%);
  --ui-line-strong: color-mix(in srgb, var(--accent-dark) 52%, var(--border-soft));
  --ui-paper: color-mix(in srgb, var(--bg-card) 92%, var(--surface-paper));
  --ui-paper-tint: color-mix(in srgb, var(--surface-paper) 76%, var(--accent-light));
  --ui-milk-glass: color-mix(in srgb, var(--bg-card) 84%, transparent);
  --ui-soft-fill: color-mix(in srgb, var(--bg-card) 72%, var(--accent-light));
  --ui-frost-fill: color-mix(in srgb, var(--bg-card) 82%, var(--decor-blue));
  --ui-petal-fill: color-mix(in srgb, var(--bg-card) 76%, var(--decor-pink));
  --ui-cookie-fill: color-mix(in srgb, var(--accent-light) 70%, var(--bg-card));
  --ui-toy-shadow: 0 10px 24px color-mix(in srgb, var(--shadow-color, var(--text-primary)) 10%, transparent);
  --ui-float-shadow: 0 16px 34px color-mix(in srgb, var(--shadow-color, var(--text-primary)) 13%, transparent);
  --ui-hairline: 1.5px solid color-mix(in srgb, var(--ui-line) 82%, transparent);
  --ui-stitch: 1.5px dashed color-mix(in srgb, var(--ui-line-strong) 42%, transparent);
  --ui-highlight: none;
  --ui-pressed-shadow: inset 0 2px 8px color-mix(in srgb, var(--text-primary) 10%, transparent);
  --ui-lace-size: 18px;
  --button-primary-bg:
    radial-gradient(circle at 15px 50%, color-mix(in srgb, var(--bg-card) 58%, transparent) 0 3px, transparent 3.8px),
    radial-gradient(circle at calc(100% - 15px) 50%, color-mix(in srgb, var(--bg-card) 58%, transparent) 0 3px, transparent 3.8px),
    linear-gradient(180deg, color-mix(in srgb, var(--accent-light) 74%, var(--accent)), var(--accent-strong));
  --button-soft-bg:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 72%, transparent), transparent),
    color-mix(in srgb, var(--surface-paper) 82%, var(--accent-light));
  --toy-border: var(--ui-hairline);
  --shadow-sm: 0 5px 14px color-mix(in srgb, var(--shadow-color, var(--text-primary)) 8%, transparent);
  --shadow-card: var(--ui-toy-shadow);
  --shadow-float: var(--ui-float-shadow);
}

:root body {
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--accent-light) 34%, transparent) 0 120px, transparent 250px),
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--decor-pink) 20%, transparent) 0 90px, transparent 230px),
    linear-gradient(180deg, var(--bg-primary), color-mix(in srgb, var(--bg-primary) 84%, var(--bg-secondary)));
}

:root :is(.phone-desktop, .app-screen, .placeholder-app, .app-page, .chat-page, .settings-page, .theme-center-page, .theme-studio-page, .chat-thread-page, #app-layer > *) {
  background: var(--bg-primary) !important;
}

/* 夜间模式：去掉所有多层光晕叠加，只留一层极淡的暖雾，画面干净不朋克 */
:root[data-theme="cocoa-night"] :is(.phone-desktop, .app-screen, .placeholder-app, .app-page, .chat-page, .settings-page, .theme-center-page, .theme-studio-page, .chat-thread-page, #app-layer > *), :root[data-theme="teddy-nest"] :is(.phone-desktop, .app-screen, .placeholder-app, .app-page, .chat-page, .settings-page, .theme-center-page, .theme-studio-page, .chat-thread-page, #app-layer > *), :root[data-theme="blueberry-moon"] :is(.phone-desktop, .app-screen, .placeholder-app, .app-page, .chat-page, .settings-page, .theme-center-page, .theme-studio-page, .chat-thread-page, #app-layer > *) {
  background: var(--bg-primary) !important;
}

:root .desktop-journal-layer {
  background:
    radial-gradient(circle at 10px 10px, color-mix(in srgb, var(--ui-line) 24%, transparent) 0 1px, transparent 1.8px),
    radial-gradient(circle at 34px 30px, color-mix(in srgb, var(--accent-light) 26%, transparent) 0 1.2px, transparent 2px);
  background-size: 44px 44px, 58px 58px;
  opacity: .55;
}

:root :is(.card, .section-card, .form-card, .empty-state, .placeholder-card, .setting-card, .panel-card, .loading-card, .chat-fold-card, .thinking-card, .chat-game-card, .chat-sub-agent-card, .desktop-widget, [class$="-card"]) {
  position: relative;
  overflow: hidden;
  border: var(--ui-hairline) !important;
  border-radius: 28px 32px 27px 34px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 68%, transparent), transparent 42%),
    var(--ui-paper) !important;
  box-shadow: none;
}

:root :is(.card, .section-card, .form-card, .empty-state, .placeholder-card, .setting-card, .panel-card, .desktop-widget)::after {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border-radius: inherit;
  border: var(--ui-stitch);
  opacity: .42;
  background: none;
}

:root :is(.app-topbar, .app-header, .nav-bar, .top-bar, .toolbar, .chat-thread-header, .chat-thread-input-bar, .bottom-bar, .status-cute-pill, .dock, .bottom-sheet, .sheet-panel, .modal, .modal-content, .dialog, .popup, .toast) {
  border: var(--ui-hairline) !important;
  background:
    var(--ui-milk-glass) !important;
  box-shadow: none;
  backdrop-filter: blur(18px) saturate(1.04);
  -webkit-backdrop-filter: blur(18px) saturate(1.04);
}

:root :is(.app-topbar, .app-header, .nav-bar, .top-bar, .toolbar, .chat-thread-header) {
  border-radius: 0 0 24px 24px !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-top-color: transparent !important;
}

:root :is(.bottom-sheet, .sheet-panel, .modal, .modal-content, .dialog, .popup) {
  border-radius: 32px 36px 30px 38px !important;
}

:root .dock {
  border-radius: 36px 40px 34px 42px !important;
}

:root :is(.btn-primary, .primary-button, [class$="-primary"], [class$="-save-btn"], [class$="-submit-btn"], [class$="-buy-btn"], button[type="submit"]) {
  min-height: 42px;
  border: 1.5px solid color-mix(in srgb, var(--accent-dark) 46%, transparent) !important;
  border-radius: 20px 24px 20px 24px !important;
  background: var(--button-primary-bg) !important;
  color: var(--button-primary-text) !important;
  box-shadow: none;
  font-weight: 760;
  letter-spacing: .02em;
}

:root :is(.btn-ghost, .secondary-button, .icon-button, .app-back, .card-action, .chat-token-pill, button[class*="btn"], [role="button"][class*="button"], [class$="-chip"], [class$="-pill"], [class$="-tag"], [class$="-badge"]) {
  border: var(--ui-hairline) !important;
  border-radius: var(--radius-full) !important;
  background: var(--button-soft-bg) !important;
  color: var(--text-primary) !important;
  box-shadow: none;
}

:root :is(.icon-button, .app-back, .chat-thread-send, .chat-call-send, .lock-key) {
  position: relative;
  overflow: hidden;
}

:root :is(.icon-button, .app-back, .chat-thread-send, .chat-call-send, .lock-key)::before {
  content: "";
  position: absolute;
  inset: 19% 17% auto auto;
  width: 18%;
  height: 18%;
  border-radius: 50%;
  background: color-mix(in srgb, white 60%, transparent);
  pointer-events: none;
}

:root :is(.btn-primary, .icon-button.accent, .chat-thread-send, .chat-call-send, .lock-key:not(.secondary)):active {
  box-shadow: none;
}

:root :is(input, textarea, select, .input, .form-input, .search-input, .chat-thread-input, .chat-call-input) {
  border: var(--ui-hairline) !important;
  border-radius: 22px 26px 22px 26px !important;
  background:
    color-mix(in srgb, var(--bg-card) 88%, var(--surface-paper)) !important;
  box-shadow: none;
}

:root :is(.switch, .toggle) {
  border: var(--ui-hairline) !important;
  border-radius: var(--radius-full) !important;
  background: color-mix(in srgb, var(--bg-secondary) 68%, var(--bg-card)) !important;
  box-shadow: none;
}

:root :is(.switch.active, .switch.is-on, .toggle.is-on, input:checked + .toggle, input:checked + .switch) {
  background: linear-gradient(90deg, color-mix(in srgb, var(--decor-green) 54%, var(--bg-card)), color-mix(in srgb, var(--accent) 82%, var(--accent-light))) !important;
}

:root :is(.switch, .toggle)::after {
  border: 1.5px solid color-mix(in srgb, var(--ui-line-strong) 34%, transparent) !important;
  background:
    radial-gradient(circle at 34% 34%, color-mix(in srgb, white 72%, transparent) 0 4px, transparent 4.8px),
    radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--accent-dark) 65%, transparent) 0 2px, transparent 2.6px),
    var(--bg-card) !important;
  box-shadow: none;
}

:root :is(.message-bubble, .chat-message-bubble, .bubble) {
  border: var(--ui-hairline) !important;
  border-radius: 22px 26px 22px 26px !important;
  box-shadow: none;
}

:root :is(.message-row.user .message-bubble, .chat-message-row.user .chat-message-bubble, .chat-message-bubble.role-user, .bubble.user) {
  background:
    var(--bubble-user-bg) !important;
  color: var(--bubble-user-text) !important;
}

:root :is(.message-row.ai .message-bubble, .chat-message-row.ai .chat-message-bubble, .chat-message-bubble.role-ai, .bubble.ai) {
  background:
    var(--bubble-ai-bg) !important;
  color: var(--bubble-ai-text) !important;
}

:root :is(.desktop-icon-art:not(.has-custom-image):has(.cozy-app-icon), .dock .desktop-icon-art:not(.has-custom-image):has(.cozy-app-icon)) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none;
}

:root .cozy-app-icon {
  --icon-line: var(--ui-ink-soft);
  --icon-paper: color-mix(in srgb, var(--bg-card) 88%, transparent);
  --icon-left: color-mix(in srgb, var(--decor-blue) 46%, var(--bg-card));
  --icon-fur: color-mix(in srgb, var(--surface-paper) 76%, var(--accent-light));
  --icon-accent: color-mix(in srgb, var(--accent) 76%, var(--bg-card));
  --icon-soft: color-mix(in srgb, var(--bg-card) 72%, var(--decor-pink));
  --icon-highlight: color-mix(in srgb, white 70%, transparent);
  color: var(--icon-line);
  filter: none;
}

:root .cozy-app-icon-chat { --icon-left: color-mix(in srgb, var(--decor-pink) 46%, var(--bg-card)); --icon-accent: color-mix(in srgb, var(--decor-pink) 72%, var(--accent)); }
:root .cozy-app-icon-settings { --icon-left: color-mix(in srgb, var(--decor-blue) 54%, var(--bg-card)); --icon-accent: color-mix(in srgb, var(--decor-lilac) 62%, var(--accent)); }
:root .cozy-app-icon-gallery { --icon-left: color-mix(in srgb, var(--decor-green) 50%, var(--bg-card)); --icon-accent: color-mix(in srgb, var(--decor-blue) 58%, var(--accent)); }
:root .cozy-app-icon-wallet { --icon-left: color-mix(in srgb, var(--decor-yellow) 56%, var(--bg-card)); --icon-accent: color-mix(in srgb, var(--accent) 78%, var(--decor-yellow)); }
:root .cozy-app-icon-memo { --icon-left: color-mix(in srgb, var(--decor-lilac) 44%, var(--bg-card)); --icon-accent: color-mix(in srgb, var(--decor-pink) 58%, var(--accent)); }
:root .cozy-app-icon-music { --icon-left: color-mix(in srgb, var(--decor-blue) 44%, var(--bg-card)); --icon-accent: color-mix(in srgb, var(--decor-green) 52%, var(--accent)); }
:root .cozy-app-icon-dream { --icon-left: color-mix(in srgb, var(--decor-lilac) 58%, var(--bg-card)); --icon-accent: color-mix(in srgb, var(--accent) 58%, var(--decor-lilac)); }


:root .cozy-app-icon .badge-soft-half {
  fill: var(--icon-left) !important;
}


:root .cozy-app-icon .icon-character {
  stroke: var(--icon-line) !important;
  stroke-width: 5.2 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:root .cozy-app-icon .icon-character .fur {
  fill: var(--icon-fur) !important;
  stroke: var(--icon-line) !important;
}

:root .cozy-app-icon .icon-character .paper,
:root .cozy-app-icon .icon-character .soft {
  fill: var(--ui-paper) !important;
  stroke: var(--icon-line) !important;
}

:root .cozy-app-icon .icon-character .highlight,
:root .cozy-app-icon .icon-character .accent {
  fill: var(--icon-accent) !important;
  stroke: var(--icon-line) !important;
}

:root .cozy-app-icon .icon-character .line-only {
  fill: none !important;
  stroke: var(--icon-line) !important;
}

:root .desktop-icon-name {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  font-weight: 600;
  text-shadow: none;
}

:root .status-cute-pill svg,
:root .icon-button svg,
:root .app-back svg {
  stroke-width: 2.15;
  color: var(--ui-ink-soft);
}

:root :is(.desktop-icon, .icon-button, .btn-primary, .btn-ghost, .card-action, .chat-thread-send, .lock-key) {
  transition: transform 180ms cubic-bezier(.22,.9,.22,1), box-shadow 180ms ease, background 180ms ease, color 180ms ease;
}

:root :is(.desktop-icon:hover .cozy-app-icon, .desktop-icon:focus-visible .cozy-app-icon) {
  transform-origin: 50% 72%;
  animation: toyTinySway 1.65s ease-in-out infinite;
}

:root :is(.btn-primary, .icon-button.accent, .chat-thread-send, .lock-key:not(.secondary)):active {
  transform: translateY(1px) scale(.965);
}

@keyframes toyTinySway {
  0%, 100% { transform: translateY(0) rotate(-.8deg); }
  50% { transform: translateY(-2px) rotate(.8deg); }
}

/* ═══════════════════════════════════════ */
/* 【第二阶段：基础组件精修与主题适配小物件】 */
/* 继续只触碰视觉层：修正第一阶段泛选择器粗糙感，补足按钮、小卡片、胶囊和图标家族。 */
/* ═══════════════════════════════════════ */

:root {
  --ui-button-ink: color-mix(in srgb, var(--button-primary-text) 86%, var(--text-primary));
  --ui-soft-button-ink: color-mix(in srgb, var(--text-primary) 78%, var(--accent-dark));
  --ui-tab-bg: color-mix(in srgb, var(--bg-card) 78%, var(--accent-light));
  --ui-item-bg: color-mix(in srgb, var(--bg-card) 88%, transparent);
  --ui-item-active: color-mix(in srgb, var(--accent-light) 58%, var(--bg-card));
  --ui-mini-fill: color-mix(in srgb, var(--bg-card) 82%, var(--decor-pink));
  --ui-primary-charm-fill: color-mix(in srgb, var(--bg-card) 62%, var(--accent-light));
  --ui-corner-dot: color-mix(in srgb, var(--accent) 62%, var(--bg-card));
  --ui-corner-dot-strong: color-mix(in srgb, var(--accent-dark) 70%, var(--text-primary));
}

:root :is(.btn-primary, .primary-button, [class$="-save-btn"], [class$="-submit-btn"], [class$="-buy-btn"], button[type="submit"], .chat-thread-send, .chat-call-send) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-inline: max(18px, 1.2em);
  border-radius: 19px 24px 20px 25px !important;
  color: var(--ui-button-ink) !important;
}

:root :is(.btn-primary, .primary-button, [class$="-save-btn"], [class$="-submit-btn"], [class$="-buy-btn"], button[type="submit"], .chat-thread-send, .chat-call-send)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px 8px auto auto;
  width: 20px;
  height: 13px;
  border-radius: 50% 48% 42% 54%;
  background:
    radial-gradient(circle at 28% 34%, var(--ui-primary-charm-fill) 0 2px, transparent 2.6px),
    radial-gradient(circle at 58% 28%, var(--ui-primary-charm-fill) 0 2px, transparent 2.6px),
    radial-gradient(ellipse at 48% 70%, var(--ui-primary-charm-fill) 0 6px, transparent 6.6px);
  opacity: .82;
}

:root :is(.btn-primary, .primary-button, [class$="-save-btn"], [class$="-submit-btn"], [class$="-buy-btn"], button[type="submit"], .chat-thread-send, .chat-call-send)::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 10px;
  bottom: 5px;
  width: 24px;
  height: 7px;
  border-radius: var(--radius-full);
  border-top: 1px dashed color-mix(in srgb, var(--ui-button-ink) 34%, transparent);
  opacity: .55;
}

:root :is(.btn-ghost, .secondary-button, .icon-button, .app-back, .card-action, button[class*="btn"], [role="button"][class*="button"]) {
  position: relative;
  isolation: isolate;
  color: var(--ui-soft-button-ink) !important;
}

:root :is(.btn-ghost, .secondary-button, .card-action, button[class*="btn"]):not(.btn-primary):not([class$="-primary"]):not([class$="-save-btn"]):not([class$="-submit-btn"]):not([class$="-buy-btn"])::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 42% 58% 46% 54%;
  background: var(--ui-corner-dot);
  opacity: .46;
  pointer-events: none;
}

:root :is(.icon-button, .app-back) {
  border-radius: 42% 48% 43% 52% !important;
  background:
    radial-gradient(circle at 70% 24%, color-mix(in srgb, white 52%, transparent) 0 5px, transparent 5.8px),
    var(--button-soft-bg) !important;
}

:root :is(.icon-button.accent, .chat-thread-send, .chat-call-send) {
  border-radius: 48% 44% 52% 42% !important;
}

:root :is(.card-action, [class$="-item"], .list-item, .setting-item, .settings-nav-item, .chat-thread-sheet-item, .chat-action-sheet-item) {
  border: var(--ui-hairline) !important;
  border-radius: 20px 24px 20px 26px !important;
  background:
    var(--ui-item-bg) !important;
  color: var(--text-primary) !important;
  box-shadow: none;
}

:root :is([class$="-item"].active, [class$="-item"].is-active, .settings-nav-item.active, .chat-thread-sheet-item.active, .chat-action-sheet-item.active) {
  background:
    var(--ui-item-active) !important;
  border-color: color-mix(in srgb, var(--accent-dark) 38%, var(--border-soft)) !important;
}

:root :is(.segmented, [class$="-tabs"], [class$="-segment"], [class$="-toggle"]) {
  border: var(--ui-hairline) !important;
  border-radius: var(--radius-full) !important;
  background: var(--ui-tab-bg) !important;
  box-shadow: none;
}

:root :is(.segmented button, [class$="-tabs"] button, [class$="-segment"] button, [class$="-toggle"] button) {
  border-radius: var(--radius-full) !important;
}

:root :is(.segmented button.active, [class$="-tabs"] button.active, [class$="-segment"] button.active, [class$="-toggle"] button.active, [aria-selected="true"]) {
  background:
    radial-gradient(circle at 12px 50%, color-mix(in srgb, var(--bg-card) 58%, transparent) 0 2.5px, transparent 3.2px),
    var(--button-primary-bg) !important;
  color: var(--ui-button-ink) !important;
}

:root :is([class$="-chip"], [class$="-pill"], [class$="-tag"], [class$="-badge"], .chip, .pill, .tag, .badge) {
  min-height: 26px;
  border: var(--ui-hairline) !important;
  border-radius: var(--radius-full) !important;
  background:
    color-mix(in srgb, var(--bg-card) 76%, var(--accent-light)) !important;
  color: var(--ui-soft-button-ink) !important;
  box-shadow: none;
}

:root :is([class$="-chip"].active, [class$="-chip"].selected, [class$="-pill"].active, [class$="-tag"].active, .chip.active, .pill.active, .tag.active, .badge.active) {
  background: var(--button-primary-bg) !important;
  color: var(--ui-button-ink) !important;
  border-color: color-mix(in srgb, var(--accent-dark) 44%, var(--border-soft)) !important;
}

:root :is([class*="mini-btn"], [class*="small-btn"], .chat-message-action-btn, .chat-message-code-action, .chat-message-code-toggle) {
  min-height: 30px;
  border-radius: 14px 17px 14px 18px !important;
  background:
    radial-gradient(circle at 78% 25%, color-mix(in srgb, white 48%, transparent) 0 3px, transparent 3.8px),
    var(--ui-mini-fill) !important;
}

:root :is(.desktop-widget, .widget-card, .time-widget, .weather-widget, .anniversary-widget, .vinyl-widget) {
  border-radius: 30px 34px 28px 36px !important;
  background:
    radial-gradient(circle at 18px 18px, color-mix(in srgb, var(--ui-corner-dot) 42%, transparent) 0 3px, transparent 3.8px),
    color-mix(in srgb, var(--ui-paper) 88%, var(--accent-light)) !important;
}

:root :is(.desktop-widget, .widget-card, .time-widget, .weather-widget, .anniversary-widget, .vinyl-widget)::before {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 11px;
  width: 22px;
  height: 12px;
  border-radius: 50% 48% 45% 55%;
  background:
    radial-gradient(circle at 25% 40%, color-mix(in srgb, var(--ui-corner-dot-strong) 58%, transparent) 0 2px, transparent 2.6px),
    radial-gradient(circle at 54% 30%, color-mix(in srgb, var(--ui-corner-dot-strong) 52%, transparent) 0 2px, transparent 2.6px),
    radial-gradient(ellipse at 50% 72%, color-mix(in srgb, var(--ui-corner-dot-strong) 46%, transparent) 0 6px, transparent 6.6px);
  opacity: .34;
  pointer-events: none;
}

:root .desktop-icon-art {
  transform-origin: 50% 72%;
}

:root .cozy-app-icon-moments { --icon-left: color-mix(in srgb, var(--decor-pink) 48%, var(--bg-card)); --icon-accent: color-mix(in srgb, var(--decor-green) 45%, var(--accent)); }
:root .cozy-app-icon-characters { --icon-left: color-mix(in srgb, var(--decor-yellow) 52%, var(--bg-card)); --icon-accent: color-mix(in srgb, var(--decor-pink) 50%, var(--accent)); }
:root .cozy-app-icon-worldbook { --icon-left: color-mix(in srgb, var(--decor-green) 55%, var(--bg-card)); --icon-accent: color-mix(in srgb, var(--decor-lilac) 46%, var(--accent)); }
:root .cozy-app-icon-shop { --icon-left: color-mix(in srgb, var(--decor-yellow) 58%, var(--bg-card)); --icon-accent: color-mix(in srgb, var(--accent) 74%, var(--decor-pink)); }
:root .cozy-app-icon-anniversary { --icon-left: color-mix(in srgb, var(--decor-pink) 52%, var(--bg-card)); --icon-accent: color-mix(in srgb, var(--accent) 66%, var(--decor-yellow)); }
:root .cozy-app-icon-games { --icon-left: color-mix(in srgb, var(--decor-lilac) 46%, var(--bg-card)); --icon-accent: color-mix(in srgb, var(--decor-green) 46%, var(--accent)); }
:root .cozy-app-icon-theme-center { --icon-left: color-mix(in srgb, var(--decor-blue) 52%, var(--bg-card)); --icon-accent: color-mix(in srgb, var(--decor-pink) 54%, var(--accent)); }

:root .cozy-app-icon .icon-character .face,
:root .cozy-app-icon .icon-character circle:not(.highlight),
:root .cozy-app-icon .icon-character path:not(.fur):not(.paper):not(.highlight):not(.accent):not(.soft):not(.line-only) {
  vector-effect: non-scaling-stroke;
}

:root :is(.btn-primary, .primary-button, [class$="-save-btn"], [class$="-submit-btn"], [class$="-buy-btn"], .chat-thread-send, .chat-call-send):active::before {
  transform: translateY(1px) scale(.9);
}

:root :is(.icon-button, .app-back):active {
  transform: translateY(1px) scale(.94) rotate(-1deg);
}

:root :is(.card-action, [class$="-item"], [class$="-chip"], [class$="-pill"], [class$="-tag"]):active {
  transform: translateY(1px) scale(.985);
}

/* ═══════════════════════════════════════ */
/* 【第三阶段：桌面图标语义形状与主题适配色】 */
/* 默认图标固定语义轮廓，颜色由 tone class 从主题变量派生。 */
/* ═══════════════════════════════════════ */

:root {
  --icon-tone-left: color-mix(in srgb, var(--decor-blue) 46%, var(--bg-card));
  --icon-tone-body: color-mix(in srgb, var(--surface-paper) 76%, var(--accent-light));
  --icon-tone-charm: color-mix(in srgb, var(--accent) 76%, var(--bg-card));
  --icon-tone-paper: color-mix(in srgb, var(--bg-card) 90%, transparent);
  --icon-tone-line: color-mix(in srgb, var(--text-primary) 78%, var(--accent-dark));
  --icon-tone-muted: color-mix(in srgb, var(--text-secondary) 34%, transparent);
}

:root .cozy-app-icon-tone-petal { --icon-tone-left: color-mix(in srgb, var(--decor-pink) 52%, var(--bg-card)); --icon-tone-body: color-mix(in srgb, var(--surface-paper) 74%, var(--decor-pink)); --icon-tone-charm: color-mix(in srgb, var(--decor-pink) 70%, var(--accent)); }
:root .cozy-app-icon-tone-fresh { --icon-tone-left: color-mix(in srgb, var(--decor-green) 48%, var(--bg-card)); --icon-tone-body: color-mix(in srgb, var(--surface-paper) 74%, var(--decor-blue)); --icon-tone-charm: color-mix(in srgb, var(--decor-pink) 58%, var(--accent)); }
:root .cozy-app-icon-tone-cloud { --icon-tone-left: color-mix(in srgb, var(--decor-blue) 56%, var(--bg-card)); --icon-tone-body: color-mix(in srgb, var(--surface-paper) 78%, var(--decor-blue)); --icon-tone-charm: color-mix(in srgb, var(--decor-lilac) 62%, var(--accent)); }
:root .cozy-app-icon-tone-leaf { --icon-tone-left: color-mix(in srgb, var(--decor-green) 54%, var(--bg-card)); --icon-tone-body: color-mix(in srgb, var(--surface-paper) 78%, var(--decor-green)); --icon-tone-charm: color-mix(in srgb, var(--decor-blue) 58%, var(--accent)); }
:root .cozy-app-icon-tone-cookie { --icon-tone-left: color-mix(in srgb, var(--decor-yellow) 58%, var(--bg-card)); --icon-tone-body: color-mix(in srgb, var(--surface-paper) 70%, var(--decor-yellow)); --icon-tone-charm: color-mix(in srgb, var(--decor-pink) 50%, var(--accent)); }
:root .cozy-app-icon-tone-moss { --icon-tone-left: color-mix(in srgb, var(--decor-green) 58%, var(--bg-card)); --icon-tone-body: color-mix(in srgb, var(--surface-paper) 76%, var(--decor-green)); --icon-tone-charm: color-mix(in srgb, var(--decor-lilac) 48%, var(--accent)); }
:root .cozy-app-icon-tone-honey { --icon-tone-left: color-mix(in srgb, var(--decor-yellow) 60%, var(--bg-card)); --icon-tone-body: color-mix(in srgb, var(--surface-paper) 68%, var(--accent-light)); --icon-tone-charm: color-mix(in srgb, var(--accent) 78%, var(--decor-yellow)); }
:root .cozy-app-icon-tone-pudding { --icon-tone-left: color-mix(in srgb, var(--decor-yellow) 58%, var(--bg-card)); --icon-tone-body: color-mix(in srgb, var(--surface-paper) 72%, var(--accent-light)); --icon-tone-charm: color-mix(in srgb, var(--accent) 74%, var(--decor-pink)); }
:root .cozy-app-icon-tone-lilac { --icon-tone-left: color-mix(in srgb, var(--decor-lilac) 54%, var(--bg-card)); --icon-tone-body: color-mix(in srgb, var(--surface-paper) 78%, var(--decor-lilac)); --icon-tone-charm: color-mix(in srgb, var(--decor-pink) 58%, var(--accent)); }
:root .cozy-app-icon-tone-rose { --icon-tone-left: color-mix(in srgb, var(--decor-pink) 56%, var(--bg-card)); --icon-tone-body: color-mix(in srgb, var(--surface-paper) 76%, var(--decor-pink)); --icon-tone-charm: color-mix(in srgb, var(--accent) 66%, var(--decor-yellow)); }
:root .cozy-app-icon-tone-mint { --icon-tone-left: color-mix(in srgb, var(--decor-lilac) 46%, var(--bg-card)); --icon-tone-body: color-mix(in srgb, var(--surface-paper) 76%, var(--decor-green)); --icon-tone-charm: color-mix(in srgb, var(--decor-green) 46%, var(--accent)); }
:root .cozy-app-icon-tone-soda { --icon-tone-left: color-mix(in srgb, var(--decor-blue) 48%, var(--bg-card)); --icon-tone-body: color-mix(in srgb, var(--surface-paper) 78%, var(--decor-blue)); --icon-tone-charm: color-mix(in srgb, var(--decor-green) 52%, var(--accent)); }
:root .cozy-app-icon-tone-moon { --icon-tone-left: color-mix(in srgb, var(--decor-lilac) 60%, var(--bg-card)); --icon-tone-body: color-mix(in srgb, var(--surface-paper) 76%, var(--decor-lilac)); --icon-tone-charm: color-mix(in srgb, var(--accent) 58%, var(--decor-lilac)); }
:root .cozy-app-icon-tone-ribbon { --icon-tone-left: color-mix(in srgb, var(--decor-blue) 54%, var(--bg-card)); --icon-tone-body: color-mix(in srgb, var(--surface-paper) 76%, var(--decor-pink)); --icon-tone-charm: color-mix(in srgb, var(--decor-pink) 54%, var(--accent)); }

:root .cozy-app-icon {
  --icon-left: var(--icon-tone-left);
  --icon-fur: var(--icon-tone-body);
  --icon-accent: var(--icon-tone-charm);
  --icon-line: var(--icon-tone-line);
  --icon-paper: var(--icon-tone-paper);
}


:root .cozy-app-icon .badge-soft-half {
  fill: var(--icon-left) !important;
}


:root .cozy-app-icon .icon-symbol {
  transform-origin: 50% 54%;
}





:root :is(.desktop-icon-art:not(.has-custom-image):has(.cozy-app-icon), .dock .desktop-icon-art:not(.has-custom-image):has(.cozy-app-icon), .settings-app-icon-preview) .cozy-app-icon .icon-decoration {
  display: block !important;
}

:root .cozy-app-icon-semantic-bubble .icon-symbol { transform: translateY(1px) rotate(-1deg); }
:root .cozy-app-icon-semantic-album .icon-symbol { transform: rotate(.8deg); }
:root .cozy-app-icon-semantic-gear .icon-symbol { transform: scale(.98); }
:root .cozy-app-icon-semantic-frame .icon-symbol { transform: rotate(-.6deg); }
:root .cozy-app-icon-semantic-friend .icon-symbol { transform: translateY(-1px); }
:root .cozy-app-icon-semantic-book .icon-symbol { transform: rotate(.7deg); }
:root .cozy-app-icon-semantic-pouch .icon-symbol { transform: translateY(1px); }
:root .cozy-app-icon-semantic-bag .icon-symbol { transform: rotate(-.7deg); }
:root .cozy-app-icon-semantic-note .icon-symbol { transform: rotate(.9deg); }
:root .cozy-app-icon-semantic-calendar .icon-symbol { transform: translateY(1px); }
:root .cozy-app-icon-semantic-controller .icon-symbol { transform: scale(.96) translateY(2px); }
:root .cozy-app-icon-semantic-record .icon-symbol { transform: rotate(-1deg); }
:root .cozy-app-icon-semantic-moon .icon-symbol { transform: translateX(-1px); }
:root .cozy-app-icon-semantic-dresser .icon-symbol { transform: translateY(1px); }

:root .desktop-icon:active .cozy-app-icon .icon-symbol,
:root .dock .desktop-icon:active .cozy-app-icon .icon-symbol {
  transform: translateY(1px) scale(.96);
}

/* 公共软萌主题补齐层：第三阶段收束，供静态检查确认共享层仍由主题变量驱动 */
:root :is(.phone-desktop, #app-layer > *) {
  background: var(--bg-primary);
}

:root .desktop-journal-layer {
  background: var(--bg-primary);
}

:root :is(.theme-center::before, .dream-hero::before) {
  content: none;
}

/* ═══════════════════════════════════════ */
/* 【第四阶段：重点萌物按钮】 */
/* 只点亮发送、保存、喜欢、播放、加号等高频按钮；普通次级按钮继续保持干净胶囊。 */
/* ═══════════════════════════════════════ */

:root {
  --creature-button-line: color-mix(in srgb, var(--text-primary) 74%, var(--accent-dark));
  --creature-button-paper: color-mix(in srgb, var(--bg-card) 86%, transparent);
  --creature-button-paw: color-mix(in srgb, var(--decor-pink) 58%, var(--accent-light));
  --creature-button-cookie: color-mix(in srgb, var(--decor-yellow) 62%, var(--accent-light));
  --creature-button-star: color-mix(in srgb, var(--decor-yellow) 68%, var(--bg-card));
  --creature-button-ribbon: color-mix(in srgb, var(--decor-pink) 54%, var(--accent));
  --creature-button-chime: color-mix(in srgb, var(--accent) 62%, var(--decor-yellow));
}

:root :is(.chat-thread-send, .chat-call-send, .dream-wake-send) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 48% 44% 52% 42% !important;
  background:
    radial-gradient(circle at 32% 34%, var(--creature-button-paper) 0 4px, transparent 4.8px),
    radial-gradient(circle at 58% 30%, var(--creature-button-paper) 0 4px, transparent 4.8px),
    radial-gradient(ellipse at 48% 66%, var(--creature-button-paw) 0 12px, transparent 12.8px),
    var(--button-primary-bg) !important;
}

:root :is(.chat-thread-send, .chat-call-send, .dream-wake-send)::after {
  content: "";
  position: absolute;
  inset: auto 8px 7px auto;
  width: 16px;
  height: 9px;
  border-radius: 50% 48% 44% 55%;
  border-top: 1.5px solid color-mix(in srgb, var(--creature-button-line) 45%, transparent);
  pointer-events: none;
}

:root :is(.bottom-sheet .btn-primary, .sheet-panel .btn-primary, .modal .btn-primary, .cute-dialog-actions .btn-primary, .guide-card .btn-primary, [class$="-save-btn"], [class$="-submit-btn"], [data-action="save"], button[type="submit"]) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 18px 24px 20px 24px !important;
  background:
    radial-gradient(circle at 17px 50%, color-mix(in srgb, var(--creature-button-line) 42%, transparent) 0 2px, transparent 2.7px),
    radial-gradient(circle at calc(100% - 17px) 50%, color-mix(in srgb, var(--creature-button-line) 42%, transparent) 0 2px, transparent 2.7px),
    radial-gradient(circle at 50% 12%, var(--creature-button-paper) 0 7px, transparent 7.6px),
    var(--button-primary-bg) !important;
}

:root :is(.bottom-sheet .btn-primary, .sheet-panel .btn-primary, .modal .btn-primary, .cute-dialog-actions .btn-primary, .guide-card .btn-primary, [class$="-save-btn"], [class$="-submit-btn"], [data-action="save"], button[type="submit"])::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 6px;
  width: 24px;
  height: 11px;
  border-radius: 50% 50% 46% 54%;
  background:
    radial-gradient(circle at 22% 38%, var(--creature-button-cookie) 0 2px, transparent 2.6px),
    radial-gradient(circle at 52% 28%, var(--creature-button-cookie) 0 2px, transparent 2.6px),
    radial-gradient(ellipse at 48% 72%, var(--creature-button-cookie) 0 6px, transparent 6.8px);
  opacity: .74;
  pointer-events: none;
}

:root :is(.character-add-button, .icon-button[aria-label*="新建"], .icon-button[aria-label*="添加"], .btn-ghost[aria-label*="添加"], [data-action="add"], [data-action="new"]) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 46% 50% 42% 54% !important;
  background:
    radial-gradient(circle at 50% 50%, var(--creature-button-star) 0 9px, transparent 9.8px),
    var(--button-soft-bg) !important;
}

:root :is(.character-add-button, .icon-button[aria-label*="新建"], .icon-button[aria-label*="添加"], .btn-ghost[aria-label*="添加"], [data-action="add"], [data-action="new"])::after {
  content: "";
  position: absolute;
  inset: 9px;
  clip-path: polygon(50% 0, 62% 34%, 98% 35%, 69% 56%, 80% 92%, 50% 70%, 20% 92%, 31% 56%, 2% 35%, 38% 34%);
  background: color-mix(in srgb, var(--creature-button-star) 72%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--creature-button-line) 42%, transparent);
  pointer-events: none;
  opacity: .62;
}

:root :is(.moment-action.active, [aria-pressed="true"][class*="like"], [data-action="like"].active, [data-liked="true"]) {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--creature-button-ribbon) 44%, var(--border-soft)) !important;
  background:
    radial-gradient(circle at 12px 50%, var(--creature-button-paper) 0 3px, transparent 3.8px),
    color-mix(in srgb, var(--creature-button-ribbon) 34%, var(--bg-card)) !important;
}

:root :is(.moment-action.active, [aria-pressed="true"][class*="like"], [data-action="like"].active, [data-liked="true"])::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  width: 18px;
  height: 11px;
  border-radius: 999px 999px 6px 6px;
  background:
    radial-gradient(circle at 32% 50%, var(--creature-button-ribbon) 0 5px, transparent 5.8px),
    radial-gradient(circle at 68% 50%, var(--creature-button-ribbon) 0 5px, transparent 5.8px);
  transform: translateY(-50%) rotate(-8deg);
  opacity: .58;
  pointer-events: none;
}

:root :is(.vinyl-ctrl-btn.main-play, [data-action="play"], [aria-label*="播放"]) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 50% 46% 54% 48% !important;
  background:
    radial-gradient(circle at 50% 32%, var(--creature-button-paper) 0 5px, transparent 5.7px),
    radial-gradient(ellipse at 50% 70%, var(--creature-button-chime) 0 13px, transparent 13.8px),
    var(--button-primary-bg) !important;
}

:root :is(.vinyl-ctrl-btn.main-play, [data-action="play"], [aria-label*="播放"])::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 14px;
  height: 5px;
  border-radius: var(--radius-full);
  border-top: 1.5px solid color-mix(in srgb, var(--creature-button-line) 42%, transparent);
  transform: translateX(-50%);
  pointer-events: none;
}

:root :is(.chat-thread-send, .chat-call-send, .dream-wake-send, .bottom-sheet .btn-primary, .sheet-panel .btn-primary, .modal .btn-primary, .cute-dialog-actions .btn-primary, .guide-card .btn-primary, [class$="-save-btn"], [class$="-submit-btn"], [data-action="save"], button[type="submit"], .character-add-button, .icon-button[aria-label*="新建"], .icon-button[aria-label*="添加"], .btn-ghost[aria-label*="添加"], [data-action="add"], [data-action="new"], .moment-action.active, [data-action="like"].active, .vinyl-ctrl-btn.main-play, [data-action="play"], [aria-label*="播放"]):active {
  transform: translateY(1px) scale(.95) rotate(-.8deg);
}

/* 公共软萌主题补齐层：第四阶段收束，保证静态检查仍从这里读取共享变量层 */
:root :is(.phone-desktop, #app-layer > *) {
  background: var(--bg-primary);
}

:root .desktop-journal-layer {
  background: var(--bg-primary);
}

:root :is(.theme-center::before, .dream-hero::before) {
  content: none;
}

/* ═══════════════════════════════════════ */
/* 【第五阶段：小组件与状态卡片换皮】 */
/* 时间、天气、钱包、聊天纸条、角色状态统一成精致小卡片，不堆贴纸。 */
/* ═══════════════════════════════════════ */

:root {
  --widget-card-paper: color-mix(in srgb, var(--bg-card) 88%, transparent);
  --widget-card-wash: color-mix(in srgb, var(--accent-light) 24%, transparent);
  --widget-card-line: color-mix(in srgb, var(--border-soft) 72%, var(--text-primary) 8%);
  --widget-card-stitch: color-mix(in srgb, var(--accent-dark) 28%, transparent);
  --widget-card-ink: color-mix(in srgb, var(--text-primary) 86%, var(--accent-dark));
  --widget-card-soft-ink: color-mix(in srgb, var(--text-secondary) 86%, var(--text-primary));
  --widget-card-chip: color-mix(in srgb, var(--surface-paper) 72%, var(--accent-light));
  --widget-card-mark: color-mix(in srgb, var(--accent) 58%, var(--bg-card));
  --widget-card-mark-soft: color-mix(in srgb, var(--decor-blue) 46%, var(--bg-card));
}

:root :is(.status-cute-pill, .desktop-widget, #time-widget, #weather-widget, #anniversary-widget, .vinyl-widget, .wallet-balance-card, .wallet-ai-row, .wallet-ai-page-card, .chat-fold-card, .chat-quote-preview, .chat-message-quote, .chat-token-pill) {
  position: relative;
  overflow: hidden;
  border: 1.5px solid var(--widget-card-line) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 38%, transparent), transparent 46%),
    radial-gradient(circle at 88% 16%, var(--widget-card-wash) 0 34px, transparent 35px),
    var(--widget-card-paper) !important;
  box-shadow: none;
}

:root :is(.desktop-widget, #time-widget, #weather-widget, #anniversary-widget, .vinyl-widget, .wallet-balance-card, .wallet-ai-page-card, .chat-fold-card, .chat-quote-preview, .chat-message-quote)::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed var(--widget-card-stitch);
  border-radius: inherit;
  opacity: .38;
  pointer-events: none;
  background: none;
}

:root :is(.desktop-widget, #time-widget, #weather-widget, #anniversary-widget, .vinyl-widget) {
  border-radius: 30px 34px 28px 36px !important;
}

:root :is(.desktop-widget.rectangle, #time-widget) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 44%, transparent), transparent 42%),
    radial-gradient(circle at 18px 18px, color-mix(in srgb, var(--widget-card-mark) 34%, transparent) 0 4px, transparent 4.8px),
    color-mix(in srgb, var(--widget-card-paper) 88%, var(--decor-yellow)) !important;
}

:root :is(#weather-widget, .desktop-widget.square) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 42%, transparent), transparent 44%),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--decor-blue) 34%, transparent) 0 28px, transparent 29px),
    color-mix(in srgb, var(--widget-card-paper) 90%, var(--decor-blue)) !important;
}

:root #anniversary-widget {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 44%, transparent), transparent 42%),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--decor-pink) 34%, transparent) 0 28px, transparent 29px),
    color-mix(in srgb, var(--widget-card-paper) 90%, var(--decor-pink)) !important;
}

:root .vinyl-widget {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 42%, transparent), transparent 42%),
    radial-gradient(circle at 22% 50%, color-mix(in srgb, var(--text-primary) 12%, transparent) 0 34px, transparent 35px),
    color-mix(in srgb, var(--widget-card-paper) 88%, var(--decor-lilac)) !important;
}

:root :is(.widget-label, .time-widget-sub, .weather-meta, .weather-notice, .wallet-balance-label, .wallet-balance-note, .wallet-ai-balance, .chat-fold-summary, .chat-tool-status-text, .chat-thread-preview) {
  color: var(--widget-card-soft-ink) !important;
  letter-spacing: .01em;
}

:root :is(.widget-value, .time-widget-main, .wallet-balance-number, .wallet-ai-page-balance, .chat-fold-title, .chat-tool-name) {
  color: var(--widget-card-ink) !important;
  font-weight: 780;
  letter-spacing: .015em;
}

:root .time-widget-main {
  line-height: 1;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--bg-card) 58%, transparent);
}

:root :is(.widget-mark, .ann-day-marker, .ann-card-marker, .wallet-record-avatar, .wallet-ai-avatar, .wallet-ai-page-avatar, .settings-hero-avatar, .chat-list-avatar, .chat-call-avatar) {
  position: relative;
  overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--widget-card-line) 82%, transparent) !important;
  background:
    radial-gradient(circle at 68% 26%, color-mix(in srgb, var(--bg-card) 54%, transparent) 0 6px, transparent 6.8px),
    var(--widget-card-chip) !important;
  color: var(--widget-card-ink) !important;
  box-shadow: none;
}

:root :is(.wallet-ai-avatar, .wallet-ai-page-avatar, .settings-hero-avatar, .chat-list-avatar, .chat-call-avatar)::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--widget-card-paper);
  background: color-mix(in srgb, var(--color-success) 76%, var(--bg-card));
  pointer-events: none;
}

:root :is(.status-cute-pill, .chat-token-pill, .wallet-balance-mood, .ann-tag, .dream-tag, .weather-notice) {
  border-radius: var(--radius-full) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 34%, transparent), transparent),
    var(--widget-card-chip) !important;
  border: 1px solid color-mix(in srgb, var(--widget-card-line) 72%, transparent) !important;
  box-shadow: none;
}

:root :is(.status-time, .status-online) {
  color: var(--widget-card-ink) !important;
  font-weight: 780;
}

:root .status-online.is-offline {
  color: color-mix(in srgb, var(--color-danger) 78%, var(--text-primary)) !important;
}

:root .wallet-balance-card {
  border-radius: 34px 38px 30px 40px !important;
  min-height: 176px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 42%, transparent), transparent 48%),
    radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--decor-yellow) 34%, transparent) 0 42px, transparent 43px),
    radial-gradient(circle at 88% 76%, color-mix(in srgb, var(--decor-pink) 24%, transparent) 0 46px, transparent 47px),
    color-mix(in srgb, var(--widget-card-paper) 88%, var(--accent-light)) !important;
}

:root .wallet-balance-number span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45em;
  min-height: 1.45em;
  margin-right: .2em;
  border-radius: 45% 55% 44% 56%;
  background: var(--widget-card-chip);
  color: var(--widget-card-ink);
}

:root :is(.wallet-ai-row, .wallet-ai-page-card) {
  border-radius: 24px 28px 23px 30px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 42%, transparent), transparent 46%),
    color-mix(in srgb, var(--widget-card-paper) 88%, var(--decor-pink)) !important;
}

:root :is(.chat-fold-card, .chat-quote-preview, .chat-message-quote) {
  border-radius: 22px 26px 22px 28px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 44%, transparent), transparent 46%),
    radial-gradient(circle at 16px 14px, color-mix(in srgb, var(--widget-card-mark-soft) 34%, transparent) 0 4px, transparent 4.8px),
    color-mix(in srgb, var(--surface-paper) 88%, var(--accent-light)) !important;
}

:root .chat-fold-toggle {
  min-height: 42px;
}

:root .chat-fold-left svg {
  color: var(--widget-card-ink) !important;
}

:root :is(.chat-fold-detail, .chat-fold-detail-inner) {
  border-radius: 18px 22px 18px 23px !important;
  background: color-mix(in srgb, var(--bg-card) 76%, var(--surface-muted)) !important;
}

:root :is(.chat-list-avatar.group, .wallet-ai-avatar, .wallet-ai-page-avatar) {
  border-radius: 42% 50% 44% 52% !important;
}

:root :is(.chat-thread-preview.relationship-preview, .chat-thread-preview.matched, .wallet-balance-mood) {
  color: var(--widget-card-ink) !important;
  background: color-mix(in srgb, var(--widget-card-mark) 24%, var(--bg-card)) !important;
}

/* 公共软萌主题补齐层：第五阶段收束，保持共享层由主题变量驱动 */
:root :is(.phone-desktop, #app-layer > *) {
  background: var(--bg-primary);
}

:root .desktop-journal-layer {
  background: var(--bg-primary);
}

:root :is(.theme-center::before, .dream-hero::before) {
  content: none;
}

/* ═══════════════════════════════════════ */
/* 【第六阶段：手作小物微动效闭环】 */
/* 按压、浮起、回弹都只停留在视觉层，不介入事件和业务逻辑。 */
/* ═══════════════════════════════════════ */

:root {
  --motion-handmade-fast: 150ms cubic-bezier(.34, 1.56, .64, 1);
  --motion-handmade-soft: 260ms cubic-bezier(.22, 1, .36, 1);
  --motion-handmade-float: 360ms cubic-bezier(.2, .8, .2, 1);
  --motion-handmade-settle: 520ms cubic-bezier(.16, 1, .3, 1);
  --motion-press-soft: .965;
  --motion-press-button: .94;
  --motion-float-y: -3px;
  --motion-float-border: color-mix(in srgb, var(--accent) 34%, var(--border-soft));
  --motion-press-border: color-mix(in srgb, var(--accent-dark) 28%, var(--border-soft));
  --motion-highlight-sheen: color-mix(in srgb, var(--bg-card) 44%, transparent);
}

:root :is(
  button,
  [role="button"],
  .btn-primary,
  .btn-ghost,
  .icon-button,
  .app-back,
  .card-action,
  .desktop-icon,
  .desktop-icon-art,
  .chat-thread-tool-card,
  .settings-nav-item,
  .segmented button,
  .switch,
  .toggle,
  .vinyl-ctrl-btn,
  .moment-action
) {
  transform-origin: 50% 62%;
  transition:
    transform var(--motion-handmade-soft),
    background var(--motion-handmade-soft),
    border-color var(--motion-handmade-soft),
    color var(--motion-handmade-soft),
    opacity 180ms ease;
  will-change: transform;
}

:root :is(
  .card,
  .section-card,
  .form-card,
  .empty-state,
  .desktop-widget,
  #time-widget,
  #weather-widget,
  #anniversary-widget,
  .vinyl-widget,
  .wallet-balance-card,
  .wallet-ai-row,
  .wallet-ai-page-card,
  .chat-fold-card,
  .chat-quote-preview,
  .chat-message-quote,
  #app-layer [class$="-card"],
  #app-layer [class$="-item"]
) {
  transform-origin: 50% 70%;
  transition:
    transform var(--motion-handmade-float),
    border-color var(--motion-handmade-soft),
    background var(--motion-handmade-soft),
    opacity 180ms ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :root :is(
    .card,
    .section-card,
    .form-card,
    .empty-state,
    .desktop-widget,
    #time-widget,
    #weather-widget,
    #anniversary-widget,
    .vinyl-widget,
    .wallet-balance-card,
    .wallet-ai-row,
    .wallet-ai-page-card,
    .chat-fold-card,
    .chat-quote-preview,
    .chat-message-quote,
    #app-layer [class$="-card"],
    #app-layer [class$="-item"]
  ):hover {
    transform: translateY(var(--motion-float-y));
    border-color: var(--motion-float-border) !important;
    background-position: 50% 0, 100% 12%, 0 0;
  }

  :root :is(.card-action, .list-row, .setting-row, .chat-thread-tool-card):hover {
    transform: translateY(-2px);
    border-color: var(--motion-float-border) !important;
  }

  :root :is(button, [role="button"], .btn-primary, .btn-ghost, .icon-button, .app-back, .segmented button, .vinyl-ctrl-btn, .moment-action):hover {
    transform: translateY(-1px);
  }
}

:root :is(
  button,
  [role="button"],
  .btn-primary,
  .btn-ghost,
  .icon-button,
  .app-back,
  .card-action,
  .desktop-icon,
  .desktop-icon-art,
  .chat-thread-tool-card,
  .settings-nav-item,
  .segmented button,
  .switch,
  .toggle,
  .vinyl-ctrl-btn,
  .moment-action
):active {
  transition-duration: var(--motion-handmade-fast);
  transform: translateY(1px) scale(var(--motion-press-soft));
  border-color: var(--motion-press-border) !important;
}

:root :is(
  .btn-primary,
  .icon-button.accent,
  .chat-thread-send,
  .chat-call-send,
  .dream-wake-send,
  .bottom-sheet .btn-primary,
  .sheet-panel .btn-primary,
  .modal .btn-primary,
  .cute-dialog-actions .btn-primary,
  .guide-card .btn-primary,
  [class$="-save-btn"],
  [class$="-submit-btn"],
  [data-action="save"],
  button[type="submit"],
  .character-add-button,
  .icon-button[aria-label*="新建"],
  .icon-button[aria-label*="添加"],
  .btn-ghost[aria-label*="添加"],
  [data-action="add"],
  [data-action="new"],
  .moment-action.active,
  [data-action="like"].active,
  .vinyl-ctrl-btn.main-play,
  [data-action="play"],
  [aria-label*="播放"]
):active {
  transform: translateY(2px) scale(var(--motion-press-button)) rotate(-.7deg);
}


:root :is(.chat-thread-send, .chat-call-send, .dream-wake-send, .vinyl-ctrl-btn.main-play, [data-action="play"])::before {
  transition: transform var(--motion-handmade-soft), opacity var(--motion-handmade-soft);
}

:root :is(.chat-thread-send, .chat-call-send, .dream-wake-send, .vinyl-ctrl-btn.main-play, [data-action="play"]):active::before {
  transform: translateY(1px) scale(.88);
  opacity: .62;
}

:root :is(.desktop-icon):active .desktop-icon-art {
  transform: translateY(1px) scale(.93) rotate(-1deg);
  border-color: var(--motion-press-border) !important;
}

@media (prefers-reduced-motion: no-preference) {
  :root :is(.desktop-icon-art, .desktop-widget, .status-cute-pill) {
    animation-duration: 5.6s;
    animation-timing-function: ease-in-out;
  }

  :root :is(.desktop-icon:hover .desktop-icon-art, .chat-thread-tool-card:hover .chat-thread-tool-icon, .icon-button:hover svg) {
    animation: handmadeHover 720ms var(--motion-handmade-settle) both;
  }
}


@keyframes handmadeHover {
  0% { transform: translateY(0) rotate(0); }
  48% { transform: translateY(-2px) rotate(.8deg); }
  100% { transform: translateY(0) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-float-y: 0;
    --motion-press-soft: 1;
    --motion-press-button: 1;
  }

  :root :is(
    button,
    [role="button"],
    .btn-primary,
    .btn-ghost,
    .icon-button,
    .app-back,
    .card-action,
    .desktop-icon,
    .desktop-icon-art,
    .chat-thread-tool-card,
    .settings-nav-item,
    .segmented button,
    .switch,
    .toggle,
    .vinyl-ctrl-btn,
    .moment-action,
    .card,
    .section-card,
    .form-card,
    .empty-state,
    .desktop-widget,
    #time-widget,
    #weather-widget,
    #anniversary-widget,
    .vinyl-widget,
    .wallet-balance-card,
    .wallet-ai-row,
    .wallet-ai-page-card,
    .chat-fold-card,
    .chat-quote-preview,
    .chat-message-quote
  ) {
    transition-duration: .01ms !important;
    animation: none !important;
    transform: none !important;
  }
}

/* 公共软萌主题补齐层：第六阶段收束，保持共享层由主题变量驱动 */
:root :is(.phone-desktop, #app-layer > *) {
  background: var(--bg-primary);
}

:root .desktop-journal-layer {
  background: var(--bg-primary);
}

:root :is(.theme-center::before, .dream-hero::before) {
  content: none;
}

/* 软糯桌面收束层：桌面图标统一为圆角正方形，去掉夜间模式下偏硬的高光和投影。 */
:root :is(.desktop-icon-art, .dock .desktop-icon-art) {
  border-radius: calc(18px * var(--desktop-icon-scale)) !important;
  box-shadow: none;
  transform-style: flat !important;
}

:root :is(.desktop-icon-art:not(.has-custom-image):has(.cozy-app-icon), .dock .desktop-icon-art:not(.has-custom-image):has(.cozy-app-icon)) {
  background: color-mix(in srgb, var(--surface-paper) 88%, var(--accent-light)) !important;
  border: 1px solid color-mix(in srgb, var(--border-soft) 72%, transparent) !important;
  box-shadow: none;
}

:root :is(.cozy-app-icon, .desktop-icon-art .cozy-app-icon, .dock .desktop-icon-art .cozy-app-icon) {
  filter: none !important;
}

:root :is(.desktop-icon-name, .dock .desktop-icon-name) {
  text-shadow: none !important;
}

:root[data-theme="cocoa-night"] :is(.status-cute-pill, .dock, .theme-center-hero), :root[data-theme="teddy-nest"] :is(.status-cute-pill, .dock, .theme-center-hero), :root[data-theme="blueberry-moon"] :is(.status-cute-pill, .dock, .theme-center-hero) {
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════ */
/* 桌面拖拽定位修正                                             */
/* 卡片外观规则（.card/.panel-card/... 那组）把 .desktop-widget  */
/* 一起设成了 position:relative，覆盖掉 .desktop-item 的         */
/* absolute 定位。relative 下 left/top 是相对原位偏移而非绝对    */
/* 坐标，落位会逐次累积，组件越大偏移越多（实测宽组件偏 354px）。 */
/* 这里把桌面项的定位收回来，外观样式不受影响。                  */
/* ═══════════════════════════════════════════════════════════ */

:root .desktop-free-layer > .desktop-item,
:root .desktop-free-layer > .desktop-item.desktop-widget {
  position: absolute !important;
}

/* 拖拽中脱离容器跟手，需要视口坐标 */
:root .desktop-free-layer > .desktop-item.dragging,
:root .desktop-free-layer > .desktop-item.settling {
  position: fixed !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* 天气城市填写弹窗                                             */
/* 走主题变量，无高光无渐变，跟桌面图标同一套软萌质感             */
/* ═══════════════════════════════════════════════════════════ */

:root .weather-city-sheet {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 4px 8px;
}

:root .weather-city-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

:root .weather-city-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: .01em;
}

:root .weather-city-hint {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.6;
}

:root .weather-city-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--border-soft) 72%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-paper) 88%, var(--bg-card));
  color: var(--text-primary);
  font-family: inherit;
  font-size: 15px;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 180ms cubic-bezier(.32,.72,0,1);
}

:root .weather-city-input::placeholder {
  color: color-mix(in srgb, var(--text-soft) 62%, transparent);
}

:root .weather-city-input:focus {
  outline: 0;
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
}

:root .weather-city-state {
  min-height: 17px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-soft);
}

:root .weather-city-state[data-tone="warn"] {
  color: var(--color-danger);
}

:root .weather-city-actions {
  display: flex;
  gap: 10px;
}

:root .weather-city-btn {
  flex: 1;
  padding: 13px 16px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  transition: transform 180ms cubic-bezier(.32,.72,0,1), background-color 180ms ease;
}

:root .weather-city-btn.ghost {
  border-color: color-mix(in srgb, var(--border-soft) 72%, transparent);
  background: transparent;
  color: var(--text-soft);
}

:root .weather-city-btn.solid {
  background: var(--accent);
  color: var(--bg-card);
}

:root .weather-city-btn:active {
  transform: scale(.97);
}

:root .weather-city-btn:disabled {
  opacity: .5;
  cursor: default;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════ */
/* 拖拽残影收口                                                 */
/* 桌面项的 left/top 在落位时要从 fixed 视口坐标瞬切到 absolute   */
/* 局部坐标。任何把 left/top 纳入过渡的规则都会让元素从旧位置     */
/* 补间飘到新位置，视觉上就是松手后的残影/拖影。                 */
/* 这里对桌面项做兜底：位移永不过渡，只允许视觉属性过渡。         */
/* ═══════════════════════════════════════════════════════════ */

:root .desktop-free-layer > .desktop-item {
  transition-property: transform, opacity, background-color, border-color, color;
}

/* 拖拽 / 落位期间完全禁用过渡，坐标必须逐帧跟手 */
:root .desktop-free-layer > .desktop-item.dragging,
:root .desktop-free-layer > .desktop-item.settling {
  transition: none !important;
}

/* 天气组件右上角常驻「改地区」入口 */
:root .weather-city-entry {
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--border-soft) 68%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-paper) 82%, var(--bg-card));
  color: var(--text-soft);
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  text-wrap: nowrap;
  letter-spacing: .02em;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 160ms cubic-bezier(.32,.72,0,1), background-color 160ms ease;
}

:root .weather-city-entry:active {
  transform: scale(.94);
  background: color-mix(in srgb, var(--accent-light) 62%, var(--bg-card));
}