/*
    The AI assistant widget.

    Loaded only on pages where the assistant is switched on - it is its own vite
    entry rather than part of the shared frontend bundle, so a site that never
    enables it downloads none of this.

    The rule throughout: colour, type and rounding come from the site, not from
    here. Anything that reaches for a hex value it made up is a bug, because the
    whole point is that the assistant looks like part of the site it sits on.
    Greys for borders and secondary text are the exception - those are furniture
    rather than brand.
*/

.devato-chat {
    /* Roundedness comes from the account's setting through .roundable, which
       reads --devato-radius. A site with rounding switched off has no such
       variable, so the fallback here is what square looks like. */
    --devato-chat-radius: var(--devato-radius, 0);

    /* Lined up with the page's own content edge instead of the window's.
       Published by the widget from the widest .container it can find, because
       the container's width is a Tailwind breakpoint thing and reading it here
       would mean copying that table and keeping it in step.

       Fixed to the viewport, the launcher sat hard against the right of the
       screen on a wide monitor while everything else - including the button it
       is meant to line up with - stopped at the container. The fallback is the
       old value, for a page with no container to measure. */
    right: var(--devato-chat-inset, 1.25rem);

    /* Where this sits with nothing under it. When a sticky footer is on screen
       the widget overrides this to centre against it - see publishFootprint. */
    bottom: var(--devato-chat-bottom, 0.75rem);

    /* High enough to clear anything the site or a third-party script puts on the
       page. It lives here rather than as a z- class in the markup for the same
       reason the edges do: one place decides where this sits. */
    z-index: 2147483000;
}

/* Under the modal, not over it.
   ------------------------------------------------------------------

   A modal dims the whole page and takes it over; a launcher floating above that
   dimming is offering a second conversation on top of the one the visitor is
   already having. So it goes beneath the mask - still there, greyed out with
   everything else, and back on top the moment the modal closes.

   Ducking under rather than hiding is deliberate: the visitor can see where it
   went, and nothing moves when it comes back.

   Keyed on the body's scroll lock, which is what the modal system sets - the
   same signal the Property Finder bar drops out of the way on. The number is one
   below the .devato-modal z-index in components/modals.css; anything under the
   mask is under the mask, but staying next to it keeps this above the rest of
   the page, which is where it was. */
body.is-scroll-locked .devato-chat {
    z-index: 99998;
}

/* Holding the themes off
   ------------------------------------------------------------------

   This renders inside somebody else's stylesheet, on three layouts and whatever
   custom CSS the account has written on top of them. A theme that centres text
   in a section, or sets a display line-height, or gives every paragraph a
   margin, applies to the panel too - which is how the greeting ended up centred
   in a box twice the height it needed.

   Deliberately narrow: the type and the colours SHOULD come from the site, and
   do. What is reset here is only layout that would break a chat bubble. */

.devato-chat,
.devato-chat p,
.devato-chat div,
.devato-chat span,
.devato-chat button,
.devato-chat textarea {
    text-align: left;
    letter-spacing: normal;
    text-transform: none;
    box-sizing: border-box;
}

.devato-chat p {
    margin: 0;
}

/* ...except the launcher's label, which is a button label rather than chat
   furniture. The reset above lands on the span directly and so beats the
   tracking and casing inherited from .devato-button, which left "Chat to us"
   set differently from the identical button in the Property Finder bar. */
.devato-chat .devato-chat-launcher-label {
    letter-spacing: inherit;
    text-transform: inherit;
    font-size: inherit;
    font-weight: inherit;
}

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

/* Colour, font and hover all come from .devato-button and the bg-cta/text-light
   utilities in the markup, so this is the same button as the one in the Property
   Finder bar rather than a lookalike that drifts away from it.

   The shadow is the exception and stays here: this one floats over whatever
   photograph happens to be behind it, and without it the button disappears
   against a light image. It does not change on hover - the hover state itself is
   the shared one. */
.devato-chat-launcher {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
}

.devato-chat-launcher:focus-visible {
    outline: 2px solid var(--devato-cta-bg, #111827);
    outline-offset: 3px;
}

/* On a phone the label costs more room than it earns, and the icon alone is
   unambiguous once it is the only floating control on the page.

   The padding is deliberately left alone. Overriding it here made the launcher a
   different height from the Property Finder bar's button, which is beside it and
   sharing a row at exactly the widths where this rule applies - so the two
   stopped lining up. Keeping py-3/px-4 gives a small square that matches it. */
@media (max-width: 480px) {
    .devato-chat-launcher-label {
        display: none;
    }
}

/* Hidden while the panel is open - the panel has its own close control, and two
   ways to dismiss one thing in the same corner is one too many. */
.devato-chat[data-open="true"] .devato-chat-launcher-wrap {
    display: none;
}

/* The loading state on first open. Without it a slow connection makes the first
   press look like it did nothing, and people press again. */
.devato-chat-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: currentColor;
    animation: devato-chat-spin 0.7s linear infinite;
}

.devato-chat-launcher-wrap[data-loading="true"] .devato-chat-spinner {
    display: block;
}

.devato-chat-launcher-wrap[data-loading="true"] .devato-chat-launcher-icon {
    display: none;
}

.devato-chat-launcher-wrap[data-loading="true"] .devato-chat-launcher {
    cursor: progress;
}

@keyframes devato-chat-spin {
    to { transform: rotate(360deg); }
}

/* The note above the launcher
   ------------------------------------------------------------------

   What a press that could not open the panel says instead of nothing. Pinned
   above the launcher's right edge with a tail pointing down at it, so it reads
   as the button answering rather than as a page-level banner. */
.devato-chat-launcher-wrap {
    position: relative;
}

/* Refused outright and the note dismissed: nothing left to press. */
.devato-chat[data-unavailable="true"] .devato-chat-launcher-wrap {
    display: none;
}

.devato-chat-alert {
    position: absolute;
    right: 0;
    bottom: calc(100% + 14px);
    width: min(300px, calc(100vw - 32px));
    padding: 0.85rem 2.25rem 0.85rem 0.95rem;
    border-radius: var(--devato-chat-radius);
    background: #ffffff;
    color: #111827;
    box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.08), 0 20px 40px -12px rgba(0, 0, 0, 0.35);
    text-align: left;
    animation: devato-chat-alert-in 0.18s ease-out;
}

.devato-chat-alert[hidden] {
    display: none;
}

.devato-chat-alert::after {
    content: '';
    position: absolute;
    right: 22px;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    transform: rotate(45deg);
    box-shadow: 3px 3px 4px -2px rgba(0, 0, 0, 0.12);
}

/* Furniture amber, not the brand colour: this is the one thing on the widget
   that is not the site talking, and it should not look like an offer. */
.devato-chat-alert-text {
    margin: 0;
    padding-left: 1.4rem;
    position: relative;
    font-size: 14px;
    line-height: 1.45;
}

.devato-chat-alert-text::before {
    content: '!';
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    background: #f59e0b;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
}

.devato-chat-alert-ref {
    margin: 0.3rem 0 0;
    padding-left: 1.4rem;
    color: #6b7280;
    font-size: 11.5px;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.devato-chat-alert-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
    margin-top: 0.75rem;
    padding-left: 1.4rem;
}

.devato-chat-alert-actions [hidden] {
    display: none !important;
}

.devato-chat-alert-enquire {
    color: #111827;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.devato-chat-alert-close {
    position: absolute;
    top: 0.35rem;
    right: 0.45rem;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    background: transparent;
    color: #6b7280;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.devato-chat-alert-close:hover {
    color: #111827;
}

@keyframes devato-chat-alert-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .devato-chat-alert {
        animation: none;
    }
}

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

.devato-chat-panel {
    /* A hairline of white between the panel and whatever it is sitting over,
       so it reads as lifted off the page rather than printed on it. */
    box-shadow: 0 0 0 2px #fff, 0 25px 50px -12px rgba(0, 0, 0, 0.35);
}

@media (max-width: 480px) {
    .devato-chat-panel {
        box-shadow: none;
        border-radius: 0 !important;
    }
}

/* Expanded: taller and wider, for a conversation with cards in it. */
.devato-chat-panel[data-expanded="true"] {
    height: calc(100vh - 40px);
    width: 460px;
}

.devato-chat-header {
    background: var(--devato-primary-bg, #111827);
    color: var(--devato-primary-text, #ffffff);
}

.devato-chat-icon-btn {
    background: rgba(255, 255, 255, 0.15);
    color: inherit;
    transition: background-color 0.15s ease;
}

.devato-chat-icon-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

.devato-chat-icon-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* A dark primary colour needs a light scrim on its buttons; a light one needs a
   dark scrim, or the controls vanish into the header. */
.devato-chat-header[data-contrast="dark"] .devato-chat-icon-btn {
    background: rgba(0, 0, 0, 0.08);
}

.devato-chat-header[data-contrast="dark"] .devato-chat-icon-btn:hover {
    background: rgba(0, 0, 0, 0.16);
}

/* The conversation
   ------------------------------------------------------------------ */

.devato-chat-log {
    background: #f8fafc;
    scrollbar-width: thin;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* The opening block is one flex item holding a message and two buttons, so it
   has to lay its own children out. */
.devato-chat-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.devato-chat-log::-webkit-scrollbar {
    width: 6px;
}

.devato-chat-log::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 9999px;
}

/* A turn is the label and the bubble together, so the two stay on the same
   side and move as one when a streamed reply is withdrawn. */

.devato-chat-turn {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    margin-bottom: 0.6rem;
}

.devato-chat-turn-user {
    align-self: flex-end;
    align-items: flex-end;
}

.devato-chat-turn-assistant,
.devato-chat-turn-error {
    align-self: flex-start;
    align-items: flex-start;
}

/* Quiet. It is there to be checked, not read - and on the assistant's side it
   is the standing disclosure that the replies are written by a machine, which
   is worth having on every message rather than once in the small print. */
.devato-chat-speaker {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: #6b7280;
    margin-bottom: 0.22rem;
    padding: 0 0.15rem;
}

.devato-chat-bubble {
    /* A single-digit answer - "2" - otherwise renders as a sliver barely wider
       than the character in it, which reads as a broken bubble rather than a
       short one. */
    min-width: 2.75rem;
    text-align: center;
    padding: 0.6rem 0.85rem;
    font-size: 14px;
    line-height: 1.5;
    /* Long references and pasted URLs must not push the panel sideways. */
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

/* Who said it has to be readable at a glance, without reading it.
   Three signals, so losing one to a theme does not lose the distinction:
   which side it sits on, what colour it is, and whether it has a border. */

.devato-chat-bubble-assistant {
    text-align: left;
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.devato-chat-bubble-user {
    text-align: left;
    background: var(--devato-primary-bg, #111827);
    color: var(--devato-primary-text, #ffffff);
    border: 1px solid var(--devato-primary-bg, #111827);
    font-weight: 500;
}

.devato-chat-bubble-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* The reference number under an error, quieter than the message itself. */
.devato-chat-bubble-ref {
    display: block;
    margin-top: 0.3rem;
    font-size: 11.5px;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

.devato-chat-bubble a {
    color: inherit;
    text-decoration: underline;
}

/* The typing indicator. Three dots rather than a spinner: a spinner reads as
   loading, and this is somebody composing. */
.devato-chat-typing {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 0.2rem 0;
}

.devato-chat-typing span {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: #9ca3af;
    animation: devato-chat-bounce 1.2s infinite ease-in-out;
}

.devato-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.devato-chat-typing span:nth-child(3) { animation-delay: 0.3s; }

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

/* Something actually happened
   ------------------------------------------------------------------

   Not a message - nobody said it - so it takes neither a side nor a speaker.
   It marks the one moment in the conversation where something left the browser
   and reached a person, which is worth more than another sentence saying so. */

.devato-chat-notice {
    align-self: stretch;
    width: 100%;
    margin: 0.1rem 0 0.75rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--devato-radius, 0);
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
    color: #065f46;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

/* A tick, drawn rather than shipped - one less request for one glyph, and it
   takes the colour it sits on. */
.devato-chat-notice::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 9px;
    margin-right: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
}

/* Chips and choices
   ------------------------------------------------------------------ */

/* Tappable, and obviously so.

   These sat next to the greeting as three identically white bordered boxes, so
   nothing said which was a message and which was a button. They now carry the
   site's CTA colour and a chevron - the same signal every other button on the
   site uses - and the assistant's own words stay plain. */

.devato-chat-chip {
    background: #ffffff;
    color: var(--devato-cta-bg, #111827);
    border: 1.5px solid var(--devato-cta-bg, #111827);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    transition: color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}

/* The chevron, drawn rather than shipped as an icon - one less request for one
   arrow, and it inherits the colour it sits on. */
.devato-chat-chip::after {
    content: '';
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.65;
}

/* A name with a price under it. The chip itself is a row - it has a chevron to
   place - so the two lines get their own column inside it. */
.devato-chat-chip-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.05rem;
}

/* Set in the inherited colour at reduced weight and opacity rather than a fixed
   grey: the chip inverts on hover, and a grey chosen against white disappears
   against the CTA colour. */
.devato-chat-chip-note {
    font-weight: 500;
    font-size: 0.85em;
    opacity: 0.72;
}

.devato-chat-chip:hover {
    background: var(--devato-cta-bg, #111827);
    color: var(--devato-cta-text, #ffffff);
}

/* The ones under the composer answer a question mid-conversation, so they sit
   in a row and carry no chevron - there is nothing to go forward to. */
.devato-chat-answers .devato-chat-chip::after {
    display: none;
}

.devato-chat-chip:active {
    transform: scale(0.99);
}

.devato-chat-chip:focus-visible {
    outline: 2px solid var(--devato-cta-bg, #111827);
    outline-offset: 2px;
}

/* The answer block
   ------------------------------------------------------------------

   Sits in the log directly under the message it answers. Pinned above the
   composer it drifted away from the question - on a short conversation there
   was an expanse of empty panel between the two, and the buttons read as
   belonging to the input rather than to what had just been asked. */

.devato-chat-answers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    width: 100%;
    align-self: stretch;
    margin: 0 0 0.7rem;
}

/* Deliberately tighter than the opening chips.
   
   Those are two options with a whole panel to themselves; these can be every
   development on the page, and on a list of thirty the padding decides how many
   a visitor can see without scrolling. Smaller text and a thinner border buy
   several more rows in view, which matters more here than presence does. */
.devato-chat-answers .devato-chat-chip {
    width: auto;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 500;
    padding: 0.28rem 0.55rem;
    border-width: 1px;
    justify-content: center;
}

/* Picked, on a question that takes more than one answer. Filled rather than
   ticked: at this size a tick is smaller than the gap between two buttons, and
   the filled state is readable at a glance across the whole set. */
.devato-chat-answers .devato-chat-chip.is-chosen {
    background: var(--devato-cta-bg, #111827);
    color: var(--devato-cta-text, #ffffff);
}

.devato-chat-answers .devato-chat-chip.is-chosen::after {
    /* The chevron means "go", and a chosen button is not going anywhere until
       they press Continue. */
    display: none;
}

/* Ends the multi-select. Deliberately quieter than the options above it - it is
   the way out of the question, not one of the answers to it. */
.devato-chat-answers-done {
    width: 100%;
    margin-top: 0.2rem;
    padding: 0.5rem 0.8rem;
    font-size: 13px;
    font-weight: 600;
    border: 0;
    background: var(--devato-primary-bg, #111827);
    color: var(--devato-primary-text, #ffffff);
    transition: opacity 0.15s ease;
}

.devato-chat-answers-done:hover {
    opacity: 0.9;
}

/* Nothing picked yet. Greyed rather than a faded brand colour: at 35% opacity
   a red button turns pink, which reads as a broken button rather than one
   waiting for an answer. */
.devato-chat-answers-done[disabled] {
    background: #e5e7eb;
    color: #9ca3af;
    opacity: 1;
    cursor: default;
}

.devato-chat-answers-done[disabled]:hover {
    background: #e5e7eb;
}

.devato-chat-answers-done:focus-visible {
    outline: 2px solid var(--devato-cta-bg, #111827);
    outline-offset: 2px;
}

/* Development cards
   ------------------------------------------------------------------ */

.devato-chat-cards {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    /* The log lays its children out in a column, so anything that should span
       it has to say so - otherwise it shrinks to its content. */
    width: 100%;
    align-self: stretch;
}

/* One at a time in a strip the visitor swipes through. Six results become one
   card's worth of height, which is the difference between the assistant's next
   question being on screen and being below the fold. */
.devato-chat-cards[data-layout="swipe"] {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
}

.devato-chat-cards[data-layout="swipe"]::-webkit-scrollbar {
    display: none;
}

.devato-chat-cards[data-layout="swipe"] .devato-chat-card {
    min-width: 82%;
    scroll-snap-align: start;
}

.devato-chat-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.devato-chat-card:hover {
    border-color: var(--devato-cta-bg, #111827);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.devato-chat-card-image {
    width: 100%;
    height: 120px;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    background: #f3f4f6;
}

.devato-chat-card-body {
    padding: 0.6rem 0.75rem 0.7rem;
}

.devato-chat-card-name {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #111827;
}

.devato-chat-card-meta {
    margin: 0.15rem 0 0;
    font-size: 12px;
    color: #6b7280;
}

.devato-chat-card-price {
    margin: 0.35rem 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--devato-cta-bg, #111827);
}

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

.devato-chat-composer {
    background: #ffffff;
}

.devato-chat-input {
    max-height: 120px;
    color: #111827;
    background: #ffffff;
}

.devato-chat-input:focus {
    outline: none;
    border-color: var(--devato-cta-bg, #111827);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.devato-chat-send {
    background: var(--devato-cta-bg, #111827);
    color: var(--devato-cta-text, #ffffff);
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.devato-chat-send:hover {
    opacity: 0.9;
}

.devato-chat-send:active {
    transform: scale(0.96);
}

.devato-chat-send[disabled] {
    opacity: 0.45;
    cursor: default;
    transform: none;
}

.devato-chat-send:focus-visible {
    outline: 2px solid var(--devato-cta-bg, #111827);
    outline-offset: 2px;
}

/* A development aid, not something to put in front of buyers - it only renders
   when show_cost is on, which is off in production. */
.devato-chat-cost {
    display: none;
    margin-left: 0.35rem;
    opacity: 0.8;
}

.devato-chat-cost[data-visible="true"] {
    display: inline;
}

/* Somebody who has asked not to be moved about should not be. */
@media (prefers-reduced-motion: reduce) {
    .devato-chat-launcher,
    .devato-chat-chip,
    .devato-chat-send,
    .devato-chat-card {
        transition: none;
    }

    .devato-chat-typing span,
    .devato-chat-spinner {
        animation: none;
    }
}

/* Starting again
   ------------------------------------------------------------------

   Asked in the log rather than through a browser confirm(), so it is styled
   like the rest of the panel and does not steal focus out of the page. The
   transcript is the only copy, and the control sits next to close and expand,
   so it is easy to hit by accident. */

.devato-chat-confirm {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.6rem;
    width: 100%;
    align-self: stretch;
}

.devato-chat-confirm-text {
    margin: 0 0 0.6rem;
    font-size: 13.5px;
    line-height: 1.45;
    color: #1f2937;
}

.devato-chat-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.devato-chat-confirm-yes,
.devato-chat-confirm-no {
    border: 1px solid #d1d5db;
    background: #ffffff;
    padding: 0.4rem 0.8rem;
    font-size: 13px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* The destructive one is tinted rather than shouted at - it clears a chat, not
   an account - but it must not look like the safe choice either. */
.devato-chat-confirm-yes {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.devato-chat-confirm-yes:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

.devato-chat-confirm-no {
    color: #374151;
}

.devato-chat-confirm-no:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.devato-chat-confirm-yes:focus-visible,
.devato-chat-confirm-no:focus-visible {
    outline: 2px solid var(--devato-cta-bg, #111827);
    outline-offset: 2px;
}

/* What the conversation is about
   ------------------------------------------------------------------

   Pinned between the header and the log rather than sitting inside it. Inside,
   it scrolled away with everything else, and somebody three questions into a
   conversation about one of thirty developments could no longer see which one
   the assistant was answering about. */

.devato-chat-context {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.85rem;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.devato-chat-context-image {
    width: 52px;
    height: 40px;
    flex: 0 0 auto;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: var(--devato-radius, 0);
    background: #f3f4f6;
}

.devato-chat-context-text {
    min-width: 0;
}

.devato-chat-context-label {
    margin: 0;
    font-size: 10.5px;
    line-height: 1.2;
    color: #9ca3af;
}

/* Truncated rather than wrapped: this is a reference, not a heading, and a
   two-line development name would push the conversation down the panel. */
.devato-chat-context-name {
    margin: 0.1rem 0 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.devato-chat-context-price {
    margin: 0.05rem 0 0;
    font-size: 12px;
    line-height: 1.25;
    color: var(--devato-cta-bg, #374151);
    font-weight: 600;
}