/*
 * BrandElf Application Styles
 *
 * This file contains custom styles that extend the Tailwind utilities:
 * - CSS Custom Properties for design tokens (spring physics)
 * - View Transitions API customization
 * - Component-specific styles (drop zone)
 *
 * Note: Base Tailwind utilities are loaded from tailwind.css
 */

/* ==========================================================================
   Design Tokens - Spring Physics & Timing
   ========================================================================== */

:root {
  /* Light Mode Colors */
  --color-app: #FBFAF9;

  /* Animation Tokens */
  --spring: linear(
    0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%,
    0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159,
    1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%,
    1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%,
    0.997 69.8%, 1.003 76.9%, 1
  );

  --ease-smooth: linear(
    0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%,
    0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%,
    1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001
  );

  --duration-spring: 400ms;
  --duration-smooth: 350ms;
  --duration-fast: 200ms;
}

/* Dark Mode Colors */
.dark {
  --color-app: #121110;
}

/* ==========================================================================
   View Transitions - Smooth page navigation
   ========================================================================== */

@layer utilities {
  /* Apply spring physics to all view transitions */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--duration-spring);
    animation-timing-function: var(--spring);
  }

  /* Sidebar persists - don't animate it */
  ::view-transition-old(sidebar),
  ::view-transition-new(sidebar) {
    animation: none;
  }

  /* Preview pane slides in from right with spring physics */
  ::view-transition-old(preview-pane),
  ::view-transition-new(preview-pane) {
    animation-duration: var(--duration-spring);
    animation-timing-function: var(--spring);
  }

  /* Individual messages morph smoothly */
  [data-message] {
    contain: layout;
  }

  /* Named view-transition targets - assigned via class to stay CSP-friendly */
  .view-transition-conversation      { view-transition-name: conversation; }
  .view-transition-message-composer  { view-transition-name: message-composer; }
  .view-transition-preview-pane      { view-transition-name: preview-pane; }

  /* Conversation area transitions smoothly */
  ::view-transition-old(conversation),
  ::view-transition-new(conversation) {
    animation-duration: var(--duration-spring);
    animation-timing-function: var(--spring);
  }

  /* Message input morphs position (center to bottom) */
  ::view-transition-old(message-input),
  ::view-transition-new(message-input) {
    animation-duration: var(--duration-spring);
    animation-timing-function: var(--spring);
  }
}

/* ==========================================================================
   Preview Pane - Entrance animations
   ========================================================================== */

@layer utilities {
  /* Preview pane transitions */
  [data-preview-pane] {
    transition: transform var(--duration-spring) var(--spring),
                opacity var(--duration-spring) var(--spring);
  }

  /* Conversation reflows when preview opens */
  [data-conversation] {
    transition: max-width var(--duration-spring) var(--spring),
                margin var(--duration-spring) var(--spring);
  }

  /* Messages use container queries for responsive layout */
  [data-message] {
    container-type: inline-size;
  }
}

/* ==========================================================================
   Custom Components - Minimal necessary styles
   ========================================================================== */

@layer components {
  /* Drag and Drop zone */
  .drop-zone {
    transition: all var(--duration-fast) var(--ease-smooth);
  }

  .drop-zone.drag-over {
    border-color: var(--color-brand-500);
    background-color: color-mix(in srgb, var(--color-brand-500) 18%, transparent);
  }

  .drop-zone.drag-over svg {
    color: var(--color-brand-700);
  }
}

/* ==========================================================================
   File Chip Animations
   ========================================================================== */

@keyframes chipEnter {
  from { opacity: 0; transform: scale(0.85) translateY(2px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes chipExit {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.85); }
}