/* ---------------------------------------------------------------------------
   Customer-service chat.

   Its own file rather than an addition to site.css: the widget rides over every
   page and owns a fixed corner of the viewport, so keeping it separable is what
   makes it removable. It borrows the public palette's custom properties and
   defines none of its own colours.

   Stacking: above the header (1000/1100) so the panel is not cut off at the top
   on a phone, and below the mobile navigation drawer (1200) so opening the menu
   covers the chat rather than fighting it.
   --------------------------------------------------------------------------- */

.chat {
    position: fixed;
    right: 34px;

    /* The seal and the panel's smaller circle share a centre, so clicking one does not
       make it jump. They are different sizes, so their offsets from the floor differ by
       half that difference — --chat-lift — and only the closed state carries it. */
    --chat-anchor: clamp(12px, 3vw, 28px);
    --chat-lift: 18px;

    bottom: calc(var(--chat-anchor) - var(--chat-lift));

    z-index: 1150;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    font-family: var(--font-body);
    transition: bottom 0.25s ease;

    /* Keeps the launcher clear of the home indicator on a modern phone. */
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.chat--open {
    bottom: var(--chat-anchor);
}

/* --- launcher ----------------------------------------------------------- */

/* The brand seal, moved here from the hero: same 92px teal disc, same shadow,
   same drift. It is a button now, so it also has hover, active and focus states
   the decorative version never needed. */
.chat__launcher {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    font: inherit;
    cursor: pointer;
    /* A white ring inside the drop shadow. The seal used to live only on the hero
       photograph; riding down the page it now crosses the closing band, whose
       ground is rgba(10,137,170,.93) — the seal's own teal — and the trio's blue
       and teal panels, where a plain disc all but vanishes. Over a white or ice
       section the ring is white on white and costs nothing. */
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), 0 12px 38px rgba(11, 76, 95, 0.36);
    /* Arrives with a drift and then stops. The seal floated on a loop while it was
       decoration on the hero; as a button that is a target which never holds still,
       which is harder to hit for everyone and considerably harder for anyone whose
       aim is not steady. One pass in, then it rests. */
    animation: seal-arrive 1.6s ease-out 1;
    transition: background 0.2s ease, transform 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.chat__launcher img {
    height: 44px;
    width: auto;
    object-fit: contain;
}

@keyframes seal-arrive {
    0% { transform: translateY(14px); opacity: 0; }
    60% { transform: translateY(-6px); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}

.chat__launcher:hover { background: var(--teal-deep); }

.chat__launcher:active { transform: scale(0.94); }

.chat__launcher:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 4px;
}

/* Open, it is a close button rather than a mark: smaller, still, and out of the
   way of the conversation it sits under. */
.chat--open .chat__launcher {
    width: 56px;
    height: 56px;
    animation: none;
}

/* A hover that lifts it slightly, which is the drift's job now that the drift is
   over: the button says it is a button without wandering off the pointer. */
.chat__launcher:hover:not(:disabled) { transform: translateY(-3px); }

.chat__launcher-icon { font-size: 1.15rem; line-height: 1; }

/* --- panel -------------------------------------------------------------- */

.chat__panel {
    display: flex;
    flex-direction: column;
    width: min(380px, calc(100vw - 32px));
    height: min(560px, calc(100vh - 140px));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);

    /* The launcher comes first in the source, so tabbing reaches it before the
       conversation it opens. Visually the panel belongs above it. */
    order: -1;
}

.chat__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%);
    color: #fff;
}

.chat__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
}

.chat__subtitle {
    margin: 2px 0 0;
    font-size: 0.75rem;
    opacity: 0.85;
}

.chat__close {
    flex: none;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
}

.chat__close:hover { background: rgba(255, 255, 255, 0.28); }

.chat__close:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

/* --- transcript --------------------------------------------------------- */

.chat__log {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px;
    background: var(--ice);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat__line { display: flex; }

.chat__line--bot { justify-content: flex-start; }

.chat__line--me { justify-content: flex-end; }

.chat__bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.875rem;
    line-height: 1.55;

    /* An assistant can answer with a long unbroken string — a URL or a product
       code — and without this it widens the bubble past the panel. */
    overflow-wrap: anywhere;
}

.chat__bubble p { margin: 0; }

.chat__bubble p + p { margin-top: 0.6em; }

.chat__line--bot .chat__bubble {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    border-bottom-left-radius: 4px;
}

.chat__line--me .chat__bubble {
    background: var(--teal);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat__bubble--error {
    background: #FFF4F4;
    border-color: #F3C9C9;
    color: #8C2B2B;
}

/* --- typing indicator --------------------------------------------------- */

.chat__bubble--typing {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 14px;
}

.chat__bubble--typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--grey);
    animation: chat-dot 1.2s infinite ease-in-out;
}

.chat__bubble--typing span:nth-child(2) { animation-delay: 0.15s; }

.chat__bubble--typing span:nth-child(3) { animation-delay: 0.3s; }

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

/* An answer can take the better part of a minute, so the indicator is the only
   sign anything is happening — it stays, but it stops moving. */
@media (prefers-reduced-motion: reduce) {
    /* The seal drifts on a loop; someone who asked for less motion did not ask
       for a logo that never stops bobbing. */
    .chat__launcher { animation: none; }

    .chat__bubble--typing span { animation: none; opacity: 0.6; }

    .chat__launcher { transition: none; }
}

/* --- composer ----------------------------------------------------------- */

.chat__composer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-top: 1px solid var(--line);
    background: #fff;
}

/* The visible placeholder is the label for a sighted visitor; this is the same
   text for a screen reader, which does not treat a placeholder as a name. */
.chat__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.chat__input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font: inherit;

    /* Anything under 16px makes iOS Safari zoom the page when the field takes
       focus, and it never zooms back out. */
    font-size: 16px;
}

.chat__input:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 1px;
}

.chat__input:disabled { background: var(--ice); }

.chat__send {
    flex: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.chat__send:hover:not(:disabled) { background: var(--teal-deep); }

.chat__send:disabled { background: var(--grey); cursor: default; }

/* The empty-box appearance, without actually disabling the button: a disabled
   default button stops Enter from submitting the form at all. */
.chat__input:placeholder-shown ~ .chat__send:not(:disabled) {
    background: var(--grey);
}

.chat__send:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 2px;
}

/* --- tablet ------------------------------------------------------------- */

/* The hero hides its scroll cue below 720px, so the seal takes the corner back —
   the same handover the design makes, at the same width. */
@media (max-width: 720px) {
    .chat {
        right: clamp(12px, 3vw, 22px);

        /* Half of 72 minus 56, for the same reason as above. */
        --chat-lift: 8px;
    }

    .chat__launcher { width: 72px; height: 72px; }

    .chat__launcher img { height: 34px; }
}

/* --- phone -------------------------------------------------------------- */

@media (max-width: 600px) {
    .chat--open {
        inset: 0;
        right: 0;
        bottom: 0;
        padding: 0;
        gap: 0;
    }

    .chat--open .chat__panel {
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    /* Closing is the header's ✕ once the sheet fills the screen; a second
       floating button over the conversation would only be in the way. */
    .chat--open .chat__launcher { display: none; }

    /* With the launcher gone this is the only way out of the sheet, so it has to be
       a full touch target rather than the 32px that reads fine under a mouse. */
    .chat__close {
        width: 44px;
        height: 44px;
        font-size: 1.05rem;
    }

    .chat__log { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0)); }

    .chat__composer { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0)); }
}

/* Printing a floating chat button onto a page of content helps nobody. */
@media print {
    .chat { display: none; }
}

/* --- when a line was said ------------------------------------------------ */

/* The bubble and its time stack, and the pair aligns to the speaker's side —
   .chat__line is a flex row that pushes the group left or right, and without a
   group between them the time would sit beside the bubble rather than under it. */
.chat__group {
    display: flex;
    flex-direction: column;
    max-width: 82%;
}

.chat__line--me .chat__group { align-items: flex-end; }

.chat__group .chat__bubble { max-width: 100%; }

.chat__time {
    margin-top: 4px;
    padding: 0 4px;
    font-size: 0.66rem;
    line-height: 1;
    color: var(--ink-soft);
    opacity: 0.72;
}