/* 添加这些变量 */
:root {
  --header-height: 60px;    /* 顶部状态栏高度 - 增加到60px */
  --tabbar-height: 60px;    /* 底部导航栏高度 - 增加到60px */
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --content-padding: 16px;  /* 内容区域左右内边距 */
  
  /* 新增固定高度变量 */
  --display-area-height: 270px;  /* 固定显示区域高度 */
  --voice-display-height: 90px; /* 固定语音显示区域高度 */
  --display-gap: 12px;           /* 两个显示框之间的间距 */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background 0.32s cubic-bezier(0.25, 0.1, 0.25, 1),
              border-color 0.32s cubic-bezier(0.25, 0.1, 0.25, 1),
              color 0.32s cubic-bezier(0.25, 0.1, 0.25, 1),
              stroke 0.32s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow 0.32s cubic-bezier(0.25, 0.1, 0.25, 1),
              opacity 0.5s ease-in-out,
              transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

* {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  user-select: none;
}

input, textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* ========== 主题定义 ========== */
[data-theme="dark"] {
  --bg-body: #0f0f12;
  --bg-container: linear-gradient(145deg, #1e1e24, #141418);
  --bg-chat: linear-gradient(145deg, #25252b, #1b1b21);
  --bg-input: linear-gradient(145deg, #2d2d35, #22222a);
  --bg-nav: #1c1c22;
  --bg-bubble-user: rgba(255,90,31,0.18);
  --bg-bubble-ai: #2a2a32;
  --border-bubble-user: rgba(255,90,31,0.35);
  --border-bubble-ai: #3a3a44;
  --text-normal: #ffffff;
  --text-dim: rgba(255,255,255,0.78);
  --text-placeholder: rgba(255,255,255,0.58);
  --shadow-soft: rgba(0,0,0,0.8);
  --shadow-inset: rgba(0,0,0,0.6);
  --voice-btn-bg: linear-gradient(145deg, #33333d, #1f1f27);
  --voice-ring1-bg: linear-gradient(145deg, #27272f, #15151b);
  --voice-ring2-bg: linear-gradient(145deg, #2f2f39, #22222a);
  --press-color: #ff6a3d;
  --voice-icon-color: #f0f0f0;
  --voice-text-color: #f0f0f0;
  --card-bg: rgba(25,25,32,0.8);
  --card-border: rgba(255,255,255,0.15);
  --slider-bg: rgba(25,25,32,0.7);
}

[data-theme="mist"] {
  --bg-body: #f2ede5;
  --bg-container: linear-gradient(145deg, #fffcf5, #fcf5eb);
  --bg-chat: #f5efe7;
  --bg-input: #f5efe7;
  --bg-nav: #fffcf5;
  --bg-bubble-user: rgba(230,100,50,0.12);
  --bg-bubble-ai: #e9e1d7;
  --border-bubble-user: rgba(200,80,30,0.3);
  --border-bubble-ai: #d9cfc2;
  --text-normal: #2b241f;
  --text-dim: rgba(43,36,31,0.78);
  --text-placeholder: rgba(43,36,31,0.55);
  --shadow-soft: rgba(0,0,0,0.12);
  --shadow-inset: rgba(0,0,0,0.04);
  --voice-btn-bg: linear-gradient(145deg, #eae1d7, #e0d5c9);
  --voice-ring1-bg: linear-gradient(145deg, #e0d5c9, #d6cabc);
  --voice-ring2-bg: linear-gradient(145deg, #dcd1c4, #d2c6b8);
  --press-color: #cc5a33;
  --voice-icon-color: #2b241f;
  --voice-text-color: #2b241f;
  --card-bg: rgba(250,242,235,0.8);
  --card-border: rgba(80,60,40,0.1);
  --slider-bg: rgba(230,220,210,0.7);
}

[data-theme="ink"] {
  --bg-body: #0e1a22;
  --bg-container: linear-gradient(145deg, #16232c, #0e1a22);
  --bg-chat: linear-gradient(145deg, #1c2b36, #13212b);
  --bg-input: linear-gradient(145deg, #22333f, #1a2934);
  --bg-nav: #15232d;
  --bg-bubble-user: rgba(100,180,240,0.15);
  --bg-bubble-ai: #1e2e3a;
  --border-bubble-user: rgba(100,180,240,0.35);
  --border-bubble-ai: #2a3d4b;
  --text-normal: #edf9ff;
  --text-dim: rgba(237,249,255,0.82);
  --text-placeholder: rgba(237,249,255,0.6);
  --shadow-soft: rgba(0,0,0,0.8);
  --shadow-inset: rgba(0,0,0,0.55);
  --voice-btn-bg: linear-gradient(145deg, #263946, #1c2d39);
  --voice-ring1-bg: linear-gradient(145deg, #1c2d39, #13222c);
  --voice-ring2-bg: linear-gradient(145deg, #223542, #192a36);
  --press-color: #5aa3e0;
  --voice-icon-color: #e8f5ff;
  --voice-text-color: #e8f5ff;
  --card-bg: rgba(20,35,45,0.8);
  --card-border: rgba(160,210,255,0.2);
  --slider-bg: rgba(20,35,45,0.7);
}

[data-theme="red"] {
  --bg-body: #1f0a0c;
  --bg-container: linear-gradient(145deg, #aa2020, #861818);
  --bg-chat: linear-gradient(145deg, #c02626, #a61e1e);
  --bg-input: linear-gradient(145deg, #d12b2b, #b32121);
  --bg-nav: #a61e1e;
  --bg-bubble-user: rgba(255,100,100,0.2);
  --bg-bubble-ai: #b32121;
  --border-bubble-user: rgba(255,120,120,0.4);
  --border-bubble-ai: #c93030;
  --text-normal: #fffcfc;
  --text-dim: rgba(255,252,252,0.85);
  --text-placeholder: rgba(255,252,252,0.65);
  --shadow-soft: rgba(0,0,0,0.8);
  --shadow-inset: rgba(0,0,0,0.5);
  --voice-btn-bg: linear-gradient(145deg, #d33636, #b02626);
  --voice-ring1-bg: linear-gradient(145deg, #aa2020, #861818);
  --voice-ring2-bg: linear-gradient(145deg, #c02626, #a61e1e);
  --press-color: #ff6b6b;
  --voice-icon-color: #fff0f0;
  --voice-text-color: #fff0f0;
  --card-bg: rgba(150,30,30,0.7);
  --card-border: rgba(255,200,200,0.25);
  --slider-bg: rgba(130,25,25,0.6);
}

[data-theme="green"] {
  --bg-body: #0b2315;
  --bg-container: linear-gradient(145deg, #144325, #0c301c);
  --bg-chat: linear-gradient(145deg, #1b5530, #134425);
  --bg-input: linear-gradient(145deg, #22663b, #1a522e);
  --bg-nav: #134425;
  --bg-bubble-user: rgba(70,230,130,0.18);
  --bg-bubble-ai: #1b5530;
  --border-bubble-user: rgba(70,230,130,0.4);
  --border-bubble-ai: #22663b;
  --text-normal: #f0fff0;
  --text-dim: rgba(240,255,240,0.82);
  --text-placeholder: rgba(240,255,240,0.62);
  --shadow-soft: rgba(0,0,0,0.75);
  --shadow-inset: rgba(0,0,0,0.5);
  --voice-btn-bg: linear-gradient(145deg, #24944a, #1b753a);
  --voice-ring1-bg: linear-gradient(145deg, #1b5530, #144325);
  --voice-ring2-bg: linear-gradient(145deg, #1f6739, #18512f);
  --press-color: #4cdd7a;
  --voice-icon-color: #e5ffe5;
  --voice-text-color: #e5ffe5;
  --card-bg: rgba(20,75,35,0.7);
  --card-border: rgba(200,255,200,0.25);
  --slider-bg: rgba(20,70,30,0.6);
}

[data-theme="blue"] {
  --bg-body: #0c1730;
  --bg-container: linear-gradient(145deg, #14244a, #0e1b39);
  --bg-chat: linear-gradient(145deg, #1b2e5a, #132346);
  --bg-input: linear-gradient(145deg, #21386b, #192b55);
  --bg-nav: #132346;
  --bg-bubble-user: rgba(80,170,255,0.2);
  --bg-bubble-ai: #1b2e5a;
  --border-bubble-user: rgba(80,170,255,0.4);
  --border-bubble-ai: #21386b;
  --text-normal: #f0f8ff;
  --text-dim: rgba(240,248,255,0.82);
  --text-placeholder: rgba(240,248,255,0.6);
  --shadow-soft: rgba(0,0,0,0.8);
  --shadow-inset: rgba(0,0,0,0.55);
  --voice-btn-bg: linear-gradient(145deg, #1e4a9e, #16377a);
  --voice-ring1-bg: linear-gradient(145deg, #1b2e5a, #132346);
  --voice-ring2-bg: linear-gradient(145deg, #1e3a70, #162d57);
  --press-color: #3d9eff;
  --voice-icon-color: #e0f0ff;
  --voice-text-color: #e0f0ff;
  --card-bg: rgba(15,40,85,0.7);
  --card-border: rgba(150,200,255,0.25);
  --slider-bg: rgba(15,40,80,0.6);
}

[data-theme="gray"] {
  --bg-body: #3d4247;
  --bg-container: linear-gradient(145deg, #4e555c, #3f454c);
  --bg-chat: linear-gradient(145deg, #5f666e, #4e555c);
  --bg-input: linear-gradient(145deg, #6f7780, #5f666e);
  --bg-nav: #4e555c;
  --bg-bubble-user: rgba(210,210,220,0.18);
  --bg-bubble-ai: #5f666e;
  --border-bubble-user: rgba(220,220,240,0.35);
  --border-bubble-ai: #6f7780;
  --text-normal: #ffffff;
  --text-dim: rgba(255,255,255,0.82);
  --text-placeholder: rgba(255,255,255,0.62);
  --shadow-soft: rgba(0,0,0,0.7);
  --shadow-inset: rgba(0,0,0,0.45);
  --voice-btn-bg: linear-gradient(145deg, #6f7780, #5f666e);
  --voice-ring1-bg: linear-gradient(145deg, #5f666e, #4e555c);
  --voice-ring2-bg: linear-gradient(145deg, #6a727b, #5a6169);
  --press-color: #fc814a;
  --voice-icon-color: #f0f0f0;
  --voice-text-color: #f0f0f0;
  --card-bg: rgba(70,75,85,0.7);
  --card-border: rgba(255,255,255,0.2);
  --slider-bg: rgba(70,75,85,0.6);
}

body {
  background: var(--bg-body);
  color: var(--text-normal);
  min-height: 100vh;
  min-height: -webkit-fill-available;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.phone-container {
  width: 100%;
  max-width: 400px;
  height: 100vh;
  height: -webkit-fill-available;
  max-height: none;
  background: var(--bg-container);
  border-radius: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(2px);
}

/* 顶部状态栏 */
.top-bar {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 16px;
  background: var(--bg-container);
  height: var(--header-height);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 100;
}

.window-controls {
  display: flex;
  gap: 8px;
}

.win-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  background: rgba(0,0,0,0.25);
  cursor: pointer;
  backdrop-filter: blur(5px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.2);
}

/* 固定高度的显示区域容器 - 用于放置两个显示框并添加间距 */
.display-container {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--display-gap);
  padding: 0 16px;
  margin: 16px 0 0 0;
}

/* 固定高度的显示区域 */
.display-area {
  width: 100%;
  height: var(--display-area-height);
  min-height: var(--display-area-height);
  max-height: var(--display-area-height);
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--card-border);
  border-radius: 32px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 15px 30px -10px rgba(0,0,0,0.4), inset 0 1px 2px rgba(255,255,255,0.1);
  overflow: hidden;
}

/* 固定高度的语音显示区域 */
.voice-display-area {
  width: 100%;
  height: var(--voice-display-height);
  min-height: var(--voice-display-height);
  max-height: var(--voice-display-height);
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--card-border);
  border-radius: 32px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 15px 30px -10px rgba(0,0,0,0.4), inset 0 1px 2px rgba(255,255,255,0.1);
  overflow-y: auto;
}

/* 主内容区域 - 占据剩余空间，但底部元素将绝对定位固定 */
.main-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 16px 120px 16px; /* 底部留出空间给固定的输入框和按钮 */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@keyframes contentFadeIn {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 显示区域内容样式 */
.display-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.display-content img {
  max-width: 50%;
  max-height: 50%;
  object-fit: contain;
  opacity: 0.9;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}

.display-content .text-content {
  text-align: center;
  color: var(--text-normal);
  text-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

.display-content .text-content .title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.display-content .text-content .desc {
  font-size: 14px;
  color: var(--text-dim);
}

.voice-display-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-normal);
  text-shadow: 0 2px 4px rgba(0,0,0,0.25);
  overflow-y: auto;
  padding: 4px;
  font-size: 15px;
  line-height: 1.4;
  word-break: break-word;
}

.voice-display-content .placeholder {
  color: var(--text-placeholder);
  font-size: 14px;
}

/* 滑动条部分 */
.slider-section {
  flex-shrink: 0;
  margin-bottom: 8px;
  position: relative;
}

.slider-section::before,
.slider-section::after {
  content: '';
  position: absolute;
  top: 0;
  width: 60px;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

.slider-section::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-container), transparent);
}

.slider-section::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-container), transparent);
}

.slider-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 8px;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  scroll-behavior: auto;
  position: relative;
}

.slider-scroll:active {
  cursor: grabbing;
}

.slider-scroll::-webkit-scrollbar {
  display: none;
}

.slider-item {
  flex: 0 0 auto;
  background: var(--slider-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--card-border);
  border-radius: 40px;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-normal);
  box-shadow: 0 8px 20px -6px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.12);
  transition: all 0.25s ease;
  white-space: nowrap;
  will-change: transform, opacity;
  position: relative;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.slider-item.invisible-item {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  background: transparent !important;
  transform: scale(1) !important;
  text-shadow: none !important;
  color: transparent !important;
}

.slider-item.center-highlight {
  background: var(--press-color);
  color: white;
  transform: scale(1.12) translateY(-2px);
  border-color: rgba(255,255,255,0.7);
  opacity: 1;
  box-shadow: 0 15px 30px -5px var(--press-color), 0 0 0 2px rgba(255,255,255,0.4) inset;
  z-index: 2;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* 快捷卡片 */
.quick-cards {
  flex-shrink: 0;
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.quick-card {
  flex: 1;
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--card-border);
  border-radius: 28px;
  padding: 14px 8px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 4px;
  box-shadow: 0 15px 25px -10px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.quick-card:active {
  transform: scale(0.96);
  box-shadow: 0 8px 15px -5px rgba(0,0,0,0.6);
}

.quick-card.priority-1 {
  box-shadow: 0 0 20px rgba(255, 80, 80, 0.7), inset 0 1px 3px #ffcccc;
}

.quick-card.priority-2 {
  box-shadow: 0 0 20px rgba(50, 150, 255, 0.7), inset 0 1px 3px #cce5ff;
}

.quick-card.priority-3 {
  box-shadow: 0 0 20px rgba(50, 220, 100, 0.6), inset 0 1px 3px #ccffcc;
}

.card-icon {
  font-size: 14px;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-normal);
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
  display: inline-block;
  vertical-align: middle;
  line-height: 1.3;
}

.card-desc {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
  opacity: 0.95;
  width: 100%;
  margin-top: 2px;
}

/* 底部导航栏 - 绝对定位固定在底部 */
.bottom-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: var(--bg-nav);
  padding: 0 12px;
  height: var(--tabbar-height);
  border-top: 1px solid var(--card-border);
  backdrop-filter: blur(20px);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 30;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.2s, transform 0.1s;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  height: 100%;
}

.nav-item svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}

.nav-item.active {
  color: #ff5a1f;
  transform: translateY(-2px);
}

/* 拖拽语音按钮 - 固定在底部导航上方 */
.draggable-voice {
  position: absolute;
  width: 70px;
  height: 70px;
  z-index: 300;
  bottom: calc(var(--tabbar-height) + 100px); /* 固定在底部导航上方，留出输入框空间 */
  right: 16px;
  cursor: grab;
  user-select: none;
  touch-action: none;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,0.5));
}

.draggable-voice:active {
  cursor: grabbing;
}

.draggable-voice .voice-button {
  width: 70px;
  height: 70px;
  background: var(--voice-btn-bg);
  border-radius: 50%;
  border: none;
  color: var(--voice-text-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 12px 20px -5px rgba(0,0,0,0.7), 0 0 0 2px rgba(255,255,255,0.2) inset;
  transition: all 0.15s;
  font-size: 9px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  text-shadow: 0 1px 3px black;
}

.draggable-voice .voice-button:active {
  background: var(--press-color);
  transform: scale(0.92);
  box-shadow: 0 8px 15px -3px black, 0 0 0 3px rgba(255,255,255,0.4) inset;
}

.mic-icon {
  width: 24px;
  height: 24px;
  position: relative;
  filter: drop-shadow(0 2px 3px black);
}

.mic-icon::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 13px;
  border: 2px solid var(--voice-icon-color);
  border-bottom: none;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.mic-icon::after {
  content: '';
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 16px;
  background: var(--voice-icon-color);
  border-radius: 2px;
}

/* 输入框 - 固定在底部导航上方 */
.input-float {
  position: absolute;
  bottom: calc(var(--tabbar-height) + 16px); /* 距离底部导航栏上方16px */
  left: 16px;
  right: 16px;
  background: var(--bg-input);
  border-radius: 40px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(24px);
  border: 1px solid var(--card-border);
  box-shadow: 0 8px 30px rgba(0,0,0,0.6), inset 0 1px 2px rgba(255,255,255,0.1);
  z-index: 250;
  max-width: calc(100% - 32px);
  margin: 0 auto;
}

.input-float textarea {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-normal);
  font-size: 15px;
  padding: 8px 4px;
  outline: none;
  resize: none;
  max-height: 80px;
  line-height: 1.4;
}

.input-float textarea::placeholder {
  color: var(--text-placeholder);
  opacity: 1;
}

.input-float .send-btn {
  width: 40px;
  height: 40px;
  background: linear-gradient(145deg, #ff5a1f, #e04a1f);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 6px 12px rgba(0,0,0,0.4), inset 0 1px 3px #ffb08a;
}

.input-float .send-btn:disabled {
  opacity: 0.4;
  box-shadow: none;
}

/* 启动层 */
.internal-splash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-container);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  border-radius: 0;
  opacity: 1;
  transition: opacity 1.2s ease-in-out;
  pointer-events: none;
}

.internal-splash.fade-out {
  opacity: 0;
}


 /* 添加到 styles.css 中 */
.voice-display-content .progress-container {
  width: 100%;
  text-align: center;
}

.voice-display-content .progress-text {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.voice-display-content .progress-bar {
  width: 80%;
  height: 4px;
  background: rgba(0,0,0,0.1);
  border-radius: 2px;
  margin: 0 auto;
  overflow: hidden;
}

.voice-display-content .progress-fill {
  height: 100%;
  background: var(--primary-color);
  border-radius: 2px;
  transition: width 0.3s ease;
}






.update-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.update-modal.show {
  opacity: 1;
  pointer-events: auto;
}
.modal-content {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  padding: 24px;
  max-width: 300px;
  text-align: center;
  color: var(--text-normal);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.modal-content p {
  margin: 16px 0;
  font-size: 16px;
}
.modal-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.modal-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 40px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  background: var(--press-color);
  color: white;
}
.modal-btn.secondary {
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--text-dim);
}