/* ==========================================================================
   Chatbot widget — scripted bulk-order enquiry assistant (see chatbot.js).
   Anchored to the bottom-right corner; #backToTop (common.css) stacks
   directly above it at the same right offset, never side-by-side, so the
   two can never collide at any viewport width.
   ========================================================================== */

.chatbot__toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--color-maroon);
    color: var(--color-gold-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: var(--shadow-strong);
    z-index: 2200;
    transition: transform var(--transition-base), background var(--transition-base);
}

.chatbot__toggle:hover { background: var(--color-burgundy); transform: scale(1.06); }
.chatbot__toggle.is-open { transform: scale(0.94); }

.chatbot__toggle__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-gold);
    border: 2px solid var(--color-ivory);
    animation: chatbot-badge-pulse 2s infinite;
}

@keyframes chatbot-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 75, 0.55); }
    50% { box-shadow: 0 0 0 5px rgba(201, 162, 75, 0); }
}

.chatbot__panel {
    position: fixed;
    bottom: 98px;
    right: 24px;
    width: 340px;
    max-width: calc(100vw - 32px);
    height: 480px;
    max-height: calc(100vh - 140px);
    background: var(--color-ivory);
    border-radius: 14px;
    box-shadow: var(--shadow-strong);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 2200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.97);
    transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base);
}

.chatbot__panel.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.chatbot__header {
    background: var(--color-maroon);
    color: var(--color-ivory);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.chatbot__header strong { display: block; font-size: 14.5px; font-family: var(--font-display); letter-spacing: 0.02em; }
.chatbot__header span { display: block; font-size: 11.5px; color: var(--color-gold-light); margin-top: 2px; }

.chatbot__close {
    background: none;
    border: none;
    color: var(--color-ivory);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}
.chatbot__close:hover { color: var(--color-gold-light); }

.chatbot__messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chatbot__msg {
    max-width: 84%;
    padding: 9px 13px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
}

.chatbot__msg--bot {
    align-self: flex-start;
    background: var(--color-cream);
    color: var(--color-text);
    border-bottom-left-radius: 3px;
}

.chatbot__msg--user {
    align-self: flex-end;
    background: var(--color-maroon);
    color: var(--color-ivory);
    border-bottom-right-radius: 3px;
}

.chatbot__typing {
    align-self: flex-start;
    display: flex;
    gap: 4px;
    padding: 10px 13px;
    background: var(--color-cream);
    border-radius: 12px;
    border-bottom-left-radius: 3px;
}
.chatbot__typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-text-muted);
    animation: chatbot-typing 1s infinite ease-in-out;
}
.chatbot__typing span:nth-child(2) { animation-delay: 0.15s; }
.chatbot__typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes chatbot-typing {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

.chatbot__footer {
    flex-shrink: 0;
    padding: 12px 14px;
    border-top: 1px solid var(--color-border);
    background: var(--color-white);
}

.chatbot__quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chatbot__quick-reply {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-maroon);
    background: transparent;
    color: var(--color-maroon);
    font-size: 12.5px;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}
.chatbot__quick-reply:hover { background: var(--color-maroon); color: var(--color-ivory); }

.chatbot__form { display: flex; flex-direction: column; gap: 8px; }
.chatbot__form input {
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
}
.chatbot__form input:focus { outline: none; border-color: var(--color-maroon); }
.chatbot__form-error { color: var(--color-burgundy); font-size: 11.5px; }

.chatbot__submit {
    align-self: flex-end;
    padding: 8px 18px;
    border-radius: 6px;
    border: none;
    background: var(--color-maroon);
    color: var(--color-ivory);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-base);
}
.chatbot__submit:hover { background: var(--color-burgundy); }
.chatbot__submit:disabled { opacity: 0.6; cursor: default; }

.chatbot__restart {
    display: block;
    margin: 0 auto;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 12px;
    cursor: pointer;
}
.chatbot__restart:hover { border-color: var(--color-maroon); color: var(--color-maroon); }

@media (max-width: 480px) {
    .chatbot__toggle { right: 20px; bottom: 20px; }
    /* .back-to-top lives in common.css but is repositioned here too, so it
       stays stacked above the chatbot toggle (not overlapping it) at this
       narrower corner offset. */
    .back-to-top { right: 20px; bottom: 88px; }
    .chatbot__panel {
        right: 12px;
        left: 12px;
        width: auto;
        bottom: 90px;
        height: min(520px, calc(100vh - 120px));
    }
}