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

/* AI Chatbot Design System - Professional blue-themed interface */

@layer base {
  :root {
    /* Core Background Colors - Layered White Theme
       Layer 0 (app shell): --background  — coolest, slightly tinted gray
       Layer 1 (panels):    --surface     — white panels sit on top
       Layer 2 (cards):     --card        — pure white, with shadow */
    --background: 220 20% 97%;
    --foreground: 222 47% 11%;
    --surface: 0 0% 100%;
    --surface-hover: 220 20% 98%;
    --surface-muted: 220 20% 95%;

    /* Card System - elevated, pure white with soft shadow */
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --card-border: 220 16% 90%;

    /* Popover */
    --popover: 0 0% 100%;
    --popover-foreground: 222 84% 4.9%;

    /* AI Brand Colors - Warm Orange */
    --primary: 20 95% 58%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 20 95% 53%;
    --primary-glow: 20 95% 58%;

    /* AI Assistant Colors - Warm Coral */
    --ai: 16 90% 60%;
    --ai-foreground: 0 0% 100%;
    --ai-background: 16 90% 60%;
    --ai-glow: 16 90% 60%;

    /* User Message Colors - Warm Red Orange */
    --user: 12 88% 62%;
    --user-foreground: 0 0% 100%;
    --user-background: 12 88% 62%;

    /* Secondary Colors */
    --secondary: 210 40% 96%;
    --secondary-foreground: 222 84% 4.9%;
    --secondary-hover: 210 40% 94%;

    /* Muted Colors */
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;

    /* Accent Colors */
    --accent: 210 40% 96%;
    --accent-foreground: 222 84% 4.9%;

    /* Status Colors */
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --success: 142 71% 42%;
    --success-foreground: 0 0% 98%;
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 98%;
    --info: 217 91% 60%;
    --info-foreground: 0 0% 98%;

    /* Border & Input */
    --border: 220 16% 90%;
    --input: 220 16% 90%;
    --input-focus: 20 95% 58%;
    --ring: 20 95% 58%;

    /* Radius */
    --radius: 0.75rem;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(20 95% 58%), hsl(16 90% 65%));
    --gradient-ai: linear-gradient(135deg, hsl(16 90% 60%), hsl(12 88% 67%));
    --gradient-surface: linear-gradient(180deg, hsl(0 0% 100%), hsl(220 20% 98%));
    --gradient-app: linear-gradient(180deg, hsl(220 20% 97%) 0%, hsl(220 20% 96%) 100%);
    --gradient-glow: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), hsl(20 95% 58% / 0.06), transparent 40%);

    /* Shadows - layered, soft, Linear-style */
    --shadow-xs: 0 1px 2px 0 hsl(220 30% 10% / 0.04);
    --shadow-sm: 0 1px 2px 0 hsl(220 30% 10% / 0.04), 0 1px 3px 0 hsl(220 30% 10% / 0.06);
    --shadow-md: 0 2px 4px -1px hsl(220 30% 10% / 0.06), 0 4px 8px -2px hsl(220 30% 10% / 0.08);
    --shadow-lg: 0 4px 8px -2px hsl(220 30% 10% / 0.08), 0 12px 24px -4px hsl(220 30% 10% / 0.10);
    --shadow-xl: 0 8px 16px -4px hsl(220 30% 10% / 0.10), 0 24px 48px -8px hsl(220 30% 10% / 0.14);
    --shadow-glow: 0 0 24px hsl(20 95% 58% / 0.18);
    --shadow-ai-glow: 0 0 24px hsl(16 90% 60% / 0.18);

    /* Animations */
    --transition-fast: all 0.15s ease-out;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Sidebar - distinct from main content */
    --sidebar-background: 220 22% 95%;
    --sidebar-foreground: 222 47% 11%;
    --sidebar-primary: 20 95% 58%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 220 20% 92%;
    --sidebar-accent-foreground: 222 47% 11%;
    --sidebar-border: 220 16% 88%;
    --sidebar-ring: 20 95% 58%;

    /* Chart Colors */
    --chart-1: 20 95% 58%;
    --chart-2: 142 76% 36%;
    --chart-3: 217 91% 60%;
    --chart-4: 280 61% 50%;
    --chart-5: 38 92% 50%;
  }

  .dark {
    /* Core Background Colors - Layered Dark Theme */
    --background: 222 47% 5%;
    --foreground: 210 40% 96%;
    --surface: 222 40% 9%;
    --surface-hover: 222 40% 12%;
    --surface-muted: 222 40% 7%;

    /* Card System - elevated panel sits above surface */
    --card: 222 40% 11%;
    --card-foreground: 210 40% 96%;
    --card-border: 222 28% 18%;

    /* Popover */
    --popover: 222 47% 9%;
    --popover-foreground: 210 40% 96%;

    /* AI Brand Colors - kept warm but slightly toned for dark */
    --primary: 20 95% 60%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 20 95% 55%;
    --primary-glow: 20 95% 60%;

    /* AI Assistant Colors */
    --ai: 16 90% 62%;
    --ai-foreground: 0 0% 100%;
    --ai-background: 16 90% 62%;
    --ai-glow: 16 90% 62%;

    /* User Message Colors */
    --user: 12 88% 64%;
    --user-foreground: 0 0% 100%;
    --user-background: 12 88% 64%;

    /* Secondary Colors */
    --secondary: 222 32% 16%;
    --secondary-foreground: 210 40% 96%;
    --secondary-hover: 222 32% 20%;

    /* Muted Colors */
    --muted: 222 32% 16%;
    --muted-foreground: 215 20% 65%;

    /* Accent Colors */
    --accent: 222 32% 16%;
    --accent-foreground: 210 40% 96%;

    /* Status Colors */
    --destructive: 0 75% 55%;
    --destructive-foreground: 0 0% 98%;
    --success: 142 65% 45%;
    --success-foreground: 0 0% 98%;
    --warning: 38 92% 55%;
    --warning-foreground: 0 0% 10%;
    --info: 217 91% 65%;
    --info-foreground: 0 0% 98%;

    /* Border & Input */
    --border: 222 32% 18%;
    --input: 222 32% 18%;
    --input-focus: 20 95% 60%;
    --ring: 20 95% 60%;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(20 95% 60%), hsl(16 90% 67%));
    --gradient-ai: linear-gradient(135deg, hsl(16 90% 62%), hsl(12 88% 69%));
    --gradient-surface: linear-gradient(180deg, hsl(222 40% 11%), hsl(222 40% 9%));
    --gradient-app: linear-gradient(180deg, hsl(222 47% 5%) 0%, hsl(222 47% 6%) 100%);
    --gradient-glow: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), hsl(20 95% 60% / 0.12), transparent 40%);

    /* Shadows - layered, deeper for dark */
    --shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.3);
    --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.3), 0 1px 3px 0 hsl(0 0% 0% / 0.2);
    --shadow-md: 0 2px 4px -1px hsl(0 0% 0% / 0.4), 0 4px 8px -2px hsl(0 0% 0% / 0.3);
    --shadow-lg: 0 4px 8px -2px hsl(0 0% 0% / 0.5), 0 12px 24px -4px hsl(0 0% 0% / 0.4);
    --shadow-xl: 0 8px 16px -4px hsl(0 0% 0% / 0.5), 0 24px 48px -8px hsl(0 0% 0% / 0.5);
    --shadow-glow: 0 0 24px hsl(20 95% 60% / 0.25);
    --shadow-ai-glow: 0 0 24px hsl(16 90% 62% / 0.25);

    /* Sidebar - distinct from main, slightly darker */
    --sidebar-background: 222 47% 4%;
    --sidebar-foreground: 210 40% 96%;
    --sidebar-primary: 20 95% 60%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 222 32% 14%;
    --sidebar-accent-foreground: 210 40% 96%;
    --sidebar-border: 222 32% 14%;
    --sidebar-ring: 20 95% 60%;

    /* Chart Colors - slightly brighter for dark bg */
    --chart-1: 20 95% 62%;
    --chart-2: 142 70% 50%;
    --chart-3: 217 91% 65%;
    --chart-4: 280 65% 65%;
    --chart-5: 38 92% 60%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
}

@layer components {
  /* Glow Effects */
  .glow-primary {
    box-shadow: var(--shadow-glow);
  }
  
  .glow-ai {
    box-shadow: var(--shadow-ai-glow);
  }

  /* Gradient Backgrounds */
  .bg-gradient-primary {
    background: var(--gradient-primary);
  }
  
  .bg-gradient-ai {
    background: var(--gradient-ai);
  }
  
  .bg-gradient-surface {
    background: var(--gradient-surface);
  }

  /* Message Animations */
  .message-enter {
    animation: messageSlideIn 0.3s ease-out;
  }
  
  .typing-indicator {
    animation: pulse 1.5s ease-in-out infinite;
  }

  /* Scrollbar Styling */
  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-track {
    background: hsl(var(--muted));
    border-radius: 3px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: hsl(var(--muted-foreground) / 0.3);
    border-radius: 3px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground) / 0.5);
  }
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Utility for word breaking */
.overflow-wrap-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ===== Mobile / Native 适配工具类 ===== */

/* iOS / Android 安全区（刘海屏 / Home Indicator） */
.safe-pt { padding-top: env(safe-area-inset-top); }
.safe-pb { padding-bottom: env(safe-area-inset-bottom); }
.safe-pl { padding-left: env(safe-area-inset-left); }
.safe-pr { padding-right: env(safe-area-inset-right); }
.safe-px { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* 固定底部栏（TabBar / 输入栏）自动避让 Home Indicator */
.fixed-bottom-safe {
  padding-bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
}

/* WCAG 2.5.5 / Apple HIG 最小触控目标 */
.tap-target { min-width: 44px; min-height: 44px; }

/* 触控设备：去除点击高光，输入框防 iOS 自动放大 */
@media (hover: none) and (pointer: coarse) {
  * { -webkit-tap-highlight-color: transparent; }
  input, textarea, select { font-size: max(16px, 1rem); }
}

/* Capacitor 原生壳环境（由 NativeBridge 给 html 加 .is-native） */
html.is-native body {
  overscroll-behavior-y: none;
  -webkit-user-select: none;
  user-select: none;
}
html.is-native input, html.is-native textarea {
  -webkit-user-select: text;
  user-select: text;
}
