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;
  }
}

/* 移动端视口高度 - 解决浏览器地址栏遮挡问题 */
@supports (height: 100dvh) {
  .h-screen-mobile {
    height: 100dvh;
  }
}

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;
  /* 防止 iOS Safari 中 body 弹性滚动 */
  overscroll-behavior: none;
}

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

  /* 防止触摸时的高亮 */
  * {
    -webkit-tap-highlight-color: transparent;
  }
}

@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-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);
  }
}

/* 安全区域支持 */
.safe-area-inset-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

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

/* 固定底部输入框 - 解决浏览器地址栏遮挡 */
@media (max-width: 768px) {
  /* 触摸友好的按钮 */
  button, .btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* 输入框区域固定在视口底部 */
  .fixed-bottom-input {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: white;
    padding-bottom: max(env(safe-area-inset-bottom, 0), 8px);
  }

  .dark .fixed-bottom-input {
    background: #1f2937; /* gray-800 */
  }

  /* 为消息列表添加底部 padding，避免被输入框遮挡 */
  .messages-with-fixed-input {
    padding-bottom: 80px; /* 大约输入框高度 */
  }

  /* pb-safe 类：底部安全区域 + 额外间距 */
  .pb-safe {
    padding-bottom: max(env(safe-area-inset-bottom, 0), 12px);
  }
}

/* 桌面端保持原有样式 */
@media (min-width: 769px) {
  .fixed-bottom-input {
    position: relative;
  }

  .messages-with-fixed-input {
    padding-bottom: 1rem;
  }

  .pb-safe {
    padding-bottom: 1rem;
  }
}