/* ============================================
   Chatbot Widget Styles
   ============================================ */

/* Chatbot Container */
.chatbot-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    font-family: "Hauora", ui-sans-serif, system-ui, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
}

/* WhatsApp Toggle Button */
.whatsapp-toggle {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #25D366;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.whatsapp-toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff 0%, #25D366 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.whatsapp-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 28px rgba(37, 211, 102, 0.5);
}

.whatsapp-toggle:hover::before {
    opacity: 0.2;
}

.whatsapp-toggle:active {
    transform: scale(0.95);
}

.whatsapp-icon {
    width: 32px;
    height: 32px;
    color: #ffffff;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}


/* Chatbot Toggle Button */
.chatbot-toggle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #EDA734 0%, #d4941f 100%);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(237, 167, 52, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.chatbot-toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff 0%, #EDA734 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.chatbot-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 32px rgba(237, 167, 52, 0.5);
}

.chatbot-toggle:hover::before {
    opacity: 0.2;
}

.chatbot-toggle:active {
    transform: scale(0.95);
}

.chatbot-icon,
.chatbot-close-icon {
    width: 28px;
    height: 28px;
    color: #ffffff;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.chatbot-close-icon {
    display: none;
}

.chatbot-toggle.active .chatbot-icon {
    display: none;
}

.chatbot-toggle.active .chatbot-close-icon {
    display: block;
}

/* Chatbot Window */
.chatbot-window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 400px;
    max-width: calc(100vw - 48px);
    height: 600px;
    max-height: calc(100vh - 120px);
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    display: none;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chatbot-window.active {
    display: flex;
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Chatbot Header */
.chatbot-header {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    padding: 20px;
    border-bottom: 2px solid #EDA734;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chatbot-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chatbot-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #EDA734 0%, #d4941f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chatbot-avatar svg {
    width: 24px;
    height: 24px;
    color: #ffffff;
}

.chatbot-header-text {
    flex: 1;
}

.chatbot-title {
    font-family: "Albra Display TRIAL", ui-serif, Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

.chatbot-subtitle {
    font-size: 13px;
    color: #EDA734;
    margin: 2px 0 0 0;
    line-height: 1.2;
}

.chatbot-header-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    margin-left: 8px;
    border-radius: 9999px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.chatbot-header-close svg {
    width: 20px;
    height: 20px;
}

.chatbot-header-close:hover {
    background-color: rgba(255, 255, 255, 0.08);
    transform: scale(1.05);
}

/* Messages Container */
.chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #f9fafb;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.chatbot-messages::-webkit-scrollbar-track {
    background: transparent;
}

.chatbot-messages::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.chatbot-messages::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Message Styles */
.chatbot-message {
    display: flex;
    gap: 8px;
    animation: messageSlideIn 0.3s ease-out;
    width: 100%;
}

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

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

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

.user-message {
    align-self: flex-end;
    justify-content: flex-end;
}

.message-content {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    min-width: 140px;
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    text-align: left;
}

.bot-message .message-content {
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    border-bottom-left-radius: 4px;
}

.bot-message .message-content p {
    margin: 0 0 8px 0;
}

.bot-message .message-content p:last-child {
    margin-bottom: 0;
}

.user-message .message-content {
    background: linear-gradient(135deg, #EDA734 0%, #d4941f 100%);
    color: #ffffff;
    border-bottom-right-radius: 4px;
    margin-left: auto;
}

/* Quick Reply Buttons */
.quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.quick-reply-btn {
    padding: 8px 16px;
    background: #ffffff;
    border: 2px solid #EDA734;
    border-radius: 20px;
    color: #EDA734;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-reply-btn:hover {
    background: #EDA734;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(237, 167, 52, 0.3);
}

.quick-reply-btn:active {
    transform: translateY(0);
}

/* Input Area */
.chatbot-input-area {
    padding: 16px 20px;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
}

.chatbot-input-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-direction: column;
}

.chatbot-input {
    flex: 1;
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 24px;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
    background: #f9fafb;
}

.chatbot-input:focus {
    border-color: #EDA734;
    background: #ffffff;
}

.chatbot-input::placeholder {
    color: #9ca3af;
}

.chatbot-send-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #EDA734 0%, #d4941f 100%);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.chatbot-send-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(237, 167, 52, 0.4);
}

.chatbot-send-btn:active {
    transform: scale(0.95);
}

.chatbot-send-btn svg {
    width: 20px;
    height: 20px;
    color: #ffffff;
}

.chatbot-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chatbot-send-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    width: fit-content;
}

.typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ca3af;
    animation: typingBounce 1.4s infinite;
}

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

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

@keyframes typingBounce {

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

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

/* Form Input Styles */
.chatbot-form-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
    background: #ffffff;
    margin-top: 8px;
}

.chatbot-form-input:focus {
    border-color: #EDA734;
}

.chatbot-form-select {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
    background: #ffffff;
    margin-top: 8px;
    cursor: pointer;
}

.chatbot-form-select:focus {
    border-color: #EDA734;
}

.chatbot-form-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
    background: #ffffff;
    margin-top: 8px;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.chatbot-form-textarea:focus {
    border-color: #EDA734;
}

.chatbot-submit-btn {
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #EDA734 0%, #d4941f 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 12px;
}

.chatbot-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(237, 167, 52, 0.4);
}

.chatbot-submit-btn:active {
    transform: translateY(0);
}

.chatbot-restart-btn {
    width: auto;
    padding: 8px 16px;
    background: #ffffff;
    color: #EDA734;
    border: 2px solid #EDA734;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    margin-right: auto;
}

.chatbot-restart-btn:hover {
    background: #EDA734;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(237, 167, 52, 0.4);
}

.chatbot-restart-btn:active {
    transform: translateY(0);
}


/* Error Message */
.error-message {
    color: #dc2626;
    font-size: 12px;
    margin-top: 4px;
}

/* Success Message */
.success-message {
    padding: 16px;
    background: #d1fae5;
    border: 2px solid #10b981;
    border-radius: 12px;
    color: #065f46;
    font-size: 14px;
    margin-top: 8px;
    text-align: center;
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
    .chatbot-container {
        bottom: 16px;
        right: 24px;
    }

    .chatbot-toggle {
        width: 56px;
        height: 56px;
    }

    .whatsapp-toggle {
        width: 48px;
        height: 48px;
    }

    .whatsapp-icon {
        width: 24px;
        height: 24px;
    }

    .chatbot-toggle.active .chatbot-close-icon {
        display: none;
    }

    .chatbot-icon,
    .chatbot-close-icon {
        width: 24px;
        height: 24px;
    }

    .chatbot-window {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    .chatbot-header {
        padding: 16px;
    }

    .chatbot-messages {
        padding: 16px;
    }

    .message-content {
        max-width: 90%;
        min-width: 0;
    }
}

/* RTL Support */
[dir="rtl"] .chatbot-container {
    right: auto;
    left: 24px;
}

[dir="rtl"] .chatbot-window {
    right: auto;
    left: 0;
}

[dir="rtl"] .bot-message .message-content {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 4px;
}

[dir="rtl"] .user-message .message-content {
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 4px;
    margin-left: 0;
    margin-right: auto;
}

@media (max-width: 480px) {
    [dir="rtl"] .chatbot-container {
        left: 16px;
    }
}

/* ============================================
   Venue Selection Styles
   ============================================ */
.chatbot-venue-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.chatbot-venue-btn {
    width: 100%;
    padding: 10px 14px;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #1f2937;
}

.chatbot-venue-btn:hover {
    border-color: #EDA734;
    background: #fffbf2;
}

.chatbot-venue-btn.selected {
    border-color: #EDA734;
    background: linear-gradient(135deg, #EDA734 0%, #d4941f 100%);
    color: #ffffff;
}

/* ============================================
   Consultation Question Styles
   ============================================ */
.chatbot-consult-container {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.chatbot-consult-btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.chatbot-consult-yes {
    background: #ffffff;
    border: 2px solid #10b981;
    color: #10b981;
}

.chatbot-consult-yes:hover {
    background: #10b981;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.chatbot-consult-yes.selected {
    background: #10b981;
    color: #ffffff;
}

.chatbot-consult-no {
    background: #ffffff;
    border: 2px solid #6b7280;
    color: #6b7280;
}

.chatbot-consult-no:hover {
    background: #6b7280;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
}

.chatbot-consult-no.selected {
    background: #6b7280;
    color: #ffffff;
}

/* RTL adjustments for venue buttons */
[dir="rtl"] .chatbot-venue-btn {
    text-align: right;
}
/* ============================================
   Placement inside the floating CTA stack
   ============================================ */

/* The window used to hang off its own .chatbot-container pinned to the
   corner. It now lives inside #floating-cta, so it anchors to the top of that
   stack and clears the three pills whatever their height. The id gives these
   rules enough specificity to beat the plain .chatbot-window rules above,
   including the RTL one -- the stack stays bottom-right in Arabic, so the
   window must too. Phones keep the full-screen treatment from the
   max-width: 480px block above, hence the min-width guard here. */
/* Card geometry taken from almurqablaw.com's chat, which is the reference for
   this widget: 340x480 on desktop, a 92%-wide 440px card on phones rather
   than a full-screen takeover, 16px radius, 0 8px 40px shadow, hairline
   border. --cta-chat-max-h is measured in floating_cta.html (the room above
   the pills) so the card still shrinks rather than run off a short screen. */
#floating-cta .chatbot-window {
    position: absolute;
    inset: auto;
    top: auto;
    left: auto;
    right: 0;
    bottom: calc(100% + 12px);
    width: 340px;
    max-width: calc(100vw - 32px);
    height: 480px;
    max-height: var(--cta-chat-max-h, calc(100vh - 260px));
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
    border: 1px solid #e2e8f0;
}

@media (max-width: 480px) {
    #floating-cta .chatbot-window {
        width: 92vw;
        max-width: 92vw;
        height: 440px;
    }
}

/* The reference's chrome is tighter than ours was -- 16/20 on the header,
   16 with a 10px gap in the conversation -- which is what makes a 480px card
   hold a readable conversation instead of feeling stuffed. */
#floating-cta .chatbot-header {
    padding: 16px 20px;
}

#floating-cta .chatbot-avatar {
    width: 40px;
    height: 40px;
}

#floating-cta .chatbot-avatar svg {
    width: 20px;
    height: 20px;
}

#floating-cta .chatbot-messages {
    padding: 16px;
    gap: 10px;
}

/* The reference gets away with a single 62px input row because its chat is
   free text. Ours is a guided form: the Submit button is how a step is
   answered and Start Over resets the flow, so neither can go. Sitting them
   side by side costs one row instead of two, which is the difference between
   the conversation getting 58% of the card and 41% of it. chatbot.js sets
   flex-direction on this container as an inline style, hence !important;
   :last-child keeps it off the yes/no container the consult step builds. */
#chatbot-input-area .chatbot-input-wrapper > div:last-child {
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
}

#chatbot-input-area .chatbot-submit-btn {
    width: auto;
    flex: 1 1 auto;
}

#chatbot-input-area .chatbot-restart-btn {
    margin-top: 0;
    flex: 0 0 auto;
}

/* chatbot.js toggles .active on its trigger. The trigger is now the gold
   "Event Assistant" pill, so swap its speech bubble for a close cross the
   same way the old round button did. */
#chatbot-toggle .cta-icon-close {
    display: none;
}

#chatbot-toggle.active .cta-icon-open {
    display: none;
}

#chatbot-toggle.active .cta-icon-close {
    display: block;
}

/* The site header is fixed at z-index 99999 and the stack was at 1000, so the
   header painted straight over the top of the chat window -- the whole chat
   header on phones, the top strip of it on desktop. (The live site does this
   too: its .chatbot-container also sat at 1000.) The height cap above keeps
   the window clear of the header in normal use; this makes the header
   incapable of covering it even when it cannot, such as on a very short
   window. The pills live at the bottom of the screen and never meet the
   header, and the drawer hides the whole stack while it is open. */
#floating-cta {
    z-index: 100000;
}

/* The input area was a fixed 207px whatever the card height: 16/20 padding,
   a 45px field carrying its own 8px top margin on top of the wrapper's 8px
   gap, then the Submit and Start Over block. On a 1280x720 laptop that was
   more than half the card. Trimming the duplicated margin and tightening the
   padding gives the conversation the space back without touching any of the
   buttons chatbot.js builds. */
.chatbot-input-area {
    padding: 12px 16px;
}

#chatbot-input-area .chatbot-form-input {
    margin-top: 0;
}