j-cli 12.8.47

@import "tailwindcss";

/* 深色主题（默认） */
@theme {
  --color-bg:           #16161e;
  --color-bg2:          #1c1c28;
  --color-bg3:          #1a1a26;
  --color-fg:           #dcdce6;
  --color-fg2:          #8c8caa;
  --color-fg3:          #505064;
  --color-accent:       #64b4ff;
  --color-accent-dim:   #5064c8;
  --color-ok:           #78dca0;
  --color-err:          #c84646;
  --color-warn:         #ffc850;
  --color-border:       #32374a;
  --color-border-light: #506480;
  --color-bubble-user:  #284678;
  --color-bubble-ai:    #1c1c26;
  --color-label-ai:     #78dca0;
  --color-label-user:   #64a0ff;
  --color-tool-confirm: #ffc850;
  --color-code-bg:      rgba(45,45,60,0.8);
  --color-link:         #569cd6;

  /* 动画定义 */
  --animate-blink: blink 1s infinite;
  --animate-pulse-dot: pulse 1.2s ease-in-out infinite;
  --animate-fade-in: fadeIn 0.2s ease-out;
  --animate-slide-up: slideUp 0.3s ease-out;

  @keyframes blink {
    50% { opacity: 0; }
  }

  @keyframes pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideInLeft {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0);
    }
  }
}

/* 浅色主题 */
[data-theme="light"] {
  --color-bg:           #f5f5f7;
  --color-bg2:          #ffffff;
  --color-bg3:          #e8e8ed;
  --color-fg:           #1d1d1f;
  --color-fg2:          #515154;
  --color-fg3:          #86868b;
  --color-accent:       #007aff;
  --color-accent-dim:   #5e5ce6;
  --color-ok:           #34c759;
  --color-err:          #ff3b30;
  --color-warn:         #ff9500;
  --color-border:       #d2d2d7;
  --color-border-light: #a1a1a6;
  --color-bubble-user:  #007aff;
  --color-bubble-ai:    #ffffff;
  --color-label-ai:     #34c759;
  --color-label-user:   #007aff;
  --color-tool-confirm: #ff9500;
  --color-code-bg:      rgba(0,0,0,0.06);
  --color-link:         #0066cc;
}

/* 基础层：全局重置和默认样式 */
@layer base {
  * {
    @apply m-0 p-0 box-border;
  }

  html, body {
    @apply h-full bg-bg text-fg overflow-hidden fixed w-full inset-0;
    font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
  }

  #root {
    @apply h-full w-full;
  }
}

/* 组件层：Markdown 消息样式 */
@layer components {
  .md-msg {
    @apply text-sm leading-relaxed;
  }

  .md-msg p {
    @apply mb-2 last:mb-0;
  }

  .md-msg ul, .md-msg ol {
    @apply my-1 mb-2 ml-[18px];
  }

  .md-msg li {
    @apply my-0.5;
  }

  .md-msg h1, .md-msg h2, .md-msg h3 {
    @apply my-3 mb-1.5 font-bold text-[15px];
  }

  .md-msg h1 {
    @apply text-[17px];
  }

  .md-msg h2 {
    @apply text-[16px];
  }

  .md-msg blockquote {
    @apply border-l-[3px] border-border-light pl-3 text-fg2 my-1.5;
  }

  .md-msg .table-wrap {
    @apply overflow-x-auto my-1.5 -mx-1;
  }

  .md-msg table {
    @apply border-collapse text-[13px] w-full;
  }

  .md-msg th, .md-msg td {
    @apply border border-border px-2 py-1 text-left;
  }

  .md-msg th {
    @apply bg-bg2 font-semibold;
  }

  .md-msg code {
    @apply bg-[var(--color-code-bg)] px-1.5 py-0.5 rounded-[5px] text-[13px];
    font-family: 'SF Mono', 'Menlo', monospace;
  }

  .md-msg pre {
    @apply my-2 rounded-md overflow-x-auto;
  }

  .md-msg pre code {
    @apply bg-none p-0 rounded-none;
  }

  .md-msg a {
    @apply text-[var(--color-link)] no-underline hover:underline;
  }

  .md-msg hr {
    @apply border-0 border-t border-border my-2.5;
  }

  /* Streaming 状态 */
  .streaming .msg-content::after {
    content: '▋';
    @apply animate-blink text-accent;
  }

  /* 消息卡片增强 */
  .message-card {
    @apply relative;
    animation: slideUp 0.25s ease-out;
  }

  .message-card:hover {
    @apply shadow-lg;
  }

  /* 工具卡片动画 */
  .tool-card {
    @apply relative;
    animation: fadeIn 0.2s ease-out;
  }

  .tool-card::before {
    content: '';
    @apply absolute left-0 top-0 bottom-0 w-[3px] rounded-l-xl;
  }

  .tool-card.running::before {
    @apply bg-warn animate-pulse;
  }

  .tool-card.completed::before {
    @apply bg-ok;
  }

  .tool-card.error::before {
    @apply bg-err;
  }

  /* 按钮效果增强 */
  .btn-primary {
    @apply relative overflow-hidden;
  }

  .btn-primary::after {
    content: '';
    @apply absolute inset-0 bg-white/10 opacity-0 transition-opacity duration-150;
  }

  .btn-primary:active::after {
    @apply opacity-100;
  }

  /* 滚动条美化 */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-border-light rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-fg3;
  }

  /* 输入框焦点效果 */
  .input-glow:focus {
    box-shadow: 0 0 0 2px rgba(100, 180, 255, 0.2);
  }

  /* 模态框动画 */
  .modal-overlay {
    animation: fadeIn 0.15s ease-out;
  }

  .modal-content {
    animation: slideUp 0.2s ease-out;
  }

  /* 会话侧边栏 */
  .sidebar-overlay {
    @apply fixed inset-0 z-50 bg-black/40;
    animation: fadeIn 0.15s ease-out;
  }

  .sidebar-panel {
    @apply absolute left-0 top-0 bottom-0 w-[280px] max-w-[80vw] bg-bg2 flex flex-col border-r border-border;
    animation: slideInLeft 0.2s ease-out;
  }

  .session-item:active {
    @apply bg-bg3;
  }

  /* 状态指示器 */
  .status-dot {
    @apply w-2 h-2 rounded-full;
  }

  .status-dot.connected {
    @apply bg-ok;
    box-shadow: 0 0 8px rgba(120, 220, 160, 0.5);
  }

  .status-dot.disconnected {
    @apply bg-err;
    box-shadow: 0 0 8px rgba(200, 70, 70, 0.5);
  }

  .status-dot.loading {
    @apply bg-warn;
    animation: pulse 1s ease-in-out infinite;
  }
}