/*
 * Site assistant widget.
 *
 * Every rule is scoped under .ams-assistant or #ams-assistant. The vendor
 * theme sets some very broad rules on bare elements - `section` is forced to
 * inline-block at 100% width, `img` to max-width:100% - so nothing here relies
 * on element defaults, and the panel is built from divs and buttons only.
 *
 * Palette is the site's own: #d6bb2b gold against #3c3c3c charcoal. Text on
 * gold is charcoal rather than white; white on this gold fails contrast.
 */

#ams-assistant,
#ams-assistant * {
    box-sizing: border-box;
}

#ams-assistant {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #3c3c3c;
}

/* ------------------------------------------------------------------
 * Launcher
 *
 * Sits above the theme's back-to-top button, which is fixed at
 * right:10px/bottom:10px and 43px tall with z-index 999.
 * ------------------------------------------------------------------ */

#ams-assistant .ams-assistant-launcher {
    position: fixed;
    right: 10px;
    /* --ams-bottom is set from JS: the cookie consent banner is fixed to the
     * foot of the viewport at the maximum possible z-index, so it cannot be
     * stacked under and must be stepped over instead. It is 0 once the
     * visitor has answered the banner. */
    bottom: calc(62px + var(--ams-bottom, 0px));
    z-index: 9998;

    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0;
    padding: 12px 18px;
    border: 0;
    border-radius: 28px;

    background: #d6bb2b;
    color: #2a2a2a;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .28);
    transition: transform .15s ease, box-shadow .15s ease;
}

#ams-assistant .ams-assistant-launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .32);
}

#ams-assistant .ams-assistant-launcher:focus-visible,
#ams-assistant button:focus-visible,
#ams-assistant input:focus-visible,
#ams-assistant textarea:focus-visible {
    outline: 3px solid #0b5c8a;
    outline-offset: 2px;
}

#ams-assistant .ams-assistant-launcher svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: currentColor;
}

#ams-assistant.ams-open .ams-assistant-launcher {
    display: none;
}

/* ------------------------------------------------------------------
 * Panel
 * ------------------------------------------------------------------ */

#ams-assistant .ams-assistant-panel {
    position: fixed;
    /* Clears the accessibility toolbar's rail, which is pinned to the middle
     * of the right edge above everything else; at right:10px the panel ran
     * underneath it. */
    right: 64px;
    bottom: calc(10px + var(--ams-bottom, 0px));
    z-index: 9999;

    display: none;
    flex-direction: column;

    width: 380px;
    max-width: calc(100vw - 74px);
    height: 560px;
    max-height: calc(100vh - 20px - var(--ams-bottom, 0px));

    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
    overflow: hidden;
}

#ams-assistant.ams-open .ams-assistant-panel {
    display: flex;
}

#ams-assistant .ams-assistant-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #d6bb2b;
    color: #2a2a2a;
}

#ams-assistant .ams-assistant-title {
    flex: 1 1 auto;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
}

#ams-assistant .ams-assistant-subtitle {
    display: block;
    font-size: 12px;
    font-weight: 400;
    opacity: .8;
}

#ams-assistant .ams-assistant-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .08);
    color: #2a2a2a;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

#ams-assistant .ams-assistant-close:hover {
    background: rgba(0, 0, 0, .18);
}

/* ------------------------------------------------------------------
 * Messages
 * ------------------------------------------------------------------ */

#ams-assistant .ams-assistant-log {
    flex: 1 1 auto;
    padding: 14px;
    overflow-y: auto;
    background: #f9f9f9;
}

#ams-assistant .ams-msg {
    max-width: 85%;
    margin: 0 0 10px;
    padding: 10px 13px;
    border-radius: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

#ams-assistant .ams-msg-bot {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-bottom-left-radius: 4px;
}

#ams-assistant .ams-msg-user {
    margin-left: auto;
    background: #3c3c3c;
    color: #fff;
    border-bottom-right-radius: 4px;
}

#ams-assistant .ams-msg-error {
    background: #fdf0ef;
    border: 1px solid #e7b9b4;
    color: #8a2a20;
}

#ams-assistant .ams-msg a {
    color: #0b5c8a;
    text-decoration: underline;
}

#ams-assistant .ams-msg-user a {
    color: #fff;
}

/* Typing indicator, shown until the first token arrives. */
#ams-assistant .ams-typing {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    height: 12px;
}

#ams-assistant .ams-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b0b0b0;
    animation: ams-bounce 1.2s infinite ease-in-out;
}

#ams-assistant .ams-typing span:nth-child(2) { animation-delay: .15s; }
#ams-assistant .ams-typing span:nth-child(3) { animation-delay: .3s; }

@keyframes ams-bounce {
    0%, 60%, 100% { transform: translateY(0);    opacity: .5; }
    30%           { transform: translateY(-4px); opacity: 1;  }
}

/* Suggested openers */
#ams-assistant .ams-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
}

#ams-assistant .ams-chip {
    padding: 7px 12px;
    border: 1px solid #d6bb2b;
    border-radius: 16px;
    background: #fff;
    color: #3c3c3c;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

#ams-assistant .ams-chip:hover {
    background: #fdf8e3;
}

/* ------------------------------------------------------------------
 * Composer
 * ------------------------------------------------------------------ */

#ams-assistant .ams-assistant-form {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding: 10px;
    border-top: 1px solid #e6e6e6;
    background: #fff;
}

#ams-assistant .ams-assistant-input {
    flex: 1 1 auto;
    max-height: 96px;
    min-height: 40px;
    padding: 10px 12px;
    border: 1px solid #cfcfcf;
    border-radius: 18px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.35;
    resize: none;
}

#ams-assistant .ams-assistant-send {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d6bb2b;
    color: #2a2a2a;
    cursor: pointer;
}

#ams-assistant .ams-assistant-send[disabled] {
    opacity: .5;
    cursor: default;
}

#ams-assistant .ams-assistant-send svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

#ams-assistant .ams-assistant-footnote {
    margin: 0;
    padding: 0 12px 10px;
    background: #fff;
    color: #8c8c8c;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
}

/* ------------------------------------------------------------------
 * Booking form
 * ------------------------------------------------------------------ */

#ams-assistant .ams-booking {
    margin: 0 0 10px;
    padding: 13px;
    border: 1px solid #d6bb2b;
    border-radius: 12px;
    background: #fffdf4;
}

#ams-assistant .ams-booking-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
}

#ams-assistant .ams-booking-intro {
    margin: 0 0 10px;
    font-size: 13px;
    color: #5c6060;
}

#ams-assistant .ams-field {
    margin: 0 0 8px;
}

#ams-assistant .ams-field label {
    display: block;
    margin: 0 0 3px;
    font-size: 12px;
    font-weight: 700;
    color: #5c6060;
}

#ams-assistant .ams-field input {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #cfcfcf;
    border-radius: 7px;
    font-family: inherit;
    font-size: 14px;
    background: #fff;
}

#ams-assistant .ams-field-row {
    display: flex;
    gap: 8px;
}

#ams-assistant .ams-field-row .ams-field {
    flex: 1 1 0;
    min-width: 0;
}

/* The honeypot. Bots fill it; people never see it. Deliberately not
 * display:none - some bots skip hidden fields. */
#ams-assistant .ams-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#ams-assistant .ams-booking-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

#ams-assistant .ams-btn {
    padding: 10px 14px;
    border: 0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

#ams-assistant .ams-btn-primary {
    flex: 1 1 auto;
    background: #d6bb2b;
    color: #2a2a2a;
}

#ams-assistant .ams-btn-secondary {
    background: #ececec;
    color: #3c3c3c;
}

#ams-assistant .ams-btn[disabled] {
    opacity: .6;
    cursor: default;
}

#ams-assistant .ams-booking-error {
    margin: 6px 0 0;
    color: #8a2a20;
    font-size: 13px;
}

/* ------------------------------------------------------------------
 * Small screens - the panel takes the whole viewport
 * ------------------------------------------------------------------ */

@media (max-width: 480px) {
    #ams-assistant .ams-assistant-panel {
        right: 0;
        bottom: var(--ams-bottom, 0px);
        width: 100vw;
        max-width: 100vw;
        height: calc(100dvh - var(--ams-bottom, 0px));
        max-height: calc(100dvh - var(--ams-bottom, 0px));
        border-radius: 0;
    }

    #ams-assistant .ams-assistant-launcher {
        padding: 12px 15px;
    }

    /* The accessibility toolbar's rail is pinned to the middle of the right
     * edge above everything on the page. On a phone the panel is full width,
     * so it cannot be sidestepped the way the desktop panel does - instead
     * the booking inputs are inset far enough that the rail never lands on
     * top of one. Message bubbles already stop short of it. */
    #ams-assistant .ams-booking {
        padding-right: 52px;
    }

    /* Two inputs side by side leaves each too narrow once inset. */
    #ams-assistant .ams-field-row {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    #ams-assistant .ams-assistant-launcher {
        transition: none;
    }
    #ams-assistant .ams-assistant-launcher:hover {
        transform: none;
    }
    #ams-assistant .ams-typing span {
        animation: none;
    }
}

/* The theme ships a print stylesheet that does not know about us. */
@media print {
    #ams-assistant {
        display: none !important;
    }
}