/**
 * EN: Global Styles with Tailwind CSS 4
 * VI: Styles toàn cục với Tailwind CSS 4
 *
 * Import theme variables first, then glassmorphism utilities, then Tailwind CSS 4
 * Import các biến theme trước, sau đó là glassmorphism utilities, rồi đến Tailwind CSS 4
 */
@import "../styles/theme.css";
@import "../styles/glass.css";
@import "tailwindcss";

/**
 * EN: Base Styles
 * VI: Styles cơ bản
 */
@layer base {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
  }

  /**
   * EN: Disable smooth scroll for users who prefer reduced motion
   * VI: Tắt smooth scroll cho người dùng ưa thích giảm chuyển động
   */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    /* Also disable all animations */
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /**
   * EN: Custom text selection (X.ai blue)
   * VI: Tùy chỉnh text selection (X.ai blue)
   */
  ::selection {
    background-color: var(--accent-primary);
    color: white;
  }

  ::-moz-selection {
    background-color: var(--accent-primary);
    color: white;
  }

  /**
   * EN: Custom scrollbar (X.ai minimal)
   * VI: Tùy chỉnh scrollbar (X.ai minimal)
   */
  /* Webkit browsers (Chrome, Safari, Edge) */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--glass-border-default);
    border-radius: var(--radius-full);
    transition: background var(--duration-fast) var(--ease-snap);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--glass-border-hover);
  }

  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--glass-border-default) var(--bg-secondary);
  }

  body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: var(--font-light);
    line-height: var(--leading-relaxed);
    transition: background-color var(--duration-normal) var(--ease-in-out),
      color var(--duration-normal) var(--ease-in-out);
  }

  /**
   * EN: Smooth transitions for theme switching
   * VI: Chuyển đổi mượt mà cho việc chuyển theme
   */
  *,
  *::before,
  *::after {
    transition: background-color var(--duration-normal) var(--ease-in-out),
      color var(--duration-normal) var(--ease-in-out),
      border-color var(--duration-normal) var(--ease-in-out);
  }

  /**
   * EN: Focus indicators for keyboard navigation (WCAG 2.1 AA)
   * VI: Chỉ báo focus cho điều hướng bàn phím (WCAG 2.1 AA)
   */
  *:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
  }

  /**
   * EN: Skip link styles (screen reader only until focused)
   * VI: Styles cho skip link (chỉ screen reader cho đến khi focus)
   */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .sr-only:focus,
  .sr-only:focus-visible {
    position: fixed;
    width: auto;
    height: auto;
    padding: inherit;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  /**
   * EN: Ensure minimum font size for accessibility (16px) - WCAG 2.1 AA
   * VI: Đảm bảo kích thước font tối thiểu cho accessibility (16px) - WCAG 2.1 AA
   */
  body {
    font-size: 16px;
  }
}

/**
 * EN: Message bubble fade-in animation
 * VI: Animation fade-in cho message bubble
 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/**
 * EN: Floating Animation - X.ai Minimalist (Simplified)
 * VI: Animation lơ lửng - X.ai Minimalist (Đơn giản hóa)
 */
@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

/**
 * EN: Skeleton Loading Animation
 * VI: Animation loading skeleton
 */
@keyframes skeleton {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ============================================
   EN: Removed - Mesh Gradient Animation (X.ai Minimalist)
   VI: Đã xóa - Mesh Gradient Animation (X.ai Minimalist)
   ============================================ */
/* Removed for cleaner, minimalist aesthetic */

/* ============================================
   EN: Removed - Shimmer Animation (X.ai Minimalist)  
   VI: Đã xóa - Shimmer Animation (X.ai Minimalist)
   ============================================ */
/* Removed for cleaner, minimalist aesthetic */

/**
 * EN: Utilities Layer
 * VI: Layer Utilities
 */
@layer utilities {
  .animate-fadeIn {
    animation: fadeIn 1s var(--ease-spring) forwards;
  }

  /* EN: Simplified float animation - X.ai style */
  .animate-float {
    animation: float 4s var(--ease-smooth) infinite;
  }

  /**
   * EN: Skeleton Loading Utilities
   * VI: Utilities loading skeleton
   */
  .skeleton {
    background: linear-gradient(90deg,
        var(--glass-bg-subtle) 0%,
        var(--glass-bg-default) 50%,
        var(--glass-bg-subtle) 100%);
    background-size: 200% 100%;
    animation: skeleton 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
  }

  .skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
  }

  .skeleton-title {
    height: 2em;
    margin-bottom: 1em;
  }

  .skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
  }

  .skeleton-card {
    height: 200px;
    border-radius: var(--radius-lg);
  }

  /**
   * EN: Button Press Micro-interaction
   * VI: Micro-interaction cho button press
   */
  .btn-press {
    transition: transform var(--duration-fast) var(--ease-snap);
  }

  .btn-press:active:not(:disabled) {
    transform: scale(0.98);
  }

  /* ============================================
     EN: Removed - Cosmic Effects (X.ai Minimalist)
     VI: Đã xóa - Cosmic Effects (X.ai Minimalist)
     ============================================ */
  /* Removed .mesh-gradient, .mesh-spot, .text-brand-glow, .animate-shimmer */
  /* Use simple backgrounds and minimal effects instead */

  .container-responsive {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  @media (min-width: 640px) {
    .container-responsive {
      max-width: 640px;
    }
  }

  @media (min-width: 768px) {
    .container-responsive {
      max-width: 768px;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }

  @media (min-width: 1024px) {
    .container-responsive {
      max-width: 1024px;
      padding-left: 2rem;
      padding-right: 2rem;
    }
  }

  @media (min-width: 1280px) {
    .container-responsive {
      max-width: 1280px;
    }
  }

  .text-responsive-hero {
    font-size: 2.5rem;
    line-height: 1.1;
  }

  @media (min-width: 768px) {
    .text-responsive-hero {
      font-size: 3.75rem;
    }
  }

  .btn-touch {
    min-height: 44px;
    min-width: 44px;
  }
}

/**
 * EN: Print Styles
 * VI: Styles cho in ấn
 */
@media print {
  body {
    background: white;
    color: black;
  }

  .glass-card {
    background: white;
    border: 1px solid #ccc;
    box-shadow: none;
  }

  /* Hide non-essential elements */
  nav,
  footer,
  .no-print,
  button,
  .auth-controls {
    display: none !important;
  }

  /* Ensure readable text */
  * {
    color: black !important;
    background: white !important;
  }

  a {
    text-decoration: underline;
  }

  /* Show link URLs after text */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}