html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
.animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


.suggestion-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: #4B5563;
    padding: 0.5rem 1rem;
    background-color: #F9FAFB;
}

.suggestion-item {
    display: block;
    padding: 0.5rem 1rem;
    color: #111827;
    text-decoration: none;
}

    .suggestion-item:hover {
        background-color: #F3F4F6;
    }

.search-input:focus {
    outline: 2px solid #2563EB;
}
/* Add to your main CSS file if needed */
.chat-message {
    display: flex;
    max-width: 85%;
}

    .chat-message.user {
        margin-left: auto;
        flex-direction: row-reverse;
    }

    .chat-message.bot {
        margin-right: auto;
    }

.message-content {
    padding: 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.chat-message.user .message-content {
    background-color: #3B82F6; /* bg-blue-600 */
    color: white;
}

.chat-message.bot .message-content {
    background-color: #F3F4F6; /* bg-gray-100 */
    color: #1F2937; /* text-gray-800 */
}

.chat-action-btn {
    padding: 0.5rem 1rem;
    background-color: #F3F4F6; /* bg-gray-100 */
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
    transition: background-color 0.2s;
}

    .chat-action-btn:hover {
        background-color: #E5E7EB; /* bg-gray-200 */
    }
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out both;
}
