/* Chatbot Widget Styles */
.chatbot-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    font-family: 'Inter', sans-serif;
}

/* Chat Bubble */
.chat-bubble {
    background-color: #667eea;
    /* Brand Primary */
    color: white;
    padding: 12px 20px;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.chat-bubble:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.chat-avatar-bubble {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-text {
    font-weight: 500;
    font-size: 0.95rem;
}

/* Chat Window */
.chat-window {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 350px;
    height: 500px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.3s, transform 0.3s;
    border: 1px solid #e2e8f0;
}

.chat-window.hidden {
    display: none;
    opacity: 0;
    transform: translateY(20px);
}

/* Header */
.chat-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-avatar-sm {
    background: rgba(255, 255, 255, 0.2);
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.chat-subtitle {
    margin: 0;
    font-size: 0.75rem;
    opacity: 0.9;
}

.chat-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.8;
}

.chat-close:hover {
    opacity: 1;
}

/* Messages Area */
.chat-messages {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    background-color: #f7fafc;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.message {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.4;
    word-wrap: break-word;
}

.bot-message {
    align-self: flex-start;
    background-color: white;
    border: 1px solid #e2e8f0;
    color: #2d3748;
    border-bottom-left-radius: 4px;
}

.user-message {
    align-self: flex-end;
    background-color: #667eea;
    color: white;
    border-bottom-right-radius: 4px;
}

/* Input Area */
.chat-input-area {
    padding: 12px;
    background: white;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 8px;
}

#chat-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    outline: none;
    transition: border-color 0.2s;
    font-size: 0.9rem;
}

#chat-input:focus {
    border-color: #667eea;
}

.chat-send {
    background: #667eea;
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.chat-send:hover {
    background: #5a67d8;
}

/* Typing Indicator (Optional for later) */
.typing-dots {
    display: flex;
    gap: 4px;
    padding: 4px;
}

.typing-dot {
    width: 6px;
    height: 6px;
    background: #a0aec0;
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(1) {
    animation-delay: 0s;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

/* Mobile Responsive — collapse the bubble to a circular icon-only button so
   it doesn't overlap page content. The full pill ("Need help? Ask Ava") was
   covering pricing cards, privacy bullets, and the timeline on small screens.
   On tap, the chat window expands to half-height like before. */
@media (max-width: 768px) {
    .chat-bubble {
        padding: 0;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        justify-content: center;
        gap: 0;
    }

    .chat-bubble .chat-text {
        display: none;
    }
}

@media (max-width: 480px) {
    .chat-window {
        position: fixed;
        bottom: 20px;
        right: 5%;
        left: 5%;
        top: auto;
        width: 90%;
        height: 50vh;
        /* Half screen on mobile */
        border-radius: 12px;
        z-index: 2000;
        margin: 0;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    }

    .chatbot-widget {
        bottom: 12px;
        right: 12px;
    }
}