/* Custom styles for the glassmorphism effect and overall vibe */
body {
font-family: 'Inter', sans-serif;
background-color: #111111;
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
background-size: 20px 20px;
}

/* The main glass UI component style */
.glass-ui {
background: rgba(26, 26, 26, 0.7); /* Semi-transparent background */
backdrop-filter: blur(20px); /* The magic blur effect */
-webkit-backdrop-filter: blur(20px); /* For Safari */
border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Custom scrollbar for a sleeker look */
#chat-container::-webkit-scrollbar, #canvas-code-display::-webkit-scrollbar {
width: 6px;
}
#chat-container::-webkit-scrollbar-track, #canvas-code-display::-webkit-scrollbar-track {
background: transparent;
}
#chat-container::-webkit-scrollbar-thumb, #canvas-code-display::-webkit-scrollbar-thumb {
background: rgba(236, 72, 153, 0.5); /* Pink scrollbar */
border-radius: 3px;
}
#chat-container::-webkit-scrollbar-thumb:hover, #canvas-code-display::-webkit-scrollbar-thumb:hover {
background: rgba(236, 72, 153, 0.8);
}

/* Styles for the Canvas Modal */
#canvas-modal-container {
transition: opacity 0.3s ease-in-out;
}
#canvas-modal {
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#canvas-code-display {
    font-family: 'Fira Code', monospace;
}

.CodeMirror {
    height: 100%;
    font-family: 'Fira Code', monospace;
    background: transparent;
    color: inherit;
}

/* Animation for messages appearing */
.message-pop-in {
animation: popIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes popIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }

/* Typing indicator animation */
.dot-flashing { position: relative; width: 10px; height: 10px; border-radius: 5px; background-color: #f871b2; color: #f871b2; animation: dotFlashing 1s infinite linear alternate; animation-delay: .5s; }
.dot-flashing::before, .dot-flashing::after { content: ''; display: inline-block; position: absolute; top: 0; }
.dot-flashing::before { left: -15px; width: 10px; height: 10px; border-radius: 5px; background-color: #f871b2; color: #f871b2; animation: dotFlashing 1s infinite alternate; animation-delay: 0s; }
.dot-flashing::after { left: 15px; width: 10px; height: 10px; border-radius: 5px; background-color: #f871b2; color: #f871b2; animation: dotFlashing 1s infinite alternate; animation-delay: 1s; }
@keyframes dotFlashing { 0% { background-color: #f871b2; } 50%, 100% { background-color: rgba(248, 113, 178, 0.3); } }

/* Toast Notification Style */
#toast { transition: opacity 0.3s, transform 0.3s; }