Tolan/frontend/src/index.css

/* Tailwind CSS 基础导入 */
@import "tailwindcss";

/* 小尺寸屏幕修复样式 */
@import "./styles/mobile-fix.css";

/* ========================================
   全局重置样式（防御式设计）
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* 禁止所有滚动 - 移动端修复 */
  overflow: hidden;
  /* 固定高度 - iOS Safari 修复 */
  height: 100%;
  /* 使用 postcss-px-to-viewport 自动转换 px 为 vw */
  /* 防止 iOS Safari 字体放大 */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 极小屏幕降级：启用滚动条 */
html[data-too-small="true"] {
  overflow-y: auto;
  overflow-x: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 禁止所有滚动 - 移动端修复 */
  overflow: hidden;
  /* 固定高度 - iOS Safari 修复 */
  height: 100%;
  /* 使用 vw 单位（postcss-px-to-viewport 自动转换） */
  font-size: 14px; /* PostCSS 会自动转换为 vw */
  /* 防止横向滚动 */
  width: 100%;
  /* 防止边距导致的滚动 */
  margin: 0;
  padding: 0;
  /* 全局背景：在宽度超过 600px 时，左右区域仍然使用应用背景而不是纯白色 */
  background-color: #E8E8E8;
  background-image: url("https://lyrria-pro.oss-cn-beijing.aliyuncs.com/chatbot-bg.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 固定定位 - 防止地址栏导致的滚动 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* 极小屏幕降级：启用滚动条 */
body[data-too-small="true"] {
  position: static;
  overflow-y: auto;
  overflow-x: hidden;
  height: auto;
  min-height: 100vh;
}

#root {
  width: min(100%, 600PX);
  max-width: 600PX;
  height: 100%;
  /* 禁止所有滚动 */
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

/* 极小屏幕降级：允许滚动 */
#root[data-too-small="true"] {
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: auto;
  min-height: 100vh;
}

/* ========================================
   响应式容器（三层防护）
   ======================================== */

/* 全局容器 - 适配所有设备 */
.mobile-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* 内容卡片 - 基础样式（移动端） */
.content-card {
  width: min(100%, 600PX);
  max-width: 600PX;
  height: 100%;
  margin: 0 16PX;
  /* background: #F5F3F0; */
  position: relative;
  overflow: hidden;
}

/* 移动端 Chrome 高度修复：使用 100dvh 或 -webkit-fill-available */
@supports (height: 100dvh) {
  .content-card.min-h-screen {
    min-height: 100dvh;
  }
}

@supports not (height: 100dvh) {
  .content-card.min-h-screen {
    min-height: -webkit-fill-available;
  }
}

/* 极小屏幕降级：固定最小高度，允许滚动 */
.content-card[data-too-small="true"] {
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 600px; /* 确保内容可见 */
  overflow-y: auto;
  overflow-x: hidden;
}

/* 自定义工具类 */
.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

.no-select {
  -webkit-user-select: none;
  user-select: none;
}

.scroll-smooth {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* 触摸优化 */
.touch-manipulation {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 响应式图片 */
img {
  max-width: 100%;
  height: auto;
}

/* 全局 Tooltip 样式：统一 tip 视觉 */
.ant-tooltip .ant-tooltip-inner {
  background: #34313d;
  color: #ffffff;
  font-size: 12px;
}

.ant-tooltip .ant-tooltip-arrow::before {
  background: #34313d;
}

/* 全局消息提示（AntD Message）统一视觉 */
.ant-message .ant-message-notice-content,
.ant-message .ant-message-notice .ant-message-notice-content {
  background: #34313d !important;
  color: #ffffff !important;
  font-size: 12px;
  border: none;
  box-shadow: none;
}

.ant-message-notice-content {
  background: #34313d !important;
  color: #ffffff !important;
  font-size: 12px;
  border: none;
  box-shadow: none;
}

.ant-message .ant-message-custom-content {
  color: #ffffff !important;
}

.ant-message .ant-message-custom-content .anticon {
  color: #ffffff !important;
}

.ant-message-notice .ant-message-notice-content .anticon {
  color: #ffffff !important;
}

/* 浏览器兼容性：backdrop-filter */
@supports not (backdrop-filter: blur(15px)) {
  .backdrop-blur {
    background: rgba(255, 255, 255, 0.15);
  }
}

/* 响应式工具类 */
.responsive-container {
  width: 100%;
  max-width: min(100%, 600PX);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}

/* 响应式图片容器 */
.responsive-image {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* 响应式按钮尺寸 */
.btn-responsive {
  width: clamp(44px, 12vw, 96px);
  height: clamp(44px, 12vw, 96px);
  min-width: 44px;
  min-height: 44px;
}

/* 响应式文本（使用 min(vw, vh) 确保字体不会因为单一维度变大而过大） */
.text-responsive-sm {
  font-size: clamp(9.6px, min(3.2vw, 1.48vh), 14.4px);
}

.text-responsive-base {
  font-size: clamp(11.2px, min(3.73vw, 1.72vh), 16.8px);
}

.text-responsive-lg {
  font-size: clamp(14.4px, min(4.8vw, 2.22vh), 21.6px);
}

.text-responsive-xl {
  font-size: clamp(16px, min(5.33vw, 2.46vh), 24px);
}

.text-responsive-2xl {
  font-size: clamp(19.2px, min(6.4vw, 2.96vh), 28.8px);
}

.text-responsive-3xl {
  font-size: clamp(22.4px, min(7.47vw, 3.45vh), 33.6px);
}

/* 响应式间距 */
.spacing-responsive-sm {
  padding: clamp(8px, 2vw, 16px);
}

.spacing-responsive-md {
  padding: clamp(16px, 4vw, 32px);
}

.spacing-responsive-lg {
  padding: clamp(24px, 6vw, 48px);
}

/* ========================================
   iOS 安全区适配（iPhone X+ 刘海屏）
   ======================================== */
@supports (padding: env(safe-area-inset-top)) {
  .safe-area-inset {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  
  /* 针对全屏容器的安全区 */
  .safe-area-fullscreen {
    padding-top: max(env(safe-area-inset-top), 20px);
    padding-bottom: max(env(safe-area-inset-bottom), 20px);
  }
}

/* ========================================
   防止文本溢出和重叠
   ======================================== */
* {
  /* 防止长文本溢出 */
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* 防止 flex 子元素收缩导致内容重叠 */
.flex > * {
  flex-shrink: 0;
}

/* 确保图片不溢出 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ========================================
   浏览器兼容性修复
   ======================================== */

/* Safari/iOS 修复：防止 input 缩放页面 */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
textarea {
  font-size: max(16px, 1em); /* iOS Safari 16px 以下会缩放 */
}

/* Android Chrome 修复：防止地址栏导致高度跳动 */
@supports (-webkit-touch-callout: none) {
  #root {
    min-height: -webkit-fill-available;
  }
}