/**
 * Knowi Documentation Assistant - Custom Styles
 * Complements Tailwind CSS with custom animations and utilities
 */

/* Custom scrollbar for chat messages */
#chatMessages::-webkit-scrollbar {
    width: 6px;
}

#chatMessages::-webkit-scrollbar-track {
    background: transparent;
}

#chatMessages::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

#chatMessages::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Firefox scrollbar */
#chatMessages {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

/* Citation links - clickable numbered badges */
.citation-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    font-size: 0.625rem;
    font-weight: 600;
    color: white;
    background-color: #6366f1;
    border-radius: 9999px;
    text-decoration: none;
    vertical-align: super;
    margin: 0 0.125rem;
    transition: background-color 0.15s ease-in-out;
}

.citation-link:hover {
    background-color: #4f46e5;
    text-decoration: none;
}

/* Custom animations */
@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;
}

/* Typing indicator bounce animation */
@keyframes typing-bounce {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-4px);
    }
}

#typing-indicator .animate-bounce {
    animation: typing-bounce 1.4s infinite;
}

/* Textarea auto-resize smooth transition */
#userInput {
    transition: height 0.1s ease-out;
}

/* Focus ring for accessibility */
button:focus-visible,
textarea:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

/* Loading spinner animation */
.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Prose styling for formatted messages */
.prose {
    line-height: 1.6;
}

.prose p {
    margin-bottom: 0.75rem;
}

.prose p:last-child {
    margin-bottom: 0;
}

.prose ul, .prose ol {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
}

.prose li {
    margin-bottom: 0.25rem;
}

.prose strong {
    font-weight: 600;
}

.prose em {
    font-style: italic;
}

.prose code {
    font-size: 0.875em;
}

.prose pre {
    margin: 0.75rem 0;
}

.prose pre code {
    background: transparent;
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* Message bubble transitions */
.flex.gap-3 {
    transition: opacity 0.2s ease-out;
}

/* Button hover effects */
button {
    transition: all 0.15s ease-in-out;
}

button:active:not(:disabled) {
    transform: scale(0.98);
}

/* Status badge transitions */
#indexStatus {
    transition: all 0.2s ease-in-out;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .max-w-3xl {
        max-width: 95%;
    }
}

/* Dark mode support (optional - can be extended) */
@media (prefers-color-scheme: dark) {
    /* Add dark mode styles here if needed */
}

/* Print styles */
@media print {
    header,
    form,
    button {
        display: none !important;
    }

    #chatMessages {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    button {
        border: 2px solid currentColor;
    }

    textarea {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .animate-fade-in,
    .animate-bounce,
    .animate-spin {
        animation: none;
    }

    * {
        transition-duration: 0.01ms !important;
    }
}