/**
 * DeVito Showing Assistant — Widget Styles
 * Matches the DeVito theme: #CE011F red, #1a2332 navy, DM Sans / Playfair Display
 * @version 1.0.0
 */

/* ── Floating trigger button ───────────────────────────────── */
#devito-showing-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9998;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #CE011F;
    color: #fff;
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(206, 1, 31, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#devito-showing-fab:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 22px rgba(206, 1, 31, 0.5);
    background: #a8011a;
}

#devito-showing-fab span:not(.fab-pulse) {
    display: none; /* hide text label — icon only */
}

#devito-showing-fab svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

#devito-showing-fab .fab-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    margin-left: 6px;
    animation: devito-pulse 2s infinite;
}

@keyframes devito-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.75); }
}

/* ── Chat widget container ─────────────────────────────────── */
#devito-showing-widget {
    position: fixed;
    bottom: 96px;
    right: 28px;
    z-index: 9999;
    width: 380px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 48px rgba(26, 35, 50, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px) scale(0.97);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
    max-height: 560px;
}

#devito-showing-widget.is-open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: all;
}

/* ── Widget header ─────────────────────────────────────────── */
.dsw-header {
    background: #1a2332;
    color: #fff;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.dsw-header-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #CE011F;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dsw-header-avatar svg {
    width: 20px;
    height: 20px;
    color: #fff;
}

.dsw-header-info {
    flex: 1;
    min-width: 0;
}

.dsw-header-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 2px;
}

.dsw-header-status {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.65);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Reviews link lives INSIDE the status line (one row, not three). */
.dsw-header-reviews {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    opacity: .95;
}
.dsw-header-reviews:hover { opacity: 1; text-decoration: underline; }
.dsw-rev-stars { color: #FFC83D; letter-spacing: 0.5px; font-size: 0.7rem; }

.dsw-status-dot {
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: 50%;
    display: inline-block;
}

.dsw-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    display: flex;
    align-items: center;
}

.dsw-close:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

.dsw-close svg {
    width: 18px;
    height: 18px;
}

/* New-chat / reset (matches close styling) */
.dsw-reset {
    background: none;
    border: none;
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    display: flex;
    align-items: center;
}
.dsw-reset:hover { color: #fff; background: rgba(255,255,255,0.1); }
.dsw-reset svg { width: 17px; height: 17px; }

/* Keep Google's reCAPTCHA v3 badge from colliding with the chat FAB (bottom-right).
   Move it to the bottom-left; it still satisfies Google's visibility requirement. */
.grecaptcha-badge {
    left: 14px !important;
    right: auto !important;
    z-index: 2147483000; /* below the chat widget/modal */
}

/* ── Property context badge ────────────────────────────────── */
.dsw-property-badge {
    background: #f7fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 10px 18px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    color: #4a5568;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.dsw-property-badge svg {
    width: 14px;
    height: 14px;
    color: #CE011F;
    flex-shrink: 0;
}

.dsw-property-badge strong {
    color: #1a2332;
}

/* ── Messages area ─────────────────────────────────────────── */
.dsw-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* No scroll-behavior:smooth here — it only governs PROGRAMMATIC scrolls,
       and a smooth scroll-to-bottom was being abandoned when the panel
       re-laid out, hiding the newest reply. The JS scrolls instantly. */
}

.dsw-messages::-webkit-scrollbar {
    width: 4px;
}

.dsw-messages::-webkit-scrollbar-track {
    background: transparent;
}

.dsw-messages::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
}

/* ── Individual message bubbles ────────────────────────────── */
.dsw-msg {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    max-width: 100%;
}

.dsw-msg--assistant {
    align-self: flex-start;
}

.dsw-msg--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.dsw-msg__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1a2332;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 2px;
}

.dsw-msg__avatar svg {
    width: 14px;
    height: 14px;
    color: #fff;
}

.dsw-msg__bubble {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: 16px;
    max-width: 260px;
    word-break: break-word;
}

/* markdown-rendered emphasis/links in assistant bubbles */
.dsw-msg__bubble a { color: #CE011F; font-weight: 600; text-decoration: underline; }
.dsw-msg__bubble strong { font-weight: 700; }
/* Bulleted answers — compact: the bubble is ~260px wide on a phone. */
.dsw-msg__bubble .dsw-list { margin: 4px 0; padding-left: 18px; }
.dsw-msg__bubble .dsw-list li { margin: 0 0 3px; }
.dsw-msg__bubble .dsw-list li:last-child { margin-bottom: 0; }

.dsw-msg--assistant .dsw-msg__bubble {
    background: #f1f5f9;
    color: #1a2332;
    border-bottom-left-radius: 4px;
}

.dsw-msg--user .dsw-msg__bubble {
    background: #CE011F;
    color: #fff;
    border-bottom-right-radius: 4px;
}

/* ── Typing indicator ──────────────────────────────────────── */
.dsw-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    background: #f1f5f9;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    width: fit-content;
}

.dsw-typing span {
    width: 6px;
    height: 6px;
    background: #94a3b8;
    border-radius: 50%;
    animation: dsw-bounce 1.2s infinite;
}

.dsw-typing span:nth-child(2) { animation-delay: 0.2s; }
.dsw-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dsw-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30%           { transform: translateY(-5px); }
}

/* ── Complete state ────────────────────────────────────────── */
.dsw-complete {
    padding: 20px 18px;
    text-align: center;
    flex-shrink: 0;
}

.dsw-complete__icon {
    width: 48px;
    height: 48px;
    background: #dcfce7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.dsw-complete__icon svg {
    width: 24px;
    height: 24px;
    color: #16a34a;
}

.dsw-complete h4 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1rem;
    color: #1a2332;
    margin: 0 0 6px;
}

.dsw-complete p {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    color: #718096;
    margin: 0;
    line-height: 1.5;
}

/* ── Instant acknowledgement ("Let me look that up…") ───────────
   Shown the moment the visitor sends, above the typing dots, so a multi-second
   tool turn never feels like nothing is happening. Purely client-side. Muted on
   purpose: it is a status line, not an answer.                                */
.dsw-ack {
    margin: 0 0 6px;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #64748b;
    font-style: italic;
}

/* ── Required MLS / tax disclosures ─────────────────────────────
   IDX Rule 22: required items must appear "in a readily visible color and
   typeface not smaller than the median used in the display of listing data."
   The project floor is 13px at full text colour — do NOT shrink these to save
   vertical space, do not grey them out, and do not hide them behind a toggle.
   They accumulate once per conversation (like one strip per page), which is
   what keeps them affordable on a phone.                                     */
/* Plain text at the END of the message scroller — no pinned box, no inner
   scrollbox, no border/background. Size and colour are unchanged (13px, full
   text colour). */
.dsw-notices {
    flex-shrink: 0;
    padding: 4px 2px 0;
}
.dsw-notices[hidden] { display: none; }
.dsw-notice {
    font-size: 13px;            /* the floor — not a preference */
    line-height: 1.45;
    color: #2d3748;             /* full text colour, never grey-on-grey */
    margin: 0 0 6px;
}
.dsw-notice:last-child { margin-bottom: 0; }

/* ── Input area ────────────────────────────────────────────── */
.dsw-input-area {
    padding: 12px 14px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-shrink: 0;
    background: #fff;
}

.dsw-input {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 9px 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    color: #1a2332;
    resize: none;
    outline: none;
    transition: border-color 0.15s;
    max-height: 80px;
    line-height: 1.4;
    background: #f8fafc;
}

.dsw-input:focus {
    border-color: #CE011F;
    background: #fff;
}

.dsw-input::placeholder {
    color: #a0aec0;
}

.dsw-send {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #CE011F;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.1s;
}

.dsw-send:hover {
    background: #a8001a;
    transform: scale(1.05);
}

.dsw-send:disabled {
    background: #e2e8f0;
    cursor: not-allowed;
    transform: none;
}

.dsw-send svg {
    width: 16px;
    height: 16px;
    color: #fff;
}

/* ── TCPA disclaimer ───────────────────────────────────────── */
/* TCPA consent ("Msg & data rates may apply. Reply STOP to opt out") -- was
   0.68rem/#a0aec0 = 2.26:1 on white, under the 13px floor and WCAG AA.
   Consent language has to be readable to be consent. #4a5568 reads ~7.5:1. */
.dsw-disclaimer {
    padding: 6px 14px 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: #4a5568;
    text-align: center;
    flex-shrink: 0;
}

/* ── Mobile adjustments ────────────────────────────────────── */
@media (max-width: 480px) {
    #devito-showing-widget {
        right: 12px;
        left: 12px;
        width: auto;
        bottom: 84px;
        /* On a short phone viewport (iPhone SE with browser chrome ≈ 550px) the
           560px panel ran off the top and the header — with the close button —
           was unreachable. Fit the visible viewport instead. */
        max-height: calc(100vh - 100px);
        max-height: calc(100dvh - 100px);
    }

    #devito-showing-fab {
        right: 16px;
        bottom: 20px;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   LD-A3 / CR-A7 / DM-A6 — CHAT FAB vs. STICKY ACTION BAR
   Three separate audits reported the FAB overlapping CTAs at the bottom of
   mobile viewports (listing detail, county reports, long seller reports).
   Fixed once, here, rather than per template.

   The FAB is fixed bottom-right at z-index 9998. Any page that renders a
   sticky bottom action bar sets `body.has-sticky-cta`, and the FAB lifts
   clear of it and shrinks to a mini pill so it never covers a tap target.
   `--devito-sticky-cta-h` is declared by whichever component owns the bar,
   so this file never has to know the bar's height.
   ══════════════════════════════════════════════════════════════════════ */
body.has-sticky-cta #devito-showing-fab {
    bottom: calc(var(--devito-sticky-cta-h, 60px) + 14px);
}
body.has-sticky-cta #devito-showing-widget {
    bottom: calc(var(--devito-sticky-cta-h, 60px) + 74px);
}

@media (max-width: 767px) {
    body.has-sticky-cta #devito-showing-fab {
        width: 46px;
        height: 46px;
        bottom: calc(var(--devito-sticky-cta-h, 60px) + 10px);
        right: 12px;
    }
    body.has-sticky-cta #devito-showing-fab svg { transform: scale(.85); }
}

/* Respect the iOS home-indicator inset so the bar and FAB are both reachable. */
@supports (padding: max(0px)) {
    body.has-sticky-cta #devito-showing-fab {
        bottom: calc(var(--devito-sticky-cta-h, 60px) + 14px + env(safe-area-inset-bottom, 0px));
    }
}

/* ══════════════════════════════════════════════════════════════════════
   CONCIERGE — LISTING CARDS IN CHAT
   Rendered by appendListingCards() in showing-assistant.js when the
   assistant runs an in-chat listing search. Compact, tappable, one column
   (mobile-first — the widget itself is ~340px wide).
   ══════════════════════════════════════════════════════════════════════ */
.dsw-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 10px 40px;   /* aligns under assistant bubbles (avatar gutter) */
    max-width: calc(100% - 48px);
}
.dsw-card {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(26, 35, 50, .07);
    transition: box-shadow .15s ease, transform .15s ease;
}
.dsw-card:hover { box-shadow: 0 3px 10px rgba(26, 35, 50, .13); transform: translateY(-1px); }
.dsw-card__img {
    flex: 0 0 86px;
    min-height: 72px;
    background: #edf2f7;
}
.dsw-card__img img { width: 86px; height: 100%; object-fit: cover; display: block; }
.dsw-card__body {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-family: 'DM Sans', sans-serif;
}
.dsw-card__price {
    font-weight: 700;
    font-size: 0.9rem;
    color: #1a2332;
    display: inline-block;
}
.dsw-card__status {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #b91c1c;
    font-weight: 600;
}
.dsw-card__addr {
    font-size: 0.76rem;
    color: #2d3748;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dsw-card__meta { font-size: 0.7rem; color: #718096; }

/* Link to the full disclosures page — same size/colour as the notice text. */
.dsw-notice__more { color: #CE011F; text-decoration: underline; font-weight: 600; }

/* ── Sign-up card (gated sold prices) — compact: one title + one button row ── */
.dsw-signup {
    margin-left: 36px;          /* aligns with assistant bubbles (avatar width) */
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}
.dsw-signup__title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #1a2332;
}
.dsw-signup__row { display: flex; align-items: center; gap: 14px; }
.dsw-signup__btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 18px;
    background: #CE011F;
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.dsw-signup__btn:hover { background: #a8001a; }
.dsw-signup__link { font-size: 13px; color: #CE011F; font-weight: 600; text-decoration: underline; }