blank/frontend-v2/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 移动端优化 */
@media (max-width: 768px) {
  body {
    font-size: 16px;
    line-height: 1.5;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

/* 自定义样式 - 消息气泡 */
.message-bubble {
  @apply max-w-[85%] md:max-w-[75%] rounded-2xl px-4 py-3 shadow-sm;
}

@media (max-width: 768px) {
  .message-bubble {
    @apply max-w-[90%] rounded-2xl px-3 py-2 text-[15px];
  }
}

.user-message {
  @apply bg-gradient-to-br from-blue-500 to-blue-600 text-white ml-auto;
}

.user-message:hover {
  @apply from-blue-600 to-blue-700;
}

.assistant-message {
  @apply bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 border border-gray-200 dark:border-gray-700 shadow-sm;
}

/* 工具调用样式 */
.tool-call {
  @apply bg-purple-50 dark:bg-purple-950/30 border-l-4 border-purple-500 p-3 my-2 rounded-r-lg;
}

@media (max-width: 768px) {
  .tool-call {
    @apply p-2 my-1 text-sm;
  }
}

.tool-error {
  @apply bg-red-50 dark:bg-red-950/30 border-l-4 border-red-500 p-3 my-2 rounded-r-lg text-red-700 dark:text-red-400;
}

@media (max-width: 768px) {
  .tool-error {
    @apply p-2 my-1 text-sm;
  }
}

/* 移动端滚动条优化 */
@media (max-width: 768px) {
  * {
    -webkit-tap-highlight-color: transparent;
  }

  /* 自定义滚动条 */
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

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

  ::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.5);
    border-radius: 2px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.7);
  }
}

/* 触摸友好的按钮 */
@media (max-width: 768px) {
  button, .btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* 安全区域支持 - iPhone 刘海屏 */
  .safe-area-inset-bottom {
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 0.5rem);
  }

  .safe-area-inset-top {
    padding-top: calc(env(safe-area-inset-top, 0) + 0.5rem);
  }

  /* 固定底部输入框安全区域 */
  .pb-safe {
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 0.75rem);
  }
}