/* Custom styles for SweetBumpJourney application */

/* Sidebar Navigation Styles */
.sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
}

.sidebar.open {
    transform: translateX(0);
}

.sidebar-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

.sidebar-item {
    @apply flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 hover:text-gray-900 transition-colors duration-200 border-l-4 border-transparent hover:border-peach;
}

.sidebar-item.active {
    @apply bg-peach-light text-gray-900 border-peach;
}

.nav-btn {
    @apply flex flex-col items-center justify-center p-3 rounded-xl transition-all duration-200 hover:bg-gray-100;
}

.nav-btn.active {
    @apply bg-peach text-gray-800 shadow-md;
}

.page {
    @apply hidden;
}

.page.active {
    @apply block;
}

.growth-tab {
    @apply transition-all duration-200;
}

.growth-tab.active {
    @apply bg-white shadow-md text-gray-800;
}

.growth-content {
    @apply hidden;
}

.growth-content.active {
    @apply block;
}

.wellness-tab {
    @apply transition-all duration-200;
}

.wellness-tab.active {
    @apply bg-white shadow-md text-gray-800;
}

.wellness-content {
    @apply hidden;
}

.wellness-content.active {
    @apply block;
}

.family-role-btn {
    @apply transition-all duration-200 transform hover:scale-105;
}

.mood-btn {
    @apply transition-all duration-200 transform hover:scale-110;
}

/* Smooth scrolling for chat area */
#chatArea {
    scroll-behavior: smooth;
}

/* Custom scrollbar for webkit browsers */
#chatArea::-webkit-scrollbar {
    width: 6px;
}

#chatArea::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#chatArea::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

#chatArea::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Animation for new entries */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

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

/* Success animation */
.success-pulse {
    animation: successPulse 0.6s ease-in-out;
}

@keyframes successPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
    }
    100% {
        transform: scale(1);
    }
}

/* Responsive design enhancements */
@media (max-width: 640px) {
    .nav-btn span {
        font-size: 10px;
    }
    
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}