:root {
    --sidebar-width: 240px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Assistant', sans-serif;
    background-color: #f5f3ff; /* Lighter, solid purple background */
}

.emoji {
    width: 1em;
    height: 1em;
    margin: 0.05em 0.1em;
    vertical-align: -0.1em;
}

/* Style for the scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1effe;
}
::-webkit-scrollbar-thumb {
    background: #dcd2fd;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #c4b5fd;
}

/* Animations */
@keyframes fadeInOut {
    0%, 100% { opacity: 0; transform: translateY(20px); }
    10%, 90% { opacity: 1; transform: translateY(0); }
}
.toast-animation {
    animation: fadeInOut 3s ease-in-out forwards;
}
#copyNotification {
    z-index: 100; /* Ensure it's above the modal backdrop */
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.modal-animation {
    animation: modalFadeIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

/* Input wrappers */
.input-wrapper {
    position: relative;
}
.input-wrapper .lucide {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #a78bfa;
}
.input-wrapper input, .select-wrapper select {
    padding-left: 50px;
}
.select-wrapper {
    position: relative;
}
.select-wrapper .lucide {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #a78bfa;
    pointer-events: none;
}

/* Sidebar styles */
#categorySidebar {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    height: calc(100vh - 2rem);
    top: 1rem;
    left: 1rem;
}

#sidebarIndicator {
    transition: top 0.2s ease-out, height 0.2s ease-out;
}

.sidebar-link.active {
    color: #7c3aed; /* a darker purple */
    font-weight: 700;
}

#categoryList {
    padding-left: 1rem; /* Add space for the indicator */
}

/* AI Chat Styles */
#chatHistory {
    max-height: 40vh;
}
.chat-bubble {
    max-width: 80%;
    padding: 0.75rem 1rem;
    border-radius: 1.25rem;
}
.user-bubble {
    background-color: #8b5cf6;
    color: white;
    border-bottom-right-radius: 0.25rem;
    align-self: flex-end;
}
.ai-bubble {
    background-color: #ede9fe;
    color: #5b21b6;
    border-bottom-left-radius: 0.25rem;
    align-self: flex-start;
}
.typing-indicator span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #a78bfa;
    animation: bounce 1.4s infinite ease-in-out both;
}
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

@media (min-width: 1024px) {
    #mainContent.sidebar-active {
        margin-left: calc(var(--sidebar-width) + 1rem);
    }
}