/* Custom CSS for School Matcher */

/* Base styles */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #FF7728;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #e55a2b;
}

/* Chat-specific scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #6b7280;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

/* Chat message styling - ensure proper colors */
/* User messages should NOT be orange - using a neutral color instead */
#chat-messages .bg-\[#FF7728\],
#chat-messages .user-message {
    background-color: #6b7280 !important; /* Changed from orange to gray */
}

#chat-messages .bg-\[#FF7728\] p,
#chat-messages .user-message p {
    color: white !important;
}

/* Ensure AI messages have consistent styling */
#chat-messages .bg-white.border.border-gray-200,
#chat-messages .ai-message {
    background-color: white !important;
    border-color: #e5e7eb !important;
}

#chat-messages .bg-white.border.border-gray-200 p,
#chat-messages .bg-white.border.border-gray-200 div,
#chat-messages .ai-message p,
#chat-messages .ai-message div {
    color: #1f2937 !important;
}

/* Ensure consistent typography for all AI messages */
#chat-messages .bg-white.border.border-gray-200 div,
#chat-messages .ai-message div {
    font-size: 1rem !important; /* text-base */
    line-height: 1.625 !important; /* leading-relaxed */
    font-weight: 400 !important; /* normal weight */
}

/* Ensure consistent spacing and sizing */
#chat-messages .bg-white.border.border-gray-200 {
    padding: 1rem 1.25rem !important; /* px-5 py-4 */
    max-width: 20rem !important; /* max-w-xs */
}

@media (min-width: 1024px) {
    #chat-messages .bg-white.border.border-gray-200 {
        max-width: 28rem !important; /* lg:max-w-md */
    }
}

/* Additional specificity for user messages - using gray instead of orange */
#chat-messages div[class*="bg-[#FF7728]"] {
    background-color: #6b7280 !important; /* Changed from orange to gray */
}

#chat-messages div[class*="bg-[#FF7728]"] p {
    color: white !important;
}

/* Gradient backgrounds */
.gradient-hero {
    background: linear-gradient(135deg, #F4F0E8 0%, #ffffff 50%, #F4F0E8 100%);
}

.gradient-feature {
    background: linear-gradient(135deg, #FF7728 0%, #e55a2b 100%);
}

/* Button animations */
.btn-modern {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-modern:hover::before {
    left: 100%;
}

.btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Card hover effects */
.card-hover-modern {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover-modern:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Text gradients */
.text-gradient {
    background: linear-gradient(135deg, #FF7728 0%, #e55a2b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Backdrop blur effects */
.backdrop-blur-modern {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Organic blob shapes */
.blob {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: blob 7s infinite;
}

.blob-2 {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: blob 7s infinite reverse;
}

.blob-3 {
    border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
    animation: blob 7s infinite;
}

@keyframes blob {
    0% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
    25% {
        border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
    }
    50% {
        border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
    }
    75% {
        border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
    }
    100% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
}

/* Animation classes */
.animate-fade-in {
    animation: fadeIn 0.6s ease-out;
}

.animate-slide-in {
    animation: slideIn 0.6s ease-out;
}

.animate-bounce {
    animation: bounce 1s infinite;
}

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

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

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Typing indicator */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background: #f3f4f6;
    border-radius: 20px;
    width: fit-content;
}

.typing-dot {
    width: 8px;
    height: 8px;
    background: #9ca3af;
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out;
}

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

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

@keyframes typing {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Chat message bubbles */
.message-bubble {
    max-width: 80%;
    word-wrap: break-word;
    animation: fadeIn 0.3s ease-out;
}

/* Suggestion buttons */
.suggestion-btn {
    background: #FF7728;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 4px;
    display: inline-block;
}

.suggestion-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 119, 40, 0.3);
}

/* School cards */
.school-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.school-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Voice button */
.voice-btn {
    background: #8D8C86;
    color: white;
    border: none;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.voice-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(141, 140, 134, 0.4);
}

/* Message input */
.message-input {
    border: 2px solid #e5e7eb;
    border-radius: 25px;
    padding: 12px 20px;
    transition: all 0.3s ease;
    resize: none;
}

.message-input:focus {
    outline: none;
    border-color: #FF7728;
    box-shadow: 0 0 0 3px rgba(255, 119, 40, 0.1);
}

/* Send button */
.send-btn {
    background: #FF7728;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.send-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 119, 40, 0.3);
}

/* Chat message formatting */
.chat-message-content {
    line-height: 1.6;
    word-wrap: break-word;
}

.chat-message-content strong {
    font-weight: 600;
    color: inherit;
}

.chat-message-content em {
    font-style: italic;
    color: inherit;
}

.chat-message-content ul {
    list-style-type: disc;
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.chat-message-content ol {
    list-style-type: decimal;
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.chat-message-content li {
    margin: 0.25rem 0;
    line-height: 1.5;
}

.chat-message-content br {
    margin: 0.25rem 0;
}

/* Prose styling for AI messages */
.prose {
    color: inherit;
}

.prose strong {
    font-weight: 600;
}

.prose em {
    font-style: italic;
}

.prose ul {
    list-style-type: disc;
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.prose ol {
    list-style-type: decimal;
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.prose li {
    margin: 0.25rem 0;
    line-height: 1.5;
}

.prose br {
    margin: 0.25rem 0;
}

/* Professional hover effects */
.hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* Organic shapes for backgrounds */
.organic-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    animation: float 6s ease-in-out infinite;
}

.organic-shape:nth-child(2) {
    animation-delay: -2s;
}

.organic-shape:nth-child(3) {
    animation-delay: -4s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    33% {
        transform: translateY(-20px) rotate(120deg);
    }
    66% {
        transform: translateY(-10px) rotate(240deg);
    }
}

/* Professional color scheme utilities */
.bg-primary-gradient {
    background: linear-gradient(135deg, #FF7728, #e55a2b);
}

.bg-secondary-gradient {
    background: linear-gradient(135deg, #8D8C86, #6b6a65);
}

.bg-light-gradient {
    background: linear-gradient(135deg, #FFFFFD, #f5f5f0);
}

/* Text color utilities */
.text-primary {
    color: #FF7728;
}

.text-secondary {
    color: #8D8C86;
}

.text-light {
    color: #FFFFFD;
}

.text-dark {
    color: #3D2F3F;
}

.text-background {
    color: #F4F0E8;
}

/* Border utilities */
.border-primary {
    border-color: #FF7728;
}

.border-secondary {
    border-color: #8D8C86;
}

.border-light {
    border-color: #FFFFFD;
}

/* Shadow utilities */
.shadow-primary {
    box-shadow: 0 4px 14px rgba(255, 119, 40, 0.25);
}

.shadow-secondary {
    box-shadow: 0 4px 14px rgba(141, 140, 134, 0.25);
}

.shadow-light {
    box-shadow: 0 4px 14px rgba(255, 255, 253, 0.25);
}

/* Responsive design improvements */
@media (max-width: 768px) {
    .blob {
        animation: none;
    }
    
    .organic-shape {
        display: none;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .animate-fade-in,
    .animate-slide-in,
    .animate-bounce,
    .blob,
    .organic-shape {
        animation: none;
    }
    
    .btn-modern:hover,
    .card-hover-modern:hover,
    .suggestion-btn:hover,
    .voice-btn:hover,
    .send-btn:hover,
    .hover-lift:hover {
        transform: none;
    }
} 

/* Filter tag styling (plain CSS, since CDN Tailwind can't process @apply) */
.filter-tag {
    padding: 0.5rem 1rem; /* px-4 py-2 */
    background: rgba(255, 255, 255, 0.2); /* bg-white/20 */
    color: #ffffff; /* text-white */
    border-radius: 9999px; /* rounded-full */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    transition: all 150ms ease; /* transition-all */
    white-space: nowrap; /* whitespace-nowrap */
    display: inline-flex; /* flex */
    align-items: center; /* items-center */
    gap: 0.25rem; /* gap-1 */
}
.filter-tag:hover {
    background: rgba(255, 255, 255, 0.3); /* hover:bg-white/30 */
}
.filter-tag i {
    width: 1rem; /* w-4 */
    height: 1rem; /* h-4 */
}

/* Primary button */
.btn-primary {
    padding: 1rem 2rem; /* px-8 py-4 */
    background: #16a34a; /* muted green (tailwind green-600) */
    color: #ffffff; /* text-white */
    font-weight: 600; /* font-semibold */
    border-radius: 0.75rem; /* rounded-xl */
    transition: all 150ms ease; /* transition-all */
    display: inline-flex; /* flex */
    align-items: center; /* items-center */
    justify-content: center; /* justify-center */
    gap: 0.5rem; /* gap-2 */
    font-size: 1.125rem; /* text-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.25); /* slightly softer */
}
.btn-primary:hover {
    background: #15803d; /* darker green (tailwind green-700) */
    box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.3);
}

/* Secondary button matching primary style, with secondary color */
.btn-secondary {
    padding: 1rem 2rem; /* px-8 py-4 */
    background: #8D8C86; /* secondary */
    color: #ffffff; /* text-white */
    font-weight: 600; /* font-semibold */
    border-radius: 0.75rem; /* rounded-xl */
    transition: all 150ms ease; /* transition-all */
    display: inline-flex; /* flex */
    align-items: center; /* items-center */
    justify-content: center; /* justify-center */
    gap: 0.5rem; /* gap-2 */
    font-size: 1.125rem; /* text-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}
.btn-secondary:hover {
    background: #6b6a65; /* darker secondary */
    box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.28);
}

/* Hide scrollbar but keep functionality */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}