/* ═══════════════════════════════════════════
   溪 · 樱色主题
   配色灵感：粉樱飘落 → 深夜花影
   情绪驱动：界面随溪的状态呼吸
   ═══════════════════════════════════════════ */
/* ════════════════════ 核心美化补丁 ════════════════════ */

:root {
    /* 1. 定义更高级的色彩体系 */
    --primary-pink: #ffb7c5;       /* 樱花粉 */
    --deep-pink: #ff8fab;          /* 深粉点缀 */
    --glass-bg: rgba(255, 255, 255, 0.65); /* 65%透明度的玻璃底 */
    --glass-border: rgba(255, 255, 255, 0.8); /* 玻璃边缘高光 */
    --text-main: #5d4e52;          /* 柔和的深灰褐，比纯黑更有质感 */
    --shadow-soft: 0 8px 32px 0 rgba(255, 183, 197, 0.15); /* 粉色系柔光阴影 */
}

/* 2. 白天（浅色）背景：由 JS setTheme 动态控制 */
body {
    background: url('/static/bg-day.webp') no-repeat center center fixed;
    background-size: cover;
    font-family: 'Noto Serif SC', 'SimSun', serif !important;
}
/* 暗色模式：夜晚背景用 bg-scene.jpg */
[data-theme="dark"] body {
    background: url('/static/bg-scene.jpg') no-repeat center center fixed !important;
    background-size: cover !important;
}
/* 暗色背景遮罩：一层半透明黑色覆盖整个页面，让背景变暗 */
html[data-theme="dark"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.58);
  pointer-events: none;
}

/* 3. 侧边栏：极致的毛玻璃效果 */
.sidebar {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) saturate(180%) !important; /* 关键：强模糊+高饱和 */
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-right: 1px solid var(--glass-border) !important;
    box-shadow: 5px 0 15px rgba(0,0,0,0.02) !important;
}

/* 4. 聊天气泡：像云朵一样轻盈 */
.message-bubble {
    background: rgba(255, 255, 255, 0.85) !important; /* 半透明白 */
    backdrop-filter: blur(10px) !important;
    border-radius: 18px !important; /* 更圆润 */
    box-shadow: 0 4px 15px rgba(255, 183, 197, 0.1) !important; /* 淡淡的粉影 */
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    color: var(--text-main) !important;
    line-height: 1.6 !important;
}

/* 用户的消息气泡（右侧） */
.user-message .message-bubble {
    background: linear-gradient(135deg, #ffc3d0 0%, #ffafbd 100%) !important; /* 渐变粉 */
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(255, 143, 171, 0.3) !important;
}

/* 5. 输入框：悬浮的水晶条 */
.input-area {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(25px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.03) !important;
    margin: 20px; /* 让输入框悬浮起来，不贴边 */
    border-radius: 20px !important; /* 大圆角 */
    width: calc(100% - 40px) !important;
}

/* 6. 按钮美化 */
button, .send-btn {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(255, 154, 158, 0.4) !important;
    transition: all 0.3s ease !important;
}

button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 154, 158, 0.6) !important;
}

/* 7. 滚动条隐形化（为了更美） */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 183, 197, 0.5);
    border-radius: 10px;
}
:root,
[data-theme="light"] {
  /* ── 粉樱主调 ── */
  --primary: #c97a9a;
  --primary-light: #e8b4c8;
  --primary-soft: rgba(201, 122, 154, 0.12);
  --primary-glow: rgba(201, 122, 154, 0.15);

  --assistant: #d49aaa;
  --assistant-soft: rgba(212, 154, 170, 0.08);

  /* ── 花瓣质感 ── */
  --card-bg: #ffffff;
  --card-bg-alpha: rgba(255, 255, 255, 0.85);
  --body-bg: transparent;

  /* ── 文字 ── */
  --text: #3a2a30;
  --text-light: #6a5a60;
  --text-muted: #9a8a90;

  /* ── 边框 ── */
  --border: rgba(201, 122, 154, 0.15);
  --border-light: rgba(201, 122, 154, 0.08);

  /* ── 气泡 ── */
  --bubble-user: #fce4ec;
  --bubble-user-grad: linear-gradient(135deg, #fce4ec, #f8d0dc);
  --bubble-assistant: #ffffff;
  --bubble-assistant-grad: linear-gradient(135deg, #ffffff, #faf0f4);

  /* ── 输入区 ── */
  --input-bg: rgba(255, 255, 255, 0.80);
  --input-border: rgba(201, 122, 154, 0.15);
  --input-focus-border: #c97a9a;

  /* ── 侧栏 ── */
  --sidebar-bg: rgba(255, 255, 255, 0.88);
  --sidebar-text: #3a2a30;
  --sidebar-hover: rgba(201, 122, 154, 0.08);

  --scrollbar-thumb: rgba(201, 122, 154, 0.20);
  --code-bg: #3a2a30;
  --code-text: #f0e8ec;
}

[data-theme="dark"] {
  /* ── 深夜樱色 ── */
  --primary: #d49aaa;
  --primary-light: #e8c0cc;
  --primary-soft: rgba(212, 154, 170, 0.15);
  --primary-glow: rgba(212, 154, 170, 0.10);

  --assistant: #b08a98;
  --assistant-soft: rgba(176, 138, 152, 0.08);

  --card-bg: #1a0e12;
  --card-bg-alpha: rgba(28, 18, 22, 0.90);
  --body-bg: #1a0e12;

  --text: #e8dce0;
  --text-light: #c0acb4;
  --text-muted: #7a6a72;

  --border: rgba(212, 154, 170, 0.12);
  --border-light: rgba(212, 154, 170, 0.06);

  --bubble-user: #3a1a24;
  --bubble-user-grad: linear-gradient(135deg, #3a1a24, #2c121c);
  --bubble-assistant: #1e1218;
  --bubble-assistant-grad: linear-gradient(135deg, #1e1218, #2a1a20);

  --input-bg: rgba(255, 255, 255, 0.08);
  --input-border: rgba(212, 154, 170, 0.12);
  --input-focus-border: #d49aaa;

  --sidebar-bg: rgba(18, 10, 14, 0.92);
  --sidebar-text: #d0c4c8;
  --sidebar-hover: rgba(212, 154, 170, 0.06);

  --scrollbar-thumb: rgba(212, 154, 170, 0.15);
  --code-bg: #1a0e12;
  --code-text: #dcd0d4;
}

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

/* ══ 全局 ══ */
body {
  background: var(--body-bg);
  transition: background 0.8s ease;
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  height: 100vh;
  height: 100dvh;
  display: flex;
  overflow: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  /* 背景由 JS setTheme 控制，此处不设图 */
}

[data-theme="dark"] body::before {
  filter: brightness(0.45) saturate(0.6);
}

/* 飘雪 */
.snow-container {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.snow-container i {
  position: absolute;
  top: -10px;
  font-size: 18px;
  animation: snowFall linear infinite;
  user-select: none;
}
.snow-container i.white {
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}
.snow-container i.pink {
  color: rgba(232, 180, 200, 0.5);
  text-shadow: 0 0 8px rgba(232, 180, 200, 0.25);
}
.snow-container i.glow {
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 0 12px rgba(240, 200, 220, 0.5);
}

[data-theme="dark"] .snow-container i {
  font-size: 4px;
  opacity: 0;
  animation: snowFall linear infinite, sparkle 3s ease-in-out infinite;
}
[data-theme="dark"] .snow-container i.white,
[data-theme="dark"] .snow-container i.pink,
[data-theme="dark"] .snow-container i.glow {
  color: rgba(232, 190, 210, 0.7);
  text-shadow: 0 0 10px rgba(232, 190, 210, 0.5);
}

@keyframes sparkle {
  0%,
  100% {
    opacity: 0.1;
    transform: scale(0.3);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.4);
  }
}
@keyframes snowFall1 {
  0% {
    transform: translate3d(0, 0, 0) rotate(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translate3d(20px, 10vh, 0) rotate(40deg);
  }
  30% {
    transform: translate3d(-15px, 30vh, 0) rotate(110deg);
  }
  50% {
    transform: translate3d(30px, 50vh, 0) rotate(170deg);
  }
  70% {
    transform: translate3d(-10px, 70vh, 0) rotate(240deg);
  }
  100% {
    transform: translate3d(25px, 105vh, 0) rotate(350deg);
    opacity: 0.5;
  }
}
@keyframes snowFall2 {
  0% {
    transform: translate3d(0, 0, 0) rotate(0);
    opacity: 0;
  }
  15% {
    opacity: 1;
    transform: translate3d(-25px, 15vh, 0) rotate(-50deg);
  }
  35% {
    transform: translate3d(10px, 35vh, 0) rotate(-110deg);
  }
  55% {
    transform: translate3d(-20px, 55vh, 0) rotate(-170deg);
  }
  80% {
    transform: translate3d(15px, 80vh, 0) rotate(-250deg);
  }
  100% {
    transform: translate3d(-10px, 105vh, 0) rotate(-340deg);
    opacity: 0.5;
  }
}
@keyframes snowFall3 {
  0% {
    transform: translate3d(0, 0, 0) rotate(0);
    opacity: 0;
  }
  8% {
    opacity: 1;
    transform: translate3d(-8px, 8vh, 0) rotate(30deg);
  }
  25% {
    transform: translate3d(18px, 25vh, 0) rotate(80deg);
  }
  45% {
    transform: translate3d(-5px, 45vh, 0) rotate(150deg);
  }
  65% {
    transform: translate3d(12px, 65vh, 0) rotate(210deg);
  }
  85% {
    transform: translate3d(-18px, 85vh, 0) rotate(290deg);
  }
  100% {
    transform: translate3d(8px, 105vh, 0) rotate(360deg);
    opacity: 0.5;
  }
}

/* 涟漪 */
#rippleCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* ══ 左侧栏 ══ */
.sidebar {
  width: 220px;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
  transition: border-color 0.3s, left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('/static/bg-sidebar.jpg') center/cover no-repeat;
  opacity: .25;
  transition: opacity .6s;
  filter: saturate(1.2) hue-rotate(10deg);
}
[data-theme="dark"] .sidebar-bg {
  opacity: .10;
}
.sidebar-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 12px;
  background: var(--sidebar-bg);
  transition: background .3s;
}

/* 品牌 */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 0 4px;
}
.sidebar-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.sidebar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sidebar-avatar-ring {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  opacity: .5;
  animation: avatarGlow 3s ease-in-out infinite;
}
@keyframes avatarGlow {
  0%,
  100% {
    opacity: .3;
    transform: scale(1);
  }
  50% {
    opacity: .7;
    transform: scale(1.05);
  }
}
.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sidebar-brand-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 1px;
}
.sidebar-brand-tag {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* 状态摘要 */
.sidebar-status {
  background: var(--card-bg-alpha);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  transition: background .3s, border .3s;
}
.sidebar-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 12px;
  color: var(--sidebar-text);
}
.sidebar-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #69f0ae;
  flex-shrink: 0;
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: .5;
    transform: scale(1.3);
  }
}
.sidebar-status-icon {
  font-size: 12px;
  width: 18px;
  text-align: center;
}
.sidebar-status-label {
  color: var(--text-light);
  min-width: 28px;
}
.sidebar-status-value {
  flex: 1;
  text-align: right;
  font-weight: 500;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.sidebar-energy-bar {
  width: 40px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.sidebar-energy-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #69f0ae, #40c4ff);
  transition: width .8s;
}

/* 导航 */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  margin: 0 -4px;
}
.sidebar-nav::-webkit-scrollbar {
  width: 3px;
}
.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 10px;
}
.sidebar-nav-section {
  margin-bottom: 12px;
}
.sidebar-nav-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 4px 8px 6px;
}
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all .15s;
  cursor: pointer;
  position: relative;
}
.sidebar-nav-item:hover {
  background: var(--sidebar-hover);
  color: var(--text);
}
.sidebar-nav-item.active {
  background: var(--primary-glow);
  color: var(--primary);
  font-weight: 600;
}
.sidebar-nav-icon {
  font-size: 15px;
  width: 22px;
  text-align: center;
}
.sidebar-nav-badge {
  font-size: 8px;
  color: var(--primary);
  margin-left: auto;
  opacity: .6;
}
.sidebar-nav-arrow {
  font-size: 10px;
  opacity: .4;
  margin-left: auto;
}

/* 侧栏底部 */
.sidebar-footer {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: auto;
  transition: border-color .3s;
}
.sidebar-theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.sidebar-theme-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  font-size: 14px;
  cursor: pointer;
  transition: all .2s;
}
.sidebar-theme-btn:hover {
  background: var(--sidebar-hover);
  border-color: var(--primary-light);
}
.sidebar-theme-selector {
  display: flex;
  gap: 3px;
}
.st-option {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.st-option.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.st-option:hover {
  border-color: var(--primary-light);
}
.sidebar-version {
  font-size: 9px;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: .5px;
}
.sidebar-bgm-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  color: var(--text-light);
  margin-left: auto;
}
.sidebar-bgm-btn:hover {
  background: var(--sidebar-hover);
  border-color: var(--primary-light);
  color: var(--primary);
}
.sidebar-bgm-btn.playing {
  color: var(--primary);
  border-color: var(--primary-light);
  background: var(--primary-soft);
  animation: bgmPulse 2s ease-in-out infinite;
}
@keyframes bgmPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,122,154,0); }
  50% { box-shadow: 0 0 8px 0 rgba(201,122,154,0.2); }
}

/* ══ 主区域 ══ */
.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  z-index: 2;
}

/* 顶部状态条 */
.top-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--card-bg-alpha);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 44px;
  transition: background .3s, border .3s;
}
.top-bar-menu-btn {
  display: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  color: var(--text);
  transition: all .15s;
}
.top-bar-menu-btn:hover {
  background: var(--sidebar-hover);
}
.top-bar-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-light);
}
.top-bar-activity-icon {
  font-size: 14px;
}
.top-bar-activity-text {
  font-weight: 500;
  color: var(--text);
}
.top-bar-sep {
  opacity: .4;
}
.top-bar-actions {
  display: flex;
  gap: 4px;
}
.top-bar-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  font-size: 16px;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
}
.top-bar-btn:hover {
  background: var(--sidebar-hover);
  border-color: var(--primary-light);
  color: var(--primary);
}

/* 聊天容器 */
.chat-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

/* 消息区 */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scroll-behavior: smooth;
  background: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .chat-messages {
  background: rgba(0, 0, 0, 0.08);
}
.chat-messages::-webkit-scrollbar {
  width: 5px;
}
.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}
.chat-messages::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 10px;
}

/* 时间分隔线 */
.time-divider {
  text-align: center;
  font-size: 10px;
  color: var(--text-muted);
  padding: 14px 0 8px;
  position: relative;
  user-select: none;
  font-weight: 500;
  letter-spacing: 1px;
}
.time-divider::before,
.time-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 80px);
  height: 1px;
  background: var(--border);
  transition: background .3s;
}
.time-divider::before {
  left: 0;
}
.time-divider::after {
  right: 0;
}

/* 消息气泡 */
.message-container {
  max-width: 82%;
  display: flex;
  flex-direction: column;
  animation: msgEnter .4s cubic-bezier(.34, 1.56, .64, 1) both;
}
.user-container {
  align-self: flex-end;
  align-items: flex-end;
}
.user-container .message-row {
  flex-direction: row-reverse;
}
.assistant-container {
  align-self: flex-start;
  align-items: flex-start;
}
.message-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
@keyframes msgEnter {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 头像 */
.avatar-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.avatar-name {
  font-size: 8px;
  color: var(--text-light);
  white-space: nowrap;
  margin-bottom: 1px;
  letter-spacing: 1px;
  opacity: 0.2;
  transition: opacity 0.3s;
}
.message-container:hover .avatar-name {
  opacity: 0.6;
}
.avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid var(--border);
  box-shadow: 0 0 0 1px var(--border), 0 4px 12px rgba(107, 138, 158, 0.10);
  transition: border-color .3s;
}
.avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 气泡 */
.bubble {
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.7;
  position: relative;
  word-break: break-word;
  transition: background .3s;
}
.user-bubble {
  background: var(--bubble-user-grad);
  color: var(--text);
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 16px rgba(201, 122, 154, 0.18), 0 2px 4px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(201, 122, 154, 0.20);
}
.user-bubble::after {
  content: '✿';
  position: absolute;
  right: -6px;
  bottom: -4px;
  font-size: 12px;
  color: rgba(201, 122, 154, 0.35);
  pointer-events: none;
  line-height: 1;
}
[data-theme="dark"] .user-bubble {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
  border-color: rgba(212, 154, 170, 0.15);
}
.assistant-bubble {
  background: var(--bubble-assistant-grad);
  color: var(--text);
  border-bottom-left-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.04);
  font-family: "KaiTi", "楷体", "Noto Serif SC", serif;
  font-weight: 500;
  letter-spacing: .5px;
  white-space: pre-wrap;
}
.assistant-bubble::before {
  content: '🌸';
  position: absolute;
  left: -10px;
  top: -8px;
  font-size: 14px;
  pointer-events: none;
  line-height: 1;
  opacity: .6;
}
[data-theme="dark"] .assistant-bubble {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.20), 0 2px 4px rgba(0, 0, 0, 0.10);
  border-color: rgba(255, 255, 255, 0.06);
}
.bubble p {
  margin: 0;
}
.bubble p+p {
  margin-top: 6px;
}
.msg-time {
  font-size: 8px;
  color: var(--text-muted);
  margin-top: 2px;
  padding: 0 12px;
  opacity: 0.2;
  transition: opacity 0.3s;
}
.message-container:hover .msg-time {
  opacity: 0.6;
}
.user-container .msg-time {
  text-align: right;
}

/* 输入光标 */
.stream-cursor {
  display: inline-block;
  width: 2px;
  height: 15px;
  background: var(--primary);
  margin-left: 2px;
  animation: blink 1s step-end infinite;
  vertical-align: text-bottom;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* 思考 */
.thinking-section {
  margin: 0;
}
.thinking-header {
  font-size: 10px;
  color: var(--primary);
  cursor: pointer;
  padding: 2px 8px;
  background: var(--primary-glow);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  user-select: none;
  transition: background .2s;
}
.thinking-arrow {
  font-size: 9px;
  transition: transform .25s;
}
.thinking-arrow.open {
  transform: rotate(90deg);
}
.thinking-body {
  font-size: 12px;
  color: var(--text-light);
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s;
  line-height: 1.4;
  padding: 0 8px;
}
.thinking-body.open {
  max-height: 500px;
  overflow-y: auto;
  padding: 2px 8px;
}

/* TTS 按钮 */
.tts-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--primary-glow);
  background: rgba(255, 255, 255, .7);
  font-size: 13px;
  cursor: pointer;
  margin-left: 6px;
  vertical-align: middle;
  transition: all .2s;
  flex-shrink: 0;
}
[data-theme="dark"] .tts-play-btn {
  background: rgba(255, 255, 255, .08);
}
.tts-play-btn:hover {
  background: var(--primary-glow);
  border-color: var(--primary-light);
}
.tts-play-btn:active {
  transform: scale(.92);
}

/* 独白气泡 */
.monologue-bubble {
  background: var(--card-bg) !important;
  border-left: 3px solid var(--primary-light);
  font-family: 'Georgia', 'KaiTi', serif;
  font-size: 13px;
  font-style: italic;
  color: var(--text);
  border-bottom-left-radius: 6px !important;
  margin-top: 10px !important;
  padding-top: 12px !important;
  position: relative;
}
.monologue-bubble::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -3px;
  right: -3px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary-light), transparent);
  opacity: .4;
}
.monologue-label {
  display: block;
  font-size: 9px;
  color: var(--text-light);
  font-family: 'Microsoft YaHei', sans-serif;
  font-style: normal;
  margin-bottom: 3px;
  font-weight: 600;
  letter-spacing: 1px;
}
.proactive-tag {
  display: block;
  font-size: 10px;
  color: var(--primary);
  font-family: 'Microsoft YaHei', sans-serif;
  font-style: normal;
  margin-bottom: 2px;
  font-weight: 700;
}

/* 主动消息弱化样式：完整保留内容，但视觉上不抢真实对话 */
.proactive-bubble {
  opacity: 0.85;
  background: var(--card-bg-alpha) !important;
  border: 1px dashed var(--primary-light);
  font-size: 13px;
}
.proactive-bubble .proactive-tag {
  color: var(--primary);
}

.msg-text-content {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.bubble pre {
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: 10px;
  padding: 12px;
  overflow-x: auto;
  margin: 8px 0;
  font-size: 12px;
}
.bubble code {
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 12px;
}
.bubble p code {
  background: var(--input-bg);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}
.bubble a {
  color: var(--primary);
}
.code-block-wrapper {
  position: relative;
  margin: 6px 0;
}
.copy-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  color: #666;
  cursor: pointer;
  transition: all .15s;
  opacity: 0;
  z-index: 2;
}
.code-block-wrapper:hover .copy-btn,
.copy-btn.copied {
  opacity: 1;
}
.copy-btn:hover {
  background: #fff;
}
.copy-btn.copied {
  color: #4caf50;
  border-color: #4caf50;
}

/* 欢迎 */
.welcome-badge {
  text-align: center;
  padding: 30px 20px;
  animation: fadeInUp .6s ease both;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.welcome-badge>* {
  position: relative;
  z-index: 1;
}
.welcome-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(107, 138, 158, .15);
  animation: welcomeFloat 3s ease-in-out infinite;
}
.welcome-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes welcomeFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
.welcome-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 1px;
}
.welcome-text {
  font-size: 13px;
  color: var(--text-muted);
}

/* 系统消息 */
.system-message {
  text-align: center;
  font-size: 11px;
  color: var(--text-light);
  padding: 6px 12px;
  background: rgba(0, 0, 0, .02);
  border-radius: 12px;
  margin: 4px auto;
  max-width: 75%;
}
.system-message.reminder {
  background: rgba(255, 248, 225, .8);
  color: #5d3a00;
  font-weight: 500;
  border: 1px solid rgba(240, 160, 64, .2);
}
[data-theme="dark"] .system-message.reminder {
  background: rgba(50, 40, 10, .8);
  color: #ffd54f;
}

.tool-result {
  font-size: 12px;
  color: var(--text-light);
  border-top: 1px solid var(--border-light);
  margin-top: 8px;
  padding-top: 8px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

/* 独白片段 */
.monologue-fragment {
  text-align: center;
  font-size: 11px;
  color: var(--text);
  font-style: italic;
  padding: 8px 16px;
  min-height: 14px;
  opacity: .92;
  line-height: 1.5;
  word-break: break-word;
  transition: opacity .5s;
  flex-shrink: 0;
  background: var(--card-bg-alpha);
  border-radius: 12px;
  margin: 4px 12px;
  border: 1px solid var(--border-light);
}

/* ══ 输入区 ══ */
.input-area {
  display: flex;
  align-items: flex-end;
  padding: 6px 12px 10px;
  gap: 6px;
  border-top: 1px solid var(--border);
  background: transparent;
  flex-shrink: 0;
  transition: background .3s, border .3s;
  position: relative;
}
.input-area::before {
  content: '✽ ✾ ✿';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  letter-spacing: 4px;
  color: rgba(201, 122, 154, 0.25);
  pointer-events: none;
  background: rgba(255, 255, 255, 0.25);
  padding: 0 10px;
}
.input-agent-label {
  font-size: 9px;
  color: var(--text-muted);
  padding: 0 14px 2px;
  letter-spacing: .5px;
  display: none;
}
.input-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.input-field {
  width: 100%;
  border: none;
  border-radius: 40px;
  padding: 12px 20px;
  font-size: 14px;
  resize: none;
  outline: none;
  background: var(--input-bg);
  color: var(--text);
  font-family: inherit;
  line-height: 1.5;
  max-height: 120px;
  transition: box-shadow 0.3s, background 0.3s;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.03), 0 0 0 1px var(--input-border);
}
.input-field::placeholder {
  color: var(--text-muted);
}
.input-field:focus {
  background: #fff;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.02), 0 0 0 2px var(--primary-light), 0 0 30px var(--primary-glow);
}

/* 附件按钮 */
.attach-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
  color: var(--text-light);
  position: relative;
  overflow: hidden;
}
.attach-btn:hover {
  background: var(--primary-soft);
  color: var(--primary);
  transform: rotate(0deg);
}
.attach-btn:active {
  transform: scale(.88) rotate(-4deg);
}
.emoji-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
  color: var(--text-light);
  position: relative;
}
.emoji-btn:hover {
  background: var(--primary-soft);
  color: var(--primary);
}
.emoji-btn.active {
  background: var(--primary-soft);
  color: var(--primary);
}

/* 表情选择器 */
.emoji-picker {
  position: absolute;
  bottom: 70px;
  right: 12px;
  width: 320px;
  max-height: 300px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  z-index: 25;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.emoji-picker.show {
  display: flex;
}
.emoji-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
}
.emoji-picker-tabs {
  display: flex;
  gap: 4px;
}
.ep-tab {
  padding: 3px 10px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s;
  opacity: .5;
  line-height: 1.4;
}
.ep-tab:hover { background: var(--sidebar-hover); }
.ep-tab.active { opacity: 1; background: var(--primary-soft); }
.emoji-picker-title {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 600;
}
.emoji-picker-close {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 6px;
}
.emoji-picker-close:hover {
  background: var(--sidebar-hover);
}
.emoji-picker-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: flex-start;
}
.emoji-picker-body .ep-item {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s, transform .15s;
  user-select: none;
}
.emoji-picker-body .ep-item:hover {
  background: var(--primary-soft);
  transform: scale(1.15);
}
.emoji-picker-body .ep-item:active {
  transform: scale(1.25);
}

/* 贴纸面板 */
.sticker-picker-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
}
.sticker-picker-body .sp-item {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 10px;
  transition: background .15s, transform .15s;
  overflow: hidden;
  border: 1px solid var(--border-light);
}
.sticker-picker-body .sp-item:hover {
  background: var(--primary-soft);
  transform: scale(1.08);
}
.sticker-picker-body .sp-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
.sticker-hint {
  width: 100%;
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  padding: 30px 10px;
  line-height: 2;
}
.sticker-hint code {
  background: var(--primary-soft);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
}

.mic-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
  color: var(--text-light);
  position: relative;
}
.mic-btn:hover {
  background: var(--primary-soft);
  color: var(--primary);
}
.mic-btn.mic-active {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.12);
  animation: micPulse 1s ease-in-out infinite;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.3); }
  50% { box-shadow: 0 0 0 8px rgba(231, 76, 60, 0); }
}

/* 图片预览 */
.image-preview-area {
  display: none;
  position: relative;
  padding: 6px 14px 4px;
  align-items: center;
  gap: 8px;
}
.image-preview-area.show {
  display: flex;
}
.image-preview {
  max-width: 120px;
  max-height: 80px;
  border-radius: 10px;
  object-fit: cover;
  border: 1.5px solid var(--primary-light);
  box-shadow: 0 2px 8px var(--primary-glow);
}
.image-preview-close {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 2px;
  left: 126px;
  transition: transform .15s;
}
.image-preview-close:hover {
  transform: scale(1.15);
}

/* 发送按钮 */
.send-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  flex-shrink: 0;
  margin-bottom: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s;
}
.send-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #6b8a9e, #8aa8b8);
  transition: transform .3s;
}
.send-btn:hover::before {
  transform: scale(1.1);
}
.send-btn:active {
  transform: scale(.9);
}
.send-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}
.send-btn-icon {
  position: relative;
  z-index: 1;
  font-size: 18px;
  color: #fff;
  transition: transform .3s, opacity .3s;
}
.send-btn:not(:disabled):hover {
  transform: scale(1.08);
  box-shadow: 0 3px 14px var(--primary-glow);
}
.send-btn:not(:disabled) .send-btn-icon {
  animation: sendPulse 2s ease-in-out infinite;
}
@keyframes sendPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: .7;
  }
}

/* 滚动到底 */
.scroll-bottom-btn {
  position: absolute;
  bottom: 80px;
  right: 20px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  font-size: 15px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  transition: all .2s;
  color: var(--text-light);
}
.scroll-bottom-btn.show {
  display: flex;
}
.scroll-bottom-btn:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  color: var(--primary);
  border-color: var(--primary-light);
}

/* 打字 */
.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 8px 16px;
  align-self: flex-start;
}
.typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typingBounce 1.4s ease-in-out infinite;
}
.typing-dot:nth-child(2) {
  animation-delay: .2s;
}
.typing-dot:nth-child(3) {
  animation-delay: .4s;
}
@keyframes typingBounce {
  0%,
  80%,
  100% {
    transform: scale(.6);
    opacity: .4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ══ 设置面板 ══ */
.settings-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, .3);
}
.settings-overlay.show {
  display: block;
  animation: fadeIn .2s;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.settings-panel {
  position: fixed;
  top: 0;
  right: -340px;
  width: 320px;
  height: 100vh;
  height: 100dvh;
  background: var(--card-bg);
  z-index: 31;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 30px rgba(0, 0, 0, .12);
  transition: right .3s cubic-bezier(.4, 0, .2, 1);
  color: var(--text);
}
.settings-panel.open {
  right: 0;
}
.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.settings-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
}
.settings-close {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-light);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all .15s;
}
.settings-close:hover {
  background: var(--border);
  color: var(--text);
}
.settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}
.settings-group {
  padding: 8px 20px;
}
.settings-group-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
.settings-item:last-child {
  border-bottom: none;
}
.settings-item-label {
  font-size: 13px;
  color: var(--text);
}
.settings-value {
  font-size: 13px;
  color: var(--text-light);
  font-weight: 600;
}
.settings-toggle {
  cursor: pointer;
  flex-shrink: 0;
}
.settings-toggle-track {
  width: 38px;
  height: 20px;
  background: #ddd;
  border-radius: 10px;
  position: relative;
  transition: background .3s;
}
[data-theme="dark"] .settings-toggle-track {
  background: #3a3a4e;
}
.settings-toggle-track.on {
  background: var(--primary);
}
.settings-toggle-thumb {
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left .3s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.settings-toggle-track.on .settings-toggle-thumb {
  left: 20px;
}

/* 健康面板浮窗 */
.health-panel {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--card-bg);
  border-radius: 18px;
  padding: 22px 26px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .2);
  z-index: 40;
  min-width: 240px;
  font-size: 13px;
  color: var(--text);
  line-height: 2;
}
.health-panel.show {
  display: block;
  animation: fadeInUp .25s;
}
.health-panel .hp-title {
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
  font-size: 15px;
}
.health-panel .hp-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.health-panel .hp-label {
  color: var(--text-light);
}
.health-panel .hp-value {
  font-weight: 600;
}
.health-panel .hp-ok {
  color: #4caf50;
}
.health-panel .hp-warn {
  color: #ff9800;
}
.health-panel .hp-err {
  color: #f44336;
}
.health-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 16px;
  color: var(--text-light);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.health-close:hover {
  background: var(--border);
}

/* ═══ 心灵档案面板 ═══ */
.deep-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--card-bg);
  border-radius: 18px;
  box-shadow: 0 12px 48px rgba(0,0,0,.2);
  z-index: 31;
  width: min(480px, 90vw);
  max-height: 80vh;
  display: none;
  flex-direction: column;
  border: 1px solid var(--border);
  overflow: hidden;
}
.deep-panel.show {
  display: flex;
  animation: panelSlideIn .25s ease;
}
.deep-title {
  font-size: 16px;
  font-weight: 700;
  padding: 20px 20px 12px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.deep-stats {
  padding: 8px 20px;
  font-size: 12px;
  color: var(--text-light);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.deep-stats span {
  background: var(--bg-secondary, #f5f0f5);
  padding: 2px 10px;
  border-radius: 10px;
}
.deep-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px 20px;
  font-size: 13px;
  line-height: 1.6;
}
.deep-loading {
  color: var(--text-light);
  text-align: center;
  padding: 30px 0;
}
.deep-item {
  background: var(--bg-secondary, #f9f5f8);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-left: 3px solid var(--primary);
  position: relative;
}
.deep-item .deep-item-type {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 4px;
}
.deep-item .deep-item-content {
  color: var(--text);
}
.deep-item .deep-item-meta {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 4px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.deep-item .deep-item-triggers {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 2px;
}
.deep-item .deep-item-sev-high {
  border-left-color: #e53935;
}
.deep-item .deep-item-sev-mid {
  border-left-color: #fb8c00;
}
.deep-item .deep-item-sev-low {
  border-left-color: #43a047;
}
.deep-item .deep-item-del {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity .2s;
}
.deep-item:hover .deep-item-del {
  opacity: 1;
}
.deep-item .deep-item-del:hover {
  background: rgba(229,57,53,.1);
  color: #e53935;
}
.deep-empty {
  color: var(--text-light);
  text-align: center;
  padding: 30px 0;
  font-size: 14px;
}
.deep-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-light);
  padding: 4px 8px;
  border-radius: 8px;
  transition: background .2s;
  z-index: 1;
}
.deep-close:hover {
  background: var(--border);
}
.deep-deco {
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
  opacity: .3;
  flex-shrink: 0;
}

/* ═══ 生活干预面板 ═══ */
.intervention-panel {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  max-height: 70vh;
  background: var(--card-bg);
  border-radius: 18px;
  box-shadow: 0 12px 48px rgba(0,0,0,.2);
  z-index: 35;
  flex-direction: column;
  overflow: hidden;
  animation: fadeIn .2s;
}
.intervention-panel.show {
  display: flex;
}
.intervention-title {
  font-size: 16px;
  font-weight: 600;
  padding: 16px 20px 8px;
  color: var(--text);
}
.intervention-current {
  font-size: 13px;
  padding: 4px 20px;
  color: var(--text-light);
}
.intervention-style {
  font-size: 12px;
  padding: 2px 20px 8px;
  color: var(--accent);
}
.intervention-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px;
  min-height: 100px;
}
.intervention-loading, .intervention-empty {
  text-align: center;
  color: var(--text-light);
  padding: 30px 0;
  font-size: 13px;
}
.intervention-task {
  position: relative;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: var(--bg-secondary, #f8f0f5);
  border: 1px solid var(--border);
}
.intervention-task-cat {
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
}
.intervention-task-text {
  font-size: 14px;
  margin: 4px 0;
  color: var(--text);
}
.intervention-task-meta {
  font-size: 11px;
  color: var(--text-light);
  display: flex;
  gap: 10px;
}
.intervention-task-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.intervention-task-actions button {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  transition: all .2s;
}
.intervention-task-actions button:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.intervention-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-light);
  padding: 4px 8px;
  border-radius: 8px;
  transition: background .2s;
  z-index: 1;
}
.intervention-close:hover {
  background: var(--border);
}
.intervention-deco {
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--primary), var(--accent));
  opacity: .3;
  flex-shrink: 0;
}

/* ═══ 溪的心声面板 ═══ */
.thoughts-panel {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  max-height: 70vh;
  background: var(--card-bg);
  border-radius: 18px;
  box-shadow: 0 12px 48px rgba(0,0,0,.2);
  z-index: 35;
  flex-direction: column;
  overflow: hidden;
  animation: fadeIn .2s;
}
.thoughts-panel.show {
  display: flex;
}
.thoughts-title {
  font-size: 16px;
  font-weight: 600;
  padding: 16px 20px 4px;
  color: var(--text);
}
.thoughts-subtitle {
  font-size: 12px;
  padding: 0 20px 12px;
  color: var(--text-light);
  border-bottom: 1px solid var(--border);
}
.thoughts-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px;
  min-height: 100px;
}
.thoughts-loading, .thoughts-empty {
  text-align: center;
  color: var(--text-light);
  padding: 30px 0;
  font-size: 13px;
}
.thoughts-entry {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: var(--bg-secondary, #f8f0f5);
  border-left: 3px solid var(--primary);
}
.thoughts-entry.proactive {
  border-left-color: var(--accent, #ff9800);
}
.thoughts-entry-type {
  font-size: 11px;
  color: var(--text-light);
  margin-bottom: 4px;
}
.thoughts-entry-type .tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  background: var(--primary);
  color: #fff;
  margin-right: 4px;
}
.thoughts-entry-type .tag.proactive-tag {
  background: var(--accent, #ff9800);
}
.thoughts-entry-content {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
}
.thoughts-entry-meta {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 4px;
  display: flex;
  gap: 8px;
}
.thoughts-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-light);
  padding: 4px 8px;
  border-radius: 8px;
  transition: background .2s;
  z-index: 1;
}
.thoughts-close:hover {
  background: var(--border);
}
/* 溪的内心世界区块（心声面板顶部，2026-08-22） */
.innerworld-title {
  font-size: 15px; font-weight: 600; letter-spacing: 1.5px;
  margin: 2px 0 10px; padding-bottom: 8px;
  border-bottom: 1px dashed rgba(0,0,0,.08);
}
.innerworld-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.12), transparent);
  margin: 14px 0 12px;
}
[data-theme="dark"] .innerworld-title { border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .innerworld-divider { background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent); }
.thoughts-deco {
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
  opacity: .3;
  flex-shrink: 0;
}

/* ═══ 日记面板 ═══ */
.diary-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, .3);
}
.diary-overlay.show {
  display: block;
  animation: fadeIn .2s;
}
.diary-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--card-bg);
  border-radius: 18px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .2);
  z-index: 31;
  width: 480px;
  max-width: 90vw;
  max-height: 80vh;
  display: none;
  flex-direction: column;
  color: var(--text);
  animation: fadeInUp .25s;
}
.diary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.diary-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
}
.diary-close {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-light);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all .15s;
}
.diary-close:hover {
  background: var(--border);
  color: var(--text);
}
.diary-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}
.diary-body::-webkit-scrollbar {
  width: 4px;
}
.diary-body::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 10px;
}
.diary-loading {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
  font-size: 14px;
}
.diary-entry {
  background: var(--card-bg-alpha);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--border-light);
  transition: border-color .2s;
}
.diary-entry:hover {
  border-color: var(--primary-light);
}
.diary-entry-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12px;
}
.diary-entry-date {
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
}
.diary-entry-mood {
  font-size: 12px;
  color: var(--text-light);
  background: var(--primary-soft);
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 500;
}
.diary-entry-energy {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: auto;
}
.diary-entry-content {
  font-size: 13px;
  line-height: 1.8;
  color: var(--text);
  white-space: pre-wrap;
  font-family: 'Georgia', 'KaiTi', serif;
}
.diary-entry-char {
  font-size: 10px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 6px;
}
.diary-empty {
  text-align: center;
  padding: 50px 20px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 2;
}
.diary-deco {
  height: 70px;
  flex-shrink: 0;
  background: url('/static/deco-settings.jpg') center/cover no-repeat;
  border-radius: 0 0 16px 16px;
  opacity: .4;
}
[data-theme="dark"] .diary-deco {
  opacity: .25;
}

/* ══ 响应式 ══ */
@media(max-width:768px) {
  .sidebar {
    position: fixed;
    left: -220px;
    top: 0;
    height: 100%;
    z-index: 50;
    transition: left .3s;
  }
  .sidebar.open {
    left: 0;
  }
  .top-bar-menu-btn {
    display: flex;
  }
  .chat-messages {
    padding: 12px 12px;
  }
  .message-container {
    max-width: 90%;
  }
  .bubble {
    font-size: 13px;
    padding: 8px 12px;
  }
  .input-area {
    padding: 8px 10px 12px;
  }
}

/* 装饰图片 */
.settings-deco {
  height: 90px;
  margin: 8px 0 0;
  background: url('/static/deco-settings.jpg') center/cover no-repeat;
  border-radius: 0 0 16px 16px;
  opacity: .6;
}
[data-theme="dark"] .settings-deco {
  opacity: .4;
}

/* TTS 历史 */
.tts-history-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background .2s;
}
.tts-history-item:hover {
  background: var(--border);
}
.tts-h-time {
  font-size: 10px;
  color: var(--text-muted);
  width: 36px;
  flex-shrink: 0;
}
.tts-h-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-light);
  font-size: 11px;
}
.tts-h-play {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
}
.input-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 6px;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* 涌现模式 */
.emergence-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: radial-gradient(ellipse at 50% 30%, #0f0a1e, #05030a 70%);
  display: none;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: opacity 1.5s;
}
.emergence-overlay.active {
  display: flex;
  pointer-events: none;
}
.emergence-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(100, 50, 255, .06), transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(255, 50, 150, .04), transparent 50%);
}
.emergence-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 400px 400px;
  opacity: .15;
  pointer-events: none;
}

/* 涌现文字 */
.emergence-text {
  position: relative;
  z-index: 101;
  font-size: 52px;
  font-weight: 200;
  letter-spacing: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .25), rgba(180, 140, 255, .2), rgba(255, 255, 255, .15));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: emergeText 5s ease-in-out infinite;
  user-select: none;
  text-shadow: none;
}
@keyframes emergeText {
  0%,
  100% {
    opacity: .3;
    transform: scale(.98);
    filter: blur(1px);
  }
  25% {
    opacity: .7;
    transform: scale(1);
    filter: blur(0);
  }
  50% {
    opacity: .4;
    transform: scale(1.02);
    filter: blur(.5px);
  }
  75% {
    opacity: .6;
    transform: scale(1);
    filter: blur(0);
  }
}

/* 粒子 */
.emergence-dot {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: emergeDot linear infinite;
}
@keyframes emergeDot {
  0% {
    transform: translateY(105vh) scale(0);
    opacity: 0;
  }
  8% {
    opacity: var(--p-opacity, 0.5);
  }
  45% {
    transform: translateY(40vh) scale(var(--p-scale, 1));
    opacity: var(--p-opacity, 0.5);
  }
  75% {
    opacity: var(--p-opacity, 0.3);
  }
  100% {
    transform: translateY(-8vh) scale(0);
    opacity: 0;
  }
}
.emergence-star {
  position: absolute;
  pointer-events: none;
  animation: emergeStar linear infinite;
}
.emergence-star::before {
  content: '✦';
  position: absolute;
  font-size: inherit;
  color: inherit;
  text-shadow: 0 0 8px currentColor;
}
@keyframes emergeStar {
  0% {
    transform: translateY(110vh) rotate(0deg) scale(0);
    opacity: 0;
  }
  10% {
    opacity: var(--p-opacity, 0.7);
  }
  40% {
    transform: translateY(35vh) rotate(180deg) scale(var(--p-scale, 1));
    opacity: var(--p-opacity, 0.7);
  }
  70% {
    opacity: var(--p-opacity, 0.4);
  }
  100% {
    transform: translateY(-12vh) rotate(360deg) scale(0);
    opacity: 0;
  }
}
.emergence-glimmer {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: glimmer ease-in-out infinite alternate;
}
@keyframes glimmer {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  30% {
    opacity: var(--p-opacity, 0.8);
    transform: scale(var(--p-scale, 1));
  }
  70% {
    opacity: var(--p-opacity, 0.6);
    transform: scale(calc(var(--p-scale, 1)*0.8));
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
.emergence-line {
  position: absolute;
  height: 1px;
  pointer-events: none;
  border-radius: 1px;
  animation: emergeLine ease-in-out infinite;
}
@keyframes emergeLine {
  0% {
    transform: translateX(-10vw) translateY(0) scaleX(0);
    opacity: 0;
  }
  20% {
    opacity: var(--p-opacity, 0.3);
    transform: translateX(20vw) translateY(-10vh) scaleX(1);
  }
  50% {
    transform: translateX(50vw) translateY(-25vh) scaleX(var(--p-scale, 0.8));
    opacity: var(--p-opacity, 0.3);
  }
  80% {
    opacity: var(--p-opacity, 0.1);
  }
  100% {
    transform: translateX(110vw) translateY(-40vh) scaleX(0);
    opacity: 0;
  }
}
.emergence-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
  animation: orbPulse 8s ease-in-out infinite alternate;
}
@keyframes orbPulse {
  0% {
    transform: scale(.6);
    opacity: .15;
  }
  100% {
    transform: scale(1.2);
    opacity: .35;
  }
}

/* ═══ 学习空间 ═══ */
.study-space {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  animation: fadeIn .25s ease;
}
.study-space-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary-soft), transparent);
  border-bottom: 1px solid var(--border);
}
.study-space-title {
  font-size: 15px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), #7a9aae);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.study-space-close {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  font-size: 14px;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
}
.study-space-close:hover {
  background: var(--sidebar-hover);
  color: var(--primary);
  border-color: var(--primary-light);
  transform: scale(1.05);
}

.study-space-body {
  flex: 1;
  display: flex;
  min-height: 0;
}
.study-space-sidebar {
  width: 170px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 14px 10px;
  background: var(--msg-area-bg);
}
.study-ss-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  padding-left: 4px;
}
.study-ss-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.study-ss-item {
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-light);
  transition: all .15s;
  border-left: 2px solid transparent;
}
.study-ss-item:hover {
  background: var(--sidebar-hover);
  color: var(--text);
}
.study-ss-item.active {
  border-left-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}
.study-ss-item .ss-num {
  font-weight: 700;
  font-size: 10px;
  color: var(--primary);
  display: block;
  margin-bottom: 1px;
}

.study-space-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
}
.study-ss-welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  overflow-y: auto;
  min-height: 0;
}
.study-ss-wicon {
  font-size: 44px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.study-ss-wtitle {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}
.study-ss-wdesc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
  line-height: 1.7;
  text-align: center;
}
.study-ss-winput {
  width: 100%;
  max-width: 380px;
  padding: 13px 18px;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s;
  display: block;
  margin: 0 auto;
}
.study-ss-winput:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.study-ss-wbtn {
  display: block;
  margin: 14px auto 0;
  padding: 12px 30px;
  border-radius: 12px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  background: var(--primary-glow);
  color: var(--primary);
}
.study-ss-wbtn:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(107, 138, 158, .25);
}

.study-ss-chat {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.study-ss-msg {
  max-width: 82%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.75;
  animation: msgEnter .35s ease both;
}
.study-ss-msg.user {
  align-self: flex-end;
  background: var(--bubble-user-grad);
  color: var(--text);
  border-bottom-right-radius: 4px;
}
.study-ss-msg.assistant {
  align-self: flex-start;
  background: var(--bubble-assistant-grad);
  color: var(--text);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.study-ss-msg .ss-label {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 4px;
}
.study-ss-msg.assistant .ss-label {
  color: var(--primary);
}
.study-ss-msg pre {
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: 10px;
  padding: 12px;
  overflow-x: auto;
  margin: 8px 0;
  font-size: 12px;
}
.study-ss-msg code {
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 12px;
}
.study-ss-msg p code {
  background: var(--input-bg);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}
.study-ss-msg p {
  margin: 0;
}
.study-ss-msg p+p {
  margin-top: 6px;
}

.ss-soft-hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border, #e0d8e4), transparent);
  margin: 14px auto;
  max-width: 60%;
  opacity: .5;
}
.ss-loading-dots {
  display: inline;
  font-size: 13px;
  color: var(--text-muted);
}
.ss-loading-dots span {
  animation: ssDot 1.4s infinite;
  opacity: 0;
  font-size: 18px;
  line-height: 1;
}
.ss-loading-dots span:nth-child(2) {
  animation-delay: .2s;
}
.ss-loading-dots span:nth-child(3) {
  animation-delay: .4s;
}
@keyframes ssDot {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.study-ss-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--card-bg-alpha);
}
.study-ss-input {
  flex: 1;
  border: 1.5px solid var(--input-border);
  border-radius: 14px;
  padding: 10px 16px;
  font-size: 13px;
  resize: none;
  outline: none;
  background: var(--input-bg);
  color: var(--text);
  font-family: inherit;
  line-height: 1.5;
  max-height: 80px;
  transition: border-color .25s;
}
.study-ss-input:focus {
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px rgba(107, 138, 158, .12);
}
.study-ss-input::placeholder {
  color: var(--text-muted);
}
.study-ss-send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  flex-shrink: 0;
  background: linear-gradient(135deg, #6b8a9e, #8aa8b8);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.study-ss-send:hover {
  transform: scale(1.08);
  box-shadow: 0 3px 12px var(--primary-glow);
}

.study-ss-lesson-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-light);
  background: var(--card-bg-alpha);
  flex-shrink: 0;
}
.ss-nav-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
  color: var(--text-light);
  font-weight: 500;
}
.ss-nav-btn:hover {
  background: var(--primary-soft);
  border-color: var(--primary-light);
  color: var(--primary);
}
.ss-nav-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  background: var(--border);
}
.ss-nav-info {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.ss-tts-nav-btn {
  margin-left: auto;
  font-size: 14px;
  padding: 4px 10px;
}
.ss-tts-content-btn {
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid var(--primary-light);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.ss-tts-content-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.study-ss-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--text-muted);
  font-size: 14px;
  gap: 8px;
}
.study-ss-loading::after {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
.study-ss-loading span {
  animation: ssDot 1.4s infinite;
  opacity: 0;
}
.study-ss-loading span:nth-child(2) {
  animation-delay: .2s;
}
.study-ss-loading span:nth-child(3) {
  animation-delay: .4s;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.study-input-group {
  margin: 16px 0;
}
.study-input-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text);
}
.study-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 14px;
  transition: all .2s;
  box-sizing: border-box;
  outline: none;
}
.study-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.study-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 12px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  background: var(--primary-glow);
  color: var(--primary);
  width: 100%;
  margin-top: 8px;
}
.study-btn:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(107, 138, 158, .25);
}
.study-btn:active {
  transform: translateY(0);
}
.study-btn.secondary {
  background: var(--border);
  color: var(--text);
  width: auto;
}
.study-btn.secondary:hover {
  background: var(--text-muted);
  color: #fff;
  box-shadow: none;
}
.study-btn.small {
  padding: 7px 14px;
  font-size: 12px;
  width: auto;
}

.study-topic-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  cursor: pointer;
  transition: all .2s;
  border: 1.5px solid var(--border);
  margin-bottom: 8px;
  background: var(--card-bg);
}
.study-topic-item:hover {
  background: var(--primary-soft);
  border-color: var(--primary-light);
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.study-topic-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  flex-shrink: 0;
}
.study-topic-info {
  flex: 1;
  min-width: 0;
}
.study-topic-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.study-topic-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.study-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--primary);
  cursor: pointer;
  margin-bottom: 12px;
  transition: all .2s;
  font-weight: 600;
}
.study-back:hover {
  transform: translateX(-3px);
}
.study-lesson-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text);
}
.study-lesson-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.study-lesson-content {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--text);
  background: var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.study-lesson-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.study-quiz {
  background: var(--border);
  border-radius: 16px;
  padding: 18px;
  margin: 12px 0;
  border: 1px solid var(--border-light);
}
.study-quiz-question {
  font-weight: 700;
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.6;
}
.study-quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  margin: 6px 0;
  border-radius: 10px;
  border: 1.5px solid var(--border-light);
  background: var(--card-bg);
  cursor: pointer;
  transition: all .15s;
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}
.study-quiz-option:hover {
  border-color: var(--primary-light);
  background: var(--primary-soft);
}
.study-quiz-option.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
  font-weight: 600;
}
.study-quiz-option.correct {
  border-color: #4caf50;
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  font-weight: 600;
}
.study-quiz-option.wrong {
  border-color: #f44336;
  background: linear-gradient(135deg, #ffebee, #ffcdd2);
}

.study-result {
  text-align: center;
  padding: 12px;
  border-radius: 12px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
}
.study-result.correct {
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  color: #2e7d32;
}
.study-result.wrong {
  background: linear-gradient(135deg, #ffebee, #ffcdd2);
  color: #c62828;
}

.study-progress {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 0 2px;
}
.study-prog-dot {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  transition: all .3s;
}
.study-prog-dot.done {
  background: var(--primary);
}
.study-prog-dot.active {
  background: var(--primary-light);
  box-shadow: 0 0 6px rgba(107, 138, 158, .4);
}

.study-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--card-bg-alpha);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  flex-shrink: 0;
}
.study-tab {
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  color: var(--text-light);
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: 4px;
}
.study-tab:hover {
  background: var(--sidebar-hover);
  color: var(--text);
}
.study-tab.active {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--primary-light);
  font-weight: 600;
}
.study-tab-add {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px dashed var(--border);
  background: transparent;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all .15s;
}
.study-tab-add:hover {
  border-color: var(--primary-light);
  color: var(--primary);
  background: var(--primary-soft);
}
.study-tab-close {
  font-size: 10px;
  opacity: 0.4;
  cursor: pointer;
  padding: 0 2px;
  border-radius: 3px;
  transition: all .15s;
}
.study-tab-close:hover {
  opacity: 1;
  background: var(--border);
  color: var(--text);
}

.study-content-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px;
  line-height: 1.85;
  font-size: 14px;
  color: var(--text);
}
.study-content-area h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--primary);
}
.study-content-area h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 16px 0 8px;
  color: var(--text);
}
.study-content-area p {
  margin: 8px 0;
}
.study-content-area pre {
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: 10px;
  padding: 14px;
  overflow-x: auto;
  margin: 10px 0;
  font-size: 13px;
}
.study-content-area code {
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 13px;
}
.study-content-area p code {
  background: var(--input-bg);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 13px;
}
.study-content-area ul,
.study-content-area ol {
  padding-left: 20px;
  margin: 6px 0;
}
.study-content-area li {
  margin: 3px 0;
}
.study-content-area blockquote {
  border-left: 3px solid var(--primary-light);
  padding: 6px 14px;
  margin: 10px 0;
  color: var(--text-light);
  background: var(--primary-soft);
  border-radius: 0 8px 8px 0;
}

.study-exam-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px;
}
.study-exam-header {
  text-align: center;
  margin-bottom: 20px;
}
.study-exam-header h2 {
  font-size: 20px;
  color: var(--primary);
  margin-bottom: 4px;
}
.study-exam-header p {
  font-size: 12px;
  color: var(--text-muted);
}
.study-exam-q {
  background: var(--card-bg-alpha);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}
.study-exam-q-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 10px;
  color: var(--text);
}
.study-exam-q-title .q-num {
  color: var(--primary);
  margin-right: 6px;
}
.study-exam-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.study-exam-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}
.study-exam-opt:hover {
  background: var(--sidebar-hover);
  border-color: var(--primary-light);
}
.study-exam-opt.selected {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 500;
}
.study-exam-opt.correct {
  background: #e8f5e9;
  border-color: #4caf50;
  color: #2e7d32;
}
.study-exam-opt.correct::after {
  content: '✅';
  margin-left: auto;
  font-size: 14px;
}
.study-exam-opt.wrong {
  background: #ffebee;
  border-color: #ef5350;
  color: #c62828;
}
.study-exam-opt.wrong::after {
  content: '❌';
  margin-left: auto;
  font-size: 14px;
}
[data-theme="dark"] .study-exam-opt.correct {
  background: #1a3a1a;
  border-color: #4caf50;
  color: #81c784;
}
[data-theme="dark"] .study-exam-opt.wrong {
  background: #3a1a1a;
  border-color: #ef5350;
  color: #ef9a9a;
}
.study-exam-opt input[type="radio"] {
  accent-color: var(--primary);
}
.study-exam-correct {
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 12px;
  font-weight: 500;
}
[data-theme="dark"] .study-exam-correct {
  background: #1a3a1a;
  color: #81c784;
}
.study-exam-essay {
  width: 100%;
  min-height: 80px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color .2s;
}
.study-exam-essay:focus {
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px rgba(107, 138, 158, .12);
}
.study-exam-essay-actions {
  text-align: right;
  margin-top: 8px;
}
.study-exam-essay-btn {
  padding: 6px 18px;
  border-radius: 8px;
  border: 1px solid var(--primary-light);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.study-exam-essay-btn:hover {
  background: var(--primary);
  color: #fff;
}
.study-exam-essay-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.study-exam-essay-result {
  margin-top: 10px;
}
.essay-eval {
  background: var(--card-bg-alpha);
  border-radius: 10px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.8;
  border-left: 3px solid var(--primary);
}
.essay-eval p {
  margin: 4px 0;
}
.study-exam-actions {
  text-align: center;
  padding: 16px 0 8px;
}
.study-exam-r-btn {
  padding: 10px 24px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
  color: var(--text-light);
  font-weight: 500;
}
.study-exam-r-btn:hover {
  background: var(--primary-soft);
  border-color: var(--primary-light);
  color: var(--primary);
}

.study-session-list {
  padding: 16px 20px;
}
.study-session-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all .15s;
  border: 1px solid var(--border);
  margin-bottom: 8px;
}
.study-session-card:hover {
  background: var(--sidebar-hover);
  border-color: var(--primary-light);
}
.study-session-icon {
  font-size: 24px;
}
.study-session-info {
  flex: 1;
}
.study-session-topic {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.study-session-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.study-session-resume {
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid var(--primary-light);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.study-session-resume:hover {
  background: var(--primary);
  color: #fff;
}
.study-session-delete {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
  transition: all .15s;
}
.study-session-delete:hover {
  background: rgba(244, 67, 54, .1);
  color: #f44336;
  border-color: rgba(244, 67, 54, .2);
}

.sm-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  padding: 0 2px;
}
.sm-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sm-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  transition: all .2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.sm-card:hover {
  border-color: var(--primary-light);
  box-shadow: 0 3px 12px rgba(107, 138, 158, .1);
  transform: translateY(-1px);
}
.sm-card.sm-done {
  opacity: .75;
}
.sm-card.sm-done:hover {
  opacity: 1;
}
.sm-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.sm-card-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.sm-card-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: border-color .2s;
}
.sm-card-name:hover {
  border-bottom-color: var(--primary-light);
}
.sm-card-status {
  flex-shrink: 0;
}
.sm-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.sm-badge-active {
  background: var(--primary-soft);
  color: var(--primary);
}
.sm-badge-done {
  background: #e8f5e9;
  color: #2e7d32;
}
[data-theme="dark"] .sm-badge-done {
  background: #1a3a1a;
  color: #81c784;
}

.sm-card-bar {
  height: 5px;
  background: var(--border-light);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}
.sm-card-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--primary), #8aa8b8);
  transition: width .4s ease;
}
.sm-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sm-card-progress {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.sm-card-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.sm-btn {
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  font-size: 11px;
  cursor: pointer;
  transition: all .15s;
  color: var(--text-light);
  font-weight: 500;
  white-space: nowrap;
}
.sm-btn:hover {
  background: var(--sidebar-hover);
  border-color: var(--primary-light);
  color: var(--text);
}
.sm-btn-resume {
  background: var(--primary-soft);
  border-color: var(--primary-light);
  color: var(--primary);
}
.sm-btn-resume:hover {
  background: var(--primary);
  color: #fff;
}
.sm-btn-complete {
  color: #2e7d32;
  border-color: #c8e6c9;
}
.sm-btn-complete:hover {
  background: #e8f5e9;
  border-color: #4caf50;
}
[data-theme="dark"] .sm-btn-complete {
  color: #81c784;
  border-color: #2e7d32;
}
[data-theme="dark"] .sm-btn-complete:hover {
  background: #1a3a1a;
}
.sm-btn-del:hover {
  background: rgba(244, 67, 54, .1);
  color: #f44336;
  border-color: rgba(244, 67, 54, .2);
}

.study-split-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}
.study-split-divider {
  height: 6px;
  flex-shrink: 0;
  cursor: row-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--border-light);
  transition: background .2s;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 2px;
  user-select: none;
  position: relative;
  z-index: 2;
}
.study-split-divider:hover {
  background: var(--primary-soft);
  color: var(--primary);
}
.study-split-divider:active {
  background: var(--primary-light);
  color: var(--primary);
}

.study-complete-banner {
  text-align: center;
  padding: 16px;
  margin: 16px;
  background: linear-gradient(135deg, var(--primary-soft), var(--assistant-soft));
  border-radius: 14px;
  border: 1px solid var(--primary-light);
}
.study-complete-banner .scb-icon {
  font-size: 32px;
  margin-bottom: 6px;
}
.study-complete-banner .scb-text {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 10px;
}
.study-complete-banner .scb-btn {
  padding: 10px 28px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #6b8a9e, #8aa8b8);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.study-complete-banner .scb-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(107, 138, 158, .3);
}

/* ═══ 人生规划面板 ═══ */
.life-panel {
  position: fixed;
  top: 0;
  left: 260px;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--card-bg-alpha);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.life-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.life-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.life-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.life-phase-badge {
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: #fff;
}
.life-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--border-light);
  color: var(--text-light);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.life-close:hover {
  background: var(--primary-soft);
  color: var(--primary);
}
.life-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-content: start;
}
.life-card {
  background: var(--card-bg);
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.life-card:first-child {
  grid-column: 1/-1;
}
.life-card-title {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border-light);
  background: rgba(255, 255, 255, 0.3);
}
.life-card-body {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.7;
}
.life-loading {
  color: var(--text-muted);
  text-align: center;
  padding: 20px;
}
.life-focus-area {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
}
.life-focus-skill {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}
.life-focus-reason {
  font-size: 12px;
  color: var(--text-muted);
}
.life-course-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
}
.life-course-item:last-child {
  border-bottom: none;
}
.life-course-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  transition: all .2s;
}
.life-course-check:hover {
  border-color: var(--primary);
}
.life-course-check.done {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.life-course-title {
  flex: 1;
  font-size: 13px;
}
.life-course-title.done {
  text-decoration: line-through;
  color: var(--text-muted);
}
.life-course-del {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 80, 80, 0.12);
  color: #e05050;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.life-course-del:hover {
  background: rgba(255, 80, 80, 0.25);
  color: #fff;
}
.life-gap-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
}
.life-gap-item:last-child {
  border-bottom: none;
}
.life-gap-name {
  color: var(--text);
}
.life-gap-area {
  color: var(--text-muted);
  font-size: 11px;
}
.life-gap-progress {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
}
.life-progress-area {
  margin-bottom: 8px;
}
.life-progress-area:last-child {
  margin-bottom: 0;
}
.life-progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 2px;
}
.life-progress-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--border-light);
  overflow: hidden;
}
.life-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary-light), var(--primary));
  transition: width .3s;
}

@media(max-width:800px) {
  .life-panel {
    left: 0;
  }
  .life-body {
    grid-template-columns: 1fr;
    padding: 16px;
  }
}

/* ═══ 手机端：学习空间自适应（修复“看不全/被裁掉”）═══ */
@media (max-width: 640px) {
  /* 上下结构：课程侧栏变成顶部横向条，主区用满整宽 */
  .study-space-body {
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
  }
  .study-space-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
    max-height: 32vh;
    flex-shrink: 0;
    overflow-y: auto;
  }
  .study-ss-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .study-ss-item {
    flex: 1 1 auto;
    border: 1px solid var(--border);
    font-size: 12px;
    padding: 7px 10px;
  }
  .study-space-main,
  .study-ss-welcome {
    min-width: 0;
  }
  .study-ss-welcome {
    padding: 28px 16px;
  }
  /* 学习记录卡片：允许换行，避免被右缘裁掉 */
  .study-session-list {
    padding: 12px 14px;
  }
  .study-session-card {
    flex-wrap: wrap;
    gap: 8px 10px;
  }
  .study-session-info {
    min-width: 0;
    flex: 1 1 160px;
  }
  .study-session-topic {
    word-break: break-word;
  }
  .study-session-meta {
    white-space: normal;
    word-break: break-word;
  }
  /* 内容区：禁横向溢出，代码块单独横向滚动 */
  .study-content-area,
  .study-ss-chat {
    overflow-x: hidden;
    min-width: 0;
  }
  .study-content-area pre {
    overflow-x: auto;
  }
  .study-tabs {
    flex-wrap: wrap;
  }
}