/* Enhanced visibility and contrast styles */
:root {
    --text-dark: #1f2937;
    --text-light: #ffffff;
    --bg-light: #ffffff;
    --bg-gray: #f9fafb;
    --border-light: #e5e7eb;
    --blue-primary: #3b82f6;
    --gray-600: #4b5563;
    --gray-500: #6b7280;
    --gray-400: #9ca3af;
    --gray-200: #e5e7eb;
}

/* Ensure high contrast text throughout */
.text-gray-800 {
    color: var(--text-dark) !important;
}

.text-gray-600 {
    color: var(--gray-600) !important;
}

.text-gray-500 {
    color: var(--gray-500) !important;
}

.bg-white {
    background-color: var(--bg-light) !important;
    color: var(--text-dark) !important;
}

/* Enhanced message styling with high contrast */
.user-message {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-message {
    background-color: #e5e7eb !important;
    color: #1f2937 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.message-text {
    word-wrap: break-word;
    line-height: 1.4;
    font-weight: 500;
    color: inherit !important;
}

/* Form input enhancement */
input, textarea {
    background-color: var(--bg-light) !important;
    color: var(--text-dark) !important;
    border: 2px solid var(--border-light) !important;
}

input::placeholder, textarea::placeholder {
    color: var(--gray-500) !important;
}

input:focus, textarea:focus {
    border-color: var(--blue-primary) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Button styling with proper contrast */
button {
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.bg-blue-500 {
    background-color: var(--blue-primary) !important;
    color: var(--text-light) !important;
}

.bg-gray-500 {
    background-color: var(--gray-500) !important;
    color: var(--text-light) !important;
}

/* Timestamp styling */
.opacity-75 {
    opacity: 0.8 !important;
}

.user-message .opacity-75 {
    color: rgba(255, 255, 255, 0.8) !important;
}

.ai-message .opacity-75 {
    color: rgba(31, 41, 55, 0.7) !important;
}

/* Custom styles for better chat experience */
.animate-bounce {
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translateY(0);
    }
    40%, 43% {
        transform: translateY(-10px);
    }
    70% {
        transform: translateY(-5px);
    }
    90% {
        transform: translateY(-2px);
    }
}

/* Smooth scrolling for messages */
.overflow-y-auto {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f7fafc;
}

.overflow-y-auto::-webkit-scrollbar {
    width: 6px;
}

.overflow-y-auto::-webkit-scrollbar-track {
    background: #f7fafc;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* Message bubble animations */
.message-bubble {
    animation: messageSlideIn 0.3s ease-out;
    transform-origin: bottom;
}

.user-message {
    animation: messageSlideInRight 0.3s ease-out;
}

.ai-message {
    animation: messageSlideInLeft 0.3s ease-out;
}

@keyframes messageSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes messageSlideInRight {
    from {
        opacity: 0;
        transform: translateX(20px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .w-80 {
        width: 100%;
        position: fixed;
        z-index: 10;
        height: 100%;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }
    
    .sidebar-open {
        transform: translateX(0);
    }
    
    .max-w-xs {
        max-width: 70%;
    }
}

/* Focus states for better accessibility */
input:focus, textarea:focus, button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Button hover effects */
button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

button:active:not(:disabled) {
    transform: translateY(0);
}

/* Enhanced form styling */
input, textarea {
    transition: all 0.2s ease-in-out;
}

input:focus, textarea:focus {
    transform: scale(1.01);
}

/* Profile avatar styling */
.w-8.h-8.rounded-full {
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease-in-out;
}

/* Setup modal enhancements */
.fixed.inset-0 {
    backdrop-filter: blur(4px);
}

/* Progress bar animation */
.w-1\/4.h-2 {
    transition: all 0.3s ease-in-out;
}

/* Chat area improvements */
.space-y-4 > * + * {
    margin-top: 1rem;
}

/* Message timestamp styling */
.message-bubble:hover .text-xs.opacity-75 {
    opacity: 100;
}

/* Typing indicator enhancement */
.animate-bounce:nth-child(1) {
    animation-delay: 0s;
}

.animate-bounce:nth-child(2) {
    animation-delay: 0.1s;
}

.animate-bounce:nth-child(3) {
    animation-delay: 0.2s;
}

/* Improved scrollbar for webkit browsers */
.overflow-y-auto::-webkit-scrollbar-thumb:active {
    background: #718096;
}

/* Dark mode support with high contrast */
@media (prefers-color-scheme: dark) {
    :root {
        --text-dark: #f9fafb;
        --text-light: #1f2937;
        --bg-light: #374151;
        --bg-gray: #1f2937;
        --border-light: #4b5563;
    }
    
    .bg-gray-100 {
        background-color: var(--bg-gray) !important;
    }
    
    .ai-message {
        background-color: #4b5563 !important;
        color: #f9fafb !important;
    }
    
    .border {
        border-color: var(--border-light) !important;
    }
}

/* Ensure all text is visible with fallbacks */
* {
    text-shadow: none;
}

/* Force visibility for critical elements */
.message-text, .text-xs, .font-semibold, .font-bold {
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .animate-bounce, .message-bubble {
        animation: none;
    }
    
    .transition-colors, .transition-all {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .user-message {
        background: #0000ff !important;
        color: #ffffff !important;
        border: 2px solid #ffffff !important;
    }
    
    .ai-message {
        background: #ffffff !important;
        color: #000000 !important;
        border: 2px solid #000000 !important;
    }
    
    input, textarea {
        border: 2px solid #000000 !important;
        background: #ffffff !important;
        color: #000000 !important;
    }
}