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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  /* Line clamp utilities for text truncation */
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  
  .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* 客服按钮样式优化 - 适配网页风格 */
/* 使用更高优先级的选择器来覆盖第三方样式 */
body [id*="hecong"] iframe,
body [class*="hecong"] iframe,
body iframe[src*="ahc.ink"],
body div[style*="fixed"] iframe,
body div[style*="bottom"] iframe,
html [id*="hecong"] iframe,
html [class*="hecong"] iframe,
html iframe[src*="ahc.ink"] {
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(79, 156, 249, 0.15) !important;
  border: 1px solid rgba(79, 156, 249, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background-color: #4F9CF9 !important;
}

/* 悬停效果 - 增强选择器优先级 */
body [id*="hecong"] iframe:hover,
body [class*="hecong"] iframe:hover,
body iframe[src*="ahc.ink"]:hover,
body div[style*="fixed"] iframe:hover,
body div[style*="bottom"] iframe:hover,
html [id*="hecong"] iframe:hover,
html [class*="hecong"] iframe:hover,
html iframe[src*="ahc.ink"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 20px rgba(79, 156, 249, 0.3) !important;
  border-color: rgba(79, 156, 249, 0.5) !important;
  background-color: #60A5FA !important;
}

/* 确保客服组件在合适的层级 */
body [id*="hecong"],
body [class*="hecong"],
html [id*="hecong"],
html [class*="hecong"] {
  z-index: 1000 !important;
}

/* 客服聊天窗口样式优化 */
body [id*="hecong-chat"],
body [class*="hecong-chat"],
body [id*="chat-window"],
body [class*="chat-window"],
html [id*="hecong-chat"],
html [class*="hecong-chat"],
html [id*="chat-window"],
html [class*="chat-window"] {
  border-radius: 16px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(229, 231, 235, 0.8) !important;
}

/* 针对可能的其他客服按钮选择器 */
div[style*="position: fixed"][style*="bottom"][style*="right"] iframe,
div[style*="position:fixed"][style*="bottom"][style*="right"] iframe,
[style*="position: fixed"][style*="z-index"] iframe {
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(79, 156, 249, 0.15) !important;
  border: 1px solid rgba(79, 156, 249, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background-color: #4F9CF9 !important;
}