/* ============================================================================= */
/*               RED & WHITE MOBILE-FIRST CHATBOT – ALL SIZES COMMENTED         */
/* ============================================================================= */
/* Replace "Send" text with arrow icon */
#chatbot-send {
    background: #e11d48;
    color: white;
    border: none;
    width: 46px;
    height: 46px;
    border-radius: 10%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0;               /* hides any leftover text */
}

#chatbot-send svg {
    width: 22px;
    height: 22px;
}
#chatbot-bubble {
    position: fixed;
    bottom: 15px;              /* Distance from bottom of screen */
    right: 15px;               /* Distance from right edge */
    width: 50px;               /* ← Bubble size (change to 50px for smaller) */
    height: 50px;              /* ← Same as width */
    background: #e11d48;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(225,29,72,0.4);
    cursor: pointer;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

#chatbot-bubble:hover { transform: scale(1.1); }
#chatbot-bubble svg { width: 32px; height: 32px; fill: white; }

/* ——————————————————— MAIN CHAT WINDOW SIZE ——————————————————— */
#chatbot-container {
    position: fixed;
    bottom: 80px;              /* Space above the bubble – reduce if you make window smaller */
    right: 15px;
    left: 15px;                /* Makes it stretch nicely on mobile */
    margin: 0 auto;

    /* MOBILE SIZE */
    width: 72vw;               /* ← 92% of phone screen width (perfect on iPhone/Android) */
    max-width: 380px;          /* ← Never wider than 380px on big screens */
    height: 78vh;              /* ← 78% of phone screen height – feels natural */
    max-height: 560px;         /* ← Max height on desktop/tablet */

    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    z-index: 9999;
    display: none;
    flex-direction: column;
    overflow: hidden;
    font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    border: 3px solid #e11d48;
}

/* DESKTOP & TABLET – Slightly smaller & fixed size */
@media (min-width: 568px) {
    #chatbot-container {
        width: 360px;          /* ← Desktop width (change to 320px for smaller) */
        height: 520px;         /* ← Desktop height (change to 480px for smaller) */
        bottom: 62px;          /* Keep space above bubble */
        left: auto;            /* Stop full-width stretching */
    }
}

/* Header */
#chatbot-header {
    background: #e11d48;
    color: white;
    padding: 14px 16px;
    font-weight: 600;
    font-size: 18px;
    position: relative;
}
#chatbot-close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 28px; cursor: pointer; }

/* Messages */
#chatbot-messages { flex: 1; padding: 16px; overflow-y: auto; background: #fffafa; }
.message { margin: 10px 0; padding: 10px 14px; border-radius: 18px; max-width: 82%; line-height: 1.45; font-size: 15px; word-wrap: break-word; }
.user-message { background: #e11d48; color: white; margin-left: auto; border-bottom-right-radius: 4px; }
.bot-message { background: #f1f1f1; color: #333; margin-right: auto; border-bottom-left-radius: 4px; }

/* Input */
#chatbot-input-area { padding: 12px; background: white; border-top: 1px solid #eee; display: flex; gap: 10px; }
#chatbot-input { flex: 1; padding: 12px 16px; border: 2px solid #ddd; border-radius: 25px; outline: none; font-size: 15px; }
#chatbot-input:focus { border-color: #e11d48; }
#chatbot-send { background: #e11d48; color: white; border: none; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 19px; flex-shrink: 0; }