@zhin.js/client 1.0.4 → 1.0.5

package/app/src/style.css

@@ -1,1105 +0,0 @@
-@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); /* 移动端导航栏稍矮 */
-  }
-}