@zhin.js/client 1.0.0 → 1.0.2

package/app/src/style.css

@@ -0,0 +1,1105 @@
+@import "tailwindcss";
+@config "../tailwind.config.js";
+
+/* ============================================
+   Radix UI Themes - 主题定制
+   基于官方文档: https://www.radix-ui.com/themes/docs/overview/getting-started
+   ============================================ */
+
+/* ============================================
+   自定义 CSS Tokens (全局变量)
+   Radix UI Themes 使用 CSS 变量系统
+   ============================================ */
+
+:root,
+.light,
+.light-theme {
+  /* 动画和过渡 */
+  --transition-duration: 200ms;
+  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+  
+  /* 自定义阴影增强 */
+  --shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-2: 0 2px 4px -1px rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.04);
+  --shadow-3: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.06);
+  --shadow-4: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.05);
+  --shadow-5: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.04);
+  
+  /* Glassmorphism 效果 */
+  --glass-bg: rgba(255, 255, 255, 0.75);
+  --glass-border: rgba(255, 255, 255, 0.2);
+  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
+  
+  /* 自定义渐变 */
+  --gradient-primary: linear-gradient(135deg, var(--accent-9) 0%, var(--purple-9) 100%);
+  --gradient-success: linear-gradient(135deg, var(--green-9) 0%, var(--teal-9) 100%);
+  --gradient-warning: linear-gradient(135deg, var(--amber-9) 0%, var(--orange-9) 100%);
+  --gradient-danger: linear-gradient(135deg, var(--red-9) 0%, var(--crimson-9) 100%);
+  --gradient-info: linear-gradient(135deg, var(--blue-9) 0%, var(--cyan-9) 100%);
+}
+
+.dark,
+.dark-theme {
+  /* 暗色模式下的 Glassmorphism */
+  --glass-bg: rgba(0, 0, 0, 0.5);
+  --glass-border: rgba(255, 255, 255, 0.1);
+  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+  
+  /* 暗色模式阴影增强 */
+  --shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow-2: 0 2px 4px -1px rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.2);
+  --shadow-3: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+  --shadow-4: 0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.4);
+  --shadow-5: 0 20px 25px -5px rgb(0 0 0 / 0.7), 0 8px 10px -6px rgb(0 0 0 / 0.5);
+}
+
+/* ============================================
+   全局样式优化
+   ============================================ */
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+}
+
+/* ============================================
+   滚动条美化 (适配明暗主题)
+   ============================================ */
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--gray-3);
+  border-radius: var(--radius-2);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--gray-8);
+  border-radius: var(--radius-2);
+  border: 2px solid var(--gray-3);
+  transition: background var(--transition-duration) var(--transition-timing);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-10);
+}
+
+/* ============================================
+   Radix UI 组件微调
+   使用 data-* 选择器覆盖，保持 Radix 原生样式
+   ============================================ */
+
+/* Card - 卡片增强 */
+.rt-Card {
+  transition: all var(--transition-duration) var(--transition-timing);
+}
+
+.rt-Card[data-accent-color]:hover {
+  box-shadow: var(--shadow-3);
+  transform: translateY(-2px);
+}
+
+/* Button - 按钮微动效 */
+.rt-Button {
+  transition: all var(--transition-duration) var(--transition-timing);
+  font-weight: 500;
+}
+
+.rt-Button:not(:disabled):hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-2);
+}
+
+.rt-Button:not(:disabled):active {
+  transform: translateY(0);
+  box-shadow: var(--shadow-1);
+}
+
+.rt-Button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* TextField - 输入框聚焦增强 */
+.rt-TextFieldInput,
+.rt-TextAreaInput {
+  transition: all var(--transition-duration) var(--transition-timing);
+}
+
+.rt-TextFieldInput:focus-visible,
+.rt-TextAreaInput:focus-visible {
+  box-shadow: 0 0 0 3px var(--accent-a5);
+  outline: none;
+}
+
+/* Badge - 徽章微动效 */
+.rt-Badge {
+  font-weight: 600;
+  transition: transform var(--transition-duration) var(--transition-timing);
+}
+
+.rt-Badge:hover {
+  transform: scale(1.05);
+}
+
+/* Select - 选择器增强 */
+.rt-SelectTrigger {
+  transition: all var(--transition-duration) var(--transition-timing);
+}
+
+.rt-SelectTrigger:hover:not([data-disabled]) {
+  background-color: var(--gray-a3);
+}
+
+.rt-SelectContent {
+  box-shadow: var(--shadow-5);
+  animation: slideDownAndFade 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Checkbox - 复选框增强 */
+.rt-CheckboxButton {
+  transition: all var(--transition-duration) var(--transition-timing);
+}
+
+.rt-CheckboxButton:hover:not([data-disabled]) {
+  background-color: var(--accent-a3);
+}
+
+/* Switch - 开关增强 */
+.rt-SwitchButton {
+  transition: all var(--transition-duration) var(--transition-timing);
+}
+
+.rt-SwitchButton:hover:not([data-disabled]) {
+  box-shadow: var(--shadow-2);
+}
+
+/* Tabs - 标签页增强 */
+.rt-TabsList {
+  background-color: var(--gray-a2);
+  padding: 4px;
+  border-radius: calc(var(--radius-3) + 2px);
+}
+
+.rt-TabsTrigger {
+  transition: all var(--transition-duration) var(--transition-timing);
+  font-weight: 500;
+}
+
+.rt-TabsTrigger[data-state="active"] {
+  box-shadow: var(--shadow-1);
+}
+
+/* Dialog - 对话框动画 */
+.rt-DialogContent {
+  animation: contentShow 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* DropdownMenu - 下拉菜单动画 */
+.rt-DropdownMenuContent {
+  animation: slideDownAndFade 200ms cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: var(--shadow-5);
+}
+
+/* Popover - 弹出框动画 */
+.rt-PopoverContent {
+  animation: slideDownAndFade 200ms cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: var(--shadow-4);
+}
+
+/* Tooltip - 工具提示 */
+.rt-TooltipContent {
+  animation: slideDownAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: var(--shadow-3);
+}
+
+/* Separator - 分隔线增强 */
+.rt-Separator[data-orientation="horizontal"] {
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--gray-a6) 20%,
+    var(--gray-a6) 80%,
+    transparent
+  );
+}
+
+.rt-Separator[data-orientation="vertical"] {
+  background: linear-gradient(
+    180deg,
+    transparent,
+    var(--gray-a6) 20%,
+    var(--gray-a6) 80%,
+    transparent
+  );
+}
+
+/* ============================================
+   自定义动画关键帧
+   ============================================ */
+
+@keyframes slideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUpAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* ============================================
+   工具类 (与 Tailwind 配合使用)
+   ============================================ */
+
+/* Glassmorphism 效果 */
+.glass {
+  background: var(--glass-bg) !important;
+  backdrop-filter: blur(12px) saturate(180%);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
+}
+
+/* 渐变背景 */
+.gradient-primary {
+  background: var(--gradient-primary);
+  color: white;
+}
+
+.gradient-success {
+  background: var(--gradient-success);
+  color: white;
+}
+
+.gradient-warning {
+  background: var(--gradient-warning);
+  color: white;
+}
+
+.gradient-danger {
+  background: var(--gradient-danger);
+  color: white;
+}
+
+.gradient-info {
+  background: var(--gradient-info);
+  color: white;
+}
+
+/* 文本渐变 */
+.text-gradient {
+  background: var(--gradient-primary);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* 悬停提升效果 */
+.hover-lift {
+  transition: transform var(--transition-duration) var(--transition-timing),
+              box-shadow var(--transition-duration) var(--transition-timing);
+}
+
+.hover-lift:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-4);
+}
+
+/* 悬停发光效果 */
+.hover-glow:hover {
+  box-shadow: 0 0 20px var(--accent-a5);
+}
+
+/* 平滑过渡 */
+.transition-smooth {
+  transition: all var(--transition-duration) var(--transition-timing);
+}
+
+/* ============================================
+   响应式优化
+   ============================================ */
+
+@media (max-width: 768px) {
+  /* 移动端禁用悬停效果 */
+  .rt-Card[data-accent-color]:hover,
+  .rt-Button:not(:disabled):hover,
+  .hover-lift:hover {
+    transform: none;
+  }
+  
+  /* 减小阴影 */
+  .rt-Card[data-accent-color]:hover {
+    box-shadow: var(--shadow-2);
+  }
+}
+
+/* ============================================
+   无障碍优化
+   ============================================ */
+
+/* 聚焦可见性增强 */
+*:focus-visible {
+  outline: 2px solid var(--accent-9);
+  outline-offset: 2px;
+  border-radius: var(--radius-2);
+}
+
+/* 减少动画运动（用户偏好） */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* 高对比度模式 */
+@media (prefers-contrast: high) {
+  .rt-Card,
+  .rt-Button,
+  .rt-Badge {
+    border-width: 2px;
+  }
+}
+
+/* ============================================
+   打印样式
+   ============================================ */
+
+@media print {
+  * {
+    animation: none !important;
+    transition: none !important;
+    box-shadow: none !important;
+  }
+  
+  .rt-Card {
+    border: 1px solid var(--gray-6);
+  }
+  
+  /* 隐藏不必要的元素 */
+  .rt-Button,
+  .no-print {
+    display: none;
+  }
+}
+
+/* ============================================
+   深色模式特定优化
+   ============================================ */
+
+.dark .rt-Card {
+  /* 暗色模式下卡片背景稍微提亮 */
+  background-color: var(--gray-2);
+}
+
+.dark .rt-Button[data-variant="solid"] {
+  /* 暗色模式下实心按钮对比度增强 */
+  box-shadow: var(--shadow-2);
+}
+
+/* ============================================
+   性能优化
+   ============================================ */
+
+/* GPU 加速 */
+.rt-Card[data-accent-color],
+.rt-Button,
+.hover-lift {
+  will-change: transform;
+}
+
+/* 防止布局抖动 */
+.rt-Button {
+  contain: layout style paint;
+}
+
+/* ============================================
+   Dashboard 统一风格样式
+   ============================================ */
+
+/* 菜单项 / 频道项通用样式 */
+.menu-item,
+.channel-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border-radius: calc(var(--radius-3) + 4px);
+  transition: all var(--transition-duration) var(--transition-timing);
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  text-decoration: none;
+}
+
+/* 默认状态 */
+.menu-item:not(.active),
+.channel-item:not(.active) {
+  color: var(--gray-11);
+}
+
+.dark .menu-item:not(.active),
+.dark .channel-item:not(.active) {
+  color: var(--gray-11);
+}
+
+/* 悬停状态 */
+.menu-item:not(.active):hover,
+.channel-item:not(.active):hover {
+  background-color: var(--gray-a3);
+}
+
+.dark .menu-item:not(.active):hover,
+.dark .channel-item:not(.active):hover {
+  background-color: var(--gray-a4);
+}
+
+/* 激活状态 - 渐变背景 */
+.menu-item.active,
+.channel-item.active {
+  background: linear-gradient(135deg, var(--blue-9) 0%, var(--purple-9) 100%);
+  color: white;
+  box-shadow: var(--shadow-3);
+}
+
+/* 图标容器 */
+.menu-item .icon,
+.channel-item .icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  transition: transform var(--transition-duration) var(--transition-timing);
+}
+
+/* 图标悬停缩放 */
+.menu-item:not(.active):hover .icon,
+.channel-item:not(.active):hover .icon {
+  transform: scale(1.1);
+}
+
+/* 文本容器 */
+.menu-item .text,
+.channel-item .text {
+  flex: 1;
+  min-width: 0;
+}
+
+.menu-item .text .title,
+.channel-item .text .title {
+  font-size: var(--font-size-2);
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.menu-item .text .subtitle,
+.channel-item .text .subtitle {
+  font-size: var(--font-size-1);
+  color: var(--gray-a11);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.menu-item.active .text .subtitle,
+.channel-item.active .text .subtitle {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* 激活指示点 */
+.menu-item.active .indicator,
+.channel-item.active .indicator {
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.menu-item.active .indicator::after,
+.channel-item.active .indicator::after {
+  content: '';
+  display: block;
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 50%;
+  background-color: white;
+}
+
+/* 徽章位置 */
+.menu-item .badge,
+.channel-item .badge {
+  flex-shrink: 0;
+}
+
+/* 卡片统一风格 */
+.dashboard-card {
+  background-color: white;
+  border: 1px solid var(--gray-a4);
+  border-radius: var(--radius-4);
+  box-shadow: var(--shadow-2);
+  transition: all var(--transition-duration) var(--transition-timing);
+}
+
+.dark .dashboard-card {
+  background-color: var(--gray-2);
+  border-color: var(--gray-a6);
+}
+
+.dashboard-card:hover {
+  box-shadow: var(--shadow-3);
+  transform: translateY(-2px);
+}
+
+/* 图标容器 - 圆形背景 */
+.icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: var(--radius-3);
+  transition: all var(--transition-duration) var(--transition-timing);
+}
+
+.icon-container.sm {
+  width: 2rem;
+  height: 2rem;
+  padding: 0.375rem;
+}
+
+.icon-container.md {
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.5rem;
+}
+
+.icon-container.lg {
+  width: 3rem;
+  height: 3rem;
+  padding: 0.625rem;
+}
+
+/* 彩色图标背景 */
+.icon-container.blue {
+  background-color: var(--blue-a3);
+  color: var(--blue-9);
+}
+
+.icon-container.green {
+  background-color: var(--green-a3);
+  color: var(--green-9);
+}
+
+.icon-container.purple {
+  background-color: var(--purple-a3);
+  color: var(--purple-9);
+}
+
+.icon-container.orange {
+  background-color: var(--orange-a3);
+  color: var(--orange-9);
+}
+
+.icon-container.red {
+  background-color: var(--red-a3);
+  color: var(--red-9);
+}
+
+/* 暗色模式下图标容器 */
+.dark .icon-container.blue {
+  background-color: var(--blue-a4);
+  color: var(--blue-10);
+}
+
+.dark .icon-container.green {
+  background-color: var(--green-a4);
+  color: var(--green-10);
+}
+
+.dark .icon-container.purple {
+  background-color: var(--purple-a4);
+  color: var(--purple-10);
+}
+
+.dark .icon-container.orange {
+  background-color: var(--orange-a4);
+  color: var(--orange-10);
+}
+
+.dark .icon-container.red {
+  background-color: var(--red-a4);
+  color: var(--red-10);
+}
+
+/* 统计卡片 */
+.stat-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1rem;
+  border-radius: var(--radius-3);
+  transition: all var(--transition-duration) var(--transition-timing);
+}
+
+.stat-card:hover {
+  transform: scale(1.02);
+}
+
+/* 页面标题区域 */
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.page-title {
+  font-size: var(--font-size-6);
+  font-weight: 600;
+  color: var(--gray-12);
+  margin: 0;
+}
+
+.dark .page-title {
+  color: var(--gray-12);
+}
+
+/* 空状态 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 3rem 1.5rem;
+  text-align: center;
+  color: var(--gray-a11);
+}
+
+.empty-state .icon {
+  width: 4rem;
+  height: 4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: var(--gray-a3);
+  color: var(--gray-a10);
+}
+
+.empty-state .title {
+  font-size: var(--font-size-4);
+  font-weight: 600;
+  color: var(--gray-12);
+  margin: 0;
+}
+
+.empty-state .description {
+  font-size: var(--font-size-2);
+  color: var(--gray-a11);
+  margin: 0;
+}
+
+/* ============================================
+   ProcessSandbox 响应式布局
+   ============================================ */
+
+/* 容器 */
+.sandbox-container {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+  height: 100vh;
+  width: 100%;
+  max-width: 100vw;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 频道侧边栏 */
+.channel-sidebar {
+  width: 256px;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  transition: transform var(--transition-duration) var(--transition-timing);
+}
+
+/* 聊天区域 */
+.chat-area {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* 聊天区域内的卡片 */
+.chat-area > .rt-Card:nth-child(1) {
+  /* 顶部信息栏 - 固定高度 */
+  flex-shrink: 0;
+}
+
+.chat-area > .rt-Card:nth-child(2) {
+  /* 消息列表 - 自动填充剩余空间 */
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.chat-area > .rt-Card:nth-child(3) {
+  /* 输入框区域 - 固定高度 */
+  flex-shrink: 0;
+}
+
+/* 富文本编辑器样式 */
+.rich-text-editor {
+  font-family: inherit;
+  transition: border-color var(--transition-duration) var(--transition-timing);
+}
+
+.rich-text-editor:focus {
+  border-color: var(--blue-8) !important;
+  box-shadow: 0 0 0 1px var(--blue-8);
+}
+
+/* 空编辑器占位符 */
+.rich-text-editor:empty::before {
+  content: attr(data-placeholder);
+  color: var(--gray-a9);
+  pointer-events: none;
+}
+
+/* 编辑器内的元素样式 */
+.rich-text-editor .editor-face {
+  width: 24px;
+  height: 24px;
+  vertical-align: middle;
+  margin: 0 2px;
+  display: inline-block;
+}
+
+.rich-text-editor .editor-image {
+  max-width: 200px;
+  border-radius: 8px;
+  margin: 4px 0;
+  display: block;
+}
+
+.rich-text-editor .editor-at {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 6px;
+  background-color: var(--blue-a3);
+  color: var(--blue-11);
+  border-radius: 4px;
+  font-size: 0.9em;
+  margin: 0 2px;
+  user-select: none;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.rich-text-editor .editor-at:hover {
+  background-color: var(--blue-a4);
+}
+
+.rich-text-editor .editor-at-symbol {
+  font-weight: 600;
+  margin-right: 2px;
+  color: var(--blue-10);
+}
+
+.rich-text-editor .editor-at-name {
+  font-weight: 500;
+}
+
+/* 暗色模式 */
+.dark .rich-text-editor {
+  background-color: var(--gray-2);
+  border-color: var(--gray-7);
+  color: var(--gray-12);
+}
+
+.dark .rich-text-editor:focus {
+  border-color: var(--blue-9) !important;
+  box-shadow: 0 0 0 1px var(--blue-9);
+}
+
+.dark .rich-text-editor:empty::before {
+  color: var(--gray-a8);
+}
+
+.dark .rich-text-editor .editor-at {
+  background-color: var(--blue-a4);
+  color: var(--blue-11);
+}
+
+.dark .rich-text-editor .editor-at:hover {
+  background-color: var(--blue-a5);
+}
+
+.dark .rich-text-editor .editor-at-symbol {
+  color: var(--blue-11);
+}
+
+/* 滚动条样式 */
+.rich-text-editor::-webkit-scrollbar {
+  width: 6px;
+}
+
+.rich-text-editor::-webkit-scrollbar-thumb {
+  background: var(--gray-a6);
+  border-radius: var(--radius-2);
+}
+
+.rich-text-editor::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-a8);
+}
+
+/* 移动端频道列表切换按钮 - 默认隐藏 */
+.mobile-channel-toggle {
+  display: none;
+}
+
+/* 频道列表遮罩层 - 默认隐藏 */
+.channel-overlay {
+  display: none;
+}
+
+/* ============================================
+   移动端响应式 (< 768px)
+   ============================================ */
+
+@media (max-width: 768px) {
+  /* 容器调整 */
+  .sandbox-container {
+    padding: 0;
+    gap: 0;
+    flex-direction: column;
+    height: 100vh;
+  }
+
+  /* 移动端频道列表切换按钮 */
+  .mobile-channel-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    margin: 0.5rem;
+    margin-bottom: 0.5rem;
+    background: var(--blue-9);
+    color: white;
+    border: none;
+    border-radius: var(--radius-3);
+    font-weight: 500;
+    font-size: var(--font-size-2);
+    cursor: pointer;
+    transition: all var(--transition-duration) var(--transition-timing);
+    box-shadow: var(--shadow-2);
+  }
+
+  .mobile-channel-toggle:active {
+    transform: scale(0.98);
+    box-shadow: var(--shadow-1);
+  }
+
+  /* 频道侧边栏 - 移动端默认隐藏，显示时从左侧滑入 */
+  .channel-sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 280px;
+    max-width: 80vw;
+    transform: translateX(-100%);
+    z-index: 1000;
+    box-shadow: var(--shadow-5);
+  }
+
+  .channel-sidebar.show {
+    transform: translateX(0);
+  }
+
+  /* 遮罩层 */
+  .channel-overlay {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+    animation: fadeIn 200ms ease-out;
+  }
+
+  /* 聊天区域调整 */
+  .chat-area {
+    flex: 1;
+    gap: 0.5rem;
+    padding: 0 0.5rem 0.5rem;
+    height: auto;
+  }
+
+  .chat-area > .rt-Card {
+    margin: 0;
+  }
+
+  /* 顶部信息栏 - 移动端简化 */
+  .chat-area .rt-Card:first-child .rt-Flex {
+    flex-direction: column;
+    align-items: flex-start !important;
+    gap: 0.75rem !important;
+  }
+
+  /* 输入框区域 - 移动端调整 */
+  .chat-area .rt-Card:last-child {
+    margin-bottom: env(safe-area-inset-bottom, 0);
+  }
+
+  /* 消息列表 - 减小间距 */
+  .chat-area .rt-Card:nth-child(2) {
+    flex: 1;
+    min-height: 0;
+  }
+
+  /* 工具栏按钮 - 移动端缩小 */
+  .chat-area .rt-IconButton {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  /* 表情选择器 - 移动端全屏 */
+  .chat-area .emoji-picker {
+    position: fixed;
+    inset: 0;
+    max-height: none;
+    border-radius: 0;
+  }
+
+  /* 图片上传 - 移动端全屏 */
+  .chat-area .image-upload {
+    position: fixed;
+    inset: 0;
+    max-height: none;
+    border-radius: 0;
+  }
+}
+
+/* ============================================
+   平板响应式 (768px - 1024px)
+   ============================================ */
+
+@media (min-width: 768px) and (max-width: 1024px) {
+  .sandbox-container {
+    padding: 0.75rem;
+    gap: 0.75rem;
+  }
+
+  .channel-sidebar {
+    width: 200px;
+  }
+
+  .chat-area {
+    gap: 0.5rem;
+  }
+}
+
+/* ============================================
+   大屏优化 (> 1400px)
+   ============================================ */
+
+@media (min-width: 1400px) {
+  .sandbox-container {
+    padding: 1.5rem;
+    gap: 1.5rem;
+  }
+
+  .channel-sidebar {
+    width: 280px;
+  }
+}
+
+/* ============================================
+   Dashboard Container 内嵌适配
+   确保在 dashboard 的 Container 内正确显示
+   ============================================ */
+
+/* Dashboard 的 Container 组件会添加 padding，需要抵消 */
+.rt-Container .sandbox-container {
+  margin: calc(-1 * var(--container-padding, 1.5rem));
+  width: calc(100% + 2 * var(--container-padding, 1.5rem));
+  max-width: none;
+  height: calc(100vh - 4rem); /* 减去顶部导航栏高度 */
+}
+
+@media (max-width: 768px) {
+  .rt-Container .sandbox-container {
+    margin: calc(-1 * var(--container-padding, 1rem));
+    width: calc(100% + 2 * var(--container-padding, 1rem));
+    height: calc(100vh - 3.5rem); /* 移动端导航栏稍矮 */
+  }
+}