/* css/styles.css */

/* 1. Import Tailwind's base, components, and utilities layers. */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 2. Define base styles for the body and global elements (optional). */
@layer base {
    html {
        /* Smooth scrolling behavior */
        scroll-behavior: smooth;
    }
    body {
        /* Apply base background and text colors from the theme */
        @apply bg-neutral-100 dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100;
        /* Apply base font */
        @apply font-sans;
        /* Improve font rendering */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Style scrollbars for a more consistent look (optional) */
    /* Webkit (Chrome, Safari, Edge) */
    ::-webkit-scrollbar {
        width: 8px; /* Width of vertical scrollbar */
        height: 8px; /* Height of horizontal scrollbar */
    }
    ::-webkit-scrollbar-track {
        @apply bg-neutral-200 dark:bg-neutral-700 rounded-full;
    }
    ::-webkit-scrollbar-thumb {
        @apply bg-neutral-400 dark:bg-neutral-500 rounded-full;
    }
    ::-webkit-scrollbar-thumb:hover {
        @apply bg-neutral-500 dark:bg-neutral-400;
    }

    /* Firefox scrollbar styling (more limited) */
    /* Note: Firefox only supports changing color and width as of late 2023 */
    /* * {
        scrollbar-width: thin;
        scrollbar-color: theme('colors.neutral.400') theme('colors.neutral.200');
    }
    * ::-moz-scrollbar-track {
         @apply bg-neutral-200 dark:bg-neutral-700;
    } */
    /* Dark mode Firefox scrollbar (needs JS toggle or separate rules if not using native color scheme) */

    /* Basic styling for Plotly chart containers */
    .plotly-chart-container {
        min-height: 200px; /* Ensure containers have a minimum height */
    }
}

/* 3. Define custom component classes (keep minimal, prefer utilities). */
@layer components {
    /* Example: A reusable card base style (might not be needed if using utilities directly) */
    /* .card-base {
        @apply bg-white dark:bg-neutral-800 rounded-lg shadow overflow-hidden;
    } */

    /* Style for the chat agent's intermediate step details */
    details[open] > summary {
      /* Style summary when details are open, e.g., slightly bolder */
      /* @apply font-medium; */
    }
    details > summary {
        list-style: none; /* Remove default marker */
    }
    details > summary::-webkit-details-marker {
        display: none; /* Remove default marker in Webkit */
    }
    /* Optional: Add custom arrow using ::before or ::after if needed */

}

/* 4. Add any custom utilities if necessary (rarely needed). */
@layer utilities {
    /* Example: .content-auto { content: auto; } */
}
/* Typing/Thinking Indicator Styles */
.typing-indicator {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.5rem 0;
}

.typing-dot {
    width: 6px;
    height: 6px;
    margin: 0 2px;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.6;
    animation: typing-bounce 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes typing-bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

/* Landing Page Styles */
.bg-grid-white\/10 {
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Smooth scroll for landing page */
html.landing-active {
    scroll-behavior: smooth;
}

/* Animation for landing page elements */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* Gradient text animation */
@keyframes gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 3s ease infinite;
}