/**
 * Shared UI Styles
 *
 * 共享样式，供 web 和 desktop 包使用
 * 注意：使用此文件时，宿主项目需要配置 Tailwind CSS
 */

/* ============ 主题 CSS 变量 ============ */

:root {
  /* 浅色主题 (默认) */
  --color-bg-base: 255 255 255;       /* #ffffff */
  --color-bg-subtle: 246 248 250;     /* #f6f8fa */
  --color-bg-muted: 240 242 245;      /* #f0f2f5 */
  --color-bg-emphasis: 229 231 235;   /* #e5e7eb */

  --color-text-primary: 31 41 55;     /* #1f2937 */
  --color-text-secondary: 75 85 99;   /* #4b5563 */
  --color-text-muted: 107 114 128;    /* #6b7280 */
  --color-text-subtle: 156 163 175;   /* #9ca3af */

  --color-border-default: 229 231 235; /* #e5e7eb */
  --color-border-muted: 209 213 219;   /* #d1d5db */

  --color-code-bg: 246 248 250;        /* #f6f8fa */

  /* 滚动条颜色 */
  --scrollbar-thumb: #9ca3af;
  --scrollbar-thumb-hover: #6b7280;
}

.dark {
  /* 深色主题 */
  --color-bg-base: 17 24 39;          /* #111827 */
  --color-bg-subtle: 31 41 55;        /* #1f2937 */
  --color-bg-muted: 55 65 81;         /* #374151 */
  --color-bg-emphasis: 75 85 99;      /* #4b5563 */

  --color-text-primary: 243 244 246;  /* #f3f4f6 */
  --color-text-secondary: 229 231 235; /* #e5e7eb */
  --color-text-muted: 156 163 175;    /* #9ca3af */
  --color-text-subtle: 107 114 128;   /* #6b7280 */

  --color-border-default: 55 65 81;   /* #374151 */
  --color-border-muted: 75 85 99;     /* #4b5563 */

  --color-code-bg: 13 17 23;          /* #0d1117 */

  /* 滚动条颜色 */
  --scrollbar-thumb: #4b5563;
  --scrollbar-thumb-hover: #6b7280;
}

/* ============ iOS Safe Area Support ============ */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .safe-area-pb {
    padding-bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
  }
}

/* Prevent pull-to-refresh on mobile */
html {
  overscroll-behavior: none;
}

/* Touch action optimization */
.touch-pan-x {
  touch-action: pan-x;
}

.touch-pan-y {
  touch-action: pan-y;
}

/* ============ Custom scrollbar ============ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* ============ Message content ============ */

.message-content {
  max-width: none;
  color: rgb(var(--color-text-primary));
}

.message-content pre {
  background: rgb(var(--color-code-bg));
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
}

.message-content code {
  background: rgb(var(--color-code-bg));
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
}

.message-content pre code {
  background: transparent;
  padding: 0;
}

/* ============ Typing indicator ============ */

.typing-indicator {
  display: flex;
  gap: 4px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: rgb(var(--color-text-muted));
  border-radius: 50%;
  animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) {
  animation-delay: 0s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%,
  80%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
  40% {
    transform: scale(1.2);
    opacity: 1;
  }
}

