/* Material Design 3 Theme for Zodiac Copilot */

:root {
    /* Color Palette */
    --md-sys-color-primary: #1f6feb;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #e8f1ff;
    --md-sys-color-on-primary-container: #001a42;

    --md-sys-color-secondary: #536878;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #d9e2f0;
    --md-sys-color-on-secondary-container: #0f1a29;

    --md-sys-color-tertiary: #7d5260;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #ffd8e4;
    --md-sys-color-on-tertiary-container: #31111d;

    --md-sys-color-error: #dc2626;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #f8d7da;
    --md-sys-color-on-error-container: #6d1f1a;

    --md-sys-color-background: #fffbfe;
    --md-sys-color-on-background: #1a1a1a;
    --md-sys-color-surface: #fffbfe;
    --md-sys-color-on-surface: #1a1a1a;
    --md-sys-color-surface-variant: #e7e0ec;
    --md-sys-color-on-surface-variant: #49454f;
    --md-sys-color-outline: #79747e;
    --md-sys-color-outline-variant: #cac7d0;

    /* Dark Mode Colors */
    --md-sys-color-primary-dark: #b3d9ff;
    --md-sys-color-on-primary-dark: #001a42;
    --md-sys-color-primary-container-dark: #003a7f;
    --md-sys-color-on-primary-container-dark: #b3d9ff;

    --md-sys-color-surface-dark: #1a1a2e;
    --md-sys-color-on-surface-dark: #e8e8e8;
    --md-sys-color-surface-variant-dark: #49454f;
    --md-sys-color-on-surface-variant-dark: #cac7d0;
}

/* Tailwind Custom Configuration */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Material Elevation */
@layer components {
    .elevation-0 {
        @apply shadow-none;
    }
    
    .elevation-1 {
        @apply shadow-sm;
    }
    
    .elevation-2 {
        @apply shadow;
    }
    
    .elevation-3 {
        @apply shadow-md;
    }
    
    .elevation-4 {
        @apply shadow-lg;
    }
    
    .elevation-5 {
        @apply shadow-2xl;
    }

    /* Material Buttons */
    .btn-filled {
        @apply px-6 py-2.5 bg-blue-600 text-white font-medium rounded-full hover:bg-blue-700 transition-all active:scale-95;
    }

    .btn-filled-tonal {
        @apply px-6 py-2.5 bg-blue-100 text-blue-700 font-medium rounded-full hover:bg-blue-200 transition-all;
    }

    .btn-outlined {
        @apply px-6 py-2.5 border-2 border-blue-600 text-blue-600 font-medium rounded-full hover:bg-blue-50 transition-all;
    }

    .btn-text {
        @apply px-6 py-2.5 text-blue-600 font-medium rounded-full hover:bg-blue-50 transition-all;
    }

    /* Material Input Fields */
    .input-field {
        @apply w-full px-4 py-2.5 border-b-2 border-slate-300 bg-transparent text-slate-900 placeholder-slate-500 focus:outline-none focus:border-blue-600 transition-colors;
    }

    .input-field-outlined {
        @apply w-full px-4 py-2.5 border border-slate-300 rounded-lg bg-white text-slate-900 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all;
    }

    .input-field-filled {
        @apply w-full px-4 py-2.5 border-b-2 border-slate-300 bg-slate-100 text-slate-900 placeholder-slate-500 focus:outline-none focus:bg-slate-200 focus:border-blue-600 transition-colors;
    }

    /* Material Cards */
    .card {
        @apply bg-white rounded-lg shadow-sm border border-slate-200 p-4 transition-all hover:shadow-md;
    }

    .card-filled {
        @apply bg-blue-50 rounded-lg p-4 border border-blue-200;
    }

    /* Material Chips */
    .chip {
        @apply inline-flex items-center gap-2 px-3 py-1.5 bg-slate-200 text-slate-700 text-sm rounded-full;
    }

    .chip-filled {
        @apply inline-flex items-center gap-2 px-3 py-1.5 bg-blue-600 text-white text-sm rounded-full;
    }

    /* Material Snackbar */
    .snackbar {
        @apply fixed bottom-4 left-4 px-4 py-3 bg-slate-800 text-white rounded-lg shadow-lg text-sm flex items-center gap-3;
    }

    /* Material FAB (Floating Action Button) */
    .fab {
        @apply fixed bottom-6 right-6 w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full flex items-center justify-center shadow-lg hover:shadow-xl transition-all active:scale-95;
    }

    /* Typography */
    .md-headline-large {
        @apply text-4xl font-bold tracking-normal;
    }

    .md-headline-medium {
        @apply text-3xl font-bold tracking-normal;
    }

    .md-headline-small {
        @apply text-2xl font-bold tracking-normal;
    }

    .md-title-large {
        @apply text-xl font-bold tracking-tight;
    }

    .md-title-medium {
        @apply text-base font-bold tracking-tight;
    }

    .md-title-small {
        @apply text-sm font-bold tracking-tight;
    }

    .md-body-large {
        @apply text-base font-normal tracking-normal;
    }

    .md-body-medium {
        @apply text-sm font-normal tracking-normal;
    }

    .md-body-small {
        @apply text-xs font-normal tracking-normal;
    }

    .md-label-large {
        @apply text-sm font-medium tracking-widest uppercase;
    }

    .md-label-medium {
        @apply text-xs font-medium tracking-wider uppercase;
    }

    .md-label-small {
        @apply text-xs font-medium tracking-wider uppercase;
    }
}

/* Smooth transitions */
* {
    @apply transition-colors duration-200;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    @apply w-2;
}

::-webkit-scrollbar-track {
    @apply bg-slate-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-slate-400 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-slate-600;
}

/* Dark mode scrollbar */
:root.dark ::-webkit-scrollbar-track {
    @apply bg-slate-800;
}

:root.dark ::-webkit-scrollbar-thumb {
    @apply bg-slate-700;
}

:root.dark ::-webkit-scrollbar-thumb:hover {
    @apply bg-slate-600;
}

/* Ripple effect for buttons */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.ripple-effect::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ripple 0.6s ease-out;
}

/* Message animation */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-animate {
    animation: slideUp 0.3s ease-out;
}

/* Streaming content animation - ellipsis indicator */
@keyframes streamingEllipsis {
    0%, 20% {
        content: '';
    }
    40% {
        content: '.';
    }
    60% {
        content: '..';
    }
    80%, 100% {
        content: '...';
    }
}

#streamingMessage #streamingContent::after {
    content: '';
    animation: streamingEllipsis 1.5s infinite;
    margin-left: 4px;
}

/* Loading dots animation */
@keyframes loadingDots {
    0%, 20%, 50%, 80%, 100% {
        opacity: 0.3;
    }
    40% {
        opacity: 1;
    }
}

.loading-dot {
    animation: loadingDots 1.4s infinite;
}

.loading-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dot:nth-child(3) {
    animation-delay: 0.4s;
}

/* Focus visible for accessibility */
:focus-visible {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

/* Print styles */
@media print {
    .no-print {
        @apply hidden;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        @apply transition-none;
    }
    
    .message-animate,
    .ripple-effect::after,
    .loading-dot {
        animation: none !important;
    }
    
    #streamingMessage #streamingContent::after {
        animation: none !important;
    }
}