/* static/css/styles.css */

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

body {
    font-family: 'Inter', system-ui, sans-serif;
    background-color: #0f172a; /* slate-900 */
    color: #e2e8f0; /* slate-200 */
}

header {
    background: linear-gradient(to right, #1e293b, #0f172a);
    border-bottom: 1px solid #334155;
}

#messages {
    scrollbar-width: thin;
    scrollbar-color: #475569 #1e293b;
}

.message-bubble-user {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-radius: 20px 20px 4px 20px;
}

.message-bubble-bot {
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 20px 20px 20px 4px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

#input {
    background-color: #1e293b;
    border: 1px solid #334155;
    color: #e2e8f0;
}

#input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

.typing-dots {
    display: flex;
    gap: 6px;
}

.typing-dots div {
    width: 8px;
    height: 8px;
    background-color: #64748b;
    border-radius: 50%;
    animation: bounce 1.2s infinite;
}

.typing-dots div:nth-child(2) { animation-delay: 0.2s; }
.typing-dots div:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-8px); }
}

main {
  @apply shadow-2xl shadow-black/20;
  background: linear-gradient(to bottom, #0f172a, #020617);
  border-radius: 16px;
  overflow: hidden;
}


.hcaptcha {
  visibility: visible !important;
  opacity: 1 !important;
}