tavern-harness 0.1.0

package/src/theme/global.css

@@ -0,0 +1,1377 @@
+/* ============================================================
+   Tavern Harness — 全局样式（酒馆主题）
+   设计语言：暖色木质 + 渐变色玻璃 + 微妙纹理
+   ============================================================ */
+
+:root {
+  background: #F7F2E9;
+  color-scheme: light;
+  --radius: 14px;
+  --radius-lg: 18px;
+  --radius-sm: 9px;
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
+    'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
+  /* 衬线展示栈：本地系统衬线，零网络依赖；用于品牌名 / Hero / 页面标题 / 统计数字 */
+  --font-serif: 'Iowan Old Style', 'Palatino Linotype', 'Songti SC', 'Noto Serif SC',
+    'Source Han Serif SC', 'STSong', serif;
+  --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}
+
+html,
+body {
+  background: var(--bg, #F7F2E9);
+}
+
+body {
+  font-family: var(--font-sans);
+  background: var(--bg);
+  color: var(--text);
+  transition: background-color 0.25s ease, color 0.25s ease;
+  overflow: hidden;
+  font-size: 14.5px;
+  line-height: 1.6;
+}
+
+/* 酒馆氛围背景：低饱和度纯色 + 噪点纹理 */
+.tav-bg {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background: var(--bg);
+}
+.tav-bg::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  opacity: 0.35;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
+}
+
+::-webkit-scrollbar {
+  width: 9px;
+  height: 9px;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 8px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-faint);
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+}
+
+input,
+textarea,
+select {
+  font-family: inherit;
+}
+
+.mono {
+  font-family: var(--font-mono);
+}
+
+/* ---------- 布局框架 ---------- */
+.app-shell {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: var(--sidebar-w, 356px) 1fr;
+  height: 100dvh;
+}
+
+/* ---------- 侧边栏 ---------- */
+.sidebar {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  /* grid 子项默认 min-height:auto：内容（会话列表）再多也不会收缩，
+     会把整个侧边栏撑高、把底部搜索框挤出屏幕；必须显式允许收缩 */
+  min-height: 0;
+  overflow: hidden;
+  border-right: 1px solid var(--border);
+  background: color-mix(in srgb, var(--surface) 55%, transparent);
+  backdrop-filter: blur(18px);
+}
+/* 拖拽手柄 */
+.sidebar-resizer {
+  position: absolute;
+  top: 0;
+  right: -4px;
+  width: 8px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 30;
+  transition: background 0.15s;
+}
+.sidebar-resizer:hover {
+  background: color-mix(in srgb, var(--primary) 30%, transparent);
+}
+body.resizing {
+  cursor: col-resize;
+  user-select: none;
+}
+body.resizing .sidebar-resizer {
+  background: color-mix(in srgb, var(--primary) 45%, transparent);
+}
+.sidebar-head {
+  padding: 14px 14px 10px;
+}
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 8px 12px;
+  cursor: pointer;
+  border-radius: 10px;
+  user-select: none;
+  transition: background 0.15s;
+}
+.brand:hover {
+  background: color-mix(in srgb, var(--text) 5%, transparent);
+}
+.brand:active {
+  background: color-mix(in srgb, var(--text) 9%, transparent);
+}
+.brand-logo {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 35% 30%, var(--grad-from), var(--grad-to) 88%);
+  display: grid;
+  place-items: center;
+  color: #fff;
+  font-weight: 800;
+  font-size: 19px;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent), 0 0 22px var(--glow);
+  flex-shrink: 0;
+  transition: box-shadow 0.2s ease;
+}
+.brand:hover .brand-logo {
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 60%, transparent), 0 0 30px var(--glow);
+}
+.brand-name {
+  font-family: var(--font-serif);
+  font-weight: 700;
+  font-size: 18px;
+  letter-spacing: 0.3px;
+}
+.brand-sub {
+  font-size: 11px;
+  color: var(--text-faint);
+}
+
+.side-nav {
+  position: relative;
+  display: flex;
+  gap: 8px;
+  padding: 14px 14px 14px;
+  overflow-x: auto;
+  /* 不要滚动条：完全隐藏，滚轮由 horizontalWheel.ts 转换为横向滚动 */
+  scrollbar-width: none;
+  scrollbar-color: var(--border) transparent;
+}
+.side-nav::-webkit-scrollbar {
+  display: none;
+  height: 0;
+  background: transparent;
+}
+/* 有内容被遮挡时：被遮挡侧边缘轻微淡出，提示可横向滚动（不占空间） */
+.side-nav.has-overflow.hidden-left {
+  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px);
+  mask-image: linear-gradient(to right, transparent 0, #000 18px);
+}
+.side-nav.has-overflow.hidden-right {
+  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 18px);
+  mask-image: linear-gradient(to left, transparent 0, #000 18px);
+}
+.side-nav.has-overflow.hidden-left.hidden-right {
+  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
+  mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
+}
+.nav-chip {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--text-dim);
+  font-size: 13px;
+  font-weight: 600;
+  transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);
+  white-space: nowrap;
+}
+.nav-chip:hover {
+  background: color-mix(in srgb, var(--primary) 8%, transparent);
+  color: var(--text);
+  border-color: color-mix(in srgb, var(--primary) 25%, transparent);
+}
+.nav-chip.active {
+  position: relative;
+  z-index: 1;
+  background: color-mix(in srgb, var(--primary) 15%, var(--surface));
+  border-color: color-mix(in srgb, var(--primary) 58%, transparent);
+  color: var(--primary);
+  /* 柔和感以 inset 内发光 + 1px 高光环为主；外发光半径收在容器 padding 内避免 overflow 断层 */
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent),
+    inset 0 0 10px color-mix(in srgb, var(--glow) 30%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--primary) 26%, transparent),
+    0 0 8px color-mix(in srgb, var(--glow) 42%, transparent),
+    0 0 14px color-mix(in srgb, var(--glow) 20%, transparent);
+}
+.nav-chip .dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.75;
+}
+
+.session-list {
+  flex: 1;
+  /* flex 子项默认 min-height:auto，内容再多也不会收缩，
+     导致列表整体撑高、把搜索框挤出屏幕而自身不出现滚动条 */
+  min-height: 0;
+  overflow-y: auto;
+  padding: 6px 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.session-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 10px;
+  border-radius: var(--radius-sm);
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--text);
+  text-align: left;
+  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1);
+  width: 100%;
+}
+.session-item:hover {
+  background: color-mix(in srgb, var(--primary) 6%, transparent);
+}
+.session-item.active {
+  position: relative;
+  z-index: 1;
+  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
+  border-color: color-mix(in srgb, var(--primary) 36%, transparent);
+  box-shadow:
+    inset 3px 0 0 var(--primary),
+    inset 0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent),
+    inset 0 0 10px color-mix(in srgb, var(--glow) 22%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent),
+    0 0 8px color-mix(in srgb, var(--glow) 36%, transparent),
+    0 0 14px color-mix(in srgb, var(--glow) 18%, transparent);
+}
+.session-item .svc {
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  display: grid;
+  place-items: center;
+  font-size: 15px;
+  flex-shrink: 0;
+  background: var(--surface-3);
+  border: 1px solid var(--border-soft);
+}
+.session-item.active .svc {
+  background: var(--grad-from);
+  border-color: transparent;
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent),
+    0 0 8px color-mix(in srgb, var(--glow) 55%, transparent),
+    0 0 14px color-mix(in srgb, var(--glow) 24%, transparent);
+}
+/* 群聊外框保持中性底色，选中（激活）时不变色 */
+.session-item.active .svc.svc-group {
+  background: var(--surface-3);
+  border-color: var(--border-soft);
+}
+/* 单人头像：外框与群聊拼贴外框尺寸一致，选中时同样保持中性底色 */
+.session-item .svc.svc-single {
+  position: relative;
+  overflow: hidden;
+  padding: 2px;
+  background: var(--surface-3);
+  border-color: var(--border-soft);
+}
+.session-item.active .svc.svc-single {
+  background: var(--surface-3);
+  border-color: var(--border-soft);
+}
+.session-item .svc.svc-single .avatar {
+  width: 100%;
+  height: 100%;
+  border-radius: 7px;
+  box-shadow: none;
+}
+/* 会话头部单人头像（与群聊头部外框 40px 一致） */
+.svc-group-lg.svc-single {
+  width: 40px;
+  height: 40px;
+  padding: 3px;
+  border-radius: 12px;
+}
+.svc-group-lg.svc-single .avatar {
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  box-shadow: none;
+}
+
+/* ---------- 群聊头像拼贴（方框内嵌套至多 4 个头像） ---------- */
+.gcollage {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  gap: 1px;
+}
+.gcollage .gslot {
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  container-type: size;
+  padding: 1px;
+}
+.gcollage .gslot .avatar {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  box-shadow: none;
+}
+/* 文字头像：字号随格子尺寸缩放（cqw/cqh），撑满格子居中，保证字形完整不被裁切 */
+.gcollage .gslot .avatar:not(:has(img)) {
+  line-height: 1;
+  font-size: min(72cqw, 72cqh);
+}
+/* 4 位角色：2×2 */
+.gcollage-m4 {
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+}
+/* 侧边栏会话项的 .svc 是 grid + place-items:center，
+   让拼贴绝对定位于方框内以稳定撑满 34px */
+.session-item .svc.svc-group {
+  position: relative;
+  overflow: hidden;
+}
+.session-item .svc.svc-group .gcollage {
+  position: absolute;
+  inset: 2px;
+  width: auto;
+  height: auto;
+  padding: 0;
+  gap: 1px;
+}
+.session-item .smeta {
+  flex: 1;
+  min-width: 0;
+}
+.session-item .stitle {
+  font-family: var(--font-serif);
+  font-weight: 700;
+  font-size: 13.8px;
+  white-space: nowrap;
+  overflow: visible;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.session-item .stitle-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+.session-item .spinned {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--primary);
+  flex-shrink: 0;
+}
+.session-item .session-activity-dot {
+  width: 8px;
+  height: 8px;
+  flex: 0 0 8px;
+  margin-left: auto;
+  border-radius: 50%;
+  background: #38c976;
+  box-shadow: 0 0 0 0 color-mix(in srgb, #38c976 55%, transparent);
+  animation: session-activity-breathe 1.8s ease-in-out infinite;
+}
+@keyframes session-activity-breathe {
+  0%, 100% {
+    opacity: 0.62;
+    box-shadow: 0 0 0 0 color-mix(in srgb, #38c976 50%, transparent);
+  }
+  50% {
+    opacity: 1;
+    box-shadow: 0 0 0 5px color-mix(in srgb, #38c976 0%, transparent);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .session-item .session-activity-dot {
+    animation: none;
+    opacity: 1;
+  }
+}
+.session-item .sprev {
+  font-size: 11.5px;
+  color: var(--text-faint);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* ---------- 会话区域（头部 + 滚动列表） ---------- */
+.session-section {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ---------- 会话列表头部（标题 + 新建按钮） ---------- */
+.session-list-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  /* 左边与列表项头像对齐：session-list padding-left 14 + session-item padding-left 10 */
+  /* 右边与列表项右边缘对齐：session-list padding-right 14 + session-item padding-right 10 */
+  padding: 4px 24px 8px 24px;
+  /* 与侧边栏同色背景，彻底挡住下方滚动的列表项 */
+  background: color-mix(in srgb, var(--surface) 55%, transparent);
+  backdrop-filter: blur(18px);
+  border-bottom: 1px solid var(--border-soft);
+}
+/* 新建按钮：粗体文字 + 加号，不高亮 */
+.session-new-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  border: none;
+  background: none;
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 800;
+  padding: 4px 8px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.session-new-btn:hover {
+  background: var(--surface-2);
+  color: var(--primary);
+}
+/* 会话列表头部的按钮组（导入 + 新建） */
+.session-head-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+/* ---------- 侧边栏底部搜索框 ---------- */
+.sidebar-search {
+  position: relative;
+  padding: 10px 12px 12px;
+  border-top: 1px solid var(--border-soft);
+}
+.search-input {
+  width: 100%;
+  padding: 7px 30px 7px 12px;
+  border-radius: 10px;
+  font-size: 12.5px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+  outline: none;
+  transition: border-color 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.search-input:focus {
+  position: relative;
+  z-index: 1;
+  border-color: color-mix(in srgb, var(--primary) 48%, transparent);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent),
+    inset 0 0 8px color-mix(in srgb, var(--glow) 16%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent),
+    0 0 8px color-mix(in srgb, var(--glow) 34%, transparent),
+    0 0 14px color-mix(in srgb, var(--glow) 12%, transparent);
+}
+.search-clear {
+  position: absolute;
+  right: 18px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 22px;
+  height: 22px;
+  border: none;
+  border-radius: 50%;
+  background: var(--surface-2);
+  color: var(--text-dim);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+.search-clear:hover {
+  color: var(--danger);
+  background: var(--danger-soft);
+}
+
+/* ---------- 通用按钮 ---------- */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  padding: 8px 15px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: color-mix(in srgb, var(--surface) 80%, transparent);
+  color: var(--text);
+  font-size: 13.2px;
+  font-weight: 600;
+    text-decoration: none;
+  transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);
+  user-select: none;
+}
+.btn:hover {
+  position: relative;
+  z-index: 1;
+  border-color: color-mix(in srgb, var(--primary) 26%, transparent);
+  background: color-mix(in srgb, var(--primary) 7%, transparent);
+  /* 悬停仅轻微高亮；辉光保留给激活/选中状态 */
+}
+.btn:active {
+  transform: translateY(0);
+}
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+.btn-primary {
+  background: var(--grad-from);
+  border-color: transparent;
+  color: #fff;
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent),
+    0 4px 18px color-mix(in srgb, var(--glow) 60%, transparent),
+    0 12px 40px color-mix(in srgb, var(--glow) 28%, transparent);
+}
+.btn-primary:hover {
+  /* 主按钮常驻辉光；悬停仅轻微提亮，不再增强辉光 */
+  filter: brightness(1.05);
+  background: var(--grad-from);
+  color: #fff;
+}
+.btn-danger {
+  color: var(--danger);
+  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
+  background: var(--danger-soft);
+}
+.btn-danger:hover {
+  background: color-mix(in srgb, var(--danger) 16%, transparent);
+}
+.btn-ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--text-dim);
+  padding: 6px 10px;
+}
+.btn-ghost:hover {
+  background: var(--surface-2);
+  color: var(--text);
+}
+.btn-sm {
+  padding: 4px 10px;
+  font-size: 12px;
+  border-radius: 8px;
+}
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-dim);
+  font-size: 14px;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+.icon-btn:hover {
+  background: var(--surface-2);
+  color: var(--text);
+}
+
+/* ---------- 输入控件 ---------- */
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-width: 0;
+}
+.field > label {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-dim);
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+}
+.input,
+.textarea,
+.select {
+  width: 100%;
+  padding: 9px 12px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+  font-size: 13.5px;
+  transition: border-color 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1);
+  outline: none;
+}
+.input:focus,
+.textarea:focus,
+.select:focus {
+  position: relative;
+  z-index: 1;
+  border-color: color-mix(in srgb, var(--primary) 52%, transparent);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent),
+    inset 0 0 8px color-mix(in srgb, var(--glow) 18%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent),
+    0 0 8px color-mix(in srgb, var(--glow) 36%, transparent),
+    0 0 14px color-mix(in srgb, var(--glow) 14%, transparent);
+}
+.textarea {
+  resize: vertical;
+  min-height: 76px;
+  line-height: 1.55;
+}
+.input::placeholder,
+.textarea::placeholder {
+  color: var(--text-faint);
+}
+.select {
+  appearance: none;
+  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
+    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
+  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
+  background-size: 5px 5px;
+  background-repeat: no-repeat;
+  padding-right: 28px;
+  cursor: pointer;
+}
+.check {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 13.5px;
+  user-select: none;
+}
+.check input {
+  accent-color: var(--primary);
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 9px;
+  border-radius: 999px;
+  background: var(--tag-bg);
+  color: var(--tag-text);
+  font-size: 11.5px;
+  font-weight: 700;
+}
+
+.card {
+  border: 1px solid var(--border);
+  background: var(--surface);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+}
+
+/* ---------- 主区域 ---------- */
+.main-area {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  height: 100dvh;
+  position: relative;
+}
+
+.chat-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 0 10px;
+  /* 与聊天头部 / 输入区同一块磨砂玻璃面：统一底色，消除可见的色块分界线 */
+  background: color-mix(in srgb, var(--surface) 62%, transparent);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.chat-col {
+  max-width: 820px;
+  margin: 0 auto;
+  padding: 0 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* ---------- 聊天头部 ---------- */
+.chat-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 22px;
+  border-bottom: 1px solid var(--border);
+  background: color-mix(in srgb, var(--surface) 62%, transparent);
+  backdrop-filter: blur(16px);
+  z-index: 5;
+}
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  display: grid;
+  place-items: center;
+  font-weight: 700;
+  font-size: 17px;
+  font-family: var(--font-serif);
+  color: #fff;
+  flex-shrink: 0;
+  background: var(--grad-from);
+  box-shadow: 0 3px 12px var(--glow);
+  overflow: hidden;
+}
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.avatar.sm {
+  width: 32px;
+  height: 32px;
+  font-size: 14px;
+  border-radius: 10px;
+}
+.avatar.xs {
+  width: 26px;
+  height: 26px;
+  font-size: 12px;
+  border-radius: 8px;
+  box-shadow: none;
+}
+
+/* 会话头部大号群聊拼贴（外框与侧边栏统一：圆角矩形 + 中性底色 + 边框） */
+.svc-group-lg {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  font-size: 17px;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  background: var(--surface-3);
+  border: 1px solid var(--border-soft);
+  overflow: hidden;
+  box-shadow: 0 3px 12px var(--glow);
+}
+.svc-group .gcollage {
+  padding: 1px;
+  gap: 1px;
+}
+
+/* 聊天头部：内边距加宽，让内部头像避开外框圆角（12px）的圆弧遮挡 */
+.chat-header .svc-group-lg .gcollage {
+  padding: 3px;
+  gap: 2px;
+}
+.chat-header .tinfo {
+  flex: 1;
+  min-width: 0;
+}
+.chat-header .ttitle {
+  font-family: var(--font-serif);
+  font-weight: 700;
+  font-size: 17px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.chat-header .tsub {
+  font-size: 12px;
+  color: var(--text-faint);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.chat-header .tsub-members {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.chat-header .tsub-mode {
+  flex-shrink: 0;
+  font-weight: 700;
+  color: var(--primary);
+}
+
+/* ---------- 聊天头部右侧动作按钮 ---------- */
+.chat-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.chat-actions .icon-tooltip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border: none;
+  border-radius: 9px;
+  background: transparent;
+  color: var(--text-dim);
+  transition: background 0.15s ease, color 0.15s ease;
+  cursor: pointer;
+}
+.chat-actions .icon-tooltip:hover {
+  background: var(--surface-2);
+  color: var(--text);
+}
+.chat-actions .icon-tooltip.danger:hover {
+  color: var(--danger);
+  background: var(--danger-soft);
+}
+
+/* ---------- 卡片/仪表盘 ---------- */
+.dash-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 26px;
+}
+.dash {
+  max-width: 960px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+.dash-hero {
+  position: relative;
+  padding: 34px 34px 30px;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border));
+  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
+  box-shadow: 0 22px 60px color-mix(in srgb, var(--glow) 22%, transparent);
+}
+.dash-hero::before {
+  content: '';
+  position: absolute;
+  inset: -40% -20%;
+  background: radial-gradient(ellipse at 50% -20%, color-mix(in srgb, var(--glow) 42%, transparent), transparent 65%);
+  pointer-events: none;
+}
+.dash-hero h1 {
+  position: relative;
+  margin: 0 0 8px;
+  font-family: var(--font-serif);
+  font-size: 32px;
+  font-weight: 700;
+  letter-spacing: 0.2px;
+}
+.dash-hero p {
+  position: relative;
+  margin: 0 0 20px;
+  color: var(--text-dim);
+  max-width: 720px;
+  white-space: pre-line;
+  line-height: 1.7;
+}
+/* 欢迎语中的强调句：衬线 + 琥珀渐变 + 微放大，克制而醒目 */
+.dash-hero-accent {
+  display: block;
+  margin-top: 6px;
+  font-family: var(--font-serif);
+  font-size: 1.22em;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  color: var(--primary);
+  background: linear-gradient(
+    100deg,
+    color-mix(in srgb, var(--primary) 88%, #fff) 0%,
+    var(--primary) 42%,
+    color-mix(in srgb, var(--primary) 70%, #ffd9a8) 100%
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: var(--primary);
+  filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--bg) 40%, transparent));
+}
+.dash-hero .actions {
+  position: relative;
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+/* ---------- 与角色继续对话（最近会话列表） ---------- */
+.recent-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.recent-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  text-align: left;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+  color: var(--text);
+  cursor: pointer;
+  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
+}
+.recent-item:hover {
+  border-color: color-mix(in srgb, var(--primary) 32%, transparent);
+  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
+  box-shadow: 0 10px 26px color-mix(in srgb, var(--glow) 18%, transparent);
+}
+.recent-item .svc {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  flex-shrink: 0;
+}
+.recent-item .svc.svc-single {
+  padding: 3px;
+}
+.recent-item .svc.svc-single .avatar {
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  box-shadow: none;
+}
+.recent-item .svc .gcollage {
+  padding: 2px;
+}
+.recent-meta {
+  flex: 1;
+  min-width: 0;
+}
+.recent-title {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.recent-title-text {
+  font-family: var(--font-serif);
+  font-weight: 700;
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.recent-time {
+  flex-shrink: 0;
+  font-size: 11px;
+  color: var(--text-faint);
+  white-space: nowrap;
+}
+.recent-preview {
+  font-size: 12px;
+  color: var(--text-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 2px;
+}
+.recent-go {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  color: var(--text-faint);
+  background: var(--surface-2);
+  flex-shrink: 0;
+  transition: color 0.18s ease, background 0.18s ease;
+}
+.recent-item:hover .recent-go {
+  color: var(--primary);
+  background: var(--primary-soft);
+}
+
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+  gap: 14px;
+}
+.stat-card {
+  padding: 16px 18px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--surface);
+}
+.stat-card .v {
+  font-family: var(--font-serif);
+  font-size: 27px;
+  font-weight: 700;
+  background: var(--grad-from);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  line-height: 1.2;
+}
+.stat-card .k {
+  font-size: 12px;
+  color: var(--text-faint);
+  font-weight: 600;
+  letter-spacing: 0.4px;
+}
+.section-title {
+  font-family: var(--font-serif);
+  font-size: 15.5px;
+  font-weight: 700;
+  color: var(--text);
+  letter-spacing: 0.4px;
+  margin: 6px 0 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.section-title::after {
+  content: '';
+  flex: 1;
+  max-width: 120px;
+  height: 1px;
+  background: linear-gradient(to right, var(--border), transparent);
+}
+
+/* ---------- 彩色首字母（低饱和度暖色调，与暖核桃木夜风格统一） ---------- */
+.avatar-hue-0 { background: #C27063; } /* 红葡萄酒 */
+.avatar-hue-1 { background: #D9A673; } /* 琥珀 */
+.avatar-hue-2 { background: #6FAE80; } /* 苔藓绿 */
+.avatar-hue-3 { background: #6F9FB8; } /* 烛光湖蓝 */
+.avatar-hue-4 { background: #A98DB5; } /* 暖紫藤 */
+.avatar-hue-5 { background: #7BA89F; } /* 雾青 */
+
+/* ---------- 空状态 ---------- */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 60px 20px;
+  color: var(--text-faint);
+  text-align: center;
+}
+.empty-state .big {
+  font-size: 44px;
+  filter: grayscale(0.15) brightness(1.05);
+  opacity: 0.9;
+}
+
+/* ---------- 成就解锁庆祝（奖杯 + 撒花） ---------- */
+.ach-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(8, 6, 16, 0.5);
+  backdrop-filter: blur(3px);
+  z-index: 1400;
+  animation: fadeIn 0.2s ease;
+}
+.ach-celebration {
+  position: fixed;
+  inset: 0;
+  z-index: 1401;
+  display: grid;
+  place-items: center;
+  pointer-events: none;
+  perspective: 800px;
+}
+.ach-celebration .ach-trophy,
+.ach-celebration .ach-caption {
+  pointer-events: auto;
+}
+.ach-rain {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+.ach-rain i {
+  position: absolute;
+  top: -24px;
+  border-radius: 2px;
+  opacity: 0;
+  animation: confettiFall linear infinite;
+}
+.ach-rain i.round {
+  border-radius: 50%;
+}
+@keyframes confettiFall {
+  0% {
+    transform: translate3d(0, -4vh, 0) rotate(0deg);
+    opacity: 1;
+  }
+  85% {
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(var(--drift, 0px), 108vh, 0) rotate(var(--rot, 520deg));
+    opacity: 0;
+  }
+}
+.ach-trophy {
+  position: relative;
+  width: 150px;
+  height: 150px;
+  display: grid;
+  place-items: center;
+  animation: trophyIn 0.9s cubic-bezier(0.18, 0.9, 0.28, 1.35) both;
+}
+.ach-trophy-badge {
+  position: relative;
+  z-index: 1;
+  width: 128px;
+  height: 128px;
+  display: grid;
+  place-items: center;
+  font-size: 64px;
+  border-radius: 50%;
+  background: linear-gradient(160deg, #ffe9a8, #f5c24d 55%, #d99a2b);
+  box-shadow:
+    0 0 0 6px rgba(255, 233, 168, 0.25),
+    0 0 0 12px rgba(255, 233, 168, 0.12),
+    0 18px 60px rgba(240, 180, 60, 0.55);
+}
+.ach-trophy-glow {
+  position: absolute;
+  inset: -34px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255, 210, 110, 0.55), transparent 62%);
+  animation: trophyGlow 2.2s ease-in-out infinite;
+}
+@keyframes trophyIn {
+  0% {
+    opacity: 0;
+    transform: translateY(46px) scale(0.3) rotate(-12deg);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1) rotate(0deg);
+  }
+}
+@keyframes trophyGlow {
+  0%,
+  100% {
+    opacity: 0.65;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.12);
+  }
+}
+.ach-caption {
+  position: absolute;
+  bottom: clamp(56px, 15vh, 140px);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+  animation: captionIn 0.7s 0.35s ease both;
+  width: min(420px, calc(100vw - 48px));
+}
+@keyframes captionIn {
+  from {
+    opacity: 0;
+    transform: translate(-50%, 22px);
+  }
+}
+.ach-caption-title {
+  font-size: 13px;
+  font-weight: 800;
+  letter-spacing: 3px;
+  color: #ffd166;
+  text-shadow: 0 0 18px rgba(255, 209, 102, 0.5);
+}
+.ach-caption-name {
+  font-size: 30px;
+  font-weight: 900;
+  color: var(--text);
+  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.35);
+}
+.ach-caption-desc {
+  font-size: 13px;
+  color: var(--text-dim);
+  line-height: 1.6;
+}
+.ach-caption-total {
+  font-size: 11.5px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+}
+.ach-celebration .ach-trophy.leave,
+.ach-celebration .ach-caption.leave {
+  transition: all 0.26s ease;
+  opacity: 0;
+  transform: translateY(26px) scale(0.94);
+}
+
+/* ---------- Toast ---------- */
+.toast-wrap {
+  position: fixed;
+  bottom: 26px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  pointer-events: none;
+}
+.toast {
+  padding: 10px 18px;
+  border-radius: 999px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-lg);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  animation: toastIn 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
+  max-width: 70vw;
+}
+.toast.err {
+  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
+  color: var(--danger);
+}
+@keyframes toastIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.96);
+  }
+}
+
+/* ---------- 动画 ---------- */
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 0.35;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.fade-up {
+  animation: fadeUp 0.25s ease both;
+}
+
+.spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--border);
+  border-top-color: var(--primary);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.table th,
+.table td {
+  padding: 7px 10px;
+  border-bottom: 1px solid var(--border-soft);
+  text-align: left;
+}
+.table th {
+  color: var(--text-faint);
+  font-weight: 700;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+
+hr.sep {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 14px 0;
+}