@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');

body {
    font-family: 'Noto Sans KR', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
}

/* Custom scrollbar for a cleaner look */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9; /* bg-slate-100 */
}
::-webkit-scrollbar-thumb {
  background: #94a3b8; /* bg-slate-400 */
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #64748b; /* bg-slate-500 */
}

/* Chat window styling */
#chat-window {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chat-message {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    animation: fadeIn 0.3s ease-in-out;
}

.chat-message p {
    padding: 0.75rem 1rem;
    border-radius: 1.25rem;
    line-height: 1.6;
}

.user-message {
    align-self: flex-end;
}
.user-message p {
    background-color: #3b82f6; /* bg-blue-600 */
    color: white;
    border-bottom-right-radius: 0.375rem;
}

.ai-message {
    align-self: flex-start;
}
.ai-message p {
    background-color: #f1f5f9; /* bg-slate-100 */
    color: #1e293b; /* text-slate-800 */
    border-bottom-left-radius: 0.375rem;
}

.ai-message .avatar {
    width: 2.5rem; /* w-10 */
    height: 2.5rem; /* h-10 */
    background-color: #dbeafe; /* bg-blue-100 */
    color: #2563eb; /* text-blue-600 */
    border-radius: 9999px; /* rounded-full */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

/* Progress Bar Transition */
#exp-progress-bar {
    transition: width 0.5s ease-in-out;
}

.ai-message .message-content {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 0.5rem;
}

/* Timestamp styling */
.message-timestamp {
    font-size: 0.75rem; /* text-xs */
    color: #64748b; /* text-slate-500 */
    margin-top: 0.25rem; /* mt-1 */
    text-align: right;
}

.user-message .message-timestamp {
    color: #e2e8f0; /* text-slate-200 for better contrast on blue background */
}

.ai-message .message-timestamp {
    color: #64748b; /* text-slate-500 */
    align-self: flex-start;
}

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