/**
 * Ambassador CTA. Speech bubble, last block on the listing page.
 * Mock palette mapped onto theme tokens.
 */
.cul-cta {
    --c-navy: var(--cul-brand, #1B3A5C);
    --c-navy-dk: var(--cul-brand-hover, #14304d);
    --c-orange: var(--cul-accent, #E87722);
    --c-head: var(--cul-brand, #1B3A5C);
    --c-ink: #2C3E50;
    --c-ink-soft: #64798C;
    --c-line: #E3E9EF;
    --c-accent: #0F6B7B;
    --c-accent-wash: #E6F2F4;
    --c-green: #2F9E63;
    --c-r: 5px;
    --c-tap: 44px;

    margin: 24px 0 0;
    display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
    font-family: var(--cul-font, 'DM Sans', system-ui, sans-serif);
    color: var(--c-ink);
}
.cul-cta *, .cul-cta *::before, .cul-cta *::after { box-sizing: border-box; }

.cul-cta__av {
    width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; object-fit: cover;
    background: linear-gradient(140deg, #2F5FA8, var(--c-orange));
    color: #fff; font-size: 14px; font-weight: 700;
    font-family: var(--cul-font-display, 'Poppins', sans-serif);
}

/* The 3px top-left corner is what points the bubble at the avatar. */
.cul-cta__bub {
    background: #fff; border: 1px solid var(--c-line);
    border-radius: 14px; border-top-left-radius: 3px;
    padding: 20px 24px; min-width: 0;
}
.cul-cta__name { font-size: 13px; color: var(--c-ink-soft); margin: 0 0 10px; }
.cul-cta__name b { color: var(--c-head); font-weight: 650; }

.cul-cta__turns { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.cul-cta__say { font-size: 16.5px; color: var(--c-head); line-height: 1.5; margin: 0; max-width: 60ch; }
.cul-cta__say span { color: var(--c-ink-soft); font-weight: 400; }
/* The ambassador's follow-up turns, smaller than the opener. */
.cul-cta__sm { font-size: 15px; color: var(--c-head); margin: 0; max-width: 60ch; }
.cul-cta__sm span { color: var(--c-ink-soft); }
/* The resident's own replies, right aligned. */
.cul-cta__me {
    align-self: flex-end; max-width: 80%;
    background: var(--c-accent-wash); color: var(--c-accent);
    border: 1px solid #C9E2E6; border-radius: 12px; border-bottom-right-radius: 3px;
    padding: 8px 13px; font-size: 14.5px; font-weight: 600; margin: 0;
    overflow-wrap: anywhere;
}

.cul-cta__ask { display: flex; gap: 9px; flex-wrap: wrap; }
input.cul-cta__field, input.cul-cta__more {
    flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
    min-width: 230px; width: auto; min-height: 48px; padding: 0 15px;
    border: 1px solid var(--c-line); border-radius: var(--c-r);
    font: inherit; font-size: 15px; color: var(--c-head); background: #fff;
}
input.cul-cta__field::placeholder, input.cul-cta__more::placeholder { color: #9AA9B6; }
input.cul-cta__field:focus, input.cul-cta__more:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; border-color: transparent; }
.cul-cta__ask button {
    flex: 0 0 auto;
    border: 0 !important; background: var(--c-navy) !important; color: #fff !important;
    border-radius: var(--c-r); min-height: 48px; padding: 0 22px;
    font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.cul-cta__ask button:hover { background: var(--c-navy-dk) !important; }
.cul-cta__ask button[disabled] { opacity: 0.6; cursor: default; }

/* Skip is a real button beside the field, not a faint link — skipping still
   completes the request, so it must not look like giving up. */
.cul-cta__skip {
    flex: 0 0 auto;
    background: none !important; border: 0 !important;
    color: var(--c-ink-soft) !important; font: inherit; font-size: 13.5px;
    font-weight: 600; cursor: pointer; text-decoration: underline;
    padding: 0 8px; min-height: 48px;
}
.cul-cta__skip:hover { color: var(--c-head) !important; }

.cul-cta__fine { margin: 11px 0 0; font-size: 12.5px; color: var(--c-ink-soft); }
.cul-cta__st { display: inline-flex; align-items: center; gap: 6px; color: var(--c-green); font-weight: 650; }
.cul-cta__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-green); }
.cul-cta__consent { margin: 10px 0 0; font-size: 12px; color: var(--c-ink-soft); max-width: 62ch; line-height: 1.5; }

.cul-cta__done {
    display: flex; align-items: center; gap: 11px;
    background: #EEF7F2; border: 1px solid #CBE8D8; border-radius: var(--c-r);
    padding: 14px 16px; font-size: 14.5px; color: #22694A;
}
.cul-cta__done svg { color: var(--c-green); flex: 0 0 auto; }

.cul-cta__again { margin: 12px 0 0; }
.cul-cta__again p { margin: 0 0 10px; font-size: 14.5px; color: var(--c-head); }
.cul-cta__again p span { color: var(--c-ink-soft); }

.cul-cta__err { margin: 10px 0 0; font-size: 13px; color: #B3261E; font-weight: 600; }

/* `hidden` is a UA style and loses to any author `display` — restate it, or
   every step of the flow renders at once on page load. */
.cul-cta__done[hidden], .cul-cta__again[hidden],
.cul-cta__consent[hidden], .cul-cta__err[hidden] { display: none !important; }

@media (max-width: 760px) {
    .cul-cta { grid-template-columns: 1fr; gap: 12px; }
    input.cul-cta__field, input.cul-cta__more { min-width: 0; flex-basis: 100%; width: 100%; }
    .cul-cta__ask button { width: 100%; min-height: var(--c-tap); }
    /* Skip stays full width and obvious rather than shrinking to a sliver. */
    .cul-cta__skip { width: 100%; min-height: var(--c-tap); text-align: center; }
    .cul-cta__bub { padding: 18px 16px; }
    .cul-cta__say { font-size: 15.5px; }
}

/* Avatar and name link to the ambassador's profile. */
.cul-cta__avlink { display: block; text-decoration: none !important; border-radius: 50%; }
.cul-cta__avlink:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.cul-cta__namelink { text-decoration: none !important; }
.cul-cta__namelink b { color: var(--c-head); }
.cul-cta__namelink:hover b { color: var(--c-accent); text-decoration: underline; }
.cul-cta__avlink:hover .cul-cta__av { filter: brightness(1.08); }
.cul-cta__av { transition: filter 0.15s ease; }