/* Portal-theme tint band — injected via Razor so colour matches portal */
html, body {
    overflow-x: hidden;
}

/* Hide the top sticky "Let us get you 3 quotes" header on the agentic page — we use the bottom finder-banner instead */
#gq-travel {
    display: none !important;
}

/* Hide the hotline bar on the agentic page — not part of the agentic design */
.agentic-page-wrap .hotline {
    display: none !important;
}

.agentic-page-wrap {
    background: var(--ag-theme-tint);
    margin-top: -30px;      /* pull flush against nav border */
    padding-top: 30px;      /* restore content position */
}
.agentic-hero-bg {
    width: 100%;
    padding-bottom: 32px;            /* gap that acts as visual separator before FAQ */
}

.agentic-hero {
    display: flex;
    align-items: flex-start;
    max-width: 1380px; /* 1200px + 15% — widens the chat card symmetrically (centered, .agentic-suppliers stays a fixed 150px) */
    margin: 0 auto;
    padding: 18px 12px 0;
    gap: 14px;
}

.agentic-card {
    flex: 1 1 0;
    background: #fff;
    border: 1.5px solid #e3e8ef;
    border-radius: 14px;
    padding: 0;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    min-width: 0;
    position: relative;
    /* 18px taller, top edge pulled up by the same 18px so the bottom edge
       stays exactly where it was — grows the card upward only, doesn't
       shift anything below it (sidebar, page background, etc). */
    height: calc(100vh - 176px);
    margin-top: -18px;
    display: flex;
    flex-direction: column;
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #434343;
    overflow: clip;
}

/* Sticky header banner — appears when hero scrolls out of view within chat */
.ag-sticky-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: #eeeeee;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 50px;   /* +2px */
    padding: 0 20px 0 54px;
    /* Slide, don't fade: opacity would leave the header translucent (and whatever's
       underneath visible through it) for the duration of the transition. The
       background needs to be 100% opaque the instant it's shown. */
    transform: translateY(-100%);
    pointer-events: none;
    transition: transform 0.15s ease;
}
.ag-sticky-header.is-visible {
    transform: translateY(0);
    pointer-events: auto;
}

/* Belt-and-braces: whatever the cause of the bleed-through (stacking/compositing
   quirk in some browsers), directly hide the price-range text while the sticky
   header covers it, instead of relying solely on z-index/opaque background. */
.ag-sticky-header.is-visible ~ .agentic-card__scroll .agentic-price-range-row {
    visibility: hidden;
}
.ag-sticky-header__top {
    display: flex;
    align-items: center;
}
.ag-sticky-header__bar {
    /* Removed — the title now sits where this accent bar used to. */
    display: none;
    width: 3px;
    height: 25px;
    background: var(--ag-theme);
    border-radius: 2px;
    flex-shrink: 0;
    margin-right: 10px;
}
/* Base sizing (applies at every breakpoint) — without this, the <img> falls
   back to its native pixel size (huge) wherever the mobile-only override
   below doesn't apply, e.g. on desktop. */
.ag-sticky-header__quotes-icon {
    width: auto;
    height: 30px;
    flex-shrink: 0;
    margin-left: 6px;
    display: block;
}
.ag-sticky-header__title {
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #434343;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    margin-bottom: 3px;
}
/* Sticky title has two variants — desktop shows the long tagline, mobile the
   short "{Category} - Get Quotes" (see category-agentic.js). */
.ag-sticky-header__title .ag-sticky-title-short { display: none; }
/* Category name stays bold (inherited); only the "- Get quotes from suppliers to
   compare prices & options!" tagline is regular weight. */
.ag-sticky-title-tagline { font-weight: 400; }
.ag-sticky-header__subtitle {
    /* Second line ("Compare prices and suppliers...") removed on both desktop and
       mobile — the sticky header now only shows the title line. */
    display: none !important;
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #434343;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    padding-left: 13px;   /* indent to align with title text (bar width + margin) */
}

.agentic-card__scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 28px 0px 20px 25px;
    position: relative;
    /* Prevent the browser's automatic scroll-anchoring from nudging scrollTop on
       its own (e.g. when the hero product image finishes loading and shifts
       layout) — that silent, non-user-initiated scroll was tripping the sticky
       header's "has the user actually scrolled" check on mobile. */
    overflow-anchor: none;
}

/* Before the chat starts (.ag-chat-started isn't added until openMessages() fires
   on the first answer), the card's actual content — hero, trust icons, location
   dropdown — is much shorter than the fixed calc(100vh - 176px) height reserved
   for the scrolling chat conversation. Forcing .agentic-card__scroll (flex:1) to
   stretch to that full fixed height left a large empty gap below the dropdown,
   and could still trigger a spurious outer scrollbar despite all that visible
   slack, since the container's allocated height and its content height are
   decoupled by the fixed-height + flex:1 combination. Let the card hug its actual
   content here instead; max-height keeps a safety cap (with its own scroll) for
   very short viewports. Reverts to the normal fixed-height chat layout the
   instant .ag-chat-started is added — this rule never applies once chat begins.
*/
.agentic-card:not(.ag-chat-started) {
    height: auto;
    max-height: calc(100vh - 176px);
}
.agentic-card:not(.ag-chat-started) .agentic-card__scroll {
    flex: none;
}

.agentic-suppliers {
    width: 150px;
    flex-shrink: 0;
    /* Match the chat card's height so the logo column never spills below it. */
    max-height: calc(100vh - 194px);
    overflow: hidden;
}

/* Combined inline price line — mobile only, never shown on desktop */
.jsPriceRangeView--inline {
    display: none !important;
}

/* Mobile-only suppliers block (inside card) — hidden on desktop */
.agentic-mobile-suppliers {
    display: none;
}

.agentic-mobile-suppliers__hands {
    display: none;
}

.agentic-mobile-chip-wrap {
    display: none;
}

.agentic-mobile-proof {
    display: none;
}

.agentic-mobile-price-range {
    display: none;
}

.agentic-mobile-info-row {
    display: none;
}

.agentic-mobile-tagline {
    display: none;
}

.agentic-suppliers__heading {
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #434343;
    text-align: center;
    margin-bottom: 16px;
    padding-bottom: 0;
    border-bottom: none;
}
/* Short theme-colour underline beneath the heading. */
.agentic-suppliers__heading::after {
    content: '';
    display: block;
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: var(--ag-theme);
    margin: 9px auto 0;
}

.agentic-supplier-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    /* No border/box — show the logo directly (desktop sidebar + mobile carousel). */
    padding: 6px 6px;
    margin-bottom: 5px;
    min-height: 42px;
}

.agentic-supplier-logo img {
    max-width: 100%;
    max-height: 33px;   /* desktop logo size */
    object-fit: contain;
}

/* Shown under the logo list (desktop sidebar) when more suppliers exist than the
   10 logos actually rendered. */
.agentic-suppliers__more {
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    color: #8a8f99;
    /* margin-top (not position:relative/top) so the shift actually takes up
       layout space — .agentic-suppliers clips overflow, so a purely visual
       offset here would push the text past the clipped edge and cut it off. */
    margin-top: 8px;
}

.agentic-card__top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 0;
    padding-bottom: 6px;
    border-bottom: none;
    width: 78%;
    margin-left: 40px;
}

.agentic-card__top {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
    width: calc(100% - 500px);
}

.agentic-card__image {
    /* Invisible bounding box, sized to the max available space. object-fit:contain
       scales each image down only as much as its own aspect ratio requires, so
       it renders as large as possible. Any image whose rendered content would
       still reach into the price-range row below gets shrunk individually by
       clampAgenticCardImage() in category-agentic.js — no other image or
       element is affected. */
    width: 503px;   /* 437px + 15% */
    height: 452px;   /* 393px + 15% */
    object-fit: contain;
    object-position: top;
    flex-shrink: 0;
    position: absolute;
    right: 3px;
    top: 10px;
}

.agentic-price-range-row {
    /* "View Price Range" hidden on desktop for now. */
    display: none;
    justify-content: flex-end;
    /* Pinned to the same top offset as .agentic-intro-combined__delivery-row's own
       margin-top so "View Price Range" sits level with "Let's get you quotes!".
       left+right (not width:max-content) so it spans the real container width and
       can never size/overflow past it. */
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    padding-right: 10px;
}

.agentic-price-range-row .price-range-holder {
    margin: 0;
}

.agentic-price-range-row .price-range {
    text-align: right;
}

.agentic-price-range-row .price-range a {
    font-size: 13px;
    color: #6a6a6a;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: transparent;
    cursor: pointer;
    white-space: nowrap;
}

.agentic-price-range-row .price-range a:hover {
    text-decoration-color: var(--ag-theme);
    color: #434343;
}

.agentic-price-range-row .jsPriceRangeView {
    font-size: 13px;
    color: #434343;
    text-align: right;
    line-height: 1.2;
    margin-top: 1px;
}

.agentic-category-chip {
    display: inline-flex;
    align-items: center;
    height: 29px;
    padding: 3px 10px 0;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ag-theme-text);
    background-color: var(--ag-theme);
    border-radius: 3px;
    margin-bottom: 14px;
    box-sizing: border-box;
}

/* Chip + Google rating share one row above the heading (desktop). */
.agentic-card__badge-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}
.agentic-card__badge-row .agentic-category-chip {
    margin-bottom: 0;
    /* Symmetric vertical padding so the chip's text centres in its 29px box and
       lines up with the (centred) rating beside it. */
    padding-top: 0;
    padding-bottom: 0;
}
.agentic-card__badge-row .agentic-avatar-proof {
    margin-top: 0;
    /* Nudge the rating down so it reads level with the chip's text. */
    position: relative;
    top: 8px;
}

.agentic-intro {
    border-top: none;
    padding-top: 14px;
    margin-bottom: 12px;
}

/* The agentic layout adds `rfq-cro-page` to the body, so category-rfq-cro.css's
   page-chrome rule `.rfq-cro-page h2:not(.seo-html-container *)` (0-2-1) also
   matches this hero title. It used to be `.rfq-cro-page h2` (0-1-1), a tie with
   `h2.agentic-card__title` that we won only because category-agentic.css is
   linked after category-rfq-cro.min.css; the `:not()` added for the SEO-content
   fix broke that tie and flattened the title to 14px on desktop. (Mobile was
   unaffected — its 27px rule is !important.)

   Note `.rfq-cro-page h2.agentic-card__title` is NOT enough: :not() carries its
   argument's specificity, so the chrome rule is 0-2-1 and that qualified
   selector only ties it — restoring the same link-order dependency. Going
   through .agentic-card__heading makes it 0-3-1, which wins outright (verified
   on production by inserting the rule *before* category-rfq-cro.min.css: still
   34px). Only the properties this rule already declared are reclaimed — the
   chrome rule's font-family applied here before the regression too, so it is
   deliberately left alone. */
.rfq-cro-page .agentic-card__heading h2.agentic-card__title,
h2.agentic-card__title {
    font-size: 34px;
    font-weight: 700;
    color: #434343;
    line-height: 1.25;
    flex: 1;
    margin: 0;
}

.agentic-card__heading {
    flex: 1;
    min-width: 0;
}

.agentic-card__subtitle {
    font-size: 19px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.4;
    margin: 10px 0 0;
}

/* Floating finder banner */
body.use-finder-banner .floating-bottom { display: none !important; }

#finder-banner {
    background-color: var(--ag-theme);
    border: 2px solid #434343;
    border-radius: 1rem;
    bottom: 8px;
    box-sizing: border-box;
    left: 50%;
    max-width: 600px;
    width: calc(100vw - 32px);
    opacity: 0;
    padding: 4px 10px 4px 24px;
    font-size: 13px;
    position: fixed;
    transform: translateX(-50%) translateY(calc(100% + 2rem));
    transition: opacity 100ms ease-in-out, transform 100ms ease-in-out;
    visibility: hidden;
    z-index: 1005;
}
#finder-banner.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    visibility: visible;
    height: 66.2px;
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}
@media (min-width: 601px) {
    #finder-banner {
        bottom: 16px;
        min-width: 518px;
        width: auto;
        padding: 5px 12px 5px 28px;
        font-size: 15px;
    }
    #finder-banner.is-visible { height: 76px; }
    .finder-banner__inner { gap: 5px; }
    .finder-banner__text { font-size: 16px; }
    .finder-banner__btn { font-size: 14px; padding: 9px 14px; margin-left: 12px; }
    .finder-banner__close { font-size: 29px; padding: 6px 12px; line-height: 29px; }
}
.finder-banner__inner {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    width: 100%;
    height: 100%;
}
.finder-banner__text {
    flex: 1;
    font-size: 16px;
    font-weight: bold;
    color: #434343;
    line-height: 1.3;
    min-width: 0;
}
.body-ms .finder-banner__text { color: var(--ag-theme-text); }
.finder-banner__btn {
    display: inline-block;
    background-color: #434343;
    color: #fff;
    border-radius: 20px;
    font-weight: bold;
    font-size: 14px;
    padding: 8px 12px;
    margin-left: 10px;
    cursor: pointer;
    white-space: nowrap;
    border: none;
    flex-shrink: 0;
}
.finder-banner__btn:hover, .finder-banner__btn:focus { color: #fff; background-color: #5a5a5a; }
.finder-banner__close {
    background: none;
    border: none;
    font-size: 25.4px;
    cursor: pointer;
    color: #434343;
    padding: 5.2px 10.4px;
    line-height: 25.4px;
    flex-shrink: 0;
}

/* Task 5: avatar proof block in card header — rating only now (avatars moved to the
   desktop nav header, see _NavbarHeader2026Agentic.cshtml), shown as a single line. */
.agentic-avatar-proof {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: 10px;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.agentic-avatar-proof .rfq-avatar-proof__rating {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    gap: 6px !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.agentic-avatar-proof .rfq-avatar-proof__score {
    font-size: 14px;
    font-weight: 400;
    color: #434343;
}

.agentic-avatar-proof .rfq-avatar-proof__stars {
    color: #fbc509;
    font-size: 14px;
    letter-spacing: 1px;
}

.agentic-avatar-proof .rfq-avatar-proof__label {
    font-size: 14px;
    /* !important only because category-rfq-cro.css — loaded on this page too — sets
       font-weight: 600 !important on the bare class, which a plain declaration here
       can't outrank however specific the selector is. */
    font-weight: 400 !important;
    color: #434343;
}

.agentic-intro-text {
    /* Replaced on desktop by the 3-point trust infographic below (.agentic-trust),
       same as it's replaced by .agentic-mobile-tagline on mobile. */
    display: none;
}
/* Short variant is mobile-only; full text shows on desktop (same pattern as
   .agentic-intro-combined__delivery-full/-short). */
.agentic-intro-text__short {
    display: none;
}

/* Verified-suppliers shield badge, shown between the heading and the logo list. */
.agentic-suppliers__verified-badge {
    text-align: center;
    margin: 4px 0 12px;
}

.agentic-suppliers__verified-badge svg {
    width: 42px;
    height: 42px;
}

.agentic-steps {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    padding-top: 12px;
    margin-left: 50px;
    margin-right: 255px;
}

.agentic-step {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-right: 10px;
    position: relative;
}

.agentic-step__num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ecf4f6;
    color: #434343;
    font-size: .72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.agentic-step__text {
    font-size: 15px;
    color: #6b7280;
    line-height: 1.3;
    min-width: 0;
    word-break: break-word;
}

.agentic-step__text strong {
    display: block;
    font-weight: 700;
    color: #434343;
    font-size: 15px;
}

.agentic-location-label {
    font-size: .83rem;
    color: #3a4a5c;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.agentic-location-label i {
    color: var(--ag-theme);
}

.agentic-location-dropdown-wrap {
    margin-bottom: 20px;
    /* 48px (was 50px) each side widens the box 2px on both left and right. */
    margin-left: 48px;
    margin-right: 48px;
}

/* Combined intro + location block (single AI message style) */
.agentic-intro-combined {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 0 32px 5px 40px;   /* left 40px aligns trust + AI icon with the header/subheader */
    margin-top: 27px;   /* gap between the 3-step infographic above and the tinted box */
    margin-bottom: 8px;
    max-width: calc(100% - 40px);
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #434343;
}

.agentic-intro-combined__icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.agentic-intro-combined__body {
    flex: 1;
    min-width: 0;
    margin-top: 5px;   /* desktop: nudge tint band + location box down 5px (was 10px) */
    position: relative;
    /* Must stay wider than the location box's own margin-left + max-width
       (5px + 470px = 475px) plus the body's 14px left/right padding, or this
       cap clips the wrap before its own max-width can take effect. The tint
       band below is now given its own fixed width instead of tracking this,
       so widening this cap no longer changes the tint's appearance. */
    max-width: 503px;
    box-sizing: border-box;
    /* Tinted band behind the location prompt — a real 96px-tall box (not a
       gradient hard-stop) so all four corners, including the bottom two, get
       a proper border-radius instead of squaring off where the tint cuts out.
       The dropdown (which starts above that cut-off) overlaps up into the band
       and extends out the bottom, so the tint peeks around its top edge — it
       never wraps the whole dropdown. */
    border-radius: 14px;
    padding: 20px 14px 0;   /* top padding gives the lead-in room to breathe off the tint's edge */
}

.agentic-intro-combined__body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    /* Fixed width (not right:0) so the tint keeps a size of its own, independent of the
       body's max-width. Widened from 426px to make room for the "Start here!" pointer at
       its right-hand end — the pointer has to sit inside the tint or it reads as an
       annotation on the white card rather than part of the question. Taller, too, since
       the question now takes two lines; mobile pins both back to their own values. */
    width: 500px;
    height: 144px;
    background: rgba(var(--ag-theme-tint-rgb), 0.16);
    border-radius: 14px;
    z-index: 0;
}

.agentic-intro-combined__body > * {
    position: relative;
    z-index: 1;
}

.agentic-intro-combined__text {
    font-size: 15px;
    color: #434343;
    margin: 0 0 12px;
    line-height: 1.5;
}

.agentic-intro-combined__list {
    margin: 0 0 0;
    padding: 14px 36px 14px 38px;
    list-style: decimal;
    background: var(--ag-theme-tint);
    border-radius: 10px;
    width: fit-content;
}

.agentic-intro-combined__list li {
    font-size: 15px;
    color: #434343;
    line-height: 1.5;
    margin-bottom: 10px;
    padding-left: 6px;
}

.agentic-intro-combined__list li:last-child {
    margin-bottom: 0;
}

/* Trust points — horizontal 3-step infographic: a numbered "bullet" above a
   centered label + subtitle. The numerals say what the chevrons between steps
   used to, so there are no chevrons; circle and numeral take the portal theme
   colour, so this re-skins per portal. */
.agentic-trust {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /* Packed from the left with a real gap rather than spread across the whole row.
       space-between + flex:1 1 0 gave each step a third of ~900px and centred its
       150px label inside that third, which left the first label ~70px right of the
       chip, heading and location box. Packing left puts it flush with them. */
    justify-content: flex-start;
    gap: 40px;
    /* 40px is the card's text column: .agentic-card__top (chip, heading) sets it as a
       margin, .agentic-intro-combined (the location box below) as a padding. The row has
       to sit in that same column, and #2173 briefly took this to 0 — which moved the whole
       infographic 40px LEFT of everything around it. What was actually misaligned was never
       this inset but the packing below: space-between gave each step a third of the row and
       centred its label inside that third, so step 1's words sat ~70px right of the heading
       while this box was in the right place all along. */
    padding: 2px 0 2px 40px;
    margin: 20px 0 0;
    width: 100%;
    /* Clear the absolutely-positioned product image on the right. The horizontal
       row (unlike the old vertical list) spans its full max-width, so it needs
       generous clearance — otherwise the third step slides under the image and
       gets clipped by the card's overflow. */
    max-width: calc(100% - 480px);
    box-sizing: border-box;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.agentic-trust__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 0;
    /* Width comes from the label below (see .agentic-trust__text), not from an equal
       share of the row. Still shrinkable so a narrow desktop can't push the row past
       the clearance the product image needs. */
    flex: 0 1 auto;
    min-width: 0;
}

.agentic-trust__icon {
    flex-shrink: 0;
    /* Smaller than the 64px icon circle it replaces: a numeral fills its ring far
       more than a line-art glyph did, so the same visual weight needs less circle.
       47 rather than 48 since #2173 feedback — a couple of per cent off, enough to
       stop the markers competing with the labels they head. */
    width: 47px;
    height: 47px;
    border-radius: 50%;
    background: #fff;
    /* Ring in the portal colour rather than the old neutral grey — the number is
       the step marker now, so it reads as one themed unit. */
    border: 1.5px solid var(--ag-theme);
    box-sizing: border-box;
    color: var(--ag-theme);
    display: flex;
    align-items: center;
    justify-content: center;
}

.agentic-trust__num {
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    color: var(--ag-theme);
    /* Digits sit optically high in their em box; nudge down so they centre in the ring. */
    margin-top: 1px;
}

/* Kept for any step that still renders a glyph instead of a numeral. */
.agentic-trust__icon svg,
.agentic-trust__icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;   /* strip inline baseline gap so flex-centering is exact */
    margin: auto;
}

.agentic-trust__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.3;
    /* Fixed width per item so wrapping is deterministic instead of depending on
       however much space the flex row happens to have (which shrank once the
       label copy got longer and caused extra, unwanted line breaks). Widths tuned
       so items 1 & 3 keep their bold line on one line (2 lines total each) and
       item 2's longer subtext wraps to exactly 2 lines (3 lines total). */
    width: 150px;
}

/* Third step, whose copy is the longest — was :nth-child(5) while the chevrons
   sat between the items and counted as children of their own. */
.agentic-trust__item:nth-child(3) .agentic-trust__text {
    width: 170px;
}

/* First step sizes to its own text instead of the shared 150px. That width is a wrapping
   control for the steps whose sub-line is long, but step 1's bold line is WIDER than it, and
   a centred child that overflows its box overflows it on both sides — which pushed "Tell us
   what you need" out past the left edge of the card, left of the chip and heading above it.
   At auto the box is the text, so the row packing from the left puts its first character
   exactly on that edge. */
.agentic-trust__item:first-child .agentic-trust__text {
    width: auto;
}

.agentic-trust__text strong {
    font-size: 14px;
    font-weight: 700;
    color: #434343;
}

.agentic-trust__text > span {
    font-size: 14px;   /* match the label above so all infographic text is one size */
    font-weight: 400;
    color: #434343;
}

/* Tick beside "Make the right choice" — the outcome of the three steps, so it's
   in the text colour rather than the theme colour the numerals use. */
.agentic-trust__tick {
    /* A couple of px over the 14px label it sits beside — a tick reads smaller than
       letters of the same box, so matching the type size undersells it. */
    width: 17px;
    height: 17px;
    margin-left: 5px;
    color: #434343;
    /* -5, where the straight tick used -3. Two of those pixels are the shape: this tick's
       ink sits higher inside the same 24-unit box (y 5-17 against 7-18), so the box has to
       drop for the mark to hold its place. The last one is judgement — level with the middle
       of the capitals it follows rather than with the line box, which the descenders in
       "right choice" pull down. */
    vertical-align: -5px;
}

/* Mobile-only alt copy for the 3rd trust item (see mobile media query below);
   hidden on desktop so the original text renders there unchanged. */
.agentic-trust__text--mobile { display: none; }

/* Desktop shows the full "Verified Suppliers" label; the short one is mobile-only. */
.agentic-trust__label-short { display: none; }

/* "Where are you located?" is shared text now, unlike the lead-in above it —
   desktop shows the full "Let's get you quotes!" lead-in, mobile the short one. */
.agentic-intro-combined__lead-short { display: none; }

.agentic-intro-combined__delivery {
    font-size: 17px;
    color: #434343;
    margin: 25px 0 12px;
}

/* The lead-in and the question are separate lines: the lead-in says why we're asking,
   the question is what has to be answered, and only the second is the headline. */
.agentic-intro-combined__lead {
    display: block;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
}
.agentic-intro-combined__question {
    display: block;
    /* Was deliberately two points under the flow's questions: this one sits in the tinted box
       under a lead-in, where the surrounding weight already gives it the emphasis that the
       questions further down the flow have to earn from size alone. #2139 took those questions
       to 19px, so the two now match — left at 19 rather than followed down to 17, since this is
       the opening screen and nobody asked for it to change. Drop it to 17 to restore the gap. */
    font-size: 19px;
    font-weight: 400;
    line-height: 1.25;
    margin-top: 2px;
}
/* Mobile's wording of the same question — hidden here, swapped in below the breakpoint. */
.agentic-intro-combined__question-short { display: none; }

/* Delivery question row — the AI (sparkle) icon sits beside this line. Sits at the
   top of the tinted band (the band itself is the __body gradient above). */
.agentic-intro-combined__delivery-row {
    display: flex;
    /* Top-aligned since the question grew to two lines — centred left the sparkle
       floating in the gap between them instead of beside the line it introduces. */
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 8px;
}
/* "Start here!" pointer — the green of the verified-suppliers shield (#2e9e4f), in the
   card's own script fallback stack so it reads as something pencilled onto the page
   rather than more interface copy. Absolutely positioned at the right-hand end of the
   tint band: it must not push the question or the dropdown around, and the space it
   occupies was empty. Hidden on mobile, where that space doesn't exist. */
.agentic-intro-start-here {
    position: absolute;
    /* Measured from the body's padding box, so this doesn't move with the padding above —
       set to sit level with the lead-in it points away from. Clearance between the arrowhead
       and the state box is bought by shortening the arrow (see its path), not by raising this:
       the label's position is fixed here and shouldn't drift to solve a problem below it. */
    top: 22px;
    /* Out towards the right of the 500px tint band, clear of the question text (which ends
       around 262px) — the whitespace there is the annotation's own space, and crowding it up
       against "Where are you located?" made the two read as one line. The label runs ~65px
       wide, so this leaves it a small margin inside the band's right edge. */
    left: 392px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #2e9e4f;
    pointer-events: none;
}
.agentic-intro-start-here__label {
    /* Handlee, loaded in Layout-Agentic-CRO's AdditionalStylesheet section. Hand-drawn and
       slightly slanted, letters separate — the middle ground between a printed hand, which
       didn't read as written at all, and a joined script, which read as too much for four
       words. Identical on every device, unlike the system handwriting fonts it replaced.
       Comic Sans MS stands in for the moment before it arrives (display=swap). One weight. */
    font-family: 'Handlee', 'Comic Sans MS', cursive;
    /* Deliberately much smaller than the question it sits beside — it's an aside pencilled in
       the margin, and anything closer to the question's size starts competing with it. */
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1;
    white-space: nowrap;
    /* Handlee is drawn upright and has no italic of its own, so the slant is applied here.
       skewX rather than font-style:italic: the synthetic oblique browsers generate is the same
       transform with no control over the angle, and 9° is the point where this reads as
       handwriting leaning forward rather than as text falling over. transform-origin sits at
       the baseline so the letters lean without drifting off it. */
    display: inline-block;
    transform: skewX(-9deg);
    transform-origin: 0 100%;
    /* Handlee ships a single weight, so font-weight: 700 would only get the browser's synthetic
       bold — which smears a pen hand and closes up its counters. An outline stroke is the
       finer-grained way to add presence: it's a dial rather than a switch. */
    -webkit-text-stroke: 0.3px currentColor;
}
.agentic-intro-start-here__arrow {
    margin-top: 2px;
    margin-right: 14px;   /* the curve ends over the dropdown, which sits to the left */
}

.agentic-intro-combined__delivery-row .agentic-intro-combined__delivery {
    margin: 0;
}

.agentic-intro-combined__delivery-row .agentic-intro-combined__icon {
    margin-top: 0;
}

/* Location dropdown inside the combined block - reset inherited margins.
   Indented to line up with where the question text starts (past the 34px sparkle
   icon + its 12px gap). No top gap: it sits right under the question and overlaps
   up into the tinted band (the band's gradient cut-off is below the dropdown's top
   edge), so the tint peeks around it — matching mobile. */
.agentic-intro-combined .agentic-location-dropdown-wrap {
    /* Extended on both sides: margin-left pulled in and max-width grown so the box
       gets longer on the left and right. */
    margin-left: 5px;
    margin-right: 0;
    padding: 0;
    /* A clear gap under the question rather than butting straight up against it — the box
       is the answer to the line above, not part of it. */
    margin-top: 10px;
    /* Right edge lines up with the end of "What's your location?" above it,
       instead of stretching to the card's full width. */
    max-width: 420px;
}

/* Reused category-page location dropdown, restyled to sit inline in the intro card:
   trigger row on top, full-height always-open list below, Confirm button at the
   end of the list (not the pill-in-pill "Get Quotes" hero styling). */
.agentic-state-dropdown.cro-dropdown-container {
    display: block;
    width: 100%;
    /* No max-width: stretch to the wrap's full width so the box's right edge
       lines up with the right edge of the question text above it. */
    height: auto;
    border-radius: 14px !important;
    /* No right padding here — the scrollbar inset now lives on the list's own
       padding-right instead (see .cro-dropdown-container__list), so the trigger's
       border-bottom and the list's border-top can reach all the way to this
       container's border without overflow:hidden below clipping them short. */
    padding: 0 !important;
    margin-top: 0;
    border: 1.5px solid #c3ccd6;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    /* Clip the trigger + list to the container's own rounded corners so the border
       always reads as one continuous outline instead of the list's square edges
       poking past it. !important defeats the aggressive base sized-location-list-cro.css
       (loaded after this file) — without it the container's overflow wasn't clipping,
       so the scrollable list's square bottom corners showed through. */
    overflow: hidden !important;
}

.agentic-state-dropdown .cro-dropdown-container__text {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 38px !important;
    display: flex !important;
    align-items: center;
    border-radius: 14px 14px 0 0;
    font-size: 14px;
    color: #3a4a5c;
    padding: 0 14px !important;
}

/* Location pin — SHARED across desktop + mobile. The source markup ships a dark
   PNG pin (.cro-gps-icon) that can't be recoloured via CSS, so we hide it and
   draw a theme-coloured pin as a flex item before the trigger text. Not
   media-scoped: this one rule themes the pin at every breakpoint. Default fill is
   IS yellow; MS/HH swap the fill below. */
.agentic-state-dropdown .cro-gps-icon {
    display: none !important;
}
.agentic-state-dropdown .cro-dropdown-container__text::before {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 20px;
    margin-right: 8px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fbc509'><path d='M12 2C7.6 2 4 5.6 4 10c0 5.4 7.1 11.3 7.4 11.5.2.2.5.2.7 0C12.5 21.3 20 15.4 20 10c0-4.4-3.6-8-8-8zm0 10.8A2.8 2.8 0 1 1 12 7.2a2.8 2.8 0 0 1 0 5.6z'/></svg>") no-repeat center / contain;
}
.body-ms .agentic-state-dropdown .cro-dropdown-container__text::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300b4c8'><path d='M12 2C7.6 2 4 5.6 4 10c0 5.4 7.1 11.3 7.4 11.5.2.2.5.2.7 0C12.5 21.3 20 15.4 20 10c0-4.4-3.6-8-8-8zm0 10.8A2.8 2.8 0 1 1 12 7.2a2.8 2.8 0 0 1 0 5.6z'/></svg>");
}
.body-hh .agentic-state-dropdown .cro-dropdown-container__text::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e22d26'><path d='M12 2C7.6 2 4 5.6 4 10c0 5.4 7.1 11.3 7.4 11.5.2.2.5.2.7 0C12.5 21.3 20 15.4 20 10c0-4.4-3.6-8-8-8zm0 10.8A2.8 2.8 0 1 1 12 7.2a2.8 2.8 0 0 1 0 5.6z'/></svg>");
}

/* Show the "Select your state" placeholder in the trigger (matches the target
   design) — a wider trigger looks empty icon-only. */
.agentic-state-dropdown .sizedDropdownCountry__btnText {
    width: 100% !important;
    font-size: 14px !important;
    color: #6a6a6a !important;
}

/* Once a state is chosen (.ag-state-chosen is set by markStateChosen in
   category-agentic.js), the label is the buyer's confirmation of it — the chat no
   longer echoes the selection back as a grey bubble. Bold + darken so it reads as an
   answer rather than as placeholder text. Applies at every breakpoint; the !important
   is needed to beat both the placeholder rule above and its mobile override below. */
.ag-state-chosen.agentic-state-dropdown .sizedDropdownCountry__btnText {
    font-weight: 700 !important;
    color: #3a4a5c !important;
}

.agentic-state-dropdown .caret2 {
    /* Match the normal category page's dropdown (.rfq-state-dropdown .caret2):
       smaller triangle, aligned with the scrollbar column below it (the list's
       own 4px right padding — see .cro-dropdown-container__list — now that the
       container itself carries no right padding). */
    border-top-color: #6a6a6a !important;
    border-top-width: 4px !important;
    border-right-width: 4px !important;
    border-left-width: 4px !important;
    right: 4px !important;
    top: 40% !important;
    transform: translateY(-50%) !important;
}

.agentic-state-dropdown .cro-dropdown-container__list {
    display: block !important;
    position: static !important;
    width: 100% !important;
    left: 0;
    top: 0;
    max-width: none;
    border-radius: 0 0 14px 14px;
    /* Three states, at every point in the flow — the rest scroll. The list used to open
       at five and collapse to three once the chat started; showing three from the outset
       keeps the open list from dominating the card before a single question is answered. */
    height: auto !important;
    max-height: 119px;   /* 3 × 37px row + the list's own 4px top/bottom padding */
    overflow-y: auto;
    overflow-x: hidden;
    /* !important: sized-location-list-cro.css's base .cro-dropdown-container__list
       rule sets `border: solid 0px red !important`, which otherwise wins over this
       (its <link> is injected inline in the body, after this stylesheet, so on a
       load-order tie it beats us — !important + our higher specificity is what wins). */
    border-top: 1px solid #c3ccd6 !important;
    /* Round the list's own bottom corners: a scrollable child (overflow-y:auto)
       isn't clipped by the container's rounded overflow:hidden in most browsers,
       so without this its square bottom corners poke past the rounded container. */
    border-radius: 0 0 14px 14px !important;
    box-shadow: none !important;
    /* Right padding insets the list's scrollbar (which hugs the list's own edge)
       from the container's border, to meet the caret above it — this now lives
       here instead of on the container, so the border-top below still reaches
       all the way to the container's border on both sides. */
    padding: 4px 4px 4px 0 !important;
    box-sizing: border-box;
}

.agentic-state-dropdown .cro-dropdown-container__list li.list-item-cro {
    font-size: 14px;
    padding: 0;
}

.agentic-state-dropdown .cro-dropdown-container__list li.list-item-cro a {
    /* left 38px lines the state names up with the "Select your state" text in the
       trigger above (14px trigger padding + 16px pin + 8px gap), not with the pin. */
    padding: 8px 16px 8px 38px;
    color: #3a4a5c;
}

/* Slim custom scrollbar (no native up/down arrow buttons) to match the compact
   dropdown styling used elsewhere on the category pages. */
.agentic-state-dropdown .cro-dropdown-container__list {
    scrollbar-width: thin !important;
    scrollbar-color: #d0d8e4 transparent !important;
}
/* !important throughout: sized-location-list-cro.css's base .dropdown-menu rule
   (this <ul> also carries the "dropdown-menu" class) sets
   `::-webkit-scrollbar { width: 10px !important; }`, which otherwise wins. */
.agentic-state-dropdown .cro-dropdown-container__list::-webkit-scrollbar {
    width: 6px !important;
}
.agentic-state-dropdown .cro-dropdown-container__list::-webkit-scrollbar-track {
    background: transparent !important;
}
.agentic-state-dropdown .cro-dropdown-container__list::-webkit-scrollbar-thumb {
    background: #d0d8e4 !important;
    border-radius: 3px !important;
}
.agentic-state-dropdown .cro-dropdown-container__list::-webkit-scrollbar-thumb:hover {
    background: #b8c2d1 !important;
}
.agentic-state-dropdown .cro-dropdown-container__list::-webkit-scrollbar-button,
.agentic-state-dropdown .cro-dropdown-container__list::-webkit-scrollbar-button:single-button,
.agentic-state-dropdown .cro-dropdown-container__list::-webkit-scrollbar-button:vertical:start:decrement,
.agentic-state-dropdown .cro-dropdown-container__list::-webkit-scrollbar-button:vertical:end:increment {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
}
.agentic-state-dropdown .cro-dropdown-container__list::-webkit-scrollbar-corner {
    background: transparent !important;
}

/* No separate Confirm step — tapping an option in the list acts immediately, same as
   the pills this replaced, so the trailing "Get Quotes"-style button is hidden. */
.agentic-state-dropdown .cro-dropdown-container__button {
    display: none !important;
}

.agentic-messages {
    display: none;
    margin-bottom: 10px;
}

.agentic-messages.open {
    display: block;
}

.agentic-msg {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    align-items: flex-start;
}

.agentic-msg--user {
    flex-direction: row-reverse;
    margin-top: 20px;
}

/* #2139: a question needs more air above it than the flat 10px every message carries. That
   spacing was set when questions read at body size; they are 19px now, and a heading that size
   sitting 10px under the previous question's last option reads as part of it rather than as the
   next thing being asked — most obvious scrolling back up through answered questions.
   Collapses with the previous message's 10px bottom margin (.agentic-messages is a block, so
   sibling margins collapse), so this value IS the resulting gap, not an addition to it.
   Margin rather than padding so it stays outside the border box, where the top-pin scroll
   (offsetTop-based) and .ag-msg-pinned-top's own padding are unaffected by it. */
.agentic-msg--question {
    margin-top: 50px;
}
/* #2150: the star 1px up rather than the question 1px down — the same correction, from the side
   that is safe to move. The row is align-items:flex-start, so the star's top edge and the text's
   line-box top start level, and the line box's leading left the question reading a touch high
   against it.
   Two reasons this is the side to nudge. The pin arithmetic measures the MESSAGE's border box and
   the question's own margins; the star is inside that box and invisible to all of it. And a
   relative offset UPWARD overflows towards the top of the scroll container, which scrollHeight
   does not count — nudging the text down instead added a pixel to scrollHeight, and adoptTopPin
   only skips its scroll correction while the position is off by no more than 1px, so it tipped
   that correction back on and the jerk came with it.
   Desktop only: mobile pairs a 21px star with 15px text and had its own offset worked out in
   #2139 (see the bubble's padding-top there), so this correction does not carry over — it is
   reset in the max-width:767px block. */
.agentic-msg--question .agentic-msg__icon {
    position: relative;
    top: -2px;
}
/* #2150: the "✓ Got it, your … has been updated." acknowledgement. It is the end of the question
   above it, so it takes that question's own gap — at the flat 10px every message shares, its Izzy
   star sat right under the previous question's last option and read as belonging to it.
   Only when it follows another bot message (see addBotMessage): after a typed change the buyer's
   own bubble is directly above, with its own spacing. */
.agentic-msg--ack.agentic-msg--ack-spaced {
    margin-top: 50px;
}
/* Every other message is align-items:flex-start, which lines the top of the 34px star up with the
   top of the text beside it — fine for a question, whose bubble runs deeper than the star, but the
   acknowledgement is a single short line, so the star hung below it. It is one line by
   construction, so centring the row is exactly right here and nowhere else. */
.agentic-msg--ack {
    align-items: center;
}
/* Centred, the line box's middle already meets the star's middle — but a line box includes room
   for descenders, so the letters themselves ride ~3px above it and the ✓ read as sitting high on
   the star. Nudged down by that much: (8 - 2) / 2. Padding is free here because the 34px star is
   the taller of the two, so the row height — and everything below it — does not move. Mobile is
   the other way round (the star is the shorter one) and gets its own treatment below. */
.agentic-msg--bot.agentic-msg--ack .agentic-msg__bubble {
    padding: 8px 0 2px;
}

/* A question that follows another bot message directly (no buyer bubble between them) — the
   acknowledgement above and the question it hands back to. The gap stays, so the question still
   reads as its own thing, but comes in under the full 50px: there are no options above it for
   that spacing to clear, only the one line it is answering. */
.agentic-msg--question.agentic-msg--question-tight {
    margin-top: 22px;
}

/* The pinned question is the one exception, and it is arithmetic rather than a special case:
   .ag-msg-pinned-top adds 24px of padding INSIDE it, which stacks on top of this margin and made
   the newest question sit noticeably further from the one above than any earlier pair. 26 + 24
   lands on the same 50px every other question gets, so the feed reads evenly whichever question
   the buyer has scrolled to. Pinned at the top the margin is scrolled off (see adoptTopPin) and
   only the 24px shows, which is the clearance that state wants. */
.agentic-msg--question.ag-msg-pinned-top {
    margin-top: 26px;
}

/* #2014: the line that closes an exchange — currently the sign-off under the price estimate's
   "Was that helpful?" buttons. Every message shares a flat 10px bottom margin, which reads fine
   between a question and its own options but leaves a closing reply sitting right on top of the
   compact pills it is answering. Same 20px a buyer's own bubble takes, so the beat between the
   two reads like every other change of speaker rather than a new value invented for one line. */
.agentic-msg--closing {
    margin-top: 20px;
}

/* Set by setTopPinPadding (category-agentic.js) on whichever message is currently
   anchored at the top of the chat area. Bot messages carry no top margin, so pinned
   flush they sat tight against the sticky header and the Izzy icon read as misaligned
   with its question text. ALL of that clearance lives here rather than in the scroll
   offset: the pin deliberately stops flush against the header (see topGapForPin),
   because any gap there is a window the previous question's option pills peek through.
   Padding is inside the pinned message, so it can only ever show blank space. */
.agentic-msg.ag-msg-pinned-top,
.agentic-success.ag-msg-pinned-top {
    padding-top: 24px !important;
}
/* #2139: a question's 26px top margin is NOT cancelled here, even though it lands above this
   padding when the question is the pinned one. Cancelling it was the first attempt and it cost
   the gap between that question and the one before it for anyone scrolling back up — the two
   have to be independent. The margin stays, and adoptTopPin scrolls past it instead, so the
   pinned view shows only the 24px above while the feed keeps its full spacing. */

.agentic-msg__bubble {
    max-width: 80%;
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 16px;
    line-height: 1.45;
}

.agentic-msg--bot .agentic-msg__bubble {
    background: transparent;
    color: #1a2535;
    padding: 2px 0;
}

.agentic-msg--user .agentic-msg__bubble {
    background: var(--ag-theme);
    color: #fff;
}

/* Success panel — shown once a quote request is submitted, replacing the
   plain-text "request sent" bot bubble with a centered tick animation. */
.agentic-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 12px 4px;
    /* #2014 gave this a 48px bottom gap so the price-estimate offer sat clearly below the panel.
       Halved: the offer and its two buttons follow underneath, and on a phone that much dead
       space was enough to push them off the bottom of the screen — a question nobody can see is
       worse than one that sits a little close to the tick above it. */
    margin: 4px 0 24px;
}

.agentic-success__tick {
    width: 130px;
    height: 130px;
}

/* #2150: 19px, the same as every question on the card (see .agentic-msg__bubble--prompt). This is
   the one panel confirming the thing the buyer came to do, and at body size it read as smaller
   than the questions that led up to it. Mobile keeps 15px for the same reason — that is the
   question size there. */
.agentic-success__headline {
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #1a2535;
    margin-top: 4px;
}

.agentic-success__subtitle {
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 19px;
    font-style: italic;
    color: #5b5e63;
    margin-top: 4px;
    max-width: 90%;
}

@media (max-width: 767px) {
    .agentic-success__tick {
        width: 70px;
        height: 70px;
    }
    .agentic-success__headline,
    .agentic-success__subtitle {
        font-size: 15px !important;
    }
    /* Tighter still on a phone, where the price-estimate offer and its buttons have to fit under
       the panel on a screen that's already short. */
    .agentic-success {
        padding: 4px 8px 0 !important;
        margin: 2px 0 14px !important;
    }
    /* The subtitle is the line that wraps; let it use the full width so it stays at two lines
       rather than three. */
    .agentic-success__subtitle {
        max-width: 100% !important;
    }
}

.agentic-chat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid #d0d8e4;
    border-radius: 30px;
    padding: 6px 8px 6px 16px;
    background: #ffffff;
    box-shadow: 0 4px 18px rgba(0,0,0,0.13);
    position: relative;
}
.agentic-chat-row {
    max-width: calc(100% - 140px);
    margin-left: 55px;
    margin-right: 20px;
    margin-top: 0;
    /* Was 5px, which only worked because the disclaimer below carried the clearance
       from the card's bottom edge. #2173 removed that line on desktop too, so the
       row now drops into its space (the scroll area above is flex:1) and holds the
       gap itself — a net ~23px lower than before. */
    margin-bottom: 18px;
    flex-shrink: 0;

}
.agentic-chat-input:focus {
    outline: none;
}

/* Chat bar only appears once the buyer has answered the first (location)
   question — JS removes this class once the second question renders
   (renderNextQuestion() in category-agentic.js). Applies on both desktop
   and mobile. */
.agentic-chat-row--step1-hidden {
    display: none !important;
}

.agentic-chat-row:focus-within {
    border-color: var(--ag-theme);
    background: #fff;
    outline: none;
    box-shadow: 0 6px 24px rgba(0,0,0,0.16);
}

.agentic-chat-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #434343;
    outline: none;
    resize: none;
    min-height: 22px;
    max-height: 100px;
    line-height: 1.4;
}

.agentic-chat-send {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ag-theme);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.agentic-chat-send svg {
    width: 16px;
    height: 16px;
    fill: #fff;
}

/* Dictate (voice-to-text) button — shown only while the free-text
   "message" question is the pending step; hidden the rest of the flow. */
.agentic-dictate-btn {
    position: relative;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}
.agentic-dictate-btn:hover {
    background-color: #eef1f5;
}
.agentic-dictate-btn:focus {
    outline: none;
}
.agentic-dictate-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background-color: #333;
    color: #fff;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 9999;
}
.agentic-dictate-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 11px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}
.agentic-dictate-btn:hover .agentic-dictate-tooltip {
    visibility: visible;
    opacity: 1;
}
.agentic-dictate-bubble {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.18);
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.08s ease-out;
    z-index: 1;
    pointer-events: none;
}
.agentic-dictate-btn.listening .agentic-dictate-bubble {
    display: block;
}
.agentic-dictate-btn.listening {
    background-color: rgba(220, 53, 69, 0.12);
}
.agentic-dictate-btn.listening svg {
    stroke: #dc3545 !important;
}
.agentic-dictate-btn.listening .agentic-dictate-tooltip {
    visibility: visible;
    opacity: 1;
}
.agentic-dictate-btn.error .agentic-dictate-tooltip {
    visibility: visible;
    opacity: 1;
    background-color: #dc3545;
}
.agentic-dictate-btn.error .agentic-dictate-tooltip::after {
    border-color: #dc3545 transparent transparent transparent;
}
.agentic-dictate-btn.processing {
    background-color: rgba(108, 117, 125, 0.12);
    animation: agentic-dictate-pulse 1.2s ease-in-out infinite;
}
.agentic-dictate-btn.processing svg {
    stroke: #6c757d !important;
}
.agentic-dictate-btn.processing .agentic-dictate-tooltip {
    visibility: visible;
    opacity: 1;
    background-color: #6c757d;
}
.agentic-dictate-btn.processing .agentic-dictate-tooltip::after {
    border-color: #6c757d transparent transparent transparent;
}
@keyframes agentic-dictate-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ── Get-Quotes CTA mode ──────────────────────────────────────────────────────
   At the summary step the chat bar morphs into a full-width "Get Quotes!" button
   with a "Back to chat" link beside it. Toggled by the --cta class on the row. */
.agentic-chat-cta {
    display: none;          /* shown only when .agentic-chat-row--cta is set */
    align-items: center;
    gap: 16px;
    width: 100%;
}
.agentic-chat-row--cta {
    border-color: transparent;
    box-shadow: none;
    background: transparent;
    padding: 0;
}
.agentic-chat-row--cta .agentic-chat-input,
.agentic-chat-row--cta .agentic-chat-send,
.agentic-chat-row--cta .agentic-dictate-btn {
    display: none !important;
}
.agentic-chat-row--cta .agentic-chat-cta {
    display: flex;
}
/* Hide the in-summary Get Quotes pill while the bar is acting as the CTA. */
.agentic-card.ag-cta-active .agentic-opt--get-quotes {
    display: none !important;
}
/* Hide the chat-bar comet animation while in CTA mode (no border to trace). */
.agentic-chat-row--cta svg[data-comet] {
    display: none !important;
}
.agentic-chat-cta__btn {
    flex: 1 1 auto;
    background: var(--ag-theme);
    color: var(--ag-theme-text);
    border: none;
    border-radius: 30px;
    padding: 13px 22px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0,0,0,0.16);
    transition: box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.agentic-chat-cta__btn:hover {
    opacity: 0.93;
    box-shadow: 0 6px 22px rgba(0,0,0,0.24);
    transform: translateY(-1px);
}
/* Right-pointing hand to the left of "Get Quotes!" */
.agentic-cta-hand {
    height: 24px;
    width: auto;
    display: inline-block;
    clip-path: inset(10% 8% 10% 10%);
    margin-top: -3px;
    margin-bottom: -3px;
    margin-left: -3px;
    margin-right: 4px;
    vertical-align: middle;
    flex-shrink: 0;
}
.agentic-chat-cta__back {
    flex-shrink: 0;
    color: #6b7280;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}
.agentic-chat-cta__back:hover {
    color: #434343;
}

.agentic-intro {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: .88rem;
    color: #3a4a5c;
    margin-top: 20px;
    padding-top: 14px;
    margin-bottom: 12px;
}

.agentic-msg__icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ag-theme);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
    color: #fff;
}

/* Instant price-estimate banner — non-interactive, slides in from the right on
   page load and stays put. Positioned absolute against .agentic-card itself
   (not in normal flow) — the empty space to the right, below the hero image.
   Being out of flow also means it can never get pushed past .agentic-card's
   pre-chat content-height clip (see :not(.ag-chat-started) above).
   top here is only a fallback for the instant before JS runs — alignPriceBanner()
   in category-agentic.js overwrites it (inline style) to keep the banner's
   bottom edge flush with the location box's bottom, in both its tall (pre-chat)
   and collapsed (post-chat) heights. */
.agentic-price-banner-row {
    position: absolute;
    top: 480px;
    /* Flush with the card's right inner edge so the banner reads as emerging from
       the frame — its right side is flattened + un-shadowed below to sell that. */
    right: 0;
    pointer-events: none;
    z-index: 2;
}
.agentic-price-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 380px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    /* Right edge butts against the card frame: flat right corners, and no right
       border so it merges with the frame rather than sitting in front of it. */
    border-right: none;
    border-radius: 12px 0 0 12px;
    /* Shadow only on the left/top/bottom — nothing spilling off the right edge. */
    box-shadow: -3px 2px 10px rgba(0,0,0,0.07);
    padding: 12px 16px;
    box-sizing: border-box;
    pointer-events: none;   /* purely visual banner — nothing to click */
    animation: agPriceBannerSlideIn 1.1s ease-out;
}
.agentic-price-banner__icon {
    /* Multi-coloured SVG (grey tag, black $?, gold sparkles, green accents) now
       carries its own colours, so no flat theme-tint badge behind it. */
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.agentic-price-banner__icon svg {
    width: 48px;
    height: 48px;
}
.agentic-price-banner__text {
    min-width: 0;
}
.agentic-price-banner__title {
    font-size: 14.5px;
    font-weight: 700;
    color: #1a2535;
    line-height: 1.25;
}
.agentic-price-banner__desc {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.35;
    margin-top: 3px;
}

@keyframes agPriceBannerSlideIn {
    from { opacity: 0; transform: translateX(60px); }
    to   { opacity: 1; transform: translateX(0); }
}

@media (max-width: 767px) {
    /* Mobile: banner slides in from the right and sits 10px below the bottom of the
       location box (right-aligned, non-interactive so taps pass through beneath it).
       alignPriceBanner() in category-agentic.js measures the box and sets the real
       inline `top`; the top/bottom here are just a pre-JS fallback (no !important, so
       the inline value wins). It's only shown BEFORE the first question — once the
       chat bar appears (.ag-chat-started) it's hidden. Thin, compact strip. */
    .agentic-price-banner-row {
        top: auto;
        bottom: 5px;
        right: 0;
    }
    .ag-chat-started .agentic-price-banner-row {
        display: none !important;
    }
    .agentic-price-banner {
        max-width: 280px;
        gap: 8px;
        padding: 5px 11px;
    }
    .agentic-price-banner__icon {
        width: 32px;
        height: 32px;
    }
    .agentic-price-banner__icon svg {
        width: 30px;
        height: 30px;
    }
    .agentic-price-banner__title {
        font-size: 12px;
        line-height: 1.2;
    }
    .agentic-price-banner__desc {
        font-size: 10.5px;
        line-height: 1.25;
        margin-top: 1px;
    }
}

.agentic-intro__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ag-theme);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    font-size: 1rem;
}


.agentic-steps {
    border-top: none;
}

.agentic-card {
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #434343;
}

.agentic-intro,
.agentic-steps,
.agentic-location-label,
.agentic-location-dropdown-wrap,
.agentic-messages,
.agentic-chat-row {
    font-size: 15px;
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #434343;
    padding: 5px 32px 5px 32px;
}

.agentic-intro,
.agentic-steps,
.agentic-location-label,
.agentic-location-dropdown-wrap,
.agentic-messages {
    max-width: calc(100% - 40px);
}

.agentic-msg--user .agentic-msg__bubble {
    background: #f4f4f4;
    color: #434343;
    font-size: 15px;
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 10px 20px;
    border-radius: 18px;
    /* Preserve newlines so multi-line answers (e.g. contact details) stack neatly. */
    white-space: pre-line;
}

.agentic-msg--bot {
    max-width: calc(100% - 45px);
}

.agentic-msg--bot .agentic-msg__bubble {
    background: transparent;
    color: #434343;
    font-size: 16px;
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 2px 0;
    max-width: 100%;
}

.agentic-msg__content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
    animation: agMessageFadeInUp 0.3s ease-out;
}

.agentic-msg__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.agentic-opt--pill {
    padding: 5px 16px;
    border-radius: 20px;
    border: 1.5px solid #d0d8e4;
    background: #fff;
    font-size: 16px;
    font-weight: 500;
    color: #3a4a5c;
    cursor: pointer;
    transition: all .15s;
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    animation: agOptionFadeIn 0.35s ease-out;
}

.agentic-opt--pill:hover {
    border-color: var(--ag-theme);
    color: var(--ag-theme);
}

.agentic-opt--radio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #3a4a5c;
    cursor: pointer;
    width: 100%;
    padding: 4px 0;
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.agentic-opt--checkbox {
    padding: 5px 14px;
    border-radius: 6px;
    border: 1.5px solid #d0d8e4;
    background: #fff;
    font-size: 16px;
    font-weight: 500;
    color: #3a4a5c;
    cursor: pointer;
    transition: all .15s;
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.agentic-opt--checkbox.active {
    background: #fff;
    border-color: #d0d8e4;
    color: #3a4a5c;
}

/* "Get Quotes" CTA — pill-shaped, ~2/3 of full-width */
.agentic-opt--get-quotes {
    display: inline-block !important;
    width: auto !important;
    text-align: center !important;
    background: var(--ag-theme) !important;
    border-color: var(--ag-theme) !important;
    color: var(--ag-theme-text) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 9px 28px !important;
    border-radius: 50px !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15) !important;
    letter-spacing: 0.01em;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    animation: agGQPulse 2.2s ease-in-out 0.8s 3;
}
.agentic-opt--get-quotes:hover {
    opacity: 0.92;
    box-shadow: 0 5px 16px rgba(0,0,0,0.22) !important;
    transform: translateY(-1px);
}

@keyframes agGQPulse {
    0%   { box-shadow: 0 3px 10px rgba(0,0,0,0.15); }
    50%  { box-shadow: 0 5px 20px rgba(0,0,0,0.26); transform: translateY(-2px); }
    100% { box-shadow: 0 3px 10px rgba(0,0,0,0.15); }
}

/* Greyed-out state after buyer has clicked Get Quotes */
/* Submitted via the in-summary button: stays in the theme colour + font (per design),
   just inert — no pulse, hover or pointer interaction. */
.agentic-opt--get-quotes.ag-gq-locked {
    box-shadow: none !important;
    animation: none !important;
    pointer-events: none;
    cursor: default;
    transform: none !important;
}
/* Submitted via the chat-bar CTA: the in-summary button was never shown, so keep it
   hidden afterwards (the bubble just shows the submission text). */
.agentic-opt--get-quotes.ag-gq-hidden {
    display: none !important;
}

.agentic-opt--confirm {
    padding: 5px 20px;
    border-radius: 20px;
    border: none;
    background: var(--ag-theme);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    animation: agOptionFadeIn 0.35s ease-out;
}

.agentic-opts--locked { pointer-events: none; opacity: 0.55; }
/* Post-submit lock: answers can no longer be changed, but stay fully readable
   as a record of what was sent (no dimming, unlike the transient --locked state). */
.agentic-opts--sent-lock { pointer-events: none; }

/* Remove bold from radio labels */
.agentic-opt--radio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 400;
    color: #3a4a5c;
    cursor: pointer;
    width: 100%;
    padding: 4px 0;
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    animation: agOptionFadeIn 0.35s ease-out;
}

/* Hide default radio, replace with teal custom */
.agentic-opt--radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #d0d8e4;
    flex-shrink: 0;
    cursor: pointer;
    transition: all .15s;
    position: relative;
    /* Bootstrap (loaded on this page) sets `input[type=radio] { margin: 4px 0 0 }` for its own
       stacked .radio layout. In this flex row align-items:center centres the item's MARGIN box,
       so that stray 4px lands the circle four pixels below the middle of its label. Zeroed here
       rather than nudged with a negative offset: the offset would be compensating for a margin
       that shouldn't apply in the first place, and would break if Bootstrap's value changed. */
    margin: 0;
    /* With the margin gone the boxes are level to within a pixel, and the circle lands between
       the label's x-height centre (0.45px above it) and its cap centre (1.05px below). This
       lift sits above both — a deliberate look, not a correction to the geometry. */
    top: -1px;
    outline: none;
}

.agentic-opt--radio input[type="radio"]:focus,
.agentic-opt--radio input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: none;
}

.agentic-opt--radio input[type="radio"]:checked {
    border-color: var(--ag-theme);
    background: var(--ag-theme);
    box-shadow: inset 0 0 0 3px #fff;
}

/* Pre-selected radio label (shown when Izzy confirms an answer change) —
   text stays #434343; only the radio button circle itself gets theme colour */
.agentic-opt--radio.active {
    font-weight: 600;
}

/* Rich-card options (e.g. Budget): radio + expandable subheader/bullet details.
   Mirrors .cq-rich-card from rfq.css, themed for the agentic chat widget. */
.agentic-msg__options--richcards {
    flex-direction: column;
    width: 100%;
}

.agentic-richcard {
    display: flex;
    align-items: flex-start;
    width: 100%;
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
    position: relative;
    background: #fff;
    transition: border-color .15s;
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    animation: agOptionFadeIn 0.35s ease-out;
}

.agentic-richcard:hover {
    border-color: #aaa;
}

.agentic-richcard--plain {
    border: none;
    padding-left: 0;
}

.agentic-richcard__radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.agentic-richcard__radio {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #d0d8e4;
    margin-right: 12px;
    margin-top: 2px;
    position: relative;
    transition: border-color .15s;
}

.agentic-richcard__radio-input:checked ~ .agentic-richcard__radio {
    border-color: var(--ag-theme);
    background: var(--ag-theme);
    box-shadow: inset 0 0 0 3px #fff;
}

.agentic-richcard__content {
    flex: 1;
    min-width: 0;
}

.agentic-richcard__header {
    font-weight: 700;
    font-size: 16px;
    color: #3a4a5c;
    line-height: 1.3;
}

.agentic-richcard__subheader {
    font-size: 14px;
    color: #3a4a5c;
    margin-top: 2px;
    line-height: 1.4;
    font-weight: normal;
}

.agentic-richcard__points {
    display: none;
    margin: 10px 0 0 0;
    padding-left: 18px;
    list-style: disc;
    font-weight: normal;
}

.agentic-richcard__points li {
    font-size: 14px;
    color: #3a4a5c;
    margin-bottom: 4px;
    line-height: 1.3;
}

.agentic-richcard.is-expanded .agentic-richcard__points {
    display: block;
}

.agentic-richcard.active {
    border-color: var(--ag-theme);
}

.agentic-richcard__radio {
    cursor: pointer;
}

/* "More info" toggles the expanded details — the only part of the card that
   doesn't select it on click. Plain underlined text, sized to match the
   subheader (brief description) text and coloured like the main option text
   (#3a4a5c), not a button. Desktop pulls it into the old chevron's top-right
   corner slot; mobile leaves it in normal flow, under the header/subheader
   text, since there's no room in the corner at that width. */
.agentic-richcard__more-info {
    display: inline-block;
    /* Same gap as header→subheader (subheader's own margin-top: 2px), so
       "More info" sits the same distance below the subheader as the subheader
       sits below the header. */
    margin-top: 2px;
    color: #3a4a5c;
    font-size: 14px;
    font-weight: normal;
    text-decoration: underline;
    cursor: pointer;
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ── Buying Assistant: floating AI button + overlay panel ────────────────────
   Replaces the old always-visible chat bar. Trigger link mirrors
   .agentic-richcard__more-info's styling (underlined text, same secondary
   color). The panel is a rounded floating card that overlays the question
   (not a viewport-edge-docked slide panel) with a dimming backdrop behind it;
   on mobile it becomes a bottom sheet instead. */
.agentic-ba-trigger {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    background: none;
    border: none;
    padding: 0;
    color: #3a4a5c;
    font-size: 16px; /* the conversation's body size — deliberately not the larger question size */
    font-weight: normal;
    cursor: pointer;
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.agentic-ba-trigger svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--ag-theme);
}
.agentic-ba-trigger span {
    text-decoration: underline;
}
/* Hides a trigger that has nothing to offer yet, or nothing left to do. "Still need help?" wears
   it until "Help me choose" has been used (see addBotMessage); "Help me choose" wears it once its
   tips are showing, since there is no hiding them again. */
.agentic-ba-trigger--deferred {
    display: none;
}
.agentic-ba-trigger:not(.agentic-ba-trigger--inline) {
    animation: agOptionFadeIn 0.25s ease both;
    /* "Still need help? Ask our Buying Assistant" is long enough to wrap on a narrow phone —
       keep the sparkle beside the first line rather than floating between the two. */
    align-items: flex-start;
    text-align: left;
}
.agentic-ba-trigger:not(.agentic-ba-trigger--inline) svg {
    margin-top: 2px;
}

/* ── Buying Assistant: per-option help ───────────────────────────────────────
   "Help me choose" reveals a short definition + what the option is actually
   used for, directly beneath its own option. Each option is wrapped in a slot
   that is display:contents while hidden, so the options widget lays out
   exactly as it did before (flex-wrapped pills, stacked radios/checkboxes) and
   only becomes a full-width stacked row once help is showing — at which point
   one option per row is what we want anyway.

   The blurb sits on a neutral light grey rather than the portal's tint: the
   tint varies per portal, and on the stronger ones it read as another coloured
   chat bubble competing with the option above it. Grey keeps it as a quiet
   aside inside the card, and the theme-coloured left edge is enough to tie it
   back to the assistant. */
.agentic-opt-slot {
    display: contents;
}
.agentic-msg__options.is-showing-help .agentic-opt-slot {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}
.agentic-opt-help {
    display: none;
}
.agentic-msg__options.is-showing-help .agentic-opt-help {
    display: block;
    margin: 6px 0 0 0;
    padding: 10px 12px;
    background: #f4f5f7;
    border-left: 3px solid var(--ag-theme);
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: #3a4a5c;
    animation: agOptionFadeIn 0.25s ease both;
}
/* Deliberately unweighted: the blurb is a one-line aside under an option, and
   bolding half of it made it compete with the option label it belongs to. */
.agentic-opt-help__definition {
    font-weight: 400;
}
/* Definition and guidance read as one short paragraph, not two stacked lines. */
.agentic-opt-help__definition + .agentic-opt-help__guidance::before {
    content: ' ';
}

/* The old chat bar is no longer shown persistently — the floating AI button
   and "Help me choose" triggers replace it. It still morphs into the
   "Get Quotes!" CTA at the summary step (enterQuoteCta/exitQuoteCta), which
   this rule leaves untouched. */
.agentic-chat-row {
    display: none !important;
}
.agentic-chat-row.agentic-chat-row--cta {
    display: flex !important;
}

/* Scoped to .agentic-card (position: relative) rather than the viewport —
   the button and panel live and stay contained inside the chat card, on its
   right side, instead of floating over the whole page. */
.agentic-ba-fab {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ag-theme);
    border: none;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1999;
    color: #fff;
    transition: transform .15s ease-in-out;
}
.agentic-ba-fab:hover {
    transform: scale(1.06);
}
/* Held back on the opening question and revealed by renderNextQuestion, exactly as the chat bar
   is — nothing should compete with the single answer that starts the quote. */
.agentic-ba-fab--step1-hidden {
    display: none;
}
/* #2139/#2173: the same idea at the other end of the flow. The class is applied on every
   breakpoint (see holdBaFabForSummary / releaseBaFabFromSummary in category-agentic.js) and
   this is the rule that gives it effect — it lived inside the mobile block until #2173, on the
   grounds that desktop had room for both the button and "Back to chat". It doesn't: the button
   sits in the same bottom-right corner the CTA row ends in, so on the one screen with a single
   thing to do it is still a second thing to press. Hidden rather than moved, since a button
   relocated out of the way is no less of a second thing.

   What the JS does with it, now identically on both breakpoints: hidden for as long as the chat
   bar is the "Get Quotes!" CTA however far the buyer scrolls; pressing "Back to chat" restores
   the ordinary bar and hands control to the scroll test, which brings the button back once the
   last question before the summary has come back onto the screen; and released for good once
   the quote is sent, when questions are welcome again. */
.agentic-ba-fab--summary-hidden {
    display: none;
}
.agentic-ba-fab svg {
    width: 22px;
    height: 22px;
}

.agentic-ba-backdrop {
    display: none;
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: rgba(0, 0, 0, .35);
    z-index: 2000;
    opacity: 0;
    transition: opacity .2s ease-in-out;
}
.agentic-ba-backdrop.is-open {
    display: block;
    opacity: 1;
}

.agentic-ba-panel {
    position: absolute;
    top: 90px;
    right: 20px;
    bottom: 20px;
    /* Anchored right, so widening moves the LEFT edge outward: the chat bar, the tips and the
       question rows all gain the extra 40px, and the send button stays where the buyer expects it. */
    width: 440px;
    max-width: calc(100% - 40px);
    max-height: 560px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,.22);
    z-index: 2001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px) scale(.97);
    transition: opacity .2s ease-in-out, transform .2s ease-in-out;
    pointer-events: none;
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.agentic-ba-panel.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* The header is the way back plus the progress bar, nothing else. With the panel's
   own name gone, the return is free to read as the primary action it is: dark,
   weighted, with a back arrow, rather than the apologetic grey link it was when it
   had to sit quieter than a title. */
.agentic-ba-panel__header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px 20px 14px;
    border-bottom: 1px solid #e3e8ef;
    flex-shrink: 0;
}
.agentic-ba-panel__close {
    background: none;
    border: none;
    line-height: 1.2;
    cursor: pointer;
    padding: 0;
    text-align: left;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    color: #3a4a5c;
    /* Underlined so it reads as a link. Bold and dark alone made it look like a page
       title with a decorative arrow, which is the one thing it must not look like. */
    text-decoration: underline;
    text-underline-offset: 3px;
}
.agentic-ba-panel__close:hover {
    color: var(--ag-theme);
}
/* The "x" is gone on desktop too, now that the labelled link carries the header. */
.agentic-ba-panel__close-icon {
    display: none;
}
.agentic-ba-panel__close-label {
    display: flex;
    align-items: center;
    gap: 8px;
}
.agentic-ba-panel__close-arrow {
    flex-shrink: 0;
}

/* Mirrors the main quote progress bar (setProgress drives both). The buyer stepped
   sideways to ask a question, not out of the flow, and seeing the same bar says so. */
.agentic-ba-progress {
    height: 5px;
    border-radius: 999px;
    background: #e3e8ef;
    overflow: hidden;
}
.agentic-ba-progress__bar {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--ag-theme);
    transition: width .35s ease;
}

/* Its own row directly above the chat bar, centred: a fixed landmark rather than
   something that follows the conversation around. flex-shrink:0 keeps it out
   of the scrolling body — it must never scroll away with the feed.
   #2139: in the portal's own colour rather than the grey it used to share with the header
   link. It is the way back to the quote request, which is the thing the panel exists to
   support — grey read as fine print at the bottom of the panel. */
.agentic-ba-panel__return {
    flex-shrink: 0;
    display: block;
    width: 100%;
    margin: 0;
    padding: 10px 20px 2px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 13px;
    /* The card's own text colour, not the portal tint. On IndustrySearch that tint is a
       yellow picked to sit behind dark text, so as 13px type on white it was barely legible;
       the underline is what marks this as a link, and it does that job in any colour. */
    color: #434343;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
}
.agentic-ba-panel__return:hover {
    opacity: 0.8;
}
.agentic-ba-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 20px;
}

/* One card per question in the persistent feed. No rule or border above it: the card is
   scrolled flush to the top of the panel when its question is reached, and a line there would
   read as a stray rule across the top of the panel rather than as a separator between two
   questions. The question name is its own visual break; the feed's gap does the rest.

   #2139: the clearance under the header is NOT here — see .agentic-ba-pinned-top below. It began
   as padding on this rule, which missed the buyer's own question bubble when that was what got
   pinned. */
.agentic-ba-card {
    animation: agMessageFadeInUp 0.25s ease-out;
}

/* #2139: set by scrollBaToTop on whichever element it has just pinned to the top of the panel,
   and removed again when the pin moves on. The breathing room has to come from INSIDE the pinned
   element: any gap left above it in the scroll position would be filled by the bottom of the
   previous card (the feed's gap is only 10px) rather than by whitespace. Padding, inside the
   border box, can only ever show blank space — the same trick .ag-msg-pinned-top uses in the
   main chat, and for the same reason. */
.agentic-ba-pinned-top {
    padding-top: 14px;
}

/* Names the question a card's tip belongs to — scrolling back through the feed,
   the tips need to be attributable to something. */
/* Now the card's headline rather than a caption: with the panel's own name gone
   from the header, the question is what tells the buyer where they are. */
.agentic-ba-card__question {
    font-size: 16px;
    font-weight: 700;
    color: #3a4a5c;
    line-height: 1.3;
    margin-bottom: 10px;
}

.agentic-ba-explanation {
    font-size: 15px;
    color: #434343;
    line-height: 1.45;
    margin-bottom: 12px;
}
.agentic-ba-explanation:empty { display: none; }

/* Icon and text sit as a row so the tip's second line wraps under itself rather
   than back under the bulb. The border is dropped to a soft tint-only panel: with
   an icon carrying the meaning, the full portal-coloured outline was shouting. */
.agentic-ba-toptip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--ag-theme-tint, #fff8e6);
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    color: #3a4a5c;
    line-height: 1.45;
    margin-bottom: 18px;
}
.agentic-ba-toptip:empty { display: none; }
.agentic-ba-toptip__icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--ag-theme, #e8a721);
}
.agentic-ba-toptip__body {
    flex: 1 1 auto;
    min-width: 0;
}

/* Names the chips as something other buyers ask, which is the reason to read them. */
.agentic-ba-chips__label {
    font-size: 13px;
    color: #8a95a3;
    margin-bottom: 8px;
}
/* Stacked one per line, but each only as wide as its own text: stretched to the panel
   width they read as list rows sharing one container, and the ragged right edge is what
   makes them look like separate, tappable things. */
.agentic-ba-chips {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
}
.agentic-ba-chip {
    /* A long question still wraps inside the panel rather than overflowing it. */
    max-width: 100%;
    background: #fff;
    border: 1px solid #d0d8e4;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
    color: #3a4a5c;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.agentic-ba-chip:hover {
    border-color: var(--ag-theme);
    background: var(--ag-theme-tint, #f4f6f9);
}

.agentic-ba-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.agentic-ba-msg {
    display: flex;
    animation: agMessageFadeInUp 0.25s ease-out;
}
.agentic-ba-msg--user {
    justify-content: flex-end;
}
.agentic-ba-msg__bubble {
    max-width: 85%;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.4;
}
.agentic-ba-msg--bot .agentic-ba-msg__bubble {
    background: #f4f6f9;
    color: #434343;
}
.agentic-ba-msg--user .agentic-ba-msg__bubble {
    background: var(--ag-theme);
    color: #fff;
}
/* #2139: the thinking dots reuse the bot bubble for its position and spacing, but they
   aren't a message — with no text to sit on, the grey plate read as an empty box drawn
   around three dots. The dots sit on the panel's own white instead; the left padding goes
   with the plate so they line up with the messages above rather than indenting past them. */
.agentic-ba-msg--bot .agentic-ba-msg__bubble.agentic-typing-dots {
    background: transparent;
    padding: 8px 0;
}

.agentic-ba-panel__input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid #e3e8ef;
    flex-shrink: 0;
}
.agentic-ba-panel__input {
    flex: 1 1 auto;
    resize: none;
    border: 1px solid #d0d8e4;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    max-height: 100px;
}
.agentic-ba-panel__send {
    background: var(--ag-theme);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.agentic-ba-panel__send svg {
    width: 18px;
    height: 18px;
    fill: #fff;
}

@media (max-width: 767px) {
    /* Confined to the chat card — the site header/logo above and the Verified
       Suppliers strip below the card are untouched. .agentic-card has
       overflow:hidden on mobile, so the panel is clipped to the card's own
       rounded corners.
       A sheet over the quote request rather than a screen that replaces it. Stopping short of
       the top leaves the question the buyer was answering visible above it, so the panel reads
       as something opened on top of the flow that can be dismissed, not a different page they
       navigated to. The gap is what makes "Continue quote request" legible as a way back. */
    .agentic-ba-panel {
        position: absolute !important;
        /* #2139: raised 24px — about one line of the conversation — to give the panel a little
           more room, while keeping the strip of flow above it that the note above describes. */
        top: 48px;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        max-height: none;
        /* Square at the bottom: it is flush with the card's own bottom edge. */
        border-radius: 16px 16px 0 0;
        /* Lifts the sheet off the content showing above it, which a flat edge left ambiguous. */
        box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
        transform: translateY(100%);
    }
    .agentic-ba-panel.is-open {
        transform: translateY(0);
    }
    /* Dims the strip of flow still showing above the sheet, so it reads as behind rather than
       as live content competing for the tap. Tapping it closes, same as on desktop. */
    .agentic-ba-backdrop {
        background: rgba(0, 0, 0, .28);
    }
    /* The whole point of this screen is "help me answer this one question", not a
       destination in its own right, so getting back to the quote leads the header.
       The desktop header already stacks the return above the progress bar, which is
       the layout this breakpoint wanted anyway — it only needs tightening up. */
    .agentic-ba-panel__header {
        padding: 14px 16px 12px;
        gap: 10px;
    }
    .agentic-ba-panel__close {
        font-size: 16px;
    }

    /* A touch smaller here: the card it sits inside is much narrower on a phone, and at the
       desktop 52px the button reads as an object dropped on the question rather than beside it. */
    .agentic-ba-fab {
        position: absolute !important;
        right: 16px;
        bottom: 16px;
        width: 46px;
        height: 46px;
    }
    .agentic-ba-fab svg {
        width: 20px;
        height: 20px;
    }
}


/* Square checkbox buttons */
.agentic-opt--checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-radius: 6px;
    border: 1.5px solid #d0d8e4;
    background: #fff;
    font-size: 16px;
    font-weight: 400;
    color: #3a4a5c;
    cursor: pointer;
    transition: all .15s;
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    width: 100%;
    text-align: left;
    animation: agOptionFadeIn 0.35s ease-out;
}

.agentic-opt--checkbox::before {
    content: '';
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid #d0d8e4;
    border-radius: 3px;
    background: #fff;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Same lift as the radio circle, so the two option types sit the same way against their
       labels. No margin to zero here — this square is generated content, not an <input>, so
       Bootstrap's `margin: 4px 0 0` never reached it. */
    position: relative;
    top: -1px;
}

.agentic-opt--checkbox.active::before {
    background: var(--ag-theme);
    border-color: var(--ag-theme);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.agentic-opt--checkbox.active {
    /* Only the checkbox indicator (::before) highlights — leave the
       button border/background untouched. */
    border-color: #d0d8e4;
    color: #3a4a5c;
    background: #fff;
}

/* Options stack vertically */
.agentic-msg__options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

/* Pills stay horizontal */
.agentic-msg__options--pills {
    flex-direction: row;
    flex-wrap: wrap;
}

.agentic-opt--pill.active {
    background: var(--ag-theme);
    border-color: var(--ag-theme);
    color: #fff;
}

/* ── Quantity: "Need more?" ───────────────────────────────────────────────────
   The quantity options stop at 5. This sits underneath them as a quiet link —
   not a sixth option — and swaps itself for a small numeric field once clicked,
   so the common case (1–5) is unchanged and the buyer who needs 40 of something
   has somewhere to say so. */
.agentic-qty-more {
    margin-top: 2px;
}
.agentic-qty-more__trigger {
    padding: 0;
    border: none;
    background: none;
    font-size: 15px;
    font-weight: 500;
    /* Same #3a4a5c as the option labels above it (.agentic-opt--radio) rather than the portal
       colour: it sits at the end of that list and reads as one more line of it, where the theme
       colour made it compete with the options it belongs under. The underline is what marks it
       as something to press. */
    color: #3a4a5c;
    text-decoration: underline;
    cursor: pointer;
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* The trigger has done its job once the field is open — leaving it there would
   only offer to reopen what is already open. */
.agentic-qty-more.is-open .agentic-qty-more__trigger { display: none; }
.agentic-qty-more__field { display: none; }
.agentic-qty-more.is-open .agentic-qty-more__field {
    display: flex;
    align-items: center;
    gap: 8px;
    animation: agOptionFadeIn 0.25s ease-out;
}
/* Overrides .agentic-postcode-input's full width: a quantity is a handful of
   digits, and a field the width of the card invites a sentence. Two classes
   deep because that rule is a single class and sits further down the file —
   at equal specificity its width:100% would win on order alone. */
.agentic-qty-more__field .agentic-qty-more__input {
    width: 140px;
    max-width: 140px;
    flex: 0 0 auto;
    padding: 8px 12px;
}
.agentic-qty-more__confirm {
    margin-top: 0;
    flex: 0 0 auto;
}
.agentic-qty-more.is-invalid .agentic-qty-more__input {
    border-color: #d64545;
}
.agentic-qty-more__error {
    display: none;
    margin-top: 5px;
    font-size: 13px;
    color: #d64545;
}
.agentic-qty-more.is-invalid .agentic-qty-more__error { display: block; }

/* ── Postcode / suburb inline picker ──────────────────────── */
.agentic-postcode-widget {
    flex-direction: column;
    align-items: stretch;
}

.agentic-postcode-input {
    padding: 10px 14px;
    border: 1.5px solid #d0d8e4;
    border-radius: 8px;
    font-size: 16px;
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #1a1a2e;
    background: #fff;
    outline: none;
    transition: border-color .15s;
    box-sizing: border-box;
    width: 100%;
}

.agentic-postcode-input:focus {
    border-color: var(--ag-theme);
}

/* #2173: the "On a specific date" option's label, which is an <input> so the calendar has
   something to write the chosen date into (see openOptionDatePicker). Everything here is in
   service of it NOT looking like a field: it is the option's label, and the buyer should read
   it as one until the moment they pick a date and it says the date instead. Mirrors
   .get-quote__datepicker on the standard category pages, in this card's own type. */
.agentic-opt__datepicker {
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    outline: none;
    /* Wide enough for both the prompt it starts as and the longest date it becomes
       ("30th September 2026"), so selecting one does not resize the option. */
    width: 170px;
}

/* jQuery UI appends #ui-datepicker-div to <body>, so it is not clipped by the card — but it
   does have to clear what the card stacks above it (the Buying Assistant panel is 2001). Same
   rule, and the same value, as the standard category pages use (rfq.css, RFQ-2024-v1.cshtml). */
.ui-datepicker {
    z-index: 9999 !important;
}
/* The Confirm beneath it hugs its own text instead of stretching to the field's width. */
.agentic-date-widget .agentic-opt--confirm {
    align-self: flex-start;
    margin-top: 10px;
}

/* Lives on <body>, positioned via JS */
.agentic-postcode-dropdown {
    background: #fff;
    border: 1.5px solid #d0d8e4;
    border-radius: 8px;
    overflow-y: auto;
    max-height: 220px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.13);
}

.agentic-postcode-option {
    padding: 9px 14px;
    font-size: 14px;
    color: #2a3a4c;
    cursor: pointer;
    transition: background .12s;
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    border-bottom: 1px solid #f0f0f0;
}

.agentic-postcode-option:last-child { border-bottom: none; }

.agentic-postcode-option:hover,
.agentic-postcode-option.is-active {
    background: var(--ag-theme-tint, #eaf6f8);
}

.agentic-postcode-confirm {
    margin-top: 6px;
    width: 100%;
}

.agentic-postcode-confirm:disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* ── Description widget (free-text message input + Confirm/Skip) ───── */
.agentic-description-widget {
    flex-direction: column;
    align-items: stretch;
}

.agentic-description-input-row {
    position: relative;
}

.agentic-description-input {
    padding: 14px 44px 14px 16px;   /* right padding clears the mic sitting inside the field */
    width: 100%;
    resize: none;
    overflow-y: auto;
    line-height: 1.4;
    min-height: 48px;   /* matches the old single-line input's height */
    max-height: 200px;  /* keep in sync with the JS auto-grow cap */
    display: block;
    box-sizing: border-box;
}

/* Mic sits INSIDE the input's top-right corner (rather than vertically centred),
   so it stays put as the textarea grows with content instead of drifting to the
   middle of a multi-line box. */
.agentic-description-input-row .agentic-dictate-btn {
    position: absolute;
    top: 8px;
    right: 4px;
}

.agentic-description-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.agentic-description-actions .agentic-opt--confirm {
    margin-top: 0;
}

/* ── Contact details widget (Full Name / Email / Phone) ───── */
.agentic-contact-widget {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.agentic-contact-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.agentic-contact-label {
    font-size: 11px;
    font-weight: 700;
    color: #6b7a8d;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    line-height: 1;
}

.agentic-contact-input {
    width: 100%;
}

#agTyping {
    align-items: center;
}

.agentic-typing-dots {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 0;
}

.agentic-typing-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b0bac8;
    display: inline-block;
    animation: agTypingBounce 0.75s infinite ease-in-out;
}

.agentic-typing-dots span:nth-child(1) { animation-delay: 0s; }
.agentic-typing-dots span:nth-child(2) { animation-delay: 0.13s; }
.agentic-typing-dots span:nth-child(3) { animation-delay: 0.25s; }

@keyframes agTypingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30%            { transform: translateY(-6px); opacity: 1; }
}

@keyframes agMessageFadeInUp {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes agOptionFadeIn {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.agentic-plus-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid #d0d8e4;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all .15s;
    flex-shrink: 0;
    padding: 0;
}
.agentic-plus-btn.ask-active {
    background: var(--ag-theme);
    border-color: var(--ag-theme);
    color: #fff;
}
.agentic-plus-menu {
    position: absolute;
    bottom: 46px;
    left: 0;
    background: #fff;
    border: 1.5px solid #e3e8ef;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
    min-width: 200px;
    overflow: hidden;
    display: none;
    z-index: 100;
}
.agentic-plus-menu.open {
    display: block;
}
.agentic-plus-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #3a4a5c;
    cursor: pointer;
    text-align: left;
}
.agentic-plus-menu__item:hover {
    background: #f4f6f8;
}
.agentic-plus-menu__item.active {
    color: var(--ag-theme);
    font-weight: 600;
}

.ag-faq-section {
    max-width: 1200px;
    margin: 0 auto 0;
    padding: 32px 12px 24px;
}

.ag-resume-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #e8f9f0;
    border: 1.5px solid #5DCAA5;
    border-radius: 10px;
    padding: 10px 18px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}
.ag-resume-bar__left {
    font-size: 14px;
    color: #085041;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ag-resume-bar__left strong {
    font-weight: 700;
}
.ag-resume-bar__btn {
    padding: 6px 18px;
    border-radius: 20px;
    background: #085041;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 600;
    white-space: nowrap;
}
.ag-faq-layout {
    display: flex;
    gap: 16px;
    align-items: stretch;
}
.ag-faq-left {
    flex: 1 1 0;
    min-width: 0;
    background: #fff;
    border: 1.5px solid #e3e8ef;
    border-radius: 12px;
    padding: 20px 24px;
    min-height: 220px;
}
.ag-faq-left__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    font-size: 14px;
    color: #b0bac8;
}
.ag-faq-left__q {
    font-size: 16px;
    font-weight: 700;
    color: #434343;
    margin-bottom: 12px;
    line-height: 1.4;
}
.ag-faq-left__a {
    font-size: 14px;
    color: #434343;
    line-height: 1.7;
    margin-bottom: 18px;
}
.ag-faq-left__cta {
    padding: 7px 20px;
    border-radius: 20px;
    background: var(--ag-theme);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* IndustrySearch (portal 1) yellow theme needs dark text for legibility */
.body-is .ag-faq-left__cta { color: var(--ag-theme-text); }
.ag-faq-right {
    width: 260px;
    flex-shrink: 0;
    background: #fff;
    border: 1.5px solid #e3e8ef;
    border-radius: 12px;
    padding: 16px;
}
.ag-faq-right__label {
    font-size: 15px;
    font-weight: 700;
    color: #434343;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 10px;
}
.ag-faq-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Show 5 items, then scroll. Each item is multi-line so we allocate ~64px per item to comfortably fit 5 rows. */
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}
.ag-faq-list::-webkit-scrollbar { width: 6px; }
.ag-faq-list::-webkit-scrollbar-track { background: transparent; }
.ag-faq-list::-webkit-scrollbar-thumb { background: #d0d8e4; border-radius: 3px; }
.ag-faq-list::-webkit-scrollbar-thumb:hover { background: #b8c2d1; }
.ag-faq-item {
    font-size: 13px;
    color: #434343;
    padding: 8px 10px;
    border-radius: 7px;
    cursor: pointer;
    line-height: 1.4;
    border: none;
    transition: all .12s;
}
.ag-faq-item:hover {
    background: #f4f6f8;
}
.ag-faq-item.active {
    background: #f4f4f4;
    color: #434343;
    font-weight: 700;
}
.ag-faq-item.buyer-asked {
    font-weight: 700;
    color: #434343;
}
@media (max-width: 767px) {
    .ag-faq-layout {
        flex-direction: column;
    }
    .ag-faq-right {
        width: 100%;
    }
}

.ag-faq-left__a ul,
.ag-faq-left__a ol {
    padding-left: 20px;
    margin: 8px 0;
}

.ag-faq-left__a li {
    margin-bottom: 6px;
    line-height: 1.6;
}

.ag-faq-left__a strong {
    font-weight: 700;
    color: #434343;
}

.ag-faq-left__a p {
    margin-bottom: 10px;
}

/* General question answer — greyed out brief answer */
.agentic-msg--general > .agentic-msg__content > .agentic-msg__bubble:first-child,
.agentic-msg--bot .agentic-msg__bubble.agentic-msg__bubble--answer {
    color: #5b5e63 !important;
    font-size: 16px !important;
}

/* Higher font weight for all question text from AI (the "next question" bubble) */
.agentic-msg--bot .agentic-msg__bubble.agentic-question-text {
    font-weight: 600;
}

/* Desktop: the step the buyer is being asked reads three points larger than the rest of the
   conversation — it is the one line on the card that has to be read, where the confirmations
   around it only need to be available. Every question the flow asks carries --prompt, including
   the free-text steps that aren't bolded, so the size never jumps mid-flow. Mobile is unchanged:
   the max-width:767px rule sets 15px with !important and still wins.

   #2014 put the whole post-estimate exchange in this group too, so that none of it read as a
   lesser kind of message than the offer above it. #2173 takes it back out — see the rule below. */
.agentic-msg--bot .agentic-msg__bubble--prompt {
    font-size: 19px;
}

/* #2173: the whole price-estimate exchange — the offer, the estimate itself, then "Was that
   helpful?" and its reply — at the same size as the finance pitch rather than at prompt size.
   The offer is a question and so carries --prompt, but it comes after the request has been
   sent: it introduces the estimate rather than asking for another answer, which is the job the
   finance pitch does under its header, and that reads at 16px. #2014's worry was that dropping
   these would make them look lesser than the line above — which is true, and is the point.
   .agentic-price-offer outranks --prompt on specificity (three classes against two), so the
   offer lands here without every other question on the card following it down. One selector
   for all three, so they cannot drift apart. */
.agentic-msg--bot .agentic-msg__bubble.agentic-price-offer,
.agentic-msg--bot .agentic-msg__bubble.agentic-price-estimate,
.agentic-msg--bot .agentic-msg__bubble.agentic-ba-link-msg {
    font-size: 16px;
}

/* #2010: Finance question spacing. Overrides the uniform inline <p> margins that parseMarkdown
   emits on every line, so the block reads as four parts rather than one run of text:
   the header, the pitch, the tick list, then the buttons.
   #2139: the second and fourth of those gaps added — the pitch was running straight into the
   ticks, and the last tick straight into the option pills. Both breakpoints, since the lines
   sit this close together on either. */
/* #2150: a full line of air under the header rather than 8px — every other question on the card
   sits its answer content a clear line below the question, and at 8px this one read as a single
   run of copy with a bold first line. */
.agentic-finance-msg p:first-child  { margin-bottom: 24px !important; }  /* header → pitch */
.agentic-finance-msg p:nth-child(2) { margin-bottom: 16px !important; }  /* pitch → ticks */
.agentic-finance-msg p:last-child   { margin-bottom: 10px !important; }  /* ticks → buttons */

/* #2139: Only the first line — "Include finance options" — is the question, so only it keeps
   the 19px prompt size the bubble carries. The pitch and tick points beneath it are supporting
   copy and read at body size; at the prompt size the whole block was a paragraph in headline
   type, which is not how any other question on the card is built. */
.agentic-msg--bot .agentic-msg__bubble.agentic-finance-msg p:not(:first-child),
.agentic-msg--bot .agentic-msg__bubble.agentic-insurance-msg p:not(:first-child) {
    font-size: 16px;
}

/* #2207: Insurance question - same two-part shape as finance (bold header at prompt size, tick
   list beneath at body size), so it takes the same air under the header and the same gap down
   to the option pills. It has no pitch sentence, so there is no middle gap to set: the ticks
   keep parseMarkdown's own 6px between them. */
.agentic-insurance-msg p:first-child { margin-bottom: 24px !important; }
.agentic-insurance-msg p:last-child  { margin-bottom: 10px !important; }

/* #2010: Bold the "Yes, include finance options" pill to draw the eye vs. "No thanks".
   #2207: the insurance "yes" pill carries the same class, for the same reason. */
.agentic-opt--finance-yes { font-weight: 700 !important; }

/* #2014: Price estimate — gap between the low/high bullet list and the closing disclaimer line. */
.agentic-price-estimate ul { margin-bottom: 16px !important; }

/* #2014: "you can ask here" — an inline opener for the Buying Assistant panel, sitting mid
   sentence in a bot line. A button rather than an anchor, since there is nowhere to navigate
   to and a bare href="#" would jump the page; the browser's button chrome is stripped back so
   it inherits the surrounding text and only the colour and underline mark it as clickable. */
.agentic-ba-link {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--ag-theme);
    text-decoration: underline;
    cursor: pointer;
}

.agentic-ba-link:hover,
.agentic-ba-link:focus {
    text-decoration: none;
}

/* ── Quote progress bar ───────────────────────────────────────
   Sits at the very bottom of the chat card. Starts empty,
   advances with each exchange, hits 100% on quote submitted. */
.ag-quote-progress {
    /* Pinned to the bottom edge of the sticky header (its parent), so it slides in
       and out with the header and sits right beneath the "…Get quotes…" banner. */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: transparent;
    overflow: hidden;
    z-index: 2;
}
.ag-quote-progress__bar {
    height: 100%;
    width: 0%;
    background: var(--ag-theme);
    transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ─────────────────────────────────────────────────────────────
   MOBILE LAYOUT (≤767px)
   Placed at END of file so it overrides earlier desktop rules.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Back inside the chat card (same as desktop's approach): the base rule above
       already positions this absolute/top:0 within .agentic-card (which has
       position:relative + overflow:clip), sliding down over the top of
       .agentic-card__scroll's content once the hero title scrolls out — instead of
       floating fixed over the page nav. Only size/spacing need overriding here. */
    .ag-sticky-header {
        height: 34px;
        padding: 0 16px;
    }
    .ag-sticky-header__bar {
        display: none;
    }
    .ag-sticky-header__title {
        font-size: 14px;
        margin-bottom: 0;
    }
    /* Mobile shows the short "{Category} - Get Quotes" variant. */
    .ag-sticky-header__title .ag-sticky-title-full { display: none !important; }
    .ag-sticky-header__title .ag-sticky-title-short { display: inline !important; }
    .ag-sticky-header__subtitle {
        font-size: 13px;
        padding-left: 0;
    }
    /* Mobile sticky header stays simple — just the "{Category} - Get Quotes" text,
       no hands icon (that's a desktop-only embellishment). */
    .ag-sticky-header__quotes-icon {
        display: none !important;
    }
}

@media (max-width: 767px) {

    /* Tinted background fills the remaining viewport space below the
       site header. JS (adjustMobileChatHeight) sets the exact pixel
       height on .agentic-page-wrap. The CSS fallback uses 100dvh. */
    html, body {
        overflow-x: hidden;
    }
    /* The page scrolls naturally on mobile — we do NOT lock it to the viewport.
       A locked (overflow:hidden, JS pixel-height) wrap broke scrolling outside the
       chat and made the card resize every time the address bar showed/hid on scroll. */
    /* ── Mobile chip above card — removed on mobile; see .agentic-hero-bg
       padding-top below for the (reduced) replacement gap above the card. ── */
    .agentic-mobile-chip-wrap {
        display: none !important;
    }
    /* Hide chip + avatar inside the card heading on mobile — intro text stays
       visible (styled below) since it's the "Get quotes to compare..." copy. */
    .agentic-card__heading .agentic-category-chip {
        display: none !important;
    }
    .agentic-card__heading .agentic-avatar-proof {
        display: none !important;
    }
    /* Desktop-only wrapper row for the chip + rating — both its children are
       hidden above, so collapse the row itself rather than leave an empty box. */
    .agentic-card__badge-row {
        display: contents !important;
    }

    /* ── Mobile social proof block (below title/image row) ── */
    .agentic-mobile-proof {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 50% !important;
        max-width: 50vw !important;
        padding: 10px 0 4px !important;
        gap: 4px !important;
        margin-top: -30px !important;
        overflow: hidden !important;
    }
    .agentic-mobile-proof__avatars {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 1px !important;
        width: 100% !important;
    }
    .agentic-mobile-proof__avatars .rfq-avatar-proof__avatars img {
        height: 36px !important;
        width: auto !important;
    }
    .agentic-mobile-proof__avatars .rfq-avatar-proof__score {
        font-size: 15px !important;
        font-weight: 700 !important;
    }
    .agentic-mobile-proof__avatars .rfq-avatar-proof__stars {
        font-size: 13px !important;
        color: #fbc509 !important;
    }
    .agentic-mobile-proof__avatars .rfq-avatar-proof__label {
        font-size: 11px !important;
        font-weight: 600 !important;
    }
    .agentic-mobile-proof__avatars .rfq-avatar-proof__rating {
        margin-left: -4px !important;
    }
    .agentic-mobile-tagline {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #434343 !important;
        margin: 1px 0 0 !important;
        text-align: left !important;
    }

    /* ── Title left half, image right half ── */
    .agentic-card__heading {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        display: block !important;
    }
    .agentic-card__heading .agentic-card__title {
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    /* Mobile-only price range (above Google reviews) */
    .agentic-mobile-price-range {
        display: flex !important;
        justify-content: flex-end !important;
        width: 100% !important;
        margin-top: -20px !important;
        margin-bottom: 0px !important;
        padding-right: 4px !important;
        font-size: 10px !important;
    }
    .agentic-mobile-price-range .jsPriceRangeView {
        line-height: 1.1 !important;
        margin-top: 0 !important;
        font-size: 10px !important;
    }
    /* Hide the original price range inside intro-combined on mobile */
    .agentic-intro-combined .agentic-price-range-row {
        display: none !important;
    }

    /* 1. Price range: reset (original hidden on mobile, handled above) */
    .agentic-price-range-row {
        position: static !important;
        top: auto !important;
        margin-top: 8px !important;
        margin-bottom: 0 !important;
    }

    /* 2. Avatar proof: compact on mobile */
    .agentic-avatar-proof {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        margin-top: 12px !important;
    }
    .agentic-avatar-proof:not(.agentic-mobile-proof__avatars) .rfq-avatar-proof__avatars img {
        height: 32px !important;
    }
    .agentic-avatar-proof:not(.agentic-mobile-proof__avatars) .rfq-avatar-proof__score {
        font-size: 16px !important;
    }
    .agentic-avatar-proof:not(.agentic-mobile-proof__avatars) .rfq-avatar-proof__stars {
        font-size: 14px !important;
    }
    .agentic-avatar-proof:not(.agentic-mobile-proof__avatars) .rfq-avatar-proof__label {
        font-size: 12px !important;
    }
    .agentic-intro-text {
        /* Matches .agentic-mobile-info__line2 ("Google reviews") size, but stays
           at this element's own normal font-weight (400), not bold. */
        font-size: 14px !important;
        font-weight: 400 !important;
        margin-top: 6px !important;
        /* Position offset (not margin) so it moves up on its own without pulling
           the rating/avatar block below it along with it. */
        position: relative !important;
        top: -8px !important;
    }
    .agentic-intro-text__full {
        display: none !important;
    }
    .agentic-intro-text__short {
        display: none !important;
    }
    .agentic-intro-text {
        display: none !important;
    }

    /* 3. Hands below mobile verified suppliers carousel */
    .agentic-mobile-suppliers__hands {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 6px !important;
        clear: both !important;
    }
    .agentic-mobile-suppliers__hands img {
        height: 55px !important;
        width: auto !important;
    }

    /* 4. Floating banner: smaller text so it doesn't overflow */
    .finder-banner__text {
        font-size: 13px !important;
    }
    .finder-banner__btn {
        font-size: 12px !important;
        padding: 7px 10px !important;
    }

    .agentic-page-wrap {
        background: transparent !important;   /* no tint behind the chat card on mobile */
        margin-top: 0 !important;       /* reset desktop -30px pull-up on mobile */
        padding: 0 !important;
        /* flow-root (not block) — prevents the first child's margin-top
           (.agentic-mobile-chip-wrap) from collapsing through and pushing this
           whole tinted box down. Without this, increasing the chip's top margin
           just added white space above the pink area instead of growing it. */
        display: flow-root;
    }
    /* MS logo is taller — pull the tinted wrap up to close the extra gap */
    .body-ms .agentic-page-wrap {
        margin-top: -15px !important;
    }
    .agentic-hero-bg {
        background: transparent !important;
        /* The chip above the card (.agentic-mobile-chip-wrap) is hidden on mobile —
           it used to occupy 47px (14px margin-top + 22px height + 11px margin-bottom).
           17px replaces it here: the earlier 22px (25px net reduction) minus a
           further 5px so the card's top edge sits 5px higher — paired with the
           matching -10 to .agentic-card's height-calc constant below, which
           extends the bottom edge 5px further down too. */
        padding: 2px 6px 4px !important;
        margin-top: -3px !important;
        box-sizing: border-box;
        display: block;
    }
    .agentic-hero {
        display: block !important;
        padding: 0 !important;
        gap: 0 !important;
        max-width: 100% !important;
    }

    /* Hide the desktop right-sidebar suppliers — moved inside card */
    .agentic-suppliers {
        display: none !important;
    }

    /* Chat card fills the visible viewport below the site nav. Height uses svh (the
       SMALL viewport unit) so it stays a CONSTANT size as the address bar shows/hides —
       it never resizes while scrolling. --ag-nav-h (set once by JS) is the height of the
       nav above; 12px (was 24px, then 14px, then 9px) — each +/-N here only moves the
       bottom edge (the top edge is controlled separately by hero-bg's padding-top
       above). The card still scrolls internally and keeps the input pinned at its
       bottom; the page scrolls past it to the rest. */
    .agentic-card {
        height: calc(100vh - var(--ag-nav-h, 104px) - -1px - var(--ag-carousel-h, 64px)) !important;   /* fallback */
        height: calc(100svh - var(--ag-nav-h, 104px) - -1px - var(--ag-carousel-h, 64px)) !important;
        min-height: 320px !important;       /* floor for very short viewports */
        max-height: none !important;
        margin: 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,.08) !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Medical Search only: nudge the chat card's top edge down 2px. Height is
       trimmed by the same 2px so the bottom edge stays exactly where it was. */
    .body-ms .agentic-card {
        margin-top: 5px !important;
        height: calc(100vh - var(--ag-nav-h, 104px) - -1px - var(--ag-carousel-h, 64px) - 5px) !important;
        height: calc(100svh - var(--ag-nav-h, 104px) - -1px - var(--ag-carousel-h, 64px) - 5px) !important;
    }

    /* Scrollable content area */
    .agentic-card__scroll {
        padding: 14px 16px 12px !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        width: 100% !important;
        position: static !important;
        -webkit-overflow-scrolling: touch;  /* smooth momentum scroll on iOS */
        overscroll-behavior: contain;       /* stop iOS scrolling the page behind the card */
    }

    /* Reorder children of scroll area: title+image -> trust/intro -> chat.
       (The suppliers carousel now lives in the card's pinned bottom area, below the chat input.) */
    .agentic-card__top          { order: 1 !important; }
    .agentic-trust              { order: 2 !important; }
    .agentic-mobile-info-row    { order: 3 !important; }
    .agentic-mobile-tagline     { order: 4 !important; }
    .agentic-intro-combined     { order: 5 !important; }
    .agentic-messages           { order: 6 !important; }

    /* ── Mobile info row: rating (left) + price (right) ── */
    .agentic-mobile-info-row {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        column-gap: 8px !important;
        width: 100% !important;
        /* Left margin 0 (was 8px) so the "4.9 … Google reviews" line sits flush-left
           with the title above it, which starts at the scroll's 16px padding. */
        margin: -6px 0 2px 0 !important;
        padding-left: 0 !important;
        text-align: left !important;
    }
    .agentic-mobile-info-row__rating {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        margin-left: 0 !important;
        gap: 2px !important;
        /* Nudge just the rating (stars/4.8/Google reviews), independent of the
           price side of this row and of the subtitle above it. Doesn't shift the
           "Let's get you quotes!" line below since that's a separate flex sibling
           (order-based layout) — the gap between the two just changes visually. */
        position: relative !important;
        top: 5px !important;
    }
    .agentic-mobile-info-row__price {
        flex-shrink: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 2px !important;
        min-width: 0 !important;
        margin-top: 4px !important;
        /* Nudge just "View Price Range" up, independent of the rating on the left
           side of this row. */
        position: relative !important;
        top: -1px !important;
    }
    /* Rating line 1: [G] 4.8 ★★★★★ */
    .agentic-mobile-info__line1 {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        white-space: nowrap !important;
        position: relative !important;
        top: 4px !important;               /* nudge the "4.9 ★★★★★" line down 1px further */
    }
    /* Google "G" logo removed — rating now shows just the score + stars. */
    .agentic-mobile-google-logo {
        display: none !important;
    }
    .agentic-mobile-rating__score {
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #1a1a1a !important;
        line-height: 1.3 !important;
    }
    .agentic-mobile-rating__stars {
        font-size: 15px !important;
        color: #fbc509 !important;
        line-height: 1.3 !important;
        letter-spacing: 1px !important;
    }
    /* Rating line 2: "Google reviews" */
    .agentic-mobile-info__line2 {
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #434343 !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        position: relative !important;
        top: 1px !important;               /* nudge the "Google reviews" line down 1px (was 2px) */
    }
    /* Price column: "View Price Range" link (line 1) */
    .agentic-mobile-info-row__price .price-range-holder {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .agentic-mobile-info-row__price .price-range {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 2px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .agentic-mobile-info-row__price .price-range > br { display: none !important; }
    .agentic-mobile-info-row__price .price-range a {
        font-size: 11px !important;
        font-weight: 400 !important;
        color: #767676 !important;
        text-decoration: underline !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        display: block !important;
    }
    /* Hide original two jsPriceRangeView divs; always show the inline combined one */
    .agentic-mobile-info-row__price .jsPriceRangeView:not(.jsPriceRangeView--inline) {
        display: none !important;
    }
    .agentic-mobile-info-row__price .jsPriceRangeView--inline {
        display: block !important;
        font-size: 11px !important;
        font-weight: 400 !important;
        color: #434343 !important;
        text-align: right !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
    }
    /* Mobile tagline ("Free, Quick and Easy.") removed — rating row now sits
       directly above the delivery question, which shifts up to fill the gap. */
    .agentic-mobile-tagline {
        display: none !important;
    }

    /* Mobile combined intro block */
    .agentic-intro-combined {
        padding: 0 !important;
        margin: 18px 0 0 !important;
        max-width: 100% !important;
        gap: 10px !important;
    }
    /* Drop the desktop top margin so the trust badges sit right under the header.
       Yellow backdrop only tints the TOP portion (question text + trigger) via a
       hard-stop gradient — NOT a real fixed height/overflow/position hack. The
       box's actual height stays auto (= its real content height, dropdown list
       included), because the app's own JS scrolls this whole block out of view
       once answered (pinUserMsgAtTop in category-agentic.js) using its real
       rendered height; faking a shorter box broke that scroll math and left the
       still-open dropdown overlapping later chat content. */
    .agentic-intro-combined__body {
        margin-top: 2px !important;
        background: transparent !important;
        border-radius: 14px !important;
        padding: 6px 10px 8px 6px !important;
        max-width: none !important;   /* full width on mobile — desktop constrains it to a left-hand box */
        box-sizing: border-box !important;
        position: relative !important;
    }
    /* Reuse desktop's ::before tint band (rgba overlay, properly rounded on all
       four corners) instead of a separate mobile-only gradient — that gradient
       stacked under this same ::before and produced a mismatched double tint. */
    .agentic-intro-combined__body::before {
        border-radius: 14px !important;
        /* Desktop widened the tint to hold the "Start here!" pointer and deepened it for the
           second line of the question and the gap above the dropdown. Mobile has none of
           those, so the band keeps exactly the size it always had. */
        width: 426px !important;
        height: 96px !important;
    }
    /* Mobile keeps the original intro: one bold line reading "Let's get quotes! What's your
       location?", and no "Start here!" pointer. The two-line question, the larger headline and
       the green annotation are all desktop's, where there is width beside the question to put
       them. Everything below restores that single line — the lead-in goes back to flowing
       inline, and the question swaps to its short wording. */
    .agentic-intro-start-here {
        display: none !important;
    }
    .agentic-intro-combined__lead {
        display: inline !important;
        font-size: 15px !important;
        font-weight: 700 !important;
    }
    .agentic-intro-combined__question {
        display: none !important;
    }
    .agentic-intro-combined__question-short {
        display: inline !important;
        font-size: 15px !important;
        font-weight: 700 !important;
    }
    .agentic-intro-combined__delivery-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Tighter delivery question row on mobile; small AI icon sits beside the question. */
    .agentic-intro-combined__delivery-row {
        margin: 6px 0 8px !important;
        gap: 8px !important;
        align-items: center !important;
    }
    /* Zero the question's own top margin inside the row so it centres with the icon
       (the gap above now comes from the row's margin-top). */
    .agentic-intro-combined__delivery-row .agentic-intro-combined__delivery {
        margin: 0 !important;
    }
    .agentic-intro-combined__icon {
        width: 21px !important;
        height: 21px !important;
        flex-shrink: 0 !important;
        display: flex !important;
    }
    .agentic-intro-combined__icon svg {
        width: 13px !important;
        height: 13px !important;
    }
    .agentic-intro-combined__text {
        font-size: 14px !important;
    }
    .agentic-intro-combined__list {
        padding-left: 28px !important;
    }
    .agentic-intro-combined__list li {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }
    .agentic-intro-combined__delivery {
        font-size: 15px !important;
        margin-top: 14px !important;
    }
    /* "Let's get quotes." (period, not "!") on mobile only — desktop keeps
       "Let's get you quotes!" — followed by the shared "What's your location?" */
    .agentic-intro-combined__lead-full { display: none !important; }
    .agentic-intro-combined__lead-short { display: inline !important; }

    /* Trust: tight vertical list — small icon "bullets", each point on its own line with
       its label + subtitle, no card box, so it reads like a short paragraph. */
    .agentic-trust {
        width: 100% !important;
        max-width: 100% !important;
        flex-direction: column !important;
        gap: 7px !important;
        padding: 2px 0 !important;
        margin: 2px 0 2px !important;
        position: relative !important;
        top: -6px !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    .agentic-trust__item {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        gap: 8px !important;
        padding: 0 !important;
    }
    .agentic-trust__item:not(:last-child)::after {
        display: none !important;   /* no dividers */
    }
    /* Same numbered bullets as desktop, just shrunk to the size the old icon
       bullets were — the list is one line per step here, so the marker only has
       to sit beside the text rather than head a column. */
    .agentic-trust__icon {
        width: 21px !important;       /* small numbered bullet */
        height: 21px !important;
        flex-shrink: 0 !important;
        background: #fff !important;
        border: 1px solid var(--ag-theme) !important;
        /* Centring the 21px ring on the row's box leaves it sitting a touch low
           against the text, since the line box carries descender space the label
           itself doesn't use. 1px up puts the numeral on the label's optical centre. */
        position: relative !important;
        top: -1px !important;
    }
    .agentic-trust__num {
        font-size: 12px !important;
        font-weight: 400 !important;
        margin-top: 0 !important;
    }
    .agentic-trust__icon svg,
    .agentic-trust__icon img {
        width: 15px !important;
        height: 15px !important;
        object-fit: contain !important;
        display: block !important;   /* strip inline baseline gap so flex-centering is exact */
        margin: auto !important;
    }
    /* Tick beside the third step's label — scaled to the smaller mobile type.
       align-self, not vertical-align: .agentic-trust__text is a flex row here, and a flex item
       ignores vertical-align entirely — so the -2px that reads as positioning on desktop was
       doing nothing at this breakpoint. The row is baseline-aligned, and an inline SVG's
       baseline is its bottom edge, so the whole 13px box sat above the text's baseline and
       read as floating. Centring it on the line puts it level with the words instead.
       The negative left margin pulls it back against the row's own 5px column-gap, which is
       the spacing between words — a tick reads as punctuation on the end of the sentence
       rather than another word in it, so it wants to sit tighter than a word gap. */
    .agentic-trust__tick {
        width: 13px !important;
        height: 13px !important;
        margin-left: -2px !important;
        align-self: center !important;
        /* No nudge needed: the straight tick's stroke sat low in its own viewBox and had to
           be lifted a pixel, but this one is already drawn high in the box, so centring the
           box centres the mark. */
    }
    .agentic-trust__text {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        flex-wrap: wrap !important;
        column-gap: 5px !important;
        text-align: left !important;
        line-height: 1.3 !important;
        width: auto !important;   /* undo desktop's fixed per-item width */
    }
    .agentic-trust__text strong {
        font-size: 13.5px !important;
        color: #434343 !important;
        white-space: nowrap !important;
    }
    .agentic-trust__text > span {
        display: inline !important;   /* show the subtitle next to the label */
        font-size: 12.5px !important;
        font-weight: 400 !important;
        color: #434343 !important;
        white-space: nowrap !important;
        margin-top: 0 !important;
    }
    /* 3rd trust item shows different copy on mobile than desktop. */
    .agentic-trust__text--desktop { display: none !important; }
    .agentic-trust__text--mobile {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        flex-wrap: wrap !important;
        column-gap: 5px !important;
    }
    /* The vertical list has room, so show the full "Verified Suppliers" label. */
    .agentic-trust__label-full { display: inline !important; }
    .agentic-trust__label-short { display: none !important; }

    /* Intro panel is NOT hidden — it scrolls off the top naturally when
       pinUserMsgAtTop() anchors the buyer message at the top of the scroll area. */

    /* Title + small image: left-aligned row (compacted desktop look), image top-right */
    .agentic-card__top {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: none !important;
        gap: 10px !important;
        position: static !important;
    }
    .agentic-card__heading {
        flex: 0 0 65% !important;
        max-width: 65% !important;
        min-width: 0 !important;
        display: block !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 2 !important;
    }
    .agentic-card__title {
        font-size: 27px !important;
        font-weight: 700 !important;
        color: #434343 !important;
        text-align: left !important;
        line-height: 1.2 !important;
        max-width: 100% !important;
        width: auto !important;
        margin: 10px 0 0 0 !important;
        flex: none !important;
        /* Position offset (not margin) so it moves up on its own without pulling
           the subtitle/rating below it along with it. */
        position: relative !important;
        top: -12px !important;
    }
    .agentic-card__subtitle {
        font-size: 14px !important;
        text-align: left !important;
        max-width: 100% !important;
        margin: 7px 0 0 !important;
    }
    .agentic-card__image {
        /* Fixed-size invisible box: every image (whatever its own aspect ratio)
           is scaled down to fit inside via object-fit:contain, so the box height
           never varies between categories and can't overlap the price-range row
           below it. */
        position: static !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        height: 130px !important;
        flex: 0 0 35% !important;
        max-width: 35% !important;
        flex-shrink: 0 !important;
        align-self: flex-start !important;
        object-fit: contain !important;
        margin-top: -20px !important;
        display: block !important;
        object-position: top right !important;
    }
    /* Mobile suppliers block — appears inside the card */
    /* Supplier section: fixed "Verified suppliers" label on the left, chevron arrows,
       and a horizontally-scrolling logo carousel (swipeable on touch). No top/bottom rule. */
    .agentic-mobile-suppliers {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 4px !important;
        /* Bleed out through .agentic-hero-bg's 6px horizontal padding so the tint
           runs edge-to-edge as a full-width strip rather than an inset box. The
           extra 8px of side padding keeps the logos/heading inset from the edges. */
        padding: 6px 14px !important;
        border-top: none !important;
        border-bottom: none !important;
        margin: 2px -6px 0 !important;
        flex-shrink: 0 !important;
        /* Same yellow tint as the page background visible above/below the chat
           card (.agentic-page-wrap's var(--ag-theme-tint)) so this strip reads as
           part of that same tinted area instead of sitting flush on white. */
        background: var(--ag-theme-tint) !important;
        border-radius: 0 !important;
    }
    .agentic-mobile-suppliers__heading {
        flex: 0 0 auto !important;
        width: 68px !important;          /* narrower so the carousel starts further left */
        font-size: 11px !important;
        font-weight: 400 !important;
        color: #434343 !important;
        text-align: left !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 5px !important;
    }
    .agentic-mobile-suppliers__heading-text {
        display: flex !important;
        flex-direction: column !important;
    }
    .agentic-mobile-suppliers__shield {
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0 !important;
    }
    /* Hands graphic removed on mobile — covered by the in-chat infographic instead. */
    .agentic-mobile-suppliers__hands {
        display: none !important;
    }
    .agentic-mobile-suppliers__grid {
        display: flex !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;     /* clip the marquee track */
    }
    /* Transformable marquee track holding the (duplicated) logo set. */
    .agentic-suppliers-track {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        width: max-content !important;
        will-change: transform !important;
    }
    .agentic-mobile-suppliers__grid .agentic-supplier-logo {
        flex: 0 0 auto !important;
        width: 76px !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 6px 6px !important;
        min-height: 42px !important;
        box-sizing: border-box !important;
        scroll-snap-align: start;
    }
    .agentic-mobile-suppliers__grid .agentic-supplier-logo img {
        max-height: 27px !important;
    }
    /* Carousel arrows */
    .agentic-suppliers-arrow {
        flex: 0 0 auto !important;
        width: 18px !important;
        height: 30px !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        color: #9aa3af !important;
        font-size: 22px !important;
        line-height: 1 !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .agentic-suppliers-arrow:focus { outline: none !important; }
    .agentic-suppliers-arrow:active { color: var(--ag-theme, #888) !important; }

    /* Hide desktop-only sections */
    .agentic-steps,
    .ag-faq-section {
        display: none !important;
    }
    /* Delivery label — no icon, no indent, slight left padding */
    .agentic-location-label {
        padding: 0 4px !important;
        margin: 16px 0 12px !important;
        max-width: 100% !important;
        width: 100% !important;
        font-size: 15px !important;
        display: block !important;
    }
    .agentic-location-label .agentic-intro__icon {
        display: none !important;
    }

    /* Location dropdown — full width, left-indented by the AI icon (24px) + its
       gap (8px) so it lines up with the start of the delivery-question text. */
    .agentic-location-dropdown-wrap {
        margin: 0 0 4px 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .agentic-state-dropdown.cro-dropdown-container {
        max-width: 100% !important;
        background: #fff !important;
    }
    .agentic-state-dropdown .cro-dropdown-container__text,
    .agentic-state-dropdown .cro-dropdown-container__list {
        background-color: #fff !important;
    }
    /* Trigger and list-item left padding kept equal (10px) so the pin icon lines
       up with the start of "NSW"/"VIC"/etc below it — not with the question text
       above, which is a separate, unrelated indent. */
    .agentic-state-dropdown .cro-dropdown-container__text {
        height: 34px !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        padding: 0 10px !important;
        /* Full-width divider under the trigger, independent of the list's own
           border-top (guarantees it spans the trigger's full 100% box width,
           not just the part above the list). */
        border-bottom: 1px solid #c3ccd6 !important;
    }
    /* Pin is the shared, theme-coloured .cro-dropdown-container__text::before from
       the base styles (see there) — it applies at every breakpoint, so there's no
       mobile-specific pin. Only the label text needs mobile sizing here. */
    .agentic-state-dropdown .js-sizedDropdownCountry__btnText {
        font-size: 15px !important;
        color: #3a4a5c !important;   /* match desktop trigger text colour */
    }
    .agentic-state-dropdown .cro-dropdown-container__list {
        height: 110px !important;
        max-height: 110px !important;
        /* The trigger's own border-bottom above already draws the full-width
           divider (comment above it) — the list's border-top from the base rule
           sits right beneath it, reading as a double line on mobile. */
        border-top: none !important;
        /* `scroll` (not `auto`) forces the scrollbar track/thumb to always render
           instead of only appearing while actively touch-scrolling, matching the
           persistent desktop scrollbar. Android Chrome respects the styled
           ::-webkit-scrollbar rules above once forced this way; iOS Safari ignores
           ::-webkit-scrollbar entirely and always uses its own fading overlay
           indicator regardless — that's an OS-level limitation this can't override. */
        overflow-y: scroll !important;
    }
    .agentic-state-dropdown .cro-dropdown-container__list li.list-item-cro a {
        /* Line the state names up with the "Select your state" text in the trigger.
           Geometry (10px trigger padding + 16px pin + 8px gap) predicts 34px, but the
           pin renders narrower on the mobile trigger, so the text actually starts
           ~16px in — matching that keeps NSW/VIC/QLD flush under the label. */
        padding: 5px 10px 5px 16px !important;
        font-size: 15px !important;
        font-weight: 400 !important;
    }

    /* Chat messages — wider, slight left indent, small AI icon beside bot text */
    .agentic-messages {
        padding: 0 4px !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .agentic-msg {
        gap: 8px !important;
        padding-left: 4px !important;
    }
    .agentic-msg--bot .agentic-msg__icon {
        display: flex !important;
        width: 21px !important;
        height: 21px !important;
    }
    /* #2150: the desktop question-star nudge is for a 34px star against 19px text. This pairing
       is 21px against 15px and was balanced separately in #2139, so it starts level. */
    .agentic-msg--question .agentic-msg__icon {
        top: 0;
    }
    .agentic-msg--bot .agentic-msg__icon svg {
        width: 13px !important;
        height: 13px !important;
    }
    .agentic-msg--bot {
        max-width: 100% !important;
    }
    .agentic-msg--bot .agentic-msg__content {
        max-width: calc(100% - 29px) !important;
        flex: 1 1 auto !important;
    }
    .agentic-msg--bot .agentic-msg__bubble {
        max-width: 100% !important;
        font-size: 15px !important;
        /* #2139: the row is align-items:flex-start, so the icon's top edge lines up with the
           top of the bubble — and the bubble's 2px top padding then sat the text lower than
           the middle of the 21px icon beside it, which read as the star floating high. Trimmed
           by a pixel here only: desktop's 34px icon against 19px text is already balanced. */
        padding-top: 1px !important;
    }
    .agentic-msg--user .agentic-msg__bubble {
        max-width: 85% !important;
    }
    /* Same idea as the desktop rule, scaled down: mobile questions are 15px, not 19px, so they
       need proportionally less room above to separate from the question before them. The pinned
       pair works the same way — 16 + the 24px of .ag-msg-pinned-top padding is the 40px every
       other question gets. */
    .agentic-msg--question {
        margin-top: 40px;
    }
    .agentic-msg--question.ag-msg-pinned-top {
        margin-top: 16px;
    }
    /* #2150: same pair as desktop, scaled to mobile's 40px question gap — the acknowledgement
       takes the full gap above it, the question it hands back to takes a little under. */
    .agentic-msg--ack.agentic-msg--ack-spaced {
        margin-top: 40px;
    }
    .agentic-msg--question.agentic-msg--question-tight {
        margin-top: 18px;
    }
    /* Here the 21px star is the SHORTER of the two — the 24.75px line box sets the row height —
       so desktop's padding trick would push the question below it down. A relative offset instead:
       it sits outside layout, so the row keeps its height. 4px rather than desktop's 3, because a
       star that centres inside the text starts lower against the letters than one the text
       centres inside. (padding-top stays at the mobile block's own 1px.) */
    .agentic-msg--bot.agentic-msg--ack .agentic-msg__bubble {
        position: relative;
        top: 4px;
    }
    /* #2139: the desktop rule drops the finance sub-copy below the 19px prompt size — but
       mobile questions are already 15px, and a `p` rule beats the bubble's inherited value,
       so without this the supporting lines would come out LARGER than the header above them. */
    .agentic-msg--bot .agentic-msg__bubble.agentic-finance-msg p:not(:first-child),
    .agentic-msg--bot .agentic-msg__bubble.agentic-insurance-msg p:not(:first-child) {
        font-size: 14px !important;
    }
    /* #2173: the price-estimate exchange matches that same body size here too. !important
       because every bot bubble is 15px !important at this breakpoint. */
    .agentic-msg--bot .agentic-msg__bubble.agentic-price-offer,
    .agentic-msg--bot .agentic-msg__bubble.agentic-price-estimate,
    .agentic-msg--bot .agentic-msg__bubble.agentic-ba-link-msg {
        font-size: 14px !important;
    }
    /* All AI-side text (questions, action text, options, location box) is 15px on
       mobile. The buyer's own sent messages (.agentic-msg--user) are untouched. */
    .agentic-opt--pill,
    .agentic-opt--radio,
    .agentic-opt--checkbox,
    .agentic-opt--confirm,
    .agentic-opt--get-quotes,
    .agentic-chat-cta__btn,
    .agentic-chat-cta__back,
    .agentic-richcard__header,
    .agentic-ba-trigger {
        font-size: 15px !important;
    }
    .agentic-richcard__subheader,
    .agentic-richcard__points li,
    .agentic-richcard__more-info {
        font-size: 13px !important;
    }
    /* Match the header→subheader gap so "More info" sits the same distance
       below the brief description as the description sits below the price range. */
    .agentic-richcard__more-info {
        margin-top: 2px !important;
    }
    /* Keep the card no bigger than the other option widgets at this size */
    .agentic-richcard {
        padding: 10px 12px !important;
    }
    .agentic-richcard--plain {
        padding-left: 0 !important;
    }

    /* Chat input row — wider, centered. #2150: the disclaimer that used to sit under it is gone
       on mobile, so the row takes that space back — pushed down off the summary above it, with
       enough left beneath to keep it clear of the card's bottom edge. */
    .agentic-chat-row {
        margin: 10px 14px 14px !important;
        max-width: calc(100% - 28px) !important;
        width: calc(100% - 28px) !important;
        flex-shrink: 0 !important;
    }
    .agentic-chat-row--cta {
        border-color: transparent !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    .agentic-chat-input {
        font-size: 16px !important; /* 16px prevents iOS Safari auto-zoom on focus */
    }

    /* Postcode / contact widgets — mobile sizing */
    .agentic-postcode-input,
    .agentic-contact-input {
        font-size: 16px !important; /* prevents iOS auto-zoom */
        padding: 10px 12px !important;
    }
    .agentic-postcode-widget,
    .agentic-contact-widget {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .agentic-contact-group {
        width: 100% !important;
    }

    /* Progress bar — keep visible but flush with card bottom */
    .ag-quote-progress {
        /* Straight bar now (it sits at the sticky header's bottom edge, not the
           rounded card bottom). Positioning is inherited from the base rule. */
        border-radius: 0 !important;
    }
}

/* ── Full-width HR: break out of the max-width category-container ── */
.category-container hr.line-cro {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    margin-right: 0;
    box-sizing: border-box;
}

/* ── Izzy on-demand hint (shown after first question renders) ── */
.agentic-izzy-hint {
    text-align: center;
    font-size: 11px;
    color: var(--ag-theme);
    opacity: 0.75;
    padding: 4px 12px 6px;
    pointer-events: none;
    user-select: none;
}