/* 
  Hadeeda Glassmorphism Styles 
  Overrides for @n8n/chat widget 
*/

/* The Main Chat Window container */
.n8n-chat-window,
.n8n-chat-widget {
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    background-color: rgba(20, 20, 20, 0.65) !important;
    /* Dark Glass */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
    border-radius: 16px !important;
    font-family: 'Inter', sans-serif !important;
}

/* Header */
.n8n-chat-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.n8n-chat-header-title {
    color: #fff !important;
    font-weight: 600 !important;
}

/* Messages Area */
.n8n-chat-messages {
    background: transparent !important;
}

/* User Message */
.n8n-chat-message-user {
    background: linear-gradient(135deg, #2F6B4F 0%, #1e4d38 100%) !important;
    /* Magala Earth Green Gradient */
    color: white !important;
    border-radius: 12px 12px 0 12px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* AI Message */
.n8n-chat-message-bot {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #e0e0e0 !important;
    border-radius: 12px 12px 12px 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Input Area */
.n8n-chat-input-container {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.n8n-chat-input {
    background: rgba(0, 0, 0, 0.2) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
}

.n8n-chat-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Send Button */
.n8n-chat-send-button {
    background-color: #2F6B4F !important;
    color: white !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}