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

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

:root {
    --fromX: 0px;
    --fromY: 0px;
}

/* HIỆU ỨNG NỀN */
@keyframes aurora-effect {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.animate-aurora {
    /* Sử dụng các màu pastel*/
    background: linear-gradient(-45deg, #ffdde1, #ffecd2, #fecfef, #ffc3a0);
    background-size: 400% 400%;
    animation: aurora-effect 20s ease infinite;
}

/* Hiệu ứng Spotlight */
.spotlight-effect::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 90%);
    pointer-events: none;
}

/* Hiệu ứng nút "Bắt đầu Trò chuyện" */
.animated-gradient-button {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #ff6f00, #ffc107, #ff6f00);
    background-size: 200% 100%;
    animation: button-gradient 4s linear infinite;
}
@keyframes button-gradient {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.animated-gradient-button::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.4) 50%, transparent 75%);
    transition: left 0.8s ease;
}
.animated-gradient-button:hover::before {
    left: 100%;
}

/* Hiệu ứng popup kiểu macOS */
.modal {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal.open {
    opacity: 1;
    pointer-events: auto;
}
.modal-content {
    position: fixed; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    display: none;
}
.modal.open .modal-content {
    display: flex;
    animation: appOpen 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.modal.closing .modal-content {
    display: flex;
    animation: appClose 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
}

@keyframes appOpen {
    0% { transform: translate(calc(-50% + var(--fromX)), calc(-50% + var(--fromY))) scale(.3); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes appClose {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--fromX)), calc(-50% + var(--fromY))) scale(.3); opacity: 0; }
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 3px; }

/* ĐỊNH DẠNG CHO NỘI DUNG CHATBOT (MARKDOWN)*/
.prose {
    color: #E5E7EB; 
}
.prose h1, .prose h2, .prose h3, .prose h4 { color: white; }
.prose strong { color: white; font-weight: 600; }
.prose ul { list-style-type: disc; padding-left: 1.5rem; margin-top: 0.5rem; margin-bottom: 0.5rem; }
.prose ul li { margin-top: 0.25rem; }
.prose a { color: #FBBF24; text-decoration: underline; }
.prose a:hover { color: #F59E0B; }
.prose p { margin: 0; }

/* HIỆU ỨNG HIỂN THỊ TIN NHẮN MỚI*/
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}
.message-enter-active {
  animation: fadeInUp 0.5s ease-out forwards;
}

/* Hiệu ứng text gradient động */
.animated-text-gradient {
    background: linear-gradient(90deg, #ffc107, #ff8c00, #ffc107);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    animation: text-gradient-animation 3s linear infinite;
    display: inline-block; /* Quan trọng để gradient hiển thị trên text */
    font-weight: 500; /* Làm chữ đậm hơn một chút để nổi bật */
}

@keyframes text-gradient-animation {
    0% { background-position: 200% 0%; }
    100% { background-position: -200% 0%; }
}