/* input(152,15): run-time error CSS1019: Unexpected token, found 'selector('
input(152,43): run-time error CSS1025: Expected comma or open brace, found ')' */
/* Chat search module (#406 T3, inventory §D). Vanilla CSS (no Tailwind utility classes), but the
   brand colors reference the Tailwind @theme tokens with the raw Figma value as fallback — the
   module renders only on the modern layouts (see _Layout.cshtml's useNewLayout branch), which
   always load tailwind-output.css, and chatbot-widget.css set the same var(+fallback) precedent.
   A rebrand then lands here via the theme, not a second hand-edit. */

.chat-search-module {
    --csm-blue: var(--color-spg-blue, #006B93);
    --csm-grey: var(--color-spg-grey, #373938);
    --csm-stone: var(--color-stone, #FBFBFB);
    --csm-slate: var(--color-slate, #717276);
    --csm-bot-bg: #E6F1F5;
    --csm-divider: #E9E9E9;
    --csm-scrollbar-track: #D9D9D9;
    --csm-z-overlay: 45;
    --csm-z-panel: 46;
    font-family: "Neutraface Text", "Helvetica Neue", Arial, sans-serif;
}

.chat-search-module,
.chat-search-module * {
    box-sizing: border-box;
}

/* Finding 2 (#406 code review): the module's overlay/panel deliberately sit at z-45/46, BELOW
   the corporate header (z-50) and community header/navigation (z-98/99) — headers must stay
   visually crisp above the blur overlay, per design, so we do not raise the module's z-index.
   That leaves the headers (and, if already open, their nav panels) fully clickable while the
   module is "modal" over them, so pointer-events is switched off on them here instead.
   The scroll lock is a body class, not the module's own inline document.body.style.overflow:
   other components (corporate-nav.js, community-navigation.js) write that inline style directly
   on their own open/close, and since it's a single property on one element, whichever script
   touches it last wins — closing THEIR nav after opening this module would silently unlock
   background scroll out from under the still-open module, and vice versa. A class isn't subject
   to that last-write-wins collision. */
body.chat-module-open {
    overflow: hidden;
}

body.chat-module-open #corporate-header,
body.chat-module-open #corporate-nav-panel,
body.chat-module-open #corporate-nav-overlay,
body.chat-module-open .community-header,
body.chat-module-open .community-navigation,
body.chat-module-open #navOverlay {
    pointer-events: none;
}

.chat-search-module__overlay {
    position: fixed;
    inset: 0;
    z-index: var(--csm-z-overlay);
    background: rgba(55, 57, 56, 0.45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.chat-search-module__overlay[hidden] {
    display: none;
}

.chat-search-module__panel {
    position: fixed;
    left: 50%;
    top: 260px; /* fallback before JS centres the panel (desktop) or pins it under the header (mobile) */
    transform: translateX(-50%);
    z-index: var(--csm-z-panel);
    width: 918px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px); /* fallback; JS recomputes against the actual top on open/resize */
    /* Flex column, not a scrolling block: the panel itself must never scroll, or a long
       conversation can push the input row past the viewport (see chat-search-module.js
       positionPanel()). Only .chat-search-module__messages (flex: 1 1 auto below) scrolls;
       topbar/hairline/form are flex: 0 0 auto so they always keep their full natural size. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--csm-stone);
    border: 2px solid var(--csm-blue);
    border-radius: 0;
    box-shadow: none;
    padding: 20px 23px 40px;
}

.chat-search-module__panel[hidden] {
    display: none;
}

.chat-search-module--conversation .chat-search-module__panel {
    padding: 20px 44px 40px;
}

.chat-search-module__topbar {
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.chat-search-module__close {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--csm-grey);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

.chat-search-module__close:hover,
.chat-search-module__close:focus-visible {
    text-decoration: underline;
    outline: none;
}

.chat-search-module__hairline {
    flex: 0 0 auto;
    margin-top: 16px;
    border-top: 1px solid var(--csm-grey);
}

.chat-search-module__hairline[hidden] {
    display: none;
}

.chat-search-module__messages {
    /* The panel's one flexible/scrollable region (Finding 1): grows to fill whatever room the
       panel has, up to the 390px cap below, and — critically — can also shrink past it (min-height:
       0 overrides flexbox's default auto-sizing floor) on short viewports, so topbar/hairline/form
       above and below it never get squeezed or clipped. */
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 16px;
    max-height: 390px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Figma keeps a 10px gutter between the message column and the scrollbar track (the comps'
       Frame 3596 lays out messages + scrollbar as a horizontal pair with gap 10). */
    padding-right: 10px;
}

/* Firefox fallback only. Chromium honors the standard scrollbar-width/scrollbar-color pair OVER
   ::-webkit-scrollbar when both are set (since Chrome 121), which replaced the comp's rounded
   flush track with the native boxy arrow-button scrollbar (QA round 2 PAN-05) — so the standard
   properties must never reach a browser that supports the pseudo-element styling below. */
@supports not selector(::-webkit-scrollbar) {
    .chat-search-module__messages {
        scrollbar-width: thin;
        scrollbar-color: #ffffff var(--csm-scrollbar-track);
    }
}

.chat-search-module__messages[hidden] {
    display: none;
}

.chat-search-module__messages::-webkit-scrollbar {
    width: 8px;
}

.chat-search-module__messages::-webkit-scrollbar-track {
    background: var(--csm-scrollbar-track);
    border-radius: 50px;
}

.chat-search-module__messages::-webkit-scrollbar-thumb {
    background: #ffffff;
    border: 1px solid var(--csm-scrollbar-track);
    border-radius: 50px;
}

.chat-search-module__message {
    display: flex;
    width: 100%;
}

.chat-search-module__message--assistant {
    justify-content: flex-start;
}

.chat-search-module__message--user {
    justify-content: flex-end;
}

.chat-search-module__message-content {
    max-width: 54%;
}

.chat-search-module__bubble {
    padding: 12px 16px;
    border-radius: 0;
    background: var(--csm-bot-bg);
    color: var(--csm-grey);
    font-size: 17px;
    line-height: 25.5px;
    font-weight: 400;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.chat-search-module__message--user .chat-search-module__bubble {
    background: var(--csm-blue);
    color: #ffffff;
}

.chat-search-module__bubble a {
    color: inherit;
    text-decoration: underline;
}

.chat-search-module__sources {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 6px;
    padding-left: 2px;
    color: var(--csm-grey);
    font-size: 13px;
    line-height: 1.35;
}

.chat-search-module__sources-label {
    font-weight: 600;
}

.chat-search-module__sources a {
    color: var(--csm-blue);
    text-decoration: underline;
    text-underline-offset: 0.14em;
    overflow-wrap: anywhere;
}

.chat-search-module__sources a:focus-visible {
    outline: 2px solid var(--csm-blue);
    outline-offset: 2px;
}

/* CTA chips (inventory §E state 6: "View Apartments" / "Contact us" follow-up buttons under a
   conversation, comp shows them mobile-only but the style is meant to be reused on desktop too
   once replies carry CTAs). Dormant — /Chatbot/Chat's response has no CTA payload today, so
   nothing renders this class (see the comment at appendAssistantReply() in
   chat-search-module.js). Kept ready so wiring it later is a JS-only change. */
.chat-search-module__cta-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 44px;
    padding: 15px 25px;
    border: 1.5px solid var(--csm-blue);
    border-radius: 0;
    background: transparent;
    color: var(--csm-blue);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

.chat-search-module__typing {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 52px;
    min-height: 20px;
}

.chat-search-module__typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--csm-blue);
    animation: chat-search-module-typing 1.2s infinite ease-in-out;
}

.chat-search-module__typing-dot:nth-of-type(2) {
    animation-delay: 120ms;
}

.chat-search-module__typing-dot:nth-of-type(3) {
    animation-delay: 240ms;
}

@keyframes chat-search-module-typing {
    0%, 60%, 100% {
        opacity: 0.35;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-0.2rem);
    }
}

.chat-search-module__visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.chat-search-module__form {
    flex: 0 0 auto;
    margin-top: 20px;
}

.chat-search-module--conversation .chat-search-module__form {
    margin-top: 16px;
    border-top: 1px solid var(--csm-divider);
    padding-top: 20px;
}

.chat-search-module__field-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 44px;
    border: 1px solid var(--csm-slate);
    background: #ffffff;
}

.chat-search-module__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 47px 0 16px;
    border: 0;
    background: transparent;
    color: var(--csm-grey);
    font-family: inherit;
    font-size: 17px;
    line-height: 25.5px;
    font-weight: 400;
}

.chat-search-module__input:focus {
    outline: none;
}

.chat-search-module__input:disabled {
    cursor: wait;
    opacity: 0.65;
}

/* Native placeholder only carries text once the module is in conversation mode (single-style
   "Type your next message..."); the initial bold-lead/regular-remainder placeholder is a fake
   overlay (below) because a native placeholder cannot mix font-weights. */
.chat-search-module__input::placeholder {
    color: var(--csm-grey);
    opacity: 1;
}

.chat-search-module__placeholder {
    position: absolute;
    left: 16px;
    right: 47px;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 17px;
    line-height: 25.5px;
    pointer-events: none;
    /* The comp's default-state text-field group sits at 50% opacity (placeholder text AND sparkle
       glyph together) — see QA round 2 PAN-02; the typed-text states are full opacity. */
    opacity: 0.5;
}

.chat-search-module__placeholder[hidden] {
    display: none;
}

.chat-search-module__placeholder-lead {
    color: var(--csm-grey);
    font-weight: 700;
}

.chat-search-module__placeholder-rest {
    color: var(--csm-grey);
    font-weight: 400;
}

.chat-search-module__send {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--csm-blue);
    cursor: pointer;
}

.chat-search-module__send:disabled {
    cursor: wait;
    opacity: 0.65;
}

.chat-search-module__send:focus-visible {
    outline: 2px solid var(--csm-blue);
    outline-offset: -2px;
}

.chat-search-module__send-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-search-module__send-icon--sparkle {
    width: 23px;
    height: 26px;
    color: var(--csm-grey);
    opacity: 0.5; /* matches the placeholder's 50% default-state treatment (PAN-02) */
}

.chat-search-module__send-icon--arrow {
    /* Comp arrow is ~17x17 desktop (24x24 mobile); the 11x11-viewBox export scales up while
       vector-effect="non-scaling-stroke" on its path keeps the stroke at the comp's 2px. */
    width: 17px;
    height: 17px;
}

.chat-search-module__send-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.chat-search-module__send-icon[hidden] {
    display: none;
}

/* Typing (pre-conversation) or conversation mode: the sparkle is replaced by the attached
   outlined send cell — a 44px square sharing the field's border (inventory §D state 2/5). */
.chat-search-module__field-wrap--active .chat-search-module__input {
    padding-right: 16px;
}

.chat-search-module__field-wrap--active .chat-search-module__send {
    position: static;
    flex: 0 0 44px;
    border-left: 1px solid var(--csm-slate);
}

/* #433 client feedback: "Start a new chat" reset link — hidden until a conversation exists,
   matching the pattern updateConversationState() already uses for the hairline/message log
   (chat-search-module--conversation on the root). */
.chat-search-module__reset {
    display: none;
    margin: 12px auto 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--csm-grey);
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.3;
    text-decoration: underline;
    cursor: pointer;
}

.chat-search-module--conversation .chat-search-module__reset {
    display: block;
}

.chat-search-module__reset:focus-visible {
    outline: 2px solid var(--csm-blue);
    outline-offset: 2px;
}

@media (max-width: 1023px) {
    /* Mobile chat module (#406 T4, inventory §E): near-full-width panel pinned close to the
       header, tuned padding/gaps, and a taller initial input (2-line placeholder wrap) that
       shrinks once a conversation starts. Breakpoint matches the site's lg cutoff — the same one
       that swaps the header bar for the "Ask" pill (chat-search-bar.css) — not the 767px value
       T3 shipped as a placeholder.

       top/max-height are still computed live by positionPanel() in chat-search-module.js (it
       just uses a smaller preferred offset from the header below the mobileBreakpoint, and reads
       window.visualViewport so the keyboard can't cover the input row); the values below are only
       the fallback for the instant before that JS runs on open.

       Finding 4 (#406 code review): max-height subtracts ONLY the fixed top/bottom margins from
       --csm-visual-height, not --csm-keyboard-inset too — --csm-visual-height already equals the
       keyboard-shrunken visualViewport height (see chat-search-module.js handleViewportChange()),
       so also subtracting the inset double-counted the keyboard and collapsed this fallback height
       too far. */
    .chat-search-module__panel {
        left: 22px;
        right: 22px;
        top: 90px;
        transform: none;
        width: auto;
        max-width: none;
        max-height: calc(var(--csm-visual-height, 100vh) - 90px - 24px);
        padding: 10px 22px 22px;
        gap: 8px;
    }

    .chat-search-module__hairline {
        margin-top: 10px;
    }

    .chat-search-module__messages {
        margin-top: 10px;
    }

    .chat-search-module__message-content {
        max-width: 84%;
    }

    .chat-search-module__form {
        margin-top: 10px;
    }

    .chat-search-module--conversation .chat-search-module__form {
        margin-top: 10px;
        padding-top: 10px;
    }

    /* Default (state 1): field 336x74 in the comp — the placeholder runs at the comp's mobile
       15px/18 type (not desktop's 17/25.5) so its three lines (bold lead on its own line + the
       wrapping rest, QA round 2 #3) fit inside 74px. Typing/filled/conversation states (--active)
       drop to 58px once a real single-line message is being composed (state 2+). */
    .chat-search-module__field-wrap {
        height: 74px;
    }

    .chat-search-module__field-wrap--active {
        height: 58px;
    }

    .chat-search-module__input {
        white-space: normal;
        font-size: 15px;
        line-height: 18px;
        /* Content box pinned to the field's first text line (top 10px, one 18px line) so the
           caret sits on the placeholder's lead line instead of floating vertically centered
           between its lines (QA round 2 #4). The --active override below restores centered
           single-line composition once the field shrinks to 58px. */
        padding: 10px 63px 46px 16px;
    }

    .chat-search-module__field-wrap--active .chat-search-module__input {
        padding: 0 16px;
    }

    /* The fake placeholder overlay (native placeholder can't mix font-weights — see the
       lead/rest rule below) wraps across the taller 74px field instead of the desktop
       single-line + ellipsis treatment. Right offset clears the enlarged mobile sparkle. */
    .chat-search-module__placeholder {
        top: 10px;
        bottom: 10px;
        right: 63px;
        transform: none;
        display: block;
        white-space: normal;
        text-overflow: clip;
        font-size: 15px;
        line-height: 18px;
    }

    /* Mobile comp (§E) breaks after the bold lead (U+2028 in the Figma text node): lead becomes
       its own line and the desktop nbsp joiner disappears (QA round 2 #3). */
    .chat-search-module__placeholder-lead {
        display: block;
    }

    .chat-search-module__placeholder-sep {
        display: none;
    }

    /* Mobile default-state sparkle is 31x35 in the comp — larger than desktop's 23x26 (QA
       round 2 #3) — and vertically centered in the 74px field (the base rule pins the 44px
       send box to top:0, which only looks centered inside desktop's 44px field). */
    .chat-search-module__send-icon--sparkle {
        width: 31px;
        height: 35px;
    }

    .chat-search-module__field-wrap:not(.chat-search-module__field-wrap--active) .chat-search-module__send {
        top: 50%;
        transform: translateY(-50%);
    }

    /* Active send cell is 58x58 in the mobile comp ("Go" frame) — full field height, so its
       shared border-left draws the complete box, unlike the old centered 44px cell whose short
       divider left the box open (QA round 2 #5). Arrow scales to the comp's 24px. */
    .chat-search-module__field-wrap--active .chat-search-module__send {
        flex: 0 0 58px;
        width: 58px;
        height: auto;
        align-self: stretch;
    }

    .chat-search-module__send-icon--arrow {
        width: 24px;
        height: 24px;
    }
}