/* ==========================================================================
   Chatbot Interface Styles (CIIC)
   ========================================================================== */

.chat-section-container {
    padding-bottom: 100px;
    margin-top: -60px;
    position: relative;
    z-index: 10;
}

.chat-interface {
    max-width: 900px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(var(--primary-green-rgb), 0.15);
    border-radius: 32px;
    display: flex;
    flex-direction: column;
    height: 700px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    animation: slideUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.chat-header {
    padding: 24px 32px;
    background: var(--primary-green);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 16px;
}

.chat-avatar-container {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
}

.chat-avatar-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-title h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    letter-spacing: -0.02em;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--primary-green-rgb), 0.2) transparent;
    background: #fafafa;
}

.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-green-rgb), 0.15);
    border-radius: 10px;
}

.message {
    display: flex;
    gap: 14px;
    max-width: 85%;
    animation: messageEntry 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.bot-message {
    align-self: flex-start;
}

.user-message {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.message-bubble {
    padding: 18px 22px;
    border-radius: 20px;
    font-size: 0.98rem;
    line-height: 1.6;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.bot-message .message-bubble {
    background: #ffffff;
    color: #000000;
    border: 1px solid rgba(var(--primary-green-rgb), 0.1);
    border-bottom-left-radius: 4px;
}

.user-message .message-bubble {
    background: var(--primary-green);
    color: #ffffff;
    /* Typically user bubble can stay dark or change to white with black text if requested */
    border: 1px solid rgba(var(--primary-green-rgb), 0.1);
    border-bottom-right-radius: 4px;
}

/* Since user specifically said "important that text color is black", let's apply it EVEN to user bubbles if they meant all bubbles, but usually it refers to bot or general reading. Let's make user bubble light too. */
.user-message .message-bubble {
    background: #e3f2fd;
    color: #000000;
    border: 1px solid rgba(13, 169, 255, 0.15);
}

.chat-suggestions {
    padding: 10px 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: #fafafa;
    max-height: 75px;
    /* Limit height to prevent blocking messages */
    overflow-y: auto;
    /* Enable vertical scrolling */
    flex-shrink: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--primary-green-rgb), 0.2) transparent;
}

.chat-suggestions::-webkit-scrollbar {
    width: 5px;
}

.chat-suggestions::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-green-rgb), 0.15);
    border-radius: 10px;
}

.suggestion-pill {
    background: #ffffff;
    border: 1px solid #e1e4e8;
    color: #333;
    padding: 10px 18px;
    border-radius: 100px;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.suggestion-pill:hover {
    background: #f0fdf4;
    border-color: var(--primary-green);
    color: var(--primary-green);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-green-rgb), 0.1);
}

.chat-input-area {
    padding: 24px 32px 32px;
    display: flex;
    gap: 16px;
    background: #ffffff;
    border-top: 1px solid #f0f0f0;
}

.chat-input-wrapper {
    flex: 1;
    position: relative;
}

.chat-input {
    width: 100%;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    padding: 16px 24px;
    color: #1a1a1a;
    font-size: 0.98rem;
    outline: none;
    transition: all 0.3s ease;
}

.chat-input:focus {
    background: #ffffff;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 4px rgba(var(--primary-green-rgb), 0.08);
}

.send-btn {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--primary-green);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    padding: 0;
    min-width: 54px;
    box-shadow: 0 4px 12px rgba(var(--primary-green-rgb), 0.2);
}

.send-btn:hover {
    background: var(--primary-green-hover);
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(var(--primary-green-rgb), 0.3);
}

.send-btn svg {
    width: 24px;
    height: 24px;
}

.typing-indicator {
    display: flex;
    gap: 6px;
    padding: 16px 20px;
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 18px;
    align-self: flex-start;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.typing-dot {
    width: 8px;
    height: 8px;
    background: var(--primary-green);
    border-radius: 50%;
    animation: typingPulse 1.4s infinite ease-in-out;
}

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

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

@keyframes typingPulse {

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

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

@keyframes messageEntry {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   RESPONSIVE STYLES FOR CHATBOT
   ========================================= */

@media (max-width: 768px) {
    .chat-section-container {
        padding-bottom: 60px;
        margin-top: -40px;
    }

    .chat-interface {
        height: 600px;
        border-radius: 24px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    .chat-header {
        padding: 20px 24px;
    }

    .chat-avatar-container {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .chat-title h3 {
        font-size: 1.1rem;
    }

    .chat-messages {
        padding: 24px 20px;
        gap: 20px;
    }

    .message-bubble {
        padding: 16px 18px;
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .message {
        max-width: 90%;
    }

    .chat-suggestions {
        padding: 8px 20px;
        gap: 8px;
        max-height: 70px;
    }

    .suggestion-pill {
        padding: 9px 16px;
        font-size: 0.85rem;
    }

    .chat-input-area {
        padding: 20px 24px 24px;
    }

    .chat-input {
        padding: 14px 20px;
        font-size: 0.95rem;
        border-radius: 14px;
    }

    .send-btn {
        width: 50px;
        height: 50px;
        border-radius: 14px;
        min-width: 50px;
    }

    .send-btn svg {
        width: 22px;
        height: 22px;
    }

    .typing-indicator {
        padding: 14px 18px;
    }

    .typing-dot {
        width: 7px;
        height: 7px;
    }
}

@media (max-width: 425px) {
    .chat-section-container {
        margin-top: -30px;
    }

    .chat-interface {
        height: 500px;
        border-radius: 20px;
    }

    .chat-header {
        padding: 16px 20px;
    }

    .chat-avatar-container {
        width: 38px;
        height: 38px;
    }

    .chat-title h3 {
        font-size: 1rem;
    }

    .chat-messages {
        padding: 20px 16px;
        gap: 18px;
    }

    .message-bubble {
        padding: 14px 16px;
        font-size: 0.9rem;
    }

    .suggestion-pill {
        padding: 8px 14px;
        font-size: 0.8rem;
    }

    .chat-input-area {
        padding: 16px 20px 20px;
    }

    .chat-input {
        padding: 12px 18px;
        font-size: 0.9rem;
    }

    .send-btn {
        width: 46px;
        height: 46px;
        min-width: 46px;
    }

    .send-btn svg {
        width: 20px;
        height: 20px;
    }
}