/* Chat box on the storefront. Sits in the bottom-right corner on every page. */

.chat-widget {
    --chat-plum: #2a1229;
    --chat-plum-2: #4d2749;
    --chat-gold: #c39a57;
    --chat-gold-light: #efd9ae;
    --chat-line: #efe3e8;
    --chat-muted: #6b5a66;
    --chat-error: #9b1c31;
    font-size: 0.95rem;
}

.chat-widget [hidden] {
    display: none !important;
}

.chat-fab {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 70;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--chat-plum), var(--chat-plum-2));
    color: #fff;
    font: inherit;
    font-weight: 600;
    box-shadow: 0 0 0 4px rgba(239, 217, 174, 0.2), 0 16px 30px -14px rgba(42, 18, 41, 0.7);
    cursor: pointer;
    animation: chat-halo 2.4s ease-out 1.2s 3;
}

/* A soft gold ring pulses three times after the page opens, to show where chat is */
@keyframes chat-halo {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 217, 174, 0.6), 0 16px 30px -14px rgba(42, 18, 41, 0.7);
    }

    70%,
    100% {
        box-shadow: 0 0 0 12px rgba(239, 217, 174, 0), 0 16px 30px -14px rgba(42, 18, 41, 0.7);
    }
}

.chat-fab:focus-visible,
.chat-quick a:focus-visible,
.chat-close:focus-visible {
    outline: 3px solid var(--chat-gold);
    outline-offset: 2px;
}

.chat-fab svg {
    color: var(--chat-gold-light);
}

.chat-panel {
    position: fixed;
    right: 16px;
    bottom: 80px;
    z-index: 71;
    display: flex;
    flex-direction: column;
    width: min(380px, calc(100vw - 32px));
    max-height: min(640px, calc(100vh - 110px));
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--chat-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 28px 60px -24px rgba(42, 18, 41, 0.55);
}

.chat-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(120deg, var(--chat-plum), var(--chat-plum-2));
    color: #fbf6f1;
}

.chat-head strong {
    display: block;
    font-size: 1.02rem;
}

.chat-head span {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.85rem;
    line-height: 1.4;
}

.chat-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.chat-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--chat-line);
}

.chat-quick a {
    padding: 6px 12px;
    border: 1px solid var(--chat-line);
    border-radius: 999px;
    background: #fbf7f9;
    color: var(--chat-plum);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.chat-quick a:hover {
    border-color: var(--chat-gold);
    text-decoration: none;
}

.chat-log {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    min-height: 0;
    max-height: 320px;
    overflow-y: auto;
    padding: 12px 14px;
    background: #fbf7f9;
}

.chat-log:empty {
    display: none;
}

.chat-empty {
    margin: auto;
    color: var(--chat-muted);
    font-size: 0.9rem;
}

.chat-bubble {
    max-width: 84%;
    margin-bottom: 8px;
    padding: 9px 12px;
    border-radius: 16px;
    line-height: 1.45;
}

.chat-bubble.is-you {
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    background: linear-gradient(135deg, var(--chat-plum), var(--chat-plum-2));
    color: #fff;
}

.chat-bubble.is-us {
    align-self: flex-start;
    border: 1px solid var(--chat-line);
    border-bottom-left-radius: 4px;
    background: #fff;
    color: var(--chat-plum);
}

.chat-bubble .chat-meta {
    margin: 0 0 3px;
    opacity: 0.75;
    font-size: 0.75rem;
}

.chat-bubble .chat-text {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.chat-intro,
.chat-composer {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-top: 1px solid var(--chat-line);
}

.chat-intro label {
    display: grid;
    gap: 4px;
    color: var(--chat-plum);
    font-size: 0.85rem;
    font-weight: 600;
}

.chat-intro input,
.chat-intro textarea,
.chat-composer textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #e3d6dd;
    border-radius: 12px;
    background: #fff;
    color: var(--chat-plum);
    font: inherit;
    font-weight: 400;
}

.chat-intro textarea,
.chat-composer textarea {
    resize: vertical;
}

.chat-composer {
    grid-template-columns: 1fr auto;
    align-items: end;
}

.chat-composer textarea {
    min-height: 44px;
}

.chat-composer .btn {
    align-self: stretch;
}

.chat-error {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--chat-error);
    font-size: 0.85rem;
}

/* Honeypot field: off screen, not reachable by keyboard. */
.chat-hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
    .chat-fab {
        animation: none;
    }
}

/* Phones: the chat opens as a full-screen sheet. Its header stays at the top, so the close button is always
   on screen, and the form scrolls inside the sheet instead of being cut off at the bottom. */
@media (max-width: 480px) {
    /* Sits above the phone bottom bar (ui.css), which is about 64px tall. */
    .chat-fab {
        right: 12px;
        bottom: 84px;
        padding: 10px 16px 10px 10px;
        gap: 10px;
    }

    .chat-fab span {
        font-size: 0.92rem;
        letter-spacing: 0.01em;
    }

    /* While the sheet is open, the button underneath is hidden and the page behind does not scroll */
    .chat-widget.is-open .chat-fab {
        display: none;
    }

    body.chat-open {
        overflow: hidden;
    }

    .chat-panel {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: none;
        height: 100vh;
        height: 100dvh;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .chat-panel > * {
        flex-shrink: 0;
    }

    .chat-head {
        padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px;
    }

    .chat-head strong {
        font-size: 1.1rem;
    }

    .chat-close {
        width: 40px;
        height: 40px;
    }

    .chat-quick {
        padding: 10px 16px;
    }

    .chat-log {
        max-height: 42vh;
        max-height: 42dvh;
        min-height: 0;
    }

    .chat-intro,
    .chat-composer {
        padding: 14px 16px;
    }

    /* 16px text stops phones from zooming in when a field is tapped */
    .chat-intro input,
    .chat-intro textarea,
    .chat-composer textarea {
        font-size: 16px;
    }

    .chat-intro .btn,
    .chat-composer .btn {
        min-height: 46px;
    }

    .chat-intro .btn {
        width: 100%;
        font-size: 1rem;
    }
}