@import url('https://fonts.googleapis.cn/css2?family=Dancing+Script:wght@400;700&family=Noto+Sans+SC:wght@300;400;700&family=Noto+Serif+SC:wght@300;400;700&family=Dela+Gothic+One&family=DotGothic16&family=LXGW+WenKai&family=Ma+Shan+Zheng&family=ZCOOL+XiaoWei&family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Zhi+Mang+Xing&family=VT323&family=Silkscreen:wght@400;700&family=Press+Start+2P&family=Share+Tech+Mono&family=IBM+Plex+Mono:wght@300;400&display=swap');

/*
  字体列表：

  【中文】
  Noto Sans SC      — 思源黑体，干净
  Noto Serif SC     — 思源宋体，优雅
  Dela Gothic One   — 粗厚哥特黑体
  DotGothic16       — 日式像素点阵体（支持中文！）
  LXGW WenKai       — 霞鹜文楷，手写楷体
  Ma Shan Zheng     — 楷书端正
  ZCOOL XiaoWei     — 站酷小薇，清秀文艺
  Liu Jian Mao Cao  — 毛笔草书
  Long Cang         — 龙藏体，自然手写
  Zhi Mang Xing     — 行书豪放

  【像素/终端】
  VT323             — 经典终端像素体（英文）
  Silkscreen        — 丝网像素体（英文）
  Press Start 2P    — 游戏机像素体（英文）
  Share Tech Mono   — 科技等宽终端体（英文）
  IBM Plex Mono     — IBM终端等宽体（英文）
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== 白色清新主题（默认） ===== */
:root, [data-theme="light"] {
  --bg-deep: #e8ecf1;
  --aurora-1: rgba(180, 210, 240, 0.5);
  --aurora-2: rgba(200, 190, 230, 0.4);
  --aurora-3: rgba(220, 230, 240, 0.5);
  --accent: rgba(140, 160, 200, 1);
  --accent-dim: rgba(140, 160, 200, 0.35);
  --text-primary: rgba(60, 70, 90, 0.9);
  --text-secondary: rgba(80, 90, 110, 0.55);
  --text-ghost: rgba(100, 110, 130, 0.3);
  --glass-bg: rgba(255, 255, 255, 0.45);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-blur: 24px;
  --bubble-color: rgba(60, 75, 110, 0.6);
  --bubble-xl: rgba(50, 60, 90, 0.75);
  --bubble-lg: rgba(60, 70, 100, 0.6);
  --bubble-md: rgba(70, 85, 120, 0.5);
  --bubble-sm: rgba(90, 100, 140, 0.35);
  --bubble-hover: rgba(100, 130, 190, 1);
  --bubble-glow: rgba(140, 160, 200, 0.4);
  --tag-bg: rgba(255, 255, 255, 0.5);
  --tag-border: rgba(140, 160, 200, 0.25);
  --particle-color: rgba(140, 170, 220, 0.7);
}

/* ===== 暗色深夜主题（星雾静蓝） ===== */
/* #050606 深渊黑  #04345a 天渊蓝  #06588c 天际蓝  #626979 钢雾灰  #c8c6c6 雾银 */
[data-theme="dark"] {
  --bg-deep: #050606;
  --aurora-1: rgba(4, 52, 90, 0.4);        /* 天渊蓝 #04345a */
  --aurora-2: rgba(6, 88, 140, 0.2);       /* 天际蓝 #06588c */
  --aurora-3: rgba(4, 52, 90, 0.3);        /* 天渊蓝淡 */
  --accent: rgba(200, 198, 198, 1);         /* 雾银 #c8c6c6 */
  --accent-dim: rgba(200, 198, 198, 0.25);
  --text-primary: rgba(200, 198, 198, 0.9); /* 雾银 */
  --text-secondary: rgba(98, 105, 121, 0.7); /* 钢雾灰 #626979 */
  --text-ghost: rgba(98, 105, 121, 0.35);
  --glass-bg: rgba(4, 52, 90, 0.2);
  --glass-border: rgba(200, 198, 198, 0.06);
  --glass-blur: 20px;
  --bubble-color: rgba(200, 198, 198, 0.45);
  --bubble-xl: rgba(200, 198, 198, 0.8);
  --bubble-lg: rgba(6, 88, 140, 0.7);      /* 天际蓝 */
  --bubble-md: rgba(98, 105, 121, 0.55);   /* 钢雾灰 */
  --bubble-sm: rgba(98, 105, 121, 0.28);
  --bubble-hover: rgba(200, 198, 198, 1);
  --bubble-glow: rgba(6, 88, 140, 0.4);
  --tag-bg: rgba(4, 52, 90, 0.3);
  --tag-border: rgba(200, 198, 198, 0.1);
  --particle-color: rgba(200, 198, 198, 0.5);
}

body {
  min-height: 100vh;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: 'Noto Serif SC', serif;
  overflow: hidden;
  position: relative;
}

/* ===== 极光背景 ===== */
.aurora {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  filter: blur(80px) saturate(1.4);
}

.aurora-blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.6;
}

.aurora-blob:nth-child(1) {
  width: 50vmax;
  height: 50vmax;
  background: var(--aurora-1);
  animation: auroraMove1 20s ease-in-out infinite, auroraHue 15s linear infinite;
}

.aurora-blob:nth-child(2) {
  width: 45vmax;
  height: 45vmax;
  background: var(--aurora-2);
  animation: auroraMove2 25s ease-in-out infinite, auroraHue 20s linear infinite;
}

.aurora-blob:nth-child(3) {
  width: 40vmax;
  height: 40vmax;
  background: var(--aurora-3);
  animation: auroraMove3 18s ease-in-out infinite, auroraHue 12s linear infinite;
}

/* 暗色主题关掉色相旋转 保持纯蓝 */
[data-theme="dark"] .aurora-blob:nth-child(1) {
  animation: auroraMove1 20s ease-in-out infinite;
}
[data-theme="dark"] .aurora-blob:nth-child(2) {
  animation: auroraMove2 25s ease-in-out infinite;
}
[data-theme="dark"] .aurora-blob:nth-child(3) {
  animation: auroraMove3 18s ease-in-out infinite;
}

@keyframes auroraMove1 {
  0%   { top: -20%; left: 30%; }
  25%  { top: 10%; left: -10%; }
  50%  { top: 60%; left: 20%; }
  75%  { top: 30%; left: 70%; }
  100% { top: -20%; left: 30%; }
}

@keyframes auroraMove2 {
  0%   { top: 50%; left: 60%; }
  25%  { top: -10%; left: 80%; }
  50%  { top: 20%; left: -5%; }
  75%  { top: 70%; left: 40%; }
  100% { top: 50%; left: 60%; }
}

@keyframes auroraMove3 {
  0%   { top: 80%; left: 10%; }
  25%  { top: 40%; left: 60%; }
  50%  { top: -10%; left: 40%; }
  75%  { top: 60%; left: -10%; }
  100% { top: 80%; left: 10%; }
}

@keyframes auroraHue {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* 微粒噪点层 */
/* 星光 canvas */
#starfield {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

[data-theme="dark"] #starfield {
  opacity: 1;
}

.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ===== 屏幕容器 ===== */
.screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.screen.active {
  opacity: 1;
  pointer-events: auto;
}

/* ===== 欢迎屏 ===== */
.welcome-title {
  font-family: 'Dancing Script', cursive;
  font-size: clamp(2.5rem, 8vw, 5rem);
  color: var(--text-primary);
  text-shadow: 0 0 60px var(--accent-dim), 0 0 120px rgba(120, 60, 190, 0.2);
  margin-bottom: 0.5rem;
  animation: fadeInUp 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.welcome-subtitle {
  font-size: clamp(0.9rem, 3vw, 1.2rem);
  color: var(--text-secondary);
  margin-bottom: 3rem;
  animation: fadeInUp 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
  letter-spacing: 0.3em;
}

/* 主题选择器 */
.theme-picker {
  display: flex;
  gap: 12px;
  margin-top: 2.5rem;
  animation: fadeInUp 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.9s both;
}

.contact-toggle {
  margin-top: 2rem;
  font-size: 0.7rem;
  color: var(--text-ghost);
  cursor: pointer;
  letter-spacing: 0.15em;
  transition: color 0.3s;
  animation: fadeInUp 1.2s cubic-bezier(0.4, 0, 0.2, 1) 1.1s both;
}
.contact-toggle:hover {
  color: var(--text-secondary);
}
.contact-popup {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-top: 0.8rem;
  padding: 12px 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  backdrop-filter: blur(var(--glass-blur));
  animation: fadeInUp 0.3s ease both;
}
.contact-popup.show {
  display: flex;
}
.contact-item {
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-decoration: none;
}
.contact-item:hover {
  color: var(--text-primary);
}

.theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 18px;
  height: 18px;
  background: none;
  border: 1.5px solid var(--glass-border);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-btn:hover {
  transform: scale(1.15);
  border-color: var(--accent-dim);
}

.theme-btn.active {
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-dim);
}

.theme-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.theme-dot-light {
  background: linear-gradient(135deg, #d4dce8, #e0d8ec);
}

.theme-dot-dark {
  background: linear-gradient(135deg, #1a0a3a, #0a1a2e);
}

.btn-glow {
  padding: 14px 48px;
  background: linear-gradient(135deg, var(--glass-bg), rgba(255,255,255,0.08));
  border: 1px solid var(--accent-dim);
  color: var(--text-primary);
  font-family: 'Noto Serif SC', serif;
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  border-radius: 30px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation: fadeInUp 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.1);
}

.btn-glow:hover {
  background: linear-gradient(135deg, var(--accent-dim), rgba(255,255,255,0.06));
  border-color: var(--accent);
  box-shadow: 0 4px 20px var(--accent-dim), inset 0 1px 0 rgba(255,255,255,0.12);
  transform: translateY(-2px);
}

.btn-glow:active {
  transform: scale(0.97) translateY(0);
  box-shadow: 0 1px 8px var(--accent-dim);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ===== 气泡屏 ===== */
#screen-bubbles {
  padding: 20px;
}

.bubble-header {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 10;
}

#round-indicator {
  font-size: 0.9rem;
  color: var(--text-secondary);
  letter-spacing: 0.2em;
}

.bubble-hint {
  font-size: 0.8rem;
  color: var(--text-ghost);
  margin-top: 6px;
}

#bubble-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 词云文字 */
.bubble {
  position: absolute;
  padding: 4px 8px;
  background: none;
  border: none;
  font-family: 'Noto Serif SC', serif;
  color: var(--bubble-color);
  cursor: pointer;
  user-select: none;
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  filter: blur(4px);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.3s ease,
              text-shadow 0.3s ease;
  white-space: nowrap;
  line-height: 1.2;
}

.bubble.float-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.bubble:hover {
  color: var(--bubble-hover);
  text-shadow: 0 0 20px var(--bubble-glow), 0 0 40px rgba(140, 160, 200, 0.15);
  transform: translateY(-2px) scale(1.06);
}

.bubble.popping {
  animation: wordPop 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.bubble.fade-out {
  opacity: 0;
  transform: translateY(-8px) scale(0.8);
  filter: blur(4px);
}

/* 词云大小等级 */
.bubble.size-xl {
  font-size: clamp(2.2rem, 7vw, 3.5rem);
  font-weight: 700;
  color: var(--bubble-xl);
}
.bubble.size-lg {
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  font-weight: 700;
  color: var(--bubble-lg);
}
.bubble.size-md {
  font-size: clamp(1.1rem, 3.5vw, 1.6rem);
  font-weight: 400;
  color: var(--bubble-md);
}
.bubble.size-sm {
  font-size: clamp(0.8rem, 2.5vw, 1.1rem);
  font-weight: 300;
  color: var(--bubble-sm);
}

@keyframes wordPop {
  0% { transform: scale(1); opacity: 1; filter: blur(0); }
  25% { transform: scale(1.5); color: var(--accent); text-shadow: 0 0 40px var(--accent-dim), 0 0 80px rgba(233, 69, 96, 0.3); filter: blur(0); }
  100% { transform: scale(2.2); opacity: 0; filter: blur(12px); text-shadow: 0 0 80px transparent; }
}

/* 粒子 */
.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--particle-color);
  border-radius: 50%;
  pointer-events: none;
  animation: scatter 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  box-shadow: 0 0 6px var(--accent-dim);
}

@keyframes scatter {
  0% { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

/* 已选词条 */
.selected-area {
  position: absolute;
  bottom: 100px;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 10;
}

#selected-words {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 20px;
}

.selected-tag {
  padding: 6px 16px;
  background: var(--tag-bg);
  border: 1px solid var(--tag-border);
  cursor: pointer;
  border-radius: 20px;
  font-size: 0.85rem;
  color: rgba(60, 75, 110, 0.8);
  opacity: 0;
  transform: scale(0.8) translateY(8px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.selected-tag:hover {
  border-color: var(--accent-dim);
  transform: scale(1) translateY(-1px);
}

.selected-tag.show {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.selected-tag.removing {
  opacity: 0;
  transform: scale(0.6) translateY(-10px);
}

/* 返回首页按钮 */
.btn-back {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.05));
  border: 1px solid transparent;
  color: var(--text-ghost);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Noto Serif SC', serif;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn-back:hover {
  color: var(--text-secondary);
  border-color: var(--glass-border);
  background: var(--glass-bg);
}

/* 底部按钮 */
.bubble-actions {
  position: absolute;
  bottom: 40px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 16px;
  z-index: 10;
}

.btn-ghost {
  padding: 10px 28px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.06));
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-family: 'Noto Serif SC', serif;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.06);
}

.btn-ghost:hover {
  border-color: var(--accent-dim);
  color: var(--text-primary);
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.1));
  box-shadow: 0 2px 12px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.1);
  transform: translateY(-1px);
}

.btn-ghost:active {
  transform: scale(0.97);
}

/* ===== 倾诉屏 ===== */
#screen-message {
  padding: 30px;
}

.message-box {
  width: 100%;
  max-width: 500px;
  text-align: center;
}

.message-title {
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-bottom: 8px;
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.message-hint {
  font-size: 0.85rem;
  color: var(--text-ghost);
  margin-bottom: 24px;
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both;
}

#words-preview {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.word-chip {
  padding: 4px 14px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(140, 160, 200, 0.2);
  border-radius: 16px;
  font-size: 0.8rem;
  color: rgba(60, 75, 110, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#user-message {
  width: 100%;
  min-height: 120px;
  padding: 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  color: var(--text-primary);
  font-family: 'Noto Serif SC', serif;
  font-size: 0.95rem;
  line-height: 1.8;
  resize: none;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

#user-message::placeholder {
  color: var(--text-ghost);
}

#user-message:focus {
  border-color: rgba(233, 69, 96, 0.25);
  box-shadow: 0 0 30px rgba(233, 69, 96, 0.05);
}

.message-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

/* ===== 加载屏 ===== */
.loading-content {
  text-align: center;
}

.envelope {
  width: 80px;
  height: 60px;
  margin: 0 auto 30px;
  position: relative;
  animation: envelopeFloat 3s ease-in-out infinite;
}

.envelope-body {
  width: 100%;
  height: 100%;
  background: rgba(140, 160, 200, 0.12);
  border: 1.5px solid rgba(140, 160, 200, 0.3);
  border-radius: 6px;
}

.envelope-flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: rgba(140, 160, 200, 0.15);
  border: 1.5px solid rgba(140, 160, 200, 0.25);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  transform-origin: top center;
  animation: flapOpen 3s ease infinite;
}

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

@keyframes flapOpen {
  0%, 40% { transform: rotateX(0); }
  60%, 100% { transform: rotateX(180deg); }
}

.loading-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  letter-spacing: 0.3em;
  animation: breathe 2s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ===== 信件屏 ===== */
#screen-letter {
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
  overflow-y: auto;
  padding-bottom: 120px;
}

/* 毛玻璃信纸 */
.letter-paper {
  margin: auto 0;
  flex-shrink: 0;
  width: 100%;
  max-width: 560px;
  min-height: 400px;
  padding: 50px 44px;
  border-radius: 16px;
  position: relative;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(30px) saturate(1.3);
  -webkit-backdrop-filter: blur(30px) saturate(1.3);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  color: var(--text-primary);
  font-family: 'DotGothic16', 'LXGW WenKai', 'Noto Serif SC', serif;
  font-size: 1.1rem;
  line-height: 2.2;
  animation: letterReveal 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 信纸内发光边缘 */
.letter-paper::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 17px;
  background: linear-gradient(135deg,
    rgba(180, 210, 240, 0.15) 0%,
    transparent 40%,
    transparent 60%,
    rgba(200, 190, 230, 0.12) 100%);
  z-index: -1;
  pointer-events: none;
}

@keyframes letterReveal {
  from {
    opacity: 0;
    transform: translateY(40px) scaleY(0.8);
    filter: blur(8px);
  }
  60% {
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    filter: blur(0);
  }
}

/* ===== 信纸风格 ===== */

/* 暗夜毛玻璃 — 深色半透明 */
.template-dark-glass {
  font-family: 'LXGW WenKai', 'Noto Serif SC', serif !important;
  font-size: 1.05rem !important;
  line-height: 2.2 !important;
  background: rgba(10, 20, 30, 0.55) !important;
  color: rgba(200, 198, 198, 0.88) !important;
  border: 1px solid rgba(200, 198, 198, 0.06) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(30px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.2) !important;
}

/* 手写文艺风 — LXGW WenKai / Long Cang */
.template-handwrite {
  font-family: 'LXGW WenKai', 'Long Cang', cursive !important;
  font-size: 1.1rem !important;
  line-height: 2.4 !important;
  background: rgba(255, 252, 248, 0.65) !important;
  color: rgba(70, 60, 50, 0.85) !important;
  border: 1px solid rgba(200, 185, 160, 0.4) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05) !important;
}

.template-handwrite::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent,
    transparent 38px,
    rgba(160, 140, 120, 0.08) 38px,
    rgba(160, 140, 120, 0.08) 39px
  );
  pointer-events: none;
  border-radius: 16px;
}

/* 宋体古典风 — Noto Serif SC */
.template-serif {
  font-family: 'Noto Serif SC', serif !important;
  font-size: 1rem !important;
  line-height: 2.2 !important;
  background: rgba(255, 255, 255, 0.55) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-left: 3px solid rgba(140, 160, 200, 0.2) !important;
}

/* 暗夜宋体 — 深色底配思源宋体 */
.template-dark-serif {
  font-family: 'Noto Serif SC', serif !important;
  font-size: 1rem !important;
  font-weight: 300 !important;
  line-height: 2.3 !important;
  background: rgba(8, 15, 22, 0.6) !important;
  color: rgba(200, 198, 198, 0.85) !important;
  border: 1px solid rgba(200, 198, 198, 0.05) !important;
  border-left: 2px solid rgba(6, 88, 140, 0.2) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(25px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(25px) saturate(1.15) !important;
}

/* 毛玻璃默认 — 保底 */
.template-glass {
  font-family: 'LXGW WenKai', 'Noto Serif SC', serif !important;
  background: rgba(255, 255, 255, 0.55) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
}

/* 旧模板兼容 */
.template-parchment { composes: template-handwrite; }
.template-washi { composes: template-serif; }
.template-modern { composes: template-glass; }
.template-vintage { composes: template-handwrite; }

.template-parchment::before,
.template-vintage::after {
  display: none;
}

/* 信件内容 */
#letter-body {
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#letter-body.reveal {
  opacity: 1;
}

#letter-body p {
  margin-bottom: 1.2em;
  animation: paragraphFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

#letter-body p:nth-child(1) { animation-delay: 0.1s; }
#letter-body p:nth-child(2) { animation-delay: 0.4s; }
#letter-body p:nth-child(3) { animation-delay: 0.7s; }
#letter-body p:nth-child(4) { animation-delay: 1.0s; }
#letter-body p:nth-child(5) { animation-delay: 1.3s; }
#letter-body p:nth-child(6) { animation-delay: 1.6s; }

@keyframes paragraphFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

#letter-closing {
  display: none;
}

/* 再来一次 */
.letter-footer {
  flex-shrink: 0;
  margin-top: 40px;
  text-align: center;
}

#btn-restart {
  padding: 10px 32px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.06));
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-family: 'Noto Serif SC', serif;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.06);
}

#btn-restart:hover {
  border-color: var(--accent-dim);
  color: var(--text-primary);
  box-shadow: 0 2px 12px var(--accent-dim), inset 0 1px 0 rgba(255,255,255,0.1);
  transform: translateY(-2px);
}

/* ===== 答案之书 ===== */

/* 欢迎屏双按钮 */
.welcome-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.btn-answer {
  animation-delay: 0.8s !important;
}

/* 提问屏 */
#screen-answer-input {
  padding: 30px;
}

.answer-input-box {
  width: 100%;
  max-width: 460px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.answer-input-title {
  font-family: 'LXGW WenKai', 'Noto Serif SC', serif;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: 0.15em;
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.answer-input-hint {
  font-size: 0.85rem;
  color: var(--text-ghost);
  margin-bottom: 30px;
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both;
}

#answer-question {
  width: 100%;
  min-height: 100px;
  padding: 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  color: var(--text-primary);
  font-family: 'Noto Serif SC', serif;
  font-size: 0.95rem;
  line-height: 1.8;
  resize: none;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  margin-bottom: 24px;
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

#answer-question::placeholder {
  color: var(--text-ghost);
}

#answer-question:focus {
  border-color: var(--accent-dim);
  box-shadow: 0 0 30px rgba(140, 160, 200, 0.08);
}

#btn-flip-answer {
  margin-bottom: 16px;
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.45s both !important;
}

.answer-back-btn {
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.55s both;
}

/* 翻书动画屏 */
.answer-flip-container {
  text-align: center;
}

.answer-book {
  width: 120px;
  height: 160px;
  margin: 0 auto 30px;
  position: relative;
  perspective: 800px;
}

.answer-book-page {
  position: absolute;
  width: 50%;
  height: 100%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.answer-page-left {
  left: 0;
  border-radius: 8px 0 0 8px;
  transform-origin: right center;
}

.answer-page-right {
  right: 0;
  border-radius: 0 8px 8px 0;
  transform-origin: left center;
}

.answer-page-flipping {
  animation: pageFlip 1.8s ease-in-out infinite;
}

@keyframes pageFlip {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(-160deg); }
}

.answer-loading-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  letter-spacing: 0.3em;
  animation: breathe 2s ease-in-out infinite;
}

/* 结果展示屏 */
#screen-answer-result {
  padding: 30px;
  gap: 0;
}

.answer-result-card {
  width: 100%;
  max-width: 480px;
  padding: 60px 40px;
  border-radius: 16px;
  text-align: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(30px) saturate(1.3);
  -webkit-backdrop-filter: blur(30px) saturate(1.3);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: letterReveal 1s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .answer-result-card {
  background: rgba(10, 20, 30, 0.55);
  border: 1px solid rgba(200, 198, 198, 0.06);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* 答案大字 */
.answer-word {
  font-family: 'LXGW WenKai', 'Noto Serif SC', serif;
  font-size: clamp(2rem, 7vw, 3rem);
  color: var(--text-primary);
  letter-spacing: 0.2em;
  margin-bottom: 32px;
  opacity: 0;
  filter: blur(8px);
  animation: answerWordReveal 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

@keyframes answerWordReveal {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

/* 回应文字 */
.answer-response {
  font-family: 'Noto Serif SC', serif;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 2;
  color: var(--text-secondary);
  opacity: 0;
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 1s forwards;
}

/* 底部按钮 */
.answer-footer {
  margin-top: 40px;
  display: flex;
  gap: 16px;
  justify-content: center;
  opacity: 0;
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 1.4s forwards;
}

/* ===== 语言之间 ===== */

.btn-between {
  animation-delay: 1s !important;
}

/* 光球容器（覆盖整个屏幕，在卡牌后面） */
.orb-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* 光球 — 纯装饰，无文字，圆形发光体 */
.orb {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: none;
}

[data-theme="dark"] .orb {
  background: radial-gradient(circle, rgba(6, 88, 140, 0.6), transparent 70%);
}

.orb.float-in {
  opacity: 0.5;
}

/* 光球浮动 */
@keyframes orbDrift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(var(--dx1), var(--dy1)); }
  50% { transform: translate(var(--dx2), var(--dy2)); }
  75% { transform: translate(var(--dx3), var(--dy3)); }
  100% { transform: translate(0, 0); }
}

/* 洗牌加速旋转 — 光球绕中心飞 */
.orb.swirling {
  opacity: 0.7 !important;
  animation: orbSwirl var(--swirl-dur) linear infinite !important;
  box-shadow: 0 0 8px var(--accent-dim);
}

[data-theme="dark"] .orb.swirling {
  box-shadow: 0 0 8px rgba(6, 88, 140, 0.4);
}

@keyframes orbSwirl {
  0% { transform: rotate(0deg) translateX(var(--swirl-r)) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(var(--swirl-r)) rotate(-360deg); }
}

/* 光球飞入卡牌 */
.orb.fly-to-card {
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
  opacity: 0.9 !important;
  box-shadow: 0 0 20px var(--accent-dim) !important;
}

/* 卡牌收到光球时的闪光 */
.flip-card.glow-pulse {
  animation: cardGlow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes cardGlow {
  0% { box-shadow: none; }
  50% { box-shadow: 0 0 40px var(--accent-dim), 0 0 80px rgba(140, 160, 200, 0.15); }
  100% { box-shadow: none; }
}

/* 其余光球散开消失 */
.orb.scatter-away {
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
  opacity: 0 !important;
  transform: scale(0.3) !important;
  filter: blur(6px);
}

/* 抽牌按钮 */
.btn-draw {
  margin-top: 8px;
  margin-bottom: 16px;
  padding: 12px 52px !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.3em !important;
  z-index: 5;
}

.btn-draw.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
  transition: all 0.4s ease;
}

.between-stage {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 500px;
  padding: 0 20px;
}

.between-title {
  font-family: 'LXGW WenKai', 'Noto Serif SC', serif;
  font-size: clamp(1.4rem, 5vw, 2rem);
  color: var(--text-primary);
  letter-spacing: 0.2em;
  margin-bottom: 8px;
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.between-hint {
  font-size: 0.85rem;
  color: var(--text-ghost);
  margin-bottom: 40px;
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both;
}

/* 卡牌行 */
.cards-row {
  display: flex;
  gap: 32px;
  justify-content: center;
  margin-bottom: 32px;
}

.card-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.card-label {
  font-size: 0.8rem;
  color: var(--text-ghost);
  letter-spacing: 0.3em;
}

/* 翻牌卡片 */
.flip-card {
  width: 155px;
  height: 215px;
  perspective: 800px;
  cursor: default;
}

.flip-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 卡片背面 */
.flip-card-back {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .flip-card-back {
  background: rgba(10, 20, 30, 0.5);
  border: 1px solid rgba(200, 198, 198, 0.06);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.card-back-mark {
  font-family: 'Dancing Script', cursive;
  font-size: 2.5rem;
  color: var(--text-ghost);
  animation: breathe 2.5s ease-in-out infinite;
}

/* 卡片正面 */
.flip-card-front {
  transform: rotateY(180deg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font-family: 'LXGW WenKai', 'Noto Serif SC', serif;
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  color: var(--text-primary);
  letter-spacing: 0.1em;
  padding: 16px;
  word-break: break-word;
}

[data-theme="dark"] .flip-card-front {
  background: rgba(10, 20, 30, 0.6);
  border: 1px solid rgba(200, 198, 198, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* 倒计时 */
.between-countdown {
  font-family: 'Dancing Script', cursive;
  font-size: clamp(2.5rem, 8vw, 4rem);
  color: var(--text-primary);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  opacity: 0;
}

.between-countdown.active {
  opacity: 1;
  animation: countPulse 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes countPulse {
  0% { transform: scale(1.6); opacity: 0; filter: blur(4px); }
  40% { transform: scale(1); opacity: 1; filter: blur(0); }
  100% { transform: scale(0.95); opacity: 0.6; }
}

/* AI 评论 */
.between-comment {
  font-family: 'Noto Serif SC', serif;
  font-weight: 300;
  font-size: 0.92rem;
  line-height: 2;
  color: var(--text-secondary);
  max-width: 400px;
  min-height: 24px;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.between-comment.show {
  opacity: 1;
}

/* 底部按钮 */
.between-footer {
  margin-top: 32px;
  display: flex;
  gap: 14px;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.between-footer.show {
  opacity: 1;
}

/* ===== 塔罗 ===== */

.btn-tarot {
  animation-delay: 1.2s !important;
}

/* 提问屏 */
.tarot-input-box {
  text-align: center;
  width: 100%;
  max-width: 420px;
  padding: 0 24px;
}

.tarot-input-title {
  font-family: 'LXGW WenKai', 'Noto Serif SC', serif;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  color: var(--text-primary);
  letter-spacing: 0.3em;
  margin-bottom: 12px;
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.tarot-input-hint {
  font-size: 0.85rem;
  color: var(--text-ghost);
  margin-bottom: 36px;
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both;
}

#tarot-question {
  width: 100%;
  min-height: 90px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 18px;
  font-size: 0.95rem;
  color: var(--text-primary);
  resize: none;
  outline: none;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  margin-bottom: 24px;
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

/* 抽牌动画屏 */
.tarot-loading-container {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.tarot-card-spinning {
  width: 140px;
  height: 220px;
  border-radius: 14px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: tarotSpin 1.8s ease-in-out infinite;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .tarot-card-spinning {
  background: rgba(10, 20, 30, 0.5);
  border-color: rgba(200, 198, 198, 0.06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.tarot-card-back-display {
  font-family: 'Dancing Script', cursive;
  font-size: 3rem;
  color: var(--text-ghost);
}

@keyframes tarotSpin {
  0% { transform: rotateY(0deg) scale(1); }
  50% { transform: rotateY(180deg) scale(0.95); }
  100% { transform: rotateY(360deg) scale(1); }
}

.tarot-loading-text {
  font-family: 'Noto Serif SC', serif;
  font-weight: 300;
  font-size: 0.9rem;
  color: var(--text-ghost);
  letter-spacing: 0.4em;
  animation: breathe 2s ease-in-out infinite;
}

/* 结果屏 */
.tarot-result-stage {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tarot-card-img {
  width: 240px;
  height: auto;
  border-radius: 12px;
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.15),
    0 4px 16px rgba(0, 0, 0, 0.08);
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .tarot-card-img {
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.4),
    0 4px 16px rgba(0, 0, 0, 0.25);
}

.tarot-card-info {
  margin-top: 24px;
  text-align: center;
}

.tarot-name {
  font-family: 'LXGW WenKai', 'Noto Serif SC', serif;
  font-size: clamp(1.4rem, 5vw, 1.8rem);
  color: var(--text-primary);
  letter-spacing: 0.3em;
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

.tarot-name-en {
  font-family: 'Dancing Script', cursive;
  font-size: 1rem;
  color: var(--text-secondary);
  margin-top: 4px;
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.45s both;
}

.tarot-keywords {
  font-size: 0.75rem;
  color: var(--text-ghost);
  letter-spacing: 0.15em;
  margin-top: 8px;
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
}

/* AI 心情 */
.tarot-mood {
  font-family: 'Noto Serif SC', serif;
  font-weight: 300;
  font-size: 0.92rem;
  line-height: 2;
  color: var(--text-secondary);
  margin-top: 36px;
  max-width: 320px;
  min-height: 24px;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.tarot-mood.show {
  opacity: 1;
}

/* 底部 */
.tarot-footer {
  margin-top: 32px;
  display: flex;
  gap: 14px;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.tarot-footer.show {
  opacity: 1;
}


/* ===== 占卜选择屏 ===== */
.divination-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0 24px;
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}


.divination-options {
  display: flex;
  gap: 20px;
  margin-bottom: 36px;
}

.divination-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 24px;
  width: 150px;
  background: transparent;
  border: none;
  border-radius: 0;
  /* backdrop-filter: none; */
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: none;
}

.divination-card:hover {
  transform: translateY(-4px);
  box-shadow: none;
  /* border-color: none; */
}

.divination-card:active {
  transform: translateY(0);
}

[data-theme="dark"] .divination-card {
  background: transparent;
  border: none;
  box-shadow: none;
}

[data-theme="dark"] .divination-card:hover {
  box-shadow: none;
}

.divination-icon {
  width: 80px;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  
}

.divination-label {
  font-family: 'LXGW WenKai', 'Noto Serif SC', serif;
  font-size: 1.1rem;
  color: var(--text-primary);
  letter-spacing: 0.15em;
}

.divination-label-en {
  font-family: "Dancing Script", cursive;
  font-size: 0.85rem;
  color: var(--text-ghost);
  letter-spacing: 0.02em;
}

/* ===== 雷诺曼：提问屏 ===== */
.lenormand-input-box {
  text-align: center;
  width: 100%;
  max-width: 420px;
  padding: 0 24px;
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.lenormand-input-title {
  font-family: 'LXGW WenKai', 'Noto Serif SC', serif;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  color: var(--text-primary);
  letter-spacing: 0.3em;
  margin-bottom: 4px;
}

.lenormand-input-subtitle {
  font-family: 'Dancing Script', cursive;
  font-size: 1rem;
  color: var(--text-ghost);
  margin-bottom: 12px;
}

.lenormand-input-hint {
  font-family: 'Noto Serif SC', serif;
  font-weight: 300;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 28px;
  letter-spacing: 0.1em;
}

#lenormand-question {
  width: 100%;
  min-height: 90px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 18px;
  font-family: 'Noto Serif SC', serif;
  font-size: 0.95rem;
  color: var(--text-primary);
  resize: none;
  outline: none;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  margin-bottom: 24px;
}

[data-theme="dark"] #lenormand-question {
  background: rgba(10, 20, 30, 0.5);
  border-color: rgba(200, 198, 198, 0.06);
}

/* ===== 雷诺曼：抽牌动画 ===== */
.lenormand-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.lenormand-cards-spinning {
  display: flex;
  gap: 20px;
}

.lenormand-card-placeholder {
  width: 80px;
  height: 130px;
  border-radius: 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Dancing Script', cursive;
  font-size: 2.4rem;
  color: var(--text-ghost);
  animation: tarotSpin 1.8s ease-in-out infinite;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.lenormand-card-placeholder:nth-child(2) {
  animation-delay: 0.3s;
}

.lenormand-card-placeholder:nth-child(3) {
  animation-delay: 0.6s;
}

[data-theme="dark"] .lenormand-card-placeholder {
  background: rgba(10, 20, 30, 0.5);
  border-color: rgba(200, 198, 198, 0.06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.lenormand-loading-text {
  font-family: 'Noto Serif SC', serif;
  font-weight: 300;
  font-size: 0.9rem;
  color: var(--text-ghost);
  letter-spacing: 0.4em;
  animation: breathe 2s ease-in-out infinite;
}

/* ===== 雷诺曼：结果展示 ===== */
.lenormand-result-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.lenormand-cards-display {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 32px;
}

.lenormand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.lenormand-card:nth-child(3) {
  animation-delay: 0.3s;
  animation-fill-mode: both;
}

.lenormand-card:nth-child(5) {
  animation-delay: 0.6s;
  animation-fill-mode: both;
}

.lenormand-card-img {
  width: 120px;
  height: auto;
  border-radius: 10px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
}

.lenormand-card-name {
  font-family: 'LXGW WenKai', 'Noto Serif SC', serif;
  font-size: 1rem;
  color: var(--text-primary);
  letter-spacing: 0.2em;
}

.lenormand-card-name-en {
  font-family: 'Dancing Script', cursive;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.lenormand-card-keywords {
  font-size: 0.7rem;
  color: var(--text-ghost);
  letter-spacing: 0.1em;
}

.lenormand-card-connector {
  font-family: 'Dancing Script', cursive;
  font-size: 1.6rem;
  color: var(--text-ghost);
  align-self: center;
  margin-top: 60px;
  opacity: 0.5;
}

.lenormand-reading {
  font-family: 'Noto Serif SC', serif;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 2;
  color: var(--text-secondary);
  text-align: center;
  max-width: 340px;
  margin-top: 8px;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.lenormand-reading.show {
  opacity: 1;
}

.lenormand-footer {
  margin-top: 28px;
  display: flex;
  gap: 14px;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.lenormand-footer.show {
  opacity: 1;
}

/* ===== 悄悄话 ===== */
.lenormand-whisper-section {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.lenormand-whisper-section.show {
  opacity: 1;
}

.btn-whisper {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-ghost);
  font-family: 'LXGW WenKai', serif;
  font-size: 0.75rem;
  padding: 6px 18px;
  border-radius: 20px;
  cursor: pointer;
  letter-spacing: 0.15em;
  transition: all 0.3s ease;
}

.btn-whisper:hover {
  color: var(--text-secondary);
  border-color: var(--text-ghost);
}

.btn-whisper:disabled {
  opacity: 0.4;
  cursor: wait;
}

[data-theme="dark"] .btn-whisper {
  border-color: rgba(200, 198, 198, 0.08);
}

.lenormand-whisper {
  font-family: 'Noto Serif SC', serif;
  font-weight: 300;
  font-size: 0.88rem;
  line-height: 1.9;
  color: var(--text-secondary);
  text-align: center;
  max-width: 320px;
  font-style: italic;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.lenormand-whisper.show {
  opacity: 1;
}

/* ===== 卡牌放大 ===== */
.card-zoom-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.card-zoom-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.card-zoom-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: scale(0.85);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-zoom-overlay.active .card-zoom-content {
  transform: scale(1);
}

.card-zoom-img {
  width: 240px;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.3);
}

.card-zoom-name {
  font-family: 'LXGW WenKai', 'Noto Serif SC', serif;
  font-size: 1.3rem;
  color: #fff;
  letter-spacing: 0.25em;
  margin-top: 4px;
}

.card-zoom-name-en {
  font-family: 'Dancing Script', cursive;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
}

.card-zoom-keywords {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.12em;
}

.lenormand-card {
  cursor: pointer;
}

@media (max-width: 600px) {
  .card-zoom-img {
    width: 200px;
  }
}

/* ===== 雷诺曼 移动端 ===== */
@media (max-width: 600px) {
  .divination-options {
    flex-direction: column;
    gap: 14px;
  }
  .divination-card {
    width: 100%;
    max-width: 200px;
    padding: 20px 18px;
  }
  .lenormand-card-img {
    width: 85px;
  }
  .lenormand-cards-display {
    gap: 8px;
  }
  .lenormand-card-placeholder {
    width: 65px;
    height: 105px;
  }
  #lenormand-question {
    min-height: 70px;
    font-size: 0.9rem;
  }
  .lenormand-footer {
    flex-direction: column;
    gap: 10px;
  }
}

/* ===== 响应式 ===== */
@media (max-width: 600px) {
  .letter-paper {
  margin: auto 0;
  flex-shrink: 0;
    padding: 32px 24px;
    margin: 0 8px;
    font-size: 0.92rem !important;
    line-height: 2;
    min-height: auto;
    border-radius: 12px;
  }

  .letter-footer {
  flex-shrink: 0;
    margin-top: 24px;
    padding-bottom: 40px;
  }

  #btn-restart {
    padding: 14px 40px;
    font-size: 1rem;
  }

  .bubble.size-xl { font-size: 2rem; }
  .bubble.size-lg { font-size: 1.4rem; }

  #user-message {
    min-height: 100px;
    padding: 16px;
  }

  .welcome-title {
    text-shadow: 0 0 40px var(--accent-dim);
  }

  .answer-result-card {
    padding: 40px 24px;
    border-radius: 12px;
    margin: 0 8px;
  }

  #answer-question {
    min-height: 80px;
    padding: 16px;
  }

  .answer-footer {
    margin-top: 24px;
  }

  .flip-card {
    width: 135px;
    height: 185px;
  }

  .cards-row {
    gap: 20px;
  }

  .between-footer {
    margin-top: 20px;
  }

  .orb {
    width: 8px;
    height: 8px;
  }

  .tarot-card-img {
    width: 200px;
  }

  #tarot-question {
    min-height: 70px;
    padding: 16px;
  }

  .tarot-footer {
    margin-top: 20px;
  }
}


/* ═══════════════════════════════════════════════════════
   信友系统 — Pen Pal Styles
   ═══════════════════════════════════════════════════════ */

/* ── Mailbox Home ── */
.mailbox-home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px 12px;
  position: relative;
}

.mailbox-home-title {
  font-family: 'LXGW WenKai', 'Noto Serif SC', serif;
  font-size: 1.15rem;
  color: var(--text-primary);
  letter-spacing: 0.08em;
}

#screen-mailbox-home {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mailbox-home-footer {
  padding: 20px 16px 32px;
  text-align: center;
  margin-top: auto;
}

/* ── Pen Pal List ── */
.penpal-list {
  flex: 1;
  padding: 0 16px;
  overflow-y: auto;
}

.penpal-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}

.penpal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

.penpal-card:active {
  transform: translateY(0);
}

.penpal-card-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-dim), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'LXGW WenKai', serif;
  font-size: 1.1rem;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0;
}

.penpal-avatar-archived {
  opacity: 0.5;
}

.penpal-card-body {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.penpal-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.penpal-card-name {
  font-family: 'LXGW WenKai', 'Noto Sans SC', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.penpal-card-time {
  font-size: 0.72rem;
  color: var(--text-ghost);
  white-space: nowrap;
  flex-shrink: 0;
}

.penpal-card-preview {
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.penpal-card-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.penpal-card-archived {
  opacity: 0.6;
}

/* ── Add Pen Pal ── */
.penpal-add-section {
  padding: 8px 16px 4px;
  text-align: center;
}

.btn-add-penpal {
  display: inline-block;
  padding: 10px 28px;
  font-family: 'LXGW WenKai', sans-serif;
  font-size: 0.9rem;
  color: var(--accent);
  background: var(--glass-bg);
  border: 1px dashed var(--accent-dim);
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  letter-spacing: 0.06em;
}

.btn-add-penpal:hover {
  background: var(--accent-dim);
  color: var(--text-primary);
  border-style: solid;
}

/* ── Archive Section ── */
.archive-section {
  padding: 0 16px;
  margin-top: 8px;
}

.archive-toggle {
  font-size: 0.8rem;
  color: var(--text-ghost);
  cursor: pointer;
  padding: 8px 0;
  text-align: center;
  transition: color 0.3s;
  user-select: none;
}

.archive-toggle:hover {
  color: var(--text-secondary);
}

.archive-toggle::before {
  content: '\25b8 ';
}

.archive-toggle.open::before {
  content: '\25be ';
}

.archive-list {
  padding-top: 4px;
}

/* ── Mailbox Divider ── */
.mailbox-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px 8px;
  font-size: 0.75rem;
  color: var(--text-ghost);
  letter-spacing: 0.1em;
}

.mailbox-divider::before,
.mailbox-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--glass-border);
}

/* ── Legacy mailbox cards ── */
.legacy-mailbox {
  padding: 0 16px 24px;
}

.legacy-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 6px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  cursor: pointer;
  transition: transform 0.2s;
  opacity: 0.8;
}

.legacy-card:hover {
  transform: translateY(-1px);
  opacity: 1;
}

.legacy-card-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.legacy-card-body {
  min-width: 0;
  overflow: hidden;
}

.legacy-card-label {
  font-size: 0.72rem;
  color: var(--text-ghost);
}

.legacy-card-preview {
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Empty States ── */
.penpal-empty {
  text-align: center;
  padding: 48px 16px;
}

.penpal-empty-icon {
  font-size: 2.4rem;
  margin-bottom: 12px;
  opacity: 0.6;
}

.penpal-empty-text {
  font-family: 'LXGW WenKai', serif;
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.penpal-empty-hint {
  font-size: 0.78rem;
  color: var(--text-ghost);
  text-align: center;
  padding: 12px 0;
}

/* ── Restore Button ── */
.btn-restore {
  padding: 4px 12px;
  font-size: 0.72rem;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent-dim);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.btn-restore:hover {
  background: var(--accent-dim);
}

/* ═══════════════════════════════════════════════════════
   Pen Pal Create Screen
   ═══════════════════════════════════════════════════════ */
.penpal-create-box {
  max-width: 380px;
  margin: 0 auto;
  padding: 60px 24px 40px;
  text-align: center;
}

.penpal-create-title {
  font-family: 'LXGW WenKai', 'Noto Serif SC', serif;
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.penpal-create-hint {
  font-size: 0.8rem;
  color: var(--text-ghost);
  margin-bottom: 32px;
}

.penpal-input {
  width: 100%;
  padding: 14px 16px;
  font-family: 'LXGW WenKai', 'Noto Sans SC', sans-serif;
  font-size: 1.05rem;
  color: var(--text-primary);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  outline: none;
  text-align: center;
  letter-spacing: 0.12em;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: border-color 0.3s;
}

.penpal-input:focus {
  border-color: var(--accent);
}

.penpal-input::placeholder {
  color: var(--text-ghost);
  letter-spacing: 0.06em;
}

.penpal-name-count {
  font-size: 0.7rem;
  color: var(--text-ghost);
  text-align: right;
  margin-top: 6px;
  margin-bottom: 24px;
}

/* ═══════════════════════════════════════════════════════
   Pen Pal Detail Screen
   ═══════════════════════════════════════════════════════ */
#screen-penpal-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.penpal-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px 8px;
  flex-shrink: 0;
}

.penpal-detail-name {
  font-family: 'LXGW WenKai', 'Noto Serif SC', serif;
  font-size: 1.1rem;
  color: var(--text-primary);
  letter-spacing: 0.06em;
}

/* ── Tabs ── */
.penpal-tabs {
  display: flex;
  gap: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.penpal-tab {
  flex: 1;
  padding: 10px 0;
  font-family: 'LXGW WenKai', sans-serif;
  font-size: 0.88rem;
  color: var(--text-ghost);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.penpal-tab:hover {
  color: var(--text-secondary);
}

.penpal-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

/* ── Tab Content ── */
.penpal-tab-content {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.penpal-tab-content.active {
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* ── Letter Timeline ── */
.letter-timeline {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 8px;
  scroll-behavior: smooth;
}

.letter-timeline-empty {
  text-align: center;
  padding: 48px 0;
}

.letter-timeline-empty-icon {
  font-size: 2rem;
  margin-bottom: 10px;
  opacity: 0.5;
}

.letter-timeline-empty-text {
  font-family: 'LXGW WenKai', serif;
  font-size: 0.9rem;
  color: var(--text-ghost);
}

/* ── Letter Cards ── */
.letter-card {
  margin-bottom: 16px;
  padding: 18px 20px 14px;
  border-radius: 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  animation: letterFadeIn 0.4s ease;
  position: relative;
}

.letter-card-user {
  margin-left: 20px;
  border-left: 3px solid var(--accent-dim);
}

.letter-card-ai {
  margin-right: 20px;
  border-right: 3px solid var(--accent);
  background: linear-gradient(
    135deg,
    var(--glass-bg),
    rgba(140, 160, 200, 0.08)
  );
}

[data-theme="dark"] .letter-card-ai {
  background: linear-gradient(
    135deg,
    var(--glass-bg),
    rgba(140, 180, 255, 0.06)
  );
}

.letter-card-date {
  font-size: 0.68rem;
  color: var(--text-ghost);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

.letter-card-content {
  font-family: 'LXGW WenKai', 'Noto Serif SC', serif;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--text-primary);
}

.letter-card-content p {
  margin-bottom: 6px;
}

.letter-card-content p:last-child {
  margin-bottom: 0;
}

.letter-card-reveal {
  animation: letterReveal 0.8s ease;
}

@keyframes letterFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes letterReveal {
  0% { opacity: 0; transform: translateY(20px) scale(0.97); }
  50% { opacity: 0.7; transform: translateY(-4px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Letter Waiting ── */
.letter-waiting,
.fragment-waiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  gap: 10px;
  flex-shrink: 0;
}

.waiting-envelope {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 1.6rem;
  height: 2rem;
}

.writing-pen {
  display: inline-block;
  animation: penWrite 1.2s ease-in-out infinite;
  transform-origin: bottom right;
}

@keyframes penWrite {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  30% { transform: rotate(-8deg) translateY(-2px); }
  60% { transform: rotate(4deg) translateY(1px); }
}

.writing-dots {
  font-size: 1.2rem;
  letter-spacing: 2px;
  color: var(--text-ghost);
  animation: dotsWave 1.5s ease-in-out infinite;
}

@keyframes dotsWave {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.waiting-text {
  font-family: 'LXGW WenKai', serif;
  font-size: 0.88rem;
  color: var(--text-secondary);
  letter-spacing: 0.12em;
}

.waiting-time {
  font-size: 0.72rem;
  color: var(--text-ghost);
}

/* ── Letter Compose ── */
.letter-compose {
  padding: 10px 16px 20px;
  border-top: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  flex-shrink: 0;
}

.letter-compose textarea {
  width: 100%;
  min-height: 64px;
  max-height: 120px;
  padding: 12px 14px;
  font-family: 'LXGW WenKai', 'Noto Sans SC', sans-serif;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  resize: none;
  outline: none;
  transition: border-color 0.3s;
}

.letter-compose textarea:focus {
  border-color: var(--accent);
}

.letter-compose textarea::placeholder {
  color: var(--text-ghost);
}

.letter-compose-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.letter-char-count {
  font-size: 0.68rem;
  color: var(--text-ghost);
}

.btn-send {
  padding: 8px 20px;
  font-family: 'LXGW WenKai', sans-serif;
  font-size: 0.82rem;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.3s;
  letter-spacing: 0.06em;
}

.btn-send:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.btn-send:active {
  transform: translateY(0);
}

.btn-send:disabled {
  opacity: 0.4;
  cursor: wait;
  transform: none;
}

/* ═══════════════════════════════════════════════════════
   Fragments (Mind Back)
   ═══════════════════════════════════════════════════════ */
.fragment-intro {
  text-align: center;
  padding: 28px 16px 16px;
}

.fragment-intro-title {
  font-family: 'LXGW WenKai', serif;
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.fragment-intro-hint {
  font-size: 0.78rem;
  color: var(--text-ghost);
}


.fragment-scroll-area {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  min-height: 0;
}

.fragment-compose {
  flex-shrink: 0;
}

.fragment-compose {
  padding: 0 16px 12px;
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.fragment-compose textarea {
  flex: 1;
  min-height: 44px;
  max-height: 80px;
  padding: 10px 14px;
  font-family: 'LXGW WenKai', sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  resize: none;
  outline: none;
  transition: border-color 0.3s;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.fragment-compose textarea:focus {
  border-color: var(--accent);
}

.fragment-compose textarea::placeholder {
  color: var(--text-ghost);
}

.btn-fragment-send {
  padding: 10px 18px;
  border-radius: 14px;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.fragment-input-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fragment-input-wrap textarea {
  width: 100%;
}

.fragment-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
}

.btn-fragment-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.btn-fragment-img:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.fragment-image-preview {
  position: relative;
  max-width: 120px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
}

.fragment-image-preview img {
  width: 100%;
  display: block;
  border-radius: 10px;
}

.fragment-preview-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: white;
  border: none;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fragment-img {
  margin-top: 6px;
  max-width: 200px;
  border-radius: 10px;
  overflow: hidden;
}

.fragment-img img {
  width: 100%;
  display: block;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.fragment-img img:hover {
  opacity: 0.85;
}

.btn-reading, .btn-reading:disabled {
  animation: pulse-reading 1.5s ease-in-out infinite;
  cursor: wait !important;
  opacity: 1 !important;
}

@keyframes pulse-reading {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(0.6); }
}

/* ── Fragment Items ── */
.fragment-section-title {
  font-size: 0.72rem;
  color: var(--text-ghost);
  padding: 12px 16px 6px;
  letter-spacing: 0.1em;
}

.fragment-today {
  padding: 0 16px;
}

.fragment-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

[data-theme="light"] .fragment-item {
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.fragment-time {
  font-size: 0.68rem;
  color: var(--text-ghost);
  white-space: nowrap;
}

.fragment-text {
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.55;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  padding: 8px 14px;
  border-radius: 14px 4px 14px 14px;
  max-width: 80%;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* ── Fragment Digests (AI replies) ── */
.fragment-digests {
  padding: 0 16px 24px;
}

.fragment-digest {
  padding: 14px 16px;
  margin-top: 8px;
  background: linear-gradient(135deg, var(--glass-bg), rgba(140, 160, 200, 0.06));
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.fragment-digest-date {
  font-size: 0.68rem;
  color: var(--text-ghost);
  margin-bottom: 6px;
}

.fragment-digest-content {
  font-family: 'LXGW WenKai', serif;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-primary);
}

.fragment-digest-content p {
  margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════
   Pen Pal Menu Popup
   ═══════════════════════════════════════════════════════ */
.penpal-menu-popup {
  position: absolute;
  top: 56px;
  right: 16px;
  min-width: 120px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  z-index: 100;
  overflow: hidden;
  animation: menuSlideIn 0.2s ease;
}

@keyframes menuSlideIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.penpal-menu-item {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-size: 0.85rem;
  color: var(--text-primary);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
}

.penpal-menu-item:hover {
  background: var(--accent-dim);
}

/* ═══════════════════════════════════════════════════════
   Mail Settings Modal
   ═══════════════════════════════════════════════════════ */
#mail-settings-modal .settings-section {
  padding: 12px 0;
}

#mail-settings-modal .settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

#mail-settings-modal .settings-row span {
  font-size: 0.9rem;
  color: var(--text-primary);
}

#mail-settings-modal .settings-hint {
  font-size: 0.72rem;
  color: var(--text-ghost);
  margin-top: 4px;
}

/* Checkbox toggle */
#email-notify-toggle {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 22px;
  background: var(--glass-border);
  border-radius: 11px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
  outline: none;
}

#email-notify-toggle::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

#email-notify-toggle:checked {
  background: var(--accent);
}

#email-notify-toggle:checked::before {
  transform: translateX(18px);
}

/* ═══════════════════════════════════════════════════════
   Generic Icon Button (.btn-icon)
   ═══════════════════════════════════════════════════════ */
.btn-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 1.15rem;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}

.btn-icon:hover {
  background: var(--glass-bg);
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════
   Responsive / Mobile polish
   ═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .penpal-card {
    padding: 12px 14px;
  }
  .penpal-card-avatar {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }
  .letter-card {
    padding: 14px 16px 12px;
  }
  .letter-card-user {
    margin-left: 12px;
  }
  .letter-card-ai {
    margin-right: 12px;
  }
  .penpal-create-box {
    padding: 40px 20px 30px;
  }
  .letter-compose textarea {
    min-height: 56px;
  }
}

/* Make sure screens stretch full height */
#screen-mailbox-home.screen.active,
#screen-penpal-detail.screen.active {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
}

#screen-penpal-create.screen.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === 信件折叠+信纸风格 === */

/* 信封预览（折叠态） */
.letter-card-envelope {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
  cursor: pointer;
}
.letter-card-envelope-icon {
  font-size: 1.1rem;
  opacity: 0.5;
}
.letter-card-envelope-date {
  font-size: 0.68rem;
  color: var(--text-ghost);
  white-space: nowrap;
}
.letter-card-envelope-preview {
  font-size: 0.78rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-family: "LXGW WenKai", "Noto Serif SC", serif;
}
.letter-card-fold-hint {
  font-size: 0.65rem;
  color: var(--accent-dim);
  white-space: nowrap;
  opacity: 0.7;
}

/* 信纸内容（展开态） */
.letter-card-paper {
  display: none;
}
.letter-expanded .letter-card-paper {
  display: block;
}
.letter-expanded .letter-card-envelope {
  display: none;
}
.letter-expanded .letter-card-fold-hint {
  display: none;
}

/* 信纸样式覆盖原卡片 */
.letter-card {
  cursor: pointer;
  transition: all 0.3s ease;
}
.letter-card-user {
  cursor: default;
}

/* AI信折叠态精简 */
.letter-card-ai:not(.letter-expanded) {
  padding: 12px 16px;
  margin-right: 0;
  border-right: none;
  background: transparent;
  border: 1px dashed var(--glass-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.letter-card-ai:not(.letter-expanded):hover {
  border-color: var(--accent-dim);
  background: var(--glass-bg);
}

/* 展开态信纸风格 */
.letter-card.letter-expanded {
  padding: 24px 22px 18px;
  background: linear-gradient(
    180deg,
    rgba(255, 252, 248, 0.6),
    rgba(255, 250, 245, 0.4)
  );
  border: 1px solid rgba(200, 185, 165, 0.2);
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(160, 140, 120, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
[data-theme="dark"] .letter-card.letter-expanded {
  background: linear-gradient(
    180deg,
    rgba(30, 40, 55, 0.6),
    rgba(25, 35, 50, 0.4)
  );
  border-color: rgba(100, 120, 160, 0.15);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* 用户信左边条改为底部线 */
.letter-card-user.letter-expanded {
  border-left: none;
  margin-left: 0;
}


/* AI信展开态 */
.letter-card-ai.letter-expanded {
  border-right: none;
  margin-right: 0;
}


/* === 信件磨砂玻璃+动画+美化 === */

/* 隐藏头像 */
.penpal-card-avatar { display: none !important; }

/* 信件卡片磨砂玻璃 */
.letter-card.letter-expanded {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
  border-left: none !important;
  border-right: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
[data-theme="dark"] .letter-card.letter-expanded {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* 展开动画 */
.letter-card-paper {
  display: none;
  animation: letterUnfold 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.letter-expanded .letter-card-paper {
  display: block;
}
@keyframes letterUnfold {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    filter: blur(2px);
  }
  40% {
    opacity: 0.6;
    transform: translateY(-2px) scale(0.995);
    filter: blur(0.5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* 折叠态统一样式（AI和用户） */
.letter-card:not(.letter-expanded) {
  padding: 12px 16px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-left: none !important;
  border-right: none !important;
  background: transparent !important;
  border: 1px dashed var(--glass-border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  cursor: pointer;
}
.letter-card:not(.letter-expanded):hover {
  border-color: var(--accent-dim) !important;
  background: var(--glass-bg) !important;
}

/* 用户折叠态图标区分 */
.letter-card-user:not(.letter-expanded) .letter-card-envelope-preview {
  color: var(--text-secondary);
}

/* Tab 美化 */
.penpal-tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 8px 20px;
  margin-bottom: 8px;
}
.penpal-tab {
  background: none;
  border: none;
  color: var(--text-ghost);
  font-family: LXGW WenKai, serif;
  font-size: 0.88rem;
  padding: 8px 20px;
  cursor: pointer;
  position: relative;
  transition: color 0.3s;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.penpal-tab.active {
  color: var(--text-primary);
}
.penpal-tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

/* 碎片心声美化 */
.fragment-intro {
  text-align: center;
  padding: 28px 20px 16px;
}
.fragment-intro-title {
  font-family: LXGW WenKai, serif;
  font-size: 1rem;
  color: var(--text-primary);
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}
.fragment-intro-hint {
  font-size: 0.75rem;
  color: var(--text-ghost);
  letter-spacing: 0.06em;
}
.fragment-compose {
  padding: 0 20px 16px;
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.fragment-compose textarea {
  flex: 1;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 12px 16px;
  font-family: LXGW WenKai, serif;
  font-size: 0.85rem;
  color: var(--text-primary);
  resize: none;
  min-height: 42px;
  max-height: 100px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.3s;
}
.fragment-compose textarea:focus {
  outline: none;
  border-color: var(--accent-dim);
}
.fragment-compose textarea::placeholder {
  color: var(--text-ghost);
}
.btn-fragment-send {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  padding: 10px 18px !important;
  font-family: LXGW WenKai, serif;
  font-size: 0.82rem;
  color: var(--text-secondary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s;
  white-space: nowrap;
}
.btn-fragment-send:hover {
  border-color: var(--accent-dim) !important;
  color: var(--text-primary);
}

/* 写信区域美化 */
.letter-compose {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
.letter-compose textarea {
  font-family: LXGW WenKai, serif !important;
}

/* 信件标签样式 */
.letter-card-label {
  margin-left: 8px;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
}
.letter-label-ai {
  color: var(--accent);
}
.letter-label-user {
  color: var(--accent-dim);
}

/* 折叠/展开过渡 */
.letter-card {
  transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

/* === 移动端适配（信件+碎片+邮箱） === */
@media (max-width: 480px) {
  /* 信件折叠态 */
  .letter-card:not(.letter-expanded) {
    padding: 10px 14px !important;
  }
  .letter-card-envelope {
    gap: 8px;
  }
  .letter-card-envelope-date {
    font-size: 0.62rem;
  }
  .letter-card-envelope-preview {
    font-size: 0.72rem;
  }
  .letter-card-fold-hint {
    font-size: 0.6rem;
  }

  /* 信件展开态 */
  .letter-card.letter-expanded {
    padding: 18px 16px 14px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .letter-card-content {
    font-size: 0.82rem !important;
    line-height: 1.7 !important;
  }
  .letter-card-date {
    font-size: 0.62rem;
  }
  .letter-card-label {
    font-size: 0.6rem;
  }

  /* Tab栏 */
  .penpal-tabs {
    padding: 6px 12px;
  }
  .penpal-tab {
    font-size: 0.82rem;
    padding: 7px 16px;
  }

  /* 碎片心声 */
  .fragment-intro {
    padding: 20px 16px 12px;
  }
  .fragment-intro-title {
    font-size: 0.92rem;
  }
  .fragment-compose {
    padding: 0 16px 12px;
  }
  .fragment-compose textarea {
    font-size: 0.8rem;
    padding: 10px 14px;
    border-radius: 12px;
  }
  .btn-fragment-send {
    padding: 8px 14px !important;
    font-size: 0.78rem;
    border-radius: 12px !important;
  }

  /* 写信区域 */
  .letter-compose {
    padding: 10px 14px;
  }
  .letter-compose textarea {
    font-size: 0.82rem !important;
    padding: 10px 14px;
  }
  .letter-compose-footer {
    padding: 6px 0 0;
  }
  .letter-char-count {
    font-size: 0.65rem;
  }

  /* 邮箱列表 */
  .penpal-card {
    border-radius: 14px;
  }
  .penpal-card-name {
    font-size: 0.88rem;
  }
  .penpal-card-preview {
    font-size: 0.72rem;
  }

  /* 头部 */
  .penpal-detail-header {
    padding: 12px 14px;
  }
  .penpal-detail-name {
    font-size: 0.92rem;
  }
  .mailbox-header {
    padding: 12px 14px;
  }
}

/* 更小屏幕 */
@media (max-width: 360px) {
  .letter-card.letter-expanded {
    padding: 14px 12px 10px !important;
  }
  .letter-card-content {
    font-size: 0.78rem !important;
  }
  .penpal-tab {
    font-size: 0.78rem;
    padding: 6px 12px;
  }
  .fragment-compose {
    flex-direction: column;
    gap: 8px;
  }
  .btn-fragment-send {
    align-self: flex-end;
  }
}

/* 心切按钮 */
.btn-instant {
  background: transparent;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-size: 0.75rem;
  padding: 6px 14px;
  border-radius: 16px;
  cursor: pointer;
  font-family: 'LXGW WenKai', serif;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
  opacity: 0.6;
}
.btn-instant:hover {
  opacity: 1;
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-dim);
}
.btn-instant:active {
  transform: scale(0.95);
}

/* === 寄出+心切按钮布局 === */
.letter-compose-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}
.letter-compose-footer .letter-char-count {
  margin-right: auto;
}
.btn-send {
  white-space: nowrap;
}

/* 等待时隐藏寄出，只显示心切 */
.letter-waiting ~ .letter-compose .btn-send#btn-send-letter {
  /* JS handles disable */
}

/* ═══════════════════════════════════════════════════════
   泡沫邮箱 — 移动端完整适配
   ═══════════════════════════════════════════════════════ */

/* safe-area（iPhone 刘海 + 底部横条） */
@supports (padding-top: env(safe-area-inset-top)) {
  .mailbox-home-header,
  .penpal-detail-header {
    padding-top: calc(12px + env(safe-area-inset-top));
  }
  .letter-compose,
  .mailbox-home-footer {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* ── 中等屏幕 (≤600px) ── */
@media (max-width: 600px) {
  /* 邮箱主页 */
  .mailbox-home-header {
    padding: 14px 14px 10px;
  }
  .mailbox-home-title {
    font-size: 1.05rem;
  }
  .mailbox-home-footer {
    padding: 16px 14px 24px;
  }
  .mailbox-home-footer .btn-ghost {
    font-size: 0.82rem;
    padding: 10px 24px;
  }

  /* penpal 卡片 */
  .penpal-list {
    padding: 0 12px;
  }
  .penpal-card {
    padding: 12px 14px;
    gap: 10px;
    border-radius: 12px;
    margin-bottom: 6px;
  }
  .penpal-card-avatar {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }
  .penpal-card-name {
    font-size: 0.9rem;
  }
  .penpal-card-preview {
    font-size: 0.75rem;
  }
  .penpal-card-time {
    font-size: 0.68rem;
  }

  /* 来信封存 */
  .mailbox-divider {
    padding: 16px 12px 6px;
    font-size: 0.7rem;
  }
  .legacy-mailbox {
    padding: 0 12px 20px;
  }
  .legacy-card {
    padding: 8px 12px;
    gap: 8px;
    border-radius: 8px;
  }
  .legacy-card-date,
  .legacy-card-type {
    font-size: 0.68rem;
  }
  .legacy-card-text {
    font-size: 0.78rem;
  }

  /* 归档区 */
  .archive-section {
    padding: 0 12px;
  }

  /* 信友详情页 */
  .penpal-detail-header {
    padding: 14px 14px 6px;
  }
  .penpal-detail-name {
    font-size: 1rem;
  }

  /* Tab 栏 */
  .penpal-tabs {
    padding: 0 12px;
  }
  .penpal-tab {
    font-size: 0.84rem;
    padding: 8px 0;
  }

  /* 信件时间线 */
  .letter-timeline {
    padding: 12px 12px 8px;
  }
  .letter-card {
    padding: 16px 16px 12px;
    margin-bottom: 12px;
    border-radius: 14px;
  }
  .letter-card-user {
    margin-left: 12px;
  }
  .letter-card-ai {
    margin-right: 12px;
  }
  .letter-card-content {
    font-size: 0.85rem;
    line-height: 1.7;
  }
  .letter-card-date {
    font-size: 0.65rem;
  }

  /* 等待动画 */
  .letter-waiting {
    padding: 20px 12px;
  }
  .waiting-envelope {
    font-size: 1.6rem;
  }
  .waiting-text {
    font-size: 0.82rem;
  }

  /* 写信区域 */
  .letter-compose {
    padding: 8px 12px 16px;
  }
  .letter-compose textarea {
    min-height: 56px;
    max-height: 100px;
    padding: 10px 12px;
    font-size: 0.85rem;
    border-radius: 10px;
  }
  .letter-compose-footer {
    margin-top: 6px;
    gap: 8px;
  }
  .btn-send {
    padding: 7px 16px;
    font-size: 0.78rem;
    border-radius: 14px;
  }
  .btn-instant {
    padding: 5px 12px;
    font-size: 0.72rem;
    border-radius: 14px;
  }

  /* 碎片心声 */
  .fragment-intro {
    padding: 16px 12px 10px;
  }
  .fragment-intro-title {
    font-size: 0.9rem;
  }
  .fragment-intro-hint {
    font-size: 0.72rem;
  }
  .fragment-compose {
    padding: 0 12px 10px;
    gap: 8px;
  }
  .fragment-compose textarea {
    padding: 8px 12px;
    font-size: 0.82rem;
    border-radius: 10px;
  }
  .btn-fragment-send {
    padding: 8px 14px;
    font-size: 0.78rem;
    border-radius: 12px;
  }
  .fragment-today {
    padding: 0 12px;
  }
  .fragment-item {
    gap: 8px;
    padding: 6px 0;
  }
  .fragment-time {
    font-size: 0.64rem;
  }
  .fragment-text {
    font-size: 0.82rem;
  }
  .fragment-digests {
    padding: 0 12px 20px;
  }
  .fragment-digest {
    padding: 12px 14px;
    border-radius: 12px;
  }
  .fragment-digest-content {
    font-size: 0.82rem;
  }

  /* 创建页 */
  .penpal-create-box {
    padding: 40px 20px 30px;
    max-width: 90vw;
  }
  .penpal-create-title {
    font-size: 1.15rem;
  }
  .penpal-input {
    padding: 12px 14px;
    font-size: 1rem;
    border-radius: 10px;
  }

  /* 菜单弹出 */
  .penpal-menu-popup {
    top: 48px;
    right: 12px;
  }

  /* 邮件设置弹窗 */
  #mail-settings-modal .settings-row span {
    font-size: 0.85rem;
  }
}

/* ── 小屏幕 (≤400px) ── */
@media (max-width: 400px) {
  .mailbox-home-header {
    padding: 12px 10px 8px;
  }
  .penpal-list {
    padding: 0 10px;
  }
  .penpal-card {
    padding: 10px 12px;
    gap: 8px;
  }
  .penpal-card-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }
  .penpal-card-name {
    font-size: 0.85rem;
  }
  .penpal-card-preview {
    font-size: 0.7rem;
  }

  .penpal-detail-header {
    padding: 10px 10px 4px;
  }
  .penpal-tabs {
    padding: 0 10px;
  }
  .penpal-tab {
    font-size: 0.8rem;
    padding: 7px 0;
  }

  .letter-timeline {
    padding: 10px 10px 6px;
  }
  .letter-card {
    padding: 14px 14px 10px;
    margin-bottom: 10px;
    border-radius: 12px;
  }
  .letter-card-user {
    margin-left: 8px;
  }
  .letter-card-ai {
    margin-right: 8px;
  }
  .letter-card-content {
    font-size: 0.82rem;
    line-height: 1.65;
  }

  .letter-compose {
    padding: 6px 10px 14px;
  }
  .letter-compose textarea {
    min-height: 48px;
    padding: 8px 10px;
    font-size: 0.82rem;
  }
  .btn-send {
    padding: 6px 14px;
    font-size: 0.75rem;
  }
  .btn-instant {
    padding: 4px 10px;
    font-size: 0.68rem;
  }

  .fragment-compose {
    padding: 0 10px 8px;
  }
  .fragment-compose textarea {
    padding: 8px 10px;
    font-size: 0.78rem;
  }
  .fragment-today {
    padding: 0 10px;
  }
  .fragment-digests {
    padding: 0 10px 16px;
  }

  .legacy-mailbox {
    padding: 0 10px 16px;
  }
  .mailbox-divider {
    padding: 14px 10px 4px;
  }

  .penpal-create-box {
    padding: 32px 16px 24px;
  }
  .penpal-create-title {
    font-size: 1.05rem;
  }
  .penpal-input {
    font-size: 0.95rem;
  }
}

/* ── 键盘弹出时 compose 不被遮挡 ── */
@media (max-height: 500px) {
  .letter-compose {
    position: sticky;
    bottom: 0;
    z-index: 10;
  }
  .letter-timeline {
    padding-bottom: 4px;
  }
  .waiting-envelope {
    font-size: 1.2rem;
  }
  .letter-waiting {
    padding: 12px 8px;
    gap: 6px;
  }
}

/* ── 横屏 ── */
@media (max-height: 440px) and (orientation: landscape) {
  .penpal-detail-header {
    padding: 6px 12px 4px;
  }
  .penpal-tabs {
    padding: 0 12px;
  }
  .penpal-tab {
    padding: 5px 0;
    font-size: 0.78rem;
  }
  .letter-compose {
    padding: 4px 12px 8px;
  }
  .letter-compose textarea {
    min-height: 36px;
    max-height: 60px;
  }
  .fragment-intro {
    padding: 8px 12px 4px;
  }
  .fragment-compose {
    padding: 0 12px 6px;
  }
}

/* ── 触摸优化 ── */
@media (hover: none) and (pointer: coarse) {
  .penpal-card:hover {
    transform: none;
    box-shadow: none;
  }
  .penpal-card:active {
    transform: scale(0.98);
    transition: transform 0.1s;
  }
  .btn-send:hover {
    transform: none;
    opacity: 1;
  }
  .btn-send:active {
    transform: scale(0.95);
  }
  .btn-instant:hover {
    opacity: 0.6;
    box-shadow: none;
  }
  .btn-instant:active {
    transform: scale(0.93);
    opacity: 1;
  }
  .legacy-card:hover {
    transform: none;
  }
  .legacy-card:active {
    transform: scale(0.98);
  }
  .letter-card {
    -webkit-tap-highlight-color: transparent;
  }
  .penpal-menu-item {
    padding: 14px 16px;
  }
}

/* === 修复信件文字溢出 === */
.letter-card {
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.letter-card-content {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  max-width: 100%;
}
.letter-card-paper {
  max-width: 100%;
  overflow: hidden;
}
.letter-timeline {
  max-width: 100%;
  overflow-x: hidden;
}
#screen-penpal-detail {
  max-width: 100%;
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════
   来信封存详情 — 移动端修复
   ═══════════════════════════════════════════════════════ */
.mailbox-detail-content {
  align-items: flex-start !important;
  padding: 20px !important;
  box-sizing: border-box;
}

.mailbox-detail-content .letter-paper {
  margin: auto 0;
  flex-shrink: 0;
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 600px) {
  .mailbox-detail-content {
    padding: 12px !important;
  }
  .mailbox-detail-content .letter-paper {
  margin: auto 0;
  flex-shrink: 0;
    padding: 28px 20px;
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.9;
    min-height: auto;
    border-radius: 12px;
    width: 100%;
    max-width: 100%;
  }
  .mailbox-detail-content .letter-paper p {
    margin-bottom: 4px;
  }
  .mailbox-detail-content .answer-result-card {
    max-width: 100%;
    margin: 0;
    padding: 32px 20px;
    box-sizing: border-box;
  }
  .mailbox-detail-footer {
    padding: 12px 16px !important;
  }
}

@media (max-width: 400px) {
  .mailbox-detail-content {
    padding: 8px !important;
  }
  .mailbox-detail-content .letter-paper {
  margin: auto 0;
  flex-shrink: 0;
    padding: 24px 16px;
    font-size: 0.84rem;
    line-height: 1.8;
    border-radius: 10px;
  }
}

/* === 来信封存移动端修复 === */
.letter-paper {
  margin: auto 0;
  flex-shrink: 0;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
@media (max-width: 480px) {
  .letter-paper {
  margin: auto 0;
  flex-shrink: 0;
    padding: 28px 20px;
    max-width: 100%;
    font-size: 0.92rem;
    line-height: 1.9;
    min-height: auto;
  }
  .mailbox-detail-content {
    padding: 8px;
    max-width: 100%;
    overflow-x: hidden;
  }
}
.legacy-mailbox,
#legacy-mailbox {
  max-width: 100%;
  overflow-x: hidden;
}

/* === 修复邮箱首页布局 === */
.penpal-list {
  flex: none !important;
  overflow-y: visible !important;
}

/* 信友卡片和来信封存一致 */
.penpal-card {
  padding: 10px 14px;
  border-radius: 10px;
  gap: 10px;
}



/* 减少分割线上下间距 */
.mailbox-divider {
  margin-top: 16px !important;
  margin-bottom: 12px !important;
}

/* 移动端 */
@media (max-width: 480px) {
  .penpal-card {
    max-width: 100%;
    padding: 12px 14px;
  }
  .penpal-card-body {
    min-width: 0;
    overflow: hidden;
  }
  .penpal-card-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .penpal-card-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .legacy-mailbox .legacy-card {
    max-width: 100%;
  }
}

/* === 全局宽度约束 === */
#screen-mailbox-home {
  max-width: 100vw;
  overflow-x: hidden !important;
}
.penpal-list {
  padding: 0 16px !important;
  box-sizing: border-box;
  max-width: 100%;
}
.penpal-card {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.penpal-card-body {
  min-width: 0 !important;
  flex: 1;
  overflow: hidden;
}
.penpal-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 0;
}
.penpal-card-name {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1;
  min-width: 0;
}
.penpal-card-preview {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}
.penpal-card-time {
  flex-shrink: 0;
  white-space: nowrap;
}
.legacy-mailbox {
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box;
}
.legacy-card {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.legacy-card-preview {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-width: 0;
  flex: 1;
}

/* === 信友详情页全局约束 === */
#screen-penpal-detail {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  box-sizing: border-box;
}
.penpal-detail-header {
  box-sizing: border-box;
  max-width: 100%;
  padding: 12px 16px !important;
}
.penpal-tabs {
  max-width: 100%;
  box-sizing: border-box;
}
.penpal-tab-content {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}
.letter-timeline {
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box;
  padding: 0 14px !important;
}
.letter-card {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.letter-card-content {
  max-width: 100% !important;
  word-break: break-word !important;
}
.letter-compose {
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 14px !important;
}
.letter-compose textarea {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 碎片心声约束 */
.fragment-intro {
  max-width: 100%;
  box-sizing: border-box;
  padding: 20px 16px 12px !important;
}
.fragment-compose {
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 14px 12px !important;
}
.fragment-compose textarea {
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}
.fragment-scroll-area {
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box;
}
.fragment-today,
.fragment-digests {
  max-width: 100%;
  overflow-x: hidden;
  padding: 0 14px;
  box-sizing: border-box;
}

/* 等待区域 */
.letter-waiting {
  max-width: 100%;
  box-sizing: border-box;
}

/* === 碎片心声底部输入栏优化 === */
@media (max-width: 480px) {
  .fragment-compose {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 8px 14px 14px !important;
  }
  .fragment-input-wrap {
    width: 100%;
  }
  .fragment-input-wrap textarea {
    width: 100% !important;
    box-sizing: border-box;
    min-height: 40px;
    font-size: 0.82rem;
  }
  .fragment-actions {
    display: flex;
    width: 100%;
    gap: 8px;
    justify-content: flex-end;
  }
  .btn-fragment-img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }
  .btn-fragment-send {
    padding: 8px 14px !important;
    font-size: 0.78rem !important;
    border-radius: 10px !important;
  }

  /* 碎片消息气泡 */
  .fragment-item,
  .fragment-bubble {
    max-width: 85% !important;
    word-break: break-word;
  }

  /* AI回信卡片 */
  .fragment-digest {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .fragment-digest-content {
    font-size: 0.82rem !important;
    line-height: 1.7 !important;
    word-break: break-word;
  }
}

/* === 信友详情页返回按钮修复 === */
.penpal-detail-header .btn-back {
  position: static !important;
  flex-shrink: 0;
}
.penpal-detail-header {
  gap: 8px;
  padding: 14px 16px 8px !important;
  align-items: center;
}
.penpal-detail-name {
  flex: 1;
  text-align: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* === 碎片日期分隔线 === */
.fragment-day-divider {
  display: flex;
  align-items: center;
  margin: 16px 0 12px;
  gap: 12px;
}
.fragment-day-divider::before,
.fragment-day-divider::after {
  content: "";
  flex: 1;
  height: 0.5px;
  background: var(--glass-border);
  opacity: 0.6;
}
.fragment-day-divider span {
  font-size: 0.65rem;
  color: var(--text-ghost);
  letter-spacing: 0.08em;
  white-space: nowrap;
  font-family: "LXGW WenKai", serif;
}

/* Fragment context menu (long press) */
.fragment-context-menu {
  position: fixed;
  z-index: 9999;
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 6px 0;
  min-width: 110px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 2px 12px rgba(0, 0, 0, 0.04);
  display: none;
  animation: menuFadeIn 0.15s ease-out;
}
@keyframes menuFadeIn {
  from { opacity: 0; transform: scale(0.92) translateY(4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.frag-menu-item {
  padding: 11px 20px;
  font-size: 0.85rem;
  color: var(--text-primary);
  cursor: pointer;
  font-family: 'LXGW WenKai', sans-serif;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.frag-menu-item:hover {
  background: rgba(100, 140, 200, 0.08);
}
.frag-menu-item:active {
  background: rgba(100, 140, 200, 0.14);
}
.frag-menu-danger {
  color: #d4686a;
}
.frag-menu-danger:hover {
  background: rgba(212, 104, 106, 0.08);
}

.fragment-item {
  -webkit-user-select: none;
  user-select: none;
}

/* Penpal menu danger item */
.penpal-menu-danger {
  color: #e57373 !important;
}

/* Mailbox empty guide button */
.mailbox-empty-btn {
  padding: 10px 28px;
}

/* Fragment AI reaction */
.fragment-reaction {
  font-size: 0.85rem;
  margin-top: 2px;
  opacity: 0;
  animation: reactionAppear 0.4s ease-out forwards;
}

@keyframes reactionAppear {
  0% { opacity: 0; transform: scale(0.5); }
  50% { transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}

/* Instant button sending state */
.btn-sending {
  animation: sendingPulse 1.2s ease-in-out infinite !important;
}
@keyframes sendingPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Mailbox user input display */
.mailbox-user-input {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-family: 'LXGW WenKai', serif;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: pre-wrap;
}
.mailbox-user-label {
  display: inline-block;
  font-size: 0.68rem;
  color: var(--text-ghost);
  letter-spacing: 0.1em;
  margin-right: 8px;
  padding: 1px 6px;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
}

/* Letter card reveal animation */
.letter-card-reveal {
  animation: cardReveal 0.6s ease-out;
}
@keyframes cardReveal {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 信箱详情 — 用户问题（统一在卡片内） */
.answer-question {
  font-family: 'LXGW WenKai', serif;
  font-size: 0.85rem;
  color: var(--text-ghost);
  text-align: center;
  line-height: 1.8;
  letter-spacing: 0.05em;
  white-space: pre-wrap;
}
.answer-divider {
  width: 40px;
  height: 1px;
  background: var(--glass-border);
  margin: 20px auto;
}

/* 信箱详情 — 用户卡片（与 AI 卡片同风格） */
.mailbox-user-card {
  width: 100%;
  max-width: 480px;
  padding: 28px 32px;
  margin-top: 16px;
  border-radius: 16px;
  text-align: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(30px) saturate(1.3);
  -webkit-backdrop-filter: blur(30px) saturate(1.3);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}
[data-theme="dark"] .mailbox-user-card {
  background: rgba(10, 20, 30, 0.4);
  border: 1px solid rgba(200, 198, 198, 0.05);
}
.mailbox-user-card-label {
  font-size: 0.65rem;
  color: var(--text-ghost);
  letter-spacing: 0.15em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.mailbox-user-card-text {
  font-family: 'LXGW WenKai', serif;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.8;
  white-space: pre-wrap;
}
@media (max-width: 600px) {
  .mailbox-user-card {
    max-width: 100%;
    padding: 20px;
    margin-top: 12px;
  }
}

/* 信箱详情内容 — 纵向排列 */
.mailbox-detail-content {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-top: 40px !important;
}
.mailbox-user-card-label { display: none; }

/* 信件删除按钮 */
.letter-card-actions {
  text-align: right;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--glass-border);
}
.letter-delete-btn {
  font-size: 0.7rem;
  color: var(--text-ghost);
  cursor: pointer;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}
.letter-delete-btn:hover {
  color: #e57373;
  background: rgba(229, 115, 115, 0.1);
}

/* ═══════════════════════════════════════════════════════
   统一系统提示 — Toast + Dialog
   ═══════════════════════════════════════════════════════ */
.fizz-toast {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 20px;
  pointer-events: none;
}
.fizz-toast-item {
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 12px 24px;
  font-family: 'LXGW WenKai', sans-serif;
  font-size: 0.82rem;
  color: var(--text-primary);
  letter-spacing: 0.03em;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  animation: toastIn 0.3s ease-out;
  pointer-events: auto;
}
.fizz-toast-item.fizz-toast-error {
  border-color: rgba(212,104,106,0.3);
  color: #d4686a;
}
.fizz-toast-item.fizz-toast-out {
  animation: toastOut 0.25s ease-in forwards;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-12px); }
}

/* Dialog */
.fizz-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-out;
}
.fizz-dialog {
  background: var(--glass-bg);
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 28px 24px 20px;
  width: 280px;
  max-width: 85vw;
  box-shadow: 0 12px 48px rgba(0,0,0,0.12);
  animation: menuFadeIn 0.25s ease-out;
}
.fizz-dialog-msg {
  font-family: 'LXGW WenKai', sans-serif;
  font-size: 0.88rem;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.7;
  margin-bottom: 20px;
  white-space: pre-wrap;
}
.fizz-dialog-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
  font-family: 'LXGW WenKai', sans-serif;
  font-size: 0.85rem;
  outline: none;
  margin-bottom: 18px;
  box-sizing: border-box;
}
.fizz-dialog-input:focus {
  border-color: var(--accent-dim);
}
.fizz-dialog-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.fizz-dialog-btn {
  flex: 1;
  padding: 10px 0;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: transparent;
  font-family: 'LXGW WenKai', sans-serif;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.05em;
}
.fizz-btn-cancel {
  color: var(--text-ghost);
}
.fizz-btn-cancel:hover {
  background: rgba(100,140,200,0.06);
}
.fizz-btn-confirm {
  color: var(--text-primary);
  border-color: var(--accent-dim);
}
.fizz-btn-confirm:hover {
  background: rgba(100,140,200,0.1);
}
.fizz-btn-danger {
  color: #d4686a;
  border-color: rgba(212,104,106,0.3);
}
.fizz-btn-danger:hover {
  background: rgba(212,104,106,0.08);
}

/* Toggle arrow for 来信封存 */
.mailbox-divider-toggle {
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s;
}
.mailbox-divider-toggle:hover {
  opacity: 0.7;
}
.toggle-arrow {
  font-size: 0.7rem;
  transition: transform 0.2s;
}

/* Test mode toggle */
.test-mode-toggle {
  padding: 8px 16px;
  text-align: center;
}
.test-mode-toggle label {
  font-size: 0.72rem;
  color: var(--text-ghost);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px dashed var(--glass-border);
  transition: all 0.2s;
}
.test-mode-toggle input[type=checkbox] {
  accent-color: #e57373;
}
.test-mode-active label {
  color: #e57373;
  border-color: rgba(229, 115, 115, 0.3);
  background: rgba(229, 115, 115, 0.06);
}

/* ========== 字卡传讯 ========== */

/* 输入屏 */
/* ===== 字卡传讯 — 聊天界面 ===== */

.wc-chat-container {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 2;
}

/* 顶部栏 */
/* 字卡聊天顶栏 */
.wc-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 18px;
}
.wc-chat-title {
  font-family: 'Noto Serif SC', serif;
  font-weight: 300;
  font-size: 1rem;
  color: var(--text-primary);
  letter-spacing: 0.2em;
}
.wc-back-btn, .wc-clear-btn, .wc-save-btn {
  background: none;
  border: none;
  color: var(--text-ghost);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px 8px;
  font-family: 'Noto Serif SC', serif;
  letter-spacing: 0.05em;
  transition: color 0.2s;
}
.wc-back-btn:hover, .wc-clear-btn:hover, .wc-save-btn:hover {
  color: var(--text-primary);
}

/* 聊天消息区 */
.wc-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
}

/* 系统消息/提示 */
.wc-system-msg {
  text-align: center;
  font-family: 'Noto Serif SC', serif;
  font-weight: 300;
  font-size: 0.8rem;
  color: var(--text-ghost);
  letter-spacing: 0.15em;
  padding: 20px 0;
}

/* 用户消息 — 右侧 */
.wc-msg-user {
  align-self: flex-end;
  max-width: 70%;
  padding: 11px 16px;
  border-radius: 20px 20px 4px 20px;
  background: linear-gradient(135deg, rgba(140, 160, 200, 0.14) 0%, rgba(120, 145, 195, 0.08) 100%);
  border: 1px solid rgba(140, 160, 200, 0.15);
  box-shadow: 0 1px 6px rgba(140, 160, 200, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: 'Noto Serif SC', serif;
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-primary);
  opacity: 0;
  animation: wcMsgIn 0.4s ease forwards;
  transition: box-shadow 0.3s;
}

/* TA的回复 — 左侧 */
.wc-msg-reply {
  align-self: flex-start;
  max-width: 60%;
  padding: 11px 18px;
  border-radius: 20px 20px 20px 4px;
  background: linear-gradient(135deg, var(--glass-bg) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  font-family: 'Noto Serif SC', serif;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-primary);
  letter-spacing: 0.12em;
  opacity: 0;
  animation: wcMsgIn 0.6s ease forwards;
  transition: box-shadow 0.3s;
}

@keyframes wcMsgIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 正在输入… 动画 */
.wc-typing {
  align-self: flex-start;
  display: flex;
  gap: 5px;
  padding: 10px 18px;
  margin-left: 18px;
  margin-bottom: 4px;
}
.wc-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-ghost);
  animation: wcTypingBounce 1.4s ease-in-out infinite;
}
.wc-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.wc-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes wcTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
  30% { transform: translateY(-6px); opacity: 0.8; }
}

/* 底部输入区 */
.wc-chat-input-area {
  padding: 12px 18px 20px;
  border-top: 1px solid var(--glass-border);
  display: flex;
  gap: 10px;
  align-items: center;
}
.wc-chat-input {
  flex: 1;
  padding: 12px 18px;
  border-radius: 22px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--text-primary);
  font-family: 'Noto Serif SC', serif;
  font-weight: 300;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.3s;
}
.wc-chat-input:focus {
  border-color: var(--accent-dim);
}
.wc-chat-input::placeholder {
  color: var(--text-ghost);
  font-weight: 300;
}
.wc-send-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--text-secondary);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.wc-send-btn:active {
  transform: scale(0.92);
  background: var(--accent-dim);
/* 消息队列区域 */
.wc-queue-area {
  padding: 8px 18px;
  border-top: 1px solid var(--glass-border);
  background: var(--glass-bg);
}
.wc-queue-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.wc-queue-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 14px;
  background: var(--accent-dim, rgba(100,100,100,0.15));
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-family: 'Noto Serif SC', serif;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wc-queue-item-remove {
  cursor: pointer;
  opacity: 0.5;
  font-size: 0.7rem;
  margin-left: 2px;
}
.wc-queue-item-remove:hover { opacity: 1; }
.wc-queue-send-all {
  width: 100%;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid var(--glass-border);
  background: var(--accent-dim, rgba(100,100,100,0.15));
  color: var(--text-primary);
  font-family: 'Noto Serif SC', serif;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}
.wc-queue-send-all:active {
  transform: scale(0.97);
}
.wc-queue-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.wc-queue-btn:active {
  transform: scale(0.92);
  background: var(--accent-dim);
}
}

/* 深色模式 */
[data-theme="dark"] .wc-msg-user {
  background: rgba(140, 160, 200, 0.08);
  border-color: rgba(140, 160, 200, 0.1);
}
[data-theme="dark"] .wc-msg-reply {
  background: rgba(10, 20, 30, 0.5);
  border-color: rgba(200, 198, 198, 0.06);
}
[data-theme="dark"] .wc-chat-input {
  background: rgba(10, 20, 30, 0.5);
  border-color: rgba(200, 198, 198, 0.06);
}
[data-theme="dark"] .wc-send-btn {
  background: rgba(10, 20, 30, 0.5);
  border-color: rgba(200, 198, 198, 0.06);
}

/* 安全区 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .wc-chat-input-area {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* 移动端 */
@media (max-width: 600px) {
  .wc-msg-user, .wc-msg-reply { max-width: 80%; }
  .wc-chat-messages { padding: 16px 14px; }
  .wc-msg-reply { font-size: 0.88rem; }
}


/* ===== 三张卡展示区 — 屏幕正中 ===== */
.wordcard-cards-display {
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 32px 20px;
  min-height: 200px;
}

/* 单张卡片（翻转） */
.wordcard-card {
  width: 105px;
  height: 150px;
  perspective: 1000px;
  cursor: default;
  opacity: 0;
  animation: wordcardReveal 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.wordcard-card:nth-child(2) { animation-delay: 0.4s; }
.wordcard-card:nth-child(3) { animation-delay: 0.8s; }

@keyframes wordcardReveal {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.wordcard-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.wordcard-card.flipped .wordcard-card-inner {
  transform: rotateY(180deg);
}

.wordcard-card-front,
.wordcard-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 卡背 — 磨砂玻璃 */
.wordcard-card-front {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  font-family: 'Dancing Script', cursive;
  font-size: 2rem;
  color: var(--text-ghost);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* 卡面（文字）— 磨砂玻璃 + 优雅字体 */
.wordcard-card-back {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transform: rotateY(180deg);
  font-family: 'Noto Serif SC', serif;
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--text-primary);
  padding: 14px;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.15em;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ===== 深色模式卡片 ===== */
[data-theme="dark"] .wordcard-card-front {
  background: rgba(10, 20, 30, 0.6);
  border-color: rgba(200, 198, 198, 0.08);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .wordcard-card-back {
  background: rgba(10, 20, 30, 0.6);
  border-color: rgba(200, 198, 198, 0.1);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .wc-bubble-right {
  background: rgba(140, 160, 200, 0.08);
  border-color: rgba(140, 160, 200, 0.12);
}
[data-theme="dark"] .wc-bubble-left {
  background: rgba(10, 20, 30, 0.5);
  border-color: rgba(200, 198, 198, 0.06);
}

/* ===== 底部输入区 ===== */
.wordcard-bottom {
  flex: 0 0 auto;
  padding: 16px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.wordcard-round-info {
  font-family: 'Dancing Script', cursive;
  font-size: 0.8rem;
  color: var(--text-ghost);
  letter-spacing: 0.15em;
}
.wordcard-input-row {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 380px;
}
.wordcard-next-field {
  flex: 1;
  padding: 12px 16px;
  border-radius: 22px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-primary);
  font-family: 'Noto Serif SC', serif;
  font-weight: 300;
  font-size: 0.88rem;
  outline: none;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: border-color 0.3s;
}
.wordcard-next-field:focus {
  border-color: var(--accent-dim);
}
.wordcard-next-field::placeholder { opacity: 0.3; }
.wordcard-send-btn {
  padding: 10px 22px;
  border-radius: 22px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-secondary);
  font-family: 'Noto Serif SC', serif;
  font-weight: 300;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  letter-spacing: 0.1em;
}
.wordcard-send-btn:hover {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
}
.wordcard-bottom-actions {
  display: flex;
  gap: 16px;
}

/* 首页按钮 — 统一风格 */
.btn-wordcard {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
}

[data-theme="dark"] .wordcard-next-field,
[data-theme="dark"] .wordcard-send-btn {
  background: rgba(10, 20, 30, 0.5);
  border-color: rgba(200, 198, 198, 0.06);
}

/* ===== 移动端 ===== */
@media (max-width: 600px) {
  .wordcard-card {
    width: 88px;
    height: 128px;
  }
  .wordcard-cards-display {
    gap: 14px;
    padding: 24px 16px;
  }
  .wordcard-card-back {
    font-size: 0.92rem;
    padding: 10px;
    letter-spacing: 0.1em;
  }
  .wc-bubble {
    font-size: 0.84rem;
    max-width: 80%;
  }
  .wordcard-next-field {
    font-size: 0.84rem;
  }
  .wordcard-input-row {
    max-width: 100%;
  }
}

  #wordcard-question { width: 85%; }
  .wordcard-chat-area { max-height: 28vh; }
}

/* ═══ 自定义卡片管理面板 ═══ */

/* 卡组按钮（聊天顶栏） */
.wc-btn-char {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  background: linear-gradient(180deg, var(--text-primary), var(--text-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}
.wc-btn-dot {
  display: inline-block;
  font-size: 0.5rem;
  opacity: 0.35;
  margin: 0 1px;
  vertical-align: middle;
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
}
.wc-manage-btn:hover .wc-btn-char {
  background: linear-gradient(180deg, var(--accent), var(--accent-dim));
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.22em;
}
.wc-manage-btn:hover .wc-btn-dot {
  opacity: 0.7;
}
.wc-manage-btn.has-custom .wc-btn-char {
  background: linear-gradient(180deg, var(--accent), var(--text-primary));
  -webkit-background-clip: text;
  background-clip: text;
}
.wc-manage-btn {
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.06));
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-family: 'Noto Serif SC', serif;
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.06);
}
.wc-manage-btn:hover {
  border-color: var(--accent-dim);
  color: var(--text-primary);
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.1));
  transform: translateY(-1px);
}
.wc-manage-btn:active { transform: scale(0.97); }
.wc-manage-btn.has-custom {
  border-color: var(--accent-dim);
  color: var(--accent);
}

/* 面板全屏 overlay */
.wc-card-panel {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg-deep);
  z-index: 20;
  display: flex;
  flex-direction: column;
  animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 面板顶栏 */
.wc-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--glass-border);
}
.wc-panel-title {
  font-family: 'LXGW WenKai', serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: 0.15em;
}
.wc-panel-close {
  background: none;
  border: none;
  color: var(--text-ghost);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.3s;
}
.wc-panel-close:hover { color: var(--text-secondary); }

/* 模式切换 tabs */
.wc-mode-tabs {
  display: flex;
  gap: 0;
  padding: 16px 20px 0;
}
.wc-mode-tab {
  flex: 1;
  padding: 10px 0;
  font-family: 'Noto Serif SC', serif;
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-ghost);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.wc-mode-tab:first-child { border-radius: 14px 0 0 14px; }
.wc-mode-tab:last-child { border-radius: 0 14px 14px 0; }
.wc-mode-tab:not(:first-child) { border-left: none; }
.wc-mode-tab.active {
  background: linear-gradient(135deg, var(--glass-bg), rgba(255,255,255,0.08));
  color: var(--text-primary);
  border-color: var(--accent-dim);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.1);
}
.wc-mode-tab:hover:not(.active) {
  color: var(--text-secondary);
}

/* 添加区 */
.wc-add-area { padding: 16px 20px 10px; }
.wc-add-row { display: flex; gap: 10px; }
.wc-add-input {
  flex: 1;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--text-primary);
  font-family: 'Noto Serif SC', serif;
  outline: none;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.wc-add-input:focus {
  border-color: var(--accent-dim);
  box-shadow: 0 0 20px rgba(140, 160, 200, 0.08);
}
.wc-add-input::placeholder { color: var(--text-ghost); }
.wc-add-btn {
  background: linear-gradient(135deg, var(--glass-bg), rgba(255,255,255,0.08));
  border: 1px solid var(--accent-dim);
  color: var(--text-primary);
  font-size: 1.1rem;
  width: 40px; height: 40px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.1);
}
.wc-add-btn:hover {
  background: linear-gradient(135deg, var(--accent-dim), rgba(255,255,255,0.06));
  border-color: var(--accent);
  box-shadow: 0 4px 20px var(--accent-dim);
  transform: translateY(-1px);
}
.wc-add-btn:active { transform: scale(0.97); }

.wc-batch-toggle { padding: 8px 0; }
.wc-batch-link {
  background: none;
  border: none;
  color: var(--text-ghost);
  font-size: 0.85rem;
  cursor: pointer;
  font-family: 'Noto Serif SC', serif;
  font-weight: 300;
  letter-spacing: 0.05em;
  transition: color 0.3s;
}
.wc-batch-link:hover { color: var(--text-secondary); }
.wc-batch-area { margin-top: 8px; }
.wc-batch-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--text-primary);
  font-family: 'Noto Serif SC', serif;
  resize: vertical;
  outline: none;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.wc-batch-input:focus {
  border-color: var(--accent-dim);
  box-shadow: 0 0 20px rgba(140, 160, 200, 0.08);
}
.wc-batch-input::placeholder { color: var(--text-ghost); }
.wc-batch-add-btn {
  margin-top: 8px;
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, var(--glass-bg), rgba(255,255,255,0.08));
  border: 1px solid var(--accent-dim);
  border-radius: 20px;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  cursor: pointer;
  font-family: 'Noto Serif SC', serif;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.1);
}
.wc-batch-add-btn:hover {
  background: linear-gradient(135deg, var(--accent-dim), rgba(255,255,255,0.06));
  border-color: var(--accent);
  box-shadow: 0 4px 20px var(--accent-dim);
  transform: translateY(-1px);
}

/* 卡片计数 */
.wc-card-count {
  padding: 8px 20px;
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--text-ghost);
  font-family: 'Noto Serif SC', serif;
  letter-spacing: 0.08em;
}

/* 卡片列表 */
.wc-card-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
  -webkit-overflow-scrolling: touch;
}
.wc-card-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--text-primary);
  font-family: 'Noto Serif SC', serif;
  letter-spacing: 0.05em;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.wc-card-chip:hover {
  border-color: var(--accent-dim);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.wc-card-chip-del {
  background: none;
  border: none;
  color: var(--text-ghost);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.4;
  transition: all 0.3s;
}
.wc-card-chip-del:hover {
  opacity: 1;
  color: #e57373;
}

/* 模式标签（聊天顶栏） */
.wc-mode-badge {
  font-size: 0.6rem;
  font-weight: 300;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--tag-bg);
  border: 1px solid var(--tag-border);
  color: var(--accent);
  margin-left: 8px;
  font-family: 'Noto Serif SC', serif;
  letter-spacing: 0.05em;
}

/* 暗色主题覆盖 */
[data-theme="dark"] .wc-card-panel {
  background: var(--bg-deep);
}
[data-theme="dark"] .wc-mode-tab.active {
  background: linear-gradient(135deg, rgba(10, 50, 90, 0.4), rgba(20, 60, 100, 0.3));
  border-color: rgba(140, 180, 220, 0.2);
}
[data-theme="dark"] .wc-add-input {
  background: rgba(15, 55, 95, 0.3);
  border-color: rgba(140, 180, 220, 0.12);
}
[data-theme="dark"] .wc-add-input:focus {
  background: rgba(15, 55, 95, 0.4);
  border-color: rgba(100, 160, 220, 0.4);
  box-shadow: 0 0 20px rgba(6, 88, 140, 0.15);
}
[data-theme="dark"] .wc-batch-input {
  background: rgba(15, 55, 95, 0.3);
  border-color: rgba(140, 180, 220, 0.12);
}
[data-theme="dark"] .wc-batch-input:focus {
  background: rgba(15, 55, 95, 0.4);
  border-color: rgba(100, 160, 220, 0.4);
  box-shadow: 0 0 20px rgba(6, 88, 140, 0.15);
}
[data-theme="dark"] .wc-add-btn {
  background: linear-gradient(135deg, rgba(10, 55, 100, 0.4), rgba(20, 65, 110, 0.3));
  border-color: rgba(140, 180, 220, 0.2);
}
[data-theme="dark"] .wc-add-btn:hover {
  background: linear-gradient(135deg, rgba(6, 88, 140, 0.35), rgba(20, 70, 120, 0.3));
  border-color: rgba(100, 160, 220, 0.35);
  box-shadow: 0 4px 24px rgba(6, 88, 140, 0.2);
}
[data-theme="dark"] .wc-batch-add-btn {
  background: linear-gradient(135deg, rgba(10, 55, 100, 0.4), rgba(20, 65, 110, 0.3));
  border-color: rgba(140, 180, 220, 0.2);
}
[data-theme="dark"] .wc-batch-add-btn:hover {
  background: linear-gradient(135deg, rgba(6, 88, 140, 0.35), rgba(20, 70, 120, 0.3));
  border-color: rgba(100, 160, 220, 0.35);
  box-shadow: 0 4px 24px rgba(6, 88, 140, 0.2);
}
[data-theme="dark"] .wc-card-chip {
  background: linear-gradient(135deg, rgba(10, 50, 90, 0.3), rgba(15, 55, 95, 0.2));
  border-color: rgba(140, 180, 220, 0.08);
}
[data-theme="dark"] .wc-card-chip:hover {
  border-color: rgba(100, 160, 220, 0.2);
  box-shadow: 0 4px 20px rgba(6, 88, 140, 0.1);
}
[data-theme="dark"] .wc-mode-badge {
  background: rgba(6, 88, 140, 0.15);
  border-color: rgba(100, 160, 220, 0.2);
  color: rgba(100, 160, 220, 0.9);
}

/* ═══ 字卡头像系统 ═══ */

/* 头部中心区 */
.wc-header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.wc-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 头像栏 */
.wc-avatar-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wc-avatar-link {
  color: var(--text-ghost);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  opacity: 0.4;
  user-select: none;
}
.wc-avatar-slot {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  border: 1.5px solid var(--glass-border);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(140, 160, 200, 0.06);
}
.wc-avatar-slot:hover {
  border-color: var(--accent-dim);
  transform: scale(1.08);
  box-shadow: 0 0 12px rgba(140, 160, 200, 0.15);
}
.wc-avatar-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.wc-avatar-slot img.active {
  display: block;
}
.wc-avatar-default {
  font-family: 'Noto Serif SC', serif;
  font-size: 0.65rem;
  font-weight: 300;
  color: var(--text-ghost);
  letter-spacing: 0.05em;
  user-select: none;
}
.wc-avatar-slot img.active + .wc-avatar-default {
  display: none;
}

/* 昵称栏 */
.wc-names-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'Noto Serif SC', serif;
  font-size: 0.68rem;
  font-weight: 300;
  color: var(--text-secondary);
  letter-spacing: 0.1em;
}
.wc-name-ta {
  cursor: pointer;
  transition: color 0.2s;
  opacity: 0.7;
}
.wc-name-ta:hover {
  color: var(--accent);
  opacity: 1;
}
.wc-name-ta:empty::after {
  content: '设置昵称';
  opacity: 0.35;
  font-style: italic;
}

/* 消息行头像（小圆） */
.wc-msg-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 2px;
  opacity: 0;
  animation: wcMsgIn 0.4s ease forwards;
}
.wc-msg-row.is-user {
  flex-direction: row-reverse;
}
.wc-msg-row .wc-msg-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(140, 160, 200, 0.06);
  border: 1px solid var(--glass-border);
  flex-shrink: 0;
}
.wc-msg-row .wc-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wc-msg-row .wc-msg-avatar .wc-mini-default {
  font-size: 0.5rem;
  color: var(--text-ghost);
  font-family: 'Noto Serif SC', serif;
}

/* 消息气泡覆盖（在 row 模式下去掉对齐） */
.wc-msg-row .wc-msg-user,
.wc-msg-row .wc-msg-reply {
  align-self: unset;
  opacity: 1;
  animation: none;
}

/* TA 昵称编辑弹窗 */
.wc-nickname-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}
.wc-nickname-box {
  background: var(--bg-deep);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 24px 28px;
  width: min(300px, 80vw);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wc-nickname-box label {
  font-family: 'Noto Serif SC', serif;
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--text-secondary);
  letter-spacing: 0.1em;
}
.wc-nickname-box input {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text-primary);
  font-family: 'Noto Serif SC', serif;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s;
}
.wc-nickname-box input:focus {
  border-color: var(--accent-dim);
}
.wc-nickname-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.wc-nickname-actions button {
  background: none;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 6px 16px;
  color: var(--text-secondary);
  font-family: 'Noto Serif SC', serif;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s;
}
.wc-nickname-actions button:hover {
  border-color: var(--accent-dim);
  color: var(--text-primary);
}
.wc-nickname-actions .wc-nick-save {
  background: rgba(140, 160, 200, 0.1);
  border-color: var(--accent-dim);
  color: var(--accent);
}

@media (max-width: 600px) {
  .wc-avatar-slot { width: 48px; height: 48px; }
  .wc-msg-row .wc-msg-avatar { width: 36px; height: 36px; min-width: 36px; }
  .wc-names-bar { font-size: 0.62rem; gap: 12px; }
}

/* ═══ 保活开关 ═══ */
.keep-alive-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.keep-alive-switch input { opacity: 0; width: 0; height: 0; }
.keep-alive-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(140,160,200,0.15);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  transition: all 0.3s ease;
}
.keep-alive-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background: var(--text-ghost);
  border-radius: 50%;
  transition: all 0.3s ease;
}
.keep-alive-switch input:checked + .keep-alive-slider {
  background: rgba(140,160,200,0.25);
  border-color: var(--accent-dim);
}
.keep-alive-switch input:checked + .keep-alive-slider::before {
  transform: translateX(20px);
  background: var(--accent);
}

/* ═══ 字卡对话列表（微信风格） ═══ */
.wc-list-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-deep);
}
.wc-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--glass-border);
}
.wc-list-title {
  font-family: 'Noto Serif SC', serif;
  font-weight: 300;
  font-size: 1rem;
  color: var(--text-primary);
  letter-spacing: 0.2em;
}
.wc-new-chat-btn {
  background: none;
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-size: 1.2rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  font-family: system-ui;
  line-height: 1;
}
.wc-new-chat-btn:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
  transform: scale(1.08);
}
.wc-chat-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.wc-list-empty {
  text-align: center;
  color: var(--text-ghost);
  font-family: 'Noto Serif SC', serif;
  font-size: 0.85rem;
  font-weight: 300;
  padding: 60px 20px;
  line-height: 2;
}

/* 单条对话项 */
.wc-list-item {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
  overflow: hidden;
}
.wc-list-item:active {
  background: rgba(140, 160, 200, 0.06);
}
.wc-list-item-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--glass-border);
  margin-right: 12px;
}
.wc-list-item-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wc-list-item-body {
  flex: 1;
  min-width: 0;
  border-bottom: 1px solid rgba(140,160,200,0.06);
  padding-bottom: 14px;
}
.wc-list-item:last-child .wc-list-item-body {
  border-bottom: none;
}
.wc-list-item-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.wc-list-item-name {
  font-family: 'Noto Serif SC', serif;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: 0.05em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}
.wc-list-item-time {
  font-size: 0.68rem;
  color: var(--text-ghost);
  flex-shrink: 0;
  margin-left: 8px;
}
.wc-list-item-preview {
  font-family: 'Noto Serif SC', serif;
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--text-ghost);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}
.wc-list-item-count {
  font-size: 0.6rem;
  color: var(--text-ghost);
  opacity: 0.6;
  margin-left: 4px;
}

/* 左滑删除 */
.wc-list-item-del {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 70px;
  background: #e74c3c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-family: 'Noto Serif SC', serif;
  transform: translateX(70px);
  transition: transform 0.2s ease;
}
.wc-list-item.swiped .wc-list-item-del {
  transform: translateX(0);
}
.wc-list-item.swiped .wc-list-item-inner {
  transform: translateX(-70px);
}
.wc-list-item-inner {
  display: flex;
  align-items: center;
  width: 100%;
  transition: transform 0.2s ease;
}

@media (max-width: 600px) {
  .wc-list-item-avatar { width: 40px; height: 40px; }
  .wc-list-item { padding: 12px 16px; }
}

/* 对话列表全屏填充 */
#screen-wordcard-list {
  align-items: stretch;
  justify-content: stretch;
}
#screen-wordcard-list .wc-list-container {
  width: 100%;
  height: 100%;
}

/* ═══ 聊天顶栏（Telegram 风格覆盖） ═══ */
.wc-chat-header {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  gap: 0;
}
.wc-header-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 8px;
  transition: background 0.15s;
  margin-left: 4px;
}
.wc-header-profile:active {
  background: rgba(140,160,200,0.06);
}
.wc-header-profile .wc-avatar-slot {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.wc-header-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
.wc-header-name {
  font-family: 'Noto Serif SC', serif;
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: 0.05em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.wc-header-name:empty::after {
  content: '昵称';
  opacity: 0.5;
}
.wc-header-status {
  font-family: 'Noto Serif SC', serif;
  font-size: 0.65rem;
  font-weight: 300;
  color: var(--text-ghost);
  letter-spacing: 0.1em;
}
.wc-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* 隐藏旧的双头像布局 */
.wc-avatar-bar, .wc-avatar-link, .wc-names-bar { display: none !important; }

@media (max-width: 600px) {
  .wc-header-profile .wc-avatar-slot { width: 40px; height: 40px; }
  .wc-header-name { font-size: 0.85rem; }
  .wc-chat-header { padding: 8px 10px; }
}

/* === 表情包系统 === */
.wc-sticker-btn {
  background: none;
  border: none;
  color: var(--text-ghost);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.wc-sticker-btn:hover { opacity: 1; }
.wc-sticker-btn svg { stroke: currentColor; }

.wc-sticker-panel {
  position: absolute;
  bottom: 52px;
  left: 0;
  right: 0;
  background: var(--bg-card, rgba(20,22,30,0.95));
  border-top: 1px solid var(--border, rgba(255,255,255,0.06));
  max-height: 240px;
  display: flex;
  flex-direction: column;
  z-index: 10;
  animation: stickerSlideUp 0.15s ease-out;
}
@keyframes stickerSlideUp {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.wc-sticker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px 4px;
  flex-shrink: 0;
}
.wc-sticker-title {
  font-size: 0.72rem;
  color: var(--text-ghost);
  letter-spacing: 0.08em;
}
.wc-sticker-add-btn {
  font-size: 1.2rem;
  color: var(--text-ghost);
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.2s;
}
.wc-sticker-add-btn:hover { background: rgba(255,255,255,0.06); }

.wc-sticker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 14px 12px;
  overflow-y: auto;
  flex: 1;
  min-height: 60px;
}
.wc-sticker-empty {
  width: 100%;
  text-align: center;
  color: var(--text-ghost);
  font-size: 0.75rem;
  padding: 20px 0;
  line-height: 1.6;
}
.wc-sticker-item {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.wc-sticker-item:hover { transform: scale(1.1); }
.wc-sticker-item:active { transform: scale(0.95); }
.wc-sticker-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 表情包消息气泡 */
.wc-msg-sticker {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 140px;
}
.wc-sticker-msg-img {
  width: 100%;
  max-width: 140px;
  border-radius: 12px;
  display: block;
}

/* 输入区域调整 */
.wc-chat-input-area {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* === 管理面板顶级 Tab === */
.wc-top-tabs {
  display: flex;
  border-bottom: 1px solid var(--glass-border);
  padding: 0 12px;
}
.wc-top-tab {
  flex: 1;
  padding: 10px 0;
  background: none;
  border: none;
  color: var(--text-ghost);
  font-size: 0.95rem;
  cursor: pointer;
  position: relative;
  letter-spacing: 0.1em;
  transition: color 0.2s;
}
.wc-top-tab.active {
  color: var(--text-main, #e0e0e0);
}
.wc-top-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--accent, #7c9ac2);
  border-radius: 2px;
}

/* === 表情包管理面板 === */
.wc-stk-toolbar {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.wc-stk-upload-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(124,154,194,0.1);
  color: var(--text-ghost);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.2s;
}
.wc-stk-upload-btn:hover { background: rgba(124,154,194,0.2); }
.wc-stk-new-group-btn {
  background: none;
  border: 1px dashed var(--glass-border);
  color: var(--text-ghost);
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.wc-stk-new-group-btn:hover { border-color: var(--accent, #7c9ac2); color: var(--text-main); }

/* 分组 */
.wc-stk-group {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: opacity 0.3s;
}
.wc-stk-group.disabled { opacity: 0.45; }
.wc-stk-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px 6px;
}
.wc-stk-group-info {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wc-stk-group-name {
  font-size: 0.92rem;
  color: var(--text-main, #e0e0e0);
  cursor: pointer;
  letter-spacing: 0.05em;
}
.wc-stk-group-count {
  font-size: 0.72rem;
  color: var(--text-ghost);
  background: rgba(255,255,255,0.05);
  padding: 1px 6px;
  border-radius: 8px;
}
.wc-stk-group-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wc-stk-group-upload {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--text-ghost);
  opacity: 0.6;
  transition: opacity 0.2s;
}
.wc-stk-group-upload:hover { opacity: 1; }
.wc-stk-group-del {
  background: none;
  border: none;
  color: var(--text-ghost);
  font-size: 1rem;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.2s, color 0.2s;
  padding: 0 2px;
}
.wc-stk-group-del:hover { opacity: 1; color: #e57373; }

/* 分组开关 */
.wc-stk-switch {
  position: relative;
  width: 32px;
  height: 18px;
  display: inline-block;
}
.wc-stk-switch input { opacity: 0; width: 0; height: 0; }
.wc-stk-slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s;
}
.wc-stk-slider::before {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  left: 2px; bottom: 2px;
  background: var(--text-ghost);
  border-radius: 50%;
  transition: transform 0.3s, background 0.3s;
}
.wc-stk-switch input:checked + .wc-stk-slider {
  background: rgba(124,154,194,0.35);
}
.wc-stk-switch input:checked + .wc-stk-slider::before {
  transform: translateX(14px);
  background: var(--accent, #7c9ac2);
}

/* 重命名输入 */
.wc-stk-rename-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--accent, #7c9ac2);
  color: var(--text-main);
  font-size: 0.9rem;
  padding: 2px 6px;
  border-radius: 4px;
  outline: none;
  width: 80px;
}

/* 表情网格（管理面板） */
.wc-stk-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 14px 12px;
}
.wc-stk-item {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s;
  border: 1px solid rgba(255,255,255,0.04);
}
.wc-stk-item:hover { transform: scale(1.08); }
.wc-stk-item:active { transform: scale(0.95); }
.wc-stk-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === 聊天选择器（底部弹出） === */
.wc-sticker-panel {
  position: absolute;
  bottom: 52px;
  left: 0;
  right: 0;
  background: var(--bg-card, rgba(20,22,30,0.97));
  border-top: 1px solid var(--border, rgba(255,255,255,0.06));
  max-height: 260px;
  display: flex;
  flex-direction: column;
  z-index: 10;
  animation: stickerSlideUp 0.15s ease-out;
  overflow-y: auto;
}
.wc-stk-picker-label {
  width: 100%;
  font-size: 0.78rem;
  color: var(--text-ghost);
  padding: 8px 14px 2px;
  letter-spacing: 0.1em;
  opacity: 0.6;
}
.wc-stk-picker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 14px 8px;
}
.wc-sticker-item {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.wc-sticker-item:hover { transform: scale(1.1); }
.wc-sticker-item:active { transform: scale(0.95); }
.wc-sticker-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* tab body 滚动 */
.wc-tab-body {
  overflow-y: auto;
  flex: 1;
}

/* === 设置页头像 === */
.settings-avatar-section { text-align: center; }
.settings-avatar-row {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 12px;
}
.settings-avatar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.settings-avatar-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid var(--glass-border);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.settings-avatar-circle:hover {
  border-color: var(--accent, #7c9ac2);
  box-shadow: 0 0 16px rgba(124,154,194,0.2);
}
.settings-avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.settings-avatar-circle img[src]:not([src=]) {
  display: block;
}
.settings-avatar-circle img[src]:not([src=]) ~ .settings-avatar-label {
  display: none;
}
.settings-avatar-label {
  font-size: 1.1rem;
  color: var(--text-ghost);
  font-family: 'LXGW WenKai', serif;
  letter-spacing: 0.1em;
}
.settings-avatar-edit {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 0.65rem;
  text-align: center;
  padding: 2px 0;
  opacity: 0;
  transition: opacity 0.2s;
}
.settings-avatar-circle:hover .settings-avatar-edit {
  opacity: 1;
}

/* 字卡传讯 - 主动消息时间分隔线 */
.wc-time-sep {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-ghost);
  letter-spacing: 0.1em;
  margin: 16px 0 8px;
  opacity: 0.6;
}

/* ═══ 未读红点 badge ═══ */
.wc-unread-badge {
  background: #f44;
  color: #fff;
  font-size: 0.65rem;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  font-weight: 600;
  flex-shrink: 0;
  margin-left: auto;
}
.wc-btn-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  background: #f44;
  border-radius: 50%;
  display: none;
}
.btn-wordcard {
  position: relative;
}

/* ═══ 聊天设置面板 ═══ */
.wc-chat-settings-panel {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 56px;
  left: 0; right: 0;
  bottom: 0;
  background: var(--bg-card, #fff);
  z-index: 20;
  overflow-y: auto;
}

.wc-chat-settings-body {
  padding: 8px 0;
}

.wc-setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
}

.wc-setting-item-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wc-setting-item-label {
  font-size: 0.95rem;
  color: var(--text-main);
}

.wc-setting-item-hint {
  font-size: 0.75rem;
  color: var(--text-ghost);
}

.wc-setting-divider {
  height: 1px;
  background: var(--border-light, rgba(128,128,128,0.15));
  margin: 4px 20px;
}

.wc-setting-action {
  cursor: pointer;
  transition: background 0.15s;
}
.wc-setting-action:active {
  background: rgba(128,128,128,0.1);
}

.wc-setting-arrow {
  font-size: 1.2rem;
  color: var(--text-ghost);
}

.wc-setting-danger .wc-setting-item-label {
  color: #e55;
}


/* toggle switch */
.wc-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.wc-toggle input { opacity: 0; width: 0; height: 0; }
.wc-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #ccc;
  border-radius: 24px;
  transition: 0.3s;
}
.wc-toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.3s;
}
.wc-toggle input:checked + .wc-toggle-slider {
  background: #4cd964;
}
.wc-toggle input:checked + .wc-toggle-slider::before {
  transform: translateX(20px);
}
.wc-list-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}


/* ═══ Chat per-chat settings: background / bubble style / bubble color ═══ */

/* 设置区标题 */
.wc-setting-section-title {
  font-size: 0.75rem;
  color: var(--text-ghost);
  padding: 12px 20px 4px;
  letter-spacing: 0.1em;
}

/* 背景选项 */
.wc-bg-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}
.wc-bg-option {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.wc-bg-option.selected {
  border-color: var(--accent, #4cd964);
}
.wc-bg-upload {
  border: 2px dashed var(--text-ghost, #aaa) !important;
  font-size: 1.2rem;
  color: var(--text-ghost);
}
.wc-bg-upload.selected {
  border-style: solid !important;
  border-color: var(--accent, #4cd964) !important;
}

/* 气泡样式选项 */
.wc-bubble-styles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}
.wc-bubble-style-option {
  padding: 6px 14px;
  border-radius: 16px;
  border: 1px solid var(--glass-border, rgba(128,128,128,0.2));
  font-size: 0.8rem;
  color: var(--text-sub, var(--text-secondary));
  cursor: pointer;
  transition: all 0.2s;
}
.wc-bubble-style-option.selected {
  background: var(--accent, #4cd964);
  color: #fff;
  border-color: var(--accent, #4cd964);
}

/* 颜色选项 */


/* ─── 气泡样式变体 ─── */



/* 自定义背景时 header/input 毛玻璃效果 */
.wc-chat-container.has-custom-bg .wc-chat-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
}
[data-theme="dark"] .wc-chat-container.has-custom-bg .wc-chat-header {
  background: transparent;
  border-bottom: none;
}
.wc-chat-container.has-custom-bg .wc-chat-input-area {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: none;
}
[data-theme="dark"] .wc-chat-container.has-custom-bg .wc-chat-input-area {
  background: transparent;
  border-top: none;
}
.wc-chat-container.has-custom-bg .wc-chat-messages {
  background: transparent !important;
}
.wc-chat-container.has-custom-bg .wc-chat-settings-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
[data-theme="dark"] .wc-chat-container.has-custom-bg .wc-chat-settings-panel {
  background: rgba(10, 15, 25, 0.88);
}


/* ═══ 气泡主题预览缩略图 ═══ */
.wc-theme-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}
.wc-theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.wc-theme-option span {
  font-size: 0.7rem;
  color: var(--text-ghost);
}
.wc-theme-option.selected span {
  color: var(--text-main);
  font-weight: 500;
}
.wc-theme-preview {
  width: 56px;
  height: 42px;
  border-radius: 8px;
  border: 2px solid transparent;
  background: var(--bg-card, #f8f8f8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5px 6px;
  gap: 4px;
  transition: border-color 0.2s;
}
.wc-theme-option.selected .wc-theme-preview {
  border-color: var(--accent, #4cd964);
}
.wc-tp-left {
  width: 60%;
  height: 8px;
  border-radius: 4px;
  background: rgba(140, 160, 200, 0.15);
  border: 1px solid rgba(140, 160, 200, 0.2);
}
.wc-tp-right {
  width: 50%;
  height: 8px;
  border-radius: 4px;
  align-self: flex-end;
  background: rgba(140, 160, 200, 0.12);
  border: 1px solid rgba(140, 160, 200, 0.15);
}

/* 甜粉预览 */
.tp-sweetpink { background: #fff5f8; }
.tp-sweetpink .wc-tp-left { background: #fff; border-color: rgba(220,160,180,0.25); }
.tp-sweetpink .wc-tp-right { background: rgba(245,190,200,0.5); border-color: rgba(235,170,185,0.4); }

/* 暗夜预览 */
.tp-darknight { background: #1a1d24; }
.tp-darknight .wc-tp-left { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); }
.tp-darknight .wc-tp-right { background: rgba(80,85,95,0.8); border-color: rgba(100,105,115,0.5); }

/* 经典蓝预览 */
.tp-classicblue { background: #f0f2f5; }
.tp-classicblue .wc-tp-left { background: #fff; border-color: rgba(0,0,0,0.06); }
.tp-classicblue .wc-tp-right { background: rgba(70,130,230,0.8); border-color: transparent; }

/* ═══ 气泡主题：甜粉 ═══ */
.bubble-theme-sweetpink .wc-msg-user {
  background: linear-gradient(135deg, rgba(248,195,210,0.55) 0%, rgba(240,175,195,0.4) 100%) !important;
  border: 1px solid rgba(235,170,185,0.3) !important;
  box-shadow: 0 1px 6px rgba(220,160,180,0.12), inset 0 1px 0 rgba(255,255,255,0.3) !important;
  color: #5a3a42 !important;
}
.bubble-theme-sweetpink .wc-msg-reply {
  background: rgba(255,255,255,0.75) !important;
  border: 1px solid rgba(220,160,180,0.18) !important;
  box-shadow: 0 1px 8px rgba(220,160,180,0.08), inset 0 1px 0 rgba(255,255,255,0.5) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #4a3a3f !important;
}
[data-theme="dark"] .bubble-theme-sweetpink .wc-msg-user {
  background: linear-gradient(135deg, rgba(180,100,130,0.35) 0%, rgba(160,80,110,0.25) 100%) !important;
  border-color: rgba(180,100,130,0.25) !important;
  color: rgba(240,210,220,0.9) !important;
}
[data-theme="dark"] .bubble-theme-sweetpink .wc-msg-reply {
  background: rgba(60,35,45,0.6) !important;
  border-color: rgba(180,100,130,0.15) !important;
  color: rgba(230,200,210,0.85) !important;
}

/* ═══ 气泡主题：暗夜 ═══ */
.bubble-theme-darknight .wc-msg-user {
  background: linear-gradient(135deg, rgba(75,80,95,0.85) 0%, rgba(60,65,80,0.75) 100%) !important;
  border: 1px solid rgba(100,110,130,0.3) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  color: rgba(220,225,235,0.95) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.bubble-theme-darknight .wc-msg-reply {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: rgba(200,205,215,0.85) !important;
}
[data-theme="dark"] .bubble-theme-darknight .wc-msg-user {
  background: linear-gradient(135deg, rgba(65,70,85,0.9) 0%, rgba(50,55,70,0.8) 100%) !important;
}
[data-theme="dark"] .bubble-theme-darknight .wc-msg-reply {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* ═══ 气泡主题：经典蓝 ═══ */
.bubble-theme-classicblue .wc-msg-user {
  background: linear-gradient(135deg, rgba(70,130,230,0.85) 0%, rgba(55,115,215,0.75) 100%) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(70,130,230,0.2), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  color: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.bubble-theme-classicblue .wc-msg-reply {
  background: rgba(255,255,255,0.85) !important;
  border: none !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #1a1a1a !important;
}
[data-theme="dark"] .bubble-theme-classicblue .wc-msg-user {
  background: linear-gradient(135deg, rgba(55,110,200,0.8) 0%, rgba(45,95,180,0.7) 100%) !important;
  color: rgba(240,245,255,0.95) !important;
}
[data-theme="dark"] .bubble-theme-classicblue .wc-msg-reply {
  background: rgba(35,40,50,0.75) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: rgba(210,215,225,0.9) !important;
}


/* ═══ 气泡主题：胶囊 ═══ */
.bubble-theme-capsule .wc-msg-user {
  border-radius: 50px !important;
  padding: 8px 22px !important;
  background: #ffffff !important;
  color: #2c2c2e !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.bubble-theme-capsule .wc-msg-reply {
  border-radius: 50px !important;
  padding: 8px 22px !important;
  background: #f0f0f5 !important;
  color: #2c2c2e !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.bubble-theme-capsule .wc-msg-user::after,
.bubble-theme-capsule .wc-msg-reply::after {
  display: none !important;
}
[data-theme="dark"] .bubble-theme-capsule .wc-msg-user {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: rgba(240,240,245,0.95) !important;
}
[data-theme="dark"] .bubble-theme-capsule .wc-msg-reply {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.05) !important;
  color: rgba(220,220,230,0.9) !important;
}

/* ═══ 气泡主题：iMessage ═══ */
.bubble-theme-imessage .wc-msg-user {
  border-radius: 18px 18px 4px 18px !important;
  background: #3b3b3d !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative !important;
  margin-right: 8px !important;
}
.bubble-theme-imessage .wc-msg-user::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  right: -7px !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 0 0 10px 8px !important;
  border-color: transparent transparent #3b3b3d transparent !important;
  background: none !important;
  border-radius: 0 !important;
}
.bubble-theme-imessage .wc-msg-reply {
  border-radius: 18px 18px 18px 4px !important;
  background: #e8e8e8 !important;
  color: #1c1c1e !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative !important;
  margin-left: 8px !important;
}
.bubble-theme-imessage .wc-msg-reply::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  left: -7px !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 0 8px 10px 0 !important;
  border-color: transparent #e8e8e8 transparent transparent !important;
  background: none !important;
  border-radius: 0 !important;
}
[data-theme="dark"] .bubble-theme-imessage .wc-msg-user {
  background: #007AFF !important;
  color: #ffffff !important;
}
[data-theme="dark"] .bubble-theme-imessage .wc-msg-user::after {
  border-color: transparent transparent #007AFF transparent !important;
}
[data-theme="dark"] .bubble-theme-imessage .wc-msg-reply {
  background: rgba(50,50,55,0.85) !important;
  color: rgba(230,230,235,0.95) !important;
}
[data-theme="dark"] .bubble-theme-imessage .wc-msg-reply::after {
  border-color: transparent rgba(50,50,55,0.85) transparent transparent !important;
}

/* 预览缩略图 */
.tp-capsule {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 50px;
  position: relative;
}
.tp-capsule::before {
  content: '';
  position: absolute;
  top: 22%;
  left: 12%;
  width: 50%;
  height: 22%;
  background: #f0f0f5;
  border-radius: 50px;
}
.tp-capsule::after {
  content: '';
  position: absolute;
  bottom: 22%;
  right: 12%;
  width: 40%;
  height: 22%;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 50px;
}

.tp-imessage {
  background: #1c1c1e;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.tp-imessage::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 12%;
  width: 48%;
  height: 25%;
  background: #e8e8e8;
  border-radius: 10px;
}
.tp-imessage::after {
  content: '';
  position: absolute;
  bottom: 20%;
  right: 12%;
  width: 40%;
  height: 25%;
  background: #3b3b3d;
  border-radius: 10px;
}


/* ═══ 色调选项 ═══ */
.wc-hue-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}
.wc-hue-option {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
}
.wc-hue-option.selected {
  border-color: var(--text-main, #333);
  transform: scale(1.15);
}

/* ═══ 新聊天界面按钮样式补丁 ═══ */
.wc-chat-back, .wc-header-btn {
  background: none;
  border: none;
  color: var(--text-ghost);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px 8px;
  font-family: 'Noto Serif SC', serif;
  letter-spacing: 0.05em;
  transition: color 0.2s;
}
.wc-chat-back:hover, .wc-header-btn:hover {
  color: var(--text-primary);
}
.wc-chat-back {
  font-size: 1.1rem;
  padding: 4px 6px;
}
.wc-list-back-btn, .wc-list-new-btn {
  background: none;
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-size: 1.2rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.wc-list-back-btn:hover, .wc-list-new-btn:hover {
  border-color: var(--text-ghost);
  color: var(--text-primary);
}
.wc-list-back-btn {
  font-size: 0.9rem;
  border: none;
}
.wc-send-btn {
  background: none;
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-family: 'Noto Serif SC', serif;
  font-size: 0.8rem;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  letter-spacing: 0.08em;
  transition: all 0.2s;
}
.wc-send-btn:hover {
  border-color: var(--text-ghost);
  color: var(--text-primary);
}
.wc-chat-input {
  flex: 1;
  background: var(--glass-bg, rgba(255,255,255,0.06));
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 8px 16px;
  font-family: 'Noto Serif SC', serif;
  font-size: 0.85rem;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s;
}
.wc-chat-input:focus {
  border-color: var(--text-ghost);
}
.wc-chat-input::placeholder {
  color: var(--text-ghost);
}
.wc-sticker-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px;
}
.wc-setting-action-btn {
  background: none;
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-family: 'Noto Serif SC', serif;
  font-size: 0.8rem;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  margin-bottom: 8px;
  transition: all 0.2s;
}
.wc-setting-action-btn:hover {
  border-color: var(--text-ghost);
}
.wc-setting-action-btn.wc-danger {
  color: #e55;
  border-color: rgba(238,85,85,0.3);
}
.wc-setting-action-btn.wc-danger:hover {
  border-color: #e55;
}
.wc-setting-actions {
  padding: 0 4px;
}
.wc-settings-body {
  padding: 12px 16px;
  overflow-y: auto;
  flex: 1;
}
.wc-setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}
.wc-setting-label {
  font-family: 'Noto Serif SC', serif;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.wc-setting-section-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 0.75rem;
  color: var(--text-ghost);
  letter-spacing: 0.1em;
  margin: 14px 0 8px;
}
.wc-bg-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.wc-bg-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  color: var(--text-ghost);
}
.wc-bg-preview {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.wc-bg-option.selected .wc-bg-preview {
  border-color: var(--text-primary);
}
.wc-theme-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.wc-theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  color: var(--text-ghost);
}
.wc-theme-preview {
  width: 48px;
  height: 36px;
  border-radius: 6px;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.wc-theme-option.selected .wc-theme-preview {
  border-color: var(--text-primary);
}
/* 主题预览缩略图 */
.tp-default {
  background: linear-gradient(135deg, rgba(140,160,200,0.14), rgba(120,145,195,0.08));
}
.tp-sweetpink {
  background: linear-gradient(135deg, rgba(248,195,210,0.55), rgba(240,175,195,0.4));
}
.tp-darknight {
  background: linear-gradient(135deg, rgba(75,80,95,0.85), rgba(60,65,80,0.75));
}
.tp-classicblue {
  background: linear-gradient(135deg, rgba(70,130,230,0.85), rgba(55,115,215,0.75));
}
/* toggle 开关 */
.wc-toggle {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
}
.wc-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.wc-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(150,150,150,0.3);
  border-radius: 24px;
  transition: 0.3s;
}
.wc-toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
}
.wc-toggle input:checked + .wc-toggle-slider {
  background: rgba(100,160,220,0.6);
}
.wc-toggle input:checked + .wc-toggle-slider::before {
  transform: translateX(18px);
}
/* 未读红点 */
.wc-btn-badge {
  display: none;
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  background: #e55;
  border-radius: 50%;
}
.wc-unread-badge {
  background: #e55;
  color: #fff;
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 6px;
}

/* ═══ 聊天容器全宽修复 ═══ */
#screen-wordcard-input {
  align-items: stretch !important;
}
#screen-wordcard-list {
  align-items: stretch !important;
}
.wc-chat-container {
  width: 100%;
}

/* ═══ 卡组面板补丁 ═══ */
.wc-card-panel, .wc-chat-settings-panel {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 56px;
  left: 0; right: 0;
  bottom: 0;
  background: var(--bg-card, #fff);
  z-index: 20;
  overflow-y: auto;
  border-top: 1px solid var(--glass-border);
}
[data-theme="dark"] .wc-card-panel,
[data-theme="dark"] .wc-chat-settings-panel {
  background: var(--bg-card, #1a1a1a);
}

.wc-top-tabs {
  display: flex;
  gap: 0;
}
.wc-top-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 0;
  font-family: 'Noto Serif SC', serif;
  font-size: 0.85rem;
  color: var(--text-ghost);
  cursor: pointer;
  transition: all 0.2s;
}
.wc-top-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}
.wc-tab-content {
  padding: 12px 16px;
}

/* 卡片列表 */
.wc-card-list {
  max-height: 200px;
  overflow-y: auto;
  margin: 8px 0;
}
.wc-card-count {
  font-size: 0.75rem;
  color: var(--text-ghost);
  padding: 4px 0;
}
.wc-card-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--glass-bg, rgba(255,255,255,0.08));
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 4px 12px;
  margin: 3px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.wc-card-chip-del {
  background: none;
  border: none;
  color: var(--text-ghost);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 2px;
  line-height: 1;
}
.wc-card-chip-del:hover {
  color: #e55;
}
.wc-card-add-row {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}
.wc-card-add-row input {
  flex: 1;
  background: var(--glass-bg, rgba(255,255,255,0.06));
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 0.8rem;
  color: var(--text-primary);
  outline: none;
}
.wc-card-add-row input::placeholder { color: var(--text-ghost); }
.wc-add-btn {
  background: none;
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wc-add-btn:hover {
  border-color: var(--text-ghost);
  color: var(--text-primary);
}
.wc-batch-toggle-row {
  text-align: center;
}
.wc-batch-toggle {
  background: none;
  border: none;
  color: var(--text-ghost);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 6px;
}
.wc-batch-toggle:hover { color: var(--text-secondary); }
.wc-batch-area textarea {
  width: 100%;
  background: var(--glass-bg, rgba(255,255,255,0.06));
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.8rem;
  color: var(--text-primary);
  resize: vertical;
  outline: none;
  font-family: 'Noto Serif SC', serif;
}
.wc-batch-area textarea::placeholder { color: var(--text-ghost); }

/* 表情包面板 */
.wc-stk-groups {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  overflow-x: auto;
}
.wc-sticker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 8px 0;
}
.wc-sticker-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
}
.wc-sticker-empty {
  text-align: center;
  color: var(--text-ghost);
  font-size: 0.8rem;
  padding: 20px 0;
}
.wc-sticker-panel {
  position: absolute;
  bottom: 52px;
  left: 0; right: 0;
  height: 200px;
  background: var(--bg-card, #fff);
  border-top: 1px solid var(--glass-border);
  z-index: 15;
  overflow-y: auto;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
[data-theme="dark"] .wc-sticker-panel {
  background: var(--bg-card, #1a1a1a);
}
.wc-sticker-panel img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
}

/* 聊天列表页 */
.wc-chat-list {
  flex: 1;
  overflow-y: auto;
}
.wc-list-empty {
  text-align: center;
  color: var(--text-ghost);
  font-size: 0.85rem;
  padding: 40px 20px;
  font-family: 'Noto Serif SC', serif;
}
.wc-list-item {
  position: relative;
  overflow: hidden;
}
.wc-list-item-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  transition: background 0.2s;
}
.wc-list-item-inner:hover {
  background: var(--glass-bg, rgba(255,255,255,0.04));
}
.wc-list-item-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.wc-list-item-body {
  flex: 1;
  min-width: 0;
}
.wc-list-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wc-list-item-name {
  font-family: 'Noto Serif SC', serif;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.wc-list-item-time {
  font-size: 0.7rem;
  color: var(--text-ghost);
}
.wc-list-item-bottom {
  display: flex;
  align-items: center;
  margin-top: 4px;
}
.wc-list-item-preview {
  font-size: 0.75rem;
  color: var(--text-ghost);
}
.wc-list-item-del {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 70px;
  background: #e55;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transform: translateX(100%);
  transition: transform 0.2s;
}
.wc-list-item.swiped .wc-list-item-del {
  transform: translateX(0);
}

/* 时间分隔线 */
.wc-time-sep {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-ghost);
  padding: 8px 0;
}

/* 消息行头像 */
.wc-msg-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.wc-msg-row.is-user {
  flex-direction: row-reverse;
}
.wc-msg-avatar img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

/* 打字指示器 */
.wc-typing {
  display: flex;
  gap: 4px;
  padding: 8px 18px;
  align-items: center;
}
.wc-typing span {
  width: 6px;
  height: 6px;
  background: var(--text-ghost);
  border-radius: 50%;
  animation: wc-typing-dot 1.4s infinite;
}
.wc-typing span:nth-child(2) { animation-delay: 0.2s; }
.wc-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes wc-typing-dot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* ═══ 表情包管理面板样式 ═══ */
.wc-stk-group {
  margin-bottom: 16px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  overflow: hidden;
}
.wc-stk-group.disabled {
  opacity: 0.5;
}
.wc-stk-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--glass-bg, rgba(255,255,255,0.04));
}
.wc-stk-group-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wc-stk-group-name {
  font-family: 'Noto Serif SC', serif;
  font-size: 0.85rem;
  color: var(--text-primary);
  cursor: default;
}
.wc-stk-group-count {
  font-size: 0.7rem;
  color: var(--text-ghost);
  background: var(--glass-bg, rgba(255,255,255,0.06));
  padding: 1px 8px;
  border-radius: 10px;
}
.wc-stk-group-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wc-stk-group-upload {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--text-ghost);
  transition: color 0.2s;
}
.wc-stk-group-upload:hover {
  color: var(--text-primary);
}
.wc-stk-group-del {
  background: none;
  border: none;
  color: var(--text-ghost);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.wc-stk-group-del:hover {
  color: #e55;
}
/* 分组内开关 */
.wc-stk-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
}
.wc-stk-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.wc-stk-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(150,150,150,0.3);
  border-radius: 18px;
  transition: 0.3s;
}
.wc-stk-slider::before {
  content: '';
  position: absolute;
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
}
.wc-stk-switch input:checked + .wc-stk-slider {
  background: rgba(100,160,220,0.6);
}
.wc-stk-switch input:checked + .wc-stk-slider::before {
  transform: translateX(16px);
}
/* 表情网格（管理面板内） */
.wc-stk-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 8px 10px;
}
.wc-stk-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
}
.wc-stk-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
/* 重命名输入框 */
.wc-stk-rename-input {
  background: var(--glass-bg, rgba(255,255,255,0.06));
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.85rem;
  color: var(--text-primary);
  font-family: 'Noto Serif SC', serif;
  outline: none;
  width: 100px;
}
/* 选择器面板：分组标签 */
.wc-stk-picker-label {
  grid-column: 1 / -1;
  font-size: 0.7rem;
  color: var(--text-ghost);
  padding: 6px 0 2px;
  font-family: 'Noto Serif SC', serif;
}
.wc-stk-picker-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  grid-column: 1 / -1;
}
.wc-sticker-item {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}
.wc-sticker-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.15s;
}
.wc-sticker-item img:hover {
  transform: scale(1.08);
}
/* 面板头部关闭按钮 */
.wc-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--glass-border);
}
.wc-panel-close {
  background: none;
  border: none;
  color: var(--text-ghost);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.wc-panel-close:hover {
  color: var(--text-primary);
}
/* 模式切换tab（默认卡/我的卡/混合） */
.wc-mode-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 8px;
}
.wc-mode-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 0;
  font-family: 'Noto Serif SC', serif;
  font-size: 0.8rem;
  color: var(--text-ghost);
  cursor: pointer;
  transition: all 0.2s;
}
.wc-mode-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}
/* 色调微调圆点 */
.wc-hue-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.wc-hue-option {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
}
.wc-hue-option.selected {
  border-color: var(--text-primary);
  transform: scale(1.1);
}
.wc-hue-option:hover {
  transform: scale(1.1);
}

/* ═══ 发送/表情按钮图标样式 ═══ */
.wc-send-btn {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.wc-send-btn svg {
  margin-left: 2px;
}
.wc-sticker-btn {
  color: var(--text-ghost) !important;
  transition: color 0.2s !important;
}
.wc-sticker-btn:hover {
  color: var(--text-primary) !important;
}
/* 头像区域布局修复 */
.wc-header-center {
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.wc-avatar-group {
  flex-shrink: 0;
}

/* ═══ 设置页头像 ═══ */
.settings-avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 8px 0;
}
.settings-avatar-preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid var(--glass-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(140,160,200,0.06);
  flex-shrink: 0;
  transition: all 0.2s;
}
.settings-avatar-preview:hover {
  border-color: var(--accent-dim, var(--text-ghost));
  transform: scale(1.05);
}
.settings-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.settings-avatar-placeholder {
  font-size: 0.7rem;
  color: var(--text-ghost);
  font-family: "Noto Serif SC", serif;
  text-align: center;
}
.settings-avatar-upload-btn {
  background: none;
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-family: "Noto Serif SC", serif;
  font-size: 0.78rem;
  padding: 6px 14px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.settings-avatar-upload-btn:hover {
  border-color: var(--text-ghost);
  color: var(--text-primary);
}


/* ═══ 对话列表屏幕布局修复 ═══ */
#screen-wordcard-list.screen {
  align-items: stretch \!important;
  justify-content: flex-start \!important;
}
#screen-wordcard-input.screen {
  align-items: stretch \!important;
  justify-content: flex-start \!important;
}


/* ═══ 用户积分显示 ═══ */
.auth-credits {
  font-family: "Noto Serif SC", serif;
  font-size: 0.72rem;
  color: var(--text-ghost);
  background: var(--glass-bg, rgba(255,255,255,0.06));
  border: 1px solid var(--glass-border);
  padding: 2px 10px;
  border-radius: 12px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}


/* ═══ 统一面板：TA Profile 编辑区 ═══ */
.wc-chat-profile-section {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 8px;
}
.wc-profile-avatar-edit {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  background: var(--glass-bg, rgba(255,255,255,0.06));
  border: 1px dashed var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wc-profile-avatar-edit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.wc-profile-avatar-placeholder {
  font-size: 1.4rem;
  color: var(--text-ghost);
}
.wc-profile-avatar-edit:hover {
  border-color: var(--text-ghost);
}
.wc-profile-nickname-input {
  flex: 1;
  background: var(--glass-bg, rgba(255,255,255,0.06));
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 8px 16px;
  font-family: 'Noto Serif SC', serif;
  font-size: 0.85rem;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s;
}
.wc-profile-nickname-input:focus {
  border-color: var(--text-ghost);
}
.wc-profile-nickname-input::placeholder {
  color: var(--text-ghost);
}
/* ⋯ 更多按钮 */
.wc-more-btn {
  font-size: 1.3rem !important;
  letter-spacing: 2px;
  padding: 2px 6px !important;
}
/* 统一面板：设置 tab 也需要 padding + scroll */
#wc-tab-settings {
  padding: 12px 16px;
  overflow-y: auto;
  flex: 1;
}

/* ═══ Tab 间距修复（3 tab + close 按钮） ═══ */
.wc-chat-settings-panel .wc-panel-header {
  gap: 0;
}
.wc-chat-settings-panel .wc-top-tabs {
  flex: 1;
  min-width: 0;
}
.wc-chat-settings-panel .wc-top-tab {
  font-size: 0.8rem;
  padding: 10px 4px;
  white-space: nowrap;
}

/* ═══ 统一面板tab修复（2026-03-13） ═══ */
.wc-card-panel .wc-top-tabs,
.wc-chat-settings-panel .wc-top-tabs {
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 0;
  border-bottom: 1px solid var(--glass-border);
}
.wc-card-panel .wc-top-tab,
.wc-chat-settings-panel .wc-top-tab {
  flex: none;
  padding: 12px 16px;
  font-size: 0.85rem;
  white-space: nowrap;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-ghost);
  font-family: 'Noto Serif SC', serif;
  cursor: pointer;
  transition: color 0.2s;
  letter-spacing: 0.06em;
}
.wc-card-panel .wc-top-tab.active,
.wc-chat-settings-panel .wc-top-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}
.wc-card-panel .wc-top-tab.active::after,
.wc-chat-settings-panel .wc-top-tab.active::after {
  display: none;
}
.wc-card-panel .wc-panel-header,
.wc-chat-settings-panel .wc-panel-header {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: none;
}
.wc-card-panel .wc-panel-close,
.wc-chat-settings-panel .wc-panel-close {
  padding: 12px 16px;
  flex-shrink: 0;
}

/* 卡片chip — 去灰块 */
.wc-card-chip {
  background: transparent !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 6px 14px !important;
  border-radius: 18px !important;
  font-size: 0.82rem !important;
  gap: 6px !important;
  animation: none !important;
}
[data-theme="dark"] .wc-card-chip {
  border-color: rgba(255,255,255,0.1) !important;
}
.wc-card-chip:hover {
  background: rgba(0,0,0,0.03) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* 表情包tab — 4列网格 */
#wc-tab-stickers .wc-sticker-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  padding: 10px 16px !important;
}
#wc-tab-stickers .wc-sticker-item {
  width: auto !important;
  height: auto !important;
  aspect-ratio: 1;
}
#wc-tab-stickers .wc-sticker-grid:not(:empty) ~ .wc-sticker-empty {
  display: none !important;
}
#wc-tab-stickers #btn-stk-new-group {
  width: auto !important;
  white-space: nowrap !important;
  padding: 8px 20px !important;
  margin: 12px auto !important;
  border-radius: 20px !important;
  font-size: 0.8rem !important;
}

/* ═══ 上传背景美化 ═══ */
.wc-bg-upload-box {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed rgba(150,150,150,0.35);
  border-radius: 8px;
  color: var(--text-ghost);
  transition: all 0.2s;
}
.wc-bg-upload:hover .wc-bg-upload-box {
  border-color: var(--text-secondary);
  color: var(--text-secondary);
}

/* ═══ 背景选择卡片化 + 缝隙修复 ═══ */

/* 去掉tab和内容之间的缝 */
.wc-chat-settings-panel .wc-panel-header .wc-top-tabs {
  border-bottom: none;
}
.wc-chat-settings-panel .wc-panel-header {
  border-bottom: 1px solid var(--glass-border);
}
#wc-tab-settings {
  padding-top: 16px !important;
}

/* 背景选择 — 卡片化 */
.wc-bg-options-row {
  display: flex;
  gap: 12px;
  padding: 4px 0;
}
.wc-bg-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--text-ghost);
  transition: color 0.2s;
}
.wc-bg-card-preview {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 10px;
  border: 2px solid transparent;
  transition: border-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wc-bg-card.selected .wc-bg-card-preview {
  border-color: var(--text-primary, #333);
}
.wc-bg-card:hover .wc-bg-card-preview {
  border-color: var(--text-ghost);
}
.wc-bg-card.selected .wc-bg-card-preview {
  border-color: var(--text-primary, #333);
}
.wc-bg-card-upload {
  background: var(--glass-bg, rgba(0,0,0,0.02));
  border: 2px dashed rgba(150,150,150,0.3) !important;
  color: var(--text-ghost);
}
.wc-bg-card:hover .wc-bg-card-upload {
  border-color: var(--text-secondary) !important;
  color: var(--text-secondary);
}
[data-theme=dark] .wc-bg-card-upload {
  background: rgba(255,255,255,0.03);
}

/* ═══ 缝隙彻底修复 + 背景卡片缩小 ═══ */
.wc-chat-settings-panel .wc-panel-header {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.wc-chat-settings-panel .wc-panel-header .wc-top-tabs {
  border-bottom: 1px solid var(--glass-border) !important;
  margin-bottom: 0 !important;
}
#wc-tab-settings,
#wc-tab-cards,
#wc-tab-stickers {
  margin-top: 0 !important;
  padding-top: 12px !important;
  border-top: none !important;
}

/* 背景卡片 — 和气泡主题一样大 */
.wc-bg-card-preview {
  width: 48px !important;
  height: 48px !important;
  aspect-ratio: unset !important;
  border-radius: 8px !important;
}
.wc-bg-options-row {
  gap: 12px;
  flex-wrap: wrap;
}
.wc-bg-card {
  flex: none !important;
  width: auto;
}

/* ═══════════════════════════════════════════════════════════════
   四大主题系统（参考考拉主题预览 IMG_1627/1629）
   每个主题控制：背景、header、气泡、输入栏、文字颜色
   ═══════════════════════════════════════════════════════════════ */

/* ─── 主题预览缩略图 ─── */

/* ═══════════════════════════════════════════════════════════════
   主题 v6 — 干净版，所有容器背景用 background-color 不碰 background-image
   ═══════════════════════════════════════════════════════════════ */

/* ─── 主题预览缩略图 ─── */
.tp-new-default { background: linear-gradient(135deg, #f0f2f5 30%, #e8eaef 100%); }

/* ─── 分层结构 ─── */
.wc-chat-header {
  position: relative !important;
  z-index: 15 !important;
}
.wc-chat-messages {
  margin-top: -80px !important;
  padding-top: 95px !important;
  position: relative !important;
  z-index: 1 !important;
}
.wc-chat-input-area {
  position: relative !important;
  z-index: 15 !important;
}

/* ─── 默认主题 container ─── */
.wc-chat-container {
  background-color: #f0f2f5 !important;
}
/* 有自定义背景时不设底色 */
.wc-chat-container.has-custom-bg {
  background-color: transparent !important;
}

/* ─── 默认 header/input 磨砂 ─── */
.wc-chat-container .wc-chat-header {
  background-color: rgba(240,242,245,0.55) !important;
  backdrop-filter: blur(25px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(25px) saturate(1.8) !important;
  border-bottom: 0.5px solid rgba(0,0,0,0.06) !important;
  padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
}
.wc-chat-container .wc-chat-input-area {
  background-color: rgba(240,242,245,0.55) !important;
  backdrop-filter: blur(25px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(25px) saturate(1.8) !important;
  border-top: 0.5px solid rgba(0,0,0,0.06) !important;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ─── 非聊天页 safe area ─── */
.screen {
  top: env(safe-area-inset-top, 0px) !important;
  height: calc(100% - env(safe-area-inset-top, 0px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  box-sizing: border-box !important;
}
#screen-wordcard-input.screen {
  top: 0 !important;
  background-color: #f0f2f5 !important;
}

/* ─── html/body 背景跟主题走 ─── */
html, body {
  background-color: #f0f2f5 !important;
}


/* ─── 更新提醒弹窗 ─── */
.update-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: updateFadeIn 0.3s ease;
}
@keyframes updateFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.update-modal {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-radius: 16px;
  max-width: 360px;
  width: 100%;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  border: 0.5px solid rgba(255,255,255,0.6);
  overflow: hidden;
}
.update-modal-header {
  font-family: "Noto Serif SC", serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: #1c1c1e;
  text-align: center;
  padding: 18px 20px 12px;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.update-modal-body {
  padding: 0 22px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-height: 0;
}
.update-section-title {
  font-family: "Noto Serif SC", serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: #3a3a3c;
  margin: 12px 0 6px;
  letter-spacing: 0.06em;
}
.update-section-title:first-child {
  margin-top: 4px;
}
.update-modal-body ul {
  margin: 0;
  padding-left: 18px;
  list-style: none;
}
.update-modal-body li {
  font-family: "Noto Serif SC", serif;
  font-size: 0.75rem;
  color: #48484a;
  line-height: 1.7;
  position: relative;
  padding-left: 4px;
}
.update-modal-body li::before {
  content: "·";
  position: absolute;
  left: -12px;
  color: #aeaeb2;
}
.update-modal-footer {
  display: flex;
  border-top: 0.5px solid rgba(0,0,0,0.08);
  flex-shrink: 0;
}
.update-btn {
  flex: 1;
  padding: 14px 0;
  border: none;
  background: none;
  font-family: "Noto Serif SC", serif;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s;
}
.update-btn:active {
  background: rgba(0,0,0,0.04);
}
.update-btn-dismiss {
  color: #007aff;
  font-weight: 500;
  border-right: 0.5px solid rgba(0,0,0,0.08);
}
.update-btn-never {
  color: #8e8e93;
  font-weight: 400;
}