/**
 * Research Tracker - Main Stylesheet
 * Built with Tailwind CSS and DaisyUI
 * 
 * Structure:
 * 1. Base Layer - Core styles and CSS variables
 * 2. Components Layer - Reusable component styles
 * 3. Utilities Layer - Utility classes and animations
 */

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

/* ═══════════════════════════════════════════════════════════════════════════
   BASE LAYER
   ═══════════════════════════════════════════════════════════════════════════ */

@layer base {
  :root {
    /* Typography variables */
    --font-heading: 'PT Sans', sans-serif;
    --font-body: 'Be Vietnam Pro', sans-serif;

    /* Animation timing */
    --transition-fast: 150ms;
    --transition-normal: 200ms;
    --transition-slow: 300ms;

    /* Z-index scale */
    --z-dropdown: 50;
    --z-modal: 100;
    --z-toast: 200;
  }

  html {
    font-family: var(--font-body);
  }

  body {
    @apply bg-base-200;
    font-family: var(--font-body);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-heading);
  }

  body,
  p,
  span,
  div,
  a,
  button,
  input,
  select,
  textarea {
    font-family: var(--font-body);
  }
}

@layer utilities {

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    /* Account for sticky navbar */
  }

  /* Line clamp utilities */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Stats component width fix */
  .stats.stats-horizontal {
    width: 100%;
  }

  .stats.stats-horizontal .stat {
    flex: 1;
    min-width: 0;
  }

  /* Card hover effects */
  .card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
  }

  .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(var(--spotlight-color, 255, 255, 255), 0.06),
        transparent 40%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
  }

  .card .card-body,
  .card figure {
    position: relative;
    z-index: 2;
  }

  [data-theme="light"] .card {
    --spotlight-color: 0, 0, 0;
  }

  [data-theme="dark"] .card {
    --spotlight-color: 255, 255, 255;
  }

  .card:hover::before {
    opacity: 1;
  }

  .card:hover {
    transform: translateY(-4px);
  }

  /* Loading animation */
  @keyframes pulse {

    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.5;
    }
  }

  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  /* Focus styles for accessibility */
  *:focus-visible {
    outline: 2px solid hsl(var(--p));
    outline-offset: 2px;
  }

  /* Smooth transitions - specific elements */
  a,
  button,
  input,
  .card,
  .badge,
  .btn {
    transition-property: color, background-color, border-color, opacity, box-shadow, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
  }

  /* Markdown content styling */
  .markdown-content {
    @apply text-base-content;
  }

  .markdown-content h1,
  .markdown-content h2,
  .markdown-content h3,
  .markdown-content h4,
  .markdown-content h5,
  .markdown-content h6 {
    font-family: var(--font-heading);
    @apply font-bold mt-4 mb-2 text-base-content;
  }

  .markdown-content h1 {
    @apply text-2xl;
  }

  .markdown-content h2 {
    @apply text-xl;
  }

  .markdown-content h3 {
    @apply text-lg;
  }

  .markdown-content h4 {
    @apply text-base;
  }

  .markdown-content h5,
  .markdown-content h6 {
    @apply text-sm;
  }

  .markdown-content p {
    @apply mb-3 text-base-content;
  }

  .markdown-content ul,
  .markdown-content ol {
    @apply mb-3 ml-6 text-base-content;
  }

  .markdown-content ul {
    @apply list-disc;
  }

  .markdown-content ol {
    @apply list-decimal;
  }

  .markdown-content li {
    @apply mb-1;
  }

  .markdown-content code {
    @apply bg-base-300 text-base-content px-1.5 py-0.5 rounded text-sm font-mono;
  }

  .markdown-content pre {
    @apply bg-base-300 text-base-content p-3 rounded-lg overflow-x-auto mb-3;
  }

  .markdown-content pre code {
    @apply bg-transparent p-0;
  }

  .markdown-content blockquote {
    @apply border-l-4 border-primary pl-4 italic my-3 text-base-content/80;
  }

  .markdown-content a {
    @apply text-primary hover:text-primary-focus underline;
  }

  .markdown-content strong {
    @apply font-bold text-base-content;
  }

  .markdown-content em {
    @apply italic;
  }

  .markdown-content hr {
    @apply border-base-300 my-4;
  }

  .markdown-content table {
    @apply w-full border-collapse mb-3;
  }

  .markdown-content th,
  .markdown-content td {
    @apply border border-base-300 px-3 py-2 text-base-content;
  }

  .markdown-content th {
    @apply bg-base-300 font-bold;
  }

  /* Luminous gradient border for selected cards */
  .card-selected {
    position: relative;
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  .card-selected::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.6) 0%,
        rgba(139, 92, 246, 0.6) 25%,
        rgba(236, 72, 153, 0.6) 50%,
        rgba(251, 146, 60, 0.6) 75%,
        rgba(59, 130, 246, 0.6) 100%);
    background-size: 200% 200%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: gradient-border 3s ease infinite;
    z-index: -1;
  }

  @keyframes gradient-border {

    0%,
    100% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }
  }

  /* Subtle glow effect for selected cards */
  .card-selected {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3),
      0 0 40px rgba(139, 92, 246, 0.2),
      0 0 60px rgba(236, 72, 153, 0.1);
  }

  /* Hide scrollbars but keep scrolling functionality */
  .hide-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  .hide-scrollbar::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
  }

  /* Subtle scroll indicator - fade at bottom when scrollable */
  .scroll-indicator {
    position: relative;
  }

  .scroll-indicator::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to top,
        rgba(var(--base-100-rgb, 243, 244, 246), 0.95) 0%,
        rgba(var(--base-100-rgb, 243, 244, 246), 0.8) 50%,
        transparent 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
  }

  .scroll-indicator.has-more::after {
    opacity: 1;
  }

  /* Dark theme support */
  [data-theme="dark"] .scroll-indicator::after {
    background: linear-gradient(to top,
        rgba(var(--base-100-rgb, 17, 24, 39), 0.95) 0%,
        rgba(var(--base-100-rgb, 17, 24, 39), 0.8) 50%,
        transparent 100%);
  }

  /* AI Response Content Styling */
  .ai-response-content {
    @apply text-base-content text-sm;
    line-height: 1.75;
  }

  .ai-response-content h1 {
    @apply text-xl font-bold mt-6 mb-3 text-base-content pb-2 border-b border-base-300/50;
  }

  .ai-response-content h2 {
    @apply text-lg font-bold mt-5 mb-2.5 text-base-content;
  }

  .ai-response-content h3 {
    @apply text-base font-semibold mt-4 mb-2 text-base-content;
  }

  .ai-response-content h4,
  .ai-response-content h5,
  .ai-response-content h6 {
    @apply text-sm font-semibold mt-3 mb-1.5 text-base-content;
  }

  .ai-response-content p {
    @apply text-base-content/80 leading-relaxed my-2.5;
  }

  .ai-response-content ul,
  .ai-response-content ol {
    @apply my-3 space-y-1.5 ml-5;
  }

  .ai-response-content li {
    @apply text-base-content/80 leading-relaxed;
  }

  .ai-response-content ul li {
    list-style-type: disc;
  }

  .ai-response-content ol li {
    list-style-type: decimal;
  }

  .ai-response-content blockquote {
    @apply border-l-3 border-primary/60 pl-4 py-1 my-3 text-base-content/70 italic;
  }

  .ai-response-content code {
    @apply bg-base-200/80 px-1.5 py-0.5 rounded text-xs font-mono text-base-content/90;
  }

  .ai-response-content pre {
    @apply bg-base-200/80 rounded-lg p-3 overflow-x-auto my-3 text-xs;
  }

  .ai-response-content pre code {
    @apply bg-transparent p-0;
  }

  .ai-response-content table {
    @apply w-full my-4 text-xs border-collapse;
  }

  .ai-response-content table thead {
    @apply bg-base-200/80;
  }

  .ai-response-content table th {
    @apply font-semibold text-base-content px-3 py-2 text-left border-b border-base-300/50;
  }

  .ai-response-content table td {
    @apply text-base-content/80 px-3 py-2 border-b border-base-300/30;
  }

  .ai-response-content a {
    @apply text-primary hover:text-primary-focus underline decoration-primary/30 hover:decoration-primary/60 transition-colors;
  }

  .ai-response-content hr {
    @apply my-4 border-t border-base-300/50;
  }

  .ai-response-content strong {
    @apply font-semibold text-base-content;
  }

  .ai-response-content em {
    @apply italic;
  }

  /* Responsive table wrapper */
  .ai-response-content .table-wrapper {
    @apply overflow-x-auto my-3;
  }

  /* Fade-in animation */
  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

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

  .animate-fade-in {
    animation: fade-in 0.3s ease-out forwards;
  }

  /* AI Chat specific styles */
  #view-ai-assistant textarea:focus {
    outline: none;
    box-shadow: none;
  }

  #view-ai-assistant .chat-input-container {
    transition: all 0.2s ease;
  }

  #view-ai-assistant .chat-input-container:focus-within {
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
  }

  /* History sidebar item animation */
  #chatHistoryList>div {
    transition: all 0.15s ease;
  }

  #chatHistoryList>div:hover {
    transform: translateX(2px);
  }

  /* Context article cards */
  #contextArticles>div,
  #newSourcesList>div {
    transition: all 0.15s ease;
  }

  #contextArticles>div:hover,
  #newSourcesList>div:hover {
    transform: translateY(-1px);
  }

  /* Graph View Enhancements */

  /* Lasso selection styling */
  #lasso-svg {
    pointer-events: none;
    z-index: 5;
  }

  #lasso-path {
    animation: lasso-dash 0.5s linear infinite;
  }

  @keyframes lasso-dash {
    from {
      stroke-dashoffset: 10;
    }

    to {
      stroke-dashoffset: 0;
    }
  }

  /* Graph preset buttons */
  .graph-preset-btn {
    @apply text-xs transition-all duration-200;
  }

  .graph-preset-btn.active {
    @apply ring-2 ring-primary ring-offset-1;
  }

  .graph-preset-btn:hover:not(.active) {
    @apply scale-105;
  }

  /* Selection panel entrance animation */
  #graph-selection-panel {
    animation: selection-slide-in 0.3s ease-out;
  }

  @keyframes selection-slide-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

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

  /* Cluster panel styling */
  #cluster-info-panel {
    animation: cluster-fade-in 0.3s ease-out;
  }

  @keyframes cluster-fade-in {
    from {
      opacity: 0;
      transform: scale(0.95);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* Cluster list item hover */
  #cluster-list>div:hover {
    @apply bg-base-200/80;
    transform: translateX(2px);
    transition: all 0.2s ease;
  }

  /* Graph controls panel */
  #view-graph .form-control label {
    @apply transition-colors duration-200;
  }

  #view-graph .form-control:hover label {
    @apply text-primary;
  }

  /* Improve graph container cursor for lasso mode */
  #graph-container.lasso-mode {
    cursor: crosshair !important;
  }

  #graph-container.lasso-mode canvas {
    cursor: crosshair !important;
  }

  /* Node selection pulse effect (CSS fallback) */
  @keyframes node-pulse {

    0%,
    100% {
      box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4);
    }

    50% {
      box-shadow: 0 0 0 10px rgba(14, 165, 233, 0);
    }
  }

  /* Feature gated styling */
  .grey-when-disabled.disabled::after {
    content: '🔒';
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 12px;
  }

  /* Upgrade Button Styling */
  .btn-upgrade {
    background-color: #7e22ce;
    /* purple-700 */
    color: white;
    border: none;
    box-shadow: 0 0 10px rgba(126, 34, 206, 0.5);
    animation: upgrade-glow 2s infinite;
    transition: all 0.3s ease;
  }

  .btn-upgrade:hover {
    background-color: #6b21a8;
    /* purple-800 */
    box-shadow: 0 0 20px rgba(126, 34, 206, 0.8);
    transform: scale(1.05);
  }

  @keyframes upgrade-glow {
    0% {
      box-shadow: 0 0 5px rgba(126, 34, 206, 0.5);
    }

    50% {
      box-shadow: 0 0 15px rgba(126, 34, 206, 0.8), 0 0 5px rgba(126, 34, 206, 0.5);
    }

    100% {
      box-shadow: 0 0 5px rgba(126, 34, 206, 0.5);
    }
  }
}