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

/* Ensure the chat container is a flex column */
#chat-container {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Space between messages */
}

/* Add a subtle scrollbar for the chat area */
#chat-container::-webkit-scrollbar {
    width: 8px;
}

#chat-container::-webkit-scrollbar-track {
    background: #1f2937; /* bg-gray-800 */
}

#chat-container::-webkit-scrollbar-thumb {
    background: #4b5563; /* bg-gray-600 */
    border-radius: 4px;
}

/* Message container styling */
#chat-container .message-wrapper {
    display: flex;
    width: 100%;
    max-width: 48rem; /* Matches max-w-3xl */
    margin-left: auto;
    margin-right: auto;
}

/* User message styling */
#chat-container .message-wrapper.user {
    justify-content: flex-end;
}

#chat-container .message-wrapper.user .user-message {
    margin-left: auto; /* Pushes user message to the right */
    max-width: 70%; /* Limits width for readability */
}

/* AI message styling */
#chat-container .message-wrapper.ai {
    justify-content: flex-start;
}

#chat-container .message-wrapper.ai .ai-message {
    margin-right: auto; /* Ensures AI message stays on the left */
    max-width: 70%; /* Limits width for readability */
}

/* Blinking cursor for streaming AI responses */
.blinking-cursor {
    font-weight: bold;
    animation: 1s blink step-end infinite;
}

@keyframes blink {
    from, to { color: transparent }
    50% { color: white; }
}

.custom-img-full-logo {
    max-width: 100% !important;
    width: auto;
    object-fit: contain;
}
header {
    max-width: 100vw; /* Prevent header overflow/stretch */
}
@media (min-width: 768px) {
    .custom-img-full-logo {
        height: 4rem !important;
        padding-left: 2rem !important;
    }
}

.gradient-text {
  background: linear-gradient(to right, #60a5fa, #22d3ee); /* blue-400 → cyan-400 */
  -webkit-background-clip: text;  /* Chrome, Safari */
  background-clip: text;           /* Firefox */
  color: transparent;
  -webkit-text-fill-color: transparent; /* for Safari compatibility */
}


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

.animate-spin {
  animation: spin 1s linear infinite;
}