/* Hotel 1611 — Virtual Assistant
 *
 * Loaded after app.css, which carries the brand (palette, Poppins, Bootstrap
 * overrides, logos, the footer block). This file holds only the conversation
 * screen: the fixed hero, the floating header and FAQ menu, the welcome state,
 * the thread, the bubbles, the composer and the typing effects.
 *
 * The guest pages are scrolling documents with a hero band at the top; this is
 * one fixed screen with the hero behind everything and only the thread moving.
 * The conversation surfaces are also the one place the square-cornered rule is
 * relaxed — a chat bubble reads as a bubble or it reads as nothing.
 */

/* -------------------------------------------------------------- hero
 * The guest hero's scrim is tuned for a band; here text sits over the photo
 * across the whole screen and the chat surfaces need a dark ground to read as
 * glass against, so the scrim is heavier. */
.hero-backdrop.hero-full {
    position: fixed;
    inset: 0;
    z-index: 0;
    /* Light overall so the building shows; a soft pool of shade stays behind
     * the centred welcome text so it still reads. */
    background-image:
        radial-gradient(ellipse 55% 45% at 50% 52%, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.14) 45%, rgba(0, 0, 0, 0.36) 100%),
        var(--hero-image, none),
        linear-gradient(100deg, #0d3b3b 0%, #1f5f4f 40%, #b9ad5c 100%);
}

/* The welcome screen shows the photo at the scrim above; once a question has
 * been sent the conversation needs a darker ground, so a second veil fades in
 * over the photo. chat.js sets data-started the moment the thread is built. */
.hero-backdrop.hero-full::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.9s ease-in-out;
    pointer-events: none;
}

body[data-started="true"] .hero-backdrop.hero-full::after {
    opacity: 1;
}

/* A slow camera drift on the welcome screen. It holds still during a
 * conversation, when the photo should not move behind the words. */
.hero-backdrop.hero-full {
    animation: hero-drift 30s ease-in-out infinite alternate;
}

body[data-started="true"] .hero-backdrop.hero-full {
    animation-play-state: paused;
}

@keyframes hero-drift {
    from { transform: scale(1.04); }
    to { transform: scale(1.14) translate3d(-1%, -1%, 0); }
}

/* The seal next to the header lockup; app.css sizes the footer's seal only. */
.ust-logo-img.ust-logo-sm {
    height: 2.25rem;
}

/* -------------------------------------------------------------- shell
 * 100dvh, not 100vh: on mobile Safari and Chrome the address bar would
 * otherwise push the composer under the fold. */
.chat-shell {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--ink); /* shows for the instant before the photo paints */
    /* The footer sits below the fold, so only the horizontal axis stays
     * locked — the fixed hero would otherwise let the page drift sideways. */
    overflow-x: hidden;
}

.chat-shell__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

.chat-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0; /* lets .thread__scroll own the overflow instead of the page */
}

/* ------------------------------------------------------------- header */
.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding: 1.25rem 1.5rem;
}

.chat-header__brand {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

/* The seal carries its own generous whitespace, so it needs a hair of optical
 * lift to sit level with the hotel lockup beside it. */
.chat-header__seal {
    margin-bottom: 0.125rem;
}

.chat-header__actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* The form round "New chat" would otherwise take the height of a text line,
 * leaving the link sitting low beside the FAQs button. */
.chat-header__actions > form {
    display: flex;
    flex: none;   /* "New chat" keeps its width rather than wrapping onto two lines */
    margin: 0;
}

.chat-header__link {
    white-space: nowrap;
}

.chat-header__link {
    border: 0;
    background: none;
    padding: 0 0 0.1875rem;
    line-height: 1;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(var(--white-rgb), 0.85);
    border-bottom: 1px solid rgba(var(--white-rgb), 0.4);
    transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.chat-header__link:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

/* ----------------------------------------------------------- faq menu */
.faq {
    position: relative;
}

/* Same gold block as the guest nav's CTA — the one square-cornered element on
 * the screen, and deliberately so: it is the guest site's own furniture. */
.faq__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.5rem 1.25rem;
    border: 0;
    background-color: var(--gold);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    transition: background-color 0.15s ease-in-out;
}

.faq__trigger:hover,
.faq__trigger.is-open {
    background-color: var(--gold-deep);
}

.faq__trigger svg {
    transition: transform 0.15s ease-in-out;
}

.faq__trigger.is-open svg {
    transform: rotate(180deg);
}

/* Cream, square and opaque: this is a menu to read, not another pane of glass
 * over the photo. */
.faq__panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 50;
    width: 17.5rem;
    /* Tall enough that all four groups fit on a normal screen; on a shorter
     * window the viewport term caps it and the panel scrolls. */
    max-height: min(34rem, calc(100vh - 6rem));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.875rem 0;
    background-color: var(--cream);
    border-top: 3px solid var(--gold);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
    scrollbar-width: thin;
    scrollbar-color: var(--gold) var(--ink);
}

.faq__panel::-webkit-scrollbar {
    width: 10px;
}

.faq__panel::-webkit-scrollbar-track {
    background: var(--ink);
}

.faq__panel::-webkit-scrollbar-thumb {
    background: var(--gold);
    border: 2px solid var(--ink);
}

.faq__panel::-webkit-scrollbar-thumb:hover {
    background: var(--gold-deep);
}

.faq__group + .faq__group {
    margin-top: 0.375rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(var(--ink-rgb), 0.1);
}

.faq__heading {
    margin: 0;
    padding: 0.375rem 1.125rem 0.3125rem;
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--grey-muted);
}

.faq__item {
    display: block;
    width: 100%;
    padding: 0.5rem 1.125rem;
    border: 0;
    border-left: 3px solid transparent;
    background: none;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--ink);
    transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out;
}

.faq__item:hover:not(:disabled),
.faq__item:focus-visible {
    background-color: var(--gold-pale);
    border-left-color: var(--gold);
    outline: none;
}

.faq__item:disabled {
    color: var(--stone-dark);
}

/* ------------------------------------------------------------ welcome
 * The pieces rise in one after another. A soft gold glow drifts behind the
 * heading, and a point of gold light circles the question box. */
.welcome {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem 1.5rem 3.5rem;
}

.welcome::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: min(56rem, 120vw);
    height: 30rem;
    margin: -19rem 0 0 calc(min(56rem, 120vw) / -2);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--gold-rgb), 0.24), transparent);
    filter: blur(24px);
    pointer-events: none;
    animation: welcome-glow 9s ease-in-out infinite alternate;
}

@keyframes welcome-glow {
    from { opacity: 0.55; transform: translate3d(-4%, 0, 0) scale(0.94); }
    to { opacity: 1; transform: translate3d(4%, 3%, 0) scale(1.06); }
}

.welcome__badge,
.welcome__title,
.welcome__sub,
.welcome__composer,
.chip-row--welcome .chip {
    animation: welcome-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.welcome__title { animation-delay: 0.1s; }
.welcome__sub { animation-delay: 0.22s; }
.welcome__composer { animation-delay: 0.32s; }
.chip-row--welcome .chip:nth-child(1) { animation-delay: 0.44s; }
.chip-row--welcome .chip:nth-child(2) { animation-delay: 0.52s; }
.chip-row--welcome .chip:nth-child(3) { animation-delay: 0.6s; }
.chip-row--welcome .chip:nth-child(n + 4) { animation-delay: 0.68s; }

@keyframes welcome-rise {
    from { opacity: 0; transform: translateY(1.25rem); }
    to { opacity: 1; transform: none; }
}

/* Names what is answering, before it has said anything. */
.welcome__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4375rem 1.25rem;
    margin-bottom: 1.75rem;
    border: 1px solid rgba(var(--white-rgb), 0.25);
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
}

.welcome__pulse {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--gold);
    animation: welcome-pulse 2s ease-out infinite;
}

@keyframes welcome-pulse {
    from { box-shadow: 0 0 0 0 rgba(var(--gold-rgb), 0.7); }
    to { box-shadow: 0 0 0 0.625rem rgba(var(--gold-rgb), 0); }
}

.welcome__title {
    max-width: 20ch;
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(2.75rem, 7vw, 5rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.01em;
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

/* A band of light passes across the gold now and then. Clipped text cannot
 * carry a text-shadow, so a drop-shadow does that job here. */
.welcome__name {
    background: linear-gradient(100deg, var(--gold) 30%, #fff3c4 50%, var(--gold) 70%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.5));
    animation: welcome-shimmer 6s ease-in-out infinite;
}

@keyframes welcome-shimmer {
    0%, 55% { background-position: 110% 0; }
    100% { background-position: -30% 0; }
}

.welcome__sub {
    max-width: 34rem;
    margin: 1.25rem auto 0;
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(var(--white-rgb), 0.9);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

@property --welcome-spin {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.welcome__composer {
    position: relative;
    width: 100%;
    max-width: 38rem;
    margin-top: 2rem;
    border-radius: 999px;
}

/* The light itself: a turning gradient showing only around the pill's edge. */
.welcome__composer::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 999px;
    background: conic-gradient(from var(--welcome-spin), transparent 62%, rgba(var(--gold-rgb), 0.25) 76%, var(--gold) 92%, #fff3c4 96%, transparent 100%);
    animation: welcome-spin 5s linear infinite;
}

@keyframes welcome-spin {
    to { --welcome-spin: 360deg; }
}

.welcome .composer {
    position: relative;
    padding-block: 0.4375rem;
    border-color: transparent;
    background-color: #fff;
}

.welcome .composer__input {
    font-size: 1rem;
}

.welcome .composer__send {
    width: 2.75rem;
    height: 2.75rem;
    background-color: var(--gold);
    color: var(--ink);
}

.welcome .composer__send:hover:not(:disabled) {
    background-color: var(--ink);
    color: var(--gold);
    transform: scale(1.06) rotate(-8deg);
}

/* --------------------------------------------------------------- chips */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip-row--welcome {
    justify-content: center;
    max-width: 36rem;
    margin: 1.25rem auto 0;
}

.chip-row--thread {
    margin-top: 0.25rem;
    padding-left: 0.125rem;
}

.chip {
    padding: 0.4375rem 1rem;
    border: 1px solid rgba(var(--white-rgb), 0.45);
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(8px);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(var(--white-rgb), 0.95);
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.chip:hover:not(:disabled) {
    background-color: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
}

.chip-row--welcome .chip {
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out, translate 0.15s ease-in-out;
}

.chip-row--welcome .chip:hover:not(:disabled) {
    translate: 0 -2px;
}

.chip:disabled {
    opacity: 0.45;
}

/* -------------------------------------------------------------- thread
 * The thread spans the whole viewport so its scrollbar sits at the right edge
 * of the screen, where a page scrollbar would be; the column of bubbles and
 * the composer are centred inside it at 52rem. */
.thread {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

/* Only this scrolls. The hero behind it stays fixed, which is what keeps the
 * photo from sliding away mid-conversation. The scrollbar is hidden, not
 * disabled: wheel, touch, keyboard and the auto-scroll to the newest turn all
 * still work. */
.thread__scroll {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* legacy Edge */
}

.thread__scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

/* Once a conversation is under way the page itself stops scrolling (the
 * footer is hidden below), so the thread gets a slim bar of its own to drag. */
body[data-started="true"] .thread__scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.45) transparent;
}

body[data-started="true"] .thread__scroll::-webkit-scrollbar {
    display: block;
    width: 8px;
}

body[data-started="true"] .thread__scroll::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.45);
    border-radius: 3px;
}

body[data-started="true"] .thread__scroll::-webkit-scrollbar-track {
    background: transparent;
}

.thread__inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    max-width: 52rem;
    margin-inline: auto;
    padding: 0.5rem 1.5rem 1.5rem;
}

.thread__composer {
    flex-shrink: 0;
    width: 100%;
    max-width: 52rem;
    margin-inline: auto;
    padding: 1rem 1.5rem 1.75rem;
}

.chat-turn {
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

.chat-turn--guest {
    align-items: flex-end;
}

.chat-turn--bot {
    align-items: flex-start;
}

.chat-turn__badge {
    margin-bottom: 0.4375rem;
    padding-left: 0.125rem;
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* ------------------------------------------------------------ bubbles */
.chat-bubble {
    max-width: 88%;
    padding: 1rem 1.25rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.24);
}

/* Short, so it stays a pill. The gold edge is the only brand mark it needs. */
.chat-bubble--guest {
    border-radius: 1.25rem 1.25rem 0.25rem 1.25rem;
    background-color: rgba(255, 255, 255, 0.9);
    border-right: 3px solid var(--gold);
    color: var(--ink);
}

/* Long, so it is a card: rates and inclusions arrive as lists. */
.chat-bubble--bot {
    border-radius: 1.25rem 1.25rem 1.25rem 0.25rem;
    background-color: rgba(253, 245, 231, 0.94); /* the guest pages' cream ground */
    border-left: 3px solid var(--gold);
    color: var(--ink);
}

.chat-bubble--typing {
    padding: 0.875rem 1.25rem;
}

.chat-bubble__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
}

.chat-bubble__text strong {
    font-weight: 700;
}

.chat-bubble__list {
    margin: 0.75rem 0 0;
    padding-left: 1.125rem;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.chat-bubble__list li + li {
    margin-top: 0.375rem;
}

/* Gold markers, so a list of rooms reads as brand furniture rather than a
 * raw bulleted list. */
.chat-bubble__list li::marker {
    color: var(--gold-deep);
}

/* Steps in order: the numbers carry the sequence, so they get weight. */
.chat-bubble__list--numbered {
    padding-left: 1.375rem;
}

.chat-bubble__list--numbered li::marker {
    font-weight: 700;
}

/* A matter the guest must not miss: a deadline, a requirement, a warning. */
.chat-bubble u {
    text-decoration-color: var(--gold-deep);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.chat-bubble__note {
    margin: 0.875rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(var(--ink-rgb), 0.12);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--grey-muted);
}

.chat-bubble__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    margin-top: 0.875rem;
    padding: 0.5rem 1.125rem;
    background-color: var(--gold);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.15s ease-in-out;
}

.chat-bubble__link:hover {
    background-color: var(--gold-deep);
    color: var(--ink);
}

/* The embed ships at a fixed 600x450, which would burst the bubble on a phone.
 * Width follows the bubble and the ratio is kept, so it scales instead. */
.chat-bubble__map {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 20rem;
    margin-top: 0.875rem;
    border: 0;
    border-radius: 0.375rem;
}

/* ------------------------------------------------------------ composer */
.composer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.375rem 0.375rem 0.375rem 1.375rem;
    border: 1px solid rgba(var(--white-rgb), 0.5);
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.3);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.composer:focus-within {
    border-color: var(--gold);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.34), 0 0 0 3px rgba(var(--gold-rgb), 0.35);
}

.composer__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0.625rem 0;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    color: var(--ink);
}

.composer__input::placeholder {
    color: var(--stone-dark);
}

.composer__input:focus {
    outline: none;
}

.composer__input:disabled {
    background: transparent;
}

.composer__send {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background-color: var(--ink);
    color: var(--gold);
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.composer__send:hover:not(:disabled) {
    background-color: var(--gold);
    color: var(--ink);
    transform: scale(1.06);
}

.composer__send:disabled {
    background-color: rgba(var(--ink-rgb), 0.25);
    color: rgba(var(--white-rgb), 0.6);
}

/* --------------------------------------------------------- typing dots */
.typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
}

.typing-dots i {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background-color: var(--stone-dark);
    animation: typing-bounce 1.1s ease-in-out infinite;
}

.typing-dots i:nth-child(2) { animation-delay: 0.16s; }
.typing-dots i:nth-child(3) { animation-delay: 0.32s; }

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

/* ------------------------------------------------------------ motion
 * .anim-fade and .anim-rise come from app.css; a turn gets its own, shorter
 * entrance. */
@keyframes turn-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.anim-turn {
    animation: turn-in 0.28s ease-out both;
}

/* ------------------------------------------------------- typewriter
 * The newest answer types itself out (chat.js, typeOut), then its list, note,
 * map and the follow-up chips come in one after another. Everything is in the
 * page from the start; these classes only hold it back while it is revealed. */
.chat-bubble__text.is-typing::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: -0.15em;
    background-color: var(--gold-deep);
    animation: caret-blink 0.9s steps(1) infinite;
}

@keyframes caret-blink {
    50% { opacity: 0; }
}

/* Out of the layout, not just transparent: the thread follows the text as it
 * grows, and invisible bullets below it would pull the view past the words
 * being typed. */
.is-held {
    display: none !important;
}

.is-revealed {
    animation: turn-in 0.28s ease-out both;
}

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

    .typing-dots i {
        animation: none;
        opacity: 0.6;
    }

    .thread__scroll {
        scroll-behavior: auto;
    }

    .hero-backdrop.hero-full::after {
        transition: none;
    }

    .hero-backdrop.hero-full,
    .welcome::before,
    .welcome__badge,
    .welcome__title,
    .welcome__sub,
    .welcome__composer,
    .welcome__composer::before,
    .welcome__pulse,
    .welcome__name,
    .chip-row--welcome .chip {
        animation: none;
    }
}

/* ------------------------------------------------------------ footer
 * The guest footer (app.css) sits below the fold here. The fixed hero covers
 * the viewport, so the footer needs to sit over it; and during a conversation
 * the footer goes, and with it the page's own scroll, so the wheel and the
 * scrollbar belong to the thread alone. chat.js keeps data-started current
 * after each question, and "New chat" brings the footer back. */
.chat-shell > footer {
    position: relative;
    z-index: 1;
}

body[data-started="true"] .chat-shell > footer {
    display: none;
}

body[data-started="true"] {
    overflow: hidden;
}

/* -------------------------------------------------------- responsive
 * Bootstrap's breakpoints, written out: down(md) is < 768px and down(sm) is
 * < 576px. */

/* ---- tablet and below (< 768px) */
@media (max-width: 767.98px) {
    .chat-header {
        padding: 1rem;
    }

    .chat-header__actions {
        gap: 0.875rem;
    }

    .faq__trigger {
        padding: 0.4375rem 1rem;
        font-size: 0.75rem;
    }

    /* Keep the panel inside the viewport on a phone rather than letting a fixed
     * width hang off the right edge. */
    .faq__panel {
        width: min(17.5rem, calc(100vw - 2rem));
    }

    .welcome {
        padding-bottom: 2.5rem;
    }

    .welcome__badge {
        margin-bottom: 1.5rem;
    }

    .welcome__sub {
        font-size: 0.9375rem;
    }

    .thread__inner,
    .thread__composer,
    .welcome {
        padding-inline: 1rem;
    }

    .chat-bubble {
        max-width: 94%;
    }
}

/* ---- phone (< 576px) */
@media (max-width: 575.98px) {
    /* The seal plus the lockup crowds a phone header; the hotel mark alone is
     * enough to say whose assistant this is. */
    .chat-header__seal {
        display: none;
    }

    .logo-img.logo-sm {
        height: 2.125rem;
    }

    .welcome__composer {
        margin-top: 1.75rem;
    }

    .composer {
        padding-left: 1.125rem;
    }

    .composer__input {
        font-size: 0.875rem;
    }

    /* Chips that don't fit go to the next line, never off the side of the
     * screen; a long one wraps its own text rather than overflowing. */
    .chip-row--welcome,
    .chip-row--thread {
        flex-wrap: wrap;
        overflow: visible;
        gap: 0.4375rem;
    }

    .chip-row--welcome {
        justify-content: center;
    }

    .chip {
        max-width: 100%;
        padding: 0.4375rem 0.875rem;
        white-space: normal;
        text-align: left;
        line-height: 1.35;
    }
}

/* ---- short screens: a phone with its keyboard open
 * The page shrinks to the space above the keyboard (see the viewport meta in
 * layouts/chat-page.html). The welcome drops its badge and subtitle and
 * shrinks its heading so the question box still fits, and anything taller
 * scrolls inside the welcome instead of pushing the header off the top. */
@media (max-width: 767.98px) and (max-height: 600px) {
    .welcome {
        justify-content: flex-start;
        overflow-y: auto;
        min-height: 0;
        padding-top: 0.5rem;
        padding-bottom: 1rem;
    }

    .welcome__badge,
    .welcome__sub {
        display: none;
    }

    /* The glow is wider and taller than the screen; inside a scrolling
     * welcome it would only add empty scroll room. */
    .welcome::before {
        display: none;
    }

    .welcome__title {
        font-size: 1.75rem;
    }

    .welcome__composer {
        margin-top: 1rem;
    }

    .chip-row--welcome {
        margin-top: 0.75rem;
    }
}

@media (max-width: 767.98px) and (max-height: 420px) {
    .welcome__title {
        display: none;
    }

    .welcome__composer {
        margin-top: 0.25rem;
    }
}